Initial deposit (#108)

* Initial deposit * Refactor DebtAmount and ChangeStat * More timeout for SNX Withdraw on Mainnet
Synthetixio · Dec 16, 2024 · 45948eb · 45948eb
1 parent 95cd542
commit 45948eb
Show file tree

Hide file tree

Showing 27 changed files with 260 additions and 183 deletions.
diff --git a/liquidity/components/DepositModal/DepositModal.tsx b/liquidity/components/DepositModal/DepositModal.tsx
@@ -1,6 +1,7 @@
 import { ArrowBackIcon } from '@chakra-ui/icons';
 import { Button, Divider, Link, Text, useToast } from '@chakra-ui/react';
 import { Amount } from '@snx-v3/Amount';
+import { ChangeStat } from '@snx-v3/ChangeStat';
 import { D18, ZEROWEI } from '@snx-v3/constants';
 import { ContractError } from '@snx-v3/ContractError';
 import { currency } from '@snx-v3/format';
@@ -22,7 +23,6 @@ import { Wei, wei } from '@synthetixio/wei';
 import { useMachine } from '@xstate/react';
 import { ethers } from 'ethers';
 import React from 'react';
-import { ChangeStat } from '../../ui/src/components/ChangeStat/ChangeStat';
 import { CRatioChangeStat } from '../../ui/src/components/CRatioBar/CRatioChangeStat';
 import { LiquidityPositionUpdated } from '../../ui/src/components/Manage/LiquidityPositionUpdated';
 import { TransactionSummary } from '../../ui/src/components/TransactionSummary/TransactionSummary';
@@ -71,7 +71,8 @@ export function DepositModal({
   //Preparing wETH
   const { exec: wrapEth, wethBalance } = useWrapEth();
   const wrapETHAmount =
-    collateralType?.symbol === 'WETH' && collateralNeeded.gt(wethBalance || 0)
+    (collateralType?.displaySymbol ?? params.collateralSymbol) === 'WETH' &&
+    collateralNeeded.gt(wethBalance || 0)
       ? collateralNeeded.sub(wethBalance || 0)
       : ZEROWEI;
   //Preparing wETH done
@@ -292,12 +293,12 @@ export function DepositModal({
   const txSummaryItems = React.useMemo(() => {
     const items = [
       {
-        label: `Locked ${collateralType?.symbol}`,
+        label: `Locked ${collateralType?.displaySymbol ?? params.collateralSymbol}`,
         value: (
           <ChangeStat
             value={txSummary.currentCollateral}
             newValue={txSummary.currentCollateral.add(txSummary.collateralChange)}
-            formatFn={(val: Wei) => currency(val)}
+            formatFn={(val?: Wei) => currency(val ?? ZEROWEI)}
             hasChanges={txSummary.collateralChange.abs().gt(0)}
             size="sm"
           />
@@ -326,12 +327,13 @@ export function DepositModal({
       },
     ];
   }, [
-    collateralType?.symbol,
-    network?.preset,
-    liquidityPosition?.collateralPrice,
-    txSummary.collateralChange,
+    collateralType?.displaySymbol,
+    params.collateralSymbol,
     txSummary.currentCollateral,
+    txSummary.collateralChange,
     txSummary.currentDebt,
+    network?.preset,
+    liquidityPosition?.collateralPrice,
   ]);
 
   const symbol = collateralType?.displaySymbol;
@@ -341,7 +343,7 @@ export function DepositModal({
     state.matches(State.deposit) ||
     state.matches(State.wrap);
 
-  const isWETH = collateralType?.symbol === 'WETH';
+  const isWETH = (collateralType?.displaySymbol ?? params.collateralSymbol) === 'WETH';
 
   const stepNumbers = {
     wrap: isWETH ? 1 : 0,
@@ -390,8 +392,11 @@ export function DepositModal({
           subtitle={
             state.context.wrapAmount.eq(0) ? (
               <Text as="div">
-                <Amount value={collateralChange} suffix={` ${collateralType?.symbol}`} /> from
-                balance will be used.
+                <Amount
+                  value={collateralChange}
+                  suffix={` ${collateralType?.displaySymbol ?? params.collateralSymbol}`}
+                />{' '}
+                from balance will be used.
               </Text>
             ) : (
               <Text as="div">
@@ -402,7 +407,7 @@ export function DepositModal({
           }
           status={{
             failed: state.context.error?.step === State.wrap,
-            disabled: collateralType?.symbol !== 'WETH',
+            disabled: (collateralType?.displaySymbol ?? params.collateralSymbol) !== 'WETH',
             success: state.context.wrapAmount.eq(0) || state.matches(State.success),
             loading: state.matches(State.wrap) && !state.context.error,
           }}
@@ -436,7 +441,9 @@ export function DepositModal({
             {state.matches(State.success) ? (
               <Amount
                 value={collateralChange}
-                suffix={` ${collateralType?.symbol} deposited and locked.`}
+                suffix={` ${
+                  collateralType?.displaySymbol ?? params.collateralSymbol
+                } deposited and locked.`}
               />
             ) : (
               <>
@@ -446,22 +453,24 @@ export function DepositModal({
                       <Amount
                         prefix={`This will deposit and lock `}
                         value={collateralChange}
-                        suffix={` ${collateralType?.symbol}.`}
+                        suffix={` ${collateralType?.displaySymbol ?? params.collateralSymbol}.`}
                       />
                     ) : (
                       <>
                         <Text>
                           <Amount
                             prefix={`This will deposit and lock `}
                             value={availableCollateral}
-                            suffix={` ${collateralType?.symbol}.`}
+                            suffix={` ${collateralType?.displaySymbol ?? params.collateralSymbol}.`}
                           />
                         </Text>
                         <Text>
                           <Amount
                             prefix={`An additional `}
                             value={collateralChange.sub(availableCollateral)}
-                            suffix={` ${collateralType?.symbol} will be deposited and locked from your wallet.`}
+                            suffix={` ${
+                              collateralType?.displaySymbol ?? params.collateralSymbol
+                            } will be deposited and locked from your wallet.`}
                           />
                         </Text>
                       </>
@@ -471,7 +480,7 @@ export function DepositModal({
                   <Amount
                     prefix={`This will deposit and lock `}
                     value={collateralChange}
-                    suffix={` ${collateralType?.symbol}.`}
+                    suffix={` ${collateralType?.displaySymbol ?? params.collateralSymbol}.`}
                   />
                 )}
               </>

diff --git a/liquidity/components/DepositModal/StataDepositModal.tsx b/liquidity/components/DepositModal/StataDepositModal.tsx
@@ -1,6 +1,7 @@
 import { ArrowBackIcon } from '@chakra-ui/icons';
 import { Button, Divider, Link, Text, useToast } from '@chakra-ui/react';
 import { Amount } from '@snx-v3/Amount';
+import { ChangeStat } from '@snx-v3/ChangeStat';
 import { D18, D27, D6, ZEROWEI } from '@snx-v3/constants';
 import { ContractError } from '@snx-v3/ContractError';
 import { currency } from '@snx-v3/format';
@@ -23,7 +24,6 @@ import { Wei, wei } from '@synthetixio/wei';
 import { useMachine } from '@xstate/react';
 import { ethers } from 'ethers';
 import React from 'react';
-import { ChangeStat } from '../../ui/src/components/ChangeStat/ChangeStat';
 import { LiquidityPositionUpdated } from '../../ui/src/components/Manage/LiquidityPositionUpdated';
 import { TransactionSummary } from '../../ui/src/components/TransactionSummary/TransactionSummary';
 import { DepositMachine, Events, ServiceNames, State } from './DepositMachine';
@@ -395,12 +395,12 @@ export function StataDepositModal({
           <TransactionSummary
             items={[
               {
-                label: `Locked ${collateralType?.symbol}`,
+                label: `Locked ${collateralType?.displaySymbol ?? params.collateralSymbol}`,
                 value: (
                   <ChangeStat
                     value={txSummary.currentCollateral}
                     newValue={txSummary.currentCollateral.add(txSummary.collateralChange)}
-                    formatFn={(val: Wei) => currency(val)}
+                    formatFn={(val?: Wei) => currency(val ?? ZEROWEI)}
                     hasChanges={txSummary.collateralChange.abs().gt(0)}
                     size="sm"
                   />

diff --git a/liquidity/components/DepositModal/package.json b/liquidity/components/DepositModal/package.json
@@ -7,6 +7,7 @@
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@snx-v3/Amount": "workspace:*",
+    "@snx-v3/ChangeStat": "workspace:*",
     "@snx-v3/ContractError": "workspace:*",
     "@snx-v3/ManagePositionContext": "workspace:*",
     "@snx-v3/Multistep": "workspace:*",

diff --git a/liquidity/components/TrendText/TrendText.tsx b/liquidity/components/TrendText/TrendText.tsx
diff --git a/liquidity/components/TrendText/index.ts b/liquidity/components/TrendText/index.ts
diff --git a/liquidity/components/UndelegateModal/UndelegateModal.tsx b/liquidity/components/UndelegateModal/UndelegateModal.tsx
@@ -1,6 +1,7 @@
 import { ArrowBackIcon } from '@chakra-ui/icons';
 import { Button, Divider, Link, Text, useToast } from '@chakra-ui/react';
 import { Amount } from '@snx-v3/Amount';
+import { ChangeStat } from '@snx-v3/ChangeStat';
 import { ZEROWEI } from '@snx-v3/constants';
 import { ContractError } from '@snx-v3/ContractError';
 import { currency, parseUnits } from '@snx-v3/format';
@@ -19,7 +20,6 @@ import { useUSDC } from '@snx-v3/useUSDC';
 import { Wei, wei } from '@synthetixio/wei';
 import { useMachine } from '@xstate/react';
 import React from 'react';
-import { ChangeStat } from '../../ui/src/components/ChangeStat/ChangeStat';
 import { CRatioChangeStat } from '../../ui/src/components/CRatioBar/CRatioChangeStat';
 import { LiquidityPositionUpdated } from '../../ui/src/components/Manage/LiquidityPositionUpdated';
 import { TransactionSummary } from '../../ui/src/components/TransactionSummary/TransactionSummary';
@@ -183,7 +183,7 @@ export function UndelegateModal({ onClose }: { onClose: () => void }) {
                         <ChangeStat
                           value={txSummary.currentCollateral}
                           newValue={txSummary.currentCollateral.add(txSummary.collateralChange)}
-                          formatFn={(val: Wei) => currency(val)}
+                          formatFn={(val?: Wei) => currency(val ?? ZEROWEI)}
                           hasChanges={txSummary.collateralChange.abs().gt(0)}
                           size="sm"
                         />

diff --git a/liquidity/components/UndelegateModal/package.json b/liquidity/components/UndelegateModal/package.json
@@ -7,6 +7,7 @@
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@snx-v3/Amount": "workspace:*",
+    "@snx-v3/ChangeStat": "workspace:*",
     "@snx-v3/ContractError": "workspace:*",
     "@snx-v3/ManagePositionContext": "workspace:*",
     "@snx-v3/Multistep": "workspace:*",

diff --git a/liquidity/cypress/cypress/e2e/1-main/SNX_Withdraw.e2e.js b/liquidity/cypress/cypress/e2e/1-main/SNX_Withdraw.e2e.js
@@ -56,7 +56,9 @@ describe(__filename, () => {
     cy.get('[data-cy="withdraw confirm button"]').should('include.text', 'Execute Transaction');
     cy.get('[data-cy="withdraw confirm button"]').click();
 
-    cy.contains('[data-status="error"]', 'Withdraw failed').should('exist');
+    cy.contains('[data-status="error"]', 'Withdraw failed', {
+      timeout: 120_000,
+    }).should('exist');
     cy.contains('[data-status="error"]', 'AccountActivityTimeoutPending').should('exist');
     cy.get('[data-status="error"] [aria-label="Close"]').click();
 
@@ -66,7 +68,7 @@ describe(__filename, () => {
     cy.get('[data-cy="withdraw confirm button"]').click();
 
     cy.contains('[data-status="success"]', 'Collateral successfully Withdrawn', {
-      timeout: 180_000,
+      timeout: 120_000,
     }).should('exist');
   });
 });
diff --git a/.../src/components/ChangeStat/ChangeStat.tsx → liquidity/lib/ChangeStat/ChangeStat.tsx b/.../src/components/ChangeStat/ChangeStat.tsx → liquidity/lib/ChangeStat/ChangeStat.tsx
@@ -27,16 +27,14 @@ export function ChangeStat({
   newValue,
   hasChanges,
   'data-cy': dataCy,
-  withColor,
   size = 'lg',
   isPending,
 }: {
   value?: Wei;
   newValue: Wei;
   hasChanges: boolean;
   'data-cy'?: string;
-  formatFn: (val: Wei) => React.ReactNode;
-  withColor?: boolean;
+  formatFn: (val?: Wei) => React.ReactNode;
   size?: 'sm' | 'md' | 'lg';
   isPending?: boolean;
 }) {
@@ -55,28 +53,17 @@ export function ChangeStat({
         data-cy="change stats current"
         textAlign="center"
         opacity={value && value.eq(0) ? '70%' : undefined}
-        color={
-          withColor && value && value.gt(0)
-            ? 'green.700'
-            : value && value.lt(0)
-              ? 'red.700'
-              : 'gray.50'
-        }
         whiteSpace="nowrap"
       >
-        {isPending ? '~' : null}
-        {!isPending && value ? formatFn(value) : null}
+        {isPending ? '~' : formatFn(value)}
       </Text>
-      {hasChanges && !isPending && value && !value.eq(newValue) ? (
+      {hasChanges && !isPending && (!value || !value.eq(newValue)) ? (
         <Flex gap="1" alignItems="center" isTruncated>
           <ArrowForwardIcon />
           <Text
             data-cy="change stats new"
             textAlign="center"
             opacity={newValue.eq(0) ? '70%' : undefined}
-            color={
-              withColor && newValue.gt(0) ? 'green.700' : newValue.lt(0) ? 'red.700' : 'gray.50'
-            }
             whiteSpace="nowrap"
           >
             {formatFn(newValue)}

diff --git a/liquidity/lib/ChangeStat/index.ts b/liquidity/lib/ChangeStat/index.ts
@@ -0,0 +1 @@
+export * from './ChangeStat';
diff --git a/liquidity/lib/ChangeStat/package.json b/liquidity/lib/ChangeStat/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@snx-v3/ChangeStat",
+  "private": true,
+  "main": "index.ts",
+  "version": "0.0.1",
+  "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.2",
+    "@synthetixio/wei": "^2.74.4",
+    "react": "^18.2.0"
+  }
+}
diff --git a/liquidity/lib/DebtAmount/DebtAmount.tsx b/liquidity/lib/DebtAmount/DebtAmount.tsx
@@ -0,0 +1,33 @@
+import { Text, TextProps } from '@chakra-ui/react';
+import { Amount } from '@snx-v3/Amount';
+import { ZEROWEI } from '@snx-v3/constants';
+import { Wei } from '@synthetixio/wei';
+
+export function getDebtColor(debt?: Wei) {
+  if (!debt) {
+    return 'gray.50';
+  }
+  if (debt.gt(0)) {
+    return 'red.500';
+  }
+  if (debt.lt(0)) {
+    return 'green.500';
+  }
+  return 'white.500';
+}
+
+export function PnlAmount({ debt, ...props }: TextProps & { debt?: Wei }) {
+  return (
+    <Text {...props} color={getDebtColor(debt)}>
+      <Amount prefix={`${debt && debt.gt(0) ? '-' : ''}$`} value={debt ? debt.abs() : ZEROWEI} />
+    </Text>
+  );
+}
+
+export function DebtAmount({ debt, ...props }: TextProps & { debt?: Wei }) {
+  return (
+    <Text {...props} color={getDebtColor(debt)}>
+      <Amount prefix={`${debt && debt.lt(0) ? '-' : ''}$`} value={debt ? debt.abs() : ZEROWEI} />
+    </Text>
+  );
+}
diff --git a/liquidity/lib/DebtAmount/index.ts b/liquidity/lib/DebtAmount/index.ts
@@ -0,0 +1 @@
+export * from './DebtAmount';
diff --git a/liquidity/components/TrendText/package.json → liquidity/lib/DebtAmount/package.json b/liquidity/components/TrendText/package.json → liquidity/lib/DebtAmount/package.json
@@ -1,10 +1,12 @@
 {
-  "name": "@snx-v3/TrendText",
+  "name": "@snx-v3/DebtAmount",
   "private": true,
   "main": "index.ts",
   "version": "0.0.1",
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
+    "@snx-v3/Amount": "workspace:*",
+    "@snx-v3/constants": "workspace:*",
     "@synthetixio/wei": "^2.74.4"
   }
 }
diff --git a/liquidity/ui/package.json b/liquidity/ui/package.json
@@ -15,8 +15,10 @@
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@snx-v3/Amount": "workspace:*",
     "@snx-v3/BorderBox": "workspace:*",
+    "@snx-v3/ChangeStat": "workspace:*",
     "@snx-v3/ClaimModal": "workspace:*",
     "@snx-v3/ContractError": "workspace:*",
+    "@snx-v3/DebtAmount": "workspace:*",
     "@snx-v3/DepositModal": "workspace:*",
     "@snx-v3/ManagePositionContext": "workspace:*",
     "@snx-v3/Multistep": "workspace:*",