We’re back with another dose of dev progress. This week’s highlight? You can now play the game right in the browser via our demo Storybook — no need to integrate anything just yet.

After last week’s layout and styling adventures, we wrapped the entire game flow into two clean exports:

• A single hook: usePlaceBet

• A React component: <CoinTossGame />

All the on-chain complexity — randomness, wallet checks, error handling, event listening — is baked in. Just import and go.

Here's all it takes to wire up the game component in your app:

const config = createConfig({
  chains: [base],
  transports: { [base.id]: http() },
})

export function CoinTossGamePage() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={new QueryClient()}>
        <OnchainKitProvider chain={base}>
          <BettingConfigProvider value={{ affiliate: "0x0" }}>
            <CoinTossGame />
          </BettingConfigProvider>
        </OnchainKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

That’s it. If your wallet is connected, you can play. If not, OnchainKit handles it.

• Most stable: Desktop browsers with browser wallets (e.g. Coinbase Wallet, MetaMask)

• Mobile: Coming soon — we’re starting Farcaster Frame support!

• Also keeping an eye on Base minikit — hoping to plug into that as well.

In the coming week:

• 📦 Publish the first npm package for easy component installs

• 🎨 Polish token selection and mobile layout

• Begin Farcaster frame integration using Base minikit

The component is real, live, and working—no mockups. And it’s not just for meme sites. Anyone building with on-chain vibes can plug this in and start earning from gameplay.

More soon!