Merge pull request #54 from akiraonstarknet/dev

Navbar banner change, deposit/withdraw input bug fixes
strkfarm · Sep 10, 2024 · ff5a34f · ff5a34f
2 parents aa50261 + 8f1fb4b
commit ff5a34f
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 21 deletions.
diff --git a/.env.sample b/.env.sample
@@ -1,4 +1,4 @@
-NEXT_PUBLIC_RPC_URL=
-RPC_URL=
-
-DATABASE_URL=
+NEXT_PUBLIC_RPC_URL=
+RPC_URL=
+
+DATABASE_URL=
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "start": "next start",
     "lint": "next lint",
     "build": "next build",
+    "build:prod": "yarn lint:fix && yarn format:fix && yarn build",
     "lint:check": "eslint --config .eslintrc.json .",
     "lint:fix": "eslint --config .eslintrc.json . --fix",
     "format:check": "prettier --check \"**/*.{ts,tsx,json}\"",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -140,4 +140,8 @@ td, th {
 
 th {
   color: var(--chakra-colors-color2Text) !important;
+}
+
+.orange {
+  color: orange;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,15 +13,15 @@ export const metadata: Metadata = {
     title: 'STRKFarm | Yield aggregator on Starknet',
     description:
       'Find and invest in high yield pools. STRKFarm is the best yield aggregator on Starknet.',
-    images: ['https://static-assets-8zct.onrender.com/strkfarm/preview.png'],
+    images: ['https://static-assets-8zct.onrender.com/strkfarm/og-img-png.png'],
   },
   twitter: {
     creator: '@akiraonstarknet',
     title: 'STRKFarm | Yield aggregator on Starknet',
     description:
       'Find and invest in high yield pools. STRKFarm is the best yield aggregator on Starknet.',
     card: 'player',
-    images: ['https://static-assets-8zct.onrender.com/strkfarm/preview.png'],
+    images: ['https://static-assets-8zct.onrender.com/strkfarm/og-img-png.png'],
   },
 };
 

diff --git a/src/app/slinks/page.tsx b/src/app/slinks/page.tsx
@@ -52,6 +52,11 @@ function GetCardSimple(strat: StrategyInfo) {
     return balance;
   }, [balance]);
 
+  // Function to reset the input fields to their initial state
+  const resetDepositForm = () => {
+    setAmount(MyNumber.fromZero());
+  };
+
   return (
     <Card
       key={strat.id}
@@ -111,6 +116,7 @@ function GetCardSimple(strat: StrategyInfo) {
               isDisabled:
                 amount.isZero() || amount.compare(maxAmount.toEtherStr(), 'gt'),
             }}
+            resetDepositForm={resetDepositForm}
           />
         </Box>
       </Flex>

diff --git a/src/components/Deposit.tsx b/src/components/Deposit.tsx
@@ -30,7 +30,7 @@ import {
 import { useAccount, useProvider } from '@starknet-react/core';
 import { useAtomValue } from 'jotai';
 import mixpanel from 'mixpanel-browser';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ProviderInterface } from 'starknet';
 import LoadingWrap from './LoadingWrap';
 import TxButton from './TxButton';
@@ -51,6 +51,7 @@ export default function Deposit(props: DepositProps) {
   const { address } = useAccount();
   const { provider } = useProvider();
   const [dirty, setDirty] = useState(false);
+  const [isMaxClicked, setIsMaxClicked] = useState(false);
 
   const tvlInfo = useAtomValue(props.strategy.tvlAtom);
 
@@ -78,6 +79,13 @@ export default function Deposit(props: DepositProps) {
     };
   }, [amount, props]);
 
+  // Function to reset the input fields to their initial state
+  const resetDepositForm = () => {
+    setAmount(MyNumber.fromEther('0', selectedMarket.decimals));
+    setRawAmount('');
+    setDirty(false);
+  };
+
   // constructs tx calls
   const { calls, actions } = useMemo(() => {
     const actions = props.callsInfo(amount, address || '0x0', provider);
@@ -103,7 +111,6 @@ export default function Deposit(props: DepositProps) {
       selectedMarket.decimals,
     );
     let reducedBalance = balance;
-
     if (props.buttonText === 'Deposit') {
       if (selectedMarket.name === 'STRK') {
         reducedBalance = balance.subtract(
@@ -120,6 +127,13 @@ export default function Deposit(props: DepositProps) {
     return MyNumber.max(min, MyNumber.fromEther('0', selectedMarket.decimals));
   }, [balance, props.strategy, selectedMarket]);
 
+  useEffect(() => {
+    if (isMaxClicked) {
+      setRawAmount(maxAmount.toEtherStr());
+      setAmount(maxAmount);
+    }
+  }, [maxAmount, isMaxClicked]);
+
   function BalanceComponent(props: {
     token: TokenInfo;
     strategy: StrategyInfo;
@@ -166,6 +180,7 @@ export default function Deposit(props: DepositProps) {
             onClick={() => {
               setAmount(maxAmount);
               setRawAmount(maxAmount.toEtherStr());
+              setIsMaxClicked(true);
               mixpanel.track('Chose max amount', {
                 strategyId: props.strategy.id,
                 strategyName: props.strategy.name,
@@ -183,7 +198,6 @@ export default function Deposit(props: DepositProps) {
       </Box>
     );
   }
-
   return (
     <Box>
       <Grid templateColumns="repeat(5, 1fr)" gap={6}>
@@ -259,6 +273,7 @@ export default function Deposit(props: DepositProps) {
           else {
             setAmount(new MyNumber('0', selectedMarket.decimals));
           }
+          setIsMaxClicked(false);
           setRawAmount(value);
           setDirty(true);
           mixpanel.track('Enter amount', {
@@ -310,6 +325,7 @@ export default function Deposit(props: DepositProps) {
           }}
           selectedMarket={selectedMarket}
           strategy={props.strategy}
+          resetDepositForm={resetDepositForm}
         />
       </Center>
 

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -24,16 +24,15 @@ import CONSTANTS from '@/constants';
 import { getERC20Balance } from '@/store/balance.atoms';
 import { addressAtom } from '@/store/claims.atoms';
 import { referralCodeAtom } from '@/store/referral.store';
-import { useEffect } from 'react';
 import { lastWalletAtom } from '@/store/utils.atoms';
 import {
   generateReferralCode,
   getTokenInfoFromName,
   MyMenuItemProps,
   MyMenuListProps,
-  truncate,
   shortAddress,
   standariseAddress,
+  truncate,
 } from '@/utils';
 import fulllogo from '@public/fulllogo.png';
 import {
@@ -44,8 +43,9 @@ import {
 } from '@starknet-react/core';
 import axios from 'axios';
 import mixpanel from 'mixpanel-browser';
-import { isMobile } from 'react-device-detect';
 import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { isMobile } from 'react-device-detect';
 
 interface NavbarProps {
   hideTg?: boolean;
@@ -208,13 +208,25 @@ export default function Navbar(props: NavbarProps) {
       top="0"
     >
       <Center bg="bg" color="gray" padding={0}>
-        <Link href={CONSTANTS.COMMUNITY_TG} target="_blank">
-          <Text fontSize="12px" textAlign={'center'} padding="0px 5px">
-            {''}
-            <b>Report bugs & share feedback in our Telegram group.</b>
-            {''}
-          </Text>
-        </Link>
+        <Text
+          fontSize="12px"
+          textAlign={'center'}
+          padding="6px 5px"
+          color="#a5a5d9"
+        >
+          <b>
+            STRKFarm just got <span className="orange">audited</span> by one of
+            the top auditors in the ecosystem.
+            <Link
+              target="_blank"
+              href="https://x.com/strkfarm/status/1833071604856987678"
+              color="orange"
+            >
+              {' '}
+              Read more
+            </Link>
+          </b>
+        </Text>
       </Center>
       <Box
         width={'100%'}

diff --git a/src/components/TncModal.tsx b/src/components/TncModal.tsx
@@ -52,13 +52,50 @@ const exampleData = {
   },
 };
 
+const signingData = {
+  types: {
+    StarkNetDomain: [
+      { name: 'name', type: 'felt' },
+      { name: 'version', type: 'felt' },
+      { name: 'chainId', type: 'felt' },
+    ],
+    Person: [
+      { name: 'name', type: 'felt' },
+      { name: 'wallet', type: 'felt' },
+    ],
+    Felt: [
+      { name: 'from', type: 'Person' },
+      { name: 'to', type: 'Person' },
+      { name: 'contents', type: 'felt' },
+    ],
+  },
+  primaryType: 'felt',
+  domain: {
+    name: 'STRKFarm',
+    version: '1',
+    chainId: '0x534e5f4d41494e',
+  },
+  message: {
+    from: {
+      name: 'Test1',
+      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
+    },
+    to: {
+      name: 'Test2',
+      wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
+    },
+    contents:
+      'You confirm that you have read and agree to our Terms & Conditions, which can be found at https://github.com/strkfarm/static-assets/src/tnc.md.\n\nPlease note, this message is solely for verifying your agreement to our T&C and does not authorize any transaction or movement of your assets.',
+  },
+};
+
 interface TncModalProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
 const TncModal: React.FC<TncModalProps> = ({ isOpen, onClose }) => {
-  const { signTypedDataAsync } = useSignTypedData(exampleData);
+  const { signTypedDataAsync } = useSignTypedData(signingData);
   const { address } = useAccount();
 
   const handleSign = async () => {
@@ -68,7 +105,7 @@ const TncModal: React.FC<TncModalProps> = ({ isOpen, onClose }) => {
       onClose();
       await axios.post('/api/tnc/signUser', {
         address,
-        message: 'I agree to the terms and conditions',
+        message: res?.toString(),
       });
     }
   };

diff --git a/src/components/TxButton.tsx b/src/components/TxButton.tsx
@@ -35,6 +35,7 @@ interface TxButtonProps {
   justDisableIfNoWalletConnect?: boolean;
   selectedMarket?: TokenInfo;
   strategy?: IStrategyProps;
+  resetDepositForm: () => void;
 }
 
 export default function TxButton(props: TxButtonProps) {
@@ -60,6 +61,7 @@ export default function TxButton(props: TxButtonProps) {
 
   useEffect(() => {
     if (data && data.transaction_hash) {
+      props.resetDepositForm();
       // initiates a toast and adds the tx to tx history if successful
       monitorNewTx({
         txHash: data.transaction_hash,