Revert "Feature/cm 933 AddFunds onboarding drawer" (#2298)

immutable · Oct 14, 2024 · 574efd8 · 574efd8
1 parent a6aae72
commit 574efd8
Show file tree

Hide file tree

Showing 23 changed files with 165 additions and 2,501 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx b/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx
@@ -1,5 +1,4 @@
 import { Box, BoxProps } from '@biom3/react';
-import merge from 'ts-deepmerge';
 import {
   simpleLayoutStyle,
   headerStyle,
@@ -19,42 +18,40 @@ export interface SimpleLayoutProps {
   floatHeader?: boolean;
   footerBackgroundColor?: string;
   bodyStyleOverrides?: BoxProps['sx'];
-  containerSx?: BoxProps['sx'];
 }
 
 export function SimpleLayout({
   header,
   footer,
   children,
   heroContent,
-  testId = 'container',
+  testId,
   floatHeader = false,
   footerBackgroundColor,
   bodyStyleOverrides,
-  containerSx = {},
 }: SimpleLayoutProps) {
   return (
-    <Box sx={responsiveStyles} testId="simpleLayout">
-      <Box testId={testId} sx={merge(simpleLayoutStyle, containerSx)}>
+    <Box sx={responsiveStyles}>
+      <Box testId={testId} sx={simpleLayoutStyle}>
         {header && (
-          <Box sx={headerStyle(floatHeader)} testId="header">
+          <Box sx={headerStyle(floatHeader)}>
             {header}
           </Box>
         )}
-        <Box sx={contentStyle} testId="main">
+        <Box sx={contentStyle}>
           {heroContent && (
             <Box sx={heroContentStyle}>
               {heroContent}
             </Box>
           )}
           {children && (
-            <Box sx={{ ...bodyStyle, ...bodyStyleOverrides }} testId="children">
+            <Box sx={{ ...bodyStyle, ...bodyStyleOverrides }}>
               {children}
             </Box>
           )}
         </Box>
         {footer && (
-          <Box sx={footerStyle(footerBackgroundColor)} testId="footer">
+          <Box sx={footerStyle(footerBackgroundColor)}>
             {footer}
           </Box>
         )}

diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -641,23 +641,6 @@
       }
     },
     "ADD_FUNDS": {
-      "onboarding": {
-        "screen1": {
-          "title": "Payments on Immutable\nhave evolved",
-          "caption": "listen up",
-          "buttonText": "Next"
-        },
-        "screen2": {
-          "title": "Deliver tokens to Passport\n& pay from any wallet",
-          "caption": "whats evolved",
-          "buttonText": "Next"
-        },
-        "screen3": {
-          "title": "Pay with tokens on other chains,\nwe'll find you the best option",
-          "caption": "evolution",
-          "buttonText": "Choose the Wallet to Pay with"
-        }
-      },
       "drawer": {
         "options": {
           "swap": {

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx
@@ -8,7 +8,6 @@ import {
   AddFundsWidgetParams,
 } from '@imtbl/checkout-sdk';
 import React, { Suspense } from 'react';
-import { CloudImage, Stack } from '@biom3/react';
 import { Base } from '../BaseWidgetRoot';
 import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 import { HandoverProvider } from '../../context/handover-context/HandoverProvider';
@@ -21,11 +20,7 @@ import {
 } from '../../components/ConnectLoader/ConnectLoader';
 import { getL1ChainId, getL2ChainId } from '../../lib';
 import { sendAddFundsCloseEvent } from './AddFundsWidgetEvents';
-import {
-  isValidAddress,
-  isValidAmount,
-} from '../../lib/validations/widgetValidators';
-import { getRemoteImage } from '../../lib/utils';
+import { isValidAddress, isValidAmount } from '../../lib/validations/widgetValidators';
 
 const AddFundsWidget = React.lazy(() => import('./AddFundsWidget'));
 
@@ -84,15 +79,14 @@ export class AddFunds extends Base<WidgetType.ADD_FUNDS> {
       ],
       isCheckNetworkEnabled: false,
     };
-    const config = this.strongConfig();
 
     this.reactRoot.render(
       <React.StrictMode>
         <CustomAnalyticsProvider checkout={this.checkout}>
-          <ThemeProvider id="add-funds-container" config={config}>
+          <ThemeProvider id="add-funds-container" config={this.strongConfig()}>
             <HandoverProvider>
               <ConnectLoader
-                widgetConfig={config}
+                widgetConfig={this.strongConfig()}
                 params={connectLoaderParams}
                 closeEvent={() => sendAddFundsCloseEvent(window)}
               >
@@ -101,37 +95,17 @@ export class AddFunds extends Base<WidgetType.ADD_FUNDS> {
                     <LoadingView loadingText={t('views.LOADING_VIEW.text')} />
                   }
                 >
-                  <Stack sx={{ pos: 'relative' }}>
-                    <CloudImage
-                      use={(
-                        <img
-                          src={getRemoteImage(
-                            config.environment,
-                            '/add-funds-bg-texture.webp',
-                          )}
-                          alt="blurry bg texture"
-                        />
-                      )}
-                      sx={{
-                        pos: 'absolute',
-                        h: '100%',
-                        w: '100%',
-                        objectFit: 'cover',
-                        objectPosition: 'center',
-                      }}
-                    />
-                    <AddFundsWidget
-                      config={config}
-                      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}
-                    />
-                  </Stack>
+                  <AddFundsWidget
+                    config={this.strongConfig()}
+                    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}
+                  />
                 </Suspense>
               </ConnectLoader>
             </HandoverProvider>

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx
@@ -8,26 +8,19 @@ import { AddFundsWidgetParams, Checkout } from '@imtbl/checkout-sdk';
 import { sendAddFundsCloseEvent } from './AddFundsWidgetEvents';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import {
-  AddFundsActions,
-  AddFundsContext,
-  addFundsReducer,
-  initialAddFundsState,
+  AddFundsActions, AddFundsContext, addFundsReducer, initialAddFundsState,
 } from './context/AddFundsContext';
 import { AddFundsWidgetViews } from '../../context/view-context/AddFundsViewContextTypes';
 import {
   initialViewState,
-  SharedViews,
-  ViewActions,
+  SharedViews, ViewActions,
   ViewContext,
   viewReducer,
 } from '../../context/view-context/ViewContext';
 import { AddFunds } from './views/AddFunds';
 import { ErrorView } from '../../views/error/ErrorView';
 import { useSquid } from './hooks/useSquid';
-import {
-  useAnalytics,
-  UserJourney,
-} from '../../context/analytics-provider/SegmentAnalyticsProvider';
+import { useAnalytics, UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { fetchChains } from './functions/fetchChains';
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
 import { Review } from './views/Review';
@@ -67,12 +60,11 @@ export default function AddFundsWidget({
     [viewState, viewReducer],
   );
 
-  const [addFundsState, addFundsDispatch] = useReducer(
-    addFundsReducer,
-    initialAddFundsState,
-  );
+  const [addFundsState, addFundsDispatch] = useReducer(addFundsReducer, initialAddFundsState);
 
-  const { squid, provider, chains } = addFundsState;
+  const {
+    squid, provider, chains,
+  } = addFundsState;
 
   const addFundsReducerValues = useMemo(
     () => ({

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx
@@ -3,9 +3,7 @@ import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FiatOptionType } from '../types';
 
-export interface FiatOptionProps<
-  RC extends ReactElement | undefined = undefined,
-> {
+export interface FiatOptionProps<RC extends ReactElement | undefined = undefined> {
   rc?: RC;
   type: FiatOptionType;
   onClick?: (type: FiatOptionType) => void;
@@ -57,7 +55,7 @@ export function FiatOption<RC extends ReactElement | undefined = undefined>({
       </MenuItem.Label>
       {!disabled && <MenuItem.IntentIcon />}
       <MenuItem.Caption>
-        {t(
+        { t(
           `views.ADD_FUNDS.drawer.options.${type}.${
             disabled ? 'disabledCaption' : 'caption'
           }`,

diff --git a/...eckout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingDrawer.tsx b/...eckout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingDrawer.tsx