Merge branch 'main' into a7_relayer_watchdog_updates

.github/workflows/auto-approve-pr.yml

@@ -0,0 +1,12 @@
+name: Auto approve
+
+on: pull_request_target
+
+jobs:
+  auto-approve:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    if: github.actor == 'dependabot[bot]'
+    steps:
+      - uses: hmarr/auto-approve-action@v4

.release-please-manifest.json

@@ -1,6 +1,6 @@
 {
   "packages/branding": "0.3.0",
-  "packages/bridge-ui": "2.9.2",
+  "packages/bridge-ui": "2.9.3",
   "packages/eventindexer": "0.13.0",
   "packages/fork-diff": "0.4.0",
   "packages/guardian-prover-health-check": "0.1.0",

packages/bridge-ui/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.9.3](https://github.com/taikoxyz/taiko-mono/compare/bridge-ui-v2.9.2...bridge-ui-v2.9.3) (2024-02-26)
+
+
+### Bug Fixes
+
+* **bridge-ui:** remove nft debug info from ui ([#16067](https://github.com/taikoxyz/taiko-mono/issues/16067)) ([5eddffe](https://github.com/taikoxyz/taiko-mono/commit/5eddffea3180e67c005d510ddaa7ffb90ce0a85a))
+* **bridge-ui:** truncate selected token name to 5 characters ([#16066](https://github.com/taikoxyz/taiko-mono/issues/16066)) ([dc24155](https://github.com/taikoxyz/taiko-mono/commit/dc24155b306e447f0572d29918183570905866be))
+* **bridge-ui:** various small bugfixes ([#16078](https://github.com/taikoxyz/taiko-mono/issues/16078)) ([e610d19](https://github.com/taikoxyz/taiko-mono/commit/e610d1907ef47fb6e25d8bc26e9b7edf3954d886))
+
 ## [2.9.2](https://github.com/taikoxyz/taiko-mono/compare/bridge-ui-v2.9.1...bridge-ui-v2.9.2) (2024-02-23)
 
 

packages/bridge-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bridge-ui",
-  "version": "2.9.2",
+  "version": "2.9.3",
   "private": true,
   "scripts": {
     "dev": "vite dev",

packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ImportStep/ImportStep.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import { destNetwork as destChain, selectedNFTs } from '$components/Bridge/state';
+  import { destNetwork as destChain, importDone, selectedNFTs } from '$components/Bridge/state';
   import { ImportMethod } from '$components/Bridge/types';
   import { ChainSelector, ChainSelectorType } from '$components/ChainSelectors';
+  import { OnAccount } from '$components/OnAccount';
   import { fetchNFTs } from '$libs/bridge/fetchNFTs';
   import type { NFT } from '$libs/token';
   import { account } from '$stores/account';
@@ -15,6 +16,7 @@
   import { selectedImportMethod } from './state';
 
   let foundNFTs: NFT[] = [];
+  let canProceed = false;
 
   export let validating = false;
 
@@ -41,11 +43,23 @@
     $selectedImportMethod = ImportMethod.NONE;
   };
 
+  const onAccountChange = () => {
+    reset();
+  };
+
   //  States
   let scanning = false;
 
   $: canImport = ($account?.isConnected && $srcChain?.id && $destChain && !scanning) || false;
 
+  $: {
+    if (canProceed) {
+      $importDone = true;
+    } else {
+      $importDone = false;
+    }
+  }
+
   onMount(() => {
     reset();
   });
@@ -56,10 +70,13 @@
 </div>
 
 <div class="h-sep" />
+
 {#if $selectedImportMethod === ImportMethod.MANUAL}
   <ManualImport bind:validating />
 {:else if $selectedImportMethod === ImportMethod.SCAN}
-  <ScannedImport {scanForNFTs} bind:foundNFTs />
+  <ScannedImport {scanForNFTs} bind:foundNFTs bind:canProceed />
 {:else}
   <ImportActions bind:scanning {canImport} {scanForNFTs} />
 {/if}
+
+<OnAccount change={onAccountChange} />

packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ImportStep/ScannedImport.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  import { enteredAmount, selectedNFTs } from '$components/Bridge/state';
+  import { enteredAmount, selectedNFTs, tokenBalance } from '$components/Bridge/state';
   import TokenAmountInput from '$components/Bridge/TokenAmountInput.svelte';
   import { ImportMethod } from '$components/Bridge/types';
   import { ActionButton, Button } from '$components/Button';
@@ -23,7 +23,7 @@
   let nftView: NFTView = NFTView.LIST;
   let scanning = false;
 
-  let amountComponent: TokenAmountInput;
+  let tokenAmountInput: TokenAmountInput;
 
   function onScanClick() {
     scanning = true;
@@ -43,26 +43,29 @@
   function onManualImportClick() {
     $selectedImportMethod = ImportMethod.MANUAL;
   }
+
   $: isERC1155 = $selectedNFTs ? $selectedNFTs.some((nft) => nft.type === 'ERC1155') : false;
   $: nftHasAmount = hasSelectedNFT && isERC1155;
 
-  $: validBalance = nftHasAmount && $enteredAmount > 0;
+  $: validBalance = nftHasAmount && $enteredAmount > 0 && $tokenBalance && $tokenBalance.value >= $enteredAmount;
 
   $: hasSelectedNFT = $selectedNFTs && $selectedNFTs?.length > 0;
 
-  $: if (nftHasAmount && hasSelectedNFT) {
-    if (validBalance) {
-      canProceed = true;
-    } else {
-      canProceed = false;
-    }
+  $: if (nftHasAmount && hasSelectedNFT && $selectedNFTs) {
+    tokenAmountInput?.determineBalance().then(() => {
+      if (validBalance) {
+        canProceed = true;
+      } else {
+        canProceed = false;
+      }
+    });
   } else if (!nftHasAmount && hasSelectedNFT) {
     canProceed = true;
   } else {
     canProceed = false;
   }
 
-  onDestroy(() => {
+  onMount(() => {
     $selectedNFTs = [];
   });
 </script>
@@ -98,7 +101,7 @@
   </section>
   {#if nftHasAmount}
     <section>
-      <TokenAmountInput bind:this={amountComponent} />
+      <TokenAmountInput bind:this={tokenAmountInput} />
     </section>
   {/if}
 

packages/bridge-ui/src/components/Bridge/TokenAmountInput.svelte

@@ -7,7 +7,7 @@
   import { LoadingText } from '$components/LoadingText';
   import { warningToast } from '$components/NotificationToast';
   import { InvalidParametersProvidedError, UnknownTokenTypeError } from '$libs/error';
-  import { ETHToken, fetchBalance as getTokenBalance, TokenType } from '$libs/token';
+  import { ETHToken, fetchBalance, fetchBalance as getTokenBalance, TokenType } from '$libs/token';
   import { renderBalance } from '$libs/util/balance';
   import { debounce } from '$libs/util/debounce';
   import { getLogger } from '$libs/util/logger';
@@ -161,23 +161,15 @@
     }
   }
 
-  const determineBalance = () => {
-    let balance = 0n;
-    if (!$selectedToken) return balance;
-    const type = $selectedToken.type;
-    switch (type) {
-      case TokenType.ERC20:
-      case TokenType.ETH:
-        throw new InvalidParametersProvidedError('token type not supported for this component');
-      case TokenType.ERC721:
-      case TokenType.ERC1155:
-        if (typeof $tokenBalance === 'bigint') balance = $tokenBalance;
-        break;
-      default:
-        throw new UnknownTokenTypeError('Unknown token type');
-    }
-    return balance;
-  };
+  export async function determineBalance() {
+    if (!$account?.address || !$selectedToken) return;
+    $tokenBalance = await fetchBalance({
+      userAddress: $account?.address,
+      token: $selectedToken,
+      srcChainId: $connectedSourceChain?.id,
+      destChainId: $destNetwork?.id,
+    });
+  }
 
   $: if (inputBox && sanitizedValue !== value) {
     inputBox.setValue(sanitizedValue); // Update InputBox value if sanitizedValue changes

packages/bridge-ui/src/components/NFTs/NFTCards/NFTCard.svelte

@@ -33,7 +33,9 @@
   $: imageUrl = nft.metadata?.image || placeholderUrl;
 
   $: {
-    isChecked = $selectedNFTs ? $selectedNFTs.some((selected) => selected.tokenId === nft.tokenId) : false;
+    isChecked = $selectedNFTs
+      ? $selectedNFTs.some((selected) => selected.tokenId === nft.tokenId && selected.addresses === nft.addresses)
+      : false;
   }
 </script>
 

packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte

@@ -27,13 +27,13 @@
 
   const dispatch = createEventDispatcher();
 
-  let bridgedAddress: Address | null;
-  let bridgedChain: number | null;
+  $: bridgedAddress = '' as Address;
+  $: bridgedChain = 0;
 
   let fetchingAddress: boolean = false;
 
-  let canonicalAddress: Address | null;
-  let canonicalChain: number | null;
+  $: canonicalAddress = '';
+  $: canonicalChain = 0;
 
   const selectNFT = () => {
     dispatch('selected', nft);
@@ -47,7 +47,7 @@
   const fetchTokenAddresses = async () => {
     fetchingAddress = true;
 
-    if (!srcChainId || !destChainId) return;
+    if (!srcChainId || !destChainId || !nft) return;
 
     try {
       const tokenInfo = await getTokenAddresses({ token: nft, srcChainId, destChainId });
@@ -75,7 +75,11 @@
     imageLoaded = true;
   }
 
-  $: imageUrl = nft.metadata?.image || placeholderUrl;
+  $: if (modalOpen) {
+    fetchTokenAddresses();
+  }
+
+  $: imageUrl = nft?.metadata?.image || placeholderUrl;
 
   $: showBridgedAddress = destChainId && bridgedAddress && !fetchingAddress;
 
@@ -100,7 +104,7 @@
       <div id="metadata">
         <div class="f-between-center">
           <div class="text-secondary-content">{$t('common.collection')}</div>
-          <div class="text-primary-content">{nft.name}</div>
+          <div class="text-primary-content">{nft?.name}</div>
         </div>
         <!--  CANONICAL INFO -->
         <div class="f-between-center">
@@ -109,12 +113,16 @@
             <img alt="source chain icon" src={chainConfig[Number(canonicalChain)]?.icon} class="w-4 h-4" />
           </div>
           <div class="f-row min-w-1/2 text-primary-content">
-            {#if canonicalChain && canonicalAddress}
+            {#if fetchingAddress}
+              <Spinner class="h-[10px] w-[10px] " />
+              {$t('common.loading')}
+            {:else if canonicalChain && canonicalAddress}
               <a
                 class="flex justify-start link"
                 href={`${chainConfig[canonicalChain].urls.explorer}/token/${canonicalAddress}`}
                 target="_blank">
                 {shortenAddress(canonicalAddress, 6, 8)}
+                <Icon type="arrow-top-right" fillClass="fill-primary-link" />
               </a>
             {/if}
           </div>
@@ -145,11 +153,11 @@
         </div>
         <div class="f-between-center">
           <div class="text-secondary-content">{$t('common.token_id')}</div>
-          <div class="text-primary-content">{nft.tokenId}</div>
+          <div class="text-primary-content">{nft?.tokenId}</div>
         </div>
         <div class="f-between-center">
           <div class="text-secondary-content">{$t('common.token_standard')}</div>
-          <div class="text-primary-content">{nft.type}</div>
+          <div class="text-primary-content">{nft?.type}</div>
         </div>
       </div>
       <div class="f-col">

packages/bridge-ui/src/components/NFTs/NFTList/NFTListItem.svelte

@@ -37,7 +37,9 @@
   $: imageUrl = nft.metadata?.image || placeholderUrl;
 
   $: {
-    selected = $selectedNFTs ? $selectedNFTs.some((selected) => selected.tokenId === nft.tokenId) : false;
+    selected = $selectedNFTs
+      ? $selectedNFTs.some((selected) => selected.tokenId === nft.tokenId && selected.addresses === nft.addresses)
+      : false;
   }
 </script>
 

packages/bridge-ui/src/components/Transactions/Transaction.svelte

@@ -7,6 +7,7 @@
   import { DesktopOrLarger } from '$components/DesktopOrLarger';
   import { Icon } from '$components/Icon';
   import { LoadingText } from '$components/LoadingText';
+  import NftInfoDialog from '$components/NFTs/NFTInfoDialog.svelte';
   import Spinner from '$components/Spinner/Spinner.svelte';
   import type { BridgeTransaction } from '$libs/bridge';
   import { getChainName } from '$libs/chain';
@@ -26,6 +27,7 @@
   let token: NFT;
   let insufficientModal = false;
   let detailsOpen = false;
+  let nftInfoOpen = false;
   let isDesktopOrLarger = false;
 
   let attrs = isDesktopOrLarger ? {} : { role: 'button' };
@@ -49,11 +51,15 @@
   };
 
   const openDetails = () => {
-    if (!isDesktopOrLarger) {
+    if (isDesktopOrLarger) {
       detailsOpen = true;
     }
   };
 
+  const openNFTInfo = () => {
+    nftInfoOpen = true;
+  };
+
   const handleInsufficientFunds = () => {
     insufficientModal = true;
     openDetails();
@@ -105,7 +111,11 @@
             <LoadingText mask="&nbsp;" class="min-w-[20px] max-w-[20px] h-4" />
           </div>
         {:else}
-          <img alt="nft" src={imgUrl} class="rounded-[10px] min-w-[50px] max-w-[50px] bg-neutral self-center" />
+          <button on:click={() => openNFTInfo()}>
+            <img
+              alt="nft"
+              src={imgUrl}
+              class="rounded-[10px] min-w-[50px] max-w-[50px] bg-neutral self-center" /></button>
           <div class="f-col text-left">
             <div class="text-sm">{token?.name ? truncateString(token?.name, 15) : 'No Token Name'}</div>
             <div class="text-sm text-secondary-content">
@@ -253,4 +263,6 @@
   selectedItem={item}
   on:insufficientFunds={handleInsufficientFunds} />
 
+<NftInfoDialog nft={token} bind:modalOpen={nftInfoOpen} on:close={closeDetails} viewOnly />
+
 <InsufficientFunds bind:modalOpen={insufficientModal} />

packages/bridge-ui/src/libs/token/fetchNFTImageUrl.ts

@@ -4,7 +4,7 @@ import { destNetwork } from '$components/Bridge/state';
 import { fetchNFTMetadata } from '$libs/token/fetchNFTMetadata';
 import { getLogger } from '$libs/util/logger';
 import { resolveIPFSUri } from '$libs/util/resolveIPFSUri';
-import { metadataCache } from '$stores/metadata';
+import { addMetadataToCache, isMetadataCached } from '$stores/metadata';
 import { connectedSourceChain } from '$stores/network';
 
 import { getTokenAddresses } from './getTokenAddresses';
@@ -42,18 +42,10 @@ export const fetchNFTImageUrl = async (token: NFT): Promise<NFT> => {
     if (!tokenInfo || !tokenInfo.canonical?.address) return token;
 
     // check cache for existing metadata
-    const cache = get(metadataCache);
-    if (cache.has(tokenInfo.canonical?.address)) {
+    if (isMetadataCached({ address: tokenInfo.canonical?.address, id: token.tokenId })) {
       log('found cached metadata for', tokenInfo.canonical?.address, token.metadata);
       // Update cache
-      metadataCache.update((cache) => {
-        const key = tokenInfo.canonical?.address;
-        if (key && token.metadata) {
-          log('updating cache for', key, token.metadata);
-          cache.set(key, token.metadata);
-        }
-        return cache;
-      });
+      addMetadataToCache({ address: tokenInfo.canonical?.address, id: token.tokenId }, token.metadata);
     }
 
     return token;