From 8ecac6fd6040182308db6f627d2835587fe60d40 Mon Sep 17 00:00:00 2001 From: priyaleedman Date: Wed, 24 Sep 2025 15:32:33 +1000 Subject: [PATCH 1/5] Made title and menu icon customisable --- packages/checkout/sdk/src/fiatRamp/fiatRamp.ts | 5 ++++- packages/checkout/sdk/src/sdk.ts | 2 ++ packages/checkout/sdk/src/types/fiatRamp.ts | 2 ++ .../sdk/src/widgets/definitions/configurations/onramp.ts | 4 ++++ .../widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx | 8 ++++++-- .../widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx | 2 ++ .../widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx | 6 ++++++ 7 files changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts index 267a60adbc..3ebc4dd724 100644 --- a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts +++ b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts @@ -11,6 +11,8 @@ export interface FiatRampWidgetParams { tokenSymbol?: string; email?: string; allowedTokens?: string[]; + hideMenu?: boolean; + exchangeScreenTitle?: string; } export class FiatRampService { @@ -49,9 +51,10 @@ export class FiatRampService { defaultPaymentMethod: 'credit_debit_card', disablePaymentMethods: '', productsAvailed: 'buy', - exchangeScreenTitle: 'Buy', + exchangeScreenTitle: params.exchangeScreenTitle ?? 'Buy', themeColor: '0D0D0D', defaultCryptoCurrency: params.tokenSymbol || 'IMX', + hideMenu: params.hideMenu ?? false, }; if (params.isPassport && params.email) { diff --git a/packages/checkout/sdk/src/sdk.ts b/packages/checkout/sdk/src/sdk.ts index 67c3496a4b..79ee7c385f 100644 --- a/packages/checkout/sdk/src/sdk.ts +++ b/packages/checkout/sdk/src/sdk.ts @@ -669,6 +669,8 @@ export class Checkout { tokenSymbol, email, allowedTokens, + hideMenu: params.hideMenu, + exchangeScreenTitle: params.exchangeScreenTitle, } as FiatRampWidgetParams); } diff --git a/packages/checkout/sdk/src/types/fiatRamp.ts b/packages/checkout/sdk/src/types/fiatRamp.ts index 277a71bf2d..eacb0222ae 100644 --- a/packages/checkout/sdk/src/types/fiatRamp.ts +++ b/packages/checkout/sdk/src/types/fiatRamp.ts @@ -26,4 +26,6 @@ export interface FiatRampParams { tokenAmount?: string; tokenAddress?: string; passport?: any; + hideMenu?: boolean; + exchangeScreenTitle?: string; } diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts index f3f08c6cab..bd9af865a7 100644 --- a/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts +++ b/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 hide the menu in the Transak widget (default: true) */ + hideMenu?: boolean; + /** The title to display on the exchange screen in the Transak widget (default: ' ') */ + exchangeScreenTitle?: string; } & WidgetConfiguration; diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx index ded8730416..304c315c26 100644 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx @@ -27,11 +27,13 @@ import { OrderInProgress } from './views/OrderInProgress'; import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView'; export type OnRampWidgetInputs = OnRampWidgetParams & { - config: StrongCheckoutWidgetsConfig + config: StrongCheckoutWidgetsConfig; + hideMenu?: boolean; + exchangeScreenTitle?: string; }; export default function OnRampWidget({ - amount, tokenAddress, config, showBackButton, + amount, tokenAddress, config, showBackButton, hideMenu, exchangeScreenTitle, }: OnRampWidgetInputs) { const { isOnRampEnabled, isSwapEnabled, isBridgeEnabled, @@ -139,6 +141,8 @@ export default function OnRampWidget({ tknAddr ?? viewState.view.data?.tokenAddress } showBackButton={showBackButton} + hideMenu={hideMenu} + exchangeScreenTitle={exchangeScreenTitle} /> )} diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx index 011ac07cc4..50af28cdd9 100644 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx +++ b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx @@ -102,6 +102,8 @@ export class OnRamp extends Base { amount={this.parameters.amount} config={this.strongConfig()} showBackButton={this.parameters.showBackButton} + hideMenu={this.properties.config?.hideMenu} + exchangeScreenTitle={this.properties.config?.exchangeScreenTitle} /> diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx index 5f7b772c4d..42c6754b93 100644 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx +++ b/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx @@ -42,6 +42,8 @@ interface OnRampProps { tokenAddress?: string; passport?: Passport; showBackButton?: boolean; + hideMenu?: boolean; + exchangeScreenTitle?: string; } export function OnRampMain({ passport, @@ -49,6 +51,8 @@ export function OnRampMain({ tokenAmount, tokenAddress, showBackButton, + hideMenu, + exchangeScreenTitle, }: OnRampProps) { const { connectLoaderState } = useContext(ConnectLoaderContext); const { checkout, provider } = connectLoaderState; @@ -236,6 +240,8 @@ export function OnRampMain({ tokenAddress, tokenAmount, passport, + hideMenu, + exchangeScreenTitle, }; setWidgetUrl(await checkout.createFiatRampUrl(params)); From 73c42135cb84667352849b925acc26c392cdd21b Mon Sep 17 00:00:00 2001 From: priyaleedman Date: Wed, 24 Sep 2025 16:06:38 +1000 Subject: [PATCH 2/5] Updated param names, handled empty subtitle logic, changed hide menu to show menu, used on ramp config type --- packages/checkout/sdk/src/fiatRamp/fiatRamp.ts | 8 ++++---- packages/checkout/sdk/src/sdk.ts | 4 ++-- packages/checkout/sdk/src/types/fiatRamp.ts | 4 ++-- .../src/widgets/definitions/configurations/onramp.ts | 8 ++++---- .../widgets/immutable-commerce/CommerceWidget.tsx | 2 +- .../widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx | 11 +++++------ .../src/widgets/on-ramp/OnRampWidgetRoot.tsx | 3 +-- .../src/widgets/on-ramp/views/OnRampMain.tsx | 12 ++++++------ 8 files changed, 25 insertions(+), 27 deletions(-) diff --git a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts index 3ebc4dd724..f5b0c0d803 100644 --- a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts +++ b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts @@ -11,8 +11,8 @@ export interface FiatRampWidgetParams { tokenSymbol?: string; email?: string; allowedTokens?: string[]; - hideMenu?: boolean; - exchangeScreenTitle?: string; + showMenu?: boolean; + customSubTitle?: string; } export class FiatRampService { @@ -51,10 +51,10 @@ export class FiatRampService { defaultPaymentMethod: 'credit_debit_card', disablePaymentMethods: '', productsAvailed: 'buy', - exchangeScreenTitle: params.exchangeScreenTitle ?? 'Buy', + exchangeScreenTitle: params.customSubTitle === '' ? 'Buy' : (params.customSubTitle ?? 'Buy'), themeColor: '0D0D0D', defaultCryptoCurrency: params.tokenSymbol || 'IMX', - hideMenu: params.hideMenu ?? false, + hideMenu: !(params.showMenu ?? false), }; if (params.isPassport && params.email) { diff --git a/packages/checkout/sdk/src/sdk.ts b/packages/checkout/sdk/src/sdk.ts index 79ee7c385f..690ccf728d 100644 --- a/packages/checkout/sdk/src/sdk.ts +++ b/packages/checkout/sdk/src/sdk.ts @@ -669,8 +669,8 @@ export class Checkout { tokenSymbol, email, allowedTokens, - hideMenu: params.hideMenu, - exchangeScreenTitle: params.exchangeScreenTitle, + showMenu: params.showMenu, + customSubTitle: params.customSubTitle, } as FiatRampWidgetParams); } diff --git a/packages/checkout/sdk/src/types/fiatRamp.ts b/packages/checkout/sdk/src/types/fiatRamp.ts index eacb0222ae..84ec3c5ea8 100644 --- a/packages/checkout/sdk/src/types/fiatRamp.ts +++ b/packages/checkout/sdk/src/types/fiatRamp.ts @@ -26,6 +26,6 @@ export interface FiatRampParams { tokenAmount?: string; tokenAddress?: string; passport?: any; - hideMenu?: boolean; - exchangeScreenTitle?: string; + showMenu?: boolean; + customSubTitle?: string; } diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts index bd9af865a7..0df9a8375d 100644 --- a/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts +++ b/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts @@ -4,8 +4,8 @@ import { WidgetConfiguration } from './widget'; * Onramp Widget Configuration represents the configuration options for the Onramp Widget. */ export type OnrampWidgetConfiguration = { - /** Whether to hide the menu in the Transak widget (default: true) */ - hideMenu?: boolean; - /** The title to display on the exchange screen in the Transak widget (default: ' ') */ - exchangeScreenTitle?: string; + /** Whether to show the menu in the Transak widget (default: false) */ + showMenu?: boolean; + /** The custom subtitle to display on the exchange screen in the Transak widget (default: 'Buy') */ + customSubTitle?: string; } & WidgetConfiguration; diff --git a/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx index 43c359dc8c..786f61c15e 100644 --- a/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx @@ -324,7 +324,7 @@ export default function CommerceWidget(props: CommerceWidgetInputs) { )} diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx index 304c315c26..619ac79c49 100644 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx +++ b/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'; @@ -28,12 +28,11 @@ import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailabl export type OnRampWidgetInputs = OnRampWidgetParams & { config: StrongCheckoutWidgetsConfig; - hideMenu?: boolean; - exchangeScreenTitle?: string; + onrampConfig?: OnrampWidgetConfiguration; }; export default function OnRampWidget({ - amount, tokenAddress, config, showBackButton, hideMenu, exchangeScreenTitle, + amount, tokenAddress, config, showBackButton, onrampConfig, }: OnRampWidgetInputs) { const { isOnRampEnabled, isSwapEnabled, isBridgeEnabled, @@ -141,8 +140,8 @@ export default function OnRampWidget({ tknAddr ?? viewState.view.data?.tokenAddress } showBackButton={showBackButton} - hideMenu={hideMenu} - exchangeScreenTitle={exchangeScreenTitle} + showMenu={onrampConfig?.showMenu} + customSubTitle={onrampConfig?.customSubTitle} /> )} diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx index 50af28cdd9..734cc2011a 100644 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx +++ b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx @@ -102,8 +102,7 @@ export class OnRamp extends Base { amount={this.parameters.amount} config={this.strongConfig()} showBackButton={this.parameters.showBackButton} - hideMenu={this.properties.config?.hideMenu} - exchangeScreenTitle={this.properties.config?.exchangeScreenTitle} + onrampConfig={this.properties.config} /> diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx index 42c6754b93..af4e197117 100644 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx +++ b/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx @@ -42,8 +42,8 @@ interface OnRampProps { tokenAddress?: string; passport?: Passport; showBackButton?: boolean; - hideMenu?: boolean; - exchangeScreenTitle?: string; + showMenu?: boolean; + customSubTitle?: string; } export function OnRampMain({ passport, @@ -51,8 +51,8 @@ export function OnRampMain({ tokenAmount, tokenAddress, showBackButton, - hideMenu, - exchangeScreenTitle, + showMenu, + customSubTitle, }: OnRampProps) { const { connectLoaderState } = useContext(ConnectLoaderContext); const { checkout, provider } = connectLoaderState; @@ -240,8 +240,8 @@ export function OnRampMain({ tokenAddress, tokenAmount, passport, - hideMenu, - exchangeScreenTitle, + showMenu, + customSubTitle, }; setWidgetUrl(await checkout.createFiatRampUrl(params)); From 74322f08267ca8cf0f0c5bf1b4b1b4897f248b20 Mon Sep 17 00:00:00 2001 From: priyaleedman Date: Wed, 24 Sep 2025 16:16:23 +1000 Subject: [PATCH 3/5] Fixed param logic --- packages/checkout/sdk/src/fiatRamp/fiatRamp.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts index f5b0c0d803..3a0a08a0ff 100644 --- a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts +++ b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts @@ -51,10 +51,10 @@ export class FiatRampService { defaultPaymentMethod: 'credit_debit_card', disablePaymentMethods: '', productsAvailed: 'buy', - exchangeScreenTitle: params.customSubTitle === '' ? 'Buy' : (params.customSubTitle ?? 'Buy'), + exchangeScreenTitle: params.customSubTitle === '' ? ' ' : (params.customSubTitle ?? 'Buy'), themeColor: '0D0D0D', defaultCryptoCurrency: params.tokenSymbol || 'IMX', - hideMenu: !(params.showMenu ?? false), + hideMenu: !params.showMenu, }; if (params.isPassport && params.email) { From ff1ee31c15edae4377f2acb5cba3387b98ea5b53 Mon Sep 17 00:00:00 2001 From: priyaleedman Date: Wed, 24 Sep 2025 16:32:58 +1000 Subject: [PATCH 4/5] Re-fixed menu icon display logic whoops --- packages/checkout/sdk/src/fiatRamp/fiatRamp.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts index 3a0a08a0ff..5d447d6cc6 100644 --- a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts +++ b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts @@ -54,7 +54,7 @@ export class FiatRampService { exchangeScreenTitle: params.customSubTitle === '' ? ' ' : (params.customSubTitle ?? 'Buy'), themeColor: '0D0D0D', defaultCryptoCurrency: params.tokenSymbol || 'IMX', - hideMenu: !params.showMenu, + hideMenu: !(params.showMenu ?? true), }; if (params.isPassport && params.email) { From 90841c9d90a544ec09785dd4b0241b73ef446b75 Mon Sep 17 00:00:00 2001 From: priyaleedman Date: Fri, 26 Sep 2025 10:32:46 +1000 Subject: [PATCH 5/5] Updated documented default --- .../sdk/src/widgets/definitions/configurations/onramp.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts index 0df9a8375d..51f132d92e 100644 --- a/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts +++ b/packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts @@ -4,7 +4,7 @@ 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: false) */ + /** 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;