Skip to content

Commit

Permalink
fix: nft bridge history UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Holybasil
Holybasil committed Apr 11, 2023
1 parent 94b825b commit 6253814
Show file tree
Hide file tree
Showing 9 changed files with 288 additions and 46 deletions.
6 changes: 3 additions & 3 deletions src/pages/bridge/components/TxTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import Link from "@/components/Link"
import { useApp } from "@/contexts/AppContextProvider"
import useTokenInfo from "@/hooks/useTokenInfo"
import { toTokenDisplay } from "@/utils"
import { generateExploreLink, truncateHash } from "@/utils"
import { generateTxLink, truncateHash } from "@/utils"

const useStyles = makeStyles()(theme => {
return {
Expand Down Expand Up @@ -212,7 +212,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 />}
Expand All @@ -226,7 +226,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>
) : (
Expand Down
9 changes: 5 additions & 4 deletions src/pages/nftBridge/Header/TransactionHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down Expand Up @@ -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...
Expand All @@ -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,
Expand Down
15 changes: 7 additions & 8 deletions src/pages/nftBridge/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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>
Expand Down
44 changes: 29 additions & 15 deletions src/pages/nftBridge/NFTPanel/Transfer/Send.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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()
Expand Down Expand Up @@ -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)
})
Expand All @@ -104,8 +122,7 @@ const Send = () => {
value: gasFee,
},
)
const txResult = await tx.wait()
return txResult
return tx
}

const deposite1155 = async () => {
Expand All @@ -119,8 +136,7 @@ const Send = () => {
value: gasFee,
},
)
const txResult = await tx.wait()
return txResult
return tx
}

const withdraw = () => {
Expand All @@ -138,8 +154,7 @@ const Send = () => {
gasLimit,
{ value: gasFee },
)
const txResult = await tx.wait()
return txResult
return tx
}

const withdraw1155 = async () => {
Expand All @@ -151,8 +166,7 @@ const Send = () => {
gasLimit,
{ value: gasFee },
)
const txResult = await tx.wait()
return txResult
return tx
}

const handleCloseSendModal = () => {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/nftBridge/NFTPanel/Transfer/TransactionResultModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand All @@ -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])
Expand Down
51 changes: 38 additions & 13 deletions src/pages/nftBridge/components/TxTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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",
Expand All @@ -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,
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
) : (
Expand Down
Loading

0 comments on commit 6253814

Please sign in to comment.