Feat/wt 1898 provider updated event (#1126)

Co-authored-by: Zach Couchman <[email protected]>
Co-authored-by: Deepti Luthra <[email protected]>

packages/checkout/sdk/src/index.ts

@@ -4,6 +4,7 @@ import './widgets/definitions/global';
 export * from './widgets/definitions/events';
 export * from './widgets/definitions/types';
 export * from './widgets/definitions/parameters';
+export * from './widgets/definitions/configurations';
 
 // SDKs
 

packages/checkout/sdk/src/types/widgets.ts

@@ -1,4 +1,5 @@
-import { SemanticVersion, WidgetConfiguration } from '../widgets/definitions/types';
+import { WidgetConfiguration } from '../widgets/definitions/configurations/widget';
+import { SemanticVersion } from '../widgets/definitions/types';
 
 /**
  * Represents the configuration options for instantiating the Checkout Widgets factory.

packages/checkout/sdk/src/widgets/definitions/configurations/bridge.ts

@@ -0,0 +1,4 @@
+import { WidgetConfiguration } from './widget';
+
+export type BridgeWidgetConfiguration = {
+} & WidgetConfiguration;

packages/checkout/sdk/src/widgets/definitions/configurations/connect.ts

@@ -0,0 +1,4 @@
+import { WidgetConfiguration } from './widget';
+
+export type ConnectWidgetConfiguration = {
+} & WidgetConfiguration;

packages/checkout/sdk/src/widgets/definitions/configurations/index.ts

@@ -0,0 +1,8 @@
+export * from './connect';
+export * from './bridge';
+export * from './wallet';
+export * from './swap';
+export * from './onramp';
+export * from './sale';
+export * from './theme';
+export * from './widget';

packages/checkout/sdk/src/widgets/definitions/configurations/onramp.ts

@@ -0,0 +1,4 @@
+import { WidgetConfiguration } from './widget';
+
+export type OnrampWidgetConfiguration = {
+} & WidgetConfiguration;

packages/checkout/sdk/src/widgets/definitions/configurations/sale.ts

@@ -0,0 +1,4 @@
+import { WidgetConfiguration } from './widget';
+
+export type SaleWidgetConfiguration = {
+} & WidgetConfiguration;

packages/checkout/sdk/src/widgets/definitions/configurations/swap.ts

@@ -0,0 +1,4 @@
+import { WidgetConfiguration } from './widget';
+
+export type SwapWidgetConfiguration = {
+} & WidgetConfiguration;

packages/checkout/sdk/src/widgets/definitions/configurations/theme.ts

@@ -0,0 +1,7 @@
+/**
+ * Enum representing the themes for the widgets.
+ */
+export enum WidgetTheme {
+  LIGHT = 'light',
+  DARK = 'dark',
+}

packages/checkout/sdk/src/widgets/definitions/configurations/wallet.ts

@@ -0,0 +1,5 @@
+/* eslint-disable max-len */
+import { WidgetConfiguration } from './widget';
+
+export type WalletWidgetConfiguration = {
+} & WidgetConfiguration;

packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts

@@ -0,0 +1,9 @@
+import { WidgetTheme } from './theme';
+
+/**
+ * Represents the local configuration options for the Checkout Widgets.
+ * @property {WidgetTheme | undefined} theme - The theme of the Checkout Widget (default: "DARK")
+ */
+export type WidgetConfiguration = {
+  theme?: WidgetTheme;
+};

packages/checkout/sdk/src/widgets/definitions/events/widgets.ts

@@ -1,11 +1,28 @@
+import { Web3Provider } from '@ethersproject/providers';
+
 /**
  * Enum representing the events emitted by the widgets.
  */
 export enum IMTBLWidgetEvents {
+  IMTBL_WIDGETS_PROVIDER = 'imtbl-widgets-provider',
   IMTBL_CONNECT_WIDGET_EVENT = 'imtbl-connect-widget',
   IMTBL_WALLET_WIDGET_EVENT = 'imtbl-wallet-widget',
   IMTBL_SWAP_WIDGET_EVENT = 'imtbl-swap-widget',
   IMTBL_BRIDGE_WIDGET_EVENT = 'imtbl-bridge-widget',
   IMTBL_ONRAMP_WIDGET_EVENT = 'imtbl-onramp-widget',
   IMTBL_SALE_WIDGET_EVENT = 'imtbl-sale-widget',
 }
+
+/**
+ * Enum for events raised for about provider objects
+ */
+export enum ProviderEventType {
+  PROVIDER_UPDATED = 'PROVIDER_UPDATED',
+}
+
+/**
+ * Payload type for the PROVIDER_UPDATED event
+ */
+export type ProviderUpdated = {
+  provider: Web3Provider;
+};

packages/checkout/sdk/src/widgets/definitions/global.ts

@@ -1,3 +1,4 @@
+import { Web3Provider } from '@ethersproject/providers';
 import { Checkout } from '../../sdk';
 import {
   CheckoutWidgetsConfig,
@@ -7,6 +8,7 @@ import {
   WidgetProperties,
   WidgetType,
   WidgetEventData,
+  WidgetConfigurations,
 } from './types';
 
 /**
@@ -18,14 +20,14 @@ declare global {
   namespace ImmutableCheckoutWidgets {
     class WidgetsFactory implements IWidgetsFactory {
       constructor(sdk: Checkout, config: CheckoutWidgetsConfig);
-      create<T extends WidgetType>(type: T, params: WidgetParameters[T]): Widget<T>;
+      create<T extends WidgetType>(type: T, config?: WidgetConfigurations[T], provider?: Web3Provider): Widget<T>;
+      updateProvider(provider: Web3Provider): void;
     }
 
     class Connect<T extends WidgetType> implements Widget<T> {
       constructor(sdk: Checkout, props: WidgetProperties<T>);
-      mount(id: string): void;
+      mount(id: string, params?: WidgetParameters[T]): void;
       unmount(): void;
-      destroy(): void;
       update(props: WidgetProperties<T>): void;
       addListener<KEventName extends keyof WidgetEventData[T]>(
         type: KEventName,
@@ -36,9 +38,8 @@ declare global {
 
     class Bridge<T extends WidgetType> implements Widget<T> {
       constructor(sdk: Checkout, props: WidgetProperties<T>);
-      mount(id: string): void;
+      mount(id: string, params?: WidgetParameters[T]): void;
       unmount(): void;
-      destroy(): void;
       update(props: WidgetProperties<T>): void;
       addListener<KEventName extends keyof WidgetEventData[T]>(
         type: KEventName,
@@ -49,9 +50,8 @@ declare global {
 
     class Wallet<T extends WidgetType> implements Widget<T> {
       constructor(sdk: Checkout, props: WidgetProperties<T>);
-      mount(id: string): void;
+      mount(id: string, params?: WidgetParameters[T]): void;
       unmount(): void;
-      destroy(): void;
       update(props: WidgetProperties<T>): void;
       addListener<KEventName extends keyof WidgetEventData[T]>(
         type: KEventName,
@@ -62,9 +62,8 @@ declare global {
 
     class Swap<T extends WidgetType> implements Widget<T> {
       constructor(sdk: Checkout, props: WidgetProperties<T>);
-      mount(id: string): void;
+      mount(id: string, params?: WidgetParameters[T]): void;
       unmount(): void;
-      destroy(): void;
       update(props: WidgetProperties<T>): void;
       addListener<KEventName extends keyof WidgetEventData[T]>(
         type: KEventName,
@@ -75,9 +74,8 @@ declare global {
 
     class OnRamp<T extends WidgetType> implements Widget<T> {
       constructor(sdk: Checkout, props: WidgetProperties<T>);
-      mount(id: string): void;
+      mount(id: string, params?: WidgetParameters[T]): void;
       unmount(): void;
-      destroy(): void;
       update(props: WidgetProperties<T>): void;
       addListener<KEventName extends keyof WidgetEventData[T]>(
         type: KEventName,
@@ -88,9 +86,8 @@ declare global {
 
     class Sale<T extends WidgetType> implements Widget<T> {
       constructor(sdk: Checkout, props: WidgetProperties<T>);
-      mount(id: string): void;
+      mount(id: string, params?: WidgetParameters[T]): void;
       unmount(): void;
-      destroy(): void;
       update(props: WidgetProperties<T>): void;
       addListener<KEventName extends keyof WidgetEventData[T]>(
         type: KEventName,

packages/checkout/sdk/src/widgets/definitions/parameters/bridge.ts

@@ -1,17 +1,14 @@
 /* eslint-disable max-len */
-import { Web3Provider } from '@ethersproject/providers';
 import { WalletProviderName } from '../../../types';
 
 /**
  * Bridge Widget parameters
  * @property {string | undefined} fromContractAddress - The contract address of the token to bridge from, used to populate the bridge form token field
  * @property {string | undefined} amount - The formatted amount to bridge, used to populate the bridge form amount field
  * @property {WalletProviderName | undefined} walletProviderName - The wallet provider name to use for the bridge widget
- * @property {Web3Provider | undefined} web3Provider - The ethers Web3Provider
  */
 export type BridgeWidgetParams = {
   fromContractAddress?: string;
   amount?: string;
   walletProviderName?: WalletProviderName
-  web3Provider?: Web3Provider
 };

packages/checkout/sdk/src/widgets/definitions/parameters/connect.ts

@@ -1,10 +1,7 @@
-import { Web3Provider } from '@ethersproject/providers';
-
 export enum ConnectTargetLayer {
   LAYER1 = 'LAYER1',
   LAYER2 = 'LAYER2',
 }
 
 export type ConnectWidgetParams = {
-  web3Provider?: Web3Provider;
 };

packages/checkout/sdk/src/widgets/definitions/parameters/onramp.ts

@@ -1,15 +1,12 @@
-import { Web3Provider } from '@ethersproject/providers';
 import { WalletProviderName } from '../../../types';
 /**
  * OnRamp Widget parameters
  * @property {string | undefined} contractAddress - The contract address of the token to onramp
  * @property {string | undefined} amount - The formatted amount to onramp, used to populate the onramp form amount field
  * @property {WalletProviderName | undefined} walletProviderName - The wallet provider name to use for the onramp widget
- * @property {Web3Provider | undefined} web3Provider - The ethers Web3Provider
  */
 export type OnRampWidgetParams = {
   contractAddress?: string;
   amount?: string;
   walletProviderName?: WalletProviderName;
-  web3Provider?: Web3Provider;
 };

packages/checkout/sdk/src/widgets/definitions/parameters/sale.ts

@@ -1,12 +1,10 @@
-import { Web3Provider } from '@ethersproject/providers';
 import { WalletProviderName } from '../../../types';
 
 /**
  * Sale Widget parameters
  * @property {string} amount - The total price to pay for the items in the sale
  * @property {SaleItem[]} items - The list of products to be purchased
  * @property {WalletProviderName | undefined} walletProviderName - The wallet provider name to default to if no web3Provider is passed
- * @property {Web3Provider | undefined} web3Provider - The ethers Web3Provider
  */
 export type SaleWidgetParams = {
   amount?: string;
@@ -15,7 +13,6 @@ export type SaleWidgetParams = {
   fromContractAddress?: string;
   items?: SaleItem[];
   walletProviderName?: WalletProviderName;
-  web3Provider?: Web3Provider
 };
 
 export type SaleItem = {

packages/checkout/sdk/src/widgets/definitions/parameters/swap.ts

@@ -1,4 +1,3 @@
-import { Web3Provider } from '@ethersproject/providers';
 import { WalletProviderName } from '../../../types';
 
 /**
@@ -7,12 +6,10 @@ import { WalletProviderName } from '../../../types';
  * @property {string | undefined} fromContractAddress - The contract address of the token to swap from
  * @property {string | undefined} toContractAddress - The contract address of the token to swap to
  * @property {WalletProviderName | undefined} walletProviderName - The wallet provider name to use for the swap widget
- * @property {Web3Provider | undefined} web3Provider - The ethers Web3Provider
  */
 export interface SwapWidgetParams {
   amount?: string;
   fromContractAddress?: string;
   toContractAddress?: string;
   walletProviderName?: WalletProviderName;
-  web3Provider?: Web3Provider
 }

packages/checkout/sdk/src/widgets/definitions/parameters/wallet.ts

@@ -1,5 +1,4 @@
 /* eslint-disable max-len */
-import { Web3Provider } from '@ethersproject/providers';
 import { WalletProviderName } from '../../../types';
 
 /**
@@ -9,5 +8,4 @@ import { WalletProviderName } from '../../../types';
  */
 export type WalletWidgetParams = {
   walletProviderName?: WalletProviderName
-  web3Provider?: Web3Provider
 };