Dashboard for user transactions in Stacks, an open-source network of decentralized apps and smart contracts built on Bitcoin.
- Hiro Stacks API and micro-stacks to communicate with Stacks and Hiro Wallet
- Next.js with iron-session to Server Side Render on a persisted state of the Hiro Wallet (minus private key). TODO: read the transactions on SSR instead after this issue in micros-stacks has been fixed. Until then transactions are initially loaded on the client, hence the spinner.
- PlanetScale DB with Prisma ORM to cache transactions, both pending and confirmed
- Hiro WebSocket API Client to update transactions on the client and in cache
On load / sign in / network change the app reads transactions from the cache for the signed in user account, fetches pending transactions from Hiro Stacks API, updates them on the UI and in cache, and finally sets up WebSocket subscriptions for those that are still pending.
On initiated transaction (i.e. Get STX), the app updates the UI, creates a new pending transaction in the cache, and sets up an update subscription for it.
On transaction update event (i.e. transaction confirmed), the app fetches an updated transaction from Hiro Stacks API, updates the UI, updates the transaction in the cache, and clears the subscription.
Deployed at https://stacks-dashboard.vercel.app
Best deploy zero-config to a Vercel project and add PlanetScale DB integration to it.
Copy .env.sample to .env and fill in the env vars. Then run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.