feat(checkout-widgets): Make on-ramp widget title and menu icon customisable (#2714)

Co-authored-by: priyaleedman <priya.leedman@gmail.com>

Author: priyaleedman-imm

packages/checkout/sdk/src/fiatRamp/fiatRamp.ts

@@ -11,6 +11,8 @@ export interface FiatRampWidgetParams {
   tokenSymbol?: string;
   email?: string;
   allowedTokens?: string[];
+  showMenu?: boolean;
+  customSubTitle?: string;
 }
 
 export class FiatRampService {
@@ -49,9 +51,10 @@ export class FiatRampService {
       defaultPaymentMethod: 'credit_debit_card',
       disablePaymentMethods: '',
       productsAvailed: 'buy',
-      exchangeScreenTitle: 'Buy',
+      exchangeScreenTitle: params.customSubTitle === '' ? ' ' : (params.customSubTitle ?? 'Buy'),
       themeColor: '0D0D0D',
       defaultCryptoCurrency: params.tokenSymbol || 'IMX',
+      hideMenu: !(params.showMenu ?? true),
     };
 
     if (params.isPassport && params.email) {

packages/checkout/sdk/src/sdk.ts

@@ -669,6 +669,8 @@ export class Checkout {
       tokenSymbol,
       email,
       allowedTokens,
+      showMenu: params.showMenu,
+      customSubTitle: params.customSubTitle,
     } as FiatRampWidgetParams);
   }
 

packages/checkout/sdk/src/types/fiatRamp.ts

@@ -26,4 +26,6 @@ export interface FiatRampParams {
   tokenAmount?: string;
   tokenAddress?: string;
   passport?: any;
+  showMenu?: boolean;
+  customSubTitle?: string;
 }

packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts

@@ -4,4 +4,8 @@ import { WidgetConfiguration } from './widget';
  * Onramp Widget Configuration represents the configuration options for the Onramp Widget.
  */
 export type OnrampWidgetConfiguration = {
+  /** Whether to show the menu in the Transak widget (default: true) */
+  showMenu?: boolean;
+  /** The custom subtitle to display on the exchange screen in the Transak widget (default: 'Buy') */
+  customSubTitle?: string;
 } & WidgetConfiguration;

packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx

@@ -324,7 +324,7 @@ export default function CommerceWidget(props: CommerceWidgetInputs) {
                 <OnRampWidget
                   config={widgetsConfig}
                   {...(view.data.params || {})}
-                  {...(view.data.config || {})}
+                  onrampConfig={view.data.config}
                   showBackButton={showBackButton}
                 />
               )}

packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx

@@ -1,7 +1,7 @@
 import {
   useContext, useEffect, useMemo, useReducer, useState,
 } from 'react';
-import { IMTBLWidgetEvents, OnRampWidgetParams } from '@imtbl/checkout-sdk';
+import { IMTBLWidgetEvents, OnRampWidgetParams, OnrampWidgetConfiguration } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
 import { UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { NATIVE } from '../../lib';
@@ -27,11 +27,12 @@ import { OrderInProgress } from './views/OrderInProgress';
 import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView';
 
 export type OnRampWidgetInputs = OnRampWidgetParams & {
-  config: StrongCheckoutWidgetsConfig
+  config: StrongCheckoutWidgetsConfig;
+  onrampConfig?: OnrampWidgetConfiguration;
 };
 
 export default function OnRampWidget({
-  amount, tokenAddress, config, showBackButton,
+  amount, tokenAddress, config, showBackButton, onrampConfig,
 }: OnRampWidgetInputs) {
   const {
     isOnRampEnabled, isSwapEnabled, isBridgeEnabled,
@@ -139,6 +140,8 @@ export default function OnRampWidget({
               tknAddr ?? viewState.view.data?.tokenAddress
           }
           showBackButton={showBackButton}
+          showMenu={onrampConfig?.showMenu}
+          customSubTitle={onrampConfig?.customSubTitle}
         />
       )}
 

packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx

@@ -102,6 +102,7 @@ export class OnRamp extends Base<WidgetType.ONRAMP> {
                     amount={this.parameters.amount}
                     config={this.strongConfig()}
                     showBackButton={this.parameters.showBackButton}
+                    onrampConfig={this.properties.config}
                   />
                 </Suspense>
               </ConnectLoader>

packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx

@@ -42,13 +42,17 @@ interface OnRampProps {
   tokenAddress?: string;
   passport?: Passport;
   showBackButton?: boolean;
+  showMenu?: boolean;
+  customSubTitle?: string;
 }
 export function OnRampMain({
   passport,
   showIframe,
   tokenAmount,
   tokenAddress,
   showBackButton,
+  showMenu,
+  customSubTitle,
 }: OnRampProps) {
   const { connectLoaderState } = useContext(ConnectLoaderContext);
   const { checkout, provider } = connectLoaderState;
@@ -236,6 +240,8 @@ export function OnRampMain({
         tokenAddress,
         tokenAmount,
         passport,
+        showMenu,
+        customSubTitle,
       };
 
       setWidgetUrl(await checkout.createFiatRampUrl(params));