Review fixes

valory-xyz · Aug 9, 2024 · ee62e16 · ee62e16
1 parent 0e15424
commit ee62e16
Show file tree

Hide file tree

Showing 12 changed files with 291 additions and 217 deletions.
diff --git a/apps/govern/common-util/functions/requests.ts b/apps/govern/common-util/functions/requests.ts
@@ -1,6 +1,6 @@
 import { readContract, readContracts } from '@wagmi/core';
 import { ethers } from 'ethers';
-import { AbiFunction, TransactionReceipt } from 'viem';
+import { AbiFunction, TransactionReceipt, parseUnits } from 'viem';
 import { Address } from 'viem';
 import { mainnet } from 'viem/chains';
 
@@ -118,61 +118,61 @@ export const checkLockExpired = async (account: Address) => {
 /**
  * Approve amount of OLAS to be used
  */
-export const approveOlasByOwner = ({ account, amount }: { account: Address; amount: bigint }) =>
-  new Promise((resolve, reject) => {
+export const approveOlasByOwner = async ({
+  account,
+  amount,
+}: {
+  account: Address;
+  amount: bigint;
+}) => {
+  try {
     const contract = getOlasContract();
     const spender = (VE_OLAS.addresses as Record<number, string>)[mainnet.id];
     const fn = contract.methods.approve(spender, amount).send({ from: account });
 
-    sendTransaction(fn, account, {
+    const response = await sendTransaction(fn, account, {
       supportedChains: SUPPORTED_CHAINS,
       rpcUrls: RPC_URLS,
-    })
-      .then((response) => {
-        resolve(response);
-      })
-      .catch((e) => {
-        window.console.log('Error occurred on approving OLAS by owner');
-        reject(e);
-      });
-  });
+    });
+
+    return response;
+  } catch (error) {
+    window.console.log('Error occurred on approving OLAS by owner');
+    throw error;
+  }
+};
 
 /**
  * Check if `Approve` button can be clicked; `allowance` should be greater than or equal to the amount
  */
-export const hasSufficientTokensRequest = ({
+export const hasSufficientTokensRequest = async ({
   account,
   amount,
 }: {
   account: Address;
   amount: number;
-}) =>
-  new Promise((resolve, reject) => {
+}) => {
+  try {
     const contract = getOlasContract();
     const spender = (VE_OLAS.addresses as Record<number, string>)[mainnet.id];
 
-    contract.methods
-      .allowance(account, spender)
-      .call()
-      .then((response: bigint) => {
-        const responseInBg = ethers.toBigInt(response);
-
-        // Resolve false if the response amount is zero
-        if (responseInBg === ethers.toBigInt(0)) {
-          resolve(false);
-          return;
-        }
-
-        const amountBN = ethers.parseUnits(`${amount}`);
-
-        // check if the allowance is greater than or equal to the amount input
-        resolve(responseInBg >= amountBN);
-      })
-      .catch((e: Error) => {
-        window.console.log('Error occurred on calling `allowance` method');
-        reject(e);
-      });
-  });
+    const response = await contract.methods.allowance(account, spender).call();
+    const responseInBg = ethers.toBigInt(response);
+
+    // Resolve false if the response amount is zero
+    if (responseInBg === ethers.toBigInt(0)) {
+      return false;
+    }
+
+    const amountBN = parseUnits(`${amount}`, 18);
+
+    // Check if the allowance is greater than or equal to the amount input
+    return responseInBg >= amountBN;
+  } catch (error) {
+    window.console.log('Error occurred on calling `allowance` method');
+    throw error;
+  }
+};
 
 /**
  * Create lock for veOLAS

diff --git a/apps/govern/components/Contracts/MyVotingWeight/MyVotingWeight.tsx b/apps/govern/components/Contracts/MyVotingWeight/MyVotingWeight.tsx
@@ -1,13 +1,13 @@
 import { LoadingOutlined, TableOutlined, WalletOutlined } from '@ant-design/icons';
 import { Button, Card as CardAntd, Flex, Spin, Typography } from 'antd';
 import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { Dispatch, SetStateAction, useMemo } from 'react';
 import styled from 'styled-components';
 import { Allocation } from 'types';
 import { useAccount } from 'wagmi';
 
-import { MEMBER_URL } from 'libs/util-constants/src';
-
 import { LoginV2 } from 'components/Login';
 import { useVotingPower } from 'hooks/index';
 import { useAppSelector } from 'store/index';
@@ -54,14 +54,20 @@ const ConnectWallet = () => {
 };
 
 const GetVeOlas = () => {
+  const router = useRouter();
+
+  const handleOpenVeOlas = () => {
+    router.push('/veolas');
+  };
   return (
     <Flex align="center" justify="center" vertical gap={16}>
       <Image src={'/images/olas.svg'} alt="Olas" width={48} height={48} />
       <Paragraph type="secondary" className="text-center">
         Only veOLAS holders can vote on staking contracts. <br />
         Please lock OLAS for veOLAS to get started.
       </Paragraph>
-      <Button size="large" type="primary" target="_blank" href={MEMBER_URL}>
+
+      <Button size="large" type="primary" onClick={handleOpenVeOlas}>
         Get veOLAS
       </Button>
     </Flex>

diff --git a/apps/govern/components/Layout/Balance.tsx b/apps/govern/components/Layout/Balance.tsx
@@ -1,9 +1,10 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Button, Tooltip, Typography } from 'antd';
+import Link from 'next/link';
 import { useAccount } from 'wagmi';
 
 import { COLOR } from 'libs/ui-theme/src/lib/ui-theme';
-import { MEMBER_URL, UNICODE_SYMBOLS } from 'libs/util-constants/src';
+import { UNICODE_SYMBOLS } from 'libs/util-constants/src';
 
 import { formatWeiNumber } from 'common-util/functions';
 import { useVotingPower } from 'hooks/index';
@@ -24,9 +25,7 @@ export const Balance = () => {
       title={
         <>
           <Paragraph>veOLAS gives you voting power in Autonolas governance.</Paragraph>
-          <a href={MEMBER_URL} target="_blank">
-            Lock OLAS for veOLAS {UNICODE_SYMBOLS.EXTERNAL_LINK}
-          </a>
+          <Link href="/veolas">Lock OLAS for veOLAS {UNICODE_SYMBOLS.EXTERNAL_LINK}</Link>
         </>
       }
     >

diff --git a/apps/govern/components/VeOlas/CreateLockModal.tsx b/apps/govern/components/VeOlas/CreateLockModal.tsx
@@ -42,27 +42,33 @@ export const CreateLockModal = ({ isModalVisible, setIsModalVisible }: CreateLoc
     setIsModalVisible(false);
   };
 
-  const onCreateLock = async () => {
+  const handleCreateLock = async () => {
     if (!account) return;
 
-    setIsLoading(true);
+    try {
+      setIsLoading(true);
 
-    const txHash = await createLockRequest({
-      amount: ethers.parseUnits(`${amountInEth}`, 18).toString(),
-      unlockTime: getRemainingTimeInSeconds(unlockTime),
-      account,
-    });
+      const txHash = await createLockRequest({
+        amount: ethers.parseUnits(`${amountInEth}`, 18).toString(),
+        unlockTime: getRemainingTimeInSeconds(unlockTime),
+        account,
+      });
 
-    notifySuccess('Lock created successfully!', `Transaction Hash: ${txHash}`);
+      notifySuccess('Lock created successfully!', `Transaction Hash: ${txHash}`);
 
-    // once the lock is created, refetch the data
-    refetch();
+      // once the lock is created, refetch the data
+      refetch();
 
-    handleClose();
-    setIsLoading(false);
+      handleClose();
+    } catch (error) {
+      window.console.error(error);
+      notifyError();
+    } finally {
+      setIsLoading(false);
+    }
   };
 
-  const onFinish = async ({ amount }: FormValues) => {
+  const handleFinish = async ({ amount }: FormValues) => {
     if (!account) return;
 
     try {
@@ -79,7 +85,7 @@ export const CreateLockModal = ({ isModalVisible, setIsModalVisible }: CreateLoc
         return;
       }
 
-      await onCreateLock();
+      await handleCreateLock();
     } catch (error) {
       window.console.error(error);
       notifyError();
@@ -104,7 +110,7 @@ export const CreateLockModal = ({ isModalVisible, setIsModalVisible }: CreateLoc
         autoComplete="off"
         name="create-lock-form"
         requiredMark={false}
-        onFinish={onFinish}
+        onFinish={handleFinish}
       >
         <div className="mb-24">
           <OlasAmountInput olasBalance={olasBalance} />
@@ -159,7 +165,7 @@ export const CreateLockModal = ({ isModalVisible, setIsModalVisible }: CreateLoc
         isModalVisible={isApproveModalVisible}
         setIsModalVisible={setIsApproveModalVisible}
         amountInEth={amountInEth}
-        onApprove={onCreateLock}
+        onApprove={handleCreateLock}
       />
     </Modal>
   );

diff --git a/apps/govern/components/VeOlas/IncreaseLockModal/IncreaseAmount.tsx b/apps/govern/components/VeOlas/IncreaseLockModal/IncreaseAmount.tsx
@@ -11,7 +11,7 @@ import { ApproveOlasModal } from '../ApproveOlasModal';
 import { MaxButton } from '../MaxButton';
 import { OlasAmountInput } from '../OlasAmountInput';
 import { ProjectedVeOlas } from '../ProjectedVeOlas';
-import { useVeolasComponents } from '../useVeolasComponents';
+import { LockedAmountComponent } from '../VeOlasComponents';
 
 type IncreaseAmountProps = {
   closeModal: () => void;
@@ -23,34 +23,46 @@ type FormValues = {
 
 export const IncreaseAmount = ({ closeModal }: IncreaseAmountProps) => {
   const [form] = Form.useForm();
-  const { account, lockedEnd, olasBalance, veOlasBalance, refetch } = useFetchBalances();
-  const { getLockedAmountComponent } = useVeolasComponents();
+  const {
+    isLoading: isBalancesLoading,
+    account,
+    lockedEnd,
+    olasBalance,
+    veOlasBalance,
+    refetch,
+  } = useFetchBalances();
 
   const [isLoading, setIsLoading] = useState(false);
   const [isApproveModalVisible, setIsApproveModalVisible] = useState(false);
 
   const amountInEth = Form.useWatch('amount', form);
 
-  const onIncreaseAmount = async () => {
+  const handleIncreaseAmount = async () => {
     if (!account) return;
 
-    setIsLoading(true);
+    try {
+      setIsLoading(true);
 
-    const txHash = await updateIncreaseAmount({
-      amount: ethers.parseUnits(`${amountInEth}`, 18).toString(),
-      account,
-    });
+      const txHash = await updateIncreaseAmount({
+        amount: ethers.parseUnits(`${amountInEth}`, 18).toString(),
+        account,
+      });
 
-    notifySuccess('Amount increased successfully!', `Transaction Hash: ${txHash}`);
+      notifySuccess('Amount increased successfully!', `Transaction Hash: ${txHash}`);
 
-    // once the amount is increased, refetch the data
-    refetch();
+      // once the amount is increased, refetch the data
+      refetch();
 
-    closeModal();
-    setIsLoading(false);
+      closeModal();
+    } catch (error) {
+      window.console.error(error);
+      notifyError();
+    } finally {
+      setIsLoading(false);
+    }
   };
 
-  const onFinish = async ({ amount }: FormValues) => {
+  const handleFinish = async ({ amount }: FormValues) => {
     if (!account) return;
     if (!veOlasBalance) return;
 
@@ -69,7 +81,7 @@ export const IncreaseAmount = ({ closeModal }: IncreaseAmountProps) => {
         return;
       }
 
-      await onIncreaseAmount();
+      await handleIncreaseAmount();
     } catch (error) {
       window.console.error(error);
       notifyError();
@@ -92,9 +104,9 @@ export const IncreaseAmount = ({ closeModal }: IncreaseAmountProps) => {
         autoComplete="off"
         name="increase-amount-form"
         requiredMark={false}
-        onFinish={onFinish}
+        onFinish={handleFinish}
       >
-        {getLockedAmountComponent()}
+        <LockedAmountComponent isLoading={isBalancesLoading} veOlasBalance={veOlasBalance} />
 
         <Divider className="mt-8" />
 
@@ -137,7 +149,7 @@ export const IncreaseAmount = ({ closeModal }: IncreaseAmountProps) => {
         isModalVisible={isApproveModalVisible}
         setIsModalVisible={setIsApproveModalVisible}
         amountInEth={amountInEth}
-        onApprove={onIncreaseAmount}
+        onApprove={handleIncreaseAmount}
       />
     </>
   );

diff --git a/apps/govern/components/VeOlas/IncreaseLockModal/IncreaseUnlockTime.tsx b/apps/govern/components/VeOlas/IncreaseLockModal/IncreaseUnlockTime.tsx
@@ -12,7 +12,7 @@ import { useFetchBalances } from 'hooks/useFetchBalances';
 
 import { ProjectedVeOlas } from '../ProjectedVeOlas';
 import { UnlockTimeInput } from '../UnlockTimeInput';
-import { useVeolasComponents } from '../useVeolasComponents';
+import { UnlockTimeComponent } from '../VeOlasComponents';
 
 type IncreaseUnlockTimeProps = {
   closeModal: () => void;
@@ -24,14 +24,20 @@ type FormValues = {
 
 export const IncreaseUnlockTime = ({ closeModal }: IncreaseUnlockTimeProps) => {
   const [form] = Form.useForm();
-  const { account, lockedEnd, olasBalance, veOlasBalance, refetch } = useFetchBalances();
-  const { getUnlockTimeComponent } = useVeolasComponents();
+  const {
+    isLoading: isBalancesLoading,
+    account,
+    lockedEnd,
+    olasBalance,
+    veOlasBalance,
+    refetch,
+  } = useFetchBalances();
 
   const [isLoading, setIsLoading] = useState(false);
 
   const unlockTime = dateInMs(Form.useWatch('unlockTime', form));
 
-  const onFinish = async ({ unlockTime }: FormValues) => {
+  const handleFinish = async ({ unlockTime }: FormValues) => {
     if (!account) return;
     if (!veOlasBalance) return;
 
@@ -71,9 +77,9 @@ export const IncreaseUnlockTime = ({ closeModal }: IncreaseUnlockTimeProps) => {
       autoComplete="off"
       name="increase-unlock-time-form"
       requiredMark={false}
-      onFinish={onFinish}
+      onFinish={handleFinish}
     >
-      {getUnlockTimeComponent()}
+      <UnlockTimeComponent isLoading={isBalancesLoading} lockedEnd={lockedEnd} />
 
       <Divider className="mt-8" />