Nice1 react tools
=================

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

Installation
------------

~~~bash
yarn add @nice1/react-tools

or

npm i @nice1/react-tools
~~~

Hooks
-----

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

$3

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

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

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

if (!session) {
return Login
}

return (
<>

Hi {session?.auth.actor} :)

You can logout whenever you want.

)
}
~~~

$3

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

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

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

if (!session) {
return Login
}

return (
<>

Hi {session?.auth.actor} :)

Your balance is {balance} and your a.k.a. is {profile.alias}.

You also have defined a profile image as {profile.avatar}

You can logout whenever you want.

)
}
~~~


---

NFT Staking & Market Tools

$3

This hook retrieves and manages NFTs stored in AtomicAssets.

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

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

return (
<>

Your NFTs (AtomicAssets):

{nftsAA.map((nft) => (

• 
  Collection: {nft.collection_name}, Template: {nft.template_id}
  

))}

Refresh NFTs

)
}
`

$3

This hook retrieves NFTs listed for sale in AtomicMarket.

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

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

return (
<>

NFTs on AtomicMarket:

{nftsAM.map((sale) => (

• 
  Seller: {sale.seller}, Price: {sale.listing_price}
  

))}

Refresh Market

)
}
`

$3

This hook retrieves and manages NFTs stored in SimpleAssets.

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

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

return (
<>

Your NFTs (SimpleAssets):

{nftsSA.map((nft) => (

• 
  Owner: {nft.owner}, Category: {nft.category}
  

))}

Refresh NFTs

)
}
`

$3

This hook retrieves NFTs listed for sale in SimpleMarket.

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

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

return (
<>

NFTs on SimpleMarket:

{nftsSM.map((sale) => (

• 
  Seller: {sale.owner}, Price: {sale.price}
  

))}

Refresh Market

)
}
``

---

License

This project is licensed under Apache 2.0.

---