[NO CHANGELOG] [Add Tokens Widget] Redirect to Add Tokens widget from…

… Wallets widget (#2367)
immutable · Nov 5, 2024 · 130205f · 130205f
1 parent 856426e
commit 130205f
Show file tree

Hide file tree

Showing 6 changed files with 4 additions and 75 deletions.
diff --git a/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx b/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx
@@ -49,7 +49,6 @@ interface TopUpViewProps {
   showOnrampOption: boolean;
   showSwapOption: boolean;
   showBridgeOption: boolean;
-  showAddTokensOption?: boolean;
   tokenAddress?: string;
   amount?: string;
   analytics: {
@@ -83,7 +82,6 @@ export function TopUpView({
   showOnrampOption,
   showSwapOption,
   showBridgeOption,
-  showAddTokensOption,
   tokenAddress,
   amount,
   analytics,
@@ -128,20 +126,6 @@ export function TopUpView({
     page({ userJourney, screen: 'TopUp' });
   });
 
-  // Go to add tokens widget if available
-  useMount(
-    () => {
-      if (showAddTokensOption) {
-        orchestrationEvents.sendRequestAddTokensEvent(eventTarget, widgetEvent, {
-          toTokenAddress: tokenAddress ?? '',
-          toAmount: amount ?? '',
-        });
-      }
-    },
-    () => showAddTokensOption !== undefined,
-    [showAddTokensOption],
-  );
-
   useEffect(() => {
     if (!cryptoFiatDispatch) return;
     cryptoFiatDispatch({
@@ -364,13 +348,9 @@ export function TopUpView({
         isEnabled: showBridgeOption,
       },
     ],
-    [showAddTokensOption, showBridgeOption, showOnrampOption, showSwapOption],
+    [showBridgeOption, showOnrampOption, showSwapOption],
   );
 
-  // if swap is available, don't show top up view
-  // await for redirect to add tokens widget
-  if (showAddTokensOption) return null;
-
   return (
     <SimpleLayout
       header={(

diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx
@@ -12,7 +12,6 @@ import {
   ChainId,
   IMTBLWidgetEvents,
   SaleWidgetParams,
-  AddTokensConfig,
 } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
 import { ConnectLoaderContext } from '../../context/connect-loader-context/ConnectLoaderContext';
@@ -39,7 +38,6 @@ import { sendSaleWidgetCloseEvent } from './SaleWidgetEvents';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import { OrderSummary } from './views/OrderSummary';
 import { CreditCardWarningDrawer } from './components/CreditCardWarningDrawer';
-import { useAsyncMemo } from '../../lib/hooks/useAsyncMemo';
 
 type OptionalWidgetParams = Pick<
 SaleWidgetParams,
@@ -92,21 +90,6 @@ export default function SaleWidget(props: SaleWidgetProps) {
 
   const loadingText = viewState.view.data?.loadingText || t('views.LOADING_VIEW.text');
 
-  const isAddTokensAvailable = useAsyncMemo<boolean>(async () => {
-    if (!checkout) return false;
-
-    try {
-      const isSwapAvailable = await checkout.isSwapAvailable();
-      const addTokensConfig = (await checkout.config.remote.getConfig(
-        'addTokens',
-      )) as AddTokensConfig;
-
-      return addTokensConfig.enabled && isSwapAvailable;
-    } catch (error) {
-      return false;
-    }
-  }, [checkout]);
-
   useEffect(() => {
     if (!checkout || !provider) return;
 
@@ -193,7 +176,6 @@ export default function SaleWidget(props: SaleWidgetProps) {
               showOnrampOption={config.isOnRampEnabled}
               showSwapOption={false}
               showBridgeOption={config.isBridgeEnabled}
-              showAddTokensOption={isAddTokensAvailable}
               onCloseButtonClick={() => sendSaleWidgetCloseEvent(eventTarget)}
               onBackButtonClick={() => {
                 viewDispatch({

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx
@@ -5,8 +5,7 @@ import {
   useReducer,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IMTBLWidgetEvents, WalletWidgetParams, AddTokensConfig } from '@imtbl/checkout-sdk';
-import { UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
+import { WalletWidgetParams } from '@imtbl/checkout-sdk';
 import {
   initialWalletState,
   WalletActions,
@@ -30,7 +29,6 @@ import { WalletWidgetViews } from '../../context/view-context/WalletViewContextT
 import { Settings } from './views/Settings';
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
 import { CoinInfo } from './views/CoinInfo';
-import { TopUpView } from '../../views/top-up/TopUpView';
 import { ConnectLoaderContext } from '../../context/connect-loader-context/ConnectLoaderContext';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import { useBalance } from '../../lib/hooks/useBalance';
@@ -85,8 +83,6 @@ export default function WalletWidget(props: WalletWidgetInputs) {
     [viewState, viewDispatch],
   );
 
-  const { supportedTopUps } = walletState;
-
   const { balancesLoading, refreshBalances } = useBalance({
     checkout,
     provider,
@@ -124,12 +120,6 @@ export default function WalletWidget(props: WalletWidgetInputs) {
         checkSwapAvailable = await checkout.isSwapAvailable();
       } catch { /* */ }
 
-      let checkAddTokensEnabled = isAddTokensEnabled;
-      try {
-        const addTokensConfig = (await checkout.config.remote.getConfig('addTokens') as AddTokensConfig);
-        checkAddTokensEnabled = addTokensConfig.enabled && isAddTokensEnabled;
-      } catch { /* */ }
-
       walletDispatch({
         payload: {
           type: WalletActions.SET_SUPPORTED_TOP_UPS,
@@ -138,8 +128,7 @@ export default function WalletWidget(props: WalletWidgetInputs) {
             isSwapEnabled,
             isOnRampEnabled,
             isSwapAvailable: checkSwapAvailable,
-            isAddTokensEnabled: checkAddTokensEnabled,
-            isAddTokensAvailable: checkSwapAvailable && checkAddTokensEnabled,
+            isAddTokensEnabled,
           },
         },
       });
@@ -230,18 +219,6 @@ export default function WalletWidget(props: WalletWidgetInputs) {
               onCloseClick={() => sendWalletWidgetCloseEvent(eventTarget)}
             />
           )}
-          {viewState.view.type === SharedViews.TOP_UP_VIEW && (
-            <TopUpView
-              analytics={{ userJourney: UserJourney.WALLET }}
-              widgetEvent={IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT}
-              checkout={checkout}
-              showOnrampOption={isOnRampEnabled}
-              showSwapOption={isSwapEnabled}
-              showBridgeOption={isBridgeEnabled}
-              showAddTokensOption={supportedTopUps?.isAddTokensAvailable}
-              onCloseButtonClick={() => sendWalletWidgetCloseEvent(eventTarget)}
-            />
-          )}
         </WalletContext.Provider>
       </CryptoFiatProvider>
     </ViewContext.Provider>

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/context/WalletContext.test.ts b/packages/checkout/widgets-lib/src/widgets/wallet/context/WalletContext.test.ts
@@ -100,7 +100,6 @@ describe('WalletContext', () => {
       isBridgeEnabled: false,
       isOnRampEnabled: false,
       isAddTokensEnabled: true,
-      isAddTokensAvailable: true,
     });
   });
 

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/context/WalletContext.ts b/packages/checkout/widgets-lib/src/widgets/wallet/context/WalletContext.ts
@@ -24,7 +24,6 @@ export interface TopUpFeature {
   isBridgeEnabled?: boolean;
   isSwapAvailable?: boolean;
   isAddTokensEnabled?: boolean;
-  isAddTokensAvailable?: boolean;
 }
 
 export const initialWalletState: WalletState = {
@@ -124,8 +123,6 @@ export const walletReducer: Reducer<WalletState, WalletAction> = (
               action.payload.supportedTopUps.isAddTokensEnabled ?? true,
           isSwapAvailable:
             action.payload.supportedTopUps.isSwapAvailable ?? true,
-          isAddTokensAvailable:
-            action.payload.supportedTopUps.isAddTokensAvailable ?? true,
         },
       };
     default:

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx
@@ -24,7 +24,6 @@ import {
 import { getL2ChainId } from '../../../lib/networkUtils';
 import { WalletWidgetViews } from '../../../context/view-context/WalletViewContextTypes';
 import {
-  SharedViews,
   ViewActions,
   ViewContext,
 } from '../../../context/view-context/ViewContext';
@@ -124,12 +123,7 @@ export function WalletBalances({
       control: 'AddCoins',
       controlType: 'Button',
     });
-    viewDispatch({
-      payload: {
-        type: ViewActions.UPDATE_VIEW,
-        view: { type: SharedViews.TOP_UP_VIEW },
-      },
-    });
+    orchestrationEvents.sendRequestAddTokensEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {});
   };
 
   const handleBridgeToL2OnClick = (address?: string) => {