demo.md

Demo 🧐

Our little demo consists of the three basic actions we complete on our Substrate-based 🦆-network using MetaMask:

1. 👛 Transfer Tokens.

   With the MetaMask UI controls solely.

   This is the simplest action as we already have everything set up to do this. Once launched the ethink! node with cargo run -- --dev, just open your MetaMask and make sure it is connected to our 🦆 network. You should see Alith account holding 10000000 🥚. Go ahead and send some amount of eggs to Goliath or any other account you'd like to (set gas limit to 21000 as requested by MetaMask).

2. ⚡ dApp (simple): Tokens Transfer.

   Via web3js-based dApp used with MetaMask for signing transactions.

3. 🚀 dApp (advanced): ink! + MetaMask.

   Call ink! smart contract via web3js-based dApp using MetaMask for signing transactions.

For the actions 2,3 we have a simple dApp which consists of a static web page and of course our ink! contract. This needs a bit of preparatory job to be done to set things up first.

Prepare

Our 🦆-chain has pallet-contracts on board and at the same time works with Ethereum 20-bytes Account format. The latter fact is required so that our node can understand MetaMask-signed transactions. But for the existing ink! contracts tooling this is an unusual setting, as they're expected to work with 32-bytes long Accounts.

For this reason, to work with our ink! contracts on this chain, we use a fork of cargo-contract tool which speaks with our node the same language! Run this command to install it:

cargo install --git https://github.com/agryaznov/cargo-contract --branch ethink --force

Set Up

Build contract(s)

ink! contract

cd dapp/contracts/flipper.ink
cargo contract build 

Solidity contract (optional)

Note

In order to get Ethereum web3js library work with our ink! contract, we gotta make it believe it deals with an Ethereum contract. For that, we need to generate a metadata for our contract in the proper format. For the purposes of our PoC demo, we uploaded a ready-to use JSON file with that metadata. Though if you'd like you can install truffle tool and build it yourself as described below.

❗Keep in mind that in the future this step is intended to be done by existing ink! tooling (e.g. cargo-contract).

cd dapp/contracts/flipper.ink
truffle build

Deploy contract

Make sure you've started our template node:

cargo run -- --dev

Then deploy the contract:

cd dapp/contracts/flipper.ink
cargo contract instantiate -s 0x5fb92d6e98884f76de468fa3f6278f8807c48bebc13595d45af5bdc4da702133 --args=false -x

(Notice we use Alith's private key here for transaction signing).

You should get the contract's code hash and address on the successful completion of the transaction:

 Code hash 0x417370a73c71e0787a6da2c8b34ee035517175ed28beb1328461b642670975b7
 Contract 0xAc7dA28B0A6e94dEc4c9D2bFA6917Ff476e6a944

Prepare dApp

cd dapp/client
npm i
npm start

For the demo purposes we made our dApp dead simple. You might need to put actual deployed contract address here to its source code (needed only of you changed the contract source):

ethink/dapp/client/src/index.js

Lines 20 to 24 in f4e2624

	const getContract = async (web3) => {
	const data = await $.getJSON('/contracts/flipper.sol/build/contracts/Flipper.json');
	const contract = new web3.eth.Contract(data.abi, "0xcCF89DAfeF6634fd058F356F8f2650eae2c93Bef");
	return contract;
	};

🚀 Run It!

Once you have your chain node and dApp started, open your browser at http://localhost:8080/client/ to load our dApp:

You should see the MetaMask pop-up asking for permissions. Allow it to use Alith account on this site:

Click on MetaMask icon and make sure it's connected to our Duck chain. You should see Alith's balance in eggs:

Making 2. ⚡ dApp (simple): tokens transfer:

Now go ahead and click on Send Tokens button!

Confirm the transaction... and, in a moment later you should see one egg has been sent to Goliath!

Cool, we have just used an web3js dApp to send some eggs between accounts on our Duck network!
Keep going, in a few moments we'll call our ink! contract with it!

Making 3. 🚀 dApp (advanced): ink! + MetaMask.

First, check the current state of our contract with this command:

cargo contract call -s 0x5fb92d6e98884f76de468fa3f6278f8807c48bebc13595d45af5bdc4da702133 --contract 0xAc7dA28B0A6e94dEc4c9D2bFA6917Ff476e6a944 --message get

We see that current Flipper's state is false:

 Result Success!
 Reverted false
 Data Ok(false)

We can also do the same check via PolkadotJS Apps as usual:

TBD: add screenshots

And finally, the moment of truth has come. 🥁 Can we really call our ink! contract from MetaMask? Well, let's see.

Open our dApp page again. Click on the Call Contract button.

Click on Confirm and wait until your transaction made it to the block:

Now check the state again with cargo-contract, and...

 Result Success!
 Reverted false
 Data Ok(true)

🎉 Congratulations, you have just called your ink! contract via MetaMask, and it just worked!

Tip

💡 Looks simple, right?

🧠 Under the hood though, that was an amusing journey your transaction had made through your node's exposed custom Ethereum RPC, then it got transformed through your network's Runtime RPC, got into the transaction pool as a pallet-ethink extrinsic, then got into the block and processes by that pallet which understood it's a transaction for pallet-contracts, transformed it again to the corresponding dispatchable which finally made it to your contract!

Whoa, what a long way isn't it? But let's put the details off for now and just enjoy the moment!
The design technicalities are to be explained in the ethink! docs, stay tuned!