BetSwirlSDKProvider Configuration Reference
This guide explains all parameters you can configure in BetSwirlSDKProvider.
Required Parameters
initialChainId
What it does: Sets which blockchain network your app starts on when the page loads.
Accepted values:
base.id(8453) - Base mainnetpolygon.id(137) - Polygon mainnetarbitrum.id(42161) - Arbitrum mainnetavalanche.id(43114) - Avalanche mainnetbsc.id(56) - BSC mainnet
Example:
<BetSwirlSDKProvider initialChainId={base.id}>supportedChains
What it does: Defines which blockchain networks users can switch between in your app. Must match the chains you configured in wagmi.
Accepted values: Array of chain IDs - must be the same chains you set up in createConfig
Example:
// In wagmi config
const config = createConfig({
chains: [base, polygon, arbitrum],
// ...
})
// In BetSwirlSDKProvider - use the SAME chains
<BetSwirlSDKProvider
supportedChains={[base.id, polygon.id, arbitrum.id]}
>Optional Parameters
affiliate
What it does: Your wallet address to earn 30% commission from all bets placed through your casino.
Accepted values: Any valid Ethereum wallet address (starts with 0x)
Best practice: Use environment variable instead of hardcoding
Example for React (Vite):
// Read from environment variable (recommended)
const affiliateAddress = import.meta.env.VITE_AFFILIATE_ADDRESS
<BetSwirlSDKProvider affiliate={affiliateAddress}>Example for Next.js:
// Read from environment variable (recommended)
const affiliateAddress = process.env.NEXT_PUBLIC_AFFILIATE_ADDRESS
<BetSwirlSDKProvider affiliate={affiliateAddress}>filteredTokens
What it does: Limits which tokens users can select for betting. Without this, all supported tokens will be available.
Accepted values: Array of token contract addresses
Why use it: Simplify UI by showing only popular tokens
Example:
const ALLOWED_TOKENS = [
"0x0000000000000000000000000000000000000000", // ETH
"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // USDC
"0x4ed4E862860beD51a9570b96d89aF5E1B0Efefed", // DEGEN
]
<BetSwirlSDKProvider filteredTokens={ALLOWED_TOKENS}>withExternalBankrollFreebets
What it does: Enables leaderboards from external bankroll providers and exposes their available freebets inside your app so players can join more campaigns.
Accepted values: Boolean
Recommended value: true so users can claim more freebets and access a broader set of leaderboards.
Example for React (Vite):
const bankrollFreebetsEnabled = import.meta.env.VITE_WITH_EXTERNAL_BANKROLL_FREEBETS === 'true'
<BetSwirlSDKProvider withExternalBankrollFreebets={bankrollFreebetsEnabled}>Example for Next.js:
const bankrollFreebetsEnabled = process.env.NEXT_PUBLIC_WITH_EXTERNAL_BANKROLL_FREEBETS === 'true'
<BetSwirlSDKProvider withExternalBankrollFreebets={bankrollFreebetsEnabled}>testMode
What it does: Lets you consume freebets generated in the BetSwirl test environment.
Accepted values: Boolean
Recommended value: false unless you explicitly need to validate test-environment freebets.
Example for React (Vite):
const testMode = import.meta.env.VITE_TEST_MODE === 'true'
<BetSwirlSDKProvider testMode={testMode}>Example for Next.js:
const testMode = process.env.NEXT_PUBLIC_TEST_MODE === 'true'
<BetSwirlSDKProvider testMode={testMode}>Leaderboard Integration
Why this is needed: When a user is playing DiceGame but opens a leaderboard that requires CoinToss, the DiceGame component cannot switch itself to CoinTossGame. You need to handle game switching at a higher level.
The onPlayNow Callback
The onPlayNow callback lets you respond when users click “Play now” in leaderboards. It receives a PlayNowEvent:
type PlayNowEvent = {
chainId: CasinoChainId // Required network for the leaderboard
games: LEADERBOARD_CASINO_RULES_GAME[] // Which games are allowed
tokens: Token[] // Which tokens are accepted
}For multi-game apps: This callback is required for “Play now” to work correctly. Without it, the button only closes the panel but doesn’t switch to the correct game.
For production: You’ll need to implement proper game switching. This depends on your state management approach (Context, Redux, router, etc.).
Example Implementation
The simplest approach is to log the event data during development:
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
}}>
{children}
</LeaderboardProvider>State Management Considerations
Since game state is typically in your main App component but LeaderboardProvider is in the providers file, you have several options:
- Context API: Create a game context to share state across components
- State Management Library: Use Redux, Zustand, or similar
- URL-based routing: Use React Router and switch games via URL changes
- Event emitter: Use a custom event system to communicate between components
Choose the approach that best fits your application architecture.
Custom Branding
Customize theme, colors and backgrounds to match your brand.
Theme
Choose between "light", "dark", or "system" (auto-detects user preference)
Colors
You can customize these CSS variables:
--primary- Main brand color (buttons, highlights)--play-btn-font- Text color on Play button--connect-btn-font- Text color on Connect Wallet button--game-window-overlay- Overlay color for game window--background- Background color
Background Images
Any image URL or local file from public/ folder
Example Configuration
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",
}
<DiceGame {...gameProps} />
<CoinTossGame {...gameProps} />
<RouletteGame {...gameProps} />