@rango-dev/widget-embedded 0.30.1-next.5 → 0.30.1-next.7

package/src/types/config.ts

@@ -179,6 +179,8 @@ export type TrezorManifest = {
  * @property {boolean} customDestination - A boolean value indicating whether the user can input a custom
  * address for the transaction. If set to true, the widget will allow the user to input a custom
  * address for the destination.
+ * @property {{[blockchain: string]: string }} defaultCustomDestinations - The `defaultCustomDestinations` property is a map of supported `blockchain` names to an arbitrary blockchain address.
+ * You could use it to set a default custom destination for some blockchains.  e.g. {'BSC': '0x2be.....c1','ETH': '0x2be.....c1'}
  * @property {string} language - The language property is an optional string that specifies the
  * default language in which the widget should be displayed. If not provided, the widget will default to the
  * language of the user's browser.
@@ -219,6 +221,7 @@ export type WidgetConfig = {
   wallets?: (WalletType | ProviderInterface)[];
   multiWallets?: boolean;
   customDestination?: boolean;
+  defaultCustomDestinations?: { [blockchain: string]: string };
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
@@ -227,7 +230,6 @@ export type WidgetConfig = {
   variant?: WidgetVariant;
   enableCentralizedSwappers?: boolean;
   signers?: SignersConfig;
-
   // These are likely to change or remove at anytime. Please use with a caution.
   __UNSTABLE_OR_INTERNAL__?: {
     walletConnectListedDesktopWalletLink?: string;

package/src/types/event.ts

@@ -7,6 +7,17 @@ import type {
 
 import { WidgetEvents as QueueManagerEvents } from '@rango-dev/queue-manager-rango-preset';
 
+type EventData<
+  T extends QuoteEventTypes | WalletEventTypes | UiEventTypes,
+  U extends Record<string, unknown> | null
+> = { type: T; payload: U };
+
+export type PreventableEventPayload<
+  T extends Record<string, unknown> = Record<string, unknown>
+> = {
+  preventDefault: () => void;
+} & T;
+
 type Account = Wallet;
 
 export enum QuoteEventTypes {
@@ -19,6 +30,14 @@ export enum WalletEventTypes {
   DISCONNECT = 'disconnect',
 }
 
+/**
+ * We use a prefix for interaction type and a name for defining the event name: INTERACTION_EVENT_NAME
+ * e.g. CLICK_X_BUTTON or NAVIGATE_WALLET_PAGE
+ */
+export enum UiEventTypes {
+  CLICK_CONNECT_WALLET = 'clickConnectWallet',
+}
+
 export type QuoteInputUpdateEventPayload = {
   fromBlockchain?: string;
   toBlockchain?: string;
@@ -41,31 +60,27 @@ export type DisconnectWalletEventPayload = {
   walletType: string;
 };
 
+export type ClickConnectWalletPayload = PreventableEventPayload;
+
 export type QuoteEventData =
-  | {
-      type: QuoteEventTypes.QUOTE_INPUT_UPDATE;
-      payload: QuoteInputUpdateEventPayload;
-    }
-  | {
-      type: QuoteEventTypes.QUOTE_OUTPUT_UPDATE;
-      payload: QuoteUpdateEventPayload;
-    };
+  | EventData<QuoteEventTypes.QUOTE_INPUT_UPDATE, QuoteInputUpdateEventPayload>
+  | EventData<QuoteEventTypes.QUOTE_OUTPUT_UPDATE, QuoteUpdateEventPayload>;
 
 export type WalletEventData =
-  | {
-      type: WalletEventTypes.CONNECT;
-      payload: ConnectWalletEventPayload;
-    }
-  | {
-      type: WalletEventTypes.DISCONNECT;
-      payload: DisconnectWalletEventPayload;
-    };
+  | EventData<WalletEventTypes.CONNECT, ConnectWalletEventPayload>
+  | EventData<WalletEventTypes.DISCONNECT, DisconnectWalletEventPayload>;
+
+export type UiEventData = EventData<
+  UiEventTypes.CLICK_CONNECT_WALLET,
+  ClickConnectWalletPayload
+>;
 
 export enum WidgetEvents {
   RouteEvent = QueueManagerEvents.RouteEvent,
   StepEvent = QueueManagerEvents.StepEvent,
   QuoteEvent = 'quoteEvent',
   WalletEvent = 'walletEvent',
+  UiEvent = 'uiEvent',
 }
 
 export type Events = {
@@ -73,6 +88,7 @@ export type Events = {
   [WidgetEvents.StepEvent]: StepEventData;
   [WidgetEvents.QuoteEvent]: QuoteEventData;
   [WidgetEvents.WalletEvent]: WalletEventData;
+  [WidgetEvents.UiEvent]: UiEventData;
 };
 
 declare type EventHandler<T = unknown> = (event: T) => void;

package/src/utils/events.ts

@@ -0,0 +1,27 @@
+import { eventEmitter } from '../services/eventEmitter';
+import { type UiEventData, WidgetEvents } from '../types';
+
+type UiEvent = {
+  type: UiEventData['type'];
+  payload?: Omit<UiEventData['payload'], 'preventDefault'>;
+};
+
+export function emitPreventableEvent(event: UiEvent, action: () => void): void {
+  let defaultPrevented = false;
+
+  const extendedPayload = {
+    preventDefault() {
+      defaultPrevented = true;
+    },
+    ...(event.payload === undefined && { payload: event.payload }),
+  };
+
+  eventEmitter.emit(WidgetEvents.UiEvent, {
+    type: event.type,
+    payload: extendedPayload,
+  });
+
+  if (!defaultPrevented) {
+    action();
+  }
+}

package/src/utils/swap.ts

@@ -722,7 +722,7 @@ export function shouldRetrySwap(pendingSwap: PendingSwap) {
 
 export function isConfirmSwapDisabled(
   fetching: boolean,
-  showCustomDestination: boolean,
+  isCustomDestinationOpen: boolean,
   customDestination: string | null,
   quote: SelectedQuote | null,
   selectedWallets: { walletType: string; chain: string }[],
@@ -752,9 +752,9 @@ export function isConfirmSwapDisabled(
       : false;
 
   return (
-    (!showCustomDestination && !everyWalletSelected) ||
-    (showCustomDestination && !customDestination) ||
-    (showCustomDestination &&
+    (!isCustomDestinationOpen && !everyWalletSelected) ||
+    (isCustomDestinationOpen && !customDestination) ||
+    (isCustomDestinationOpen &&
       !!customDestination &&
       (!customDestinationIsValid || !everyRequiredWalletSelected))
   );