Merge branch 'main' into feat/bridge-ui--update-token-selector

Dockerfile

@@ -1,6 +1,8 @@
+ARG PACKAGE=eventindexer
+
 FROM golang:1.21.0 as builder
 
-ARG PACKAGE=eventindexer
+ARG PACKAGE
 
 RUN apt install git curl
 
@@ -12,16 +14,17 @@ COPY . .
 
 RUN go mod download
 
-WORKDIR /taiko-mono/packages/$PACKAGE
+WORKDIR /taiko-mono/packages/${PACKAGE}
 
-RUN CGO_ENABLED=0 GOOS=linux go build -o /taiko-mono/packages/$PACKAGE/bin/${PACKAGE} /taiko-mono/packages/$PACKAGE/cmd/main.go
+RUN CGO_ENABLED=0 GOOS=linux go build -o /taiko-mono/packages/${PACKAGE}/bin/${PACKAGE} /taiko-mono/packages/${PACKAGE}/cmd/main.go
 
 FROM alpine:latest
 
 ARG PACKAGE
+ENV PACKAGE=${PACKAGE}
 
 RUN apk add --no-cache ca-certificates
 
-COPY --from=builder /taiko-mono/packages/$PACKAGE/bin/$PACKAGE /usr/local/bin/
+COPY --from=builder /taiko-mono/packages/${PACKAGE}/bin/${PACKAGE} /usr/local/bin/
 
-ENTRYPOINT ["$PACKAGE"]
+ENTRYPOINT /usr/local/bin/${PACKAGE}

packages/bridge-ui/.env.example

@@ -38,3 +38,7 @@ export PUBLIC_SLOW_L1_BRIDGING_WARNING=false
 
 # Fees
 export PUBLIC_FEE_MULTIPLIER=
+
+# APIs
+export MORALIS_PROJECT_ID=""
+export MORALIS_API_KEY=""

packages/bridge-ui/.eslintignore

@@ -18,3 +18,5 @@ package-lock.json
 yarn.lock
 
 src/generated/*
+
+.vercel/**

packages/bridge-ui/.prettierignore

@@ -16,3 +16,4 @@ CHANGELOG.md
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+.vercel/**

packages/bridge-ui/package.json

@@ -47,7 +47,7 @@
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",
     "svelte": "^4.2.15",
-    "svelte-check": "^3.7.0",
+    "svelte-check": "^3.7.1",
     "tailwindcss": "^3.4.3",
     "ts-morph": "^19.0.0",
     "tslib": "^2.6.2",
@@ -60,6 +60,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@moralisweb3/common-evm-utils": "^2.26.1",
     "@wagmi/connectors": "^4.3.1",
     "@wagmi/core": "^2.8.1",
     "@walletconnect/ethereum-provider": "^2.12.2",
@@ -70,6 +71,7 @@
     "buffer": "^6.0.3",
     "debug": "^4.3.4",
     "events": "^3.3.0",
+    "moralis": "^2.26.1",
     "object-hash": "^3.0.0",
     "svelte-i18n": "^4.0.0",
     "viem": "^2.9.29"

packages/bridge-ui/src/app.config.ts

@@ -49,3 +49,10 @@ export const ipfsConfig = {
   gatewayTimeout: 200,
   overallTimeout: 5000,
 };
+
+export const moralisApiConfig = {
+  limit: 10,
+  format: 'decimal',
+  excludeSpam: true,
+  mediaItems: false,
+};

packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ImportStep/TokenInput/TokenInput.svelte

@@ -231,7 +231,7 @@
     </div>
 
     <!-- Token Dropdown -->
-    <TokenDropdown combined class="min-w-[151px] z-20 " {tokens} bind:value={$selectedToken} bind:disabled />
+    <TokenDropdown combined class="min-w-[151px] z-20" {tokens} bind:value={$selectedToken} bind:disabled />
   </div>
 
   <div class="flex mt-[8px] min-h-[24px]">
@@ -242,9 +242,9 @@
           >{$t('recipient.label')} <ProcessingFee textOnly class="text-tertiary-content" bind:hasEnoughEth /></span>
       </div>
     {:else if showInsufficientBalanceAlert}
-      <FlatAlert type="error" message={$t('bridge.errors.insufficient_balance.title')} class="relative " />
+      <FlatAlert type="error" message={$t('bridge.errors.insufficient_balance.title')} class="relative" />
     {:else if showInvalidTokenAlert}
-      <FlatAlert type="error" message={$t('bridge.errors.custom_token.not_found.message')} class="relative " />
+      <FlatAlert type="error" message={$t('bridge.errors.custom_token.not_found.message')} class="relative" />
     {:else}
       <LoadingText mask="" class="w-1/2" />
     {/if}

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

@@ -16,18 +16,26 @@
   import { selectedImportMethod } from './state';
 
   let foundNFTs: NFT[] = [];
+
+  //  States
+  let scanning = false;
   let canProceed = false;
 
   export let validating = false;
 
-  const scanForNFTs = async () => {
+  const nextPage = async () => {
+    await scanForNFTs(false);
+  };
+
+  const scanForNFTs = async (refresh: boolean) => {
     scanning = true;
     $selectedNFTs = [];
     const accountAddress = $account?.address;
     const srcChainId = $srcChain?.id;
     const destChainId = $destChain?.id;
     if (!accountAddress || !srcChainId || !destChainId) return;
-    const nftsFromAPIs = await fetchNFTs(accountAddress, srcChainId);
+    const nftsFromAPIs = await fetchNFTs({ address: accountAddress, chainId: srcChainId, refresh });
+
     foundNFTs = nftsFromAPIs.nfts;
 
     scanning = false;
@@ -47,9 +55,6 @@
     reset();
   };
 
-  //  States
-  let scanning = false;
-
   $: canImport = ($account?.isConnected && $srcChain?.id && $destChain && !scanning) || false;
 
   $: {
@@ -74,9 +79,9 @@
 {#if $selectedImportMethod === ImportMethod.MANUAL}
   <ManualImport bind:validating />
 {:else if $selectedImportMethod === ImportMethod.SCAN}
-  <ScannedImport {scanForNFTs} bind:foundNFTs bind:canProceed />
+  <ScannedImport refresh={() => scanForNFTs(true)} {nextPage} bind:foundNFTs bind:canProceed />
 {:else}
-  <ImportActions bind:scanning {canImport} {scanForNFTs} />
+  <ImportActions bind:scanning {canImport} scanForNFTs={() => scanForNFTs(false)} />
 {/if}
 
 <OnAccount change={onAccountChange} />

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

@@ -6,28 +6,45 @@
   import { enteredAmount, selectedNFTs, tokenBalance } from '$components/Bridge/state';
   import { ImportMethod } from '$components/Bridge/types';
   import { ActionButton, Button } from '$components/Button';
-  import { IconFlipper } from '$components/Icon';
+  import { Icon, IconFlipper } from '$components/Icon';
   import RotatingIcon from '$components/Icon/RotatingIcon.svelte';
   import { NFTDisplay } from '$components/NFTs';
   import { NFTView } from '$components/NFTs/types';
   import type { NFT } from '$libs/token';
 
   import { selectedImportMethod } from './state';
 
-  export let scanForNFTs: () => Promise<void>;
+  export let refresh: () => Promise<void>;
+  export let nextPage: () => Promise<void>;
 
   export let foundNFTs: NFT[] = [];
 
   export let canProceed = false;
 
   let nftView: NFTView = NFTView.LIST;
   let scanning = false;
+  let hasMoreNFTs = true;
 
   let tokenAmountInput: TokenAmountInput;
 
-  function onScanClick() {
+  let previousNFTs: NFT[] = [];
+  const handleNextPage = () => {
+    previousNFTs = foundNFTs;
     scanning = true;
-    scanForNFTs().finally(() => {
+
+    nextPage().finally(() => {
+      scanning = false;
+    });
+
+    if (previousNFTs.length === foundNFTs.length) {
+      hasMoreNFTs = false;
+    }
+  };
+
+  function onRefreshClick() {
+    scanning = true;
+    hasMoreNFTs = true;
+    refresh().finally(() => {
       scanning = false;
     });
   }
@@ -81,7 +98,7 @@
           type="neutral"
           shape="circle"
           class="bg-neutral rounded-full w-[28px] h-[28px] border-none"
-          on:click={onScanClick}>
+          on:click={onRefreshClick}>
           <RotatingIcon loading={scanning} type="refresh" size={13} />
         </Button>
 
@@ -97,6 +114,21 @@
     </div>
     <div>
       <NFTDisplay loading={scanning} nfts={foundNFTs} {nftView} />
+      <div class="flex pt-[18px]">
+        <button
+          class="btn btn-sm rounded-full items-center {hasMoreNFTs
+            ? 'border-primary-brand'
+            : 'border-none'}  dark:text-white hover:bg-primary-interactive-hover btn-secondary bg-transparent light:text-black"
+          disabled={!hasMoreNFTs}
+          on:click={handleNextPage}>
+          {#if hasMoreNFTs}
+            <span class="text-primary-color">{$t('paginator.more')}</span>
+          {:else}
+            <Icon type="check-circle" class="text-primary-brand" />
+            <span class="text-primary-color">{$t('paginator.everything_loaded')}</span>
+          {/if}
+        </button>
+      </div>
     </div>
   </section>
   {#if nftHasAmount}

packages/bridge-ui/src/components/ChainSelectors/SelectorDialogs/ChainsDialog.svelte

@@ -62,10 +62,10 @@
         <li
           role="menuitem"
           tabindex="0"
-          class=" h-[64px] rounded-[10px]
-          {disabled ? 'opacity-50 ' : 'hover:bg-primary-brand cursor-pointer'}"
+          class="h-[64px] rounded-[10px] text-primary-content
+          {disabled ? 'opacity-50' : 'hover:bg-primary-brand hover:text-white'}"
           aria-disabled={disabled}>
-          <label class="f-row items-center w-full h-full p-[16px] text-primary-content hover:text-white">
+          <label class="f-row items-center w-full h-full p-[16px] {disabled ? 'cursor-not-allowed' : 'cursor-pointer'}">
             <input
               type="radio"
               name="nft-radio"

packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte

@@ -60,8 +60,7 @@
     menuOpen = false;
   };
 
-  const openMenu = (event: Event) => {
-    event.stopPropagation();
+  const openMenu = () => {
     menuOpen = true;
   };
 
@@ -219,7 +218,7 @@
     aria-expanded={menuOpen}
     class="f-between-center w-full h-full px-[20px] py-[14px] input-box bg-neutral-background border-0 shadow-none outline-none
     {combined ? '!rounded-l-[0px] !rounded-r-[10px]' : '!rounded-[10px]'}"
-    on:click={openMenu}>
+    on:click|stopPropagation={openMenu}>
     <div class="space-x-2">
       {#if !value || disabled}
         <span class="title-subsection-bold text-base text-secondary-content">{$t('token_dropdown.label')}</span>

packages/bridge-ui/src/components/Tooltip/Tooltip.svelte

@@ -23,8 +23,7 @@
     }, ms);
   }
 
-  function openTooltip(event: Event) {
-    event.stopPropagation();
+  function openTooltip() {
     tooltipOpen = true;
   }
 
@@ -45,8 +44,8 @@
     aria-haspopup="dialog"
     aria-controls={tooltipId}
     aria-expanded={tooltipOpen}
-    on:click={openTooltip}
-    on:focus={openTooltip}
+    on:click|stopPropagation={openTooltip}
+    on:focus|stopPropagation={openTooltip}
     on:mouseenter={openTooltip}
     bind:this={triggerElem}>
     <Icon type="question-circle" />

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

@@ -31,8 +31,7 @@
   let openStatusDialog = false;
 
   let tooltipOpen = false;
-  const openToolTip = (event: Event) => {
-    event.stopPropagation();
+  const openToolTip = () => {
     tooltipOpen = !tooltipOpen;
   };
   let dialogId = `dialog-${uid()}`;
@@ -119,7 +118,7 @@
           <li class="f-between-center">
             <h4 class="text-secondary-content">
               <div class="f-items-center space-x-1">
-                <button on:click={openToolTip}>
+                <button on:click|stopPropagation={openToolTip}>
                   <span>{$t('transactions.header.status')}</span>
                 </button>
                 <button on:click={handleStatusDialog} class="flex justify-start content-center">

packages/bridge-ui/src/components/Transactions/Status/StatusInfoDialog.svelte

@@ -70,9 +70,8 @@
       <h4 class={classes.headline}>{$t('transactions.status.failed.name')}</h4>
       {$t('transactions.status.failed.description')}
     </div>
-
-    <!-- We catch key events aboe -->
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div role="button" tabindex="0" class="overlay-backdrop" on:click={closeModalIfClickedOutside} />
   </div>
+  <!-- We catch key events aboe -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div role="button" tabindex="0" class="overlay-backdrop" on:click={closeModalIfClickedOutside} />
 </dialog>

packages/bridge-ui/src/i18n/en.json

@@ -362,7 +362,9 @@
   },
   "paginator": {
     "of": "of",
-    "page": "Page"
+    "page": "Page",
+    "more": "Fetch more...",
+    "everything_loaded": "Everything loaded"
   },
   "paused_modal": {
     "description": "The bridge is currently not available. Follow our official communication channels for more information. ",