@imtbl/checkout-widgets 2.10.3 → 2.10.4-alpha.0

package/dist/browser/index.js

@@ -1 +1 @@
-export { er as WidgetsFactory } from './index-C8Pybl6W.js';
+export { er as WidgetsFactory } from './index-DFAGr0d5.js';

package/dist/browser/{index.umd-TcVSRaL8.js → index.umd-BDwQTcot.js}

@@ -1,4 +1,4 @@
-import { ay as getDefaultExportFromCjs } from './index-C8Pybl6W.js';
+import { ay as getDefaultExportFromCjs } from './index-DFAGr0d5.js';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/dist/browser/{useInterval-CI7WTOt5.js → useInterval-apxTIl_n.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, dW as useBrowserLayoutEffect } from './index-C8Pybl6W.js';
+import { b as reactExports, dW as useBrowserLayoutEffect } from './index-DFAGr0d5.js';
 
 // Inspired by https://usehooks-ts.com/react-hook/use-interval
 function useInterval(callback, delay) {

package/dist/types/components/Transak/useTransakIframe.d.ts

@@ -35,6 +35,11 @@ export declare const TRANSAK_API_KEY: {
     sandbox: string;
     production: string;
 };
+export declare const IMMUTABLE_API_BASE_URL: {
+    development: string;
+    sandbox: string;
+    production: string;
+};
 export declare const useTransakIframe: (props: UseTransakIframeProps) => {
     iframeSrc: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imtbl/checkout-widgets",
-  "version": "2.10.3",
+  "version": "2.10.4-alpha.0",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -18,12 +18,12 @@
     "@biom3/design-tokens": "^0.4.5",
     "@biom3/react": "^0.29.4",
     "@emotion/react": "^11.11.3",
-    "@imtbl/bridge-sdk": "2.10.3",
-    "@imtbl/checkout-sdk": "2.10.3",
-    "@imtbl/config": "2.10.3",
-    "@imtbl/cryptofiat": "2.10.3",
-    "@imtbl/dex-sdk": "2.10.3",
-    "@imtbl/passport": "2.10.3",
+    "@imtbl/bridge-sdk": "2.10.4-alpha.0",
+    "@imtbl/checkout-sdk": "2.10.4-alpha.0",
+    "@imtbl/config": "2.10.4-alpha.0",
+    "@imtbl/cryptofiat": "2.10.4-alpha.0",
+    "@imtbl/dex-sdk": "2.10.4-alpha.0",
+    "@imtbl/passport": "2.10.4-alpha.0",
     "@imtbl/react-analytics": "0.3.4-alpha",
     "@rive-app/react-canvas-lite": "^4.9.0",
     "@walletconnect/ethereum-provider": "^2.11.1",

package/src/components/Transak/useTransakIframe.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { useCallback, useEffect, useState } from 'react';
 import { Environment } from '@imtbl/config';
 
@@ -50,6 +51,12 @@ export const TRANSAK_API_KEY = {
   [Environment.PRODUCTION]: 'ad1bca70-d917-4628-bb0f-5609537498bc',
 };
 
+export const IMMUTABLE_API_BASE_URL = {
+  development: 'https://api.dev.immutable.com',
+  [Environment.SANDBOX]: 'https://api.sandbox.immutable.com',
+  [Environment.PRODUCTION]: 'https://api.immutable.com',
+};
+
 export const useTransakIframe = (props: UseTransakIframeProps) => {
   const {
     contractId, environment, transakParams, onError,
@@ -64,7 +71,10 @@ export const useTransakIframe = (props: UseTransakIframeProps) => {
         estimatedGasLimit,
         cryptoCurrencyCode,
         excludeFiatCurrencies,
-        ...restWidgetParams
+        exchangeScreenTitle,
+        email,
+        walletAddress,
+        partnerOrderId,
       } = transakParams;
 
       // FIXME: defaulting to first nft in the list
@@ -104,21 +114,38 @@ export const useTransakIframe = (props: UseTransakIframeProps) => {
 
       const { id: nftTransactionId } = await response.json();
 
-      const baseWidgetUrl = `${TRANSAK_WIDGET_BASE_URL[environment]}?`;
-      const queryParams = new URLSearchParams({
-        apiKey: TRANSAK_API_KEY[environment],
-        environment: TRANSAK_ENVIRONMENT[environment],
-        isNFT: 'true',
-        nftTransactionId,
-        themeColor: '0D0D0D',
-        ...restWidgetParams,
-      });
+      const requestBody: Record<string, unknown> = {
+        api_key: TRANSAK_API_KEY[environment],
+        nft_transaction_id: nftTransactionId,
+        theme_color: '0D0D0D',
+        exchange_screen_title: exchangeScreenTitle,
+        wallet_address: walletAddress,
+        partner_order_id: partnerOrderId,
+      };
+
+      if (email) {
+        requestBody.email = email;
+      }
 
       if (excludeFiatCurrencies) {
-        queryParams.append('excludeFiatCurrencies', excludeFiatCurrencies.join(','));
+        requestBody.exclude_fiat_currencies = excludeFiatCurrencies.join(',');
+      }
+
+      const widgetUrlResponse = await fetch(`${IMMUTABLE_API_BASE_URL[environment]}/checkout/v1/widget-url`, {
+        method: 'POST',
+        headers: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      if (!widgetUrlResponse.ok) {
+        throw new Error('Failed to get widget URL');
       }
 
-      return `${baseWidgetUrl}${queryParams.toString()}`;
+      const { url } = await widgetUrlResponse.json();
+      return url;
     } catch {
       onError?.();
     }

package/src/widgets/on-ramp/views/OnRampMain.tsx

@@ -5,7 +5,9 @@ import {
   useContext, useEffect, useMemo, useRef, useState,
 } from 'react';
 import {
+  Checkout,
   ExchangeType, IMTBLWidgetEvents,
+  WrappedBrowserProvider,
 } from '@imtbl/checkout-sdk';
 import url from 'url';
 import { useTranslation } from 'react-i18next';
@@ -47,6 +49,48 @@ interface OnRampProps {
   customSubTitle?: string;
   showHeader?: boolean;
 }
+
+function useWidgetUrl(
+  checkout: Checkout | undefined,
+  provider: WrappedBrowserProvider | undefined,
+  tokenAddress: string | undefined,
+  tokenAmount: string | undefined,
+  passport: Passport | undefined,
+  showMenu: boolean | undefined,
+  customSubTitle: string | undefined,
+) {
+  const [widgetUrl, setWidgetUrl] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!checkout || !provider) return;
+
+    const params = {
+      exchangeType: ExchangeType.ONRAMP,
+      browserProvider: provider,
+      tokenAddress,
+      tokenAmount,
+      passport,
+      showMenu,
+      customSubTitle,
+    };
+
+    checkout.createFiatRampUrl(params).then(setWidgetUrl);
+  }, [checkout, provider, tokenAddress, tokenAmount, passport, showMenu, customSubTitle]);
+
+  return widgetUrl;
+}
+
+function useWalletAddress(provider: WrappedBrowserProvider | undefined) {
+  const [userWalletAddress, setUserWalletAddress] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!provider) return;
+    provider.getSigner().then((signer) => signer.getAddress()).then(setUserWalletAddress);
+  }, [provider]);
+
+  return userWalletAddress;
+}
+
 export function OnRampMain({
   passport,
   showIframe,
@@ -66,7 +110,8 @@ export function OnRampMain({
 
   const { t } = useTranslation();
   const { viewState, viewDispatch } = useContext(ViewContext);
-  const [widgetUrl, setWidgetUrl] = useState<string>('');
+  const widgetUrl = useWidgetUrl(checkout, provider, tokenAddress, tokenAmount, passport, showMenu, customSubTitle);
+  const userWalletAddress = useWalletAddress(provider);
 
   const eventTimer = useRef<number | undefined>();
 
@@ -233,46 +278,31 @@ export function OnRampMain({
   }, [viewDispatch, tokenAmount, tokenAddress, viewState.view.data?.amount, viewState.view.data?.tokenAddress]);
 
   useEffect(() => {
-    if (!checkout || !provider) return;
-
-    let userWalletAddress = '';
-
-    (async () => {
-      const params = {
-        exchangeType: ExchangeType.ONRAMP,
-        browserProvider: provider,
-        tokenAddress,
-        tokenAmount,
-        passport,
-        showMenu,
-        customSubTitle,
-      };
-
-      setWidgetUrl(await checkout.createFiatRampUrl(params));
-      userWalletAddress = await (await provider!.getSigner()).getAddress();
-    })();
-
-    const domIframe: HTMLIFrameElement = document.getElementById(
+    const domIframe = document.getElementById(
       transakIframeId,
-    ) as HTMLIFrameElement;
+    ) as HTMLIFrameElement | null;
 
     if (!domIframe) return;
 
     const handleTransakEvents = (event: any) => {
-      if (!domIframe) return;
-
       const host = url.parse(event.origin)?.host?.toLowerCase();
       if (
         event.source === domIframe.contentWindow
         && host
         && TRANSAK_ORIGIN.includes(host)
       ) {
-        trackSegmentEvents(event.data, userWalletAddress);
+        trackSegmentEvents(event.data, userWalletAddress ?? '');
         transakEventHandler(event.data);
       }
     };
+
     window.addEventListener('message', handleTransakEvents);
-  }, [checkout, provider, tokenAmount, tokenAddress, passport, trackSegmentEvents, transakEventHandler]);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      window.removeEventListener('message', handleTransakEvents);
+    };
+  }, [trackSegmentEvents, transakEventHandler, userWalletAddress]);
 
   return (
     <Box sx={boxMainStyle(showIframe)}>