diff --git a/liquidity/components/DepositModal/DepositModal.tsx b/liquidity/components/DepositModal/DepositModal.tsx index 722881ba7..5e27af30b 100644 --- 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: ( 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) ? ( - from - balance will be used. + {' '} + from balance will be used. ) : ( @@ -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) ? ( ) : ( <> @@ -446,7 +453,7 @@ export function DepositModal({ ) : ( <> @@ -454,14 +461,16 @@ export function DepositModal({ @@ -471,7 +480,7 @@ export function DepositModal({ )} diff --git a/liquidity/components/DepositModal/StataDepositModal.tsx b/liquidity/components/DepositModal/StataDepositModal.tsx index b79b90645..4bae3c8b8 100644 --- 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({ 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 index eecdb1224..7760dfe90 100644 --- 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 deleted file mode 100644 index 4b6ebdbb4..000000000 --- a/liquidity/components/TrendText/TrendText.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { Text, TextProps } from '@chakra-ui/react'; -import Wei, { wei } from '@synthetixio/wei'; - -export const TrendText = (props: TextProps & { value: Wei | number }) => ( - -); diff --git a/liquidity/components/TrendText/index.ts b/liquidity/components/TrendText/index.ts deleted file mode 100644 index b3468fafa..000000000 --- a/liquidity/components/TrendText/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './TrendText'; diff --git a/liquidity/components/UndelegateModal/UndelegateModal.tsx b/liquidity/components/UndelegateModal/UndelegateModal.tsx index 86307e07d..3fd19c9e5 100644 --- 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 }) { 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 index aed8b5997..1b204d469 100644 --- 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 index 1fd431530..e1009d1b4 100644 --- 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/liquidity/ui/src/components/ChangeStat/ChangeStat.tsx b/liquidity/lib/ChangeStat/ChangeStat.tsx similarity index 73% rename from liquidity/ui/src/components/ChangeStat/ChangeStat.tsx rename to liquidity/lib/ChangeStat/ChangeStat.tsx index f0576fee7..6efadbc63 100644 --- a/liquidity/ui/src/components/ChangeStat/ChangeStat.tsx +++ b/liquidity/lib/ChangeStat/ChangeStat.tsx @@ -27,7 +27,6 @@ export function ChangeStat({ newValue, hasChanges, 'data-cy': dataCy, - withColor, size = 'lg', isPending, }: { @@ -35,8 +34,7 @@ export function ChangeStat({ 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)} - {hasChanges && !isPending && value && !value.eq(newValue) ? ( + {hasChanges && !isPending && (!value || !value.eq(newValue)) ? ( {formatFn(newValue)} diff --git a/liquidity/lib/ChangeStat/index.ts b/liquidity/lib/ChangeStat/index.ts new file mode 100644 index 000000000..b1e112131 --- /dev/null +++ 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 new file mode 100644 index 000000000..ae56c524d --- /dev/null +++ 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 new file mode 100644 index 000000000..ee803ae37 --- /dev/null +++ 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 ( + + + + ); +} + +export function DebtAmount({ debt, ...props }: TextProps & { debt?: Wei }) { + return ( + + + + ); +} diff --git a/liquidity/lib/DebtAmount/index.ts b/liquidity/lib/DebtAmount/index.ts new file mode 100644 index 000000000..b21bbe373 --- /dev/null +++ b/liquidity/lib/DebtAmount/index.ts @@ -0,0 +1 @@ +export * from './DebtAmount'; diff --git a/liquidity/components/TrendText/package.json b/liquidity/lib/DebtAmount/package.json similarity index 59% rename from liquidity/components/TrendText/package.json rename to liquidity/lib/DebtAmount/package.json index 5aa55fe6e..6abba1e39 100644 --- a/liquidity/components/TrendText/package.json +++ b/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 index 808b424bc..0165dc4e6 100644 --- 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:*", diff --git a/liquidity/ui/src/components/Deposit/Deposit.tsx b/liquidity/ui/src/components/Deposit/Deposit.tsx index e37330122..6989da9ec 100644 --- a/liquidity/ui/src/components/Deposit/Deposit.tsx +++ b/liquidity/ui/src/components/Deposit/Deposit.tsx @@ -10,18 +10,19 @@ import { } from '@chakra-ui/react'; import { Amount } from '@snx-v3/Amount'; import { BorderBox } from '@snx-v3/BorderBox'; +import { ChangeStat } from '@snx-v3/ChangeStat'; import { ZEROWEI } from '@snx-v3/constants'; import { currency } from '@snx-v3/format'; import { formatNumber } from '@snx-v3/formatters'; import { ManagePositionContext } from '@snx-v3/ManagePositionContext'; import { NumberInput } from '@snx-v3/NumberInput'; -import { useStaticAaveUSDC } from '@snx-v3/useStaticAaveUSDC'; import { useNetwork } from '@snx-v3/useBlockchain'; import { useCollateralType } from '@snx-v3/useCollateralTypes'; import { useEthBalance } from '@snx-v3/useEthBalance'; import { useIsSynthStataUSDC } from '@snx-v3/useIsSynthStataUSDC'; import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition'; import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams'; +import { useStaticAaveUSDC } from '@snx-v3/useStaticAaveUSDC'; import { useStaticAaveUSDCRate } from '@snx-v3/useStaticAaveUSDCRate'; import { useTokenBalance } from '@snx-v3/useTokenBalance'; import { useTokenPrice } from '@snx-v3/useTokenPrice'; @@ -30,7 +31,6 @@ import { useUSDC } from '@snx-v3/useUSDC'; import { WithdrawIncrease } from '@snx-v3/WithdrawIncrease'; import { Wei, wei } from '@synthetixio/wei'; import React from 'react'; -import { ChangeStat } from '../ChangeStat/ChangeStat'; import { CollateralAlert } from '../CollateralAlert/CollateralAlert'; import { CRatioChangeStat } from '../CRatioBar/CRatioChangeStat'; import { TokenIcon } from '../TokenIcon/TokenIcon'; @@ -63,39 +63,55 @@ export function Deposit() { const { data: stataBalance } = useTokenBalance(StaticAaveUSDC?.address); const maxAmount = React.useMemo(() => { - if (collateralType?.symbol === 'SNX' && liquidityPosition && transferrableSnx) { - return liquidityPosition.availableCollateral.add(transferrableSnx.transferable); + if (collateralType?.symbol === 'SNX') { + return ( + ZEROWEI + // + .add(transferrableSnx ? transferrableSnx.transferable : ZEROWEI) + .add(liquidityPosition ? liquidityPosition.availableCollateral : ZEROWEI) + ); } - if (collateralType?.symbol === 'WETH' && liquidityPosition && collateralBalance && ethBalance) { - return liquidityPosition.availableCollateral.add(collateralBalance).add(ethBalance); - } - if ( - isStataUSDC && - liquidityPosition && - usdcBalance && - stataBalance && - collateralBalance && - stataUSDCRate - ) { - const stataAmount = liquidityPosition.availableCollateral // synth stata deposited - .add(stataBalance) // stata in wallet - .add(collateralBalance); // synth stata in wallet - return stataAmount.add(usdcBalance.div(wei(stataUSDCRate, 27)).mul(97).div(100)); // Add 97% of wallet USDC + + if (collateralType?.symbol === 'WETH') { + return ( + ZEROWEI + // + .add(ethBalance ?? ZEROWEI) + .add(collateralBalance ?? ZEROWEI) + .add(liquidityPosition ? liquidityPosition.availableCollateral : ZEROWEI) + ); } - if ( - collateralType?.symbol === 'USDC' && - network?.preset === 'andromeda' && - liquidityPosition && - usdcBalance - ) { - return liquidityPosition.availableCollateral.add(usdcBalance); + + if (isStataUSDC) { + return ( + ZEROWEI + // + .add( + usdcBalance && stataUSDCRate + ? usdcBalance.div(wei(stataUSDCRate, 27)).mul(97).div(100) // Add 97% of wallet USDC + : ZEROWEI + ) + .add(collateralBalance ?? ZEROWEI) // synth stata in wallet + .add(stataBalance ?? ZEROWEI) // stata in wallet + .add(liquidityPosition ? liquidityPosition.availableCollateral : ZEROWEI) // synth stata deposited + ); } - if (liquidityPosition && collateralBalance) { - return liquidityPosition.availableCollateral.add(collateralBalance); + if (collateralType?.symbol === 'USDC' && network?.preset === 'andromeda') { + return ( + ZEROWEI + // + .add(usdcBalance ?? ZEROWEI) + .add(liquidityPosition ? liquidityPosition.availableCollateral : ZEROWEI) + ); } - return ZEROWEI; + return ( + ZEROWEI + // + .add(collateralBalance ?? ZEROWEI) + .add(liquidityPosition ? liquidityPosition.availableCollateral : ZEROWEI) + ); }, [ collateralType?.symbol, liquidityPosition, @@ -120,8 +136,12 @@ export function Deposit() { - - {collateralType?.displaySymbol} + + {collateralType?.displaySymbol ?? params.collateralSymbol} - {isPendingLiquidityPosition ? 'Balance: ~' : null} - {!isPendingLiquidityPosition && maxAmount ? ( + {params.accountId && isPendingLiquidityPosition ? 'Balance: ~' : null} + {(!params.accountId || (params.accountId && !isPendingLiquidityPosition)) && + maxAmount ? ( <>   @@ -222,7 +243,7 @@ export function Deposit() { min={ZEROWEI} /> - {price.gt(0) && } + @@ -299,7 +320,7 @@ export function Deposit() { currency(val)} + formatFn={(val?: Wei) => currency(val ?? ZEROWEI)} hasChanges={collateralChange.abs().gt(0)} size="sm" /> @@ -333,14 +354,14 @@ export function Deposit() { data-cy="deposit submit" type="submit" isDisabled={ - collateralChange.lte(0) || - maxAmount.eq(0) || - !collateralType || - !liquidityPosition || - collateralChange - .add(liquidityPosition.collateralAmount) - .lt(collateralType.minDelegationD18) || - overAvailableBalance + !( + collateralChange.gt(0) && + !overAvailableBalance && + collateralType && + collateralChange + .add(liquidityPosition?.collateralAmount ?? ZEROWEI) + .gt(collateralType.minDelegationD18) + ) } > {collateralChange.lte(0) ? 'Enter Amount' : 'Deposit and Lock Collateral'} diff --git a/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx b/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx index 9fbbef4bb..82d645a86 100644 --- a/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx +++ b/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx @@ -132,8 +132,12 @@ export function InitialDeposit({ width="fit-content" > - - {collateralType?.displaySymbol} + + {collateralType?.displaySymbol ?? params.collateralSymbol} diff --git a/liquidity/ui/src/components/Manage/CollateralStats.tsx b/liquidity/ui/src/components/Manage/CollateralStats.tsx index b5c59104e..7c12c0677 100644 --- a/liquidity/ui/src/components/Manage/CollateralStats.tsx +++ b/liquidity/ui/src/components/Manage/CollateralStats.tsx @@ -1,11 +1,12 @@ import { Flex, Text } from '@chakra-ui/react'; import { BorderBox } from '@snx-v3/BorderBox'; +import { ChangeStat } from '@snx-v3/ChangeStat'; +import { ZEROWEI } from '@snx-v3/constants'; import { currency } from '@snx-v3/format'; import { useCollateralType } from '@snx-v3/useCollateralTypes'; import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition'; import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams'; -import Wei from '@synthetixio/wei'; -import { ChangeStat } from '../ChangeStat/ChangeStat'; +import { type Wei } from '@synthetixio/wei'; export function CollateralStats({ newCollateralAmount, @@ -34,36 +35,37 @@ export function CollateralStats({ - {!isPendingLiquidityPosition && liquidityPosition && collateralType ? ( - + + + `${currency(val ?? ZEROWEI)} ${ + collateralType?.displaySymbol ?? params.collateralSymbol + }` + } + hasChanges={hasChanges} + data-cy="stats collateral" + /> + {liquidityPosition ? ( `${currency(val)} ${collateralType.displaySymbol}`} - hasChanges={hasChanges} - data-cy="stats collateral" - /> - currency(val, { currency: 'USD', style: 'currency' })} + isPending={Boolean(params.accountId && isPendingLiquidityPosition)} + value={ + liquidityPosition + ? liquidityPosition.collateralAmount.mul(liquidityPosition.collateralPrice) + : ZEROWEI + } + newValue={newCollateralAmount.mul(liquidityPosition?.collateralPrice ?? ZEROWEI)} + formatFn={(val?: Wei) => + currency(val ?? ZEROWEI, { currency: 'USD', style: 'currency' }) + } size="md" hasChanges={hasChanges} data-cy="stats collateral value" /> - - ) : null} - - {isPendingLiquidityPosition ? ( - - null} - hasChanges={hasChanges} - isPending={isPendingLiquidityPosition} - /> - - ) : null} + ) : null} + diff --git a/liquidity/ui/src/components/Manage/DebtStats.tsx b/liquidity/ui/src/components/Manage/DebtStats.tsx index a096367a0..0d61131c9 100644 --- a/liquidity/ui/src/components/Manage/DebtStats.tsx +++ b/liquidity/ui/src/components/Manage/DebtStats.tsx @@ -1,12 +1,12 @@ import { InfoIcon } from '@chakra-ui/icons'; import { Flex, Text, Tooltip } from '@chakra-ui/react'; import { BorderBox } from '@snx-v3/BorderBox'; +import { ChangeStat } from '@snx-v3/ChangeStat'; +import { DebtAmount } from '@snx-v3/DebtAmount'; import { useCollateralType } from '@snx-v3/useCollateralTypes'; import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition'; import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams'; import { type Wei } from '@synthetixio/wei'; -import { ChangeStat } from '../ChangeStat/ChangeStat'; -import { DebtAmount } from '../Positions/DebtAmount'; export function DebtStats({ newDebt, hasChanges }: { newDebt: Wei; hasChanges: boolean }) { const [params] = useParams(); @@ -47,9 +47,9 @@ export function DebtStats({ newDebt, hasChanges }: { newDebt: Wei; hasChanges: b } + formatFn={(val?: Wei) => } hasChanges={hasChanges} data-cy="stats debt" /> diff --git a/liquidity/ui/src/components/Manage/PnlStats.tsx b/liquidity/ui/src/components/Manage/PnlStats.tsx index 077fad762..8d402ace1 100644 --- a/liquidity/ui/src/components/Manage/PnlStats.tsx +++ b/liquidity/ui/src/components/Manage/PnlStats.tsx @@ -1,13 +1,13 @@ import { InfoIcon } from '@chakra-ui/icons'; import { Flex, Text } from '@chakra-ui/react'; import { BorderBox } from '@snx-v3/BorderBox'; -import { currency } from '@snx-v3/format'; +import { ChangeStat } from '@snx-v3/ChangeStat'; +import { PnlAmount } from '@snx-v3/DebtAmount'; import { Tooltip } from '@snx-v3/Tooltip'; import { useCollateralType } from '@snx-v3/useCollateralTypes'; import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition'; import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams'; import { type Wei } from '@synthetixio/wei'; -import { ChangeStat } from '../ChangeStat/ChangeStat'; export function PnlStats({ newDebt, hasChanges }: { newDebt: Wei; hasChanges: boolean }) { const [params] = useParams(); @@ -39,16 +39,9 @@ export function PnlStats({ newDebt, hasChanges }: { newDebt: Wei; hasChanges: bo - currency(val, { - currency: 'USD', - style: 'currency', - maximumFractionDigits: 4, - }) - } - withColor + formatFn={(val?: Wei) => } hasChanges={hasChanges} data-cy="stats pnl" /> diff --git a/liquidity/ui/src/components/MigrateUSD/StepSuccess.tsx b/liquidity/ui/src/components/MigrateUSD/StepSuccess.tsx index 78f243f82..01e931308 100644 --- a/liquidity/ui/src/components/MigrateUSD/StepSuccess.tsx +++ b/liquidity/ui/src/components/MigrateUSD/StepSuccess.tsx @@ -1,9 +1,10 @@ import { ArrowUpIcon, CheckIcon } from '@chakra-ui/icons'; import { Alert, Button, Flex, Text, VStack } from '@chakra-ui/react'; +import { ChangeStat } from '@snx-v3/ChangeStat'; +import { ZEROWEI } from '@snx-v3/constants'; import { currency } from '@snx-v3/format'; import Wei from '@synthetixio/wei'; import React from 'react'; -import { ChangeStat } from '../ChangeStat/ChangeStat'; import { TransactionSummary } from '../TransactionSummary/TransactionSummary'; export const StepSuccess = ({ @@ -41,7 +42,7 @@ export const StepSuccess = ({ currency(val)} + formatFn={(val?: Wei) => currency(val ?? ZEROWEI)} hasChanges size="sm" /> @@ -53,7 +54,7 @@ export const StepSuccess = ({ currency(val)} + formatFn={(val?: Wei) => currency(val ?? ZEROWEI)} hasChanges size="sm" /> diff --git a/liquidity/ui/src/components/Positions/DebtAmount.tsx b/liquidity/ui/src/components/Positions/DebtAmount.tsx deleted file mode 100644 index 325f415fb..000000000 --- a/liquidity/ui/src/components/Positions/DebtAmount.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Text, TextProps } from '@chakra-ui/react'; -import { Amount } from '@snx-v3/Amount'; -import Wei from '@synthetixio/wei'; -import { FC } from 'react'; - -interface Props extends TextProps { - debt: Wei; - showPNL?: boolean; -} - -export const DebtAmount: FC = ({ debt, showPNL, ...props }) => { - const amount = showPNL ? debt.mul(-1) : debt; - - return ( - - - - ); -}; diff --git a/liquidity/ui/src/components/Positions/PositionsRow.tsx b/liquidity/ui/src/components/Positions/PositionsRow.tsx index 8dfe27046..8fc88a6aa 100644 --- a/liquidity/ui/src/components/Positions/PositionsRow.tsx +++ b/liquidity/ui/src/components/Positions/PositionsRow.tsx @@ -1,6 +1,7 @@ import { TimeIcon } from '@chakra-ui/icons'; import { Box, Button, Collapse, Fade, Flex, Link, Td, Text, Tooltip } from '@chakra-ui/react'; import { Amount } from '@snx-v3/Amount'; +import { DebtAmount, PnlAmount } from '@snx-v3/DebtAmount'; import { useStataUSDCApr } from '@snx-v3/useApr/useStataUSDCApr'; import { useNetwork } from '@snx-v3/useBlockchain'; import { useIsSynthStataUSDC } from '@snx-v3/useIsSynthStataUSDC'; @@ -10,7 +11,6 @@ import { useWithdrawTimer } from '@snx-v3/useWithdrawTimer'; import { CRatioAmount } from '../CRatioBar/CRatioAmount'; import { CRatioBadge } from '../CRatioBar/CRatioBadge'; import { TokenIcon } from '../TokenIcon/TokenIcon'; -import { DebtAmount } from './DebtAmount'; export function PositionRow({ liquidityPosition, @@ -155,13 +155,21 @@ export function PositionRow({ - + {network?.preset === 'andromeda' ? ( + + ) : ( + + )} {liquidityPosition.debt.gt(0) ? ( { } + value={} label={Aggregated PNL of all your open Positions} /> ) : null} @@ -93,7 +94,7 @@ export const StatsList = () => { } + value={} label={Aggregated Debt of all your open Positions} /> ) : null} diff --git a/liquidity/ui/src/components/SynthSkeleton/SynthSkeleton.tsx b/liquidity/ui/src/components/SynthSkeleton/SynthSkeleton.tsx index 9564cf5ad..f5f63769e 100644 --- a/liquidity/ui/src/components/SynthSkeleton/SynthSkeleton.tsx +++ b/liquidity/ui/src/components/SynthSkeleton/SynthSkeleton.tsx @@ -1,4 +1,5 @@ import { Skeleton, SkeletonCircle, SkeletonProps } from '@chakra-ui/react'; +import React from 'react'; interface SynthSkeletonProps extends SkeletonProps { children: React.ReactNode; diff --git a/liquidity/ui/src/components/Undelegate/Undelegate.tsx b/liquidity/ui/src/components/Undelegate/Undelegate.tsx index 99cd1bfce..d136af810 100644 --- a/liquidity/ui/src/components/Undelegate/Undelegate.tsx +++ b/liquidity/ui/src/components/Undelegate/Undelegate.tsx @@ -11,6 +11,7 @@ import { } from '@chakra-ui/react'; import { Amount } from '@snx-v3/Amount'; import { BorderBox } from '@snx-v3/BorderBox'; +import { ChangeStat } from '@snx-v3/ChangeStat'; import { ZEROWEI } from '@snx-v3/constants'; import { currency } from '@snx-v3/format'; import { ManagePositionContext } from '@snx-v3/ManagePositionContext'; @@ -24,7 +25,6 @@ import { useWithdrawTimer } from '@snx-v3/useWithdrawTimer'; import { validatePosition } from '@snx-v3/validatePosition'; import Wei, { wei } from '@synthetixio/wei'; import React from 'react'; -import { ChangeStat } from '../ChangeStat/ChangeStat'; import { CRatioChangeStat } from '../CRatioBar/CRatioChangeStat'; import { TokenIcon } from '../TokenIcon/TokenIcon'; import { TransactionSummary } from '../TransactionSummary/TransactionSummary'; @@ -111,8 +111,12 @@ export function Undelegate() { - - {collateralType?.displaySymbol} + + {collateralType?.displaySymbol ?? params.collateralSymbol} @@ -184,7 +188,7 @@ export function Undelegate() { The minimal locked amount is{' '} @@ -289,12 +293,12 @@ export function Undelegate() { mb={6} items={[ { - label: `Locked ${collateralType?.symbol}`, + label: `Locked ${collateralType?.displaySymbol ?? params.collateralSymbol}`, value: ( currency(val)} + formatFn={(val?: Wei) => currency(val ?? ZEROWEI)} hasChanges={collateralChange.abs().gt(0)} size="sm" /> diff --git a/yarn.lock b/yarn.lock index e5272fdb6..2c5569ed5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4647,6 +4647,17 @@ __metadata: languageName: unknown linkType: soft +"@snx-v3/ChangeStat@workspace:*, @snx-v3/ChangeStat@workspace:liquidity/lib/ChangeStat": + version: 0.0.0-use.local + resolution: "@snx-v3/ChangeStat@workspace:liquidity/lib/ChangeStat" + dependencies: + "@chakra-ui/icons": "npm:^2.1.1" + "@chakra-ui/react": "npm:^2.8.2" + "@synthetixio/wei": "npm:^2.74.4" + react: "npm:^18.2.0" + languageName: unknown + linkType: soft + "@snx-v3/ClaimModal@workspace:*, @snx-v3/ClaimModal@workspace:liquidity/components/ClaimModal": version: 0.0.0-use.local resolution: "@snx-v3/ClaimModal@workspace:liquidity/components/ClaimModal" @@ -4693,6 +4704,17 @@ __metadata: languageName: unknown linkType: soft +"@snx-v3/DebtAmount@workspace:*, @snx-v3/DebtAmount@workspace:liquidity/lib/DebtAmount": + version: 0.0.0-use.local + resolution: "@snx-v3/DebtAmount@workspace:liquidity/lib/DebtAmount" + dependencies: + "@chakra-ui/react": "npm:^2.8.2" + "@snx-v3/Amount": "workspace:*" + "@snx-v3/constants": "workspace:*" + "@synthetixio/wei": "npm:^2.74.4" + languageName: unknown + linkType: soft + "@snx-v3/DepositModal@workspace:*, @snx-v3/DepositModal@workspace:liquidity/components/DepositModal": version: 0.0.0-use.local resolution: "@snx-v3/DepositModal@workspace:liquidity/components/DepositModal" @@ -4700,6 +4722,7 @@ __metadata: "@chakra-ui/icons": "npm:^2.1.1" "@chakra-ui/react": "npm:^2.8.2" "@snx-v3/Amount": "workspace:*" + "@snx-v3/ChangeStat": "workspace:*" "@snx-v3/ContractError": "workspace:*" "@snx-v3/ManagePositionContext": "workspace:*" "@snx-v3/Multistep": "workspace:*" @@ -4819,15 +4842,6 @@ __metadata: languageName: unknown linkType: soft -"@snx-v3/TrendText@workspace:liquidity/components/TrendText": - version: 0.0.0-use.local - resolution: "@snx-v3/TrendText@workspace:liquidity/components/TrendText" - dependencies: - "@chakra-ui/react": "npm:^2.8.2" - "@synthetixio/wei": "npm:^2.74.4" - languageName: unknown - linkType: soft - "@snx-v3/UndelegateModal@workspace:*, @snx-v3/UndelegateModal@workspace:liquidity/components/UndelegateModal": version: 0.0.0-use.local resolution: "@snx-v3/UndelegateModal@workspace:liquidity/components/UndelegateModal" @@ -4835,6 +4849,7 @@ __metadata: "@chakra-ui/icons": "npm:^2.1.1" "@chakra-ui/react": "npm:^2.8.2" "@snx-v3/Amount": "workspace:*" + "@snx-v3/ChangeStat": "workspace:*" "@snx-v3/ContractError": "workspace:*" "@snx-v3/ManagePositionContext": "workspace:*" "@snx-v3/Multistep": "workspace:*" @@ -5038,8 +5053,10 @@ __metadata: "@safe-global/safe-apps-sdk": "npm:^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:*"