Getting Started

Most integrations should use the iframe embed instead. Futures is embedded exactly like every other Maktub game — see Getting Started → and use futures as the game path. Everything below is the advanced path: mounting the FuturesGameSDK React component directly in your own app.

Installation

Futures ships as part of the main SDK — there is no separate package:


# yarn
yarn add @maktubbet/sdk
 
# npm
npm install @maktubbet/sdk
 
# pnpm
pnpm add @maktubbet/sdk

Peer Dependencies


yarn add react react-dom

Import


import { FuturesGameSDK } from '@maktubbet/sdk/futures'
import '@maktubbet/sdk/futures/styles.css'

You can also import from the root package:


import { FuturesGameSDK } from '@maktubbet/sdk'

Basic Usage


'use client'
 
import { FuturesGameSDK } from '@maktubbet/sdk/futures'
import '@maktubbet/sdk/futures/styles.css'
 
export default function TradingPage() {
  return (
    <FuturesGameSDK
      accessToken="user-jwt-token"
      user={{ betCount: 0, isAuthenticated: true }}
      updateBalance={(newBalance) => console.log(newBalance)}
      onAuthRequired={() => console.log('Auth required')}
    />
  )
}

This renders the full trading interface: chart, position form, open/closed positions tables, and symbol selector.

Standard Game Props

Futures accepts the same core props as every other SDK game:

accessToken: string | null — the user’s session token
user: { betCount: number; isAuthenticated: boolean }
updateBalance: (balance: number) => void — fires whenever the balance changes
onAuthRequired: () => void — called when an unauthenticated user tries to act on a position


<FuturesGameSDK
  accessToken={session.token}
  user={{ betCount: user.betCount, isAuthenticated: true }}
  updateBalance={(b) => setBalance(b)}
  onAuthRequired={() => router.push('/login')}
/>

Symbol Selection

Pass an initial trading symbol via symbol (default 'BTC'). The symbol selector inside the chart lets the player switch assets themselves — this is managed internally, there’s no onSymbolChange callback to wire up.


<FuturesGameSDK symbol="ETH" />

Currency


<FuturesGameSDK
  currency={{ code: 'BRL', prefix: 'R$', rate: 5.5 }}
/>

Defaults to { code: 'USD', prefix: '$', rate: 1 }. See API Reference for details.

Language


<FuturesGameSDK language="pt" />

language accepts any locale string; it defaults to 'en'.

Custom Logo


<FuturesGameSDK
  logo={<img src="/brand-logo.svg" alt="Brand" width={120} />}
/>

Toasts


<FuturesGameSDK onToast={(t) => console.log('Toast:', t.title)} />

Demo Mode

To run the game entirely client-side without a backend session, pass isDemo:


<FuturesGameSDK
  isDemo
  accessToken={null}
  user={{ betCount: 0, isAuthenticated: false }}
  updateBalance={(b) => console.log(b)}
  onAuthRequired={() => {}}
/>

Theming


<FuturesGameSDK
  theme={{
    backgroundDark: '#0D1117',
    backgroundDarkLight: '#161B22',
    buttonColor: '#10b981',
    borderRadius: '8px',
  }}
/>

See Theming → for the full list of theme fields.

Next.js / App Router

Render it inside a client component:


'use client'
 
import { FuturesGameSDK } from '@maktubbet/sdk/futures'
import '@maktubbet/sdk/futures/styles.css'
 
export default function FuturesPage() {
  return (
    <FuturesGameSDK
      accessToken={token}
      user={{ betCount: 0, isAuthenticated: true }}
      updateBalance={(b) => setBalance(b)}
      onAuthRequired={() => router.push('/login')}
    />
  )
}

Full Example


'use client'
 
import { FuturesGameSDK } from '@maktubbet/sdk/futures'
import '@maktubbet/sdk/futures/styles.css'
 
export default function TradingPage() {
  return (
    <div className="max-w-6xl mx-auto">
      <FuturesGameSDK
        accessToken="Bearer eyJhbGciOi..."
        user={{ betCount: 0, isAuthenticated: true }}
        updateBalance={(b) => setBalance(b)}
        onAuthRequired={() => router.push('/login')}
        symbol="BTC"
        currency={{ code: 'USD', prefix: '$', rate: 1 }}
        language="en"
        logo={
          <span style={{ fontWeight: 700, fontSize: 18, color: '#fff' }}>
            MY BRAND
          </span>
        }
        theme={{
          backgroundDark: '#0D1117',
          backgroundDarkLight: '#161B22',
          buttonColor: '#10b981',
          borderRadius: '8px',
        }}
      />
    </div>
  )
}