React Connecting Wallet

Guide to connecting the user's wallet in react.

The Zora ZDK requires an ethers instance to interact with the blockchain.

If data is only being read from ZDK, an ethers provider can be used to read from the blockchain. If you need to read or write to the blockchain, you should provide an ethers signer, a type of provider that also can sign transactions.

Typically, you will create an ethers signer through asking users to connect their wallet. The Zora team typically uses web3-react to connect the user's wallet or web3modal. Once you set up these libraries, you can then use that provider for the ZDK.

// Example for setting up the AuctionHouse from Web3React
function MyComponent() {
  const {library, chainId} = useWeb3React();
  // library is a ethers provider/signer instance
  // chainId is the networkId
  
  const auctionHouse = useMemo(() => {
    if (library && chainId) {
      return new AuctionHouse(library.getSigner(), chainId);
    }
  }, [library, chainId]);
  return (
    auctionHouse ? (
      <ManageAuction auctionHouse={auctionHouse} />
    ) : <div>Please connect wallet</div>
  );
}

If you want to allow easy bidding and listing of NFTs, Zora supports hosted urls where the user can interact with Zora interface to list their NFTs or bid on NFTs without needing to setup any wallet login and the user can trust the Zora.co site.

https://zora.co/auctions/{TOKEN_ADDRESS}/{TOKEN_ID}/list
// Lists the given token for an auction house auction

https://zora.co/auctions/{TOKEN_ADDRESS}/{TOKEN_ID}/bid
// Allows the user to bid on the active auction for the given token