diff --git a/examples/react-waas/package.json b/examples/react-waas/package.json index d3071e23..62160251 100644 --- a/examples/react-waas/package.json +++ b/examples/react-waas/package.json @@ -4,7 +4,7 @@ "version": "0.2.0", "type": "module", "scripts": { - "start": "vite --port 4444", + "start": "vite --port 3000", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" @@ -12,6 +12,7 @@ "dependencies": { "0xsequence": "^1.9.19", "@0xsequence/kit": "workspace:*", + "@0xsequence/kit-checkout": "workspace:*", "@tanstack/react-query": "^5.32.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/react-waas/src/App.tsx b/examples/react-waas/src/App.tsx index 753398d0..24599d1f 100644 --- a/examples/react-waas/src/App.tsx +++ b/examples/react-waas/src/App.tsx @@ -1,5 +1,5 @@ import './App.css' -import { useOpenConnectModal, useWaasFeeOptions } from '@0xsequence/kit' +import { useOpenConnectModal, useWaasFeeOptions, useWaasRevalidation } from '@0xsequence/kit' import { useAccount, useChainId, @@ -105,6 +105,8 @@ export const App = () => { } }, [txnData]) + useWaasRevalidation() + // Fee options are required when txn is not gas sponsored (not needed on testnets) const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] = useWaasFeeOptions() diff --git a/examples/react-waas/src/index.tsx b/examples/react-waas/src/index.tsx index 6f698034..6aff1e98 100644 --- a/examples/react-waas/src/index.tsx +++ b/examples/react-waas/src/index.tsx @@ -15,8 +15,10 @@ const queryClient = new QueryClient() const chains: readonly [Chain, ...Chain[]] = [arbitrumNova as Chain, arbitrumSepolia as Chain, mainnet as Chain, polygon as Chain] // replace with your keys, and better to use env vars -const projectAccessKey = 'T3czhtWsTONJpbjFgAdLAuEAAAAAAAAA' -const waasConfigKey = 'eyJwcm9qZWN0SWQiOjc1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0=' +// const projectAccessKey = 'T3czhtWsTONJpbjFgAdLAuEAAAAAAAAA' +const projectAccessKey = 'AQAAAAAAAAK2JvvZhWqZ51riasWBftkrVXE' +// const waasConfigKey = 'eyJwcm9qZWN0SWQiOjc1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0=' +const waasConfigKey = 'eyJwcm9qZWN0SWQiOjY5NCwicnBjU2VydmVyIjoiaHR0cHM6Ly9kZXYtd2Fhcy5zZXF1ZW5jZS5hcHAiLCJlbWFpbFJlZ2lvbiI6ImNhLWNlbnRyYWwtMSIsImVtYWlsQ2xpZW50SWQiOiI1NGF0bjV1cGk2M3FjNTlhMWVtM3ZiaHJzbiJ9' const googleClientId = '603294233249-6h5saeg2uiu8akpcbar3r2aqjp6j7oem.apps.googleusercontent.com' // const appleClientId = // const appleRedirectURI = 'https://' + window.location.host diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx index 8a45a9f2..b040deb3 100644 --- a/examples/react/src/components/Homepage.tsx +++ b/examples/react/src/components/Homepage.tsx @@ -41,8 +41,11 @@ import { import { allNetworks } from '@0xsequence/network' import { Footer } from './Footer' import { messageToSign } from '../constants' -import { delay, formatAddress, getCheckoutSettings } from '../utils' import { abi } from '../constants/nft-abi' +import { delay, formatAddress, getCheckoutSettings } from '../utils' +import { sequence } from '0xsequence' +import demoAbi from '../constants/demo-abi' +import { ethers } from 'ethers' import { Alert, AlertProps } from './Alert' import { ConnectionMode } from '../config' import { formatUnits, parseUnits } from 'viem' @@ -69,8 +72,8 @@ export const Homepage = () => { const isMobile = useMediaQuery('isMobile') - const { data: txnData, sendTransaction, isPending: isPendingSendTxn, error } = useSendTransaction() - const { data: txnData2, isPending: isPendingMintTxn, writeContract } = useWriteContract() + const { data: txnData, sendTransaction, isLoading: isPendingSendTxn, error } = useSendTransaction() + const { data: txnData2, isLoading: isPendingMintTxn, writeContract } = useWriteContract() const [isSigningMessage, setIsSigningMessage] = React.useState(false) const [isMessageValid, setIsMessageValid] = React.useState() @@ -83,15 +86,15 @@ 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) @@ -101,13 +104,13 @@ export const Homepage = () => { const { indexerClient } = getNetworkConfigAndClients(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() @@ -116,36 +119,36 @@ export const Homepage = () => { window.location.search = searchParams.toString() } - const checkTokenBalancesForFeeOptions = async () => { - if (pendingFeeOptionConfirmation) { - 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, balance: nativeTokenBalance.balance.balanceWei } - } else { - return { - tokenName: option.token.name, - decimals: option.token.decimals, - balance: - tokenBalances.balances.find(b => b.contractAddress.toLowerCase() === option.token.contractAddress.toLowerCase()) - ?.balance || '0' - } - } - }) - - setFeeOptionBalances(balances) - } - } + // const checkTokenBalancesForFeeOptions = async () => { + // if (pendingFeeOptionConfirmation) { + // 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, balance: nativeTokenBalance.balance.balanceWei } + // } else { + // return { + // tokenName: option.token.name, + // decimals: option.token.decimals, + // balance: + // tokenBalances.balances.find(b => b.contractAddress.toLowerCase() === option.token.contractAddress.toLowerCase()) + // ?.balance || '0' + // } + // } + // }) + + // setFeeOptionBalances(balances) + // } + // } const networkForCurrentChainId = allNetworks.find(n => n.chainId === chainId) @@ -215,13 +218,33 @@ 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 contractAbiInterface = new ethers.utils.Interface([ + 'function demo()' + ]) - sendTransaction({ to: account, value: '0', gas: null }) + const data = contractAbiInterface.encodeFunctionData( + 'demo', [] + ) + + sendTransaction({ + to: '0x37470dac8a0255141745906c972e414b1409b470', + data, + gas: null + }) } const runMintNFT = async () => { @@ -445,7 +468,7 @@ export const Homepage = () => { /> - {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && ( + {/* {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (