MetaMask with PlatON SDK to build, sign and send WASM transactions

This tutorial will show developers how to interact with PlatON WASM contract using MetaMask plugin wallet, it also applies to EVM contracts.

Prerequisite

  • OS: Windows 10/Ubuntu 18.04
  • node: 12.22.8
  • web browser: firefox/chrome

Install

git clone git@github.com:hthuang996/platon-wasm-metamask-demo.git
cd platon-wasm-metamask-demo
npm install

Usage

  1. start web server
npm run serve

The following information will be printed

> static-server . --port 9011

options.index is now deprecated please use options.templates.index instead.
* Static server successfully started.
* Serving files at: http://localhost:9011
* Press Ctrl+C to shutdown.
  1. install metamask plugin in your browser
    You can find tutorial here.

  2. Add PlatON Dev Network to metamask
    You can find tutorial ch. en

  3. Import private key into your metamask wallet
    Private key used in demo

8d17969fd442d82868f9f256ce12338bc41fca66bebe88b97b15e40c2f99f9fc

1

  1. Open the web page
    Visit http://localhost:9011/index.html

You can replace localhost with public IP if you are not testing on the same server.

2

  1. connect to wallet
    Click ‘CONNECT’ button to connect to metamask wallet.

3

  1. Get current connected wallet account information.
    Click ‘LAT_ACCOUNTS’ button to get your current connected account address, which is in hex style.

The output should be

0x30ad2981e83615001fe698b6fba1bbcb52c19dfa

4

  1. Query the balance of an account
    Input the address from which you want to get the balance, then click ‘QUERY’ button.

Note: Here you must input PlatON style address starting with ‘lat’.

5

  1. Mint token to an account
    Input the address you want to send token to, then click ‘MINT’ button.
    6
    A MetaMask pop-up windows will appear, it asks you to sign the transaction.
    7

  2. Query balance again
    After a while, a message will pop up informing you the transaction is confirmed.
    8
    Now, you can query the balance again, you will see the balance increase.
    9

Appendix

Contract

The deployed contract is PRC20 standard WASM contract, you can deploy any other contract using your private key. Of course, you need to modify the code and parameters.

Web3.js

The library is generated from client-sdk-js, you can find the tutorial here.

Reference

https://docs.metamask.io/guide/create-dapp.html#project-setup

https://devdocs.platon.network/docs/en/JS_SDK/

https://forum.latticex.foundation/t/topic/5862

https://forum.latticex.foundation/t/topic/5803/3

4 Likes

:tada: :tada: :tada: :tada: Thank you for your support