# \<EtherspotTransactionKit />

## Introduction

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.

```jsx
// 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>
);
```

## :tada: Congratulations

And that's how we get our TransactionKit journey started. In summary, "wrapping" your `<App />` component injects the powerful features and services of Etherspot into your app. Read on to discover what's next.