Connect with Polkadot extension

Prerequisites

Before getting started, please ensure that you have the following prerequisites in place:

1. Import your Ternoa account in the Polkadot{.js} extension, or create an account in the extension directly.

2. Install and configure your preferred code editor (for this tutorial, we will be using Visual Studio Code [VSC]).

3. Install NodeJS v.14+, along with NPM.

Utilizing Polkadot extension, Next.js, and TypeScript:

In the code snippet below, we cover how to connect to the @polkadot/extension-dapp and fetch your accounts registered in your Polkadot browser extension (it will also fetch all substrate accounts registered in the other browser extensions).

Please, note that this solution is not the only one. Feel free to use any provider that would suit best your dApp.

This code snipped is designed to work in a Next-js environment. According to Next-js server-side components rules, the import of the @polkadot/extension-dapp extension library might need to be slightly adapted to work in your javascript environment.

export const getAccounts = async () => {
  const { web3Accounts, web3Enable } = await import("@polkadot/extension-dapp");
  const extensions = await web3Enable("Name your dApp powered by Ternoa");
  if (extensions.length === 0)
    throw new Error(
      'polkadot{.js} extension might not be installed. Make sure you allowed the dApp in the "Manage Website Access" settings of your wallet.'
    );
  return await web3Accounts();
};

You can implement this atomic function in your repository.

Now you can access the accounts, you can fetch them when needed, and store the index of the account you want to set as the connected account in your storage solution (context, redux, or any solution you use).

Next

The next step will be to sign a transaction in a browser environment. You can also look at how to mint an NFT or a secret NFT with your extension.