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

package/src/hooks/useNavigation.ts

@@ -1,33 +0,0 @@
-import { useNavigationContext, Navigation, History } from '../contexts/Navigation'
-
-interface UseNavigation {
-  setNavigation: (navigation: Navigation) => void
-  setHistory: (history: History) => void
-  history: History
-  goBack: () => void
-  navigation: Navigation
-}
-
-export const useNavigation = (): UseNavigation => {
-  const { setHistory, history, defaultLocation } = useNavigationContext()
-
-  const setNavigation = (navigation: Navigation) => {
-    // Scroll to top of page when navigating to a new page
-    const childElement = document.getElementById('sequence-kit-wallet-content')
-    const parentElement = childElement?.parentElement
-    parentElement?.scrollTo(0, 0)
-
-    const newHistory = [...history, navigation]
-    setHistory(newHistory)
-  }
-
-  const goBack = () => {
-    const newHistory = [...history]
-    newHistory.pop()
-    setHistory(newHistory)
-  }
-
-  const navigation = history.length > 0 ? history[history.length - 1] : defaultLocation
-
-  return { setNavigation, history, setHistory, goBack, navigation }
-}

package/src/hooks/useSardineClientToken.ts

@@ -1,18 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-
-import { FetchSardineClientTokenArgs, fetchSardineClientToken } from '../api/data'
-
-export const useSardineClientToken = (args: FetchSardineClientTokenArgs, disabled?: boolean) => {
-  return useQuery({
-    queryKey: ['useSardineClientToken', args],
-    queryFn: async () => {
-      const res = await fetchSardineClientToken(args)
-
-      return res
-    },
-    retry: false,
-    staleTime: 0,
-    enabled: !disabled,
-    refetchOnWindowFocus: false
-  })
-}

package/src/hooks/useSelectPaymentModal.ts

@@ -1,7 +0,0 @@
-import { useSelectPaymentContext } from '../contexts/SelectPaymentModal'
-
-export const useSelectPaymentModal = () => {
-  const { openSelectPaymentModal, closeSelectPaymentModal, selectPaymentSettings } = useSelectPaymentContext()
-
-  return { openSelectPaymentModal, closeSelectPaymentModal, selectPaymentSettings }
-}

package/src/hooks/useSkipOnCloseCallback.ts

@@ -1,25 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-interface UseSkipOnCloseCallbackReturn {
-  skipOnCloseCallback: () => void
-}
-
-export const useSkipOnCloseCallback = (onClose: () => void): UseSkipOnCloseCallbackReturn => {
-  const skipOnCloseCallbackFlag = useRef(false)
-
-  const skipOnCloseCallback = () => {
-    skipOnCloseCallbackFlag.current = true
-  }
-
-  useEffect(() => {
-    return () => {
-      if (!skipOnCloseCallbackFlag.current) {
-        onClose()
-      }
-    }
-  }, [])
-
-  return {
-    skipOnCloseCallback
-  }
-}

package/src/hooks/useSwapModal.ts

@@ -1,7 +0,0 @@
-import { useSwapModalContext } from '../contexts/SwapModal'
-
-export const useSwapModal = () => {
-  const { openSwapModal, closeSwapModal, swapModalSettings } = useSwapModalContext()
-
-  return { openSwapModal, closeSwapModal, swapModalSettings }
-}

package/src/hooks/useTransactionStatusModal.ts

@@ -1,7 +0,0 @@
-import { useTransactionStatusContext } from '../contexts/TransactionStatusModal'
-
-export const useTransactionStatusModal = () => {
-  const { openTransactionStatusModal, closeTransactionStatusModal, transactionStatusSettings } = useTransactionStatusContext()
-
-  return { openTransactionStatusModal, closeTransactionStatusModal, transactionStatusSettings }
-}

package/src/hooks/useTransferFundsModal.ts

@@ -1,7 +0,0 @@
-import { useTransferFundsModalContext } from '../contexts/TransferFundsModal'
-
-export const useTransferFundsModal = () => {
-  const { openTransferFundsModal, closeTransferFundsModal, transferFundsSettings } = useTransferFundsModalContext()
-
-  return { openTransferFundsModal, closeTransferFundsModal, transferFundsSettings }
-}

package/src/utils/index.ts

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

package/src/utils/sardine.ts

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

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

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

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

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

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

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