@imtbl/checkout-widgets 2.7.1-alpha.0 → 2.7.1-alpha.1

package/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 && (

package/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>

package/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',

package/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}