feat: wallet connect

[nejcm]

WIP

[netlify]

✅ Deploy Preview for rococo-souffle-a625f5 ready!

Name	Link
🔨 Latest commit	0a95938
🔍 Latest deploy log	https://app.netlify.com/sites/rococo-souffle-a625f5/deploys/649afc28a18d3c000887df86
😎 Deploy Preview	https://deploy-preview-195--rococo-souffle-a625f5.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

yarn.lock changes

Summary

Status	Count
	94
	2

Click to toggle table visibility

Name	Status	Previous	Current
@json-rpc-tools/provider		-	1.7.6
@json-rpc-tools/types		-	1.7.6
@json-rpc-tools/utils		-	1.7.6
@lit-labs/ssr-dom-shim		-	1.1.1
@lit/reactive-element		-	1.6.2
@motionone/animation		-	10.15.1
@motionone/dom		-	10.16.2
@motionone/easing		-	10.15.1
@motionone/generators		-	10.15.1
@motionone/svelte		-	10.16.2
@motionone/types		-	10.15.1
@motionone/utils		-	10.15.1
@motionone/vue		-	10.16.2
@pedrouid/environment		-	1.0.1
@stablelib/aead		-	1.0.1
@stablelib/binary		-	1.0.1
@stablelib/bytes		-	1.0.1
@stablelib/chacha		-	1.0.1
@stablelib/chacha20poly1305		-	1.0.1
@stablelib/constant-time		-	1.0.1
@stablelib/ed25519		-	1.0.3
@stablelib/hash		-	1.0.1
@stablelib/hkdf		-	1.0.1
@stablelib/hmac		-	1.0.1
@stablelib/int		-	1.0.1
@stablelib/keyagreement		-	1.0.1
@stablelib/poly1305		-	1.0.1
@stablelib/random		-	1.0.2
@stablelib/sha256		-	1.0.1
@stablelib/sha512		-	1.0.1
@stablelib/wipe		-	1.0.1
@stablelib/x25519		-	1.0.3
@types/trusted-types		-	2.0.3
@walletconnect/core		-	2.8.1
@walletconnect/environment		-	1.0.1
@walletconnect/events		-	1.0.1
@walletconnect/heartbeat		-	1.2.1
@walletconnect/jsonrpc-http-connection		-	1.0.7
@walletconnect/jsonrpc-provider		-	1.0.13
@walletconnect/jsonrpc-types		-	1.0.3
@walletconnect/jsonrpc-utils		-	1.0.8
@walletconnect/jsonrpc-ws-connection		-	1.0.11
@walletconnect/keyvaluestorage		-	1.0.2
@walletconnect/logger		-	2.0.1
@walletconnect/modal		-	2.4.7
@walletconnect/relay-api		-	1.0.9
@walletconnect/relay-auth		-	1.0.4
@walletconnect/safe-json		-	1.0.2
@walletconnect/sign-client		-	2.8.1
@walletconnect/time		-	1.0.2
@walletconnect/types		-	2.8.1
@walletconnect/universal-provider		-	2.8.1
@walletconnect/utils		-	2.8.1
@walletconnect/window-getters		-	1.0.1
@walletconnect/window-metadata		-	1.0.1
@web3modal/core		-	2.4.7
@web3modal/ui		-	2.4.7
atomic-sleep		-	1.0.0
buffer		5.7.1	6.0.3
cross-fetch		-	3.1.6
detect-browser		-	5.3.0
dijkstrajs		-	1.0.3
duplexify		-	4.1.2
eip1193-provider		-	1.0.1
encode-utf8		-	1.0.3
end-of-stream		-	1.4.4
events		-	3.3.0
fast-redact		-	3.2.0
hey-listen		-	1.0.8
keyvaluestorage-interface		-	1.0.0
lit-element		-	3.3.2
lit-html		-	2.7.4
lit		-	2.7.5
lodash.isequal		-	4.5.0
motion		-	10.16.2
multiformats		-	9.9.0
on-exit-leak-free		-	0.2.0
pino-abstract-transport		-	0.5.0
pino-std-serializers		-	4.0.0
pino		-	7.11.0
pngjs		-	5.0.0
process-warning		-	1.0.0
proxy-compare		-	2.5.1
qrcode		-	1.5.3
quick-format-unescaped		-	4.0.4
real-require		-	0.1.0
require-main-filename		-	2.0.0
safe-json-utils		-	1.1.1
safe-stable-stringify		-	2.4.3
sonic-boom		-	2.8.0
split2		3.2.2	4.2.0
stream-shift		-	1.0.1
thread-stream		-	0.15.2
uint8arrays		-	3.1.1
valtio		-	1.10.5
which-module		-	2.0.1

[ebma]

Edit: We can use the Nova Wallet mobile app to test the walletconnect communication.
I did that and it doesn't seem to work. The console shows lots of websocket errors. @nejcm can you look into this maybe?

[nejcm]

Edit: We can use the Nova Wallet mobile app to test the walletconnect communication. I did that and it doesn't seem to work. The console shows lots of websocket errors. @nejcm can you look into this maybe?

Fixed. Some domain exceptions needed to be added to wallet connect dash

[prayagd]

@nejc Moving this to development and removing the WIP label as it means something is incomplete and ticket is yet to prepared.

[nejcm]

@ebma @prayagd This is ready for final testing and merge. I added the persistence to wallet connect.

[ebma]

When disconnecting from the wallet (using the disconnect button in the top-right hand corner) and refreshing the page, it will still load the previously disconnected account.

It seems that there are also more inconsistencies in regard to the local-storage. When you first connect with an account from polkadot.js extension, and then disconnect from that, it does not disconnect immediately. Or at least it's not reflected properly. You have to disconnect twice. But if after you used a polkadot.js account, you decide to use walletconnect, the UI will show this account as imported from polkadot.js as well. And it's not even the same account. Also, refreshing the page sometimes imports a polkadot.js account and sometimes the walletconnect account.

@nejcm can you look into this again? Seems like some local storage keys are not properly cleared and the Wallet button is not re-rendered properly.

Last but not least, there is some weird issue that happens when you play around with the wallet choices shown in the dialog. If a user clicks on one of these items, a certain item will be placed in local storage. When the user now needs to sign a transaction, the browser will almost immediately redirect to that other wallet. This is super bad, because we want the user to see the request in their smartphone wallet. To circumvent this behavior, I think our only good choice is to always clear that respective local storage key so that it is unset at all times.

[nejcm]

Managed to fix the storage issue but cant recreate the wallet connect issue with apps. That is the internal functionality of the library so we will have to do some "hacky" stuff to work around that.
@ebma Please make final tests before merging.

[ebma]

@nejcm can you resolve the conflicts? Sorry for that, I just merged the other PR.

[ebma]

Although it's not perfect yet, we'll merge it already.