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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.61.0",
+  "version": "0.61.1-next.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -66,4 +66,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -19,6 +19,8 @@ import { WIDGET_UI_ID } from '../../constants';
 import { getQuoteErrorMessage } from '../../constants/errors';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
+import { UiEventTypes } from '../../types';
+import { emitUiEvent } from '../../utils/events';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { isConfirmSwapDisabled } from '../../utils/swap';
 import { getQuoteChains } from '../../utils/wallets';
@@ -211,6 +213,10 @@ export function ConfirmWalletsModal(props: PropTypes) {
     const lastSelectedWallets = selectableWallets.filter(
       (wallet) => wallet.selected
     );
+    emitUiEvent({
+      type: UiEventTypes.SWAP_WALLETS_CONFIRMED,
+      payload: { routeId: selectedQuote?.requestId ?? '' },
+    });
     setWalletsAsSelected(lastSelectedWallets);
     selectQuoteWallets(lastSelectedWallets);
     setQuoteWalletConfirmed(true);
@@ -301,6 +307,36 @@ export function ConfirmWalletsModal(props: PropTypes) {
     }
   }, [connectedWallets, nextSelectedWallets]);
 
+  const routeId = selectedQuote?.requestId ?? '';
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const pendingChains = requiredChains.filter(
+      (chain) =>
+        !connectedWallets.some(
+          (connectedWallet) => connectedWallet.chain === chain
+        )
+    );
+    emitUiEvent({
+      type: UiEventTypes.SWAP_WALLETS_MODAL_SHOWN,
+      payload: {
+        chainsRequired: requiredChains.length,
+        chainsPending: pendingChains.length,
+      },
+    });
+  }, [open]);
+
+  useEffect(() => {
+    if (isInsufficientBalanceModalOpen) {
+      emitUiEvent({
+        type: UiEventTypes.GAS_WARNING_SHOWN,
+        payload: { routeId },
+      });
+    }
+  }, [isInsufficientBalanceModalOpen, routeId]);
+
   const modalContainer = document.getElementById(
     WIDGET_UI_ID.SWAP_BOX_ID
   ) as HTMLDivElement;
@@ -383,7 +419,13 @@ export function ConfirmWalletsModal(props: PropTypes) {
             size="large"
             type="primary"
             fullWidth
-            onClick={onConfirmBalance}>
+            onClick={() => {
+              emitUiEvent({
+                type: UiEventTypes.GAS_WARNING_BYPASSED,
+                payload: { routeId },
+              });
+              onConfirmBalance();
+            }}>
             {i18n.t('Proceed anyway')}
           </Button>
         </MessageBox>

package/src/components/CustomDestination/CustomDestination.tsx

@@ -16,6 +16,8 @@ import React, { useEffect, useRef } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
+import { UiEventTypes } from '../../types';
+import { emitUiEvent } from '../../utils/events';
 import {
   getBlockchainDisplayNameFor,
   isValidTokenAddress,
@@ -94,6 +96,22 @@ export function CustomDestination(props: PropTypes) {
     }
   }, [configDestination]);
 
+  const lastReportedDestination = useRef<string | null>(null);
+  useEffect(() => {
+    if (!customDestination) {
+      lastReportedDestination.current = null;
+      return;
+    }
+    const isValid = open && isValidTokenAddress(blockchain, customDestination);
+    if (isValid && lastReportedDestination.current !== customDestination) {
+      lastReportedDestination.current = customDestination;
+      emitUiEvent({
+        type: UiEventTypes.DESTINATION_ADDRESS_SET,
+        payload: { destinationChain: blockchain.name },
+      });
+    }
+  }, [customDestination, open, blockchain]);
+
   return (
     <Container>
       <CustomCollapsible

package/src/components/Quote/QuoteCostDetails.tsx

@@ -21,7 +21,9 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
+import { UiEventTypes } from '../../types';
 import { getContainer, getExpanded } from '../../utils/common';
+import { emitUiEvent } from '../../utils/events';
 import { numberToString } from '../../utils/numbers';
 import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
 import { WatermarkedModal } from '../common/WatermarkedModal';
@@ -84,6 +86,12 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
           showModalFee
             ? (e) => {
                 e.stopPropagation();
+                if (!open && quote) {
+                  emitUiEvent({
+                    type: UiEventTypes.ROUTE_FEE_VIEWED,
+                    payload: { routeId: quote.requestId },
+                  });
+                }
                 setOpen(!open);
               }
             : undefined

package/src/components/Slippage/Slippage.tsx

@@ -12,7 +12,9 @@ import React from 'react';
 
 import { MAX_SLIPPAGE, SLIPPAGES } from '../../constants/swapSettings';
 import { useAppStore } from '../../store/AppStore';
+import { UiEventTypes } from '../../types';
 import { getContainer } from '../../utils/common';
+import { emitUiEvent } from '../../utils/events';
 import { getSlippageValidation } from '../../utils/settings';
 import { isValidCurrencyFormat } from '../../utils/validation';
 
@@ -31,6 +33,23 @@ export function Slippage() {
   const slippageValidation =
     customSlippage !== null ? getSlippageValidation(customSlippage) : null;
 
+  /** Effective slippage before a change, used as the previous value in events. */
+  const effectiveSlippage = customSlippage ?? slippage;
+
+  const emitSlippageChanged = (previousValue: number, newValue: number) => {
+    if (previousValue === newValue) {
+      return;
+    }
+    emitUiEvent({
+      type: UiEventTypes.SETTINGS_CHANGED,
+      payload: {
+        setting: 'slippage',
+        previousValue,
+        newValue,
+      },
+    });
+  };
+
   const onSlippageValueChange = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -43,10 +62,12 @@ export function Slippage() {
     if (parsedValue > MAX_SLIPPAGE) {
       slippage = MAX_SLIPPAGE;
     }
+    emitSlippageChanged(effectiveSlippage, slippage);
     setCustomSlippage(slippage);
   };
 
   const onClickSlippageChip = (slippageItem: number) => {
+    emitSlippageChanged(effectiveSlippage, slippageItem);
     if (customSlippage !== null) {
       setCustomSlippage(null);
     }

package/src/components/SwapDetails/SwapDetails.tsx

@@ -34,7 +34,9 @@ import {
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
+import { UiEventTypes } from '../../types';
 import { getContainer } from '../../utils/common';
+import { emitUiEvent } from '../../utils/events';
 import {
   numberToString,
   roundedSecondsToString,
@@ -404,6 +406,10 @@ export function SwapDetails(props: SwapDetailsProps) {
             type="primary"
             size="large"
             onClick={() => {
+              emitUiEvent({
+                type: UiEventTypes.SWAP_RETRIED,
+                payload: { routeId: swap.requestId },
+              });
               const swapInput = createRetryQuote(swap, blockchains, findToken);
               retry(swapInput);
               setTimeout(() => {

package/src/containers/Settings/Lists.tsx

@@ -32,7 +32,9 @@ import { navigationRoutes } from '../../constants/navigationRoutes';
 import { ThemeModeEnum } from '../../constants/settings';
 import { useLanguage } from '../../hooks/useLanguage';
 import { useAppStore } from '../../store/AppStore';
+import { UiEventTypes } from '../../types';
 import { getContainer } from '../../utils/common';
+import { emitUiEvent } from '../../utils/events';
 import { getUniqueSwappersGroups, isFeatureHidden } from '../../utils/settings';
 
 const ThemeSection = styled('div', {
@@ -257,7 +259,17 @@ export function SettingsLists() {
     ),
     start: <InfinityIcon color="gray" size={16} />,
     end: <Switch checked={infiniteApprove} />,
-    onClick: toggleInfiniteApprove,
+    onClick: () => {
+      emitUiEvent({
+        type: UiEventTypes.SETTINGS_CHANGED,
+        payload: {
+          setting: 'infiniteApproval',
+          previousValue: infiniteApprove,
+          newValue: !infiniteApprove,
+        },
+      });
+      toggleInfiniteApprove();
+    },
   };
 
   const themeItem = {

package/src/containers/Wallets/useUpdates.ts

@@ -77,7 +77,9 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     );
 
     if (data.length) {
-      void newWalletConnected(data, info.namespace, state.derivationPath);
+      void newWalletConnected(data, info.namespace, state.derivationPath, {
+        walletName: type,
+      });
     }
   };
 

package/src/hooks/useSwapInput.ts

@@ -5,8 +5,10 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
-import { QuoteErrorType } from '../types';
+import { QuoteErrorType, QuoteEventTypes } from '../types';
 import { debounce } from '../utils/common';
+import { buildSwapEstimatePayload } from '../utils/eventPayloads';
+import { emitQuoteEvent } from '../utils/events';
 import { isPositiveNumber } from '../utils/numbers';
 import {
   generateQuoteWarnings,
@@ -160,6 +162,16 @@ export function useSwapInput({
           updateQuotePartialState('quotes', res);
           setSelectedQuote(quote);
 
+          if (res.results?.length && quote) {
+            emitQuoteEvent({
+              type: QuoteEventTypes.ROUTE_REQUESTED,
+              payload: {
+                ...buildSwapEstimatePayload(quote),
+                routeCount: res.results.length,
+              },
+            });
+          }
+
           throwErrorIfResponseIsNotValid({
             diagnosisMessages: res.diagnosisMessages,
             requestId: quote?.requestId || '',
@@ -176,6 +188,30 @@ export function useSwapInput({
         })
         .catch((error) => {
           const quoteError = handleQuoteErrors(error);
+          if (quoteError.type === QuoteErrorType.NO_RESULT) {
+            emitQuoteEvent({
+              type: QuoteEventTypes.ROUTE_NOT_FOUND,
+              payload: {
+                sourceChain: fromToken.blockchain,
+                destinationChain: toToken.blockchain,
+                sourceTokenSymbol: fromToken.symbol,
+                sourceTokenAddress: fromToken.address,
+                destinationTokenSymbol: toToken.symbol,
+                destinationTokenAddress: toToken.address,
+                inputAmountUsd: inputUsdValue ? inputUsdValue.toNumber() : null,
+              },
+            });
+          } else if (quoteError.type === QuoteErrorType.REQUEST_FAILED) {
+            emitQuoteEvent({
+              type: QuoteEventTypes.ROUTE_FETCH_FAILED,
+              payload: {
+                sourceChain: fromToken.blockchain,
+                destinationChain: toToken.blockchain,
+
+                errorCode: String(error?.response?.status ?? ''),
+              },
+            });
+          }
           if (
             quoteError.type === QuoteErrorType.NO_RESULT ||
             quoteError.type === QuoteErrorType.REQUEST_FAILED

package/src/hooks/useSyncNotifications/useSyncNotifications.ts

@@ -2,6 +2,8 @@ import { useManager } from '@rango-dev/queue-manager-react';
 import { useEffect } from 'react';
 
 import { useNotificationStore } from '../../store/notification';
+import { UiEventTypes } from '../../types';
+import { emitUiEvent } from '../../utils/events';
 import { getPendingSwaps } from '../../utils/queue';
 
 export function useSyncNotifications() {
@@ -15,7 +17,37 @@ export function useSyncNotifications() {
       !isSynced;
 
     if (shouldSyncNotifications) {
-      syncNotifications(getPendingSwaps(manager));
+      const pendingSwaps = getPendingSwaps(manager);
+      syncNotifications(pendingSwaps);
+
+      pendingSwaps.forEach(({ swap }) => {
+        const isInProgressMultiStep =
+          swap.status === 'running' && swap.steps.length > 1;
+        if (!isInProgressMultiStep) {
+          return;
+        }
+        /*
+         * The current step is the first one that hasn't succeeded yet. A
+         * running swap should always have one; if not (all steps already
+         * succeeded), the state is inconsistent/transient, so skip it rather
+         * than report a misleading step.
+         */
+        const currentStepIndex = swap.steps.findIndex(
+          (step) => step.status !== 'success'
+        );
+        if (currentStepIndex === -1) {
+          return;
+        }
+
+        emitUiEvent({
+          type: UiEventTypes.SWAP_RESUMED,
+          payload: {
+            routeId: swap.requestId,
+            stepCount: swap.steps.length,
+            stepNumber: currentStepIndex + 1,
+          },
+        });
+      });
     }
   }, [
     useNotificationStore.persist.hasHydrated(),

package/src/hooks/useWalletList.ts

@@ -7,6 +7,7 @@ import { detectMobileScreens, WalletTypes } from '@rango-dev/wallets-shared';
 import { useCallback, useEffect } from 'react';
 
 import { useAppStore } from '../store/AppStore';
+import { emitWalletDetected } from '../utils/events';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
   hashWalletsState,
@@ -16,6 +17,26 @@ import {
 
 import { useStatefulConnect } from './useStatefulConnect/useStatefulConnect';
 
+/**
+ * Wallet types we've already reported as detected this session. Module-scoped so
+ * the `walletDetected` event fires at most once per provider regardless of how
+ * often the wallet list re-renders or remounts.
+ */
+const detectedWalletsReported = new Set<string>();
+
+/**
+ * Wallet types that aren't browser-injected extensions (hardware wallets,
+ * WalletConnect, TON Connect). Their presence doesn't indicate an installed
+ * wallet, so they're excluded from the `walletDetected` signal.
+ */
+const NON_INJECTED_WALLET_TYPES = new Set<string>([
+  WalletTypes.LEDGER,
+  WalletTypes.TREZOR,
+  WalletTypes.WALLET_CONNECT_2,
+  WalletTypes.TON_CONNECT,
+  WalletTypes.DEFAULT,
+]);
+
 interface Params {
   chain?: string;
 }
@@ -59,6 +80,21 @@ export function useWalletList(params?: Params): API {
 
   const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
 
+  useEffect(() => {
+    wallets.forEach((wallet) => {
+      if (NON_INJECTED_WALLET_TYPES.has(wallet.type)) {
+        return;
+      }
+      const isDetected = wallet.state !== WalletState.NOT_INSTALLED;
+      if (isDetected && !detectedWalletsReported.has(wallet.type)) {
+        detectedWalletsReported.add(wallet.type);
+        emitWalletDetected({
+          walletName: wallet.title,
+        });
+      }
+    });
+  }, [hashWalletsState(wallets)]);
+
   const terminateConnectingWallets = useCallback(() => {
     const connectingWallets =
       wallets?.filter((wallet) => wallet.state === WalletState.CONNECTING) ||

package/src/pages/ConfirmSwapPage.tsx

@@ -28,7 +28,9 @@ import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
-import { QuoteErrorType, QuoteWarningType } from '../types';
+import { QuoteErrorType, QuoteWarningType, UiEventTypes } from '../types';
+import { buildSwapEstimatePayload } from '../utils/eventPayloads';
+import { emitUiEvent } from '../utils/events';
 import { isQuoteWarningConfirmationRequired } from '../utils/quote';
 import { joinList } from '../utils/ui';
 
@@ -142,6 +144,15 @@ export function ConfirmSwapPage() {
     if (shouldShowWarningModal) {
       setShowQuoteWarningModal(true);
     } else {
+      if (selectedQuote) {
+        emitUiEvent({
+          type: UiEventTypes.SWAP_STARTED,
+          payload: {
+            ...buildSwapEstimatePayload(selectedQuote),
+            stepCount: selectedQuote.swaps.length,
+          },
+        });
+      }
       await onConfirm();
     }
   };

package/src/pages/Home.tsx

@@ -23,9 +23,14 @@ import { useSwapMode } from '../hooks/useSwapMode';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
-import { UiEventTypes } from '../types';
+import { QuoteEventTypes, UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
-import { emitPreventableEvent } from '../utils/events';
+import { buildSwapEstimatePayload } from '../utils/eventPayloads';
+import {
+  emitPreventableEvent,
+  emitQuoteEvent,
+  emitUiEvent,
+} from '../utils/events';
 import { getSlippageValidation } from '../utils/settings';
 import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
 
@@ -133,6 +138,18 @@ export function Home() {
   };
   const onClickOnQuote = (quote: SelectedQuote) => {
     if (selectedQuote?.requestId !== quote.requestId) {
+      if (selectedQuote) {
+        emitQuoteEvent({
+          type: QuoteEventTypes.ROUTE_CHANGED,
+          payload: {
+            sourceChain: quote.swaps[0]?.from.blockchain ?? '',
+            destinationChain:
+              quote.swaps[quote.swaps.length - 1]?.to.blockchain ?? '',
+            fromRouteId: selectedQuote.requestId,
+            toRouteId: quote.requestId,
+          },
+        });
+      }
       setShowQuoteWarningModal(false);
       setSelectedQuote(quote);
     }
@@ -171,6 +188,25 @@ export function Home() {
     setIsVisibleExpanded(hasInputs);
   }, [hasInputs]);
 
+  const handleSwapButtonClick = () => {
+    if (swapButtonState.action === 'connect-wallet') {
+      emitPreventableEvent({ type: UiEventTypes.CLICK_CONNECT_WALLET }, () => {
+        onHandleNavigation(navigationRoutes.wallets);
+      });
+    } else if (swapButtonState.action === 'confirm-warning') {
+      setShowQuoteWarningModal(true);
+    } else if (selectedQuote) {
+      emitUiEvent({
+        type: UiEventTypes.SWAP_INITIATED,
+        payload: {
+          ...buildSwapEstimatePayload(selectedQuote),
+          walletConnected: connectedWallets.length > 0,
+        },
+      });
+      onHandleNavigation(navigationRoutes.confirmSwap);
+    }
+  };
+
   return (
     <MainContainer>
       <Layout
@@ -186,18 +222,7 @@ export function Home() {
               swapButtonState.action === 'confirm-warning' && <WarningIcon />
             }
             fullWidth
-            onClick={() => {
-              if (swapButtonState.action === 'connect-wallet') {
-                emitPreventableEvent(
-                  { type: UiEventTypes.CLICK_CONNECT_WALLET },
-                  () => onHandleNavigation(navigationRoutes.wallets)
-                );
-              } else if (swapButtonState.action === 'confirm-warning') {
-                setShowQuoteWarningModal(true);
-              } else {
-                onHandleNavigation(navigationRoutes.confirmSwap);
-              }
-            }}>
+            onClick={handleSwapButtonClick}>
             {swapButtonState.title}
           </Button>
         }

package/src/pages/LiquiditySourcePage.tsx

@@ -21,6 +21,8 @@ import {
   NotFoundContainer,
 } from '../components/SettingsContainer';
 import { useAppStore } from '../store/AppStore';
+import { type LiquiditySourceType, UiEventTypes } from '../types';
+import { emitUiEvent } from '../utils/events';
 import { containsText } from '../utils/numbers';
 import { replaceSpacesWithDash } from '../utils/sanitizers';
 import { getUniqueSwappersGroups } from '../utils/settings';
@@ -56,7 +58,24 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
     liquiditySources.length ===
     liquiditySources.filter((sourceItem) => sourceItem.selected).length;
 
+  const liquiditySourceType: LiquiditySourceType =
+    sourceType === 'Exchanges' ? 'exchanges' : 'bridges';
+
   const toggleAllSources = () => {
+    // Selecting all enables every source; deselecting all disables them.
+    const enabled = !hasSelectAll;
+    emitUiEvent({
+      type: UiEventTypes.SETTINGS_CHANGED,
+      payload: {
+        setting: 'liquiditySource',
+        sourceType: liquiditySourceType,
+        changeType: enabled ? 'selectAll' : 'deselectAll',
+        previousSelectedCount: liquiditySources.filter(
+          (sourceItem) => sourceItem.selected
+        ).length,
+        totalCount: liquiditySources.length,
+      },
+    });
     liquiditySources.forEach((sourceItem) => {
       if (hasSelectAll) {
         toggleLiquiditySource(sourceItem.groupTitle);
@@ -79,6 +98,15 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
       start: <Image src={logo} size={22} type="circular" />,
       onClick: () => {
         if (!campaignMode) {
+          emitUiEvent({
+            type: UiEventTypes.SETTINGS_CHANGED,
+            payload: {
+              setting: 'liquiditySource',
+              sourceType: liquiditySourceType,
+              changeType: 'individual',
+              sources: [{ id: groupTitle, enabled: !selected }],
+            },
+          });
           toggleLiquiditySource(groupTitle);
         }
       },

package/src/pages/SelectBlockchainPage.tsx

@@ -16,7 +16,9 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useSwapMode } from '../hooks/useSwapMode';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import { UiEventTypes } from '../types';
 import { filterBlockchainsWithAtLeastOneToken } from '../utils/common';
+import { emitUiEvent } from '../utils/events';
 
 interface PropTypes {
   type: 'source' | 'destination' | 'custom-token';
@@ -51,6 +53,14 @@ export function SelectBlockchainPage(props: PropTypes) {
     if (type === 'custom-token') {
       navigate(`..?blockchain=${blockchain.name}`, { replace: true });
     } else {
+      emitUiEvent({
+        type: UiEventTypes.CHAIN_FILTER_APPLIED,
+        payload: {
+          side: type === 'source' ? 'from' : 'to',
+          chain: blockchain.name,
+          filterSource: 'expanded',
+        },
+      });
       if (type === 'source') {
         setFromBlockchain(blockchain);
       } else {

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

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

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(