Integrate SubWallet with EVM Dapp

[hieudd]

Overview

SubWallet now support EVM Account (H160) and also can interact with EVM via web3.js but now package extension-dapp and extension-inject need to be improvove for devliver these feature with the way like MetaMask done for browser DApp.

EVM DApp methods

Here is most basic feature we need to provide for EVM DApp.

• EVM (H160) Account list
• Sign EVM transactions/data
• Add (import) EVM chain
• Import ERC20 / ERC721 tokens
• Connect to DApp
• And another feature like MetaMask

How to MetaMask extension interact with DApp?

MetaMask will publish a provider to browser window with name ethereum. DApp interact with MetaMask extension via this object.

• DApp will use this ethereum object by ethereum.request eg:ethereum.request({ method: 'eth_requestAccounts' });
• DApp also listen MetaMask change via ethereum.on('event_name', callback: () => {})).
• Read more

Difference between MetaMask and SubWallet

• Chains and accounts
  • MetaMask will connect to single chain and select only one account at a time.
  • SubWallet with connect to multi chain and can select more than one account at a time.
  • These differences cause some in the way DApp interaction with extensions
• Signatures
  • MetaMask support Ethereum signature.
  • SubWallet support both Substrate signature and Ethereum signature

Solution

We aim to provide an interface similar to MetaMask to reduce integration effort from products that already have supported MetaMask but because some diffrerences they will not be the same.

Concept:

• With concept 2 we with deliver evm methods by deference object with substrate methods.
• This concept require developer to add new wallet interface but allow us to develop most similar interface with MetaMask.
• We will public to window.ethereum if MetaMask to other wallet not exists
• We don't want user need change their habits and DApp developer update their code too much for support SubWallet, so web wil try to make interaction with SubWallet similar to ethereum of MetaMask, SubWallet will interact to account and chains like the way metamask do when interact with DApp via evm provider.

Design Interface

• Substrate interface: keep normal with name subwallet-js like current
• EVM interface:
  • Support single account and single chain mode (Auto select first allowed account and request chain with a confirmation popup)
  • Emit accountChanged and chainChanged events.
  • Support provider.request({method, params})

Todo

Change on SubConnect

• Migrate to mutipackages architech

• Create new @subwallet/wallet-connect in repository SubWallet: A connect lib support both Substrate and EVM interface.

  • Basic connect features replace current wallet packages
  • Allow inject new Wallet not required modify packages
  • Update SubConnect with new interface and features

• Use wallet-connect instead of current lib/wallets

• Examples of MetaMask on SubConnect

• Example of SubWallet - EVM Connect

Change on SubWallet

• Create basic features:
  • Update authorize screeen
    • EVM
    • Substrate
    • Both
  • Connect to wallet
    • eth_requestAccounts
    • eth_accounts
  • Support provider.on(eventName, callback)
    • accountsChanged
    • chainChanged
      • Update current chain management
    • connect
    • disconnect
  • Support provider.request(method, param)
  • Import metadata
    • wallet_addEthereumChain
    • wallet_switchEthereumChain
  • Sign data or send transaction
    • eth_sign
    • eth_sendTransaction
    • eth_personalSign
    • eth_signTypedData
    • popup sign confirmation
  • Get/Subscribe/Send data
    • eth_sendTransaction
    • eth_signTranaction Popup
    • eth_getBalance
  • Permission
    • Get permission
    • Request permission
      Improvement:
• More improvement will be list and and handle in Improve EVM DApp interface #357

[sokol142]

Please check issues:

• Still display Account Substrate on the Request Permission screen: https://prnt.sc/qxRPFUVqMGYA
• Do not Transaction History when Send Transaction from DApp
• Bug happens when switch to All Account/ Forget Account: https://prnt.sc/eQpfE9wRVLl1
• Disconnect Account when click on Cancel button on the Request Permission screen although before, account connected successfully.
  
• Check performance in case Connect/Disconnect Network when user interactive with DApp
• Display Network incorrect when user Switch to account, that have another current network
  
• Do not send transaction
  
• Do not showing Avatar account when add new account: https://prnt.sc/8Vh0fe27AeQX => Improve later
• Support Send Transaction/Sign for Ledger Account/QR Account => Improve later

Some improve:

• Don't allow the user to click the button more than once
• UI: https://prnt.sc/Rx92WdQx7Vye, https://prnt.sc/nyDSP6SBbIXh

[sokol142]

• Bug happens when click on Add Network/Switch Network button in case Current Account allow use any chain or inactivate network
  

[sokol142]

Some bug UI:

• Bug UI on Light theme
  
  
  

• Other UI
  

[sokol142]

• Pls improve experience when switch account.
  Actual: Always require user confirm to switch Network when opening SubConnect (https://connect-beta.subwallet.app) page
  

Expect: Refer experience of MetaMask when connect to https://portal.astar.network