nexus-elements-view-history
Nexus Elements - View History
Install
- Install widget:
npx shadcn@latest add @nexus-elements/view-history
- Ensure
NexusProvideris installed and initialized before rendering.
Required setup before rendering
- Ensure
useNexus().nexusSDKis initialized. - Ensure wallet is connected before expecting history data.
Initialize SDK (required once per app)
- On wallet connect, resolve an EIP-1193 provider and call
useNexus().handleInit(provider). - Wait for
useNexus().nexusSDKbefore expecting history fetches. - Re-run init after reconnect if wallet session resets.
Render widget
"use client";
import ViewHistory from "@/components/view-history/view-history";
export function HistoryPanel() {
return <ViewHistory viewAsModal={false} className="w-full" />;
}
Live prop contract
viewAsModal?(defaulttrue): modal trigger vs inline list.className?: styling for trigger in modal mode.
SDK flow details (under the hood)
- Fetching:
- calls
sdk.getMyIntents() - stores full history and paginates client-side (
ITEMS_PER_PAGE = 10)
- calls
- Status derivation:
- fulfilled ->
Fulfilled - deposited ->
Deposited - refunded ->
Refunded - fallback ->
Failed
- fulfilled ->
- Refresh integration:
- listens for
nexus:intent-history:refresh - bridge/transfer hooks dispatch this event after successful completion
- listens for
Error and loading behavior
history === nullrenders loading state.- fetch failure sets
loadErrorand renders retry UI. - retry button re-runs
getMyIntentsfetch.
E2E verification
- Open modal and confirm history fetch on open.
- Scroll to bottom and confirm incremental pagination loads.
- Complete a bridge/transfer flow and confirm history refreshes.
- Disconnect wallet and verify empty/error handling remains stable.
Common failure cases
- No history displayed despite transactions:
- verify wallet connected to same account used for intents.
- Infinite spinner risk:
- ensure fetch errors are surfaced and retry path is shown.
More from availproject/nexus-elements
nexus-elements-deposit
Integrate the Deposit element for swap-plus-execute deposit flows in React/TypeScript apps. Use when installing or debugging destination-fixed deposits, execute call builders, swap-intent confirmation UX, and `sdk.swapAndExecute` progress from quote to completion.
26nexus-elements-overview
End-to-end integration guide for Nexus Elements in any TypeScript/React codebase. Use when setting up Nexus Elements from scratch, choosing which widget to install, wiring NexusProvider + wallet initialization, or validating bridge/transfer/swap/deposit/history behavior in production-like flows.
24nexus-elements-common
Use shared Nexus Elements hooks, transaction-step helpers, and constants to build custom Nexus UX. Use when extending widgets or implementing custom bridge/transfer/swap/deposit flows that need debouncing, polling, step orchestration, or Nexus error normalization.
23nexus-elements-nexus-provider
Install and configure NexusProvider for Nexus Elements with full SDK lifecycle wiring. Use when setting up or debugging SDK initialization, wallet/provider connection, hook attachment (intent/allowance/swapIntent), balance preloads, exchange-rate support, and provider context consumption in React/TypeScript apps.
23nexus-elements-bridge-deposit
Integrate the Bridge Deposit element for bridge-plus-execute deposit flows in React/TypeScript apps. Use when installing or debugging source-chain constrained deposits, bridge+execute simulation, intent/allowance approvals, and `sdk.bridgeAndExecute` transaction execution.
22nexus-elements-fast-bridge
Integrate the FastBridge element for intent-based cross-chain bridge UX in React/TypeScript apps. Use when installing or debugging self-bridge flows, source-chain selection, allowance gating, step progress events, and `sdk.bridge` execution end-to-end.
21