@zeitgeistpm/avatara-react
v1.3.2
Published
This package contains react components and utility hooks for rendering the zeitgeist rmrk2 avatar and managing its equipment.
Downloads
26
Keywords
Readme
@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>
)
}