transfer funds modal

packages/checkout/src/contexts/SelectPaymentModal.ts

@@ -28,9 +28,15 @@ export interface PayWithCreditCardSettings {
   onError?: (error: Error) => void
 }
 
+export interface OtherOptionsSettings {
+  enableTransferFunds?: boolean
+  enableFiatOnRamp?: boolean
+}
+
 export interface SelectPaymentSettings {
   payWithCrypto?: PayWithCryptoSettings
   payWithCreditCard?: PayWithCreditCardSettings
+  otherOptions?: OtherOptionsSettings
 }
 
 type SelectPaymentModalContext = {

packages/checkout/src/hooks/useSelectPaymentModal.ts

@@ -22,6 +22,8 @@ export interface SaleContractSettings {
   currencyAddress?: string
   disablePayWithCrypto?: boolean
   disablePayWithCreditCard?: boolean
+  disableTransferFunds?: boolean
+  disableFiatOnRamp?: boolean
   isDev?: boolean,
 }
 
@@ -33,6 +35,8 @@ export const getSaleContractConfig = ({
   currencyAddress = ethers.ZeroAddress,
   disablePayWithCrypto = false,
   disablePayWithCreditCard = false,
+  disableTransferFunds = false,
+  disableFiatOnRamp = false,
   tokenId,
   collectionAddress,
   nftQuantity,
@@ -87,7 +91,11 @@ export const getSaleContractConfig = ({
         nftDecimals,
         isDev
       } 
-    } : {})  
+    } : {}),
+    otherOptions: {
+      enableFiatOnRamp: !disableTransferFunds,
+      enableTransferFunds: !disableTransferFunds
+    },
   })
 }
 

packages/checkout/src/shared/components/KitCheckoutProvider.tsx

@@ -266,6 +266,7 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
                         onClose={() => setOpenTransferFundsModal(false)}
                       >
                         <Box id="sequence-kit-transfer-funds-modal">
+                          <NavigationHeader primaryText="Receive" />
                           <TransferToWallet />
                         </Box>
                       </Modal>

packages/checkout/src/views/PaymentSelection/FiatOnRamp.tsx

@@ -0,0 +1,44 @@
+import { Box, Button, Card, Text, useMediaQuery } from '@0xsequence/design-system'
+import { getCardHeight } from '../../utils/sizing'
+
+interface FiatOnRampProps {
+  disableButtons: boolean
+}
+
+export const FiatOnRamp = ({
+  disableButtons
+}: FiatOnRampProps) => {
+  const isMobile = useMediaQuery('isMobile')
+  const onClickPurchase = () => {}
+
+  return (
+    <Card
+      width="full"
+      flexDirection={isMobile ? 'column' : 'row'}
+      alignItems="center"
+      justifyContent="space-between"
+      gap={isMobile ? '2' : '0'}
+      style={{
+        minHeight: getCardHeight(isMobile)
+      }}
+    >
+      <Box justifyContent={isMobile ? 'center' : 'flex-start'}>
+        <Text color="text100">Purchase Crypto</Text>
+      </Box>
+      <Box
+        flexDirection="column"
+        gap="2"
+        alignItems={isMobile ? 'center' : 'flex-start'}
+        style={{ ...(isMobile ? { width: '200px' } : {}) }}
+      >
+        <Button
+          disabled={disableButtons}
+          label="Purchase"
+          onClick={onClickPurchase}
+          variant="primary"
+          shape="square"
+        />
+      </Box>
+    </Card>
+  )
+}

packages/checkout/src/views/PaymentSelection/TransferFunds.tsx

@@ -0,0 +1,57 @@
+import { Box,Button, Card, Text, useMediaQuery } from '@0xsequence/design-system'
+import { useAccount } from 'wagmi'
+
+import { getCardHeight } from '../../utils/sizing'
+import { useTransferFundsModal } from '../../hooks'
+
+interface TransferFundsProps {
+  disableButtons: boolean
+}
+
+export const TransferFunds = ({
+  disableButtons
+}: TransferFundsProps) => {
+  const isMobile = useMediaQuery('isMobile')
+  const { openTransferFundsModal } = useTransferFundsModal()
+  const { address: userAddress } = useAccount()
+
+  const onClickTransfer = () => {
+    if (!userAddress) {
+      return
+    }
+    openTransferFundsModal({
+      walletAddress: userAddress
+    })
+  }
+
+  return (
+    <Card
+      width="full"
+      flexDirection={isMobile ? 'column' : 'row'}
+      alignItems="center"
+      justifyContent="space-between"
+      gap={isMobile ? '2' : '0'}
+      style={{
+        minHeight: getCardHeight(isMobile)
+      }}
+    >
+      <Box justifyContent={isMobile ? 'center' : 'flex-start'}>
+        <Text color="text100">Transfer Funds to Wallet</Text>
+      </Box>
+      <Box
+        flexDirection="column"
+        gap="2"
+        alignItems={isMobile ? 'center' : 'flex-start'}
+        style={{ ...(isMobile ? { width: '200px' } : {}) }}
+      >
+        <Button
+          disabled={disableButtons}
+          label="Transfer"
+          onClick={onClickTransfer}
+          variant="primary"
+          shape="square"
+        />
+      </Box>
+    </Card>
+  )
+}

packages/checkout/src/views/PaymentSelection/index.tsx

@@ -3,6 +3,8 @@ import { Box, Text } from '@0xsequence/design-system'
 
 import { PayWithCrypto } from './PayWithCrypto/index'
 import { PayWithCreditCard } from './PayWithCreditCard'
+import { TransferFunds } from './TransferFunds'
+import { FiatOnRamp } from './FiatOnRamp'
 
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
 import { HEADER_HEIGHT } from '../../constants'
@@ -26,10 +28,16 @@ export const PaymentSelectionHeader = () => {
 export const PaymentSelectionContent = () => {
   const { selectPaymentSettings = {} } = useSelectPaymentModal()
 
-  const { payWithCrypto, payWithCreditCard } = selectPaymentSettings
+  const { payWithCrypto, payWithCreditCard, otherOptions = {} } = selectPaymentSettings
   const [disableButtons, setDisableButtons] = useState(false)
 
-  const noPaymentOptionFound = !payWithCrypto && !payWithCreditCard
+  const enableTransferFunds = otherOptions?.enableTransferFunds || false
+  const enableFiatOnRamp = otherOptions?.enableFiatOnRamp || false
+
+  const noPaymentOptionFound = !payWithCrypto &&
+    !payWithCreditCard &&
+    !enableTransferFunds &&
+    !enableFiatOnRamp
 
   return (
     <Box
@@ -55,6 +63,16 @@ export const PaymentSelectionContent = () => {
           setDisableButtons={setDisableButtons}
         />
       )}
+      {enableTransferFunds && (
+        <TransferFunds
+          disableButtons={disableButtons}
+        />
+      )}
+      {enableFiatOnRamp && (
+        <FiatOnRamp
+          disableButtons={disableButtons}
+        />
+      )}
       {noPaymentOptionFound && (
         <Box
           width="full"

packages/checkout/src/views/TransferToWallet/CopyButton.tsx

@@ -0,0 +1,37 @@
+import { Button, CopyIcon, CheckmarkIcon } from '@0xsequence/design-system'
+import { useEffect, useState, ComponentProps } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
+type ButtonProps = ComponentProps<typeof Button>
+
+interface CopyButtonProps extends ButtonProps {
+  text: string
+  inline?: boolean
+}
+
+export const CopyButton = (props: CopyButtonProps) => {
+  const { text, size = 'xs', inline = false, ...rest } = props
+  const [isCopied, setCopy] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setCopy(false)
+      }, 4000)
+    }
+  }, [isCopied])
+
+  const handleCopy = () => {
+    setCopy(true)
+  }
+
+  return (
+    <CopyToClipboard text={text} onCopy={handleCopy}>
+      {inline ? (
+        <Button size={size} variant="text" leftIcon={isCopied ? CheckmarkIcon : CopyIcon} />
+      ) : (
+        <Button size={size} leftIcon={isCopied ? CheckmarkIcon : CopyIcon} label={isCopied ? "Copied" : "Copy"} {...rest} />
+      )}
+    </CopyToClipboard>
+  )
+}

packages/checkout/src/views/TransferToWallet/QRCode.tsx

@@ -0,0 +1,25 @@
+import { Box, Skeleton } from '@0xsequence/design-system'
+import ReactQRCode from 'qrcode.react'
+
+import { CopyButton } from './CopyButton'
+
+interface QRCodeProps {
+  value: string | undefined
+}
+
+export const QRCode = (props: QRCodeProps) => {
+  const { value } = props
+
+  return (
+    <Box alignItems="center" flexDirection="column" gap="4">
+      {value ? (
+        <Box background="white" padding="4" borderRadius="sm" style={{ width: 232, height: 232 }}>
+          <ReactQRCode value={value} size={200} bgColor="white" fgColor="black" data-id="qr-code" />
+        </Box>
+      ) : (
+        <Skeleton style={{ width: 232, height: 232 }} />
+      )}
+      <CopyButton text={value || ''} disabled={!value} />
+    </Box>
+  )
+}

packages/checkout/src/views/TransferToWallet/index.tsx

@@ -1,19 +1,42 @@
-import { Box } from '@0xsequence/design-system'
+import { Box, Text } from '@0xsequence/design-system'
+import { useAccount } from 'wagmi'
+
 import { HEADER_HEIGHT } from '../../constants'
+import { QRCode } from './QRCode'
+import { useTransferFundsModal } from '../../hooks'
 
 export const TransferToWallet = () => {
+  const { address: userAddress } = useAccount()
+  const { transferFundsSettings } = useTransferFundsModal()
+
+  const address = transferFundsSettings?.walletAddress || userAddress || ''
+
   return (
     <Box
       flexDirection="column"
       gap='2'
-      alignItems="flex-start"
+      alignItems="center"
+      justifyContent="center"
       width="full"
       paddingX="4"
       paddingBottom="4"
       height="full"
-      style={{ height: '600px', paddingTop: HEADER_HEIGHT }}
+      style={{ paddingTop: HEADER_HEIGHT }}
     >
-      transfer to wallet content
+      <Box flexDirection="column" alignItems="center" paddingX="4" paddingBottom="4" minHeight="full">
+        <Box flexDirection="column" placeItems="center" width="full">
+          <Text as="p" variant="normal" color="text50" textAlign="center">
+            Share your wallet address to receive coins
+          </Text>
+            <Box marginY="4">
+              <QRCode value={address} data-id="receiveQR" />
+            </Box>
+
+            <Text as="div" width="full" variant="normal" color="text50" textAlign="center" data-id="receiveAddress">
+              {address}
+            </Text>
+        </Box>
+      </Box>
     </Box>
   )
 }