@quiltt/react 4.5.1 → 5.0.1

package/dist/providers/QuilttAuthProvider-12s-D__FY1Qn.cjs

@@ -0,0 +1,60 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var react$1 = require('@apollo/client/react');
+var core = require('@quiltt/core');
+var index_cjs = require('../hooks/index.cjs');
+var index_cjs$1 = require('../utils/index.cjs');
+
+/**
+ * If a token is provided, will validate the token against the api and then import
+ * it into trusted storage. While this process is happening, the component is put
+ * into a loading state and the children are not rendered to prevent race conditions
+ * from triggering within the transitionary state.
+ */ const QuilttAuthProvider = ({ graphqlClient, token, children })=>{
+    const { session, importSession } = index_cjs.useQuilttSession();
+    const previousSessionRef = react.useRef(session);
+    const previousTokenRef = react.useRef(undefined);
+    const importSessionRef = react.useRef(importSession);
+    // Keep importSession ref up to date
+    react.useEffect(()=>{
+        importSessionRef.current = importSession;
+    }, [
+        importSession
+    ]);
+    // Memoize the client to avoid unnecessary re-renders
+    const apolloClient = react.useMemo(()=>graphqlClient || new core.QuilttClient({
+            cache: new core.InMemoryCache(),
+            versionLink: core.createVersionLink(index_cjs$1.getPlatformInfo())
+        }), [
+        graphqlClient
+    ]);
+    // Import passed in token (only if value has changed)
+    react.useEffect(()=>{
+        if (token && token !== previousTokenRef.current) {
+            importSessionRef.current(token);
+            previousTokenRef.current = token;
+        } else if (!token) {
+            // Reset ref when token becomes undefined to allow re-import of same token later
+            previousTokenRef.current = undefined;
+        }
+    }, [
+        token
+    ]);
+    // Reset Client Store when session changes (using deep comparison)
+    react.useEffect(()=>{
+        if (!index_cjs$1.isDeepEqual(session, previousSessionRef.current)) {
+            apolloClient.resetStore();
+            previousSessionRef.current = session;
+        }
+    }, [
+        session,
+        apolloClient
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(react$1.ApolloProvider, {
+        client: apolloClient,
+        children: children
+    });
+};
+
+exports.QuilttAuthProvider = QuilttAuthProvider;

package/dist/providers/QuilttProviderRender-12s-DtQtubjL.js

@@ -0,0 +1,6 @@
+'use client';
+import { createContext } from 'react';
+
+const QuilttProviderRender = createContext({});
+
+export { QuilttProviderRender as Q };

package/dist/providers/QuilttProviderRender-12s-pvnc98Lj.cjs

@@ -0,0 +1,6 @@
+'use client';
+var react = require('react');
+
+const QuilttProviderRender = react.createContext({});
+
+exports.QuilttProviderRender = QuilttProviderRender;

package/dist/providers/QuilttSettings-12s-BK-0SQME.js

@@ -0,0 +1,6 @@
+'use client';
+import { createContext } from 'react';
+
+const QuilttSettings = createContext({});
+
+export { QuilttSettings as Q };

package/dist/providers/QuilttSettings-12s-cLPT_GLC.cjs

@@ -0,0 +1,6 @@
+'use client';
+var react = require('react');
+
+const QuilttSettings = react.createContext({});
+
+exports.QuilttSettings = QuilttSettings;

package/dist/providers/QuilttSettingsProvider-12s-D7e8dsOE.cjs

@@ -0,0 +1,19 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var QuilttSettings12s = require('./QuilttSettings-12s-cLPT_GLC.cjs');
+
+const QuilttSettingsProvider = ({ clientId, children })=>{
+    // Memoize context value to prevent unnecessary re-renders
+    const contextValue = react.useMemo(()=>({
+            clientId
+        }), [
+        clientId
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(QuilttSettings12s.QuilttSettings.Provider, {
+        value: contextValue,
+        children: children
+    });
+};
+
+exports.QuilttSettingsProvider = QuilttSettingsProvider;

package/dist/{QuilttSettingsProvider-12s-ZcmFmOiZ.js → providers/QuilttSettingsProvider-12s-DND2gPQm.js}

@@ -1,14 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useMemo } from 'react';
 import { Q as QuilttSettings } from './QuilttSettings-12s-BK-0SQME.js';
 
 const QuilttSettingsProvider = ({ clientId, children })=>{
-    const [_clientId] = useState(clientId);
+    // Memoize context value to prevent unnecessary re-renders
+    const contextValue = useMemo(()=>({
+            clientId
+        }), [
+        clientId
+    ]);
     return /*#__PURE__*/ jsx(QuilttSettings.Provider, {
-        value: {
-            clientId: _clientId
-        },
+        value: contextValue,
         children: children
     });
 };

package/dist/providers/index.cjs

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var QuilttAuthProvider12s = require('./QuilttAuthProvider-12s-D__FY1Qn.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var QuilttProviderRender12s = require('./QuilttProviderRender-12s-pvnc98Lj.cjs');
+var QuilttSettingsProvider12s = require('./QuilttSettingsProvider-12s-D7e8dsOE.cjs');
+
+const QuilttProvider = ({ clientId, graphqlClient, token, children })=>{
+    // Set a context flag that SDK components can check to warn about potential anti-patterns.
+    // LIMITATION: This flags ALL descendants due to React context propagation, not just same-component usage.
+    // Will produce false positives for valid patterns like: <QuilttProvider><MyPage /></QuilttProvider>
+    // where MyPage renders SDK components (which is correct usage).
+    // The flag-based approach is simple but imprecise - a proper solution would require render stack tracking.
+    // Memoize context value to prevent unnecessary re-renders
+    const renderContextValue = react.useMemo(()=>({
+            isRenderingProvider: true
+        }), []);
+    return /*#__PURE__*/ jsxRuntime.jsx(QuilttProviderRender12s.QuilttProviderRender.Provider, {
+        value: renderContextValue,
+        children: /*#__PURE__*/ jsxRuntime.jsx(QuilttSettingsProvider12s.QuilttSettingsProvider, {
+            clientId: clientId,
+            children: /*#__PURE__*/ jsxRuntime.jsx(QuilttAuthProvider12s.QuilttAuthProvider, {
+                token: token,
+                graphqlClient: graphqlClient,
+                children: children
+            })
+        })
+    });
+};
+
+exports.QuilttAuthProvider = QuilttAuthProvider12s.QuilttAuthProvider;
+exports.QuilttSettingsProvider = QuilttSettingsProvider12s.QuilttSettingsProvider;
+exports.QuilttProvider = QuilttProvider;

package/dist/providers/index.d.ts

@@ -0,0 +1,28 @@
+import { FC, PropsWithChildren } from 'react';
+import { QuilttClient } from '@quiltt/core';
+
+type QuilttAuthProviderProps = PropsWithChildren & {
+    /** A custom QuilttClient instance to use instead of the default */
+    graphqlClient?: QuilttClient;
+    /** The Quiltt Session token obtained from the server */
+    token?: string;
+};
+/**
+ * If a token is provided, will validate the token against the api and then import
+ * it into trusted storage. While this process is happening, the component is put
+ * into a loading state and the children are not rendered to prevent race conditions
+ * from triggering within the transitionary state.
+ */
+declare const QuilttAuthProvider: FC<QuilttAuthProviderProps>;
+
+type QuilttSettingsProviderProps = PropsWithChildren & {
+    /** The Client ID to use for the passwordless Auth API */
+    clientId?: string;
+};
+declare const QuilttSettingsProvider: FC<QuilttSettingsProviderProps>;
+
+type QuilttProviderProps = QuilttSettingsProviderProps & QuilttAuthProviderProps;
+declare const QuilttProvider: FC<QuilttProviderProps>;
+
+export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider };
+export type { QuilttAuthProviderProps, QuilttSettingsProviderProps };

package/dist/providers/index.js

@@ -0,0 +1,30 @@
+import { Q as QuilttAuthProvider } from './QuilttAuthProvider-12s-CDgQbarX.js';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Q as QuilttProviderRender } from './QuilttProviderRender-12s-DtQtubjL.js';
+import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-12s-DND2gPQm.js';
+
+const QuilttProvider = ({ clientId, graphqlClient, token, children })=>{
+    // Set a context flag that SDK components can check to warn about potential anti-patterns.
+    // LIMITATION: This flags ALL descendants due to React context propagation, not just same-component usage.
+    // Will produce false positives for valid patterns like: <QuilttProvider><MyPage /></QuilttProvider>
+    // where MyPage renders SDK components (which is correct usage).
+    // The flag-based approach is simple but imprecise - a proper solution would require render stack tracking.
+    // Memoize context value to prevent unnecessary re-renders
+    const renderContextValue = useMemo(()=>({
+            isRenderingProvider: true
+        }), []);
+    return /*#__PURE__*/ jsx(QuilttProviderRender.Provider, {
+        value: renderContextValue,
+        children: /*#__PURE__*/ jsx(QuilttSettingsProvider, {
+            clientId: clientId,
+            children: /*#__PURE__*/ jsx(QuilttAuthProvider, {
+                token: token,
+                graphqlClient: graphqlClient,
+                children: children
+            })
+        })
+    });
+};
+
+export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider };

package/dist/utils/index.cjs

@@ -0,0 +1,89 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var core = require('@quiltt/core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * Performs a deep equality comparison between two values
+ *
+ * This function recursively compares all properties to determine if they are equal.
+ *
+ * @example
+ * ```ts
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
+ * ```
+ */ const isDeepEqual = (obj1, obj2)=>{
+    // Handle primitive types and null/undefined
+    if (obj1 === obj2) return true;
+    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
+    // Handle special object types
+    if (obj1 instanceof Date && obj2 instanceof Date) {
+        return obj1.getTime() === obj2.getTime();
+    }
+    if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
+        return obj1.toString() === obj2.toString();
+    }
+    if (obj1 instanceof Map && obj2 instanceof Map) {
+        if (obj1.size !== obj2.size) return false;
+        for (const [key, value] of obj1){
+            if (!obj2.has(key) || !isDeepEqual(value, obj2.get(key))) return false;
+        }
+        return true;
+    }
+    if (obj1 instanceof Set && obj2 instanceof Set) {
+        if (obj1.size !== obj2.size) return false;
+        const arr2 = Array.from(obj2);
+        for (const item of obj1){
+            if (!arr2.some((value)=>isDeepEqual(item, value))) return false;
+        }
+        return true;
+    }
+    // Handle arrays
+    if (Array.isArray(obj1) && Array.isArray(obj2)) {
+        if (obj1.length !== obj2.length) return false;
+        return obj1.every((value, index)=>isDeepEqual(value, obj2[index]));
+    }
+    // If one is array and other isn't, they're not equal
+    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    return keys1.every((key)=>{
+        return Object.hasOwn(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
+    });
+};
+
+/**
+ * Gets the React version from the runtime
+ */ const getReactVersion = ()=>{
+    return React__default.default.version || 'unknown';
+};
+/**
+ * Generates platform information string for React web
+ * Format: React/<version>; <browser>/<version>
+ */ const getPlatformInfo = ()=>{
+    const reactVersion = getReactVersion();
+    const browserInfo = core.getBrowserInfo();
+    return `React/${reactVersion}; ${browserInfo}`;
+};
+/**
+ * Generates User-Agent string for React SDK
+ * Format: Quiltt/<sdk-version> (React/<react-version>; <browser>/<version>)
+ */ const getUserAgent = (sdkVersion)=>{
+    const platformInfo = getPlatformInfo();
+    return core.getUserAgent(sdkVersion, platformInfo);
+};
+
+Object.defineProperty(exports, "getBrowserInfo", {
+  enumerable: true,
+  get: function () { return core.getBrowserInfo; }
+});
+exports.getPlatformInfo = getPlatformInfo;
+exports.getReactVersion = getReactVersion;
+exports.getUserAgent = getUserAgent;
+exports.isDeepEqual = isDeepEqual;

package/dist/utils/index.d.ts

@@ -0,0 +1,31 @@
+export { getBrowserInfo } from '@quiltt/core';
+
+/**
+ * Performs a deep equality comparison between two values
+ *
+ * This function recursively compares all properties to determine if they are equal.
+ *
+ * @example
+ * ```ts
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
+ * ```
+ */
+declare const isDeepEqual: (obj1: unknown, obj2: unknown) => boolean;
+
+/**
+ * Gets the React version from the runtime
+ */
+declare const getReactVersion: () => string;
+/**
+ * Generates platform information string for React web
+ * Format: React/<version>; <browser>/<version>
+ */
+declare const getPlatformInfo: () => string;
+/**
+ * Generates User-Agent string for React SDK
+ * Format: Quiltt/<sdk-version> (React/<react-version>; <browser>/<version>)
+ */
+declare const getUserAgent: (sdkVersion: string) => string;
+
+export { getPlatformInfo, getReactVersion, getUserAgent, isDeepEqual };

package/dist/utils/index.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { getBrowserInfo, getUserAgent as getUserAgent$1 } from '@quiltt/core';
+export { getBrowserInfo } from '@quiltt/core';
+
+/**
+ * Performs a deep equality comparison between two values
+ *
+ * This function recursively compares all properties to determine if they are equal.
+ *
+ * @example
+ * ```ts
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
+ * ```
+ */ const isDeepEqual = (obj1, obj2)=>{
+    // Handle primitive types and null/undefined
+    if (obj1 === obj2) return true;
+    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
+    // Handle special object types
+    if (obj1 instanceof Date && obj2 instanceof Date) {
+        return obj1.getTime() === obj2.getTime();
+    }
+    if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
+        return obj1.toString() === obj2.toString();
+    }
+    if (obj1 instanceof Map && obj2 instanceof Map) {
+        if (obj1.size !== obj2.size) return false;
+        for (const [key, value] of obj1){
+            if (!obj2.has(key) || !isDeepEqual(value, obj2.get(key))) return false;
+        }
+        return true;
+    }
+    if (obj1 instanceof Set && obj2 instanceof Set) {
+        if (obj1.size !== obj2.size) return false;
+        const arr2 = Array.from(obj2);
+        for (const item of obj1){
+            if (!arr2.some((value)=>isDeepEqual(item, value))) return false;
+        }
+        return true;
+    }
+    // Handle arrays
+    if (Array.isArray(obj1) && Array.isArray(obj2)) {
+        if (obj1.length !== obj2.length) return false;
+        return obj1.every((value, index)=>isDeepEqual(value, obj2[index]));
+    }
+    // If one is array and other isn't, they're not equal
+    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    return keys1.every((key)=>{
+        return Object.hasOwn(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
+    });
+};
+
+/**
+ * Gets the React version from the runtime
+ */ const getReactVersion = ()=>{
+    return React.version || 'unknown';
+};
+/**
+ * Generates platform information string for React web
+ * Format: React/<version>; <browser>/<version>
+ */ const getPlatformInfo = ()=>{
+    const reactVersion = getReactVersion();
+    const browserInfo = getBrowserInfo();
+    return `React/${reactVersion}; ${browserInfo}`;
+};
+/**
+ * Generates User-Agent string for React SDK
+ * Format: Quiltt/<sdk-version> (React/<react-version>; <browser>/<version>)
+ */ const getUserAgent = (sdkVersion)=>{
+    const platformInfo = getPlatformInfo();
+    return getUserAgent$1(sdkVersion, platformInfo);
+};
+
+export { getPlatformInfo, getReactVersion, getUserAgent, isDeepEqual };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "4.5.1",
+  "version": "5.0.1",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -22,8 +22,34 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "require": "./dist/hooks/index.cjs",
+      "import": "./dist/hooks/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "require": "./dist/components/index.cjs",
+      "import": "./dist/components/index.js"
+    },
+    "./providers": {
+      "types": "./dist/providers/index.d.ts",
+      "require": "./dist/providers/index.cjs",
+      "import": "./dist/providers/index.js"
+    },
+    "./contexts": {
+      "types": "./dist/contexts/index.d.ts",
+      "require": "./dist/contexts/index.cjs",
+      "import": "./dist/contexts/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "require": "./dist/utils/index.cjs",
+      "import": "./dist/utils/index.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -34,18 +60,18 @@
   ],
   "main": "dist/index.js",
   "dependencies": {
-    "@apollo/client": "^3.14.0",
-    "use-debounce": "^10.0.4",
-    "@quiltt/core": "4.5.1"
+    "@apollo/client": "^4.1.3",
+    "use-debounce": "^10.1.0",
+    "@quiltt/core": "5.0.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.8",
-    "@types/node": "22.19.2",
-    "@types/react": "19.2.7",
+    "@biomejs/biome": "2.3.14",
+    "@types/node": "24.10.10",
+    "@types/react": "19.2.11",
     "@types/react-dom": "19.2.3",
-    "bunchee": "6.6.2",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "bunchee": "6.9.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "rimraf": "6.1.2",
     "typescript": "5.9.3"
   },

package/src/hooks/useQuilttClient.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useApolloClient } from '@apollo/client/react/hooks/useApolloClient.js'
+import { useApolloClient } from '@apollo/client/react'
 
 export const useQuilttClient = useApolloClient
 

package/src/hooks/useQuilttConnector.ts

@@ -11,7 +11,7 @@ import { cdnBase } from '@quiltt/core'
 
 import { useQuilttSession } from '@/hooks/useQuilttSession'
 import { useScript } from '@/hooks/useScript'
-import { isDeepEqual } from '@/utils/isDeepEqual'
+import { getUserAgent, isDeepEqual } from '@/utils'
 import { version } from '@/version'
 
 declare const Quiltt: ConnectorSDK
@@ -20,7 +20,8 @@ export const useQuilttConnector = (
   connectorId?: string,
   options?: ConnectorSDKConnectorOptions
 ) => {
-  const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
+  const userAgent = getUserAgent(version)
+  const status = useScript(`${cdnBase}/v1/connector.js?agent=${encodeURIComponent(userAgent)}`, {
     nonce: options?.nonce,
   })
 

package/src/hooks/useQuilttInstitutions.ts

@@ -6,7 +6,9 @@ import type { ErrorData, InstitutionsData } from '@quiltt/core'
 import { ConnectorsAPI } from '@quiltt/core'
 import { useDebounce } from 'use-debounce'
 
-import { version } from '../version'
+import { getUserAgent } from '@/utils'
+import { version } from '@/version'
+
 import useSession from './useSession'
 
 export type UseQuilttInstitutions = (
@@ -20,28 +22,11 @@ export type UseQuilttInstitutions = (
 }
 
 export const useQuilttInstitutions: UseQuilttInstitutions = (connectorId, onErrorCallback) => {
-  const agent = useMemo(() => {
-    // Try deprecated navigator.product first (still used in some RN versions)
-    if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-      return `react-native-${version}`
-    }
-
-    // Detect React Native by its unique environment characteristics
-    const isReactNative = !!(
-      // Has window (unlike Node.js)
-      (
-        typeof window !== 'undefined' &&
-        // No document in window (unlike browsers)
-        typeof window.document === 'undefined' &&
-        // Has navigator (unlike Node.js)
-        typeof navigator !== 'undefined'
-      )
-    )
-
-    return isReactNative ? `react-native-${version}` : `react-${version}`
-  }, [])
-
-  const connectorsAPI = useMemo(() => new ConnectorsAPI(connectorId, agent), [connectorId, agent])
+  const userAgent = useMemo(() => getUserAgent(version), [])
+  const connectorsAPI = useMemo(
+    () => new ConnectorsAPI(connectorId, userAgent),
+    [connectorId, userAgent]
+  )
   const [session] = useSession()
 
   const [searchTermInput, setSearchTermInput] = useState('')

package/src/hooks/useQuilttResolvable.ts

@@ -5,7 +5,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ErrorData, ResolvableData } from '@quiltt/core'
 import { ConnectorsAPI } from '@quiltt/core'
 
-import { version } from '../version'
+import { getUserAgent } from '@/utils'
+import { version } from '@/version'
+
 import useSession from './useSession'
 
 export type UseQuilttResolvable = (
@@ -25,28 +27,11 @@ export type UseQuilttResolvable = (
 }
 
 export const useQuilttResolvable: UseQuilttResolvable = (connectorId, onErrorCallback) => {
-  const agent = useMemo(() => {
-    // Try deprecated navigator.product first (still used in some RN versions)
-    if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-      return `react-native-${version}`
-    }
-
-    // Detect React Native by its unique environment characteristics
-    const isReactNative = !!(
-      // Has window (unlike Node.js)
-      (
-        typeof window !== 'undefined' &&
-        // No document in window (unlike browsers)
-        typeof window.document === 'undefined' &&
-        // Has navigator (unlike Node.js)
-        typeof navigator !== 'undefined'
-      )
-    )
-
-    return isReactNative ? `react-native-${version}` : `react-${version}`
-  }, [])
-
-  const connectorsAPI = useMemo(() => new ConnectorsAPI(connectorId, agent), [connectorId, agent])
+  const userAgent = useMemo(() => getUserAgent(version), [])
+  const connectorsAPI = useMemo(
+    () => new ConnectorsAPI(connectorId, userAgent),
+    [connectorId, userAgent]
+  )
   const [session] = useSession()
 
   const [isLoading, setIsLoading] = useState(false)