Merge branch 'alpha-6' into alpha-6-update-readme

taikoxyz · Jan 22, 2024 · 85183ff · 85183ff
2 parents 6263c15 + 5192485
commit 85183ff
Show file tree

Hide file tree

Showing 323 changed files with 6,179 additions and 4,494 deletions.
diff --git a/codecov.yml b/codecov.yml
@@ -1,7 +1,8 @@
 coverage:
   ignore:
     - "packages/relayer/bindings/**/*"
-    - "packages/relayer/mock/**/*"
+    - "packages/eventindexer/contracts/**/*"
+    - "packages/relayer/pkg/mock/**/*"
     - "packages/relayer/cmd/**/*"
   status:
     project: off

diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json
@@ -34,7 +34,7 @@
     "abitype": "^0.8.11",
     "ajv": "^8.12.0",
     "autoprefixer": "^10.4.16",
-    "daisyui": "3.1.7",
+    "daisyui": "^4.5.0",
     "dotenv": "^16.3.1",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^8.10.0",

diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts
@@ -44,7 +44,7 @@ export const statusComponent = {
 
 export const transactionConfig = {
   pageSizeDesktop: 6,
-  pageSizeMobile: 4,
+  pageSizeMobile: 5,
   blurTransitionTime: 300,
 };
 

diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html
@@ -3,10 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/taiko-favicon.svg" />
-
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;400&&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;400;700&display=swap" rel="stylesheet" />
+
     <link href="https://api.fontshare.com/v2/css?f[]=clash-grotesk@200,600&display=swap" rel="stylesheet" />
     <meta name="viewport" content="width=device-width" />
 

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte b/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
@@ -1,22 +1,16 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  import { routingContractsMap } from '$bridgeConfig';
   import ActionButton from '$components/Button/ActionButton.svelte';
   import { Icon } from '$components/Icon';
-  import { bridges, ContractType, type RequireApprovalArgs } from '$libs/bridge';
-  import type { ERC20Bridge } from '$libs/bridge/ERC20Bridge';
-  import type { ERC721Bridge } from '$libs/bridge/ERC721Bridge';
-  import type { ERC1155Bridge } from '$libs/bridge/ERC1155Bridge';
-  import { getContractAddressByType } from '$libs/bridge/getContractAddressByType';
   import { BridgePausedError } from '$libs/error';
-  import { type NFT, TokenType } from '$libs/token';
-  import { checkOwnershipOfNFT } from '$libs/token/checkOwnership';
-  import { isBridgePaused } from '$libs/util/checkForPausedContracts';
-  import { getConnectedWallet } from '$libs/util/getConnectedWallet';
+  import { TokenType } from '$libs/token';
+  import { checkTokenApprovalStatus } from '$libs/token/checkTokenApprovalStatus';
   import { account, network } from '$stores';
 
   import {
+    allApproved,
     computingBalance,
     destNetwork,
     enteredAmount,
@@ -32,13 +26,11 @@
   export let approve: () => Promise<void>;
   export let bridge: () => Promise<void>;
 
-  export let oldStyle = true; //TODO: remove this
+  export let oldStyle = true; //TODO: remove this with bridge ui v2.1
 
   export let approving = false;
   export let bridging = false;
 
-  export let allTokensApproved = false;
-
   export let disabled = false;
 
   let paused = false;
@@ -57,150 +49,68 @@
     bridge();
   }
 
-  //TODO: this should probably be checked somewhere else?
-  export async function checkTokensApproved() {
-    isBridgePaused().then((result) => {
-      paused = result;
-      if (paused) throw new BridgePausedError('Bridge is paused');
-    });
+  onMount(() => {
     $validatingAmount = true;
+    checkTokenApprovalStatus($selectedToken);
+    isValidTokenBalance();
+    $validatingAmount = false;
+  });
 
-    if ($selectedToken?.type === TokenType.ERC20) {
-      if ($account?.address && $network?.id && $destNetwork?.id) {
-        const currentChainId = $network?.id;
-        const destinationChainId = $destNetwork?.id;
-        const tokenVaultAddress = routingContractsMap[currentChainId][destinationChainId].erc20VaultAddress;
-
-        const bridge = bridges[$selectedToken.type] as ERC20Bridge;
-
-        try {
-          const requiresApproval = await bridge.requireAllowance({
-            amount: $enteredAmount,
-            tokenAddress: $selectedToken.addresses[currentChainId],
-            ownerAddress: $account.address,
-            spenderAddress: tokenVaultAddress,
-          });
-          $insufficientAllowance = false;
-          $validatingAmount = false;
-          return !requiresApproval;
-        } catch (error) {
-          console.error('isApprovedForAll error');
-          $validatingAmount = false;
-          return false;
-        }
+  //TODO: does this check entered balance?!
+  const isValidTokenBalance = () => {
+    if ($tokenBalance && typeof $tokenBalance !== 'bigint') {
+      if (isETH) {
+        isValidBalance = $tokenBalance.value > 0n;
+      }
+      if (isERC20) {
+        isValidBalance = $tokenBalance.value > 0n;
       }
-      $validatingAmount = false;
-      return false;
     }
-    if ($selectedToken?.type === TokenType.ERC721 || $selectedToken?.type === TokenType.ERC1155) {
-      if ($account?.address && $network?.id && $destNetwork?.id) {
-        const currentChainId = $network?.id;
-        const destinationChainId = $destNetwork?.id;
-        const token = $selectedToken as NFT;
-
-        const result = await checkOwnershipOfNFT(token as NFT, $account?.address, currentChainId);
-
-        if (!result.every((item) => item.isOwner === true)) {
-          return false;
-        }
-
-        const wallet = await getConnectedWallet();
-
-        const spenderAddress = getContractAddressByType({
-          srcChainId: currentChainId,
-          destChainId: destinationChainId,
-          tokenType: token.type,
-          contractType: ContractType.VAULT,
-        });
-
-        if (!spenderAddress) {
-          throw new Error('No spender address found');
-        }
-
-        const args: RequireApprovalArgs = {
-          tokenAddress: token.addresses[currentChainId],
-          owner: wallet.account.address,
-          spenderAddress,
-          tokenId: BigInt(token.tokenId),
-          chainId: currentChainId,
-        };
-
-        if (token.type === TokenType.ERC1155) {
-          try {
-            const bridge = bridges[token.type] as ERC1155Bridge;
-
-            // Let's check if the vault is approved for all ERC1155
-            const result = await bridge.isApprovedForAll(args);
-            allTokensApproved = result;
-          } catch (error) {
-            console.error('isApprovedForAll error');
-          }
-        } else if (token.type === TokenType.ERC721) {
-          const bridge = bridges[token.type] as ERC721Bridge;
-
-          // Let's check if the vault is approved for all ERC721
-          try {
-            const requiresApproval = await bridge.requiresApproval(args);
-            allTokensApproved = !requiresApproval;
-          } catch (error) {
-            console.error('isApprovedForAll error');
-          }
-        }
+    if (isERC721) {
+      isValidBalance = true;
+    }
+    if (isERC1155) {
+      if (typeof $tokenBalance === 'bigint') {
+        isValidBalance = $tokenBalance > 0n;
       }
     }
-    $validatingAmount = false;
-  }
+  };
 
-  // TODO: feels like we need a state machine here
+  $: isValidBalance = false;
+
+  $: validating = $validatingAmount && $enteredAmount > 0;
 
   // Basic conditions so we can even start the bridging process
   $: hasAddress = $recipientAddress || $account?.address;
   $: hasNetworks = $network?.id && $destNetwork?.id;
-  $: hasBalance =
-    !$insufficientBalance &&
-    !$computingBalance &&
-    !$errorComputingBalance &&
-    ($tokenBalance
-      ? typeof $tokenBalance === 'bigint'
-        ? $tokenBalance > BigInt(0) // ERC721/1155
-        : 'value' in $tokenBalance
-          ? $tokenBalance.value > BigInt(0)
-          : false // ERC20
-      : false);
+  $: hasBalance = !$insufficientBalance && !$computingBalance && !$errorComputingBalance && isValidBalance;
+
   $: canDoNothing = !hasAddress || !hasNetworks || !hasBalance || !$selectedToken || disabled;
 
   // Conditions for approve/bridge steps
-  $: isSelectedERC20 = $selectedToken && $selectedToken.type === TokenType.ERC20;
 
-  $: isTokenApproved =
-    $selectedToken?.type === TokenType.ERC20
-      ? isSelectedERC20 && $enteredAmount && !$insufficientAllowance && !$validatingAmount
-      : $selectedToken?.type === TokenType.ERC721
-        ? allTokensApproved
-        : $selectedToken?.type === TokenType.ERC1155
-          ? allTokensApproved
-          : false;
-
-  $: {
-    checkTokensApproved();
+  $: if ($enteredAmount) {
+    $validatingAmount = true;
+    checkTokenApprovalStatus($selectedToken);
+    isValidTokenBalance();
   }
 
   // Conditions to disable/enable buttons
-  $: disableApprove =
-    $selectedToken?.type === TokenType.ERC20
-      ? canDoNothing || $insufficientBalance || $validatingAmount || approving || isTokenApproved || !$enteredAmount
-      : $selectedToken?.type === TokenType.ERC721
-        ? allTokensApproved || approving
-        : $selectedToken?.type === TokenType.ERC1155
-          ? allTokensApproved || approving
-          : approving;
+  $: disableApprove = isERC20
+    ? canDoNothing || $insufficientBalance || $validatingAmount || approving || $allApproved || !$enteredAmount
+    : isERC721
+      ? $allApproved || approving
+      : isERC1155
+        ? $allApproved || approving
+        : approving;
 
   $: isERC20 = $selectedToken?.type === TokenType.ERC20;
   $: isERC721 = $selectedToken?.type === TokenType.ERC721;
   $: isERC1155 = $selectedToken?.type === TokenType.ERC1155;
   $: isETH = $selectedToken?.type === TokenType.ETH;
 
   $: commonConditions =
+    $allApproved &&
     !bridging &&
     hasAddress &&
     hasNetworks &&
@@ -213,9 +123,9 @@
   $: erc20ConditionsSatisfied =
     commonConditions && !canDoNothing && !$insufficientAllowance && $tokenBalance && $enteredAmount;
 
-  $: erc721ConditionsSatisfied = commonConditions && allTokensApproved;
+  $: erc721ConditionsSatisfied = commonConditions;
 
-  $: erc1155ConditionsSatisfied = commonConditions && allTokensApproved && $enteredAmount && $enteredAmount > 0;
+  $: erc1155ConditionsSatisfied = commonConditions && $enteredAmount && $enteredAmount > 0;
 
   $: ethConditionsSatisfied = commonConditions && $enteredAmount && $enteredAmount > 0;
 
@@ -234,16 +144,23 @@
   <!-- TODO: temporary enable two styles, remove for UI v2.1 -->
 
   <div class="f-between-center w-full gap-4">
-    {#if $selectedToken && $selectedToken.type !== TokenType.ETH}
-      <ActionButton priority="primary" disabled={disableApprove} loading={approving} on:click={onApproveClick}>
+    {#if $selectedToken && !isETH}
+      <ActionButton
+        priority="primary"
+        disabled={disableApprove}
+        loading={approving || validating}
+        on:click={onApproveClick}>
+        {#if validating && !approving}
+          <span class="body-bold">Checking ...</span>
+        {/if}
         {#if approving}
           <span class="body-bold">{$t('bridge.button.approving')}</span>
-        {:else if isTokenApproved}
+        {:else if $allApproved && !validating && $enteredAmount > 0}
           <div class="f-items-center">
             <Icon type="check" />
             <span class="body-bold">{$t('bridge.button.approved')}</span>
           </div>
-        {:else}
+        {:else if !validating}
           <span class="body-bold">{$t('bridge.button.approve')}</span>
         {/if}
       </ActionButton>
@@ -258,12 +175,18 @@
     </ActionButton>
   </div>
 {:else}
+  <!-- NFT actions  -->
+  <!-- TODO: adopt for bridge design v2.1  -->
   <div class="f-col w-full gap-4">
-    {#if $selectedToken && $selectedToken.type !== TokenType.ETH}
-      <ActionButton priority="primary" disabled={disableApprove} loading={approving} on:click={onApproveClick}>
+    {#if $selectedToken && !isETH}
+      <ActionButton
+        priority="primary"
+        disabled={disableApprove}
+        loading={approving || validating}
+        on:click={onApproveClick}>
         {#if approving}
           <span class="body-bold">{$t('bridge.button.approving')}</span>
-        {:else if isTokenApproved}
+        {:else if $allApproved}
           <div class="f-items-center">
             <Icon type="check" />
             <span class="body-bold">{$t('bridge.button.approved')}</span>

diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte
@@ -90,9 +90,11 @@
       bind:value={ethereumAddress}
       on:input={validateAddress}
       class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content {classes}" />
-    <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clearAddress}>
-      <Icon type="x-close-circle" fillClass="fill-primary-icon" size={24} />
-    </button>
+    {#if ethereumAddress}
+      <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clearAddress}>
+        <Icon type="x-close-circle" fillClass="fill-primary-icon" size={24} />
+      </button>
+    {/if}
   </div>
 
   <!-- Conditional alerts -->