diff --git a/src/contexts/NFTBridgeProvider.tsx b/src/contexts/NFTBridgeProvider.tsx
index 7ab7bc27d..269ca371f 100644
--- a/src/contexts/NFTBridgeProvider.tsx
+++ b/src/contexts/NFTBridgeProvider.tsx
@@ -7,6 +7,7 @@ import L2_ERC721 from "@/assets/abis/L2_ERC721.json"
import L2_ERC1155 from "@/assets/abis/L2_ERC1155.json"
import { ChainId, TOEKN_TYPE } from "@/constants"
import { useWeb3Context } from "@/contexts/Web3ContextProvider"
+import { useAsyncMemo } from "@/hooks"
import useNFTBridgeStore from "@/stores/nftBridgeStore"
import { requireEnv } from "@/utils"
@@ -26,16 +27,19 @@ const NFTBridgeProvider = props => {
const isLayer1 = useMemo(() => checkConnectedChainId(ChainId.SCROLL_LAYER_1), [checkConnectedChainId])
- const tokenInstance = useMemo(() => {
- const signer = provider?.getSigner(0)
- if (contract?.type === TOEKN_TYPE[721] && checkConnectedChainId(ChainId.SCROLL_LAYER_1)) {
- return new ethers.Contract(contract.l1 as string, L1_ERC721, signer)
- } else if (contract?.type === TOEKN_TYPE[721] && checkConnectedChainId(ChainId.SCROLL_LAYER_2)) {
- return new ethers.Contract(contract.l2 as string, L2_ERC721, signer)
- } else if (contract?.type === TOEKN_TYPE[1155] && checkConnectedChainId(ChainId.SCROLL_LAYER_1)) {
- return new ethers.Contract(contract.l1 as string, L1_ERC1155, signer)
- } else if (contract?.type === TOEKN_TYPE[1155] && checkConnectedChainId(ChainId.SCROLL_LAYER_2)) {
- return new ethers.Contract(contract.l2 as string, L2_ERC1155, signer)
+ const tokenInstance = useAsyncMemo(async () => {
+ if (provider) {
+ const signer = await provider.getSigner(0)
+ if (contract?.type === TOEKN_TYPE[721] && checkConnectedChainId(ChainId.SCROLL_LAYER_1)) {
+ return new ethers.Contract(contract.l1 as string, L1_ERC721, signer)
+ } else if (contract?.type === TOEKN_TYPE[721] && checkConnectedChainId(ChainId.SCROLL_LAYER_2)) {
+ return new ethers.Contract(contract.l2 as string, L2_ERC721, signer)
+ } else if (contract?.type === TOEKN_TYPE[1155] && checkConnectedChainId(ChainId.SCROLL_LAYER_1)) {
+ return new ethers.Contract(contract.l1 as string, L1_ERC1155, signer)
+ } else if (contract?.type === TOEKN_TYPE[1155] && checkConnectedChainId(ChainId.SCROLL_LAYER_2)) {
+ return new ethers.Contract(contract.l2 as string, L2_ERC1155, signer)
+ }
+ return null
}
return null
}, [provider, checkConnectedChainId, contract?.type])
diff --git a/src/hooks/useGasFee.ts b/src/hooks/useGasFee.ts
index 1318c8817..35d5432af 100644
--- a/src/hooks/useGasFee.ts
+++ b/src/hooks/useGasFee.ts
@@ -37,7 +37,7 @@ const useNFTGasFee = () => {
const gasFee = useMemo(() => {
if (gasPrice) {
- return gasPrice.mul(gasLimit)
+ return gasPrice * BigInt(gasLimit)
}
return null
}, [gasLimit, gasPrice])
diff --git a/src/pages/nftBridge/FAQ/index.tsx b/src/pages/nftBridge/FAQ/index.tsx
deleted file mode 100644
index eae8e9dd5..000000000
--- a/src/pages/nftBridge/FAQ/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { makeStyles } from "tss-react/mui"
-
-import { Typography } from "@mui/material"
-
-import Faq, { FaqItem } from "@/components/Faq"
-import Link from "@/components/Link"
-import { SiteMap } from "@/constants"
-import { useWeb3Context } from "@/contexts/Web3ContextProvider"
-
-const useStyles = makeStyles()(() => {
- return {
- specialParagraph: {
- marginTop: "2.6rem",
- },
- orderedParagraph: {
- marginLeft: "1.2em",
- textIndent: "-1.2em",
- },
- }
-})
-
-const FAQ = () => {
- const { walletName } = useWeb3Context()
- const { classes } = useStyles()
- return (
-
-
-
- All blockchains develop in isolated environments, this means they cannot natively communicate, and tokens cannot move freely between
- blockchains.
-
-
- A blockchain bridge is a tool connecting two blockchains to enable interactions between them.
-
-
-
-
- 1. Select the network you wish to transfer to. For example from Scroll L1 (on top) to Scroll L2 (at the bottom). You can click the "↓"
- button to switch positions.
-
-
- 2. Select the token (ETH or USDC) you wish to transfer.
-
-
- 3. Click on Send. A pop up window from {walletName} will ask you for the transfer confirmation. If this is your first time transferring
- USDC,
- {walletName} will ask you to Approve the Scroll Bridge contract to access your USDC token.
-
-
- 4. Once the transaction is confirmed, the token will be deducted from your Scroll L1 or Scroll L2 wallet.
-
-
- More instructions here.
-
-
-
- )
-}
-
-export default FAQ
diff --git a/src/pages/nftBridge/NFTPanel/SendBackup.tsx b/src/pages/nftBridge/NFTPanel/SendBackup.tsx
deleted file mode 100644
index 2ad2c9499..000000000
--- a/src/pages/nftBridge/NFTPanel/SendBackup.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { ethers } from "ethers"
-import { useMemo, useState } from "react"
-import useSWR from "swr"
-
-import { Button } from "@mui/material"
-import { Stack } from "@mui/system"
-
-import { nftTokenListUrl } from "@/apis/dynamic"
-import L1_ERC721 from "@/assets/abis/L1_ERC721.json"
-import L1_ERC1155 from "@/assets/abis/L1_ERC1155.json"
-import L2_ERC721 from "@/assets/abis/L2_ERC721.json"
-import L2_ERC1155 from "@/assets/abis/L2_ERC1155.json"
-import { ChainId } from "@/constants"
-import { TOEKN_TYPE } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
-import { useWeb3Context } from "@/contexts/Web3ContextProvider"
-import useGasFee from "@/hooks/useGasFee"
-import useApprove from "@/hooks/useNFTApprove"
-import { requireEnv } from "@/utils"
-
-import ContractSelect from "../components/ContractSelect"
-import TokenIdInput from "../components/TokenIdInput"
-
-// lost tokenId: 1364061
-
-const L1_721 = requireEnv("REACT_APP_L1_SCROLL721_ADDRESS")
-const L2_721 = requireEnv("REACT_APP_L2_SCROLL721_ADDRESS")
-
-const L1_1155 = requireEnv("REACT_APP_L1_SCROLL1155_ADDRESS")
-const L2_1155 = requireEnv("REACT_APP_L2_SCROLL1155_ADDRESS")
-
-// TODO: sole approve
-const GATEWAY_721_L1 = requireEnv("REACT_APP_L1_ERC721_GATEWAY_PROXY_ADDR")
-const GATEWAY_721_L2 = requireEnv("REACT_APP_L2_ERC721_GATEWAY_PROXY_ADDR")
-
-const GATEWAY_1155_L1 = requireEnv("REACT_APP_L1_ERC1155_GATEWAY_PROXY_ADDR")
-const GATEWAY_1155_L2 = requireEnv("REACT_APP_L2_ERC1155_GATEWAY_PROXY_ADDR")
-
-// const contractList = [
-// {
-// type: "ERC721",
-// l1: "0xf5de760f2e916647fd766B4AD9E85ff943cE3A2b",
-// l2: "0xc08632f77736AbbA71356C04dd6af28987B99E8E",
-// },
-// { type: "ERC1155", l1: "0x2e3ef7931f2d0e4a7da3dea950ff3f19269d9063", l2: "0x1A7eb82efB17ddB5B72A9E5313983FB90703C502" },
-// ]
-
-const branchName = requireEnv("REACT_APP_SCROLL_ENVIRONMENT").toLocaleLowerCase()
-
-const SelectPanel = () => {
- const { provider, walletCurrentAddress, checkConnectedChainId } = useWeb3Context()
- const { networksAndSigners } = useApp()
- const { setApproval, checkApproval } = useApprove()
- const [contract, setContract] = useState({})
- const [currentTokenId, setCurrentTokenId] = useState(123)
-
- const { gasLimit, gasFee } = useGasFee()
-
- const { data: contractList } = useSWR(nftTokenListUrl(branchName), url => {
- return scrollRequest(url)
- .then((data: any) => {
- setContract(data.tokens[0])
-
- return data.tokens
- })
- .catch(() => {
- // setFetchTokenListError("Fail to fetch token list")
- // setTokenSymbol(ETH_SYMBOL)
- return []
- })
- })
-
- const tokenInstance = useMemo(() => {
- const signer = provider?.getSigner(0)
- if (contract?.type === TOEKN_TYPE[721] && checkConnectedChainId(ChainId.SCROLL_LAYER_1)) {
- return new ethers.Contract(L1_721, L1_ERC721, signer)
- } else if (contract?.type === TOEKN_TYPE[721] && checkConnectedChainId(ChainId.SCROLL_LAYER_2)) {
- return new ethers.Contract(L2_721, L2_ERC721, signer)
- } else if (contract?.type === TOEKN_TYPE[1155] && checkConnectedChainId(ChainId.SCROLL_LAYER_1)) {
- return new ethers.Contract(L1_1155, L1_ERC1155, signer)
- } else if (contract?.type === TOEKN_TYPE[1155] && checkConnectedChainId(ChainId.SCROLL_LAYER_2)) {
- return new ethers.Contract(L2_1155, L2_ERC1155, signer)
- }
- return {}
- }, [provider, checkConnectedChainId, contract?.type])
-
- const getOwnedL1_721Nfts = async () => {
- console.log("getOwnedNfts", walletCurrentAddress)
- const count = await tokenInstance["balanceOf(address)"](walletCurrentAddress)
- console.log(count.toNumber(), "count")
- for (let i = 0; i < count.toNumber(); i++) {
- const tokenId = await tokenInstance["tokenOfOwnerByIndex(address,uint256)"](walletCurrentAddress, i)
- const tokenURI = await tokenInstance["tokenURI(uint256)"](tokenId)
- console.log(tokenId, tokenURI)
- }
- }
-
- const getOwnedL2_721Nfts = async () => {
- console.log("getOwnedNfts")
- const count = await tokenInstance["balanceOf(address)"](walletCurrentAddress)
- console.log(count.toNumber(), "count")
- for (let i = 0; i < count.toNumber(); i++) {
- const tokenId = await tokenInstance["tokenOfOwnerByIndex(address,uint256)"](walletCurrentAddress, i)
- const tokenURI = await tokenInstance["tokenURI(uint256)"](tokenId)
- console.log(tokenId.toNumber(), tokenURI)
- }
- }
-
- const getTokenURI = async () => {
- const uri = await tokenInstance["tokenURI(uint256)"](currentTokenId)
- console.log(uri, "isOwner")
-
- // const isOwner = await tokenInstance["ownerOf(uint256)"](currentTokenId)
- // console.log(isOwner, "isOwner")
- }
-
- const get1155TokenURI = async () => {
- const uri = await tokenInstance["uri(uint256)"](currentTokenId)
- console.log(uri, "uri")
- }
-
- const get1155Balance = async () => {
- const amount = await tokenInstance["balanceOf(address,uint256)"](walletCurrentAddress, currentTokenId)
- console.log(amount.toNumber(), "amount")
- }
- const setTokenURI = async () => {
- await tokenInstance["setTokenURI(uint256,string)"](
- currentTokenId,
- // "https://ipfs.io/ipfs/bafybeiezeds576kygarlq672cnjtimbsrspx5b3tr3gct2lhqud6abjgiu",
- "Dummy ERC1155",
- )
- }
-
- const approveDeposit = async () => {
- const gateway = contract.type === "ERC721" ? GATEWAY_721_L1 : GATEWAY_1155_L1
- const result = await setApproval(tokenInstance, gateway)
- console.log("approve success", result)
- }
-
- const deposite = () => {
- if (contract.type === "ERC721") {
- deposite721()
- } else if (contract.type === "ERC1155") {
- deposite1155()
- }
- }
-
- const deposite721 = async () => {
- const tx = await networksAndSigners[ChainId.SCROLL_LAYER_1].gateway_721["batchDepositERC721(address,address,uint256[],uint256)"](
- L1_721,
- walletCurrentAddress,
- [currentTokenId],
- 0,
- )
- const txResult = await tx.wait()
- console.log(txResult)
- }
-
- const deposite1155 = async () => {
- const tx = await networksAndSigners[ChainId.SCROLL_LAYER_1].gateway_1155["batchDepositERC1155(address,address,uint256[],uint256[],uint256)"](
- L1_1155,
- walletCurrentAddress,
- [123],
- [1],
- 0,
- )
- const txResult = await tx.wait()
- console.log(txResult)
- }
-
- const approveWithdraw = async () => {
- const gateway = contract.type === "ERC721" ? GATEWAY_721_L2 : GATEWAY_1155_L2
- const result = await setApproval(tokenInstance, gateway)
- console.log("approve withdraw success", result)
- }
-
- const withdraw = () => {
- if (contract.type === "ERC721") {
- withdraw721()
- } else if (contract.type === "ERC1155") {
- withdraw1155()
- }
- }
-
- const withdraw721 = async () => {
- const tx = await networksAndSigners[ChainId.SCROLL_LAYER_2].gateway_721["batchWithdrawERC721(address,address,uint256[],uint256)"](
- L2_721,
- walletCurrentAddress,
- [currentTokenId],
- gasLimit,
- { value: gasFee },
- )
- const txResult = await tx.wait()
- console.log(txResult)
- }
-
- const withdraw1155 = async () => {
- const tx = await networksAndSigners[ChainId.SCROLL_LAYER_2].gateway_1155["batchWithdrawERC1155(address,address,uint256[],uint256[],uint256)"](
- L2_1155,
- walletCurrentAddress,
- [currentTokenId],
- [1],
- gasLimit,
- { value: gasFee },
- )
- const txResult = await tx.wait()
- console.log(txResult)
- }
-
- const handleEnsureToken = async () => {
- let uri
- if (contract?.type === 721) {
- uri = await tokenInstance["tokenURI(uint256)"](currentTokenId)
- } else {
- uri = await tokenInstance["uri(uint256)"](currentTokenId)
- }
- console.log(uri, "uri")
- // scrollRequest(uri).then(data => {
- // addViewingList({ id: currentTokenId, ...data })
- // })
- }
-
- const handleChangeContract = value => {
- console.log(value, "value")
- setContract(value)
- }
-
- // const checkContrantType = async () => {
- // const signer = provider?.getSigner(0)
- // const instance = new ethers.Contract(contract.address, L1_ERC721, signer)
- // const isERC721 = await instance["supportsInterface(bytes4)"]("0x80ac58cd")
- // const isERC1155 = await instance["supportsInterface(bytes4)"]("0xd9b67a26")
- // if (isERC721) {
- // console.log("721")
- // } else if (isERC1155) {
- // console.log("1155")
- // } else {
- // console.log("no")
- // }
- // }
-
- const handleCheckApproval = async () => {
- if (tokenInstance) {
- const gateway = contract.type === TOEKN_TYPE[721] ? GATEWAY_721_L2 : GATEWAY_1155_L2
- const isApproved = await checkApproval(tokenInstance, gateway)
- console.log(isApproved, "isApproved")
- }
- }
-
- return (
-
-
-
- {checkConnectedChainId(ChainId.SCROLL_LAYER_1) ? (
-
-
-
-
-
-
- ) : (
-
-
-
-
-
-
-
- )}
-
-
- {/* */}
-
-
-
- )
-}
-
-export default SelectPanel
diff --git a/src/pages/nftBridge/RencentTx/index.tsx b/src/pages/nftBridge/RencentTx/index.tsx
deleted file mode 100644
index ffc0af364..000000000
--- a/src/pages/nftBridge/RencentTx/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { makeStyles } from "tss-react/mui"
-
-import { Button } from "@mui/material"
-
-import useBridgeStore from "@/stores/bridgeStore"
-import useTxStore from "@/stores/txStore"
-
-import TxTable from "../components/TxTable"
-
-const useStyles = makeStyles()(theme => ({
- wrapper: {
- width: "max-content",
- margin: "6.4rem auto 0",
- textAlign: "center",
- [theme.breakpoints.down("sm")]: {
- padding: "0 1.6rem",
- width: "100%",
- },
- },
- button: {
- width: "28.2rem",
- marginTop: "4rem",
- [theme.breakpoints.down("sm")]: {
- width: "100%",
- },
- },
-}))
-
-const RencentTx = (props: any) => {
- const { transactions } = useTxStore()
- const { changeRecentTxVisible } = useBridgeStore()
-
- const { classes } = useStyles()
-
- const handleGoBridge = () => {
- changeRecentTxVisible(false)
- }
- return (
-
-
-
-
- )
-}
-
-export default RencentTx
diff --git a/src/pages/nftBridge/components/LargeTextField/index.tsx b/src/pages/nftBridge/components/LargeTextField/index.tsx
index da429cdde..7cb03a0a2 100644
--- a/src/pages/nftBridge/components/LargeTextField/index.tsx
+++ b/src/pages/nftBridge/components/LargeTextField/index.tsx
@@ -1,7 +1,7 @@
import { FC, ReactNode } from "react"
import { makeStyles } from "tss-react/mui"
-import MuiTextField, { TextFieldProps } from "@mui/material/TextField"
+import MuiTextField, { StandardTextFieldProps } from "@mui/material/TextField"
type LargeTextFieldProps = {
units?: string | ReactNode
@@ -9,7 +9,7 @@ type LargeTextFieldProps = {
leftAlign?: boolean | undefined
defaultShadow?: boolean | undefined
smallFontSize?: boolean
-} & TextFieldProps
+} & StandardTextFieldProps
const useStyles = makeStyles()(theme => {
return {