[Analytics] Unify client analytics (#2224)

Co-authored-by: ikethirdweb <[email protected]>

.changeset/lemon-numbers-knock.md

@@ -0,0 +1,10 @@
+---
+"@thirdweb-dev/unity-js-bridge": patch
+"@thirdweb-dev/react-native": patch
+"@thirdweb-dev/storage": patch
+"@thirdweb-dev/wallets": patch
+"@thirdweb-dev/react": patch
+"@thirdweb-dev/sdk": patch
+---
+
+Adds correct reporing headers

.changeset/silly-dolphins-fly.md

@@ -0,0 +1,7 @@
+---
+"@thirdweb-dev/unity-js-bridge": patch
+"@thirdweb-dev/react-native": patch
+"@thirdweb-dev/react": patch
+---
+
+Adds global sdk vars

packages/react-native/src/core/storage/uploader.ts

@@ -5,8 +5,7 @@ import {
   TW_UPLOAD_SERVER_URL,
 } from "@thirdweb-dev/storage";
 import { IpfsUploaderOptions, UploadDataValue } from "./types";
-import { appBundleId, packageVersion } from "../../evm/utils/version";
-import { BUNDLE_ID_HEADER } from "../../evm/constants/headers";
+import { getAnalyticsHeaders, setAnalyticsHeaders } from "./utils";
 
 const METADATA_NAME = "Storage React Native SDK";
 
@@ -38,9 +37,6 @@ export class IpfsUploader implements IStorageUploader<IpfsUploadBatchOptions> {
       keyvalues: { ...options?.metadata },
     };
 
-    const { version, name: packageName } = packageVersion;
-    const platform = "react-native";
-
     if ("uri" in data[0] && "type" in data[0] && "name" in data[0]) {
       // then it's an array of files
       return new Promise(async (resolve, reject) => {
@@ -140,14 +136,11 @@ export class IpfsUploader implements IStorageUploader<IpfsUploadBatchOptions> {
         });
 
         xhr.open("POST", `${TW_UPLOAD_SERVER_URL}/ipfs/upload`);
-        xhr.setRequestHeader(BUNDLE_ID_HEADER, appBundleId || ""); // only empty on web
         if (this.clientId) {
           xhr.setRequestHeader("x-client-id", this.clientId);
         }
 
-        xhr.setRequestHeader("x-sdk-version", version);
-        xhr.setRequestHeader("x-sdk-name", packageName);
-        xhr.setRequestHeader("x-sdk-platform", platform);
+        setAnalyticsHeaders(xhr);
 
         xhr.send(form);
       });
@@ -165,12 +158,9 @@ export class IpfsUploader implements IStorageUploader<IpfsUploadBatchOptions> {
             {
               method: "POST",
               headers: {
-                [BUNDLE_ID_HEADER]: appBundleId || "", // only empty on web
                 ...(this.clientId ? { "x-client-id": this.clientId } : {}),
                 "Content-Type": "application/json",
-                "x-sdk-version": version,
-                "x-sdk-name": packageName,
-                "x-sdk-platform": platform,
+                ...getAnalyticsHeaders(),
               },
               body: fetchBody,
             },

packages/react-native/src/core/storage/utils.ts

@@ -1,4 +1,6 @@
 import { DEFAULT_GATEWAY_URLS, GatewayUrls } from "@thirdweb-dev/storage";
+import { Platform } from "react-native";
+import { appBundleId, packageVersion } from "../../evm/utils/version";
 
 /**
  * @internal
@@ -32,3 +34,51 @@ export function prepareGatewayUrls(
 
   return allGatewayUrls;
 }
+
+export function setAnalyticsHeaders(xhr: XMLHttpRequest) {
+  const globals = getAnalyticsGlobals();
+  xhr.setRequestHeader("x-sdk-version", globals.x_sdk_version);
+  xhr.setRequestHeader("x-sdk-os", globals.x_sdk_os);
+  xhr.setRequestHeader("x-sdk-name", globals.x_sdk_name);
+  xhr.setRequestHeader("x-sdk-platform", globals.x_sdk_platform);
+  xhr.setRequestHeader("x-bundle-id", globals.app_bundle_id);
+}
+
+export function getAnalyticsHeaders() {
+  const globals = getAnalyticsGlobals();
+  return {
+    "x-sdk-version": globals.x_sdk_version,
+    "x-sdk-os": globals.x_sdk_os,
+    "x-sdk-name": globals.x_sdk_name,
+    "x-sdk-platform": globals.x_sdk_platform,
+    "x-bundle-id": globals.app_bundle_id,
+  };
+}
+
+export function getAnalyticsGlobals() {
+  if (typeof globalThis === "undefined") {
+    return {
+      x_sdk_name: packageVersion.name,
+      x_sdk_platform: "mobile",
+      x_sdk_version: packageVersion.version,
+      x_sdk_os: Platform.OS,
+      app_bundle_id: appBundleId,
+    };
+  }
+
+  if ((globalThis as any).X_SDK_NAME === undefined) {
+    (globalThis as any).X_SDK_NAME = packageVersion.name;
+    (globalThis as any).X_SDK_PLATFORM = "mobile";
+    (globalThis as any).X_SDK_VERSION = packageVersion.version;
+    (globalThis as any).X_SDK_OS = Platform.OS;
+    (globalThis as any).APP_BUNDLE_ID = appBundleId;
+  }
+
+  return {
+    x_sdk_name: (globalThis as any).X_SDK_NAME,
+    x_sdk_platform: (globalThis as any).X_SDK_PLATFORM,
+    x_sdk_version: (globalThis as any).X_SDK_VERSION,
+    x_sdk_os: (globalThis as any).X_SDK_OS,
+    app_bundle_id: (globalThis as any).APP_BUNDLE_ID,
+  };
+}

packages/react-native/src/evm/providers/thirdweb-provider.tsx

@@ -17,6 +17,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { walletIds } from "@thirdweb-dev/wallets";
 import { ThirdwebStorage } from "../../core/storage/storage";
 import type { Locale } from "../i18n/types";
+import { getAnalyticsGlobals } from "../../core/storage/utils";
 
 export interface ThirdwebProviderProps<TChains extends Chain[]>
   extends Omit<
@@ -148,6 +149,8 @@ export const ThirdwebProvider = <TChains extends Chain[] = DefaultChains>(
     ...restProps
   } = props;
 
+  getAnalyticsGlobals();
+
   const coinbaseWalletObj = supportedWallets.find(
     (w) => w.id === walletIds.coinbase,
   );

packages/react-native/src/evm/wallets/connectors/embedded-wallet/embedded/auth.ts

@@ -41,12 +41,14 @@ import {
 } from "../types";
 import { InAppBrowser } from "react-native-inappbrowser-reborn";
 import { createErrorMessage } from "./helpers/errors";
-import {
-  appBundleId,
-  reactNativePackageVersion,
-} from "../../../../utils/version";
-import { BUNDLE_ID_HEADER } from "../../../../constants/headers";
 import { ANALYTICS } from "./helpers/analytics";
+import { getAnalyticsHeaders } from "../../../../../core/storage/utils";
+
+const HEADERS = {
+  [EWS_VERSION_HEADER]: (globalThis as any).X_SDK_VERSION,
+  [THIRDWEB_SESSION_NONCE_HEADER]: ANALYTICS.nonce,
+  ...getAnalyticsHeaders(),
+};
 
 export async function sendVerificationEmail(options: {
   email: string;
@@ -196,9 +198,7 @@ export async function socialLogin(oauthOptions: OauthOption, clientId: string) {
 
   const resp = await fetch(headlessLoginLinkWithParams, {
     headers: {
-      [EWS_VERSION_HEADER]: reactNativePackageVersion,
-      [BUNDLE_ID_HEADER]: appBundleId,
-      [THIRDWEB_SESSION_NONCE_HEADER]: ANALYTICS.nonce,
+      ...HEADERS,
     },
   });
 
@@ -279,9 +279,7 @@ export async function customJwt(authOptions: AuthOptions, clientId: string) {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      [EWS_VERSION_HEADER]: reactNativePackageVersion,
-      [BUNDLE_ID_HEADER]: appBundleId,
-      [THIRDWEB_SESSION_NONCE_HEADER]: ANALYTICS.nonce,
+      ...HEADERS,
     },
     body: JSON.stringify({
       jwt: jwt,
@@ -329,9 +327,7 @@ export async function authEndpoint(
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      [EWS_VERSION_HEADER]: reactNativePackageVersion,
-      [BUNDLE_ID_HEADER]: appBundleId,
-      [THIRDWEB_SESSION_NONCE_HEADER]: ANALYTICS.nonce,
+      ...HEADERS,
     },
     body: JSON.stringify({
       payload: payload,

packages/react-native/src/evm/wallets/connectors/embedded-wallet/embedded/helpers/api/fetchers.ts

@@ -20,20 +20,17 @@ import {
   VerifiedTokenResponse,
 } from "../../../types";
 import { createErrorMessage } from "../errors";
-import {
-  appBundleId,
-  reactNativePackageVersion,
-} from "../../../../../../utils/version";
-import { BUNDLE_ID_HEADER } from "../../../../../../constants/headers";
 import { ANALYTICS } from "../analytics";
+import { getAnalyticsHeaders } from "../../../../../../../core/storage/utils";
 
 const EMBEDDED_WALLET_TOKEN_HEADER = "embedded-wallet-token";
 const PAPER_CLIENT_ID_HEADER = "x-thirdweb-client-id";
+
 const HEADERS = {
   "Content-Type": "application/json",
-  [BUNDLE_ID_HEADER]: appBundleId,
-  [EWS_VERSION_HEADER]: reactNativePackageVersion,
+  [EWS_VERSION_HEADER]: (globalThis as any).X_SDK_VERSION,
   [THIRDWEB_SESSION_NONCE_HEADER]: ANALYTICS.nonce,
+  ...getAnalyticsHeaders(),
 };
 
 export const verifyClientId = async (clientId: string) => {
@@ -68,19 +65,15 @@ export const authFetchEmbeddedWalletUser = async (
         Authorization: `Bearer ${EMBEDDED_WALLET_TOKEN_HEADER}:${
           authTokenClient || ""
         }`,
-        [BUNDLE_ID_HEADER]: appBundleId,
         [PAPER_CLIENT_ID_HEADER]: clientId,
-        [EWS_VERSION_HEADER]: reactNativePackageVersion,
-        [THIRDWEB_SESSION_NONCE_HEADER]: ANALYTICS.nonce,
+        ...HEADERS,
       }
     : {
         Authorization: `Bearer ${EMBEDDED_WALLET_TOKEN_HEADER}:${
           authTokenClient || ""
         }`,
-        [BUNDLE_ID_HEADER]: appBundleId,
         [PAPER_CLIENT_ID_HEADER]: clientId,
-        [EWS_VERSION_HEADER]: reactNativePackageVersion,
-        [THIRDWEB_SESSION_NONCE_HEADER]: ANALYTICS.nonce,
+        ...HEADERS,
       };
   return fetch(url, params);
 };

packages/react-native/src/index.ts

@@ -1,8 +1 @@
-import { isGlobalThisPresent } from "./evm/utils/global";
-import { appBundleId } from "./evm/utils/version";
-
 export * from "./evm";
-
-if (isGlobalThisPresent()) {
-  (globalThis as any).APP_BUNDLE_ID = appBundleId;
-}

packages/react/src/evm/providers/thirdweb-provider.tsx

@@ -16,6 +16,7 @@ import { en } from "../locales/en";
 import { ThirdwebLocaleContext } from "./locale-provider";
 import { walletIds } from "@thirdweb-dev/wallets";
 import { ThirdwebLocale } from "../locales/types";
+import { getAnalyticsGlobals } from "../utils/headers";
 
 export interface ThirdwebProviderProps<TChains extends Chain[]>
   extends Omit<
@@ -479,6 +480,8 @@ export const ThirdwebProvider = <TChains extends Chain[] = DefaultChains>(
     ...restProps
   } = props;
 
+  getAnalyticsGlobals();
+
   const wallets: WalletConfig[] = supportedWallets || defaultWallets;
   const theme = _theme || "dark";
 

packages/react/src/evm/utils/headers.ts

@@ -0,0 +1,30 @@
+import packageJson from "../../../package.json";
+import { detectOS } from "./isMobile";
+
+export function getAnalyticsGlobals() {
+  if (typeof globalThis === "undefined") {
+    return {
+      x_sdk_name: packageJson.name,
+      x_sdk_platform: "browser",
+      x_sdk_version: packageJson.version,
+      x_sdk_os: detectOS(),
+      app_bundle_id: undefined,
+    };
+  }
+
+  if ((globalThis as any).X_SDK_NAME === undefined) {
+    (globalThis as any).X_SDK_NAME = packageJson.name;
+    (globalThis as any).X_SDK_PLATFORM = "browser";
+    (globalThis as any).X_SDK_VERSION = packageJson.version;
+    (globalThis as any).X_SDK_OS = detectOS();
+    (globalThis as any).APP_BUNDLE_ID = undefined;
+  }
+
+  return {
+    x_sdk_name: (globalThis as any).X_SDK_NAME,
+    x_sdk_platform: (globalThis as any).X_SDK_PLATFORM,
+    x_sdk_version: (globalThis as any).X_SDK_VERSION,
+    x_sdk_os: (globalThis as any).X_SDK_OS,
+    app_bundle_id: (globalThis as any).APP_BUNDLE_ID,
+  };
+}

packages/react/src/evm/utils/isMobile.ts

@@ -41,7 +41,7 @@ export function isIOS(): boolean {
 /**
  * @internal
  */
-function detectOS() {
+export function detectOS() {
   const env = detectEnv();
   return env?.os ? env.os : undefined;
 }