fix: bridge ton native

oraidex · Jul 17, 2024 · 6a33224 · 6a33224
1 parent 70b197c
commit 6a33224
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 61 deletions.
diff --git a/assets/icons/action.tsx b/assets/icons/action.tsx
@@ -112,3 +112,21 @@ export const CopyIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
     </svg>
   );
 };
+
+export const CheckIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M10.5008 13.3996L15.4008 8.49961C15.5841 8.31628 15.8174 8.22461 16.1008 8.22461C16.3841 8.22461 16.6174 8.31628 16.8008 8.49961C16.9841 8.68294 17.0758 8.91628 17.0758 9.19961C17.0758 9.48294 16.9841 9.71628 16.8008 9.89961L11.2008 15.4996C11.0008 15.6996 10.7674 15.7996 10.5008 15.7996C10.2341 15.7996 10.0008 15.6996 9.80078 15.4996L7.20078 12.8996C7.01745 12.7163 6.92578 12.4829 6.92578 12.1996C6.92578 11.9163 7.01745 11.6829 7.20078 11.4996C7.38411 11.3163 7.61745 11.2246 7.90078 11.2246C8.18411 11.2246 8.41745 11.3163 8.60078 11.4996L10.5008 13.3996Z"
+        fill="#03A727"
+      />
+    </svg>
+  );
+};
diff --git a/components/layout/connectButton/index.tsx b/components/layout/connectButton/index.tsx
@@ -195,11 +195,11 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => {
     }
   }, [tonAddress, tonWallet]);
 
-  useEffect(() => {
-    if (open && oraiAddress) {
-      setStep(2);
-    }
-  }, [open]);
+  // useEffect(() => {
+  //   if (open && oraiAddress) {
+  //     setStep(2);
+  //   }
+  // }, [open]);
 
   return (
     <div
@@ -212,7 +212,7 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => {
           Connect Wallet
         </button>
       ) : (
-        <ConnectedInfo onClick={() => setOpen(true)} />
+        <ConnectedInfo onClick={() => setOpen(true)} setStep={setStep} />
       )}
       <div
         className={classNames(styles.modalConnectWrapper, {

diff --git a/components/layout/connectedInfo/index.tsx b/components/layout/connectedInfo/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CopyIcon } from "@/assets/icons/action";
+import { CheckIcon, CopyIcon } from "@/assets/icons/action";
 import {
   KeplrIcon,
   MetamaskIcon,
@@ -20,10 +20,20 @@ import {
   OraiWallet,
   TonWallet,
 } from "@/stores/authentication/useAuthenticationStore";
-import { FC, useRef, useState } from "react";
+import {
+  Dispatch,
+  FC,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
 
-const ConnectedInfo: FC<{ onClick: () => void }> = ({ onClick }) => {
+const ConnectedInfo: FC<{
+  onClick: () => void;
+  setStep: Dispatch<SetStateAction<number>>;
+}> = ({ onClick, setStep }) => {
   const oraiAddress = useAuthOraiAddress();
   const oraiWallet = useAuthOraiWallet();
   const tonAddress = useAuthTonAddress();
@@ -35,48 +45,33 @@ const ConnectedInfo: FC<{ onClick: () => void }> = ({ onClick }) => {
     handleSetTonAddress,
     handleSetTonWallet,
   } = useAuthenticationActions();
-  const [copiedValue, setCopiedValue] = useState(null);
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleCopy = (text) => {
-    navigator.clipboard
-      .writeText(text)
-      .then(() => {
-        setIsCopied(true);
-        setCopiedValue(text);
-      })
-      .catch((error) => {
-        console.error("Failed to copy to clipboard", error);
-        setCopiedValue(null);
-      });
-  };
 
   const OraichainWalet = mapWalletToIcon[oraiWallet];
   const TonNetworkIcon = mapWalletToIcon[tonWallet];
 
   return (
-    <div className={styles.connectedInfo} onClick={() => onClick()}>
-      <div className={styles.item}>
+    <div className={styles.connectedInfo}>
+      <div
+        className={styles.item}
+        onClick={() => {
+          onClick();
+          setStep(1);
+        }}
+      >
         {OraichainWalet && <OraichainWalet />}
         {reduceString(oraiAddress, 6, 6)}
-        <CopyIcon
-          className={styles.copy}
-          onClick={(e) => {
-            e.stopPropagation();
-            handleCopy(oraiAddress);
-          }}
-        />
+        <CopyButton value={oraiAddress} />
       </div>
-      <div className={styles.item}>
+      <div
+        className={styles.item}
+        onClick={() => {
+          onClick();
+          setStep(2);
+        }}
+      >
         {TonNetworkIcon && <TonNetworkIcon />}
         {reduceString(tonAddress, 6, 6)}
-        <CopyIcon
-          className={styles.copy}
-          onClick={(e) => {
-            e.stopPropagation();
-            handleCopy(tonAddress);
-          }}
-        />
+        <CopyButton value={tonAddress} />
       </div>
     </div>
   );
@@ -91,3 +86,50 @@ const mapWalletToIcon = {
   [TonWallet.TonKeeper]: TonKeeperIcon,
   [TonWallet.MyTonWallet]: MyTonWalletIcon,
 };
+
+export const CopyButton = ({ value }: { value: string }) => {
+  const [copiedValue, setCopiedValue] = useState(null);
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = (text) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        setIsCopied(true);
+        setCopiedValue(text);
+      })
+      .catch((error) => {
+        console.error("Failed to copy to clipboard", error);
+        setCopiedValue(null);
+      });
+  };
+
+  useEffect(() => {
+    let timeoutId;
+
+    if (isCopied) {
+      timeoutId = setTimeout(() => {
+        setIsCopied(false);
+        setCopiedValue(null);
+      }, 2000);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isCopied]);
+
+  return isCopied ? (
+    <CheckIcon />
+  ) : (
+    <CopyIcon
+      className={styles.copy}
+      onClick={(e) => {
+        e.stopPropagation();
+        handleCopy(value);
+      }}
+    />
+  );
+};
diff --git a/components/page/bridge/hooks/useGetFee.ts b/components/page/bridge/hooks/useGetFee.ts
@@ -5,13 +5,7 @@ import { BigDecimal, toDisplay } from "@oraichain/oraidex-common";
 import { TonbridgeBridgeClient } from "@oraichain/tonbridge-contracts-sdk";
 import { useEffect, useState } from "react";
 
-const useGetFee = ({
-  token,
-  amount,
-}: {
-  token: TokenType;
-  amount: string | number;
-}) => {
+const useGetFee = ({ token }: { token: TokenType }) => {
   const oraiAddress = useAuthOraiAddress();
   const [bridgeFee, setBridgeFee] = useState(0);
   const [tokenFee, setTokenFee] = useState(0);
@@ -38,16 +32,13 @@ const useGetFee = ({
 
         if (tokenFeeConfig) {
           const { nominator, denominator } = tokenFeeConfig;
-          const fee = new BigDecimal(nominator)
-            .mul(amount || 0)
-            .div(denominator)
-            .toNumber();
+          const fee = new BigDecimal(nominator).div(denominator).toNumber();
 
           setTokenFee(fee);
         }
       }
     })();
-  }, [token, amount, oraiAddress]);
+  }, [token, oraiAddress]);
 
   useEffect(() => {
     (async () => {

diff --git a/components/page/bridge/index.tsx b/components/page/bridge/index.tsx
@@ -74,7 +74,6 @@ const Bridge = () => {
 
   const { bridgeFee, tokenFee } = useGetFee({
     token,
-    amount,
   });
 
   // @dev: this function will changed based on token minter address (which is USDT, USDC, bla bla bla)
@@ -132,7 +131,8 @@ const Bridge = () => {
         TonInteractionContract[tonNetwork].bridgeAdapter
       );
       const fmtAmount = new BigDecimal(10).pow(token.decimal).mul(amount);
-      const isNativeTon: boolean = token && !token.contractAddress;
+      const isNativeTon: boolean =
+        token.contractAddress === TON_ADDRESS_CONTRACT;
       const toAddress: string = isNativeTon
         ? bridgeAdapterAddress.toString()
         : tokenInfo.jettonWalletAddress?.toString();
@@ -352,11 +352,13 @@ const Bridge = () => {
         </div>
         <div className={styles.divider}></div>
         <div className={styles.est}>
-          <div className={styles.itemEst}>
-            <span>TON gas fee</span>
-            {/* <span className={styles.value}>~ 0.0017 ORAI</span> */}
-            <span className={styles.value}>~ 1 TON</span>
-          </div>
+          {toNetwork.id === NetworkList.oraichain.id && (
+            <div className={styles.itemEst}>
+              <span>TON gas fee</span>
+              {/* <span className={styles.value}>~ 0.0017 ORAI</span> */}
+              <span className={styles.value}>~ 1 TON</span>
+            </div>
+          )}
           <div className={styles.itemEst}>
             <span>Bridge fee</span>
             {/* <span className={styles.value}>1 TON</span> */}
@@ -371,7 +373,12 @@ const Bridge = () => {
             <span>Token fee</span>
             {/* <span className={styles.value}>1 TON</span> */}
             <span className={styles.value}>
-              {!token ? "--" : formatDisplayNumber(tokenFee, DECIMAL_TOKEN_FEE)}{" "}
+              {!token
+                ? "--"
+                : formatDisplayNumber(
+                    new BigDecimal(tokenFee).mul(amount || 0).toNumber(),
+                    DECIMAL_TOKEN_FEE
+                  )}{" "}
               {token?.symbol}
             </span>
           </div>