update examples/react waas demo, removing fee options (#34)

0xsequence · May 2, 2024 · ed6e8a2 · ed6e8a2
1 parent 9ae53aa
commit ed6e8a2
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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<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)
+    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<AlertProps | undefined>(undefined)
+  // const [feeOptionAlert, setFeeOptionAlert] = React.useState<AlertProps | undefined>(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)}
               />
-              <ClickableCard
-                title="Sardine Checkout"
-                description="Set orderbook order id, token contract address and token id to test checkout (on Polygon)"
-                onClick={onClickCheckout}
-              />
               <ClickableCard
                 title="Send transaction"
                 description="Send a transaction with your wallet"
@@ -472,14 +493,19 @@ export const Homepage = () => {
                   onClick={generateEthAuthProof}
                 />
               )}
+              <ClickableCard
+                title="NFT Checkout"
+                description="Set orderbook order id, token contract address and token id to test checkout (on Polygon)"
+                onClick={onClickCheckout}
+              />
               <ClickableCard
                 title="Switch network"
                 description={`Current network: ${networkForCurrentChainId.title}`}
                 onClick={onSwitchNetwork}
               />
             </Box>
 
-            {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (
+            {/* {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (
               <Box marginY="3">
                 <Select
                   name="feeOption"
@@ -559,7 +585,7 @@ export const Homepage = () => {
                   )}
                 </Box>
               </Box>
-            )}
+            )} */}
 
             {isWaasConnection && (
               <Box marginY="3">

diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts
@@ -42,7 +42,7 @@ const getWaasConnectors = () => {
   const connectors = [
     ...getDefaultWaasConnectors({
       walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-      defaultChainId: arbitrumSepolia.id,
+      defaultChainId: arbitrumNova.id,
       waasConfigKey,
       googleClientId,
       appleClientId,

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