fix: nft bridge history UI

Author: Holybasil

Diff for: src/pages/bridge/components/TxTable/index.tsx

@@ -24,7 +24,7 @@ import { useApp } from "@/contexts/AppContextProvider"
 import useTokenInfo from "@/hooks/useTokenInfo"
 import useTxStore from "@/stores/txStore"
 import { toTokenDisplay } from "@/utils"
-import { generateExploreLink, truncateHash } from "@/utils"
+import { generateTxLink, truncateHash } from "@/utils"
 
 const useStyles = makeStyles()(theme => {
   return {
@@ -232,7 +232,7 @@ const TxRow = props => {
       <TableCell sx={{ width: "30rem" }}>
         <Stack direction="column">
           <Typography>From {tx.fromName}: </Typography>
-          <Link external href={generateExploreLink(tx.fromExplore, tx.hash)} className="leading-normal flex-1">
+          <Link external href={generateTxLink(tx.fromExplore, tx.hash)} className="leading-normal flex-1">
             {truncateHash(tx.hash)}
           </Link>
           {!tx.fromBlockNumber && <LinearProgress />}
@@ -242,7 +242,7 @@ const TxRow = props => {
         <Stack direction="column" className="mt-[1.2rem]">
           <Typography>To {tx.toName}: </Typography>
           {tx.toHash ? (
-            <Link external href={generateExploreLink(tx.toExplore, tx.toHash)} className="leading-normal flex-1">
+            <Link external href={generateTxLink(tx.toExplore, tx.toHash)} className="leading-normal flex-1">
               {truncateHash(tx.toHash)}
             </Link>
           ) : (

Diff for: src/pages/nftBridge/Header/TransactionHistory.tsx

@@ -4,7 +4,7 @@ import { CircularProgress, Stack, Typography } from "@mui/material"
 
 import { BRIDGE_PAGE_SIZE } from "@/constants"
 import { useApp } from "@/contexts/AppContextProvider"
-import useTxStore from "@/stores/txStore"
+import useNFTTxStore from "@/stores/nftTxStore"
 
 import TxTable from "../components/TxTable"
 
@@ -42,9 +42,10 @@ const TransactionsList = (props: any) => {
     txHistory: { refreshPageTransactions },
   } = useApp()
 
-  const { page, total, loading, frontTransactions, pageTransactions } = useTxStore()
+  const { page, total, loading, frontTransactions } = useNFTTxStore()
 
-  if (!pageTransactions?.length) {
+  // TODO: waiting for api
+  if (!frontTransactions?.length) {
     return (
       <Typography variant="body1" color="textSecondary">
         Your transactions will appear here...
@@ -67,7 +68,7 @@ const TransactionsList = (props: any) => {
         </Stack>
       </div>
       <TxTable
-        data={pageTransactions}
+        data={frontTransactions.slice(0, 3)}
         pagination={{
           count: Math.ceil((total + frontTransactions.length) / BRIDGE_PAGE_SIZE),
           page,

Diff for: src/pages/nftBridge/Header/index.tsx

@@ -8,15 +8,15 @@ import { ReactComponent as ExitIcon } from "@/assets/svgs/exit.svg"
 import Link from "@/components/Link"
 import TextIconButton from "@/components/TextIconButton"
 import WalletIndicator from "@/components/WalletIndicator"
-import { useApp } from "@/contexts/AppContextProvider"
+// import { useApp } from "@/contexts/AppContextProvider"
 import { useWeb3Context } from "@/contexts/Web3ContextProvider"
-// import TransactionHistory from "@/pages/bridge/Header/TransactionHistory"
 import useBridgeStore from "@/stores/bridgeStore"
 import useNFTBridgeStore from "@/stores/nftBridgeStore"
 import { truncateAddress } from "@/utils"
 
 import CopyButton from "./CopyButton"
 import PageTitle from "./PageTitle"
+import TransactionHistory from "./TransactionHistory"
 
 const useStyles = makeStyles()(theme => ({
   container: {
@@ -89,14 +89,14 @@ const Header = () => {
 
   const { clearViewingList, clearSelectedList } = useNFTBridgeStore()
 
-  const {
-    txHistory: { refreshPageTransactions },
-  } = useApp()
+  // const {
+  //   txHistory: { refreshPageTransactions },
+  // } = useApp()
   const { historyVisible, changeHistoryVisible } = useBridgeStore()
 
   const handleOpen = () => {
     changeHistoryVisible(true)
-    refreshPageTransactions(1)
+    // refreshPageTransactions(1)
   }
 
   const handleClose = () => {
@@ -132,8 +132,7 @@ const Header = () => {
           </Stack>
           <Divider />
           <Box sx={{ position: "relative", margin: ["2.4rem 0", "3rem 0"] }}>
-            coming soon!
-            {/* <TransactionHistory /> */}
+            <TransactionHistory />
           </Box>
         </Card>
       </WalletIndicator>

Diff for: src/pages/nftBridge/NFTPanel/Transfer/Send.tsx

@@ -11,6 +11,7 @@ import { useAsyncMemo } from "@/hooks"
 import useGasFee from "@/hooks/useGasFee"
 import useApprove from "@/hooks/useNFTApprove"
 import useNFTBridgeStore from "@/stores/nftBridgeStore"
+import useNFTTxStore from "@/stores/nftTxStore"
 
 import ApproveLoadingModal from "./ApproveLoadingModal"
 import SendLoadingModal from "./SendLoadingModal"
@@ -20,8 +21,9 @@ const Send = () => {
   const { walletCurrentAddress } = useWeb3Context()
   const { networksAndSigners } = useApp()
 
+  const { addNFTTransaction, updateNFTTransaction } = useNFTTxStore()
   const { tokenInstance, gatewayAddress, isLayer1 } = useNFTBridgeContext()
-  const { contract, selectedList, exciseSelected, updatePromptMessage } = useNFTBridgeStore()
+  const { contract, selectedList, exciseSelected, updatePromptMessage, fromNetwork, toNetwork } = useNFTBridgeStore()
   const selectedTokenIds = useNFTBridgeStore(state => state.selectedTokenIds())
 
   const { setApproval, checkApproval } = useApprove()
@@ -69,15 +71,31 @@ const Send = () => {
     }
   }
 
-  const handleSend = () => {
+  const handleSend = async () => {
     setSendLoading(true)
     setSendModalLoading(true)
-    const tx = isLayer1 ? deposite() : withdraw()
-    tx.then(result => {
-      console.log(result, "send result")
-      setTxHash(result.transactionHash)
-      exciseSelected()
+    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)
       })
@@ -104,8 +122,7 @@ const Send = () => {
         value: gasFee,
       },
     )
-    const txResult = await tx.wait()
-    return txResult
+    return tx
   }
 
   const deposite1155 = async () => {
@@ -119,8 +136,7 @@ const Send = () => {
         value: gasFee,
       },
     )
-    const txResult = await tx.wait()
-    return txResult
+    return tx
   }
 
   const withdraw = () => {
@@ -138,8 +154,7 @@ const Send = () => {
       gasLimit,
       { value: gasFee },
     )
-    const txResult = await tx.wait()
-    return txResult
+    return tx
   }
 
   const withdraw1155 = async () => {
@@ -151,8 +166,7 @@ const Send = () => {
       gasLimit,
       { value: gasFee },
     )
-    const txResult = await tx.wait()
-    return txResult
+    return tx
   }
 
   const handleCloseSendModal = () => {

Diff for: src/pages/nftBridge/NFTPanel/Transfer/TransactionResultModal.tsx

@@ -5,7 +5,7 @@ import { Button } from "@mui/material"
 import Link from "@/components/Link"
 import { BLOCK_EXPLORER } from "@/constants"
 import { useWeb3Context } from "@/contexts/Web3ContextProvider"
-import { generateExploreLink } from "@/utils"
+import { generateTxLink } from "@/utils"
 
 import Modal from "../../components/Modal"
 
@@ -17,7 +17,7 @@ const TransactionResultModal = props => {
   const txUrl = useMemo(() => {
     if (hash && chainId) {
       const explorer = BLOCK_EXPLORER[chainId]
-      return generateExploreLink(explorer, hash)
+      return generateTxLink(explorer, hash)
     }
     return ""
   }, [chainId, hash])

Diff for: src/pages/nftBridge/components/TxTable/index.tsx

@@ -19,8 +19,7 @@ import {
 
 import Link from "@/components/Link"
 import { useApp } from "@/contexts/AppContextProvider"
-import useSymbol from "@/hooks/useSymbol"
-import { generateExploreLink, truncateHash } from "@/utils"
+import { generateContractLink, generateTxLink, truncateAddress, truncateHash } from "@/utils"
 
 const useStyles = makeStyles()(theme => {
   return {
@@ -35,7 +34,7 @@ const useStyles = makeStyles()(theme => {
       boxShadow: "unset",
       border: `1px solid ${theme.palette.border.main}`,
       borderRadius: "1rem",
-      width: "70rem",
+      width: "82rem",
     },
     tableTitle: {
       marginTop: "2.8rem",
@@ -52,10 +51,15 @@ const useStyles = makeStyles()(theme => {
       },
     },
     chip: {
-      width: "12.6rem",
-      height: "3.8rem",
-      fontSize: "1.6rem",
+      width: "9rem",
+      height: "2.8rem",
+      fontSize: "1.2rem",
+      padding: 0,
       fontWeight: 500,
+      ".MuiChip-label": {
+        paddingLeft: 0,
+        paddingRight: 0,
+      },
     },
     pendingChip: {
       color: theme.palette.tagWarning.main,
@@ -100,6 +104,9 @@ const TxTable = (props: any) => {
             <TableHead className={classes.tableHeader}>
               <TableRow>
                 <TableCell>Status</TableCell>
+                <TableCell>Contract Address</TableCell>
+                <TableCell>Type</TableCell>
+                <TableCell>Token IDs</TableCell>
                 <TableCell>Amount</TableCell>
                 <TableCell>Txn Hash</TableCell>
               </TableRow>
@@ -165,8 +172,6 @@ const TxRow = props => {
     return txStatus(tx.toBlockNumber, tx.isL1, true)
   }, [tx, txStatus])
 
-  const { loading: symbolLoading, symbol } = useSymbol(tx.symbolToken, tx.isL1)
-
   return (
     <TableRow key={tx.hash}>
       <TableCell>
@@ -184,17 +189,37 @@ const TxRow = props => {
           )}
         </Stack>
       </TableCell>
-      <TableCell className="w-full">
+      <TableCell>
+        <Typography>
+          <Link external href={generateContractLink(tx.fromExplore, tx.tokenAddress)} className="leading-normal flex-1">
+            {truncateAddress(tx.tokenAddress)}
+          </Link>
+        </Typography>
+      </TableCell>
+      <TableCell>
         <Typography>
-          <span>{tx.amount} </span>
-          {symbolLoading ? <Skeleton variant="text" width="5rem" className="inline-block" /> : <span>{symbol}</span>}
+          <Chip className={classes.chip} label={tx.tokenType}></Chip>
         </Typography>
       </TableCell>
+      <TableCell>
+        <Stack direction="column">
+          {tx.tokenIds.map(item => (
+            <Typography sx={{ fontSize: "1.2rem" }}>{item}</Typography>
+          ))}
+        </Stack>
+      </TableCell>
+      <TableCell>
+        <Stack direction="column">
+          {tx.amounts.map(item => (
+            <Typography sx={{ fontSize: "1.2rem" }}>{item}</Typography>
+          ))}
+        </Stack>
+      </TableCell>
       <TableCell>
         <Stack direction="column">
           <Typography>From {tx.fromName}: </Typography>
           <Stack direction="row" spacing="0.8rem" className="align-center">
-            <Link external href={generateExploreLink(tx.fromExplore, tx.hash)} className="leading-normal flex-1">
+            <Link external href={generateTxLink(tx.fromExplore, tx.hash)} className="leading-normal flex-1">
               {truncateHash(tx.hash)}
             </Link>
           </Stack>
@@ -204,7 +229,7 @@ const TxRow = props => {
           <Typography>To {tx.toName}: </Typography>
           <Stack direction="row" spacing="0.8rem" className="align-center">
             {tx.toHash ? (
-              <Link external href={generateExploreLink(tx.toExplore, tx.toHash)} className="leading-normal flex-1">
+              <Link external href={generateTxLink(tx.toExplore, tx.toHash)} className="leading-normal flex-1">
                 {truncateHash(tx.toHash)}
               </Link>
             ) : (