add funds

0xsequence · May 23, 2024 · 97eab28 · 97eab28
1 parent 242771b
commit 97eab28
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 64 deletions.
diff --git a/packages/checkout/src/contexts/AddFundsModal.ts b/packages/checkout/src/contexts/AddFundsModal.ts
@@ -0,0 +1,19 @@
+import { Theme } from '@0xsequence/kit'
+
+import { createGenericContext } from './genericContext'
+
+export interface AddFundsSettings {
+  walletAddress: string,
+  fiatCurrency: string,
+  defaultFiatAmount?: string,
+  defaultCryptoCurrency?: string,
+  networks?: string
+}
+
+type AddFundsModalContext = {
+  triggerAddFunds: (settings: AddFundsSettings) => void
+  closeAddFunds: () => void
+  addFundsSettings?: AddFundsSettings
+}
+
+export const [useAddFundsModalContext, AddFundsContextProvider] = createGenericContext<AddFundsModalContext>()
diff --git a/packages/checkout/src/contexts/CheckoutModal.ts b/packages/checkout/src/contexts/CheckoutModal.ts
@@ -38,21 +38,10 @@ export interface CheckoutSettings {
   orderSummaryItems: OrderSummaryItem[]
 }
 
-export interface AddFundsSettings {
-  walletAddress: string,
-  fiatCurrency: string,
-  defaultFiatAmount?: string,
-  defaultCryptoCurrency?: string,
-  networks?: string
-}
-
 type CheckoutModalContext = {
   triggerCheckout: (settings: CheckoutSettings) => void
   closeCheckout: () => void
-  triggerAddFunds: (settings: AddFundsSettings) => void
-  closeAddFunds: () => void
   settings?: CheckoutSettings
-  addFundsSettings?: AddFundsSettings
   theme: Theme
 }
 

diff --git a/packages/checkout/src/contexts/index.ts b/packages/checkout/src/contexts/index.ts
@@ -1,2 +1,3 @@
+export * from './AddFundsModal'
 export * from './CheckoutModal'
 export * from './Navigation'
diff --git a/packages/checkout/src/hooks/index.ts b/packages/checkout/src/hooks/index.ts
@@ -1,3 +1,4 @@
+export * from './useAddFundsModal'
 export * from './useCheckoutModal'
 export * from './useNavigation'
 export * from './useModalTheme'
diff --git a/packages/checkout/src/hooks/useAddFundsModal.ts b/packages/checkout/src/hooks/useAddFundsModal.ts
@@ -0,0 +1,7 @@
+import { useAddFundsModalContext } from '../contexts/AddFundsModal'
+
+export const useAddFundsModal = () => {
+  const { triggerAddFunds, closeAddFunds, addFundsSettings } = useAddFundsModalContext()
+
+  return { triggerAddFunds, closeAddFunds, addFundsSettings }
+}
diff --git a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
@@ -10,6 +10,7 @@ import {
   NavigationContextProvider,
   CheckoutModalContextProvider,
   CheckoutSettings,
+  AddFundsContextProvider,
   AddFundsSettings
 } from '../../contexts'
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
@@ -117,64 +118,69 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
   }, [openCheckoutModal, openAddFundsModal])
 
   return (
-    <CheckoutModalContextProvider
+    <AddFundsContextProvider
       value={{
-        triggerCheckout,
-        closeCheckout,
-        settings,
         triggerAddFunds,
         closeAddFunds,
         addFundsSettings,
-        theme,
       }}
     >
-      <NavigationContextProvider value={{ history, setHistory }}>
-        <div id="kit-checkout">
-          <ThemeProvider root="#kit-checkout" scope="kit" theme={theme}>
-            <AnimatePresence>
-              {openCheckoutModal && (
-                <Modal
-                  contentProps={{
-                    style: {
-                      maxWidth: '400px',
-                      height: 'auto',
-                      ...getModalPositionCss(position)
-                    }
-                  }}
-                  scroll={false}
-                  backdropColor="backgroundBackdrop"
-                  onClose={() => setOpenCheckoutModal(false)}
-                >
-                  <Box id="sequence-kit-checkout-content">
-                    {getCheckoutHeader()}
-                    {getCheckoutContent()}
-                  </Box>
-                </Modal>
-              )}
-              {openAddFundsModal && (
-                <Modal
-                  contentProps={{
-                    style: {
-                      maxWidth: '400px',
-                      height: 'auto',
-                      ...getModalPositionCss(position)
-                    }
-                  }}
-                  scroll={false}
-                  backdropColor="backgroundBackdrop"
-                  onClose={() => setOpenCheckoutModal(false)}
-                >
-                  <Box id="sequence-kit-add-funds-content">
-                    {getAddFundsHeader()}
-                    {getAddFundsContent()}
-                  </Box>
-                </Modal>
-              )}
-            </AnimatePresence>
-          </ThemeProvider>
-        </div>
-        {children}
-      </NavigationContextProvider>
-    </CheckoutModalContextProvider>
+      <CheckoutModalContextProvider
+        value={{
+          triggerCheckout,
+          closeCheckout,
+          settings,
+          theme,
+        }}
+      >
+        <NavigationContextProvider value={{ history, setHistory }}>
+          <div id="kit-checkout">
+            <ThemeProvider root="#kit-checkout" scope="kit" theme={theme}>
+              <AnimatePresence>
+                {openCheckoutModal && (
+                  <Modal
+                    contentProps={{
+                      style: {
+                        maxWidth: '400px',
+                        height: 'auto',
+                        ...getModalPositionCss(position)
+                      }
+                    }}
+                    scroll={false}
+                    backdropColor="backgroundBackdrop"
+                    onClose={() => setOpenCheckoutModal(false)}
+                  >
+                    <Box id="sequence-kit-checkout-content">
+                      {getCheckoutHeader()}
+                      {getCheckoutContent()}
+                    </Box>
+                  </Modal>
+                )}
+                {openAddFundsModal && (
+                  <Modal
+                    contentProps={{
+                      style: {
+                        maxWidth: '400px',
+                        height: 'auto',
+                        ...getModalPositionCss(position)
+                      }
+                    }}
+                    scroll={false}
+                    backdropColor="backgroundBackdrop"
+                    onClose={() => setOpenCheckoutModal(false)}
+                  >
+                    <Box id="sequence-kit-add-funds-content">
+                      {getAddFundsHeader()}
+                      {getAddFundsContent()}
+                    </Box>
+                  </Modal>
+                )}
+              </AnimatePresence>
+            </ThemeProvider>
+          </div>
+          {children}
+        </NavigationContextProvider>
+      </CheckoutModalContextProvider>
+    </AddFundsContextProvider>
   )
 }
diff --git a/packages/checkout/src/views/AddFunds.tsx b/packages/checkout/src/views/AddFunds.tsx
@@ -0,0 +1,22 @@
+import {
+  Box,
+} from '@0xsequence/design-system'
+
+import { useAddFundsModal } from '../hooks'
+import { getTransakLink } from '../utils/transak'
+
+export const AddFundsContent = () => {
+  const { addFundsSettings } = useAddFundsModal()
+
+  if (!addFundsSettings) {
+    return
+  }
+
+  const link = getTransakLink(addFundsSettings)
+
+  return (
+    <Box alignItems="center" width="full" height="full" paddingX="4">
+      <Box as="iframe" width="full" height="full" borderWidth="none" src={link} />
+    </Box>
+  )
+}
diff --git a/packages/checkout/src/views/index.ts b/packages/checkout/src/views/index.ts
@@ -2,3 +2,4 @@ export * from './PendingTransaction'
 export * from './TransactionSuccess'
 export * from './TransactionError'
 export * from './CheckoutSelection'
+export * from './AddFunds'