‹ back to the live site

Use this in your own project

This site is already a live, working copy of the TBA Wallet UI, pointed at one specific NFT collection. Want to point the same code at your own NFT collection instead? Clone the repo and follow the 5 steps below.

Setup: 5 steps

  1. Copy the example settings file. Open a terminal in this project folder and run this command:
    cp .env.example .env.local
    This creates a new file, .env.local, for your own settings. It is not shared with anyone else.
  2. Set NEXT_PUBLIC_TOKEN_CONTRACT. This is the address of your own NFT collection (an ERC-721 contract) - the one you want this wallet UI to work with. It is a long string of letters and numbers starting with 0x, for example: 0xAbC1230000000000000000000000000000dEf9
  3. Set RPC_URL. An "RPC URL" is a web address this app uses to talk to the blockchain, so it can read balances and send transactions. You need one before the app will work. To get one for free, make a free account at Alchemy (alchemy.com) or Infura (infura.io), then copy the RPC URL they give you for your chain. Some chains also have a free public RPC URL that needs no signup. This one is deliberately NOT prefixed with NEXT_PUBLIC_ - real RPC URLs usually bake in a billable API key, and the app keeps it server-side only (see app/api/rpc/route.ts) so it never ships to the browser.
  4. Set NEXT_PUBLIC_CHAIN_ID. This is a number that tells the app which blockchain to use. For example, 1 means Ethereum mainnet, and 8453 means Base. If you do not know the number for your chain, look it up at chainlist.org.
  5. Restart the app, then open a wallet page. Save the file. Stop the running server (press Ctrl+C in the terminal) and start it again:
    npm run dev
    Then, in your browser, go to /wallet/<tokenId>. Replace <tokenId> with the ID number of one real NFT from your collection. For example, if you own NFT #1, go to /wallet/1. The 1 here is just an example number, not a fixed or special value - use whatever token ID your own NFT has.