track walletconnect failed requests

src/__swaps__/screens/Swap/hooks/useSearchCurrencyLists.ts

@@ -8,13 +8,14 @@ import { useFavorites } from '@/resources/favorites';
 import { useSwapsStore } from '@/state/swaps/swapsStore';
 import { isAddress } from '@ethersproject/address';
 import { rankings } from 'match-sorter';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 import { useDebouncedCallback } from 'use-debounce';
 import { TokenToBuyListItem } from '../components/TokenList/TokenToBuyList';
 import { useSwapContext } from '../providers/swap-provider';
 import { RecentSwap } from '@/__swaps__/types/swap';
 import { useTokenDiscovery } from '../resources/search';
+import { analyticsV2 } from '@/analytics';
 
 export type AssetToBuySectionId = 'bridge' | 'recent' | 'favorites' | 'verified' | 'unverified' | 'other_networks' | 'popular';
 
@@ -422,28 +423,29 @@ export function useSearchCurrencyLists() {
     }
   );
 
-  return useMemo(() => {
+  const searchCurrencyLists = useMemo(() => {
     const toChainId = selectedOutputChainId.value ?? ChainId.mainnet;
     const bridgeResult = memoizedData.filteredBridgeAsset ?? undefined;
     const crosschainMatches = query === '' ? undefined : verifiedAssets?.filter(asset => asset.chainId !== toChainId);
     const verifiedResults = query === '' ? verifiedAssets : verifiedAssets?.filter(asset => asset.chainId === toChainId);
     const unverifiedResults = memoizedData.enableUnverifiedSearch ? unverifiedAssets : undefined;
 
-    return {
-      results: buildListSectionsData({
-        combinedData: {
-          bridgeAsset: bridgeResult,
-          crosschainExactMatches: crosschainMatches,
-          unverifiedAssets: unverifiedResults,
-          verifiedAssets: verifiedResults,
-          recentSwaps: recentsForChain,
-          popularAssets: popularAssetsForChain,
-        },
-        favoritesList,
-        filteredBridgeAssetAddress: memoizedData.filteredBridgeAsset?.address,
-      }),
-      isLoading: isLoadingVerifiedAssets || isLoadingUnverifiedAssets || isLoadingPopularAssets,
-    };
+    const results = buildListSectionsData({
+      combinedData: {
+        bridgeAsset: bridgeResult,
+        crosschainExactMatches: crosschainMatches,
+        unverifiedAssets: unverifiedResults,
+        verifiedAssets: verifiedResults,
+        recentSwaps: recentsForChain,
+        popularAssets: popularAssetsForChain,
+      },
+      favoritesList,
+      filteredBridgeAssetAddress: memoizedData.filteredBridgeAsset?.address,
+    });
+
+    const isLoading = isLoadingVerifiedAssets || isLoadingUnverifiedAssets || isLoadingPopularAssets;
+
+    return { results, isLoading };
   }, [
     favoritesList,
     isLoadingUnverifiedAssets,
@@ -458,4 +460,17 @@ export function useSearchCurrencyLists() {
     recentsForChain,
     popularAssetsForChain,
   ]);
+
+  useEffect(() => {
+    if (searchCurrencyLists.isLoading) return;
+    const params = { screen: 'swap' as const, total_tokens: 0, no_icon: 0, query };
+    for (const assetOrHeader of searchCurrencyLists.results) {
+      if (assetOrHeader.listItemType === 'header') continue;
+      if (!assetOrHeader.icon_url) params.no_icon += 1;
+      params.total_tokens += 1;
+    }
+    analyticsV2.track(analyticsV2.event.tokenList, params);
+  }, [searchCurrencyLists.results, searchCurrencyLists.isLoading, query]);
+
+  return searchCurrencyLists;
 }

src/analytics/event.ts

@@ -79,6 +79,8 @@ export const event = {
   wcNewSessionApproved: 'Approved new WalletConnect session',
   wcShowingSigningRequest: 'Showing Walletconnect signing request',
 
+  wcRequestFailed: 'wc.failed_request',
+
   nftOffersOpenedOffersSheet: 'Opened NFT Offers Sheet',
   nftOffersOpenedSingleOfferSheet: 'Opened NFT Single Offer Sheet',
   nftOffersViewedExternalOffer: 'Viewed external NFT Offer',
@@ -169,6 +171,9 @@ export const event = {
   tokenDetailsErc20: 'token_details.erc20',
   tokenDetailsNFT: 'token_details.nft',
 
+  // token lists (wallet, swap, send)
+  tokenList: 'token_list',
+
   // trending tokens
   viewTrendingToken: 'trending_tokens.view_trending_token',
   viewRankedCategory: 'trending_tokens.view_ranked_category',
@@ -372,6 +377,12 @@ export type EventProperties = {
     dappName: string;
     dappUrl: string;
   };
+  [event.wcRequestFailed]: {
+    type: 'session_proposal' | 'session_request' | 'read only wallet' | 'method not supported' | 'invalid namespaces' | 'dapp browser';
+    reason: string;
+    method?: string;
+  };
+
   [event.nftOffersOpenedOffersSheet]: {
     entryPoint: string;
   };
@@ -717,6 +728,14 @@ export type EventProperties = {
     available_data: { description: boolean; image_url: boolean; floorPrice: boolean };
   };
 
+  [event.tokenList]: {
+    screen: 'wallet' | 'swap' | 'send' | 'discover';
+    total_tokens: number;
+    no_icon: number;
+    no_price?: number;
+    query?: string; // query is only sent for the swap screen
+  };
+
   [event.viewTrendingToken]: {
     address: TrendingToken['address'];
     chainId: TrendingToken['chainId'];

src/components/expanded-state/UniqueTokenExpandedState.tsx

@@ -417,18 +417,17 @@ const UniqueTokenExpandedState = ({ asset: passedAsset, external }: UniqueTokenE
 
   const hideNftMarketplaceAction = isPoap || !slug;
 
-  const mountedAt = useRef(Date.now());
   useTimeoutEffect(
-    () => {
+    ({ elapsedTime }) => {
       const { address, chainId } = getAddressAndChainIdFromUniqueId(uniqueId);
       const { name, description, image_url } = asset;
       analyticsV2.track(analyticsV2.event.tokenDetailsNFT, {
-        eventSentAfterMs: Date.now() - mountedAt.current,
+        eventSentAfterMs: elapsedTime,
         token: { isPoap, isParty: !!isParty, isENS, address, chainId, name, image_url },
         available_data: { description: !!description, image_url: !!image_url, floorPrice: !!offer?.floorPrice },
       });
     },
-    5 * 1000 // 5s
+    { timeout: 5 * 1000 }
   );
   return (
     <>

src/components/expanded-state/asset/ChartExpandedState.js

@@ -257,17 +257,16 @@ export default function ChartExpandedState({ asset }) {
     [nativeCurrency]
   );
 
-  const mountedAt = useRef(Date.now());
   useTimeoutEffect(
-    () => {
+    ({ elapsedTime }) => {
       const { address, chainId, symbol, name, icon_url, price } = assetWithPrice;
       analyticsV2.track(analyticsV2.event.tokenDetailsErc20, {
-        eventSentAfterMs: Date.now() - mountedAt.current,
+        eventSentAfterMs: elapsedTime,
         token: { address, chainId, symbol, name, icon_url, price },
         available_data: { chart: showChart, description: !!data?.description, iconUrl: !!icon_url },
       });
     },
-    5 * 1000 // 5s
+    { timeout: 5 * 1000 }
   );
 
   return (

src/hooks/useTimeout.ts

@@ -18,20 +18,32 @@ export default function useTimeout(): [(func: () => void, ms?: number) => void,
   return [start, stop, handle];
 }
 
-export function useTimeoutEffect(onTimeout: (cancelled: boolean) => void, delay: number) {
+export function useTimeoutEffect(
+  onTimeout: (e: { cancelled: boolean; elapsedTime: number }) => void,
+  { timeout, enabled = true }: { timeout: number; enabled?: boolean }
+) {
   const callback = useRef(onTimeout);
   useLayoutEffect(() => {
     callback.current = onTimeout;
   }, [onTimeout]);
 
   const timeoutRef = useRef<NodeJS.Timeout>();
   useEffect(() => {
+    if (!enabled) return;
     const startedAt = Date.now();
-    timeoutRef.current = setTimeout(() => callback.current(false), delay);
-    const timeout = timeoutRef.current;
+    timeoutRef.current = setTimeout(() => {
+      callback.current({
+        cancelled: false,
+        elapsedTime: Date.now() - startedAt,
+      });
+    }, timeout);
     return () => {
-      clearTimeout(timeout);
-      if (Date.now() - startedAt < delay) callback.current(true);
+      if (!timeoutRef.current) return;
+      clearTimeout(timeoutRef.current);
+      const elapsedTime = Date.now() - startedAt;
+      if (elapsedTime < timeout) {
+        callback.current({ cancelled: true, elapsedTime });
+      }
     };
-  }, [delay]);
+  }, [timeout, enabled]);
 }

src/hooks/useWalletSectionsData.ts

@@ -123,6 +123,16 @@ export default function useWalletSectionsData({
 
   const { isCoinListEdited } = useCoinListEdited();
 
+  useEffect(() => {
+    if (isLoadingUserAssets || type !== 'wallet') return;
+    const params = { screen: 'wallet' as const, no_icon: 0, no_price: 0, total_tokens: sortedAssets.length };
+    for (const asset of sortedAssets) {
+      if (!asset.icon_url) params.no_icon += 1;
+      if (!asset.price?.relative_change_24h) params.no_price += 1;
+    }
+    analyticsV2.track(analyticsV2.event.tokenList, params);
+  }, [isLoadingUserAssets, sortedAssets, type]);
+
   const walletSections = useMemo(() => {
     const accountInfo = {
       hiddenAssets,

src/screens/NoNeedWCSheet.tsx

@@ -1,5 +1,5 @@
 import * as lang from '@/languages';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Centered } from '../components/layout';
 import { Sheet, SheetActionButton } from '../components/sheet';
 import { Text } from '../components/text';
@@ -9,6 +9,7 @@ import { useTheme } from '@/theme';
 import { Colors } from '../styles/colors';
 import { Box } from '@/design-system';
 import { useRoute } from '@react-navigation/native';
+import { analyticsV2 } from '@/analytics';
 
 const BodyText = styled(Text).attrs(({ theme: { colors } }: { theme: { colors: Colors } }) => ({
   align: 'center',
@@ -25,6 +26,13 @@ const WalletConnectRedirectSheet = () => {
   const { goBack } = useNavigation();
   const { params } = useRoute();
 
+  useEffect(() => {
+    analyticsV2.track(analyticsV2.event.wcRequestFailed, {
+      type: 'dapp browser',
+      reason: 'tried to connect with WalletConnect in the dapp browser',
+    });
+  }, []);
+
   const handleOnPress = useCallback(() => {
     (params as { cb?: () => void })?.cb?.();
     goBack();

src/screens/SendSheet.tsx

@@ -10,7 +10,7 @@ import { SendAssetForm, SendAssetList, SendContactList, SendHeader } from '../co
 import { SheetActionButton } from '../components/sheet';
 import { getDefaultCheckboxes } from './SendConfirmationSheet';
 import { WrappedAlert as Alert } from '@/helpers/alert';
-import { analytics } from '@/analytics';
+import { analytics, analyticsV2 } from '@/analytics';
 import { PROFILES, useExperimentalFlag } from '@/config';
 import { AssetTypes, NewTransaction, ParsedAddressAsset, TransactionStatus, UniqueAsset } from '@/entities';
 import { isNativeAsset } from '@/handlers/assets';
@@ -129,6 +129,7 @@ type OnSubmitProps = {
 export default function SendSheet() {
   const { goBack, navigate } = useNavigation();
   const sortedAssets = useUserAssetsStore(state => state.legacyUserAssets);
+  const isLoadingUserAssets = useUserAssetsStore(state => state.isLoadingUserAssets);
   const {
     gasFeeParamsBySpeed,
     gasLimit,
@@ -894,6 +895,16 @@ export default function SendSheet() {
     isUniqueAsset,
   ]);
 
+  useEffect(() => {
+    if (isLoadingUserAssets || !sortedAssets) return;
+    const params = { screen: 'wallet' as const, no_icon: 0, no_price: 0, total_tokens: sortedAssets.length };
+    for (const asset of sortedAssets) {
+      if (!asset.icon_url) params.no_icon += 1;
+      if (!asset.price?.relative_change_24h) params.no_price += 1;
+    }
+    analyticsV2.track(analyticsV2.event.tokenList, params);
+  }, [isLoadingUserAssets, sortedAssets]);
+
   const sendContactListDataKey = useMemo(() => `${ensSuggestions?.[0]?.address || '_'}`, [ensSuggestions]);
 
   const isEmptyWallet = !sortedAssets?.length && !sendableUniqueTokens?.length;

src/walletConnect/index.tsx

@@ -16,7 +16,7 @@ import { toUtf8String } from '@ethersproject/strings';
 import { logger, RainbowError } from '@/logger';
 import Navigation, { getActiveRoute } from '@/navigation/Navigation';
 import Routes from '@/navigation/routesNames';
-import { analyticsV2 as analytics } from '@/analytics';
+import { analyticsV2 as analytics, analyticsV2 } from '@/analytics';
 import { maybeSignUri } from '@/handlers/imgix';
 import Alert from '@/components/alerts/Alert';
 import * as lang from '@/languages';
@@ -541,6 +541,8 @@ export async function onSessionProposal(proposal: WalletKitTypes.SessionProposal
                 reason: 'INVALID_SESSION_SETTLE_REQUEST',
               });
 
+              analyticsV2.track(analyticsV2.event.wcRequestFailed, { type: `invalid namespaces`, reason: namespaces.error.message });
+
               showErrorSheet({
                 title: lang.t(T.errors.generic_title),
                 body: `${lang.t(T.errors.namespaces_invalid)} \n \n ${namespaces.error.message}`,
@@ -650,6 +652,11 @@ export async function onSessionRequest(event: SignClientTypes.EventArguments['se
           message,
         });
 
+        analyticsV2.track(analyticsV2.event.wcRequestFailed, {
+          type: 'session_request',
+          reason: 'session_request exited, signing request had no address and/or messsage',
+        });
+
         await client.respondSessionRequest({
           topic,
           response: formatJsonRpcError(id, `Invalid RPC params`),
@@ -680,6 +687,11 @@ export async function onSessionRequest(event: SignClientTypes.EventArguments['se
 
         const errorMessageBody = isReadOnly ? lang.t(T.errors.read_only_wallet_on_signing_method) : lang.t(T.errors.generic_error);
 
+        analyticsV2.track(analyticsV2.event.wcRequestFailed, {
+          type: 'read only wallet',
+          reason: 'session_request exited, selectedWallet was falsy or read only',
+        });
+
         await client.respondSessionRequest({
           topic,
           response: formatJsonRpcError(id, `Wallet is read-only`),
@@ -703,6 +715,8 @@ export async function onSessionRequest(event: SignClientTypes.EventArguments['se
     if (!session) {
       logger.error(new RainbowError(`[walletConnect]: session_request topic was not found`));
 
+      analyticsV2.track(analyticsV2.event.wcRequestFailed, { type: 'session_request', reason: 'session_request topic was not found' });
+
       await client.respondSessionRequest({
         topic,
         response: formatJsonRpcError(id, `Session not found`),
@@ -768,6 +782,12 @@ export async function onSessionRequest(event: SignClientTypes.EventArguments['se
       method,
     });
 
+    analyticsV2.track(analyticsV2.event.wcRequestFailed, {
+      type: `method not supported`,
+      reason: 'received unsupported session_request RPC method',
+      method: method,
+    });
+
     try {
       await client.respondSessionRequest({
         topic,