add transak flow

0xsequence · May 23, 2024 · 5a75a45 · 5a75a45
1 parent 97eab28
commit 5a75a45
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 11 deletions.
diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
@@ -24,7 +24,7 @@ import {
   getModalPositionCss,
   useStorage
 } from '@0xsequence/kit'
-import { useCheckoutModal } from '@0xsequence/kit-checkout'
+import { useCheckoutModal, useAddFundsModal } from '@0xsequence/kit-checkout'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { allNetworks } from '@0xsequence/network'
 import { ethers } from 'ethers'
@@ -61,6 +61,7 @@ export const Homepage = () => {
   const { setOpenConnectModal } = useOpenConnectModal()
   const { setOpenWalletModal } = useOpenWalletModal()
   const { triggerCheckout } = useCheckoutModal()
+  const { triggerAddFunds } = useAddFundsModal()
   const { disconnect } = useDisconnect()
   const { data: walletClient } = useWalletClient()
   const { switchChain } = useSwitchChain()
@@ -372,6 +373,12 @@ export const Homepage = () => {
     }
   }
 
+  const onClickAddFunds = () => {
+    triggerAddFunds({
+      walletAddress: address || '',
+    })
+  }
+
   const SwitchThemeButton = () => {
     return <IconButton onClick={onClickChangeTheme} icon={theme === 'dark' ? SunIcon : MoonIcon} />
   }
@@ -461,7 +468,11 @@ export const Homepage = () => {
                   </Text>
                 </Card>
               )}
-
+              <ClickableCard
+                title="Add Funds"
+                description="Buy Cryptocurrency with a Credit Card"
+                onClick={() => onClickAddFunds()}
+              />
               <ClickableCard
                 title="Mint an NFT"
                 description="Test minting an NFT to your wallet"

diff --git a/packages/checkout/src/contexts/AddFundsModal.ts b/packages/checkout/src/contexts/AddFundsModal.ts
@@ -1,10 +1,10 @@
-import { Theme } from '@0xsequence/kit'
+import { Hex } from 'viem'
 
 import { createGenericContext } from './genericContext'
 
 export interface AddFundsSettings {
-  walletAddress: string,
-  fiatCurrency: string,
+  walletAddress: string | Hex,
+  fiatCurrency?: string,
   defaultFiatAmount?: string,
   defaultCryptoCurrency?: string,
   networks?: string

diff --git a/packages/checkout/src/index.ts b/packages/checkout/src/index.ts
@@ -3,5 +3,10 @@ export { KitCheckoutProvider } from './shared/components/KitCheckoutProvider'
 
 // Hooks
 export { useCheckoutModal } from './hooks/useCheckoutModal'
+export { useAddFundsModal } from './hooks/useAddFundsModal'
 
 export { type CheckoutSettings } from './contexts/CheckoutModal'
+export { type AddFundsSettings } from './contexts/AddFundsModal'
+
+// utils
+export { fetchTransakSupportedCountries } from './utils/transak'
diff --git a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
@@ -14,7 +14,13 @@ import {
   AddFundsSettings
 } from '../../contexts'
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
-import { PendingTransaction, TransactionError, TransactionSuccess, CheckoutSelection } from '../../views'
+import {
+  PendingTransaction,
+  TransactionError,
+  TransactionSuccess,
+  CheckoutSelection,
+  AddFundsContent,
+} from '../../views'
 
 import '@0xsequence/design-system/styles.css'
 
@@ -107,7 +113,7 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
     const { location } = navigation
     switch (location) {
       default:
-        return <CheckoutSelection />
+        return <AddFundsContent />
     }
   }
 
@@ -167,7 +173,7 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
                     }}
                     scroll={false}
                     backdropColor="backgroundBackdrop"
-                    onClose={() => setOpenCheckoutModal(false)}
+                    onClose={() => setOpenAddFundsModal(false)}
                   >
                     <Box id="sequence-kit-add-funds-content">
                       {getAddFundsHeader()}

diff --git a/packages/checkout/src/utils/transak.ts b/packages/checkout/src/utils/transak.ts
@@ -6,14 +6,14 @@ export const getTransakLink = (addFundsSettings: AddFundsSettings) => {
   const defaultNetworks = "ethereum,mainnet,arbitrum,optimism,polygon,polygonzkevm,zksync,base,bnb,oasys,astar,avaxcchain"
 
   interface Options {
-    [index: string]: string
+    [index: string]: string | undefined
   }
 
   const options: Options = {
     apiKey: TRANSAK_API_KEY,
     referrerDomain: window.location.origin,
     walletAddress: addFundsSettings.walletAddress,
-    fiatCurrency: addFundsSettings.fiatCurrency,
+    fiatCurrency: addFundsSettings?.fiatCurrency,
     disableWalletAddressForm: 'true',
     defaultFiatAmount: addFundsSettings?.defaultFiatAmount || '50',
     defaultCryptoCurrency: addFundsSettings?.defaultCryptoCurrency || 'USDC',

diff --git a/packages/checkout/src/views/AddFunds.tsx b/packages/checkout/src/views/AddFunds.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   Box,
 } from '@0xsequence/design-system'
@@ -15,7 +16,7 @@ export const AddFundsContent = () => {
   const link = getTransakLink(addFundsSettings)
 
   return (
-    <Box alignItems="center" width="full" height="full" paddingX="4">
+    <Box alignItems="center" width="full" paddingX="4" paddingBottom="4" height="full" style={{ height: '600px' }}>
       <Box as="iframe" width="full" height="full" borderWidth="none" src={link} />
     </Box>
   )