[NO CHANGELOG][Add Funds Widget] Slice 4 MVP Feature Branch (#2276)

Co-authored-by: Tim Paul <[email protected]>
immutable · Oct 14, 2024 · 6d960c6 · 6d960c6
1 parent 574efd8
commit 6d960c6
Show file tree

Hide file tree

Showing 67 changed files with 3,245 additions and 1,027 deletions.
diff --git a/packages/checkout/sdk-sample-app/src/pages/ConnectWidget.tsx b/packages/checkout/sdk-sample-app/src/pages/ConnectWidget.tsx
@@ -5,7 +5,7 @@ import { Web3Provider } from '@ethersproject/providers';
 import GetAllBalances from '../components/GetAllBalances';
 import CheckConnection from '../components/CheckConnection';
 import GetAllowList from '../components/GetAllowList';
-import { Body, Box, Checkbox, Divider, Heading, Toggle } from '@biom3/react';
+import { Body, Box, Checkbox, Divider, Heading } from '@biom3/react';
 import GetBalance from '../components/GetBalance';
 import { Checkout } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';

diff --git a/packages/checkout/sdk/src/errors/checkoutError.ts b/packages/checkout/sdk/src/errors/checkoutError.ts
@@ -62,16 +62,16 @@ export type ErrorType = {
 
 /* The CheckoutError class is a custom error class in TypeScript that includes a message, type, and
 optional data object. */
-export class CheckoutError extends Error {
+export class CheckoutError<T = CheckoutErrorType> extends Error {
   public message: string;
 
-  public type: CheckoutErrorType;
+  public type: T;
 
   public data?: { [key: string]: any };
 
   constructor(
     message: string,
-    type: CheckoutErrorType,
+    type: T,
     data?: {
       [key: string]: any
     },

diff --git a/packages/checkout/sdk/src/index.ts b/packages/checkout/sdk/src/index.ts
@@ -157,6 +157,6 @@ export { isAddressSanctioned } from './sanctions';
 
 export type { ErrorType } from './errors';
 
-export { CheckoutErrorType } from './errors';
+export { CheckoutErrorType, CheckoutError } from './errors';
 export { CheckoutConfiguration } from './config';
 export { BlockExplorerService } from './blockExplorer';
diff --git a/packages/checkout/sdk/src/sdk.ts b/packages/checkout/sdk/src/sdk.ts
@@ -79,6 +79,7 @@ import { WidgetConfiguration } from './widgets/definitions/configurations';
 import { getWidgetsEsmUrl, loadUnresolvedBundle } from './widgets/load';
 import { determineWidgetsVersion, validateAndBuildVersion } from './widgets/version';
 import { globalPackageVersion } from './env';
+import { isAddressSanctioned } from './sanctions';
 
 const SANDBOX_CONFIGURATION = {
   baseConfig: {
@@ -333,6 +334,16 @@ export class Checkout {
     return connect.checkIsWalletConnected(web3Provider);
   }
 
+  /**
+   * Checks if an address is sanctioned.
+   * @param {string} address - The address to check.
+   * @param {Environment} environment - The environment to check.
+   * @returns {Promise<boolean>} - A promise that resolves to the result of the check.
+   */
+  public async checkIsAddressSanctioned(address: string, environment: Environment): Promise<boolean> {
+    return await isAddressSanctioned(address, environment);
+  }
+
   /**
    * Connects to a blockchain network using the specified provider.
    * @param {ConnectParams} params - The parameters for connecting to the network.

diff --git a/packages/checkout/sdk/src/widgets/definitions/events/addFunds.ts b/packages/checkout/sdk/src/widgets/definitions/events/addFunds.ts
@@ -1,9 +1,13 @@
+import { Web3Provider } from '@ethersproject/providers';
+import { EIP6963ProviderInfo } from '../../../types';
+
 /**
  * Enum of possible Add Funds Widget event types.
  */
 export enum AddFundsEventType {
   CLOSE_WIDGET = 'close-widget',
   LANGUAGE_CHANGED = 'language-changed',
+  CONNECT_SUCCESS = 'connect-success',
   REQUEST_BRIDGE = 'request-bridge',
   REQUEST_ONRAMP = 'request-onramp',
   REQUEST_SWAP = 'request-swap',
@@ -29,3 +33,15 @@ export type AddFundsFailed = {
   /** The timestamp of the failed transaction. */
   timestamp: number;
 };
+
+/**
+ * Type representing a successfull provider connection
+ * @property {Web3Provider} provider
+ * @property {EIP6963ProviderInfo} providerInfo
+ * @property {'from' | 'to'} providerType
+ */
+export type AddFundsConnectSuccess = {
+  provider: Web3Provider;
+  providerInfo: EIP6963ProviderInfo;
+  providerType: 'from' | 'to';
+};
diff --git a/packages/checkout/sdk/src/widgets/definitions/events/checkout.ts b/packages/checkout/sdk/src/widgets/definitions/events/checkout.ts
@@ -17,7 +17,7 @@ import {
 } from './bridge';
 import { SwapFailed, SwapRejected, SwapSuccess } from './swap';
 import { WalletNetworkSwitch } from './wallet';
-import { AddFundsFailed, AddFundsSuccess } from './addFunds';
+import { AddFundsFailed, AddFundsSuccess, AddFundsConnectSuccess } from './addFunds';
 
 export enum CheckoutEventType {
   INITIALISED = 'INITIALISED',
@@ -106,8 +106,14 @@ export type CheckoutAddFundsSuccessEvent = {
   data: AddFundsSuccess;
 };
 
+export type CheckoutAddFundsConnectSuccessEvent = {
+  type: CheckoutSuccessEventType.CONNECT_SUCCESS;
+  data: AddFundsConnectSuccess;
+};
+
 export type CheckoutSuccessEvent =
   | CheckoutAddFundsSuccessEvent
+  | CheckoutAddFundsConnectSuccessEvent
   | CheckoutConnectSuccessEvent
   | CheckoutBridgeSuccessEvent
   | CheckoutBridgeClaimWithdrawalSuccessEvent

diff --git a/packages/checkout/sdk/src/widgets/definitions/types.ts b/packages/checkout/sdk/src/widgets/definitions/types.ts
@@ -42,6 +42,7 @@ import {
   RequestAddFundsEvent,
   RequestGoBackEvent,
   AddFundsEventType,
+  AddFundsConnectSuccess,
 } from './events';
 import {
   BridgeWidgetParams,
@@ -212,9 +213,7 @@ export type WidgetEventData = {
 
   [WidgetType.ADD_FUNDS]: {
     [AddFundsEventType.CLOSE_WIDGET]: {};
-    [AddFundsEventType.REQUEST_BRIDGE]: {};
-    [AddFundsEventType.REQUEST_SWAP]: {};
-    [AddFundsEventType.REQUEST_ONRAMP]: {};
+    [AddFundsEventType.CONNECT_SUCCESS]: AddFundsConnectSuccess;
   } & OrchestrationMapping &
   ProviderEventMapping;
 };

diff --git a/packages/checkout/widgets-lib/src/components/ChangedYourMindDrawer/ChangedYourMindDrawer.tsx b/packages/checkout/widgets-lib/src/components/ChangedYourMindDrawer/ChangedYourMindDrawer.tsx
@@ -66,6 +66,7 @@ export function ChangedYourMindDrawer({
           />
           <ButtCon
             icon="Close"
+            size="small"
             variant="tertiary"
             sx={{
               pos: 'absolute',

diff --git a/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx b/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx
@@ -31,6 +31,8 @@ export interface ConnectLoaderProps {
   params: ConnectLoaderParams;
   closeEvent: () => void;
   widgetConfig: StrongCheckoutWidgetsConfig;
+  goBackEvent?: () => void;
+  showBackButton?: boolean;
 }
 
 export interface ConnectLoaderParams {
@@ -47,6 +49,8 @@ export function ConnectLoader({
   params,
   widgetConfig,
   closeEvent,
+  goBackEvent,
+  showBackButton,
 }: ConnectLoaderProps) {
   const {
     checkout,
@@ -250,6 +254,8 @@ export function ConnectLoader({
                       sendCloseEventOverride={closeEvent}
                       allowedChains={allowedChains}
                       isCheckNetworkEnabled={isCheckNetworkEnabled ?? true}
+                      showBackButton={showBackButton}
+                      sendGoBackEventOverride={goBackEvent}
                     />
         )}
         {/* If the user has connected then render the widget */}

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

diff --git a/packages/checkout/widgets-lib/src/components/UnableToConnectDrawer/UnableToConnectDrawer.tsx b/packages/checkout/widgets-lib/src/components/UnableToConnectDrawer/UnableToConnectDrawer.tsx
@@ -67,6 +67,7 @@ export function UnableToConnectDrawer({
           <ButtCon
             icon="Close"
             variant="tertiary"
+            size="small"
             sx={{
               pos: 'absolute',
               top: 'base.spacing.x5',