add buySessionId to currently live app coinify

LedgerHQ · Jun 28, 2024 · e6d3779 · e6d3779
1 parent c8022fa
commit e6d3779
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 7 deletions.
diff --git a/pages/buy.tsx b/pages/buy.tsx
@@ -12,6 +12,7 @@ type QueryParams = {
   mode?: "onRamp" | "offRamp";
   fiatAmount?: string;
   cryptoAmount?: string;
+  buySessionId?: string;
 };
 
 const Page = () => {
@@ -25,6 +26,7 @@ const Page = () => {
     primaryColor,
     fiatAmount,
     cryptoAmount,
+    buySessionId,
   } = router.query as QueryParams;
 
   if (accountAddress && cryptoCurrencyId) {
@@ -38,6 +40,7 @@ const Page = () => {
         cryptoAmount={cryptoAmount}
         language={language}
         primaryColor={primaryColor}
+        buySessionId={buySessionId}
       />
     );
   }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -15,6 +15,7 @@ type QueryParams = {
   mode?: "onRamp" | "offRamp";
   fiatAmount?: string;
   cryptoAmount?: string;
+  buySessionId?: string;
 };
 
 type PageState = {
@@ -56,6 +57,7 @@ const Page = () => {
     mode,
     fiatAmount,
     cryptoAmount,
+    buySessionId,
   } = router.query as QueryParams;
 
   if (state.data) {
@@ -69,6 +71,7 @@ const Page = () => {
         defaultFiatAmount={fiatAmount}
         language={language}
         primaryColor={primaryColor}
+        buySessionId={buySessionId}
         accounts={state.data.accounts}
         currencies={state.data.currencies}
       />

diff --git a/src/Coinify/CoinifyWidget.tsx b/src/Coinify/CoinifyWidget.tsx
@@ -61,6 +61,7 @@ type CoinifyWidgetConfig = {
   confirmMessages?: boolean;
   buyAmount?: string;
   sellAmount?: string;
+  partnerContext?: string;
 };
 
 type Props = {
@@ -72,6 +73,7 @@ type Props = {
   fiatAmount?: string;
   language?: string;
   primaryColor?: string;
+  buySessionId?: string;
 };
 
 const CoinifyWidget = ({
@@ -82,6 +84,7 @@ const CoinifyWidget = ({
   fiatAmount,
   cryptoAmount,
   primaryColor,
+  buySessionId = "",
 }: Props) => {
   const api = useApi();
 
@@ -91,7 +94,7 @@ const CoinifyWidget = ({
   const [widgetLoaded, setWidgetLoaded] = useState(false);
 
   const widgetRef: { current: null | HTMLIFrameElement } = useRef(null);
-
+  const partnerContext = { buySessionId };
   const coinifyConfig = COINIFY_CONFIG[env];
   const widgetConfig: CoinifyWidgetConfig = {
     primaryColor,
@@ -100,6 +103,7 @@ const CoinifyWidget = ({
     defaultFiatCurrency: fiatCurrencyId ? fiatCurrencyId : undefined,
     address: account.address,
     targetPage: mode,
+    partnerContext: JSON.stringify(partnerContext),
   };
 
   // FIXME: could use switch case?
@@ -150,6 +154,9 @@ const CoinifyWidget = ({
           context: {
             address,
             confirmed: true,
+            partnerContext: {
+              buySessionId,
+            },
           },
         },
         coinifyConfig.host
@@ -158,7 +165,7 @@ const CoinifyWidget = ({
         console.log(`Coinify Confirm OnRamp End | currencyName: ${currency}`);
       }
     },
-    [coinifyConfig.host, currency, account, mode]
+    [coinifyConfig.host, currency, account, mode, buySessionId]
   );
 
   const handleOnResult = useCallback(() => {
@@ -171,6 +178,9 @@ const CoinifyWidget = ({
             context: {
               address: account.address,
               confirmed: true,
+              partnerContext: {
+                buySessionId,
+              },
             },
           },
           coinifyConfig.host
@@ -197,7 +207,7 @@ const CoinifyWidget = ({
         }
       }
     }
-  }, [coinifyConfig.host, currency, account, mode]);
+  }, [coinifyConfig.host, currency, account, mode, buySessionId]);
 
   const handleOnCancel = useCallback(() => {
     if (widgetRef?.current?.contentWindow) {
@@ -209,6 +219,9 @@ const CoinifyWidget = ({
             context: {
               address: account.address,
               confirmed: false,
+              partnerContext: {
+                buySessionId,
+              },
             },
           },
           coinifyConfig.host
@@ -227,7 +240,7 @@ const CoinifyWidget = ({
         );
       }
     }
-  }, [coinifyConfig.host, account, mode]);
+  }, [coinifyConfig.host, account, mode, buySessionId]);
 
   const setTransactionId = useCallback(
     (txId) => {
@@ -334,6 +347,9 @@ const CoinifyWidget = ({
                 context: {
                   confirmed: true,
                   tradeId: tradeId.current,
+                  partnerContext: {
+                    buySessionId,
+                  },
                 },
               },
               coinifyConfig.host
@@ -386,6 +402,7 @@ const CoinifyWidget = ({
     initSellFlow,
     mode,
     api,
+    buySessionId,
   ]);
 
   return (

diff --git a/src/Coinify/CoinifyWidgetBuy.tsx b/src/Coinify/CoinifyWidgetBuy.tsx
@@ -46,6 +46,7 @@ type CoinifyWidgetConfig = {
   confirmMessages?: boolean;
   buyAmount?: string;
   sellAmount?: string;
+  partnerContext?: string;
 };
 
 type Props = {
@@ -57,6 +58,7 @@ type Props = {
   fiatAmount?: string;
   language?: string;
   primaryColor?: string;
+  buySessionId?: string;
 };
 
 const CoinifyWidgetBuy = ({
@@ -67,6 +69,7 @@ const CoinifyWidgetBuy = ({
   fiatAmount,
   cryptoAmount,
   primaryColor,
+  buySessionId = "",
 }: Props) => {
   const api = useApi();
 
@@ -76,6 +79,7 @@ const CoinifyWidgetBuy = ({
   const [widgetLoaded, setWidgetLoaded] = useState(false);
 
   const widgetRef: { current: null | HTMLIFrameElement } = useRef(null);
+  const partnerContext = { buySessionId };
 
   const coinifyConfig = COINIFY_CONFIG[env];
   const widgetConfig: CoinifyWidgetConfig = {
@@ -85,6 +89,7 @@ const CoinifyWidgetBuy = ({
     defaultFiatCurrency: fiatCurrencyId ? fiatCurrencyId : undefined,
     address: accountAddress,
     targetPage: mode,
+    partnerContext: JSON.stringify(partnerContext),
   };
 
   // FIXME: could use switch case?
@@ -139,6 +144,9 @@ const CoinifyWidgetBuy = ({
           context: {
             address,
             confirmed: true,
+            partnerContext: {
+              buySessionId,
+            },
           },
         },
         coinifyConfig.host
@@ -147,7 +155,7 @@ const CoinifyWidgetBuy = ({
         console.log(`Coinify Confirm OnRamp End | currencyName: ${currency}`);
       }
     },
-    [coinifyConfig.host, currency, accountAddress, mode]
+    [coinifyConfig.host, currency, accountAddress, mode, buySessionId]
   );
 
   const handleOnResult = useCallback(() => {
@@ -160,6 +168,9 @@ const CoinifyWidgetBuy = ({
             context: {
               address: accountAddress,
               confirmed: true,
+              partnerContext: {
+                buySessionId,
+              },
             },
           },
           coinifyConfig.host
@@ -186,7 +197,7 @@ const CoinifyWidgetBuy = ({
         }
       }
     }
-  }, [coinifyConfig.host, currency, accountAddress, mode]);
+  }, [coinifyConfig.host, currency, accountAddress, mode, buySessionId]);
 
   const handleOnCancel = useCallback(() => {
     if (widgetRef?.current?.contentWindow) {
@@ -198,6 +209,9 @@ const CoinifyWidgetBuy = ({
             context: {
               address: accountAddress,
               confirmed: false,
+              partnerContext: {
+                buySessionId,
+              },
             },
           },
           coinifyConfig.host
@@ -216,7 +230,7 @@ const CoinifyWidgetBuy = ({
         );
       }
     }
-  }, [coinifyConfig.host, accountAddress, mode]);
+  }, [coinifyConfig.host, accountAddress, mode, buySessionId]);
 
   useEffect(() => {
     if (!accountAddress) return;
@@ -237,6 +251,9 @@ const CoinifyWidgetBuy = ({
                 context: {
                   confirmed: true,
                   tradeId: tradeId.current,
+                  partnerContext: {
+                    buySessionId,
+                  },
                 },
               },
               coinifyConfig.host
@@ -282,6 +299,7 @@ const CoinifyWidgetBuy = ({
     handleOnResultBuy,
     mode,
     api,
+    buySessionId,
   ]);
 
   return (

diff --git a/src/Coinify/index.tsx b/src/Coinify/index.tsx
@@ -62,6 +62,7 @@ type CoinifyProps = {
   defaultCryptoAmount?: string;
   defaultFiatAmount?: string;
   language?: string;
+  buySessionId?: string;
   primaryColor?: string;
   currencies: Currency[];
   accounts: Account[];
@@ -78,6 +79,7 @@ const Coinify = ({
   accounts,
   language,
   primaryColor,
+  buySessionId,
 }: CoinifyProps) => {
   const api = useApi();
 
@@ -127,6 +129,7 @@ const Coinify = ({
     accounts,
     selectedAccount,
     selectedCurrency,
+    buySessionId,
   });
 
   const selectAccount = async () => {
@@ -190,6 +193,7 @@ const Coinify = ({
             cryptoAmount={defaultCryptoAmount}
             language={language}
             primaryColor={primaryColor}
+            buySessionId={buySessionId}
           />
         ) : (
           <>