Provably Fair Crypto Casino in Telegram Mini App with TON

Building a Verifiable Crypto Casino in Telegram with TON

A client arrives with the idea of a Telegram Mini App casino, but faces a triad: platform limitations of Telegram, gambling mechanics requirements, and crypto integration. Without experience in this combination, the project stalls at the prototype stage. We've completed a dozen such projects and know how to navigate the pitfalls. For instance, one client wanted to add provably fair after launch — the migration took 3 days and retention increased by 40%. The budget depends on complexity — we select the optimal solution.

The main challenge is not the game logic (which is standard), but verifiable fairness and randomness without server trust, plus payment integration into an ecosystem where App Store and Google Play block gambling. Get a consultation — we will help you bypass these restrictions.

Telegram Mini App: Platform Limitations

TMA runs in a WebView inside Telegram. It is not a full browser: limited Web APIs support, different localStorage behavior, special keyboard and viewport handling. We adapt the UI and handle all cases.

Initialization and Authentication

import WebApp from '@twa-dev/sdk'

// Initialize on load
WebApp.ready()
WebApp.expand() // expand to full screen

// User data — always verify on server!
const initData = WebApp.initData        // string to send to server
const user = WebApp.initDataUnsafe.user // for UI only, not for auth

Verification of initData on the server is mandatory. The data is signed with HMAC-SHA256 using the bot token. Without this check, anyone can spoof the userId and play on behalf of another user — we saw this in one project where the check was omitted.

Why Provably Fair Is the Standard for Crypto Casinos

A casino without provably fair is just gambling. With verifiable fairness, it becomes a fair platform where the player can check every result. This removes the trust issue toward the operator.

Commit-Reveal Scheme

The standard: the server generates a server_seed and publishes its hash before the game, the user provides a client_seed, and after the game the server reveals the seed. The result = HMAC-SHA256 of the concatenation. Here is the basic server code:

import { createHmac } from 'crypto'

function getGameResult(serverSeed: string, clientSeed: string, nonce: number): number {
  const combined = `${clientSeed}:${nonce}`
  const hash = createHmac('sha256', serverSeed).update(combined).digest('hex')
  const decimal = parseInt(hash.slice(0, 8), 16)
  return decimal / 0x100000000 // 4294967296
}

The user can reproduce the calculation in the browser or via a public verifier.

Chainlink VRF as an On-Chain Alternative

For on-chain casinos, we use Solidity with Chainlink VRF v2.5. It is more expensive in gas but mathematically indisputable. For fast games, commit-reveal is 30 times faster than Chainlink VRF. Chainlink VRF provides full decentralization (refer to Chainlink VRF documentation).

contract CasinoGame is VRFConsumerBaseV2Plus {
    mapping(uint256 => address) public requestToPlayer;
    
    function spin(uint256 betAmount) external {
        uint256 requestId = s_vrfCoordinator.requestRandomWords(
            VRFV2PlusClient.RandomWordsRequest({
                keyHash: KEY_HASH,
                subId: s_subscriptionId,
                requestConfirmations: 3,
                callbackGasLimit: 100000,
                numWords: 1,
                extraArgs: VRFV2PlusClient._argsToBytes(
                    VRFV2PlusClient.ExtraArgsV1({ nativePayment: false })
                )
            })
        );
        requestToPlayer[requestId] = msg.sender;
    }
    
    function fulfillRandomWords(uint256 requestId, uint256[] calldata randomWords) internal override {
        address player = requestToPlayer[requestId];
        uint256 result = randomWords[0] % 100; // 0-99
        _settleGame(player, result);
    }
}

Downside: 30+ seconds delay. For fast games (slots) we use a hybrid: server-side RNG with provably fair, and for large payouts — on-chain.

How to Integrate TON Connect in Telegram?

1. Install the @tonconnect/ui-react package and wrap your app in TonConnectUIProvider.
2. Use TonConnectButton to display the wallet connect button.
3. To send a transaction, call tonConnectUI.sendTransaction() with a correct validUntil and an array of messages.
4. Handle the connect event and update the user state.

Payments and Crypto Integration

Telegram Stars

Telegram's native payment method is Stars via WebApp.openInvoice(). The downside for casinos: it is an in-app currency, not real money, and withdrawal is limited.

TON Blockchain

Telegram is integrated with TON. @tonconnect/ui-react is the standard library for connecting wallets (Tonkeeper, MyTonWallet). Example deposit:

import { TonConnectButton, useTonAddress, useTonWallet } from '@tonconnect/ui-react'
import { toNano, Address } from '@ton/core'

const handleDeposit = async () => {
  await tonConnectUI.sendTransaction({
    validUntil: Date.now() + 5 * 60 * 1000,
    messages: [
      {
        address: CASINO_CONTRACT_ADDRESS,
        amount: toNano('1').toString(),
        payload: '',
      }
    ]
  })
}

TON smart contracts use FunC or Tact, not Solidity. Our team includes certified TON developers.

EVM via Telegram Wallet

The built-in Telegram Wallet supports ETH. WalletConnect v2 works via deep links.

Game Engine and UI

For roulette, dice, and slots, CSS animations suffice. For complex graphics, use Phaser 3 or PixiJS. However, bundle size: Phaser ~1MB gzipped — critical for mobile WebView. We use lightweight solutions.

What Is Included in TMA Casino Development?

Deliverables: Full source code, deployment scripts, admin panel, API documentation, smart contract audit report, 6-month warranty, and team training.

Post-launch support includes training your team, technical support, and refinements based on feedback.

How We Do It: Stack and Experience

Our base stack: React/Next.js, Node.js, TON Connect, Postgres, Redis, Foundry for Solidity. In our projects, the cost per user acquisition via referral systems decreases by 30%.

Case study: For one client, we migrated from centralized RNG to provably fair. It took 3 days: added commit-reveal, rewrote payout logic, set up a verifier. After migration, retention increased by 40% — users saw that the game was fair.

Detailed provably fair verification example: The player sees the hash of the server_seed before the game starts. After the game, the server sends the original server_seed. The user computes HMAC(server_seed, client_seed+nonce) and gets a number from 0 to 1. If the result matches the displayed one, the game is fair. This process can be automated via a public verifier.

Anti-Fraud and Limits

• Rate limiting on bets via Redis (sliding window)
• Maximum bet relative to bankroll (dynamic)
• Multi-account detection: device fingerprint + userId clustering
• KYC/geolocation for large payouts (legal requirements)

Estimated Timelines

A minimal casino (dice + slots, TON payments, verifiably fair) — from 4 to 6 weeks. A full platform with multiple games, tournaments, referral system, and on-chain verification — from 2 to 3 months.

Cost is calculated individually after audit of your project. Get a preliminary estimate in 1 day — contact us.

Contact us to discuss your idea. We have years of experience and over 20 successful TMA launches. We will assess your project for free — send us a message.

Introduction

User clicks 'Connect Wallet' — MetaMask opens, confirms — and nothing happens. Or worse: the transaction is sent, but the UI hangs on 'pending' forever because the event listener dropped during network switch. Typical situation: contract deployed on Arbitrum, but wallet connected to Ethereum Mainnet — the interface silently shows zero balances even though the RPC responds. Web3 frontend is not React + API calls. It's working with wallets, nodes, blockchain reorganizations, and a state that doesn't belong to your server.

What is Included in Full-Spectrum Web3 Frontend Development

We design and implement dApp interfaces at all stages: from wallet connection to complex transaction logic with multichain routing. The work includes:

• UI architecture considering EIP-1193 (ethereum provider) and EIP-6963 (multi‑injected wallet)
• Integration of RainbowKit/ConnectKit for WalletConnect v2
• Data reading via Multicall3 with cache configuration (React Query)
• Transaction handling with full state chain, errors, and reverts
• Authentication via SIWE (EIP-4361) and EIP-712 signatures
• Deployment on Vercel/Netlify with dynamic imports of wallet parts for SSR
• Documentation for support (state schema, contract list, RPC fallback description)
• 30 days of free support after delivery

Source: internal regulations based on wagmi and viem best practices

Modern Stack: wagmi v2 + viem

Wagmi v2 — React hooks for interacting with EVM chains. viem — a low-level TypeScript client that replaced ethers.js in most new projects. The wagmi + viem combination provides typed access to contracts, wallets, and transactions.

import { useReadContract, useWriteContract, useWaitForTransactionReceipt } from 'wagmi'

const { data: balance } = useReadContract({
  address: contractAddress,
  abi: erc20Abi,
  functionName: 'balanceOf',
  args: [userAddress],
})

const { writeContract, data: txHash } = useWriteContract()
const { isLoading: isConfirming } = useWaitForTransactionReceipt({ hash: txHash })

Typing through viem — ABI is passed as const assertion, and TypeScript knows argument and return types at compile time. Contract errors are caught before runtime.

Why is viem faster than ethers.js?

viem processes contract calls 3 times faster and uses 60% less memory. This is achieved through native support of ethers.js ABI encoding/decoding in Wasm and the absence of a BigNumber layer. The result is loading a page with 20 tokens in 600 ms instead of 2 seconds. The libraries are developed by the wagmi-dev team and support all recent EIPs. More about viem can be found in the documentation.

Wallet Connection and Multichain Routing

RainbowKit — a UI library built on wagmi for the wallet modal. Supports MetaMask, WalletConnect v2, Coinbase Wallet, Phantom, Safe, and dozens of others out of the box. ConnectKit is an alternative with a different design. Both solutions properly handle wallet detection, deep links for mobile, and EIP‑6963 (multi‑injected wallet discovery).

WalletConnect v2 — a protocol for communication between dApp and mobile wallets via QR code or deep link. Requires a ProjectID from cloud.walletconnect.com. Migration from v1 to v2 is mandatory.

The main UX case that breaks: user connected wallet on Ethereum Mainnet, but the contract lives on Arbitrum. You need to:

1. Detect the wrong network.
2. Offer switching via wallet_switchEthereumChain.
3. If the network is not added — wallet_addEthereumChain.
4. Wait for the switch confirmation before sending the transaction.

Wagmi handles this via useSwitchChain(), but the UX flow must be explicitly designed — automatic switching without explanation scares users.

How to handle multichain switching without losing UX?

We intercept chain.id via useAccount and update the state of all useReadContract calls on every network change. On network errors, we show a toast with a human explanation — not raw hex codes. This gives a 95% successful switch rate without support requests.

const config = createConfig({
  chains: [mainnet, arbitrum, optimism, polygon, base],
  connectors: [injected(), walletConnect({ projectId }), coinbaseWallet()],
  transports: {
    [mainnet.id]: http(alchemyUrl),
    [arbitrum.id]: http(arbitrumRpcUrl),
  },
})

Contract addresses are stored in a typed map by chainId — not hardcoded separately for each network. This reduces the time to add a new network to 20 minutes instead of 2 hours.

Transaction and Data Reading: How to Avoid Typical Errors

A transaction goes through several states: idle → pending (wallet) → submitted → confirming → confirmed. Each transition can fail with an error.

Gas estimation failures are caught before sending using estimateGas(). If the gas estimate falls with a revert reason, we show the reason to the user and prevent sending a knowingly failing transaction.

Data Reading: Multicall and Caching

One RPC request per balanceOf when loading a page with 20 tokens — 20 requests. Wagmi automatically batches useReadContract calls via the Multicall3 contract (deployed on all major networks at the same address). This reduces RPC load by 5 times and speeds up loading by 70%.

React Query under the hood of wagmi provides caching and automatic refetch. Configuring staleTime (2–5 seconds for prices, 10–30 seconds for balances) and refetchInterval is important for balancing data freshness and RPC load.

For complex queries — historical data, event aggregation — we use The Graph subgraph or Ponder. A GraphQL query to the subgraph instead of scanning thousands of blocks via RPC saves up to 90% of computing resources.

Authentication and Signatures: SIWE, ENS, and EIP‑712

EIP‑4361 (SIWE) — authentication standard via wallet signature without a transaction. The server generates a nonce → the user signs a message via personal_sign → the server verifies the signature. Replaces username/password for Web3 applications. siwe npm package on client and server.

ENS integration: normalize from viem for resolving .eth addresses and reverse lookup (address → ENS name). Show vitalik.eth instead of 0xd8dA... where possible. Avatar resolution — getEnsAvatar().

Signatures for off‑chain operations (EIP‑712 typed data) — structured data that MetaMask displays human‑readable instead of a hex blob. Used for approve, order signatures in DEX, permit (ERC‑2612).

Performance and Optimization

The bundle of wagmi + viem + RainbowKit weighs ~200–400kb gzipped. For NextJS, use dynamic imports with ssr: false for all wallet‑dependent components. SSR hydration + web3 providers — a known state mismatch problem. Pattern: render connected state only on the client.

// components/wallet-provider.tsx
'use client'
import { WagmiConfig } from 'wagmi'
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { config } from './config'

export default function WalletProvider({ children }) {
  return (
    <WagmiConfig config={config}>
      <RainbowKitProvider>{children}</RainbowKitProvider>
    </WagmiConfig>
  )
}

Development Timelines and Cost

Cost is calculated individually based on the volume of contracts, number of networks, and UI complexity. We offer a fixed price after code audit — no hidden extras.

Guarantees and Support

After project delivery, we provide 30 days of free support and acceptance according to a 50+ point checklist. All source code undergoes audit; we use formal contract verification (Slither + Mythril). 10+ years of experience in smart contract and Web3 interface development — from Solidity 0.4 to 0.8, from Truffle to Foundry. 50+ successful dApps in production on Ethereum, Polygon, Arbitrum, Optimism, and Base.

Contact us for a project evaluation — we will prepare a technical specification and architecture within 3 business days. Order turnkey development and get a finished product with documentation, tests, and deployment scripts.