rebase

taikoxyz · Nov 30, 2023 · a246857 · a246857
2 parents d61af90 + c10826e
commit a246857
Show file tree

Hide file tree

Showing 49 changed files with 588 additions and 305 deletions.
diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json
@@ -21,52 +21,54 @@
     "export:config": "pnpm ./scripts/exportJsonToEnv.js"
   },
   "devDependencies": {
-    "@playwright/test": "^1.28.1",
-    "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.22.3",
-    "@types/debug": "^4.1.7",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.7.0",
+    "@playwright/test": "^1.39.0",
+    "@sveltejs/adapter-auto": "^2.1.1",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.27.4",
+    "@types/debug": "^4.1.12",
+    "@types/object-hash": "^3.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "@vitest/coverage-v8": "^0.33.0",
-    "@wagmi/cli": "^1.0.1",
-    "abitype": "^0.8.7",
-    "autoprefixer": "^10.4.14",
+    "@wagmi/cli": "^1.5.2",
+    "abitype": "^0.8.11",
+    "ajv": "^8.12.0",
+    "autoprefixer": "^10.4.16",
     "daisyui": "3.1.7",
     "dotenv": "^16.3.1",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-svelte": "^2.26.0",
+    "eslint-plugin-svelte": "^2.35.0",
     "ethereum-address": "^0.0.4",
     "jsdom": "^22.1.0",
-    "ajv": "^8.6.4",
     "lokijs": "^1.5.12",
-    "postcss": "^8.4.24",
-    "prettier": "^3.0.0",
-    "prettier-plugin-svelte": "^3.0.0",
-    "svelte": "^4.1.0",
-    "svelte-check": "^3.4.6",
-    "tailwindcss": "^3.3.2",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "prettier-plugin-svelte": "^3.1.0",
+    "svelte": "^4.2.3",
+    "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.3.5",
     "ts-morph": "^19.0.0",
-    "tslib": "^2.4.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "vitest": "^0.32.2",
+    "vitest": "^0.32.4",
     "vitest-fetch-mock": "^0.2.2"
   },
   "type": "module",
   "dependencies": {
-    "@wagmi/core": "^1.3.6",
-    "@web3modal/ethereum": "^2.6.2",
-    "@web3modal/html": "^2.6.2",
+    "@wagmi/core": "^1.4.6",
+    "@web3modal/ethereum": "^2.7.1",
+    "@web3modal/html": "^2.7.1",
     "@zerodevx/svelte-toast": "^0.9.5",
-    "axios": "^1.4.0",
+    "axios": "^1.6.1",
     "buffer": "^6.0.3",
     "debug": "^4.3.4",
     "events": "^3.3.0",
-    "svelte-i18n": "^3.6.0",
-    "viem": "^1.4.1"
+    "object-hash": "^3.0.0",
+    "svelte-i18n": "^3.7.4",
+    "viem": "^1.18.9"
   }
 }
diff --git a/packages/bridge-ui-v2/scripts/vite-plugins/generateBridgeConfig.ts b/packages/bridge-ui-v2/scripts/vite-plugins/generateBridgeConfig.ts
@@ -62,8 +62,6 @@ export function generateBridgeConfig() {
       await sourceFile.saveSync();
       logger.info(`Generated config file`);
 
-      await sourceFile.saveSync();
-
       const formatted = await formatSourceFile(tsFilePath);
 
       // Write the formatted code back to the file

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte b/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
@@ -184,19 +184,6 @@
     : commonConditions;
 </script>
 
-<!-- bridging {bridging}<br />
-balance {hasBalance}<br />
-validating {$validatingAmount}<br />
-insufficientAllowance {$insufficientAllowance}<br /><br />
-
-canDoNothing {canDoNothing} <br />
-$insufficientAllowance {insufficientAllowance} <br />
-commonConditions {commonConditions}
-enteredAmount {$enteredAmount}<br />
-tokenBalance {$tokenBalance}<br />
-enteredAmount {#if $enteredAmount}test
-{/if}<br /> -->
-
 {#if oldStyle}
   <!-- TODO: temporary enable two styles, remove for UI v2.1 -->
 
@@ -239,7 +226,7 @@ enteredAmount {#if $enteredAmount}test
     {#if $selectedToken && $selectedToken.type !== TokenType.ETH}
       <Button
         type="primary"
-        class="px-[28px] py-[14px] rounded-full flex-1"
+        class="px-[28px] py-[14px] rounded-full flex-1 text-white"
         disabled={disableApprove}
         loading={approving}
         on:click={onApproveClick}>

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
@@ -45,7 +45,7 @@
 
   function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
     updateForm();
-    activeStep = NFTSteps.CONFIRM;
+    activeStep = NFTSteps.IMPORT;
     if (newNetwork) {
       const destChainId = $destinationChain?.id;
       if (!$destinationChain?.id) return;
@@ -103,6 +103,7 @@
     if (nftIdInputComponent) nftIdInputComponent.clearIds();
 
     $recipientAddress = $account?.address || null;
+    bridgingStatus = 'pending';
     // $processingFee = 0n;
     $selectedToken = ETHToken;
     importMethod === null;
@@ -150,12 +151,15 @@
   };
 
   const prefetchImage = async () => {
+    const srcChainId = $network?.id;
+    const destChainId = $destinationChain?.id;
+    if (!srcChainId || !destChainId) throw new Error('both src and dest chain id must be defined');
     await Promise.all(
       nftIdArray.map(async (id) => {
         const token = $selectedToken as NFT;
         if (token) {
           token.tokenId = id;
-          fetchNFTImageUrl(token).then((nftWithUrl) => {
+          fetchNFTImageUrl(token, srcChainId, destChainId).then((nftWithUrl) => {
             $selectedToken = nftWithUrl;
             $selectedNFTs = [nftWithUrl];
           });
@@ -175,17 +179,13 @@
       getTokenWithInfoFromAddress({ contractAddress, srcChainId: srcChainId, tokenId, owner: $account?.address })
         .then(async (token) => {
           if (!token) throw new Error('no token with info');
-          // detectedTokenType = token.type;
-          // idInputState = IDInputState.VALID;
           $selectedToken = token;
           await prefetchImage();
+
           nextStep();
         })
         .catch((err) => {
           console.error(err);
-          // detectedTokenType = null;
-          // idInputState = IDInputState.INVALID;
-          // invalidToken = true;
         });
   };
 
@@ -199,8 +199,13 @@
   // Set the content text based on the current step
   $: {
     const stepKey = NFTSteps[activeStep].toLowerCase();
-    nftStepTitle = $t(`bridge.title.nft.${stepKey}`);
-    nftStepDescription = $t(`bridge.description.nft.${stepKey}`);
+    if (activeStep === NFTSteps.CONFIRM) {
+      nftStepTitle = '';
+      nftStepDescription = '';
+    } else {
+      nftStepTitle = $t(`bridge.title.nft.${stepKey}`);
+      nftStepDescription = $t(`bridge.description.nft.${stepKey}`);
+    }
     nextStepButtonText = getStepText();
   }
 

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ConfirmationStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ConfirmationStep.svelte
@@ -5,7 +5,7 @@
 
   import { routingContractsMap } from '$bridgeConfig';
   import { chainConfig } from '$chainConfig';
-  import { Icon } from '$components/Icon';
+  import { Icon, type IconType } from '$components/Icon';
   import { successToast } from '$components/NotificationToast';
   import { infoToast } from '$components/NotificationToast/NotificationToast.svelte';
   import Spinner from '$components/Spinner/Spinner.svelte';
@@ -21,6 +21,7 @@
   import { account } from '$stores/account';
   import { network } from '$stores/network';
   import { pendingTransactions } from '$stores/pendingTransactions';
+  import { theme } from '$stores/theme';
 
   import Actions from '../Actions.svelte';
   import {
@@ -35,6 +36,7 @@
 
   export let bridgingStatus: 'pending' | 'done' = 'pending';
   let bridgeTxHash: Hash;
+  let approveTxHash: Hash;
 
   let actionsComponent: Actions;
   let allTokensApproved: boolean;
@@ -62,7 +64,9 @@
     pendingTransactions.add(txHash, currentChain).then(() => {
       bridgingStatus = 'done';
       statusTitle = $t('bridge.actions.bridge.success.title');
-      statusDescription = $t('bridge.actions.bridge.success.message');
+      statusDescription = $t('bridge.nft.step.confirm.bridge.success.message', {
+        values: { url: `${explorer}/tx/${txHash}` },
+      });
       const bridgeTx = {
         hash: txHash,
         from: $account.address,
@@ -102,30 +106,28 @@
       }
       const tokenIds = $selectedNFTs && $selectedNFTs.map((nft) => BigInt(nft.tokenId));
 
-      let txHash: Hash;
-
       const spenderAddress =
         type === TokenType.ERC1155
           ? routingContractsMap[$network.id][$destNetwork?.id].erc1155VaultAddress
           : routingContractsMap[$network.id][$destNetwork?.id].erc721VaultAddress;
 
       const args: NFTApproveArgs = { tokenIds: tokenIds!, tokenAddress, spenderAddress, wallet: walletClient };
-      txHash = await (bridges[type] as ERC721Bridge | ERC1155Bridge).approve(args);
+      approveTxHash = await (bridges[type] as ERC721Bridge | ERC1155Bridge).approve(args);
 
       const { explorer } = chainConfig[$network.id].urls;
 
-      if (txHash)
+      if (approveTxHash)
         infoToast({
           title: $t('bridge.actions.approve.tx.title'),
           message: $t('bridge.actions.approve.tx.message', {
             values: {
               token: $selectedToken.symbol,
-              url: `${explorer}/tx/${txHash}`,
+              url: `${explorer}/tx/${approveTxHash}`,
             },
           }),
         });
 
-      await pendingTransactions.add(txHash, $network.id);
+      await pendingTransactions.add(approveTxHash, $network.id);
 
       actionsComponent.checkTokensApproved();
 
@@ -174,35 +176,38 @@
       handleBridgeError(err as Error);
     }
   }
+  $: approveIcon = `approve-${$theme}` as IconType;
+  $: bridgeIcon = `bridge-${$theme}` as IconType;
+  $: successIcon = `success-${$theme}` as IconType;
 </script>
 
 <div class="mt-[30px]">
   <section id="txStatus">
     <div class="flex flex-col justify-content-center items-center">
       {#if bridgingStatus === 'done'}
-        <Icon type="check-circle" size={160} fillClass="fill-positive-sentiment" />
+        <Icon type={successIcon} size={160} />
         <div id="text" class="f-col my-[30px] text-center">
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           <h1>{@html statusTitle}</h1>
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           <span class="">{@html statusDescription}</span>
         </div>
-      {:else if !allTokensApproved}
-        <Icon type="info-circle" size={160} fillClass="fill-blue-400" />
+      {:else if !allTokensApproved && !approving}
+        <Icon type={approveIcon} size={160} />
         <div id="text" class="f-col my-[30px] text-center">
-          <h1 class="mb-[16px]">Approve tokens</h1>
-          <span>Before you can bridge, you need to approve your tokens</span>
+          <h1 class="mb-[16px]">{$t('bridge.nft.step.confirm.approve.title')}</h1>
+          <span>{$t('bridge.nft.step.confirm.approve.description')}</span>
         </div>
       {:else if bridging || approving}
         <Spinner class="!w-[160px] !h-[160px] text-primary-brand" />
         <div id="text" class="f-col my-[30px] text-center">
-          <span>Please wait for your transaction to be picked up</span>
+          <span>{$t('bridge.nft.step.confirm.approve.pending')}</span>
         </div>
-      {:else}
-        <Icon type="info-circle" size={160} fillClass="fill-blue-400" />
+      {:else if allTokensApproved && !approving && !bridging}
+        <Icon type={bridgeIcon} size={160} />
         <div id="text" class="f-col my-[30px] text-center">
-          <h1 class="mb-[16px]">Bridge your tokens</h1>
-          <span>Your token are approved! You can now bridge them by clicking the button below</span>
+          <h1 class="mb-[16px]">{$t('bridge.nft.step.confirm.approved.title')}</h1>
+          <span>{$t('bridge.nft.step.confirm.approved.description')}</span>
         </div>
       {/if}
     </div>

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
@@ -85,8 +85,9 @@
     $selectedNFTs = [];
     const accountAddress = $account?.address;
     const srcChainId = $network?.id;
-    if (!accountAddress || !srcChainId) return;
-    const nftsFromAPIs = await fetchNFTs(accountAddress, BigInt(srcChainId));
+    const destChainId = $destinationChain?.id;
+    if (!accountAddress || !srcChainId || !destChainId) return;
+    const nftsFromAPIs = await fetchNFTs(accountAddress, srcChainId, destChainId);
     foundNFTs = nftsFromAPIs.nfts;
     scanning = false;
     scanned = true;

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
@@ -14,7 +14,7 @@
 
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
-  export let hasEnoughEth: boolean;
+  export let hasEnoughEth: boolean = false;
 
   const dispatch = createEventDispatcher();