fix: update web3 icons

bgd-labs · Jul 22, 2024 · 7e147a9 · 7e147a9 · github-actions · Jul 22, 2024
1 parent 11cceb1
commit 7e147a9
Show file tree

Hide file tree

Showing 14 changed files with 218 additions and 140 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@bgd-labs/aave-address-book": "^2.30.0",
     "@bgd-labs/aave-governance-ui-helpers": "^3.1.5",
     "@bgd-labs/frontend-web3-utils": "^1.3.0",
-    "@bgd-labs/react-web3-icons": "^0.0.49",
+    "@bgd-labs/react-web3-icons": "0.0.68",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",

diff --git a/src/delegate/components/MobileCard.tsx b/src/delegate/components/MobileCard.tsx
@@ -1,10 +1,15 @@
+import {
+  IconVariant,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils/index';
 import { Box, useTheme } from '@mui/system';
+import React from 'react';
 
 import { useStore } from '../../store/ZustandStoreProvider';
 import { BoxWith3D } from '../../ui';
 import { CustomSkeleton } from '../../ui/components/CustomSkeleton';
 import { FormattedNumber } from '../../ui/components/FormattedNumber';
-import { AssetIcon } from '../../ui/components/Web3Icons/AssetIcon';
+import { Web3Icon } from '../../ui/components/Web3Icon';
 import { texts } from '../../ui/utils/texts';
 import { getFormDelegateData } from '../utils/getFormDelegateData';
 import { DelegateTableItemAddress } from './DelegateTableItemAddress';
@@ -60,9 +65,13 @@ export function MobileCard({
                 <CustomSkeleton circle width={30} height={30} />
               </Box>
             ) : (
-              <AssetIcon
-                symbol={symbol}
-                css={{ mr: 4, width: 30, height: 30 }}
+              <Web3Icon
+                size={30}
+                css={{ mr: 4 }}
+                iconInfo={{
+                  type: Web3IconType.asset,
+                  info: { symbol, variant: IconVariant.Full },
+                }}
               />
             )}
             {!symbol ? (

diff --git a/src/delegate/components/TableItem.tsx b/src/delegate/components/TableItem.tsx
@@ -1,12 +1,17 @@
 import { Asset } from '@bgd-labs/aave-governance-ui-helpers';
+import {
+  IconVariant,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils/index';
 import { Box, useTheme } from '@mui/system';
+import React from 'react';
 import { Address } from 'viem';
 
 import { useStore } from '../../store/ZustandStoreProvider';
 import { Divider } from '../../ui';
 import { CustomSkeleton } from '../../ui/components/CustomSkeleton';
 import { FormattedNumber } from '../../ui/components/FormattedNumber';
-import { AssetIcon } from '../../ui/components/Web3Icons/AssetIcon';
+import { Web3Icon } from '../../ui/components/Web3Icon';
 import { DelegateData } from '../types';
 import { getFormDelegateData } from '../utils/getFormDelegateData';
 import { DelegateTableItemAddress } from './DelegateTableItemAddress';
@@ -82,9 +87,13 @@ export function TableItem({
               <CustomSkeleton circle width={35} height={35} />
             </Box>
           ) : (
-            <AssetIcon
-              symbol={symbol}
-              css={{ mr: 16, width: 35, height: 35 }}
+            <Web3Icon
+              size={35}
+              css={{ mr: 16 }}
+              iconInfo={{
+                type: Web3IconType.asset,
+                info: { symbol, variant: IconVariant.Full },
+              }}
             />
           )}
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>

diff --git a/src/proposals/components/EditVotingTokensContent.tsx b/src/proposals/components/EditVotingTokensContent.tsx
@@ -2,12 +2,16 @@ import {
   Balance,
   valueToBigNumber,
 } from '@bgd-labs/aave-governance-ui-helpers';
+import {
+  IconVariant,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils/index';
 import { Box } from '@mui/system';
 import React, { useState } from 'react';
 
 import { BackButton3D, Divider } from '../../ui';
 import { FormattedNumber } from '../../ui/components/FormattedNumber';
-import { AssetIcon } from '../../ui/components/Web3Icons/AssetIcon';
+import { Web3Icon } from '../../ui/components/Web3Icon';
 import { texts } from '../../ui/utils/texts';
 import { RepresentationIcon } from './RepresentationIcon';
 
@@ -215,9 +219,13 @@ export function EditVotingTokensContent({
               onClick={() => handleChange(item.underlyingAsset, !item.isActive)}
               key={index}>
               <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                <AssetIcon
-                  symbol={item.tokenName}
-                  css={{ width: 21, height: 21, mr: 10 }}
+                <Web3Icon
+                  size={21}
+                  css={{ mr: 10 }}
+                  iconInfo={{
+                    type: Web3IconType.asset,
+                    info: { symbol: item.tokenName, variant: IconVariant.Full },
+                  }}
                 />
                 <Box component="p" sx={{ typography: 'h3', fontWeight: 600 }}>
                   {item.tokenName}

diff --git a/src/representations/components/TableItem.tsx b/src/representations/components/TableItem.tsx
@@ -91,6 +91,7 @@ export function TableItem({
           ) : (
             <NetworkIcon
               chainId={chainId}
+              size={35}
               css={{ mr: 12, width: 35, height: 35 }}
             />
           )}

diff --git a/src/rpcSwitcher/components/TableItem.tsx b/src/rpcSwitcher/components/TableItem.tsx
@@ -75,6 +75,7 @@ export function TableItem({
           ) : (
             <NetworkIcon
               chainId={chainId}
+              size={35}
               css={{ mr: 12, width: 35, height: 35 }}
             />
           )}

diff --git a/src/ui/components/NetworkIcon.tsx b/src/ui/components/NetworkIcon.tsx
@@ -1,10 +1,14 @@
+import {
+  IconVariant,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils';
 import { Box, SxProps } from '@mui/system';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { toHex } from 'viem';
 
 import { chainInfoHelper } from '../../utils/configs';
 import { Tooltip } from './Tooltip';
-import { ChainIcon } from './Web3Icons/ChainIcon';
+import { Web3Icon } from './Web3Icon';
 
 interface NetworkIconProps {
   chainId: number;
@@ -45,10 +49,24 @@ export function NetworkIcon({
               {chain.name}: {chain.id} <br /> ({toHex(chain.id)})
             </Box>
           }>
-          <ChainIcon chainId={chainId} size={size} css={css} />
+          <Web3Icon
+            iconInfo={{
+              type: Web3IconType.chain,
+              info: { chainId: chainId, variant: IconVariant.Full },
+            }}
+            size={size ?? 16}
+            css={css}
+          />
         </Tooltip>
       ) : (
-        <ChainIcon chainId={chainId} size={size} css={css} />
+        <Web3Icon
+          iconInfo={{
+            type: Web3IconType.chain,
+            info: { chainId: chainId, variant: IconVariant.Full },
+          }}
+          size={size ?? 16}
+          css={css}
+        />
       )}
     </>
   );

diff --git a/src/ui/components/SelectField.tsx b/src/ui/components/SelectField.tsx
@@ -65,10 +65,10 @@ export function SelectField({
               },
             }}>
             <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
-              {!!(value || value === 0) && withChainIcon && (
+              {withChainIcon && (
                 <NetworkIcon chainId={value} size={14} css={{ mr: 8 }} />
               )}
-              {!!(value || value === 0)
+              {value || value === 0
                 ? withChainName
                   ? getChainName(value)
                   : value
@@ -125,11 +125,16 @@ export function SelectField({
                     backgroundColor: theme.palette.$light,
                   },
                 }}>
-                {withChainName
-                  ? getChainName(option)
-                  : withMyself && option === ''
-                    ? 'Myself'
-                    : option}
+                <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+                  {withChainIcon && (
+                    <NetworkIcon chainId={option} size={14} css={{ mr: 8 }} />
+                  )}
+                  {withChainName
+                    ? getChainName(option)
+                    : withMyself && option === ''
+                      ? 'Myself'
+                      : option}
+                </Box>
               </Listbox.Option>
             ))}
           </Listbox.Options>

diff --git a/src/ui/components/Web3Icon.tsx b/src/ui/components/Web3Icon.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { Web3DynamicIcon } from '@bgd-labs/react-web3-icons';
+import {
+  AssetIconProps,
+  ChainType,
+  ComponentsFallback,
+  getAssetIconNameAndPath,
+  getChainIconNameAndPath,
+  getWalletIconNameAndPath,
+  IconInfo,
+  WalletType,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils';
+import { Box, SxProps } from '@mui/system';
+import { useMemo } from 'react';
+
+import { CustomSkeleton } from './CustomSkeleton';
+
+interface Web3IconProps {
+  iconInfo:
+    | IconInfo<AssetIconProps>
+    | IconInfo<Pick<ChainType, 'chainId' | 'variant'>>
+    | IconInfo<Pick<WalletType, 'name' | 'variant'>>;
+  size?: number;
+  css?: SxProps;
+}
+/**
+ * Renders an asset or chain or wallet icon specified by icon type and props.
+ */
+export const Web3Icon = ({ size, css, ...props }: Web3IconProps) => {
+  let iconPath = undefined;
+  let componentsFallback: ComponentsFallback | undefined = undefined;
+  useMemo(() => {
+    if (props.iconInfo.type === Web3IconType.asset) {
+      const assetInfo = getAssetIconNameAndPath(
+        props.iconInfo.info as AssetIconProps,
+      );
+      iconPath = assetInfo.iconPathToRepo;
+      componentsFallback = {
+        name: assetInfo.iconName,
+        path: () =>
+          import('@bgd-labs/react-web3-icons/dist/components/index.cjs'),
+      };
+    } else if (props.iconInfo.type === Web3IconType.chain) {
+      const chainInfo = getChainIconNameAndPath(
+        props.iconInfo.info as Pick<ChainType, 'chainId' | 'variant'>,
+      );
+      iconPath = chainInfo.iconPathToRepo;
+      componentsFallback = {
+        name: chainInfo.iconName,
+        path: () =>
+          import('@bgd-labs/react-web3-icons/dist/components/chains/index.cjs'),
+      };
+    } else if (props.iconInfo.type === Web3IconType.wallet) {
+      const walletInfo = getWalletIconNameAndPath(
+        props.iconInfo.info as Pick<WalletType, 'name' | 'variant'>,
+      );
+      iconPath = walletInfo.iconPathToRepo;
+      componentsFallback = {
+        name: walletInfo.iconName,
+        path: () =>
+          import(
+            '@bgd-labs/react-web3-icons/dist/components/wallets/index.cjs'
+          ),
+      };
+    }
+  }, [props]);
+
+  if (!iconPath || !componentsFallback) {
+    return (
+      <Box
+        sx={{
+          lineHeight: 0,
+          width: size ?? 12,
+          height: size ?? 12,
+          ...css,
+        }}>
+        <CustomSkeleton circle width={size ?? 12} height={size ?? 12} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        lineHeight: 0,
+        width: size ?? 12,
+        height: size ?? 12,
+        ...css,
+      }}>
+      <Web3DynamicIcon
+        width={size ?? 12}
+        height={size ?? 12}
+        src={iconPath}
+        loader={
+          <Box
+            sx={{
+              lineHeight: 0,
+              width: size ?? 12,
+              height: size ?? 12,
+              ...css,
+            }}>
+            <CustomSkeleton circle width={size ?? 12} height={size ?? 12} />
+          </Box>
+        }
+      />
+    </Box>
+  );
+};
diff --git a/src/ui/components/Web3Icons/AssetIcon.tsx b/src/ui/components/Web3Icons/AssetIcon.tsx