chore(bridge-ui-v2): merge main into alpha 5 (#14681)

Co-authored-by: xiaodino <ruby@taiko.xyz> Co-authored-by: Roger <50648015+RogerLamTd@users.noreply.github.com> Co-authored-by: D <51912515+adaki2004@users.noreply.github.com> Co-authored-by: jeff <113397187+cyberhorsey@users.noreply.github.com> Co-authored-by: Daniel Wang <99078276+dantaik@users.noreply.github.com> Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com> Co-authored-by: Kenk <kenghin_lim@hotmail.com>
taikoxyz · Sep 15, 2023 · ac019c0 · ac019c0
1 parent 8db2241
commit ac019c0
Show file tree

Hide file tree

Showing 55 changed files with 4,769 additions and 3,009 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Activities/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Activities/MobileDetailsDialog.svelte
@@ -11,18 +11,25 @@
 
   import ChainSymbolName from './ChainSymbolName.svelte';
   import Status from './Status.svelte';
+  import StatusInfoDialog from './StatusInfoDialog.svelte';
 
   export let closeDetails = noop;
   export let detailsOpen = false;
 
   export let selectedItem: BridgeTransaction | null;
 
+  let openStatusDialog = false;
+
   let tooltipOpen = false;
   const openToolTip = (event: Event) => {
     event.stopPropagation();
     tooltipOpen = !tooltipOpen;
   };
   let dialogId = `dialog-${uid()}`;
+
+  const handleStatusDialog = () => {
+    openStatusDialog = !openStatusDialog;
+  };
 </script>
 
 <dialog id={dialogId} class="modal modal-bottom" class:modal-open={detailsOpen}>
@@ -54,7 +61,9 @@
               <button on:click={openToolTip}>
                 <span>{$t('activities.header.status')}</span>
               </button>
-              <Tooltip position="right" bind:tooltipOpen>TODO: add description about status here</Tooltip>
+              <button on:click={handleStatusDialog} class="flex justify-start content-center">
+                <Icon type="question-circle" />
+              </button>
             </div>
           </h4>
           <div class="f-items-center space-x-1">
@@ -77,3 +86,5 @@
 
   <button class="overlay-backdrop" on:click={closeDetails} />
 </dialog>
+
+<StatusInfoDialog bind:modalOpen={openStatusDialog} noIcon />
diff --git a/packages/bridge-ui-v2/src/components/Activities/StatusInfoDialog.svelte b/packages/bridge-ui-v2/src/components/Activities/StatusInfoDialog.svelte
@@ -4,8 +4,11 @@
   import { Icon } from '$components/Icon';
   import { uid } from '$libs/util/uid';
 
-  let dialogId = `dialog-${uid()}`;
-  let modalOpen = false;
+  export let modalOpen = false;
+
+  export let noIcon = false;
+
+  const dialogId = `dialog-${uid()}`;
 
   const closeModal = () => (modalOpen = false);
 
@@ -34,7 +37,9 @@
   on:click={openModal}
   on:focus={openModal}
   class=" ml-[4px]">
-  <Icon type="question-circle" />
+  {#if !noIcon}
+    <Icon type="question-circle" />
+  {/if}
 </button>
 
 <svelte:window on:keydown={closeModalIfKeyDown} />

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -258,13 +258,13 @@
 
       bridgeTxService.addTxByAddress($account.address, bridgeTx);
 
-      // Reset the form
-      amountComponent.clearAmount();
-      recipientComponent.clearRecipient();
-      processingFeeComponent.resetProcessingFee();
+      // Reset the form (we check if these are still mounted, as the user might have left the page)
+      if (amountComponent) amountComponent.clearAmount();
+      if (recipientComponent) recipientComponent.clearRecipient();
+      if (processingFeeComponent) processingFeeComponent.resetProcessingFee();
 
       // Update balance after bridging
-      amountComponent.updateBalance();
+      if (amountComponent) amountComponent.updateBalance();
 
       // Refresh user's balance
       refreshUserBalance();

diff --git a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte b/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+
   import { destNetwork, destOptions } from '$components/Bridge/state';
   import SwitchChainsButton from '$components/Bridge/SwitchChainsButton.svelte';
   import { ChainSelector } from '$components/ChainSelector';

diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
@@ -23,7 +23,7 @@
 
   let selectedToken: Token;
   let mintButtonEnabled = false;
-  let reasonNotMintable = '';
+  let alertMessage = '';
 
   async function switchNetworkToL1() {
     if (switchingNetwork) return;
@@ -113,12 +113,12 @@
   // This function will check whether or not the button to mint should be
   // enabled. If it shouldn't it'll also set the reason why so we can inform
   // the user why they can't mint
-  async function updateMintButtonState(token?: Token, network?: Chain) {
+  async function updateMintButtonState(connected: boolean, token?: Token, network?: Chain) {
     if (!token || !network) return false;
 
     checkingMintable = true;
     mintButtonEnabled = false;
-    reasonNotMintable = '';
+    let reasonNotMintable = '';
 
     try {
       await checkMintable(token, network.id);
@@ -143,20 +143,22 @@
     } finally {
       checkingMintable = false;
     }
+
+    alertMessage = getAlertMessage(connected, wrongChain, reasonNotMintable);
   }
 
   function getAlertMessage(connected: boolean, wrongChain: boolean, reasonNotMintable: string) {
     if (!connected) return $t('messages.account.required');
     //does this really need to be dynamic? Our mint tokens will most likely stay on Sepolia
     if (wrongChain) return $t('faucet.wrong_chain.message', { values: { network: 'Sepolia' } });
     if (reasonNotMintable) return reasonNotMintable;
+    return ''
   }
 
   $: connected = isUserConnected($account);
   $: wrongChain = isWrongChain($network);
-  $: alertMessage = getAlertMessage(connected, wrongChain, reasonNotMintable);
 
-  $: updateMintButtonState(selectedToken, $network);
+  $: updateMintButtonState(connected, selectedToken, $network);
 </script>
 
 <Card class="w-full md:w-[524px]" title={$t('faucet.title')} text={$t('faucet.description')}>

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
@@ -60,39 +60,39 @@
 
 <!-- Desktop (or larger) view -->
 <ul role="listbox" {id} class={menuClasses}>
-  {#each tokens as token (token.symbol)}
+  {#each tokens as t (t.symbol)}
     <li
       role="option"
       tabindex="0"
-      aria-selected={token === value}
-      on:click={() => selectToken(token)}
-      on:keydown={getTokenKeydownHandler(token)}>
+      aria-selected={t === value}
+      on:click={() => selectToken(t)}
+      on:keydown={getTokenKeydownHandler(t)}>
       <div class="p-4">
-        {#if symbolToIconMap[token.symbol]}
-          <i role="img" aria-label={token.name}>
-            <svelte:component this={symbolToIconMap[token.symbol]} size={28} />
+        {#if symbolToIconMap[t.symbol]}
+          <i role="img" aria-label={t.name}>
+            <svelte:component this={symbolToIconMap[t.symbol]} size={28} />
           </i>
         {:else}
-          <i role="img" aria-label={token.symbol}>
+          <i role="img" aria-label={t.symbol}>
             <svelte:component this={Erc20} size={28} />
           </i>
         {/if}
-        <span class="body-bold">{token.symbol}</span>
+        <span class="body-bold">{t.symbol}</span>
       </div>
     </li>
   {/each}
-  {#each customTokens as token, index (index)}
+  {#each customTokens as ct, index (index)}
     <li
       role="option"
       tabindex="0"
-      aria-selected={token === value}
-      on:click={() => selectToken(token)}
-      on:keydown={getTokenKeydownHandler(token)}>
+      aria-selected={ct === value}
+      on:click={() => selectToken(ct)}
+      on:keydown={getTokenKeydownHandler(ct)}>
       <div class="p-4">
-        <i role="img" aria-label={token.name}>
+        <i role="img" aria-label={ct.name}>
           <Erc20 />
         </i>
-        <span class="body-bold">{token.symbol}</span>
+        <span class="body-bold">{ct.symbol}</span>
       </div>
     </li>
   {/each}
@@ -105,7 +105,6 @@
             body-bold
             bg-transparent
             flex-1
-            
             px-0">
         {$t('token_dropdown.add_custom')}
       </span>

diff --git a/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.test.ts b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.test.ts
@@ -0,0 +1,88 @@
+import axios from 'axios';
+import type { Address } from 'viem';
+
+import { RelayerAPIService } from './RelayerAPIService';
+
+vi.mock('axios');
+
+function setupMocks() {
+  vi.mock('$customToken', () => {
+    return {
+      customToken: [
+        {
+          name: 'Bull Token',
+          addresses: {
+            '31336': '0xA51c1fc2f0D1a1b8494Ed1FE312d7C3a78Ed91C0',
+            '167002': '0x9A9f2CCfdE556A7E9Ff0848998Aa4a0CFD8863AE',
+          },
+          symbol: 'BLL',
+          decimals: 18,
+          type: 'ERC20',
+          logoURI: 'ipfs://QmezMTpT6ovJ3szb3SKDM9GVGeQ1R8DfjYyXG12ppMe2BY',
+          mintable: true,
+        },
+        {
+          name: 'Horse Token',
+          addresses: {
+            '31336': '0xB7f8BC63BbcaD18155201308C8f3540b07f84F5e',
+            '167002': '0x959922bE3CAee4b8Cd9a407cc3ac1C251C2007B1',
+          },
+          symbol: 'HORSE',
+          decimals: 18,
+          type: 'ERC20',
+          logoURI: 'ipfs://QmU52ZxmSiGX24uDPNUGG3URyZr5aQdLpACCiD6tap4Mgc',
+          mintable: true,
+        },
+      ],
+    };
+  });
+}
+
+describe('RelayerAPIService', () => {
+  beforeEach(() => {
+    setupMocks();
+  });
+
+  // Given
+  const mockedAxios = vi.mocked(axios, true);
+
+  test('getTransactionsFromAPI should return API response', async () => {
+    // Given
+    const baseUrl = 'http://example.com';
+    const relayerAPIService = new RelayerAPIService(baseUrl);
+    const params = { address: '0x123' as Address, chainID: 1, event: 'MessageSent' };
+    const mockResponse = {
+      data: {
+        page: 1,
+        size: 10,
+        total: 100,
+        items: [],
+      },
+      status: 200,
+    };
+    mockedAxios.get.mockResolvedValue(mockResponse);
+
+    // When
+    const result = await relayerAPIService.getTransactionsFromAPI(params);
+
+    // Then
+    expect(result).toEqual(mockResponse.data);
+  });
+
+  test('getAllBridgeTransactionByAddress should return filtered transactions', async () => {
+    // Given
+    const baseUrl = 'http://example.com';
+    const relayerAPIService = new RelayerAPIService(baseUrl);
+    const address = '0x123';
+    const paginationParams = { page: 1, size: 10 };
+    const chainID = 1;
+
+    // When
+    const result = await relayerAPIService.getAllBridgeTransactionByAddress(address, paginationParams, chainID);
+
+    // Then
+    expect(result).toBeDefined();
+    expect(result.txs).toBeInstanceOf(Array);
+    expect(result.paginationInfo).toBeDefined();
+  });
+});
diff --git a/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.test.ts b/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.test.ts
@@ -1,12 +1,45 @@
 import { type Address, zeroAddress } from 'viem';
-import { describe, expect, test, vi } from 'vitest';
+import { describe, expect, vi } from 'vitest';
 
 import { type Token, TokenType } from '$libs/token';
 
 import { CustomTokenService } from './CustomTokenService';
 
 const STORAGE_PREFIX = 'custom-tokens';
 
+function setupMocks() {
+  vi.mock('$customToken', () => {
+    return {
+      customToken: [
+        {
+          name: 'Bull Token',
+          addresses: {
+            '31336': '0xA51c1fc2f0D1a1b8494Ed1FE312d7C3a78Ed91C0',
+            '167002': '0x9A9f2CCfdE556A7E9Ff0848998Aa4a0CFD8863AE',
+          },
+          symbol: 'BLL',
+          decimals: 18,
+          type: 'ERC20',
+          logoURI: 'ipfs://QmezMTpT6ovJ3szb3SKDM9GVGeQ1R8DfjYyXG12ppMe2BY',
+          mintable: true,
+        },
+        {
+          name: 'Horse Token',
+          addresses: {
+            '31336': '0xB7f8BC63BbcaD18155201308C8f3540b07f84F5e',
+            '167002': '0x959922bE3CAee4b8Cd9a407cc3ac1C251C2007B1',
+          },
+          symbol: 'HORSE',
+          decimals: 18,
+          type: 'ERC20',
+          logoURI: 'ipfs://QmU52ZxmSiGX24uDPNUGG3URyZr5aQdLpACCiD6tap4Mgc',
+          mintable: true,
+        },
+      ],
+    };
+  });
+}
+
 describe('CustomTokenService', () => {
   const localStorage = global.localStorage;
   let token1: Token;
@@ -20,6 +53,8 @@ describe('CustomTokenService', () => {
   const removeItemSpy = vi.spyOn(Storage.prototype, 'removeItem');
 
   beforeEach(() => {
+    setupMocks();
+
     tokenService = new CustomTokenService(localStorage);
     address = '0x1234';
     storageKey = STORAGE_PREFIX + '-' + address;

diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts
@@ -85,6 +85,7 @@ describe('getBalance', () => {
     });
     expect(fetchBalance).toHaveBeenCalledWith({
       address: mockWalletClient.account.address,
+      chainId: Number(PUBLIC_L1_CHAIN_ID),
       token: BLLToken.addresses[PUBLIC_L1_CHAIN_ID],
     });
   });

diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.ts
@@ -31,11 +31,10 @@ export async function getBalance({ userAddress, token, srcChainId, destChainId }
 
     if (!tokenAddress || tokenAddress === zeroAddress) return;
 
-    // Wagmi is such an amazing library. We had to do this
-    // more manually before.
     tokenBalance = await fetchBalance({
       address: userAddress,
       token: tokenAddress,
+      chainId: srcChainId,
     });
   }
 

diff --git a/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.test.ts b/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.test.ts
@@ -25,13 +25,17 @@ const mockTokenVaultContract = {
   },
 } as unknown as GetContractResult<readonly unknown[], unknown>;
 
-vi.mock('$libs/chain', () => ({
-  chainContractsMap: {
+vi.mock('$bridgeConfig', () => ({
+  routingContractsMap: {
     1: {
-      tokenVaultAddress: '0x00001',
+      2: {
+        erc20VaultAddress: '0x00001',
+      },
     },
     2: {
-      tokenVaultAddress: '0x00002',
+      1: {
+        erc20VaultAddress: '0x00002',
+      },
     },
   },
 }));