@zeitgeistpm/avatara-react

@zeitgeistpm/avatara-react

This package contains react components and utility hooks for rendering the zeitgeist rmrk2 avatar and managing its equipment.

ZeitgeistAvatar

Render the zeitgeist avatar

import { AvatarContext, ZeitgeistAvatar } from "@zeitgeistpm/avatara-react"

const App = () => (
  <AvatarContext.Provider>
    <Component />
  </AvatarContext.Provider>
)

const Component = () => (
  <ZeitgeistAvatar 
    address={"3H7sh...Dj2jS"}     // optional, will try to use fallback component if empty
    size={44} 
    copy={true}                   // optional, default = true, copy address on click polkadot style.
    zoomed={false}                // optional, default = false, set to true when rendering very small avatar.
    fallback={<GenericAvatar />}  // optional
    loader={<Spinner />}          // optional
    onClick={clickedAvatar}       // optional
  />
)

useInventoryManagement

Hook to manage equipment for the avatar. Can accept items/badges when they are earned, preview items in inventory and commit a new set of equippment.

import { AvatarContext, ZeitgeistAvatar, useInventoryManagement } from "@zeitgeistpm/avatara-react"

const App = () => (
  <AvatarContext.Provider>
    <InventoryManagement />
  </AvatarContext.Provider>
)

const InventoryManagement = () => {

  const sdkContext = useAvatarContext()
  const inventory = useInventoryManagement(selectedAddress)

  return (
    <div>

      <ZeitgeistAvatar 
        address={"3H7sh...Dj2jS"}
        size={196}
        layoutPreview={inventory.layout} // will preview selected items
      />

      <div>
        <h2>Inventory.</h2>
        {
          inventory.items.accepted.map((item) => (
            <Item 
              item={item}
              checked={inventory.hasSelected(item)}
              onCheck={(checked) => {
                if(checked) {
                  inventory.select(item) 
                }
                else {
                  inventory.unselect(item) 
                }
              }} 
              loading={inventory.isAccepting(item)}
            />
          ))
        }
      </div>

      <div>
        <h2>Pending items!</h2>
        {
          inventory.items.pending.map((item) => (
            <PendingItem 
              item={item} 
              onClickAccept={() => inventory.accept(item)} 
              loading={inventory.isAccepting(item)}
            />
          ))
        }
      </div>

      <button 
        onClick={() => {() => inventory.commit()}
        disabled={inventory.comitting}
      >
        Commit equipment changes.
      </button>

    </div>
  )
}