rarity-react

An easy way to build Rarity games with React.

Features

  • 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 custom\3rd 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

Install

yarn add rarity-react

Usage

  • 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>}
  </>
}
  • Get summoners like this
import { RarityApp, useSummoners } from 'rarity-react'
import config from './config.json'
export default function() {
  const { summoners } = useSummoners()
  return <RarityApp config={config}>
    {summoners.map(s => {
      return <div>{s.expansions["core"].tokenId}</div>
    })}
  </RarityApp>
}
  • 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) => {
      return[
        contract.customContractCall(summonerId)
      ] 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}>
    {summoners.map(s => {
      return <div>{s.expansions["custom-expansion-id"].customProperty}</div>
    })}
  </RarityApp>
}

License

GPL-3.0-or-later © murderteeth

GitHub

https://github.com/murderteeth/rarity-react