@0xsequence/checkout 0.0.0-20250314205219

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

@@ -0,0 +1,113 @@
+import { formatDisplay, NetworkBadge, CollectibleTileImage } from '@0xsequence/connect'
+import { Spinner, NetworkImage, Text } from '@0xsequence/design-system'
+import { findSupportedNetwork } from '@0xsequence/network'
+import { useGetTokenMetadata, useGetContractInfo, useGetCoinPrices } from '@0xsequence/react-hooks'
+import { formatUnits } from 'viem'
+
+import { useSelectPaymentModal } from '../../../hooks'
+
+export const OrderSummary = () => {
+  const { selectPaymentSettings } = useSelectPaymentModal()
+  const chain = selectPaymentSettings!.chain
+  const network = findSupportedNetwork(chain)
+  const chainId = network?.chainId || 137
+  const collectionAddress = selectPaymentSettings!.collectionAddress
+  const tokenIds = selectPaymentSettings?.collectibles.map(c => c.tokenId) || []
+  const { data: tokenMetadatas, isLoading: isLoadingTokenMetadatas } = useGetTokenMetadata({
+    chainID: String(chainId),
+    contractAddress: collectionAddress,
+    tokenIDs: tokenIds
+  })
+  const { data: dataCollectionInfo, isLoading: isLoadingCollectionInfo } = useGetContractInfo({
+    chainID: String(chainId),
+    contractAddress: selectPaymentSettings!.collectionAddress
+  })
+  const { data: dataCurrencyInfo, isLoading: isLoadingCurrencyInfo } = useGetContractInfo({
+    chainID: String(chainId),
+    contractAddress: selectPaymentSettings!.currencyAddress
+  })
+  const { data: dataCoinPrices, isLoading: isLoadingCoinPrices } = useGetCoinPrices([
+    {
+      chainId,
+      contractAddress: selectPaymentSettings!.currencyAddress
+    }
+  ])
+
+  const isLoading = isLoadingTokenMetadatas || isLoadingCollectionInfo || isLoadingCurrencyInfo || isLoadingCoinPrices
+
+  if (isLoading) {
+    return (
+      <div className="flex mb-2 gap-3" style={{ height: '72px' }}>
+        <Spinner />
+      </div>
+    )
+  }
+
+  const formattedPrice = formatUnits(BigInt(selectPaymentSettings!.price), dataCurrencyInfo?.decimals || 0)
+  const displayPrice = formatDisplay(formattedPrice, {
+    disableScientificNotation: true,
+    disableCompactNotation: true,
+    significantDigits: 6
+  })
+
+  const totalQuantity =
+    selectPaymentSettings?.collectibles.reduce((accumulator, collectible) => {
+      const quantity = formatUnits(BigInt(collectible.quantity), Number(collectible.decimals || 0))
+      return accumulator + Number(quantity)
+    }, 0) || 0
+
+  const fiatExchangeRate = dataCoinPrices?.[0].price?.value || 0
+  const priceFiat = (fiatExchangeRate * Number(formattedPrice)).toFixed(2)
+
+  return (
+    <div className="flex flex-col gap-5">
+      <div>
+        <Text
+          variant="small"
+          fontWeight="bold"
+          color="primary"
+        >{`${totalQuantity} ${totalQuantity > 1 ? 'items' : 'item'}`}</Text>
+      </div>
+      <div className="flex flex-row gap-1">
+        {selectPaymentSettings!.collectibles.map(collectible => {
+          const collectibleQuantity = Number(formatUnits(BigInt(collectible.quantity), Number(collectible.decimals || 0)))
+          const tokenMetadata = tokenMetadatas?.find(tokenMetadata => tokenMetadata.tokenId === collectible.tokenId)
+
+          return (
+            <div className="flex gap-3 items-center" key={collectible.tokenId}>
+              <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'} ${collectibleQuantity > 1 ? `x${collectibleQuantity}` : ''}`}
+                </Text>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+      <div className="flex gap-1 flex-col">
+        <div className="flex flex-row gap-2 items-center">
+          <NetworkImage chainId={chainId} size="sm" />
+          <Text color="white" variant="large" fontWeight="bold">{`${displayPrice} ${dataCurrencyInfo?.symbol}`}</Text>
+        </div>
+        <div>
+          <Text color="muted" variant="normal" fontWeight="normal">
+            {`$${priceFiat} estimated total`}
+          </Text>
+        </div>
+      </div>
+      <NetworkBadge chainId={chainId} />
+    </div>
+  )
+}

package/src/views/PaymentSelection/PayWithCreditCard/PaymentProviderOption.tsx

@@ -0,0 +1,38 @@
+import { Card, cn, Text } from '@0xsequence/design-system'
+import { JSX } from 'react'
+
+interface PaymentProviderOptionProps {
+  name: string
+  onClick: () => void
+  isSelected: boolean
+  isRecommended: boolean
+  logo: JSX.Element
+}
+
+export const PaymentProviderOption = ({ name, onClick, isSelected, isRecommended, logo }: PaymentProviderOptionProps) => {
+  return (
+    <Card
+      className={cn(
+        'flex border-2 border-solid justify-between p-4 cursor-pointer',
+        isSelected ? 'bg-background-raised' : 'bg-transparent'
+      )}
+      onClick={onClick}
+    >
+      <div className="flex justify-between w-full">
+        <div className="flex justify-between items-center gap-3">
+          <div className="rounded-xl">{logo}</div>
+          <Text variant="normal" fontWeight="bold" color="secondary">
+            {name}
+          </Text>
+        </div>
+        <div className="flex flex-row justify-center items-center gap-3">
+          {isRecommended && (
+            <Text color="muted" variant="small">
+              Recommended
+            </Text>
+          )}
+        </div>
+      </div>
+    </Card>
+  )
+}

package/src/views/PaymentSelection/PayWithCreditCard/index.tsx

@@ -0,0 +1,177 @@
+import { ArrowRightIcon, Card, PaymentsIcon, Spinner, Text } from '@0xsequence/design-system'
+import { findSupportedNetwork } from '@0xsequence/network'
+import { useClearCachedBalances, useGetContractInfo } from '@0xsequence/react-hooks'
+import { useEffect, useState } from 'react'
+import { useAccount } from 'wagmi'
+
+import { SelectPaymentSettings } from '../../../contexts'
+import { CheckoutSettings } from '../../../contexts/CheckoutModal'
+import { useCheckoutModal, useSelectPaymentModal } from '../../../hooks'
+
+interface PayWithCreditCardProps {
+  settings: SelectPaymentSettings
+  disableButtons: boolean
+  skipOnCloseCallback: () => void
+}
+
+type BasePaymentProviderOptions = 'sardine' | 'transak'
+type CustomPaymentProviderOptions = 'custom'
+type PaymentProviderOptions = BasePaymentProviderOptions | CustomPaymentProviderOptions
+
+export const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallback }: PayWithCreditCardProps) => {
+  const {
+    chain,
+    currencyAddress,
+    targetContractAddress,
+    price,
+    txData,
+    collectibles,
+    collectionAddress,
+    approvedSpenderAddress,
+    onSuccess = () => {},
+    onError = () => {},
+    onClose = () => {},
+    creditCardProviders = [],
+    transakConfig,
+    supplementaryAnalyticsInfo = {}
+  } = settings
+
+  const { address: userAddress } = useAccount()
+  const { clearCachedBalances } = useClearCachedBalances()
+  const { closeSelectPaymentModal } = useSelectPaymentModal()
+  const { triggerCheckout } = useCheckoutModal()
+  const network = findSupportedNetwork(chain)
+  const chainId = network?.chainId || 137
+  const { data: currencyInfoData, isLoading: isLoadingContractInfo } = useGetContractInfo({
+    chainID: String(chainId),
+    contractAddress: currencyAddress
+  })
+  const [selectedPaymentProvider, setSelectedPaymentProvider] = useState<PaymentProviderOptions>()
+  const isLoading = isLoadingContractInfo
+
+  useEffect(() => {
+    if (selectedPaymentProvider) {
+      payWithSelectedProvider()
+    }
+  }, [selectedPaymentProvider])
+
+  const payWithSelectedProvider = () => {
+    switch (selectedPaymentProvider) {
+      case 'custom':
+        if (settings.customProviderCallback) {
+          onClickCustomProvider()
+        }
+        return
+      case 'sardine':
+      case 'transak':
+        onPurchase()
+        return
+      default:
+        return
+    }
+  }
+
+  const onClickCustomProvider = () => {
+    if (settings.customProviderCallback) {
+      closeSelectPaymentModal()
+      settings.customProviderCallback(onSuccess, onError, onClose)
+    }
+  }
+
+  const onPurchase = () => {
+    if (!userAddress || !currencyInfoData) {
+      return
+    }
+
+    const collectible = collectibles[0]
+
+    const checkoutSettings: CheckoutSettings = {
+      creditCardCheckout: {
+        onSuccess: (txHash: string) => {
+          clearCachedBalances()
+          onSuccess(txHash)
+        },
+        onError,
+        onClose,
+        chainId,
+        recipientAddress: userAddress,
+        contractAddress: targetContractAddress,
+        currencyQuantity: price,
+        currencySymbol: currencyInfoData.symbol,
+        currencyAddress,
+        currencyDecimals: String(currencyInfoData?.decimals || 0),
+        nftId: collectible.tokenId,
+        nftAddress: collectionAddress,
+        nftQuantity: collectible.quantity,
+        nftDecimals: collectible.decimals === undefined ? undefined : String(collectible.decimals),
+        provider: selectedPaymentProvider as BasePaymentProviderOptions,
+        calldata: txData,
+        transakConfig,
+        approvedSpenderAddress: approvedSpenderAddress || targetContractAddress,
+        supplementaryAnalyticsInfo
+      }
+    }
+
+    skipOnCloseCallback()
+    closeSelectPaymentModal()
+    triggerCheckout(checkoutSettings)
+  }
+
+  const Options = () => {
+    return (
+      <div className="flex flex-col justify-center items-center gap-2 w-full">
+        {/* Only 1 option will be displayed, even if multiple providers are passed */}
+        {creditCardProviders
+          .slice(0, 1)
+          .filter(provider => {
+            // cannot display transak checkout if the settings aren't provided
+            if (provider === 'transak' && !settings.transakConfig) {
+              return false
+            }
+            return true
+          })
+          .map(creditCardProvider => {
+            switch (creditCardProvider) {
+              case 'sardine':
+              case 'transak':
+              case 'custom':
+                return (
+                  <Card
+                    className="flex justify-between items-center p-4 cursor-pointer"
+                    key="sardine"
+                    onClick={() => {
+                      setSelectedPaymentProvider(creditCardProvider)
+                    }}
+                    disabled={disableButtons}
+                  >
+                    <div className="flex flex-row gap-3 items-center">
+                      <PaymentsIcon className="text-white" />
+                      <Text color="primary" variant="normal" fontWeight="bold">
+                        Pay with credit or debit card
+                      </Text>
+                    </div>
+                    <div style={{ transform: 'rotate(-45deg)' }}>
+                      <ArrowRightIcon className="text-white" />
+                    </div>
+                  </Card>
+                )
+              default:
+                return null
+            }
+          })}
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full">
+      {isLoading ? (
+        <div className="flex w-full pt-5 justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <Options />
+      )}
+    </div>
+  )
+}

package/src/views/PaymentSelection/PayWithCreditCard/providers/SardineLogo.tsx

@@ -0,0 +1,11 @@
+export const SardineLogo = () => {
+  return (
+    <svg width="42" height="42" className="rounded-xl" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect className="w-24 h-24" fill="#2D29D7" />
+      <path
+        d="M19.6675 12.2188L13.9751 17.9112C13.8567 18.0296 13.649 18.0296 13.5306 17.9112L9.72601 14.1053C9.5485 13.9291 9.45219 13.6938 9.45219 13.4448C9.45219 13.1957 9.54988 12.9604 9.72601 12.7843L9.88975 12.6206C9.90213 12.6068 9.92002 12.5999 9.93653 12.5999C9.95442 12.5999 9.97093 12.6068 9.98332 12.6192L13.5788 16.216C13.6723 16.3082 13.8333 16.3082 13.9269 16.216L17.9709 12.1706C18.0659 12.0757 18.0659 11.9188 17.9709 11.8239L13.9269 7.77847C13.8333 7.68627 13.6723 7.6849 13.5802 7.77847L4.89078 16.4651C4.82336 16.5325 4.72979 16.5504 4.64173 16.5146C4.55366 16.4775 4.5 16.3963 4.5 16.3013V7.6904C4.5 7.59546 4.55366 7.51428 4.64173 7.4785C4.72841 7.44135 4.82473 7.46061 4.89216 7.52804L7.2506 9.88648C7.42673 10.0626 7.52442 10.2979 7.52442 10.547C7.52442 10.796 7.42673 11.0327 7.2506 11.2088L7.08824 11.3712C7.06484 11.3946 7.01944 11.3946 6.99467 11.3712L5.95855 10.3351C5.91314 10.2896 5.85397 10.2896 5.81545 10.3062C5.77554 10.3227 5.73289 10.3639 5.73289 10.4286V13.5617C5.73289 13.6264 5.77554 13.6677 5.81545 13.6842C5.85397 13.6993 5.91314 13.7007 5.95855 13.6553L13.5306 6.08462C13.6434 5.97179 13.8622 5.97179 13.9751 6.08462L19.6675 11.7771C19.79 11.8982 19.79 12.0977 19.6675 12.2202V12.2188Z"
+        fill="white"
+      />
+    </svg>
+  )
+}

package/src/views/PaymentSelection/PayWithCrypto/index.tsx

@@ -0,0 +1,250 @@
+import { CryptoOption, compareAddress, ContractVerificationStatus, formatDisplay } from '@0xsequence/connect'
+import { AddIcon, Button, SubtractIcon, Text, Spinner } from '@0xsequence/design-system'
+import { findSupportedNetwork } from '@0xsequence/network'
+import { useClearCachedBalances, useGetTokenBalancesSummary, useGetContractInfo, useGetSwapPrices } from '@0xsequence/react-hooks'
+import { motion } from 'motion/react'
+import { useState, useEffect, Fragment, SetStateAction } from 'react'
+import { formatUnits } from 'viem'
+import { useAccount } from 'wagmi'
+
+import { SelectPaymentSettings } from '../../../contexts'
+
+interface PayWithCryptoProps {
+  settings: SelectPaymentSettings
+  disableButtons: boolean
+  selectedCurrency: string | undefined
+  setSelectedCurrency: React.Dispatch<SetStateAction<string | undefined>>
+  isLoading: boolean
+}
+
+const MAX_OPTIONS = 3
+
+export const PayWithCrypto = ({
+  settings,
+  disableButtons,
+  selectedCurrency,
+  setSelectedCurrency,
+  isLoading
+}: PayWithCryptoProps) => {
+  const [showMore, setShowMore] = useState(false)
+  const { enableSwapPayments = true, enableMainCurrencyPayment = true } = settings
+
+  const { chain, currencyAddress, price } = settings
+  const { address: userAddress } = useAccount()
+  const { clearCachedBalances } = useClearCachedBalances()
+  const network = findSupportedNetwork(chain)
+  const chainId = network?.chainId || 137
+
+  const { data: currencyBalanceData, isLoading: currencyBalanceIsLoading } = useGetTokenBalancesSummary({
+    chainIds: [chainId],
+    filter: {
+      accountAddresses: userAddress ? [userAddress] : [],
+      contractStatus: ContractVerificationStatus.ALL,
+      contractWhitelist: [currencyAddress],
+      omitNativeBalances: false
+    },
+    omitMetadata: true
+  })
+
+  const { data: currencyInfoData, isLoading: isLoadingCurrencyInfo } = useGetContractInfo({
+    chainID: String(chainId),
+    contractAddress: currencyAddress
+  })
+
+  const buyCurrencyAddress = settings?.currencyAddress
+
+  const { data: swapPrices = [], isLoading: swapPricesIsLoading } = useGetSwapPrices(
+    {
+      userAddress: userAddress ?? '',
+      buyCurrencyAddress,
+      chainId: chainId,
+      buyAmount: price,
+      withContractInfo: true
+    },
+    { disabled: !enableSwapPayments }
+  )
+
+  const isLoadingOptions = currencyBalanceIsLoading || isLoadingCurrencyInfo || isLoading
+
+  const swapsIsLoading = swapPricesIsLoading
+
+  interface Coin {
+    index: number
+    name: string
+    symbol: string
+    currencyAddress: string
+  }
+
+  const coins: Coin[] = [
+    ...(enableMainCurrencyPayment
+      ? [
+          {
+            index: 0,
+            name: currencyInfoData?.name || 'Unknown',
+            symbol: currencyInfoData?.symbol || '',
+            currencyAddress
+          }
+        ]
+      : []),
+    ...swapPrices.map((price, index) => {
+      return {
+        index: index + 1,
+        name: price.info?.name || 'Unknown',
+        symbol: price.info?.symbol || '',
+        currencyAddress: price.info?.address || ''
+      }
+    })
+  ]
+
+  useEffect(() => {
+    if (enableMainCurrencyPayment) {
+      setSelectedCurrency(coins[0].currencyAddress)
+    } else if (!swapPricesIsLoading) {
+      setSelectedCurrency(swapPrices?.[0]?.info?.address)
+    }
+  }, [swapPricesIsLoading])
+  const priceFormatted = formatUnits(BigInt(price), currencyInfoData?.decimals || 0)
+  const priceDisplay = formatDisplay(priceFormatted, {
+    disableScientificNotation: true,
+    disableCompactNotation: true,
+    significantDigits: 6
+  })
+
+  const balanceInfo = currencyBalanceData?.find(balanceData => compareAddress(currencyAddress, balanceData.contractAddress))
+
+  const balance: bigint = BigInt(balanceInfo?.balance || '0')
+  // let balanceFormatted = Number(formatUnits(balance, currencyInfoData?.decimals || 0))
+  // balanceFormatted = Math.trunc(Number(balanceFormatted) * 10000) / 10000
+
+  const isNotEnoughFunds: boolean = BigInt(price) > balance
+
+  useEffect(() => {
+    clearCachedBalances()
+  }, [])
+
+  const Options = () => {
+    return (
+      <div className="flex flex-col justify-center items-center gap-2 w-full">
+        {coins.map(coin => {
+          if (compareAddress(coin.currencyAddress, currencyAddress)) {
+            return (
+              <Fragment key={currencyAddress}>
+                <CryptoOption
+                  currencyName={currencyInfoData?.name || 'Unknown'}
+                  chainId={chainId}
+                  iconUrl={currencyInfoData?.logoURI}
+                  symbol={currencyInfoData?.symbol || ''}
+                  onClick={() => {
+                    setSelectedCurrency(currencyAddress)
+                  }}
+                  price={priceDisplay}
+                  disabled={disableButtons}
+                  isSelected={compareAddress(selectedCurrency || '', currencyAddress)}
+                  isInsufficientFunds={isNotEnoughFunds}
+                />
+              </Fragment>
+            )
+          } else {
+            const swapPrice = swapPrices?.find(price => compareAddress(price.info?.address || '', coin.currencyAddress))
+            const currencyInfoNotFound =
+              !swapPrice || !swapPrice.info || swapPrice?.info?.decimals === undefined || !swapPrice.balance?.balance
+
+            if (currencyInfoNotFound || !enableSwapPayments) {
+              return null
+            }
+            const swapQuotePriceFormatted = formatUnits(BigInt(swapPrice.price.price), swapPrice.info?.decimals || 18)
+            const swapQuoteAddress = swapPrice.info?.address || ''
+
+            const swapQuotePriceDisplay = formatDisplay(swapQuotePriceFormatted, {
+              disableScientificNotation: true,
+              disableCompactNotation: true,
+              significantDigits: 6
+            })
+
+            return (
+              <CryptoOption
+                key={swapQuoteAddress}
+                currencyName={swapPrice.info?.name || 'Unknown'}
+                chainId={chainId}
+                iconUrl={swapPrice.info?.logoURI}
+                symbol={swapPrice.info?.symbol || ''}
+                onClick={() => {
+                  setSelectedCurrency(swapQuoteAddress)
+                }}
+                price={swapQuotePriceDisplay}
+                disabled={disableButtons}
+                isSelected={compareAddress(selectedCurrency || '', swapQuoteAddress)}
+                isInsufficientFunds={false}
+              />
+            )
+          }
+        })}
+      </div>
+    )
+  }
+
+  const gutterHeight = 8
+  const optionHeight = 72
+  const displayedOptionsAmount = Math.min(coins.length, MAX_OPTIONS)
+  const displayedGuttersAmount = displayedOptionsAmount - 1
+  const collapsedOptionsHeight = `${optionHeight * displayedOptionsAmount + gutterHeight * displayedGuttersAmount}px`
+
+  const ShowMoreButton = () => {
+    return (
+      <div className="flex justify-center items-center w-full">
+        <Button
+          className="text-white"
+          rightIcon={() => {
+            if (showMore) {
+              return <SubtractIcon style={{ marginLeft: '-4px' }} size="xs" />
+            }
+            return <AddIcon style={{ marginLeft: '-4px' }} size="xs" />
+          }}
+          variant="ghost"
+          onClick={() => {
+            setShowMore(!showMore)
+          }}
+          label={showMore ? 'Show less' : 'Show more'}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full">
+      <div>
+        <Text variant="small" fontWeight="medium" color="white">
+          Pay with crypto
+        </Text>
+      </div>
+      <div
+        className="py-3"
+        style={{
+          marginBottom: '-12px'
+        }}
+      >
+        {isLoadingOptions ? (
+          <div className="flex w-full py-5 justify-center items-center">
+            <Spinner />
+          </div>
+        ) : (
+          <>
+            <motion.div
+              className="overflow-hidden"
+              animate={{ height: showMore ? 'auto' : collapsedOptionsHeight }}
+              transition={{ ease: 'easeOut', duration: 0.3 }}
+            >
+              <Options />
+            </motion.div>
+            {swapsIsLoading && (
+              <div className="flex justify-center items-center w-full mt-4">
+                <Spinner />
+              </div>
+            )}
+            {!swapsIsLoading && coins.length > MAX_OPTIONS && <ShowMoreButton />}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/views/PaymentSelection/TransferFunds.tsx

@@ -0,0 +1,98 @@
+import { Card, CheckmarkIcon, CopyIcon, IconButton, Text, truncateAddress } from '@0xsequence/design-system'
+import { QRCodeCanvas } from 'qrcode.react'
+import { useState, useEffect } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { useAccount } from 'wagmi'
+
+import { useSelectPaymentModal, useTransferFundsModal } from '../../hooks'
+
+export const TransferFunds = () => {
+  const { openTransferFundsModal } = useTransferFundsModal()
+  const { openSelectPaymentModal, closeSelectPaymentModal, selectPaymentSettings } = useSelectPaymentModal()
+  const { address: userAddress } = useAccount()
+  const [isCopied, setCopy] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setCopy(false)
+      }, 4000)
+    }
+  }, [isCopied])
+
+  const handleCopy = () => {
+    setCopy(true)
+  }
+
+  const onClickQrCode = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!selectPaymentSettings) {
+      return
+    }
+
+    closeSelectPaymentModal()
+
+    setTimeout(() => {
+      openTransferFundsModal({
+        walletAddress: userAddress || '',
+        onClose: () => {
+          setTimeout(() => {
+            openSelectPaymentModal(selectPaymentSettings)
+          }, 500)
+        }
+      })
+    }, 500)
+  }
+
+  return (
+    <div className="w-full">
+      <div className="mb-3">
+        <Text variant="small" fontWeight="medium" color="white">
+          Transfer funds to your connected wallet
+        </Text>
+      </div>
+      <Card className="flex cursor-pointer w-full justify-between p-4" onClick={onClickQrCode}>
+        <div className="flex flex-row gap-3 items-center">
+          <div className="bg-white p-4 rounded-sm" style={{ width: 40, height: 40 }}>
+            <QRCodeCanvas
+              value={userAddress || ''}
+              size={36}
+              bgColor="white"
+              fgColor="black"
+              data-id="qr-code"
+              style={{ position: 'relative', top: '-14px', left: '-14px' }}
+            />
+          </div>
+          <div className="flex flex-col justify-center items-start">
+            <div>
+              <Text variant="normal" fontWeight="bold" color="secondary">
+                Transfer Funds
+              </Text>
+            </div>
+            <div>
+              <Text className="text-sm" color="muted" variant="normal">
+                {truncateAddress(userAddress || '', 12, 4)}
+              </Text>
+            </div>
+          </div>
+        </div>
+        <div
+          onClick={e => {
+            e.stopPropagation()
+            e.preventDefault()
+          }}
+        >
+          <CopyToClipboard text={userAddress || ''} onCopy={handleCopy}>
+            <IconButton
+              className="text-muted"
+              variant="base"
+              size="md"
+              icon={isCopied ? () => <CheckmarkIcon size="lg" /> : () => <CopyIcon size="lg" />}
+            />
+          </CopyToClipboard>
+        </div>
+      </Card>
+    </div>
+  )
+}