Skip to main content
A consistent file layout keeps vault logic, wallet plumbing, and UI concerns easy to reason about. The structure below assumes a Vite + React front end with Privy for authentication and viem for EVM tooling, but the same patterns work for Next.js or other frameworks.

​
Separation of Concerns

  • Providers layer – initialize Privy, React Query, and the Amplify SDK once. Re-export hooks for the rest of the app.
  • Hooks layer – wrap SDK helpers (prepareDepositTxData, prepareBulkWithdrawTxData) with domain-specific logic and query invalidation.
  • Components layer – pure UI components that receive prepared data plus callbacks for execution.
  • Lib layer – interaction helpers for viem, Privy, or analytics that should not depend on React state.

​
Server-Side Usage

If you execute transactions from a backend service, mirror the same separation:
  • server/app.ts – Express/Fastify entry point.
  • server/clients/amplify.ts – initAmplifySDK and helper wrappers.
  • server/services/deposits.ts – orchestrates approvals, permits, or withdrawals.

​
Next Steps

  • Follow the Quickstart to wire the providers and hooks.
  • Keep business logic aligned with the primitives in Functions.
  • For opinionated UI integrations check the Examples.