feat: final ui updates (#376)

Synthetixio · Jul 23, 2024 · 6607930 · 6607930
1 parent 6b5f665
commit 6607930
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 31 deletions.
diff --git a/liquidity/components/ClaimModal/ClaimModal.tsx b/liquidity/components/ClaimModal/ClaimModal.tsx
@@ -1,9 +1,9 @@
 import { Button, Divider, Text, useToast, Link, Flex, Skeleton } from '@chakra-ui/react';
 import { Amount } from '@snx-v3/Amount';
-import Wei from '@synthetixio/wei';
+import Wei, { wei } from '@synthetixio/wei';
 import { TransactionStatus } from '@snx-v3/txnReducer';
 import { Multistep } from '@snx-v3/Multistep';
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { useParams } from '@snx-v3/useParams';
 import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
 import { useCollateralType } from '@snx-v3/useCollateralTypes';
@@ -18,6 +18,7 @@ import { ArrowBackIcon } from '@chakra-ui/icons';
 import { LiquidityPositionUpdated } from '../../ui/src/components/Manage/LiquidityPositionUpdated';
 import { useSystemToken } from '@snx-v3/useSystemToken';
 import { ZEROWEI } from '../../ui/src/utils/constants';
+import { LiquidityPosition } from '@snx-v3/useLiquidityPosition';
 
 export const ClaimModalUi: React.FC<{
   onClose: () => void;
@@ -117,12 +118,27 @@ export const ClaimModalUi: React.FC<{
 export const ClaimModal: React.FC<{
   onClose: () => void;
   isOpen: boolean;
-}> = ({ onClose, isOpen }) => {
+  liquidityPosition?: LiquidityPosition;
+}> = ({ onClose, isOpen, liquidityPosition }) => {
   const { debtChange, setDebtChange } = useContext(ManagePositionContext);
   const queryClient = useQueryClient();
   const params = useParams();
+  const { network } = useNetwork();
+  const isBase = isBaseAndromeda(network?.id, network?.preset);
   const { data: collateralType } = useCollateralType(params.collateralSymbol);
 
+  const maxClaimble = useMemo(() => {
+    if (!liquidityPosition || liquidityPosition?.debt.gte(0)) {
+      return ZEROWEI;
+    } else {
+      return wei(liquidityPosition.debt.abs().toBN().sub(1));
+    }
+  }, [liquidityPosition]);
+  const isBorrow = useMemo(
+    () => debtChange.gt(maxClaimble) && !isBase,
+    [debtChange, isBase, maxClaimble]
+  );
+
   const {
     exec: execBorrow,
     txnState,
@@ -136,7 +152,6 @@ export const ClaimModal: React.FC<{
 
   const toast = useToast({ isClosable: true, duration: 9000 });
   const { data: CoreProxy } = useCoreProxy();
-  const { network } = useNetwork();
   const errorParserCoreProxy = useContractErrorParser(CoreProxy);
   const execBorrowWithErrorParser = useCallback(async () => {
     try {
@@ -152,9 +167,10 @@ export const ClaimModal: React.FC<{
       if (contractError) {
         console.error(new Error(contractError.name), contractError);
       }
+
       toast.closeAll();
       toast({
-        title: 'Claim failed',
+        title: isBorrow ? 'Borrow' : 'Claim' + ' failed',
         description: contractError ? (
           <ContractError contractError={contractError} />
         ) : (
@@ -163,16 +179,17 @@ export const ClaimModal: React.FC<{
         status: 'error',
         variant: 'left-accent',
       });
-      throw Error('Claim failed', { cause: error });
+      throw Error(isBorrow ? 'Borrow' : 'Claim' + ' failed', { cause: error });
     }
   }, [
     execBorrow,
-    setDebtChange,
     queryClient,
     network?.id,
     network?.preset,
+    setDebtChange,
     errorParserCoreProxy,
     toast,
+    isBorrow,
   ]);
 
   const { txnStatus } = txnState;

diff --git a/liquidity/components/ClaimModal/package.json b/liquidity/components/ClaimModal/package.json
@@ -17,6 +17,7 @@
     "@snx-v3/useCollateralTypes": "workspace:*",
     "@snx-v3/useContractErrorParser": "workspace:*",
     "@snx-v3/useCoreProxy": "workspace:*",
+    "@snx-v3/useLiquidityPosition": "workspace:*",
     "@snx-v3/useParams": "workspace:*",
     "@snx-v3/useSystemToken": "workspace:*",
     "@synthetixio/wei": "^2.74.4",

diff --git a/liquidity/components/DepositModal/DepositModal.tsx b/liquidity/components/DepositModal/DepositModal.tsx
@@ -265,7 +265,6 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
   const isBase = isBaseAndromeda(network?.id, network?.preset);
 
   const collateralAddress = isBase ? usdTokens?.USDC : collateralType?.tokenAddress;
-
   const collateralNeeded = collateralChange.sub(availableCollateral);
 
   const { approve, requireApproval } = useApprove({
@@ -287,8 +286,8 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
   const { exec: wrapEth, wethBalance } = useWrapEth();
 
   const wrapAmount =
-    collateralType?.symbol === 'WETH' && collateralChange.gt(wethBalance || 0)
-      ? collateralChange.sub(wethBalance || 0)
+    collateralType?.symbol === 'WETH' && collateralNeeded.gt(wethBalance || 0)
+      ? collateralNeeded.sub(wethBalance || 0)
       : wei(0);
 
   const { data: pool } = usePool(poolId);
@@ -435,6 +434,8 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
           if (contractError) {
             console.error(new Error(contractError.name), contractError);
           }
+
+          toast.closeAll();
           toast({
             title: 'Could not complete locking collateral',
             description: contractError ? (

diff --git a/liquidity/components/RepayModal/RepayModal.tsx b/liquidity/components/RepayModal/RepayModal.tsx
@@ -225,6 +225,7 @@ export const RepayModal: React.FC<{
         try {
           toast.closeAll();
           toast({ title: 'Repaying...', variant: 'left-accent' });
+
           if (isBaseAndromeda(network?.id, network?.preset)) {
             await execRepayBaseAndromeda();
           } else {

diff --git a/liquidity/components/WithdrawModal/WithdrawModal.tsx b/liquidity/components/WithdrawModal/WithdrawModal.tsx
@@ -171,16 +171,19 @@ export function WithdrawModal({
           status: 'success',
         });
 
-        await queryClient.invalidateQueries({
+        queryClient.invalidateQueries({
           queryKey: [`${network?.id}-${network?.preset}`, 'LiquidityPosition', { accountId }],
         });
-        await queryClient.invalidateQueries({
+        queryClient.invalidateQueries({
           queryKey: [
             `${network?.id}-${network?.preset}`,
             'AccountSpecificCollateral',
             { accountId },
           ],
         });
+        queryClient.invalidateQueries({
+          queryKey: [`${network?.id}-${network?.preset}`, 'LiquidityPositions', { accountId }],
+        });
 
         setWithdrawAmount(ZEROWEI);
       } else {

diff --git a/liquidity/lib/useAllowance/useAllowance.ts b/liquidity/lib/useAllowance/useAllowance.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useWallet, useNetwork, useProvider } from '@snx-v3/useBlockchain';
+import { useWallet, useNetwork, useDefaultProvider } from '@snx-v3/useBlockchain';
 import { Contract } from 'ethers';
 import { ZodBigNumber } from '@snx-v3/zod';
 import { wei } from '@synthetixio/wei';
@@ -15,8 +15,8 @@ export const useAllowance = ({
   spender?: string;
 }) => {
   const { activeWallet } = useWallet();
-  const provider = useProvider();
   const { network } = useNetwork();
+  const provider = useDefaultProvider();
 
   return useQuery({
     queryKey: [

diff --git a/liquidity/lib/useRepay/useRepay.tsx b/liquidity/lib/useRepay/useRepay.tsx
@@ -13,13 +13,13 @@ import { notNil } from '@snx-v3/tsHelpers';
 import { withERC7412 } from '@snx-v3/withERC7412';
 import { useAllCollateralPriceIds } from '@snx-v3/useAllCollateralPriceIds';
 import { fetchPriceUpdates, priceUpdatesToPopulatedTx } from '@snx-v3/fetchPythPrices';
+import { ZEROWEI } from '../../ui/src/utils/constants';
 
 export const useRepay = ({
   accountId,
   poolId,
   collateralTypeAddress,
   debtChange,
-  balance,
   availableUSDCollateral,
 }: {
   accountId?: string;
@@ -54,11 +54,12 @@ export const useRepay = ({
       ) {
         return;
       }
-      if (!balance) return;
-      if (!availableUSDCollateral) return;
-      if (debtChange.eq(0)) return;
+      if (debtChange.eq(0)) {
+        return;
+      }
+
       const debtChangeAbs = debtChange.abs();
-      const amountToDeposit = debtChangeAbs.sub(availableUSDCollateral);
+      const amountToDeposit = debtChangeAbs.sub(availableUSDCollateral || ZEROWEI);
 
       try {
         dispatch({ type: 'prompting' });

diff --git a/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx b/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx
@@ -244,6 +244,25 @@ export const ClosePositionTransactions: FC<{
         status: 'success',
       });
 
+      queryClient.invalidateQueries({
+        queryKey: [`${network?.id}-${network?.preset}`, 'LiquidityPosition'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [`${network?.id}-${network?.preset}`, 'LiquidityPositions'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [`${network?.id}-${network?.preset}`, 'Allowance'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [`${network?.id}-${network?.preset}`, 'AccountSpecificCollateral'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [`${network?.id}-${network?.preset}`, 'TokenBalance'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [`${network?.id}-${network?.preset}`, 'AccountCollateralUnlockDate'],
+      });
+
       setCollateralChange(ZEROWEI);
       setDebtChange(ZEROWEI);
     } catch (error) {
@@ -269,20 +288,22 @@ export const ClosePositionTransactions: FC<{
       });
       throw Error('Transaction failed', { cause: error });
     }
-  }, [txState.step, steps, setCollateralChange, setDebtChange, errorParserCoreProxy, toast]);
+  }, [
+    txState.step,
+    steps,
+    queryClient,
+    network?.id,
+    network?.preset,
+    setCollateralChange,
+    setDebtChange,
+    errorParserCoreProxy,
+    toast,
+  ]);
 
   if (isSuccess) {
     return (
       <LiquidityPositionUpdated
-        onClose={() => {
-          queryClient.invalidateQueries({
-            queryKey: [`${network?.id}-${network?.preset}`, 'LiquidityPosition'],
-          });
-          queryClient.invalidateQueries({
-            queryKey: [`${network?.id}-${network?.preset}`, 'LiquidityPositions'],
-          });
-          onClose();
-        }}
+        onClose={onClose}
         title="Position successfully Closed"
         subline={
           <>

diff --git a/liquidity/ui/src/components/Manage/ManageActions.tsx b/liquidity/ui/src/components/Manage/ManageActions.tsx
@@ -1,4 +1,15 @@
-import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Divider,
+  Flex,
+  Skeleton,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from '@chakra-ui/react';
 import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
 import { useCollateralType } from '@snx-v3/useCollateralTypes';
 import { LiquidityPosition } from '@snx-v3/useLiquidityPosition';
@@ -269,7 +280,16 @@ export const ManageAction = ({ liquidityPosition }: { liquidityPosition?: Liquid
           manageAction={parsedAction || undefined}
         />
       )}
-      <Suspense fallback={null}>
+      <Suspense
+        fallback={
+          <Flex gap={4} flexDirection="column">
+            <Skeleton maxW="232px" width="100%" height="20px" />
+            <Divider my={4} />
+            <Skeleton width="100%" height="20px" />
+            <Skeleton width="100%" height="20px" />
+          </Flex>
+        }
+      >
         {txnModalOpen === 'repay' ? (
           <RepayModal
             availableCollateral={liquidityPosition?.usdCollateral.availableCollateral}
@@ -299,6 +319,7 @@ export const ManageAction = ({ liquidityPosition }: { liquidityPosition?: Liquid
               setTxnModalOpen(null);
             }}
             isOpen={txnModalOpen === 'claim'}
+            liquidityPosition={liquidityPosition}
           />
         ) : null}
         {txnModalOpen === 'deposit' ? (

diff --git a/yarn.lock b/yarn.lock
@@ -5300,6 +5300,7 @@ __metadata:
     "@snx-v3/useCollateralTypes": "workspace:*"
     "@snx-v3/useContractErrorParser": "workspace:*"
     "@snx-v3/useCoreProxy": "workspace:*"
+    "@snx-v3/useLiquidityPosition": "workspace:*"
     "@snx-v3/useParams": "workspace:*"
     "@snx-v3/useSystemToken": "workspace:*"
     "@synthetixio/wei": "npm:^2.74.4"