Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
priyaleedman-imm merged 6 commits into from
Sep 26, 2025
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8ecac6f
Made title and menu icon customisable
priyaleedman Sep 24, 2025
73c4213
Updated param names, handled empty subtitle logic, changed hide menu …
priyaleedman Sep 24, 2025
74322f0
Fixed param logic
priyaleedman Sep 24, 2025
ff1ee31
Re-fixed menu icon display logic whoops
priyaleedman Sep 24, 2025
dfe246d
Merge branch 'main' into GFI-1187-make-on-ramp-menu-icon-customisable
priyaleedman-imm Sep 26, 2025
90841c9
Updated documented default
priyaleedman Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/checkout/sdk/src/fiatRamp/fiatRamp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export interface FiatRampWidgetParams {
tokenSymbol?: string;
email?: string;
allowedTokens?: string[];
showMenu?: boolean;
customSubTitle?: string;
}

export class FiatRampService {
Expand Down Expand Up @@ -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),

@cursor cursor Bot Sep 26, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Menu Visibility and Title Fallback Issues

The showMenu parameter defaults to showing the menu, which contradicts its documented default of being hidden. Separately, providing an empty string for customSubTitle sets the exchangeScreenTitle to a single space instead of falling back to the default 'Buy'.

Fix in Cursor Fix in Web

@priyaleedman-imm priyaleedman-imm Sep 26, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed documented default - should be shown by default.

Separately, providing an empty string for customSubTitle sets the exchangeScreenTitle to a single space instead of falling back to the default 'Buy'.

This is expected behaviour

};

if (params.isPassport && params.email) {
Expand Down
2 changes: 2 additions & 0 deletions packages/checkout/sdk/src/sdk.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -669,6 +669,8 @@ export class Checkout {
tokenSymbol,
email,
allowedTokens,
showMenu: params.showMenu,
customSubTitle: params.customSubTitle,
} as FiatRampWidgetParams);
}

Expand Down
2 changes: 2 additions & 0 deletions packages/checkout/sdk/src/types/fiatRamp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,6 @@ export interface FiatRampParams {
tokenAmount?: string;
tokenAddress?: string;
passport?: any;
showMenu?: boolean;
customSubTitle?: string;
}
4 changes: 4 additions & 0 deletions packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: false) */
showMenu?: boolean;
/** The custom subtitle to display on the exchange screen in the Transak widget (default: 'Buy') */
customSubTitle?: string;
} & WidgetConfiguration;
2 changes: 1 addition & 1 deletion packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
)}
Expand Down
9 changes: 6 additions & 3 deletions packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -139,6 +140,8 @@ export default function OnRampWidget({
tknAddr ?? viewState.view.data?.tokenAddress
}
showBackButton={showBackButton}
showMenu={onrampConfig?.showMenu}
customSubTitle={onrampConfig?.customSubTitle}
/>
)}

Expand Down
1 change: 1 addition & 0 deletions packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 6 additions & 0 deletions packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -236,6 +240,8 @@ export function OnRampMain({
tokenAddress,
tokenAmount,
passport,
showMenu,
customSubTitle,
};

setWidgetUrl(await checkout.createFiatRampUrl(params));
Expand Down