[Discussion] Integrating Beacon into Polkadot JS extension

[AndreasGassmann]

As part of a Kusama bounty, we are working on adding support for Kusama to Beacon.

The idea of Beacon is similar to WalletConnect, allowing wallets to connect to dApps over a peer-to-peer system.

During one of our meetings, we discussed that it would be great if users did not always have to scan a QR code when connecting their wallet to a new dApp. This would be possible by using the Polkadot JS extension a relay. The flow would be the following:

1. The user opens Polkadot JS extension and selects to pair his wallet via Beacon.
2. The user scans the QR code that is displayed inside the Polkadot JS extension with his mobile wallet, establishing a persistent connection.
3. If the user visits a dApp that is compatible with the Polkadot JS extension, the request would automatically (and without having the Polkadot JS extension popping up) be relayed to the mobile wallet.

The advantages of this flow vs. scanning the QR code on the page directly are the following:

• It saves the user an extra step
• The extension can be used to manage accounts and connections to different mobile wallets
• DApps do not have to implement any special logic to support beacon-enabled wallets
• DApps do not have to include additional dependencies and potentially slow down their sites

I am creating this issue to discuss if that's something that the Polkadot JS Extension team would be willing to merge, or if that is considered outside the scope of the project.

[jacogr]

So I'm not a Beacon expert... with that in mind - if it grows the ecosystem and provides value to users, especially since (at a glance) it is decentralized, I believe it would be a good opt-in account-type addition.

[AndreasGassmann]

Thanks for the response. If you don't mind I would keep this ticket open so we can have more detailed discussions once everything else is ready. But if you prefer you can close it and I'll create another one later for more detailed discussions.

[jacogr]

Let‘s keep it open, can link to it via PRs

[AndreasGassmann]

Hi Jaco.

We made some progress in the last few months. We finalised the message format that is used to communicate between dApps and wallets.

I forked the polkadot.js.org dApp and added a proof of concept to it. Because it's a proof of concept I didn't nicely integrate it, I just hacked it together to have something that the wallet teams can test. The code is available here: https://github.com/AndreasGassmann/apps and it's deployed here: https://andreasgassmann.github.io/apps/#/explorer

In a nutshell, the protocol works as follows:

1. The dApp creates an instance of the DAppClient class. The dApp can now check if any accounts have previously been connected. If not, the developer can start a permission request.
2. The permission request will show a pairing dialog where the user can select a wallet. Then a QR code is shown, which can be scanned in a compatible wallet to establish the connection.
3. A permission request screen is shown in the wallet where the user can select the account (address) he wants to share, as well as the permissions he wants to give.
4. Once the dApp receives the response, it's ready to send requests to the wallet.

I created a BeaconSigner that extends the Polkadotjs Signer (not completed yet, the signPayload method is not implemented yet). https://github.com/AndreasGassmann/apps/blob/6e0e942513096def2389a323cd8dda9ec3896153/packages/react-api/src/util/BeaconSigner.ts

The permissions are requested here: https://github.com/AndreasGassmann/apps/blob/6e0e942513096def2389a323cd8dda9ec3896153/packages/react-api/src/Api.tsx#L95

And the signer is set here: https://github.com/AndreasGassmann/apps/blob/6e0e942513096def2389a323cd8dda9ec3896153/packages/page-signing/src/Sign.tsx#L72

---

I'm currently working on the documentation to document the blockchain agnostic APIs of the new version of the beacon-sdk, those should be ready soon.

Currently, Nova Wallet and Fearless Wallet are working on an integration of the standard. The iOS version is ready, an Android version should be available soon.

During our bi-weekly meetings, we discussed that the preferable approach would be to add the beacon-sdk and the pairing functionality to the polkadotjs extension, instead of every single dApp. (Although that would still be possible if a dApp chooses to do so).

Ideally, in the extension, the user would have the option to pair a beacon account, which will then display the QR code. Once scanned, accounts can be requested/shared using the normal beacon flow, with the difference that the accounts would be stored in the extension instead of the dApp itself.

DApps would then only talk to the polkadot.js extension, as usual.

With the information that you have now, could you estimate how much work it would be to integrate this functionality into the polkadotjs extension? Would the current architecture support the addition of this new account type?

[jacogr]

All I can comment is on the very last point - integrating new account types are really easy. The keyring is basically agnostic of where it comes from and like hardware wallets, an extra flag on the metadata is basically all that is needed. (The meta information is just a bag holder). From that point, as long as -

1. the UI know how to add these (QR)
2. there is a signer available for it (BeaconSigner)

All is good and seamless, i.e. the account can be handled like any other.

[AndreasGassmann]

Thanks for the response, that sounds very promising already.

The data that should be displayed as a QR code can be obtained through the DAppClient instance. I will prepare a complete example for the BeaconSigner in the next few days.