diff --git a/examples/_deprecated/checkout-widget/basic-react/README.md b/examples/_deprecated/checkout-widget/basic-react/README.md index 92592d56c9..c86547f877 100644 --- a/examples/_deprecated/checkout-widget/basic-react/README.md +++ b/examples/_deprecated/checkout-widget/basic-react/README.md @@ -1,4 +1,4 @@ -This is a sample code to get started with the Checkout widget using React + Vite. +This is a sample code to get started with the Commerce Widget using React + Vite. Run locally by using the `npm i && npm run dev` command. diff --git a/examples/checkout/sdk-load-widgets-with-nextjs/README.md b/examples/checkout/sdk-load-widgets-with-nextjs/README.md index b2f24440f5..b17ced3f4a 100644 --- a/examples/checkout/sdk-load-widgets-with-nextjs/README.md +++ b/examples/checkout/sdk-load-widgets-with-nextjs/README.md @@ -1,9 +1,9 @@ # Checkout SDK Widgets Example App -This example app shows how to use the Checkout Widget, loaded from the Checkout SDK. It will cover scenarios including mounting, executing flows, and handling events. +This example app shows how to use the Commerce Widget, loaded from the Checkout SDK. It will cover scenarios including mounting, executing flows, and handling events. **Example App implementation progress:** -- [x] Mounting Checkout Widget +- [x] Mounting Commerce Widget - [ ] Executing different flows - [ ] Events @@ -29,7 +29,7 @@ yarn dev ## E2E Testing -There are tests covering the auto updating of the Checkout Widget. +There are tests covering the auto updating of the Commerce Widget. Build the app: diff --git a/examples/checkout/sdk-load-widgets-with-nextjs/src/app/page.tsx b/examples/checkout/sdk-load-widgets-with-nextjs/src/app/page.tsx index fa3b5ad652..c8da4d5716 100644 --- a/examples/checkout/sdk-load-widgets-with-nextjs/src/app/page.tsx +++ b/examples/checkout/sdk-load-widgets-with-nextjs/src/app/page.tsx @@ -14,7 +14,7 @@ export default function Home() { className="mb-1" size="medium" rc={}> - Mount Checkout Widgets + Mount Commerce Widgets ); } diff --git a/examples/checkout/sdk-load-widgets-with-nextjs/src/app/widgets/page.tsx b/examples/checkout/sdk-load-widgets-with-nextjs/src/app/widgets/page.tsx index 56cde29c14..fb3b674758 100644 --- a/examples/checkout/sdk-load-widgets-with-nextjs/src/app/widgets/page.tsx +++ b/examples/checkout/sdk-load-widgets-with-nextjs/src/app/widgets/page.tsx @@ -1,21 +1,21 @@ "use client"; import { Box } from '@biom3/react'; import { checkout } from '@imtbl/sdk'; -import { CheckoutFlowType, ConnectionSuccess, Widget, WidgetType } from '@imtbl/sdk/checkout'; +import { CommerceFlowType, ConnectionSuccess, Widget, WidgetType } from '@imtbl/sdk/checkout'; import { useEffect, useState } from 'react'; const checkoutSDK = new checkout.Checkout(); function Widgets() { - const [widget, setWidget] = useState>(); + const [widget, setWidget] = useState>(); useEffect(() => { const loadWidgets = async () => { const widgetsFactory = await checkoutSDK.widgets({ config: {} }); - const widget = widgetsFactory.create(WidgetType.CHECKOUT, {}) + const widget = widgetsFactory.create(WidgetType.IMMUTABLE_COMMERCE, {}) setWidget(widget); } @@ -26,16 +26,16 @@ function Widgets() { useEffect(() => { if (!widget) return; widget.mount("widget-root", { - flow: CheckoutFlowType.WALLET, + flow: CommerceFlowType.WALLET, }); widget.addListener( - checkout.CheckoutEventType.SUCCESS, - (payload: checkout.CheckoutSuccessEvent) => { + checkout.CommerceEventType.SUCCESS, + (payload: checkout.CommerceSuccessEvent) => { const { type, data } = payload; // capture provider after user connects their wallet - if (type === checkout.CheckoutSuccessEventType.CONNECT_SUCCESS) { + if (type === checkout.CommerceSuccessEventType.CONNECT_SUCCESS) { const { walletProviderName } = data as ConnectionSuccess; console.log('connected to ', walletProviderName); // setProvider(data.provider); @@ -48,26 +48,26 @@ function Widgets() { // detect when user fails to connect widget.addListener( - checkout.CheckoutEventType.FAILURE, - (payload: checkout.CheckoutFailureEvent) => { + checkout.CommerceEventType.FAILURE, + (payload: checkout.CommerceFailureEvent) => { const { type, data } = payload; - if (type === checkout.CheckoutFailureEventType.CONNECT_FAILED) { + if (type === checkout.CommerceFailureEventType.CONNECT_FAILED) { console.log('failed to connect', data.reason); } } ); // remove widget from view when closed - widget.addListener(checkout.CheckoutEventType.CLOSE, () => { + widget.addListener(checkout.CommerceEventType.CLOSE, () => { widget.unmount(); }); // clean up event listeners return () => { - widget.removeListener(checkout.CheckoutEventType.SUCCESS); - widget.removeListener(checkout.CheckoutEventType.DISCONNECTED); - widget.removeListener(checkout.CheckoutEventType.CLOSE); + widget.removeListener(checkout.CommerceEventType.SUCCESS); + widget.removeListener(checkout.CommerceEventType.DISCONNECTED); + widget.removeListener(checkout.CommerceEventType.CLOSE); }; diff --git a/examples/checkout/sdk-load-widgets-with-nextjs/tests/version.spec.ts b/examples/checkout/sdk-load-widgets-with-nextjs/tests/widgets.spec.ts similarity index 96% rename from examples/checkout/sdk-load-widgets-with-nextjs/tests/version.spec.ts rename to examples/checkout/sdk-load-widgets-with-nextjs/tests/widgets.spec.ts index 37f09d7ca1..1a520d9956 100644 --- a/examples/checkout/sdk-load-widgets-with-nextjs/tests/version.spec.ts +++ b/examples/checkout/sdk-load-widgets-with-nextjs/tests/widgets.spec.ts @@ -11,7 +11,7 @@ const INTERCEPT_CHECKOUT_VERSION_CONFIG = process.env.INTERCEPT_CHECKOUT_VERSION test.beforeEach(async ({ page }) => { if (!USE_REMOTE_WIDGETS) { - await interceptWidgets(page); + await interceptWidgets(page, '*'); } if (INTERCEPT_CHECKOUT_VERSION_CONFIG) { diff --git a/packages/checkout/README.md b/packages/checkout/README.md index 6ff1cc643d..fd0333ff36 100644 --- a/packages/checkout/README.md +++ b/packages/checkout/README.md @@ -202,9 +202,9 @@ In a production release, this script is loaded from a CDN. We are currently usin │ ├── sdk-sample-app - Sample app where the Checkout SDK is consumed │ - ├── widgets-lib - Checkout widgets + ├── widgets-lib - Commerce Widgets │ - ├── widgets-sample-app - Sample app where the Checkout Widgets are consumed + ├── widgets-sample-app - Sample app where the Commerce Widgets are consumed │ └── README.md ``` diff --git a/packages/checkout/sdk/src/sdk.ts b/packages/checkout/sdk/src/sdk.ts index 212c4db457..e26e057fc1 100644 --- a/packages/checkout/sdk/src/sdk.ts +++ b/packages/checkout/sdk/src/sdk.ts @@ -261,7 +261,7 @@ export class Checkout { } catch (err: any) { // eslint-disable-next-line no-console console.warn( - `Failed to resolve checkout widgets module, falling back to UMD bundle. Error: ${err.message}`, + `Failed to resolve Commerce Widgets module, falling back to UMD bundle. Error: ${err.message}`, ); } diff --git a/packages/checkout/sdk/src/types/widgets.ts b/packages/checkout/sdk/src/types/widgets.ts index 76f9ecf70d..e320e07a22 100644 --- a/packages/checkout/sdk/src/types/widgets.ts +++ b/packages/checkout/sdk/src/types/widgets.ts @@ -2,9 +2,9 @@ import { WidgetConfiguration } from '../widgets/definitions/configurations/widge import { SemanticVersion } from '../widgets/definitions/types'; /** - * Represents the configuration options for instantiating the Checkout Widgets factory. + * Represents the configuration options for instantiating the Commerce Widgets factory. * @property {WidgetConfiguration} config - global configuration options for the widgets. - * @property {SemanticVersion | undefined} version - version of the Checkout widgets bundle(default latest version will be used). + * @property {SemanticVersion | undefined} version - version of the Commerce Widgets bundle(default latest version will be used). */ export type WidgetsInit = { config: WidgetConfiguration; diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/checkout.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/commerce.ts similarity index 95% rename from packages/checkout/sdk/src/widgets/definitions/configurations/checkout.ts rename to packages/checkout/sdk/src/widgets/definitions/configurations/commerce.ts index f1dee6a495..c71ab7f730 100644 --- a/packages/checkout/sdk/src/widgets/definitions/configurations/checkout.ts +++ b/packages/checkout/sdk/src/widgets/definitions/configurations/commerce.ts @@ -9,7 +9,7 @@ import { AddFundsWidgetConfiguration } from './addFunds'; import { WidgetConfiguration } from './widget'; -export type CheckoutWidgetConfiguration = { +export type CommerceWidgetConfiguration = { CONNECT?: Omit; WALLET?: Omit; SWAP?: Omit; diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/index.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/index.ts index 8fa1e8f726..fbf867b5f2 100644 --- a/packages/checkout/sdk/src/widgets/definitions/configurations/index.ts +++ b/packages/checkout/sdk/src/widgets/definitions/configurations/index.ts @@ -7,4 +7,4 @@ export * from './sale'; export * from './theme'; export * from './widget'; export * from './addFunds'; -export * from './checkout'; +export * from './commerce'; diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts index ed12b0b509..dbe77825aa 100644 --- a/packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts +++ b/packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts @@ -1,25 +1,25 @@ import { WidgetTheme } from './theme'; /** - * Widget Configuration represents the shared configuration options for the Checkout Widgets. + * Widget Configuration represents the shared configuration options for the Commerce Widgets. * @property {WidgetTheme | undefined} theme * @property {WidgetLanguage | undefined} language * @property {WalletConnectConfig | undefined} walletConnect */ export type WidgetConfiguration = { - /** The theme of the Checkout Widget (default: "DARK") */ + /** The theme of the Commerce Widget (default: "DARK") */ theme?: WidgetTheme; language?: WidgetLanguage; walletConnect?: WalletConnectConfig; }; /** - * Widget Language represents the language options for the Checkout Widgets. + * Widget Language represents the language options for the Commerce Widgets. */ export type WidgetLanguage = 'en' | 'ja' | 'ko' | 'zh'; /** - * WalletConnect Config represents the configuration required to enable WalletConnect for the Checkout Widgets. + * WalletConnect Config represents the configuration required to enable WalletConnect for the Commerce Widgets. */ export type WalletConnectConfig = { /** WalletConnect projectId */ diff --git a/packages/checkout/sdk/src/widgets/definitions/events/checkout.ts b/packages/checkout/sdk/src/widgets/definitions/events/checkout.ts deleted file mode 100644 index d7d77c6350..0000000000 --- a/packages/checkout/sdk/src/widgets/definitions/events/checkout.ts +++ /dev/null @@ -1,193 +0,0 @@ -import { Web3Provider } from '@ethersproject/providers'; -import { ConnectionFailed, ConnectionSuccess } from './connect'; -import { - SaleFailed, - SalePaymentMethod, - SalePaymentToken, - SaleSuccess, - SaleTransactionSuccess, -} from './sale'; -import { EIP6963ProviderInfo, WalletProviderName } from '../../../types'; -import { OnRampFailed, OnRampSuccess } from './onramp'; -import { - BridgeClaimWithdrawalFailed, - BridgeClaimWithdrawalSuccess, - BridgeFailed, - BridgeTransactionSent, -} from './bridge'; -import { SwapFailed, SwapRejected, SwapSuccess } from './swap'; -import { WalletNetworkSwitch } from './wallet'; -import { AddFundsFailed, AddFundsSuccess, AddFundsConnectSuccess } from './addFunds'; - -export enum CheckoutEventType { - INITIALISED = 'INITIALISED', - PROVIDER_UPDATED = 'PROVIDER_UPDATED', - CLOSE = 'CLOSE', - SUCCESS = 'SUCCESS', - FAILURE = 'FAILURE', - DISCONNECTED = 'DISCONNECTED', - USER_ACTION = 'USER_ACTION', -} - -export enum CheckoutSuccessEventType { - SWAP_SUCCESS = 'SWAP_SUCCESS', - ONRAMP_SUCCESS = 'ONRAMP_SUCCESS', - CONNECT_SUCCESS = 'CONNECT_SUCCESS', - SALE_SUCCESS = 'SALE_SUCCESS', - SALE_TRANSACTION_SUCCESS = 'SALE_TRANSACTION_SUCCESS', - BRIDGE_SUCCESS = 'BRIDGE_SUCCESS', - BRIDGE_CLAIM_WITHDRAWAL_SUCCESS = 'BRIDGE_CLAIM_WITHDRAWAL_SUCCESS', - ADD_FUNDS_SUCCESS = 'ADD_FUNDS_SUCCESS', -} - -export enum CheckoutFailureEventType { - BRIDGE_FAILED = 'BRIDGE_FAILED', - BRIDGE_CLAIM_WITHDRAWAL_FAILED = 'BRIDGE_CLAIM_WITHDRAWAL_FAILED', - SWAP_FAILED = 'SWAP_FAILED', - SWAP_REJECTED = 'SWAP_REJECTED', - CONNECT_FAILED = 'CONNECT_FAILED', - SALE_FAILED = 'SALE_FAILED', - ONRAMP_FAILED = 'ONRAMP_FAILED', - ADD_FUNDS_FAILED = 'ADD_FUNDS_FAILED', -} - -export enum CheckoutUserActionEventType { - PAYMENT_METHOD_SELECTED = 'PAYMENT_METHOD_SELECTED', - PAYMENT_TOKEN_SELECTED = 'PAYMENT_TOKEN_SELECTED', - NETWORK_SWITCH = 'NETWORK_SWITCH', -} - -export type CheckoutProviderUpdatedEvent = { - /** The connected provider. */ - provider: Web3Provider; - /** The wallet provider name of the connected provider. */ - walletProviderName: WalletProviderName | undefined; - /** The wallet provider EIP-6963 metadata. */ - walletProviderInfo: EIP6963ProviderInfo | undefined; -}; - -export type CheckoutSaleSuccessEvent = { - type: CheckoutSuccessEventType.SALE_SUCCESS; - data: SaleSuccess; -}; - -export type CheckoutSaleSuccessfulTransactionEvent = { - type: CheckoutSuccessEventType.SALE_TRANSACTION_SUCCESS; - data: SaleTransactionSuccess; -}; - -export type CheckoutOnRampSuccessEvent = { - type: CheckoutSuccessEventType.ONRAMP_SUCCESS; - data: OnRampSuccess; -}; // FIMXE: TransactionSent - -export type CheckoutBridgeSuccessEvent = { - type: CheckoutSuccessEventType.BRIDGE_SUCCESS; - data: BridgeTransactionSent; -}; // FIMXE: TransactionSent - -export type CheckoutBridgeClaimWithdrawalSuccessEvent = { - type: CheckoutSuccessEventType.BRIDGE_CLAIM_WITHDRAWAL_SUCCESS; - data: BridgeClaimWithdrawalSuccess; -}; // FIMXE: TransactionSent - -export type CheckoutSwapSuccessEvent = { - type: CheckoutSuccessEventType.SWAP_SUCCESS; - data: SwapSuccess; -}; // FIMXE: TransactionSent - -export type CheckoutConnectSuccessEvent = { - type: CheckoutSuccessEventType.CONNECT_SUCCESS; - data: ConnectionSuccess; -}; - -export type CheckoutAddFundsSuccessEvent = { - type: CheckoutSuccessEventType.ADD_FUNDS_SUCCESS; - data: AddFundsSuccess; -}; - -export type CheckoutAddFundsConnectSuccessEvent = { - type: CheckoutSuccessEventType.CONNECT_SUCCESS; - data: AddFundsConnectSuccess; -}; - -export type CheckoutSuccessEvent = - | CheckoutAddFundsSuccessEvent - | CheckoutAddFundsConnectSuccessEvent - | CheckoutConnectSuccessEvent - | CheckoutBridgeSuccessEvent - | CheckoutBridgeClaimWithdrawalSuccessEvent - | CheckoutOnRampSuccessEvent - | CheckoutSwapSuccessEvent - | CheckoutSaleSuccessEvent - | CheckoutSaleSuccessfulTransactionEvent; - -export type CheckoutBridgeFailureEvent = { - type: CheckoutFailureEventType.BRIDGE_FAILED; - data: BridgeFailed; -}; // FIMXE: Error - -export type CheckoutBridgeClaimWithdrawalFailedEvent = { - type: CheckoutFailureEventType.BRIDGE_CLAIM_WITHDRAWAL_FAILED; - data: BridgeClaimWithdrawalFailed; -}; // FIMXE: Error - -export type CheckoutConnectFailureEvent = { - type: CheckoutFailureEventType.CONNECT_FAILED; - data: ConnectionFailed; -}; // FIMXE: Error - -export type CheckoutOnRampFailureEvent = { - type: CheckoutFailureEventType.ONRAMP_FAILED; - data: OnRampFailed; -}; // FIMXE: Error - -export type CheckoutSwapFailureEvent = { - type: CheckoutFailureEventType.SWAP_FAILED; - data: SwapFailed; -}; // FIMXE: Error - -export type CheckoutSwapRejectedEvent = { - type: CheckoutFailureEventType.SWAP_REJECTED; - data: SwapRejected; -}; // FIMXE: Error - -export type CheckoutSaleFailureEvent = { - type: CheckoutFailureEventType.SALE_FAILED; - data: SaleFailed; -}; - -export type CheckoutAddFundsFailureEvent = { - type: CheckoutFailureEventType.ADD_FUNDS_FAILED; - data: AddFundsFailed; -}; - -export type CheckoutFailureEvent = - | CheckoutAddFundsFailureEvent - | CheckoutBridgeFailureEvent - | CheckoutBridgeClaimWithdrawalFailedEvent - | CheckoutConnectFailureEvent - | CheckoutOnRampFailureEvent - | CheckoutSwapFailureEvent - | CheckoutSwapRejectedEvent - | CheckoutSaleFailureEvent; - -export type CheckoutPaymentMethodSelectedEvent = { - type: CheckoutUserActionEventType.PAYMENT_METHOD_SELECTED; - data: SalePaymentMethod; -}; - -export type CheckoutPaymentTokenSelectedEvent = { - type: CheckoutUserActionEventType.PAYMENT_TOKEN_SELECTED; - data: SalePaymentToken; -}; - -export type CheckoutNetworkSwitchEvent = { - type: CheckoutUserActionEventType.NETWORK_SWITCH; - data: WalletNetworkSwitch; -}; - -export type CheckoutUserActionEvent = - | CheckoutPaymentMethodSelectedEvent - | CheckoutPaymentTokenSelectedEvent - | CheckoutNetworkSwitchEvent; diff --git a/packages/checkout/sdk/src/widgets/definitions/events/commerce.ts b/packages/checkout/sdk/src/widgets/definitions/events/commerce.ts new file mode 100644 index 0000000000..d8e9b188f9 --- /dev/null +++ b/packages/checkout/sdk/src/widgets/definitions/events/commerce.ts @@ -0,0 +1,193 @@ +import { Web3Provider } from '@ethersproject/providers'; +import { ConnectionFailed, ConnectionSuccess } from './connect'; +import { + SaleFailed, + SalePaymentMethod, + SalePaymentToken, + SaleSuccess, + SaleTransactionSuccess, +} from './sale'; +import { EIP6963ProviderInfo, WalletProviderName } from '../../../types'; +import { OnRampFailed, OnRampSuccess } from './onramp'; +import { + BridgeClaimWithdrawalFailed, + BridgeClaimWithdrawalSuccess, + BridgeFailed, + BridgeTransactionSent, +} from './bridge'; +import { SwapFailed, SwapRejected, SwapSuccess } from './swap'; +import { WalletNetworkSwitch } from './wallet'; +import { AddFundsFailed, AddFundsSuccess, AddFundsConnectSuccess } from './addFunds'; + +export enum CommerceEventType { + INITIALISED = 'INITIALISED', + PROVIDER_UPDATED = 'PROVIDER_UPDATED', + CLOSE = 'CLOSE', + SUCCESS = 'SUCCESS', + FAILURE = 'FAILURE', + DISCONNECTED = 'DISCONNECTED', + USER_ACTION = 'USER_ACTION', +} + +export enum CommerceSuccessEventType { + SWAP_SUCCESS = 'SWAP_SUCCESS', + ONRAMP_SUCCESS = 'ONRAMP_SUCCESS', + CONNECT_SUCCESS = 'CONNECT_SUCCESS', + SALE_SUCCESS = 'SALE_SUCCESS', + SALE_TRANSACTION_SUCCESS = 'SALE_TRANSACTION_SUCCESS', + BRIDGE_SUCCESS = 'BRIDGE_SUCCESS', + BRIDGE_CLAIM_WITHDRAWAL_SUCCESS = 'BRIDGE_CLAIM_WITHDRAWAL_SUCCESS', + ADD_FUNDS_SUCCESS = 'ADD_FUNDS_SUCCESS', +} + +export enum CommerceFailureEventType { + BRIDGE_FAILED = 'BRIDGE_FAILED', + BRIDGE_CLAIM_WITHDRAWAL_FAILED = 'BRIDGE_CLAIM_WITHDRAWAL_FAILED', + SWAP_FAILED = 'SWAP_FAILED', + SWAP_REJECTED = 'SWAP_REJECTED', + CONNECT_FAILED = 'CONNECT_FAILED', + SALE_FAILED = 'SALE_FAILED', + ONRAMP_FAILED = 'ONRAMP_FAILED', + ADD_FUNDS_FAILED = 'ADD_FUNDS_FAILED', +} + +export enum CommerceUserActionEventType { + PAYMENT_METHOD_SELECTED = 'PAYMENT_METHOD_SELECTED', + PAYMENT_TOKEN_SELECTED = 'PAYMENT_TOKEN_SELECTED', + NETWORK_SWITCH = 'NETWORK_SWITCH', +} + +export type CommerceProviderUpdatedEvent = { + /** The connected provider. */ + provider: Web3Provider; + /** The wallet provider name of the connected provider. */ + walletProviderName: WalletProviderName | undefined; + /** The wallet provider EIP-6963 metadata. */ + walletProviderInfo: EIP6963ProviderInfo | undefined; +}; + +export type CommerceSaleSuccessEvent = { + type: CommerceSuccessEventType.SALE_SUCCESS; + data: SaleSuccess; +}; + +export type CommerceSaleSuccessfulTransactionEvent = { + type: CommerceSuccessEventType.SALE_TRANSACTION_SUCCESS; + data: SaleTransactionSuccess; +}; + +export type CommerceOnRampSuccessEvent = { + type: CommerceSuccessEventType.ONRAMP_SUCCESS; + data: OnRampSuccess; +}; // FIMXE: TransactionSent + +export type CommerceBridgeSuccessEvent = { + type: CommerceSuccessEventType.BRIDGE_SUCCESS; + data: BridgeTransactionSent; +}; // FIMXE: TransactionSent + +export type CommerceBridgeClaimWithdrawalSuccessEvent = { + type: CommerceSuccessEventType.BRIDGE_CLAIM_WITHDRAWAL_SUCCESS; + data: BridgeClaimWithdrawalSuccess; +}; // FIMXE: TransactionSent + +export type CommerceSwapSuccessEvent = { + type: CommerceSuccessEventType.SWAP_SUCCESS; + data: SwapSuccess; +}; // FIMXE: TransactionSent + +export type CommerceConnectSuccessEvent = { + type: CommerceSuccessEventType.CONNECT_SUCCESS; + data: ConnectionSuccess; +}; + +export type CommerceAddFundsSuccessEvent = { + type: CommerceSuccessEventType.ADD_FUNDS_SUCCESS; + data: AddFundsSuccess; +}; + +export type CommerceAddFundsConnectSuccessEvent = { + type: CommerceSuccessEventType.CONNECT_SUCCESS; + data: AddFundsConnectSuccess; +}; + +export type CommerceSuccessEvent = + | CommerceAddFundsSuccessEvent + | CommerceAddFundsConnectSuccessEvent + | CommerceConnectSuccessEvent + | CommerceBridgeSuccessEvent + | CommerceBridgeClaimWithdrawalSuccessEvent + | CommerceOnRampSuccessEvent + | CommerceSwapSuccessEvent + | CommerceSaleSuccessEvent + | CommerceSaleSuccessfulTransactionEvent; + +export type CommerceBridgeFailureEvent = { + type: CommerceFailureEventType.BRIDGE_FAILED; + data: BridgeFailed; +}; // FIMXE: Error + +export type CommerceBridgeClaimWithdrawalFailedEvent = { + type: CommerceFailureEventType.BRIDGE_CLAIM_WITHDRAWAL_FAILED; + data: BridgeClaimWithdrawalFailed; +}; // FIMXE: Error + +export type CommerceConnectFailureEvent = { + type: CommerceFailureEventType.CONNECT_FAILED; + data: ConnectionFailed; +}; // FIMXE: Error + +export type CommerceOnRampFailureEvent = { + type: CommerceFailureEventType.ONRAMP_FAILED; + data: OnRampFailed; +}; // FIMXE: Error + +export type CommerceSwapFailureEvent = { + type: CommerceFailureEventType.SWAP_FAILED; + data: SwapFailed; +}; // FIMXE: Error + +export type CommerceSwapRejectedEvent = { + type: CommerceFailureEventType.SWAP_REJECTED; + data: SwapRejected; +}; // FIMXE: Error + +export type CommerceSaleFailureEvent = { + type: CommerceFailureEventType.SALE_FAILED; + data: SaleFailed; +}; + +export type CommerceAddFundsFailureEvent = { + type: CommerceFailureEventType.ADD_FUNDS_FAILED; + data: AddFundsFailed; +}; + +export type CommerceFailureEvent = + | CommerceAddFundsFailureEvent + | CommerceBridgeFailureEvent + | CommerceBridgeClaimWithdrawalFailedEvent + | CommerceConnectFailureEvent + | CommerceOnRampFailureEvent + | CommerceSwapFailureEvent + | CommerceSwapRejectedEvent + | CommerceSaleFailureEvent; + +export type CommercePaymentMethodSelectedEvent = { + type: CommerceUserActionEventType.PAYMENT_METHOD_SELECTED; + data: SalePaymentMethod; +}; + +export type CommercePaymentTokenSelectedEvent = { + type: CommerceUserActionEventType.PAYMENT_TOKEN_SELECTED; + data: SalePaymentToken; +}; + +export type CommerceNetworkSwitchEvent = { + type: CommerceUserActionEventType.NETWORK_SWITCH; + data: WalletNetworkSwitch; +}; + +export type CommerceUserActionEvent = + | CommercePaymentMethodSelectedEvent + | CommercePaymentTokenSelectedEvent + | CommerceNetworkSwitchEvent; diff --git a/packages/checkout/sdk/src/widgets/definitions/events/index.ts b/packages/checkout/sdk/src/widgets/definitions/events/index.ts index fecd91d320..38365dc09f 100644 --- a/packages/checkout/sdk/src/widgets/definitions/events/index.ts +++ b/packages/checkout/sdk/src/widgets/definitions/events/index.ts @@ -6,5 +6,5 @@ export * from './sale'; export * from './bridge'; export * from './orchestration'; export * from './onramp'; -export * from './checkout'; +export * from './commerce'; export * from './addFunds'; diff --git a/packages/checkout/sdk/src/widgets/definitions/events/widgets.ts b/packages/checkout/sdk/src/widgets/definitions/events/widgets.ts index 531a5e0d3d..a859230a55 100644 --- a/packages/checkout/sdk/src/widgets/definitions/events/widgets.ts +++ b/packages/checkout/sdk/src/widgets/definitions/events/widgets.ts @@ -12,7 +12,7 @@ export enum IMTBLWidgetEvents { IMTBL_BRIDGE_WIDGET_EVENT = 'imtbl-bridge-widget', IMTBL_ONRAMP_WIDGET_EVENT = 'imtbl-onramp-widget', IMTBL_SALE_WIDGET_EVENT = 'imtbl-sale-widget', - IMTBL_CHECKOUT_WIDGET_EVENT = 'imtbl-checkout-widget', + IMTBL_COMMERCE_WIDGET_EVENT = 'imtbl-commerce-widget', IMTBL_ADD_FUNDS_WIDGET_EVENT = 'imtbl-add-funds-widget', } diff --git a/packages/checkout/sdk/src/widgets/definitions/global.ts b/packages/checkout/sdk/src/widgets/definitions/global.ts index d9c84a6a2b..8d4e733e1b 100644 --- a/packages/checkout/sdk/src/widgets/definitions/global.ts +++ b/packages/checkout/sdk/src/widgets/definitions/global.ts @@ -94,5 +94,17 @@ declare global { ): void; removeListener(type: KEventName): void; } + + class Commerce implements Widget { + constructor(sdk: Checkout, props: WidgetProperties); + mount(id: string, params?: WidgetParameters[T]): void; + unmount(): void; + update(props: WidgetProperties): void; + addListener( + type: KEventName, + callback: (data: WidgetEventData[T][KEventName]) => void + ): void; + removeListener(type: KEventName): void; + } } } diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/checkout.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/checkout.ts deleted file mode 100644 index a55158e83f..0000000000 --- a/packages/checkout/sdk/src/widgets/definitions/parameters/checkout.ts +++ /dev/null @@ -1,62 +0,0 @@ -/* eslint-disable max-len */ -import { WidgetLanguage, WidgetTheme } from '../configurations'; -import { ConnectWidgetParams } from './connect'; -import { BridgeWidgetParams } from './bridge'; -import { WalletWidgetParams } from './wallet'; -import { SwapWidgetParams } from './swap'; -import { OnRampWidgetParams } from './onramp'; -import { SaleWidgetParams } from './sale'; -import { AddFundsWidgetParams } from './addFunds'; - -export enum CheckoutFlowType { - CONNECT = 'CONNECT', - WALLET = 'WALLET', - SALE = 'SALE', - SWAP = 'SWAP', - BRIDGE = 'BRIDGE', - ONRAMP = 'ONRAMP', - ADD_FUNDS = 'ADD_FUNDS', -} - -export type CheckoutWidgetConnectFlowParams = { - flow: CheckoutFlowType.CONNECT; -} & ConnectWidgetParams; - -export type CheckoutWidgetWalletFlowParams = { - flow: CheckoutFlowType.WALLET; -} & WalletWidgetParams; - -export type CheckoutWidgetSwapFlowParams = { - flow: CheckoutFlowType.SWAP; -} & SwapWidgetParams; - -export type CheckoutWidgetBridgeFlowParams = { - flow: CheckoutFlowType.BRIDGE; -} & BridgeWidgetParams; - -export type CheckoutWidgetOnRampFlowParams = { - flow: CheckoutFlowType.ONRAMP; -} & OnRampWidgetParams; - -export type CheckoutWidgetSaleFlowParams = { - flow: CheckoutFlowType.SALE; -} & SaleWidgetParams; - -export type CheckoutWidgetAddFundsFlowParams = { - flow: CheckoutFlowType.ADD_FUNDS; -} & AddFundsWidgetParams; - -export type CheckoutWidgetFlowParams = - | CheckoutWidgetConnectFlowParams - | CheckoutWidgetWalletFlowParams - | CheckoutWidgetSwapFlowParams - | CheckoutWidgetBridgeFlowParams - | CheckoutWidgetOnRampFlowParams - | CheckoutWidgetSaleFlowParams - | CheckoutWidgetAddFundsFlowParams; - -export type CheckoutWidgetParams = { - /** The language to use for the checkout widget */ - language?: WidgetLanguage; - theme?: WidgetTheme; -} & CheckoutWidgetFlowParams; diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/commerce.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/commerce.ts new file mode 100644 index 0000000000..faf76af009 --- /dev/null +++ b/packages/checkout/sdk/src/widgets/definitions/parameters/commerce.ts @@ -0,0 +1,62 @@ +/* eslint-disable max-len */ +import { WidgetLanguage, WidgetTheme } from '../configurations'; +import { ConnectWidgetParams } from './connect'; +import { BridgeWidgetParams } from './bridge'; +import { WalletWidgetParams } from './wallet'; +import { SwapWidgetParams } from './swap'; +import { OnRampWidgetParams } from './onramp'; +import { SaleWidgetParams } from './sale'; +import { AddFundsWidgetParams } from './addFunds'; + +export enum CommerceFlowType { + CONNECT = 'CONNECT', + WALLET = 'WALLET', + SALE = 'SALE', + SWAP = 'SWAP', + BRIDGE = 'BRIDGE', + ONRAMP = 'ONRAMP', + ADD_FUNDS = 'ADD_FUNDS', +} + +export type CommerceWidgetConnectFlowParams = { + flow: CommerceFlowType.CONNECT; +} & ConnectWidgetParams; + +export type CommerceWidgetWalletFlowParams = { + flow: CommerceFlowType.WALLET; +} & WalletWidgetParams; + +export type CommerceWidgetSwapFlowParams = { + flow: CommerceFlowType.SWAP; +} & SwapWidgetParams; + +export type CommerceWidgetBridgeFlowParams = { + flow: CommerceFlowType.BRIDGE; +} & BridgeWidgetParams; + +export type CommerceWidgetOnRampFlowParams = { + flow: CommerceFlowType.ONRAMP; +} & OnRampWidgetParams; + +export type CommerceWidgetSaleFlowParams = { + flow: CommerceFlowType.SALE; +} & SaleWidgetParams; + +export type CommerceWidgetAddFundsFlowParams = { + flow: CommerceFlowType.ADD_FUNDS; +} & AddFundsWidgetParams; + +export type CommerceWidgetFlowParams = + | CommerceWidgetConnectFlowParams + | CommerceWidgetWalletFlowParams + | CommerceWidgetSwapFlowParams + | CommerceWidgetBridgeFlowParams + | CommerceWidgetOnRampFlowParams + | CommerceWidgetSaleFlowParams + | CommerceWidgetAddFundsFlowParams; + +export type CommerceWidgetParams = { + /** The language to use for the Commerce Widget */ + language?: WidgetLanguage; + theme?: WidgetTheme; +} & CommerceWidgetFlowParams; diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/index.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/index.ts index 69674938a7..5cd5672045 100644 --- a/packages/checkout/sdk/src/widgets/definitions/parameters/index.ts +++ b/packages/checkout/sdk/src/widgets/definitions/parameters/index.ts @@ -6,4 +6,4 @@ export * from './wallet'; export * from './swap'; export * from './onramp'; export * from './sale'; -export * from './checkout'; +export * from './commerce'; diff --git a/packages/checkout/sdk/src/widgets/definitions/types.ts b/packages/checkout/sdk/src/widgets/definitions/types.ts index 50c0377eab..9091f1cb2f 100644 --- a/packages/checkout/sdk/src/widgets/definitions/types.ts +++ b/packages/checkout/sdk/src/widgets/definitions/types.ts @@ -34,11 +34,11 @@ import { WalletDisconnect, WalletEventType, WalletNetworkSwitch, - CheckoutEventType, - CheckoutProviderUpdatedEvent, - CheckoutSuccessEvent, - CheckoutFailureEvent, - CheckoutUserActionEvent, + CommerceEventType, + CommerceProviderUpdatedEvent, + CommerceSuccessEvent, + CommerceFailureEvent, + CommerceUserActionEvent, RequestAddFundsEvent, RequestGoBackEvent, AddFundsEventType, @@ -52,7 +52,7 @@ import { SwapWidgetParams, WalletWidgetParams, OnRampWidgetParams, - CheckoutWidgetParams, + CommerceWidgetParams, AddFundsWidgetParams, } from './parameters'; import { SaleWidgetParams } from './parameters/sale'; @@ -63,7 +63,7 @@ import { SaleWidgetConfiguration, SwapWidgetConfiguration, WalletWidgetConfiguration, - CheckoutWidgetConfiguration, + CommerceWidgetConfiguration, AddFundsWidgetConfiguration, } from './configurations'; import { WidgetTheme } from './configurations/theme'; @@ -78,7 +78,7 @@ export enum WidgetType { BRIDGE = 'bridge', ONRAMP = 'onramp', SALE = 'sale', - CHECKOUT = 'checkout', + IMMUTABLE_COMMERCE = 'immutableCommerce', ADD_FUNDS = 'addFunds', } @@ -98,8 +98,7 @@ export type WidgetConfigurations = { [WidgetType.ONRAMP]: OnrampWidgetConfiguration; [WidgetType.SALE]: SaleWidgetConfiguration; [WidgetType.ADD_FUNDS]: AddFundsWidgetConfiguration; - - [WidgetType.CHECKOUT]: CheckoutWidgetConfiguration; + [WidgetType.IMMUTABLE_COMMERCE]: CommerceWidgetConfiguration; }; // Mapping each widget type to their parameters @@ -111,8 +110,7 @@ export type WidgetParameters = { [WidgetType.ONRAMP]: OnRampWidgetParams; [WidgetType.SALE]: SaleWidgetParams; [WidgetType.ADD_FUNDS]: AddFundsWidgetParams; - - [WidgetType.CHECKOUT]: CheckoutWidgetParams; + [WidgetType.IMMUTABLE_COMMERCE]: CommerceWidgetParams; }; /** @@ -125,7 +123,7 @@ export type WidgetEventTypes = { [WidgetType.BRIDGE]: BridgeEventType | OrchestrationEventType; [WidgetType.ONRAMP]: OnRampEventType | OrchestrationEventType; [WidgetType.SALE]: SaleEventType | OrchestrationEventType; - [WidgetType.CHECKOUT]: CheckoutEventType | OrchestrationEventType; + [WidgetType.IMMUTABLE_COMMERCE]: CommerceEventType | OrchestrationEventType; [WidgetType.ADD_FUNDS]: AddFundsEventType | OrchestrationEventType; }; @@ -203,14 +201,14 @@ export type WidgetEventData = { } & OrchestrationMapping & ProviderEventMapping; - [WidgetType.CHECKOUT]: { - [CheckoutEventType.INITIALISED]: CheckoutWidgetParams; - [CheckoutEventType.PROVIDER_UPDATED]: CheckoutProviderUpdatedEvent; - [CheckoutEventType.CLOSE]: {}; - [CheckoutEventType.SUCCESS]: CheckoutSuccessEvent; - [CheckoutEventType.FAILURE]: CheckoutFailureEvent; - [CheckoutEventType.DISCONNECTED]: {}; - [CheckoutEventType.USER_ACTION]: CheckoutUserActionEvent; + [WidgetType.IMMUTABLE_COMMERCE]: { + [CommerceEventType.INITIALISED]: CommerceWidgetParams; + [CommerceEventType.PROVIDER_UPDATED]: CommerceProviderUpdatedEvent; + [CommerceEventType.CLOSE]: {}; + [CommerceEventType.SUCCESS]: CommerceSuccessEvent; + [CommerceEventType.FAILURE]: CommerceFailureEvent; + [CommerceEventType.DISCONNECTED]: {}; + [CommerceEventType.USER_ACTION]: CommerceUserActionEvent; }; [WidgetType.ADD_FUNDS]: { @@ -321,7 +319,7 @@ export interface Widget { } /** - * Represents the version of the Checkout Widgets to use defaults to (0.1.9-alpha) + * Represents the version of the Commerce Widgets to use defaults to (0.1.9-alpha) * @property {number} major * @property {number | undefined} minor * @property {number | undefined} patch @@ -348,7 +346,7 @@ export type SemanticVersion = { }; /** - * Represents the global configuration options for the Checkout Widgets. + * Represents the global configuration options for the Commerce Widgets. * @property {WidgetTheme | undefined} theme * @property {Environment | undefined} environment * @property {SemanticVersion | undefined} version @@ -361,7 +359,7 @@ export type CheckoutWidgetsConfig = { theme?: WidgetTheme; /** The environment configuration (default: "SANDBOX") */ environment?: Environment; - /** The version of the checkout widgets js file to use (default: "0.1.x") */ + /** The version of the Checkout Widgets js file to use (default: "0.1.x") */ version?: SemanticVersion; /** Enable on-ramp top-up method (default: "true") */ isOnRampEnabled?: boolean; diff --git a/packages/checkout/widgets-lib/src/context/view-context/CheckoutWidgetViewContextTypes.ts b/packages/checkout/widgets-lib/src/context/view-context/CheckoutWidgetViewContextTypes.ts index 4ae474775a..0a87400f09 100644 --- a/packages/checkout/widgets-lib/src/context/view-context/CheckoutWidgetViewContextTypes.ts +++ b/packages/checkout/widgets-lib/src/context/view-context/CheckoutWidgetViewContextTypes.ts @@ -9,7 +9,7 @@ import { SwapWidgetParams, AddFundsWidgetParams, AddFundsWidgetConfiguration, - CheckoutFlowType, + CommerceFlowType, ConnectWidgetParams, ConnectWidgetConfiguration, WalletWidgetParams, @@ -27,7 +27,7 @@ export type CheckoutWidgetView = | BrdigeView; interface ConnectView extends ViewType { - type: CheckoutFlowType.CONNECT; + type: CommerceFlowType.CONNECT; data: { params: ConnectWidgetParams; config: ConnectWidgetConfiguration; @@ -35,7 +35,7 @@ interface ConnectView extends ViewType { } interface WalletView extends ViewType { - type: CheckoutFlowType.WALLET; + type: CommerceFlowType.WALLET; data: { params: WalletWidgetParams; config: WalletWidgetConfiguration; @@ -43,7 +43,7 @@ interface WalletView extends ViewType { } interface AddFundsView extends ViewType { - type: CheckoutFlowType.ADD_FUNDS; + type: CommerceFlowType.ADD_FUNDS; data: { params: AddFundsWidgetParams; config: AddFundsWidgetConfiguration; @@ -51,7 +51,7 @@ interface AddFundsView extends ViewType { } interface SaleView extends ViewType { - type: CheckoutFlowType.SALE; + type: CommerceFlowType.SALE; data: { params: Required; config: SaleWidgetConfiguration; @@ -59,7 +59,7 @@ interface SaleView extends ViewType { } interface SwapView extends ViewType { - type: CheckoutFlowType.SWAP; + type: CommerceFlowType.SWAP; data: { params: SwapWidgetParams; config: SwapWidgetConfiguration; @@ -67,7 +67,7 @@ interface SwapView extends ViewType { } interface OnRampView extends ViewType { - type: CheckoutFlowType.ONRAMP; + type: CommerceFlowType.ONRAMP; data: { params: OnRampWidgetParams; config: OnrampWidgetConfiguration; @@ -75,7 +75,7 @@ interface OnRampView extends ViewType { } interface BrdigeView extends ViewType { - type: CheckoutFlowType.BRIDGE; + type: CommerceFlowType.BRIDGE; data: { params: BridgeWidgetParams; config: BridgeWidgetConfiguration; diff --git a/packages/checkout/widgets-lib/src/factory.ts b/packages/checkout/widgets-lib/src/factory.ts index c7eeb8ab80..ed3306c12e 100644 --- a/packages/checkout/widgets-lib/src/factory.ts +++ b/packages/checkout/widgets-lib/src/factory.ts @@ -1,29 +1,28 @@ +import { Web3Provider } from '@ethersproject/providers'; import { - Widget, Checkout, - WidgetType, IWidgetsFactory, + Widget, WidgetConfiguration, - WidgetProperties, WidgetConfigurations, + WidgetProperties, + WidgetType, } from '@imtbl/checkout-sdk'; -import { Web3Provider } from '@ethersproject/providers'; -import { Environment } from '@imtbl/config'; -import { Connect } from './widgets/connect/ConnectWidgetRoot'; -import { Swap } from './widgets/swap/SwapWidgetRoot'; -import { OnRamp } from './widgets/on-ramp/OnRampWidgetRoot'; -import { Wallet } from './widgets/wallet/WalletWidgetRoot'; -import { Sale } from './widgets/sale/SaleWidgetRoot'; -import { Bridge } from './widgets/bridge/BridgeWidgetRoot'; -import { WalletConnectManager } from './lib/walletConnect'; +import './i18n'; import { - sendProviderUpdatedEvent, addProviderListenersForWidgetRoot, DEFAULT_THEME, + sendProviderUpdatedEvent, } from './lib'; -import './i18n'; -import { CheckoutWidgetRoot } from './widgets/checkout/CheckoutWidgetRoot'; +import { WalletConnectManager } from './lib/walletConnect'; import { AddFunds } from './widgets/add-funds/AddFundsRoot'; +import { Bridge } from './widgets/bridge/BridgeWidgetRoot'; +import { CommerceWidgetRoot } from './widgets/immutable-commerce/CommerceWidgetRoot'; +import { Connect } from './widgets/connect/ConnectWidgetRoot'; +import { OnRamp } from './widgets/on-ramp/OnRampWidgetRoot'; +import { Sale } from './widgets/sale/SaleWidgetRoot'; +import { Swap } from './widgets/swap/SwapWidgetRoot'; +import { Wallet } from './widgets/wallet/WalletWidgetRoot'; export class WidgetsFactory implements IWidgetsFactory { private sdk: Checkout; @@ -95,14 +94,11 @@ export class WidgetsFactory implements IWidgetsFactory { provider, }) as Widget as Widget; } - case WidgetType.CHECKOUT: { - if (this.sdk.config.environment === Environment.PRODUCTION) { - throw new Error('Checkout widget is not supported in production'); - } - return new CheckoutWidgetRoot(this.sdk, { + case WidgetType.IMMUTABLE_COMMERCE: { + return new CommerceWidgetRoot(this.sdk, { config: { ...this.widgetConfig, ...(config) }, provider, - }) as Widget as Widget; + }) as Widget as Widget; } case WidgetType.ADD_FUNDS: { return new AddFunds(this.sdk, { diff --git a/packages/checkout/widgets-lib/src/lib/constants.ts b/packages/checkout/widgets-lib/src/lib/constants.ts index 2a762d16a9..ead1ebd053 100644 --- a/packages/checkout/widgets-lib/src/lib/constants.ts +++ b/packages/checkout/widgets-lib/src/lib/constants.ts @@ -47,42 +47,42 @@ export const DEFAULT_TRANSACTIONS_RETRY_POLICY: RetryType = { }; /** - * Checkout Widget default env + * Commerce Widget default env */ export const DEFAULT_ENV = Environment.SANDBOX; /** - * Checkout Widget default theme + * Commerce Widget default theme */ export const DEFAULT_THEME = WidgetTheme.DARK; /** - * Checkout Widget default provider + * Commerce Widget default provider */ export const DEFAULT_PROVIDER = WalletProviderName.METAMASK; /** - * Checkout Widget default onramp enabled flag + * Commerce Widget default onramp enabled flag */ export const DEFAULT_ON_RAMP_ENABLED = true; /** - * Checkout Widget default swap enabled flag + * Commerce Widget default swap enabled flag */ export const DEFAULT_SWAP_ENABLED = true; /** - * Checkout Widget default bridge enabled flag + * Commerce Widget default bridge enabled flag */ export const DEFAULT_BRIDGE_ENABLED = true; /** - * Checkout Widget default add funds enabled flag + * Commerce Widget default add funds enabled flag */ export const DEFAULT_ADD_FUNDS_ENABLED = true; /** - * Checkout Widget default refresh quote interval + * Commerce Widget default refresh quote interval */ export const DEFAULT_QUOTE_REFRESH_INTERVAL = 30000; diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/context/CheckoutContextProvider.tsx b/packages/checkout/widgets-lib/src/widgets/checkout/context/CheckoutContextProvider.tsx deleted file mode 100644 index b65d313b90..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/checkout/context/CheckoutContextProvider.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { ReactNode, useMemo, useReducer } from 'react'; -import { - CheckoutContext, - checkoutReducer, - initialCheckoutState, -} from './CheckoutContext'; -import { useConnectLoaderState } from '../../../context/connect-loader-context/ConnectLoaderContext'; - -export const useCheckoutWidgetState = () => { - const [viewState, viewDispatch] = useReducer( - checkoutReducer, - initialCheckoutState, - ); - - return [viewState, viewDispatch] as const; -}; - -type CheckoutContextProviderProps = { - children: ReactNode; -}; - -export function CheckoutWidgetContextProvicer({ - children, -}: CheckoutContextProviderProps) { - const [{ checkout, provider }] = useConnectLoaderState(); - const [checkoutState, checkoutDispatch] = useCheckoutWidgetState(); - - const values = useMemo( - () => ({ - checkoutState: { ...checkoutState, checkout, provider }, - checkoutDispatch, - }), - [checkoutState, checkoutDispatch, checkout, provider], - ); - - return ( - - {children} - - ); -} diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/functions/isValidCheckoutFlow.ts b/packages/checkout/widgets-lib/src/widgets/checkout/functions/isValidCheckoutFlow.ts deleted file mode 100644 index cf785fcd46..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/checkout/functions/isValidCheckoutFlow.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { CheckoutFlowType } from '@imtbl/checkout-sdk'; - -/** Orchestration Events List */ -export const checkoutFlows = [ - CheckoutFlowType.CONNECT, - CheckoutFlowType.WALLET, - CheckoutFlowType.SALE, - CheckoutFlowType.SWAP, - CheckoutFlowType.BRIDGE, - CheckoutFlowType.ONRAMP, - CheckoutFlowType.ADD_FUNDS, -]; - -/** - * Check if event is orchestration event - */ -export function isValidCheckoutFlow(flow: string): boolean { - return checkoutFlows.includes(flow as CheckoutFlowType); -} diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx similarity index 86% rename from packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx index fc3c93b024..1596f636b1 100644 --- a/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx @@ -2,15 +2,15 @@ import { Suspense, useCallback, useEffect, useMemo, } from 'react'; import { - CheckoutEventType, - CheckoutWidgetParams, - CheckoutFlowType, - CheckoutWidgetConfiguration, + CommerceEventType, + CommerceWidgetParams, + CommerceFlowType, + CommerceWidgetConfiguration, Checkout, } from '@imtbl/checkout-sdk'; import { useTranslation } from 'react-i18next'; import { Web3Provider } from '@ethersproject/providers'; -import { CheckoutWidgetContextProvicer } from './context/CheckoutContextProvider'; +import { CommerceWidgetContextProvicer } from './context/CommerceContextProvider'; import { useViewState, SharedViews, @@ -18,7 +18,7 @@ import { ViewActions, } from '../../context/view-context/ViewContext'; import { LoadingView } from '../../views/loading/LoadingView'; -import { sendCheckoutEvent } from './CheckoutWidgetEvents'; +import { sendCheckoutEvent } from './CommerceWidgetEvents'; import { useEventTargetState } from '../../context/event-target-context/EventTargetContext'; import { ErrorView } from '../../views/error/ErrorView'; import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig'; @@ -36,18 +36,18 @@ import { } from './functions/getFlowRequiresContext'; import { useWidgetEvents } from './hooks/useWidgetEvents'; import { getConnectLoaderParams } from './functions/getConnectLoaderParams'; -import { checkoutFlows } from './functions/isValidCheckoutFlow'; +import { commerceFlows } from './functions/isValidCommerceFlow'; import { ProvidersContextProvider } from '../../context/providers-context/ProvidersContext'; -export type CheckoutWidgetInputs = { +export type CommerceWidgetInputs = { checkout: Checkout; web3Provider?: Web3Provider; - flowParams: CheckoutWidgetParams; - flowConfig: CheckoutWidgetConfiguration; + flowParams: CommerceWidgetParams; + flowConfig: CommerceWidgetConfiguration; widgetsConfig: StrongCheckoutWidgetsConfig; }; -export default function CheckoutWidget(props: CheckoutWidgetInputs) { +export default function CommerceWidget(props: CommerceWidgetInputs) { const { flowParams, flowConfig, widgetsConfig, checkout, web3Provider, } = props; @@ -117,7 +117,7 @@ export default function CheckoutWidget(props: CheckoutWidgetInputs) { * If invalid flow set error view */ useEffect(() => { - if (checkoutFlows.includes(flowParams.flow)) return; + if (commerceFlows.includes(flowParams.flow)) return; viewDispatch({ payload: { @@ -156,7 +156,7 @@ export default function CheckoutWidget(props: CheckoutWidgetInputs) { return ( - + {/* --- Status Views --- */} {view.type === SharedViews.LOADING_VIEW && ( @@ -165,7 +165,7 @@ export default function CheckoutWidget(props: CheckoutWidgetInputs) { { sendCheckoutEvent(eventTarget, { - type: CheckoutEventType.CLOSE, + type: CommerceEventType.CLOSE, data: {}, }); }} @@ -176,20 +176,20 @@ export default function CheckoutWidget(props: CheckoutWidgetInputs) { /> )} {/* --- Widgets without connect loader or providers context --- */} - {view.type === CheckoutFlowType.CONNECT && ( + {view.type === CommerceFlowType.CONNECT && ( { sendCheckoutEvent(eventTarget, { - type: CheckoutEventType.CLOSE, + type: CommerceEventType.CLOSE, data: {}, }); }} {...(view.data.params || {})} /> )} - {view.type === CheckoutFlowType.BRIDGE && ( + {view.type === CommerceFlowType.BRIDGE && ( - {view.type === CheckoutFlowType.ADD_FUNDS && ( + {view.type === CommerceFlowType.ADD_FUNDS && ( { sendCheckoutEvent(eventTarget, { - type: CheckoutEventType.CLOSE, + type: CommerceEventType.CLOSE, data: {}, }); }} @@ -230,7 +230,7 @@ export default function CheckoutWidget(props: CheckoutWidgetInputs) { } > - {view.type === CheckoutFlowType.WALLET && ( + {view.type === CommerceFlowType.WALLET && ( )} - {view.type === CheckoutFlowType.SALE && ( + {view.type === CommerceFlowType.SALE && ( )} - {view.type === CheckoutFlowType.SWAP && ( + {view.type === CommerceFlowType.SWAP && ( )} - {view.type === CheckoutFlowType.ONRAMP && ( + {view.type === CommerceFlowType.ONRAMP && ( )} - + ); } diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidgetEvents.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidgetEvents.ts similarity index 52% rename from packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidgetEvents.ts rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidgetEvents.ts index a1165904e3..05da0d04a9 100644 --- a/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidgetEvents.ts +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidgetEvents.ts @@ -1,23 +1,23 @@ import { WidgetEvent, - CheckoutEventType, + CommerceEventType, IMTBLWidgetEvents, WidgetType, WidgetEventData, } from '@imtbl/checkout-sdk'; -export type CheckoutEventDetail = { - type: CheckoutEventType; - data: WidgetEventData[WidgetType.CHECKOUT][keyof WidgetEventData[WidgetType.CHECKOUT]]; +export type CommerceEventDetail = { + type: CommerceEventType; + data: WidgetEventData[WidgetType.IMMUTABLE_COMMERCE][keyof WidgetEventData[WidgetType.IMMUTABLE_COMMERCE]]; }; export const sendCheckoutEvent = ( eventTarget: Window | EventTarget, - detail: CheckoutEventDetail, + detail: CommerceEventDetail, ) => { const event = new CustomEvent< - WidgetEvent - >(IMTBLWidgetEvents.IMTBL_CHECKOUT_WIDGET_EVENT, { detail }); + WidgetEvent + >(IMTBLWidgetEvents.IMTBL_COMMERCE_WIDGET_EVENT, { detail }); // eslint-disable-next-line no-console console.log('checkout app event ', eventTarget, event); if (eventTarget !== undefined) eventTarget.dispatchEvent(event); diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidgetRoot.tsx similarity index 82% rename from packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidgetRoot.tsx rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidgetRoot.tsx index c5504dd3cb..262c9bad87 100644 --- a/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidgetRoot.tsx +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidgetRoot.tsx @@ -1,18 +1,18 @@ import { IMTBLWidgetEvents, - CheckoutWidgetConfiguration, - CheckoutWidgetParams, + CommerceWidgetConfiguration, + CommerceWidgetParams, WidgetProperties, WidgetTheme, WidgetType, - CheckoutWidgetConnectFlowParams, - CheckoutWidgetWalletFlowParams, - CheckoutWidgetAddFundsFlowParams, - CheckoutWidgetSwapFlowParams, - CheckoutWidgetBridgeFlowParams, - CheckoutWidgetOnRampFlowParams, - CheckoutWidgetSaleFlowParams, - CheckoutFlowType, + CommerceWidgetConnectFlowParams, + CommerceWidgetWalletFlowParams, + CommerceWidgetAddFundsFlowParams, + CommerceWidgetSwapFlowParams, + CommerceWidgetBridgeFlowParams, + CommerceWidgetOnRampFlowParams, + CommerceWidgetSaleFlowParams, + CommerceFlowType, } from '@imtbl/checkout-sdk'; import React, { Suspense } from 'react'; import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider'; @@ -27,17 +27,17 @@ import { isValidWalletProvider, } from '../../lib/validations/widgetValidators'; import { deduplicateSaleItemsArray } from './functions/deduplicateSaleItemsArray'; -import { checkoutFlows } from './functions/isValidCheckoutFlow'; +import { commerceFlows } from './functions/isValidCommerceFlow'; -const CheckoutWidget = React.lazy(() => import('./CheckoutWidget')); +const CommerceWidget = React.lazy(() => import('./CommerceWidget')); -export class CheckoutWidgetRoot extends Base { - protected eventTopic: IMTBLWidgetEvents = IMTBLWidgetEvents.IMTBL_CHECKOUT_WIDGET_EVENT; +export class CommerceWidgetRoot extends Base { + protected eventTopic: IMTBLWidgetEvents = IMTBLWidgetEvents.IMTBL_COMMERCE_WIDGET_EVENT; protected getValidatedProperties({ config, - }: WidgetProperties): WidgetProperties { - let validatedConfig: CheckoutWidgetConfiguration | undefined; + }: WidgetProperties): WidgetProperties { + let validatedConfig: CommerceWidgetConfiguration | undefined; if (config) { validatedConfig = config; @@ -52,7 +52,7 @@ export class CheckoutWidgetRoot extends Base { }; } - protected getValidConnectFlowParams(params: CheckoutWidgetConnectFlowParams) { + protected getValidConnectFlowParams(params: CommerceWidgetConnectFlowParams) { const validatedParams = { ...params }; if (!Array.isArray(validatedParams.blocklistWalletRdns)) { @@ -64,11 +64,11 @@ export class CheckoutWidgetRoot extends Base { return validatedParams; } - protected getValidWalletFlowParams(params: CheckoutWidgetWalletFlowParams) { + protected getValidWalletFlowParams(params: CommerceWidgetWalletFlowParams) { return params; } - protected getValidSaleFlowParams(params: CheckoutWidgetSaleFlowParams) { + protected getValidSaleFlowParams(params: CommerceWidgetSaleFlowParams) { const validatedParams = { ...params }; if (!isValidWalletProvider(params.walletProviderName)) { @@ -111,7 +111,7 @@ export class CheckoutWidgetRoot extends Base { } protected getValidAddFundsFlowParams( - params: CheckoutWidgetAddFundsFlowParams, + params: CommerceWidgetAddFundsFlowParams, ) { const validatedParams = { ...params }; @@ -142,7 +142,7 @@ export class CheckoutWidgetRoot extends Base { return validatedParams; } - protected getValidSwapFlowParams(params: CheckoutWidgetSwapFlowParams) { + protected getValidSwapFlowParams(params: CommerceWidgetSwapFlowParams) { const validatedParams = { ...params }; if (!isValidAmount(params.amount)) { @@ -170,7 +170,7 @@ export class CheckoutWidgetRoot extends Base { return validatedParams; } - protected getValidBridgeFlowParams(params: CheckoutWidgetBridgeFlowParams) { + protected getValidBridgeFlowParams(params: CommerceWidgetBridgeFlowParams) { const validatedParams = { ...params }; if (!isValidAmount(params.amount)) { @@ -188,7 +188,7 @@ export class CheckoutWidgetRoot extends Base { return validatedParams; } - protected getValidOnRampFlowParams(params: CheckoutWidgetOnRampFlowParams) { + protected getValidOnRampFlowParams(params: CommerceWidgetOnRampFlowParams) { const validatedParams = { ...params }; if (!isValidAmount(params.amount)) { @@ -207,30 +207,30 @@ export class CheckoutWidgetRoot extends Base { } protected getValidatedParameters( - params: CheckoutWidgetParams, - ): CheckoutWidgetParams { + params: CommerceWidgetParams, + ): CommerceWidgetParams { // if empty do nothing if (Object.keys(params).length === 0) { return params; } const flowType = params.flow; - const supportedFlows = checkoutFlows.join(', '); + const supportedFlows = commerceFlows.join(', '); switch (flowType) { - case CheckoutFlowType.CONNECT: + case CommerceFlowType.CONNECT: return this.getValidConnectFlowParams(params); - case CheckoutFlowType.WALLET: + case CommerceFlowType.WALLET: return this.getValidWalletFlowParams(params); - case CheckoutFlowType.SALE: + case CommerceFlowType.SALE: return this.getValidSaleFlowParams(params); - case CheckoutFlowType.SWAP: + case CommerceFlowType.SWAP: return this.getValidSwapFlowParams(params); - case CheckoutFlowType.BRIDGE: + case CommerceFlowType.BRIDGE: return this.getValidBridgeFlowParams(params); - case CheckoutFlowType.ONRAMP: + case CommerceFlowType.ONRAMP: return this.getValidOnRampFlowParams(params); - case CheckoutFlowType.ADD_FUNDS: + case CommerceFlowType.ADD_FUNDS: return this.getValidAddFundsFlowParams(params); default: // eslint-disable-next-line no-console @@ -255,7 +255,7 @@ export class CheckoutWidgetRoot extends Base { } > - ; +export interface CommerceContextState { + commerceState: CommerceState; + commerceDispatch: React.Dispatch; } -export interface CheckoutAction { +export interface CommerceAction { payload: ActionPayload; } @@ -31,53 +31,53 @@ type ActionPayload = | SetProviderPayload | SetPassportPayload; -export enum CheckoutActions { +export enum CommerceActions { SET_CHECKOUT = 'SET_CHECKOUT', SET_PROVIDER = 'SET_PROVIDER', SET_PASSPORT = 'SET_PASSPORT', } export interface SetCheckoutPayload { - type: CheckoutActions.SET_CHECKOUT; + type: CommerceActions.SET_CHECKOUT; checkout: Checkout; } export interface SetProviderPayload { - type: CheckoutActions.SET_PROVIDER; + type: CommerceActions.SET_PROVIDER; provider: Web3Provider | undefined; } export interface SetPassportPayload { - type: CheckoutActions.SET_PASSPORT; + type: CommerceActions.SET_PASSPORT; passport: Passport | undefined; } // eslint-disable-next-line @typescript-eslint/naming-convention -export const CheckoutContext = createContext({ - checkoutState: initialCheckoutState, - checkoutDispatch: () => { }, +export const CommerceContext = createContext({ + commerceState: initialCommerceState, + commerceDispatch: () => { }, }); -CheckoutContext.displayName = 'CheckoutContext'; // help with debugging Context in browser +CommerceContext.displayName = 'CommerceContext'; // help with debugging Context in browser export type Reducer = (prevState: S, action: A) => S; -export const checkoutReducer: Reducer = ( - state: CheckoutState, - action: CheckoutAction, +export const commerceReducer: Reducer = ( + state: CommerceState, + action: CommerceAction, ) => { switch (action.payload.type) { - case CheckoutActions.SET_CHECKOUT: + case CommerceActions.SET_CHECKOUT: return { ...state, checkout: action.payload.checkout, }; - case CheckoutActions.SET_PROVIDER: + case CommerceActions.SET_PROVIDER: return { ...state, provider: action.payload.provider, }; - case CheckoutActions.SET_PASSPORT: + case CommerceActions.SET_PASSPORT: return { ...state, passport: action.payload.passport, diff --git a/packages/checkout/widgets-lib/src/widgets/immutable-commerce/context/CommerceContextProvider.tsx b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/context/CommerceContextProvider.tsx new file mode 100644 index 0000000000..b0fa6fb659 --- /dev/null +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/context/CommerceContextProvider.tsx @@ -0,0 +1,41 @@ +import { ReactNode, useMemo, useReducer } from 'react'; +import { + CommerceContext, + commerceReducer, + initialCommerceState, +} from './CommerceContext'; +import { useConnectLoaderState } from '../../../context/connect-loader-context/ConnectLoaderContext'; + +export const useCommerceWidgetState = () => { + const [viewState, viewDispatch] = useReducer( + commerceReducer, + initialCommerceState, + ); + + return [viewState, viewDispatch] as const; +}; + +type CommerceContextProviderProps = { + children: ReactNode; +}; + +export function CommerceWidgetContextProvicer({ + children, +}: CommerceContextProviderProps) { + const [{ checkout, provider }] = useConnectLoaderState(); + const [commerceState, commerceDispatch] = useCommerceWidgetState(); + + const values = useMemo( + () => ({ + commerceState: { ...commerceState, checkout, provider }, + commerceDispatch, + }), + [commerceState, commerceDispatch, checkout, provider], + ); + + return ( + + {children} + + ); +} diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/functions/.gitkeep b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/.gitkeep similarity index 100% rename from packages/checkout/widgets-lib/src/widgets/checkout/functions/.gitkeep rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/.gitkeep diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/functions/deduplicateSaleItemsArray.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/deduplicateSaleItemsArray.ts similarity index 100% rename from packages/checkout/widgets-lib/src/widgets/checkout/functions/deduplicateSaleItemsArray.ts rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/deduplicateSaleItemsArray.ts diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/functions/getCheckoutWidgetEvent.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getCommerceWidgetEvent.ts similarity index 69% rename from packages/checkout/widgets-lib/src/widgets/checkout/functions/getCheckoutWidgetEvent.ts rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getCommerceWidgetEvent.ts index a98b9e02cc..2c4b6a3ed2 100644 --- a/packages/checkout/widgets-lib/src/widgets/checkout/functions/getCheckoutWidgetEvent.ts +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getCommerceWidgetEvent.ts @@ -1,10 +1,10 @@ import { AddFundsEventType, BridgeEventType, - CheckoutEventType, - CheckoutFailureEventType, - CheckoutSuccessEventType, - CheckoutUserActionEventType, + CommerceEventType, + CommerceFailureEventType, + CommerceSuccessEventType, + CommerceUserActionEventType, ConnectEventType, IMTBLWidgetEvents, OnRampEventType, @@ -14,38 +14,38 @@ import { WalletEventType, } from '@imtbl/checkout-sdk'; -import { CheckoutEventDetail } from '../CheckoutWidgetEvents'; +import { CommerceEventDetail } from '../CommerceWidgetEvents'; /** * Map Connect Widget Events */ function mapConnectWidgetEvent( event: CustomEvent<{ type: ConnectEventType; data: Record }>, -): CheckoutEventDetail { +): CommerceEventDetail { const { type, data } = event.detail; switch (type) { case ConnectEventType.SUCCESS: return { - type: CheckoutEventType.SUCCESS, + type: CommerceEventType.SUCCESS, data: { - type: CheckoutSuccessEventType.CONNECT_SUCCESS, + type: CommerceSuccessEventType.CONNECT_SUCCESS, data, }, }; case ConnectEventType.FAILURE: return { - type: CheckoutEventType.FAILURE, + type: CommerceEventType.FAILURE, data: { - type: CheckoutFailureEventType.CONNECT_FAILED, + type: CommerceFailureEventType.CONNECT_FAILED, data, }, }; case ConnectEventType.CLOSE_WIDGET: return { - type: CheckoutEventType.CLOSE, + type: CommerceEventType.CLOSE, data: {}, }; @@ -59,26 +59,26 @@ function mapConnectWidgetEvent( */ function mapWalletWidgetEvent( event: CustomEvent<{ type: WalletEventType; data: Record }>, -): CheckoutEventDetail { +): CommerceEventDetail { const { type, data } = event.detail; switch (type) { case WalletEventType.NETWORK_SWITCH: return { - type: CheckoutEventType.USER_ACTION, + type: CommerceEventType.USER_ACTION, data: { - type: CheckoutUserActionEventType.NETWORK_SWITCH, + type: CommerceUserActionEventType.NETWORK_SWITCH, data, }, }; case WalletEventType.DISCONNECT_WALLET: return { - type: CheckoutEventType.DISCONNECTED, + type: CommerceEventType.DISCONNECTED, data: {}, }; case WalletEventType.CLOSE_WIDGET: return { - type: CheckoutEventType.CLOSE, + type: CommerceEventType.CLOSE, data: {}, }; default: @@ -91,37 +91,37 @@ function mapWalletWidgetEvent( */ function mapSwapWidgetEvent( event: CustomEvent<{ type: SwapEventType; data: Record }>, -): CheckoutEventDetail { +): CommerceEventDetail { const { type, data } = event.detail; switch (type) { case SwapEventType.SUCCESS: return { - type: CheckoutEventType.SUCCESS, + type: CommerceEventType.SUCCESS, data: { - type: CheckoutSuccessEventType.SWAP_SUCCESS, + type: CommerceSuccessEventType.SWAP_SUCCESS, data, }, }; case SwapEventType.FAILURE: return { - type: CheckoutEventType.FAILURE, + type: CommerceEventType.FAILURE, data: { - type: CheckoutFailureEventType.SWAP_FAILED, + type: CommerceFailureEventType.SWAP_FAILED, data, }, }; case SwapEventType.REJECTED: return { - type: CheckoutEventType.FAILURE, + type: CommerceEventType.FAILURE, data: { - type: CheckoutFailureEventType.SWAP_REJECTED, + type: CommerceFailureEventType.SWAP_REJECTED, data, }, }; case SwapEventType.CLOSE_WIDGET: return { - type: CheckoutEventType.CLOSE, + type: CommerceEventType.CLOSE, data: {}, }; @@ -135,7 +135,7 @@ function mapSwapWidgetEvent( */ function mapAddFundsWidgetEvent( event: CustomEvent<{ type: AddFundsEventType; data: Record }>, -): CheckoutEventDetail { +): CommerceEventDetail { const { type } = event.detail; switch (type) { @@ -149,45 +149,45 @@ function mapAddFundsWidgetEvent( */ function mapBridgeWidgetEvent( event: CustomEvent<{ type: BridgeEventType; data: Record }>, -): CheckoutEventDetail { +): CommerceEventDetail { const { type, data } = event.detail; switch (type) { case BridgeEventType.TRANSACTION_SENT: return { - type: CheckoutEventType.SUCCESS, + type: CommerceEventType.SUCCESS, data: { - type: CheckoutSuccessEventType.BRIDGE_SUCCESS, + type: CommerceSuccessEventType.BRIDGE_SUCCESS, data, }, }; case BridgeEventType.CLAIM_WITHDRAWAL_SUCCESS: return { - type: CheckoutEventType.SUCCESS, + type: CommerceEventType.SUCCESS, data: { - type: CheckoutSuccessEventType.BRIDGE_CLAIM_WITHDRAWAL_SUCCESS, + type: CommerceSuccessEventType.BRIDGE_CLAIM_WITHDRAWAL_SUCCESS, data, }, }; case BridgeEventType.CLAIM_WITHDRAWAL_FAILURE: return { - type: CheckoutEventType.FAILURE, + type: CommerceEventType.FAILURE, data: { - type: CheckoutFailureEventType.BRIDGE_CLAIM_WITHDRAWAL_FAILED, + type: CommerceFailureEventType.BRIDGE_CLAIM_WITHDRAWAL_FAILED, data, }, }; case BridgeEventType.FAILURE: return { - type: CheckoutEventType.FAILURE, + type: CommerceEventType.FAILURE, data: { - type: CheckoutFailureEventType.BRIDGE_FAILED, + type: CommerceFailureEventType.BRIDGE_FAILED, data, }, }; case BridgeEventType.CLOSE_WIDGET: return { - type: CheckoutEventType.CLOSE, + type: CommerceEventType.CLOSE, data: {}, }; default: @@ -200,29 +200,29 @@ function mapBridgeWidgetEvent( */ function mapOnrampWidgetEvent( event: CustomEvent<{ type: OnRampEventType; data: Record }>, -): CheckoutEventDetail { +): CommerceEventDetail { const { type, data } = event.detail; switch (type) { case OnRampEventType.SUCCESS: return { - type: CheckoutEventType.SUCCESS, + type: CommerceEventType.SUCCESS, data: { - type: CheckoutSuccessEventType.ONRAMP_SUCCESS, + type: CommerceSuccessEventType.ONRAMP_SUCCESS, data, }, }; case OnRampEventType.FAILURE: return { - type: CheckoutEventType.FAILURE, + type: CommerceEventType.FAILURE, data: { - type: CheckoutFailureEventType.ONRAMP_FAILED, + type: CommerceFailureEventType.ONRAMP_FAILED, data, }, }; case OnRampEventType.CLOSE_WIDGET: return { - type: CheckoutEventType.CLOSE, + type: CommerceEventType.CLOSE, data: {}, }; default: @@ -232,52 +232,52 @@ function mapOnrampWidgetEvent( function mapSaleWidgetEvent( event: CustomEvent<{ type: SaleEventType; data: Record }>, -): CheckoutEventDetail { +): CommerceEventDetail { const { type, data } = event.detail; switch (type) { case SaleEventType.SUCCESS: return { - type: CheckoutEventType.SUCCESS, + type: CommerceEventType.SUCCESS, data: { - type: CheckoutSuccessEventType.SALE_SUCCESS, + type: CommerceSuccessEventType.SALE_SUCCESS, data, }, }; case SaleEventType.FAILURE: return { - type: CheckoutEventType.FAILURE, + type: CommerceEventType.FAILURE, data: { - type: CheckoutFailureEventType.SALE_FAILED, + type: CommerceFailureEventType.SALE_FAILED, data, }, }; case SaleEventType.CLOSE_WIDGET: return { - type: CheckoutEventType.CLOSE, + type: CommerceEventType.CLOSE, data: {}, }; case SaleEventType.TRANSACTION_SUCCESS: return { - type: CheckoutEventType.SUCCESS, + type: CommerceEventType.SUCCESS, data: { - type: CheckoutSuccessEventType.SALE_TRANSACTION_SUCCESS, + type: CommerceSuccessEventType.SALE_TRANSACTION_SUCCESS, data, }, }; case SaleEventType.PAYMENT_METHOD: return { - type: CheckoutEventType.USER_ACTION, + type: CommerceEventType.USER_ACTION, data: { - type: CheckoutUserActionEventType.PAYMENT_METHOD_SELECTED, + type: CommerceUserActionEventType.PAYMENT_METHOD_SELECTED, data, }, }; case SaleEventType.PAYMENT_TOKEN: return { - type: CheckoutEventType.USER_ACTION, + type: CommerceEventType.USER_ACTION, data: { - type: CheckoutUserActionEventType.PAYMENT_TOKEN_SELECTED, + type: CommerceUserActionEventType.PAYMENT_TOKEN_SELECTED, data, }, }; @@ -287,14 +287,14 @@ function mapSaleWidgetEvent( } /** - * Map widget events to checkout widget event detail + * Map widget events to commerce widget event detail */ -export function getCheckoutWidgetEvent( +export function getCommerceWidgetEvent( event: CustomEvent, -): CheckoutEventDetail { +): CommerceEventDetail { if (event.detail.type === ProviderEventType.PROVIDER_UPDATED) { return { - type: CheckoutEventType.PROVIDER_UPDATED, + type: CommerceEventType.PROVIDER_UPDATED, data: event.detail.data, }; } diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/functions/getConnectLoaderParams.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getConnectLoaderParams.ts similarity index 86% rename from packages/checkout/widgets-lib/src/widgets/checkout/functions/getConnectLoaderParams.ts rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getConnectLoaderParams.ts index 8a7de70803..4ef47e7f8d 100644 --- a/packages/checkout/widgets-lib/src/widgets/checkout/functions/getConnectLoaderParams.ts +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getConnectLoaderParams.ts @@ -1,4 +1,4 @@ -import { ChainId, Checkout, CheckoutFlowType } from '@imtbl/checkout-sdk'; +import { ChainId, Checkout, CommerceFlowType } from '@imtbl/checkout-sdk'; import { Web3Provider } from '@ethersproject/providers'; import { ConnectLoaderParams } from '../../../components/ConnectLoader/ConnectLoader'; import { getL1ChainId, getL2ChainId } from '../../../lib/networkUtils'; @@ -22,7 +22,7 @@ export function getConnectLoaderParams( const { type, data } = view; switch (type) { - case CheckoutFlowType.WALLET: + case CommerceFlowType.WALLET: return { checkout, web3Provider, @@ -33,8 +33,8 @@ export function getConnectLoaderParams( getL2ChainId(checkout.config), ], }; - case CheckoutFlowType.ONRAMP: - case CheckoutFlowType.ADD_FUNDS: + case CommerceFlowType.ONRAMP: + case CommerceFlowType.ADD_FUNDS: return { checkout, web3Provider, @@ -44,8 +44,8 @@ export function getConnectLoaderParams( getL2ChainId(checkout.config), ], }; - case CheckoutFlowType.SALE: - case CheckoutFlowType.SWAP: + case CommerceFlowType.SALE: + case CommerceFlowType.SWAP: return { checkout, web3Provider, diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/functions/getFlowRequiresContext.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getFlowRequiresContext.ts similarity index 74% rename from packages/checkout/widgets-lib/src/widgets/checkout/functions/getFlowRequiresContext.ts rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getFlowRequiresContext.ts index ee96e96088..d56d3a78ec 100644 --- a/packages/checkout/widgets-lib/src/widgets/checkout/functions/getFlowRequiresContext.ts +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getFlowRequiresContext.ts @@ -1,20 +1,20 @@ -import { CheckoutFlowType } from '@imtbl/checkout-sdk'; +import { CommerceFlowType } from '@imtbl/checkout-sdk'; /** * List of views that require a connect loader wrapper */ const connectLoaderFlows = [ - CheckoutFlowType.SALE, - CheckoutFlowType.SWAP, - CheckoutFlowType.WALLET, - CheckoutFlowType.ONRAMP, + CommerceFlowType.SALE, + CommerceFlowType.SWAP, + CommerceFlowType.WALLET, + CommerceFlowType.ONRAMP, ] as unknown[]; /** * List of views that require a providers context wrapper */ const providersContextFlows = [ - CheckoutFlowType.ADD_FUNDS, + CommerceFlowType.ADD_FUNDS, ] as unknown[]; /** diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/functions/getViewFromOrchestrationEventType.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getViewFromOrchestrationEventType.ts similarity index 60% rename from packages/checkout/widgets-lib/src/widgets/checkout/functions/getViewFromOrchestrationEventType.ts rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getViewFromOrchestrationEventType.ts index 151b608dd8..99cfebfca8 100644 --- a/packages/checkout/widgets-lib/src/widgets/checkout/functions/getViewFromOrchestrationEventType.ts +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getViewFromOrchestrationEventType.ts @@ -1,24 +1,24 @@ -import { CheckoutFlowType, OrchestrationEventType } from '@imtbl/checkout-sdk'; +import { CommerceFlowType, OrchestrationEventType } from '@imtbl/checkout-sdk'; /** * Get view from orchestration event type */ export function getViewFromOrchestrationEventType( type: OrchestrationEventType, -): CheckoutFlowType | null { +): CommerceFlowType | null { switch (type) { case OrchestrationEventType.REQUEST_SWAP: - return CheckoutFlowType.SWAP; + return CommerceFlowType.SWAP; case OrchestrationEventType.REQUEST_CONNECT: - return CheckoutFlowType.CONNECT; + return CommerceFlowType.CONNECT; case OrchestrationEventType.REQUEST_WALLET: - return CheckoutFlowType.WALLET; + return CommerceFlowType.WALLET; case OrchestrationEventType.REQUEST_BRIDGE: - return CheckoutFlowType.BRIDGE; + return CommerceFlowType.BRIDGE; case OrchestrationEventType.REQUEST_ONRAMP: - return CheckoutFlowType.ONRAMP; + return CommerceFlowType.ONRAMP; case OrchestrationEventType.REQUEST_ADD_FUNDS: - return CheckoutFlowType.ADD_FUNDS; + return CommerceFlowType.ADD_FUNDS; default: return null; } diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/functions/isOrchestrationEvent.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/isOrchestrationEvent.ts similarity index 100% rename from packages/checkout/widgets-lib/src/widgets/checkout/functions/isOrchestrationEvent.ts rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/isOrchestrationEvent.ts diff --git a/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/isValidCommerceFlow.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/isValidCommerceFlow.ts new file mode 100644 index 0000000000..131eea1023 --- /dev/null +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/isValidCommerceFlow.ts @@ -0,0 +1,19 @@ +import { CommerceFlowType } from '@imtbl/checkout-sdk'; + +/** Orchestration Events List */ +export const commerceFlows = [ + CommerceFlowType.CONNECT, + CommerceFlowType.WALLET, + CommerceFlowType.SALE, + CommerceFlowType.SWAP, + CommerceFlowType.BRIDGE, + CommerceFlowType.ONRAMP, + CommerceFlowType.ADD_FUNDS, +]; + +/** + * Check if event is orchestration event + */ +export function isValidCommerceFlow(flow: string): boolean { + return commerceFlows.includes(flow as CommerceFlowType); +} diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/hooks/useMount.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/hooks/useMount.ts similarity index 100% rename from packages/checkout/widgets-lib/src/widgets/checkout/hooks/useMount.ts rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/hooks/useMount.ts diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/hooks/useWidgetEvents.ts b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/hooks/useWidgetEvents.ts similarity index 91% rename from packages/checkout/widgets-lib/src/widgets/checkout/hooks/useWidgetEvents.ts rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/hooks/useWidgetEvents.ts index 5f66e62e1d..8d0ce43f03 100644 --- a/packages/checkout/widgets-lib/src/widgets/checkout/hooks/useWidgetEvents.ts +++ b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/hooks/useWidgetEvents.ts @@ -4,8 +4,8 @@ import { OrchestrationEvent, OrchestrationEventType, } from '@imtbl/checkout-sdk'; -import { getCheckoutWidgetEvent } from '../functions/getCheckoutWidgetEvent'; -import { sendCheckoutEvent } from '../CheckoutWidgetEvents'; +import { getCommerceWidgetEvent } from '../functions/getCommerceWidgetEvent'; +import { sendCheckoutEvent } from '../CommerceWidgetEvents'; import { useViewState, ViewActions, @@ -67,7 +67,7 @@ export function useWidgetEvents( }; /** - * Proxy widget events to checkout widget events + * Proxy widget events to Commerce Widget events */ const handleWidgetEvent = useMemo(() => { if (!eventTarget) return null; @@ -80,7 +80,7 @@ export function useWidgetEvents( return; } - const eventDetail = getCheckoutWidgetEvent(customEvent); + const eventDetail = getCommerceWidgetEvent(customEvent); sendCheckoutEvent(eventTarget, eventDetail); }; }, [eventTarget]); diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/utils/.gitkeep b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/utils/.gitkeep similarity index 100% rename from packages/checkout/widgets-lib/src/widgets/checkout/utils/.gitkeep rename to packages/checkout/widgets-lib/src/widgets/immutable-commerce/utils/.gitkeep diff --git a/packages/checkout/widgets-sample-app/index.html b/packages/checkout/widgets-sample-app/index.html index eb64dd0ec1..8e0283d2cd 100644 --- a/packages/checkout/widgets-sample-app/index.html +++ b/packages/checkout/widgets-sample-app/index.html @@ -4,10 +4,7 @@ - +
diff --git a/packages/checkout/widgets-sample-app/src/App.tsx b/packages/checkout/widgets-sample-app/src/App.tsx index c210693a42..a5e81b3630 100644 --- a/packages/checkout/widgets-sample-app/src/App.tsx +++ b/packages/checkout/widgets-sample-app/src/App.tsx @@ -28,7 +28,7 @@ function App() {

diff --git a/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx b/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx index 1cf6c5739b..b66e460e29 100644 --- a/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx +++ b/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx @@ -21,11 +21,11 @@ import { WidgetLanguage, WidgetTheme, CreateProviderParams, - CheckoutWidgetParams, - CheckoutEventType, - CheckoutSuccessEventType, + CommerceWidgetParams, + CommerceEventType, + CommerceSuccessEventType, WidgetType, - CheckoutFlowType, + CommerceFlowType, WalletProviderName, Widget, SalePaymentTypes, @@ -77,7 +77,6 @@ const getCheckoutSdk = (passportClient: Passport, environment: Environment) => passport: passportClient, baseConfig: getBaseConfig(environment), overrides: { - // checkoutAppUrl: "http://localhost:3001", // environment: "development" as Environment, }, // swap: { enable: true } @@ -132,15 +131,15 @@ const createWeb3Provider = async ( } }; -// checkout widget flows -const flows: Array = [ - CheckoutFlowType.CONNECT, - CheckoutFlowType.WALLET, - CheckoutFlowType.ONRAMP, - CheckoutFlowType.SWAP, - CheckoutFlowType.BRIDGE, - CheckoutFlowType.SALE, - CheckoutFlowType.ADD_FUNDS, +// Commerce Widget flows +const flows: Array = [ + CommerceFlowType.CONNECT, + CommerceFlowType.WALLET, + CommerceFlowType.ONRAMP, + CommerceFlowType.SWAP, + CommerceFlowType.BRIDGE, + CommerceFlowType.SALE, + CommerceFlowType.ADD_FUNDS, ]; function CheckoutUI() { @@ -152,8 +151,6 @@ function CheckoutUI() { Environment.SANDBOX ); - const [checkoutAppURL, setCheckoutAppURL] = useState(""); - const configEnvironment = useMemo(() => { const params = new URLSearchParams(window.location.search); return (params.get("environment") as Environment) || Environment.SANDBOX; @@ -173,22 +170,22 @@ function CheckoutUI() { ); // set a state to keep widget params and configs - const [params, setParams] = useState( + const [params, setParams] = useState( undefined ); const [flowParams, setFlowParams] = useState< - Partial> + Partial> >({ CONNECT: { - flow: CheckoutFlowType.CONNECT, + flow: CommerceFlowType.CONNECT, // blocklistWalletRdns: ["io.metamask"], // targetChainId: ChainId.SEPOLIA, // targetWalletRdns: "io.metamask", theme: WidgetTheme.LIGHT, }, SALE: { - flow: CheckoutFlowType.SALE, + flow: CommerceFlowType.SALE, items: itemsMock, environmentId: "4dfc4bec-1867-49aa-ad35-d8a13b206c94", collectionName: "Pixel Aussie Farm", @@ -196,16 +193,16 @@ function CheckoutUI() { // preferredCurrency: 'USDC', }, SWAP: { - flow: CheckoutFlowType.SWAP, + flow: CommerceFlowType.SWAP, amount: "10", fromTokenAddress: "native", toTokenAddress: "0x3B2d8A1931736Fc321C24864BceEe981B11c3c57", }, WALLET: { - flow: CheckoutFlowType.WALLET, + flow: CommerceFlowType.WALLET, }, ADD_FUNDS: { - flow: CheckoutFlowType.ADD_FUNDS, + flow: CommerceFlowType.ADD_FUNDS, toAmount: "1", toTokenAddress: "native", }, @@ -271,14 +268,14 @@ function CheckoutUI() { // create the widget once factory is available // ignore language or theme changes - const prevWidget = useRef | undefined>( + const prevWidget = useRef | undefined>( undefined ); const widget = useAsyncMemo(async () => { if (widgetsFactory === undefined) return undefined; if (renderAfterConnect && !web3Provider) return undefined; - return widgetsFactory.create(WidgetType.CHECKOUT, { + return widgetsFactory.create(WidgetType.IMMUTABLE_COMMERCE, { provider: web3Provider, config: { theme, @@ -304,21 +301,11 @@ function CheckoutUI() { if (!widget || mounted.current) return; // add event listeners - widget.addListener(CheckoutEventType.INITIALISED, () => { + widget.addListener(CommerceEventType.INITIALISED, () => { setEventResults((prev) => [...prev, { initialised: true }]); - - if (typeof window === "undefined") return; - - const checkoutAppIframe = document.getElementById( - "checkout-app" - ) as HTMLIFrameElement; - - if (checkoutAppIframe?.src) { - setCheckoutAppURL(checkoutAppIframe.src); - } }); - widget.addListener(CheckoutEventType.DISCONNECTED, () => { + widget.addListener(CommerceEventType.DISCONNECTED, () => { setEventResults((prev) => [...prev, { disconnected: true }]); }); // widget.addListener( @@ -332,28 +319,28 @@ function CheckoutUI() { // ]); // } // ); - widget.addListener(CheckoutEventType.SUCCESS, (payload) => { - if (payload.type === CheckoutSuccessEventType.CONNECT_SUCCESS) { + widget.addListener(CommerceEventType.SUCCESS, (payload) => { + if (payload.type === CommerceSuccessEventType.CONNECT_SUCCESS) { const { provider, ...data } = payload.data; console.log("SUCCESS ---->", provider); setWeb3Provider(provider); setEventResults((prev) => [...prev, { success: true, ...data }]); } }); - widget.addListener(CheckoutEventType.USER_ACTION, (data) => { + widget.addListener(CommerceEventType.USER_ACTION, (data) => { setEventResults((prev) => [...prev, { userAction: true, ...data }]); }); - widget.addListener(CheckoutEventType.FAILURE, (data) => { + widget.addListener(CommerceEventType.FAILURE, (data) => { setEventResults((prev) => [...prev, { failure: true, ...data }]); }); - widget.addListener(CheckoutEventType.CLOSE, () => { + widget.addListener(CommerceEventType.CLOSE, () => { setEventResults((prev) => [...prev, { closed: true }]); widget.unmount(); }); // // set initial flow to wallet // setParams({ - // flow: checkout.CheckoutFlowType.CONNECT, + // flow: checkout.CommerceFlowType.CONNECT, // }); }, [widget]); @@ -420,7 +407,7 @@ function CheckoutUI() { { setParams({ - flow: CheckoutFlowType.CONNECT, + flow: CommerceFlowType.CONNECT, }); }} > @@ -429,7 +416,7 @@ function CheckoutUI() { { setParams({ - flow: CheckoutFlowType.WALLET, + flow: CommerceFlowType.WALLET, }); }} > @@ -438,7 +425,7 @@ function CheckoutUI() { { setParams({ - flow: CheckoutFlowType.SWAP, + flow: CommerceFlowType.SWAP, amount: "10", fromTokenAddress: "native", }); @@ -449,7 +436,7 @@ function CheckoutUI() { { setParams({ - flow: CheckoutFlowType.BRIDGE, + flow: CommerceFlowType.BRIDGE, }); }} > @@ -458,7 +445,7 @@ function CheckoutUI() { { setParams({ - flow: CheckoutFlowType.ONRAMP, + flow: CommerceFlowType.ONRAMP, }); }} > @@ -467,7 +454,7 @@ function CheckoutUI() { { setParams({ - flow: CheckoutFlowType.SALE, + flow: CommerceFlowType.SALE, items: [ { productId: "kangaroo", @@ -544,7 +531,6 @@ function CheckoutUI() { {/* --- --- --- */} Environment: {environment.toUpperCase()} - {checkoutAppURL && new URL(checkoutAppURL).origin} { - const flow = value as CheckoutFlowType; + const flow = value as CommerceFlowType; setParams({ ...(flowParams[flow as keyof typeof flowParams] || {}), flow, @@ -703,22 +689,6 @@ function CheckoutUI() { }} /> - - {checkoutAppURL && ( - - { - window.open(checkoutAppURL, "_blank", "noopener,noreferrer"); - }} - > - {checkoutAppURL} - - - - )} - ); } diff --git a/tests/func-tests/checkout/widgets-nextjs/package.json b/tests/func-tests/checkout/widgets-nextjs/package.json index 4da5dbdaa1..39824004d6 100644 --- a/tests/func-tests/checkout/widgets-nextjs/package.json +++ b/tests/func-tests/checkout/widgets-nextjs/package.json @@ -14,7 +14,7 @@ "dependencies": { "@biom3/react": "^0.25.21", "@ethersproject/providers": "^5.7.2", - "@imtbl/sdk": "latest", + "@imtbl/sdk": "1.60.0", "next": "14.2.7", "react": "^18", "react-dom": "^18" diff --git a/yarn.lock b/yarn.lock index 6a89ad37cb..aa6813a97d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5118,6 +5118,85 @@ __metadata: languageName: node linkType: hard +"@imtbl/sdk@npm:1.60.0": + version: 1.60.0 + resolution: "@imtbl/sdk@npm:1.60.0" + dependencies: + "@0xsequence/abi": ^1.4.3 + "@0xsequence/core": ^1.4.3 + "@0xsquid/sdk": ^2.8.25 + "@biom3/design-tokens": ^0.4.4 + "@biom3/react": ^0.27.12 + "@ethersproject/abi": ^5.7.0 + "@ethersproject/abstract-provider": ^5.7.0 + "@ethersproject/abstract-signer": ^5.7.0 + "@ethersproject/address": ^5.7.0 + "@ethersproject/bignumber": ^5.7.0 + "@ethersproject/bytes": ^5.7.0 + "@ethersproject/contracts": ^5.7.0 + "@ethersproject/keccak256": ^5.7.0 + "@ethersproject/providers": ^5.7.2 + "@ethersproject/solidity": ^5.7.0 + "@ethersproject/strings": ^5.7.0 + "@ethersproject/units": ^5.7.0 + "@ethersproject/wallet": ^5.7.0 + "@imtbl/react-analytics": 0.2.1-alpha + "@jest/globals": ^29.5.0 + "@magic-ext/oidc": 4.3.1 + "@magic-sdk/provider": ^21.2.0 + "@metamask/detect-provider": ^2.0.0 + "@opensea/seaport-js": 4.0.3 + "@rive-app/react-canvas-lite": ^4.9.0 + "@stdlib/number-float64-base-normalize": 0.0.8 + "@uniswap/router-sdk": ^1.4.0 + "@uniswap/sdk-core": ^3.0.1 + "@uniswap/v3-sdk": ^3.9.0 + "@walletconnect/ethereum-provider": ^2.11.1 + "@walletconnect/modal": ^2.6.2 + assert: ^2.0.0 + axios: ^1.6.5 + bn.js: ^5.2.1 + buffer: ^6.0.3 + crypto-browserify: ^3.12.0 + elliptic: ^6.5.7 + enc-utils: ^3.0.0 + ethereumjs-wallet: ^1.0.2 + ethers: ^5.7.2 + ethers-v6: "npm:ethers@6.11.1" + events: ^3.3.0 + form-data: ^4.0.0 + framer-motion: ^11.0.6 + global-const: ^0.1.2 + hash.js: ^1.1.7 + https-browserify: ^1.0.0 + i18next: ^23.7.6 + i18next-browser-languagedetector: ^7.2.0 + jwt-decode: ^3.1.2 + localforage: ^1.10.0 + lru-memorise: 0.3.0 + magic-sdk: ^21.2.0 + merkletreejs: ^0.3.11 + oidc-client-ts: 2.4.0 + os-browserify: ^0.3.0 + pako: ^2.1.0 + pg: ^8.11.5 + pino-pretty: ^11.2.2 + prisma: ^5.13.0 + react-i18next: ^13.5.0 + sns-validator: ^0.3.5 + stream-browserify: ^3.0.0 + stream-http: ^3.2.0 + url: ^0.11.0 + uuid: ^8.3.2 + dependenciesMeta: + pg: + optional: true + prisma: + optional: true + checksum: 2b3ae70a91b233205d1de0931087a141fdc9bed871451be5e054d5f433ad18207ecb3156f890f4dd3e0d2d34a45394b7b3362b1fcb09a5c6003e5cc09a00e88c + languageName: node + linkType: hard + "@imtbl/sdk@npm:latest": version: 1.56.0 resolution: "@imtbl/sdk@npm:1.56.0" @@ -12174,7 +12253,7 @@ __metadata: dependencies: "@biom3/react": ^0.25.21 "@ethersproject/providers": ^5.7.2 - "@imtbl/sdk": latest + "@imtbl/sdk": 1.60.0 "@playwright/test": ^1.45.3 "@types/node": ^20 "@types/react": ^18.3.4