@0xsequence/checkout 0.0.0-20250314205219

package/src/views/Swap/index.tsx

@@ -0,0 +1,289 @@
+import { CryptoOption, compareAddress, formatDisplay, sendTransactions } from '@0xsequence/connect'
+import { Button, Spinner, Text } from '@0xsequence/design-system'
+import { findSupportedNetwork } from '@0xsequence/network'
+import { useGetContractInfo, useGetSwapPrices, useGetSwapQuote, useIndexerClient } from '@0xsequence/react-hooks'
+import { useState, useEffect } from 'react'
+import { zeroAddress, formatUnits, Hex } from 'viem'
+import { useAccount, usePublicClient, useWalletClient } from 'wagmi'
+
+import { HEADER_HEIGHT } from '../../constants'
+import { useSwapModal, useTransactionStatusModal } from '../../hooks'
+
+export const Swap = () => {
+  const { openTransactionStatusModal } = useTransactionStatusModal()
+  const { swapModalSettings, closeSwapModal } = useSwapModal()
+  const {
+    currencyAddress,
+    currencyAmount,
+    chainId,
+    disableMainCurrency = true,
+    description,
+    postSwapTransactions,
+    blockConfirmations,
+    onSuccess = () => {}
+  } = swapModalSettings!
+  const { address: userAddress, connector } = useAccount()
+  const [isTxsPending, setIsTxsPending] = useState(false)
+  const [isError, setIsError] = useState(false)
+  const [selectedCurrency, setSelectedCurrency] = useState<string>()
+  const publicClient = usePublicClient({ chainId })
+  const { data: walletClient } = useWalletClient({ chainId })
+
+  const buyCurrencyAddress = currencyAddress
+  const sellCurrencyAddress = selectedCurrency || ''
+
+  const {
+    data: currencyInfoData,
+    isLoading: isLoadingCurrencyInfo,
+    isError: isErrorCurrencyInfo
+  } = useGetContractInfo({ chainID: String(chainId), contractAddress: currencyAddress })
+
+  const {
+    data: swapPrices = [],
+    isLoading: swapPricesIsLoading,
+    isError: isErrorPrices
+  } = useGetSwapPrices({
+    userAddress: userAddress ?? '',
+    buyCurrencyAddress,
+    chainId: chainId,
+    buyAmount: currencyAmount,
+    withContractInfo: true
+  })
+
+  useEffect(() => {
+    if (!disableMainCurrency) {
+      setSelectedCurrency(currencyAddress)
+    } else if (!swapPricesIsLoading) {
+      const firstOptionAddress = swapPrices?.[0]?.info?.address
+      setSelectedCurrency(firstOptionAddress)
+    }
+  }, [swapPricesIsLoading])
+
+  const isNativeCurrency = compareAddress(currencyAddress, zeroAddress)
+  const network = findSupportedNetwork(chainId)
+
+  const mainCurrencyName = isNativeCurrency ? network?.nativeToken.name : currencyInfoData?.name
+  const mainCurrencyLogo = isNativeCurrency ? network?.logoURI : currencyInfoData?.logoURI
+  const mainCurrencySymbol = isNativeCurrency ? network?.nativeToken.symbol : currencyInfoData?.symbol
+  const mainCurrencyDecimals = isNativeCurrency ? network?.nativeToken.decimals : currencyInfoData?.decimals
+
+  const disableSwapQuote = !selectedCurrency || compareAddress(selectedCurrency, buyCurrencyAddress)
+
+  const {
+    data: swapQuote,
+    isLoading: isLoadingSwapQuote,
+    isError: isErrorSwapQuote
+  } = useGetSwapQuote(
+    {
+      userAddress: userAddress ?? '',
+      buyCurrencyAddress: currencyAddress,
+      buyAmount: currencyAmount,
+      chainId: chainId,
+      sellCurrencyAddress,
+      includeApprove: true
+    },
+    {
+      disabled: disableSwapQuote
+    }
+  )
+
+  const indexerClient = useIndexerClient(chainId)
+
+  const isMainCurrencySelected = compareAddress(selectedCurrency || '', currencyAddress)
+  const quoteFetchInProgress = isLoadingSwapQuote && !isMainCurrencySelected
+
+  const isLoading = isLoadingCurrencyInfo || swapPricesIsLoading
+
+  const onClickProceed = async () => {
+    if (!userAddress || !publicClient || !walletClient || !connector) {
+      return
+    }
+
+    setIsError(false)
+    setIsTxsPending(true)
+
+    try {
+      const swapPrice = swapPrices?.find(price => price.info?.address === selectedCurrency)
+      const isSwapNativeToken = compareAddress(zeroAddress, swapPrice?.price.currencyAddress || '')
+
+      const getSwapTransactions = () => {
+        if (isMainCurrencySelected || !swapQuote || !swapPrice) {
+          return []
+        }
+
+        const swapTransactions = [
+          // Swap quote optional approve step
+          ...(swapQuote?.approveData && !isSwapNativeToken
+            ? [
+                {
+                  to: swapPrice.price.currencyAddress as Hex,
+                  data: swapQuote.approveData as Hex,
+                  chain: chainId
+                }
+              ]
+            : []),
+          // Swap quote tx
+          {
+            to: swapQuote.to as Hex,
+            data: swapQuote.transactionData as Hex,
+            chain: chainId,
+            ...(isSwapNativeToken
+              ? {
+                  value: BigInt(swapQuote.transactionValue)
+                }
+              : {})
+          }
+        ]
+        return swapTransactions
+      }
+
+      const walletClientChainId = await walletClient.getChainId()
+      if (walletClientChainId !== chainId) {
+        await walletClient.switchChain({ id: chainId })
+      }
+
+      const txHash = await sendTransactions({
+        connector,
+        walletClient,
+        publicClient,
+        chainId,
+        indexerClient,
+        senderAddress: userAddress,
+        transactionConfirmations: blockConfirmations,
+        transactions: [...getSwapTransactions(), ...(postSwapTransactions ?? [])]
+      })
+
+      closeSwapModal()
+      openTransactionStatusModal({
+        chainId,
+        txHash,
+        onSuccess: () => {
+          onSuccess(txHash)
+        }
+      })
+    } catch (e) {
+      setIsTxsPending(false)
+      setIsError(true)
+      console.error('Failed to send transactions', e)
+    }
+  }
+
+  const isErrorFetchingPrices = isErrorPrices || isErrorCurrencyInfo
+  const noOptionsFound = disableMainCurrency && swapPrices.length === 0
+
+  const SwapContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex w-full justify-center items-center">
+          <Spinner />
+        </div>
+      )
+    } else if (isErrorFetchingPrices) {
+      return (
+        <div className="flex w-full justify-center items-center">
+          <Text variant="normal" color="negative">
+            An error occurred while fetching the swap options.
+          </Text>
+        </div>
+      )
+    } else if (noOptionsFound) {
+      return (
+        <div className="flex w-full justify-center items-center">
+          <Text variant="normal" color="primary">
+            No swap option found!
+          </Text>
+        </div>
+      )
+    } else {
+      const formattedPrice = formatUnits(BigInt(currencyAmount), mainCurrencyDecimals || 0)
+      const displayPrice = formatDisplay(formattedPrice, {
+        disableScientificNotation: true,
+        disableCompactNotation: true,
+        significantDigits: 6
+      })
+
+      return (
+        <div className="flex w-full gap-3 flex-col">
+          <Text variant="normal" color="primary">
+            {description}
+          </Text>
+          <div className="flex w-full flex-col gap-2">
+            {!disableMainCurrency && (
+              <CryptoOption
+                key={currencyAddress}
+                chainId={chainId}
+                currencyName={mainCurrencyName || mainCurrencySymbol || ''}
+                price={displayPrice}
+                iconUrl={mainCurrencyLogo}
+                symbol={mainCurrencySymbol || ''}
+                isSelected={compareAddress(selectedCurrency || '', currencyAddress)}
+                onClick={() => {
+                  setIsError(false)
+                  setSelectedCurrency(currencyAddress)
+                }}
+                disabled={isTxsPending}
+              />
+            )}
+            {swapPrices.map(swapPrice => {
+              const sellCurrencyAddress = swapPrice.info?.address || ''
+
+              const formattedPrice = formatUnits(BigInt(swapPrice.price.price), swapPrice.info?.decimals || 0)
+              const displayPrice = formatDisplay(formattedPrice, {
+                disableScientificNotation: true,
+                disableCompactNotation: true,
+                significantDigits: 6
+              })
+              return (
+                <CryptoOption
+                  key={sellCurrencyAddress}
+                  chainId={chainId}
+                  currencyName={swapPrice.info?.name || swapPrice.info?.symbol || ''}
+                  symbol={swapPrice.info?.symbol || ''}
+                  isSelected={compareAddress(selectedCurrency || '', sellCurrencyAddress)}
+                  iconUrl={swapPrice.info?.logoURI}
+                  price={displayPrice}
+                  onClick={() => {
+                    setIsError(false)
+                    setSelectedCurrency(sellCurrencyAddress)
+                  }}
+                  disabled={isTxsPending}
+                />
+              )
+            })}
+          </div>
+          {isError && (
+            <div className="w-full">
+              <Text color="negative" variant="small">
+                A problem occurred while executing the transaction.
+              </Text>
+            </div>
+          )}
+          {isErrorSwapQuote && (
+            <div className="w-full">
+              <Text color="negative" variant="small">
+                A problem occurred while fetching the swap quote.
+              </Text>
+            </div>
+          )}
+          <Button
+            disabled={noOptionsFound || !selectedCurrency || quoteFetchInProgress || isTxsPending || isErrorSwapQuote}
+            variant="primary"
+            label={quoteFetchInProgress ? 'Preparing swap...' : 'Proceed'}
+            onClick={onClickProceed}
+          />
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div
+      className="flex flex-col gap-2 items-start pb-6 px-6"
+      style={{
+        paddingTop: HEADER_HEIGHT
+      }}
+    >
+      <SwapContent />
+    </div>
+  )
+}

package/src/views/TransactionError.tsx

@@ -0,0 +1,39 @@
+import { CloseIcon, Text } from '@0xsequence/design-system'
+import React, { useEffect } from 'react'
+
+import { TransactionErrorNavigation } from '../contexts'
+import { useCheckoutModal, useNavigation } from '../hooks'
+
+export const TransactionError = () => {
+  const { closeCheckout, settings } = useCheckoutModal()
+  const nav = useNavigation()
+  const navigation = nav.navigation as TransactionErrorNavigation
+
+  useEffect(() => {
+    setTimeout(() => {
+      closeCheckout()
+      settings?.creditCardCheckout?.onError?.(navigation.params.error, settings?.creditCardCheckout)
+    }, 3000)
+  }, [])
+
+  return (
+    <div style={{ height: '650px' }}>
+      <div
+        className="flex flex-col items-center absolute"
+        style={{ top: '50%', right: '50%', transform: 'translate(50%, -50%)' }}
+      >
+        <NotificationErrorIcon />
+        <Text variant="xlarge">Error</Text>
+        <Text className="text-center" variant="normal" color="secondary">
+          An error occurred while processing the transaction.
+        </Text>
+      </div>
+    </div>
+  )
+}
+
+export const NotificationErrorIcon = () => (
+  <div className="flex text-white items-center justify-center w-16 h-16 rounded-full mb-2 bg-negative">
+    <CloseIcon size="xl" />
+  </div>
+)

package/src/views/TransactionStatus/index.tsx

@@ -0,0 +1,337 @@
+import {
+  CollectibleTileImage,
+  formatDisplay,
+  TRANSACTION_CONFIRMATIONS_DEFAULT,
+  waitForTransactionReceipt
+} from '@0xsequence/connect'
+import {
+  ArrowDownIcon,
+  Card,
+  NetworkImage,
+  Spinner,
+  Text,
+  TokenImage,
+  CheckmarkIcon,
+  CloseIcon,
+  truncateAddress
+} from '@0xsequence/design-system'
+import { TransactionStatus as TransactionStatusSequence } from '@0xsequence/indexer'
+import { findSupportedNetwork } from '@0xsequence/network'
+import { useGetTokenMetadata, useGetContractInfo, useIndexerClient } from '@0xsequence/react-hooks'
+import { useState, useEffect } from 'react'
+import TimeAgo from 'timeago-react'
+import { formatUnits, Hex, PublicClient } from 'viem'
+import { usePublicClient } from 'wagmi'
+
+import { HEADER_HEIGHT } from '../../constants'
+import { useTransactionStatusModal } from '../../hooks'
+
+export type TxStatus = 'pending' | 'success' | 'error'
+
+interface TransactionStatusHeaderProps {
+  status: TxStatus
+  noItemsToDisplay: boolean
+}
+
+export const TransactionStatusHeader = ({ status, noItemsToDisplay }: TransactionStatusHeaderProps) => {
+  const getHeaderText = () => {
+    if (noItemsToDisplay) {
+      switch (status) {
+        case 'success':
+          return 'Your transaction has been processed'
+        case 'error':
+          return 'Your transaction has failed'
+        case 'pending':
+        default:
+          return 'Your transaction is processing'
+      }
+    } else {
+      switch (status) {
+        case 'success':
+          return 'Your purchase has been processed'
+        case 'error':
+          return 'Your purchase has failed'
+        case 'pending':
+        default:
+          return 'Your purchase is processing'
+      }
+    }
+  }
+
+  const headerText = getHeaderText()
+
+  return (
+    <div className="fixed" style={{ top: '18px' }}>
+      <Text className="text-xl" color="white" variant="normal" fontWeight="bold">
+        {headerText}
+      </Text>
+    </div>
+  )
+}
+
+export const TransactionStatus = () => {
+  const { transactionStatusSettings } = useTransactionStatusModal()
+  const {
+    collectionAddress,
+    chainId,
+    items,
+    txHash,
+    currencyAddress,
+    blockConfirmations = TRANSACTION_CONFIRMATIONS_DEFAULT,
+    onSuccess,
+    onError,
+    onClose = () => {}
+  } = transactionStatusSettings!
+  const networkConfig = findSupportedNetwork(chainId)
+  const blockExplorerUrl = `${networkConfig?.blockExplorer?.rootUrl}tx/${txHash}`
+
+  const [startTime] = useState(new Date())
+  const [status, setStatus] = useState<TxStatus>('pending')
+  const noItemsToDisplay = !items || !collectionAddress
+  const { data: tokenMetadatas, isLoading: isLoadingTokenMetadatas } = useGetTokenMetadata(
+    {
+      chainID: String(chainId),
+      contractAddress: collectionAddress || '',
+      tokenIDs: items?.map(i => i.tokenId) || []
+    },
+    {
+      disabled: noItemsToDisplay
+    }
+  )
+
+  const publicClient = usePublicClient({
+    chainId
+  })
+
+  const indexerClient = useIndexerClient(chainId)
+
+  const waitForTransaction = async (publicClient: PublicClient, txnHash: string) => {
+    try {
+      const { txnStatus } = await waitForTransactionReceipt({
+        indexerClient,
+        txnHash: txnHash as Hex,
+        publicClient,
+        confirmations: blockConfirmations
+      })
+
+      if (txnStatus === TransactionStatusSequence.FAILED) {
+        throw new Error('Transaction failed')
+      }
+
+      setStatus('success')
+      onSuccess?.(txnHash)
+    } catch (e) {
+      console.error('An error occurred while waiting for transaction confirmation', e)
+      setStatus('error')
+      onError?.(e as Error)
+    }
+  }
+
+  useEffect(() => {
+    if (status === 'pending' && publicClient) {
+      waitForTransaction(publicClient, txHash)
+    }
+  }, [status, publicClient, txHash])
+
+  useEffect(() => {
+    return () => {
+      onClose()
+    }
+  }, [])
+
+  const { data: dataCollectionInfo, isLoading: isLoadingCollectionInfo } = useGetContractInfo(
+    {
+      chainID: String(chainId),
+      contractAddress: collectionAddress || ''
+    },
+    {
+      disabled: noItemsToDisplay
+    }
+  )
+  const { data: dataCurrencyInfo, isLoading: isLoadingCurrencyInfo } = useGetContractInfo(
+    {
+      chainID: String(chainId),
+      contractAddress: currencyAddress || ''
+    },
+    {
+      disabled: noItemsToDisplay
+    }
+  )
+
+  const isLoading = isLoadingTokenMetadatas || isLoadingCollectionInfo || isLoadingCurrencyInfo
+
+  const getInformationText = () => {
+    if (noItemsToDisplay) {
+      switch (status) {
+        case 'success':
+          return 'The transaction has been confirmed on the blockchain!'
+        case 'error':
+          return 'An error occurred while processing the transaction.'
+        case 'pending':
+        default:
+          return `The transaction will be confirmed on the blockchain shortly.`
+      }
+    } else {
+      const tokenNames =
+        tokenMetadatas
+          ?.map(metadata => {
+            return `${metadata.name} #${metadata.tokenId}`
+          })
+          .join(', ') || ''
+
+      switch (status) {
+        case 'success':
+          return `You just purchased ${tokenNames}. It’s been confirmed on the blockchain!`
+        case 'error':
+          return `You just purchased ${tokenNames}, but an error occurred.`
+        case 'pending':
+        default:
+          return `You just purchased ${tokenNames}. It should be confirmed on the blockchain shortly.`
+      }
+    }
+  }
+
+  const StatusIndicator = () => {
+    switch (status) {
+      case 'success':
+        return (
+          <div className="flex gap-2 justify-center items-center">
+            <div className="w-6 h-6 rounded-full bg-positive">
+              <CheckmarkIcon className="text-white relative" style={{ top: '3px', right: '-1px' }} />
+            </div>
+            <Text variant="normal" color="muted">
+              Transaction complete
+            </Text>
+          </div>
+        )
+      case 'error':
+        return (
+          <div className="flex gap-2 justify-center items-center">
+            <div className="w-6 h-6 rounded-full bg-negative">
+              <CloseIcon className="text-white relative" style={{ top: '2px', right: '-2px' }} />
+            </div>
+            <Text variant="normal" color="muted">
+              Transaction failed
+            </Text>
+          </div>
+        )
+      case 'pending':
+      default:
+        return (
+          <div className="flex gap-2 justify-center items-center">
+            <Spinner />
+            <Text variant="normal" color="muted">
+              Processing transaction
+            </Text>
+          </div>
+        )
+    }
+  }
+
+  const ItemsInfo = () => {
+    return (
+      <div className="flex gap-3 flex-col">
+        {items?.map(item => {
+          const collectibleQuantity = Number(formatUnits(BigInt(item.quantity), item?.decimals || 0))
+          const tokenMetadata = tokenMetadatas?.find(tokenMetadata => tokenMetadata.tokenId === item.tokenId)
+
+          const price = formatDisplay(formatUnits(BigInt(item.price), dataCurrencyInfo?.decimals || 0))
+
+          return (
+            <div className="flex flex-row items-center justify-between" key={item.tokenId}>
+              <div className="flex flex-row gap-2">
+                <div
+                  className="rounded-xl"
+                  style={{
+                    height: '36px',
+                    width: '36px'
+                  }}
+                >
+                  <CollectibleTileImage imageUrl={tokenMetadata?.image} />
+                </div>
+                <div className="flex flex-col gap-0.5">
+                  <Text variant="small" color="secondary" fontWeight="medium">
+                    {dataCollectionInfo?.name || null}
+                  </Text>
+                  <Text variant="small" color="primary" fontWeight="bold">
+                    {`${tokenMetadata?.name || 'Collectible'} #${item.tokenId} ${collectibleQuantity > 1 ? `x${collectibleQuantity}` : ''}`}
+                  </Text>
+                </div>
+              </div>
+              <div className="flex flex-row gap-1 items-center justify-center">
+                <TokenImage src={dataCurrencyInfo?.logoURI} size="xs" symbol={dataCurrencyInfo?.symbol} disableAnimation />
+                <Text variant="normal" fontWeight="bold" color="white">{`${price} ${dataCurrencyInfo?.symbol}`}</Text>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  const TxInfo = () => {
+    const getStatusText = () => {
+      switch (status) {
+        case 'success':
+          return 'Sent!'
+        case 'error':
+          return 'Not sent'
+        case 'pending':
+        default:
+          return 'Sending...'
+      }
+    }
+
+    return (
+      <div className="flex mb-2 flex-row items-center justify-between">
+        <div className="flex flex-row gap-1 items-center justify-between">
+          <ArrowDownIcon className="text-secondary" size="xs" style={{ transform: 'rotate(180deg)', marginRight: '-4px' }} />
+          <Text color="secondary" variant="small" fontWeight="medium">
+            {getStatusText()}
+          </Text>
+          <NetworkImage chainId={chainId} size="xs" />
+        </div>
+        <div>
+          <Text color="muted" variant="small" fontWeight="medium">
+            <TimeAgo datetime={startTime} />
+          </Text>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full px-6 pb-6">
+      <TransactionStatusHeader status={status} noItemsToDisplay={noItemsToDisplay} />
+      <div className="flex flex-col gap-6 items-center justify-center h-full" style={{ paddingTop: HEADER_HEIGHT }}>
+        {isLoading ? (
+          <div className="flex w-full justify-center items-center">
+            <Spinner size="md" />
+          </div>
+        ) : (
+          <>
+            <div className="flex w-full justify-start">
+              <Text variant="normal" color="primary">
+                {getInformationText()}
+              </Text>
+            </div>
+            {!noItemsToDisplay && (
+              <Card className="p-4">
+                <TxInfo />
+                <ItemsInfo />
+              </Card>
+            )}
+            <div className="flex w-full justify-between items-center">
+              <StatusIndicator />
+              <Text className="no-underline cursor-pointer" variant="normal" style={{ color: '#8E7EFF' }} asChild>
+                <a href={blockExplorerUrl} target="_blank" rel="noreferrer">
+                  {truncateAddress(txHash, 4, 4)}
+                </a>
+              </Text>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}