🎨 gamba-react-ui-v2

GambaUi.Button

A versatile button component that can be used in various contexts.

• Props:
  • main: boolean
  • size: 'small' | 'medium' | 'large'
  • onClick: function
  • disabled: boolean

<GambaUi.Button main onClick={connect} disabled={false} size="medium">
  Connect
</GambaUi.Button>

GambaUi.PlayButton

A specialized button for initiating gameplay actions.

• Props:
  • size: 'small' | 'medium' | 'large'
  • onClick: function
  • disabled: boolean

<GambaUi.PlayButton onClick={play} disabled={false} size="medium">
  Play
</GambaUi.PlayButton>

GambaUi.WagerInput

A component for inputting wagers.

• Props:
  • value: number
  • onChange: function
  • type: 'text' | 'select'
  • options: number[]

<GambaUi.WagerInput
  value={0}
  onChange={(newValue: number) => {}}
  type="text"
  options={[10, 20, 30]}
/>

GambaUi.WagerSelect

A dropdown selection for wager amounts.

• Props:
  • options: number[]
  • value: number
  • onChange: function

<GambaUi.WagerSelect
  options={[10, 20, 30]}
  value={10}
  onChange={(newValue: number) => {}}
/>

GambaUi.Switch

A component for toggling states.

• Props:
  • checked: boolean
  • onChange: function
  • disabled: boolean

<GambaUi.Switch
  checked={false}
  onChange={(newValue: boolean) => {}}
  disabled={false}
/>

GambaUi.Select

A dropdown selection component.

• Props:
  • value: any
  • options: any[]
  • onChange: function

<GambaUi.Select
  value={null}
  options={["Option 1", "Option 2", "Option 3"]}
  onChange={(newValue: string) => {}}
/>

GambaUi.TextInput

A text input field for user input.

• Props:
  • value: string | number
  • onChange: function
  • disabled: boolean
  • onClick: function

<GambaUi.TextInput
  value=""
  onChange={(newValue: string) => {}}
  disabled={false}
  onClick={() => {}}
/>

GambaUi.EffectTest

A component for testing sound effects.

• Props:
  • src: string

<GambaUi.EffectTest src="sound-effect.mp3" />

GambaUi.ResponsiveSize

A wrapper component to adjust children based on available screen size.

• Props:
  • maxScale: number
  • overlay: boolean

<GambaUi.ResponsiveSize maxScale={1.5} overlay={true}>
  {/* Children components */}
</GambaUi.ResponsiveSize>

GambaUi.Portal

Renders child elements to a specified target.

• Props:
  • target: string

<GambaUi.Portal target="portal-target">
  {/* Children components */}
</GambaUi.Portal>

GambaUi.PortalTarget

Renders elements passed through the Portal component.

• Props:
  • target: string

<GambaUi.PortalTarget target="portal-target">
  {/* Children components */}
</GambaUi.PortalTarget>

GambaUi.Game

A context provider for a specific game session.

• Props:
  • game: GameBundle
  • children: React.ReactNode
  • errorFallback: React.ReactNode

<GambaUi.Game game={gameBundle} errorFallback={<ErrorFallback />}>
  {/* Children components */}
</GambaUi.Game>

GambaUi.Canvas

A custom canvas rendering component.

• Props:
  • zIndex: number
  • render: function

<GambaUi.Canvas zIndex={5} render={() => {}} />

GambaUi.TokenValue

Displays the value of a token.

• Props:
  • mint: PublicKey
  • amount: number
  • suffix: string
  • exact: boolean

<GambaUi.TokenValue mint={publicKey} amount={100} suffix="SOL" exact={false} />

useGame

A hook for interacting with game functions, like initiating gameplay and processing results.

const game = useGame();

useGambaPlatformContext

Provides the current platform-specific context, including platform fees, selected tokens, and the current creator fee.

const {
  platform,
  selectedPool,
  defaultCreatorFee,
  defaultJackpotFee,
  setDefaultJackpotFee,
  setPool,
  setToken,
  clientSeed,
  setClientSeed,
} = useGambaPlatformContext();

useSound

A hook to define and play audio effects.

const sound = useSound({
  play: "/path/to/play.mp3",
  win: "/path/to/win.mp3",
  loss: "/path/to/loss.mp3",
});

useCurrentToken

Retrieves the metadata of the current token.

const currentToken = useCurrentToken();

useTokenBalance

Fetches and returns the user's current balance.

const userBalance = useTokenBalance();

useWagerInput

A hook to manage and update wager input state.

const [wager, setWager] = useWagerInput();

useNextFakeResult

Simulates the next game result for testing & development purposes.

const fakeGame = useNextFakeResult();

useFakeAccountStore

Provides a store to manage a fake balance for testing & development purposes.

const fakeAccountStore = useFakeAccountStore();

useGambaAudioStore

Provides an audio store with adjustable master gain.

const { masterGain, set } = useGambaAudioStore();

useCurrentPool

Returns the current state of the UI pool.

const currentPool = useCurrentPool();

GambaPlatformContext

Provides platform-specific information like fees, tokens, and pool authority.

• Props:

  • platform: PlatformMeta
  • selectedPool: PoolToken
  • defaultCreatorFee: number
  • defaultJackpotFee: number
  • setDefaultJackpotFee: (defaultJackpotFee: number) => void
  • setPool: (tokenMint: PublicKey | string, authority?: PublicKey | string) => void
  • setToken: (tokenMint: PublicKey | string) => void
  • clientSeed: string
  • setClientSeed: (clientSeed: string) => void
  • games: Deprecated
  • tokens: Deprecated

const {
  platform,
  selectedPool,
  defaultCreatorFee,
  defaultJackpotFee,
  setDefaultJackpotFee,
  setPool,
  setToken,
  clientSeed,
  setClientSeed,
} = useContext(GambaPlatformContext);

GameContext

Offers game-specific data, including player input and game results.

• Props:

  • game: GameBundle

const { game } = useContext(GameContext);

TokenMeta

Contains metadata for tokens, such as their symbol, image, and base wager.

const tokenMeta: TokenMeta = {
  mint: new PublicKey(""), // PublicKey
  name: "",
  symbol: "",
  image: "", // Optional
  decimals: 0,
  baseWager: 0,
  poolAuthority: "", // Optional
  usdPrice: 0, // Optional
};

makeHeliusTokenFetcher

Creates a fetcher to batch and retrieve token metadata using a Helius RPC API key.

const tokenFetcher = makeHeliusTokenFetcher("HELIUS_API_KEY");