fix: manage / dashboard ui issues (#369)

Synthetixio · Jul 18, 2024 · 7ee0bab · 7ee0bab
1 parent 53bc5e4
commit 7ee0bab
Show file tree

Hide file tree

Showing 26 changed files with 359 additions and 487 deletions.
diff --git a/liquidity/components/Amount/Amount.tsx b/liquidity/components/Amount/Amount.tsx
@@ -22,7 +22,7 @@ export function Amount({
       return { formattedValue: '-', preciseValue: '-' };
     }
 
-    const formattedValue = currency(value);
+    const formattedValue = value.eq(0) ? '0.00' : currency(value);
     const cleanNumber = wei(formattedValue.replaceAll(',', ''));
 
     return {

diff --git a/liquidity/components/ClaimModal/ClaimModal.tsx b/liquidity/components/ClaimModal/ClaimModal.tsx
@@ -62,11 +62,15 @@ export const ClaimModalUi: React.FC<{
 
         <Multistep
           step={1}
-          title="Claim"
+          title={isBase ? 'Claim' : 'Borrow'}
           subtitle={
             <Text as="div">
-              Claim{' '}
-              <Amount value={debtChange} suffix={isBase ? ' USDC' : ` ${systemToken?.symbol}`} />
+              {isBase ? 'Claim' : 'Borrow'}
+              <Amount
+                prefix=" "
+                value={debtChange}
+                suffix={isBase ? ' USDC' : ` ${systemToken?.symbol}`}
+              />
             </Text>
           }
           status={{

diff --git a/liquidity/components/WithdrawModal/WithdrawModal.tsx b/liquidity/components/WithdrawModal/WithdrawModal.tsx
@@ -64,7 +64,7 @@ export const WithdrawModalUi: FC<{
           subtitle={
             <Text as="div">
               <Amount value={amount} />
-              {symbol} will be withdrawn
+              &nbsp;{symbol} will be withdrawn
             </Text>
           }
           status={{

diff --git a/liquidity/cypress/cypress/e2e/Home - Connected.e2e.js b/liquidity/cypress/cypress/e2e/Home - Connected.e2e.js
@@ -41,6 +41,6 @@ it('Home Connected', () => {
     // cy.get('[data-cy="assets-deposit-button"]').contains('Deposit');
     cy.get('[data-cy="Total Assets-stats-box"]').contains('$0.00');
     cy.get('[data-cy="Total Delegated-stats-box"]').contains('$0.00');
-    cy.get('[data-cy="Total Debt-stats-box"]').contains('$0.00');
+    // cy.get('[data-cy="Total Debt-stats-box"]').contains('$0.00');
   });
 });
diff --git a/liquidity/cypress/cypress/e2e/Home - Not Connected.e2e.js b/liquidity/cypress/cypress/e2e/Home - Not Connected.e2e.js
@@ -12,5 +12,5 @@ it('Home Not Connected', () => {
   cy.get('[data-cy="connect-button-position-table"]').contains('Connect Wallet');
   cy.get('[data-cy="Total Assets-stats-box"]').contains('$0.00');
   cy.get('[data-cy="Total Delegated-stats-box"]').contains('$0.00');
-  cy.get('[data-cy="Total Debt-stats-box"]').contains('$0.00');
+  // cy.get('[data-cy="Total Debt-stats-box"]').contains('$0.00');
 });
diff --git a/liquidity/lib/useAccounts/useAccounts.ts b/liquidity/lib/useAccounts/useAccounts.ts
@@ -14,7 +14,7 @@ export function useAccounts() {
     queryKey: [
       `${network?.id}-${network?.preset}`,
       'Accounts',
-      { accountAddress: activeWallet?.address },
+      { accountAddress: activeWallet?.address, AccountProxy: AccountProxy?.address },
     ],
     queryFn: async function () {
       if (!AccountProxy || !activeWallet?.address) throw new Error('Should be disabled');
@@ -34,7 +34,6 @@ export function useAccounts() {
       );
       return accounts.map((accountId) => accountId.toString());
     },
-    enabled: Boolean(AccountProxy?.address && activeWallet?.address),
     placeholderData: [],
   });
 }

diff --git a/liquidity/lib/useLiquidityPosition/useLiquidityPosition.ts b/liquidity/lib/useLiquidityPosition/useLiquidityPosition.ts
@@ -99,20 +99,14 @@ export const useLiquidityPosition = ({
       {
         pool: poolId,
         token: tokenAddress,
+        collateralPriceUpdates,
+        systemToken: systemToken?.address,
+        provider: !!provider,
       },
       { priceUpdateTxHash },
     ],
-    enabled: Boolean(
-      CoreProxy &&
-        accountId &&
-        poolId &&
-        tokenAddress &&
-        collateralPriceUpdates &&
-        systemToken &&
-        network &&
-        provider
-    ),
     staleTime: 60000 * 5,
+    enabled: !!tokenAddress,
     queryFn: async () => {
       if (
         !(

diff --git a/liquidity/lib/useLiquidityPositions/useLiquidityPositions.ts b/liquidity/lib/useLiquidityPositions/useLiquidityPositions.ts
@@ -60,6 +60,7 @@ export const useLiquidityPositions = ({ accountId }: { accountId?: string }) =>
         tokens: collateralTypes ? collateralTypes.map((x) => x.tokenAddress).sort() : [],
         collateralPriceUpdatesLength: collateralPriceUpdates?.length,
         priceUpdateTx: stringToHash(priceUpdateTx?.data),
+        CoreProxy: !!CoreProxy,
       },
     ],
     staleTime: 60000 * 5,
@@ -162,7 +163,6 @@ export const useLiquidityPositions = ({ accountId }: { accountId?: string }) =>
         'useLiquidityPositions'
       );
     },
-    enabled: Boolean(CoreProxy && collateralTypes?.length && accountId && pools?.length),
   });
 
   return {

diff --git a/liquidity/ui/package.json b/liquidity/ui/package.json
@@ -55,7 +55,6 @@
     "@snx-v3/useCoreProxy": "workspace:*",
     "@snx-v3/useEthBalance": "workspace:*",
     "@snx-v3/useGasSpeed": "workspace:*",
-    "@snx-v3/useGetBorrow": "workspace:*",
     "@snx-v3/useGetUSDTokens": "workspace:*",
     "@snx-v3/useLiquidityPosition": "workspace:*",
     "@snx-v3/useLiquidityPositions": "workspace:*",

diff --git a/liquidity/ui/src/components/Claim/Claim.tsx b/liquidity/ui/src/components/Claim/Claim.tsx
@@ -5,7 +5,7 @@ import { NumberInput } from '@snx-v3/NumberInput';
 import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
 import { FC, useContext, useMemo } from 'react';
 import { LiquidityPosition } from '@snx-v3/useLiquidityPosition';
-import Wei from '@synthetixio/wei';
+import Wei, { wei } from '@synthetixio/wei';
 import { useNetwork } from '@snx-v3/useBlockchain';
 import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 import { ZEROWEI } from '../../utils/constants';
@@ -25,7 +25,6 @@ const ClaimUi: FC<{
   const { data: systemToken } = useSystemToken();
 
   const isBase = isBaseAndromeda(network?.id, network?.preset);
-
   const max = useMemo(() => maxClaimble.add(maxDebt), [maxClaimble, maxDebt]);
 
   return (
@@ -137,8 +136,16 @@ const ClaimUi: FC<{
         </Alert>
       </Collapse>
 
-      <Button isDisabled={debtChange.lte(0)} data-testid="claim submit" type="submit">
-        {debtChange.gt(0) ? 'Claim' : 'Enter Amount'}
+      <Button
+        isDisabled={debtChange.lte(0) || debtChange.gt(max)}
+        data-testid="claim submit"
+        type="submit"
+      >
+        {debtChange.lte(0)
+          ? 'Enter Amount'
+          : debtChange.gt(maxClaimble) && !isBase
+            ? 'Borrow'
+            : 'Claim'}
       </Button>
     </Flex>
   );
@@ -149,12 +156,12 @@ export const Claim = ({ liquidityPosition }: { liquidityPosition?: LiquidityPosi
   const { network } = useNetwork();
   const { debtChange, collateralChange, setDebtChange } = useContext(ManagePositionContext);
   const maxClaimble = useMemo(() => {
-    if (liquidityPosition?.debt.gte(0)) {
+    if (!liquidityPosition || liquidityPosition?.debt.gte(0)) {
       return ZEROWEI;
     } else {
-      return liquidityPosition?.debt.mul(-1) || ZEROWEI;
+      return wei(liquidityPosition.debt.mul(-1).toBN().sub(1));
     }
-  }, [liquidityPosition?.debt]);
+  }, [liquidityPosition]);
 
   const { data: collateralType } = useCollateralType(params.collateralSymbol);
 

diff --git a/liquidity/ui/src/components/Deposit/Deposit.tsx b/liquidity/ui/src/components/Deposit/Deposit.tsx
@@ -172,7 +172,7 @@ export const DepositUi: FC<{
         <Alert mb={4} status="error">
           <AlertIcon />
           <AlertDescription>
-            You cannot Deposit & Lock more collateral than your balance amount
+            You cannot Deposit & Lock more Collateral than your balance amount
           </AlertDescription>
         </Alert>
       </Collapse>

diff --git a/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx b/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx
@@ -203,7 +203,7 @@ export const InitialDepositUi: FC<{
             <Alert mb={4} status="error">
               <AlertIcon />
               <AlertDescription>
-                You cannot Deposit & Lock more collateral than your balance amount
+                You cannot Deposit & Lock more Collateral than your balance amount
               </AlertDescription>
             </Alert>
           </Collapse>

diff --git a/liquidity/ui/src/components/Manage/ManageActions.tsx b/liquidity/ui/src/components/Manage/ManageActions.tsx
@@ -35,6 +35,14 @@ const validActions = [
 const ManageActionSchema = z.enum(validActions);
 type ManageAction = z.infer<typeof ManageActionSchema>;
 
+const getInitialTab = (manageAction?: ManageAction) => {
+  if (!manageAction || COLLATERALACTIONS.find((aciton) => aciton.link === manageAction)) {
+    return 'collateral';
+  }
+
+  return 'debt';
+};
+
 const ManageActionUi: FC<{
   setActiveAction: (action: string) => void;
   manageAction?: ManageAction;
@@ -45,7 +53,7 @@ const ManageActionUi: FC<{
   // const debt = Number(liquidityPosition?.debt?.toString());
   const isBase = isBaseAndromeda(network?.id, network?.preset);
 
-  const [tab, setTab] = useState('collateral');
+  const [tab, setTab] = useState(getInitialTab(manageAction));
 
   const debtActions = DEBTACTIONS(isBase);
 
@@ -213,7 +221,10 @@ export const ManageAction = ({ liquidityPosition }: { liquidityPosition?: Liquid
   useEffect(() => {
     // This is just for initial state, if we have a manage action selected return
     const queryParams = new URLSearchParams(location.search);
-    if (queryParams.get('manageAction')) return;
+
+    if (queryParams.get('manageAction')) {
+      return;
+    }
     if (!liquidityPosition) return;
     if (!collateralType) return;
 

diff --git a/liquidity/ui/src/components/Manage/ManageStats.tsx b/liquidity/ui/src/components/Manage/ManageStats.tsx
@@ -81,6 +81,9 @@ export const ManageStatsUi: FC<{
 
   return (
     <Flex direction="column" gap={4}>
+      <Text color="white" fontSize="lg" fontFamily="heading" fontWeight="bold" lineHeight="16px">
+        Overview
+      </Text>
       <Flex flexWrap="wrap" direction={['column', 'row']} gap={4}>
         <CollateralStats
           liquidityPosition={liquidityPosition}

diff --git a/liquidity/ui/src/components/Manage/NoPosition.tsx b/liquidity/ui/src/components/Manage/NoPosition.tsx
@@ -14,6 +14,9 @@ import { LiquidityPosition } from '@snx-v3/useLiquidityPosition';
 import { Rewards } from '../Rewards';
 import { RewardsType } from '@snx-v3/useRewards';
 import { PositionTitle } from './PositionTitle';
+import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
+import { useNetwork } from '@snx-v3/useBlockchain';
+import { PnlStats } from './PnlStats';
 
 export const NoPosition: FC<{
   collateralSymbol?: string;
@@ -27,6 +30,7 @@ export const NoPosition: FC<{
   const { collateralChange, setCollateralChange, setDebtChange } =
     useContext(ManagePositionContext);
   const [txnModalOpen, setTxnModalOpen] = useState<'deposit' | null>(null);
+  const { network } = useNetwork();
 
   return (
     <Box mb={12} mt={8}>
@@ -37,30 +41,43 @@ export const NoPosition: FC<{
         <BorderBox gap={4} flex={1} p={6} flexDirection="column" bg="navy.700" height="fit-content">
           <Flex direction={['column', 'row']} gap={4}>
             <CollateralStats
-              liquidityPosition={undefined}
+              liquidityPosition={liquidityPosition}
               collateralType={collateralType}
               newCollateralAmount={collateralChange}
               collateralValue={ZEROWEI}
               hasChanges={collateralChange.gt(0)}
             />
-            <DebtStats
-              liquidityPosition={undefined}
-              collateralType={collateralType}
-              newDebt={ZEROWEI}
-              hasChanges={false}
-            />
+
+            {isBaseAndromeda(network?.id, network?.preset) && (
+              <PnlStats
+                liquidityPosition={liquidityPosition}
+                collateralType={collateralType}
+                newDebt={ZEROWEI}
+                hasChanges={false}
+              />
+            )}
+            {!isBaseAndromeda(network?.id, network?.preset) && (
+              <DebtStats
+                liquidityPosition={liquidityPosition}
+                collateralType={collateralType}
+                newDebt={ZEROWEI}
+                hasChanges={false}
+              />
+            )}
           </Flex>
 
-          <BorderBox py={4} px={6} flexDirection="column" bg="navy.700">
-            <CRatioBar
-              hasChanges={collateralChange.gt(0)}
-              currentCRatio={0}
-              liquidationCratio={(collateralType?.liquidationRatioD18?.toNumber() || 0) * 100}
-              newCratio={collateralChange.gt(0) ? Number.MAX_SAFE_INTEGER : 0}
-              targetCratio={(collateralType?.issuanceRatioD18.toNumber() || 0) * 100}
-              isLoading={false}
-            />
-          </BorderBox>
+          {!isBaseAndromeda(network?.id, network?.preset) && (
+            <BorderBox py={4} px={6} flexDirection="column" bg="navy.700">
+              <CRatioBar
+                hasChanges={collateralChange.gt(0)}
+                currentCRatio={0}
+                liquidationCratio={(collateralType?.liquidationRatioD18?.toNumber() || 0) * 100}
+                newCratio={collateralChange.gt(0) ? Number.MAX_SAFE_INTEGER : 0}
+                targetCratio={(collateralType?.issuanceRatioD18.toNumber() || 0) * 100}
+                isLoading={false}
+              />
+            </BorderBox>
+          )}
           {rewards && <Rewards isLoading={false} rewards={rewards} />}
         </BorderBox>
         <BorderBox