diff --git a/examples/react-waas/package.json b/examples/react-waas/package.json index 1d42eb3a..3bffa79d 100644 --- a/examples/react-waas/package.json +++ b/examples/react-waas/package.json @@ -4,6 +4,7 @@ "version": "0.3.0", "type": "module", "scripts": { + "dev": "pnpm start", "start": "vite --port 4444", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", diff --git a/examples/react/package.json b/examples/react/package.json index 894e25d8..e2d17d7b 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -5,6 +5,7 @@ "homepage": "kit", "type": "module", "scripts": { + "dev": "pnpm start", "start": "vite", "build": "vite build && touch ./dist/.nojekyll", "serve": "vite preview", diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx index d588e793..ab185d5e 100644 --- a/examples/react/src/components/Homepage.tsx +++ b/examples/react/src/components/Homepage.tsx @@ -46,6 +46,8 @@ import { AnimatePresence } from 'framer-motion' import { Footer } from './Footer' import { messageToSign } from '../constants' import { delay, formatAddress, getCheckoutSettings } from '../utils' +import { ethers } from 'ethers' +import demoAbi from '../constants/demo-abi' import { abi } from '../constants/nft-abi' import { Alert, AlertProps } from './Alert' import { ConnectionMode } from '../config' @@ -93,31 +95,33 @@ export const Homepage = () => { localStorage.getItem('confirmationEnabled') === 'true' ) - const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] = useWaasFeeOptions() + // const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] = useWaasFeeOptions() - const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = React.useState() + // const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = React.useState() - useEffect(() => { - if (pendingFeeOptionConfirmation) { - setSelectedFeeOptionTokenName(pendingFeeOptionConfirmation.options[0].token.name) - } - }, [pendingFeeOptionConfirmation]) + // useEffect(() => { + // if (pendingFeeOptionConfirmation) { + // setSelectedFeeOptionTokenName(pendingFeeOptionConfirmation.options[0].token.name) + // } + // }, [pendingFeeOptionConfirmation]) useEffect(() => { - console.log(error?.message) + if (error?.message) { + console.log(error?.message) + } }, [error]) const chainId = useChainId() const indexerClient = useIndexerClient(chainId) - const [feeOptionBalances, setFeeOptionBalances] = React.useState<{ tokenName: string; decimals: number; balance: string }[]>([]) + // const [feeOptionBalances, setFeeOptionBalances] = React.useState<{ tokenName: string; decimals: number; balance: string }[]>([]) - const [feeOptionAlert, setFeeOptionAlert] = React.useState(undefined) + // const [feeOptionAlert, setFeeOptionAlert] = React.useState(undefined) - useEffect(() => { - checkTokenBalancesForFeeOptions() - }, [pendingFeeOptionConfirmation]) + // useEffect(() => { + // checkTokenBalancesForFeeOptions() + // }, [pendingFeeOptionConfirmation]) const handleSwitchConnectionMode = (mode: ConnectionMode) => { const searchParams = new URLSearchParams() @@ -126,40 +130,40 @@ export const Homepage = () => { window.location.search = searchParams.toString() } - const checkTokenBalancesForFeeOptions = async () => { - if (pendingFeeOptionConfirmation && walletClient) { - const [account] = await walletClient.getAddresses() - const nativeTokenBalance = await indexerClient.getEtherBalance({ accountAddress: account }) - - const tokenBalances = await indexerClient.getTokenBalances({ - accountAddress: account - }) - - console.log('feeOptions', pendingFeeOptionConfirmation.options) - console.log('nativeTokenBalance', nativeTokenBalance) - console.log('tokenBalances', tokenBalances) - - const balances = pendingFeeOptionConfirmation.options.map(option => { - if (option.token.contractAddress === null) { - return { - tokenName: option.token.name, - decimals: option.token.decimals || 0, - balance: nativeTokenBalance.balance.balanceWei - } - } else { - return { - tokenName: option.token.name, - decimals: option.token.decimals || 0, - balance: - tokenBalances.balances.find(b => b.contractAddress.toLowerCase() === option.token.contractAddress?.toLowerCase()) - ?.balance || '0' - } - } - }) - - setFeeOptionBalances(balances) - } - } + // const checkTokenBalancesForFeeOptions = async () => { + // if (pendingFeeOptionConfirmation && walletClient) { + // const [account] = await walletClient.getAddresses() + // const nativeTokenBalance = await indexerClient.getEtherBalance({ accountAddress: account }) + + // const tokenBalances = await indexerClient.getTokenBalances({ + // accountAddress: account + // }) + + // console.log('feeOptions', pendingFeeOptionConfirmation.options) + // console.log('nativeTokenBalance', nativeTokenBalance) + // console.log('tokenBalances', tokenBalances) + + // const balances = pendingFeeOptionConfirmation.options.map(option => { + // if (option.token.contractAddress === null) { + // return { + // tokenName: option.token.name, + // decimals: option.token.decimals || 0, + // balance: nativeTokenBalance.balance.balanceWei + // } + // } else { + // return { + // tokenName: option.token.name, + // decimals: option.token.decimals || 0, + // balance: + // tokenBalances.balances.find(b => b.contractAddress.toLowerCase() === option.token.contractAddress?.toLowerCase()) + // ?.balance || '0' + // } + // } + // }) + + // setFeeOptionBalances(balances) + // } + // } const networkForCurrentChainId = allNetworks.find(n => n.chainId === chainId)! @@ -229,13 +233,35 @@ export const Homepage = () => { } const runSendTransaction = async () => { + // NOTE: commented code is how to send ETH value to the account + // if (!walletClient) { + // return + // } + // const [account] = await walletClient.getAddresses() + // sendTransaction({ to: account, value: '0', gas: null }) + + // NOTE: below is a a simple contract call. See `runMintNFT` + // on another example where you can use the wagmi `writeContract` + // method to do the same thing. if (!walletClient) { return } - const [account] = await walletClient.getAddresses() + // const [account] = await walletClient.getAddresses() + const contractAbiInterface = new ethers.utils.Interface([ + 'function demo()' + ]) + + // sendTransaction({ to: account, value: BigInt(0), gas: null }) + const data = contractAbiInterface.encodeFunctionData( + 'demo', [] + ) as `0x${string}` - sendTransaction({ to: account, value: BigInt(0), gas: null }) + sendTransaction({ + to: '0x37470dac8a0255141745906c972e414b1409b470', + data, + gas: null + }) } const runMintNFT = async () => { @@ -396,11 +422,6 @@ export const Homepage = () => { description="Connect a Sequence wallet to view, swap, send, and receive collections" onClick={() => setOpenWalletModal(true)} /> - { onClick={generateEthAuthProof} /> )} + { /> - {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && ( + {/* {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (