Added Vercel link of the UI calculator

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.22.cjs"

package.json

@@ -48,9 +48,11 @@
     "react-hot-toast": "^2.4.1",
     "react-mixpanel": "1.0.5",
     "react-pro-sidebar": "1.1.0",
+    "react-responsive": "^10.0.0",
     "react-responsive-carousel": "3.2.23",
     "react-select": "5.8.0",
     "react-share": "5.1.0",
+    "recharts": "^2.12.7",
     "sharp": "^0.33.4",
     "starknet": "6.4.1",
     "starknetkit": "1.1.9",

src/app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import tg from '@/assets/tg.svg';
+import { Calculator } from '@/components/Calculator';
 import Pools from '@/components/Pools';
 import Strategies from '@/components/Strategies';
 import CONSTANTS from '@/constants';
@@ -37,6 +38,8 @@
     console.log('tab', tab);
     if (tab === 'pools') {
       setTabIndex(1);
+    } else if (tab === 'calculator') {
+      setTabIndex(2);
     } else {
       setTabIndex(0);
     }
@@ -51,6 +54,8 @@
   function handleTabsChange(index: number) {
     if (index === 1) {
       setRoute('pools');
+    } else if (index === 2) {
+      setRoute('calculator');
     } else {
       setRoute('strategies');
     }
@@ -98,6 +103,15 @@
           >
             Find yields
           </Tab>
+          <Tab
+            color="light_grey"
+            _selected={{ color: 'color2Text' }}
+            onClick={() => {
+              mixpanel.track('Calculator opened');
+            }}
+          >
+            Calculator
+          </Tab>
         </TabList>
         <TabIndicator
           mt="-1.5px"
@@ -113,12 +127,15 @@
           <TabPanel bg="highlight" float={'left'} width={'100%'}>
             <Pools />
           </TabPanel>
+          <TabPanel bg="highlight" float={'left'} width={'100%'}>
+            <Calculator />
+          </TabPanel>
         </TabPanels>
       </Tabs>
       {/* <hr style={{width: '100%', borderColor: '#5f5f5f', float: 'left', margin: '20px 0'}}/> */}
       <Center padding="10px 0" width={'100%'} float={'left'}>
         <Link href={CONSTANTS.COMMUNITY_TG} isExternal>
           <Image src={tg.src} width="50" margin="0 auto" />
         </Link>
       </Center>
       <Center width={'100%'} float="left">