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

examples/react-waas/package.json

@@ -4,14 +4,15 @@
   "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"
   },
   "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",

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()
 

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

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<boolean | undefined>()
@@ -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<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)
@@ -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<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()
@@ -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 = () => {
               />
             </Box>
 
-            {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (
+            {/* {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (
               <Box marginY="3">
                 <Select
                   name="feeOption"
@@ -525,7 +548,7 @@ export const Homepage = () => {
                   )}
                 </Box>
               </Box>
-            )}
+            )} */}
 
             {isWaasConnection && (
               <Box marginY="3">

examples/react/src/config.ts

@@ -34,6 +34,8 @@ chains.forEach(chain => {
   transports[chain.id] = http(network.rpcUrl)
 })
 
+/// 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'
@@ -83,6 +85,23 @@ const getUniversalConnectors = () => {
   return 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,

examples/react/src/constants/demo-abi.ts

@@ -0,0 +1,11 @@
+const abi = [
+  {
+    name: 'demo',
+    inputs: [],
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function'
+  }
+]
+
+export default abi

examples/react/vite.config.js

@@ -33,7 +33,7 @@ export default defineConfig(() => {
     },
     server: {
       minify: false,
-      port: 4444,
+      port: 3000,
       fs: {
         // Allow serving files from one level up to the project root
         allow: ['..']

packages/connectors/src/connectors/index.ts

@@ -10,4 +10,5 @@ export * from './mock'
 export * from './sequence'
 export * from './twitch'
 export * from './walletConnect'
+export * from './wagmiConnectors'
 export * from './types'

packages/connectors/src/connectors/wagmiConnectors/sequenceWaasConnector.ts

@@ -1,7 +1,7 @@
 import { SequenceWaaS, SequenceConfig, ExtendedSequenceConfig, Transaction, FeeOption } from '@0xsequence/waas'
 import { LocalStorageKey } from '@0xsequence/kit'
 import { TransactionRejectedRpcError, UserRejectedRequestError, getAddress } from 'viem'
-import { createConnector } from 'wagmi'
+import { createConnector, CreateConnectorFn } from 'wagmi'
 import { ethers } from 'ethers'
 import { v4 as uuidv4 } from 'uuid'
 import { sequence } from '0xsequence'
@@ -18,7 +18,9 @@ export type BaseSequenceWaasConnectorOptions = SequenceConfig & SequenceWaasConn
 
 sequenceWaasWallet.type = 'sequence-waas' as const
 
-export function sequenceWaasWallet(params: BaseSequenceWaasConnectorOptions) {
+export type SequenceWaasConnector = CreateConnectorFn<SequenceWaasProvider, any, {}>
+
+export function sequenceWaasWallet(params: BaseSequenceWaasConnectorOptions): SequenceWaasConnector {
   type Provider = SequenceWaasProvider
   type Properties = { sequenceWaas: SequenceWaaS; sequenceWaasProvider: SequenceWaasProvider }
 

packages/connectors/src/defaultConnectors.ts

@@ -100,7 +100,7 @@ export const getDefaultWaasConnectors = ({
   enableConfirmationModal
 }: GetDefaultWaasConnectors): CreateConnectorFn[] => {
   const wallets: any[] = [
-    // emailWaas({ projectAccessKey, waasConfigKey, enableConfirmationModal, network: defaultChainId }),
+    emailWaas({ projectAccessKey, waasConfigKey, enableConfirmationModal, network: defaultChainId }),
     coinbaseWallet({
       appName
     }),

packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx

@@ -226,8 +226,16 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
 
       <Box marginTop="6">
         {emailConnector && showEmailInput && (
-          <form onSubmit={onConnectInlineEmail}>
-            <TextInput onChange={onChangeEmail} value={email} name="email" placeholder="Enter email" data-1p-ignore />
+          <Box as="form" onSubmit={onConnectInlineEmail}>
+            <Box style={{ width: 'calc(100% - 32px)' }}>
+              <TextInput
+                onChange={onChangeEmail}
+                value={email}
+                name="email"
+                placeholder="Enter email"
+                data-1p-ignore
+              />
+            </Box>
             <Box alignItems="center" justifyContent="center" marginTop="4">
               {!emailAuthInProgress && (
                 <Button
@@ -240,7 +248,7 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
               )}
               {emailAuthInProgress && <Spinner />}
             </Box>
-          </form>
+          </Box>
         )}
 
         {socialAuthConnectors.length > 0 && (

packages/kit/src/components/styles.css.ts

@@ -65,8 +65,8 @@ globalStyle(`${googleWaasButtonContainer}`, {
 export const digitInput = style([
   textVariants({ variant: 'large' }),
   {
-    height: '48px',
-    width: '40px',
+    height: '24px',
+    width: '20px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',

packages/kit/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useOpenConnectModal'
 export * from './useTheme'
 export * from './useWalletSettings'
 export * from './useWaasFeeOptions'
+export * from './useWaasRevalidation'