diff --git a/package.json b/package.json
index ea13416..5771743 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@0xsequence/design-system": "^1.0.13",
     "@0xsequence/indexer": "^1.9.8",
     "@0xsequence/network": "^1.9.8",
-    "@0xsequence/waas": "^1.9.8",
+    "@0xsequence/waas": "^1.9.16",
     "@react-oauth/google": "^0.11.1",
     "@vanilla-extract/css": "^1.12.0",
     "axios": "^1.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1defad0..9052436 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ dependencies:
     specifier: ^1.9.8
     version: 1.9.8(ethers@5.7.2)
   '@0xsequence/waas':
-    specifier: ^1.9.8
-    version: 1.9.8(ethers@5.7.2)
+    specifier: ^1.9.16
+    version: 1.9.16(ethers@5.7.2)
   '@react-oauth/google':
     specifier: ^0.11.1
     version: 0.11.1(react-dom@18.2.0)(react@18.2.0)
@@ -88,10 +88,23 @@ devDependencies:
 
 packages:
 
+  /@0xsequence/abi@1.9.16:
+    resolution: {integrity: sha512-5E9AY/tBrOrHQAmgXQXYIS3DPeOAr1FaE5MsiG5P5XtRg8cLYsV07yhYCB2s7qxpckGY4zpKT6N94qWrBa/pDA==}
+    dev: false
+
   /@0xsequence/abi@1.9.8:
     resolution: {integrity: sha512-im2xWjWb3FIj5veMG2zgABhPTVBn5QOdCZQ9+v/oEHMe8pMnCPsQdniGlgiAdG4qH7vO25QZnuOM6P2OB/phVw==}
     dev: false
 
+  /@0xsequence/core@1.9.16(ethers@5.7.2):
+    resolution: {integrity: sha512-loxofSmJ7y7261aEpdSlHy8aB5XA1WSJriRW7cWURU8aO6szPis82E0fNJastbVU2bE3t4xqfksn50Y4njb42A==}
+    peerDependencies:
+      ethers: '>=5.5'
+    dependencies:
+      '@0xsequence/abi': 1.9.16
+      ethers: 5.7.2
+    dev: false
+
   /@0xsequence/core@1.9.8(ethers@5.7.2):
     resolution: {integrity: sha512-ZTOji/FjPQGmfxiTpO80BimwCtTCevAxqcgAl4yl978dnWfbHJNu8dTnWLOU9IGRNFpv94Sb02QRtKNaBve78w==}
     peerDependencies:
@@ -129,10 +142,26 @@ packages:
       - '@types/react-dom'
     dev: false
 
+  /@0xsequence/indexer@1.9.16:
+    resolution: {integrity: sha512-7O3OyJl2tWZWwulCrN8e4/8xX0JQXMADSXtEYZCMOcFQQQ05ma/8qtMQafh+8Q1IP41FuOp/4GV2K2N+nw0p+Q==}
+    dev: false
+
   /@0xsequence/indexer@1.9.8:
     resolution: {integrity: sha512-E4meNL7nROkCek7nEnYgp8mRRIbFVXguJUn5ni8g+dhXvKv6bsU5R0nL5n87n98jdcosXZ4rwrHdG1doWFMb4A==}
     dev: false
 
+  /@0xsequence/network@1.9.16(ethers@5.7.2):
+    resolution: {integrity: sha512-MW557qC4ObhDl2bOhjzp3lv9YaHEadl8xG88Poz9GZW8J9+IwhQs44V4l5Cus5iSAYoFAHEwlSGP5ZCGBYOvJg==}
+    peerDependencies:
+      ethers: '>=5.5 < 6'
+    dependencies:
+      '@0xsequence/core': 1.9.16(ethers@5.7.2)
+      '@0xsequence/indexer': 1.9.16
+      '@0xsequence/relayer': 1.9.16(ethers@5.7.2)
+      '@0xsequence/utils': 1.9.16(ethers@5.7.2)
+      ethers: 5.7.2
+    dev: false
+
   /@0xsequence/network@1.9.8(ethers@5.7.2):
     resolution: {integrity: sha512-BPUiMD+Ug4ksWPer53b37rGZzg5oujlhUpS69GAH9pHJB3JqR16hCYsh3OLk2ViM+pFK6W8zFnVMPdteFwt0oQ==}
     peerDependencies:
@@ -145,6 +174,17 @@ packages:
       ethers: 5.7.2
     dev: false
 
+  /@0xsequence/relayer@1.9.16(ethers@5.7.2):
+    resolution: {integrity: sha512-dnwzmsrh4vlLryO8gAYVgrLcm4NU/SKqifjgrKFkdsn+YoijUUvQaMrTmSnHuBf8PaTTbIXarYtTStopgGpVww==}
+    peerDependencies:
+      ethers: '>=5.5 < 6'
+    dependencies:
+      '@0xsequence/abi': 1.9.16
+      '@0xsequence/core': 1.9.16(ethers@5.7.2)
+      '@0xsequence/utils': 1.9.16(ethers@5.7.2)
+      ethers: 5.7.2
+    dev: false
+
   /@0xsequence/relayer@1.9.8(ethers@5.7.2):
     resolution: {integrity: sha512-tsOxo1ev4DxbGDMu6piSLNtyHKPv7Nxh3U/VNKkCVqhoQNkyoQ9mQa+MrrPx0XHpLs1mMuMF37EaZUHKq0GZ2A==}
     peerDependencies:
@@ -156,6 +196,15 @@ packages:
       ethers: 5.7.2
     dev: false
 
+  /@0xsequence/utils@1.9.16(ethers@5.7.2):
+    resolution: {integrity: sha512-ceG7CFhenntsdqH26ipN/Ff9cTC6XtWgSPzV0LtEOAIqxKUcoaVTbz3ztlzsLuElZOsGlVCkG49pxnR3m3+bxA==}
+    peerDependencies:
+      ethers: '>=5.5 < 6'
+    dependencies:
+      ethers: 5.7.2
+      js-base64: 3.7.7
+    dev: false
+
   /@0xsequence/utils@1.9.8(ethers@5.7.2):
     resolution: {integrity: sha512-ydf9h00xVuy4qpr9GNxc3wnnvBAPqdV4+21FGlAd2uQ8vM9e0PI3uIc4G3AFTdLi8aMuIKRv3tj7EqlGQzJeHg==}
     peerDependencies:
@@ -165,12 +214,12 @@ packages:
       js-base64: 3.7.7
     dev: false
 
-  /@0xsequence/waas@1.9.8(ethers@5.7.2):
-    resolution: {integrity: sha512-HPeMuCKLpLcZlPGU/4PmYkFrZtdy573q8DXzQtxVnRsvFMIp87dvE4D5gskg1kSUfz2qYJxyQp5mcsazhBMILQ==}
+  /@0xsequence/waas@1.9.16(ethers@5.7.2):
+    resolution: {integrity: sha512-Hd9LWamxmQ1CGI0+rwVFHKgPrRcGrtD+NyiyMpCfQpSZFu8wbpkVltN1l/xYRleLUMWCWS+XoXVyCO0DS4gVNw==}
     peerDependencies:
       ethers: '>=5.5'
     dependencies:
-      '@0xsequence/network': 1.9.8(ethers@5.7.2)
+      '@0xsequence/network': 1.9.16(ethers@5.7.2)
       '@aws-sdk/client-cognito-identity-provider': 3.533.0
       ethers: 5.7.2
       idb: 7.1.1
diff --git a/src/components/views/CallContractsView.tsx b/src/components/views/CallContractsView.tsx
index 629999f..cc3c960 100644
--- a/src/components/views/CallContractsView.tsx
+++ b/src/components/views/CallContractsView.tsx
@@ -2,7 +2,13 @@
 import { Box, Text, Button, TextInput, Spinner } from "@0xsequence/design-system"
 import { SetStateAction, useState } from "react"
 import { sequence } from "../../main"
-import { isSentTransactionResponse, Network } from "@0xsequence/waas"
+import {
+  delayedEncode,
+  FeeOption,
+  isSentTransactionResponse,
+  Network,
+} from "@0xsequence/waas"
+import { checkTransactionFeeOptions, TransactionFeeOptions } from "./TransactionFeeOptions.tsx";
 
 export function CallContractsView(props: {network?: Network}) {
   const [contractAddress, setContractAddress] = useState<string>('')
@@ -13,6 +19,35 @@ export function CallContractsView(props: {network?: Network}) {
   const [inProgress, setInProgress] = useState<boolean>(false)
   const [sendTransactionError, setSendTransactionError] = useState<string>()
 
+  const [feeOptions, setFeeOptions] = useState<FeeOption[]>()
+  const [feeOption, setFeeOption] = useState<FeeOption>()
+  const [feeQuote, setFeeQuote] = useState<string>()
+  const [feeSponsored, setFeeSponsored] = useState<boolean>(false)
+
+  const checkFeeOptions = async () => {
+    const resp = await checkTransactionFeeOptions({
+      transactions: [delayedEncode({
+        to: contractAddress,
+        abi: contractAbi,
+        func: contractMethod,
+        args: JSON.parse(contractMethodArgs),
+        value: "0"
+      })],
+      network: props.network
+    })
+
+    if (resp.feeQuote && resp.feeOptions) {
+      setFeeOptions(resp.feeOptions)
+      setFeeQuote(resp.feeQuote)
+
+      console.log('feeOptions', resp)
+      return
+    }
+
+    setFeeSponsored(true)
+    console.log('tx sponsored')
+  }
+
   const callContract = async () => {
     try {
       setSendTransactionError(undefined)
@@ -24,7 +59,9 @@ export function CallContractsView(props: {network?: Network}) {
         abi: contractAbi,
         func: contractMethod,
         args: JSON.parse(contractMethodArgs),
-        value: 0
+        value: 0,
+        transactionsFeeOption: feeOption,
+        transactionsFeeQuote: feeQuote
       })
 
       if (isSentTransactionResponse(tx)) {
@@ -94,23 +131,47 @@ export function CallContractsView(props: {network?: Network}) {
           data-id="nativeTokenSendAmount"
         />
       </Box>
+
+      <TransactionFeeOptions feeOptions={feeOptions} onSelected={setFeeOption}/>
+      { feeSponsored && (
+        <Box marginTop="5">
+          <Text variant="normal" fontWeight="bold">
+            Fee options: Tx Sponsored!
+          </Text>
+        </Box>
+      )}
+
       {sendTransactionError && (
         <Box marginTop="3">
           Transaction failed: {sendTransactionError}
         </Box>
       )}
       {!inProgress ? (
-        <Button
-          marginTop="5"
-          label="Call contract"
-          disabled={
-            contractAddress === '' &&
-            contractAbi === '' &&
-            contractMethod === '' &&
-            contractMethodArgs === ''
-          }
-          onClick={() => callContract() }
-        />
+        <Box>
+          <Button
+            marginTop="5"
+            marginRight="2"
+            label="Check fee options"
+            disabled={
+              contractAddress === '' &&
+              contractAbi === '' &&
+              contractMethod === '' &&
+              contractMethodArgs === ''
+            }
+            onClick={() => checkFeeOptions()}
+          />
+          <Button
+            marginTop="5"
+            label="Call contract"
+            disabled={
+              contractAddress === '' &&
+              contractAbi === '' &&
+              contractMethod === '' &&
+              contractMethodArgs === ''
+            }
+            onClick={() => callContract() }
+          />
+        </Box>
       ) : (
         <Box gap="2" marginY="4" alignItems="center" justifyContent="center">
           <Spinner />
diff --git a/src/components/views/SendERC1155View.tsx b/src/components/views/SendERC1155View.tsx
index ef76a9c..41eb936 100644
--- a/src/components/views/SendERC1155View.tsx
+++ b/src/components/views/SendERC1155View.tsx
@@ -2,8 +2,9 @@ import { useEffect, useState } from 'react'
 import { Box, Text, Button, TextInput, Spinner, Select } from "@0xsequence/design-system"
 import { ethers } from "ethers"
 import { sequence } from '../../main'
-import { isSentTransactionResponse, Network } from '@0xsequence/waas'
+import { erc1155, FeeOption, isSentTransactionResponse, Network } from '@0xsequence/waas'
 import { GetTokenBalancesReturn, SequenceIndexer } from '@0xsequence/indexer'
+import { checkTransactionFeeOptions, TransactionFeeOptions } from "./TransactionFeeOptions.tsx";
 
 const INDEXER_API_KEY = import.meta.env.VITE_SEQUENCE_INDEXER_API_KEY
 
@@ -82,6 +83,11 @@ export function SendERC1155View(props: {network?: Network}) {
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [options, setOptions] = useState<GetTokenBalancesReturn | undefined>(undefined)
 
+  const [feeOptions, setFeeOptions] = useState<FeeOption[]>()
+  const [feeOption, setFeeOption] = useState<FeeOption>()
+  const [feeQuote, setFeeQuote] = useState<string>()
+  const [feeSponsored, setFeeSponsored] = useState<boolean>(false)
+
   const addTokenEntry = () => {
     setTokenEntries([...tokenEntries, { tokenId: '', amount: '' }])
   }
@@ -132,6 +138,31 @@ export function SendERC1155View(props: {network?: Network}) {
     setTokenEntries(newEntries)
   }
 
+  const checkFeeOptions = async () => {
+    const resp = await checkTransactionFeeOptions({
+      transactions: [erc1155({
+        to: destinationAddress,
+        token: tokenAddress,
+        values: tokenEntries.map((entry) => ({
+          id: entry.tokenId,
+          amount: ethers.utils.parseUnits(entry.amount, 0)
+        })),
+      })],
+      network: props.network,
+    })
+
+    if (resp.feeQuote && resp.feeOptions) {
+      setFeeOptions(resp.feeOptions)
+      setFeeQuote(resp.feeQuote)
+
+      console.log('feeOptions', resp)
+      return
+    }
+
+    setFeeSponsored(true)
+    console.log('tx sponsored')
+  }
+
   const sendTokens = async () => {
     try {
       setError('')
@@ -144,7 +175,9 @@ export function SendERC1155View(props: {network?: Network}) {
           id: entry.tokenId,
           amount: ethers.utils.parseUnits(entry.amount, 0)
         })),
-        network: props.network?.id
+        network: props.network?.id,
+        transactionsFeeOption: feeOption,
+        transactionsFeeQuote: feeQuote
       })
 
       if (isSentTransactionResponse(tx)) {
@@ -200,12 +233,30 @@ export function SendERC1155View(props: {network?: Network}) {
         </Box>
       )}
 
+      <TransactionFeeOptions feeOptions={feeOptions} onSelected={setFeeOption}/>
+      { feeSponsored && (
+        <Box marginTop="5">
+          <Text variant="normal" fontWeight="bold">
+            Fee options: Tx Sponsored!
+          </Text>
+        </Box>
+      )}
+
       {!isLoading ? (
-        <Button
-          marginTop="5"
-          label="Send Tokens"
-          onClick={sendTokens}
-        />
+        <Box>
+          <Button
+            marginTop="5"
+            marginRight="2"
+            label="Check fee options"
+            disabled={tokenAddress === '' && destinationAddress === '' && tokenEntries.length !== 0}
+            onClick={() => checkFeeOptions()}
+          />
+          <Button
+            marginTop="5"
+            label="Send Tokens"
+            onClick={sendTokens}
+          />
+        </Box>
       ) : (
         <Box gap="2" marginY="4" alignItems="center" justifyContent="center">
           <Spinner />
diff --git a/src/components/views/SendERC20View.tsx b/src/components/views/SendERC20View.tsx
index d54d062..9685b71 100644
--- a/src/components/views/SendERC20View.tsx
+++ b/src/components/views/SendERC20View.tsx
@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react'
 import { Box, Text, Button, TextInput, Spinner, Select } from "@0xsequence/design-system"
 import { ethers } from "ethers"
 import { node, sequence } from '../../main'
-import { isSentTransactionResponse, Network } from '@0xsequence/waas'
+import { FeeOption, isSentTransactionResponse, Network, erc20 } from '@0xsequence/waas'
+import { checkTransactionFeeOptions, TransactionFeeOptions } from "./TransactionFeeOptions.tsx";
 
 interface TokenOption {
   label: string
@@ -28,6 +29,11 @@ export function SendERC20View(props: {network?: Network}) {
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [decimals, setDecimals] = useState<number>(0)
 
+  const [feeOptions, setFeeOptions] = useState<FeeOption[]>()
+  const [feeOption, setFeeOption] = useState<FeeOption>()
+  const [feeQuote, setFeeQuote] = useState<string>()
+  const [feeSponsored, setFeeSponsored] = useState<boolean>(false)
+
   useEffect(() => {
     fetchTokenBalance(customTokenAddress)
   }, [customTokenAddress])
@@ -56,6 +62,28 @@ export function SendERC20View(props: {network?: Network}) {
     setTokenBalance(`${ethers.utils.formatUnits(balance, decimals)} ${symbol}`)
   }
 
+  const checkFeeOptions = async () => {
+    const resp = await checkTransactionFeeOptions({
+      transactions: [erc20({
+        token: customTokenAddress,
+        to: destinationAddress,
+        value: ethers.utils.parseUnits(amount, decimals).toString(),
+      })],
+      network: props.network
+    })
+
+    if (resp.feeQuote && resp.feeOptions) {
+      setFeeOptions(resp.feeOptions)
+      setFeeQuote(resp.feeQuote)
+
+      console.log('feeOptions', resp)
+      return
+    }
+
+    setFeeSponsored(true)
+    console.log('tx sponsored')
+  }
+
   const sendToken = async () => {
     try {
       setError('')
@@ -65,7 +93,9 @@ export function SendERC20View(props: {network?: Network}) {
         token: customTokenAddress,
         to: destinationAddress,
         value: ethers.utils.parseUnits(amount, decimals),
-        network: props.network?.id
+        network: props.network?.id,
+        transactionsFeeOption: feeOption,
+        transactionsFeeQuote: feeQuote
       })
 
       if (isSentTransactionResponse(tx)) {
@@ -140,12 +170,30 @@ export function SendERC20View(props: {network?: Network}) {
         </Box>
       )}
 
+      <TransactionFeeOptions feeOptions={feeOptions} onSelected={setFeeOption}/>
+      { feeSponsored && (
+        <Box marginTop="5">
+          <Text variant="normal" fontWeight="bold">
+            Fee options: Tx Sponsored!
+          </Text>
+        </Box>
+      )}
+
       {!isLoading ? (
-        <Button
-          marginTop="5"
-          label="Send Token"
-          onClick={sendToken}
-        />
+        <Box>
+          <Button
+            marginTop="5"
+            marginRight="2"
+            label="Check fee options"
+            disabled={customTokenAddress === '' && destinationAddress === ''}
+            onClick={() => checkFeeOptions()}
+          />
+          <Button
+            marginTop="5"
+            label="Send Token"
+            onClick={sendToken}
+          />
+        </Box>
       ) : (
         <Box gap="2" marginY="4" alignItems="center" justifyContent="center">
           <Spinner />
diff --git a/src/components/views/SendTransactionsView.tsx b/src/components/views/SendTransactionsView.tsx
index 8bad133..d783d66 100644
--- a/src/components/views/SendTransactionsView.tsx
+++ b/src/components/views/SendTransactionsView.tsx
@@ -2,22 +2,30 @@ import { Box, Text, Button, TextInput, Spinner } from "@0xsequence/design-system
 import { ethers } from "ethers"
 import { SetStateAction, useEffect, useState } from "react"
 import { sequence } from "../../main"
-import { isSentTransactionResponse, Network } from "@0xsequence/waas"
+import { isSentTransactionResponse, Network, FeeOption } from "@0xsequence/waas"
 import { GetEtherBalanceArgs, SequenceIndexer } from '@0xsequence/indexer'
 import { findSupportedNetwork, indexerURL } from '@0xsequence/network'
+import { checkTransactionFeeOptions, TransactionFeeOptions } from "./TransactionFeeOptions.tsx";
 
 const INDEXER_API_KEY = import.meta.env.VITE_SEQUENCE_INDEXER_API_KEY
 
 export function SendTransactionsView(props: {network?: Network}) {
   const [nativeTokenBalance, setNativeTokenBalance] = useState<ethers.BigNumber>()
   const [nativeTokenName, setNativeTokenName] = useState<string>('ETH')
+
   const [blockExplorerURL, setBlockExplorerURL] = useState<string>('')
+
   const [nativeTokenSendAddress, setNativeTokenSendAddress] = useState<string>('')
   const [nativeTokenSendAmount, setNativeTokenSendAmount] = useState<string>('')
   const [nativeTokenSendTxHash, setNativeTokenSendTxHash] = useState<string>()
   const [isNativeTokenSendTxInProgress, setIsNativeTokenSendTxInProgress] = useState<boolean>(false)
   const [sendTransactionError, setSendTransactionError] = useState<string>()
 
+  const [feeOptions, setFeeOptions] = useState<FeeOption[]>()
+  const [feeOption, setFeeOption] = useState<FeeOption>()
+  const [feeQuote, setFeeQuote] = useState<string>()
+  const [feeSponsored, setFeeSponsored] = useState<boolean>(false)
+
   useEffect(() => {
     fetchNativeTokenBalance()
   }, [])
@@ -57,6 +65,26 @@ export function SendTransactionsView(props: {network?: Network}) {
     setNativeTokenBalance(ethers.BigNumber.from(res.balance.balanceWei))
   }
 
+  const checkFeeOptions = async (to: string, amount: string) => {
+      const resp = await checkTransactionFeeOptions({
+        transactions: [{
+          to, value: ethers.utils.parseEther(amount),
+        }],
+        network: props.network
+      })
+
+      if (resp.feeQuote && resp.feeOptions) {
+        setFeeOptions(resp.feeOptions)
+        setFeeQuote(resp.feeQuote)
+
+        console.log('feeOptions', resp)
+        return
+      }
+
+      setFeeSponsored(true)
+      console.log('tx sponsored')
+  }
+
   const sendNativeToken = async (to: string, amount: string) => {
     try {
       setSendTransactionError(undefined)
@@ -66,7 +94,9 @@ export function SendTransactionsView(props: {network?: Network}) {
         transactions: [{
           to, value: ethers.utils.parseEther(amount),
         }],
-        network: props.network?.id
+        network: props.network?.id,
+        transactionsFeeOption: feeOption,
+        transactionsFeeQuote: feeQuote
       })
 
       if (isSentTransactionResponse(tx)) {
@@ -79,6 +109,11 @@ export function SendTransactionsView(props: {network?: Network}) {
     } catch (e) {
       console.error(e)
       setIsNativeTokenSendTxInProgress(false)
+    } finally {
+      setFeeQuote(undefined)
+      setFeeOptions(undefined)
+      setFeeOption(undefined)
+      setFeeSponsored(false)
     }
   }
 
@@ -119,13 +154,30 @@ export function SendTransactionsView(props: {network?: Network}) {
           Transaction failed: {sendTransactionError}
         </Box>
       )}
+      <TransactionFeeOptions feeOptions={feeOptions} onSelected={setFeeOption}/>
+      { feeSponsored && (
+        <Box marginTop="5">
+          <Text variant="normal" fontWeight="bold">
+            Fee options: Tx Sponsored!
+          </Text>
+        </Box>
+      )}
       {!isNativeTokenSendTxInProgress ? (
-        <Button
-          marginTop="5"
-          label="Send native token"
-          disabled={nativeTokenSendAddress === '' && nativeTokenSendAmount === ''}
-          onClick={() => sendNativeToken(nativeTokenSendAddress, nativeTokenSendAmount)}
-        />
+          <Box>
+            <Button
+              marginTop="5"
+              marginRight="2"
+              label="Check fee options"
+              disabled={nativeTokenSendAddress === '' && nativeTokenSendAmount === ''}
+              onClick={() => checkFeeOptions(nativeTokenSendAddress, nativeTokenSendAmount)}
+            />
+            <Button
+              marginTop="5"
+              label="Send native token"
+              disabled={nativeTokenSendAddress === '' && nativeTokenSendAmount === ''}
+              onClick={() => sendNativeToken(nativeTokenSendAddress, nativeTokenSendAmount)}
+            />
+          </Box>
       ) : (
         <Box gap="2" marginY="4" alignItems="center" justifyContent="center">
           <Spinner />
diff --git a/src/components/views/TransactionFeeOptions.tsx b/src/components/views/TransactionFeeOptions.tsx
new file mode 100644
index 0000000..fed9245
--- /dev/null
+++ b/src/components/views/TransactionFeeOptions.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+
+import { Box, Select, Text } from "@0xsequence/design-system";
+import { ethers } from "ethers";
+
+import { FeeOption, Network, Transaction } from "@0xsequence/waas"
+import { sequence } from "../../main.tsx";
+
+export async function checkTransactionFeeOptions({transactions, network}: {transactions: Transaction[], network?: Network}): Promise<{feeQuote: string | undefined, feeOptions: FeeOption[] | undefined, isSponsored: boolean}> {
+  const resp = await sequence.feeOptions({
+    transactions: transactions,
+    network: network?.id,
+  })
+
+  if (resp.data.feeQuote && resp.data.feeOptions) {
+    return {feeQuote: resp.data.feeQuote, feeOptions: resp.data.feeOptions, isSponsored: false}
+  }
+  return {feeQuote: resp.data.feeQuote, feeOptions: resp.data.feeOptions, isSponsored: true}
+}
+
+export function TransactionFeeOptions(props: {feeOptions: FeeOption[] | undefined, onSelected: (feeOption: FeeOption) => void}) {
+  const {feeOptions, onSelected} = props
+  const [feeOption, setFeeOption] = useState<FeeOption>()
+
+  useEffect(() => {
+    if (feeOptions && feeOptions.length > 0) {
+      setFeeOption(feeOptions[0])
+      onSelected(feeOptions[0])
+    }
+  }, [feeOptions]);
+
+  useEffect(() => {
+    if (feeOption) {
+      onSelected(feeOption)
+    }
+  }, [feeOption])
+
+  return feeOptions ? (<Box marginTop="5">
+      <Text variant="normal" fontWeight="bold">
+        Fee options:
+      </Text>
+      <Box marginTop="3"></Box>
+      <Select
+        name="chainId"
+        labelLocation="top"
+        onValueChange={tokenName => {
+          const selected = feeOptions.find(option => option.token.name === tokenName)
+          if (selected) {
+            setFeeOption(selected)
+          }
+        }}
+        value={feeOption?.token?.name}
+        options={[
+          ...feeOptions.map(option => ({
+            label: (
+              <Box alignItems="center" gap="2">
+                <Text>{option?.token?.name} {ethers.utils.formatUnits(option?.value, option?.token?.decimals)}</Text>
+              </Box>
+            ),
+            value: String(option?.token?.name)
+          }))
+        ]}
+      />
+    </Box>) : <Box></Box>
+}