diff --git a/liquidity/components/Pools/VaultRow.tsx b/liquidity/components/Pools/VaultRow.tsx index 904cf59de..0c1a9ec71 100644 --- a/liquidity/components/Pools/VaultRow.tsx +++ b/liquidity/components/Pools/VaultRow.tsx @@ -5,12 +5,12 @@ import { generatePath, Link, useLocation } from 'react-router-dom'; import { useConnectWallet } from '@web3-onboard/react'; import { CollateralType } from '@snx-v3/useCollateralTypes'; import { useIsConnected, useNetwork } from '@snx-v3/useBlockchain'; -import { CollateralIcon } from '@snx-v3/icons'; import { wei } from '@synthetixio/wei'; import { calculateCRatio } from '@snx-v3/calculations'; import { LiquidityPositionType } from '@snx-v3/useLiquidityPositions'; import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda'; import { Tooltip } from '@snx-v3/Tooltip'; +import { TokenIcon } from '../../ui/src/components'; function VaultRowUi({ collateralType, @@ -39,7 +39,7 @@ function VaultRowUi({ - + {liquidityPosition?.collateralValue.gt(0) ? ( diff --git a/liquidity/components/Pools/package.json b/liquidity/components/Pools/package.json index b09415301..fb02f39c1 100644 --- a/liquidity/components/Pools/package.json +++ b/liquidity/components/Pools/package.json @@ -10,7 +10,6 @@ "@snx-v3/Tooltip": "workspace:*", "@snx-v3/calculations": "workspace:*", "@snx-v3/formatters": "workspace:*", - "@snx-v3/icons": "workspace:*", "@snx-v3/isBaseAndromeda": "workspace:*", "@snx-v3/useBlockchain": "workspace:*", "@snx-v3/useCollateralTypes": "workspace:*", diff --git a/liquidity/components/icons/BitcoinIcon/BitcoinIcon.tsx b/liquidity/components/icons/BitcoinIcon/BitcoinIcon.tsx index b06f57f0c..1545c17a4 100644 --- a/liquidity/components/icons/BitcoinIcon/BitcoinIcon.tsx +++ b/liquidity/components/icons/BitcoinIcon/BitcoinIcon.tsx @@ -4,7 +4,7 @@ interface BitcoinIconProps extends IconProps { fill?: string; } -export const BitcoinIcon = ({ width = '42px', height = '42px' }: BitcoinIconProps) => { +export const BitcoinIcon = ({ width = '24px', height = '24px' }: BitcoinIconProps) => { return ( diff --git a/liquidity/components/icons/CollateralIcon/CollateralIcon.tsx b/liquidity/components/icons/CollateralIcon/CollateralIcon.tsx index 454239573..0c39fb7f9 100644 --- a/liquidity/components/icons/CollateralIcon/CollateralIcon.tsx +++ b/liquidity/components/icons/CollateralIcon/CollateralIcon.tsx @@ -30,6 +30,7 @@ export const CollateralIcon = ({ return ; case 'USDx': case 'sUSD': + case 'USDe': case 'snxUSD': return ; case 'WBTC': @@ -47,7 +48,7 @@ export const CollateralIcon = ({ } }; -export const UnknownIcon = ({ width = '32px', height = '32px', ...props }: IconProps) => { +export const UnknownIcon = ({ width = '24px', height = '24px', ...props }: IconProps) => { return ( diff --git a/liquidity/components/icons/DollarCircle/DollarCircle.tsx b/liquidity/components/icons/DollarCircle/DollarCircle.tsx index 435ffa7c8..ded6e107d 100644 --- a/liquidity/components/icons/DollarCircle/DollarCircle.tsx +++ b/liquidity/components/icons/DollarCircle/DollarCircle.tsx @@ -4,7 +4,7 @@ interface DollarCircleProps extends IconProps { fill?: string; } -export const DollarCircle = ({ width = '15px', height = '15px', ...props }: DollarCircleProps) => { +export const DollarCircle = ({ width = '24px', height = '24px', ...props }: DollarCircleProps) => { return ( { +export const SUSDCIcon = ({ width = '24px', height = '24px' }: IconProps) => { return ( diff --git a/liquidity/ui/src/components/Deposit/Deposit.tsx b/liquidity/ui/src/components/Deposit/Deposit.tsx index ac1c558fd..bbc821969 100644 --- a/liquidity/ui/src/components/Deposit/Deposit.tsx +++ b/liquidity/ui/src/components/Deposit/Deposit.tsx @@ -1,7 +1,6 @@ import { Button, Flex, Text } from '@chakra-ui/react'; import { Amount } from '@snx-v3/Amount'; import { BorderBox } from '@snx-v3/BorderBox'; -import { CollateralIcon } from '@snx-v3/icons'; import { ManagePositionContext } from '@snx-v3/ManagePositionContext'; import { NumberInput } from '@snx-v3/NumberInput'; import { PercentBadges } from '@snx-v3/PercentBadges'; @@ -12,7 +11,7 @@ import { FC, useContext, useMemo, useState } from 'react'; import { useParams } from '@snx-v3/useParams'; import { AccountCollateralType } from '@snx-v3/useAccountCollateral'; import { useTransferableSynthetix } from '@snx-v3/useTransferableSynthetix'; -import { CollateralAlert } from '../'; +import { CollateralAlert, TokenIcon } from '../'; import { useTokenBalance } from '@snx-v3/useTokenBalance'; import { LiquidityPosition } from '@snx-v3/useLiquidityPosition'; import { useNetwork } from '@snx-v3/useBlockchain'; @@ -71,7 +70,7 @@ export const DepositUi: FC<{ - + {displaySymbol} diff --git a/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx b/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx index ab8bc4a93..ee5693269 100644 --- a/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx +++ b/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx @@ -40,7 +40,11 @@ export function PositionRow({ collateralTypeAddress: collateralType.tokenAddress, }); - const parsedCRatio = collateralType.issuanceRatioD18.gt(cRatio) ? 'MANAGE' : 'HEALTHY'; + const parsedCRatio = cRatio.eq(0) + ? 'N/A' + : collateralType.issuanceRatioD18.gt(cRatio) + ? 'MANAGE' + : 'HEALTHY'; return ( @@ -145,15 +149,17 @@ export function PositionRow({ - {(cRatio.toNumber() * 100).toFixed(2) + '%'} + {debt.gt(0) ? (cRatio.toNumber() * 100).toFixed(2) + '%' : 'Infinite'} - - {parsedCRatio} - + {parsedCRatio !== 'N/A' && ( + + {parsedCRatio} + + )} diff --git a/liquidity/ui/src/components/Undelegate/Undelegate.tsx b/liquidity/ui/src/components/Undelegate/Undelegate.tsx index c537bd12e..77758c578 100644 --- a/liquidity/ui/src/components/Undelegate/Undelegate.tsx +++ b/liquidity/ui/src/components/Undelegate/Undelegate.tsx @@ -10,7 +10,6 @@ import { } from '@chakra-ui/react'; import { Amount } from '@snx-v3/Amount'; import { BorderBox } from '@snx-v3/BorderBox'; -import { CollateralIcon } from '@snx-v3/icons'; import { ManagePositionContext } from '@snx-v3/ManagePositionContext'; import { NumberInput } from '@snx-v3/NumberInput'; import { useCollateralType } from '@snx-v3/useCollateralTypes'; @@ -22,6 +21,7 @@ import React, { FC, useContext } from 'react'; import { useParams } from '@snx-v3/useParams'; import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda'; import { useNetwork } from '@snx-v3/useBlockchain'; +import { TokenIcon } from '../TokenIcon'; export const UndelegateUi: FC<{ collateralChange: Wei; @@ -73,7 +73,7 @@ export const UndelegateUi: FC<{ - + {displaySymbol} diff --git a/liquidity/ui/src/pages/Manage.tsx b/liquidity/ui/src/pages/Manage.tsx index c7c1298dc..ca363b7ae 100644 --- a/liquidity/ui/src/pages/Manage.tsx +++ b/liquidity/ui/src/pages/Manage.tsx @@ -3,8 +3,7 @@ import { Box, Divider, Flex, Heading, Link, Text } from '@chakra-ui/react'; import { BorderBox } from '@snx-v3/BorderBox'; import { useParams } from '@snx-v3/useParams'; import { CollateralType, useCollateralType } from '@snx-v3/useCollateralTypes'; -import { CollateralIcon } from '@snx-v3/icons'; -import { AccountBanner, ManageAction } from '../components'; +import { AccountBanner, ManageAction, TokenIcon } from '../components'; import { ManagePositionProvider } from '@snx-v3/ManagePositionContext'; import { ManageStats } from '../components'; import { HomeLink } from '@snx-v3/HomeLink'; @@ -72,10 +71,10 @@ export const ManageUi: FC<{ borderRadius="100%" display="flex" > - diff --git a/yarn.lock b/yarn.lock index 4650fabfb..b0e1537a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5423,7 +5423,6 @@ __metadata: "@snx-v3/Tooltip": "workspace:*" "@snx-v3/calculations": "workspace:*" "@snx-v3/formatters": "workspace:*" - "@snx-v3/icons": "workspace:*" "@snx-v3/isBaseAndromeda": "workspace:*" "@snx-v3/useBlockchain": "workspace:*" "@snx-v3/useCollateralTypes": "workspace:*"