Run with React
This tutorial walks you through setting up and running a local blockchain with a single block producer using the XYO Layer One Protocol. You’ll use a React-based sample app, connect it to a test wallet, and simulate transactions using locally generated test tokens. This setup is fully self-contained and requires no access to an external testnet.
It’s a great starting point for developers looking to:
Explore how XL1 handles smart contract interactions
Understand the local development experience before deploying to public infrastructure
Test without spending real tokens or revealing production credentials
Prerequisites
Before you begin, make sure you have the following installed:
Node.js version 22 or higher
Google Chrome browser
Download Google Chrome if needed
NPM
Basic knowledge of React & Terminal / Command Line
Terminal #1: Run the Sample Website
Clone the Sample Repository
git clone https://github.com/XYOracleNetwork/xl1-samples-react.git
cd xl1-samples-reactInstall Dependencies
Start the React Sample
This launches a sample website, usually on http://localhost:3000, unless that port is already in use.
If you see a red alert regarding the "XYO Client", you can still continue with no issue! This alert is used to inform developers who are looking to debug the sample or dive into the details of the code.
Terminal 2: Run the Local Blockchain Producer
In a new terminal window, start the local blockchain producer.
If you are not in the sample already, be sure to run cd xl1-samples-react to get your second terminal into the correct repository with before attempting to start the blockchain producer.
Once you're inside the repository, run the following command:
This command does two important things:
It launches a local blockchain with a single block producer
It generates a unique test wallet and outputs a seed phrase (mnemonic)
Example output:
Reminder: This wallet is automatically pre-funded with test tokens on your local blockchain. These tokens have no real value and are for development use only.
After this, you'll see the following in the sample website:
Congrats on starting your pre-funded test wallet! As you can see above, your next step will be setting up your XYO Layer One (XL1) Wallet!
You can also click the "Done" button on any of the steps to remove the alerts for the steps you've already completed.
Connect the Pre-Funded Test Wallet
1. Install the XL1 Wallet Extension
Install the Chrome extension from the Web Store: XL1 Wallet - Chrome Extension
If you already have a personal wallet that you'd like to keep separate from your development test environment, we recommend using a second Chrome profile. Profiles have unique extensions, so any wallets on a second profile will be kept separate from your personal Chrome profile.
2. Import the Seed Phrase
Copy the mnemonic (seed phrase) from your terminal and paste it into the XL1 Wallet. This links the extension to your local blockchain identity.
Want a walkthrough on importing or replacing a seed phrase? See this guide.
Reminder: Never reuse this seed phrase outside of development.
Once your wallet has been imported, you should see XL1 Tokens appear in the "Localhost" version of your test wallet. It will look something like this:
The sample website will also update, recognizing that your wallet is detected and ready to make a test transaction.
Initiate a Test Transaction
Now, click the “Submit Transaction” button!
When you click the “Submit Transaction” button in the sample app, it triggers the following process:
The Wallet creates and signs the transaction.
The signed transaction is submitted to your local producer, which is already running in Terminal #2.
The local producer includes the transaction in a newly created block.
This block is then added to the blockchain and viewable via the Explorer.
The XL1 Wallet will pop up and request your approval to sign the transaction using the private key derived from your imported seed phrase.
Preview Transaction
Once you click “Authorize”, your transaction will be attempted. You'll see a preview of the payloads you're including in your transaction.
You may notice two generated icons for "On-Chain Payloads" and another two in "Referenced Payloads". These icons are generated from the unique payload and are a visual representation of a payload, similar to the generated purple and yellow icon representing my wallet address. This means that no two will ever be exactly the same! The XYO Team uses Blockies to generate the wallet address avatar, and identicons for payloads.
You can use the "info" icon button to see the JSON of each payload.
Click "Approve" to attempt the transaction. If successful, you’ll see a success alert in the wallet UI.
Successful Transaction
After a short period of loading, a successful transaction will look like this:
IMPORTANT: The link to see the transaction on Explore inside the wallet will not work. This is because you are running a test environment, and the wallet is designed to take real users who are on a published website to our Explore page. You can still see the transaction on Explore by using the link provided in the sample website.
If your transaction failed, please let us know! We'd love to learn more about the bug you experienced. You can report the bug here.
Follow the instructions below to view your transaction.
View your Transaction on Explorer
Once your transaction is complete, you can view it on Explore! Use the “View Transaction” link shown on the sample website interface after submitting. This opens the Explore UI connected to your local chain.
You’ll be able to:
View the transaction hash
See your wallet address as the sender
Confirm the signature
Verify the block ID that includes your transaction
Optionally see reward-related metadata (even if reward = 0)
Last updated