This deck shows how to access a simple Dapp with metamask. A screen capture is available at the end of the deck.

1. 2. Access a Simple DApp
KC Tam
Reach KC on LinkedIn: https://www.linkedin.com/in/ktam1/

2. Objective
We will walk through a very simple DApp and see how a user
accesses this DApp with Metamask (a browser plugin).

3. Note
For simplicity we skip
● contract deployment process
● how to develop and deploy the DApp
● how to install Metamask
(For information, this DApp is deployed on ganache-cli Ethereum network, f.k.a.
testerpc, using Truffle development framework for contract deployment with
webpack integration)

4. A Simple DApp: Simple Storage
A value is stored in the Ethereum Network (gigantic computer).
User can interact with this value through two actions
● Get the value from the store
● Set a new value and keep it in the store
Frontend is built to perform these two actions, and proper integration is done.

5. Simple Storage
(DApp)
Application (Contract)
Code
Data
Web / Mobile Frontend

6. Metamask Plug-in
Metamask plug-in
Interacting DApp with Ethereum
Accounts

7. Access the Frontend
End user accesses this application
just as a normal web application.

8. Refresh
Application (Contract)
Code
value
Web / Mobile Frontend
Refresh
get()
Note: no Ethers required for this task.

9. Update a Number
Value update requires Ethers.
Metamask pops up and asks user
to authorize and to confirm this
task.

10. Metamask Requesting Confirmation

11. Metamask
Metamask allows you to select a User Account.
Here 0x0B2FD6…254B is selected to initiate this task
(transaction).
Contract Address is 0xdE4b39…150B
User specifies maximum transaction fee (in terms of
gas limit and gas price) for this transaction
Submit when everything is correct

12. Update Transaction Complete
Application (Contract)
Code
value
Web / Mobile Frontend
Update
set(100)

13. Summary
User can access DApp as common web application. When
needed, user is asked to authorize (confirm) the transaction
using Metamask browser plugin.