Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Running the playground

The playground is a pnpm workspace inside the SDK repo. Start the dev server, point your browser at it, and connect a wallet.

pnpm install
pnpm --filter @apyx-labs/sdk-playground dev

Opens on http://localhost:5173.

Prerequisites

ToolVersionNotes
Node≥ 20Same requirement as the SDK + CLI.
pnpm≥ 9The repo is a pnpm workspace. corepack enable if not installed.
Browser walletEIP-1193MetaMask or Rabby tested; anything injected as window.ethereum works.

Dev server

From the repo root:

pnpm install
pnpm --filter @apyx-labs/sdk-playground dev

Internally that’s a Vite 6 dev server with hot reload. Edits to example/src/** reflect in the open browser tab without a full refresh.

The dev server links the SDK via the workspace protocol (workspace:*) — changes to src/** in the SDK package itself rebuild on save.

Production build

pnpm --filter @apyx-labs/sdk-playground build
StepWhat it does
tsc --noEmitType-checks the playground (the build script runs typecheck-then-build).
vite buildBundles into example/dist/.
OutputA static directory you can serve from any host.

For a quick local preview of the production bundle:

pnpm --filter @apyx-labs/sdk-playground preview

Connecting a wallet

The header exposes a Connect Wallet button. The injected provider is discovered via window.ethereum — no WalletConnect, no custom modal. If your browser has multiple wallets installed (MetaMask + Rabby + Phantom), whichever resolves window.ethereum first is used.

Without a wallet, the button label flips to “No wallet found” and the page stays in read-only mode. Read panels still populate (RPC reads don’t need a signer).

Choosing a chain

The chain selector drops down two options: Ethereum and Base. Selecting one:

  1. Reconstructs apyx against the new viem chain.
  2. Re-fetches the per-chain default RPC.
  3. Re-runs every read (balances, exchange rate, etc.).
  4. Hides any UI that’s not applicable on the chain (the APY card disappears on Base because apyUSDRateView isn’t deployed there).

Custom RPC

The header’s RPC bar overrides the default per chain. The value is persisted in localStorage keyed by chain — flipping between Ethereum and Base preserves each chain’s URL.

A blank input means “use the default” (the SDK’s built-in public RPC for that chain).

Writes

Once connected:

  1. Click Approve (action panel). MetaMask / your wallet pops up. Confirm.
  2. Watch the tx log for the hash and the receipt status.
  3. Click Deposit with an amount. Same flow.

The action panel always shows the live preview alongside the input (previewDeposit(amount) for deposit, previewRedeem(shares) for redeem). If the preview disagrees with the receipt, the vault rate moved between blocks — that’s normal and not a UI bug.

Tx log

Every transaction shows up with hash, status, block, and gas. Hover the hash to copy; click it to open in Etherscan / Basescan.

Troubleshooting

  • “No wallet found” — install MetaMask / Rabby and reload.
  • Wrong chain banner — the wallet is on a chain other than the one selected in the header. Switch in the wallet UI; the page updates automatically.
  • Reads stale after a write — refresh refetch happens on a 0/2/5/10s schedule after every write. RPC lag on the public default endpoints can take a few seconds to catch up; using a paid RPC eliminates this.
  • CORS error — your custom RPC URL doesn’t allow browser origins. This usually means a private node missing CORS headers; switch to a provider that explicitly allows browser access.