spike skip connect screen

immutable · Sep 24, 2024 · 32aafe3 · 32aafe3
1 parent 4f05d8b
commit 32aafe3
Show file tree

Hide file tree

Showing 9 changed files with 262 additions and 143 deletions.
diff --git a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts
@@ -59,7 +59,6 @@ export class FiatRampService {
         ...widgetParams,
         email: encodeURIComponent(params.email),
         isAutoFillUserData: true,
-        disableWalletAddressForm: true,
       };
     }
 
@@ -84,6 +83,12 @@ export class FiatRampService {
       widgetParams = {
         ...widgetParams,
         walletAddress: params.walletAddress,
+        disableWalletAddressForm: true,
+      };
+    } else {
+      widgetParams = {
+        ...widgetParams,
+        disableWalletAddressForm: false,
       };
     }
 

diff --git a/packages/checkout/sdk/src/sdk.ts b/packages/checkout/sdk/src/sdk.ts
@@ -682,8 +682,11 @@ export class Checkout {
     let tokenSymbol = 'IMX';
     let email;
 
-    const walletAddress = await params.web3Provider.getSigner().getAddress();
-    const isPassport = (params.web3Provider.provider as any)?.isPassport || false;
+    let walletAddress = params.walletAddress || '';
+    if (params.web3Provider) {
+      walletAddress = await params.web3Provider.getSigner().getAddress();
+    }
+    const isPassport = (params.web3Provider?.provider as any)?.isPassport || false;
 
     if (isPassport && params.passport) {
       const userInfo = await params.passport.getUserInfo();

diff --git a/packages/checkout/sdk/src/types/fiatRamp.ts b/packages/checkout/sdk/src/types/fiatRamp.ts
@@ -20,8 +20,9 @@ export enum ExchangeType {
  */
 export interface FiatRampParams {
   exchangeType: ExchangeType;
-  web3Provider: Web3Provider;
+  web3Provider?: Web3Provider;
   tokenAmount?: string;
   tokenAddress?: string;
+  walletAddress?: string;
   passport?: any;
 }
diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/onramp.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/onramp.ts
@@ -17,4 +17,8 @@ export type OnRampWidgetParams = {
   language?: WidgetLanguage;
   /** Whether to show a back button on the first screen, on click triggers REQUEST_GO_BACK event */
   showBackButton?: boolean;
+  /** Whether to skip the connect screen */
+  skipConnect?: boolean;
+  /** The destination wallet address to receive the funds */
+  toWalletAddress?: string;
 };
diff --git a/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx b/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx
@@ -10,7 +10,6 @@ import {
   IMTBLWidgetEvents,
 } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
-import { Web3Provider } from '@ethersproject/providers';
 import { useTranslation } from 'react-i18next';
 import {
   UserJourney,
@@ -44,7 +43,6 @@ type $Dictionary<T = unknown> = { [key: string]: T };
 interface TopUpViewProps {
   widgetEvent: IMTBLWidgetEvents;
   checkout?: Checkout;
-  provider?: Web3Provider;
   showOnrampOption: boolean;
   showSwapOption: boolean;
   showBridgeOption: boolean;
@@ -77,7 +75,7 @@ export function TopUpView({
   widgetEvent,
   checkout,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  provider, // Keep this for future use
+  // provider, // Keep this for future use
   showOnrampOption,
   showSwapOption,
   showBridgeOption,

diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx
@@ -1,51 +1,72 @@
+import { useContext, useMemo, useReducer } from 'react';
 import {
-  useContext, useEffect, useMemo, useReducer, useState,
-} from 'react';
-import { IMTBLWidgetEvents, OnRampWidgetParams } from '@imtbl/checkout-sdk';
+  Checkout,
+  IMTBLWidgetEvents,
+  OnRampWidgetParams,
+} from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
+import { Web3Provider } from '@ethersproject/providers';
 import { UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { NATIVE } from '../../lib';
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
 import {
   SharedViews,
-  ViewActions, ViewContext, initialViewState, viewReducer,
+  ViewActions,
+  ViewContext,
+  initialViewState,
+  viewReducer,
 } from '../../context/view-context/ViewContext';
 import {
   OnRampFailView,
   OnRampSuccessView,
   OnRampWidgetViews,
 } from '../../context/view-context/OnRampViewContextTypes';
 import { LoadingView } from '../../views/loading/LoadingView';
-import { ConnectLoaderContext } from '../../context/connect-loader-context/ConnectLoaderContext';
 import { TopUpView } from '../../views/top-up/TopUpView';
-import { sendOnRampFailedEvent, sendOnRampSuccessEvent, sendOnRampWidgetCloseEvent } from './OnRampWidgetEvents';
+import {
+  sendOnRampFailedEvent,
+  sendOnRampSuccessEvent,
+  sendOnRampWidgetCloseEvent,
+} from './OnRampWidgetEvents';
 import { OnRampMain } from './views/OnRampMain';
 import { StatusType } from '../../components/Status/StatusType';
 import { StatusView } from '../../components/Status/StatusView';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import { OrderInProgress } from './views/OrderInProgress';
 
 export type OnRampWidgetInputs = OnRampWidgetParams & {
-  config: StrongCheckoutWidgetsConfig
+  config: StrongCheckoutWidgetsConfig;
+  checkout: Checkout;
+  web3Provider?: Web3Provider;
 };
 
 export default function OnRampWidget({
-  amount, tokenAddress, config, showBackButton,
+  amount,
+  tokenAddress,
+  config,
+  showBackButton,
+  checkout,
+  web3Provider,
+  toWalletAddress,
 }: OnRampWidgetInputs) {
-  const {
-    isOnRampEnabled, isSwapEnabled, isBridgeEnabled,
-  } = config;
+  const { isOnRampEnabled, isSwapEnabled, isBridgeEnabled } = config;
   const [viewState, viewDispatch] = useReducer(viewReducer, {
     ...initialViewState,
     history: [],
   });
-  const viewReducerValues = useMemo(() => ({ viewState, viewDispatch }), [viewState, viewReducer]);
+  const viewReducerValues = useMemo(
+    () => ({ viewState, viewDispatch }),
+    [viewState, viewReducer],
+  );
 
-  const { connectLoaderState } = useContext(ConnectLoaderContext);
-  const { checkout, provider } = connectLoaderState;
-  const [tknAddr, setTknAddr] = useState(tokenAddress);
+  const tknAddr = useMemo(
+    () => (tokenAddress?.toLocaleLowerCase() === NATIVE ? NATIVE : tokenAddress),
+    [tokenAddress],
+  );
 
-  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+  const {
+    eventTargetState: { eventTarget },
+  } = useContext(EventTargetContext);
 
   const { t } = useTranslation();
 
@@ -54,99 +75,80 @@ export default function OnRampWidget({
     [viewState.view.type],
   );
 
-  useEffect(() => {
-    if (!checkout || !provider) return;
-    (async () => {
-      const network = await checkout.getNetworkInfo({
-        provider,
-      });
-      /* If the provider's network is not supported, return out of this and let the
-    connect loader handle the switch network functionality */
-      if (!network.isSupported) {
-        return;
-      }
-      const address = tknAddr?.toLocaleLowerCase() === NATIVE
-        ? NATIVE
-        : tokenAddress;
-
-      setTknAddr(address);
-    })();
-  }, [checkout, provider, viewDispatch]);
-
   return (
     <ViewContext.Provider value={viewReducerValues}>
       {viewState.view.type === SharedViews.LOADING_VIEW && (
-      <LoadingView loadingText={t('views.ONRAMP.initialLoadingText')} />
+        <LoadingView loadingText={t('views.ONRAMP.initialLoadingText')} />
       )}
       {viewState.view.type === OnRampWidgetViews.IN_PROGRESS_LOADING && (
-      <LoadingView loadingText={t('views.ONRAMP.IN_PROGRESS_LOADING.loading.text')} />
+        <LoadingView
+          loadingText={t('views.ONRAMP.IN_PROGRESS_LOADING.loading.text')}
+        />
       )}
       {viewState.view.type === OnRampWidgetViews.IN_PROGRESS && (
-      <OrderInProgress />
+        <OrderInProgress />
       )}
 
       {viewState.view.type === OnRampWidgetViews.SUCCESS && (
-      <StatusView
-        statusText={t('views.ONRAMP.SUCCESS.text')}
-        actionText={t('views.ONRAMP.SUCCESS.actionText')}
-        onRenderEvent={() => sendOnRampSuccessEvent(
-          eventTarget,
-          (viewState.view as OnRampSuccessView).data.transactionHash,
-        )}
-        onActionClick={() => sendOnRampWidgetCloseEvent(eventTarget)}
-        statusType={StatusType.SUCCESS}
-        testId="success-view"
-      />
+        <StatusView
+          statusText={t('views.ONRAMP.SUCCESS.text')}
+          actionText={t('views.ONRAMP.SUCCESS.actionText')}
+          onRenderEvent={() => sendOnRampSuccessEvent(
+            eventTarget,
+            (viewState.view as OnRampSuccessView).data.transactionHash,
+          )}
+          onActionClick={() => sendOnRampWidgetCloseEvent(eventTarget)}
+          statusType={StatusType.SUCCESS}
+          testId="success-view"
+        />
       )}
 
       {viewState.view.type === OnRampWidgetViews.FAIL && (
-      <StatusView
-        statusText={t('views.ONRAMP.FAIL.text')}
-        actionText={t('views.ONRAMP.FAIL.actionText')}
-        onRenderEvent={() => sendOnRampFailedEvent(
-          eventTarget,
-          (viewState.view as OnRampFailView).reason
-                  ?? 'Transaction failed',
-        )}
-        onActionClick={() => {
-          viewDispatch({
-            payload: {
-              type: ViewActions.UPDATE_VIEW,
-              view: {
-                type: OnRampWidgetViews.ONRAMP,
-                data: viewState.view.data,
+        <StatusView
+          statusText={t('views.ONRAMP.FAIL.text')}
+          actionText={t('views.ONRAMP.FAIL.actionText')}
+          onRenderEvent={() => sendOnRampFailedEvent(
+            eventTarget,
+            (viewState.view as OnRampFailView).reason ?? 'Transaction failed',
+          )}
+          onActionClick={() => {
+            viewDispatch({
+              payload: {
+                type: ViewActions.UPDATE_VIEW,
+                view: {
+                  type: OnRampWidgetViews.ONRAMP,
+                  data: viewState.view.data,
+                },
               },
-            },
-          });
-        }}
-        statusType={StatusType.FAILURE}
-        onCloseClick={() => sendOnRampWidgetCloseEvent(eventTarget)}
-        testId="fail-view"
-      />
+            });
+          }}
+          statusType={StatusType.FAILURE}
+          onCloseClick={() => sendOnRampWidgetCloseEvent(eventTarget)}
+          testId="fail-view"
+        />
       )}
 
       {/* This keeps Transak's iframe instance in dom to listen to transak's events. */}
       {/* We will remove the iframe instance once the processing has been finalised, either as a success or a failure */}
-      {(viewState.view.type !== OnRampWidgetViews.SUCCESS
-        && viewState.view.type !== OnRampWidgetViews.FAIL
-      ) && (
-        <OnRampMain
-          passport={checkout?.passport}
-          showIframe={showIframe}
-          tokenAmount={amount ?? viewState.view.data?.amount}
-          tokenAddress={
-              tknAddr ?? viewState.view.data?.tokenAddress
-          }
-          showBackButton={showBackButton}
-        />
+      {viewState.view.type !== OnRampWidgetViews.SUCCESS
+        && viewState.view.type !== OnRampWidgetViews.FAIL && (
+          <OnRampMain
+            passport={checkout?.passport}
+            showIframe={showIframe}
+            tokenAmount={amount ?? viewState.view.data?.amount}
+            tokenAddress={tknAddr ?? viewState.view.data?.tokenAddress}
+            toWalletAddress={toWalletAddress}
+            showBackButton={showBackButton}
+            checkout={checkout}
+            provider={web3Provider}
+          />
       )}
 
       {viewState.view.type === SharedViews.TOP_UP_VIEW && (
         <TopUpView
           analytics={{ userJourney: UserJourney.ON_RAMP }}
           widgetEvent={IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT}
           checkout={checkout}
-          provider={provider}
           showOnrampOption={isOnRampEnabled}
           showSwapOption={isSwapEnabled}
           showBridgeOption={isBridgeEnabled}