This Next.js demo shows how to bootstrap a Farcaster Mini App casino experience with @betswirl/ui-react, MiniKit, and OnchainKit so you can launch a fully themed dApp in minutes.
Read the full guide: https://docs.betswirl.com/developer-hub/demos/ui-react/miniapp
npm install
# or
yarn install
# or
pnpm install
# or
bun installnpm run devThe UI will be available at http://localhost:3000.
Create a .env.local file at the project root and fill the variables below. They are generated when running npx create-onchain --mini, and you can regenerate the Farcaster account association via npx create-onchain --manifest.
NEXT_PUBLIC_APP_PROJECT_NAME=
NEXT_PUBLIC_URL=FARCASTER_HEADER=
FARCASTER_PAYLOAD=
FARCASTER_SIGNATURE=
NEXT_PUBLIC_APP_ICON=
NEXT_PUBLIC_APP_SUBTITLE=
NEXT_PUBLIC_APP_DESCRIPTION=
NEXT_PUBLIC_APP_SPLASH_IMAGE=
NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR=
NEXT_PUBLIC_APP_PRIMARY_CATEGORY=
NEXT_PUBLIC_APP_HERO_IMAGE=
NEXT_PUBLIC_APP_TAGLINE=
NEXT_PUBLIC_APP_OG_TITLE=
NEXT_PUBLIC_APP_OG_DESCRIPTION=
NEXT_PUBLIC_APP_OG_IMAGE=NEXT_PUBLIC_AFFILIATE_ADDRESS=NEXT_PUBLIC_BASE_RPC_URL=
NEXT_PUBLIC_ARBITRUM_RPC_URL=
NEXT_PUBLIC_BSC_RPC_URL=- @betswirl/ui-react React UI library to quickly integrate BetSwirl games into your application
- @coinbase/onchainkit Wallet connection + Farcaster integration
- next React framework
.well-known/farcaster.jsonready for metadata and account association- Mini App metadata automatically injected from
layout.tsx - Fully customizable theme via
gamePropswith dedicated backgrounds - Token picker, balance management, freebets, and multichain support (Base, Arbitrum, BSC)
MiniKitProvider(inproviders.tsx) wires up wagmi connectors, Mini App context, and safe-area insets
- Build your own Mini APp: edit
page.tsx, tweakgameProps, and adjust the MiniKit config. - Publish your Mini App: cast it, associate it to your account, and share it with your community.