Refactor bridge transaction logic

ten-protocol · May 16, 2024 · f18bde6 · f18bde6
1 parent cdf6bc5
commit f18bde6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
@@ -59,7 +59,7 @@ export default function Dashboard() {
   const [fromTokenBalance, setFromTokenBalance] = React.useState<any>(0);
 
   const tokens = isL1ToL2 ? L1TOKENS : L2TOKENS;
-  const receiver = form.watch("receiver");
+  const receiver = React.useMemo(() => form.watch("receiver"), [form.watch]);
 
   const swapTokens = () => {
     switchNetwork(isL1ToL2 ? "L2" : "L1");
@@ -110,15 +110,14 @@ export default function Dashboard() {
       });
       const token = data.token;
       const t = tokens.find((t) => t.value === token);
-      if (t?.isNative) {
-        await web3Service.sendNative(data.receiver ?? address, data.amount);
-      } else {
-        await web3Service.sendERC20(
-          t!.address,
-          data.amount,
-          data.receiver ?? address
-        );
+      if (!t) {
+        throw new Error("Invalid token");
       }
+
+      const sendTransaction = t.isNative
+        ? web3Service.sendNative
+        : web3Service.sendERC20;
+      await sendTransaction(data.receiver ?? address, data.amount, t.address);
       toast({
         title: "Bridge Transaction",
         description: "Bridge transaction completed",
@@ -129,10 +128,11 @@ export default function Dashboard() {
       console.error(error);
       toast({
         title: "Bridge Transaction",
-        description:
+        description: `Error: ${
           error instanceof Error
             ? error.message
-            : "Error initiating bridge transaction",
+            : "initiating bridge transaction"
+        }`,
         variant: ToastType.DESTRUCTIVE,
       });
     }
@@ -376,7 +376,9 @@ export default function Dashboard() {
                   <div className="bg-muted dark:bg-[#15171D] rounded-lg border flex items-center justify-between mt-2 p-2 h-14">
                     <strong className="text-lg">Receiver Address</strong>
                     <div className="flex items-center">
-                      {<Copy value={receiver ?? address} />}
+                      {receiver || address ? (
+                        <Copy value={receiver ?? address} />
+                      ) : null}
                     </div>
                   </div>
                 </div>

diff --git a/contracts/src/bridge/frontend/src/services/web3service.ts b/contracts/src/bridge/frontend/src/services/web3service.ts
@@ -28,20 +28,17 @@ export default class Web3Service implements IWeb3Service {
     const res = await this.contract.sendNative(receiver, {
       value: ethers.utils.parseEther(value),
     });
-    console.log("🚀 ~ Web3Service ~ sendNative ~ res", res);
     const receipt = await res.wait();
-    console.log("🚀 ~ Web3Service ~ sendNative ~ receipt", receipt);
     return receipt;
   }
 
   // Send ERC20 assets to the other network.
-  async sendERC20(asset: string, amount: string, receiver: string) {
-    return this.contract.sendERC20(asset, amount, receiver);
-  }
-
-  // Receive assets that have been sent on the other network.
-  async receiveAssets(asset: string, amount: string, receiver: string) {
-    return this.contract.receiveAssets(asset, amount, receiver);
+  async sendERC20(
+    receiver: string,
+    amount: string,
+    tokenContractAddress: string
+  ) {
+    return this.contract.sendERC20(tokenContractAddress, amount, receiver);
   }
 
   // Get the balance of the signer.