@imtbl/sdk 1.52.0 → 1.52.1-alpha.1

package/dist/browser/checkout/widgets.js

@@ -126214,6 +126214,7 @@
       OrchestrationEventType["REQUEST_BRIDGE"] = "request-bridge";
       OrchestrationEventType["REQUEST_ONRAMP"] = "request-onramp";
       OrchestrationEventType["REQUEST_ADD_FUNDS"] = "request-add-funds";
+      OrchestrationEventType["REQUEST_GO_BACK"] = "request-go-back";
   })(OrchestrationEventType || (OrchestrationEventType = {}));
 
   /**
@@ -126274,7 +126275,6 @@
       AddFundsEventType["REQUEST_BRIDGE"] = "request-bridge";
       AddFundsEventType["REQUEST_ONRAMP"] = "request-onramp";
       AddFundsEventType["REQUEST_SWAP"] = "request-swap";
-      AddFundsEventType["GO_BACK"] = "go-back";
   })(AddFundsEventType || (AddFundsEventType = {}));
 
   /**
@@ -126800,6 +126800,7 @@
       PostMessageHandlerEventType["PROVIDER_UPDATED"] = "IMTBL_PROVIDER_UPDATED";
       PostMessageHandlerEventType["EIP_6963_EVENT"] = "IMTBL_EIP_6963_EVENT";
       PostMessageHandlerEventType["WIDGET_EVENT"] = "IMTBL_CHECKOUT_WIDGET_EVENT";
+      PostMessageHandlerEventType["WIDGET_PROVIDER_EVENT"] = "IMTBL_WIDGET_PROVIDER_EVENT";
   })(PostMessageHandlerEventType || (PostMessageHandlerEventType = {}));
 
   class PostMessageHandler {
@@ -193869,10 +193870,25 @@ function print() { __p += __j.call(arguments, '') }
       if (eventTarget !== undefined)
           eventTarget.dispatchEvent(requestBridgeEvent);
   }
+  function sendRequestGoBackEvent(eventTarget, imtblWidgetEvent, eventData) {
+      // eslint-disable-next-line max-len
+      const requestGoBackEvent = new CustomEvent(imtblWidgetEvent, {
+          detail: {
+              type: OrchestrationEventType.REQUEST_GO_BACK,
+              data: eventData,
+          },
+      });
+      // TODO: please remove or if necessary keep the eslint ignore
+      // eslint-disable-next-line no-console
+      console.log(`go back event from ${imtblWidgetEvent}:`, eventTarget, requestGoBackEvent);
+      if (eventTarget !== undefined)
+          eventTarget.dispatchEvent(requestGoBackEvent);
+  }
   const orchestrationEvents = {
       sendRequestBridgeEvent,
       sendRequestSwapEvent,
       sendRequestOnrampEvent,
+      sendRequestGoBackEvent,
   };
 
   const topUpBridgeOption = (isBridgeEnabled, isNotPassport) => {
@@ -194059,7 +194075,7 @@ function print() { __p += __j.call(arguments, '') }
               allowedChains: [getL2ChainId(this.checkout.config)],
           };
           const topUpOptions = this.topUpOptions();
-          this.reactRoot.render(jsx$1(React.StrictMode, { children: jsx$1(CustomAnalyticsProvider, { checkout: this.checkout, children: jsx$1(ThemeProvider, { id: "swap-container", config: this.strongConfig(), children: jsx$1(HandoverProvider, { children: jsx$1(GeoblockLoader, { checkout: this.checkout, widget: (jsx$1(ConnectLoader, { params: connectLoaderParams, widgetConfig: this.strongConfig(), closeEvent: () => sendSwapWidgetCloseEvent(window), children: jsx$1(reactExports.Suspense, { fallback: jsx$1(LoadingView, { loadingText: t('views.LOADING_VIEW.text') }), children: jsx$1(SwapWidget$2, { fromTokenAddress: this.parameters.fromTokenAddress, toTokenAddress: this.parameters.toTokenAddress, amount: this.parameters.amount, config: this.strongConfig(), autoProceed: this.parameters.autoProceed, direction: this.parameters.direction ?? SwapDirection$1.FROM }) }) })), serviceUnavailableView: (jsx$1(ServiceUnavailableErrorView, { service: ServiceType.SWAP, onCloseClick: () => sendSwapWidgetCloseEvent(window), primaryActionText: topUpOptions && topUpOptions?.length > 0
+          this.reactRoot.render(jsx$1(React.StrictMode, { children: jsx$1(CustomAnalyticsProvider, { checkout: this.checkout, children: jsx$1(ThemeProvider, { id: "swap-container", config: this.strongConfig(), children: jsx$1(HandoverProvider, { children: jsx$1(GeoblockLoader, { checkout: this.checkout, widget: (jsx$1(ConnectLoader, { params: connectLoaderParams, widgetConfig: this.strongConfig(), closeEvent: () => sendSwapWidgetCloseEvent(window), children: jsx$1(reactExports.Suspense, { fallback: jsx$1(LoadingView, { loadingText: t('views.LOADING_VIEW.text') }), children: jsx$1(SwapWidget$2, { fromTokenAddress: this.parameters.fromTokenAddress, toTokenAddress: this.parameters.toTokenAddress, amount: this.parameters.amount, config: this.strongConfig(), autoProceed: this.parameters.autoProceed, direction: this.parameters.direction ?? SwapDirection$1.FROM, showBackButton: this.parameters.showBackButton }) }) })), serviceUnavailableView: (jsx$1(ServiceUnavailableErrorView, { service: ServiceType.SWAP, onCloseClick: () => sendSwapWidgetCloseEvent(window), primaryActionText: topUpOptions && topUpOptions?.length > 0
                                       ? t(topUpOptions[0].textKey)
                                       : undefined, onPrimaryButtonClick: topUpOptions && topUpOptions?.length > 0
                                       ? topUpOptions[0].action
@@ -194158,7 +194174,7 @@ function print() { __p += __j.call(arguments, '') }
               checkout: this.checkout,
               allowedChains: [getL1ChainId(this.checkout.config), getL2ChainId(this.checkout.config)],
           };
-          this.reactRoot.render(jsx$1(React.StrictMode, { children: jsx$1(CustomAnalyticsProvider, { checkout: this.checkout, children: jsx$1(ThemeProvider, { id: "onramp-container", config: this.strongConfig(), children: jsx$1(HandoverProvider, { children: jsx$1(ConnectLoader, { widgetConfig: this.strongConfig(), params: connectLoaderParams, closeEvent: () => sendOnRampWidgetCloseEvent(window), children: jsx$1(reactExports.Suspense, { fallback: jsx$1(LoadingView, { loadingText: t('views.ONRAMP.initialLoadingText') }), children: jsx$1(OnRampWidget$2, { tokenAddress: this.parameters.tokenAddress, amount: this.parameters.amount, config: this.strongConfig() }) }) }) }) }) }) }));
+          this.reactRoot.render(jsx$1(React.StrictMode, { children: jsx$1(CustomAnalyticsProvider, { checkout: this.checkout, children: jsx$1(ThemeProvider, { id: "onramp-container", config: this.strongConfig(), children: jsx$1(HandoverProvider, { children: jsx$1(ConnectLoader, { widgetConfig: this.strongConfig(), params: connectLoaderParams, closeEvent: () => sendOnRampWidgetCloseEvent(window), children: jsx$1(reactExports.Suspense, { fallback: jsx$1(LoadingView, { loadingText: t('views.ONRAMP.initialLoadingText') }), children: jsx$1(OnRampWidget$2, { tokenAddress: this.parameters.tokenAddress, amount: this.parameters.amount, config: this.strongConfig(), showBackButton: this.parameters.showBackButton }) }) }) }) }) }) }));
       }
   }
 
@@ -194350,14 +194366,27 @@ function print() { __p += __j.call(arguments, '') }
   class Sale extends Base$3 {
       eventTopic = IMTBLWidgetEvents.IMTBL_SALE_WIDGET_EVENT;
       // TODO: add specific validation logic for the sale items
-      isValidProucts(products) {
+      isValidArray(items) {
           try {
-              return Array.isArray(products);
+              return Array.isArray(items);
           }
           catch {
               return false;
           }
       }
+      deduplicateItems(items) {
+          if (!items || !this.isValidArray(items))
+              return [];
+          const uniqueItems = items.reduce((acc, item) => {
+              const itemIndex = acc.findIndex(({ productId }) => productId === item.productId);
+              if (itemIndex !== -1) {
+                  acc[itemIndex] = { ...item, qty: acc[itemIndex].qty + item.qty };
+                  return acc;
+              }
+              return [...acc, { ...item }];
+          }, []);
+          return uniqueItems;
+      }
       getValidatedProperties({ config, }) {
           let validatedConfig;
           if (config) {
@@ -194378,8 +194407,7 @@ function print() { __p += __j.call(arguments, '') }
               console.warn('[IMTBL]: invalid "walletProviderName" widget input');
               validatedParams.walletProviderName = undefined;
           }
-          // TODO: fix the logic here when proper , currently saying if valid then reset to empty array.
-          if (!this.isValidProucts(params.items ?? [])) {
+          if (!this.isValidArray(params.items)) {
               // eslint-disable-next-line no-console
               console.warn('[IMTBL]: invalid "items" widget input.');
               validatedParams.items = [];
@@ -194400,7 +194428,10 @@ function print() { __p += __j.call(arguments, '') }
               console.warn('[IMTBL]: invalid "excludePaymentTypes" widget input');
               validatedParams.excludePaymentTypes = [];
           }
-          return validatedParams;
+          return {
+              ...validatedParams,
+              items: this.deduplicateItems(params.items),
+          };
       }
       render() {
           if (!this.reactRoot)
@@ -194461,7 +194492,7 @@ function print() { __p += __j.call(arguments, '') }
           if (!this.reactRoot)
               return;
           const { t } = instance;
-          this.reactRoot.render(jsx$1(React.StrictMode, { children: jsx$1(CustomAnalyticsProvider, { checkout: this.checkout, children: jsx$1(ThemeProvider, { id: "bridge-container", config: this.strongConfig(), children: jsx$1(HandoverProvider, { children: jsx$1(reactExports.Suspense, { fallback: jsx$1(LoadingView, { loadingText: t('views.LOADING_VIEW.text') }), children: jsx$1(BridgeWidget$2, { checkout: this.checkout, config: this.strongConfig(), web3Provider: this.web3Provider, tokenAddress: this.parameters.tokenAddress, amount: this.parameters.amount, walletProviderName: this.parameters.walletProviderName }) }) }) }) }) }));
+          this.reactRoot.render(jsx$1(React.StrictMode, { children: jsx$1(CustomAnalyticsProvider, { checkout: this.checkout, children: jsx$1(ThemeProvider, { id: "bridge-container", config: this.strongConfig(), children: jsx$1(HandoverProvider, { children: jsx$1(reactExports.Suspense, { fallback: jsx$1(LoadingView, { loadingText: t('views.LOADING_VIEW.text') }), children: jsx$1(BridgeWidget$2, { checkout: this.checkout, config: this.strongConfig(), web3Provider: this.web3Provider, tokenAddress: this.parameters.tokenAddress, amount: this.parameters.amount, walletProviderName: this.parameters.walletProviderName, showBackButton: !!this.parameters.showBackButton }) }) }) }) }) }));
       }
   };
 
@@ -194510,20 +194541,6 @@ function print() { __p += __j.call(arguments, '') }
       if (eventTarget !== undefined)
           eventTarget.dispatchEvent(closeWidgetEvent);
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function sendAddFundsGoBackEvent(eventTarget) {
-      const closeWidgetEvent = new CustomEvent(IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, {
-          detail: {
-              type: AddFundsEventType.GO_BACK,
-              data: {},
-          },
-      });
-      // TODO: please remove or if necessary keep the eslint ignore
-      // eslint-disable-next-line no-console
-      console.log('go back event:', closeWidgetEvent);
-      if (eventTarget !== undefined)
-          eventTarget.dispatchEvent(closeWidgetEvent);
-  }
 
   const AddFundsWidget$2 = React.lazy(() => Promise.resolve().then(function () { return AddFundsWidget$1; }));
   let AddFunds$1 = class AddFunds extends Base$3 {
@@ -194543,10 +194560,10 @@ function print() { __p += __j.call(arguments, '') }
       }
       getValidatedParameters(params) {
           const validatedParams = params;
-          if (!isValidAmount(params.amount)) {
+          if (!isValidAmount(params.toAmount)) {
               // eslint-disable-next-line no-console
-              console.warn('[IMTBL]: invalid "amount" widget input');
-              validatedParams.amount = '';
+              console.warn('[IMTBL]: invalid "toAmount" widget input');
+              validatedParams.toAmount = '';
           }
           return validatedParams;
       }
@@ -194565,7 +194582,7 @@ function print() { __p += __j.call(arguments, '') }
                   getL2ChainId(this.checkout.config),
               ],
           };
-          this.reactRoot.render(jsx$1(React.StrictMode, { children: jsx$1(CustomAnalyticsProvider, { checkout: this.checkout, children: jsx$1(ThemeProvider, { id: "add-funds-container", config: this.strongConfig(), children: jsx$1(HandoverProvider, { children: jsx$1(ConnectLoader, { widgetConfig: this.strongConfig(), params: connectLoaderParams, closeEvent: () => sendAddFundsCloseEvent(window), children: jsx$1(reactExports.Suspense, { fallback: jsx$1(LoadingView, { loadingText: t('views.LOADING_VIEW.text') }), children: jsx$1(AddFundsWidget$2, { checkout: this.checkout, web3Provider: this.web3Provider, showBridgeOption: this.parameters.showBridgeOption, showSwapOption: this.parameters.showSwapOption, showOnrampOption: this.parameters.showOnrampOption, tokenAddress: this.parameters.tokenAddress, amount: this.parameters.amount }) }) }) }) }) }) }));
+          this.reactRoot.render(jsx$1(React.StrictMode, { children: jsx$1(CustomAnalyticsProvider, { checkout: this.checkout, children: jsx$1(ThemeProvider, { id: "add-funds-container", config: this.strongConfig(), children: jsx$1(HandoverProvider, { children: jsx$1(ConnectLoader, { widgetConfig: this.strongConfig(), params: connectLoaderParams, closeEvent: () => sendAddFundsCloseEvent(window), children: jsx$1(reactExports.Suspense, { fallback: jsx$1(LoadingView, { loadingText: t('views.LOADING_VIEW.text') }), children: jsx$1(AddFundsWidget$2, { checkout: this.checkout, web3Provider: this.web3Provider, showBridgeOption: this.parameters.showBridgeOption, showSwapOption: this.parameters.showSwapOption, showOnrampOption: this.parameters.showOnrampOption, toTokenAddress: this.parameters.toTokenAddress, toAmount: this.parameters.toAmount, showBackButton: this.parameters.showBackButton }) }) }) }) }) }) }));
       }
   };
 
@@ -206521,7 +206538,7 @@ function print() { __p += __j.call(arguments, '') }
       return zeroBalance;
   };
 
-  function SwapCoins({ theme, cancelAutoProceed, fromAmount, toAmount, fromTokenAddress, toTokenAddress, }) {
+  function SwapCoins({ theme, cancelAutoProceed, fromAmount, toAmount, fromTokenAddress, toTokenAddress, showBackButton, }) {
       const { t } = useTranslation();
       const { viewDispatch } = reactExports.useContext(ViewContext);
       const { eventTargetState: { eventTarget } } = reactExports.useContext(EventTargetContext);
@@ -206546,7 +206563,9 @@ function print() { __p += __j.call(arguments, '') }
               setShowNotEnoughImxDrawer(true);
           }
       }, [tokenBalances]);
-      return (jsxs(SimpleLayout, { header: !autoProceed ? (jsx$1(HeaderNavigation, { title: t('views.SWAP.header.title'), onCloseButtonClick: () => sendSwapWidgetCloseEvent(eventTarget) })) : '', footer: jsx$1(QuickswapFooter, { environment: checkout?.config.environment, theme: theme }), children: [jsxs(Box, { sx: {
+      return (jsxs(SimpleLayout, { header: !autoProceed ? (jsx$1(HeaderNavigation, { title: t('views.SWAP.header.title'), onCloseButtonClick: () => sendSwapWidgetCloseEvent(eventTarget), showBack: showBackButton, onBackButtonClick: () => {
+                  orchestrationEvents.sendRequestGoBackEvent(eventTarget, IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT, {});
+              } })) : '', footer: jsx$1(QuickswapFooter, { environment: checkout?.config.environment, theme: theme }), children: [jsxs(Box, { sx: {
                       height: '100%',
                       display: 'flex',
                       flexDirection: 'column',
@@ -207468,7 +207487,7 @@ function print() { __p += __j.call(arguments, '') }
       return { allowList, allowedBalances };
   };
 
-  function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProceed, direction, }) {
+  function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProceed, direction, showBackButton, }) {
       const { t } = useTranslation();
       const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
       const { environment, theme, isOnRampEnabled, isSwapEnabled, isBridgeEnabled, } = config;
@@ -207581,7 +207600,7 @@ function print() { __p += __j.call(arguments, '') }
       }, [autoProceed, swapDispatch]);
       const fromAmount = direction === SwapDirection$1.FROM || direction == null ? amount : undefined;
       const toAmount = direction === SwapDirection$1.TO ? amount : undefined;
-      return (jsx$1(ViewContext.Provider, { value: viewReducerValues, children: jsx$1(SwapContext.Provider, { value: swapReducerValues, children: jsxs(CryptoFiatProvider, { environment: environment, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx$1(LoadingView, { loadingText: t('views.LOADING_VIEW.text') })), viewState.view.type === SwapWidgetViews.SWAP && (jsx$1(SwapCoins, { theme: theme, cancelAutoProceed: cancelAutoProceed, fromAmount: viewState.view.data?.fromAmount ?? fromAmount, toAmount: viewState.view.data?.toAmount ?? toAmount, fromTokenAddress: viewState.view.data?.fromTokenAddress ?? fromTokenAddress, toTokenAddress: viewState.view.data?.toTokenAddress ?? toTokenAddress })), viewState.view.type === SwapWidgetViews.IN_PROGRESS && (jsx$1(SwapInProgress, { transactionResponse: viewState.view.data.transactionResponse, swapForm: viewState.view.data.swapForm })), viewState.view.type === SwapWidgetViews.APPROVE_ERC20 && (jsx$1(ApproveERC20Onboarding, { data: viewState.view.data })), viewState.view.type === SwapWidgetViews.SUCCESS && (jsx$1(StatusView, { statusText: t('views.SWAP.success.text'), actionText: t('views.SWAP.success.actionText'), onRenderEvent: () => {
+      return (jsx$1(ViewContext.Provider, { value: viewReducerValues, children: jsx$1(SwapContext.Provider, { value: swapReducerValues, children: jsxs(CryptoFiatProvider, { environment: environment, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx$1(LoadingView, { loadingText: t('views.LOADING_VIEW.text') })), viewState.view.type === SwapWidgetViews.SWAP && (jsx$1(SwapCoins, { theme: theme, cancelAutoProceed: cancelAutoProceed, fromAmount: viewState.view.data?.fromAmount ?? fromAmount, toAmount: viewState.view.data?.toAmount ?? toAmount, fromTokenAddress: viewState.view.data?.fromTokenAddress ?? fromTokenAddress, toTokenAddress: viewState.view.data?.toTokenAddress ?? toTokenAddress, showBackButton: showBackButton })), viewState.view.type === SwapWidgetViews.IN_PROGRESS && (jsx$1(SwapInProgress, { transactionResponse: viewState.view.data.transactionResponse, swapForm: viewState.view.data.swapForm })), viewState.view.type === SwapWidgetViews.APPROVE_ERC20 && (jsx$1(ApproveERC20Onboarding, { data: viewState.view.data })), viewState.view.type === SwapWidgetViews.SUCCESS && (jsx$1(StatusView, { statusText: t('views.SWAP.success.text'), actionText: t('views.SWAP.success.actionText'), onRenderEvent: () => {
                               page({
                                   userJourney: UserJourney.SWAP,
                                   screen: 'SwapSuccess',
@@ -208999,17 +209018,19 @@ function print() { __p += __j.call(arguments, '') }
 
   const transakIframeId = 'transak-iframe';
   const IN_PROGRESS_VIEW_DELAY_MS = 6000; // 6 second
-  function OnRampMain({ passport, showIframe, tokenAmount, tokenAddress, }) {
+  function OnRampMain({ passport, showIframe, tokenAmount, tokenAddress, showBackButton, }) {
       const { connectLoaderState } = reactExports.useContext(ConnectLoaderContext);
       const { checkout, provider } = connectLoaderState;
-      const { eventTargetState: { eventTarget } } = reactExports.useContext(EventTargetContext);
+      const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
       const { t } = useTranslation();
       const { viewState, viewDispatch } = reactExports.useContext(ViewContext);
       const [widgetUrl, setWidgetUrl] = reactExports.useState('');
       const eventTimer = reactExports.useRef();
       const isPassport = !!passport && provider?.provider?.isPassport;
-      const showBackButton = reactExports.useMemo(() => viewState.history.length > 2
-          && viewState.history[viewState.history.length - 2].type === SharedViews.TOP_UP_VIEW, [viewState.history]);
+      const openedFromTopUpView = reactExports.useMemo(() => viewState.history.length > 2
+          && viewState.history[viewState.history.length - 2].type
+              === SharedViews.TOP_UP_VIEW, [viewState.history]);
+      const showBack = showBackButton || openedFromTopUpView;
       const { track } = useAnalytics();
       const trackSegmentEvents = async (event, walletAddress) => {
           const miscProps = {
@@ -209164,15 +209185,21 @@ function print() { __p += __j.call(arguments, '') }
                   return;
               const host = url.parse(event.origin)?.host?.toLowerCase();
               if (event.source === domIframe.contentWindow
-                  && host && TRANSAK_ORIGIN.includes(host)) {
+                  && host
+                  && TRANSAK_ORIGIN.includes(host)) {
                   trackSegmentEvents(event.data, userWalletAddress);
                   transakEventHandler(event.data);
               }
           };
           window.addEventListener('message', handleTransakEvents);
       }, [checkout, provider, tokenAmount, tokenAddress, passport]);
-      return (jsx$1(Box, { sx: boxMainStyle(showIframe), children: jsx$1(SimpleLayout, { header: (jsx$1(HeaderNavigation, { showBack: showBackButton, title: t('views.ONRAMP.header.title'), onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) })), footerBackgroundColor: "base.color.translucent.emphasis.200", children: jsx$1(Box, { sx: containerStyle$1(showIframe), children: jsx$1("iframe", { title: "Transak", id: transakIframeId, src: widgetUrl, allow: "camera;microphone;fullscreen;payment", style: {
-                          height: '100%', width: '100%', border: 'none', position: 'absolute',
+      return (jsx$1(Box, { sx: boxMainStyle(showIframe), children: jsx$1(SimpleLayout, { header: (jsx$1(HeaderNavigation, { title: t('views.ONRAMP.header.title'), onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget), showBack: showBack, onBackButtonClick: () => {
+                      orchestrationEvents.sendRequestGoBackEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT, {});
+                  } })), footerBackgroundColor: "base.color.translucent.emphasis.200", children: jsx$1(Box, { sx: containerStyle$1(showIframe), children: jsx$1("iframe", { title: "Transak", id: transakIframeId, src: widgetUrl, allow: "camera;microphone;fullscreen;payment", style: {
+                          height: '100%',
+                          width: '100%',
+                          border: 'none',
+                          position: 'absolute',
                       } }) }) }) }));
   }
 
@@ -209182,7 +209209,7 @@ function print() { __p += __j.call(arguments, '') }
       return (jsx$1(SimpleLayout, { testId: "order-in-progress-view", header: (jsx$1(HeaderNavigation, { transparent: true, onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) })), footer: (jsx$1(FooterLogo, {})), heroContent: jsx$1(SpendingCapHero, {}), floatHeader: true, children: jsxs(SimpleTextBody, { heading: t('views.ONRAMP.IN_PROGRESS.content.heading'), children: [t('views.ONRAMP.IN_PROGRESS.content.body1'), jsx$1("br", {}), jsx$1("br", {}), t('views.ONRAMP.IN_PROGRESS.content.body2')] }) }));
   }
 
-  function OnRampWidget({ amount, tokenAddress, config, }) {
+  function OnRampWidget({ amount, tokenAddress, config, showBackButton, }) {
       const { isOnRampEnabled, isSwapEnabled, isBridgeEnabled, } = config;
       const [viewState, viewDispatch] = reactExports.useReducer(viewReducer, {
           ...initialViewState,
@@ -209225,7 +209252,7 @@ function print() { __p += __j.call(arguments, '') }
                           },
                       });
                   }, statusType: StatusType.FAILURE, onCloseClick: () => sendOnRampWidgetCloseEvent(eventTarget), testId: "fail-view" })), (viewState.view.type !== OnRampWidgetViews.SUCCESS
-                  && viewState.view.type !== OnRampWidgetViews.FAIL) && (jsx$1(OnRampMain, { passport: checkout?.passport, showIframe: showIframe, tokenAmount: amount ?? viewState.view.data?.amount, tokenAddress: tknAddr ?? viewState.view.data?.tokenAddress })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx$1(TopUpView, { analytics: { userJourney: UserJourney.ON_RAMP }, widgetEvent: IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT, checkout: checkout, provider: provider, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) }))] }));
+                  && viewState.view.type !== OnRampWidgetViews.FAIL) && (jsx$1(OnRampMain, { passport: checkout?.passport, showIframe: showIframe, tokenAmount: amount ?? viewState.view.data?.amount, tokenAddress: tknAddr ?? viewState.view.data?.tokenAddress, showBackButton: showBackButton })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx$1(TopUpView, { analytics: { userJourney: UserJourney.ON_RAMP }, widgetEvent: IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT, checkout: checkout, provider: provider, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) }))] }));
   }
 
   var OnRampWidget$1 = /*#__PURE__*/Object.freeze({
@@ -209610,9 +209637,10 @@ function print() { __p += __j.call(arguments, '') }
           ...balanceResult,
           token: {
               ...balanceResult.token,
-              icon: getTokenImageByAddress(checkout.config.environment, isNativeToken(balanceResult.token.address)
-                  ? balanceResult.token.symbol
-                  : balanceResult.token.address ?? ''),
+              icon: balanceResult.token.icon
+                  ?? getTokenImageByAddress(checkout.config.environment, isNativeToken(balanceResult.token.address)
+                      ? balanceResult.token.symbol
+                      : balanceResult.token.address ?? ''),
           },
       }));
       return sortedTokens;
@@ -213844,7 +213872,7 @@ function print() { __p += __j.call(arguments, '') }
                           }, environment: environment }), jsx$1(Box, { sx: submitButtonWrapperStyles, children: jsx$1(Button, { testId: `${testId$1}-submit-button`, size: "large", onClick: handleSubmitDetails, children: t('views.WALLET_NETWORK_SELECTION.submitButton.text') }) })] }))] }));
   }
 
-  function WalletNetworkSelectionView() {
+  function WalletNetworkSelectionView({ showBackButton, }) {
       const { t } = useTranslation();
       const { viewDispatch } = reactExports.useContext(ViewContext);
       const { eventTargetState: { eventTarget } } = reactExports.useContext(EventTargetContext);
@@ -213862,7 +213890,9 @@ function print() { __p += __j.call(arguments, '') }
                               view: { type: BridgeWidgetViews.TRANSACTIONS },
                           },
                       });
-                  }, testId: "move-transactions-button" })) })), footer: jsx$1(FooterLogo, {}), children: jsx$1(WalletAndNetworkSelector, {}) }));
+                  }, testId: "move-transactions-button" })), showBack: showBackButton, onBackButtonClick: () => {
+                  orchestrationEvents.sendRequestGoBackEvent(eventTarget, IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, {});
+              } })), footer: jsx$1(FooterLogo, {}), children: jsx$1(WalletAndNetworkSelector, {}) }));
   }
 
   function validateToken(fromToken) {
@@ -215279,7 +215309,7 @@ function print() { __p += __j.call(arguments, '') }
                               : handleWithdrawalClaimClick({ forceChangeAccount: true })), children: loading || txProcessing ? (jsx$1(Button.Icon, { icon: "Loading", sx: { width: 'base.icon.size.400' } })) : t(`views.CLAIM_WITHDRAWAL.${hasWithdrawError ? 'footer.retryText' : 'footer.buttonText'}`) }) }), jsx$1(FooterLogo, {})] })), children: [jsxs(SimpleTextBody, { heading: `${t('views.CLAIM_WITHDRAWAL.content.heading')} ${getChainNameById(getL1ChainId(checkout.config))}`, children: [jsx$1(Box, { sx: { display: 'flex', flexWrap: 'wrap', pb: 'base.spacing.x1' }, children: t('views.CLAIM_WITHDRAWAL.content.body') }), jsxs(Box, { children: [t('views.CLAIM_WITHDRAWAL.content.body2'), jsx$1(EllipsizedText, { text: transaction.details.to_address.toLowerCase() ?? '' })] })] }), jsx$1(NotEnoughEthToWithdraw, { visible: showNotEnoughEthDrawer, onClose: () => setShowNotEnoughEthDrawer(false), onChangeAccount: () => handleWithdrawalClaimClick({ forceChangeAccount: true }) })] }));
   }
 
-  function BridgeWidget({ checkout, web3Provider, config, amount, tokenAddress, }) {
+  function BridgeWidget({ checkout, web3Provider, config, amount, tokenAddress, showBackButton, }) {
       const { t } = useTranslation();
       const { environment, isOnRampEnabled, isSwapEnabled, isBridgeEnabled, theme, } = config;
       const defaultTokenImage = getDefaultTokenImage(checkout.config.environment, theme);
@@ -215373,7 +215403,7 @@ function print() { __p += __j.call(arguments, '') }
               });
           })();
       }, [web3Provider]);
-      return (jsx$1(ViewContext.Provider, { value: viewReducerValues, children: jsx$1(BridgeContext.Provider, { value: bridgeReducerValues, children: jsxs(CryptoFiatProvider, { environment: environment, children: [viewState.view.type === BridgeWidgetViews.WALLET_NETWORK_SELECTION && (jsx$1(WalletNetworkSelectionView, {})), viewState.view.type === BridgeWidgetViews.BRIDGE_FORM && (jsx$1(Bridge, { amount: amount, tokenAddress: tokenAddress, defaultTokenImage: defaultTokenImage, theme: theme })), viewState.view.type === BridgeWidgetViews.BRIDGE_REVIEW && (jsx$1(BridgeReview, {})), viewState.view.type === BridgeWidgetViews.IN_PROGRESS && (jsx$1(MoveInProgress, { transactionHash: viewState.view.transactionHash, isTransfer: viewState.view.isTransfer })), viewState.view.type === BridgeWidgetViews.BRIDGE_FAILURE
+      return (jsx$1(ViewContext.Provider, { value: viewReducerValues, children: jsx$1(BridgeContext.Provider, { value: bridgeReducerValues, children: jsxs(CryptoFiatProvider, { environment: environment, children: [viewState.view.type === BridgeWidgetViews.WALLET_NETWORK_SELECTION && (jsx$1(WalletNetworkSelectionView, { showBackButton: showBackButton })), viewState.view.type === BridgeWidgetViews.BRIDGE_FORM && (jsx$1(Bridge, { amount: amount, tokenAddress: tokenAddress, defaultTokenImage: defaultTokenImage, theme: theme })), viewState.view.type === BridgeWidgetViews.BRIDGE_REVIEW && (jsx$1(BridgeReview, {})), viewState.view.type === BridgeWidgetViews.IN_PROGRESS && (jsx$1(MoveInProgress, { transactionHash: viewState.view.transactionHash, isTransfer: viewState.view.isTransfer })), viewState.view.type === BridgeWidgetViews.BRIDGE_FAILURE
                           && (jsx$1(StatusView, { testId: "bridge-fail", statusText: t('views.BRIDGE_FAILURE.bridgeFailureText.statusText'), actionText: t('views.BRIDGE_FAILURE.bridgeFailureText.actionText'), onActionClick: goBackToReview, statusType: StatusType.FAILURE, onRenderEvent: () => {
                                   let reason = '';
                                   if (viewState.view.type === BridgeWidgetViews.BRIDGE_FAILURE) {
@@ -216008,6 +216038,8 @@ function print() { __p += __j.call(arguments, '') }
           postMessageHandler?.send(PostMessageHandlerEventType.EIP_6963_EVENT, {
               message: 'eip6963:announceProvider',
               info: event.detail.info,
+              isPassport: event.detail.provider?.isPassport,
+              isMetamask: event.detail.provider?.isMetamask,
           });
       }, [postMessageHandler]);
       reactExports.useEffect(() => {
@@ -216033,6 +216065,11 @@ function print() { __p += __j.call(arguments, '') }
       }, [postMessageHandler, onRequest]);
   }
 
+  var ConnectMethods;
+  (function (ConnectMethods) {
+      ConnectMethods["REQUEST_ACCOUNTS"] = "eth_requestAccounts";
+      ConnectMethods["REQUEST_PERMISSIONS"] = "wallet_requestPermissions";
+  })(ConnectMethods || (ConnectMethods = {}));
   function useProviderRelay() {
       const [{ checkout, postMessageHandler, provider }, checkoutDispatch] = useCheckoutContext();
       const unsubscribePostMessageHandler = reactExports.useRef();
@@ -216059,11 +216096,7 @@ function print() { __p += __j.call(arguments, '') }
               });
           }
           catch (error) {
-              // Send the error using the postMessageHandler
-              postMessageHandler.send(PostMessageHandlerEventType.PROVIDER_RELAY, {
-                  response: { id: payload.jsonRpcRequestMessage.id, error: error.message, jsonrpc: '2.0' },
-                  eip6963Info: payload.eip6963Info,
-              });
+              throw new Error(error);
           }
       }, [postMessageHandler]);
       /**
@@ -216082,26 +216115,25 @@ function print() { __p += __j.call(arguments, '') }
               console.error('PARENT - requested provider not found', providerRelayPayload?.eip6963Info, injectedProviders);
               return;
           }
-          // If provider is not defined, connect the target provider
           let currentProvider = provider;
+          // If provider is not defined, create a provider
           if (!currentProvider && targetProvider) {
-              const connectResponse = await checkout.connect({
-                  provider: new Web3Provider(targetProvider.provider),
-              });
-              currentProvider = connectResponse.provider;
-              // Set provider and execute the request
-              checkoutDispatch({
-                  payload: {
-                      type: CheckoutActions.SET_PROVIDER,
-                      provider: currentProvider,
-                  },
-              });
+              currentProvider = new Web3Provider(targetProvider.provider);
           }
           if (!currentProvider) {
               throw new Error('Provider is not defined');
           }
           try {
               await execute(providerRelayPayload, currentProvider);
+              if (providerRelayPayload.jsonRpcRequestMessage.method === ConnectMethods.REQUEST_ACCOUNTS
+                  || providerRelayPayload.jsonRpcRequestMessage.method === ConnectMethods.REQUEST_PERMISSIONS) {
+                  checkoutDispatch({
+                      payload: {
+                          type: CheckoutActions.SET_PROVIDER,
+                          provider: currentProvider,
+                      },
+                  });
+              }
           }
           catch (error) {
               // Send the error using the postMessageHandler
@@ -216115,16 +216147,12 @@ function print() { __p += __j.call(arguments, '') }
        * Subscribe to provider relay messages
        */
       reactExports.useEffect(() => {
-          // TODO we need to unsubscribe everywhere
           if (!postMessageHandler)
               return;
           unsubscribePostMessageHandler.current?.();
           unsubscribePostMessageHandler.current = postMessageHandler?.subscribe(onJsonRpcRequestMessage);
       }, [postMessageHandler, onJsonRpcRequestMessage]);
   }
-  // TODO -
-  // 1 - commit the unsub part
-  // 2 - add unsubs to all postMessageHandlers subscriptions
 
   /**
    * The timeout in milliseconds for the iframe to be initialized.
@@ -216149,6 +216177,20 @@ function print() { __p += __j.call(arguments, '') }
       .trim()
       .replace(/\n/g, '');
 
+  function useWidgetProviderEventRelayer() {
+      const [checkoutState] = useCheckoutContext();
+      const { postMessageHandler } = checkoutState;
+      const onWidgetProviderEvent = reactExports.useCallback(() => {
+          postMessageHandler?.send(PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT, {});
+      }, [postMessageHandler]);
+      reactExports.useEffect(() => {
+          if (!postMessageHandler)
+              return () => { };
+          window.addEventListener(PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT, onWidgetProviderEvent);
+          return () => window.removeEventListener(PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT, onWidgetProviderEvent);
+      }, [postMessageHandler, onWidgetProviderEvent]);
+  }
+
   function CheckoutAppIframe() {
       const { t } = useTranslation();
       const iframeRef = reactExports.useRef(null);
@@ -216159,6 +216201,7 @@ function print() { __p += __j.call(arguments, '') }
       useCheckoutEventsRelayer();
       useEip6963Relayer();
       useProviderRelay();
+      useWidgetProviderEventRelayer();
       const loading = !iframeURL || !iframeContentWindow || !initialised;
       const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
       reactExports.useEffect(() => {
@@ -216206,6 +216249,21 @@ function print() { __p += __j.call(arguments, '') }
                   } }))] }));
   }
 
+  /**
+   * Encodes a JSON object using base64 encoding.
+   */
+  const encodeObject = async (value) => {
+      try {
+          const str = JSON.stringify(value);
+          const base64String = btoa(str);
+          return encodeURIComponent(base64String);
+      }
+      catch (error) {
+          throw new Error(`Compression failed: ${error.message}`);
+      }
+  };
+
+  /* eslint-disable no-case-declarations */
   /**
    * Converts a record of parameters to a query string.
    */
@@ -216224,7 +216282,7 @@ function print() { __p += __j.call(arguments, '') }
   /**
    * Maps the flow configuration and params to the corresponding query parameters.
    */
-  const getIframeParams = (params, widgetConfig, checkoutConfig) => {
+  const getIframeParams = async (params, widgetConfig, checkoutConfig) => {
       const { flow } = params;
       const commonConfig = {
           theme: widgetConfig.theme,
@@ -216294,6 +216352,7 @@ function print() { __p += __j.call(arguments, '') }
                   toAmount: params.tokenAddress,
               });
           case CheckoutFlowType.SALE:
+              const items = await encodeObject(params.items || []);
               return toQueryString({
                   ...commonConfig,
                   ...(widgetConfig.sale || {}),
@@ -216306,7 +216365,7 @@ function print() { __p += __j.call(arguments, '') }
                   // TODO: Get from hub
                   environmentId: params.environmentId,
                   collectionName: params.collectionName,
-                  items: params.items,
+                  items,
                   preferredCurrency: params.preferredCurrency,
                   excludePaymentTypes: params.excludePaymentTypes,
                   excludeFiatCurrencies: params.excludeFiatCurrencies,
@@ -216318,10 +216377,11 @@ function print() { __p += __j.call(arguments, '') }
   /**
    * Returns the iframe URL for the Checkout App based on the environment.
    */
-  const getIframeURL = (params, widgetConfig, checkoutConfig) => {
+  const getIframeURL = async (params, widgetConfig, checkoutConfig) => {
       const { flow } = params;
       const { publishableKey } = checkoutConfig;
-      const language = params.language || widgetConfig.language;
+      if (!publishableKey)
+          return '';
       let environment = checkoutConfig.environment || Environment$1.SANDBOX;
       if (checkoutConfig.isDevelopment) {
           environment = ENV_DEVELOPMENT;
@@ -216329,10 +216389,11 @@ function print() { __p += __j.call(arguments, '') }
       if (checkoutConfig.overrides?.environment) {
           environment = checkoutConfig.overrides.environment;
       }
-      const baseURL = checkoutConfig.overrides?.checkoutAppUrl ?? CHECKOUT_APP_URL[environment];
-      const queryParams = getIframeParams(params, widgetConfig, checkoutConfig);
-      const iframeURL = `${baseURL}/${publishableKey}/${language}/${flow}?${queryParams}`;
-      return [baseURL, iframeURL];
+      const baseURL = checkoutConfig.overrides?.checkoutAppUrl
+          ?? CHECKOUT_APP_URL[environment];
+      const queryParams = await getIframeParams(params, widgetConfig, checkoutConfig);
+      const iframeURL = `${baseURL}/${flow}?${queryParams}`;
+      return iframeURL;
   };
 
   /**
@@ -216352,13 +216413,28 @@ function print() { __p += __j.call(arguments, '') }
       }, [deps, effect, compare]);
   };
 
+  /**
+   * Handle asynchronous operations with memoization.
+   * It only re-executes the async function when dependencies change.
+   */
+  const useAsyncMemo = (asyncFn, dependencies) => {
+      const [value, setValue] = reactExports.useState();
+      reactExports.useEffect(() => {
+          let isMounted = true;
+          asyncFn().then((result) => {
+              if (isMounted)
+                  setValue(result);
+          });
+          return () => {
+              isMounted = false;
+          };
+      }, dependencies);
+      return value;
+  };
+
   function CheckoutWidget(props) {
       const { config, checkout, params, provider, } = props;
-      const [, iframeURL] = reactExports.useMemo(() => {
-          if (!checkout.config.publishableKey)
-              return ['', ''];
-          return getIframeURL(params, config, checkout.config);
-      }, [params, config, checkout.config]);
+      const iframeURL = useAsyncMemo(async () => getIframeURL(params, config, checkout.config), [params, config, checkout.config]);
       const [checkoutState, checkoutDispatch] = reactExports.useReducer(checkoutReducer, initialCheckoutState);
       const checkoutReducerValues = reactExports.useMemo(() => ({
           checkoutState: { ...checkoutState, iframeURL, checkout },
@@ -216392,8 +216468,10 @@ function print() { __p += __j.call(arguments, '') }
   const initialAddFundsState = {
       checkout: null,
       provider: null,
-      allowedTokens: null,
+      allowedTokens: [],
       squid: null,
+      chains: [],
+      balances: [],
   };
   var AddFundsActions;
   (function (AddFundsActions) {
@@ -216401,6 +216479,8 @@ function print() { __p += __j.call(arguments, '') }
       AddFundsActions["SET_PROVIDER"] = "SET_PROVIDER";
       AddFundsActions["SET_ALLOWED_TOKENS"] = "SET_ALLOWED_TOKENS";
       AddFundsActions["SET_SQUID"] = "SET_SQUID";
+      AddFundsActions["SET_CHAINS"] = "SET_CHAINS";
+      AddFundsActions["SET_BALANCES"] = "SET_BALANCES";
   })(AddFundsActions || (AddFundsActions = {}));
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const AddFundsContext = reactExports.createContext({
@@ -216430,15 +216510,20 @@ function print() { __p += __j.call(arguments, '') }
                   ...state,
                   squid: action.payload.squid,
               };
+          case AddFundsActions.SET_CHAINS:
+              return {
+                  ...state,
+                  chains: action.payload.chains,
+              };
+          case AddFundsActions.SET_BALANCES:
+              return {
+                  ...state,
+                  balances: action.payload.balances,
+              };
           default:
               return state;
       }
   };
-  const useAddFundsValues = (overrides = {}) => {
-      const [addFundsState, addFundsDispatch] = reactExports.useReducer(addFundsReducer, { ...initialAddFundsState, ...overrides });
-      const values = reactExports.useMemo(() => ({ addFundsState, addFundsDispatch }), [addFundsState, addFundsDispatch]);
-      return values;
-  };
 
   var AddFundsWidgetViews;
   (function (AddFundsWidgetViews) {
@@ -216521,19 +216606,20 @@ function print() { __p += __j.call(arguments, '') }
                       } }) }) }) }));
   }
 
-  function AddFunds({ checkout, provider, amount, tokenAddress, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, onBackButtonClick, onCloseButtonClick, }) {
+  function AddFunds({ checkout, provider, toAmount, toTokenAddress, showBackButton = false, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, onBackButtonClick, onCloseButtonClick, }) {
       console.log('provider', provider);
       console.log('showOnrampOption', showOnrampOption);
       console.log('showSwapOption', showSwapOption);
       console.log('showBridgeOption', showBridgeOption);
+      const showBack = showBackButton || !!onBackButtonClick;
       const { addFundsDispatch } = reactExports.useContext(AddFundsContext);
       const { viewDispatch } = reactExports.useContext(ViewContext);
       const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
       const [showOptionsDrawer, setShowOptionsDrawer] = reactExports.useState(false);
       const [onRampAllowedTokens, setOnRampAllowedTokens] = reactExports.useState([]);
       const [allowedTokens, setAllowedTokens] = reactExports.useState([]);
-      const [toAmount, setToAmount] = reactExports.useState(amount || '0');
-      const [toTokenAddress, setToTokenAddress] = reactExports.useState();
+      const [currentToAmount, setCurrentToAmount] = reactExports.useState(toAmount || '0');
+      const [currentToTokenAddress, setCurrentToTokenAddress] = reactExports.useState();
       const showErrorView = reactExports.useCallback((error) => {
           viewDispatch({
               payload: {
@@ -216558,8 +216644,9 @@ function print() { __p += __j.call(arguments, '') }
                   });
                   if (tokenResponse?.tokens.length > 0) {
                       setAllowedTokens(tokenResponse.tokens);
-                      const token = tokenResponse.tokens.find((t) => t.address === tokenAddress) || tokenResponse.tokens[0];
-                      setToTokenAddress(token);
+                      const token = tokenResponse.tokens.find((t) => t.address === toTokenAddress)
+                          || tokenResponse.tokens[0];
+                      setCurrentToTokenAddress(token);
                       addFundsDispatch({
                           payload: {
                               type: AddFundsActions.SET_ALLOWED_TOKENS,
@@ -216573,7 +216660,7 @@ function print() { __p += __j.call(arguments, '') }
               }
           };
           fetchTokens();
-      }, [checkout, tokenAddress]);
+      }, [checkout, toTokenAddress]);
       reactExports.useEffect(() => {
           if (!checkout) {
               showErrorView(new Error('Checkout object is missing'));
@@ -216599,43 +216686,47 @@ function print() { __p += __j.call(arguments, '') }
           setShowOptionsDrawer(true);
       };
       const updateAmount = (value) => {
-          setToAmount(value);
+          setCurrentToAmount(value);
       };
-      const isSelected = (token) => token.address === toTokenAddress;
-      const isDisabled = !toTokenAddress || !toAmount || parseFloat(toAmount) <= 0;
+      const isSelected = (token) => token.address === currentToTokenAddress;
+      const isDisabled = !currentToTokenAddress || !toAmount || parseFloat(toAmount) <= 0;
       const handleTokenChange = (token) => {
-          setToTokenAddress(token);
+          setCurrentToTokenAddress(token);
       };
       // const handleReviewClick = () => {
       //   console.log('handle review click');
       // };
       const onPayWithCard = (paymentType) => {
           console.log('paymentType', paymentType);
-          console.log('=== toTokenAddress', toTokenAddress);
+          console.log('=== toTokenAddress', currentToTokenAddress);
           console.log('=== toAmount', toAmount);
           if (paymentType === OptionTypes.SWAP) {
               orchestrationEvents.sendRequestSwapEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, {
-                  toTokenAddress: toTokenAddress?.address ?? '',
+                  toTokenAddress: currentToTokenAddress?.address ?? '',
                   amount: toAmount ?? '',
                   fromTokenAddress: '',
               });
           }
           else {
               const data = {
-                  tokenAddress: toTokenAddress?.address ?? '',
+                  tokenAddress: currentToTokenAddress?.address ?? '',
                   amount: toAmount ?? '',
               };
               orchestrationEvents.sendRequestOnrampEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, data);
           }
       };
       const checkShowOnRampOption = () => {
-          if (showOnrampOption && toTokenAddress) {
-              const token = onRampAllowedTokens.find((t) => t.address?.toLowerCase() === toTokenAddress.address?.toLowerCase());
+          if (showOnrampOption && currentToTokenAddress) {
+              const token = onRampAllowedTokens.find((t) => t.address?.toLowerCase()
+                  === currentToTokenAddress.address?.toLowerCase());
               return !!token;
           }
           return false;
       };
-      return (jsx$1(SimpleLayout, { header: (jsx$1(HeaderNavigation, { title: "Add", onBackButtonClick: onBackButtonClick, onCloseButtonClick: onCloseButtonClick, showBack: !!onBackButtonClick })), children: jsxs(Box, { sx: {
+      return (jsx$1(SimpleLayout, { header: (jsx$1(HeaderNavigation, { title: "Add", onCloseButtonClick: onCloseButtonClick, showBack: showBack, onBackButtonClick: () => {
+                  orchestrationEvents.sendRequestGoBackEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, {});
+                  onBackButtonClick?.();
+              } })), children: jsxs(Box, { sx: {
                   display: 'flex',
                   flexDirection: 'column',
                   justifyContent: 'space-between',
@@ -216644,14 +216735,14 @@ function print() { __p += __j.call(arguments, '') }
                           display: 'flex',
                           justifyContent: 'center',
                           marginTop: 'base.spacing.x10',
-                      }, children: jsxs(Box, { sx: { width: 'base.spacing.x40' }, children: [jsx$1(Box, { sx: { marginBottom: 'base.spacing.x3' }, children: jsx$1(TextInputForm, { testId: "add-funds-amount", type: "number", value: toAmount, validator: amountInputValidation, onTextInputChange: (value) => updateAmount(value), textAlign: "right", inputMode: "decimal" }) }), jsxs(Box, { sx: {
+                      }, children: jsxs(Box, { sx: { width: 'base.spacing.x40' }, children: [jsx$1(Box, { sx: { marginBottom: 'base.spacing.x3' }, children: jsx$1(TextInputForm, { testId: "add-funds-amount", type: "number", value: currentToAmount, validator: amountInputValidation, onTextInputChange: (value) => updateAmount(value), textAlign: "right", inputMode: "decimal" }) }), jsxs(Box, { sx: {
                                       display: 'flex',
                                       borderRadius: 'base.borderRadius.x20',
                                       alignItems: 'center',
                                       gap: 'base.spacing.x5',
                                       justifyContent: 'center',
                                       border: '1px solid grey',
-                                  }, children: [jsx$1(Body, { size: "large", weight: "bold", children: toTokenAddress?.name ?? '' }), jsx$1(OverflowPopoverMenu, { testId: "add-funds-tokens-menu", children: allowedTokens.map((token) => (jsx$1(MenuItem, { onClick: () => handleTokenChange(token), selected: isSelected(token), children: jsx$1(MenuItem.Label, { children: token.name }) }, token.address))) })] })] }) }), jsxs(MenuItem, { size: "small", emphasized: true, disabled: isDisabled, sx: {
+                                  }, children: [jsx$1(Body, { size: "large", weight: "bold", children: currentToTokenAddress?.name ?? '' }), jsx$1(OverflowPopoverMenu, { testId: "add-funds-tokens-menu", children: allowedTokens.map((token) => (jsx$1(MenuItem, { onClick: () => handleTokenChange(token), selected: isSelected(token), children: jsx$1(MenuItem.Label, { children: token.name }) }, token.address))) })] })] }) }), jsxs(MenuItem, { size: "small", emphasized: true, disabled: isDisabled, sx: {
                           opacity: isDisabled ? 0.5 : 1,
                           cursor: isDisabled ? 'not-allowed' : 'pointer',
                       }, onClick: () => {
@@ -380492,44 +380583,60 @@ function print() { __p += __j.call(arguments, '') }
   Squid_1 = dist$2.Squid = Squid;
 
   const SQUID_SDK_BASE_URL = 'https://apiplus.squidrouter.com';
+  const SQUID_API_BASE_URL = 'https://api.squidrouter.com/v1';
 
-  const useSquid = () => {
+  const useSquid = (checkout) => {
       const [squid, setSquid] = reactExports.useState(null);
+      const squidConfig = reactExports.useCallback(async () => {
+          try {
+              return (await checkout?.config?.remote.getConfig('squid'));
+          }
+          catch (err) {
+              // eslint-disable-next-line no-console
+              console.error('Unable to fetch squid config: ', err);
+          }
+          return undefined;
+      }, [checkout]);
       reactExports.useEffect(() => {
-          if (squid) {
+          if (squid || !squidConfig) {
               return;
           }
           const initialiseSquid = async () => {
+              const config = await squidConfig();
+              if (!config?.integratorId)
+                  return;
               const squidSDK = new Squid_1({
                   baseUrl: SQUID_SDK_BASE_URL,
-                  integratorId: '',
+                  integratorId: config.integratorId,
               });
               await squidSDK.init();
               setSquid(squidSDK);
           };
           initialiseSquid();
-      }, []);
+      }, [squidConfig]);
       return squid;
   };
 
-  function AddFundsContextProvider({ children }) {
-      const addFundsValue = useAddFundsValues();
-      const { addFundsState, addFundsDispatch } = addFundsValue;
-      const squid = useSquid();
-      reactExports.useEffect(() => {
-          if (!squid || addFundsState.squid)
-              return;
-          addFundsDispatch({
-              payload: {
-                  type: AddFundsActions.SET_SQUID,
-                  squid,
-              },
-          });
-      }, [squid]);
-      return (jsx$1(AddFundsContext.Provider, { value: addFundsValue, children: children }));
-  }
+  const fetchChains = async () => {
+      const url = `${SQUID_API_BASE_URL}/chains`;
+      const response = await fetch(url, {
+          method: 'GET',
+          headers: {
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              'Content-Type': 'application/json',
+          },
+      });
+      const data = await response.json();
+      const chains = data.chains.map((chain) => ({
+          id: chain.chainId.toString(),
+          name: chain.chainName,
+          iconUrl: chain.chainIconURI,
+          type: chain.chainType,
+      }));
+      return chains;
+  };
 
-  function AddFundsWidget({ checkout, web3Provider, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, tokenAddress, amount, }) {
+  function AddFundsWidget({ checkout, web3Provider, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, toTokenAddress, toAmount, showBackButton, }) {
       const [viewState, viewDispatch] = reactExports.useReducer(viewReducer, {
           ...initialViewState,
           view: { type: AddFundsWidgetViews.ADD_FUNDS },
@@ -380541,7 +380648,51 @@ function print() { __p += __j.call(arguments, '') }
           viewState,
           viewDispatch,
       }), [viewState, viewReducer]);
-      const { addFundsDispatch } = reactExports.useContext(AddFundsContext);
+      const [addFundsState, addFundsDispatch] = reactExports.useReducer(addFundsReducer, initialAddFundsState);
+      const addFundsReducerValues = reactExports.useMemo(() => ({
+          addFundsState,
+          addFundsDispatch,
+      }), [addFundsState, addFundsDispatch]);
+      const squid = useSquid(checkout);
+      reactExports.useEffect(() => {
+          (async () => {
+              const chains = await fetchChains();
+              addFundsDispatch({
+                  payload: {
+                      type: AddFundsActions.SET_CHAINS,
+                      chains,
+                  },
+              });
+          })();
+      }, []);
+      reactExports.useEffect(() => {
+          if (!addFundsState.squid || !addFundsState.chains || !addFundsState.provider)
+              return;
+          (async () => {
+              const chainIds = addFundsState.chains.map((chain) => chain.id);
+              const fromAddress = await addFundsState.provider?.getSigner().getAddress();
+              const balances = await addFundsState.squid?.getAllBalances({
+                  chainIds,
+                  evmAddress: fromAddress,
+              });
+              addFundsDispatch({
+                  payload: {
+                      type: AddFundsActions.SET_BALANCES,
+                      balances: balances?.evmBalances ?? [],
+                  },
+              });
+          })();
+      }, [addFundsState.squid, addFundsState.chains, addFundsState.provider]);
+      reactExports.useEffect(() => {
+          if (!squid || addFundsState.squid)
+              return;
+          addFundsDispatch({
+              payload: {
+                  type: AddFundsActions.SET_SQUID,
+                  squid,
+              },
+          });
+      }, [squid]);
       reactExports.useEffect(() => {
           if (!web3Provider)
               return;
@@ -380563,7 +380714,7 @@ function print() { __p += __j.call(arguments, '') }
           });
       }, [checkout]);
       const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
-      return (jsx$1(ViewContext.Provider, { value: viewReducerValues, children: jsxs(AddFundsContextProvider, { children: [viewState.view.type === AddFundsWidgetViews.ADD_FUNDS && (jsx$1(AddFunds, { checkout: checkout, provider: web3Provider, tokenAddress: tokenAddress, amount: amount, showOnrampOption: showOnrampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, onCloseButtonClick: () => sendAddFundsCloseEvent(eventTarget), onBackButtonClick: () => sendAddFundsGoBackEvent(eventTarget) })), viewState.view.type === SharedViews.ERROR_VIEW && (jsx$1(ErrorView, { actionText: t('views.ERROR_VIEW.actionText'), onActionClick: () => undefined, onCloseClick: () => sendAddFundsCloseEvent(eventTarget), errorEventAction: () => {
+      return (jsx$1(ViewContext.Provider, { value: viewReducerValues, children: jsxs(AddFundsContext.Provider, { value: addFundsReducerValues, children: [viewState.view.type === AddFundsWidgetViews.ADD_FUNDS && (jsx$1(AddFunds, { checkout: checkout, provider: web3Provider, toTokenAddress: toTokenAddress, toAmount: toAmount, showBackButton: showBackButton, showOnrampOption: showOnrampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, onCloseButtonClick: () => sendAddFundsCloseEvent(eventTarget) })), viewState.view.type === SharedViews.ERROR_VIEW && (jsx$1(ErrorView, { actionText: t('views.ERROR_VIEW.actionText'), onActionClick: () => undefined, onCloseClick: () => sendAddFundsCloseEvent(eventTarget), errorEventAction: () => {
                           page({
                               userJourney: UserJourney.ADD_FUNDS,
                               screen: 'Error',