feat(checkout-widgets): Allow hide header on On-Ramp widget (#2723)

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

Author: priyaleedman-imm

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

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

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

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

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

@@ -45,6 +45,7 @@ interface OnRampProps {
   showMenu?: boolean;
   customTitle?: string;
   customSubTitle?: string;
+  showHeader?: boolean;
 }
 export function OnRampMain({
   passport,
@@ -55,6 +56,7 @@ export function OnRampMain({
   showMenu,
   customTitle,
   customSubTitle,
+  showHeader = true,
 }: OnRampProps) {
   const { connectLoaderState } = useContext(ConnectLoaderContext);
   const { checkout, provider } = connectLoaderState;
@@ -275,7 +277,7 @@ export function OnRampMain({
   return (
     <Box sx={boxMainStyle(showIframe)}>
       <SimpleLayout
-        header={(
+        header={showHeader ? (
           <HeaderNavigation
             title={customTitle ?? t('views.ONRAMP.header.title')}
             onCloseButtonClick={() => sendOnRampWidgetCloseEvent(eventTarget)}
@@ -288,7 +290,7 @@ export function OnRampMain({
               );
             }}
           />
-        )}
+        ) : undefined}
         footerBackgroundColor="base.color.translucent.emphasis.200"
       >
         <Box sx={containerStyle(showIframe)}>

packages/checkout/widgets-lib/src/widgets/on-ramp/views/onRampStyles.ts

@@ -1,7 +1,7 @@
 export const containerStyle = (showIframe:boolean) => ({
   position: 'relative',
   maxWidth: '420px',
-  height: '565px',
+  height: '100%',
   borderRadius: 'base.borderRadius.x6',
   overflow: 'hidden',
   marginLeft: 'base.spacing.x2',

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

@@ -300,6 +300,7 @@ function CheckoutUI() {
           customTitle: "Dromedary On-Ramp",
           customSubTitle: "Camel On-Ramp",
           showMenu: true,
+          showHeader: true,
         },
         */
       },