# Quick Start

## View or fork now on CodeSandbox

The Quick Start below is available as a well documented, fully functioning live example on CodeSandbox.

:point\_right: [View or fork the Send Native Asset CodeSandbox](https://doh5im.csb.app/)

:book: [View all our CodeSandbox examples](/transaction-kit/code-sandboxes.md)

Otherwise, please keep following the instructions below.

## Bootstrap a React App

Let's keep it simple and use `create-react-app` here. Run the following command in a directory of your choice:

```bash
npx create-react-app txkit-quickstart
```

The above command will install and bootstrap a basic React App into a directory called `txkit-quickstart.` Once the installation has finished, change directory into your newly bootstrapped React app by typing:

```bash
cd txkit-quickstart
```

## Install Transaction Kit

Next, install TransactionKit and Ethers

```bash
npm i @etherspot/transaction-kit ethers@5.4.0
// or
yarn add @etherspot/transaction-kit ethers@5.4.0
```

## Create a Web3 Provider

A Web3 provider ultimately provides access to blockchain account, also known as a wallet.

For the Quick Start example, we will randomly generate a wallet.

{% code title="index.tsx / index.js" %}

```javascript
import { EtherspotTransactionKit } from '@etherspot/transaction-kit';
import { ethers } from 'ethers';

// ...

const randomWallet = ethers.Wallet.createRandom();
const providerWallet = new ethers.Wallet(randomWallet.privateKey);
```

{% endcode %}

## Wrap your \<App /> with \<EtherspotTransactionKit />

Wrap your React `<App />` tag in the `<EtherspotTransactionKit />` tag. This will turbocharge your React app with the power of Etherspot and everything that the platform can offer.

{% code title="index.tsx / index.js" %}

```jsx
root.render(
  <React.StrictMode>
    <EtherspotTransactionKit
      provider={providerWallet} /* The random wallet we created above */
      chainId={80001} /* Polygon Testnet - Mumbai */
    >
      <App />
    </EtherspotTransactionKit>
  </React.StrictMode>
);
```

{% endcode %}

{% hint style="info" %}
**Get yourself some Polygon Mumbai Testnet funds**

In order to execute a transaction, you need to fund your randomly created account with Test MATIC, the native token on Polygon Mumbai. You can get some for free below.

[https://faucet.polygon.technology](https://faucet.polygon.technology/)
{% endhint %}

## Build a UI

We're going to start with a simple example - sending some MATIC to another address. TransactionKit makes this really, really easy. Have a look at the code below.

{% code title="" %}

```jsx
import {
  EtherspotBatches,
  EtherspotBatch,
  EtherspotTransaction,
  useEtherspotUi,
  useEtherspotAddresses,
} from '@etherspot/transaction-kit';

// In your main function body...

const { estimate, send } = useEtherspotTransactions();
const etherspotAddresses = useEtherspotAddresses();

const [address, setAddress] = useState('0x271Ae6E03257264F0F7cb03506b12A027Ec53B31');
const [amount, setAmount] = useState('0.001');

// In your rendering function...

<EtherspotBatches>
  <EtherspotBatch>
    <EtherspotTransaction
      to={address}
      value={amount}
    >
      {/* The following returns a list of Blockchain
          addresses that are ready to use */}
      {
        etherspotAddresses.map((etherspotAddressObject) =>
          <div>
            <p>Blockchain Name: {etherspotAddressObject.chainName}</p>
            <p>Blockchain ID:{etherspotAddressObject.chainId}</p>
            <p>Address: {etherspotAddressObject.address}</p>
          </div>
        )
      }
      <input
        type="text"
        value={address}
        onChange={(event) => setAddress(event.target.value)}
      />
      <input
        type="text"
        value={amount}
        onChange={(event) => setAmount(event.target.value)}
      />
      <hr />
      <button onClick={() => estimate()}>Estimate</button>
      <button onClick={() => send()}>Send</button>
    </EtherspotTransaction>
  </EtherspotBatch>
</EtherspotBatches>
```

{% endcode %}

{% hint style="warning" %}
**You must always estimate before sending**

Estimating first performs important transaction cost calculations that are required before sending.
{% endhint %}

Once sent - you can check the transaction on the Polygon Mumbai blockchain explorer [here](https://mumbai.polygonscan.com/address/0x271Ae6E03257264F0F7cb03506b12A027Ec53B31).

## :tada: Congratulations!

You've just sent your first transaction using TransactionKit! Wasn't that easy? Why not have a look around the TransactionKit documentation to see what else you can do with TransactionKit!


---

# 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://v1.etherspot.io/transaction-kit/quick-start.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.