[NO CHANGELOG][Checkout Widget] CM-1001 Add funds <> Other widgets in…

…tegration (#2334)

packages/checkout/sdk/src/index.ts

@@ -40,6 +40,7 @@ export type {
   EIP1193Provider,
   EIP6963ProviderInfo,
   EIP6963ProviderDetail,
+  AddFundsConfig,
 } from './types';
 
 export type {

packages/checkout/widgets-lib/src/lib/constants.ts

@@ -76,6 +76,11 @@ export const DEFAULT_SWAP_ENABLED = true;
  */
 export const DEFAULT_BRIDGE_ENABLED = true;
 
+/**
+ * Checkout Widget default add funds enabled flag
+ */
+export const DEFAULT_ADD_FUNDS_ENABLED = true;
+
 /**
  * Checkout Widget default refresh quote interval
  */

packages/checkout/widgets-lib/src/lib/withDefaultWidgetConfig.test.ts

@@ -6,6 +6,7 @@ import {
   DEFAULT_ENV,
   DEFAULT_ON_RAMP_ENABLED,
   DEFAULT_SWAP_ENABLED,
+  DEFAULT_ADD_FUNDS_ENABLED,
   DEFAULT_THEME,
 } from './constants';
 
@@ -17,13 +18,15 @@ describe('withDefaultWidgetConfig', () => {
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
     expect(withDefaultWidgetConfigs(undefined)).toEqual({
       theme: DEFAULT_THEME,
       environment: DEFAULT_ENV,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
   });
 
@@ -38,6 +41,7 @@ describe('withDefaultWidgetConfig', () => {
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
     expect(
       withDefaultWidgetConfigs({
@@ -49,6 +53,7 @@ describe('withDefaultWidgetConfig', () => {
       isOnRampEnabled: false,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
   });
 
@@ -63,6 +68,7 @@ describe('withDefaultWidgetConfig', () => {
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
 
     expect(
@@ -75,6 +81,7 @@ describe('withDefaultWidgetConfig', () => {
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
 
     expect(
@@ -87,6 +94,7 @@ describe('withDefaultWidgetConfig', () => {
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
   });
 
@@ -101,6 +109,7 @@ describe('withDefaultWidgetConfig', () => {
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
 
     expect(
@@ -113,6 +122,7 @@ describe('withDefaultWidgetConfig', () => {
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
 
     expect(
@@ -125,6 +135,7 @@ describe('withDefaultWidgetConfig', () => {
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
+      isAddFundsEnabled: DEFAULT_ADD_FUNDS_ENABLED,
     });
   });
 });

packages/checkout/widgets-lib/src/lib/withDefaultWidgetConfig.ts

@@ -1,6 +1,7 @@
 import { Environment } from '@imtbl/config';
 import { WidgetTheme } from '@imtbl/checkout-sdk';
 import {
+  DEFAULT_ADD_FUNDS_ENABLED,
   DEFAULT_BRIDGE_ENABLED,
   DEFAULT_ENV,
   DEFAULT_ON_RAMP_ENABLED,
@@ -14,6 +15,7 @@ export type StrongCheckoutWidgetsConfig = {
   isOnRampEnabled: boolean;
   isSwapEnabled: boolean;
   isBridgeEnabled: boolean;
+  isAddFundsEnabled: boolean;
 };
 
 function getValidTheme(theme?: string): WidgetTheme {
@@ -52,4 +54,8 @@ export const withDefaultWidgetConfigs = (
     DEFAULT_BRIDGE_ENABLED,
     configs?.isBridgeEnabled?.toString(),
   ),
+  isAddFundsEnabled: getValidBoolean(
+    DEFAULT_ADD_FUNDS_ENABLED,
+    configs?.isAddFundsEnabled?.toString(),
+  ),
 });

packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx

@@ -1,6 +1,6 @@
 import { Body, Box, Heading } from '@biom3/react';
 import {
-  ReactNode, useContext, useEffect, useState,
+  ReactNode, useContext, useEffect, useMemo, useState,
 } from 'react';
 import { StandardAnalyticsControlTypes } from '@imtbl/react-analytics';
 import {
@@ -38,6 +38,7 @@ import {
 import { OnRampWidgetViews } from '../../context/view-context/OnRampViewContextTypes';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import { TopUpMenuItem, TopUpMenuItemProps } from './TopUpMenuItem';
+import { useAsyncMemo } from '../../lib/hooks/useAsyncMemo';
 
 type $Dictionary<T = unknown> = { [key: string]: T };
 
@@ -48,6 +49,7 @@ interface TopUpViewProps {
   showOnrampOption: boolean;
   showSwapOption: boolean;
   showBridgeOption: boolean;
+  showAddFundsOption?: boolean;
   tokenAddress?: string;
   amount?: string;
   analytics: {
@@ -81,6 +83,7 @@ export function TopUpView({
   showOnrampOption,
   showSwapOption,
   showBridgeOption,
+  showAddFundsOption,
   tokenAddress,
   amount,
   analytics,
@@ -106,20 +109,39 @@ export function TopUpView({
   const [onRampFeesPercentage, setOnRampFeesPercentage] = useState('-.--');
   const swapFeesInFiat = '0.05';
   const [, setBridgeFeesInFiat] = useState('-.--');
-  const [isSwapAvailable, setIsSwapAvailable] = useState(true);
 
   const title = heading ? t(...heading) : t('views.TOP_UP_VIEW.header.title');
   const description = subheading ? t(...subheading) : null;
 
   const { page, track } = useAnalytics();
 
+  const isSwapAvailable = useAsyncMemo<boolean | undefined>(async () => {
+    if (!checkout) return undefined;
+    try {
+      return checkout.isSwapAvailable();
+    } catch (error) {
+      return false;
+    }
+  }, [checkout]);
+
   useMount(() => {
-    page({
-      userJourney,
-      screen: 'TopUp',
-    });
+    page({ userJourney, screen: 'TopUp' });
   });
 
+  // Go to add funds widget if available
+  useMount(
+    () => {
+      if (showAddFundsOption) {
+        orchestrationEvents.sendRequestAddFundsEvent(eventTarget, widgetEvent, {
+          toTokenAddress: tokenAddress ?? '',
+          toAmount: amount ?? '',
+        });
+      }
+    },
+    () => showAddFundsOption !== undefined,
+    [showAddFundsOption],
+  );
+
   useEffect(() => {
     if (!cryptoFiatDispatch) return;
     cryptoFiatDispatch({
@@ -156,14 +178,6 @@ export function TopUpView({
     })();
   }, [checkout !== undefined]);
 
-  // Check if swap is available
-  useEffect(() => {
-    if (!checkout) return;
-    (async () => {
-      setIsSwapAvailable(await checkout.isSwapAvailable());
-    })();
-  }, [checkout !== undefined]);
-
   const localTrack = (
     control: string,
     extras: any,
@@ -287,68 +301,75 @@ export function TopUpView({
     </Box>
   );
 
-  const topUpFeatures: TopUpFeatures[] = [
-    {
-      testId: 'onramp',
-      icon: 'BankCard',
-      iconVariant: 'bold',
-      textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.debit',
-      onClickEvent: onClickOnRamp,
-      fee: () => renderFees(
-        `${t(
-          'views.TOP_UP_VIEW.topUpOptions.debit.subcaption',
-        )} ≈ ${onRampFeesPercentage}%`,
-      ),
-      isAvailable: true,
-      isEnabled: showOnrampOption,
-    },
-    {
-      testId: 'onramp',
-      icon: 'BankCard',
-      textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.credit',
-      onClickEvent: onClickOnRamp,
-      fee: () => renderFees(
-        `${t(
-          'views.TOP_UP_VIEW.topUpOptions.credit.subcaption',
-        )} ≈ ${onRampFeesPercentage}%`,
-      ),
-      isAvailable: true,
-      isEnabled: showOnrampOption,
-    },
-    {
-      testId: 'advanced',
-      icon: 'Minting',
-      iconVariant: 'bold',
-      intentIcon: 'JumpTo',
-      textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.advanced',
-      onClickEvent: onClickAdvancedOptions,
-      fee: () => renderFees(''),
-      isAvailable: true,
-      isEnabled: true,
-    },
-    {
-      testId: 'swap',
-      icon: 'Swap',
-      textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.swap',
-      onClickEvent: onClickSwap,
-      fee: () => renderFees(
-        `${t(
-          'views.TOP_UP_VIEW.topUpOptions.swap.subcaption',
-        )} ≈ $${swapFeesInFiat} ${fiatSymbol.toUpperCase()}`,
-      ),
-      isAvailable: isSwapAvailable,
-      isEnabled: showSwapOption,
-    },
-    {
-      testId: 'bridge',
-      icon: 'ArrowForward',
-      textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.bridge',
-      onClickEvent: onClickBridge,
-      fee: () => renderFees(''),
-      isAvailable: true,
-      isEnabled: showBridgeOption,
-    },
-  ];
+  const topUpFeatures: TopUpFeatures[] = useMemo(
+    () => [
+      {
+        testId: 'onramp',
+        icon: 'BankCard',
+        iconVariant: 'bold',
+        textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.debit',
+        onClickEvent: onClickOnRamp,
+        fee: () => renderFees(
+          `${t(
+            'views.TOP_UP_VIEW.topUpOptions.debit.subcaption',
+          )} ≈ ${onRampFeesPercentage}%`,
+        ),
+        isAvailable: true,
+        isEnabled: showOnrampOption,
+      },
+      {
+        testId: 'onramp',
+        icon: 'BankCard',
+        textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.credit',
+        onClickEvent: onClickOnRamp,
+        fee: () => renderFees(
+          `${t(
+            'views.TOP_UP_VIEW.topUpOptions.credit.subcaption',
+          )} ≈ ${onRampFeesPercentage}%`,
+        ),
+        isAvailable: true,
+        isEnabled: showOnrampOption,
+      },
+      {
+        testId: 'advanced',
+        icon: 'Minting',
+        iconVariant: 'bold',
+        intentIcon: 'JumpTo',
+        textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.advanced',
+        onClickEvent: onClickAdvancedOptions,
+        fee: () => renderFees(''),
+        isAvailable: true,
+        isEnabled: true,
+      },
+      {
+        testId: 'swap',
+        icon: 'Swap',
+        textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.swap',
+        onClickEvent: onClickSwap,
+        fee: () => renderFees(
+          `${t(
+            'views.TOP_UP_VIEW.topUpOptions.swap.subcaption',
+          )} ≈ $${swapFeesInFiat} ${fiatSymbol.toUpperCase()}`,
+        ),
+        isAvailable: !!isSwapAvailable,
+        isEnabled: showSwapOption,
+      },
+      {
+        testId: 'bridge',
+        icon: 'ArrowForward',
+        textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.bridge',
+        onClickEvent: onClickBridge,
+        fee: () => renderFees(''),
+        isAvailable: true,
+        isEnabled: showBridgeOption,
+      },
+    ],
+    [showAddFundsOption, showBridgeOption, showOnrampOption, showSwapOption],
+  );
+
+  // if swap is available, don't show top up view
+  // await for redirect to add funds widget
+  if (showAddFundsOption) return null;
 
   return (
     <SimpleLayout