Transfer NFT

Now it is your turn to modify the already existing content. Let’s modify the nft/[id].tsx page, so that the owner of the NFT can also transfer it.

Step 1: Getting the input address

Currently from the nft/[id].tsx page, a user can input a numerical value then list his/her NFT on the marketplace. Now let’s add a similar card, also with an input. But this time, the input is going to be a string and it will be the wallet address of the recipient.

Note: Just like price, the address should also be stored in state and state should be updated with every change in input. For this, you can use this function:

const handleAddresChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setAddress(event.target.value);
  };

Step 2: Calling Transfer Hook

Now we have the address of the recipient stored in state (called address) and we have the id of the NFT (from url params) we are ready to execute the actual transfer. From our NFT contract, call the transfer function to actually transfer to the address you have provided.

Step 3: Test

Login to the thirdweb dashboard to verify the owner of the NFT has changed

Template links - NFT Marketplace:

Github Link

Github Link 2