The following article aims to be a guide through integration of a key management strategy on client side of your Decentralised Application on Matic Network.
The following strategies will be discussed:
Wallets: Metamask, WalletConnect, Portis
Metamask: Metamask is a browser add-on that manages a user’s Ethereum wallet by storing their private key on their browser’s data store and the seed phrase encrypted with their password. It is a non-custodial wallet, meaning, the user has full access and responsibility their private key. Once lost, the user can no longer control the savings or restore access to the wallet.
Wallet Connect: Wallet Connect is an open protocol - not a wallet - built to create a communication link between DApps and Wallets. A wallet and an application supporting this protocol will enable a secure link through a shared key between the two peers. A connection is initiated by the DApp displaying a QR code with a standard WalletConnect URI and the connection is established when the wallet application approves the connection request. Further requests regarding funds transfer are confirmed on the wallet application itself.
The overall steps would essentially remain the same for any client side application to talk to the blockchain:
Note: Refer Web3.js docs to add web3 to your project
- Set up Account: To send transactions from (specifically for transactions that alter the state of the blockchain)
- Instantiate contracts: Once we have our web3 object in place, we next instantiate our deployed contract, with which we interact.
- Call functions: we fetch data via functions in the contract - through our contract object.
For demonstration purposes the following example DApp was created to give a better understanding of the user’s perspective for the three approaches. Please refer this repository.
An example ERC20 and ERC721 tokens were deployed on Matic chain, the DApp supports minting, transfer and checking balance/owner of tokens.
- Clone the repository
- Install dependencies
bash npm install
- Checkout on respective branches for the separate approaches:
bash git checkout master
- Wallet Connect
bash git checkout walletconnect
bash git checkout portis
cd client && npm run serve