An easy way to build Rarity games with React


An easy way to build Rarity games with React.


  • Wrap your app with <RarityApp></RarityApp>
  • Get summoners with useSummoners()
  • Builtin wallet support with useWeb3()
  • Builtin support for “core” expansions (eg, attributes, skills, gold, etc)
  • Support for custom3rd party expansions via “sideExpansions”

What’s Next

  • TypeChain integration
  • Support for writes (only does contract reads currently)
  • Builtin support for crafting and feats
  • Support for names, land, and monsters as 3rd party expansions
  • npx create-rarity-react-app
  • Api documentation


yarn add rarity-react


  • Get an api key from ftmscan

  • Add a configuration file for rarity-react to your src path. You can call it almost anything, but here assume the name of the file is config.json.
    Open config.json and spec out your ftmscan settings and expansions. Here’s an example config.example.json

  • Add some wallet code like this

import { useWeb3 } from 'rarity-react'
export default function() {
  const { initialized, active, connect } = useWeb3()
  return <>
    {!(initialized && active) && <button onClick={connect}>connect wallet</button>}
import { RarityApp, useSummoners } from 'rarity-react'
import config from './config.json'
export default function() {
  const { summoners } = useSummoners()
  return <RarityApp config={config}>
    { => {
      return <div>{s.expansions["core"].tokenId}</div>
  • Make a custom expansion like this
import { Call, Contract } from 'ethcall';
import { RarityApp, RarityExpansionConfig, RarityExpansion, useSummoners } from 'rarity-react'
import config from './config.json'

export default function() {
  const customConfig = {
    id: 'custom-expansion-id',
    contract: '0x123... contract address ...456',
    abi: [... contract abi ...]
  } as RarityExpansionConfig

  const customExpansion = {
    id: 'custom-expansion-id',
    getSummonerCalls: (contract: Contract, summonerId: string) => {
      ] as Call[];
    getSummonerExpansion: (callResults: any[]) => {
      const [ customProperty ] = callResults
      return { customProperty }

  const sideExpansions = [] as RarityExpansion[]
  sideExpansions.push(...configureExpansions([customConfig], [customExpansion]))

  const { summoners } = useSummoners()

  return <RarityApp config={config} sideExpansions={sideExpansions}>
    { => {
      return <div>{s.expansions["custom-expansion-id"].customProperty}</div>


GPL-3.0-or-later © murderteeth


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Four Day Work Week Gaining Traction

Image Processing is Easier than you Thought! (Getting started with Python Pillow)