@usearete/react 0.49.0 → 0.51.0

package/dist/index.cjs

@@ -293,6 +293,7 @@ function AreteProvider({ children, ...config }) {
             validateFrames: config.validateFrames,
             onFrameValidationError: config.onFrameValidationError,
             auth: config.auth,
+            ...(config.environment !== undefined ? { environment: config.environment } : {}),
             wallet: latestWalletRef.current,
         }).then((client) => {
             const ownsAttempt = lifecycleRef.current.active
@@ -324,7 +325,7 @@ function AreteProvider({ children, ...config }) {
         trackConnectingPromise(connectingRef.current, cacheKey, connectionPromise);
         notifyClientChange({ cacheKey, status: 'connecting' });
         return connectionPromise;
-    }, [config.autoConnect, config.autoReconnect, config.reconnectIntervals, config.maxReconnectAttempts, config.maxEntriesPerView, config.flushIntervalMs, config.fetch, config.validateFrames, config.onFrameValidationError, config.auth, notifyClientChange]);
+    }, [config.autoConnect, config.autoReconnect, config.reconnectIntervals, config.maxReconnectAttempts, config.maxEntriesPerView, config.flushIntervalMs, config.fetch, config.validateFrames, config.onFrameValidationError, config.auth, config.environment, notifyClientChange]);
     const getClient = React.useCallback((stack, options) => {
         if (!stack) {
             if (clientsRef.current.size === 1) {
@@ -426,6 +427,45 @@ function useConnectionState(stack, options) {
     return state;
 }
 
+/**
+ * The world the enclosing `AreteProvider`'s clients talk to: `'dev'` for
+ * the project's dev environment, `'production'` otherwise. With a stack,
+ * the connected client's own `client.environment`; before it connects (or
+ * without a stack), what the provider's `environment` decides. Outside a
+ * provider, `'production'`.
+ */
+function useAreteEnvironment(stack, options) {
+    const context = useOptionalAreteContext();
+    // Read again when a client connects.
+    const [, setRevision] = React.useState(0);
+    const subscribe = context?.subscribeToClientChanges;
+    React.useEffect(() => subscribe?.(() => setRevision((revision) => revision + 1)), [subscribe]);
+    const client = context?.getClient(stack ?? context.config.stack, options);
+    if (client)
+        return client.environment;
+    if (!context)
+        return 'production';
+    try {
+        return sdk.resolveEnvironmentSwitch(context.config.environment).mode;
+    }
+    catch {
+        // A malformed switch fails the client with INVALID_CONFIG; the badge
+        // only reports where a working client goes.
+        return 'production';
+    }
+}
+/**
+ * A small badge that says the app is talking to the dev environment.
+ * Renders nothing in production, so it can stay in the app's status or
+ * diagnostics area. Carries `data-arete-environment="dev"` for styling.
+ */
+function AreteEnvironmentBadge({ label = 'Dev environment', className, style, stack, }) {
+    const environment = useAreteEnvironment(stack);
+    if (environment !== 'dev')
+        return null;
+    return (React.createElement("span", { role: "status", "data-arete-environment": "dev", className: className, style: style }, label));
+}
+
 const AreteSessionContext = React.createContext(null);
 /**
  * `ready()` rejects with this when its `AreteSessionProvider` was removed
@@ -546,10 +586,14 @@ function AreteSessionProvider(props) {
     const given = (props.options ?? {});
     const inheritedAuth = arete?.config.auth;
     const inheritedFetch = arete?.config.fetch;
+    const inheritedEnvironment = arete?.config.environment;
     const options = useSameShape({
         ...given,
         ...(given.auth === undefined && inheritedAuth ? { auth: inheritedAuth } : {}),
         ...(given.fetch === undefined && inheritedFetch ? { fetch: inheritedFetch } : {}),
+        ...(given.environment === undefined && inheritedEnvironment !== undefined
+            ? { environment: inheritedEnvironment }
+            : {}),
     });
     const [attempt, setAttempt] = React.useState(0);
     const key = React.useMemo(() => ({ definition, options, external: externalSession, attempt }), [definition, options, externalSession, attempt]);
@@ -3276,6 +3320,10 @@ Object.defineProperty(exports, 'DEFAULT_MAX_ENTRIES_PER_VIEW', {
     enumerable: true,
     get: function () { return sdk.DEFAULT_MAX_ENTRIES_PER_VIEW; }
 });
+Object.defineProperty(exports, 'DevEnvironmentError', {
+    enumerable: true,
+    get: function () { return sdk.DevEnvironmentError; }
+});
 Object.defineProperty(exports, 'FrameProcessor', {
     enumerable: true,
     get: function () { return sdk.FrameProcessor; }
@@ -3440,6 +3488,7 @@ Object.defineProperty(exports, 'withPrograms', {
     enumerable: true,
     get: function () { return sdk.withPrograms; }
 });
+exports.AreteEnvironmentBadge = AreteEnvironmentBadge;
 exports.AreteProvider = AreteProvider;
 exports.AreteSessionProvider = AreteSessionProvider;
 exports.AreteSessionUnavailableError = AreteSessionUnavailableError;
@@ -3457,6 +3506,7 @@ exports.toOperationMutationError = toOperationMutationError;
 exports.useAllowedSteps = useAllowedSteps;
 exports.useArete = useArete;
 exports.useAreteContext = useAreteContext;
+exports.useAreteEnvironment = useAreteEnvironment;
 exports.useAreteSession = useAreteSession;
 exports.useAsyncRead = useAsyncRead;
 exports.useConnectionState = useConnectionState;