Update New V2 List Card Items (Token, Shielded Pool, Chain & Relayer)

apps/bridge-dapp/src/components/ChainListCardWrapper/ChainListCardWrapper.tsx

@@ -1,12 +1,12 @@
+import { Bridge } from '@webb-tools/abstract-api-provider';
 import { useWebContext } from '@webb-tools/api-provider-environment';
 import { calculateTypedChainId } from '@webb-tools/sdk-core';
 import { ChainListCard, useWebbUI } from '@webb-tools/webb-ui-components';
+import { ChainType } from '@webb-tools/webb-ui-components/components/ListCard/types';
 import { FC, useCallback, useMemo } from 'react';
 import { useConnectWallet } from '../../hooks';
-import { ChainListCardWrapperProps } from './types';
-import { getNativeCurrencyFromConfig } from '@webb-tools/dapp-config';
 import { getActiveSourceChains } from '../../utils/getActiveSourceChains';
-import { Bridge } from '@webb-tools/abstract-api-provider';
+import { ChainListCardWrapperProps } from './types';
 
 /**
  * The wrapper component for the ChainListCard component
@@ -53,16 +53,10 @@ export const ChainListCardWrapper: FC<ChainListCardWrapperProps> = ({
     if (chainsProps) return chainsProps;
 
     return getActiveSourceChains(apiConfig.chains).map((val) => {
-      const currency = getNativeCurrencyFromConfig(
-        apiConfig.currencies,
-        calculateTypedChainId(val.chainType, val.id)
-      );
-
       return {
         name: val.name,
         tag: val.tag,
-        symbol: currency?.symbol ?? 'Unknown',
-      };
+      } satisfies ChainType;
     });
   }, [apiConfig, chainsProps]);
 

apps/bridge-dapp/src/containers/DepositContainer/DepositContainer.tsx

@@ -248,15 +248,19 @@ export const DepositContainer = forwardRef<
           return {
             name: currency.view.name,
             symbol: currency.view.symbol,
-            balance: balances[currency.id],
-            onTokenClick: () => addCurrency(currency),
-            isTokenAddedToMetamask: isTokenAddedToMetamask(
+            assetBalanceProps:
+              typeof balances[currency.id] === 'number'
+                ? { balance: balances[currency.id] }
+                : undefined,
+            onAddToken: isTokenAddedToMetamask(
               currency,
               activeChain,
               activeAccount?.address,
               currentResourceId
-            ),
-          };
+            )
+              ? undefined
+              : () => addCurrency(currency),
+          } satisfies AssetType;
         }
       );
     }, [
@@ -283,8 +287,11 @@ export const DepositContainer = forwardRef<
         return {
           name: currency.name,
           symbol: currency.symbol,
-          balance: balances[currency.id],
-        };
+          assetBalanceProps:
+            typeof balances[currency.id] === 'number'
+              ? { balance: balances[currency.id] }
+              : undefined,
+        } satisfies AssetType;
       });
     }, [currencies, populatedSelectableWebbTokens, balances]);
 
@@ -599,18 +606,22 @@ export const DepositContainer = forwardRef<
       }
 
       const tokens = getPossibleFungibleCurrencies(wrappableCurrency.id).map(
-        (currency): AssetType => ({
-          name: currency.view.name,
-          balance: balances[currency.id] ?? 0,
-          symbol: currency.view.symbol,
-          onTokenClick: () => addCurrency(currency),
-          isTokenAddedToMetamask: isTokenAddedToMetamask(
-            currency,
-            activeChain,
-            activeAccount?.address,
-            currentResourceId
-          ),
-        })
+        (currency): AssetType =>
+          ({
+            name: currency.view.name,
+            assetBalanceProps: {
+              balance: balances[currency.id] ?? 0,
+            },
+            symbol: currency.view.symbol,
+            onAddToken: isTokenAddedToMetamask(
+              currency,
+              activeChain,
+              activeAccount?.address,
+              currentResourceId
+            )
+              ? undefined
+              : () => addCurrency(currency),
+          } satisfies AssetType)
       );
 
       return {

apps/bridge-dapp/src/containers/TransferContainer/TransferContainer.tsx

@@ -243,14 +243,16 @@ export const TransferContainer = forwardRef<
         acc.push({
           name: currency.view.name,
           symbol: currency.view.symbol,
-          balance,
-          onTokenClick: () => addCurrency(currency),
-          isTokenAddedToMetamask: isTokenAddedToMetamask(
+          assetBalanceProps:
+            typeof balance === 'number' ? { balance } : undefined,
+          onAddToken: isTokenAddedToMetamask(
             currency,
             activeChain,
             activeAccount?.address,
             currentResourceId
-          ),
+          )
+            ? undefined
+            : () => addCurrency(currency),
         });
 
         return acc;
@@ -398,7 +400,8 @@ export const TransferContainer = forwardRef<
     const onAmountChange = useCallback(
       (amount: string): void => {
         const parsedAmount = Number(amount);
-        const availableAmount = selectedBridgingAsset?.balance ?? 0;
+        const availableAmount =
+          selectedBridgingAsset?.assetBalanceProps?.balance ?? 0;
 
         if (isNaN(parsedAmount) || parsedAmount < 0) {
           setAmountError('Invalid amount');
@@ -413,7 +416,7 @@ export const TransferContainer = forwardRef<
         setTransferAmount(parsedAmount);
         setAmountError('');
       },
-      [selectedBridgingAsset?.balance]
+      [selectedBridgingAsset?.assetBalanceProps?.balance]
     );
 
     // Callback for relayer input clicked
@@ -481,9 +484,10 @@ export const TransferContainer = forwardRef<
       return (
         typeof transferAmount === 'number' &&
         transferAmount > 0 &&
-        transferAmount <= (selectedBridgingAsset?.balance ?? 0)
+        transferAmount <=
+          (selectedBridgingAsset?.assetBalanceProps?.balance ?? 0)
       );
-    }, [transferAmount, selectedBridgingAsset?.balance]);
+    }, [transferAmount, selectedBridgingAsset?.assetBalanceProps?.balance]);
 
     // The actual amount to be transferred
     const receivingAmount = useMemo(() => {
@@ -912,7 +916,9 @@ export const TransferContainer = forwardRef<
         errorMessage: amountError,
         isDisabled: !selectedBridgingAsset || needSwitchChain,
         onMaxBtnClick: () =>
-          setTransferAmount(selectedBridgingAsset?.balance ?? 0),
+          setTransferAmount(
+            selectedBridgingAsset?.assetBalanceProps?.balance ?? 0
+          ),
       };
     }, [
       transferAmount,

apps/bridge-dapp/src/containers/WithdrawContainer/WithdrawContainer.tsx

@@ -224,16 +224,16 @@ export const WithdrawContainer = forwardRef<
     return {
       symbol: fungibleCurrency.view.symbol,
       name: fungibleCurrency.view.name,
-      balance,
-      onTokenClick: () => addCurrency(fungibleCurrency),
-      balanceType: 'note',
-      isTokenAddedToMetamask: isTokenAddedToMetamask(
+      assetBalanceProps: typeof balance === 'number' ? { balance } : undefined,
+      onAddToken: isTokenAddedToMetamask(
         fungibleCurrency,
         activeChain,
         activeAccount?.address,
         currentResourceId
-      ),
-    };
+      )
+        ? undefined
+        : () => addCurrency(fungibleCurrency),
+    } satisfies AssetType;
   }, [
     addCurrency,
     balancesFromNotes,
@@ -251,15 +251,15 @@ export const WithdrawContainer = forwardRef<
     return {
       symbol: wrappableCurrency.view.symbol,
       name: wrappableCurrency.view.name,
-      onTokenClick: () => addCurrency(wrappableCurrency),
-      balanceType: 'wallet',
-      isTokenAddedToMetamask: isTokenAddedToMetamask(
+      onAddToken: isTokenAddedToMetamask(
         wrappableCurrency,
         activeChain,
         activeAccount?.address,
         currentResourceId
-      ),
-    };
+      )
+        ? undefined
+        : () => addCurrency(wrappableCurrency),
+    } satisfies AssetType;
   }, [
     addCurrency,
     wrappableCurrency,
@@ -732,15 +732,17 @@ export const WithdrawContainer = forwardRef<
         return {
           name: currency.view.name,
           symbol: currency.view.symbol,
-          balance,
-          onTokenClick: () => addCurrency(currency),
-          isTokenAddedToMetamask: isTokenAddedToMetamask(
+          assetBalanceProps:
+            typeof balance === 'number' ? { balance } : undefined,
+          onAddToken: isTokenAddedToMetamask(
             currency,
             activeChain,
             activeAccount?.address,
             currentResourceId
-          ),
-        };
+          )
+            ? undefined
+            : () => addCurrency(currency),
+        } satisfies AssetType;
       }
     );
 
@@ -785,14 +787,15 @@ export const WithdrawContainer = forwardRef<
         return {
           name: currency.view.name,
           symbol: currency.view.symbol,
-          onTokenClick: () => addCurrency(currency),
-          isTokenAddedToMetamask: isTokenAddedToMetamask(
+          onAddToken: isTokenAddedToMetamask(
             currency,
             activeChain,
             activeAccount?.address,
             currentResourceId
-          ),
-        };
+          )
+            ? undefined
+            : () => addCurrency(currency),
+        } satisfies AssetType;
       });
 
       setMainComponent(

apps/stats-dapp/src/containers/NavBlocksInfoContainer/NavBlocksInfoContainer.tsx

@@ -9,7 +9,7 @@ import {
   FileCodeLineIcon,
   GraphIcon,
   BlockIcon,
-  RefreshIcon,
+  RefreshLineIcon,
   Spinner,
 } from '@webb-tools/icons';
 import {
@@ -123,7 +123,10 @@ export const NavBoxInfoContainer = () => {
           )}
         </Chip>
         <Chip color="blue">
-          <RefreshIcon size="lg" className="fill-blue-90 dark:fill-blue-30" />{' '}
+          <RefreshLineIcon
+            size="lg"
+            className="fill-blue-90 dark:fill-blue-30"
+          />{' '}
           {currentKey ? (
             `Session: ${Number(currentKey?.session).toLocaleString()}`
           ) : (

libs/icons/src/AlertFill.tsx

@@ -4,7 +4,6 @@ import { IconBase } from './types';
 export const AlertFill = (props: IconBase) => {
   return createIcon({
     ...props,
-    viewBox: '0 0 22 22',
     d: 'M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.4091 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72191 12.7772 2.84815 12.865 3.00017ZM10.9989 16.0002V18.0002H12.9989V16.0002H10.9989ZM10.9989 9.00017V14.0002H12.9989V9.00017H10.9989Z',
     displayName: 'AlertFill',
   });

libs/icons/src/CheckboxBlankCircleLine.tsx

@@ -4,7 +4,7 @@ import { IconBase } from './types';
 export const CheckboxBlankCircleLine = (props: IconBase) => {
   return createIcon({
     ...props,
-    d: 'M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16.001A8 8 0 0012 20zm-.997-4L6.76 11.757l1.414-1.414 2.829 2.829 5.656-5.657 1.415 1.414L11.003 16z',
+    d: 'M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z',
     displayName: 'CheckboxBlankCircleLine',
   });
 };

libs/icons/src/RefreshIcon.tsx → libs/icons/src/RefreshLineIcon.tsx

@@ -1,12 +1,14 @@
 import { createIcon } from './create-icon';
 import { IconBase } from './types';
 
-export const RefreshIcon = (props: IconBase) => {
+const RefreshLineIcon = (props: IconBase) => {
   return createIcon({
     ...props,
     path: (
       <path d="M5.463 4.43301C7.27756 2.86067 9.59899 1.99666 12 2.00001C17.523 2.00001 22 6.47701 22 12C22 14.136 21.33 16.116 20.19 17.74L17 12H20C20.0001 10.4316 19.5392 8.89781 18.6747 7.58927C17.8101 6.28072 16.5799 5.25517 15.1372 4.64013C13.6944 4.0251 12.1027 3.84771 10.56 4.13003C9.0172 4.41234 7.59145 5.14191 6.46 6.22801L5.463 4.43301ZM18.537 19.567C16.7224 21.1393 14.401 22.0034 12 22C6.477 22 2 17.523 2 12C2 9.86401 2.67 7.88401 3.81 6.26001L7 12H4C3.99987 13.5684 4.46075 15.1022 5.32534 16.4108C6.18992 17.7193 7.42007 18.7449 8.86282 19.3599C10.3056 19.9749 11.8973 20.1523 13.44 19.87C14.9828 19.5877 16.4085 18.8581 17.54 17.772L18.537 19.567Z" />
     ),
-    displayName: 'RefreshIcon',
+    displayName: 'RefreshLineIcon',
   });
 };
+
+export default RefreshLineIcon;

libs/icons/src/ShieldedAssetIcon.tsx

@@ -1,6 +1,6 @@
-import { twMerge } from 'tailwind-merge';
 import cx from 'classnames';
-import { createIcon } from './create-icon';
+import { twMerge } from 'tailwind-merge';
+import { ChainIcon } from './ChainIcon';
 import { IconBase } from './types';
 
 const getSizeProps = (size: IconBase['size']) => {
@@ -30,12 +30,17 @@ interface ShieldedAssetIconProps extends IconBase {
    * Whether to display the placeholder icon or not
    */
   displayPlaceholder?: boolean;
+
+  /**
+   * Chain name to display on the chain icon
+   */
+  chainName?: string;
 }
 
-const ShieldedAssetIcon = ({
+const ShieldedAssetIconInner = ({
   displayPlaceholder,
   ...props
-}: ShieldedAssetIconProps) => {
+}: Omit<ShieldedAssetIconProps, 'chainName'>) => {
   return (
     <svg
       {...props}
@@ -201,4 +206,32 @@ const ShieldedAssetIcon = ({
   );
 };
 
+const ShieldedAssetIcon = ({
+  displayPlaceholder,
+  chainName,
+  ...props
+}: ShieldedAssetIconProps) => {
+  if (typeof chainName === 'string' && !displayPlaceholder) {
+    return (
+      <div className="relative">
+        <ShieldedAssetIcon displayPlaceholder={displayPlaceholder} {...props} />
+        <ChainIcon
+          className="absolute inline-block"
+          style={{ right: 0, bottom: 0, transform: 'translateX(-50%)' }}
+          name={chainName}
+          width={12}
+          height={12}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <ShieldedAssetIconInner
+      displayPlaceholder={displayPlaceholder}
+      {...props}
+    />
+  );
+};
+
 export default ShieldedAssetIcon;

libs/icons/src/index.ts

@@ -69,7 +69,7 @@ export * from './Mail';
 export * from './Memu';
 export * from './MoonLine';
 export * from './QRCode';
-export * from './RefreshIcon';
+export { default as RefreshLineIcon } from './RefreshLineIcon';
 export * from './Save';
 export * from './SaveWithBg';
 export * from './Search';