feat(bridge-ui-v2): NFT bridging (#14949)

taikoxyz · Oct 16, 2023 · 36c5ccd · 36c5ccd · vercel · Oct 16, 2023
1 parent 0d1dd42
commit 36c5ccd
Show file tree

Hide file tree

Showing 22 changed files with 1,200 additions and 316 deletions.
diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts
@@ -2,9 +2,9 @@ export const recommentProcessingFee = {
   ethGasLimit: BigInt(900_000),
   erc20NotDeployedGasLimit: BigInt(3_100_000),
   erc20DeployedGasLimit: BigInt(1_100_000),
-  erc721NotDeployedGasLimit: BigInt(3_400_000),
+  erc721NotDeployedGasLimit: BigInt(2_400_000),
   erc721DeployedGasLimit: BigInt(1_100_000),
-  erc1155NotDeployedGasLimit: BigInt(4_000_000),
+  erc1155NotDeployedGasLimit: BigInt(2_600_000),
   erc1155DeployedGasLimit: BigInt(1_100_000),
 };
 
@@ -15,9 +15,14 @@ export const processingFeeComponent = {
 
 export const bridgeService = {
   noOwnerGasLimit: BigInt(140_000),
-  noTokenDeployedGasLimit: BigInt(3_000_000),
+  noERC20TokenDeployedGasLimit: BigInt(3_000_000),
   erc20GasLimitThreshold: BigInt(2_500_000),
-  unpredictableGasLimit: BigInt(1_000_000),
+
+  noERC721TokenDeployedGasLimit: BigInt(2_400_000),
+  erc721GasLimitThreshold: BigInt(3_000_000),
+
+  noERC1155TokenDeployedGasLimit: BigInt(2_600_000),
+  erc1155GasLimitThreshold: BigInt(3_000_000),
 };
 
 export const pendingTransaction = {

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte b/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
@@ -3,7 +3,7 @@
 
   import { Button } from '$components/Button';
   import { Icon } from '$components/Icon';
-  import { TokenType } from '$libs/token';
+  import { type NFT, TokenType } from '$libs/token';
   import { account, network } from '$stores';
 
   import {
@@ -13,6 +13,7 @@
     errorComputingBalance,
     insufficientAllowance,
     insufficientBalance,
+    notApproved,
     recipientAddress,
     selectedToken,
     tokenBalance,
@@ -50,18 +51,40 @@
 
   // Conditions for approve/bridge steps
   $: isSelectedERC20 = $selectedToken && $selectedToken.type === TokenType.ERC20;
-  $: isTokenApproved = isSelectedERC20 && $enteredAmount && !$insufficientAllowance && !$validatingAmount;
+
+  $: isTokenApproved =
+    $selectedToken?.type === TokenType.ERC20
+      ? isSelectedERC20 && $enteredAmount && !$insufficientAllowance && !$validatingAmount
+      : $selectedToken?.type === TokenType.ERC721 || $selectedToken?.type === TokenType.ERC1155
+      ? allTokensApproved
+      : false;
+
+  // Check if all NFTs are approved
+  $: allTokensApproved =
+    $selectedToken?.type === TokenType.ERC721 || $selectedToken?.type === TokenType.ERC1155
+      ? $notApproved.get(($selectedToken as NFT).tokenId)
+      : false;
 
   // Conditions to disable/enable buttons
-  $: disableApprove = canDoNothing || !$insufficientAllowance || $validatingAmount || approving;
-  $: disableBridge = canDoNothing || $insufficientAllowance || $insufficientBalance || $validatingAmount || bridging;
+  $: disableApprove =
+    $selectedToken?.type === TokenType.ERC20
+      ? canDoNothing || $insufficientBalance || $validatingAmount || approving || isTokenApproved
+      : $selectedToken?.type === TokenType.ERC721
+      ? allTokensApproved || approving
+      : $selectedToken?.type === TokenType.ERC1155
+      ? allTokensApproved || approving
+      : approving;
 
-  // General loading state
-  // $: loading = approving || bridging;
+  $: disableBridge =
+    $selectedToken?.type === TokenType.ERC20
+      ? canDoNothing || $insufficientAllowance || $insufficientBalance || $validatingAmount || bridging
+      : $selectedToken?.type === TokenType.ERC721 || $selectedToken?.type === TokenType.ERC1155
+      ? !allTokensApproved
+      : bridging || !hasAddress || !hasNetworks || !hasBalance || !$selectedToken || !$enteredAmount;
 </script>
 
 <div class="f-between-center w-full gap-4">
-  {#if isSelectedERC20}
+  {#if $selectedToken && $selectedToken.type !== TokenType.ETH}
     <Button
       type="primary"
       class="px-[28px] py-[14px] rounded-full flex-1"
@@ -81,7 +104,6 @@
     </Button>
     <Icon type="arrow-right" />
   {/if}
-
   <Button
     type="primary"
     class="px-[28px] py-[14px] rounded-full flex-1 text-white"

diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
@@ -1,7 +1,7 @@
 export enum AddressInputState {
-  Default = 'default',
-  Valid = 'valid',
-  Invalid = 'invalid',
-  TooShort = 'too_short',
-  Validating = 'validating',
+  Default,
+  Valid,
+  Invalid,
+  TooShort,
+  Validating,
 }