@spicenet-io/spiceflow-ui 4.9.3-extmode.0 → 4.9.3-extmode.2

package/README.md

@@ -108,6 +108,49 @@ it becomes a `protocol` everyone can name.
 
 ## Development
 
+### Rollup balance pricing
+
+Rollup USD values use the host-configured RPC provider's pricing capability when the balance API has no valid value. The built-in account panel and withdrawal modal enable this while open; custom `useSpiceAssets` consumers can opt in with `priceEnabled`. Quantities arrive independently. Lookups follow receipt mappings, prefer `nativeChainId`, and fall back to other supported chains with a configured Alchemy endpoint. Explicit account `tokenPrices` overrides still take precedence over provider quotes.
+
+Wallet discovery and rollup balances share a one-minute quote cache. Pricing polls only while the view is open and the page is visible. A failed refresh can retain a marked stale quote for up to five minutes; an unavailable quote displays `—`. No extra key, internal RPC, or symbol-based ERC-20 price fallback is used.
+
+### Direct withdrawal in a custom balance row
+
+`useSpiceDirectWithdraw()` uses the same embedded-wallet transfer and fee path as the account panel's direct Withdraw buttons. It selects the connected external wallet as recipient, exposes `canWithdraw` and `state`, and rejects duplicate submissions while pending. Pass the raw `bigint` balance to `withdraw({ tokenAddress, chainId, balance })` and refresh the host's balance after it resolves. Rejections are available as `state.message` for the host to render.
+
+Custom account rows accept React content in `displayValue`, so a host can render its own button with that controller. Set the row's `asset: { tokenAddress, chainId }` when it represents an on-chain balance; the account panel then omits that token from discovered idle balances. Existing string values continue to work.
+
+### Withdraw from an account balance
+
+`AccountDisplay.onWithdrawClick` receives the rollup receipt-token ID when a
+user clicks Withdraw on an idle rollup balance. The main Withdraw button calls
+it without an ID. Pass the ID to `SpiceWithdraw.initialSourceAssetId` to open
+the existing modal with that asset selected; the user chooses the destination
+network inside the modal. Existing callbacks that take no arguments continue
+to work.
+
+```tsx
+const [withdrawOpen, setWithdrawOpen] = useState(false);
+const [withdrawAssetId, setWithdrawAssetId] = useState<string>();
+
+<AccountDisplay
+  onWithdrawClick={(receiptTokenId) => {
+    setWithdrawAssetId(receiptTokenId);
+    setWithdrawOpen(true);
+  }}
+/>
+<SpiceWithdraw
+  isOpen={withdrawOpen}
+  onClose={() => setWithdrawOpen(false)}
+  initialSourceAssetId={withdrawAssetId}
+  buildSpicenetBatch={buildSpicenetWithdrawalBatch}
+/>
+```
+
+Keep the integration's existing withdrawal batch builder and callbacks.
+`initialSourceAssetId` selects a current balance by ID; it does not supply a
+cached balance or change the receipt's supported withdrawal routes.
+
 ### Fee-Charging Intent Flows
 
 - `SpiceSupply` and `SpicePay` are fee-charging intent-execution flows and must surface fee estimation before enabling submission.

package/dist/auth-privy.js

@@ -1,2 +1,2 @@
 "use client";
-import{P as g}from"./privy-Baz1RPs-.js";import"react/jsx-runtime";import"react";import"@spicenet-io/spiceflow-core";import"viem";import"viem/actions";import"@privy-io/react-auth";import"wagmi";import"@tanstack/react-query";export{g as PrivyLogin};
+import{P as g}from"./privy-DsMpmEiz.js";import"react/jsx-runtime";import"react";import"@spicenet-io/spiceflow-core";import"viem";import"viem/actions";import"@privy-io/react-auth";import"wagmi";import"@tanstack/react-query";export{g as PrivyLogin};

package/dist/components/AccountDisplay/parts/AccountIdleBalances.d.ts

@@ -1,11 +1,7 @@
 import React from "react";
 import { SpiceAsset } from "../types";
 import type { ResolvedDarkPalette } from "../../../utils/theme";
-export interface DirectWithdrawState {
-    key: string;
-    step: "pending" | "error";
-    message?: string;
-}
+import type { DirectWithdrawState } from "../../../hooks/useDirectWithdraw";
 interface AccountIdleBalancesProps {
     spiceAssets: SpiceAsset[];
     loading: boolean;
@@ -14,6 +10,7 @@ interface AccountIdleBalancesProps {
     canDirectWithdraw?: boolean;
     onDirectWithdraw?: (asset: SpiceAsset) => void;
     directWithdrawState?: DirectWithdrawState | null;
+    onWithdrawClick?: (receiptTokenId?: string) => void;
 }
 export declare const AccountIdleBalances: React.NamedExoticComponent<AccountIdleBalancesProps>;
 export {};

package/dist/components/AccountDisplay/parts/AccountPanel.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { SpiceAsset, CustomSection, AccountNotice } from "../types";
 import { VerifiedPendingDeposit } from "../../../hooks/usePendingDeposit";
 import type { ResolvedDarkPalette } from "../../../utils/theme";
-import { type DirectWithdrawState } from "./AccountIdleBalances";
+import type { DirectWithdrawState } from "../../../hooks/useDirectWithdraw";
 interface AccountPanelProps {
     appName: string;
     status: "active" | "inactive";
@@ -17,7 +17,7 @@ interface AccountPanelProps {
     customSections: CustomSection[];
     notice?: AccountNotice | null;
     onDepositClick?: () => void;
-    onWithdrawClick?: () => void;
+    onWithdrawClick?: (receiptTokenId?: string) => void;
     depositDisabled?: boolean;
     onCompleteDeposit?: (deposit: VerifiedPendingDeposit) => void;
     primaryColor?: string;

package/dist/components/AccountDisplay/types.d.ts

@@ -5,7 +5,8 @@ export interface CustomSectionItem {
     tokenSymbol: string;
     tokenLogoURI?: string;
     label: string;
-    displayValue: string;
+    displayValue: React.ReactNode;
+    asset?: Pick<SpiceAsset, "tokenAddress" | "chainId">;
     valueColor?: "green" | "red" | "default";
 }
 export interface CustomSection {
@@ -24,7 +25,9 @@ export interface SpiceAsset {
     balance: string;
     balanceFormatted: number;
     usdValue: number;
+    priceStatus?: "fresh" | "stale" | "unavailable";
     logoURI?: string;
+    receiptTokenId?: string;
     directWithdraw?: boolean;
 }
 export interface BreakdownLabel {
@@ -48,7 +51,7 @@ export interface AccountDisplayProps {
     dark?: boolean;
     onDepositSuccess?: () => void;
     onDepositClick?: () => void;
-    onWithdrawClick?: () => void;
+    onWithdrawClick?: (receiptTokenId?: string) => void;
     onCompleteDeposit?: (deposit: VerifiedPendingDeposit) => void;
     showModeToggle?: boolean;
     defaultMode?: "7702" | "non7702";

package/dist/components/SpiceWithdraw/lib/helpers.d.ts

@@ -2,5 +2,5 @@ import type { ChainBatch } from "../../../types/authorization";
 export declare function normalizeTokenLabel(value?: string | null): string;
 export declare function formatTokenAmount(rawAmount: bigint, decimals: number): string;
 export declare function scaleAmountBetweenDecimals(amount: bigint, fromDecimals: number, toDecimals: number): bigint;
-export declare function estimateUsd(amount: number, symbol?: string): string;
+export declare function estimateUsd(amount: number, price?: number, stale?: boolean): string;
 export declare function buildWithdrawFeeEstimateKey(batches: ChainBatch[], tokenAddress?: string | null): string | null;

package/dist/components/SpiceWithdraw/parts/WithdrawBalanceCardHeader.d.ts

@@ -4,7 +4,6 @@ interface WithdrawBalanceCardHeaderProps {
     label: string;
     spiceAssetsLoading: boolean;
     totalSelectedBalance: number;
-    onOpenBalancePopover: (anchor: HTMLElement | null) => void;
     dark: boolean;
     dk: ResolvedDarkPalette;
 }

package/dist/hooks/index.d.ts

@@ -6,6 +6,8 @@ export type { UseWalletReturn, WalletState, WalletActions } from "./useWallet";
 export { useSpiceAssets } from "./useSpiceAssets";
 export type { UseSpiceAssetsConfig, UseSpiceAssetsReturn, } from "./useSpiceAssets";
 export { useSpiceExecution } from "./useSpiceExecution";
+export { useDirectWithdraw as useSpiceDirectWithdraw } from "./useDirectWithdraw";
+export type { DirectWithdrawParams, DirectWithdrawState, } from "./useDirectWithdraw";
 export type { ExecutionProgress, ExecutionStep, ExecutionOptions, OnProgress, } from "./useSpiceExecution";
 export { useLockDuration } from "./useLockDuration";
 export type { UseLockDurationReturn } from "./useLockDuration";

package/dist/hooks/useDirectWithdraw.d.ts

@@ -4,9 +4,15 @@ export interface DirectWithdrawParams {
     tokenAddress: Address | string;
     chainId: number;
     balance: bigint;
-    recipient: Address | string;
     onProgress?: (progress: ExecutionProgress) => void;
 }
+export interface DirectWithdrawState {
+    key: string;
+    step: "pending" | "error";
+    message?: string;
+}
 export declare function useDirectWithdraw(): {
-    withdraw: ({ tokenAddress, chainId, balance, recipient, onProgress, }: DirectWithdrawParams) => Promise<string>;
+    withdraw: ({ tokenAddress, chainId, balance, onProgress, }: DirectWithdrawParams) => Promise<string>;
+    canWithdraw: boolean;
+    state: DirectWithdrawState | null;
 };

package/dist/hooks/useSpiceAssets.d.ts

@@ -5,6 +5,7 @@ export interface UseSpiceAssetsConfig {
     supportedChains?: number[];
     enabled?: boolean;
     refetchInterval?: number;
+    priceEnabled?: boolean;
 }
 export interface UseSpiceAssetsReturn {
     assets: Asset[];
@@ -14,4 +15,4 @@ export interface UseSpiceAssetsReturn {
     refetch: () => Promise<void>;
     getAssetsByChain: (chainId: number) => Asset[];
 }
-export declare const useSpiceAssets: ({ address, supportedChains, enabled, refetchInterval, }: UseSpiceAssetsConfig) => UseSpiceAssetsReturn;
+export declare const useSpiceAssets: ({ address, supportedChains, enabled, refetchInterval, priceEnabled, }: UseSpiceAssetsConfig) => UseSpiceAssetsReturn;

package/dist/hooks/useSpiceRollupPrices.d.ts

@@ -0,0 +1,2 @@
+import type { Asset } from "../types/assets";
+export declare function useSpiceRollupPrices(assets: Asset[], enabled: boolean, supportedChains?: number[]): Asset[];

package/dist/hooks/useWalletBalances.d.ts

@@ -8,6 +8,7 @@ export interface UseAssetsConfig {
     fetchBalances: (address: Address, supportedChains?: number[]) => Promise<MultiChainBalances>;
     enabled?: boolean;
     refreshInterval?: number;
+    priceEnabled?: boolean;
 }
 export interface UseAssetsReturn {
     assets: Asset[];
@@ -17,4 +18,4 @@ export interface UseAssetsReturn {
     getAssetsByChain: (chainId: number) => Asset[];
     getNativeAssets: () => Asset[];
 }
-export declare const useWalletBalances: ({ address, supportedChains, fetchBalances, enabled, refreshInterval, }: UseAssetsConfig) => UseAssetsReturn;
+export declare const useWalletBalances: ({ address, supportedChains, fetchBalances, enabled, refreshInterval, priceEnabled, }: UseAssetsConfig) => UseAssetsReturn;