Playground Overview
A browser-based developer playground for @koed_jang/apyx-sdk. Connect
an injected wallet, point at any RPC, and exercise every SDK surface
against Ethereum or Base mainnet — without writing a script.
Source lives at example/ in the repo, deployed (in #91) to a
public Vercel URL.
Why a playground
Three audiences:
- SDK consumers evaluating the package before integrating — clicking through every reading and writing surface in five minutes is faster than wiring a test app.
- Maintainers validating a release end-to-end — the same UI also acts as a smoke harness for the published bundle.
- Browser-vs-Node parity — the playground is the only place the browser ESM bundle is exercised at scale; the CLI exercises the Node CJS bundle. Bugs in either show up here.
What the page looks like
flowchart TB
subgraph Header
HC[Chain selector] --- HW[Wallet connect]
HW --- HR[RPC bar]
end
subgraph Body
AC[Account panel<br/>balances, allowance, share holdings]
RP[Rate panel<br/>4 stat cards: exchange rate / total assets / APY / annualized yield]
AP[Action panel<br/>approve / deposit / redeem with previews]
RC[Raw Read Console<br/>arbitrary readContract against the exported ABIs]
TX[Tx log<br/>hash / status / block / gas]
end
Header --> Body
Header lives at the top, accessible from every panel.
What it exercises
| Surface | How |
|---|---|
createApyxClient | Reconstructed on every chain switch and on every RPC override. |
http transport | Reads always go through http(rpcUrl). |
custom(window.ethereum) transport | Writes go through the user’s wallet. |
apxUSD reads | Account panel — balance, decimals, allowance for the active vault. |
apxUSD.approve | Action panel before a deposit, when allowance is insufficient. |
apyUSD reads | Rate panel + account panel. |
apyUSD.deposit / apyUSD.redeem | Action panel, with previewDeposit / previewRedeem quotes shown alongside. |
apyUSDRateView | Rate panel — APY card; shown only on chains where the rate-view contract is deployed. |
Exported ABIs (ApxUSDAbi, ApyUSDAbi, ApyUSDRateViewAbi) | Raw Read Console — call any function name from any of the three ABIs. |
| Per-chain RPC override | RPC bar — value persisted in localStorage so refreshes preserve it. |
UnsupportedChainError | Triggered by switching the wallet to e.g. Sepolia; the page renders a friendly empty state. |
Status
Prototype, deployed alongside the SDK package itself. Same dist-tag, same versioning. Stable URL once #91 lands.
Next
- Running locally —
pnpm install && pnpm --filter @apyx-labs/sdk-playground dev. - Coverage matrix — the table that maps SDK surfaces to UI elements, with the Playwright spec that verifies each.