Front End: Transfer (send) your NFTs (ERC-721) using Ethers.js or Wagmi.sh

Question

I'm a front-end dev getting my feet wet in the crypto nft space.

I built a simple site for displaying all the NFTs in your wallet. Users can connect to the page using Rainbowkit (built on top of WAGMI, which also utilizes Ethers.js). Once connected, I can get the wallet address and fetch all the NFTs in it using the Alchemy NFT API.

Now all of that is done, I want to add a Transfer button so that users can transfer/send the NFts they own to another address. What is the proper way of doing that?

Here's what I have learnt: Since NFTs are ERC-721 tokens, I can safely assume they will have the safeTransferFrom function which can be called to send the NFT. Are all NFTs ERC-721 tokens? If yes do they all have safeTransferFrom function baked in their contract? What if someone remove that function out of the contract when they created it?

I'm a bit lost with all these questions. A little guidance would be much appreciated. Thanks in advanced!

Answer 1

If a contract implements ERC721, it will have the safeTransferFrom function. There are special cases, like CryptoKitties, that were deployed before the ERC-721 standard existed. But not all NFTs are ERC721, you also have ERC1155 which is pretty popular nowadays. In that case, the signature of safeTransferFrom changes slightly, adding an "amount" argument:

function safeTransferFrom(
    address from,
    address to,
    uint256 id,
    uint256 amount,
    bytes calldata data
) external;

To determine if a contract is ERC721 or ERC1155, you can use the supportsInterface function on the contract.

Answer 2

Here is an implementation, in plain JavaScript that you can steal for this:

https://nft.life

Just click on Batch Transfer ERC-721.