@dynamic-labs/sdk-react-core 4.83.2-alpha.0 → 4.84.1

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/optimisticShield.d.ts

@@ -0,0 +1,69 @@
+import { TokenBalance } from '@dynamic-labs/sdk-api-core';
+/**
+ * In-memory record of a shield operation that has been accepted by the
+ *  prover/relay but not yet observed on-chain by either the public
+ *  balance mapping (Provable's `/mapping/balances/...` endpoint) or
+ *  the RecordScanner index. Until reconciliation drops it, the entry
+ *  forces the widget to display the post-shield state — unshielded
+ *  rawBalance reduced by `amount`, shielded rawBalance increased by
+ *  the same — so the Shield Manually CTA disappears the moment the
+ *  shield is broadcast instead of flickering back into view during
+ *  the indexing tail and tempting the user into a second shield.
+ */
+export type OptimisticShieldEntry = {
+    tokenAddress: string;
+    isNative: boolean;
+    amount: bigint;
+    preShieldUnshieldedRaw: bigint;
+    preShieldShieldedRaw: bigint;
+    symbol: string;
+    name: string;
+    decimals: number;
+    logoURI: string;
+    price?: number;
+    createdAtMs: number;
+};
+export declare const OPTIMISTIC_SHIELD_STALE_MS = 180000;
+/**
+ * Reduce each unshielded token's `rawBalance` by the sum of pending
+ * optimistic shields for the same `(address, isNative)`, clamped to 0.
+ * `balance` and `marketValue` scale by the same ratio so the fiat
+ * column doesn't disagree with the optimistic raw balance.
+ *
+ * Tokens with no pending optimistic shield pass through by reference
+ * (no copy) so downstream memos / identity comparisons don't churn on
+ * every render.
+ */
+export declare const applyOptimisticUnshieldedDeductions: (balances: TokenBalance[], optimisticShields: ReadonlyArray<OptimisticShieldEntry>) => TokenBalance[];
+/**
+ * Apply optimistic shield additions to the shielded balance list. For
+ * each optimistic shield with a matching `(address, isNative)` entry
+ * already in `shielded`, bump that entry; otherwise prepend a fresh
+ * synthesized row built from the entry's captured metadata.
+ *
+ * Returns a fresh array only when at least one optimistic shield
+ * applies. When `optimisticShields` is empty we pass through the
+ * input array by reference so consumers that compare by identity
+ * don't churn.
+ */
+export declare const applyOptimisticShieldedAdditions: (shielded: TokenBalance[], optimisticShields: ReadonlyArray<OptimisticShieldEntry>) => TokenBalance[];
+/**
+ * Filter the optimistic shield list down to entries that are still
+ * relevant. An entry is dropped when any of:
+ *
+ *  - the unshielded server feed reports a `rawBalance` strictly less
+ *    than `preShieldUnshieldedRaw` for that token (the burn was
+ *    observed on-chain),
+ *  - the shielded server feed reports a `rawBalance` strictly greater
+ *    than `preShieldShieldedRaw` for that token (the new record was
+ *    indexed),
+ *  - the unshielded server no longer lists the token at all (rare,
+ *    but means the public balance is effectively zero — our
+ *    optimistic deduct is moot),
+ *  - the entry is older than `staleMs` (safety net for shields whose
+ *    on-chain effect is masked by parallel inbound credits).
+ *
+ * Pure / module-scope so it's trivially unit-testable; the widget
+ * just calls it on every server-side balance update.
+ */
+export declare const reconcileOptimisticShields: (optimisticShields: ReadonlyArray<OptimisticShieldEntry>, unshieldedTokenBalances: TokenBalance[], shieldedTokenBalances: TokenBalance[], nowMs: number, staleMs?: number) => OptimisticShieldEntry[];

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/optimisticShield.js

@@ -0,0 +1,127 @@
+'use client'
+// Default safety-net stale window for optimistic entries. Tuned to
+//  comfortably outlast the post-shield polling schedule (~106s) so
+//  reconciliation has a chance to fire on the real server-side state
+//  before the safety net trips.
+const OPTIMISTIC_SHIELD_STALE_MS = 180000;
+const matches = (entry, token) => {
+    if (entry.isNative)
+        return Boolean(token.isNative);
+    return !token.isNative && entry.tokenAddress === token.address;
+};
+/**
+ * Reduce each unshielded token's `rawBalance` by the sum of pending
+ * optimistic shields for the same `(address, isNative)`, clamped to 0.
+ * `balance` and `marketValue` scale by the same ratio so the fiat
+ * column doesn't disagree with the optimistic raw balance.
+ *
+ * Tokens with no pending optimistic shield pass through by reference
+ * (no copy) so downstream memos / identity comparisons don't churn on
+ * every render.
+ */
+const applyOptimisticUnshieldedDeductions = (balances, optimisticShields) => {
+    if (optimisticShields.length === 0)
+        return balances;
+    return balances.map((token) => {
+        var _a, _b;
+        const adjustments = optimisticShields.filter((o) => matches(o, token));
+        if (adjustments.length === 0)
+            return token;
+        const currentRaw = BigInt(Math.round((_a = token.rawBalance) !== null && _a !== void 0 ? _a : 0));
+        const totalAdjustment = adjustments.reduce((sum, o) => sum + o.amount, BigInt(0));
+        const newRaw = currentRaw > totalAdjustment ? currentRaw - totalAdjustment : BigInt(0);
+        // Ratio-scale display-units balance + fiat so they stay consistent
+        //  with the optimistic raw value. `currentRaw === 0n` happens when
+        //  the server feed has already caught up to zero but reconciliation
+        //  hasn't fired yet; treat ratio as 0 to keep display at 0.
+        const ratio = currentRaw > BigInt(0) ? Number(newRaw) / Number(currentRaw) : 0;
+        return Object.assign(Object.assign({}, token), { balance: ((_b = token.balance) !== null && _b !== void 0 ? _b : 0) * ratio, marketValue: token.marketValue !== undefined ? token.marketValue * ratio : undefined, rawBalance: Number(newRaw), rawBalanceString: newRaw.toString() });
+    });
+};
+/**
+ * Apply optimistic shield additions to the shielded balance list. For
+ * each optimistic shield with a matching `(address, isNative)` entry
+ * already in `shielded`, bump that entry; otherwise prepend a fresh
+ * synthesized row built from the entry's captured metadata.
+ *
+ * Returns a fresh array only when at least one optimistic shield
+ * applies. When `optimisticShields` is empty we pass through the
+ * input array by reference so consumers that compare by identity
+ * don't churn.
+ */
+const applyOptimisticShieldedAdditions = (shielded, optimisticShields) => {
+    if (optimisticShields.length === 0)
+        return shielded;
+    const consumedIndices = new Set();
+    const merged = shielded.map((token) => {
+        var _a, _b;
+        const adjustments = optimisticShields.filter((o, idx) => {
+            if (!matches(o, token))
+                return false;
+            consumedIndices.add(idx);
+            return true;
+        });
+        if (adjustments.length === 0)
+            return token;
+        const totalAtomic = adjustments.reduce((sum, o) => sum + o.amount, BigInt(0));
+        const newRaw = BigInt(Math.round((_a = token.rawBalance) !== null && _a !== void 0 ? _a : 0)) + totalAtomic;
+        const decimals = (_b = token.decimals) !== null && _b !== void 0 ? _b : 0;
+        const denominator = Math.pow(10, decimals);
+        const newDisplay = Number(newRaw) / denominator;
+        return Object.assign(Object.assign({}, token), { balance: newDisplay, marketValue: token.price !== undefined
+                ? newDisplay * token.price
+                : token.marketValue, rawBalance: Number(newRaw), rawBalanceString: newRaw.toString() });
+    });
+    // Prepend synthesized rows for any optimistic shield that didn't
+    //  fold into an existing shielded row above. New rows go to the top
+    //  of the list so the just-shielded token is immediately visible.
+    const synthesized = [];
+    optimisticShields.forEach((entry, idx) => {
+        if (consumedIndices.has(idx))
+            return;
+        const denominator = Math.pow(10, entry.decimals);
+        const display = Number(entry.amount) / denominator;
+        const marketValue = entry.price !== undefined ? display * entry.price : undefined;
+        synthesized.push(Object.assign(Object.assign({ address: entry.tokenAddress, balance: display, decimals: entry.decimals, isNative: entry.isNative, logoURI: entry.logoURI, name: entry.name, rawBalance: Number(entry.amount), rawBalanceString: entry.amount.toString(), symbol: entry.symbol }, (entry.price !== undefined ? { price: entry.price } : {})), (marketValue !== undefined ? { marketValue } : {})));
+    });
+    return [...synthesized, ...merged];
+};
+/**
+ * Filter the optimistic shield list down to entries that are still
+ * relevant. An entry is dropped when any of:
+ *
+ *  - the unshielded server feed reports a `rawBalance` strictly less
+ *    than `preShieldUnshieldedRaw` for that token (the burn was
+ *    observed on-chain),
+ *  - the shielded server feed reports a `rawBalance` strictly greater
+ *    than `preShieldShieldedRaw` for that token (the new record was
+ *    indexed),
+ *  - the unshielded server no longer lists the token at all (rare,
+ *    but means the public balance is effectively zero — our
+ *    optimistic deduct is moot),
+ *  - the entry is older than `staleMs` (safety net for shields whose
+ *    on-chain effect is masked by parallel inbound credits).
+ *
+ * Pure / module-scope so it's trivially unit-testable; the widget
+ * just calls it on every server-side balance update.
+ */
+const reconcileOptimisticShields = (optimisticShields, unshieldedTokenBalances, shieldedTokenBalances, nowMs, staleMs = OPTIMISTIC_SHIELD_STALE_MS) => optimisticShields.filter((entry) => {
+    var _a, _b;
+    if (nowMs - entry.createdAtMs > staleMs)
+        return false;
+    const unshielded = unshieldedTokenBalances.find((t) => matches(entry, t));
+    if (!unshielded)
+        return false;
+    const serverUnshielded = BigInt(Math.round((_a = unshielded.rawBalance) !== null && _a !== void 0 ? _a : 0));
+    if (serverUnshielded < entry.preShieldUnshieldedRaw)
+        return false;
+    const shielded = shieldedTokenBalances.find((t) => matches(entry, t));
+    const serverShielded = shielded
+        ? BigInt(Math.round((_b = shielded.rawBalance) !== null && _b !== void 0 ? _b : 0))
+        : BigInt(0);
+    if (serverShielded > entry.preShieldShieldedRaw)
+        return false;
+    return true;
+});
+
+export { OPTIMISTIC_SHIELD_STALE_MS, applyOptimisticShieldedAdditions, applyOptimisticUnshieldedDeductions, reconcileOptimisticShields };

package/src/lib/widgets/DynamicWidget/views/ManageTrustedDevicesView/ManageTrustedDevicesView.cjs

@@ -7,7 +7,8 @@ var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
-var client = require('@dynamic-labs-sdk/client');
+var client$1 = require('@dynamic-labs-sdk/client');
+var client = require('../../../../client/client.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
 var Skeleton = require('../../../../components/Skeleton/Skeleton.cjs');
@@ -26,24 +27,27 @@ const ManageTrustedDevicesView = () => {
     var _a, _b;
     const { t } = reactI18next.useTranslation();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const dynamicClient = client.useDynamicClient();
     const [deviceIdToRemove, setDeviceIdToRemove] = React.useState(null);
     const [showRemoveAll, setShowRemoveAll] = React.useState(false);
-    const { data: devices, isLoading, retrigger, } = usePromise.usePromise(() => client.getRegisteredDevices(), {
+    const { data: devices, isLoading, retrigger, } = usePromise.usePromise(() => client$1.getRegisteredDevices(), {
         initialData: [],
     });
     const handleBackClick = React.useCallback(() => setDynamicWidgetView('account-and-security-settings'), [setDynamicWidgetView]);
     const handleConfirmRemoveDevice = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!deviceIdToRemove)
             return;
-        yield client.revokeRegisteredDevice({ deviceRegistrationId: deviceIdToRemove });
+        yield client$1.revokeRegisteredDevice({ deviceRegistrationId: deviceIdToRemove });
         setDeviceIdToRemove(null);
-        retrigger();
-    }), [deviceIdToRemove, retrigger]);
+        // Revoking the current device logs the user out; skip the refetch to avoid a 401.
+        if (dynamicClient.user)
+            retrigger();
+    }), [deviceIdToRemove, dynamicClient, retrigger]);
     const handleConfirmRemoveAll = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        yield client.revokeAllRegisteredDevices();
+        yield client$1.revokeAllRegisteredDevices();
         setShowRemoveAll(false);
-        retrigger();
-    }), [retrigger]);
+        // revokeAllRegisteredDevices always logs the user out; no refetch needed.
+    }), []);
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
     return (jsxRuntime.jsxs("div", { className: 'manage-trusted-devices-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_device_management.manage_title', children: t('dyn_device_management.manage_title') }) }) }), jsxRuntime.jsxs("div", { className: 'manage-trusted-devices-view__scroll-container', children: [isLoading && (jsxRuntime.jsx(Skeleton.Skeleton, { count: 3, className: 'manage-trusted-devices-view__skeleton', dataTestId: 'trusted-devices-skeleton' })), !isLoading && devices.length === 0 && (jsxRuntime.jsx(Typography.Typography, { className: 'manage-trusted-devices-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_device_management.no_devices', children: t('dyn_device_management.no_devices') })), !isLoading &&
                         devices.map((device) => device.userAgent ? (jsxRuntime.jsx(TrustedDeviceTile.TrustedDeviceTile, { userAgent: device.userAgent, createdAt: device.createdAt, isCurrentDevice: device.isCurrentDevice, onClickDelete: () => setDeviceIdToRemove(device.id) }, device.id)) : null)] }), !isLoading && devices.length > 0 && (jsxRuntime.jsx("div", { className: 'manage-trusted-devices-view__footer', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'manage-trusted-devices-view__remove-all-button', onClick: () => setShowRemoveAll(true), "data-testid": 'remove-all-devices-button', children: t('dyn_device_management.remove_all_devices') }) })), deviceIdToRemove !== null && (jsxRuntime.jsx(RemoveDevicePrompt.RemoveDevicePrompt, { deviceUserAgent: (_b = (_a = devices.find((d) => d.id === deviceIdToRemove)) === null || _a === void 0 ? void 0 : _a.userAgent) !== null && _b !== void 0 ? _b : '', onConfirm: handleConfirmRemoveDevice, onCancel: () => setDeviceIdToRemove(null) })), showRemoveAll && (jsxRuntime.jsx(RemoveAllDevicesPrompt.RemoveAllDevicesPrompt, { onConfirm: handleConfirmRemoveAll, onCancel: () => setShowRemoveAll(false) }))] }));

package/src/lib/widgets/DynamicWidget/views/ManageTrustedDevicesView/ManageTrustedDevicesView.js

@@ -4,6 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getRegisteredDevices, revokeRegisteredDevice, revokeAllRegisteredDevices } from '@dynamic-labs-sdk/client';
+import { useDynamicClient } from '../../../../client/client.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
 import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
@@ -22,6 +23,7 @@ const ManageTrustedDevicesView = () => {
     var _a, _b;
     const { t } = useTranslation();
     const { setDynamicWidgetView } = useWidgetContext();
+    const dynamicClient = useDynamicClient();
     const [deviceIdToRemove, setDeviceIdToRemove] = useState(null);
     const [showRemoveAll, setShowRemoveAll] = useState(false);
     const { data: devices, isLoading, retrigger, } = usePromise(() => getRegisteredDevices(), {
@@ -33,13 +35,15 @@ const ManageTrustedDevicesView = () => {
             return;
         yield revokeRegisteredDevice({ deviceRegistrationId: deviceIdToRemove });
         setDeviceIdToRemove(null);
-        retrigger();
-    }), [deviceIdToRemove, retrigger]);
+        // Revoking the current device logs the user out; skip the refetch to avoid a 401.
+        if (dynamicClient.user)
+            retrigger();
+    }), [deviceIdToRemove, dynamicClient, retrigger]);
     const handleConfirmRemoveAll = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         yield revokeAllRegisteredDevices();
         setShowRemoveAll(false);
-        retrigger();
-    }), [retrigger]);
+        // revokeAllRegisteredDevices always logs the user out; no refetch needed.
+    }), []);
     const backButton = (jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
     return (jsxs("div", { className: 'manage-trusted-devices-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_device_management.manage_title', children: t('dyn_device_management.manage_title') }) }) }), jsxs("div", { className: 'manage-trusted-devices-view__scroll-container', children: [isLoading && (jsx(Skeleton, { count: 3, className: 'manage-trusted-devices-view__skeleton', dataTestId: 'trusted-devices-skeleton' })), !isLoading && devices.length === 0 && (jsx(Typography, { className: 'manage-trusted-devices-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_device_management.no_devices', children: t('dyn_device_management.no_devices') })), !isLoading &&
                         devices.map((device) => device.userAgent ? (jsx(TrustedDeviceTile, { userAgent: device.userAgent, createdAt: device.createdAt, isCurrentDevice: device.isCurrentDevice, onClickDelete: () => setDeviceIdToRemove(device.id) }, device.id)) : null)] }), !isLoading && devices.length > 0 && (jsx("div", { className: 'manage-trusted-devices-view__footer', children: jsx(TextButton, { className: 'manage-trusted-devices-view__remove-all-button', onClick: () => setShowRemoveAll(true), "data-testid": 'remove-all-devices-button', children: t('dyn_device_management.remove_all_devices') }) })), deviceIdToRemove !== null && (jsx(RemoveDevicePrompt, { deviceUserAgent: (_b = (_a = devices.find((d) => d.id === deviceIdToRemove)) === null || _a === void 0 ? void 0 : _a.userAgent) !== null && _b !== void 0 ? _b : '', onConfirm: handleConfirmRemoveDevice, onCancel: () => setDeviceIdToRemove(null) })), showRemoveAll && (jsx(RemoveAllDevicesPrompt, { onConfirm: handleConfirmRemoveAll, onCancel: () => setShowRemoveAll(false) }))] }));