‹ 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
- 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. - 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 with0x, for example:0xAbC1230000000000000000000000000000dEf9 - 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 withNEXT_PUBLIC_- real RPC URLs usually bake in a billable API key, and the app keeps it server-side only (seeapp/api/rpc/route.ts) so it never ships to the browser. - Set
NEXT_PUBLIC_CHAIN_ID. This is a number that tells the app which blockchain to use. For example,1means Ethereum mainnet, and8453means Base. If you do not know the number for your chain, look it up at chainlist.org. - Restart the app, then open a wallet page. Save the file. Stop the running server (press
Ctrl+Cin 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. The1here is just an example number, not a fixed or special value - use whatever token ID your own NFT has.