Skip to content

docs(tutorial): add Building the Frontend section to Clown Beatdown#134

Merged
mHaines9219 merged 3 commits intomainfrom
docs/add-frontend-tutorial
Mar 25, 2026
Merged

docs(tutorial): add Building the Frontend section to Clown Beatdown#134
mHaines9219 merged 3 commits intomainfrom
docs/add-frontend-tutorial

Conversation

@mHaines9219
Copy link
Copy Markdown
Contributor

Summary

  • Adds a new Building the Frontend section to the Clown Beatdown tutorial (3 chapters)
  • All code snippets are verbatim from the seismic-starter repo — no simplified/idealized code
  • Ch 1: Vite config, provider stack (wagmi + RainbowKit + ShieldedWalletProvider with config/options), main.tsx
  • Ch 2: useContract, useContractClient (Hex types, hexToString, helper functions), useGameActions (promise chains, toast notifications, ExplorerToast)
  • Ch 3: ShowClown (useAnimation, useMemo), ButtonContainer (responsive sx), ClownPuncher (Backdrop/Fade splash, round tracking), EntryScreen (onEnter, cblogo), WalletConnectButton (ConnectButton.Custom, WalletIcon SVG)
  • References seismic-starter repo for public assets (images + audio)

Test plan

  • Verify SUMMARY.md links resolve for new frontend section
  • Lychee link checker passes (CI)
  • Diff each code block against seismic-starter source files to confirm they match

Add a new tutorial section covering the React frontend:
- Ch 1: Project setup with Vite, seismic-react, wagmi, RainbowKit provider stack
- Ch 2: Contract hooks with twrite/read/tread namespace explanation
- Ch 3: Game UI components (clown sprite, action buttons, wallet connect)
…er code

Replace all simplified/idealized code snippets with exact source from
seismic-starter repo. Key fixes:
- App.tsx: correct imports, chain config, ShieldedWalletProvider props,
  onAddressChange handler, BrowserRouter routing
- Add main.tsx with ThemeProvider, Redux, ToastContainer setup
- useContract: import * as with type assertion, arrow function
- useContractClient: useState/useEffect for loaded, helper functions,
  Hex types, hexToString for rob(), txUrl/addressUrl
- useGameActions: fetchGameRounds, resetGameState, promise chains with
  toast notifications, ExplorerToast
- ShowClown: useAnimation hook, useMemo, clown_shaking.png
- ButtonContainer: type not interface, handleX props, Box ActionButton,
  responsive sx styling
- ClownPuncher: useRef round tracking, onRob validation, Backdrop+Fade
  splash screens, responsive Container layout
- EntryScreen: onEnter prop, isAnimating, cblogo.png
- WalletConnectButton: full ConnectButton.Custom, WalletIcon SVG
- Add public assets copy instruction referencing seismic-starter repo
@mHaines9219 mHaines9219 merged commit d268a6e into main Mar 25, 2026
2 checks passed
@mHaines9219 mHaines9219 deleted the docs/add-frontend-tutorial branch March 25, 2026 19:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant