4: Chain Fusion: EVM block explorer
Chain Fusion refers to ICP's unique ability to interconnect with other blockchains without needing an intermediary to facilitate the connection. Canister smart contracts can hold assets and sign and submit transactions directly on other chains, including Bitcoin and Ethereum.
To facilitate the connection to Ethereum and other EVM networks, the EVM RPC canister can be used. It receives calls from other canisters or users, then sends RPC requests to the destination chain using HTTPS outcalls and threshold ECDSA signatures. Once it receives the result of the RPC request, it sends the response to the original caller. Calls can be simple data queries such as block information or they can be signed transactions that are submitted for processing on the EVM chain.
To explore Chain Fusion using the EVM RPC canister, let's take a look at a simple project that can be used to query information from the Ethereum network and sign messages using threshold ECDSA and Schnorr.
Open the ICP Ninja 'EVM block explorer' example.
Exploring the project's files
First, let's start by looking at the contents of the project's dfx.json file. This file will contain the following:
{
"canisters": {
"backend": {
"dependencies": ["evm_rpc"],
"main": "backend/app.mo",
"type": "motoko",
"args": "--enhanced-orthogonal-persistence"
},
"frontend": {
"dependencies": ["backend"],
"frontend": {
"entrypoint": "frontend/index.html"
},
"source": ["frontend/dist"],
"type": "assets"
},
"evm_rpc": {
"candid": "https://github.com/dfinity/evm-rpc-canister/releases/latest/download/evm_rpc.did",
"type": "custom",
"specified_id": "7hfb6-caaaa-aaaar-qadga-cai",
"remote": {
"id": {
"ic": "7hfb6-caaaa-aaaar-qadga-cai"
}
},
"wasm": "https://github.com/dfinity/evm-rpc-canister/releases/latest/download/evm_rpc.wasm.gz",
"init_arg": "(record {})"
}
},
"output_env_file": ".env",
"defaults": {
"build": {
"packtool": "mops sources"
}
}
}
In this file, you can see the definitions for three canisters:
frontend: The dapp's frontend canister, which has type "assets" to declare it as an asset canister, and uses the files stored in thedistdirectory. This canister has a dependency on thebackendcanister.backend: The dapp's backend canister, which has type "motoko" since it uses Motoko source code stored in the filebackend/app.mo. This canister has the dependency ofevm_rpc.evm_rpc: This canister is responsible for facilitating communication from the backend canister to RPC services that interact with the Ethereum network. This canister is a system canister and has the canister ID7hfb6-caaaa-aaaar-qadga-cai.
backend/app.mo
Next, let's take a look at the source code for the backend canister. Open the backend/app.mo file, which will contain the following:
import EvmRpc "canister:evm_rpc";
import IC "ic:aaaaa-aa";
import Sha256 "mo:sha2/Sha256";
import Base16 "mo:base16/Base16";
import Debug "mo:base/Debug";
import Blob "mo:base/Blob";
import Text "mo:base/Text";
import Cycles "mo:base/ExperimentalCycles";
persistent actor EvmBlockExplorer {
transient let key_name = "test_key_1"; // Use "key_1" for production and "dfx_test_key" locally
public func get_evm_block(height : Nat) : async EvmRpc.Block {
// Ethereum Mainnet RPC providers
// Read more here: https://internetcomputer.org/docs/current/developer-docs/multi-chain/ethereum/evm-rpc/overview#supported-json-rpc-providers
let services : EvmRpc.RpcServices = #EthMainnet(
?[
#Llama,
// #Alchemy,
// #Cloudflare
]
);
// Base Mainnet RPC providers
// Get chain ID and RPC providers from https://chainlist.org/
// let services : EvmRpc.RpcServices = #Custom {
// chainId = 8453;
// services = [
// {url = "https://base.llamarpc.com"; headers = null},
// {url = "https://base-rpc.publicnode.com"; headers = null}
// ];
// };
// Call `eth_getBlockByNumber` RPC method (unused cycles will be refunded)
Cycles.add<system>(10_000_000_000);
let result = await EvmRpc.eth_getBlockByNumber(services, null, #Number(height));
switch result {
// Consistent, successful results.
case (#Consistent(#Ok block)) {
block;
};
// All RPC providers return the same error.
case (#Consistent(#Err error)) {
Debug.trap("Error: " # debug_show error);
};
// Inconsistent results between RPC providers. Should not happen if a single RPC provider is used.
case (#Inconsistent(results)) {
Debug.trap("Inconsistent results" # debug_show results);
};
};
};
public func get_ecdsa_public_key() : async Text {
let { public_key } = await IC.ecdsa_public_key({
canister_id = null;
derivation_path = [];
key_id = { curve = #secp256k1; name = key_name };
});
Base16.encode(public_key);
};
public func sign_message_with_ecdsa(message : Text) : async Text {
let message_hash : Blob = Sha256.fromBlob(#sha256, Text.encodeUtf8(message));
Cycles.add<system>(25_000_000_000);
let { signature } = await IC.sign_with_ecdsa({
message_hash;
derivation_path = [];
key_id = { curve = #secp256k1; name = key_name };
});
Base16.encode(signature);
};
public func get_schnorr_public_key() : async Text {
let { public_key } = await IC.schnorr_public_key({
canister_id = null;
derivation_path = [];
key_id = { algorithm = #ed25519; name = key_name };
});
Base16.encode(public_key);
};
public func sign_message_with_schnorr(message : Text) : async Text {
Cycles.add<system>(25_000_000_000);
let { signature } = await IC.sign_with_schnorr({
message = Text.encodeUtf8(message);
derivation_path = [];
key_id = { algorithm = #ed25519; name = key_name };
aux = null;
});
Base16.encode(signature);
};
};
What this code does
This backend code has five functions:
get_evm_block: Returns an Ethereum block according to the specified block number. It makes the call through the Llama RPC provider and attaches cycles to the call.get_ecdsa_public_key: Returns the canister's ECDSA public key.sign_message_with_ecdsa: Signs a message using the canister's ECDSA key.get_schnorr_public_key: Returns the canister's Schnorr public key.sign_message_with_schnorr: Signs a message using the canister's Schnorr key.
Deploying the project
To use the dapp, click the "Deploy" button in ICP Ninja, then open the application's URL returned in the output log:
🥷🚀🎉 Your dapp's Internet Computer URL is ready:
https://zihhr-qiaaa-aaaab-qblla-cai.icp1.io
⏰ Your dapp will be available for 20 minutes
Insert a block number, such as 10001 and click on the "Get block" button. If no block number is inserted, the latest block from the Ethereum mainnet is returned.
When this button is clicked, the application executes the following:
The frontend canister triggers the
get_evm_blockmethod of the backend canister.The backend canister uses HTTPS outcalls to send an
eth_getBlockByNumberRPC request to an Ethereum JSON-RPC API using the Llama provider. By default, the EVM RPC canister replicates this call across at least 2 other RPC providers.- This request involves encoding and decoding ABI, which is the Candid equivalent in the Ethereum ecosystem.
The block information is returned to the backend canister. Three responses are returned: one from the specified RPC provider and two from the other RPC providers that the EVM RPC canister queried automatically for decentralization purposes. The backend canister checks to be sure that all three responses contain the same information.
Then, the frontend displays the block information that was returned.
You can also test the buttons for "Get ECDSA public key" or "Get Schnorr public key" buttons to return the canister's public keys, or enter and sign messages with either signature type.