[wt-1557] add back btn to bridge widget (#1356)

immutable · Jan 17, 2024 · e64f062 · e64f062
1 parent 069ff7a
commit e64f062
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx
@@ -80,7 +80,10 @@ export function BridgeWidget({
     {
       ...initialViewState,
       view: { type: BridgeWidgetViews.WALLET_NETWORK_SELECTION },
-      history: [{ type: BridgeWidgetViews.WALLET_NETWORK_SELECTION }],
+      history: initialViewState.history.length > 0
+      && initialViewState.history[initialViewState.history.length - 1].type === SharedViews.TOP_UP_VIEW
+        ? [{ type: SharedViews.TOP_UP_VIEW }, { type: BridgeWidgetViews.WALLET_NETWORK_SELECTION }]
+        : [{ type: BridgeWidgetViews.WALLET_NETWORK_SELECTION }],
     },
   );
 

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/views/WalletNetworkSelectionView.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/views/WalletNetworkSelectionView.tsx
@@ -1,23 +1,27 @@
 import { HeaderNavigation } from 'components/Header/HeaderNavigation';
 import { SimpleLayout } from 'components/SimpleLayout/SimpleLayout';
 import { FooterLogo } from 'components/Footer/FooterLogo';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { EventTargetContext } from 'context/event-target-context/EventTargetContext';
 import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
 import { ButtonNavigationStyles } from 'components/Header/HeaderStyles';
 import { ButtCon } from '@biom3/react';
-import { ViewActions, ViewContext } from 'context/view-context/ViewContext';
+import { SharedViews, ViewActions, ViewContext } from 'context/view-context/ViewContext';
 import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAnalyticsProvider';
 import { useTranslation } from 'react-i18next';
 import { sendBridgeWidgetCloseEvent } from '../BridgeWidgetEvents';
 import { WalletAndNetworkSelector } from '../components/WalletAndNetworkSelector';
 
 export function WalletNetworkSelectionView() {
   const { t } = useTranslation();
-  const { viewDispatch } = useContext(ViewContext);
+  const { viewState, viewDispatch } = useContext(ViewContext);
 
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
 
+  const showBackButton = useMemo(() => viewState.history.length >= 2
+      && viewState.history[viewState.history.length - 2].type
+        === SharedViews.TOP_UP_VIEW, [viewState.history]);
+
   const { page } = useAnalytics();
 
   useEffect(() => {
@@ -32,6 +36,7 @@ export function WalletNetworkSelectionView() {
       testId="bridge-view"
       header={(
         <HeaderNavigation
+          showBack={showBackButton}
           title={t('views.WALLET_NETWORK_SELECTION.layoutHeading')}
           onCloseButtonClick={() => sendBridgeWidgetCloseEvent(eventTarget)}
           rightActions={(