Added Transak's order events and Sandbox mode to OnRamp settings (#230)

* Added Transak's order events and Sandbox mode to OnRamp settings * added transak staging api key
0xsequence · Jan 13, 2025 · 297de55 · 297de55
1 parent 873ccce
commit 297de55
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/packages/checkout/src/contexts/AddFundsModal.ts b/packages/checkout/src/contexts/AddFundsModal.ts
@@ -4,13 +4,17 @@ import { createGenericContext } from './genericContext'
 
 export interface AddFundsSettings {
   walletAddress: string | Hex
+  sandbox?: boolean
   fiatAmount?: string
   fiatCurrency?: string
   defaultFiatAmount?: string
   defaultCryptoCurrency?: string
   cryptoCurrencyList?: string
   networks?: string
   onClose?: () => void
+  onOrderCreated?: (data: any) => void
+  onOrderSuccessful?: (data: any) => void
+  onOrderFailed?: (data: any) => void
 }
 
 type AddFundsModalContext = {

diff --git a/packages/checkout/src/utils/transak.ts b/packages/checkout/src/utils/transak.ts
@@ -1,8 +1,12 @@
 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'
@@ -11,8 +15,12 @@ export const getTransakLink = (addFundsSettings: AddFundsSettings) => {
     [index: string]: string | undefined
   }
 
+  const useSandbox = addFundsSettings.sandbox ?? false;
+  const url = new URL(useSandbox ? TransakUrlSandbox : TransakUrlProd);
+  const apiKey = useSandbox ? TRANSAK_API_KEY_STAGING : TRANSAK_API_KEY;
+
   const options: Options = {
-    apiKey: TRANSAK_API_KEY,
+    apiKey: apiKey,
     referrerDomain: window.location.origin,
     walletAddress: addFundsSettings.walletAddress,
     fiatAmount: addFundsSettings?.fiatAmount,
@@ -24,7 +32,6 @@ export const getTransakLink = (addFundsSettings: AddFundsSettings) => {
     networks: addFundsSettings?.networks || defaultNetworks
   }
 
-  const url = new URL('https://global.transak.com')
   Object.keys(options).forEach(k => {
     const option = options[k]
     if (option) {

diff --git a/packages/checkout/src/views/AddFunds.tsx b/packages/checkout/src/views/AddFunds.tsx
@@ -1,17 +1,49 @@
 import { Box } from '@0xsequence/design-system'
-import React from 'react'
+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 (
@@ -26,7 +58,7 @@ export const AddFundsContent = () => {
         paddingTop: HEADER_HEIGHT
       }}
     >
-      <Box as="iframe" width="full" height="full" borderWidth="none" src={link} />
+      <Box id={IframeId} as="iframe" width="full" height="full" borderWidth="none" src={link} />
     </Box>
   )
 }