arrow-left Course Hub
Lesson 5: Use React.js to monitor transactions on an account via transaction stream
Estimated reading time:

20 mins

Difficulty:

Intermediate

Key takeaway:

Use the useTransactionLog() hook in React to monitor real-time payments on the XRP Ledger, track transactions entering and leaving an account, and visualize live transaction streams without requiring manual requests.

Lesson 5

Use React.js to monitor transactions on an account via transaction stream

Real-time updates through transaction streams

Just like in the last lesson, in the following code sandbox, we start with a simple UI by creating a source wallet component and a destination account component. The main difference in this demonstration is that we’ll use a transaction stream to monitor payments that transfer into our destination account and out of our source wallet. For this demonstration, let’s pretend that we don’t know the sender but we’re trying to use a transaction stream to see the payments that are leaving that account.

Get a transaction stream of an account with useTransactionLog()

We’ll use useTransactionLog() to create a transaction stream to monitor the balance of the destination wallet and any payments that go into that account.

Start by sending XRP from the source wallet to the destination wallet. In the component below, you’ll see two checkboxes to monitor both the sender’s/source account and the destination account. Once you send XRP, you’ll see the payment show up in the list of activity.

END OF LESSON

Now that you've learned how to use the useTransactionLog() hook to monitor real-time payments on the XRP Ledger, test your knowledge by taking the quiz!

What does the useTransactionLog() hook do in a React app?
What is the main difference between useBalance() and useTransactionLog()?
Why is a transaction stream useful for monitoring payments?
What happens when XRP is sent from the source wallet to the destination wallet in this lesson?
How does the lesson’s demonstration simulate an unknown sender?