@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/test-utils/fixtures.ts

@@ -0,0 +1,265 @@
+import type { AppStoreState } from '../store/app';
+import type { Blockchain, TokenHash, WidgetConfig } from '../types';
+import type { BlockchainMeta, EvmBlockchainMeta, Token } from 'rango-sdk';
+
+import { faker } from '@faker-js/faker';
+import { TransactionType } from 'rango-sdk';
+
+import { createTokenHash } from '../utils/meta';
+
+const TOKENS_COUNT = 20;
+const BLOCKCHAINS_COUNT = 20;
+
+const listBlockchains = [
+  'ETH',
+  'BSC',
+  'ARBITRUM',
+  'POLYGON',
+  'ZKSYNC',
+  'STARKNET',
+  'OPTIMISM',
+  'AVAX_CCHAIN',
+  'POLYGONZK',
+  'BASE',
+  'LINEA',
+  'TRON',
+  'BTC',
+  'SCROLL',
+  'COSMOS',
+  'OSMOSIS',
+  'METIS',
+  'NEUTRON',
+  'NOBLE',
+  'DYDX',
+  'SOLANA',
+  'CRONOS',
+  'BNB',
+  'FANTOM',
+  'AURORA',
+  'MAYA',
+  'THOR',
+  'BOBA',
+  'MOONBEAM',
+  'MOONRIVER',
+  'OKC',
+  'BOBA_BNB',
+  'BOBA_AVALANCHE',
+  'LTC',
+  'BCH',
+  'HARMONY',
+  'EVMOS',
+  'HECO',
+  'SIF',
+  'BRISE',
+  'STARGAZE',
+  'FUSE',
+  'CRYPTO_ORG',
+  'CHIHUAHUA',
+  'BANDCHAIN',
+  'COMDEX',
+  'REGEN',
+  'IRIS',
+  'EMONEY',
+  'GNOSIS',
+  'JUNO',
+  'AXELAR',
+  'STRIDE',
+  'KCC',
+  'MARS',
+  'TERRA',
+  'TELOS',
+  'BITSONG',
+  'AKASH',
+  'KI',
+  'PERSISTENCE',
+  'MEDIBLOC',
+  'KUJIRA',
+  'SENTINEL',
+  'INJECTIVE',
+  'SECRET',
+  'KONSTELLATION',
+  'STARNAME',
+  'BITCANNA',
+  'UMEE',
+  'DESMOS',
+  'LUMNETWORK',
+  'TERRA_CLASSIC',
+  'DASH',
+  'DOGE',
+];
+
+const listTokens = [
+  'BTC',
+  'ETH',
+  'USDT',
+  'BNB',
+  'AVAX',
+  'DOT',
+  'LINK',
+  'MATIC',
+  'TRX',
+  'BCH',
+  'NEAR',
+  'LTC',
+  'ICP',
+  'FIL',
+  'ETC',
+  'DAI',
+  'ATOM',
+  'IMX',
+  'OP',
+  'HBAR',
+  'INJ',
+  'XLM',
+  'CRO',
+  'RNDR',
+  'GRT',
+  'OKB',
+  'VET',
+  'MNT',
+  'KAS',
+  'THETA',
+  'LDO',
+  'FDUSD',
+  'XRP',
+  'RUNE',
+  'UNI',
+  'USDC',
+  'LEO',
+  'ADA',
+  'TON',
+  'STX',
+  'APT',
+  'SOL',
+  'TIA',
+  'FLOKI',
+  'DOGE',
+  'ARB',
+  'PEPE',
+  'SHIB',
+  'TON',
+];
+
+const FAKER_SEED = 9595;
+faker.seed(FAKER_SEED);
+
+export function createToken(options?: { blockchains?: string[] }) {
+  const fromBlockchains = options?.blockchains ?? listBlockchains;
+
+  return {
+    address: faker.datatype.boolean() ? faker.finance.ethereumAddress() : null,
+    blockchain: faker.helpers.arrayElement(fromBlockchains),
+    coinSource: faker.datatype.boolean() ? faker.word.noun() : null,
+    coinSourceUrl: faker.datatype.boolean() ? faker.internet.url() : null,
+    decimals: faker.number.int(),
+    usdPrice: faker.datatype.boolean() ? faker.number.float() : null,
+    isPopular: faker.datatype.boolean(),
+    image: faker.internet.url(),
+    symbol: faker.helpers.arrayElement(listTokens),
+    name: faker.datatype.boolean() ? faker.hacker.verb() : null,
+    supportedSwappers: faker.datatype.boolean()
+      ? faker.helpers.multiple(faker.string.sample)
+      : undefined,
+    isSecondaryCoin: faker.datatype.boolean(),
+  };
+}
+export function createTokens(
+  count: number,
+  options?: {
+    blockchains?: string[];
+  }
+): Token[] {
+  return Array(count)
+    .fill(null)
+    .map(() => createToken({ blockchains: options?.blockchains }));
+}
+
+export function createEvmBlockchain(): EvmBlockchainMeta {
+  const name = faker.helpers.arrayElement(listBlockchains);
+  return {
+    name: name,
+    shortName: faker.string.alpha({
+      length: 3,
+    }),
+    displayName: faker.string.alpha(),
+    defaultDecimals: faker.number.int(),
+    addressPatterns: faker.helpers.multiple(faker.string.sample),
+    logo: faker.internet.url(),
+    color: faker.helpers.fake('#{{number.hex()}}'),
+    sort: faker.number.int({ min: 1, max: BLOCKCHAINS_COUNT }),
+    enabled: faker.datatype.boolean(),
+    feeAssets: [
+      {
+        blockchain: faker.helpers.arrayElement(
+          listBlockchains.filter((item) => item !== name)
+        ),
+        symbol: faker.helpers.arrayElement(listTokens),
+        address: faker.datatype.boolean()
+          ? faker.finance.ethereumAddress()
+          : null,
+      },
+    ],
+    type: TransactionType.EVM,
+    chainId: faker.string.hexadecimal({
+      length: 2,
+    }),
+    info: {
+      infoType: 'EvmMetaInfo',
+      chainName: faker.hacker.adjective(),
+      nativeCurrency: {
+        name: faker.hacker.noun(),
+        symbol: faker.helpers.arrayElement(listTokens),
+        decimals: faker.number.int(),
+      },
+      rpcUrls: faker.helpers.multiple(faker.internet.url),
+      blockExplorerUrls: faker.helpers.multiple(faker.internet.url),
+      addressUrl: faker.internet.url(),
+      transactionUrl: faker.internet.url(),
+      enableGasV2: faker.datatype.boolean(),
+    },
+  };
+}
+
+export function createEvmBlockchains(count: number): EvmBlockchainMeta[] {
+  return Array(count)
+    .fill(null)
+    .map(() => createEvmBlockchain());
+}
+
+export function createInitialAppStore() {
+  const blockchains = createEvmBlockchains(BLOCKCHAINS_COUNT);
+  const tokens = createTokens(TOKENS_COUNT, {
+    blockchains: blockchains.map((b) => b.name),
+  });
+
+  const tokensMapByTokenHash: Map<TokenHash, Token> = new Map();
+  const tokensMapByBlockchainName: Record<Blockchain, TokenHash[]> = {};
+  tokens.forEach((token) => {
+    const tokenHash = createTokenHash(token);
+    if (!tokensMapByBlockchainName[token.blockchain]) {
+      tokensMapByBlockchainName[token.blockchain] = [];
+    }
+    tokensMapByTokenHash.set(tokenHash, token);
+    tokensMapByBlockchainName[token.blockchain]?.push(tokenHash);
+  });
+
+  return {
+    _tokensMapByTokenHash: tokensMapByTokenHash,
+    _tokensMapByBlockchainName: tokensMapByBlockchainName,
+    _blockchainsMapByName: new Map<string, BlockchainMeta>(
+      blockchains.map((meta) => [meta.name, meta])
+    ),
+  };
+}
+
+export function updateAppStoreConfig(
+  appStoreState: AppStoreState,
+  config: Partial<WidgetConfig>
+): AppStoreState {
+  appStoreState.config = {
+    ...appStoreState.config,
+    ...config,
+  };
+
+  return appStoreState;
+}

package/src/types/config.ts

@@ -0,0 +1,284 @@
+import type { Language, theme } from '@rango-dev/ui';
+import type { Provider } from '@rango-dev/wallets-core';
+import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
+import type { WalletType } from '@rango-dev/wallets-shared';
+import type { Asset } from 'rango-sdk';
+import type { ReactElement } from 'react';
+
+export type WidgetVariant = 'default' | 'expanded' | 'full-expanded';
+
+/**
+ * The above type defines a set of optional color properties for a widget.
+ * @property {string} background
+ * @property {string} foreground
+ * @property {string} primary
+ * @property {string} secondary
+ *
+ */
+export type WidgetColorsKeys = keyof WidgetColors;
+
+export type ThemeColors = {
+  [key in string]?: string;
+};
+
+export interface WidgetColors extends ThemeColors {
+  background?: string;
+  foreground?: string;
+  neutral?: string;
+  primary?: string;
+  secondary?: string;
+}
+
+/**
+ * The `WidgetTheme` defines the properties of a widget theme, including mode, font family, colors, border
+ * radius, width, and height.
+ * @property {'auto' | 'light' | 'dark'} mode - The mode property is used to specify the default theme for
+ * the widget.
+ * @property {string} fontFamily - The font family to be used in the widget. If you want to do this, include the font of your choice in your HTML file.
+ * @property {{ light?: WidgetColors; dark?: WidgetColors }} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
+ * defines the color scheme for the widget. It is of type `Colors`, which is likely another object that
+ * contains specific color values for various parts of the widget (e.g. background color, text color,
+ * border color
+ * @property {number} borderRadius - `borderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the corners of a widget.
+ * @property {number} secondaryBorderRadius - `secondaryBorderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the buttons of a widget.
+ * @property {number} width - The `width` property is a number that represents the width of the widget.
+ * @property {number} height - The `height` property is a number that specifies the height of the widget.
+ * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
+ */
+export type WidgetTheme = {
+  mode?: 'auto' | 'light' | 'dark';
+  fontFamily?: string;
+  colors?: { light?: WidgetColors; dark?: WidgetColors };
+  shadows?: typeof theme.shadows;
+  borderRadius?: number;
+  secondaryBorderRadius?: number;
+  width?: number;
+  height?: number;
+  singleTheme?: boolean;
+};
+
+/**
+ * If you want to charge users fee per transaction, you should
+ * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
+ * @property {string | null} ref - To enable dApps to charge affiliate fees and generate income from
+ * users' transactions, the affiliate referral code should be provided. You can create this code by
+ * visiting the following link: https://app.rango.exchange/affiliate.
+ * @property {number | null} percent - If you want to change the default affiliate fee percentage,
+ * you can provide a new value here.
+ * @property {{ [key: string]: string }} wallets - If you want to change the default affiliate wallet
+ *  addresses, you can provide new values here. (Map of route blockchains to affiliate address)
+ */
+export type WidgetAffiliate = {
+  ref?: string;
+  percent?: number;
+  wallets?: { [key: string]: string };
+};
+
+/**
+ * `Tokens`
+ *
+ * @property {boolean} isExcluded - This is a boolean property capable of removing tokens from all or a blockchain.
+ * @property {Asset[]} tokens - The `tokens` property is an array of `Asset` objects that
+ * you could use that to limit tokens to some limited ones.
+ */
+
+export type Tokens = {
+  isExcluded: boolean;
+  tokens: Asset[];
+};
+
+/**
+ * `BlockchainAndTokenConfig`
+ *
+ * @property {string} blockchain - This property is optional and represents the default selected blockchain.
+ * @property {Asset} token - The `token` property is a type of `Asset` and represents the default token
+ * which is selected. e.g. {blockchain: 'BSC', symbol: 'BNB', address: null}
+ * @property {string[]} blockchains - An optional array of strings representing the supported
+ * blockchains. e.g. ['BSC','ETHEREUM']
+ * @property {Asset[] |{ [blockchain: string]: Tokens }} tokens - The `tokens` property is an optional object of `blockchain` objects or array of `Asset` objects
+ * that you could use that to limit tokens to some limited ones.
+ * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
+ * you could use to pin tokens of your choice to the top of the token list.
+ */
+export type BlockchainAndTokenConfig = {
+  blockchain?: string;
+  token?: Asset;
+  blockchains?: string[];
+  pinnedTokens?: Asset[];
+  tokens?: Asset[] | { [blockchain: string]: Tokens };
+};
+
+/**
+ * `SignersConfig`
+ *
+ * @property {string | string[]} customSolanaRPC - This is an optional property that can be used to set custom Solana RPCs.
+ */
+export type SignersConfig = {
+  customSolanaRPC?: string | string[];
+};
+
+/**
+ * `Features`
+ *
+ * @property {'visible' | 'hidden'} [theme]
+ * - The visibility state for the theme feature. Optional property.
+ *
+ * @property {'visible' | 'hidden'} [language]
+ * - The visibility state for the language feature. Optional property.
+ *
+ * @property {'visible' | 'hidden'} [connectWalletButton]
+ * - The visibility state for the connect wallet button feature. Optional property.
+ *
+ * @property {'visible' | 'hidden'} [notification]
+ * - The visibility state for the notification feature. Optional property.
+ *
+ * @property {'visible' | 'hidden'} [liquiditySource]
+ * - The visibility state for the liquiditySource feature. Optional property.
+ */
+export type Features = Partial<
+  Record<
+    | 'theme'
+    | 'language'
+    | 'connectWalletButton'
+    | 'notification'
+    | 'liquiditySource'
+    | 'customTokens',
+    'visible' | 'hidden'
+  >
+>;
+
+/**
+ * `Routing`
+ *
+ * @property {'disabled' | 'enabled'} [avoidNativeFee]
+ * - If you want to exclude swappers that have native tokens as fee, for example when you are using an AA account, you could set this parameter.
+ *
+ * @property {number} [maxLength]
+ * - If you want to limit the maximum acceptable length of a route, you could set this parameter.
+ *
+ * @property {'disabled' | 'enabled'} [experimental]
+ * - Use this parameter to enable experimental routes. This settings shouldn't be used in your production environment.
+ *
+ * @property {'disabled' | 'enabled'} [enableCentralizedSwappers]
+ * - If you want to enable routing from the centralized protocols like XO Swap, you could set this parameter.
+ */
+export type Routing = Partial<
+  Record<
+    'experimental' | 'avoidNativeFee' | 'enableCentralizedSwappers',
+    'disabled' | 'enabled'
+  >
+> &
+  Partial<Record<'maxLength', number>>;
+
+export type TrezorManifest = {
+  appUrl: string;
+  email: string;
+};
+
+/**
+ *
+ * @property {string} manifestUrl - The URL of the TON Connect [manifest]{@link https://github.com/ton-connect/docs/blob/main/requests-responses.md#app-manifest}, containing the Dapp metadata to be displayed in the user’s wallet.
+ *
+ */
+export type TonConnectConfig = {
+  manifestUrl?: string;
+};
+
+/**
+ * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
+ * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
+ * and theme.
+ *
+ * @property {string} apiKey - The API key used to communicate with Rango API
+ * @property {string} apiUrl - The API url used to set custom API url
+ * @property {WidgetAffiliate} affiliate - If you want to charge users fee per transaction, you should
+ * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
+ * @property {number} amount - The default input amount.
+ * @property {BlockchainAndTokenConfig} from - The `from` property is an optional property of type
+ * `BlockchainAndTokenConfig` that specifies the default blockchain and token from which the user wants to
+ * exchange.It can also used to limit source swap blockchains/tokens to some limited ones.
+ * @property {TrezorManifest} trezorManifest - Trezor Connect Manifest requires that you,
+ * as a Trezor Connect integrator,share your e-mail and application url.
+ * @property {TonConnectConfig} tonConnect - Configuration for the TON Connect provider.
+ * @property {BlockchainAndTokenConfig} to - The "to" property is an optional property of type
+ * "BlockchainAndTokenConfig" that specifies the default blockchain and token to which the user wants to
+ * exchange.It can also used to limit destination swap blockchains/tokens to some limited ones.
+ * blockchain during the transaction.
+ * @property {string[]} liquiditySources - The `liquiditySources` property is an optional array of
+ * strings that specifies the liquidity sources allowed dexes and bridges for the routing
+ * @property {WalletType[]} wallets - The `wallets` property is an optional array of `WalletType`
+ * values that represent the types of wallets that the widget should support. For example, it could
+ * include values like `"metamask"`, `"kepler"`, or `"phantom"`.
+ * @property {boolean} multiWallets - The `multiWallets` property is a boolean value that indicates
+ * whether the widget should allow the user to select multiple wallets for the transaction.
+ * @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.
+ * @property {WidgetTheme} theme - The `theme` property is a part of the `WidgetConfig` type and is
+ * used to specify the visual theme of the widget. It is of type `WidgetTheme`, which is an interface
+ * that defines the various properties of the theme, such as colors, fonts, and others.
+ * @property {boolean} externalWallets
+ * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
+ * @property {boolean} excludeLiquiditySources - The `excludeLiquiditySources` property is a boolean value that when you
+ * set it to true, the list of liquidity sources provided in `liquiditySources` will be excluded; otherwise, they will be included.
+ * @property {Features} features - An optional object for configuring the visibility of various features.
+ *   Keys include:
+ *   - 'notification': Visibility state for the notification icon.
+ *   - 'theme': Visibility state for the theme.
+ *   - 'liquiditySource': Visibility state for liquidity source.
+ *   - 'connectWalletButton': Visibility state for the wallet connect icon.
+ *   - 'language': Visibility state for the language.
+ *   - 'customTokens': Visibility state for the custom tokens.
+ * @property {Routing} routing - An optional object for configuring the enablement or numeric of various features.
+ *   Keys include:
+ *   - 'maxLength': If you want to limit the maximum acceptable length of a route, you could set this parameter.
+ *   - 'avoidNativeFee': If you want to exclude swappers that have native tokens as fee, for example when you are using an AA account, you could set this parameter.
+ *   - 'experimental': Use this parameter to enable experimental routes. This settings shouldn't be used in your production environment.
+ *   - 'enableCentralizedSwappers': If you want to enable routing from the centralized protocols like XO Swap, you could set this parameter.
+ * @property {WidgetVariant} variant
+ *   If it is expanded, multiple routes will show up on the home page;
+ *   If it is full-expanded, multiple routes will show up on the home page with full routes;
+ *   if not, you will need to go to a different page to see the suggested routes.
+ */
+
+export type WidgetConfig = {
+  apiKey: string;
+  apiUrl?: string;
+  title?: string;
+  walletConnectProjectId?: string;
+  trezorManifest?: TrezorManifest;
+  tonConnect?: TonConnectConfig;
+  affiliate?: WidgetAffiliate;
+  amount?: number;
+  from?: BlockchainAndTokenConfig;
+  to?: BlockchainAndTokenConfig;
+  liquiditySources?: string[];
+  wallets?: (WalletType | LegacyProviderInterface | Provider)[];
+  multiWallets?: boolean;
+  customDestination?: boolean;
+  defaultCustomDestinations?: { [blockchain: string]: string };
+  language?: Language;
+  theme?: WidgetTheme;
+  externalWallets?: boolean;
+  excludeLiquiditySources?: boolean;
+  features?: Features;
+  variant?: WidgetVariant;
+  signers?: SignersConfig;
+  // These are likely to change or remove at anytime. Please use with a caution.
+  __UNSTABLE_OR_INTERNAL__?: {
+    walletConnectListedDesktopWalletLink?: string;
+    autoUpdateSettings?: boolean; // If true, settings will be updated automatically based on the configuration.
+    swapBoxBanner?: {
+      element: ReactElement;
+      routes?: string[];
+    };
+  };
+  routing?: Routing;
+};

package/src/types/event.ts

@@ -0,0 +1,105 @@
+import type { SelectedQuote } from './quote';
+import type { Wallet } from './wallets';
+import type {
+  RouteEventData,
+  StepEventData,
+} from '@rango-dev/queue-manager-rango-preset';
+
+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 {
+  QUOTE_INPUT_UPDATE = 'quoteInputUpdate',
+  QUOTE_OUTPUT_UPDATE = 'quoteOutputUpdate',
+}
+
+export enum WalletEventTypes {
+  CONNECT = 'connect',
+  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;
+  fromToken?: { symbol: string; name: string | null; address: string | null };
+  toToken?: { symbol: string; name: string | null; address: string | null };
+  requestAmount?: string;
+};
+
+export type QuoteUpdateEventPayload = Pick<
+  SelectedQuote,
+  'requestAmount' | 'swaps' | 'outputAmount' | 'resultType' | 'tags'
+> | null;
+
+export type ConnectWalletEventPayload = {
+  walletType: string;
+  accounts: Account[];
+};
+
+export type DisconnectWalletEventPayload = {
+  walletType: string;
+};
+
+export type ClickConnectWalletPayload = PreventableEventPayload;
+
+export type QuoteEventData =
+  | EventData<QuoteEventTypes.QUOTE_INPUT_UPDATE, QuoteInputUpdateEventPayload>
+  | EventData<QuoteEventTypes.QUOTE_OUTPUT_UPDATE, QuoteUpdateEventPayload>;
+
+export type WalletEventData =
+  | 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 = {
+  [WidgetEvents.RouteEvent]: RouteEventData;
+  [WidgetEvents.StepEvent]: StepEventData;
+  [WidgetEvents.QuoteEvent]: QuoteEventData;
+  [WidgetEvents.WalletEvent]: WalletEventData;
+  [WidgetEvents.UiEvent]: UiEventData;
+};
+
+declare type EventHandler<T = unknown> = (event: T) => void;
+
+export type WidgetEventEmitter = {
+  on<Key extends WidgetEvents>(
+    type: Key,
+    handler: EventHandler<Events[Key]>
+  ): void;
+  off<Key extends WidgetEvents>(
+    type: Key,
+    handler?: EventHandler<Events[Key]>
+  ): void;
+};

package/src/types/index.ts

@@ -0,0 +1,5 @@
+export * from './swap';
+export * from './config';
+export * from './quote';
+export * from './wallets';
+export * from './event';

package/src/types/notification.ts

@@ -0,0 +1,26 @@
+import {
+  type Route,
+  type RouteEvent,
+  type Step,
+  type StepEvent,
+} from '@rango-dev/queue-manager-rango-preset';
+
+type NotificationRoute = {
+  creationTime: number;
+  from: {
+    blockchain: Step['fromBlockchain'];
+    symbol: Step['fromSymbol'];
+    address: Step['fromSymbolAddress'];
+  };
+  to: {
+    blockchain: Step['toBlockchain'];
+    symbol: Step['toSymbol'];
+    address: Step['toSymbolAddress'];
+  };
+};
+
+export type Notification = Pick<Route, 'requestId'> & {
+  event: RouteEvent | StepEvent;
+  creationTime: number;
+  route: NotificationRoute;
+};