Connect a Wallet in React

Connecting a user's wallet in React

---

The ZORA Development Kit (ZDK) requires a connection to a node to both read from the blockchain and submit transactions. By having a user connect their wallet to your application, you can communicate to a node through their wallet.

note

If your application only needs to read data from the blockchain, we recommend using the ZORA indexer which doesn't require a connection to a node.

In order to submit a transaction, you must provide an ethers signer. The ZORA team typically uses web3-react or web3modal to connect a user's wallet. Once you set up these libraries, you can then pass in the wallet connection into the ZDK.

import { useWeb3React } from '@web3-react/core'
function MyComponent() {  const { library, chainId } = useWeb3React()  // library is a ethers provider/signer instance  // Ethereum Mainnet (1) for the chainId
  const auctionHouse = useMemo(() => {    if (library && chainId) {      return new AuctionHouse(library.getSigner(), chainId)    }  }, [library, chainId])  return auctionHouse ? (    <ManageAuction auctionHouse={auctionHouse} />  ) : (    <div>Please connect wallet</div>  )}

Hosted URLs

If you want to allow easy bidding and listing of NFTs, ZORA supports hosted urls where the user can interact with the ZORA.co interface without you needing to setup any wallet login.

https://zora.co/collections/{TOKEN_ADDRESS}/{TOKEN_ID}/auction/list// Lists the given token for an auction house auction
https://zora.co/collections/{TOKEN_ADDRESS}/{TOKEN_ID}/auction/bid// Allows the user to bid on the active auction for the given token