[rarity-react] React SDK Bounty Request

[murderteeth]

rarity-react

source @ github

An easy way to build Rarity games with React.

It started with a simple app... I wanted to see my summoners and the prizes they'd won while on a new adventure. There's lots of great example code out there, eg RarityExtended. But I didn't see much in the way of libraries or tools. And so it was...

I started with these goals

• Make it easy to start building a new Rarity app with React
• Apps can configure which expansions they use
• Apps can write their own expansions or integrate 3rd party expansions
• Typescript-first

Please give this 1st draft a try - 👹🙏

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

• Finish internal core expansions
• 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 {summoners.map(s => { return

{s.expansions["custom-expansion-id"].customProperty}

})} }

- - -
####  Bounty
Please send bounties and donations here 
[0x8BB5d5A7706Dfd2D25ABE850388e23fe0c54f933](https://ftmscan.com/address/0x8BB5d5A7706Dfd2D25ABE850388e23fe0c54f933)
- - -