@rango-dev/widget-embedded 0.0.0-experimental-01e2a135-20260613 → 0.0.0-experimental-248dbf7f-20260614

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.0.0-experimental-01e2a135-20260613",
+  "version": "0.0.0-experimental-248dbf7f-20260614",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -18,6 +18,7 @@ import { WIDGET_UI_ID } from '../../constants';
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
+import { emitWalletConnectInitiated } from '../../utils/events';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
   getAddress,
@@ -176,6 +177,8 @@ export function WalletList(props: PropTypes) {
             (isConnectedButDifferentThanTargetNamespace &&
               !couldAddExperimentalChain)
           ) {
+            // The user is starting a connection from the confirm-wallets modal.
+            emitWalletConnectInitiated('confirm_modal');
             setSelectedWalletToConnect(wallet);
           } else if (couldAddExperimentalChain) {
             setExperimentalChainWallet({

package/src/containers/Widget/Widget.tsx

@@ -11,8 +11,6 @@ import { WidgetProvider } from '../WidgetProvider';
 export function Widget(props: PropsWithChildren<WidgetProps>) {
   const isExternalWalletsEnabled = props.config?.externalWallets;
 
-  console.log('Widget props', props);
-
   return (
     <AppRouter>
       {isExternalWalletsEnabled ? (

package/src/pages/SelectSwapItemPage/SelectSwapItemPage.helpers.ts

@@ -7,6 +7,19 @@ import {
   MIN_SEARCH_LENGTH,
 } from './SelectSwapItemPage.constants';
 
+export function getTokenSelectionMethod(
+  searchedFor: string,
+  isPopular: boolean | undefined
+): 'search' | 'popular' | 'recent' {
+  if (searchedFor.trim()) {
+    return 'search';
+  }
+  if (isPopular) {
+    return 'popular';
+  }
+  return 'recent';
+}
+
 export function shouldSearchForCustomTokens(
   metaSearchResultTokens: Token[],
   query: string,

package/src/pages/SelectSwapItemPage/SelectSwapItemsPage.tsx

@@ -18,6 +18,7 @@ import { UiEventTypes } from '../../types';
 import { emitUiEvent } from '../../utils/events';
 
 import {
+  getTokenSelectionMethod,
   prepareTokensList,
   shouldSearchForCustomTokens,
 } from './SelectSwapItemPage.helpers';
@@ -160,11 +161,10 @@ export function SelectSwapItemsPage(props: PropTypes) {
                 tokenSymbol: token.symbol,
                 tokenAddress: token.address,
                 chain: token.blockchain,
-                selectionMethod: searchedFor.trim()
-                  ? 'search'
-                  : token.isPopular
-                  ? 'popular'
-                  : 'recent',
+                selectionMethod: getTokenSelectionMethod(
+                  searchedFor,
+                  token.isPopular
+                ),
                 activeChainFilter: selectedBlockchainName || 'all',
               },
             });

package/src/services/walletConnectionSource.ts

@@ -1,19 +1,32 @@
 import type { WalletConnectionSource } from '../types';
 
 /**
- * Tracks where in the UI the in-flight wallet connection was triggered, so the
- * `walletConnected` event can be enriched with a `source` once the wallet
- * actually connects (the connection completes asynchronously, far from the
- * click site). Best-effort: the most recently initiated source wins.
+ * Tracks where the user started a wallet connection inside the widget (the swap
+ * button, the nav, or the confirm-wallets modal) so the `walletConnected` event
+ * can carry a `source`.
+ *
+ * The initiation and the resulting connection are far apart (the user still has
+ * to pick a wallet and approve a popup), so the source is stashed when the flow
+ * is initiated and consumed by the next connection that completes:
+ *
+ *   1. connection initiated -> setPendingWalletConnectionSource(source)
+ *   2. a wallet connects     -> newWalletConnected reads consumeWalletConnectionSource()
  */
-let currentSource: WalletConnectionSource | null = null;
+let pendingSource: WalletConnectionSource | null = null;
 
-export function setWalletConnectionSource(
+/** Records the source for the connection the user is about to start. */
+export function setPendingWalletConnectionSource(
   source: WalletConnectionSource | null
 ): void {
-  currentSource = source;
+  pendingSource = source;
 }
 
-export function getWalletConnectionSource(): WalletConnectionSource | null {
-  return currentSource;
+/**
+ * Returns the pending source and clears it, so it's applied to exactly one
+ * connection and can't leak to later, unrelated ones.
+ */
+export function consumeWalletConnectionSource(): WalletConnectionSource | null {
+  const source = pendingSource;
+  pendingSource = null;
+  return source;
 }

package/src/store/slices/wallets.ts

@@ -8,7 +8,7 @@ import { ZERO } from '../../constants/numbers';
 import { BALANCE_SEPARATOR } from '../../constants/wallets';
 import { eventEmitter } from '../../services/eventEmitter';
 import { httpService } from '../../services/httpService';
-import { getWalletConnectionSource } from '../../services/walletConnectionSource';
+import { consumeWalletConnectionSource } from '../../services/walletConnectionSource';
 import {
   type Balance,
   type Wallet,
@@ -457,7 +457,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
           accounts,
           chain: newAccount.chain ?? null,
           walletName: meta?.walletName ?? newAccount.walletType,
-          source: getWalletConnectionSource(),
+          source: consumeWalletConnectionSource(),
         },
       });
 

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
@@ -85,7 +83,7 @@ export type ConnectWalletEventPayload = {
   accounts: Account[];
   /** Blockchain of the first connected account. */
   chain: string | null;
-  /** Human-readable wallet name (e.g. "MetaMask"). */
+  /** wallet type (e.g. "metamask"). */
   walletName: string;
   /** Where in the UI the connection was triggered, when known. */
   source: WalletConnectionSource | null;
@@ -243,9 +241,15 @@ export type UiEventData =
   | 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/events.ts

@@ -1,5 +1,5 @@
 import { eventEmitter } from '../services/eventEmitter';
-import { setWalletConnectionSource } from '../services/walletConnectionSource';
+import { setPendingWalletConnectionSource } from '../services/walletConnectionSource';
 import {
   type ClickConnectWalletPayload,
   type QuoteEventData,
@@ -53,7 +53,7 @@ export function emitUiEvent(
 export function emitWalletConnectInitiated(
   source: WalletConnectionSource | null
 ): void {
-  setWalletConnectionSource(source);
+  setPendingWalletConnectionSource(source);
   eventEmitter.emit(WidgetEvents.WalletEvent, {
     type: WalletEventTypes.CONNECT_INITIATED,
     payload: { source },