> ## Documentation Index
> Fetch the complete documentation index at: https://developers.paxoslabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Directory Structure

> Recommended project layout for Amplify Earn integrations

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.

```text theme={null}
├─ .env.local             # Privy App ID, Amplify API key, RPC URLs (never commit)
├─ package.json
├─ src/
│  ├─ app/
│  │  ├─ App.tsx          # Top-level routes, feature shells
│  │  └─ providers.tsx    # React providers (PrivyProvider, AmplifyProvider, QueryClient)
│  ├─ components/
│  │  ├─ DepositForm.tsx
│  │  ├─ WithdrawForm.tsx
│  │  └─ StatusBanner.tsx
│  ├─ hooks/
│  │  ├─ useAmplify.ts    # initAmplifySDK + helper wrappers
│  │  └─ useBalances.ts   # data fetching with react-query / wagmi
│  ├─ lib/
│  │  ├─ privy.ts         # Privy login/logout helpers
│  │  └─ viem.ts          # Public/wallet client factories
│  ├─ pages/              # Optional route segments (Next.js / Remix)
│  ├─ styles/
│  └─ main.tsx            # Vite entry point
├─ tests/                 # Component and integration tests
└─ docs/                  # Internal runbooks and integration notes
```

### 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](./quickstart) to wire the providers and hooks.
* Keep business logic aligned with the primitives in [Functions](./functions/index).
* For opinionated UI integrations check the [Examples](./examples/index).\*\*\*