Adding CosmWasm to the Neuma multichain wallet

5 min readFeb 21, 2020

CosmWasm is a framework for building Wasm based smart contracts in Rust or other languages and deploying them to a Cosmos SDK based blockchain. Our goal is to provide the best developer experience and fastest iteration cycle in the industry while still maintaining high levels of safety and security.

In previous tutorials and example videos, we mainly focused on building contracts as well as deployment and interaction using Go command line that is common tooling in the Cosmos ecosystem. However, your powerful contracts deserve a beautiful frontend to show them to your users. Today we demonstrate our progress in building the reusable frontend library CosmWasm JS, which aims to make life easier for all frontend developers in the Cosmos ecosystem.

CosmWasm provides a Turing-complete execution environment capable of many programs, but for demos we will focus on the most well-known token contract: ERC20. We previously ported the ERC20 interface to CosmWasm and today we will show how we use this contract inside a wallet.

Instead of building yet another wallet, we integrated with IOV’s multi-chain wallet Neuma. Neuma is a browser extension and a web wallet with multichain support based on Blockchain Communication Protocol (BCP). One of the packages in CosmWasm JS is @cosmwasm/bcp, an implementation of BCP, which allows us to plug into this applications (and others) easily.

In this article we will show how we integrated CosmWasm JS into Neuma, and then show a fully functioning solution that can show your balance and securely transfer tokens deployed as smart contracts on a CosmWasm based blockchain. This doesn’t just work for our canonical ERC20 token contract, but any other CosmWasm contract that implemements the same interface.

The following instructions aim to be complete and reproducible for developers. If you’re not a dev, skip the code and just enjoy the screenshots. We are working with a local Wasmd blockchain, but this works with any Cosmos SDK blockchain that comes with the CosmWasm module.

Basic setup

We assume you work in a Linux or macOS environment and have git, docker, node.js and yarn installed. We start by cloning the ponferrada repo and creating a local branch.

git clone https://github.com/confio/cosmwasm-js.git
git clone https://github.com/iov-one/ponferrada.git && cd ponferrada
git checkout -b cosmwasm-integration
yarn install

Starting the chains

Both ponferrada and CosmWasm JS come with an extensive set of scripts to start development blockchains and faucets in docker containers, that are used for reliable testing locally and in the CI. To start the local blockchains for IOV Name Service, Lisk, Ethereum and Wasmd run

./scripts/test_start.sh
../cosmwasm-js/scripts/wasmd/start.sh
../cosmwasm-js/scripts/wasmd/init.sh

Part 1: The browser extension

Now we will patch the official Neuma extension to add CosmWasm support and compile a custom browser extension to manage our tokens. The BCP makes that an easy thing.

Adding chain config

First we install our BCP implementation package to the browser extension:

cd packages/sanes-browser-extension
yarn add @cosmwasm/bcp
cd ../..

We now add a little bit of configuration to connect to Wasmd:

Add the chain config to packages/sanes-browser-extension/config/development.json;
add codec to packages/sanes-browser-extension/src/extension/background/model/persona/config/configurationfile.ts;
and adapt the functions in packages/sanes-browser-extension/src/extension/background/model/persona/config/codec.ts.

The full patch is available here: https://github.com/webmaster128/ponferrada/commit/37071ddf42b60cdd5284b25a5030cdf6fbfe2209

Build the extension

We create a first full build of the repo. Get some ☕️ after hitting enter.

yarn build

Installing the extension

Open a Chromium-based browser like Brave or Chrome, navigate to chrome://extensions/ and enable developer mode in the top right. Now click “Load unpacked” and select the folder ponferrada/packages/sanes-browser-extension/build.

An open Neuma extension from our local build

We now open Neuma via the icon in the top right, “Import Wallet” and use the mnemonic degree tackle suggest window test behind mesh extra cover prepare oak script. This gives you access to a preconfigured account with tokens!

The tokens you see here are

CASH: a local Weave token
COSM/STAKE: bank tokens from Wasmd
HASH/JADE: smart contract tokens in Wasmd

You can click the hamburger menu → “Settings” → “Networks” to confirm Neuma is connected to Wasmd.

Part 2: The wallet

The purpose of the browser extension is to provide signing functionality to dApps without revealing the private keys to those apps. The main portion of the UI runs as a web app, which can quickly be iterated on and re-deployed just as with any other website. Here we add CosmWasm support to the Neuma wallet but the flow would be the same for any other dApp.

Adding CosmWasm support

We install the BCP implementation again, since (in contrast to the MetaMask model) the wallet establishes its own connection to the blockchain:

cd packages/bierzo-wallet
yarn add @cosmwasm/bcp
cd ../..

Now

add config section to packages/bierzo-wallet/src/config/development.json;
adapt CodecType in packages/bierzo-wallet/src/config/index.ts;
add codec in packages/bierzo-wallet/src/logic/codec.ts;
and add connection in packages/bierzo-wallet/src/logic/connection.ts.

The full patch is available here: https://github.com/webmaster128/ponferrada/commit/a5d48eb8a3fb6dd1760e364c2561a9d75946626c

Starting the wallet

cd packages/bierzo-wallet
yarn start

and open http://localhost:3000 in your browser. When logging in with Neuma, we provide our identity on Wasmd to the wallet:

Wallet requesting available identities from browser extension

Once logged in, we see additional LSK and ETH tokens that we received from a development faucet.

8 tokens on 4 chains, including Cosmod SDK bank tokens and CosmWasm smart contract tokens

Sending Cosmos SDK bank tokens

COSM is the native fee token on Wasmd, implemented as a token in the bank module. We can send it by clicking “Transactions” → “Send tokens” and following the instructions.

We can do the same for ERC20 smart contract tokens, like HASH. As you can see in the “Fee” section, the fee is paid in COSM — the fee token in Wasmd.

This succeeds and we see our balances updated 🎉.

While CosmWasm development is still young, this show we already have a full-stack solution to code, deploy, and interact with contracts in a frontend app that can be used in a demo network. Future posts will demonstrate writing custom dApps for non-token contracts.

The careful reader might notice that the HASH send transaction will not be listed in the transctions list. This is due to a missing log feature in CosmWasm. You’re invited to help us adding this and other amazing features to push the boundaries of CosmWasm and make it work for you.