@nameless-nft/react

A collection of hooks to help you interface with your nameless environments.

Setup

Install NamelessProvider

You need this at the root level of your application.

const config = require('./nameless.json');

const NamelessApp = () => (
  <NamelessProvider config={config}>
    <App />
  </NamelessProvider>
);

Web3 Client

chainId, provider and account are required properties, you can get them from a web3 client like @web3-react.

const config = require('./nameless.json');

const NamelessApp = () => {
  const { chainId, provider, account } = useWeb3React();
  return (
    <NamelessProvider
      config={config}
      chainId={chainId}
      provider={provider}
      account={account}
    >
      <App />
    </NamelessProvider>
  );
};

Hooks

useActivateListing

If you're using the dutch_auction contract, you need to activate an auction listing before parties can bid.

const listingId = 1;
const [activateListing, { loading }] = useActivateListing();

return (
  <button
    onClick={async () => {
      const tx = await activateListing(listingId);
      const receipt = await tx.wait();
    }}
  >
    {loading
      ? 'Please approve tx in your wallet'
      : `Activate Auction Listing #${listingId}`}
  </button>
);

useActivateSalesContract

If you're using the nameless_sales contract, you'll need to activate before it's ready to accept purchases. You can use this function to help you do that.

It's also possible to de-activate the sales contract, just pass it false.

const [activateSalesContract] = useActivateSalesContract();

const onClick = async () => {
  await activateSalesContract(true);
};

useDutchAuctionListings

If you're using dutch auctions, this is how you access the active listings.

const [bid] = useBid();
const [listings] = useDutchAuctionListings();

return (
  <div>
    {listings.map((listing, index) => (
      <div>
        Auction #{index}
        Ends: {listing.endTime}
        Final price: {listing.finalPrice}
        {listing.calculatedPrice.toString()} ETH
        <button
          onClick={() => {
            bid(index);
          }}
        >
          Bid
        </button>
      </div>
    ))}
  </div>
);

useGrantRole

gives the owner account the ability to grant an account a role on the token contract. There are two roles on the token contract: minter and redeemer.

const [grantRole] = useGrantRole();

return (
  <button
    onClick={async () => {
      const tx = await grantRole('minter', '0x...');
      await tx.wait();
    }}
  >
    Grant Minter Role
  </button>
);

useHasRole

Query the token contract and determine if an address has a specific role.

const { data: canMint, loading } = useHasRole('minter');

return canMint && <button>Mint</button>;

useIsSalesActive

Returns a boolean indicating whether or not sales contract is active.

const { data: isSalesActive } = useIsSalesActive();

return isSalesActive && <button>Purchase</button>;

useIsTokenContractOwner

Returns a boolean indicating whether or not the active account (or provided address) is the owner of the token contract.

const isOwner = useIsTokenContractOwner();

return isOwner && <button>For admins only!</button>;

useMint

const [mint] = useMint();

return (
  <button
    onClick={async () => {
      const tokenId = 100;
      const tx = await mint(tokenId);
      const receipt = await tx.wait();
    }}
  >
    Mint
  </button>
);

useMintedNFTs

Easily list your collection's minted tokens and available attributes with this hook. It returns a list of tokens and an attribute in the form of a Map. Here's an example of how you might use it.

const { data } = useMintedNFTs();
const { tokens = [], attributes = new Map() } = { ...data };

// attributes:
// "Size" => ["Smol", "Smedium", "Bigly"]
// "Color" => ["Blue", "Red", "Yellow"]

return (
  <>
    <div>
      <h2>Attributes</h2>
      <ul>
        {Array.from(attributes.keys).map((traitType) => (
          <li>
            {traitType}
            <ul>
              {attributes.get(traitType)?.map((value) => (
                <li>{value}</li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </div>

    <div>
      {tokens.map(({ name, description, image, attributes }) => (
        <img src={image} />
        <h3>{name}</h3>
        <p>{description}</p>
        {attributes.map(({ trait_type, value }) => (
          <div>
            <h4>{trait_type}</h4>
            <div>{value}</div>
          </div>
        ))}
      ))}
    </div>
  </>
);

useNameless

This is a general hook for accessing nameless configuration, deployment data, contracts, wallet configuration information and more.

const {
  config,
  deployment,
  isConnected,
  providerUrl,
  chainId,
  selectedChainId,
  ...andMore
} = useNameless();

useNamelessState

This is generally an internal method, but you can use it to query and mutate the nameless state. This is not recommended for basic usage.

const [state, setState] = useNamelessState();

usePurchase

Use this to execute a purchase transaction against a nameless_sales contract.

const [purchase] = usePurchase();

return (
  <button
    onClick={() => {
      const quanity = 1;
      const tx = await purchase(quantity);
      const receipt = await tx.wait();
    }}
  >
    Purchase
  </button>
);

useSalesContract

Interact with the sales contract abi

const auctionListingId = 1;
const salesContract = useSalesContract();
const price = await salesContract?.calculateCurrentPrice(auctionListingId);

useTokenContract

Interact with the token contract abi

const tokenId = 1;
const address = '0x...';
const tokenContract = useTokenContract();
const tx = await tokenContract.mint(tokenId, address);
const receipt = await tx.wait();

useTokenData

Query token data

const tokenIds = [1, 2, 3, 4, 5];
const { data: tokenData } = useTokenData(tokenIds);

return (
  <div>
    {tokenData.map(token => (
      <div>
        <img src={token.image} width={100} />
        <h3>{token.name}</h3>
        <p>{token.description}</p>
        <ul>
          {token.attributes.map(attr => (
            <li>
              {attr.trait_type}: {attr.value}
            </li>
          ))}
        </ul>
      </div>
    ))}
  </div>
);

useTokenDataContract

Interact with the token data contract abi

const tokenId = 420;
const tokenDataContract = useTokenDataContract();
const tokenUri = await tokenDataContract.getTokenURI(tokenId);
const tokenData = await fetch(tokenUri).then(r => r.json()));

useTotalSupply

Get the total tokens minted in your collection. Here's a popular example of how you might display how many tokens are left to mint during a drop.

const { config } = useNameless();
const { data: totalSupply, loading } = useTotalSupply();

return (
  <div>
    {totalSupply?.toString()} / {config?.collection.maxTokensPerDrop}
  </div>
);

Helper Methods

getTokenIdsFromPurchaseReceipt

Provide this function with a ContractReceipt and it will give you the token ids from any transfer events.