Getting Started

You can refer a third-party base about Web3.0 login to support TokenPocket Extension quickly, such as: web3-onboard (https://github.com/blocknative/web3-onboard)

Or follow the steps below to complete the access to TokenPocket Extension

To develop with the TokenPocket Extension, install the TokenPocket Extension in the browser on your development machine.

Once the TokenPocket Extension is installed and running (make sure to backup your Secret Recovery Phrase), you should find that the new browser tab window.ethereum has an available object in the developer console. This is how your website interacts with TokenPocket Extension.

You can review the full API for that object here.

Web3.0 Browser Detection

To verify if the browser is running TokenPocket Extension, copy and paste the code snippet below in the developer console of your web browser:

if (typeof window.ethereum.isTokenPocket !== 'undefined') {
  console.log('TokenPocket Extension is installed!');
}

Detect TokenPocket Extension

If you want to differentiate TokenPocket Extension from other Ethereum compatible browsers, you can use ethereum.isTokenPocket.

Connect to TokenPocket Extension

"Connect to" or "log in" the TokenPocket Extension actually means "accessing the user's Ethereum account".

You should only initiate connection requests in response to direct user actions, such as button clicks. You should always disable the Connect button while a connection request is pending. You should never initiate a connection request on page load.Clicking the button calls the following method:

ethereum.request({ method: 'eth_requestAccounts' });

For example:

HTML

<button class="enableEthereumButton">Enable Ethereum</button>

JavaScript

const ethereumButton = document.querySelector('.enableEthereumButton');

ethereumButton.addEventListener('click', () => {
  //Will Start the  TokenPocket Extension extension
  ethereum.request({ method: 'eth_requestAccounts' });
});

This promise-returning function resolves with an array of hex-prefixed Ethereum addresses, which can be used as general account references when sending transactions.

Over time, this method is intended to grow to include various additional parameters to help your site request everything it needs from the user during setup.

Since it returns a promise, if you're in an async function, you may log in like this:

const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
const account = accounts[0];
// We currently only ever provide a single account,
// but the array gives us some room to grow.

Example:

HTML

<button class="enableEthereumButton">Enable Ethereum</button>
<h2>Account: <span class="showAccount"></span></h2>

JavaScript

const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');

ethereumButton.addEventListener('click', () => {
  getAccount();
});

async function getAccount() {
  const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
  const account = accounts[0];
  showAccount.innerHTML = account;
}