refactor, move nft steps and bridge to separate components

taikoxyz · Oct 18, 2023 · d88578c · d88578c
1 parent ce86ac2
commit d88578c
Show file tree

Hide file tree

Showing 24 changed files with 1,118 additions and 664 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,5 +7,6 @@
     "editor.defaultFormatter": "NomicFoundation.hardhat-solidity"
   },
   "solidity.formatter": "forge",
-  "i18n-ally.localesPaths": ["packages/bridge-ui-v2/src/i18n"]
+  "i18n-ally.localesPaths": ["packages/bridge-ui-v2/src/i18n"],
+  "i18n-ally.keystyle": "nested"
 }
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte b/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
+  import { routingContractsMap } from '$bridgeConfig';
   import { Button } from '$components/Button';
   import { Icon } from '$components/Icon';
+  import { bridges } from '$libs/bridge';
+  import type { ERC721Bridge } from '$libs/bridge/ERC721Bridge';
+  import type { ERC1155Bridge } from '$libs/bridge/ERC1155Bridge';
   import { type NFT, TokenType } from '$libs/token';
+  import { checkOwnershipOfNFT } from '$libs/token/checkOwnership';
+  import { getConnectedWallet } from '$libs/util/getConnectedWallet';
   import { account, network } from '$stores';
 
   import {
@@ -13,7 +19,6 @@
     errorComputingBalance,
     insufficientAllowance,
     insufficientBalance,
-    isApprovedStore,
     recipientAddress,
     selectedToken,
     tokenBalance,
@@ -26,6 +31,8 @@
   let approving = false;
   let bridging = false;
 
+  let allTokensApproved = false;
+
   function onApproveClick() {
     approving = true;
     approve().finally(() => {
@@ -40,6 +47,59 @@
     });
   }
 
+  //TODO: this should probably be checked somewhere else?
+  export async function checkTokensApproved() {
+    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 { erc1155VaultAddress, erc721VaultAddress } = routingContractsMap[currentChainId][destinationChainId];
+
+        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({
+              tokenAddress: token.addresses[currentChainId],
+              owner: wallet.account.address,
+              spenderAddress: erc1155VaultAddress,
+              tokenId: BigInt(token.tokenId),
+              chainId: currentChainId,
+            });
+            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({
+              tokenAddress: token.addresses[currentChainId],
+              owner: wallet.account.address,
+              spenderAddress: erc721VaultAddress,
+              tokenId: BigInt(token.tokenId),
+              chainId: currentChainId,
+            });
+            allTokensApproved = !requiresApproval;
+          } catch (error) {
+            console.error('isApprovedForAll error');
+          }
+        }
+      }
+    }
+  }
   // TODO: feels like we need a state machine here
 
   // Basic conditions so we can even start the bridging process
@@ -69,13 +129,9 @@
       ? allTokensApproved
       : false;
 
-  // Check if all NFTs are approved
-  $: allTokensApproved =
-    $selectedToken?.type === TokenType.ERC721
-      ? $isApprovedStore.get(($selectedToken as NFT).tokenId)
-      : $selectedToken?.type === TokenType.ERC1155
-      ? $isApprovedStore.get(($selectedToken as NFT).tokenId)
-      : false;
+  $: {
+    checkTokensApproved();
+  }
 
   // Conditions to disable/enable buttons
   $: disableApprove =

diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { isAddress } from 'ethereum-address';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
@@ -60,6 +60,10 @@
     dispatch('addressvalidation', { isValidEthereumAddress: state === State.Valid, addr });
   };
 
+  onMount(() => {
+    ethereumAddress = '';
+  });
+
   $: validateEthereumAddress(ethereumAddress);
 </script>
 

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
@@ -9,7 +9,7 @@
   import { warningToast } from '$components/NotificationToast';
   import { checkBalanceToBridge, getMaxAmountToBridge } from '$libs/bridge';
   import { InsufficientAllowanceError, InsufficientBalanceError, RevertedWithFailedError } from '$libs/error';
-  import { ETHToken, getBalance as getTokenBalance, TokenType } from '$libs/token';
+  import { ETHToken, getBalance as getTokenBalance, type NFT,TokenType } from '$libs/token';
   import { renderBalance } from '$libs/util/balance';
   import { debounce } from '$libs/util/debounce';
   import { getLogger } from '$libs/util/logger';
@@ -90,6 +90,10 @@
         balance,
         srcChainId: $network.id,
         destChainId: $destNetwork.id,
+        tokenIds:
+          $selectedToken.type === TokenType.ERC721 || $selectedToken.type === TokenType.ERC1155
+            ? [BigInt((token as NFT).tokenId)]
+            : [],
       });
     } catch (err) {
       switch (true) {