Betswirl demonstrates game integration through a React app with separate affiliate and RPC settings

Last updated Mon 19 Oct 2026

Betswirl provides a React demo for integrating its casino game library through application settings. The project uses @betswirl/ui-react and documents an affiliate address, optional custom RPC endpoints, and an optional test-mode flag. The endpoint fields cover Base, Polygon, Arbitrum, BSC, and Avalanche. These settings serve different purposes: an affiliate address designates the wallet for affiliate revenue attribution, while an RPC endpoint supplies a connection to a particular blockchain. Adapting the demo involves matching those values to the application code that reads them. Starting its local development server is also separate from selecting the SDK's test mode.

Table of contents

The React Project and Its Game Library

The React project hosts the application, and @betswirl/ui-react supplies the game UI library. The surrounding project contains the environment configuration and development scripts. The library consumes the options that the application passes into its integration. Editing an environment file therefore changes an input to the application; the code must actually read that input for it to affect the integration.

An RPC endpoint specifies the application's connection to a network, leaving game randomness outside the scope of that endpoint setting.

Where Does the React Demo Store Local Settings?

The demo's local settings belong in a .env file at the project root, using the documented VITE_ identifiers. Preserve their spelling and underscores because the application reads distinct entries for the affiliate address, network endpoints, and test-mode flag.

How Does the Affiliate Address Reach the Library?

The VITE_AFFILIATE_ADDRESS value reaches the game integration through the affiliate property of BetSwirlSDKProvider. The abbreviated address in the demo instructions is a placeholder, so copying it literally does not supply a complete wallet address.

The affiliate field calls for a wallet address, which identifies a wallet without supplying its private signing information. A private key or recovery phrase does not belong in that field.

RPC Overrides and Enabled Networks

The demo lists optional Remote Procedure Call (RPC) settings for Base, Polygon, Arbitrum, BSC, and Avalanche. Each endpoint field concerns communication with its named network.

Chain Configuration

The React Integration Guide, last updated November 7, 2025, configures Base, Polygon, and Arbitrum in its setup code. That specific configuration differs from the README's broader list of endpoint fields.

Initial Chain

The initialChainId property sets the SDK provider's initial network in the configured application.

Supported Chains

The supportedChains property defines the networks that users can switch between, matching the chains and transports in the connection configuration. These choices remain limited to networks supported by the SDK.

Endpoint Variables

Base uses VITE_BASE_RPC_URL, Polygon uses VITE_POLYGON_RPC_URL, and Arbitrum uses VITE_ARBITRUM_RPC_URL. BSC and Avalanche have their own entries, VITE_BSC_RPC_URL and VITE_AVALANCHE_RPC_URL, which require endpoints for their respective networks.

The dated setup code selects a default transport when a custom RPC value is absent, and uses the supplied endpoint when present. Extra endpoint entries alone do not register extra chains.

What Does the Optional Test-Mode Flag Control?

The BetSwirlSDKProvider Configuration Reference, last updated November 7, 2025, defines testMode as support for consuming test-environment freebets. The React setup enables it when VITE_TEST_MODE equals the string true, while the demo instructions show VITE_TEST_MODE="false".

The flag addresses test-environment freebets; network selection still uses the separately configured chain lists. Starting the local development server does not itself enable this SDK option.

Development Commands and Configuration Changes

The demo documents npm install for installing project dependencies and npm run dev for starting local development. Run those commands from the application project, where its package configuration and scripts reside.

Open full-size image

Vite loads environment files when it starts, so local environment edits require a server restart. A production build embeds environment values at build time. Changing an already deployed configuration therefore requires rebuilding and deploying the updated application.

The existing browser bundle retains its built values until replacement files reach the browser.

Browser-Visible Configuration and RPC Privacy

Vite exposes environment variables with the VITE_ prefix in client-side code. A value placed in .env remains visible after bundling if it uses that prefix, including a provider credential embedded in a custom RPC endpoint.

Custom endpoint credentials must be suitable for browser exposure, and a private server credential should never become a client configuration value.

Choosing Between an Address Change and an Endpoint Change

An affiliate-address change affects the address passed to the library, while an RPC replacement changes the connection for its configured network. Keeping the same chain and replacing its endpoint requires a different adjustment from enabling another supported chain.

For a different affiliate address, change VITE_AFFILIATE_ADDRESS and preserve the provider's affiliate binding.
For a different RPC on an enabled network, change that network's endpoint variable.
For an additional SDK-supported network, align the chain, transport, and provider's supported list.
For test-environment freebets, use the dedicated SDK flag, keeping network selection as a separate setting.

Local Execution and Live Service Availability

A running local interface does not establish that live games or affiliate claims are available, and their current availability remains unconfirmed.

Practical questions

Can the Farcaster Mini App Reuse the React demo's Environment Variables Unchanged?

The Farcaster Mini App uses a different environment-variable scheme. Its documented setup uses a .env.local file and NEXT_PUBLIC_ names, including NEXT_PUBLIC_AFFILIATE_ADDRESS. The React demo uses VITE_ names. Sharing the game UI library does not make these project configuration files interchangeable.

Why Does the Local React Demo Mention Port 5173?

Port 5173 is the local development port shown in the demo's startup instructions. It identifies where the development application is served, not a blockchain network or affiliate setting. The npm run dev command starts the demo's Vite development server.

What Does the React demo's Production Build Command Run?

The demo's build script runs tsc -b followed by vite build. The TypeScript command must succeed before Vite builds the application. The separate npm run dev script invokes the development server.

Is Npm Run Preview Suitable for Hosting the Demo in Production?

The demo's preview script invokes vite preview to serve an existing production build for local inspection. That preview server is not intended for production hosting.

When Can a Build Environment Override Values in the demo's .Env File?

Variables already present when Vite starts take priority over values in .env files. A mode-specific environment file also takes priority over the generic .env file. The value used by a hosted build can therefore differ from the value in a local configuration file.