[Metrics] Add wallet metrics

.gitignore

@@ -43,4 +43,6 @@ vite-plugin-electron.log
 .yarn/
 
 flathub/update-flathub.js
-xyz.hyperplay.HyperPlay
+xyz.hyperplay.HyperPlay
+
+.sdk-comm

package.json

@@ -160,7 +160,7 @@
     "@mantine/carousel": "^6.0.19",
     "@mantine/core": "^6.0.19",
     "@mantine/hooks": "^6.0.19",
-    "@metamask/sdk": "^0.5.3",
+    "@metamask/sdk": "^0.12.0",
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.10.12",
     "@node-steam/vdf": "^2.2.0",
@@ -211,7 +211,9 @@
     "mime": "^3.0.0",
     "mobx": "^6.9.0",
     "mobx-react-lite": "^3.4.0",
+    "patch-package": "^8.0.0",
     "plist": "^3.0.5",
+    "postinstall-postinstall": "^2.1.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
     "react-blockies": "^1.4.1",
@@ -268,6 +270,7 @@
     "flatpak:prepare": "node ./flatpak/prepareFlatpak.js",
     "flatpak:prepare-release": "node ./flatpak/prepareFlatpak.js release",
     "i18n": "i18next",
+    "postinstall": "patch-package",
     "prepare": "husky install",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write ."
@@ -350,7 +353,9 @@
       "electron": true,
       "electron-vite>esbuild": true,
       "playwright": true,
-      "vite>esbuild": true
+      "vite>esbuild": true,
+      "$root$": true,
+      "postinstall-postinstall": true
     }
   }
 }

patches/@metamask+sdk+0.12.0.patch

@@ -0,0 +1,40 @@
+diff --git a/node_modules/@metamask/sdk/dist/browser/es/src/index.d.ts b/node_modules/@metamask/sdk/dist/browser/es/src/index.d.ts
+index 431737f..25e4f92 100644
+--- a/node_modules/@metamask/sdk/dist/browser/es/src/index.d.ts
++++ b/node_modules/@metamask/sdk/dist/browser/es/src/index.d.ts
+@@ -5,15 +5,6 @@ import { MetaMaskSDK, MetaMaskSDKOptions } from './sdk';
+ import { RPC_URLS_MAP } from './services/MetaMaskSDK/InitializerManager/setupReadOnlyRPCProviders';
+ import { PROVIDER_UPDATE_TYPE } from './types/ProviderUpdateType';
+ import type { SDKLoggingOptions } from './types/SDKLoggingOptions';
+-declare global {
+-    interface Window {
+-        ReactNativeWebView?: WebView;
+-        sdkProvider: SDKProvider;
+-        ethereum?: SDKProvider;
+-        extension: unknown;
+-        MSStream: unknown;
+-    }
+-}
+ export { CommunicationLayerPreference, ConnectionStatus, DEFAULT_SERVER_URL, EventType, MessageType, RPC_URLS_MAP, MetaMaskSDK, PROVIDER_UPDATE_TYPE, PlatformType, SDKProvider, };
+ export type { MetaMaskSDKOptions, SDKLoggingOptions, ServiceStatus };
+ export default MetaMaskSDK;
+diff --git a/node_modules/@metamask/sdk/dist/node/es/src/index.d.ts b/node_modules/@metamask/sdk/dist/node/es/src/index.d.ts
+index 431737f..25e4f92 100644
+--- a/node_modules/@metamask/sdk/dist/node/es/src/index.d.ts
++++ b/node_modules/@metamask/sdk/dist/node/es/src/index.d.ts
+@@ -5,15 +5,6 @@ import { MetaMaskSDK, MetaMaskSDKOptions } from './sdk';
+ import { RPC_URLS_MAP } from './services/MetaMaskSDK/InitializerManager/setupReadOnlyRPCProviders';
+ import { PROVIDER_UPDATE_TYPE } from './types/ProviderUpdateType';
+ import type { SDKLoggingOptions } from './types/SDKLoggingOptions';
+-declare global {
+-    interface Window {
+-        ReactNativeWebView?: WebView;
+-        sdkProvider: SDKProvider;
+-        ethereum?: SDKProvider;
+-        extension: unknown;
+-        MSStream: unknown;
+-    }
+-}
+ export { CommunicationLayerPreference, ConnectionStatus, DEFAULT_SERVER_URL, EventType, MessageType, RPC_URLS_MAP, MetaMaskSDK, PROVIDER_UPDATE_TYPE, PlatformType, SDKProvider, };
+ export type { MetaMaskSDKOptions, SDKLoggingOptions, ServiceStatus };
+ export default MetaMaskSDK;

src/backend/metrics/types.ts

@@ -1,5 +1,10 @@
+import {
+  ImportableBrowser,
+  MetaMaskInitMethod
+} from 'backend/hyperplay-extension-helper/ipcHandlers/types'
 import { getPlatformName, getStoreName } from 'backend/utils'
 import { AppPlatforms, InstallPlatform, Runner } from 'common/types'
+import { PROVIDERS } from 'common/types/proxy-types'
 
 export interface MetricsOptIn {
   event: 'Metrics Opt-in'
@@ -39,9 +44,28 @@ export interface OnboardingSkipped {
   sensitiveProperties?: never
 }
 
-export interface OnboardingCompleted {
-  event: 'Onboarding Completed'
-  properties?: never
+export interface OnboardingProviderClicked {
+  event: 'Onboarding Provider Clicked'
+  properties: {
+    provider: PROVIDERS
+  }
+  sensitiveProperties?: never
+}
+
+export interface WalletConnected {
+  event: 'Wallet Connected'
+  properties?: {
+    provider: PROVIDERS
+  }
+  sensitiveProperties?: never
+}
+
+export interface MetaMaskInitialized {
+  event: 'MetaMask Initialized'
+  properties?: {
+    initMethod: MetaMaskInitMethod
+    browser?: ImportableBrowser
+  }
   sensitiveProperties?: never
 }
 
@@ -270,8 +294,10 @@ export type PossibleMetricPayloads =
   | MetricsErrorCorrection
   | GameStoreConnectionStarted
   | OnboardingStarted
+  | OnboardingProviderClicked
   | OnboardingSkipped
-  | OnboardingCompleted
+  | WalletConnected
+  | MetaMaskInitialized
   | GameInstallRequested
   | GameInstallStarted
   | GameInstallSuccess

src/common/typedefs/ipcBridge.d.ts

@@ -65,7 +65,7 @@ interface HyperPlaySyncIPCFunctions {
   providerRequestFailed: ProxiedProviderEventCallback
   loadingScreenReady: () => void
   reloadApp: () => void
-  createNewMetaMaskWallet: () => void
+  createNewMetaMaskWallet: (mmInitMethod: MetaMaskInitMethod) => void
   enableOnEvents: (topic: string) => void
   addHyperPlayShortcut: (gameId: string) => void
   ignoreExitToTray: () => void
@@ -179,13 +179,19 @@ interface HyperPlayAsyncIPCFunctions {
     updateProperties: chrome.tabs.UpdateProperties
   ) => Promise<chrome.tabs.Tab>
   chromeTabsRemove: (tabIds: number | number[]) => Promise<void>
-  //
-  importMetaMask: (dbPath: string | null | undefined) => Promise<boolean>
+  importMetaMask: (
+    mmInitMethod: MetaMaskInitMethod,
+    dbPath?: string | null,
+    browser?: ImportableBrowser
+  ) => Promise<boolean>
   getMetaMaskImportOptions: () => Promise<MetaMaskImportOptions>
   isExtensionInitialized: () => Promise<boolean>
   getTabUrl: () => Promise<string>
   getExtensionId: () => Promise<string>
-  getConnectionUris: (providerSelection: PROVIDERS) => Promise<string>
+  getConnectionUris: (
+    providerSelection: PROVIDERS,
+    isBootstrapping?: boolean
+  ) => Promise<string>
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   providerRequest: (args: RequestArguments) => Promise<any>
   getConnectedProvider: () => Promise<PROVIDERS>

src/common/types.ts

@@ -792,6 +792,11 @@ export type AvailablePlatforms = {
   icon: IconDefinition
 }[]
 
+export type WalletOnboardCloseReason =
+  | 'skipped'
+  | 'connected'
+  | 'requestedMetaMaskConnection'
+
 export type Filter =
   | 'alphabeticalAscending'
   | 'alphabeticalDescending'

src/frontend/App.tsx

@@ -29,6 +29,7 @@ import DownloadToastManager from './components/UI/DownloadToastManager'
 import TopNavBar from './components/UI/TopNavBar'
 import StoreNavHandler from './StoreNavHandler'
 import QaAuthHandler from './QaAuthHandler'
+import { WalletOnboardCloseReason } from 'common/types'
 import { DeviceStateController } from './state/DeviceState'
 import { ENABLE_AMAZON_STORE } from './constants'
 
@@ -111,8 +112,10 @@ function App() {
         <OnboardingStoreController />
         {onboardingStore.isOnboardingOpen && (
           <Onboarding
-            disableOnboarding={() => {
-              window.api.trackEvent({ event: 'Onboarding Skipped' })
+            disableOnboarding={(disableReason: WalletOnboardCloseReason) => {
+              if (disableReason === 'skipped') {
+                window.api.trackEvent({ event: 'Onboarding Skipped' })
+              }
               onboardingStore.closeOnboarding()
             }}
           />

src/frontend/index.tsx

@@ -108,7 +108,7 @@ const container = document.getElementById('root')
 const root = createRoot(container!) // createRoot(container!) if you use TypeScript
 
 root.render(
-  <React.StrictMode>
+  <>
     <StoreController />
     <GlobalState>
       <>
@@ -120,7 +120,7 @@ root.render(
         </I18nextProvider>
       </>
     </GlobalState>
-  </React.StrictMode>
+  </>
 )
 
 // helper function to set the theme class and load custom css if needed

src/frontend/screens/Onboarding/index.tsx

@@ -6,9 +6,10 @@ import Analytics from './analytics'
 import WalletSelection from './walletSelection'
 import { onboardingStore } from 'frontend/helpers/electronStores'
 import classNames from 'classnames'
+import { WalletOnboardCloseReason } from 'common/types'
 
 interface OnboardingProps {
-  disableOnboarding: () => void
+  disableOnboarding: (disableReason: WalletOnboardCloseReason) => void
 }
 
 const Onboarding: React.FC<OnboardingProps> = function (props) {
@@ -27,6 +28,10 @@ const Onboarding: React.FC<OnboardingProps> = function (props) {
   // Track the screen view once each time the view changes
   useEffect(() => {
     window.api.trackScreen('Onboarding', { view: currentScreen })
+
+    if (currentScreen === ONBOARDING_SCREEN.WALLET_SELECTION) {
+      window.api.trackEvent({ event: 'Onboarding Started' })
+    }
   }, [currentScreen])
 
   function getWelcomeElement() {