@spicenet-io/spiceflow-ui 4.9.3 → 4.9.4-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -108,6 +108,55 @@ it becomes a `protocol` everyone can name.
108
108
 
109
109
  ## Development
110
110
 
111
+ ### Rollup balance pricing
112
+
113
+ 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.
114
+
115
+ 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.
116
+
117
+ ### Host-supplied token logos
118
+
119
+ `AccountDisplay.tokenLogos` maps a token symbol to a logo URL, the same key
120
+ shape `tokenPrices` uses. A discovered embedded-wallet balance falls back to
121
+ it when the RPC provider returns no logo, which is what happens for a token
122
+ that is not in the chain's configured token list. Provider metadata still
123
+ wins when it has a logo.
124
+
125
+ ```tsx
126
+ <AccountDisplay tokenLogos={{ REPPO: reppoLogoUrl }} />
127
+ ```
128
+
129
+ ### Withdraw from an account balance
130
+
131
+ `AccountDisplay.onWithdrawClick` receives the rollup receipt-token ID when a
132
+ user clicks Withdraw on an idle rollup balance. The main Withdraw button calls
133
+ it without an ID. Pass the ID to `SpiceWithdraw.initialSourceAssetId` to open
134
+ the existing modal with that asset selected; the user chooses the destination
135
+ network inside the modal. Existing callbacks that take no arguments continue
136
+ to work.
137
+
138
+ ```tsx
139
+ const [withdrawOpen, setWithdrawOpen] = useState(false);
140
+ const [withdrawAssetId, setWithdrawAssetId] = useState<string>();
141
+
142
+ <AccountDisplay
143
+ onWithdrawClick={(receiptTokenId) => {
144
+ setWithdrawAssetId(receiptTokenId);
145
+ setWithdrawOpen(true);
146
+ }}
147
+ />
148
+ <SpiceWithdraw
149
+ isOpen={withdrawOpen}
150
+ onClose={() => setWithdrawOpen(false)}
151
+ initialSourceAssetId={withdrawAssetId}
152
+ buildSpicenetBatch={buildSpicenetWithdrawalBatch}
153
+ />
154
+ ```
155
+
156
+ Keep the integration's existing withdrawal batch builder and callbacks.
157
+ `initialSourceAssetId` selects a current balance by ID; it does not supply a
158
+ cached balance or change the receipt's supported withdrawal routes.
159
+
111
160
  ### Fee-Charging Intent Flows
112
161
 
113
162
  - `SpiceSupply` and `SpicePay` are fee-charging intent-execution flows and must surface fee estimation before enabling submission.
@@ -1,2 +1,2 @@
1
1
  "use client";
2
- import{P as g}from"./privy-DhjzUaUt.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};
2
+ import{P as g}from"./privy-BFnqTKR9.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};
@@ -1,11 +1,7 @@
1
1
  import React from "react";
2
2
  import { SpiceAsset } from "../types";
3
3
  import type { ResolvedDarkPalette } from "../../../utils/theme";
4
- export interface DirectWithdrawState {
5
- key: string;
6
- step: "pending" | "error";
7
- message?: string;
8
- }
4
+ import type { DirectWithdrawState } from "../../../hooks/useDirectWithdraw";
9
5
  interface AccountIdleBalancesProps {
10
6
  spiceAssets: SpiceAsset[];
11
7
  loading: boolean;
@@ -14,6 +10,7 @@ interface AccountIdleBalancesProps {
14
10
  canDirectWithdraw?: boolean;
15
11
  onDirectWithdraw?: (asset: SpiceAsset) => void;
16
12
  directWithdrawState?: DirectWithdrawState | null;
13
+ onWithdrawClick?: (receiptTokenId?: string) => void;
17
14
  }
18
15
  export declare const AccountIdleBalances: React.NamedExoticComponent<AccountIdleBalancesProps>;
19
16
  export {};
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { SpiceAsset, CustomSection, AccountNotice } from "../types";
3
3
  import { VerifiedPendingDeposit } from "../../../hooks/usePendingDeposit";
4
4
  import type { ResolvedDarkPalette } from "../../../utils/theme";
5
- import { type DirectWithdrawState } from "./AccountIdleBalances";
5
+ import type { DirectWithdrawState } from "../../../hooks/useDirectWithdraw";
6
6
  interface AccountPanelProps {
7
7
  appName: string;
8
8
  status: "active" | "inactive";
@@ -17,7 +17,7 @@ interface AccountPanelProps {
17
17
  customSections: CustomSection[];
18
18
  notice?: AccountNotice | null;
19
19
  onDepositClick?: () => void;
20
- onWithdrawClick?: () => void;
20
+ onWithdrawClick?: (receiptTokenId?: string) => void;
21
21
  depositDisabled?: boolean;
22
22
  onCompleteDeposit?: (deposit: VerifiedPendingDeposit) => void;
23
23
  primaryColor?: string;
@@ -24,7 +24,9 @@ export interface SpiceAsset {
24
24
  balance: string;
25
25
  balanceFormatted: number;
26
26
  usdValue: number;
27
+ priceStatus?: "fresh" | "stale" | "unavailable";
27
28
  logoURI?: string;
29
+ receiptTokenId?: string;
28
30
  directWithdraw?: boolean;
29
31
  }
30
32
  export interface BreakdownLabel {
@@ -42,13 +44,14 @@ export interface AccountDisplayProps {
42
44
  customSections?: CustomSection[];
43
45
  extraAssets?: SpiceAsset[];
44
46
  tokenPrices?: Record<string, number>;
47
+ tokenLogos?: Record<string, string>;
45
48
  breakdownLabels?: BreakdownLabel[];
46
49
  notice?: AccountNotice | null;
47
50
  styles?: CustomStyles;
48
51
  dark?: boolean;
49
52
  onDepositSuccess?: () => void;
50
53
  onDepositClick?: () => void;
51
- onWithdrawClick?: () => void;
54
+ onWithdrawClick?: (receiptTokenId?: string) => void;
52
55
  onCompleteDeposit?: (deposit: VerifiedPendingDeposit) => void;
53
56
  showModeToggle?: boolean;
54
57
  defaultMode?: "7702" | "non7702";
@@ -0,0 +1,2 @@
1
+ import type { Asset } from "../../../types/assets";
2
+ export declare function isEscrowCreditable(asset: Pick<Asset, "address" | "chainId" | "isNative">): boolean;
@@ -3,6 +3,7 @@ import { type FeeEstimateSummary, type ResolvedSwap } from "@spicenet-io/spicefl
3
3
  import type { ChainAuthorization, ChainBatch } from "../../../types/authorization";
4
4
  import type { Asset } from "../../../types/assets";
5
5
  export declare function isDirectLockSource(asset: Asset, lockChainId: number): boolean;
6
+ export declare function isInPlaceLockSource(asset: Asset, lockChainId: number): boolean;
6
7
  export declare function composeLockSwapBatches(batches: ChainBatch[], params: {
7
8
  chainId: number;
8
9
  recipient: Address;
@@ -2,5 +2,5 @@ import type { ChainBatch } from "../../../types/authorization";
2
2
  export declare function normalizeTokenLabel(value?: string | null): string;
3
3
  export declare function formatTokenAmount(rawAmount: bigint, decimals: number): string;
4
4
  export declare function scaleAmountBetweenDecimals(amount: bigint, fromDecimals: number, toDecimals: number): bigint;
5
- export declare function estimateUsd(amount: number, symbol?: string): string;
5
+ export declare function estimateUsd(amount: number, price?: number, stale?: boolean): string;
6
6
  export declare function buildWithdrawFeeEstimateKey(batches: ChainBatch[], tokenAddress?: string | null): string | null;
@@ -4,7 +4,6 @@ interface WithdrawBalanceCardHeaderProps {
4
4
  label: string;
5
5
  spiceAssetsLoading: boolean;
6
6
  totalSelectedBalance: number;
7
- onOpenBalancePopover: (anchor: HTMLElement | null) => void;
8
7
  dark: boolean;
9
8
  dk: ResolvedDarkPalette;
10
9
  }
@@ -4,9 +4,15 @@ export interface DirectWithdrawParams {
4
4
  tokenAddress: Address | string;
5
5
  chainId: number;
6
6
  balance: bigint;
7
- recipient: Address | string;
8
7
  onProgress?: (progress: ExecutionProgress) => void;
9
8
  }
9
+ export interface DirectWithdrawState {
10
+ key: string;
11
+ step: "pending" | "error";
12
+ message?: string;
13
+ }
10
14
  export declare function useDirectWithdraw(): {
11
- withdraw: ({ tokenAddress, chainId, balance, recipient, onProgress, }: DirectWithdrawParams) => Promise<string>;
15
+ withdraw: ({ tokenAddress, chainId, balance, onProgress, }: DirectWithdrawParams) => Promise<string>;
16
+ canWithdraw: boolean;
17
+ state: DirectWithdrawState | null;
12
18
  };
@@ -5,6 +5,7 @@ export interface UseSpiceAssetsConfig {
5
5
  supportedChains?: number[];
6
6
  enabled?: boolean;
7
7
  refetchInterval?: number;
8
+ priceEnabled?: boolean;
8
9
  }
9
10
  export interface UseSpiceAssetsReturn {
10
11
  assets: Asset[];
@@ -14,4 +15,4 @@ export interface UseSpiceAssetsReturn {
14
15
  refetch: () => Promise<void>;
15
16
  getAssetsByChain: (chainId: number) => Asset[];
16
17
  }
17
- export declare const useSpiceAssets: ({ address, supportedChains, enabled, refetchInterval, }: UseSpiceAssetsConfig) => UseSpiceAssetsReturn;
18
+ export declare const useSpiceAssets: ({ address, supportedChains, enabled, refetchInterval, priceEnabled, }: UseSpiceAssetsConfig) => UseSpiceAssetsReturn;
@@ -0,0 +1,2 @@
1
+ import type { Asset } from "../types/assets";
2
+ export declare function useSpiceRollupPrices(assets: Asset[], enabled: boolean, supportedChains?: number[]): Asset[];
@@ -1,6 +1,7 @@
1
1
  import { Address } from "viem";
2
2
  import { Asset, MultiChainBalances } from "../types/assets";
3
3
  export declare const DISCOVERED_TOKEN_MIN_USD = 0.01;
4
+ export declare const fetchUsdPricesForChain: (chainId: number, addresses: string[]) => Promise<Map<string, number>>;
4
5
  export declare const fetchBalances: (walletAddress: Address, supportedChains?: number[]) => Promise<MultiChainBalances>;
5
6
  export interface UseAssetsConfig {
6
7
  address?: Address;
@@ -8,6 +9,7 @@ export interface UseAssetsConfig {
8
9
  fetchBalances: (address: Address, supportedChains?: number[]) => Promise<MultiChainBalances>;
9
10
  enabled?: boolean;
10
11
  refreshInterval?: number;
12
+ priceEnabled?: boolean;
11
13
  }
12
14
  export interface UseAssetsReturn {
13
15
  assets: Asset[];
@@ -17,4 +19,4 @@ export interface UseAssetsReturn {
17
19
  getAssetsByChain: (chainId: number) => Asset[];
18
20
  getNativeAssets: () => Asset[];
19
21
  }
20
- export declare const useWalletBalances: ({ address, supportedChains, fetchBalances, enabled, refreshInterval, }: UseAssetsConfig) => UseAssetsReturn;
22
+ export declare const useWalletBalances: ({ address, supportedChains, fetchBalances, enabled, refreshInterval, priceEnabled, }: UseAssetsConfig) => UseAssetsReturn;