feat(checkout-widgets): Make swap widget headers customisable (#2711)

Author: keithbro-imx

.editorconfig

@@ -2,7 +2,13 @@ root = true
 
 # https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties
 
-[*.{yml,yaml}]
+
+[*]
+insert_final_newline = true
+trim_trailing_whitespace = true
 indent_style = space
 indent_size = 2
-quote_type = double
+quote_type = double
+
+[*.{ts,tsx}]
+max_line_length = 120

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

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

packages/checkout/widgets-lib/.eslintrc.cjs

@@ -70,5 +70,6 @@ module.exports = {
     "jsx-a11y/control-has-associated-label": "off",
     "react/jsx-props-no-spreading": "off",
     "implicit-arrow-linebreak": "off",
+    "operator-linebreak": "off",
   }
 }

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

@@ -315,8 +315,8 @@ export default function CommerceWidget(props: CommerceWidgetInputs) {
               {view.type === CommerceFlowType.SWAP && (
                 <SwapWidget
                   config={widgetsConfig}
+                  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} />
+        <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,6 +60,7 @@ import { GeoblockLoader } from './GeoblockLoader';
 
 export type SwapWidgetInputs = SwapWidgetParams & {
   config: StrongCheckoutWidgetsConfig;
+  swapConfig: SwapWidgetConfiguration;
 };
 
 export default function SwapWidget({
@@ -69,6 +71,7 @@ export default function SwapWidget({
   autoProceed,
   direction,
   showBackButton,
+  swapConfig: { customTitle, customSubTitle },
   walletProviderName,
 }: SwapWidgetInputs) {
   const { t } = useTranslation();
@@ -257,6 +260,8 @@ export default function SwapWidget({
               fromTokenAddress={viewState.view.data?.fromTokenAddress ?? fromTokenAddress}
               toTokenAddress={viewState.view.data?.toTokenAddress ?? toTokenAddress}
               showBackButton={showBackButton}
+              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

@@ -106,6 +106,10 @@ export class Swap extends Base<WidgetType.SWAP> {
                     direction={this.parameters.direction ?? SwapDirection.FROM}
                     showBackButton={this.parameters.showBackButton}
                     walletProviderName={this.parameters.walletProviderName}
+                    swapConfig={{
+                      customTitle: this.properties.config?.customTitle,
+                      customSubTitle: this.properties.config?.customSubTitle,
+                    }}
                   />
                 </Suspense>
               </ConnectLoader>

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

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

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

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

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

@@ -198,6 +198,7 @@ function CheckoutUI() {
       amount: "10",
       fromTokenAddress: "native",
       toTokenAddress: "0x3B2d8A1931736Fc321C24864BceEe981B11c3c57",
+      showBackButton: true,
     },
     WALLET: {
       flow: CommerceFlowType.WALLET,
@@ -286,17 +287,15 @@ function CheckoutUI() {
       config: {
         theme,
         language,
-        // SWAP: {},
-        // BRIDGE: {},
-        // CONNECT: {},
-        // ONRAMP: {},
-        SALE: {
-          hideExcludedPaymentTypes: true,
-          waitFulfillmentSettlements: false,
+        SWAP: {
         },
-        WALLET: {
-          showDisconnectButton: true,
-          showNetworkMenu: true,
+        // TRANSFER: {
+        //   showTitle: false,
+        //   showSubTitle: false,
+        // },
+        ONRAMP: {
+          // showTitle: false,
+          // showSubTitle: false,
         },
       },
     });
@@ -397,7 +396,6 @@ function CheckoutUI() {
       const params = new URLSearchParams(window.location.search);
       params.set("environment", environment);
       window.location.href = `${window.location.href}?${params.toString()}`;
-
     }
   }, [environment, prevEnvironment]);