@rango-dev/widget-embedded 0.60.2-next.9 → 0.61.1-next.0

package/src/pages/SelectSwapItemPage/SelectSwapItemsPage.tsx

@@ -14,8 +14,11 @@ import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useSearchCustomTokens } from '../../hooks/useSearchCustomTokens';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
+import { UiEventTypes } from '../../types';
+import { emitUiEvent } from '../../utils/events';
 
 import {
+  getTokenSelectionMethod,
   prepareTokensList,
   shouldSearchForCustomTokens,
 } from './SelectSwapItemPage.helpers';
@@ -82,6 +85,31 @@ export function SelectSwapItemsPage(props: PropTypes) {
       setToToken({ token, meta: { blockchains } });
     }
   };
+
+  const side = type === 'source' ? 'from' : 'to';
+
+  const emitChainFilterApplied = (blockchain: BlockchainMeta) => {
+    emitUiEvent({
+      type: UiEventTypes.CHAIN_FILTER_APPLIED,
+      payload: { side, chain: blockchain.name, filterSource: 'featured' },
+    });
+  };
+
+  const emitTokenSelected = (token: Token) => {
+    emitUiEvent({
+      type: UiEventTypes.TOKEN_SELECTED,
+      payload: {
+        side,
+        tokenName: token.name,
+        tokenSymbol: token.symbol,
+        tokenAddress: token.address,
+        chain: token.blockchain,
+        selectionMethod: getTokenSelectionMethod(searchedFor),
+        activeChainFilter: selectedBlockchainName || 'all',
+      },
+    });
+  };
+
   const types = {
     source: i18n.t('Source'),
     destination: i18n.t('Destination'),
@@ -111,6 +139,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
           blockchain={type === 'source' ? fromBlockchain : toBlockchain}
           onMoreClick={() => navigate(navigationRoutes.blockchains)}
           onChange={(blockchain) => {
+            emitChainFilterApplied(blockchain);
             updateBlockchain(blockchain);
           }}
         />
@@ -142,6 +171,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
           searchedFor={searchedFor}
           type={type}
           onChange={(token) => {
+            emitTokenSelected(token);
             updateToken(token);
 
             const tokenBlockchain = blockchains.find(

package/src/pages/SwapDetailsPage.tsx

@@ -9,6 +9,8 @@ import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
+import { UiEventTypes } from '../types';
+import { emitUiEvent } from '../utils/events';
 import { getPendingSwaps } from '../utils/queue';
 
 export function SwapDetailsPage() {
@@ -41,6 +43,10 @@ export function SwapDetailsPage() {
     if (selectedSwap?.id) {
       const swap = manager?.get(selectedSwap.id);
       if (swap) {
+        emitUiEvent({
+          type: UiEventTypes.SWAP_CANCELLED,
+          payload: { routeId: requestId },
+        });
         cancelSwap(swap);
       }
     }

package/src/store/slices/config.ts

@@ -93,9 +93,6 @@ function generateProviders(config: WidgetConfig) {
         options?.walletConnectListedDesktopWalletLink,
     },
     selectedProviders: config.wallets,
-    trezor: options?.trezorManifest
-      ? { manifest: options.trezorManifest }
-      : undefined,
     tonConnect: options?.tonConnect?.manifestUrl
       ? { manifestUrl: options?.tonConnect.manifestUrl }
       : undefined,

package/src/store/slices/wallets.ts

@@ -114,7 +114,8 @@ export interface WalletsSlice {
   newWalletConnected: (
     accounts: Wallet[],
     namespace?: Namespace,
-    derivationPath?: string
+    derivationPath?: string,
+    meta?: { walletName?: string }
   ) => Promise<void>;
   disconnectNamespaces: (walletType: string, namespaces: Namespace[]) => void;
   /**
@@ -443,14 +444,19 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         connectedWallets: nextConnectedWalletsWithUpdatedSelectedStatus,
       });
     },
-    newWalletConnected: async (accounts, namespace, derivationPath) => {
+    newWalletConnected: async (accounts, namespace, derivationPath, meta) => {
       const newAccount = accounts[0];
       if (!newAccount) {
         return;
       }
       eventEmitter.emit(WidgetEvents.WalletEvent, {
         type: WalletEventTypes.CONNECT,
-        payload: { walletType: newAccount.walletType, accounts },
+        payload: {
+          walletType: newAccount.walletType,
+          accounts,
+          chain: newAccount.chain ?? null,
+          walletName: meta?.walletName ?? newAccount.walletType,
+        },
       });
 
       get().addConnectedWallet(accounts, namespace, derivationPath);
@@ -526,7 +532,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
        */
       eventEmitter.emit(WidgetEvents.WalletEvent, {
         type: WalletEventTypes.DISCONNECT,
-        payload: { walletType },
+        payload: { walletType, walletName: walletType },
       });
       if (isTargetWalletExistsInConnectedWallets) {
         // This should be called before updating connectedWallets since we need the old state to remove balances.

package/src/types/event.ts

@@ -5,8 +5,6 @@ import type {
   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
@@ -23,11 +21,20 @@ type Account = Wallet;
 export enum QuoteEventTypes {
   QUOTE_INPUT_UPDATE = 'quoteInputUpdate',
   QUOTE_OUTPUT_UPDATE = 'quoteOutputUpdate',
+  /** A route/quote request was made with a valid source, destination and amount. */
+  ROUTE_REQUESTED = 'routeRequested',
+  /** The route API returned zero results for the requested pair. */
+  ROUTE_NOT_FOUND = 'routeNotFound',
+  /** The route API returned a 4xx/5xx error. */
+  ROUTE_FETCH_FAILED = 'routeFetchFailed',
+  /** The user overrode the auto-selected route. */
+  ROUTE_CHANGED = 'routeChanged',
 }
 
 export enum WalletEventTypes {
   CONNECT = 'connect',
   DISCONNECT = 'disconnect',
+  DETECTED = 'detected',
 }
 
 /**
@@ -36,6 +43,20 @@ export enum WalletEventTypes {
  */
 export enum UiEventTypes {
   CLICK_CONNECT_WALLET = 'clickConnectWallet',
+  TOKEN_SELECTED = 'tokenSelected',
+  CHAIN_FILTER_APPLIED = 'chainFilterApplied',
+  SETTINGS_CHANGED = 'settingsChanged',
+  ROUTE_FEE_VIEWED = 'routeFeeViewed',
+  DESTINATION_ADDRESS_SET = 'destinationAddressSet',
+  GAS_WARNING_SHOWN = 'gasWarningShown',
+  GAS_WARNING_BYPASSED = 'gasWarningBypassed',
+  SWAP_INITIATED = 'swapInitiated',
+  SWAP_WALLETS_MODAL_SHOWN = 'swapWalletsModalShown',
+  SWAP_WALLETS_CONFIRMED = 'swapWalletsConfirmed',
+  SWAP_STARTED = 'swapStarted',
+  SWAP_RESUMED = 'swapResumed',
+  SWAP_RETRIED = 'swapRetried',
+  SWAP_CANCELLED = 'swapCancelled',
 }
 
 export type QuoteInputUpdateEventPayload = {
@@ -54,30 +75,188 @@ export type QuoteUpdateEventPayload = Pick<
 export type ConnectWalletEventPayload = {
   walletType: string;
   accounts: Account[];
+  /** Blockchain of the first connected account. */
+  chain: string | null;
+  /** wallet type (e.g. "metamask"). */
+  walletName: string;
 };
 
 export type DisconnectWalletEventPayload = {
   walletType: string;
+  walletName: string;
+};
+
+export type WalletDetectedEventPayload = {
+  walletName: string;
 };
 
 export type ClickConnectWalletPayload = PreventableEventPayload;
 
+/** Shared shape describing a route/quote, used by several swap events. */
+export type SwapEstimateEventPayload = {
+  sourceChain: string;
+  destinationChain: string;
+  sourceTokenSymbol: string;
+  sourceTokenAddress: string | null;
+  destinationTokenSymbol: string;
+  destinationTokenAddress: string | null;
+  inputAmountUsd: number | null;
+  outputAmountUsd: number | null;
+  sourceTokenAmount: number | null;
+  destinationTokenAmount: number | null;
+  routeId: string;
+};
+
+export type RouteRequestedEventPayload = SwapEstimateEventPayload & {
+  routeCount: number;
+};
+
+export type RouteNotFoundEventPayload = {
+  sourceChain: string;
+  destinationChain: string;
+  sourceTokenSymbol: string;
+  sourceTokenAddress: string | null;
+  destinationTokenSymbol: string;
+  destinationTokenAddress: string | null;
+  inputAmountUsd: number | null;
+};
+
+export type RouteFetchFailedEventPayload = {
+  sourceChain: string;
+  destinationChain: string;
+  /** HTTP status code returned by the route API, as a string. */
+  errorCode: string;
+};
+
+export type RouteChangedEventPayload = {
+  sourceChain: string;
+  destinationChain: string;
+  fromRouteId: string;
+  toRouteId: string;
+};
+
+export type TokenSelectedEventPayload = {
+  side: 'from' | 'to';
+  tokenName: string | null;
+  tokenSymbol: string;
+  tokenAddress: string | null;
+  chain: string;
+  selectionMethod: 'search' | 'default ';
+  /** `all` when no chain filter is active, otherwise the filtered chain name. */
+  activeChainFilter: string;
+};
+
+export type ChainFilterAppliedEventPayload = {
+  side: 'from' | 'to';
+  chain: string;
+  filterSource: 'featured' | 'expanded';
+};
+
+export type LiquiditySourceType = 'exchanges' | 'bridges';
+
+export type SettingsChangedEventPayload =
+  | { setting: 'slippage'; previousValue: number; newValue: number }
+  | { setting: 'infiniteApproval'; previousValue: boolean; newValue: boolean }
+  | {
+      setting: 'liquiditySource';
+      sourceType: LiquiditySourceType;
+      /** A single source was toggled on/off from the list. */
+      changeType: 'individual';
+      /** The sources whose enabled state changed, with their new state. */
+      sources: { id: string; enabled: boolean }[];
+    }
+  | {
+      setting: 'liquiditySource';
+      sourceType: LiquiditySourceType;
+      /** Every source was enabled or disabled at once via the header button. */
+      changeType: 'selectAll' | 'deselectAll';
+      /**
+       * Selection state before the bulk action, so the consumer can summarise
+       * it as all/some/none.
+       */
+      previousSelectedCount: number;
+      totalCount: number;
+    };
+
+export type RouteFeeViewedEventPayload = { routeId: string };
+
+export type DestinationAddressSetEventPayload = { destinationChain: string };
+
+export type GasWarningEventPayload = { routeId: string };
+
+export type SwapInitiatedEventPayload = SwapEstimateEventPayload & {
+  walletConnected: boolean;
+};
+
+export type SwapStartedEventPayload = SwapEstimateEventPayload & {
+  stepCount: number;
+};
+
+export type SwapWalletsModalShownEventPayload = {
+  chainsRequired: number;
+  chainsPending: number;
+};
+
+export type SwapWalletsConfirmedEventPayload = { routeId: string };
+
+export type SwapResumedEventPayload = {
+  routeId: string;
+  stepCount: number;
+  stepNumber: number;
+};
+
+export type SwapRetriedEventPayload = { routeId: string };
+
+export type SwapCancelledEventPayload = { routeId: string };
+
 export type QuoteEventData =
   | EventData<QuoteEventTypes.QUOTE_INPUT_UPDATE, QuoteInputUpdateEventPayload>
-  | EventData<QuoteEventTypes.QUOTE_OUTPUT_UPDATE, QuoteUpdateEventPayload>;
+  | EventData<QuoteEventTypes.QUOTE_OUTPUT_UPDATE, QuoteUpdateEventPayload>
+  | EventData<QuoteEventTypes.ROUTE_REQUESTED, RouteRequestedEventPayload>
+  | EventData<QuoteEventTypes.ROUTE_NOT_FOUND, RouteNotFoundEventPayload>
+  | EventData<QuoteEventTypes.ROUTE_FETCH_FAILED, RouteFetchFailedEventPayload>
+  | EventData<QuoteEventTypes.ROUTE_CHANGED, RouteChangedEventPayload>;
 
 export type WalletEventData =
   | EventData<WalletEventTypes.CONNECT, ConnectWalletEventPayload>
-  | EventData<WalletEventTypes.DISCONNECT, DisconnectWalletEventPayload>;
+  | EventData<WalletEventTypes.DISCONNECT, DisconnectWalletEventPayload>
+  | EventData<WalletEventTypes.DETECTED, WalletDetectedEventPayload>;
 
-export type UiEventData = EventData<
-  UiEventTypes.CLICK_CONNECT_WALLET,
-  ClickConnectWalletPayload
->;
+export type UiEventData =
+  | EventData<UiEventTypes.CLICK_CONNECT_WALLET, ClickConnectWalletPayload>
+  | EventData<UiEventTypes.TOKEN_SELECTED, TokenSelectedEventPayload>
+  | EventData<UiEventTypes.CHAIN_FILTER_APPLIED, ChainFilterAppliedEventPayload>
+  | EventData<UiEventTypes.SETTINGS_CHANGED, SettingsChangedEventPayload>
+  | EventData<UiEventTypes.ROUTE_FEE_VIEWED, RouteFeeViewedEventPayload>
+  | EventData<
+      UiEventTypes.DESTINATION_ADDRESS_SET,
+      DestinationAddressSetEventPayload
+    >
+  | EventData<UiEventTypes.GAS_WARNING_SHOWN, GasWarningEventPayload>
+  | EventData<UiEventTypes.GAS_WARNING_BYPASSED, GasWarningEventPayload>
+  | EventData<UiEventTypes.SWAP_INITIATED, SwapInitiatedEventPayload>
+  | EventData<
+      UiEventTypes.SWAP_WALLETS_MODAL_SHOWN,
+      SwapWalletsModalShownEventPayload
+    >
+  | EventData<
+      UiEventTypes.SWAP_WALLETS_CONFIRMED,
+      SwapWalletsConfirmedEventPayload
+    >
+  | EventData<UiEventTypes.SWAP_STARTED, SwapStartedEventPayload>
+  | EventData<UiEventTypes.SWAP_RESUMED, SwapResumedEventPayload>
+  | EventData<UiEventTypes.SWAP_RETRIED, SwapRetriedEventPayload>
+  | EventData<UiEventTypes.SWAP_CANCELLED, SwapCancelledEventPayload>;
 
+/**
+ * RouteEvent/StepEvent must match the queue-manager's `WidgetEvents` string
+ * values (`QueueManagerEvents`) so events route correctly. They're inlined as
+ * literals rather than referencing the other enum to keep this a pure string
+ * enum (a cross-enum reference makes `no-mixed-enums` read them as numeric).
+ */
 export enum WidgetEvents {
-  RouteEvent = QueueManagerEvents.RouteEvent,
-  StepEvent = QueueManagerEvents.StepEvent,
+  RouteEvent = 'routeEvent',
+  StepEvent = 'stepEvent',
   QuoteEvent = 'quoteEvent',
   WalletEvent = 'walletEvent',
   UiEvent = 'uiEvent',

package/src/utils/eventPayloads.ts

@@ -0,0 +1,39 @@
+import type { SelectedQuote, SwapEstimateEventPayload } from '../types';
+
+import { getUsdInputFrom, getUsdOutputFrom } from './swap';
+
+function toNumberOrNull(value: string | null | undefined): number | null {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+/**
+ * Derives the shared route/quote descriptor used by several swap
+ * events (swapInitiated, swapStarted, routeRequested, ...) from a quote.
+ * Amounts are estimates taken from the quote, not on-chain actuals.
+ */
+export function buildSwapEstimatePayload(
+  quote: SelectedQuote
+): SwapEstimateEventPayload {
+  const firstSwap = quote.swaps[0];
+  const lastSwap = quote.swaps[quote.swaps.length - 1];
+  const inputUsd = getUsdInputFrom(quote);
+  const outputUsd = getUsdOutputFrom(quote);
+
+  return {
+    routeId: quote.requestId,
+    sourceChain: firstSwap?.from.blockchain ?? '',
+    destinationChain: lastSwap?.to.blockchain ?? '',
+    sourceTokenSymbol: firstSwap?.from.symbol ?? '',
+    sourceTokenAddress: firstSwap?.from.address ?? null,
+    destinationTokenSymbol: lastSwap?.to.symbol ?? '',
+    destinationTokenAddress: lastSwap?.to.address ?? null,
+    sourceTokenAmount: toNumberOrNull(quote.requestAmount),
+    destinationTokenAmount: toNumberOrNull(quote.outputAmount),
+    inputAmountUsd: inputUsd ? inputUsd.toNumber() : null,
+    outputAmountUsd: outputUsd ? outputUsd.toNumber() : null,
+  };
+}

package/src/utils/events.ts

@@ -1,27 +1,50 @@
 import { eventEmitter } from '../services/eventEmitter';
-import { type UiEventData, WidgetEvents } from '../types';
+import {
+  type ClickConnectWalletPayload,
+  type QuoteEventData,
+  type UiEventData,
+  type UiEventTypes,
+  type WalletDetectedEventPayload,
+  WalletEventTypes,
+  WidgetEvents,
+} from '../types';
 
-type UiEvent = {
-  type: UiEventData['type'];
-  payload?: Omit<UiEventData['payload'], 'preventDefault'>;
+type PreventableUiEvent = {
+  type: UiEventTypes.CLICK_CONNECT_WALLET;
+  payload?: Omit<ClickConnectWalletPayload, 'preventDefault'>;
 };
 
-export function emitPreventableEvent(event: UiEvent, action: () => void): void {
+export function emitUiEvent(event: UiEventData): void {
+  eventEmitter.emit(WidgetEvents.UiEvent, event);
+}
+
+export function emitPreventableEvent(
+  event: PreventableUiEvent,
+  action: () => void
+): void {
   let defaultPrevented = false;
 
   const extendedPayload = {
+    ...event.payload,
     preventDefault() {
       defaultPrevented = true;
     },
-    ...(event.payload === undefined && { payload: event.payload }),
   };
 
-  eventEmitter.emit(WidgetEvents.UiEvent, {
-    type: event.type,
-    payload: extendedPayload,
-  });
+  emitUiEvent({ type: event.type, payload: extendedPayload });
 
   if (!defaultPrevented) {
     action();
   }
 }
+
+export function emitQuoteEvent(event: QuoteEventData): void {
+  eventEmitter.emit(WidgetEvents.QuoteEvent, event);
+}
+
+export function emitWalletDetected(payload: WalletDetectedEventPayload): void {
+  eventEmitter.emit(WidgetEvents.WalletEvent, {
+    type: WalletEventTypes.DETECTED,
+    payload,
+  });
+}

package/src/utils/wallets.ts

@@ -24,6 +24,7 @@ import { legacyReadAccountAddress as readAccountAddress } from '@rango-dev/walle
 import {
   detectInstallLink,
   HYPERLIQUID_SIGN_NETWORK,
+  getBlockChainNameFromId,
   isEvmAddress,
   Networks,
 } from '@rango-dev/wallets-shared';
@@ -45,6 +46,20 @@ import { formatThousandsWithCommas } from './sanitizers';
 export type ExtendedModalWalletInfo = WalletInfoWithExtra &
   Pick<ExtendedWalletInfo, 'properties' | 'isHub'>;
 
+function getConnectedEvmChainName(
+  namespaces: ReturnType<ProviderContext['state']>['namespaces'],
+  supportedChains: BlockchainMeta[]
+): string | null {
+  const evmNamespace = namespaces?.get('EVM');
+  if (!!evmNamespace?.network) {
+    return (
+      getBlockChainNameFromId(evmNamespace.network, supportedChains) ??
+      evmNamespace.network
+    );
+  }
+  return null;
+}
+
 export function getWalletConnectionStatus(
   wallet: ExtendedWalletInfo,
   walletState: ReturnType<ProviderContext['state']>
@@ -75,9 +90,12 @@ export function mapWalletTypesToWalletInfo(
     .filter((wallet) => {
       const { supportedChains, isContractWallet } = getWalletInfo(wallet);
 
-      const { installed, network } = getState(wallet);
+      const { installed, namespaces } = getState(wallet);
       const filterContractWallets =
-        isContractWallet && (!installed || (!!chain && network !== chain));
+        isContractWallet &&
+        (!installed ||
+          (!!chain &&
+            getConnectedEvmChainName(namespaces, supportedChains) !== chain));
       if (filterContractWallets) {
         return false;
       }