React Integration Guide

This guide walks you through creating a casino application using BetSwirl’s React UI library.

What you’ll build: A fully functional multi-game with multi-chain support, custom theming, and background image - exactly like our live demo .

Time: ~10 minutes

Prerequisites

Node.js v18+
Git
GitHub account
Vercel account

Build Your Casino App

Fork Repository

Step 1: Fork Repository

Fork this repository: https://github.com/BetSwirl/ui-react-demo

Click the “Fork” button in the top right corner to create your own copy.

Step 2: Clone and Run


# Clone your forked repository
git clone https://github.com/YOUR_USERNAME/ui-react-demo.git
cd ui-react-demo
 
# Install dependencies
npm install
 
# Create .env file from template
cp .env.example .env

You can fill .env now or leave it empty - how to configure affiliate address and custom RPC is explained below in Add your affiliate address & custom RPCs section.


# Start dev server (your .env file must be empty or configured to make it working)
npm run dev

Open in browser http://localhost:5173

From Scratch

Step 1: Create Project


# node --version
# v24.2.0
 
npm create vite@latest betswirl-ui-react-demo -- --template react-ts

When prompted:

Use rolldown-vite (Experimental)? → Select No
Install with npm and start now? → Select Yes

This will automatically install dependencies and start the dev server. Open http://localhost:5173 in your browser - you should see the default Vite + React welcome page.

Stop the dev server (Ctrl+C) and navigate to the project directory:


cd betswirl-ui-react-demo

Step 2: Install BetSwirl UI React sdk


npm i @betswirl/ui-react

NPM package: @betswirl/ui-react on npm

Step 3: Setup Providers

Replace the entire content of src/main.tsx with:


import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { OnchainKitProvider, type AppConfig } from '@coinbase/onchainkit'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { http, type Hex } from 'viem'
import { WagmiProvider, createConfig } from 'wagmi'
import { base, polygon, arbitrum } from 'wagmi/chains'
import {
  BalanceProvider,
  BetSwirlSDKProvider,
  FreebetsProvider,
  LeaderboardProvider,
  TokenProvider,
  type TokenWithImage
} from '@betswirl/ui-react'
import './index.css'
import '@betswirl/ui-react/styles.css'
import App from './App.tsx'
 
const queryClient = new QueryClient()
 
// Use custom RPC if provided in .env, otherwise use default
const baseRpc = import.meta.env.VITE_BASE_RPC_URL
const polygonRpc = import.meta.env.VITE_POLYGON_RPC_URL
const arbitrumRpc = import.meta.env.VITE_ARBITRUM_RPC_URL
const affiliateAddress = import.meta.env.VITE_AFFILIATE_ADDRESS
const testMode = import.meta.env.VITE_TEST_MODE == 'true'
 
const config = createConfig({
  chains: [base, polygon, arbitrum],
  transports: {
    [base.id]: baseRpc ? http(baseRpc) : http(),
    [polygon.id]: polygonRpc ? http(polygonRpc) : http(),
    [arbitrum.id]: arbitrumRpc ? http(arbitrumRpc) : http(),
  },
})
 
const onChainKitConfig: AppConfig = {
  wallet: {
    display: "modal",
  }
}
 
 
// Optional: Limit available tokens to specific ones
const ALLOWED_TOKENS = [
  "0x0000000000000000000000000000000000000000", // gas token on all chains
  "0x94025780a1aB58868D9B2dBBB775f44b32e8E6e5", // BETS on all chains
  "0x4ed4E862860beD51a9570b96d89aF5E1B0Efefed", // DEGEN ton Base
  "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // USDC on Base
] as Hex[]
 
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <OnchainKitProvider chain={base} config={onChainKitConfig}>
          <BetSwirlSDKProvider
            initialChainId={base.id} // set the initial chain
            supportedChains={[base.id, polygon.id, arbitrum.id]} // limit supported chains
            filteredTokens={ALLOWED_TOKENS} // Optional: limit available tokens, let empty if you want to show all tokens
            affiliate={affiliateAddress} // important to set to be able to receive your affiliate rewards
            testMode={testMode} // Optional: set to true to enable test mode
            withExternalBankrollFreebets={true} // Optional: enable your users to use freebets created by bankroll providers on your app
          >
            <TokenProvider>
              <BalanceProvider>
                <FreebetsProvider>
                  <LeaderboardProvider onPlayNow={() => {}}>
                    <App />
                  </LeaderboardProvider>
                </FreebetsProvider>
              </BalanceProvider>
            </TokenProvider>
          </BetSwirlSDKProvider>
        </OnchainKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </StrictMode>,
)

Note: For information about available networks and tokens, see How to Check Available Tokens.

What’s happening here:

Wagmi & React Query: Manage blockchain connections and data fetching
OnchainKit: Provides wallet connection UI
BetSwirl Providers: Handle betting logic, token management, freebets, and leaderboards
Multi-chain support: Base, Polygon, and Arbitrum configured
Custom RPCs: Fallback to default public RPCs if env variables not set
Token filtering: Limits available tokens to DEGEN, ETH, USDC, and BETS (you can change this list or remove to show all tokens - see Configuration section below)

Step 4: Add Game Component

Replace the entire content of src/App.tsx with:


import {DiceGame} from '@betswirl/ui-react'
 
function App() {
    return <DiceGame />
}
 
export default App

Download .env.example from the repository, save it to your project root, and create .env:


cp .env.example .env

You can fill .env now or leave it empty - how to configure affiliate address and custom RPC is explained below in Add your affiliate address & custom RPCs section.

You can test it now:


npm run dev

Open http://localhost:5173 to connect wallet and place bets.

Step 5: Add Affiliate Address

Add your affiliate address to earn 30% of house edge revenue from every bet placed through your app.

Update src/main.tsx - add this line at the top with other environment variables if you don’t have it already:


const affiliateAddress = import.meta.env.VITE_AFFILIATE_ADDRESS as `0x${string}` | undefined

Ensure you have affiliate prop to BetSwirlSDKProvider:


<BetSwirlSDKProvider
  initialChainId={base.id}
  supportedChains={[base.id, polygon.id, arbitrum.id]}
  affiliate={affiliateAddress}  // Add this line
  // ... other props
>

Learn more: Affiliate Program - track earnings, create freebets, manage leaderboards, and claim revenue.

Step 6: Add Multiple Games

Add navigation to switch between Dice, Coin Toss, and Roulette.

1. Fix button styles in src/index.css:

Find the button section and replace with:


button {
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
button:focus-visible {
  outline: 2px solid rgba(225, 159, 31, 0.5);
  outline-offset: 2px;
}

2. Update src/App.tsx:

Replace the entire file with:


import { useState } from 'react'
import { CoinTossGame, DiceGame, RouletteGame } from '@betswirl/ui-react'
import { CASINO_GAME_TYPE, labelCasinoGameByType } from '@betswirl/sdk-core'
 
function App() {
  const [game, setGame] = useState<CASINO_GAME_TYPE>(CASINO_GAME_TYPE.DICE)
 
  return (
    <div>
      <nav style={{
        display: 'flex',
        gap: '8px',
        justifyContent: 'center',
        padding: '12px 0',
        marginBottom: '12px',
      }}>
          {([CASINO_GAME_TYPE.DICE, CASINO_GAME_TYPE.COINTOSS, CASINO_GAME_TYPE.ROULETTE] as const).map((g) => (
            <button
              key={g}
              onClick={() => setGame(g)}
              disabled={game === g}
            >
              {labelCasinoGameByType[g]}
            </button>
          ))}
      </nav>
 
        {game === CASINO_GAME_TYPE.DICE && <DiceGame />}
        {game === CASINO_GAME_TYPE.COINTOSS && <CoinTossGame />}
        {game === CASINO_GAME_TYPE.ROULETTE && <RouletteGame />}
    </div>
  )
}
 
export default App

See Step 8.3: Custom Branding to improve the design of the buttons.

Step 7: Leaderboard Integration (Optional)

Enable the “Play Now” button in leaderboards to switch between games.

In src/main.tsx, add the import and callback:


import { type PlayNowEvent } from '@betswirl/ui-react'
 
<LeaderboardProvider onPlayNow={(event: PlayNowEvent) => {
  console.log('Leaderboard requires:', event.games)
  console.log('On chain:', event.chainId)
  console.log('With tokens:', event.tokens)
  // TODO: Implement game switching based on your app architecture
}}>

Step 8: Custom Branding

Learn more: Custom Branding

1. Add background images:

Download two background images - one for the page and one for the game component:

Page background: page-bg.png
Game background: game-bg.png

Save both images to the public/ folder:


betswirl-ui-react-demo/
├── public/
│   ├── page-bg.png   ← Background for entire page
│   └── game-bg.png   ← Background for game component
├── src/
└── ...

2. Customize game components in your src/App.tsx:

Add custom theme and background image props.

First, add gameProps object after the game state:


function App() {
  const [game, setGame] = useState<CASINO_GAME_TYPE>(CASINO_GAME_TYPE.DICE)
 
  const gameProps = {
    theme: "dark" as const,
    customTheme: {
      "--primary": "rgb(225 159 31)",
      "--play-btn-font": "rgb(74 41 24)",
    } as React.CSSProperties,
    backgroundImage: "/game-bg.png",
  }

Then, update the games to use these props:

Change from:


{game === CASINO_GAME_TYPE.DICE && <DiceGame />}
{game === CASINO_GAME_TYPE.COINTOSS && <CoinTossGame />}
{game === CASINO_GAME_TYPE.ROULETTE && <RouletteGame />}

To:


{game === CASINO_GAME_TYPE.DICE && <DiceGame {...gameProps}  />}
{game === CASINO_GAME_TYPE.COINTOSS && <CoinTossGame {...gameProps} />}
{game === CASINO_GAME_TYPE.ROULETTE && <RouletteGame {...gameProps} />}

Your complete src/App.tsx should look like this:


import { useState } from 'react'
import { CoinTossGame, DiceGame, RouletteGame } from '@betswirl/ui-react'
import { CASINO_GAME_TYPE, labelCasinoGameByType } from '@betswirl/sdk-core'
 
function App() {
  const [game, setGame] = useState<CASINO_GAME_TYPE>(CASINO_GAME_TYPE.DICE)
 
  const gameProps = {
    theme: "dark" as const,
    customTheme: {
      "--primary": "rgb(225 159 31)",
      "--play-btn-font": "rgb(74 41 24)",
    } as React.CSSProperties,
    backgroundImage: "/game-bg.png",
  }
 
  return (
    <div>
      <nav style={{
        display: 'flex',
        gap: '8px',
        justifyContent: 'center',
        padding: '12px 0',
        marginBottom: '12px',
      }}>
        {([CASINO_GAME_TYPE.DICE, CASINO_GAME_TYPE.COINTOSS, CASINO_GAME_TYPE.ROULETTE] as const).map((g) => (
          <button
            key={g}
            onClick={() => setGame(g)}
            disabled={game === g}
          >
            {labelCasinoGameByType[g]}
          </button>
        ))}
      </nav>
 
    {game === CASINO_GAME_TYPE.DICE && <DiceGame {...gameProps}  />}
    {game === CASINO_GAME_TYPE.COINTOSS && <CoinTossGame {...gameProps} />}
    {game === CASINO_GAME_TYPE.ROULETTE && <RouletteGame {...gameProps} />}
    </div>
  )
}
 
export default App

3. Style navigation buttons:

Replace the <nav> section in src/App.tsx with custom styled buttons:


<nav style={{
  display: 'flex',
  gap: '8px',
  justifyContent: 'center',
  padding: '12px 0',
  marginBottom: '12px',
}}>
  {([CASINO_GAME_TYPE.DICE, CASINO_GAME_TYPE.COINTOSS, CASINO_GAME_TYPE.ROULETTE] as const).map((g) => (
    <button
      key={g}
      onClick={() => setGame(g)}
      style={{
        padding: '8px 16px',
        background: game === g ? 'rgb(225 159 31)' : 'rgba(255, 255, 255, 0.05)',
        color: game === g ? 'rgb(74 41 24)' : 'rgba(255, 255, 255, 0.6)',
        border: game === g ? 'none' : '1px solid rgba(255, 255, 255, 0.1)',
        borderRadius: '6px',
        fontSize: '14px',
        fontWeight: '500',
        transition: 'all 0.2s',
        outline: 'none',
      }}
    >
      {labelCasinoGameByType[g]}
    </button>
  ))}
</nav>

4. Add page background style to src/index.css:

Open src/index.css and add these styles to the body section:


body {
  width: 100%;
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 328px;
  min-height: 100vh;
  background-image: url('/page-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
 
#root {
  margin: 0 auto;
  display: flex;
  align-items: center;
}

Step 9: Run Your Casino


npm run dev

Open in browser http://localhost:5173

Step 10: Push to GitHub

Before deploying, you need to push your code to GitHub.

1. Initialize Git and commit your code:


git init
git add .
git commit -m "feat: initial casino setup"

2. Create a new repository on GitHub:

Go to github.com and sign in
Click the ”+” button in top right → “New repository”
Repository name: my-casino-app (or any name you prefer)
Make it Private
Do not initialize with README, .gitignore, or license
Click “Create repository”

3. Connect your local project to GitHub:

GitHub will show you commands after creating the repository. Copy and run them:


git remote add origin https://github.com/YOUR_USERNAME/my-casino-app.git
git branch -M main
git push -u origin main

Replace YOUR_USERNAME with your GitHub username.

4. Verify: Refresh the GitHub page - you should see your code uploaded.

What You Have Now

Your React casino application is ready with the following features already configured:

BetSwirl SDK integration with support for Base, Polygon, Arbitrum, BSC and Avalanche
OnchainKit wallet connection
Multiple games with navigation (Dice, Coin Toss, Roulette)
Custom theming and branding with gold accents and dark theme
Background images for page and game
Freebet system for user promotions
Leaderboard support for competitive tournaments
Token selection with filtering for ETH, BETS, DEGEN and USDC

Next steps: Deploy to Vercel and add your affiliate address to start earning 30% commission from all bets.

Deploy to Vercel

Now deploy your casino to the web and get a public URL.

1. Sign up on Vercel: Go to vercel.com → “Sign Up” → “Continue with GitHub” → Authorize access

2. Create new project: Click “Add New…” → “Project” → Find my-casino-app → “Import”

3. Configure and deploy: Vercel auto-detects Vite settings. Leave defaults and click “Deploy”

4. Wait for build to complete (1-2 minutes), then copy your production URL: https://my-casino-app.vercel.app

5. Test your live casino: Open the URL, connect wallet, and place a bet.

What’s next: Every git push automatically deploys. GitHub now shows a “Deployments” tab with deployment history and status checks.

Add your affiliate address & custom RPCs

As an affiliate, you earn 30% of house edge revenue from every bet placed through your casino. Add your wallet address to start earning, and configure custom RPC endpoints for better performance.

Learn more: Affiliate Program - track earnings, create freebets, manage leaderboards, and claim revenue.

1. Add environment variables to Vercel:

Go to your project on vercel.com
Click “Settings” → “Environment Variables”
Add your affiliate address (required):

Name	Value
`VITE_AFFILIATE_ADDRESS`	Your wallet address (to earn 30% commission)

Optional: Add custom RPC endpoints for better performance and reliability. Without these, the app uses free public RPCs which may be slower or rate-limited:

Name	Value
`VITE_BASE_RPC_URL`	Your Base RPC URL
`VITE_POLYGON_RPC_URL`	Your Polygon RPC URL
`VITE_ARBITRUM_RPC_URL`	Your Arbitrum RPC URL
`VITE_BSC_RPC_URL`	Your BSC RPC URL
`VITE_AVALANCHE_RPC_URL`	Your Avalanche RPC URL

RPC providers: Alchemy , Infura , QuickNode (most offer free tiers)

Optional: Enable test mode (for testing on testnet chains):

Name	Value
`VITE_TEST_MODE`	`true` or `false`

Click “Save” after adding variables.

2. Deploy changes:

Once you saved the new environment variables, Vercel will automatically ask you to redeploy the project.

3. Check your earnings:

Once deployed, track your affiliate revenue:

Go to Revenues Dashboard
Connect the same wallet you used for VITE_AFFILIATE_ADDRESS
View your earnings in real-time (30% of house edge from each bet)
Click “Claim” to withdraw your earnings

Optional Enhancements

The base setup above gives you a fully functional casino. Below are optional features you can add to enhance your application.

How to Add Multiple Games - Switch between Dice, CoinToss, Roulette and more
How to Add a Chain - Add or change supported blockchain networks
How to Check Available Tokens - Check which tokens are available for betting
BetSwirlSDKProvider Configuration Reference - All BetSwirlSDKProvider parameters, Leaderboard Integration, Custom Branding

—

Example Result

Demo Github repository: github.com/BetSwirl/betswirl-ui-react-demo
Live Demo: ui-react-demo.betswirl.com

StoryBook: ui-react-storybook.betswirl.com