Frontend PAPI Interaction with Solidity and EVM Chains | Bolaji Ahmad

Back to writing

Frontend PAPI Interaction with Solidity and EVM Chains

A field guide to calling Solidity contracts on Polkadot smart contract environments from a frontend using PAPI, wallet integrations, and ABI encoding.

Local draftPAPISolidityPolkadotFrontend

Introduction

Prerequisites

To follow along with this demo, a compiled solidity contract is required. A basic setup of the following is required.

A solidity contract set up using hardhat-polkadot, guide is available here.

You can also set up a hardhat-polkadot using the commands
1. npm install --save-dev @parity/hardhat-polkadot@0.1.9
2. npx hardhat-polkadot init
The revive solidity compiler, resolc
Node ≥ V22
NextJS / React

If you don’t have a Solidity contract, you can compile the one in this demo repository here.

Deploying the Solidity Contract

To deploy the solidity contract, we can use hardhat’s ignition deployment. For a contract that is deployed using the following constructor:

constructor(address _token, address: _admin) {
	_grantRole(DEFAULT_ADMIN_ROLE, _admin);
	tokenAddress = IERC20(_token);
}

the ignition script will look like the following:

const { buildModule } = require("@nomicfoundation/hardhat-ignition/modules");

const Vesting = buildModule("VestingModule", m => {
	console.log("Deploying VestingModule contract");
	
	const deployer = m.getAccount(); // Get the deployer of the contract, is defined in ENV
	const token = "0x9ab28d7fc04a1af08b18ec08f51fac37a313cf19";
	const vesting = m.contract("Vesting", [deployer, token]);
	
	return { vesting };
});

module.exports = Vesting;

The ignition uses your private key (defined in your ENV) to know the deployer. To register your private key with hardhat, the CLI command works.

// hardhat.config.js
require("@nomicfoundation/hardhat-toolbox");
require("@parity/hardhat-polkadot");

const { vars } = require("hardhat/config");

module.exports = {
	...,
	networks: {
	hardhat: { ... },
		...,
		passetHub: {
			polkavm: true,
			url: "https://testnet-passet-hub-eth-rpc.polkadot.io",
			accounts: [vars.get("PRIVATE_KEY")],
			chainId: 420420422
		}
	}
};

npx hardhat ignition deploy ./ignition/modules/MyToken.js --network polkadotHubTestnet

Polkadot API - Typescript API to interact with Substrate-chains.
Viem - A Typescript interface for EVM-chains
talismn/connect-wallets - for accessing device-available list of (Substrate-compatible) wallets
Create-dot-app - a NextJS template for building frontend dapps. This comes installed with some of the packages we need, so we only need to install the missing ones. Run the command below in your terminal and follow the prompts.
```
npx create-dot-app@latest

&&
# install after setting up the template
# cd <dot-app-template> to install
npm install viem
```

import { getWallets } from "@talismn/connect-wallets";   // returns a list of all Substrate wallets

// we can define a function to return the wallets we need
// each wallet is of type Wallet
const getWallets = () => {
	const wallets = getWallets();
	const installedWallets = wallets.filter((wallet) => wallet.installed);
}

// Connect to any selected wallet
async function connect(wallet: Wallet) {
	try {
		setIsConnecting(wallet.extensionName);
		await wallet.enable("DAPP_NAME"); // DAP_NAME should be unique per dapp
		
		// get all acounts on the enabled wallet	
		const accounts = await wallet.getAccounts();
		
		// store the accounts to state
		setAccountsList(accounts);
		// connect the first wallet by default
		setSelectedAccount(accounts[0]);
	} catch (err) {
		setSelectedAccount(undefined);
		setAccountsList([])
	} finally {
		setIsConnecting(false);
	}
}

function selectAccount(account: WalletAccount) {
	setSelectedAccount(account);
}

function addBeneficiary(
	address _beneficiary, 
	uint64 end, 
	uint256 amount
) external payable nonRentrant { .. }

Ensure the API for passetHub (or the chain you’ve deployed on) is registered on the D’app. This can be confirmed by checking the PAPI config located inside the /.papi/polkadot-api.json if you can see your chain there, then this step is covered. You should see a config like below inside the “entries”.

If you don’t have the chain configured already, you can run the command below to set it up
```
pnpm papi add -w <WEBSOCKET_URL> <CHAIN_NAME>

## For passet - pnpm papi add -w wss://testnet-passet-hub.polkadot.io passet
```
Register the smart contract with Polkadot API. This is done to allow typed interactions (this is an optional step). To do that, we use the command below
```
pnpm papi sol add ./deployments/Vesting.json vesting
```

import { createClient } from "polkadot-api";
import { passet } from "./descriptors/dist";
import { encodeFunctionData } from "viem";

const addVestingBeneficiary = async () => {
	const client = createClient(getWsProvider("wss://socket-url"));
	const typedApi = client.getTypedApi(passet); // reference to our added chain
	
	// We need to encode our function data and args for revive-compatibility
	const data = encodeFunctionData({
		abi: VestingContractABI,
		functionName: "addBeneficiary",
		args: [
			SS58toH160(selectedAccount.address), // parse connected SS58 account to H160
			10000n,  // timestamp in BigInt
			10n, // amount in BigInt
		]
	});
	
	// perform a dryRun to get the gas requirements
	// Also happens much faster so a good way to know if a call succeeds
	const dryResult = await typedApi.apis.ReviveApi.call(
		selectedAccount?.address || '',      
		Binary.fromHex("0xD42492524cA1d5C6D5a9ef6b93BB806105B8e86c"),      
		BigInt(0),      
		undefined,      
		undefined,      
		Binary.fromHex(data),
	);
	
	if (dryResult.result.success) {
		const signer = await polkadotSigner(); // gets signer for the connected wallet account
		
		if (signer) {
			// perform the actual call
			const response = await typedApi.tx.Revive.call({
				dest: Binary.fromHex("0xD42492524cA1d5C6D5a9ef6b93BB806105B8e86c"),          
				data: Binary.fromHex(data),          
				gas_limit: dryResult.gas_required,          
				storage_deposit_limit: dryResult.storage_deposit.value,          
				value: BigInt(0),
			}).signAndSubmit(signer);  // sign and submit submits the transaction using the signer
			
			if (response.ok) {          
				console.log('Transaction included in block', response.txHash)        
			} else {          
				console.log('Transaction failed', response)        
			}
		}
	}
 }

const decoded = decodeFunctionResult({
	abi: VestingContractABI,
	functionName: "beneficiaries",
	data: callResult.result.value.data.asHex(),
});

npx @parity/resolc --bin <path_to_abi.json>

const deployeVestingContract = async () => {
	// encode the constructor arguments
	const deployData = encodeDeployData({
		abi: VestingContractABI, // Our original generated ABI
		args: [SS58toH160(selectedAccount.address)],
		bytecode: "0x", // we don't have to pass this as it will be uploaded during instantiate
	});
	
	// fetch the copied codeblob, a simple fetch request will work
	const pvmBytes = Binary.fromBytes(generatedPVMBuffer);
	
	// Instantiate with code, does the actual deployment
	const signer = await polkadotSigner();
	if (signer) {
		const result = await typedApi.tx.Revive.instantiate_with_code({
			value: BigInt(0), // no transferred value on deployment (pass if constructor is payable)
			code: pvmBytes, // this is where we pass the polkavm bytes
			data: Binary.fromHex(deployData),
			gas_limit: BigInt(100000000), // pass a very large value (if you're rich)
			storage_deposit_limit: BigInt(10000000), // also pass a large value if rich
			salt: undefined
		}).signAndSubmit(signer);
		
		if (result.ok) {
			decodeDeployData({
				abi: VestingContractABI,
				data: deployData,
				bytes: "0x"
			})
		}
	}
}

Compile your code and generate the ABI,
Generate the polkaVM blob (used in the revive.call). This can be done using the command below
```
npx @parity/resolc --bin <path_to_abi.json>
```
The output is the .polkavm code blob
Import ABI and polkavm blob into Frontend codebase
Generate necessary types (for the chain and the contract(s))
Interact with contracts as desired