An easy way to build Rarity games with React

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

GitHub

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