[Analytics] Unify client analytics

.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,7 +5,6 @@ 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";
 
 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,24 @@ 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
+        xhr.setRequestHeader(
+          BUNDLE_ID_HEADER,
+          (globalThis as any).APP_BUNDLE_ID,
+        ); // 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);
+        xhr.setRequestHeader(
+          "x-sdk-version",
+          (globalThis as any).X_SDK_VERSION,
+        );
+        xhr.setRequestHeader("x-sdk-os", (globalThis as any).X_SDK_OS);
+        xhr.setRequestHeader("x-sdk-name", (globalThis as any).X_SDK_NAME);
+        xhr.setRequestHeader(
+          "x-sdk-platform",
+          (globalThis as any).X_SDK_PLATFORM,
+        );
 
         xhr.send(form);
       });
@@ -165,12 +171,13 @@ export class IpfsUploader implements IStorageUploader<IpfsUploadBatchOptions> {
             {
               method: "POST",
               headers: {
-                [BUNDLE_ID_HEADER]: appBundleId || "", // only empty on web
+                [BUNDLE_ID_HEADER]: (globalThis as any).APP_BUNDLE_ID,
                 ...(this.clientId ? { "x-client-id": this.clientId } : {}),
                 "Content-Type": "application/json",
-                "x-sdk-version": version,
-                "x-sdk-name": packageName,
-                "x-sdk-platform": platform,
+                "x-sdk-version": (globalThis as any).X_SDK_VERSION,
+                "x-sdk-name": (globalThis as any).X_SDK_NAME,
+                "x-sdk-platform": (globalThis as any).X_SDK_PLATFORM,
+                "x-sdk-os": (globalThis as any).X_SDK_OS,
               },
               body: fetchBody,
             },

packages/react-native/src/evm/constants/headers.ts

@@ -1 +1,6 @@
 export const BUNDLE_ID_HEADER = "x-bundle-id";
+
+export const X_SDK_VERSION_HEADER = "x-sdk-version";
+export const X_SDK_NAME_HEADER = "x-sdk-name";
+export const X_SDK_PLATFORM_HEADER = "x-sdk-platform";
+export const X_SDK_OS_HEADER = "x-sdk-os";

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

@@ -17,6 +17,8 @@ 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 { appBundleId, packageVersion } from "../utils/version";
+import { Platform } from "react-native";
 
 export interface ThirdwebProviderProps<TChains extends Chain[]>
   extends Omit<
@@ -148,6 +150,14 @@ export const ThirdwebProvider = <TChains extends Chain[] = DefaultChains>(
     ...restProps
   } = props;
 
+  if (typeof globalThis !== "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;
+  }
+
   const coinbaseWalletObj = supportedWallets.find(
     (w) => w.id === walletIds.coinbase,
   );

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

@@ -42,12 +42,24 @@ import {
 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";
+  BUNDLE_ID_HEADER,
+  X_SDK_NAME_HEADER,
+  X_SDK_OS_HEADER,
+  X_SDK_PLATFORM_HEADER,
+  X_SDK_VERSION_HEADER,
+} from "../../../../constants/headers";
 import { ANALYTICS } from "./helpers/analytics";
 
+const HEADERS = {
+  [EWS_VERSION_HEADER]: (globalThis as any).X_SDK_VERSION,
+  [BUNDLE_ID_HEADER]: (globalThis as any).APP_BUNDLE_ID,
+  [THIRDWEB_SESSION_NONCE_HEADER]: ANALYTICS.nonce,
+  [X_SDK_NAME_HEADER]: (globalThis as any).X_SDK_NAME,
+  [X_SDK_OS_HEADER]: (globalThis as any).X_SDK_OS,
+  [X_SDK_PLATFORM_HEADER]: (globalThis as any).X_SDK_PLATFORM,
+  [X_SDK_VERSION_HEADER]: (globalThis as any).X_SDK_VERSION,
+};
+
 export async function sendVerificationEmail(options: {
   email: string;
   clientId: string;
@@ -196,9 +208,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 +289,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 +337,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

@@ -21,19 +21,26 @@ import {
 } from "../../../types";
 import { createErrorMessage } from "../errors";
 import {
-  appBundleId,
-  reactNativePackageVersion,
-} from "../../../../../../utils/version";
-import { BUNDLE_ID_HEADER } from "../../../../../../constants/headers";
+  BUNDLE_ID_HEADER,
+  X_SDK_NAME_HEADER,
+  X_SDK_OS_HEADER,
+  X_SDK_PLATFORM_HEADER,
+  X_SDK_VERSION_HEADER,
+} from "../../../../../../constants/headers";
 import { ANALYTICS } from "../analytics";
 
 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,
+  [BUNDLE_ID_HEADER]: (globalThis as any).APP_BUNDLE_ID,
   [THIRDWEB_SESSION_NONCE_HEADER]: ANALYTICS.nonce,
+  [X_SDK_NAME_HEADER]: (globalThis as any).X_SDK_NAME,
+  [X_SDK_OS_HEADER]: (globalThis as any).X_SDK_OS,
+  [X_SDK_PLATFORM_HEADER]: (globalThis as any).X_SDK_PLATFORM,
+  [X_SDK_VERSION_HEADER]: (globalThis as any).X_SDK_VERSION,
 };
 
 export const verifyClientId = async (clientId: string) => {
@@ -68,19 +75,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,8 @@ import { en } from "../locales/en";
 import { ThirdwebLocaleContext } from "./locale-provider";
 import { walletIds } from "@thirdweb-dev/wallets";
 import { ThirdwebLocale } from "../locales/types";
+import packageJson from "../../../package.json";
+import { detectOS } from "../utils/isMobile";
 
 export interface ThirdwebProviderProps<TChains extends Chain[]>
   extends Omit<
@@ -479,6 +481,13 @@ export const ThirdwebProvider = <TChains extends Chain[] = DefaultChains>(
     ...restProps
   } = props;
 
+  if (typeof globalThis !== "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();
+  }
+
   const wallets: WalletConfig[] = supportedWallets || defaultWallets;
   const theme = _theme || "dark";
 

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;
 }