<EtherspotTransactionKit />

The top level component that injects the Etherspot Platform into your React app

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.

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

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