@simpleweb/open-format-react

Open Format React

Open Format React is an even easier way to integrate with the Open Format SDK using React.

Installation

You can install the SDK with NPM or Yarn.

npm install @simpleweb/open-format-react ethers

yarn add @simpleweb/open-format-react ethers

Documentation

View the docs

You can checkout an example Next.js to see how it works.

Getting started

• The OpenFormatProvider is how you initialise the SDK. It should typically wrap your entire application so you can access the various hooks it provides.
• As the provider takes care of initialising the SDK for you, you don't have to do much else but you need to pass it a config object to specify which network you want to interact with.

import { OpenFormatProvider } from '@simpleweb/open-format-react';

function App() {
  return (
    <>
      <OpenFormatProvider config={{ network: 'mumbai' }}>
        {/* the rest of your app... */}
      </OpenFormatProvider>
    </>
  );
}

Parameter	Type	Description
network	chain	'mainnet', 'mumbai' or 'localhost'

Reading from the subgraph

There are numerous hooks that you can use to pull data from the subgraph. These return a Query from react-query, please refer to their documentation for further information.

import { useSaleData } from '@simpleweb/open-format-react';

function MyComponent() {
  const { data } = useSaleData({ tokenId: '0x...' });

  return <>{data && <pre>{JSON.stringify(data, null, 2)}</pre>}</>;
}

Or you can make raw requests against the subgraph.

import { useRawRequest } from '@simpleweb/open-format-react';
import { gql } from 'graphql-request';

function MyComponent() {
  const { data } = useRawRequest({
    query: gql`
      {
        tokens {
          id
        }
      }
    `
  });

  return <>{data && <pre>{JSON.stringify(data, null, 2)}</pre>}</>;
}

Request Configuration

react-query is being used under the hood to make the request, and it is possible to pass through configuration options.

const { data } = useRawRequest({
  query: gql`
    {
      tokens {
        id
      }
    }
  `,
  config: {...}
});

Connecting to a wallet

Before you can deploy or perform any interactions with the contract you'll want to connect a wallet.

You can allow people to connect their wallets using the <ConnectButton /> component (which uses Onboard) and the useWallet hook to get the connection state and the wallet itself if required.

import { ConnectButton, useWallet } from '@simpleweb/open-format-react';

function MyComponent() {
  const { isConnected, wallet } = useWallet();

  return (
    <>
      <ConnectButton />
    </>
  );
}

Deploying a contract

Deploying a contract is simple, you just need to make sure a wallet is connected first.

import { useDeploy, useWallet } from '@simpleweb/open-format-react';

function MyComponent() {
  const { isConnected } = useWallet();
  const { deploy } = useDeploy();

  return (
    <>
      {isConnected && (
        <button
          onClick={() =>
            deploy({
              maxSupply: 100,
              mintingPrice: 0.01,
              name: 'Test',
              symbol: 'TEST',
              url: 'ipfs://'
            })
          }
        >
          Deploy NFT
        </button>
      )}
    </>
  );
}

Minting an NFT

Once you have deployed a contract you can then mint NFTs from it. The contractAddress can be accessed when deploying a contract const { contractAddress } = await deploy().

import { useMint, useNFT } from '@simpleweb/open-format-react';

function MyComponent() {
  const nft = useNFT('0x...');
  const { mint } = useMint(nft);

  return (
    <>
      <button onClick={() => mint()}>Mint NFT</button>
    </>
  );
}