Skip to main content

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.


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) Rinkeby (4) 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 interface without you needing to setup any wallet login.{TOKEN_ADDRESS}/{TOKEN_ID}/auction/list// Lists the given token for an auction house auction{TOKEN_ADDRESS}/{TOKEN_ID}/auction/bid// Allows the user to bid on the active auction for the given token