OneConnect - Connect CKB dapp with any wallet

Team and Background

My name is Harry Liu, as a full stack developer, I have been developing 2 dapps on Ethereum for the past 2 years.

And as the lead developer of ETH Task Force team, I am helping Elastos to build the Ethereum ecosystem, we did a lot of work to facilitate developers to develop on Ethereum sidechain, including setup RPC node, ported wallet, faucet, and block explorer, published docs and tutorials, maintained dev groups, etc.

As the very early participant of Nervos, we(Rebase) organized online/offline meetups and workshops from 2018. I also developed a simple tool (https://tools.rebase.network/ckb ) to generate CKB key pair for testnet and mainnet when CKB testnet launched in May 2019.

Project and Justification

Problem

Currently, if users intend to use any web dapp in mobile wallet, user needs to wait for the wallet team to integrate the dapp. The normal way is, wallet team develop a dapp store in wallet which actually provide a browser environment that inject js sdk such as web3.js for dapp usage, then dapp team needs to do responsive integration for the wallet dapp store, and submit introduction materials accordingly. If wallet dapp store wants to support more blockchains, they need do similar work again and again.

For wallet team, they would have repetitive work for different chains and dapps.

For dapp team, they may have repetitive work to support running their own dapp in different dapp stores.

For users, it’s so unfriendly. They installed one wallet that have dozens of digital assets for different blockchains which 90% of them can not be interacted with dapp directly. The consequence could be, if a user wants to use CKB dapp, they can not user his current wallet although he has CKB token in his wallet, the only way to use that dapp is to download a new CKB mobile wallet, then go through the painful key pair generate/backup process. “Luckily”, users would not do that, because they will give up and will not use that dapp forever.

Metamask wallet is good, but the problem of Metamask is, it is a wallet, users may ask, I already have a wallet installed on my mobile phone, could I just use it? The answer is NO from Metamask. Users still need to go through the key pair generate/backup process.

WalletConnect try to solve this problem, it’s good but it’s not good enough because:

  • It only support Ethereum
  • It asks both dapp developers and wallet developers to install their libraries. It’s fine for wallet, but for dapp, should try not to install additional libraries.
  • It does not use browser extension. Actually browser extension is a good way to decouple the architecture.

Solution

OneConnect is trying to solve the disconnected issue that existed between dapps and wallets. Dapps want to be used by more users from wallet, and wallets want to provide more use cases for users securely and conveniently.

OneConnect is a bridge has several components that can connect CKB dapp with any mobile wallet. There are several components in OneConnect:

  • Browser extension. Installed in user’s browser and act as a proxy listening for request from dapp
  • Bridge/Relay server. Forward requests(read, signature, etc) and reponses between browser extension and wallet
  • Wallet libraries. Integrated by wallet developer, with it wallet developer will know how to response the requests from browser extension.

A typical workflow is as follow, detailed flowchart please refer to next section:

  1. User goes to a CKB dapp website
  2. Dapp finds that there is no account info in OneConnect browser extension
  3. OneConnect browser extension prompts QR code to ask user to use mobile wallet to scan
  4. User scan with mobile wallet(integrated OneConnect library) then send back account info to OneConnect browser extension
  5. User is able to continue use the dapp with the responsed account info
  6. User wants to spend CKB and buy something in the dapp by clicking “Buy” button
  7. OneConnect browser extension wraps the “Buy” action as a transaction signing request to mobile wallet, user check the detailed info of the request, then confirm with “OK”
  8. Wallet sends back the signed message to bridge server then to browser extension
  9. Browser extension sends the signed message to CKB blockchain and send back result to dapp
  10. Dapp update UI accordingly
  11. Done

Summary

The process is more like the payment with WeChat, scan QR code then confirm the payment and done.

Having all the convenience without need to compromise the security, will illustrate in “Bridge Server” section.

The most important thing is, CKB dapps will immediately have the potential users from wallets, which wallet teams have been operated for years. Plus this is a win-win strategy.

Technical Specification and Implementation

Flowchart

Connection Request

Signing Request

Components

There will be 3 main components need to be implemented: browser extension, bridge server and wallet libraries.

Browser extension

The extension will support 3 platforms: Chrome, Firefox and Opera.

Web DAPP: Is developed by any developer that running on browser.

JS SDK: Will use existing npm library such as @nervosnetwork/ckb-sdk-core or any other library that is able to interact with CKB blockchain.

OneConnect Inpage Script: In order act as a proxy to listen for any request from dapp, need to inject a inpage script to web dapp dom.

OneConnect ContentScript: Is the js script that used by extension to manipulate the dom sandbox(different from web dapp dom) owned by extension.

OneConnect Background Script: Is written with nodejs, where requests(RPC, Websocket) will happen.

OneConnect UI: Will be implemented with react and redux.

Bridge server

Bridge is a node server with websocket support, it’s used to forward the message between extension and wallet.

The security will not be compromised although it’s a kind of centralized server, each session message between extension and wallet will be encrypted with a symmetric key. Bridge server will not know the key because the key can only be acquired by scanning QR code with wallet.

Wallet libraries

Wallet libraries will be used to handle the requests from dapp, including:

  • Handle connection with extension(approve/reject)

  • Handle read request for account related information

  • Handle write request to sign message and send transaction

Since there are 3 kind of platforms to implement wallet app which are React Native, Android and IOS. So we will implement libraries for these 3 platforms.

Timeline / Roadmap

5 months will be needed in total, and 4 milestones includes:

  • Milestone 1: 2 months: Browser extension
  • Milestone 2: 1 month: Bridge server
  • Milestone 3: 1 month: Wallet libraries
  • Milestone 4: 1 month: Integration test, publishing and deployment
5 Likes

How does the dapp be aware of the browser extension and know how to send “connection request” to it? Does dapp developer need to do anything to support OneConnect?

Similar to Ethereum dapp, Metamask will inject a window.ethereum for dapp to use. We need to do the same thing which is done by Inpage script, probably window.ckb. Dapp developer needs to check if window.ckb exists, if exists, developer should use it, otherwise other provider should be specified.

window.ckb will be the proxy, and will know everything.