# First Game Component Goes Live!

*ChainHackers Weekly*

By [ChainHacker](https://paragraph.com/@chainhacker) · 2025-05-28

---

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](http://demo.betswirl-sdk.chainhackers.xyz/) — no need to integrate anything just yet.

What We Shipped
---------------

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.

  

![](https://storage.googleapis.com/papyrus_images/abbd9461fa2f3e4e3a797615608eb054.png)

Example: Integration is Tiny
----------------------------

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.

Developer Notes
---------------

*   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](https://www.base.org/builders/minikit) — hoping to plug into that as well.
    

Next Up
-------

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](https://www.base.org/builders/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!

---

*Originally published on [ChainHacker](https://paragraph.com/@chainhacker/game-component-goes-live)*