Fix: UI issues/feedbacks (#373)

* Wording and spacing * wording * fix: reset position after successful tx * fix: unsupported collateral flashing issue * fix: back button flashing * fix: update core proxy to use provider for reads * fix: withdraw timer * fix: input min amount * fix: transaction issue * fix: deps * fix: manage ui issues * fix: formatt issue * copy, buttons, alerts and links * feat: update liquidity positions to add availble collateral * feat: add unlocked balance to positions table * fix: alerts margin * feat: withdraw timer in positions row * fix: update claming rewards dialog * change delegated working to locked * yarn * fix tests * change component test title * fix: ui flashing issue * fix: manage loading position title padding * fix: lint * use getAvailable * fix: positions row collateral value * fix: refactor positions row * fix: type issue * fix: ui issues * fix: deps * fix: deposit tx summary for base * feat: undelegate summary box * fix: deps * fix: build * fix: validate position --------- Co-authored-by: howitsjade <[email protected]> Co-authored-by: jmzwar <[email protected]>
Synthetixio · Jul 23, 2024 · 6b5f665 · 6b5f665
1 parent a02d466
commit 6b5f665
Show file tree

Hide file tree

Showing 85 changed files with 1,134 additions and 619 deletions.
diff --git a/liquidity/components/BorrowModal/BorrowModal.tsx b/liquidity/components/BorrowModal/BorrowModal.tsx
@@ -1,4 +1,4 @@
-import { Button, Divider, Text, useToast } from '@chakra-ui/react';
+import { Button, Divider, Text, useToast, Link, Flex, Skeleton } from '@chakra-ui/react';
 import { Amount } from '@snx-v3/Amount';
 import Wei from '@synthetixio/wei';
 import { TransactionStatus } from '@snx-v3/txnReducer';
@@ -17,6 +17,7 @@ import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 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';
 
 export const BorrowModalUi: React.FC<{
   onClose: () => void;
@@ -38,8 +39,14 @@ export const BorrowModalUi: React.FC<{
           title="Debt successfully Updated"
           subline={
             <>
-              Your <b>debt</b> has been updated, read more about it in the Synthetix V3
-              Documentation.
+              Your <b>Debt</b> has been updated, read more about it in the{' '}
+              <Link
+                href="https://docs.synthetix.io/v/synthetix-v3-user-documentation"
+                target="_blank"
+                color="cyan.500"
+              >
+                Synthetix V3 Documentation
+              </Link>
             </>
           }
           alertText={
@@ -107,7 +114,7 @@ export const BorrowModal: React.FC<{
   onClose: () => void;
   isOpen: boolean;
 }> = ({ onClose, isOpen }) => {
-  const { debtChange } = useContext(ManagePositionContext);
+  const { debtChange, setDebtChange } = useContext(ManagePositionContext);
   const queryClient = useQueryClient();
   const params = useParams();
   const { data: collateralType } = useCollateralType(params.collateralSymbol);
@@ -136,6 +143,7 @@ export const BorrowModal: React.FC<{
         queryKey: [`${network?.id}-${network?.preset}`, 'LiquidityPosition'],
         exact: false,
       });
+      setDebtChange(ZEROWEI);
     } catch (error: any) {
       const contractError = errorParserCoreProxy(error);
       if (contractError) {
@@ -154,11 +162,27 @@ export const BorrowModal: React.FC<{
       });
       throw Error('Borrow failed', { cause: error });
     }
-  }, [execBorrow, queryClient, network?.id, network?.preset, errorParserCoreProxy, toast]);
+  }, [
+    execBorrow,
+    queryClient,
+    network?.id,
+    network?.preset,
+    setDebtChange,
+    errorParserCoreProxy,
+    toast,
+  ]);
 
   const { txnStatus } = txnState;
 
-  if (!params.poolId || !params.accountId || !collateralType) return null;
+  if (!params.poolId || !params.accountId || !collateralType)
+    return (
+      <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>
+    );
 
   return (
     <BorrowModalUi

diff --git a/liquidity/components/ClaimModal/ClaimModal.tsx b/liquidity/components/ClaimModal/ClaimModal.tsx
@@ -1,4 +1,4 @@
-import { Button, Divider, Text, useToast } from '@chakra-ui/react';
+import { Button, Divider, Text, useToast, Link, Flex, Skeleton } from '@chakra-ui/react';
 import { Amount } from '@snx-v3/Amount';
 import Wei from '@synthetixio/wei';
 import { TransactionStatus } from '@snx-v3/txnReducer';
@@ -17,6 +17,7 @@ import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 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';
 
 export const ClaimModalUi: React.FC<{
   onClose: () => void;
@@ -38,8 +39,14 @@ export const ClaimModalUi: React.FC<{
           title="Debt successfully Updated"
           subline={
             <>
-              Your <b>debt</b> has been updated, read more about it in the Synthetix V3
-              Documentation.
+              Your <b>Debt</b> has been updated, read more about it in the{' '}
+              <Link
+                href="https://docs.synthetix.io/v/synthetix-v3-user-documentation"
+                target="_blank"
+                color="cyan.500"
+              >
+                Synthetix V3 Documentation
+              </Link>
             </>
           }
           alertText={
@@ -111,7 +118,7 @@ export const ClaimModal: React.FC<{
   onClose: () => void;
   isOpen: boolean;
 }> = ({ onClose, isOpen }) => {
-  const { debtChange } = useContext(ManagePositionContext);
+  const { debtChange, setDebtChange } = useContext(ManagePositionContext);
   const queryClient = useQueryClient();
   const params = useParams();
   const { data: collateralType } = useCollateralType(params.collateralSymbol);
@@ -134,10 +141,12 @@ export const ClaimModal: React.FC<{
   const execBorrowWithErrorParser = useCallback(async () => {
     try {
       await execBorrow();
+
       await queryClient.invalidateQueries({
         queryKey: [`${network?.id}-${network?.preset}`, 'LiquidityPosition'],
         exact: false,
       });
+      setDebtChange(ZEROWEI);
     } catch (error: any) {
       const contractError = errorParserCoreProxy(error);
       if (contractError) {
@@ -156,11 +165,27 @@ export const ClaimModal: React.FC<{
       });
       throw Error('Claim failed', { cause: error });
     }
-  }, [execBorrow, queryClient, network?.id, network?.preset, errorParserCoreProxy, toast]);
+  }, [
+    execBorrow,
+    setDebtChange,
+    queryClient,
+    network?.id,
+    network?.preset,
+    errorParserCoreProxy,
+    toast,
+  ]);
 
   const { txnStatus } = txnState;
 
-  if (!params.poolId || !params.accountId || !collateralType) return null;
+  if (!params.poolId || !params.accountId || !collateralType)
+    return (
+      <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>
+    );
 
   return (
     <ClaimModalUi

diff --git a/liquidity/components/DepositModal/DepositModal.tsx b/liquidity/components/DepositModal/DepositModal.tsx
@@ -1,4 +1,4 @@
-import { Button, Divider, Text, useToast } from '@chakra-ui/react';
+import { Button, Divider, Text, useToast, Link } from '@chakra-ui/react';
 import { Amount } from '@snx-v3/Amount';
 import { ContractError } from '@snx-v3/ContractError';
 import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
@@ -81,8 +81,14 @@ export const DepositModalUi: FC<{
           title="Collateral successfully Updated"
           subline={
             <>
-              Your <b>Collateral</b> has been updated, read more about it in the Synthetix V3
-              Documentation.
+              Your <b>Collateral</b> has been updated, read more about it in the{' '}
+              <Link
+                href="https://docs.synthetix.io/v/synthetix-v3-user-documentation"
+                target="_blank"
+                color="cyan.500"
+              >
+                Synthetix V3 Documentation
+              </Link>
             </>
           }
           alertText={
@@ -149,28 +155,28 @@ export const DepositModalUi: FC<{
 
         <Multistep
           step={stepNumbers.deposit}
-          title={`Lock ${collateralType?.symbol}`}
+          title={`Deposit & Lock ${collateralType?.symbol}`}
           subtitle={
             <>
               {state.matches(State.success) ? (
                 <Text>
-                  <Amount value={collateralChange} suffix={` ${collateralType?.symbol}`} /> locked
-                  to {poolName}.
+                  <Amount value={collateralChange} suffix={` ${collateralType?.symbol}`} />{' '}
+                  deposited & locked in {poolName}.
                 </Text>
               ) : (
                 <>
                   {availableCollateral && availableCollateral.gt(wei(0)) ? (
                     <>
                       {availableCollateral.gte(collateralChange) ? (
                         <Text>
-                          This will lock{' '}
+                          This will deposit & lock{' '}
                           <Amount value={collateralChange} suffix={` ${collateralType?.symbol}`} />{' '}
-                          to {poolName}.
+                          in {poolName}.
                         </Text>
                       ) : (
                         <>
                           <Text>
-                            This will lock{' '}
+                            This will deposit & lock{' '}
                             <Amount
                               value={availableCollateral}
                               suffix={` ${collateralType?.symbol}`}
@@ -183,14 +189,14 @@ export const DepositModalUi: FC<{
                               value={collateralChange.sub(availableCollateral)}
                               suffix={` ${collateralType?.symbol}`}
                             />{' '}
-                            will be locked from your wallet.
+                            will be deposited and locked from your wallet.
                           </Text>
                         </>
                       )}
                     </>
                   ) : (
                     <Text>
-                      This will lock{' '}
+                      This will deposit and lock{' '}
                       <Amount value={collateralChange} suffix={` ${collateralType?.symbol}`} /> to{' '}
                       {poolName}.
                     </Text>
@@ -256,24 +262,21 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
   const { data: SpotProxy } = useSpotMarketProxy();
   const { data: usdTokens } = useGetUSDTokens();
   const { data: collateralType } = useCollateralType(collateralSymbol);
+  const isBase = isBaseAndromeda(network?.id, network?.preset);
 
-  const collateralAddress = isBaseAndromeda(network?.id, network?.preset)
-    ? usdTokens?.USDC
-    : collateralType?.tokenAddress;
+  const collateralAddress = isBase ? usdTokens?.USDC : collateralType?.tokenAddress;
 
   const collateralNeeded = collateralChange.sub(availableCollateral);
 
   const { approve, requireApproval } = useApprove({
     contractAddress: collateralAddress,
     amount: collateralNeeded.gt(0)
-      ? isBaseAndromeda(network?.id, network?.preset)
+      ? isBase
         ? //Base USDC is 6 decimals
           utils.parseUnits(collateralNeeded.toString(), 6)
         : utils.parseUnits(collateralNeeded.toString(), collateralType?.decimals)
       : 0,
-    spender: isBaseAndromeda(network?.id, network?.preset)
-      ? SpotProxy?.address
-      : CoreProxy?.address,
+    spender: isBase ? SpotProxy?.address : CoreProxy?.address,
   });
 
   const toast = useToast({ isClosable: true, duration: 9000 });
@@ -386,14 +389,12 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
             collateralChange,
           });
 
-          if (isBaseAndromeda(network?.id, network?.preset)) {
+          if (isBase) {
             await depositBaseAndromeda();
           } else {
             await execDeposit();
           }
 
-          setCollateralChange(ZEROWEI);
-
           await Promise.all([
             queryClient.invalidateQueries({
               queryKey: [`${network?.id}-${network?.preset}`, 'EthBalance'],
@@ -419,6 +420,8 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
               : Promise.resolve(),
           ]);
 
+          setCollateralChange(ZEROWEI);
+
           toast.closeAll();
           toast({
             title: 'Success',
@@ -495,6 +498,50 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
     send(Events.RUN);
   }, [handleClose, send, state]);
 
+  const txSummaryItems = useMemo(() => {
+    const items = [
+      {
+        label: 'Total Collateral',
+        value: (
+          <ChangeStat
+            value={txSummary.currentCollateral}
+            newValue={txSummary.currentCollateral.add(txSummary.collateralChange)}
+            formatFn={(val: Wei) => currency(val)}
+            hasChanges={txSummary.collateralChange.abs().gt(0)}
+            size="sm"
+          />
+        ),
+      },
+    ];
+
+    if (isBase) {
+      return items;
+    }
+
+    return [
+      ...items,
+      {
+        label: 'C-ratio',
+        value: (
+          <CRatioChangeStat
+            currentCollateral={txSummary.currentCollateral}
+            currentDebt={txSummary.currentDebt}
+            collateralChange={txSummary.collateralChange}
+            collateralPrice={liquidityPosition?.collateralPrice ?? ZEROWEI}
+            debtChange={ZEROWEI}
+            size="sm"
+          />
+        ),
+      },
+    ];
+  }, [
+    isBase,
+    liquidityPosition?.collateralPrice,
+    txSummary.collateralChange,
+    txSummary.currentCollateral,
+    txSummary.currentDebt,
+  ]);
+
   return (
     <DepositModalUi
       collateralChange={collateralChange}
@@ -509,37 +556,7 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
       poolName={pool?.name || ''}
       availableCollateral={availableCollateral || wei(0)}
       title={title}
-      txSummary={
-        <TransactionSummary
-          items={[
-            {
-              label: 'Total Collateral',
-              value: (
-                <ChangeStat
-                  value={txSummary.currentCollateral}
-                  newValue={txSummary.currentCollateral.add(txSummary.collateralChange)}
-                  formatFn={(val: Wei) => currency(val)}
-                  hasChanges={txSummary.collateralChange.abs().gt(0)}
-                  size="sm"
-                />
-              ),
-            },
-            {
-              label: 'C-ratio',
-              value: (
-                <CRatioChangeStat
-                  currentCollateral={txSummary.currentCollateral}
-                  currentDebt={txSummary.currentDebt}
-                  collateralChange={txSummary.collateralChange}
-                  collateralPrice={liquidityPosition?.collateralPrice ?? ZEROWEI}
-                  debtChange={ZEROWEI}
-                  size="sm"
-                />
-              ),
-            },
-          ]}
-        />
-      }
+      txSummary={<TransactionSummary items={txSummaryItems} />}
     />
   );
 };