Ethers and Angular

Ethereum with Dependancy Injection

ethers.js is by far the best javascript library to interact with an Ethereum network. Let’s see how we can use it the right way with Angular.

Before all …

⚠️ : Don’t use deep import from ethers with Angular or it would try to use node modules, and you’ll get errors : - ⛔️: import { BaseProvider } from 'ethers/providers' -✅ : import { providers } from 'ethers' // providers.BaseProvider

Provider

First we need to create an Injectable Provider. For that there is two methods :

• Create an InjectionToken.
• Extends the BaseProvider.

The Provider requires a network name. In this case we’ll keep it in the environment. Like that we can use different networks if we are in test (goerli), staging (ropsten) or production (mainnet).

Example with the InjectionToken :

Example by extending the BaseProvider :

The InjectionToken is simplest, but somethings you’ll need to extends a Provider from ethers.

Signer

Now that we have a provider we need to make our Signer injectable too.

The idea here is to extends the Signer so we can display something to the user when we send a transaction. The Signer is an abstract class that requires three methods to be implemented :

• getAddress : Return the address of the current account.
• signMessage : Sign a message or transaction.
• sendTransaction : Send a transaction to the network.

We’ll need to login with a private key. To make it easier, let’s assume that the Encrypted JSON is in the localstorage.

For now we’ll use the Wallet class because ethers doesn’t expose all the needed methods to create a custom wallet on Angular (see #issue479). But it should be possible with version 5.

Contract

Now that we have our Injectable Signer we can build injectable contract ! For that we only need to extends the Contract class :

I use the example of the ethers documentation.

Here I store ENS name - or the address - of the contract in the environment. In the case of addresses this gives me fine grained control depending on the network.

Now we can import the contract from any component :

Limitations

In this case we suppose that you know the address of the contract a priori. If you need the input of the user to know the address (e.g. ERC1077), you cannot use this method.

[Bonus] Web3 Provider

Let’s try use the Web3Provider instead of the BaseProvider :

First we create an InjectionToken around the web3 provider. Then we inject it inside our constructor. Note that in this case we extends the class Web3Provider.

But this is not enough, MetaMask requires that you enable() the provider before using it. The esaiest way to manage that is to provide the APP_INITIALIZER in the AppModule :

But this would open a new MetaMask window at load time. Which is poor User Experience…

Another solution would be to add a enable() method on the Injectable Provider. But this might leads to poor/hard error handling.

If you have an elegant way of managing this enable() method in Angular please leave a comment, I’d love to read it 😃.