added crypto options

Author: SamueleA

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

@@ -1,5 +1,7 @@
 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 { encodeFunctionData, toHex } from 'viem'
 import { useAccount } from 'wagmi'
 import { ERC_1155_SALE_CONTRACT } from '../../constants/erc1155-sale-contract'
@@ -51,7 +53,7 @@ export const CustomCheckout = () => {
     recipientAddress: address || '',
     currencyAddress,
     collectionAddress,
-    creditCardProvider: 'sardine' as CreditCardProviders,
+    creditCardProvider: 'transak' as CreditCardProviders,
     transakConfig: {
       contractId,
       apiKey: '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
@@ -67,10 +69,6 @@ export const CustomCheckout = () => {
 
   const { orderSummary, creditCardPayment, cryptoPayment } = useCheckoutUI(checkoutUIParams)
 
-  console.log('orderSummary', orderSummary)
-  console.log('creditCardPayment', creditCardPayment)
-  console.log('cryptoPayment', cryptoPayment)
-
   const OrderSummary = () => {
     if (orderSummary.isLoading) {
       return <Spinner />
@@ -91,7 +89,7 @@ export const CustomCheckout = () => {
                 width: '36px'
               }}
             >
-              <Image src={orderSummary.data?.collectibleItem?.collectibleImageUrl} />
+              <Image disableAnimation src={orderSummary.data?.collectibleItem?.collectibleImageUrl} />
             </div>
             <div className="flex flex-col gap-0.5">
               <Text variant="small" color="secondary" fontWeight="medium">
@@ -105,7 +103,7 @@ export const CustomCheckout = () => {
         </div>
         <div className="flex gap-1 flex-col">
           <div className="flex flex-row gap-2 items-center">
-            <NetworkImage chainId={chainId} size="sm" />
+            <NetworkImage disableAnimation chainId={chainId} size="sm" />
             <Text
               color="white"
               variant="large"
@@ -143,7 +141,36 @@ export const CustomCheckout = () => {
   }
 
   const CryptoPayment = () => {
-    return <div>Crypto Payment</div>
+    if (cryptoPayment.cryptoOptions.isLoading) {
+      return <Spinner />
+    }
+
+    if (cryptoPayment.cryptoOptions.error) {
+      return <Text color="error">Error loading crypto payment</Text>
+    }
+
+    return (
+      <div className="flex flex-col gap-2">
+        {cryptoPayment.cryptoOptions.data.map(option => (
+          <CryptoOption
+            key={option.currencyAddress}
+            currencyName={option.currencyName}
+            chainId={option.chainId}
+            symbol={option.symbol}
+            price={option.totalPriceDisplay}
+            onClick={() => {
+              cryptoPayment.purchaseAction.setSelectedCurrencyAddress(option.currencyAddress)
+            }}
+            isSelected={option.isSelected}
+            showInsufficientFundsWarning={option.isInsufficientFunds}
+            disabled={option.isInsufficientFunds}
+          />
+        ))}
+        <Button onClick={cryptoPayment.purchaseAction.action} disabled={!cryptoPayment.purchaseAction.isReady}>
+          Purchase
+        </Button>
+      </div>
+    )
   }
 
   return (
@@ -160,7 +187,7 @@ export const CustomCheckout = () => {
       <Text fontSize="large" fontWeight="bold" color="primary">
         Credit Card Payment section
       </Text>
-      {/* <CreditCardPayment /> */}
+      <CreditCardPayment />
     </div>
   )
 }

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

@@ -289,6 +289,7 @@ const TransakEventListener = ({
     const transakIframe = transakIframeElement.contentWindow
 
     const readMessage = async (message: any) => {
+      console.log('message', message)
       if (message.source !== transakIframe) {
         return
       }

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

@@ -1,25 +1,8 @@
-import { useProjectAccessKey } from '@0xsequence/connect'
-import {
-  compareAddress,
-  ContractVerificationStatus,
-  TRANSACTION_CONFIRMATIONS_DEFAULT,
-  formatDisplay,
-  sendTransactions
-} from '@0xsequence/connect'
-import {
-  useIndexerClient,
-  useConfig,
-  useClearCachedBalances,
-  useGetTokenBalancesSummary,
-  useGetSwapPrices,
-  useGetContractInfo,
-  useGetSwapQuote
-} from '@0xsequence/hooks'
-import { TransactionStatus } from '@0xsequence/indexer'
+import { compareAddress, ContractVerificationStatus, formatDisplay, sendTransactions } from '@0xsequence/connect'
+import { useIndexerClient, useGetTokenBalancesSummary, useGetSwapPrices, useGetSwapQuote } from '@0xsequence/hooks'
 import { ContractInfo, TokenMetadata } from '@0xsequence/metadata'
 import { findSupportedNetwork } from '@0xsequence/network'
-import pako from 'pako'
-import React, { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Hex, encodeFunctionData, formatUnits, zeroAddress } from 'viem'
 import { usePublicClient, useAccount, useReadContract, useWalletClient } from 'wagmi'
 
@@ -65,41 +48,31 @@ export interface UseCryptoPaymentReturn {
 interface CryptoOptions {
   chainId: number
   currencyAddress: string
+  currencyName: string
   totalPriceRaw: string
   symbol: string
   decimals: number
   totalPriceDisplay: string
   currrencyLogoUrl?: string
-  isBalanceSufficient: boolean
+  isInsufficientFunds: boolean
+  isSelected: boolean
 }
 
 export const useCryptoPayment = ({
   chain,
   currencyAddress,
   totalPriceRaw,
-  collectible,
-  collectionAddress,
-  recipientAddress,
   targetContractAddress,
   txData,
   transactionConfirmations,
   onSuccess,
   onError,
   currencyInfo,
-  tokenMetadatas,
-  dataCollectionInfo,
-  isLoadingCollectionInfo,
-  errorCollectionInfo,
-  isLoadingTokenMetadatas,
-  errorTokenMetadata,
   isLoadingCurrencyInfo,
   errorCurrencyInfo
 }: UseCryptoPaymentArgs): UseCryptoPaymentReturn => {
-  const [actionInProgress, setActionInProgress] = useState(false)
-  const [actionError, setActionError] = useState<Error | null>(null)
   const [selectedCurrencyAddress, setSelectedCurrencyAddress] = useState<string | undefined>(undefined)
   const { address: userAddress, connector } = useAccount()
-  const { clearCachedBalances } = useClearCachedBalances()
   const network = findSupportedNetwork(chain)
   const chainId = network?.chainId || 137
   const isNativeCurrency = compareAddress(currencyAddress, zeroAddress)
@@ -141,7 +114,11 @@ export const useCryptoPayment = ({
   const buyCurrencyAddress = currencyAddress
   const sellCurrencyAddress = selectedCurrencyAddress || ''
 
-  const { data: swapPrices = [], isLoading: swapPricesIsLoading } = useGetSwapPrices({
+  const {
+    data: swapPrices = [],
+    isLoading: swapPricesIsLoading,
+    error: swapPricesError
+  } = useGetSwapPrices({
     userAddress: userAddress ?? '',
     buyCurrencyAddress,
     chainId: chainId,
@@ -176,12 +153,14 @@ export const useCryptoPayment = ({
   const mainCurrencyOption = {
     chainId,
     currencyAddress,
+    currencyName: currencyInfo?.name || 'unknown',
     totalPriceRaw: totalPriceRaw,
     decimals: currencyDecimals || 18,
     totalPriceDisplay: priceDisplay,
     currrencyLogoUrl: currencyInfo?.logoURI,
     symbol: currencySymbol || '',
-    isBalanceSufficient: Number(mainCurrencyBalance) > Number(totalPriceRaw)
+    isInsufficientFunds: Number(mainCurrencyBalance) < Number(totalPriceRaw),
+    isSelected: compareAddress(currencyAddress, selectedCurrencyAddress || '')
   }
 
   const swapOptions = swapPrices.map(swapPrice => {
@@ -197,13 +176,15 @@ export const useCryptoPayment = ({
     return {
       chainId,
       currencyAddress: swapQuoteAddress,
+      currencyName: swapPrice.info?.name || 'unknown',
       totalPriceRaw: swapPrice.price.price,
       totalPriceDisplay: swapQuotePriceDisplay,
       currrencyLogoUrl: swapPrice.info?.logoURI,
       symbol: swapPrice.info?.symbol || '',
       decimals: swapPrice.info?.decimals || 18,
       // The balance check is done at the API level
-      isBalanceSufficient: false
+      isInsufficientFunds: false,
+      isSelected: compareAddress(swapQuoteAddress, selectedCurrencyAddress || '')
     }
   })
 
@@ -370,8 +351,8 @@ export const useCryptoPayment = ({
   return {
     cryptoOptions: {
       data: [mainCurrencyOption, ...swapOptions],
-      isLoading: isLoadingCurrencyInfo || isLoadingTokenMetadatas || isLoadingCollectionInfo,
-      error: errorCurrencyInfo || errorTokenMetadata || errorCollectionInfo
+      isLoading: isLoadingCurrencyInfo || swapPricesIsLoading,
+      error: errorCurrencyInfo || swapPricesError
     },
     purchaseAction: {
       action: purchaseAction,