Add test for token panel

Author: chrstph-dvx

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.default-tokens.integration.test.tsx

@@ -13,8 +13,52 @@ import {
 } from './TransferPanel.integration.helpers';
 
 const APE_LOGO_URI = '/images/ApeTokenLogo.svg';
+const WETH_LOGO_URI =
+  'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png';
 
 const defaultTokenCases: RouteTokenCase[] = [
+  {
+    sourceChain: 'base',
+    destinationChain: 'apechain',
+    expectedSourceToken: { symbol: 'APE', logoURI: APE_LOGO_URI },
+    expectedDestinationToken: { symbol: 'APE', logoURI: APE_LOGO_URI },
+  },
+  {
+    sourceChain: 'base',
+    destinationChain: 'superposition',
+    expectedSourceToken: { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+    expectedDestinationToken: { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+  },
+  {
+    sourceChain: 'base',
+    destinationChain: 'arbitrum-one',
+    expectedSourceToken: { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+    expectedDestinationToken: { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+  },
+  {
+    sourceChain: 'arbitrum-one',
+    destinationChain: 'apechain',
+    expectedSourceToken: { symbol: 'APE', logoURI: APE_LOGO_URI },
+    expectedDestinationToken: { symbol: 'APE', logoURI: APE_LOGO_URI },
+  },
+  {
+    sourceChain: 'arbitrum-one',
+    destinationChain: 'superposition',
+    expectedSourceToken: { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+    expectedDestinationToken: { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+  },
+  {
+    sourceChain: 'apechain',
+    destinationChain: 'arbitrum-one',
+    expectedSourceToken: { symbol: 'APE', logoURI: APE_LOGO_URI },
+    expectedDestinationToken: { symbol: 'APE', logoURI: APE_LOGO_URI },
+  },
+  {
+    sourceChain: 'superposition',
+    destinationChain: 'arbitrum-one',
+    expectedSourceToken: { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+    expectedDestinationToken: { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+  },
   {
     sourceChain: 'ethereum',
     destinationChain: 'apechain',
@@ -51,93 +95,181 @@ const defaultTokenCases: RouteTokenCase[] = [
     expectedSourceToken: { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
     expectedDestinationToken: {
       symbol: 'WETH',
-      logoURI:
-        'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png',
+      logoURI: WETH_LOGO_URI,
     },
   },
 ];
 
 type DefaultTokenPanelCase = {
   sourceChain: RouteTokenCase['sourceChain'];
   destinationChain: RouteTokenCase['destinationChain'];
-  expectedSourcePanelSymbols: string[];
-  expectedDestinationPanelSymbols: string[];
-  expectedSourcePanelToken: TokenExpectation;
-  expectedDestinationPanelToken: TokenExpectation;
+  expectedSourcePanelSymbols: TokenExpectation[];
+  expectedDestinationPanelSymbols: TokenExpectation[];
 };
 
 const defaultTokenPanelCases: DefaultTokenPanelCase[] = [
+  {
+    sourceChain: 'base',
+    destinationChain: 'apechain',
+    expectedSourcePanelSymbols: [
+      {
+        symbol: 'APE',
+        logoURI: APE_LOGO_URI,
+      },
+    ],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'APE', logoURI: APE_LOGO_URI },
+      { symbol: 'USDC.e' },
+      { symbol: 'USDT' },
+      { symbol: 'WETH' },
+    ],
+  },
+  {
+    sourceChain: 'base',
+    destinationChain: 'superposition',
+    expectedSourcePanelSymbols: [{ symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO }],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+      { symbol: 'USDC.e' },
+      { symbol: 'WETH' },
+    ],
+  },
+  {
+    sourceChain: 'base',
+    destinationChain: 'arbitrum-one',
+    expectedSourcePanelSymbols: [{ symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO }],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+      { symbol: 'USDC' },
+      { symbol: 'USDT' },
+      { symbol: 'WETH' },
+    ],
+  },
+  {
+    sourceChain: 'arbitrum-one',
+    destinationChain: 'apechain',
+    expectedSourcePanelSymbols: [
+      {
+        symbol: 'APE',
+        logoURI: APE_LOGO_URI,
+      },
+    ],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'APE', logoURI: APE_LOGO_URI },
+      { symbol: 'USDC.e' },
+      { symbol: 'USDT' },
+      { symbol: 'WETH' },
+    ],
+  },
+  {
+    sourceChain: 'arbitrum-one',
+    destinationChain: 'superposition',
+    expectedSourcePanelSymbols: [{ symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO }],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+      { symbol: 'USDC.e' },
+      { symbol: 'WETH' },
+    ],
+  },
+  {
+    sourceChain: 'apechain',
+    destinationChain: 'arbitrum-one',
+    expectedSourcePanelSymbols: [{ symbol: 'APE', logoURI: APE_LOGO_URI }],
+    expectedDestinationPanelSymbols: [
+      {
+        symbol: 'APE',
+        logoURI: APE_LOGO_URI,
+      },
+      { symbol: 'USDC' },
+      { symbol: 'USDT' },
+      { symbol: 'WETH' },
+      { symbol: 'ETH' },
+    ],
+  },
+  {
+    sourceChain: 'superposition',
+    destinationChain: 'arbitrum-one',
+    expectedSourcePanelSymbols: [{ symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO }],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+      { symbol: 'USDC' },
+      { symbol: 'WETH' },
+    ],
+  },
   {
     sourceChain: 'ethereum',
     destinationChain: 'apechain',
-    expectedSourcePanelSymbols: ['APE'],
-    expectedDestinationPanelSymbols: ['APE', 'USDC.e', 'USDT', 'WETH'],
-    expectedSourcePanelToken: {
-      symbol: 'APE',
-    },
-    expectedDestinationPanelToken: {
-      symbol: 'APE',
-    },
+    expectedSourcePanelSymbols: [
+      {
+        symbol: 'APE',
+        logoURI: APE_LOGO_URI,
+      },
+    ],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'APE', logoURI: APE_LOGO_URI },
+      { symbol: 'USDC.e' },
+      { symbol: 'USDT' },
+      { symbol: 'WETH' },
+    ],
   },
   {
     sourceChain: 'apechain',
     destinationChain: 'ethereum',
-    expectedSourcePanelSymbols: ['APE'],
-    expectedDestinationPanelSymbols: ['APE', 'USDC', 'USDT', 'WETH', 'ETH'],
-    expectedSourcePanelToken: {
-      symbol: 'APE',
-    },
-    expectedDestinationPanelToken: {
-      symbol: 'APE',
-    },
+    expectedSourcePanelSymbols: [{ symbol: 'APE', logoURI: APE_LOGO_URI }],
+    expectedDestinationPanelSymbols: [
+      {
+        symbol: 'APE',
+        logoURI: APE_LOGO_URI,
+      },
+      { symbol: 'USDC' },
+      { symbol: 'USDT' },
+      { symbol: 'WETH' },
+      { symbol: 'ETH' },
+    ],
   },
   {
     sourceChain: 'ethereum',
     destinationChain: 'superposition',
-    expectedSourcePanelSymbols: ['ETH'],
-    expectedDestinationPanelSymbols: ['ETH', 'USDC.e', 'WETH'],
-    expectedSourcePanelToken: {
-      symbol: 'ETH',
-    },
-    expectedDestinationPanelToken: {
-      symbol: 'ETH',
-    },
+    expectedSourcePanelSymbols: [{ symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO }],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+      { symbol: 'USDC.e' },
+      { symbol: 'WETH' },
+    ],
   },
   {
     sourceChain: 'superposition',
     destinationChain: 'ethereum',
-    expectedSourcePanelSymbols: ['ETH'],
-    expectedDestinationPanelSymbols: ['ETH', 'USDC', 'WETH'],
-    expectedSourcePanelToken: {
-      symbol: 'ETH',
-    },
-    expectedDestinationPanelToken: {
-      symbol: 'ETH',
-    },
+    expectedSourcePanelSymbols: [{ symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO }],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+      { symbol: 'USDC' },
+      { symbol: 'WETH' },
+    ],
   },
   {
     sourceChain: 'apechain',
     destinationChain: 'superposition',
-    expectedSourcePanelSymbols: ['APE'],
-    expectedDestinationPanelSymbols: ['ETH', 'USDC.e', 'WETH'],
-    expectedSourcePanelToken: {
-      symbol: 'APE',
-    },
-    expectedDestinationPanelToken: {
-      symbol: 'ETH',
-    },
+    expectedSourcePanelSymbols: [{ symbol: 'APE', logoURI: APE_LOGO_URI }],
+    expectedDestinationPanelSymbols: [
+      { symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO },
+      { symbol: 'USDC.e' },
+      { symbol: 'WETH' },
+    ],
   },
   {
     sourceChain: 'superposition',
     destinationChain: 'apechain',
-    expectedSourcePanelSymbols: ['ETH'],
-    expectedDestinationPanelSymbols: ['APE', 'USDC.e', 'WETH'],
-    expectedSourcePanelToken: {
-      symbol: 'ETH',
-    },
-    expectedDestinationPanelToken: {
-      symbol: 'APE',
-    },
+    expectedSourcePanelSymbols: [{ symbol: 'ETH', logoURI: ETHER_TOKEN_LOGO }],
+    expectedDestinationPanelSymbols: [
+      {
+        symbol: 'WETH',
+        logoURI: WETH_LOGO_URI,
+      },
+      { symbol: 'APE' },
+      { symbol: 'USDC.e' },
+      { symbol: 'WETH' },
+    ],
   },
 ];
 
@@ -171,24 +303,36 @@ describe.sequential('TransferPanel LiFi Integration - Default Token', () => {
       destinationChain,
       expectedSourcePanelSymbols,
       expectedDestinationPanelSymbols,
-      expectedSourcePanelToken,
-      expectedDestinationPanelToken,
     }) => {
       await renderTransferPanel({
         sourceChain,
         destinationChain,
         destinationAddress: nonConnectedDestinationAddress,
       });
+      const expectedSourcePanelTokenSymbols = expectedSourcePanelSymbols.map(
+        ({ symbol }) => symbol,
+      );
+      const expectedDestinationPanelTokenSymbols = expectedDestinationPanelSymbols.map(
+        ({ symbol }) => symbol,
+      );
+      const sourcePanelTokenExpectation = expectedSourcePanelSymbols[0];
+      const destinationPanelTokenExpectation = expectedDestinationPanelSymbols[0];
+
+      if (!sourcePanelTokenExpectation || !destinationPanelTokenExpectation) {
+        throw new Error(
+          `Missing primary token expectation for "${sourceChain}" -> "${destinationChain}".`,
+        );
+      }
 
       await expectTokenPanelContent({
         isDestination: false,
-        symbolsToContain: expectedSourcePanelSymbols,
-        tokenExpectation: expectedSourcePanelToken,
+        symbolsToContain: expectedSourcePanelTokenSymbols,
+        tokenExpectation: sourcePanelTokenExpectation,
       });
       await expectTokenPanelContent({
         isDestination: true,
-        symbolsToContain: expectedDestinationPanelSymbols,
-        tokenExpectation: expectedDestinationPanelToken,
+        symbolsToContain: expectedDestinationPanelTokenSymbols,
+        tokenExpectation: destinationPanelTokenExpectation,
       });
     },
   );