@0xsequence/connect 0.0.0-20250314205219

package/src/hooks/useWaasFeeOptions.ts

@@ -0,0 +1,203 @@
+'use client'
+
+import { ContractVerificationStatus } from '@0xsequence/indexer'
+import { useIndexerClient } from '@0xsequence/react-hooks'
+import type { FeeOption } from '@0xsequence/waas'
+import { type ethers } from 'ethers'
+import { useState, useEffect, useRef } from 'react'
+import { formatUnits } from 'viem'
+import type { Connector } from 'wagmi'
+import { useConnections } from 'wagmi'
+
+import { Deferred } from '../utils/deferred'
+
+/**
+ * Extended FeeOption type that includes balance information
+ */
+export type FeeOptionExtended = FeeOption & {
+  /** Raw balance string */
+  balance: string
+  /** Formatted balance with proper decimals */
+  balanceFormatted: string
+  /** Indicates if the wallet has enough balance to pay the fee */
+  hasEnoughBalanceForFee: boolean
+}
+
+/**
+ * Fee option confirmation data structure
+ */
+export type WaasFeeOptionConfirmation = {
+  /** Unique identifier for the fee confirmation */
+  id: string
+  /** Available fee options with balance information */
+  options: FeeOptionExtended[] | FeeOption[]
+  /** Chain ID where the transaction will be executed */
+  chainId: number
+}
+
+/**
+ * Return type for the useWaasFeeOptions hook
+ */
+export type UseWaasFeeOptionsReturn = [
+  pendingFeeOptionConfirmation: WaasFeeOptionConfirmation | undefined,
+  confirmPendingFeeOption: (id: string, feeTokenAddress: string | null) => void,
+  rejectPendingFeeOption: (id: string) => void
+]
+
+/**
+ * Options for the useWaasFeeOptions hook
+ */
+export interface WaasFeeOptionsConfig {
+  /** Whether to skip checking token balances (default: false) */
+  skipFeeBalanceCheck?: boolean
+}
+
+/**
+ * Hook for handling WaaS (Wallet as a Service) fee options for unsponsored transactions
+ *
+ * This hook provides functionality to:
+ * - Get available fee options for a transaction in Native Token and ERC20's
+ * - Provide user wallet balances for each fee option
+ * - Confirm or reject fee selections
+ *
+ * @param options - Configuration options for the hook
+ * @returns {UseWaasFeeOptionsReturn} Array containing the confirmation state and control functions
+ *
+ * @example
+ * ```tsx
+ *   // Use the hook with default balance checking, this will fetch the user's wallet balances for each fee option and provide them in the UseWaasFeeOptionsReturn
+ *   const [
+ *     pendingFeeOptionConfirmation,
+ *     confirmPendingFeeOption,
+ *     rejectPendingFeeOption
+ *   ] = useWaasFeeOptions();
+ *
+ *   // Or skip balance checking if needed
+ *   // const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] =
+ *   //   useWaasFeeOptions({ skipFeeBalanceCheck: true });
+ *
+ *   const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = useState<string>();
+ *   const [feeOptionAlert, setFeeOptionAlert] = useState<AlertProps>();
+ *
+ *   // Initialize with first option when fee options become available
+ *   useEffect(() => {
+ *     if (pendingFeeOptionConfirmation) {
+ *       console.log('Pending fee options: ', pendingFeeOptionConfirmation.options)
+ *     }
+ *   }, [pendingFeeOptionConfirmation]);
+ *
+ * ```
+ */
+export function useWaasFeeOptions(options?: WaasFeeOptionsConfig): UseWaasFeeOptionsReturn {
+  const { skipFeeBalanceCheck = false } = options || {}
+  const connections = useConnections()
+  const waasConnector: Connector | undefined = connections.find((c: any) => c.connector.id.includes('waas'))?.connector
+  const [pendingFeeOptionConfirmation, setPendingFeeOptionConfirmation] = useState<WaasFeeOptionConfirmation | undefined>()
+  const pendingConfirmationRef = useRef<
+    Deferred<{ id: string; feeTokenAddress?: string | null; confirmed: boolean }> | undefined
+  >(undefined)
+  const indexerClient = useIndexerClient(connections[0].chainId ?? 1)
+
+  // Reset state when chainId changes
+  useEffect(() => {
+    setPendingFeeOptionConfirmation(undefined)
+    pendingConfirmationRef.current = undefined
+  }, [])
+
+  /**
+   * Confirms the selected fee option
+   * @param id - The fee confirmation ID
+   * @param feeTokenAddress - The address of the token to use for fee payment (null for native token)
+   */
+  function confirmPendingFeeOption(id: string, feeTokenAddress: string | null) {
+    if (pendingConfirmationRef.current) {
+      pendingConfirmationRef.current.resolve({ id, feeTokenAddress, confirmed: true })
+      setPendingFeeOptionConfirmation(undefined)
+      pendingConfirmationRef.current = undefined
+    }
+  }
+
+  /**
+   * Rejects the current fee option confirmation
+   * @param id - The fee confirmation ID to reject
+   */
+  function rejectPendingFeeOption(id: string) {
+    if (pendingConfirmationRef.current) {
+      pendingConfirmationRef.current.resolve({ id, feeTokenAddress: undefined, confirmed: false })
+      setPendingFeeOptionConfirmation(undefined)
+      pendingConfirmationRef.current = undefined
+    }
+  }
+
+  useEffect(() => {
+    if (!waasConnector) {
+      return
+    }
+
+    const waasProvider = (waasConnector as any).sequenceWaasProvider
+    if (!waasProvider) {
+      return
+    }
+
+    const originalHandler = waasProvider.feeConfirmationHandler
+
+    waasProvider.feeConfirmationHandler = {
+      async confirmFeeOption(
+        id: string,
+        options: FeeOption[],
+        txs: ethers.Transaction[],
+        chainId: number
+      ): Promise<{ id: string; feeTokenAddress?: string | null; confirmed: boolean }> {
+        const pending = new Deferred<{ id: string; feeTokenAddress?: string | null; confirmed: boolean }>()
+        pendingConfirmationRef.current = pending
+        const accountAddress = connections[0]?.accounts[0]
+        if (!accountAddress) {
+          throw new Error('No account address available')
+        }
+
+        if (!skipFeeBalanceCheck) {
+          const optionsWithBalances = await Promise.all(
+            options.map(async option => {
+              if (option.token.contractAddress) {
+                const tokenBalances = await indexerClient.getTokenBalancesByContract({
+                  filter: {
+                    accountAddresses: [accountAddress],
+                    contractStatus: ContractVerificationStatus.ALL,
+                    contractAddresses: [option.token.contractAddress]
+                  },
+                  omitMetadata: true
+                })
+                const tokenBalance = tokenBalances.balances[0]?.balance
+                return {
+                  ...option,
+                  balanceFormatted: option.token.decimals
+                    ? formatUnits(BigInt(tokenBalances.balances[0]?.balance ?? '0'), option.token.decimals)
+                    : (tokenBalances.balances[0]?.balance ?? '0'),
+                  balance: tokenBalances.balances[0]?.balance ?? '0',
+                  hasEnoughBalanceForFee: tokenBalance ? BigInt(option.value) <= BigInt(tokenBalance) : false
+                }
+              }
+              const nativeBalance = await indexerClient.getNativeTokenBalance({ accountAddress })
+              return {
+                ...option,
+                balanceFormatted: formatUnits(BigInt(nativeBalance.balance.balance), 18),
+                balance: nativeBalance.balance.balance,
+                hasEnoughBalanceForFee: BigInt(option.value) <= BigInt(nativeBalance.balance.balance)
+              }
+            })
+          )
+          setPendingFeeOptionConfirmation({ id, options: optionsWithBalances, chainId })
+        } else {
+          setPendingFeeOptionConfirmation({ id, options, chainId })
+        }
+        return pending.promise
+      }
+    }
+
+    return () => {
+      waasProvider.feeConfirmationHandler = originalHandler
+    }
+  }, [waasConnector, indexerClient])
+
+  return [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption]
+}

package/src/hooks/useWaasGetLinkedWalletsSignature.ts

@@ -0,0 +1,166 @@
+'use client'
+
+import { SequenceWaaS } from '@0xsequence/waas'
+import { useState, useEffect } from 'react'
+import { Address } from 'viem'
+import { Connector } from 'wagmi'
+
+import { CHAIN_ID_FOR_SIGNATURE } from '../constants/walletLinking'
+
+interface UseWaasSignatureForLinkingResult {
+  message: string | undefined
+  signature: string | undefined
+  address: string | undefined
+  chainId: number
+  loading: boolean
+  error: Error | null
+}
+
+const WAAS_SIGNATURE_PREFIX = '@0xsequence.waas_signature-'
+const getSignatureKey = (address: string) => `${WAAS_SIGNATURE_PREFIX}${address}`
+
+export const useWaasGetLinkedWalletsSignature = (
+  connection:
+    | {
+        accounts: readonly [Address, ...Address[]]
+        chainId: number
+        connector: Connector
+      }
+    | undefined
+): UseWaasSignatureForLinkingResult => {
+  const sequenceWaas: SequenceWaaS | undefined = (connection as any)?.connector?.sequenceWaas
+  const address = connection?.accounts[0]
+
+  // Try to get cached signature during initial state setup
+  const initialState = (): UseWaasSignatureForLinkingResult => {
+    if (address) {
+      const cached = localStorage.getItem(getSignatureKey(address))
+      if (cached) {
+        try {
+          const parsed = JSON.parse(cached)
+          const timestamp = parsed.timestamp || 0
+          const age = Date.now() - timestamp
+          const MAX_AGE = 24 * 60 * 60 * 1000 // 24 hours in milliseconds
+
+          if (age < MAX_AGE) {
+            return {
+              message: parsed.message,
+              signature: parsed.signature,
+              address: parsed.address,
+              chainId: CHAIN_ID_FOR_SIGNATURE,
+              loading: false,
+              error: null
+            }
+          }
+          localStorage.removeItem(getSignatureKey(address))
+        } catch (e) {
+          localStorage.removeItem(getSignatureKey(address))
+        }
+      }
+    }
+
+    return {
+      message: undefined,
+      signature: undefined,
+      address: address,
+      chainId: CHAIN_ID_FOR_SIGNATURE,
+      loading: false,
+      error: null
+    }
+  }
+
+  const [result, setResult] = useState<UseWaasSignatureForLinkingResult>(initialState)
+
+  useEffect(() => {
+    if (!sequenceWaas) {
+      return
+    }
+    if (!address) {
+      return
+    }
+
+    // Clean up signatures from other addresses
+    Object.keys(localStorage)
+      .filter(key => key.startsWith(WAAS_SIGNATURE_PREFIX) && key !== getSignatureKey(address))
+      .forEach(key => localStorage.removeItem(key))
+
+    // Try to get cached signature for current address
+    const cached = localStorage.getItem(getSignatureKey(address))
+    if (cached) {
+      try {
+        const parsed = JSON.parse(cached)
+        const timestamp = parsed.timestamp || 0
+        const age = Date.now() - timestamp
+        const MAX_AGE = 24 * 60 * 60 * 1000 // 24 hours in milliseconds
+
+        if (age < MAX_AGE) {
+          setResult({
+            message: parsed.message,
+            signature: parsed.signature,
+            address: parsed.address,
+            chainId: CHAIN_ID_FOR_SIGNATURE,
+            loading: false,
+            error: null
+          })
+          return
+        } else {
+          localStorage.removeItem(getSignatureKey(address))
+        }
+      } catch (e) {
+        localStorage.removeItem(getSignatureKey(address))
+      }
+    }
+
+    // Generate new signature if no valid cached one exists
+    const getSignature = async () => {
+      try {
+        setResult(prev => ({ ...prev, loading: true, error: null }))
+
+        const message = `parent wallet with address ${address}`
+        const signedMessage = await sequenceWaas?.signMessage({
+          message,
+          network: CHAIN_ID_FOR_SIGNATURE
+        })
+
+        if (!signedMessage) {
+          throw new Error('Failed to sign message')
+        }
+
+        const newResult = {
+          message,
+          signature: signedMessage.data.signature,
+          address,
+          chainId: CHAIN_ID_FOR_SIGNATURE,
+          loading: false,
+          error: null
+        }
+
+        // Cache the signature in localStorage with timestamp
+        localStorage.setItem(
+          getSignatureKey(address),
+          JSON.stringify({
+            message,
+            signature: signedMessage.data.signature,
+            address,
+            timestamp: Date.now()
+          })
+        )
+
+        setResult(newResult)
+      } catch (error) {
+        setResult({
+          message: undefined,
+          signature: undefined,
+          address: undefined,
+          chainId: CHAIN_ID_FOR_SIGNATURE,
+          loading: false,
+          error: error as Error
+        })
+      }
+    }
+
+    getSignature()
+  }, [address]) // Only regenerate when address changes
+
+  return result
+}

package/src/hooks/useWaasLinkWallet.ts

@@ -0,0 +1,117 @@
+'use client'
+
+import { useAPIClient } from '@0xsequence/react-hooks'
+import { SequenceWaaS } from '@0xsequence/waas'
+import { useState } from 'react'
+import { Connector } from 'wagmi'
+
+import { CHAIN_ID_FOR_SIGNATURE } from '../constants/walletLinking'
+
+interface LinkWalletParams {
+  signatureChainId: number
+  connectorName: string
+  childWalletAddress: string
+  childMessage: string
+  childSignature: string
+}
+
+interface UseWaasLinkWalletResult {
+  linkWallet: (params: LinkWalletParams) => Promise<void>
+  removeLinkedWallet: (linkedWalletAddress: string) => Promise<void>
+  loading: boolean
+  error: Error | null
+}
+
+export const useWaasLinkWallet = (connector: Connector | undefined): UseWaasLinkWalletResult => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+  const apiClient = useAPIClient()
+
+  const linkWallet = async ({
+    signatureChainId,
+    connectorName,
+    childWalletAddress,
+    childMessage,
+    childSignature
+  }: LinkWalletParams) => {
+    const sequenceWaas: SequenceWaaS | undefined = (connector as any)?.sequenceWaas
+
+    try {
+      setLoading(true)
+      setError(null)
+
+      const parentWalletAddress = await sequenceWaas?.getAddress()
+      if (!parentWalletAddress) {
+        throw new Error('Failed to fetch WaaS address')
+      }
+
+      const parentWalletMessage = 'Link child wallet with address: ' + childWalletAddress
+      const parentWalletSignature = await sequenceWaas?.signMessage({
+        message: parentWalletMessage,
+        network: CHAIN_ID_FOR_SIGNATURE
+      })
+
+      if (!parentWalletSignature) {
+        throw new Error('Failed to sign message')
+      }
+
+      await apiClient.linkWallet({
+        signatureChainId: String(signatureChainId),
+        linkedWalletType: connectorName,
+        parentWalletAddress,
+        parentWalletMessage,
+        parentWalletSignature: parentWalletSignature.data.signature,
+        linkedWalletAddress: childWalletAddress,
+        linkedWalletMessage: childMessage,
+        linkedWalletSignature: childSignature
+      })
+    } catch (err) {
+      setError(err as Error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const removeLinkedWallet = async (linkedWalletAddress: string) => {
+    const sequenceWaas: SequenceWaaS | undefined = (connector as any)?.sequenceWaas
+
+    try {
+      setLoading(true)
+      setError(null)
+
+      const parentWalletAddress = await sequenceWaas?.getAddress()
+      if (!parentWalletAddress) {
+        throw new Error('Failed to fetch WaaS address')
+      }
+
+      const parentWalletMessage = 'Remove linked wallet with address: ' + linkedWalletAddress
+      const parentWalletSignature = await sequenceWaas?.signMessage({
+        message: parentWalletMessage,
+        network: CHAIN_ID_FOR_SIGNATURE
+      })
+
+      if (!parentWalletSignature) {
+        throw new Error('Failed to sign message')
+      }
+
+      await apiClient.removeLinkedWallet({
+        parentWalletAddress,
+        parentWalletMessage,
+        parentWalletSignature: parentWalletSignature.data.signature,
+        linkedWalletAddress,
+        signatureChainId: String(CHAIN_ID_FOR_SIGNATURE)
+      })
+    } catch (err) {
+      setError(err as Error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return {
+    linkWallet,
+    removeLinkedWallet,
+    loading,
+    error
+  }
+}

package/src/hooks/useWaasSignInEmail.ts

@@ -0,0 +1,32 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useConfig, useAccount } from 'wagmi'
+
+import { LocalStorageKey } from '../constants/localStorage'
+
+/**
+ * @deprecated use useSignInEmail instead
+ */
+export const useWaasSignInEmail = () => {
+  const { storage } = useConfig()
+  const { isConnected } = useAccount()
+  const [email, setEmail] = useState<null | string>(null)
+
+  const storeEmail = async () => {
+    const key = LocalStorageKey.WaasSignInEmail
+    const storedEmail = await storage?.getItem(key as any)
+
+    setEmail(storedEmail as string)
+  }
+
+  useEffect(() => {
+    if (isConnected) {
+      storeEmail()
+    } else {
+      setEmail(null)
+    }
+  }, [isConnected])
+
+  return email
+}

package/src/hooks/useWalletSettings.ts

@@ -0,0 +1,11 @@
+import { useWalletConfigContext } from '../contexts/WalletConfig'
+
+export const useWalletSettings = () => {
+  const { setDisplayedAssets, displayedAssets, readOnlyNetworks } = useWalletConfigContext()
+
+  return {
+    displayedAssets,
+    readOnlyNetworks,
+    setDisplayedAssets
+  }
+}