An easy way to build Rarity games with React

Overview

rarity-react

An easy way to build Rarity games with React.

NPM JavaScript Style Guide

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
  • 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

Issues
  • Support wallets with 100+ Summoners

    Support wallets with 100+ Summoners

    RE: https://github.com/andrecronje/rarity/issues/87#issuecomment-940669053

    useSummoners() currently gets all of a wallet's summoners, then tries to get all of their metadata in a single MultiCall. If the sdk is pulling a lot of summoner expansion fields, this fails to scale as the summoner count gets towards 100.

    Redesign useSummoner to support paging. Consider the design of useQuery and fetchMore from apollo client's react library: https://www.apollographql.com/docs/react/data/queries/

    opened by murderteeth 0
Releases(v1.0.0)
Owner
murderteeth
Chaotic Neutral Half Orc Fighter Barbarian
murderteeth
Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.

Figmagic Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React compo

Mikael Vesavuori 445 Oct 14, 2021
30 Days of React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

Asabeneh 8.4k Oct 17, 2021
A simple react js onscroll sticky Nav bar library

A simple react js onscroll sticky Nav bar library

Abod Micheal 19 Oct 7, 2021
:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Inferno 15.1k Oct 9, 2021
A series of ReactJS coding challenges with a variety of difficulties.

A series of ReactJS coding challenges with a variety of difficulties. Deep dive into the why here. Interested in NodeJS? Check out our Node Coding Cha

Alex Gurr 1.5k Oct 19, 2021
A powerful toolkit for building websites with beautiful design

Typography.js A powerful toolkit for building websites with beautiful typography. Typography.js A powerful toolkit for building websites with beautifu

Kyle Mathews 3.7k Oct 15, 2021
Curated tutorial and resource links I've collected on React, Redux, ES6, and more

React/Redux Links Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles

Mark Erikson 21.1k Oct 20, 2021
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by

Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by

Cruip 1.1k Oct 17, 2021
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Kévin Dunglas 578 Oct 12, 2021
Build blazing fast, modern apps and websites with React

Gatsby v2 ⚛️ ?? ?? Fast in every way that matters Gatsby is a free and open source framework based on React that helps developers build blazing fast w

Gatsby 51.5k Oct 14, 2021
🕹 GBA emulator on your React project - easy and powerful to use!

react-gbajs GBA emulator on your React project - easy and powerful to use! Just three steps to set it up ✨ 1 - Apply GbaProvider import { GbaProvider

Bruno Macabeus 20 Oct 7, 2021
The LinkedIn Learning course React.js: Building an Interface

React.js: Building an Interface This is the repository for the LinkedIn Learning course React.js: Building an Interface. The full course is available

MOHAMMED KHORMI 1 Oct 14, 2021
A library that makes using pdfjs in react projects easy.

A library that makes using pdfjs in react projects easy.

Lukas Möller 2 Sep 12, 2021
Layering system for React. Useful for popover/modals/tooltip/dnd application

Live demo Chat Rationale react/react-dom comes with 2 basic assumptions/ideas: every UI is hierarchical naturally. This why we have the idea of "compo

Alexey 151 Oct 16, 2021
React components for implementing UI experiments

react-experiments react-experiments is a set of React components for implementing UI experiments. For additional context behind why we built this, che

Guy Aridor 312 Oct 2, 2021
React Query for Firestore, that you can actually use in production, on every screen.

React Query for Firestore, that you can actually use in production, on every screen.

Amine Bl 65 Oct 6, 2021
Calculadora simples usando classes do ReactJS

React Calc This calculator was developed by me using ReactJS during my JavaScript studies.

null 5 Jun 23, 2021
:speech_balloon: Easy way to create conversation chats

React Simple Chatbot A simple chatbot component to create conversation chats Getting Start npm install react-simple-chatbot --save Usage There are sev

Lucas Bassetti 1.4k Oct 17, 2021
This project created by Alper Efe Şahin. I used React.js, Firebase, CHAT Engine Lib.

This project created by Alper Efe Şahin. I used React.js, Firebase, CHAT Engine Lib. and Icon lib. You can login with Facebook or Google. You can create new chat group, add new users to chat group, you can remove his/her, and you can delete the chat group easily. Also you can upload file like pdf or images etc.

Alper Efe Şahin 9 Jul 11, 2021