How to integrate SubWallet to Substrate DApp

Overview

SubWallet, Polkadot{.js} and Talisman extension allow DApp connect with them by public their interaction in object injectedWeb3 of window browser.

• SubWallet (public with properties subwallet-js)
• Polkadot{.js} (public with properties polkadot-js)
• Talisman (public with properties talisman)

For example an DApp like SubConector can connect to these wallets with this concept

You can log injectedWeb3 object in chrome devtools

Integrate from scratch

• Check the activation of extension:
  • When a wallet extension is active in browser it will modify window.injectedWeb3 by add its interaction with specify name.
  • Example check SubWallet extension by these code: window.injectedWeb3 && window.injectedWeb3['subwallet-js']
• Enable integrate with DApp by method enable() of extension interaction object

  const SubWalletExtension = window.injectedWeb3['subwallet-js']
  const extension = await SubWalletExtension.enable()

  After running these code, the extension will show popup confirmation popup to confirm integrate with DApp
• After enabling, the extension variable can contain these object

  • accounts: Allow get accounts data with 2 methods get subscribe.

  • signer: Allow to sign data with 2 methods: signPayload, signRaw.

    signer also can be used as a replacement of keyringPair to sign transaction or contract eg:

    transaction.signAndSend(address, {signer}) // Can replace to transaction.signAndSend(keyringPair)

  • metadata: Allow to get additional metadata list with method get and add/update with method provide.

  • If your DApp is written by typescript you can get above interface from @polkadot/extension-inject