feat(checkout-widgets): Allow hide header on Swap widget (#2724)

Co-authored-by: priyaleedman <[email protected]>

Author: priyaleedman-imm

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

@@ -6,4 +6,5 @@ import { WidgetConfiguration } from './widget';
 export type SwapWidgetConfiguration = {
   customTitle?: string;
   customSubTitle?: string;
+  showHeader?: boolean;
 } & WidgetConfiguration;

packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.tsx

@@ -71,7 +71,7 @@ export default function SwapWidget({
   autoProceed,
   direction,
   showBackButton,
-  swapConfig: { customTitle, customSubTitle },
+  swapConfig: { customTitle, customSubTitle, showHeader },
   walletProviderName,
 }: SwapWidgetInputs) {
   const { t } = useTranslation();
@@ -260,6 +260,7 @@ export default function SwapWidget({
               fromTokenAddress={viewState.view.data?.fromTokenAddress ?? fromTokenAddress}
               toTokenAddress={viewState.view.data?.toTokenAddress ?? toTokenAddress}
               showBackButton={showBackButton}
+              showHeader={showHeader ?? true}
               title={customTitle ?? t('views.SWAP.header.title')}
               subTitle={customSubTitle ?? t('views.SWAP.content.title')}
             />

packages/checkout/widgets-lib/src/widgets/swap/SwapWidgetRoot.tsx

@@ -110,6 +110,7 @@ export class Swap extends Base<WidgetType.SWAP> {
                     swapConfig={{
                       customTitle: this.properties.config?.customTitle,
                       customSubTitle: this.properties.config?.customSubTitle,
+                      showHeader: this.properties.config?.showHeader,
                     }}
                   />
                 </Suspense>

packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.tsx

@@ -32,6 +32,7 @@ export interface SwapCoinsProps {
   fromTokenAddress?: string;
   toTokenAddress?: string;
   showBackButton?: boolean;
+  showHeader?: boolean;
   title: string;
   subTitle: string;
 }
@@ -44,6 +45,7 @@ export function SwapCoins({
   fromTokenAddress,
   toTokenAddress,
   showBackButton,
+  showHeader,
   title,
   subTitle,
 }: SwapCoinsProps) {
@@ -90,7 +92,7 @@ export function SwapCoins({
 
   return (
     <SimpleLayout
-      header={!autoProceed ? (
+      header={!autoProceed && showHeader ? (
         <HeaderNavigation
           title={title}
           onCloseButtonClick={() => sendSwapWidgetCloseEvent(eventTarget)}
@@ -103,7 +105,7 @@ export function SwapCoins({
             );
           }}
         />
-      ) : ''}
+      ) : undefined}
       footer={<QuickswapFooter environment={checkout?.config.environment} theme={theme} />}
     >
       <Box

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

@@ -288,10 +288,14 @@ function CheckoutUI() {
       config: {
         theme,
         language,
+        /*
+        SWAP: {
+          showHeader: true,
+        },
+        */
         CONNECT: {
 
         },
-        // SWAP: {},
         TRANSFER: {
           customTitle: "Dromedary Transfer",
         },