@0xsequence/checkout 0.0.0-20250314205219

package/src/index.ts

@@ -0,0 +1,19 @@
+// Provider
+export { SequenceCheckoutProvider } from './components/SequenceCheckoutProvider'
+
+// Hooks
+export { useCheckoutModal } from './hooks/useCheckoutModal'
+export { useAddFundsModal } from './hooks/useAddFundsModal'
+export { useSelectPaymentModal } from './hooks/useSelectPaymentModal'
+export { useTransferFundsModal } from './hooks/useTransferFundsModal'
+export { useCheckoutWhitelistStatus } from './hooks/useCheckoutWhitelistStatus'
+export { useSwapModal } from './hooks/useSwapModal'
+export { useERC1155SaleContractCheckout, useERC1155SaleContractPaymentModal } from './hooks/useERC1155SaleContractCheckout'
+
+export { type CheckoutSettings } from './contexts/CheckoutModal'
+export { type AddFundsSettings } from './contexts/AddFundsModal'
+export { type SelectPaymentSettings } from './contexts/SelectPaymentModal'
+export { type SwapModalSettings } from './contexts/SwapModal'
+
+// utils
+export { fetchTransakSupportedCountries, getTransakLink } from './utils/transak'

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './sardine'

package/src/utils/sardine.ts

@@ -0,0 +1,62 @@
+import { DEBUG } from '@0xsequence/connect'
+import { ChainId, networks } from '@0xsequence/network'
+import { zeroAddress } from 'viem'
+
+export interface CheckSardineWhitelistStatusArgs {
+  chainId: number
+  marketplaceAddress: string
+}
+
+export const checkSardineWhitelistStatus = async (
+  { chainId, marketplaceAddress }: CheckSardineWhitelistStatusArgs,
+  projectAccessKey: string
+) => {
+  const referenceId = `sequence-kit-sardine-whitelist-check`
+
+  const accessKey = DEBUG ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
+
+  const url = DEBUG
+    ? 'https://dev-api.sequence.app/rpc/API/SardineGetNFTCheckoutToken'
+    : 'https://api.sequence.app/rpc/API/SardineGetNFTCheckoutToken'
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Access-Key': `${accessKey || ''}`
+    },
+    body: JSON.stringify({
+      params: {
+        referenceId,
+        expiresIn: 3600,
+        paymentMethodTypeConfig: {
+          enabled: ['us_debit', 'us_credit', 'international_debit', 'international_credit', 'ach'],
+          default: 'us_debit'
+        },
+        name: 'whitelist-check',
+        imageUrl: 'https://www.sequence.market/images/placeholder.png',
+        network: networks[chainId as ChainId].name,
+        recipientAddress: zeroAddress,
+        contractAddress: marketplaceAddress,
+        platform: 'calldata_execution',
+        executionType: 'smart_contract',
+        blockchainNftId: '42',
+        quantity: 1,
+        decimals: 0,
+        tokenAmount: '1000000',
+        tokenAddress: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+        tokenSymbol: 'USDC',
+        tokenDecimals: 6,
+        callData: '0x1'
+      }
+    })
+  })
+
+  const resJson = await res.json()
+
+  if (typeof resJson?.cause === 'string' && resJson.cause.includes('It must be allow listed')) {
+    return false
+  }
+
+  return true
+}

package/src/utils/sizing.ts

@@ -0,0 +1,8 @@
+import { CARD_HEIGHT, CARD_HEIGHT_MOBILE } from '../constants'
+
+export const getCardHeight = (isMobile: boolean) => {
+  if (isMobile) {
+    return CARD_HEIGHT_MOBILE
+  }
+  return CARD_HEIGHT
+}

package/src/utils/transak.ts

@@ -0,0 +1,72 @@
+import { DEBUG } from '@0xsequence/connect'
+
+import { AddFundsSettings } from '../contexts'
+
+export const TRANSAK_API_KEY = '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
+export const TRANSAK_API_KEY_STAGING = 'c20f2a0e-fe6a-4133-8fa7-77e9f84edf98'
+export const TRANSAK_PROXY_ADDRESS = '0x4a598b7ec77b1562ad0df7dc64a162695ce4c78a'
+
+const TransakUrlProd = 'https://global.transak.com'
+const TransakUrlSandbox = 'https://global-stg.transak.com'
+
+export const getTransakLink = (addFundsSettings: AddFundsSettings) => {
+  const defaultNetworks =
+    'ethereum,mainnet,arbitrum,optimism,polygon,polygonzkevm,zksync,base,bnb,oasys,astar,avaxcchain,immutablezkevm'
+
+  interface Options {
+    [index: string]: string | undefined
+  }
+
+  const url = new URL(DEBUG ? TransakUrlSandbox : TransakUrlProd)
+  const apiKey = DEBUG ? TRANSAK_API_KEY_STAGING : TRANSAK_API_KEY
+
+  const options: Options = {
+    apiKey: apiKey,
+    referrerDomain: window.location.origin,
+    walletAddress: addFundsSettings.walletAddress,
+    fiatAmount: addFundsSettings?.fiatAmount,
+    fiatCurrency: addFundsSettings?.fiatCurrency,
+    disableWalletAddressForm: 'true',
+    defaultFiatAmount: addFundsSettings?.defaultFiatAmount || '50',
+    defaultCryptoCurrency: addFundsSettings?.defaultCryptoCurrency || 'USDC',
+    cryptoCurrencyList: addFundsSettings?.cryptoCurrencyList,
+    networks: addFundsSettings?.networks || defaultNetworks
+  }
+
+  Object.keys(options).forEach(k => {
+    const option = options[k]
+    if (option) {
+      url.searchParams.append(k, option)
+    }
+  })
+
+  return url.href
+}
+
+interface CountriesResult {
+  response: Country[]
+}
+
+interface Country {
+  alpha2: string
+  alpha3: string
+  isAllowed: boolean
+  isLightKycAllowed: boolean
+  name: string
+  supportedDocuments: string[]
+  currencyCode: string
+  partners: Partner[]
+}
+
+interface Partner {
+  name: string
+  isCardPayment: boolean
+  currencyCode: string
+}
+
+export const fetchTransakSupportedCountries = async () => {
+  const res = await fetch('https://api.transak.com/api/v2/countries')
+  const data = (await res.json()) as CountriesResult
+
+  return data.response.filter(x => x.isAllowed).map(x => x.alpha2)
+}

package/src/views/AddFunds.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react'
+
+import { HEADER_HEIGHT } from '../constants'
+import { useAddFundsModal } from '../hooks'
+import { getTransakLink } from '../utils/transak'
+
+const IframeId = 'sequenceOnRamp'
+const EventTypeOrderCreated = 'TRANSAK_ORDER_CREATED'
+const EventTypeOrderSuccessful = 'TRANSAK_ORDER_SUCCESSFUL'
+const EventTypeOrderFailed = 'TRANSAK_ORDER_FAILED'
+
+export const AddFundsContent = () => {
+  const { addFundsSettings } = useAddFundsModal()
+
+  if (!addFundsSettings) {
+    return
+  }
+
+  useEffect(() => {
+    window.addEventListener('message', messageReceived)
+    return () => {
+      window.removeEventListener('message', messageReceived)
+    }
+  }, [])
+
+  function messageReceived(message: MessageEvent<any>) {
+    const element = document.getElementById(IframeId) as HTMLIFrameElement | undefined
+    const iframe = element?.contentWindow
+    if (message.source === iframe) {
+      const data = message.data
+      const eventType = data.eventType as string
+      switch (eventType) {
+        case EventTypeOrderCreated:
+          addFundsSettings?.onOrderCreated?.(data)
+          break
+        case EventTypeOrderSuccessful:
+          addFundsSettings?.onOrderSuccessful?.(data)
+          break
+        case EventTypeOrderFailed:
+          addFundsSettings?.onOrderFailed?.(data)
+          break
+      }
+    }
+  }
+
+  const link = getTransakLink(addFundsSettings)
+
+  return (
+    <div
+      className="flex items-center w-full px-4 pb-4 h-full"
+      style={{
+        height: '600px',
+        paddingTop: HEADER_HEIGHT
+      }}
+    >
+      <iframe className="w-full h-full border-0" id={IframeId} src={link} />
+    </div>
+  )
+}

package/src/views/CheckoutSelection/component/OrderSummaryItem.tsx

@@ -0,0 +1,82 @@
+import { formatDisplay } from '@0xsequence/connect'
+import { Card, Image, Text, Skeleton, TokenImage, NetworkImage } from '@0xsequence/design-system'
+import { useGetTokenMetadata, useGetContractInfo } from '@0xsequence/react-hooks'
+import { formatUnits } from 'viem'
+
+interface OrderSummaryItem {
+  contractAddress: string
+  tokenId: string
+  quantityRaw: string
+  chainId: number
+}
+
+export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainId }: OrderSummaryItem) => {
+  const { data: tokenMetadata, isPending: isPendingTokenMetadata } = useGetTokenMetadata({
+    chainID: String(chainId),
+    contractAddress,
+    tokenIDs: [tokenId]
+  })
+  const { data: contractInfo, isPending: isPendingContractInfo } = useGetContractInfo({
+    chainID: String(chainId),
+    contractAddress
+  })
+  const isPending = isPendingTokenMetadata || isPendingContractInfo
+
+  if (isPending) {
+    return <OrderSummarySkeleton />
+  }
+
+  const { name = 'unknown', image, decimals = 0 } = tokenMetadata?.[0] ?? {}
+
+  const { logoURI: collectionLogoURI, name: collectionName = 'Unknown Collection' } = contractInfo || {}
+
+  const balanceFormatted = formatUnits(BigInt(quantityRaw), decimals)
+
+  return (
+    <Card className="flex flex-row items-start justify-between">
+      <div className="flex flex-row items-center justify-center gap-2">
+        <div className="flex aspect-square h-full justify-center items-center" style={{ width: '80px' }}>
+          <Image className="rounded-xl" src={image} style={{ maxWidth: '80px', height: '80px', objectFit: 'cover' }} />
+        </div>
+        <div className="flex flex-col items-start justify-center gap-2">
+          <div className="flex gap-1 items-center">
+            <TokenImage src={collectionLogoURI} size="xs" />
+            <Text className="ml-1" variant="small" color="secondary" fontWeight="bold">
+              {collectionName}
+            </Text>
+            <NetworkImage chainId={chainId} size="xs" />
+          </div>
+          <div
+            className="flex flex-col items-start justify-center"
+            style={{
+              width: '180px'
+            }}
+          >
+            <Text variant="normal" color="primary">
+              {name}
+            </Text>
+            <Text variant="normal" color="muted">{`#${tokenId}`}</Text>
+          </div>
+        </div>
+      </div>
+      <div className="h-full">
+        <Text variant="small" color="muted" fontWeight="bold">{`x${formatDisplay(balanceFormatted)}`}</Text>
+      </div>
+    </Card>
+  )
+}
+
+export const OrderSummarySkeleton = () => {
+  return (
+    <Card className="flex flex-row items-start justify-between">
+      <div className="flex flex-row items-center justify-center gap-2">
+        <Skeleton style={{ width: '80px', height: '80px' }} />
+        <div className="flex flex-col items-start justify-center gap-2">
+          <Skeleton style={{ width: '100px', height: '14px' }} />
+          <Skeleton style={{ width: '180px', height: '34px' }} />
+        </div>
+      </div>
+      <Skeleton style={{ width: '14px', height: '14px' }} />
+    </Card>
+  )
+}

package/src/views/CheckoutSelection/index.tsx

@@ -0,0 +1,207 @@
+import { ContractVerificationStatus, getNativeTokenInfoByChainId, compareAddress, formatDisplay } from '@0xsequence/connect'
+import {
+  Button,
+  ChevronRightIcon,
+  Divider,
+  HelpIcon,
+  Text,
+  Tooltip,
+  PaymentsIcon,
+  Skeleton,
+  TokenImage
+} from '@0xsequence/design-system'
+import { useGetTokenBalancesSummary, useGetContractInfo } from '@0xsequence/react-hooks'
+import { zeroAddress, formatUnits } from 'viem'
+import { useAccount, useConfig } from 'wagmi'
+
+import { HEADER_HEIGHT } from '../../constants'
+import { useNavigation, useCheckoutModal } from '../../hooks'
+
+import { OrderSummaryItem } from './component/OrderSummaryItem'
+
+export const CheckoutSelection = () => {
+  const { chains } = useConfig()
+  const { setNavigation } = useNavigation()
+  const { closeCheckout, settings } = useCheckoutModal()
+  const { address: accountAddress } = useAccount()
+
+  const cryptoCheckoutSettings = settings?.cryptoCheckout
+  const creditCardCheckoutSettings = settings?.creditCardCheckout
+  const displayCreditCardCheckout = !!creditCardCheckoutSettings
+  const displayCryptoCheckout = !!cryptoCheckoutSettings
+
+  const { data: contractInfoData, isLoading: isPendingContractInfo } = useGetContractInfo({
+    chainID: String(cryptoCheckoutSettings?.chainId || 1),
+    contractAddress: cryptoCheckoutSettings?.coinQuantity?.contractAddress || ''
+  })
+
+  const { data: balancesData, isPending: isPendingBalances } = useGetTokenBalancesSummary({
+    chainIds: [cryptoCheckoutSettings?.chainId || 1],
+    filter: {
+      accountAddresses: accountAddress ? [accountAddress] : [],
+      contractStatus: ContractVerificationStatus.ALL,
+      omitNativeBalances: false
+    }
+  })
+
+  const isPending = (isPendingContractInfo || isPendingBalances) && cryptoCheckoutSettings
+
+  const isNativeToken = compareAddress(cryptoCheckoutSettings?.coinQuantity?.contractAddress || '', zeroAddress)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(cryptoCheckoutSettings?.chainId || 1, chains)
+
+  const coinDecimals = isNativeToken ? nativeTokenInfo.decimals : contractInfoData?.decimals || 0
+  const coinSymbol = isNativeToken ? nativeTokenInfo.symbol : contractInfoData?.symbol || 'COIN'
+  const coinImageUrl = isNativeToken ? nativeTokenInfo.logoURI : contractInfoData?.logoURI || ''
+  const coinBalance = balancesData?.find(balance =>
+    compareAddress(balance.contractAddress, cryptoCheckoutSettings?.coinQuantity?.contractAddress || '')
+  )
+  const userBalanceRaw = coinBalance ? coinBalance.balance : '0'
+  const requestedAmountRaw = cryptoCheckoutSettings?.coinQuantity?.amountRequiredRaw || '0'
+  const userBalance = formatUnits(BigInt(userBalanceRaw), coinDecimals)
+  const requestAmount = formatUnits(BigInt(requestedAmountRaw), coinDecimals)
+  const isInsufficientBalance = BigInt(userBalanceRaw) < BigInt(requestedAmountRaw)
+
+  const orderSummaryItems = settings?.orderSummaryItems || []
+
+  const chainId = settings?.cryptoCheckout?.chainId || settings?.creditCardCheckout?.chainId || 1
+
+  const triggerSardineTransaction = async () => {
+    console.log('trigger sardine transaction')
+
+    if (settings?.creditCardCheckout) {
+      setNavigation({
+        location: 'transaction-pending',
+        params: {
+          creditCardCheckout: settings.creditCardCheckout
+        }
+      })
+    }
+  }
+
+  const onClickPayWithCard = () => {
+    if (settings?.creditCardCheckout) {
+      triggerSardineTransaction()
+    } else {
+      setNavigation({
+        location: 'transaction-form'
+      })
+    }
+  }
+
+  const onClickPayWithCrypto = () => {
+    console.log('trigger transaction')
+    settings?.cryptoCheckout?.triggerTransaction?.()
+    closeCheckout()
+  }
+
+  return (
+    <div
+      className="flex px-5 pb-5 flex-col gap-3"
+      style={{
+        marginTop: HEADER_HEIGHT
+      }}
+    >
+      {orderSummaryItems.length > 0 && (
+        <>
+          <div className="flex flex-row gap-2 items-center">
+            <Text variant="normal" color="muted">
+              Order summary
+            </Text>
+            <Tooltip
+              vOffset={-2}
+              side="bottom"
+              message={
+                <>
+                  Please note that NFTs are digital assets
+                  <br /> ,and as such, cannot be delivered physically.
+                </>
+              }
+            >
+              <div className="w-5 h-5">
+                <HelpIcon className="text-secondary" />
+              </div>
+            </Tooltip>
+          </div>
+          <div className="flex flex-col gap-2">
+            {orderSummaryItems.map((orderSummaryItem, index) => {
+              return <OrderSummaryItem key={index} {...orderSummaryItem} chainId={chainId} />
+            })}
+          </div>
+          <div className="mt-2">
+            <Divider
+              className="text-background-secondary"
+              style={{
+                margin: '0px'
+              }}
+            />
+          </div>
+        </>
+      )}
+      {displayCryptoCheckout && (
+        <div className="flex justify-between items-center">
+          <Text variant="normal" color="muted">
+            Total
+          </Text>
+          {isPending ? (
+            <Skeleton style={{ width: '100px', height: '17px' }} />
+          ) : (
+            <div className="flex flex-row gap-1 items-center">
+              <TokenImage src={coinImageUrl} size="xs" />
+              <Text variant="normal" color="primary">
+                {`${formatDisplay(requestAmount)} ${coinSymbol}`}
+              </Text>
+            </div>
+          )}
+        </div>
+      )}
+      <div className="flex flex-col items-center justify-center gap-2">
+        {displayCreditCardCheckout && (
+          <Button
+            className="w-full h-14 rounded-xl"
+            leftIcon={PaymentsIcon}
+            variant="primary"
+            label="Pay with credit card"
+            rightIcon={ChevronRightIcon}
+            onClick={onClickPayWithCard}
+          />
+        )}
+        {displayCryptoCheckout && !isInsufficientBalance && !isPending && (
+          <Button
+            className="w-full h-14 rounded-xl"
+            leftIcon={() => <TokenImage src={coinImageUrl} size="sm" />}
+            variant="primary"
+            label={`Pay with ${coinSymbol}`}
+            rightIcon={ChevronRightIcon}
+            onClick={onClickPayWithCrypto}
+          />
+        )}
+        {displayCryptoCheckout && (isInsufficientBalance || isPending) && (
+          <Button
+            className="w-full"
+            shape="square"
+            variant="glass"
+            label={
+              <div className="flex items-center justify-center gap-2">
+                <TokenImage src={coinImageUrl} size="sm" />
+                <Text>Insufficient ${coinSymbol}</Text>
+              </div>
+            }
+            onClick={onClickPayWithCrypto}
+            disabled
+          />
+        )}
+      </div>
+      {displayCryptoCheckout && (
+        <div className="flex w-full justify-end">
+          {isPending ? (
+            <Skeleton style={{ width: '102px', height: '14px' }} />
+          ) : (
+            <Text variant="small" fontWeight="bold" color="muted">
+              Balance: {`${formatDisplay(userBalance)} ${coinSymbol}`}
+            </Text>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/PaymentSelection/Footer.tsx

@@ -0,0 +1,39 @@
+import { Text } from '@0xsequence/design-system'
+
+import { useSelectPaymentModal } from '../../hooks'
+
+export const Footer = () => {
+  const { selectPaymentSettings } = useSelectPaymentModal()
+
+  return (
+    <div className="flex pb-6 pt-5 mt-1 w-full justify-center items-center flex-col">
+      {selectPaymentSettings?.copyrightText && (
+        <Text color="muted" variant="normal" fontWeight="bold">
+          {selectPaymentSettings.copyrightText}
+        </Text>
+      )}
+      <div className="flex gap-4 justify-center items-center">
+        <a
+          className="no-underline cursor-pointer"
+          href="https://support.sequence.xyz/en/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <Text color="muted" variant="normal" fontWeight="bold">
+            Help
+          </Text>
+        </a>
+        <a className="no-underline cursor-pointer" href="https://sequence.xyz/privacy" rel="noopener noreferrer" target="_blank">
+          <Text color="muted" variant="normal" fontWeight="bold">
+            Privacy Policy
+          </Text>
+        </a>
+        <a className="no-underline cursor-pointer" href="https://sequence.xyz/terms" rel="noopener noreferrer" target="_blank">
+          <Text color="muted" variant="normal" fontWeight="bold">
+            Terms of Service
+          </Text>
+        </a>
+      </div>
+    </div>
+  )
+}

package/src/views/PaymentSelection/OrderSummary/Price.tsx

@@ -0,0 +1,66 @@
+import { Spinner, Text, TokenImage } from '@0xsequence/design-system'
+import { findSupportedNetwork } from '@0xsequence/network'
+import { useGetCoinPrices, useGetContractInfo } from '@0xsequence/react-hooks'
+import { formatUnits } from 'viem'
+
+import { useSelectPaymentModal } from '../../../hooks'
+
+export const Price = () => {
+  const { selectPaymentSettings } = useSelectPaymentModal()
+  const price = selectPaymentSettings!.price
+  const chain = selectPaymentSettings!.chain
+  const network = findSupportedNetwork(chain)
+  const chainId = network?.chainId || 137
+  const currencyAddress = selectPaymentSettings!.currencyAddress
+  const { data: currencyInfo, isLoading: isLoadingCurrencyInfo } = useGetContractInfo({
+    chainID: String(chainId),
+    contractAddress: currencyAddress
+  })
+  const fullPrice = BigInt(price)
+  const { data: coinPricesData, isLoading: isLoadingCoinPrice } = useGetCoinPrices([
+    {
+      chainId,
+      contractAddress: currencyAddress
+    }
+  ])
+
+  const isLoading = isLoadingCurrencyInfo || isLoadingCoinPrice
+
+  if (isLoading) {
+    return (
+      <div className="flex my-2 px-6 justify-center items-center w-full h-12">
+        <Spinner />
+      </div>
+    )
+  }
+
+  const tokenLogo = currencyInfo?.logoURI
+  const tokenSymbol = currencyInfo?.symbol
+  const tokenDecimals = currencyInfo?.decimals
+  const formattedPrice = formatUnits(fullPrice, tokenDecimals || 0)
+  const fiatConversionRate = coinPricesData?.[0].price?.value || 0
+
+  const priceFiat = fiatConversionRate * Number(formattedPrice)
+  const priceFiatFormatted = `~${Number(priceFiat).toFixed(2)} USD`
+
+  return (
+    <div className="flex px-6 justify-between items-center w-full h-12">
+      <div>
+        <Text variant="small" color="muted" fontWeight="medium">
+          Price
+        </Text>
+      </div>
+      <div className="flex flex-col justify-between items-end">
+        <div className="flex gap-2 items-center">
+          <TokenImage size="sm" src={tokenLogo} />
+          <Text variant="large" fontWeight="bold" color="primary">{`${formattedPrice} ${tokenSymbol}`}</Text>
+        </div>
+        <div>
+          <Text variant="normal" fontWeight="medium" color="muted">
+            {priceFiatFormatted}
+          </Text>
+        </div>
+      </div>
+    </div>
+  )
+}