@0xsequence/checkout 5.0.0-ecosystem-beta → 5.0.0

package/src/views/Swap/index.tsx

@@ -1,289 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,337 +0,0 @@
-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>
-  )
-}