diff --git a/src/pages/bridge/Send/index.tsx b/src/pages/bridge/Send/index.tsx
index 88fe1a18b..320c69c7a 100644
--- a/src/pages/bridge/Send/index.tsx
+++ b/src/pages/bridge/Send/index.tsx
@@ -218,6 +218,8 @@ const Send: FC = () => {
     }
   }, [fromNetwork, fromToken, fromTokenAmount, checkApproval])
 
+  console.log(needsApproval, "needsApproval")
+
   const approveFromToken = async () => {
     // eslint-disable-next-line
     const parsedAmount = amountToBN(fromTokenAmount, fromToken.decimals)
diff --git a/src/pages/nftBridge/NFTPanel/Transfer/Send.tsx b/src/pages/nftBridge/NFTPanel/Transfer/Send.tsx
index 59d6e2c08..fb15fbcac 100644
--- a/src/pages/nftBridge/NFTPanel/Transfer/Send.tsx
+++ b/src/pages/nftBridge/NFTPanel/Transfer/Send.tsx
@@ -39,6 +39,7 @@ const Send = () => {
 
   const [txHash, setTxHash] = useState("")
 
+  // TODO: how to call this after approve
   const needApproval = useAsyncMemo(async () => {
     if (tokenInstance) {
       const isApproved = await checkApproval(tokenInstance, gatewayAddress)
@@ -74,35 +75,40 @@ const Send = () => {
   const handleSend = async () => {
     setSendLoading(true)
     setSendModalLoading(true)
-    const tx = isLayer1 ? await deposite() : await withdraw()
-    addNFTTransaction({
-      hash: tx.hash,
-      fromName: fromNetwork.name,
-      toName: toNetwork.name,
-      fromExplore: fromNetwork.explorer,
-      toExplore: toNetwork.explorer,
-      tokenType: contract.type,
-      tokenAddress: isLayer1 ? contract.l1 : contract.l2,
-      amounts: selectedList.map(item => item.transferAmount),
-      tokenIds: selectedTokenIds,
-      isL1: isLayer1,
-    })
-    tx.wait()
-      .then(receipt => {
-        console.log(receipt, "send receipt")
-        updateNFTTransaction(tx.hash, {
-          fromBlockNumber: receipt.blockNumber,
-        })
-        setTxHash(receipt.transactionHash)
-        exciseSelected()
-      })
-      .catch(error => {
-        updatePromptMessage(error.message)
-      })
-      .finally(() => {
-        setSendLoading(false)
-        setSendModalLoading(false)
+    try {
+      const tx = isLayer1 ? await deposite() : await withdraw()
+      addNFTTransaction({
+        hash: tx.hash,
+        fromName: fromNetwork.name,
+        toName: toNetwork.name,
+        fromExplore: fromNetwork.explorer,
+        toExplore: toNetwork.explorer,
+        tokenType: contract.type,
+        tokenAddress: isLayer1 ? contract.l1 : contract.l2,
+        amounts: selectedList.map(item => item.transferAmount),
+        tokenIds: selectedTokenIds,
+        isL1: isLayer1,
       })
+
+      tx.wait()
+        .then(receipt => {
+          updateNFTTransaction(tx.hash, {
+            fromBlockNumber: receipt.blockNumber,
+          })
+          setTxHash(receipt.transactionHash)
+          exciseSelected()
+        })
+        .catch(error => {
+          updatePromptMessage(error.message)
+        })
+        .finally(() => {
+          setSendLoading(false)
+          setSendModalLoading(false)
+        })
+    } catch (e) {
+      setSendLoading(false)
+      setSendModalLoading(false)
+    }
   }
 
   const deposite = () => {
diff --git a/src/pages/nftBridge/NFTPanel/Viewing/index.tsx b/src/pages/nftBridge/NFTPanel/Viewing/index.tsx
index 1b88eab08..19d01ad18 100644
--- a/src/pages/nftBridge/NFTPanel/Viewing/index.tsx
+++ b/src/pages/nftBridge/NFTPanel/Viewing/index.tsx
@@ -90,7 +90,7 @@ const Viewing = props => {
         if (exists) {
           uri = await tokenInstance["uri(uint256)"](currentTokenId)
           amount = await tokenInstance["balanceOf(address,uint256)"](walletCurrentAddress, currentTokenId)
-          amount = (amount as any).toNumber()
+          amount = Number(amount)
         } else {
           throw new Error("Token does not exist!")
         }