feat(checkout-widgets): Make on-ramp widget header customisable (#2720)

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

Author: priyaleedman-imm

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

@@ -6,6 +6,8 @@ import { WidgetConfiguration } from './widget';
 export type OnrampWidgetConfiguration = {
   /** Whether to show the menu in the Transak widget (default: true) */
   showMenu?: boolean;
+  /** The custom title to display in the widget header */
+  customTitle?: string;
   /** The custom subtitle to display on the exchange screen in the Transak widget (default: 'Buy') */
   customSubTitle?: string;
 } & WidgetConfiguration;

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

@@ -141,6 +141,7 @@ export default function OnRampWidget({
           }
           showBackButton={showBackButton}
           showMenu={onrampConfig?.showMenu}
+          customTitle={onrampConfig?.customTitle}
           customSubTitle={onrampConfig?.customSubTitle}
         />
       )}

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

@@ -43,6 +43,7 @@ interface OnRampProps {
   passport?: Passport;
   showBackButton?: boolean;
   showMenu?: boolean;
+  customTitle?: string;
   customSubTitle?: string;
 }
 export function OnRampMain({
@@ -52,6 +53,7 @@ export function OnRampMain({
   tokenAddress,
   showBackButton,
   showMenu,
+  customTitle,
   customSubTitle,
 }: OnRampProps) {
   const { connectLoaderState } = useContext(ConnectLoaderContext);
@@ -275,7 +277,7 @@ export function OnRampMain({
       <SimpleLayout
         header={(
           <HeaderNavigation
-            title={t('views.ONRAMP.header.title')}
+            title={customTitle ?? t('views.ONRAMP.header.title')}
             onCloseButtonClick={() => sendOnRampWidgetCloseEvent(eventTarget)}
             showBack={showBack}
             onBackButtonClick={() => {

packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx

@@ -291,7 +291,13 @@ function CheckoutUI() {
         TRANSFER: {
           customTitle: "Dromedary Transfer",
         },
-        // ONRAMP: {},
+        /*
+        ONRAMP: {
+          customTitle: "Dromedary On-Ramp",
+          customSubTitle: "Camel On-Ramp",
+          showMenu: true,
+        },
+        */
       },
     });
   }, [widgetsFactory, browserProvider, renderAfterConnect]);