Custom titles

Author: keithbro-imx

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

@@ -4,6 +4,6 @@ import { WidgetConfiguration } from './widget';
  * Swap Widget Configuration represents the configuration options for the Swap Widget.
  */
 export type SwapWidgetConfiguration = {
-  showTitle?: boolean;
-  showSubTitle?: boolean;
+  customTitle?: string;
+  customSubTitle?: string;
 } & WidgetConfiguration;

packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx

@@ -315,13 +315,8 @@ export default function CommerceWidget(props: CommerceWidgetInputs) {
               {view.type === CommerceFlowType.SWAP && (
                 <SwapWidget
                   config={widgetsConfig}
-                  swapConfig={{
-                    showTitle: true,
-                    showSubTitle: true,
-                    ...view.data.config,
-                  }}
+                  swapConfig={view.data.config}
                   {...(view.data.params || {})}
-                  {...(view.data.config || {})}
                   showBackButton={showBackButton}
                 />
               )}

packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteExecute/FundingRouteExecute.tsx

@@ -319,7 +319,7 @@ export function FundingRouteExecute({
         <BridgeWidget {...bridgeParams!} config={config} checkout={checkout!} />
       )}
       {view === FundingRouteExecuteViews.EXECUTE_SWAP && (
-        <SwapWidget {...swapParams!} config={config} swapConfig={{ showTitle: true, showSubTitle: true }} />
+        <SwapWidget {...swapParams!} config={config} swapConfig={{}} />
       )}
       {view === FundingRouteExecuteViews.EXECUTE_ON_RAMP && (
         <OnRampWidget config={config} {...onRampParams} />

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

@@ -10,6 +10,7 @@ import {
   TokenFilterTypes, IMTBLWidgetEvents, SwapWidgetParams,
   SwapDirection,
   WalletProviderName,
+  SwapWidgetConfiguration,
 } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
 import { SwapCoins } from './views/SwapCoins';
@@ -59,7 +60,7 @@ import { GeoblockLoader } from './GeoblockLoader';
 
 export type SwapWidgetInputs = SwapWidgetParams & {
   config: StrongCheckoutWidgetsConfig;
-  swapConfig: { showTitle: boolean; showSubTitle: boolean };
+  swapConfig: SwapWidgetConfiguration;
 };
 
 export default function SwapWidget({
@@ -70,7 +71,7 @@ export default function SwapWidget({
   autoProceed,
   direction,
   showBackButton,
-  swapConfig: { showTitle, showSubTitle },
+  swapConfig: { customTitle, customSubTitle },
   walletProviderName,
 }: SwapWidgetInputs) {
   const { t } = useTranslation();
@@ -259,8 +260,8 @@ export default function SwapWidget({
               fromTokenAddress={viewState.view.data?.fromTokenAddress ?? fromTokenAddress}
               toTokenAddress={viewState.view.data?.toTokenAddress ?? toTokenAddress}
               showBackButton={showBackButton}
-              showTitle={showTitle}
-              showSubTitle={showSubTitle}
+              title={customTitle ?? t('views.SWAP.header.title')}
+              subTitle={customSubTitle ?? t('views.SWAP.content.title')}
             />
             )}
             {viewState.view.type === SwapWidgetViews.IN_PROGRESS && (

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

@@ -107,8 +107,8 @@ export class Swap extends Base<WidgetType.SWAP> {
                     showBackButton={this.parameters.showBackButton}
                     walletProviderName={this.parameters.walletProviderName}
                     swapConfig={{
-                      showTitle: this.properties.config?.showTitle ?? true,
-                      showSubTitle: this.properties.config?.showSubTitle ?? true,
+                      customTitle: this.properties.config?.customTitle,
+                      customSubTitle: this.properties.config?.customSubTitle,
                     }}
                   />
                 </Suspense>

packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx

@@ -78,7 +78,7 @@ export interface SwapFromProps {
   data?: SwapFormData;
   theme: WidgetTheme;
   cancelAutoProceed: () => void;
-  showSubTitle: boolean;
+  subTitle: string;
 }
 
 class PriceImpactError extends Error {
@@ -89,7 +89,7 @@ class PriceImpactError extends Error {
 }
 
 export function SwapForm({
-  data, theme, cancelAutoProceed, showSubTitle,
+  data, theme, cancelAutoProceed, subTitle,
 }: SwapFromProps) {
   const { t } = useTranslation();
   const {
@@ -109,7 +109,6 @@ export function SwapForm({
     ? NATIVE
     : `${symbol.toLowerCase()}-${address!.toLowerCase()}`), []);
 
-  // const { cryptoFiatState, cryptoFiatDispatch } = useContext(CryptoFiatContext);
   const { conversions: usdConversions } = useCryptoUSDConversion(checkout?.config.environment);
   const { viewDispatch } = useContext(ViewContext);
 
@@ -942,13 +941,13 @@ export function SwapForm({
         marginBottom: 'base.spacing.x2',
       }}
       >
-        {showSubTitle ? (
+        {subTitle !== '' ? (
           <Heading
             size="small"
             weight="regular"
             sx={{ paddingBottom: 'base.spacing.x4' }}
           >
-            {t('views.SWAP.content.title')}
+            {subTitle}
           </Heading>
         ) : null}
         <Box

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

@@ -32,8 +32,8 @@ export interface SwapCoinsProps {
   fromTokenAddress?: string;
   toTokenAddress?: string;
   showBackButton?: boolean;
-  showTitle: boolean;
-  showSubTitle: boolean;
+  title: string;
+  subTitle: string;
 }
 
 export function SwapCoins({
@@ -44,8 +44,8 @@ export function SwapCoins({
   fromTokenAddress,
   toTokenAddress,
   showBackButton,
-  showTitle,
-  showSubTitle,
+  title,
+  subTitle,
 }: SwapCoinsProps) {
   const { t } = useTranslation();
   const { viewDispatch } = useContext(ViewContext);
@@ -92,7 +92,7 @@ export function SwapCoins({
     <SimpleLayout
       header={!autoProceed ? (
         <HeaderNavigation
-          title={showTitle ? t('views.SWAP.header.title') : undefined}
+          title={title}
           onCloseButtonClick={() => sendSwapWidgetCloseEvent(eventTarget)}
           showBack={showBackButton}
           onBackButtonClick={() => {
@@ -123,7 +123,7 @@ export function SwapCoins({
             toTokenAddress,
           }}
           theme={theme}
-          showSubTitle={showSubTitle}
+          subTitle={subTitle}
         />
         <NotEnoughImx
           environment={checkout?.config.environment ?? Environment.PRODUCTION}

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

@@ -288,8 +288,6 @@ function CheckoutUI() {
         theme,
         language,
         SWAP: {
-          // showTitle: false,
-          // showSubTitle: false,
         },
         // TRANSFER: {
         //   // showTitle: false,