feat: allow tracking app initiating wallet flow, closes #2904

src/app/common/hooks/analytics/use-analytics.ts

@@ -7,6 +7,7 @@ import {
 } from '@segment/analytics-next/dist/types/core/arguments-resolver';
 
 import { IS_TEST_ENV } from '@shared/environment';
+import { flow, referringAppDomain } from '@shared/initial-params';
 import { logger } from '@shared/logger';
 import { analytics } from '@shared/utils/analytics';
 
@@ -38,6 +39,8 @@ export function useAnalytics() {
       route: location.pathname,
       version: VERSION,
       walletType,
+      ...(flow && { flow }),
+      ...(referringAppDomain && { referringAppDomain }),
     };
 
     const defaultOptions = {

src/app/common/hooks/auth/use-auth-request-params.ts

@@ -37,6 +37,8 @@ export function useAuthRequestParams() {
     const authRequest = params.get('authRequest');
     const authDetails = parseAuthRequestValues(authRequest, origin);
 
+    console.log({ authRequest, authDetails, origin, tabId });
+
     return { origin, tabId, authRequest, authDetails };
   }, [origin, params, tabId]);
 }

src/app/index.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom';
 
+import '@shared/initial-params';
 import { InternalMethods } from '@shared/message-types';
 import { initSentry } from '@shared/utils/analytics';
 import { warnUsersAboutDevToolsDangers } from '@shared/utils/dev-tools-warning-log';

src/app/routes/app-routes.tsx

@@ -118,9 +118,7 @@ function AppRoutesAfterUserHasConsented() {
           path={RouteUrls.ChooseAccount}
           element={
             <AccountGate>
-              <Suspense fallback={<></>}>
-                <ChooseAccount />
-              </Suspense>
+              <ChooseAccount />
             </AccountGate>
           }
         >

src/app/store/networks/networks.hooks.ts

@@ -68,6 +68,7 @@ export function useRequestNetworkId() {
   return useMemo(() => {
     const coreApiUrl = params.get('coreApiUrl');
     const networkChainId = params.get('networkChainId');
+    console.log({ coreApiUrl, networkChainId });
     return findMatchingNetworkKey({ coreApiUrl, networkChainId, networks });
   }, [networks, params]);
 }

src/app/store/signatures/requests.hooks.ts

@@ -21,6 +21,7 @@ export function useSignatureRequestSearchParams() {
 
     const messageType = searchParams.get('messageType');
 
+    console.log({ requestToken, messageType });
     return {
       tabId: isString(tabId) ? parseInt(tabId, 10) : tabId,
       requestToken,

src/background/background.ts

@@ -10,7 +10,7 @@ import { backupOldWalletSalt } from './backup-old-wallet-salt';
 import { initContextMenuActions } from './init-context-menus';
 import {
   handleLegacyExternalMethodFormat,
-  inferLegacyMessage,
+  isLegacyMessage,
 } from './legacy-external-message-handler';
 import { internalBackgroundMessageHandler } from './message-handler';
 
@@ -48,7 +48,7 @@ chrome.runtime.onConnect.addListener(port =>
       if (!originUrl)
         return logger.error('Message reached background script without a corresponding origin');
 
-      if (inferLegacyMessage(message)) {
+      if (isLegacyMessage(message)) {
         void handleLegacyExternalMethodFormat(message, port);
         return;
       }

src/background/legacy-external-message-handler.ts

@@ -24,7 +24,7 @@ async function openRequestInFullPage(path: string, urlParams: URLSearchParams) {
   });
 }
 
-export function inferLegacyMessage(message: any): message is LegacyMessageFromContentScript {
+export function isLegacyMessage(message: any): message is LegacyMessageFromContentScript {
   // Now that we use a RPC communication style, we can infer
   // legacy message types by presence of an id
   const hasIdProp = 'id' in message;
@@ -40,10 +40,9 @@ function getOriginFromPort(port: chrome.runtime.Port) {
   return port.sender?.origin;
 }
 
-function makeSearchParamsWithDefaults(
-  port: chrome.runtime.Port,
-  otherParams: [string, string][] = []
-) {
+type OtherParams = [string, string][];
+
+function makeSearchParamsWithDefaults(port: chrome.runtime.Port, otherParams: OtherParams = []) {
   const urlParams = new URLSearchParams();
   // All actions must have a corresponding `origin` and `tabId`
   const origin = getOriginFromPort(port);
@@ -102,7 +101,12 @@ export async function handleLegacyExternalMethodFormat(
 
   switch (message.method) {
     case ExternalMethods.authenticationRequest: {
-      const { urlParams, tabId } = makeSearchParamsWithDefaults(port, [['authRequest', payload]]);
+      const otherParams: OtherParams = [
+        ['authRequest', payload],
+        ['flow', ExternalMethods.authenticationRequest],
+      ];
+      if (port.sender?.origin) otherParams.push(['referringAppDomain', port.sender.origin]);
+      const { urlParams, tabId } = makeSearchParamsWithDefaults(port, otherParams);
 
       const { id } = await triggerRequestWindowOpen(RouteUrls.ChooseAccount, urlParams);
       listenForPopupClose({
@@ -115,10 +119,13 @@ export async function handleLegacyExternalMethodFormat(
     }
 
     case ExternalMethods.transactionRequest: {
-      const { urlParams, tabId } = makeSearchParamsWithDefaults(port, [
+      const otherParams: OtherParams = [
         ['request', payload],
         ...getNetworkParamsFromPayload(payload),
-      ]);
+        ['flow', ExternalMethods.transactionRequest],
+      ];
+      if (port.sender?.origin) otherParams.push(['referringAppDomain', port.sender.origin]);
+      const { urlParams, tabId } = makeSearchParamsWithDefaults(port, otherParams);
 
       const { id } = await triggerRequestWindowOpen(RouteUrls.TransactionRequest, urlParams);
       listenForPopupClose({
@@ -131,11 +138,14 @@ export async function handleLegacyExternalMethodFormat(
     }
 
     case ExternalMethods.signatureRequest: {
-      const { urlParams, tabId } = makeSearchParamsWithDefaults(port, [
+      const otherParams: OtherParams = [
         ['request', payload],
         ['messageType', 'utf8'],
         ...getNetworkParamsFromPayload(payload),
-      ]);
+        ['flow', ExternalMethods.signatureRequest],
+      ];
+      if (port.sender?.origin) otherParams.push(['referringAppDomain', port.sender.origin]);
+      const { urlParams, tabId } = makeSearchParamsWithDefaults(port, otherParams);
 
       const { id } = await triggerRequestWindowOpen(RouteUrls.SignatureRequest, urlParams);
       listenForPopupClose({
@@ -148,10 +158,13 @@ export async function handleLegacyExternalMethodFormat(
     }
 
     case ExternalMethods.structuredDataSignatureRequest: {
-      const { urlParams, tabId } = makeSearchParamsWithDefaults(port, [
+      const otherParams: OtherParams = [
         ['request', payload],
         ['messageType', 'structured'],
-      ]);
+        ['flow', ExternalMethods.structuredDataSignatureRequest],
+      ];
+      if (port.sender?.origin) otherParams.push(['referringAppDomain', port.sender.origin]);
+      const { urlParams, tabId } = makeSearchParamsWithDefaults(port, otherParams);
 
       const { id } = await triggerRequestWindowOpen(RouteUrls.SignatureRequest, urlParams);
       listenForPopupClose({

src/shared/initial-params.ts

@@ -0,0 +1,4 @@
+export const initialParams = new URLSearchParams(window.location.href.split('?')[1]);
+
+export const flow = initialParams.get('flow');
+export const referringAppDomain = initialParams.get('referringAppDomain');

src/shared/inpage-types.ts

@@ -8,19 +8,27 @@ export enum DomEventName {
   transactionRequest = 'stacksTransactionRequest',
 }
 
-export interface AuthenticationRequestEventDetails {
+interface BaseDetails {
+  /**
+   * Use to capture the URL of the app that initiated a flow to be used in the
+   * flow's analytics.
+   */
+  referringAppDomain?: string;
+}
+
+export interface AuthenticationRequestEventDetails extends BaseDetails {
   authenticationRequest: string;
 }
 
 export type AuthenticationRequestEvent = CustomEvent<AuthenticationRequestEventDetails>;
 
-export interface SignatureRequestEventDetails {
+export interface SignatureRequestEventDetails extends BaseDetails {
   signatureRequest: string;
 }
 
 export type SignatureRequestEvent = CustomEvent<SignatureRequestEventDetails>;
 
-export interface TransactionRequestEventDetails {
+export interface TransactionRequestEventDetails extends BaseDetails {
   transactionRequest: string;
 }