Query Ethereum balance callable function example

The following is a walkthrough of querying the Ethereum blockchain for an address' Ethereum balance example.

• Example change request

  • Overview

  • Acceptance criteria

  • Technical requirements

• Install dependencies

• Create onGetBalance function

• Build the functions

• Deploy functions

• Update the frontend application for new API interaction

  • Generate a Moralis service library

  • Create Moralis service

  • Update MoralisService

  • Create Web3 view

  • Update web3.component.ts

  • Update web3.component.html

• Further improvements

Example change request

Overview

As a user, I'd like to query the Ethereum blockchain for the given address' Ethereum balance.

Acceptance criteria

• Login as any user

• Navigate to the user web3 view

  • /web3

• Observe view includes the following:

  • Input to query a given Ehtereum address

  • Button to query the given address

Technical requirements

• web3 template updates to include new design

• MoralsService to interact with the onGetBalance callable function

• onGetBalance HTTPS callable function to update the view with the Ethereum balance

Install dependencies

Run the following to install dependencies:

npm i moralis

npm i @moralisweb3/common-evm-utils

Update function package.json to include dependencies:

file: apps\full-stack-typescript-api\src\package.json

{
    ...
    "dependencies": {
        ...
        "@moralisweb3/common-evm-utils": "^2.14.3",
        ...
        "moralis": "^2.14.3",
        ...
    }
}

Create onGetBalance function

In the apps\full-stack-typescript-api\src\functions folder, create the following:

functions
  - moralis
    - index.ts

Update apps\full-stack-typescript-api\src\functions\moralis\index.ts to be:

import { EvmChain } from '@moralisweb3/common-evm-utils';
import Moralis from 'moralis';

Moralis.start({
    apiKey: "{{ Your API key }}",
});

export async function onGetBalance(data: any, context) {

    const result = await Moralis.EvmApi.balance.getNativeBalance({
        chain: EvmChain.ETHEREUM,
        address: data.address,
    });

    return {
        balance: result.result.balance.ether
    };

};

The new function receives a data payload of type addressand queries the Etheruem blockchain for the address' Ethereum balance.

Update apps\full-stack-typescript-api\src\main.ts to include the new function.

import * as moralisFunctions from './functions/moralis';

...

// Moralis
export const onGetBalance = functions.https.onCall((data, context) => {
    return moralisFunctions.onGetBalance (data, context);
});

The main.ts file is our primary entry point for our functions and needs to be updated so that our new function is included when the project is built.

Build the functions

Run the following command to build the functions application:

nx build full-stack-typescript-api

Deploy functions

Run the following command to deploy new and updated functions:

firebase deploy --only functions

Update the frontend application for new API interaction

Now that we've created a cloud function for interacting with the Ethereum blockchain, we need to update the frontend application to integrate with the new function.

Generate a Moralis service library

Run the following command to generate a new Moralis service libary:

nx g lib --name=moralis --directory=services

Create Moralis service

Run the below command to create the Moralis service:

nx g service --name=moralis --path=libs/services/moralis/src/lib --project=services-moralis

The following files will be generated:

libs
  - services
    ...
    - account
      - src
        - lib
          - services-moralis.module.ts
        - index.ts
        - test-setup.ts
      - .eslintrc.json
      - jest.config.ts
      - project.json
      - README.md
      - tsconfig.json|lib|spec

Delete the services-moralis.module.ts file.

Update the index.ts file to remove the module export.

Run the below command to create the Account Service

nx g service --name=moralis --path=libs/services/moralis/src/lib --project=services-moralis

Update the index.ts file to export the account service file.

export * from './lib/moralis.service';

Update MoralisService

Update libs\services\moralis\src\lib\moralis.service.ts to include:

import { Injectable } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/compat/functions';

@Injectable({
	providedIn: 'root'
})
export class MoralisService {

	constructor(private fns: AngularFireFunctions) {}

	getBalance() {

		const callable = this.fns.httpsCallable('onGetBalance');
		const wallet = { address: "0x3bEcf83939f34311b6bEe143197872d877501B11" };
		return callable(wallet);

	}

}

Create Web3 view

Feature workflow should be followed as described here: Feature workflow

Update web3.component.ts

import { Component } from '@angular/core';
import { MoralisService } from '@full-stack-typescript/services/moralis';

@Component({
	selector: 'full-stack-typescript-web3',
	templateUrl: './web3.component.html',
	styleUrls: ['./web3.component.scss'],
})
export class Web3Component {

	balance$ = this.moralisService.getBalance();

	constructor(private moralisService: MoralisService) {}

	onGetBalance() {

		// noop

	}

}

Update web3.component.html

<div class="view-web3">
    <h1>Web3</h1>
    <button mat-raised-button color="primary" (click)="onGetBalance()">Get balance</button>

    <div>
        <h2>Balance details</h2>
        <div *ngIf="balance$ | async as balance">
            {{ balance.balance }}
        </div>
    </div>
</div>

Further improvements

The onGetBalance function currently exposes the Moralis API key and should not be deployed to production environments. To secure this function and keep secrets, secret, the Secret Manager API workflow should be followed to improve and secure the function from abuse.