Waas fee error fix (#21)

* Update sequence.js to 1.9.19 * Throw errors instead of returning * Update example to show and alert about wallet balance for fees * Update insufficient fee alert * version 2.1.1
0xsequence · Apr 17, 2024 · 3c9bd85 · 3c9bd85
1 parent 62fc524
commit 3c9bd85
Show file tree

Hide file tree

Showing 12 changed files with 503 additions and 272 deletions.
diff --git a/examples/react-waas/package.json b/examples/react-waas/package.json
@@ -12,9 +12,9 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "0xsequence": "^1.9.17",
-    "@0xsequence/kit": "2.1.0",
-    "@0xsequence/kit-checkout": "2.1.0",
+    "0xsequence": "^1.9.19",
+    "@0xsequence/kit": "2.1.1",
+    "@0xsequence/kit-checkout": "2.1.1",
     "@tanstack/react-query": "^4.36.1",
     "viem": "^2.5.7",
     "wagmi": "^2.5.7"

diff --git a/examples/react-waas/src/main.tsx b/examples/react-waas/src/main.tsx
@@ -24,14 +24,13 @@ const googleClientId = '603294233249-6h5saeg2uiu8akpcbar3r2aqjp6j7oem.apps.googl
 const connectors = [
   ...getDefaultWaasConnectors({
     walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-    defaultChainId: 42170,
+    defaultChainId: 421614,
     waasConfigKey,
     googleClientId,
     // appleClientId,
     // appleRedirectURI,
     appName: 'Kit Demo',
-    projectAccessKey,
-    enableConfirmationModal: false
+    projectAccessKey
   })
 ]
 

diff --git a/examples/react/package.json b/examples/react/package.json
@@ -5,13 +5,13 @@
   "homepage": "kit",
   "type": "module",
   "dependencies": {
-    "0xsequence": "^1.9.17",
-    "@0xsequence/core": "^1.9.17",
+    "0xsequence": "^1.9.19",
+    "@0xsequence/core": "^1.9.19",
     "@0xsequence/design-system": "^1.4.1",
-    "@0xsequence/kit": "2.1.0",
-    "@0xsequence/kit-checkout": "2.1.0",
-    "@0xsequence/kit-connectors": "2.1.0",
-    "@0xsequence/kit-wallet": "2.1.0",
+    "@0xsequence/kit": "2.1.1",
+    "@0xsequence/kit-checkout": "2.1.1",
+    "@0xsequence/kit-connectors": "2.1.1",
+    "@0xsequence/kit-wallet": "2.1.1",
     "@tanstack/react-query": "^4.36.1",
     "@vanilla-extract/css": "^1.9.3",
     "ethers": "^5.7.2",

diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -29,20 +29,19 @@ function App() {
     polygon as Chain
   ]
 
-  const projectAccessKey = 'T3czhtWsTONJpbjFgAdLAuEAAAAAAAAA'
+  const projectAccessKey = 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
 
   /// Use this to test the waas connectors
-
   // WaaS config
-  // const waasConfigKey = 'eyJwcm9qZWN0SWQiOjc1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0='
-  // const googleClientId = '603294233249-6h5saeg2uiu8akpcbar3r2aqjp6j7oem.apps.googleusercontent.com'
+  // 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: 42170,
+  //     defaultChainId: 421614,
   //     waasConfigKey,
   //     googleClientId,
   //     appleClientId,

diff --git a/examples/react/src/components/Alert.tsx b/examples/react/src/components/Alert.tsx
@@ -0,0 +1,53 @@
+import { Box, Button, Text } from '@0xsequence/design-system'
+import { ComponentProps } from 'react'
+
+export type AlertProps = {
+  title: string
+  description: string
+  secondaryDescription?: string
+  variant: 'negative' | 'warning' | 'positive'
+  buttonProps?: ComponentProps<typeof Button>
+  children?: React.ReactNode
+}
+
+export const Alert = ({ title, description, secondaryDescription, variant, buttonProps, children }: AlertProps) => {
+  return (
+    <Box borderRadius="md" background={variant}>
+      <Box
+        background="backgroundOverlay"
+        borderRadius="md"
+        paddingX={{ sm: '4', md: '5' }}
+        paddingY="4"
+        width="full"
+        flexDirection="column"
+        gap="3"
+      >
+        <Box width="full" flexDirection={{ sm: 'column', md: 'row' }} gap="2" justifyContent="space-between">
+          <Box flexDirection="column" gap="1">
+            <Text variant="normal" color="text100" fontWeight="medium">
+              {title}
+            </Text>
+
+            <Text variant="normal" color="text50" fontWeight="medium">
+              {description}
+            </Text>
+
+            {secondaryDescription && (
+              <Text variant="normal" color="text80" fontWeight="medium">
+                {secondaryDescription}
+              </Text>
+            )}
+          </Box>
+
+          {buttonProps ? (
+            <Box background={variant} borderRadius="sm" width={'min'} height={'min'}>
+              <Button variant="emphasis" shape="square" flexShrink="0" {...buttonProps} />
+            </Box>
+          ) : null}
+        </Box>
+
+        {children}
+      </Box>
+    </Box>
+  )
+}
diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
@@ -5,7 +5,8 @@ import {
   signEthAuthProof,
   validateEthProof,
   useTheme as useKitTheme,
-  useWaasFeeOptions
+  useWaasFeeOptions,
+  getNetworkConfigAndClients
 } from '@0xsequence/kit'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { useCheckoutModal } from '@0xsequence/kit-checkout'
@@ -45,6 +46,7 @@ import { formatAddress, getCheckoutSettings } from '../utils'
 import { sequence } from '0xsequence'
 import abi from '../constants/nft-abi'
 import { ethers } from 'ethers'
+import { Alert, AlertProps } from './Alert'
 
 function Homepage() {
   const { theme, setTheme } = useTheme()
@@ -63,7 +65,7 @@ function Homepage() {
 
   const isMobile = useMediaQuery('isMobile')
 
-  const { data: txnData, sendTransaction, isLoading: isSendTxnLoading } = useSendTransaction()
+  const { data: txnData, sendTransaction, isLoading: isSendTxnLoading, error } = useSendTransaction()
   const { data: txnData2, isLoading: isMintTxnLoading, writeContract } = useWriteContract()
 
   const [isSigningMessage, setIsSigningMessage] = React.useState(false)
@@ -87,8 +89,53 @@ function Homepage() {
     }
   }, [pendingFeeOptionConfirmation])
 
+  useEffect(() => {
+    console.log(error?.message)
+  }, [error])
+
   const chainId = useChainId()
 
+  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 networkForCurrentChainId = sequence.network.allNetworks.find(n => n.chainId === chainId)
 
   const publicClient = usePublicClient({ chainId })
@@ -280,6 +327,8 @@ function Homepage() {
       switchChain({ chainId: 421614 })
     }
 
+    setLastTxnDataHash(undefined)
+    setLastTxnDataHash2(undefined)
     setIsMessageValid(undefined)
   }
 
@@ -389,7 +438,7 @@ function Homepage() {
               />
             </Box>
 
-            {pendingFeeOptionConfirmation && (
+            {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (
               <Box marginY="3">
                 <Select
                   name="feeOption"
@@ -399,35 +448,71 @@ function Homepage() {
                     const selected = pendingFeeOptionConfirmation?.options?.find(option => option.token.name === val)
                     if (selected) {
                       setSelectedFeeOptionTokenName(selected.token.name)
+                      setFeeOptionAlert(undefined)
                     }
                   }}
                   value={selectedFeeOptionTokenName}
                   options={[
                     ...pendingFeeOptionConfirmation?.options?.map(option => ({
                       label: (
-                        <Box alignItems="center" gap="2">
-                          <Text>{option.token.name}</Text>
-                          <Text>{ethers.utils.formatUnits(option.value, option.token.decimals)}</Text>
+                        <Box alignItems="flex-start" flexDirection="column" fontSize="xsmall">
+                          <Box flexDirection="row">
+                            <Text>Fee (in {option.token.name}): </Text>{' '}
+                            <Text>{ethers.utils.formatUnits(option.value, option.token.decimals)}</Text>
+                          </Box>
+                          <Box flexDirection="row">
+                            <Text>Wallet balance for {option.token.name}: </Text>{' '}
+                            <Text>
+                              {ethers.utils.formatUnits(
+                                feeOptionBalances.find(b => b.tokenName === option.token.name)?.balance,
+                                option.token.decimals
+                              )}
+                            </Text>
+                          </Box>
                         </Box>
                       ),
                       value: option.token.name
                     }))
                   ]}
                 />
-                <Box marginY="2" alignItems="center" justifyContent="center">
+                <Box marginY="2" alignItems="center" justifyContent="center" flexDirection="column">
                   <Button
                     onClick={() => {
                       const selected = pendingFeeOptionConfirmation?.options?.find(
                         option => option.token.name === selectedFeeOptionTokenName
                       )
 
                       if (selected.token.contractAddress !== undefined) {
-                        console.log('a3', selected.token.contractAddress)
+                        // check if wallet has enough balance, should be balance > feeOption.value
+                        const balance = feeOptionBalances.find(b => b.tokenName === selected.token.name)?.balance
+                        const feeOptionValue = selected.value
+                        if (balance && balance < feeOptionValue) {
+                          setFeeOptionAlert({
+                            title: 'Insufficient balance',
+                            description: `You do not have enough balance to pay the fee with ${selected.token.name}, please make sure you have enough balance in your wallet for the selected fee option.`,
+                            secondaryDescription:
+                              'You can also switch network to Arbitrum Sepolia to test a gasless transaction.',
+                            variant: 'warning'
+                          })
+                          return
+                        }
+
                         confirmPendingFeeOption(pendingFeeOptionConfirmation?.id, selected.token.contractAddress)
                       }
                     }}
                     label="Confirm fee option"
                   />
+                  {feeOptionAlert && (
+                    <Box marginTop="3" style={{ maxWidth: '332px' }}>
+                      <Alert
+                        title={feeOptionAlert.title}
+                        description={feeOptionAlert.description}
+                        secondaryDescription={feeOptionAlert.secondaryDescription}
+                        variant={feeOptionAlert.variant}
+                        buttonProps={feeOptionAlert.buttonProps}
+                      />
+                    </Box>
+                  )}
                 </Box>
               </Box>
             )}

diff --git a/packages/checkout/package.json b/packages/checkout/package.json
@@ -13,11 +13,11 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "0xsequence": "^1.9.17",
-    "@0xsequence/api": "^1.9.17",
-    "@0xsequence/indexer": "^1.9.17",
-    "@0xsequence/metadata": "^1.9.17",
-    "@0xsequence/network": "^1.9.17",
+    "0xsequence": "^1.9.19",
+    "@0xsequence/api": "^1.9.19",
+    "@0xsequence/indexer": "^1.9.19",
+    "@0xsequence/metadata": "^1.9.19",
+    "@0xsequence/network": "^1.9.19",
     "@tanstack/react-query": "^4.29.5",
     "react-copy-to-clipboard": "^5.1.0",
     "@paperxyz/react-client-sdk": "^1.1.3"

diff --git a/packages/connectors/package.json b/packages/connectors/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/kit-connectors",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Wallets for Sequence Kit",
   "repository": "https://github.com/0xsequence/kit/tree/master/packages/connectors",
   "main": "dist/0xsequence-kit-connectors.cjs.js",
@@ -13,9 +13,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/provider": "^1.9.17",
-    "@0xsequence/waas": "^1.9.17",
-    "@0xsequence/waas-ethers": "^1.9.17",
+    "@0xsequence/provider": "^1.9.19",
+    "@0xsequence/waas": "^1.9.19",
+    "@0xsequence/waas-ethers": "^1.9.19",
     "@react-oauth/google": "^0.11.1",
     "react-apple-signin-auth": "^1.1.0"
   },
@@ -24,7 +24,7 @@
     "@0xsequence/kit": "workspace:*"
   },
   "peerDependencies": {
-    "0xsequence": ">=1.9.17",
+    "0xsequence": ">=1.9.19",
     "ethers": ">=5.7.2",
     "react": ">=17",
     "react-dom": ">=17",