> ## Documentation Index
> Fetch the complete documentation index at: https://etherspot.fyi/llms.txt
> Use this file to discover all available pages before exploring further.

# <EtherspotTransactionKit />

## Intro

In order for us to provide all the power of Etherspot to your app, we need to wrap your app in an **EtherspotTransactionKit** tag. This will allow the whole app to access libraries and services provided by TransactionKit.

## How to use

The **EtherspotTransactionKit** component will wrap your top level **App** tag which is usually found in the React app's index.js file.
Here is how you would use the **EtherspotTransactionKit** tag.

```javascript theme={null}
// Import the following libraries
import { EtherspotTransactionKit } from '@etherspot/transaction-kit';
// We're importing Ethers here to create a random wallet
import { ethers } from 'ethers';

/**
 * Later in your app's function code...
 */

// Let's create the random wallet for demonstration purposes.
const randomWallet = ethers.Wallet.createRandom();
// Pass the private key into a new ethers.Wallet to return a
// provider. This is the account we pass into EtherspotUi.
const providerWallet = new ethers.Wallet(randomWallet.privateKey);

/**
 * In your app's render function, "wrap" the <App /> tag...
 */

root.render(
  <React.StrictMode>
    <EtherspotTransactionKit provider={providerWallet}> // <-- open here
      <App />
    </EtherspotTransactionKit>                          // <-- close here
  </React.StrictMode>
);
```
