From 7d8a9ca5708c3a1207b419199a014ca88f8e0ad0 Mon Sep 17 00:00:00 2001 From: holybasil Date: Wed, 17 May 2023 14:37:36 +0800 Subject: [PATCH] fix: compatibility code --- src/contexts/NFTBridgeProvider.tsx | 24 +- src/hooks/useGasFee.ts | 2 +- src/pages/nftBridge/FAQ/index.tsx | 60 ---- src/pages/nftBridge/NFTPanel/SendBackup.tsx | 281 ------------------ src/pages/nftBridge/RencentTx/index.tsx | 48 --- .../components/LargeTextField/index.tsx | 4 +- 6 files changed, 17 insertions(+), 402 deletions(-) delete mode 100644 src/pages/nftBridge/FAQ/index.tsx delete mode 100644 src/pages/nftBridge/NFTPanel/SendBackup.tsx delete mode 100644 src/pages/nftBridge/RencentTx/index.tsx 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 {