Stellar dApp Starter — powered by Blux

A Vite + React + TypeScript template with @bluxcc/react wired up. All of it lives in one file: src/blux.tsx.

npm install
npm run dev

Make it yours

1. Set your app id. Create an app at dashboard.blux.cc and put the id at the top of src/blux.tsx. A demo id ships with the template so it runs out of the box.

   export const APP_ID = 'your-app-id'

2. Tweak the config right below it — networks, login methods, explorer, theme.

3. Delete the demo. Everything under the 3 · DEMO banner is a showcase of every Blux feature. Read it, copy what you need, then delete it along with src/demo.css and point main.tsx at your own root component instead of <BluxDemo />.

Layout

src/
├─ blux.tsx    # app id + config, helpers, and the whole demo  ← the only file that matters
├─ main.tsx    # <BluxProvider> — it has to wrap the app, so it lives here
├─ demo.css    # demo styles (delete with the demo)
└─ index.css   # base tokens & reset

BluxProvider also supplies the TanStack QueryClient the data hooks use — you don't need your own <QueryClientProvider>.

What the demo covers

useBlux (login, logout, profile, fundMe, signMessage, signTransaction, sendTransaction, signAuthEntry) · useNetwork · useSwitchNetwork · setAppearance · useTransfer · useSwap · useAccount · useBalances · useTransactions · usePayments · useReadContracts · useWriteContract · useSacAddress · useTokenMetadata · ToScVal · useLedgers + the rest of the Horizon read hooks.

Scripts

Command	What it does
npm run dev	Dev server with HMR
npm run build	Typecheck (tsc -b) and build
npm run preview	Preview the production build
npm run lint	Run Oxlint

Notes

• Defaults to testnet. Fund an account from friendbot or the profile modal's "Add funds" flow.
• Social logins must be enabled on your Blux dashboard before they appear in the login modal.

Docs: https://docs.blux.cc · Hooks: https://docs.blux.cc/react/hooks · Dashboard: https://dashboard.blux.cc