Nice1 react tools

React helper tools for using both nice1 and anchor wallet in your applications.

Installation

yarn add @nice1/react-tools
# or
npm i @nice1/react-tools

Hooks

These hooks can help you in the different parts of your app:

useAnchor

With useAnchor you can easily login, logout, make blockchain calls and whatnot, with your anchor wallet:

import { useAnchor } from '@nice1/react-tools'

const MyCoolComponent = () => {
  const { login, logout, session } = useAnchor()

  if (!session) {
    return <button onClick={login}>Login</button>
  }

  return (
    <>
      <p>Hi {session?.auth.actor} :)</p>
      <p>You can <button onClick={logout}>logout</button> whenever you want.</p>
    </>
  )
}

useNice1

After you logged in using useAnchor, you can access and update nice1 info like your balance or profile information from our contracts:

import { useAnchor, useNice1 } from '@nice1/react-tools'

const MyCoolComponent = () => {
  const { login, logout, session } = useAnchor()
  const { profile, balance } = useNice1()

  if (!session) {
    return <button onClick={login}>Login</button>
  }

  return (
    <>
      <p>Hi {session?.auth.actor} :)</p>
      <p>Your balance is {balance} and your a.k.a. is {profile.alias}.</p>
      <p>You also have defined a profile image as {profile.avatar}</p>
      <p>You can <button onClick={logout}>logout</button> whenever you want.</p>
    </>
  )
}

NFT Staking & Market Tools

useNftAtomicAssets

This hook retrieves and manages NFTs stored in AtomicAssets.

import { useNftAtomicAssets } from '@nice1/react-tools'

const MyComponent = () => {
  const { nftsAA, updateNftsAA } = useNftAtomicAssets()

  return (
    <>
      <h2>Your NFTs (AtomicAssets):</h2>
      <ul>
        {nftsAA.map((nft) => (
          <li key={nft.asset_id}>
            Collection: {nft.collection_name}, Template: {nft.template_id}
          </li>
        ))}
      </ul>
      <button onClick={updateNftsAA}>Refresh NFTs</button>
    </>
  )
}

useNftAtomicMarket

This hook retrieves NFTs listed for sale in AtomicMarket.

import { useNftAtomicMarket } from '@nice1/react-tools'

const MyComponent = () => {
  const { nftsAM, updateNftsAM } = useNftAtomicMarket()

  return (
    <>
      <h2>NFTs on AtomicMarket:</h2>
      <ul>
        {nftsAM.map((sale) => (
          <li key={sale.sale_id}>
            Seller: {sale.seller}, Price: {sale.listing_price}
          </li>
        ))}
      </ul>
      <button onClick={updateNftsAM}>Refresh Market</button>
    </>
  )
}

useNftSimpleAssets

This hook retrieves and manages NFTs stored in SimpleAssets.

import { useNftSimpleAssets } from '@nice1/react-tools'

const MyComponent = () => {
  const { nftsSA, updateNfts } = useNftSimpleAssets()

  return (
    <>
      <h2>Your NFTs (SimpleAssets):</h2>
      <ul>
        {nftsSA.map((nft) => (
          <li key={nft.id}>
            Owner: {nft.owner}, Category: {nft.category}
          </li>
        ))}
      </ul>
      <button onClick={updateNfts}>Refresh NFTs</button>
    </>
  )
}

useNftSimpleMarket

This hook retrieves NFTs listed for sale in SimpleMarket.

import { useNftSimpleMarket } from '@nice1/react-tools'

const MyComponent = () => {
  const { nftsSM, updateNfts } = useNftSimpleMarket()

  return (
    <>
      <h2>NFTs on SimpleMarket:</h2>
      <ul>
        {nftsSM.map((sale) => (
          <li key={sale.id}>
            Seller: {sale.owner}, Price: {sale.price}
          </li>
        ))}
      </ul>
      <button onClick={updateNfts}>Refresh Market</button>
    </>
  )
}

License

This project is licensed under Apache 2.0.