# Ship It: React Integration in 5 Minutes

*ChainHackers Weekly - Developer Notes Entry #4*

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

react, betswirl, sdk, devtools, web3

---

Remember when we said we were "nearly package-ready"? Well, we shipped it. The npm package is live, the React integration is smoother than butter, and we've got a complete demo app deployed on Vercel. Here's how the journey unfolded.

From Storybook to npm
---------------------

Last week we had two games (CoinToss and Dice) living happily in our Storybook demo. This week? They're on npm, ready to drop into any React app.

📦 [**@betswirl/ui on npm**](https://www.npmjs.com/package/@betswirl/ui)

The 5-Minute Integration Challenge
----------------------------------

We wanted to prove that integrating BetSwirl games could be stupidly simple. So we set ourselves a challenge: from zero to deployed casino dApp in 5 minutes. Here's what happened.

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

  

### Minute 1: Create the App

    npm create vite@latest betswirl-ui-react-demo -- --template react-ts
    cd betswirl-ui-react-demo
    npm install

Vite + React + TypeScript. The holy trinity of modern web dev.

### Minute 2: Install BetSwirl

    npm install @betswirl/ui

One package. All the games. All the Web3 complexity handled.

### Minute 3: Wire Up the Providers

Remember our provider jungle from the Storybook days? We cleaned it up:

    // main.tsx
    // Full code: https://github.com/chainhackers/betswirl-ui-react-demo/blob/main/src/main.tsx
    // ... imports for React, Wagmi, OnchainKit, BetSwirl
    import '@betswirl/ui/styles.css'  // Don't forget this!
    
    const queryClient = new QueryClient()
    const config = createConfig({
      chains: [base],
      transports: { [base.id]: http() },
    })
    
    const onChainKitConfig: AppConfig = {
      wallet: {
        display: "modal",
      }
    }
    
    createRoot(document.getElementById('root')!).render(
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <OnchainKitProvider chain={base} config={onChainKitConfig}>
            <BetSwirlSDKProvider initialChainId={base.id}>
              <App />
            </BetSwirlSDKProvider>
          </OnchainKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    )
    

Same providers we've been using, but now they're properly packaged and documented.

### Minute 4: Add a Game

    // App.tsx
    // Full code: https://github.com/chainhackers/betswirl-ui-react-demo/blob/main/src/App.tsx
    import { CoinTossGame } from '@betswirl/ui'
    
    function App() {
      return (
        <div className="App">
          <h1>My Casino dApp</h1>
          <div style={{ margin: '2rem 0' }}>
            <CoinTossGame />
          </div>
        </div>
      )
    }
    

That's it. The game handles wallet connection, betting, on-chain randomness, everything.

### Minute 5: Deploy to Vercel

Push to GitHub, connect to Vercel, click deploy. Done.

🎮 [**Live Demo**](https://betswirl-ui-react-demo.vercel.app)  
💻 [**GitHub Repo**](https://github.com/chainhackers/betswirl-ui-react-demo)

Beyond the 5 Minutes: All Games Live
------------------------------------

Want to see all three games in action? Check out our full demo showcasing CoinToss, Dice, and our latest addition:

  

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

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

🎰 [**Play All Games Demo**](https://betswirl-react-demo.vercel.app/)  
⚡ [**Edit on StackBlitz**](https://stackblitz.com/github/chainhackers/betswirl-ui-react-demo)

What's Different Now?
---------------------

Remember our first post about "stuffing an elephant into a telephone booth"? Well, we found a way. The components are:

*   **Self-contained**: All Web3 logic bundled
    
*   **Theme-aware**: Light/dark/custom themes just work
    
*   **Mobile-ready**: Finally sorted the responsive layouts
    
*   **TypeScript-first**: Full type safety, autocomplete heaven
    

What's Next?
------------

*   **Keno**
    
*   **Token Selector**: v0.2.0 target
    

For the Builders
----------------

If you're thinking about adding games to your dApp:

1.  **Try the demo first**: See if the UX fits your vibe
    
2.  **Check your audience**: BetSwirl supports multiple chains, but components work with one chain at a time
    
3.  **Revenue share is automatic**: 30% of house edge to you, handled on-chain ([see docs](https://www.betswirl.com/affiliate/info))
    
4.  **Join our Discord**: We're helping early integrators personally
    

Ship It Culture
---------------

A few weeks ago, we were picking cat backgrounds in Figma. Now we have a production npm package ready for integration. The lesson? Ship early, iterate in public, see what happens.

**Ready to build?**

    npm install @betswirl/ui

**Need help?**

*   Twitter: [@ChainHackerClan](https://x.com/ChainHackerClan)
    
*   Farcaster channel: [/betswirl](https://farcaster.xyz/~/channel/betswirl)
    
*   Discord: [Join the BetSwirl builders](https://discord.gg/betswirl)

---

*Originally published on [ChainHacker](https://paragraph.com/@chainhacker/betswirl-sdk-react-integration)*