[NO CHANGELOG][Checkout Widget] Add support for env overrides (#2144)

immutable · Sep 4, 2024 · 311d459 · 311d459
1 parent c54cd88
commit 311d459
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 32 deletions.
diff --git a/packages/checkout/sdk/src/config/config.ts b/packages/checkout/sdk/src/config/config.ts
@@ -1,15 +1,12 @@
 import { Environment } from '@imtbl/config';
-import {
-  CheckoutModuleConfiguration,
-  ChainId,
-  NetworkMap,
-} from '../types';
+import { CheckoutModuleConfiguration, ChainId, NetworkMap } from '../types';
 import { RemoteConfigFetcher } from './remoteConfigFetcher';
 import {
   DEFAULT_BRIDGE_ENABLED,
   DEFAULT_ON_RAMP_ENABLED,
   DEFAULT_SWAP_ENABLED,
   DEV_CHAIN_ID_NETWORK_MAP,
+  globalPackageVersion,
   PRODUCTION_CHAIN_ID_NETWORK_MAP,
   SANDBOX_CHAIN_ID_NETWORK_MAP,
 } from '../env';
@@ -76,6 +73,8 @@ export class CheckoutConfiguration {
 
   readonly publishableKey: string;
 
+  readonly overrides: CheckoutModuleConfiguration['overrides'];
+
   constructor(config: CheckoutModuleConfiguration, httpClient: HttpClient) {
     if (!Object.values(Environment).includes(config.baseConfig.environment)) {
       throw new CheckoutConfigurationError(
@@ -92,10 +91,7 @@ export class CheckoutConfiguration {
     this.isBridgeEnabled = config.bridge?.enable ?? DEFAULT_BRIDGE_ENABLED;
     this.publishableKey = config.publishableKey ?? '<no-publishable-key>';
 
-    this.networkMap = networkMap(
-      this.isProduction,
-      this.isDevelopment,
-    );
+    this.networkMap = networkMap(this.isProduction, this.isDevelopment);
 
     this.remote = new RemoteConfigFetcher(httpClient, {
       isDevelopment: this.isDevelopment,
@@ -106,5 +102,12 @@ export class CheckoutConfiguration {
       isDevelopment: this.isDevelopment,
       isProduction: this.isProduction,
     });
+
+    this.overrides = config.overrides ?? {};
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get sdkVersion(): string {
+    return globalPackageVersion();
   }
 }
diff --git a/packages/checkout/sdk/src/types/config.ts b/packages/checkout/sdk/src/types/config.ts
@@ -1,10 +1,12 @@
-import { ModuleConfiguration } from '@imtbl/config';
+import { Environment, ModuleConfiguration } from '@imtbl/config';
 import { ExchangeOverrides, SecondaryFee } from '@imtbl/dex-sdk';
 import { Passport } from '@imtbl/passport';
 import { TokenInfo } from './tokenInfo';
 import { ChainId } from './chains';
 
 export interface CheckoutOverrides {
+  environment?: Environment;
+  [key: string]: unknown;
 }
 
 interface CheckoutFeatureConfiguration {
@@ -43,6 +45,8 @@ export interface CheckoutModuleConfiguration extends ModuleConfiguration<Checkou
   bridge?: CheckoutBridgeConfiguration;
   passport?: Passport;
   publishableKey?: string;
+  environment?: Environment;
+  overrides?: CheckoutOverrides;
 }
 
 /**

diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx b/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx
@@ -25,12 +25,11 @@ export default function CheckoutWidget(props: CheckoutWidgetInputs) {
   const {
     config, checkout, params, provider,
   } = props;
-  const { environment, publishableKey } = checkout.config;
 
   const [, iframeURL] = useMemo(() => {
-    if (!publishableKey) return ['', ''];
-    return getIframeURL(params, config, environment, publishableKey);
-  }, [params, config, environment, publishableKey]);
+    if (!checkout.config.publishableKey) return ['', ''];
+    return getIframeURL(params, config, checkout.config);
+  }, [params, config, checkout.config]);
 
   const [checkoutState, checkoutDispatch] = useReducer(
     checkoutReducer,

diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/functions/iframeParams.ts b/packages/checkout/widgets-lib/src/widgets/checkout/functions/iframeParams.ts
@@ -1,12 +1,16 @@
 import {
+  CheckoutConfiguration,
   CheckoutFlowType,
   CheckoutWidgetConfiguration,
   CheckoutWidgetParams,
 } from '@imtbl/checkout-sdk';
-import { Environment } from '@imtbl/config';
 
-import { CHECKOUT_APP_URL } from '../../../lib/constants';
+import { Environment } from '@imtbl/config';
+import { CHECKOUT_APP_URL, ENV_DEVELOPMENT } from '../../../lib/constants';
 
+/**
+ * Converts a record of parameters to a query string.
+ */
 const toQueryString = (params: Record<string, unknown>): string => {
   const sanitizedParams = Object.entries(params)
     .filter(([, value]) => value !== undefined)
@@ -22,29 +26,35 @@ const toQueryString = (params: Record<string, unknown>): string => {
   return new URLSearchParams(sanitizedParams).toString();
 };
 
-// TODO: Can be removed after updating params across widgets
+/**
+ * Maps the flow configuration and params to the corresponding query parameters.
+ */
 const getIframeParams = (
   params: CheckoutWidgetParams,
-  config: CheckoutWidgetConfiguration,
+  widgetConfig: CheckoutWidgetConfiguration,
+  checkoutConfig: CheckoutConfiguration,
 ): string => {
   const { flow } = params;
   const commonConfig = {
-    theme: config.theme,
+    theme: widgetConfig.theme,
+    language: widgetConfig.language,
+    publishableKey: checkoutConfig.publishableKey,
+    sdkVersion: checkoutConfig.sdkVersion,
   };
 
   switch (flow) {
     case CheckoutFlowType.CONNECT:
       return toQueryString({
         ...commonConfig,
-        ...(config.connect || {}),
+        ...(widgetConfig.connect || {}),
         chainId: params.targetChainId,
         walletRdns: params.targetWalletRdns,
         blocklistWalletRdns: params.blocklistWalletRdns,
       });
     case CheckoutFlowType.WALLET:
       return toQueryString({
         ...commonConfig,
-        ...(config.wallet || {}),
+        ...(widgetConfig.wallet || {}),
         // FIMXE: Add connection params
         // chainId:
         // walletRdns:
@@ -56,7 +66,7 @@ const getIframeParams = (
     case CheckoutFlowType.SWAP:
       return toQueryString({
         ...commonConfig,
-        ...(config.swap || {}),
+        ...(widgetConfig.swap || {}),
         // FIMXE: Add connection params
         // chainId:
         // walletRdns:
@@ -71,7 +81,7 @@ const getIframeParams = (
     case CheckoutFlowType.BRIDGE:
       return toQueryString({
         ...commonConfig,
-        ...(config.bridge || {}),
+        ...(widgetConfig.bridge || {}),
         // FIMXE: Add bridge params
         // fromChainId:
         // toChainId:
@@ -86,7 +96,7 @@ const getIframeParams = (
     case CheckoutFlowType.ONRAMP:
       return toQueryString({
         ...commonConfig,
-        ...(config.onRamp || {}),
+        ...(widgetConfig.onRamp || {}),
         // FIMXE: Add connection params
         // chainId:
         // walletRdns:
@@ -100,7 +110,7 @@ const getIframeParams = (
     case CheckoutFlowType.SALE:
       return toQueryString({
         ...commonConfig,
-        ...(config.sale || {}),
+        ...(widgetConfig.sale || {}),
         // FIMXE: Add connection params
         // chainId:
         // walletRdns:
@@ -123,19 +133,31 @@ const getIframeParams = (
   }
 };
 
+/**
+ * Returns the iframe URL for the Checkout App based on the environment.
+ */
 export const getIframeURL = (
   params: CheckoutWidgetParams,
-  config: CheckoutWidgetConfiguration,
-  environment: Environment,
-  publishableKey: string,
+  widgetConfig: CheckoutWidgetConfiguration,
+  checkoutConfig: CheckoutConfiguration,
 ) => {
   const { flow } = params;
-  const language = params.language || config.language;
+  const { publishableKey } = checkoutConfig;
+
+  const language = params.language || widgetConfig.language;
+
+  let environment: Environment = checkoutConfig.environment || Environment.SANDBOX;
+  if (checkoutConfig.isDevelopment) {
+    environment = ENV_DEVELOPMENT;
+  }
+  if (checkoutConfig.overrides?.environment) {
+    environment = checkoutConfig.overrides.environment;
+  }
 
-  const baseURL = CHECKOUT_APP_URL[environment];
-  const queryParams = getIframeParams(params, config);
+  const baseURL = checkoutConfig.overrides?.checkoutAppUrl as string ?? CHECKOUT_APP_URL[environment];
+  const queryParams = getIframeParams(params, widgetConfig, checkoutConfig);
 
   const iframeURL = `${baseURL}/${publishableKey}/${language}/${flow}?${queryParams}`;
 
-  return [baseURL, iframeURL];
+  return [baseURL, iframeURL] as const;
 };