# 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](https://www.google.com/chrome/) if needed
* **NPM**
* **Basic knowledge of React & Terminal / Command Line**

### Terminal #1: Run the Sample Website

#### Clone the Sample Repository

{% code title="command" %}

```bash
git clone https://github.com/XYOracleNetwork/xl1-samples-react.git
cd xl1-samples-react
```

{% endcode %}

#### Install Dependencies

{% code title="command" %}

```bash
npm install
```

{% endcode %}

#### Start the React Sample

{% code title="command" %}

```bash
npm run serve
```

{% endcode %}

This launches a sample website, usually on <http://localhost:3000>, unless that port is already in use.

<figure><img src="/files/U4biGv3aOeQyHJy3aM0d" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

<figure><img src="/files/AXfkEdvkNYcKdNmBVDMh" alt="" width="375"><figcaption></figcaption></figure>

### Terminal 2: Run the Local Blockchain Producer

In a <mark style="color:red;">**new terminal window**</mark>, start the local blockchain producer.&#x20;

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:

{% code title="command" %}

```bash
npm run start-cli
```

{% endcode %}

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:

{% code title="output" overflow="wrap" lineNumbers="true" %}

```
[Producer] No wallet mnemonic specified!
[Producer] Using randomly generated mnemonic:
    
glue nominee color invest rare middle cat barrel across devote rival beach device guitar punch item throw barely address dad tag waste shiver shoe
```

{% endcode %}

{% hint style="warning" %}
**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.
{% endhint %}

After this, you'll see the following in the sample website:

<figure><img src="/files/RFH1nXrdLLu4VgEEVkGH" alt="" width="375"><figcaption></figcaption></figure>

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!**&#x20;

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](https://chromewebstore.google.com/detail/xl1-wallet/fblbagcjeigmhakkfgjpdlcapcgmcfbm)

{% hint style="warning" %}
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**](https://support.google.com/chrome/answer/2364824)**.** Profiles have unique extensions, so any wallets on a second profile will be kept separate from your personal Chrome profile.
{% endhint %}

#### 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.*](/developers/xl1-wallet/get-xl1-browser-wallet/how-to-import-an-xl1-wallet.md)

{% hint style="warning" %}
**Reminder:** Never reuse this seed phrase outside of development.
{% endhint %}

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:

<figure><img src="/files/tUsEOf66XEwF1pOrGlAR" alt="" width="351"><figcaption></figcaption></figure>

The sample website will also update, recognizing that your wallet is detected and ready to make a test transaction.

<figure><img src="/files/dREKh129vbI2ZgAg5W7A" alt="" width="375"><figcaption></figcaption></figure>

### 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:

1. The Wallet creates and signs the transaction.
2. The signed transaction is submitted to your local producer, which is already running in Terminal #2.
3. The local producer includes the transaction in a newly created block.
4. 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.&#x20;

<figure><img src="/files/khh6hvsWLZ2LLatDlz5i" alt="" width="184"><figcaption></figcaption></figure>

<figure><img src="/files/NGxDptPos2TLhjGwMGP6" alt="" width="375"><figcaption></figcaption></figure>

### 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](https://github.com/download13/blockies) to generate the wallet address avatar, and identicons for payloads.

<figure><img src="/files/P4F1bgEUIrrrMhxpDPI3" alt="" width="184"><figcaption></figcaption></figure>

&#x20;You can use the "info" icon button to see the JSON of each payload.&#x20;

<div><figure><img src="/files/x9m8PGJwFW3hMdzSTQfU" alt="" width="351"><figcaption></figcaption></figure> <figure><img src="/files/YEVyjNBb48NYKSdzImD4" alt="" width="348"><figcaption></figcaption></figure></div>

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:

<figure><img src="/files/fBTrcmoH5xx0M2dlojEY" alt="" width="186"><figcaption></figcaption></figure>

{% hint style="danger" %}
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.**&#x20;
{% endhint %}

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](https://github.com/XYOracleNetwork/xl1-issues).

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**.

<figure><img src="/files/Hxeoon5LAwRl1KhBwJWf" alt=""><figcaption></figcaption></figure>

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)

<figure><img src="/files/f9T3P3RwHWEFx3CWEuUv" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.xyo.network/developers/how-to-request-xl1-testnet-tokens-1/introduction.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.