Futures Trading

Futures is a crypto futures/perpetuals trading game — a real-time price chart, long/short position opening with configurable leverage, and open/closed position tables. It ships as one of the standard games inside @maktubbet/sdk, alongside Dice, Mines, Crash, and the rest.

Recommended: Iframe Embed

For most integrations you don’t need anything on this page. Embed Futures exactly like every other Maktub game — create a session, drop in an iframe (or our embed.js script), and handle webhooks. See the main Getting Started → guide and just use futures as the game path / data-maktub-game value:


<div
  data-maktub-game="futures"
  data-token="TOKEN_FROM_STEP_1"
  data-bg="#101a18"
  data-accent="#22c993"
></div>
<script src="https://play.maktub.bet/embed.js" async></script>

The rest of this section documents the advanced path: mounting the FuturesGameSDK React component directly inside your own app instead of using the iframe.

Features

Real-time chart — canvas-based price chart with pan, zoom, and a live price feed
Position management — open long/short positions with configurable multipliers; view open and closed positions
Theming — the same shared GameTheme used by every SDK game (buttonColor, backgroundDark, backgroundDarkLight, actionButtonColor, borderRadius, …)
Internationalization — pass any language code; falls back to English
Logo slot — pass a custom ReactNode as your brand logo

Package

Futures ships as part of the main SDK — there is no separate package to install.


@maktubbet/sdk

Requirement	Version
React	`>= 18`
React DOM	`>= 18`

Quick Example


'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={(balance) => console.log('Balance:', balance)}
      onAuthRequired={() => console.log('Auth required')}
      symbol="BTC"
      logo={<img src="/logo.svg" alt="Brand" width={120} />}
      theme={{
        backgroundDark: '#0D1117',
        backgroundDarkLight: '#161B22',
        buttonColor: '#10b981',
        borderRadius: '8px',
      }}
    />
  )
}

Architecture

FuturesGameSDK is a single component that internally manages:

Theming — applies the shared GameTheme as CSS custom properties on its root element (.maktub-sdk-root), the same mechanism used by every other SDK game
Live price feed — connects to Maktub’s real-time price stream automatically; no configuration needed
Canvas chart — high-performance price chart rendering
State — symbol selection, positions, and modal state are all managed internally