feat: update collateral to token icon (#339)

Synthetixio · Jun 26, 2024 · 0525f06 · 0525f06
1 parent 61a68a1
commit 0525f06
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 28 deletions.
diff --git 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({
     <Tr>
       <Td>
         <Flex flexDir="row" py={4}>
-          <CollateralIcon width="40px" height="40px" symbol={collateralType.symbol} />
+          <TokenIcon width={40} height={40} symbol={collateralType.symbol} />
           <Flex flexDirection="column" justifyContent="center" ml={2}>
             <Text fontSize="sm" lineHeight="20px" fontWeight="500" data-testid="collateral-value">
               {liquidityPosition?.collateralValue.gt(0) ? (

diff --git 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
@@ -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 (
     <Icon width={width} height={height} viewBox="0 0 42 42" fill="none">
       <g clipPath="url(#a)">

diff --git a/liquidity/components/icons/CollateralIcon/CollateralIcon.tsx b/liquidity/components/icons/CollateralIcon/CollateralIcon.tsx
@@ -30,6 +30,7 @@ export const CollateralIcon = ({
       return <OptimismIcon {...props} />;
     case 'USDx':
     case 'sUSD':
+    case 'USDe':
     case 'snxUSD':
       return <DollarCircle {...props} />;
     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 (
     <Icon width={width} height={height} viewBox="0 0 32 32" fill="none" {...props}>
       <circle cx="16" cy="16" r="15" fill="white" stroke="white" />

diff --git 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 (
     <Icon width={width} height={height} viewBox="0 0 19 18" fill="none" {...props}>
       <path

diff --git a/liquidity/components/icons/SUSDCIcon/SUSDCIcon.tsx b/liquidity/components/icons/SUSDCIcon/SUSDCIcon.tsx
@@ -1,6 +1,6 @@
 import { Icon, IconProps } from '@chakra-ui/react';
 
-export const SUSDCIcon = ({ width = '42px', height = '42px' }: IconProps) => {
+export const SUSDCIcon = ({ width = '24px', height = '24px' }: IconProps) => {
   return (
     <Icon width={width} height={height} viewBox="0 0 30 30" fill="none">
       <g clipPath="url(#clip0_10043_2361)">

diff --git 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<{
       <BorderBox display="flex" flexDirection="column" py={2} px={3} mb="4">
         <Flex>
           <Text display="flex" gap={2} alignItems="center" fontWeight="600" mx="2">
-            <CollateralIcon symbol={symbol} />
+            <TokenIcon symbol={symbol} />
             {displaySymbol}
           </Text>
           <Flex flexDirection="column" justifyContent="flex-end" flexGrow={1}>

diff --git 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 (
     <Tr borderBottomWidth={final ? 'none' : '1px'}>
@@ -145,15 +149,17 @@ export function PositionRow({
           <Fade in>
             <Flex flexDirection="column" alignItems="flex-end">
               <Text color="white" fontWeight={700} lineHeight="1.25rem" fontFamily="heading">
-                {(cRatio.toNumber() * 100).toFixed(2) + '%'}
+                {debt.gt(0) ? (cRatio.toNumber() * 100).toFixed(2) + '%' : 'Infinite'}
               </Text>
-              <Badge
-                colorScheme={parsedCRatio === 'MANAGE' ? 'red' : 'green'}
-                border="1px solid"
-                bg={parsedCRatio === 'MANAGE' ? 'red.900' : 'green.900'}
-              >
-                {parsedCRatio}
-              </Badge>
+              {parsedCRatio !== 'N/A' && (
+                <Badge
+                  colorScheme={parsedCRatio === 'MANAGE' ? 'red' : 'green'}
+                  border="1px solid"
+                  bg={parsedCRatio === 'MANAGE' ? 'red.900' : 'green.900'}
+                >
+                  {parsedCRatio}
+                </Badge>
+              )}
             </Flex>
           </Fade>
         </Td>

diff --git 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<{
       <BorderBox flexDirection="column" py={2} px={3} mb="4">
         <Flex flexDirection="row" justifyContent="space-between" width="100%">
           <Text display="flex" gap={2} alignItems="center" fontWeight="600" mx="2">
-            <CollateralIcon symbol={symbol} />
+            <TokenIcon symbol={symbol} />
             {displaySymbol}
           </Text>
           <Flex flexDirection="column" justifyContent="flex-end" flexGrow={1}>

diff --git 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"
         >
-          <CollateralIcon
-            symbol={collateralSymbol}
-            width="28px"
-            height="28px"
+          <TokenIcon
+            symbol={collateralSymbol!}
+            width={28}
+            height={28}
             fill="#0B0B22"
             color="#00D1FF"
           />

diff --git 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:*"