arrow-left Course Hub
Lesson 21: Transfer NFTs with React.js
Estimated reading time:

25 minutes

Difficulty:

Intermediate

Key takeaway:

Learn how to use offers to transfer NTFs on the XRP Ledger with React.js.

Lesson 21

Transfer NFTs with React.js

Transferring NFTs has never been easier.

Transferring unique assets between accounts on the XRPL

As we learned in the “Mint and Burn NFTs” lesson, when you want to represent a non-fungible asset like a deed, a unique identification document, or a specific piece of art, you can use a non fungible token (NFT) to tokenize the asset and use the XRPL to buy and sell it. Once you have this tokenized asset, you may want to sell this asset to another person or move it to a different account. To do this, we’ll need to learn how to use offers, the mechanic behind transferring NFTs.

There are a couple ways to transfer NFTs directly between two accounts. One is by using buy offers and the other is by using sell offers. In the next lesson we’ll show you buy offers and how to broker a sale between two different accounts. But first, in this lesson we’re going to transfer an NFT with a sell offer by going through these steps:

  1. Mint an NFT in our source wallet.
  2. Set a value to sell the NFT, and create a sell offer.
  3. Use a different wallet to accept a sell offer and buy the NFT.

Seeing this in action

  1. Open the sandbox below to start by minting an NFT into your source account.
  2. Wait for the wallets to be funded.
  3. Customize your NFT by adding a link, or small amount of text to the URI field in the source wallet.
    –  This field accepts a maximum of 256 bytes to keep the data stored on the ledger to a reasonable size.
    – This typically is where links to digital content or metadata would be stored.
  4. Click the Send button to mint your NFT, and wait for your NFTokenMint transaction to be validated by the XRPL.
  5. If it succeeds, you should see a token ID in your account, along with the URI you included.
  6. From the tokens list on your source account, copy the token ID of the NFT you just minted and paste it into the ID field of the sell offer. Then, enter the Amount of the sell offer in drops (millionths of an XRP).
  7. Once you have created a sell offer for an NFT in your wallet, you will see it appear underneath the token in your wallet. The important piece of information in the response is the NFT Offer Index, labeled as nft_offer_index, which someone would use to accept the sell offer and buy the token.
  8. To complete an NFT transfer, use the destination account wallet below. Enter the sell offer index, and watch the token transfer. Make sure the offer amount is less than your account balance!

END OF LESSON

Now that you've learned a bit about transferring NFTs with React on the XRP Ledger, test your knowledge with a quiz.

To transfer an NFT between two accounts, you must:
When transferring an NFT you own, which of the following helps someone else find and accept the transfer.
Which hook in the nice-xrpl library accepts an offer in an NFT transfer?