Keplr integration with arch3.js

In this tutorial, you will learn how to sign a transaction using Keplr and execute the transaction on-chain via arch3.js. The transaction will transfer tokens from your Keplr account to a destination address.

Info

This tutorial needs to be embedded in a web page for it to function. For a full working example, see dapp examples.

Prerequisites

Before moving forward, ensure that you have completed the following prerequisites:

Install the Keplr extension on your browser
Install the arch3.js library
Install the bignumber.js library

Create config

Create a new config file in your project. Name it "archway.config.js" if you are on mainnet, or "constantine.config.js" if on testnet. The file should contain the following content:

mainnet

testnet

const currency = {  coinDenom: 'ARCH',  coinMinimalDenom: 'aarch',  coinDecimals: 18,  coinGeckoId: 'archway-network',};const ChainInfo = {  chainId: 'archway-1',  chainName: 'Archway',  rpc: 'https://rpc.mainnet.archway.io',  rest: 'https://api.mainnet.archway.io',  stakeCurrency: currency,  bip44: {    coinType: 118,  },  bech32Config: {    bech32PrefixAccAddr: 'archway',    bech32PrefixAccPub: 'archwaypub',    bech32PrefixValAddr: 'archwayvaloper',    bech32PrefixValPub: 'archwayvaloperpub',    bech32PrefixConsAddr: 'archwayvalcons',    bech32PrefixConsPub: 'archwayvalconspub',  },  currencies: [currency],  feeCurrencies: [currency],  coinType: 118,  features: ['cosmwasm', 'ibc-transfer', 'ibc-go'],  // walletUrlForStaking: '',};export default chainInfo;

Connecting to keplr

First, import the SigningArchwayClient from the @archwayhq/arch3.js library, the ChainInfo object from the Constantine network configuration file and the BigNumber library to handle large numbers.

mainnet

testnet

import { SigningArchwayClient } from '@archwayhq/arch3.js';import BigNumber from 'bignumber.js';import ChainInfo from './archway.config.js';

Next, verify that Keplr is installed on the browser and has at least one account set up. If Keplr is installed, use the suggestChain method to add to Keplr the Archway network for mainnet or the Constantine network for testnet. Also, to prevent Keplr from overriding fees set by arch3.js, set the Interactive Option value of preferNoSetFee to true.

if (!window.getOfflineSignerAuto || !window.keplr) {  alert("Please install keplr extension");} else {  if (window.keplr.experimentalSuggestChain) {    try {      await window.keplr.experimentalSuggestChain(ChainInfo);      window.keplr.defaultOptions = {        sign: {          preferNoSetFee: true,        }      }    } catch {      alert("Failed to suggest the chain");    }  } else {    alert("Please use the recent version of keplr extension");  }}

Next, enable the chain to connect to it.

const chainId = ChainInfo.chainId;await window.keplr.enable(chainId);

Create an offline signer using the getOfflineSignerAuto method and also a signing client using SigningArchwayClient.

const offlineSigner = window.getOfflineSigner(chainId);const signingClient = await SigningArchwayClient.connectWithSigner(ChainInfo.rpc, offlineSigner);

Get the account and destination addresses.

const accounts = await offlineSigner.getAccounts();const destinationAddress = document.sendForm.recipient.value;

Execute transaction

Define the transaction details.

mainnet

testnet

let amount = new BigNumber(document.sendForm.amount.value);amount = amount.multipliedBy(new BigNumber('1e18'));const amountFinal = {  denom: 'aarch',  amount: amount.toString(),}const memo = "Transfer token to another account";

Sign and broadcast the transaction using the sendTokens method.

const broadcastResult = await signingClient.sendTokens(  accounts[0].address,  destinationAddress,  [amountFinal],  "auto",  memo,);if (broadcastResult.code !== undefined && broadcastResult.code !== 0) {  alert("Failed to send tx: " + broadcastResult.log || broadcastResult.rawLog);} else {  alert("Succeed to send tx:" + broadcastResult.transactionHash);}

Clone and try it yourself

You can find a working example of this frontend dapp in the dapp examples repository.