Connect EverWallet

There are two ways to make a frontend for your smart contracts, namely the everscale-inpage-provider with the EverWallet extension or the EverSdk AppKit JS.

EverSdk is good if you want to create a standalone app, such as your wallet or a game. It's also great for writing server applications. But it's not suitable for writing web applications because you needto store users' keys. And just storing them on the website isn't considered secure, because any malicious extension or XSS vulnerability on your website will allow you to steal the keys. But in some simple cases, such as a tic-tac-toe game where you just throw in a few cents for gas, you can use them on the frontend. Basically, to write a frontend with it, you should have enough EverSdk examples from"Smart Contracts" + documentation EverSdk and AppKit JS

We'll look at how to write a frontend for an application using everscale-inpage-provider. This is very similar to writing an application with web3.js

You already know almost everything you need to know about making frontend for your smart contracts (if not, refer to section on smart contracts). Same library, same API. Only the keys and accounts aren't managed by you, but by the extension. You can also use 'everscale-standalone-client' as a fallback to pull data from the blockchain in case the person hasn't connected the wallet or the extension isn't installed yet. Another difference is that it's not recommended deploying a smart-contracts by sending stateInit directly from the user's wallets, as not all wallet types support sending stateInit. Instead, you need to write factories and call the deploy(...) method of factory to deploy a smart-contract.

As an example of a frontend, we'll write a simple application for our tip3 token dice game.

And this we'll go step by step, from start to finish. Please install EverWallet, switch it to testnet and get test coins as follows.

Check if the extension is available

We always start our interaction with the wallet by checking if the user has a wallet installed:

import {hasEverscaleProvider} from 'everscale-inpage-provider';
const isEverWaleltInstalled = await hasEverscaleProvider();

 Check hasEverscaleProvider 

If the user doesn't have a wallet installed, ask him to install.

Initialization of the provider

For simplicity, we'll use the provider without https://github.com/broxus/everscale-standalone-client. It can be used to pull data from blockchain without having a wallet attached. Next, we initialize the provider and retrieve its current state:

import { ProviderRpcClient } from 'everscale-inpage-provider';
const ever = new ProviderRpcClient();
// Wait for the extension to be fully initialized await ever.ensureInitialized();
// Get current provider state 
const currentProviderState = await ever.getProviderState();

 Get provider state 

Permissions

Two permissions are supported in the wallet at the moment. These are:

• 'basic' allows the site to retrieve data from the blockchain and use the API to decrypt transactions.
• 'accountInteraction' allows the page to prompt the user for transactions and perform other interactions such as signing a message.

Asking the user for permission (connect the wallet):

// Subscribe to new permissions
(await ever.subscribe('permissionsChanged')).on('data', permissions = > { 
  // You can monitor changes in permissions there
  console.log('permissions from subscription', permissions);
});
// The provider has several events to subscribe to
// connected, disconnected, networkChanged, permissionsChanged, loggedOut

// Or you can get new permissions there 
const permissions = await ever.requestPermissions({ 
  permissions: ['basic', 'accountInteraction']
});

 Request permissions

// To disconnect, you can use 
await ever.disconnect();
// or changeAccount 
await ever.changeAccount();

 logout

Check selected network ID

After we get the permissions, we can interact with the wallet and receive data from the blockchain. Our cube game contract is deployed in the testnet, so let's check what networkId we have in it

// Subscribe to network changed event
const networkSubscriber = await ever.subscribe('networkChanged');
networkSubscriber.on('data', (event) => {
  // track changes in the network id
  if (event.networkId === 42 && currentProviderState.selectedConnection === 'testnet') {
    // We are on the testnet now
  } else {
    // Still not on the testnet
  }
});
// You can use await networkSubscriber.unsubscribe(); to cancel the subscription

const currentProviderState = await ever.getProviderState();
if (currentProviderState.networkId !== 42 || currentProviderState.selectedConnection !== 'testnet') {
  // Ask user to change the network
} else {
  // Everything is okay
}

 Check network

In the next article, we will look at how to interact with smart contracts.