react waas demo to use contract call for 'runSendTransaction', and re…

…move feeOptions from this example
0xsequence · Apr 23, 2024 · 0ebf4f6 · 0ebf4f6
1 parent 61223fe
commit 0ebf4f6
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 79 deletions.
diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
@@ -43,6 +43,7 @@ import { messageToSign } from '../constants'
 import { formatAddress, getCheckoutSettings } from '../utils'
 import { sequence } from '0xsequence'
 import abi from '../constants/nft-abi'
+import demoAbi from '../constants/demo-abi'
 import { ethers } from 'ethers'
 import { Alert, AlertProps } from './Alert'
 
@@ -81,15 +82,15 @@ function Homepage() {
     localStorage.getItem('confirmationEnabled') === 'true'
   )
 
-  const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] = useWaasFeeOptions()
+  // const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] = useWaasFeeOptions()
 
-  const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = React.useState<string | undefined>()
+  // const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = React.useState<string | undefined>()
 
-  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)
@@ -99,44 +100,44 @@ function Homepage() {
 
   const { indexerClient } = getNetworkConfigAndClients(chainId)
 
-  const [feeOptionBalances, setFeeOptionBalances] = React.useState<{ tokenName: string; decimals: number; balance: string }[]>([])
-
-  const [feeOptionAlert, setFeeOptionAlert] = React.useState<AlertProps | undefined>(undefined)
-
-  useEffect(() => {
-    checkTokenBalancesForFeeOptions()
-  }, [pendingFeeOptionConfirmation])
-
-  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 [feeOptionBalances, setFeeOptionBalances] = React.useState<{ tokenName: string; decimals: number; balance: string }[]>([])
+
+  // const [feeOptionAlert, setFeeOptionAlert] = React.useState<AlertProps | undefined>(undefined)
+
+  // useEffect(() => {
+  //   checkTokenBalancesForFeeOptions()
+  // }, [pendingFeeOptionConfirmation])
+
+  // 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 = sequence.network.allNetworks.find(n => n.chainId === chainId)
 
@@ -206,13 +207,33 @@ function 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 () => {
@@ -436,7 +457,7 @@ function Homepage() {
               />
             </Box>
 
-            {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (
+            {/* {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (
               <Box marginY="3">
                 <Select
                   name="feeOption"
@@ -516,7 +537,7 @@ function Homepage() {
                   )}
                 </Box>
               </Box>
-            )}
+            )} */}
 
             {isWaasConnection && (
               <Box marginY="3">

diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts
@@ -1,5 +1,5 @@
 import { KitConfig, getKitConnectWallets } from '@0xsequence/kit'
-import { getDefaultConnectors, mock } from '@0xsequence/kit-connectors'
+import { getDefaultWaasConnectors, mock } from '@0xsequence/kit-connectors'
 import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 import { sequence } from '0xsequence'
 import { createConfig, http } from 'wagmi'
@@ -30,39 +30,22 @@ chains.forEach(chain => {
 
 /// Use this to test the waas connectors
 // WaaS config
-// const waasConfigKey = 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0='
-// const googleClientId = '970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com'
-// const appleClientId = 'com.horizon.sequence.waas'
-// const appleRedirectURI = 'https://' + window.location.host
+const waasConfigKey = 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0='
+const googleClientId = '970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com'
+const appleClientId = 'com.horizon.sequence.waas'
+const appleRedirectURI = 'https://' + window.location.host
 
-// const connectors = [
-//   ...getDefaultWaasConnectors({
-//     walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-//     defaultChainId: arbitrumSepolia.id,
-//     waasConfigKey,
-//     googleClientId,
-//     appleClientId,
-//     appleRedirectURI,
-//     appName: 'Kit Demo',
-//     projectAccessKey,
-//     enableConfirmationModal: localStorage.getItem('confirmationEnabled') === 'true'
-//   }),
-//   ...(isDebugMode
-//     ? getKitConnectWallets(projectAccessKey, [
-//         mock({
-//           accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
-//         })
-//       ])
-//     : [])
-// ]
-
-/// Use this to test the universal connectors
 const connectors = [
-  ...getDefaultConnectors({
+  ...getDefaultWaasConnectors({
     walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
     defaultChainId: arbitrumNova.id,
-    appName: 'demo app',
-    projectAccessKey
+    waasConfigKey,
+    googleClientId,
+    appleClientId,
+    appleRedirectURI,
+    appName: 'Kit Demo',
+    projectAccessKey,
+    enableConfirmationModal: localStorage.getItem('confirmationEnabled') === 'true'
   }),
   ...(isDebugMode
     ? getKitConnectWallets(projectAccessKey, [
@@ -73,6 +56,23 @@ const connectors = [
     : [])
 ]
 
+/// Use this to test the universal connectors
+// const connectors = [
+//   ...getDefaultConnectors({
+//     walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
+//     defaultChainId: arbitrumNova.id,
+//     appName: 'demo app',
+//     projectAccessKey
+//   }),
+//   ...(isDebugMode
+//     ? getKitConnectWallets(projectAccessKey, [
+//         mock({
+//           accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
+//         })
+//       ])
+//     : [])
+// ]
+
 export const wagmiConfig = createConfig({
   transports,
   chains,

diff --git a/examples/react/src/constants/demo-abi.ts b/examples/react/src/constants/demo-abi.ts
@@ -0,0 +1,11 @@
+const abi = [
+  {
+    name: 'demo',
+    inputs: [],
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function'
+  }
+]
+
+export default abi