DApp: Use Wallet to perform the transaction

When writing DApp, we often need Wallet like Metamask to interact with the user to perform any Transactions(Like send Eth to an address)

The following diagram explains the whole process of how the User use DApp to connect to the Wallet and perform the Transactions

Sequence Diagram
Sequence Diagram

Process Explain

  1. Connected to the Wallet

    Before performing the transaction, the user has to connect to the wallet to ensure that he/she has the ability to execute any transaction

    1. When User use App to connect to the wallet, the App will ask WalletProvider to call the wallet(Metamask) plugin to open a Page to ask the User to connect**(*1)**

    2. Once the user is connected, a Wallet like Metamask will show the connected status**(*2)**, meanwhile, it will return the signer for Wallet provider.

\*1 Connecting to the wallet
\*1 Connecting to the wallet
\*2: Wallet is Connected
\*2: Wallet is Connected

  1. Perform the transaction

    1. When the user performs any transaction(ex: send Eth to an account), the DApp will find the signer that the Wallet returns

    2. When Signer sign the transaction, the Wallet(Metamask) will open a transaction page for the user to confirm the transaction(*3)

    3. The transaction will be sent to the blockchain and it will be executed and broadcast and then recorded to the blockchain(*4)

\*3: Send Transaction
\*3: Send Transaction
\*4: Transaction Record
\*4: Transaction Record

Terminology

Ethereum account

An Ethereum account is an entity with an ether (ETH) balance that can send transactions on Ethereum

  • An account is made up of a cryptographic pair of keys: (public and private)

    • The Private key is used to sign transactions, so it grants you custody over the funds associated with your account.

    • The Public Key is used to:

    • Validate and prove that the transaction request is initiated by this account owner

Wallet

  • A wallet like (Metamask) allows users to manage accounts and their keys and perform any transaction on the user’s behalf.