Adding an EVM Network

This page walks you through the process of adding a new EVM network to Enkrypt

Getting Started

Set up your development environment

1. Create a fork of the repository

2. Clone the fork locally

3. In the root directory run the following:

yarn --frozen-lockfile
yarn build:all
yarn watch-extension

You will now have your fork ready to go and your project is watching for changes to Enkrypt.

Add your network's name and platform

Navigate to packages/types/src/networks.ts and add your network's name to the NetworkNames enum.

If your network has a Coingecko platform ID you can add that to CoingeckoPlatform as well. To find your network's coingecko platform run the following in your teminal:

curl https://api.coingecko.com/api/v3/asset_platforms

Note: After adding your network to networks.ts you will need to run yarn build:all again.

Create a network file

Navigate to packages/extension/src/providers/ethereum/networks and create a file with the name [network-ticker].ts.

In your new network file import EvmNetwork and EvmNetworkOptions and create a variable for your network's configuration.

import { EvmNetwork, EvmNetworkOptions } from "../types/evm-network";

const netOptions: EvmNetworkOptions = {
    ...
};

The EvmNetworkOptions interface takes this form:

export interface EvmNetworkOptions {
  name: NetworkNames;
  name_long: string;
  homePage: string;
  blockExplorerTX: string;
  blockExplorerAddr: string;
  chainID: number;
  isTestNetwork: boolean;
  currencyName: string;
  node: string;
  icon: string;
  coingeckoID?: string;
  coingeckoPlatform?: CoingeckoPlatform;
  basePath?: string;
  NFTHandler?: (
    network: BaseNetwork,
    address: string
  ) => Promise<NFTCollection[]>;
  assetsInfoHandler?: (
    network: BaseNetwork,
    address: string
  ) => Promise<AssetsType[]>;
  activityHandler: (
    network: BaseNetwork,
    address: string
  ) => Promise<Activity[]>;
  customTokens?: boolean;
}

For a basic network integration the only required fields are name, name_long, homePage, blockExplorerTX, blockExplorerAddr, chainID, currencyName, node, icon, isTestNetwork, and activityHandler.

For further customization take a look at other networks that are already added to Enkrypt.

For node use a wss URL when possible.

For blockExplorerTx, and blockExplorerAddr you should put the URL with the template string [[txHash]] and [[address]] where they would go in the URL respectively.

Then create a new EvmNetwork and export it.

const net = new EvmNetwork(netOptions);

export default net;

And finally in packages/extension/src/providers/ethereum/networks/index.ts add your network to the exported networks.

Your network should now show up in the manage networks screen!

Adding Activity Handler

Having an activity handler for your network is mandatory and will give users a good experiance. Activity handler is responsible for showing past activity of the user on activity tab We already implemented a activity handler for etherscan/blockscout api. If you already have a block explorer that is compatible with either etherscan or blockscout, all you need to do is set

import { EtherscanActivity } from "../libs/activity-handlers";
const netOptions: EvmNetworkOptions = {
    ...
    activityHandler: wrapActivityHandler(EtherscanActivity),
};

and then add the blockexplorer api link to

packages/extension/src/providers/ethereum/libs/activity-handlers/providers/etherscan/configs.ts

However, if you dont have an api compatible with etherscan you have to manually create one that can return transaction history for the user, it should follow the following type.

export type ActivityHandlerType = (
  _network: BaseNetwork,
  _address: string
) => Promise<Activity[]>;

Some sample handlers are located at

packages/extension/src/providers/ethereum/libs/activity-handlers/providers

if you dont have any api to get all user assets, you can simply return and empty array. That way Enkrypt will only display user activity happened inside the Enkrypt

const netOptions: EvmNetworkOptions = {
    ...
    activityHandler: wrapActivityHandler(() => Promise.resolve([])),,
};

Adding an Asset Handler

Having an asset handler for your network is optional but better to have it since it'll give an amazing experience to the user. Asset handler is responsible for showing all of user assets under specific account. We already implemented a asset handler for debank api, if your chain is part of debank api (check here) all you need to do

import assetsInfoHandler from "@/providers/ethereum/libs/assets-handlers/assetinfo-mew";

const netOptions: EvmNetworkOptions = {
    ...
    assetsInfoHandler
};

and then add your chain id to

packages/extension/src/providers/ethereum/libs/assets-handlers/assetinfo-mew.ts#L30

If it is not part of debank api, we still highly recommend for you to do a custom implementation it should follow the following type

export type assetsInfoHandlerType = (
  network: BaseNetwork,
  address: string
) => Promise<AssetsType[]>;

Adding an NFT Handler

Having an NFT handler for your network is optional but better to have it since it'll give an amazing experience to the user. NFT handler is responsible for showing all of user NFTs under specific account. We already implemented a NFT handler for simplehash and rarible api, if your chain is compatible with either of those you can add the respective one to

import RaribleNFTHandler from "@/libs/nft-handlers/rarible";

const netOptions: EvmNetworkOptions = {
    ...
    NFTHandler: RaribleNFTHandler,
};

or

import shNFTHandler from "@/libs/nft-handlers/simplehash";

const netOptions: EvmNetworkOptions = {
    ...
    NFTHandler: shNFTHandler,
};

and add the chain configs to either

packages/extension/src/libs/nft-handlers/rarible.ts or packages/extension/src/libs/nft-handlers/simplehash.ts

If the chain is not part of simplehash or raribl, we still highly recommend for you to do a custom implementation it should follow the following type

export type NFTHandlerType = (
  network: NodeType,
  address: string
) => Promise<NFTCollection[]>;