# 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](https://v1.etherspot.io/transaction-kit/code-sandboxes)

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!