@rango-dev/widget-embedded 0.0.0-experimental-01e2a135-20260613 → 0.0.0-experimental-e5c14f42-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-e5c14f42-20260614",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/containers/Wallets/useUpdates.ts

@@ -16,6 +16,7 @@ import { Events } from '@rango-dev/wallets-react';
 import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
 
+import { markWalletConnecting } from '../../services/walletConnectionSource';
 import { useAppStore } from '../../store/AppStore';
 import {
   prepareAccountsForWalletStore,
@@ -235,6 +236,11 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
   };
 
   const handler: EventHandler = (type, event, value, state, info) => {
+    if (event === Events.CONNECTING) {
+      // Lock in the pending connection source for this specific wallet.
+      markWalletConnecting(type);
+    }
+
     if (info.isHub) {
       handleUpdatesForHub(type, event, value, state, info);
     } else {

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,41 @@
 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.
+ * Source of the connection the user is about to start, recorded when an
+ * in-widget connection flow is initiated (e.g. the nav or swap button). This is
+ * only "pending" until a specific wallet actually starts connecting — see
+ * `markWalletConnecting`.
  */
-let currentSource: WalletConnectionSource | null = null;
+let pendingSource: WalletConnectionSource | null = null;
 
-export function setWalletConnectionSource(
+/**
+ * Source captured per wallet type at the moment that wallet began connecting.
+ * Keying by wallet type (rather than a single global value) means interleaved
+ * or abandoned connection attempts can't misattribute each other: e.g.
+ * initiating from the nav, leaving the wallet popup, then connecting a
+ * different wallet from the swap button no longer overwrites the first wallet's
+ * source. The connection completes asynchronously, far from the click site, so
+ * the source has to be remembered until `walletConnected` is emitted.
+ */
+const sourceByWallet = new Map<string, WalletConnectionSource | null>();
+
+export function setPendingWalletConnectionSource(
   source: WalletConnectionSource | null
 ): void {
-  currentSource = source;
+  pendingSource = source;
+}
+
+/**
+ * Snapshots the current pending source for a wallet as it starts connecting.
+ * Called on the wallet's `connecting` event.
+ */
+export function markWalletConnecting(walletType: string): void {
+  sourceByWallet.set(walletType, pendingSource);
 }
 
-export function getWalletConnectionSource(): WalletConnectionSource | null {
-  return currentSource;
+/** Reads the source captured for a wallet when it began connecting. */
+export function getWalletConnectionSource(
+  walletType: string
+): WalletConnectionSource | null {
+  return sourceByWallet.get(walletType) ?? null;
 }

package/src/store/slices/wallets.ts

@@ -457,7 +457,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
           accounts,
           chain: newAccount.chain ?? null,
           walletName: meta?.walletName ?? newAccount.walletType,
-          source: getWalletConnectionSource(),
+          source: getWalletConnectionSource(newAccount.walletType),
         },
       });
 

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 },