added crypto options

Author: SamueleA

examples/react/src/components/Connected.tsx

@@ -24,12 +24,11 @@ import React, { type ComponentProps, useEffect } from 'react'
 import { encodeFunctionData, formatUnits, parseAbi, toHex } from 'viem'
 import { useAccount, useChainId, usePublicClient, useSendTransaction, useWalletClient, useWriteContract } from 'wagmi'
 
-import { CustomCheckout } from './CustomCheckout'
-
 import { sponsoredContractAddresses } from '../config'
 import { messageToSign } from '../constants'
 import { ERC_1155_SALE_CONTRACT } from '../constants/erc1155-sale-contract'
 import { abi } from '../constants/nft-abi'
+import { CustomCheckout } from './CustomCheckout'
 import { delay, getCheckoutSettings, getOrderbookCalldata } from '../utils'
 
 // append ?debug to url to enable debug mode

examples/react/src/components/CustomCheckout/index.tsx

@@ -1,9 +1,10 @@
-import { Text, Button, Spinner, NetworkImage, Image } from '@0xsequence/design-system'
-import React, { useMemo } from 'react'
 import { useCheckoutUI, CreditCardProviders } from '@0xsequence/checkout'
 import { CryptoOption } from '@0xsequence/connect'
+import { Text, Button, Spinner, NetworkImage, Image } from '@0xsequence/design-system'
+import { useState } from 'react'
 import { encodeFunctionData, toHex } from 'viem'
 import { useAccount } from 'wagmi'
+
 import { ERC_1155_SALE_CONTRACT } from '../../constants/erc1155-sale-contract'
 
 export const CustomCheckout = () => {
@@ -121,6 +122,7 @@ export const CustomCheckout = () => {
   }
 
   const CreditCardPayment = () => {
+    const [showCreditCardPayment, setShowCreditCardPayment] = useState(false)
     if (creditCardPayment.isLoading) {
       return <Spinner />
     }
@@ -132,12 +134,16 @@ export const CustomCheckout = () => {
     const CreditCardIframe = creditCardPayment.data?.CreditCardIframe
     const EventListener = creditCardPayment.data?.EventListener
 
-    return (
-      <div>
-        <CreditCardIframe />
-        <EventListener />
-      </div>
-    )
+    if (showCreditCardPayment) {
+      return (
+        <div>
+          <CreditCardIframe />
+          <EventListener />
+        </div>
+      )
+    }
+
+    return <Button onClick={() => setShowCreditCardPayment(true)}>Show Credit Card Payment</Button>
   }
 
   const CryptoPayment = () => {

packages/checkout/src/hooks/useCheckoutUI/index.tsx

@@ -6,8 +6,8 @@ import { TransakConfig } from '../../contexts/CheckoutModal'
 import { Collectible, CreditCardProviders } from '../../contexts/SelectPaymentModal'
 
 import { useCreditCardPayment, type UseCreditCardPaymentReturn } from './useCreditCardPayment'
-import { useOrderSummary, type UseOrderSummaryReturn } from './useOrderSummary'
 import { useCryptoPayment, type UseCryptoPaymentReturn } from './useCryptoPayment'
+import { useOrderSummary, type UseOrderSummaryReturn } from './useOrderSummary'
 
 interface UseCheckoutUIArgs {
   chain: string | number

packages/checkout/src/hooks/useCheckoutUI/useCryptoPayment.tsx

@@ -6,8 +6,9 @@ import { useState } from 'react'
 import { Hex, encodeFunctionData, formatUnits, zeroAddress } from 'viem'
 import { usePublicClient, useAccount, useReadContract, useWalletClient } from 'wagmi'
 
-import { Collectible } from '../../contexts/SelectPaymentModal'
 import { ERC_20_CONTRACT_ABI } from '../../constants/abi'
+import { Collectible } from '../../contexts/SelectPaymentModal'
+
 export interface UseCryptoPaymentArgs {
   chain: string | number
   currencyAddress: string
@@ -150,18 +151,22 @@ export const useCryptoPayment = ({
     significantDigits: 6
   })
 
-  const mainCurrencyOption = {
-    chainId,
-    currencyAddress,
-    currencyName: currencyInfo?.name || 'unknown',
-    totalPriceRaw: totalPriceRaw,
-    decimals: currencyDecimals || 18,
-    totalPriceDisplay: priceDisplay,
-    currrencyLogoUrl: currencyInfo?.logoURI,
-    symbol: currencySymbol || '',
-    isInsufficientFunds: Number(mainCurrencyBalance) < Number(totalPriceRaw),
-    isSelected: compareAddress(currencyAddress, selectedCurrencyAddress || '')
-  }
+  const mainCurrencyOption = currencyBalanceIsLoading
+    ? [
+        {
+          chainId,
+          currencyAddress,
+          currencyName: currencyInfo?.name || 'unknown',
+          totalPriceRaw: totalPriceRaw,
+          decimals: currencyDecimals || 18,
+          totalPriceDisplay: priceDisplay,
+          currrencyLogoUrl: currencyInfo?.logoURI,
+          symbol: currencySymbol || '',
+          isInsufficientFunds: Number(mainCurrencyBalance) < Number(totalPriceRaw),
+          isSelected: compareAddress(currencyAddress, selectedCurrencyAddress || '')
+        }
+      ]
+    : []
 
   const swapOptions = swapPrices.map(swapPrice => {
     const swapQuotePriceFormatted = formatUnits(BigInt(swapPrice.price.price), swapPrice.info?.decimals || 18)
@@ -350,8 +355,8 @@ export const useCryptoPayment = ({
 
   return {
     cryptoOptions: {
-      data: [mainCurrencyOption, ...swapOptions],
-      isLoading: isLoadingCurrencyInfo || swapPricesIsLoading,
+      data: [...mainCurrencyOption, ...swapOptions],
+      isLoading: isLoadingCurrencyInfo || swapPricesIsLoading || currencyBalanceIsLoading,
       error: errorCurrencyInfo || swapPricesError
     },
     purchaseAction: {

packages/checkout/src/hooks/useCheckoutUI/useOrderSummary.tsx

@@ -56,7 +56,6 @@ export const useOrderSummary = ({
   currencyAddress,
   totalPriceRaw,
   collectible,
-  collectionAddress,
   currencyInfo,
   tokenMetadatas,
   dataCollectionInfo,