Feat/support multiple wallets

[mattyg]

Resolves #352

Overview

• remove dependency web3-react
• add dependency @rainbow-me/rainbowkit
• refactor LoginPage and ActivatePage to use a shared SignMessageLayout
• refactor SignMessageLayout to use rainbowkit connection component
• add all wallets currently available in rainbowkit

To reduce the scope, I did not include WalletConnect in the rainbowkit ux, as it will require additional setup per-instance (registering each app instance with WalletConnect). Though this could be added in the future if desired.

[kristoferlund]

Rainbow looks nice, definitely supports more wallets than web3-react!

Here are some initial comments:

I've only tried the Argent Wallet integration so far. Connecting wallet worked fine, logging into website didn't work - no error specified. Argent didn't present me with the message to sign, only a generic "Praise is requesting your signature". I think we need to verify all supported wallets work before enabling them.

While in the connected state but before signing login message the user is sort of stuck. To switch back to Metamask I had to clear LocalStorage. We need to provide a "Disconnect" button. Let's make a popup similar to how Rainbow does it. Accessed by a "down chevron" next to the eth address. This popup we can reuse when user is fully logged in as well.

I am getting a lot of build errors when starting through VSCode:

And finally. Rainbow adds a lot to the frontend package size. Is there any way to shrink that?

[mattyg]

Rainbow looks nice, definitely supports more wallets than web3-react!

Here are some initial comments:

I've only tried the Argent Wallet integration so far. Connecting wallet worked fine, logging into website didn't work - no error specified. Argent didn't present me with the message to sign, only a generic "Praise is requesting your signature". I think we need to verify all supported wallets work before enabling them.

Verified all wallets working properly except for Argent & SteakWallet -- removed them.

While in the connected state but before signing login message the user is sort of stuck. To switch back to Metamask I had to clear LocalStorage. We need to provide a "Disconnect" button. Let's make a popup similar to how Rainbow does it. Accessed by a "down chevron" next to the eth address. This popup we can reuse when user is fully logged in as well.

Done

I am getting a lot of build errors when starting through VSCode:

It looks like these are caused to changes in Webpack 5 which requires dependencies to publish their source files. See
mswjs/msw#1030
facebook/create-react-app#11767

As a workaround, I ignored these warnings via webpack config.

And finally. Rainbow adds a lot to the frontend package size. Is there any way to shrink that?

Hopefully #426 will reduce the overall app size. Otherwise will have to dig into other options.

[kristoferlund]

Popup looks great!

Since Argent also has WalletConnect, you can attempt to login using that method. And that still don't work.

Also tried using Ledger Live and got this:

But, I'm merging this now and will try more wallets later. Let's make separate issue for any more problems.

[kristoferlund]

Popup looks great!

Since Argent also has WalletConnect, you can attempt to login using that method. And that still don't work.

Also tried using Ledger Live and got this:

But, I'm merging this now and will try more wallets later. Let's make separate issue for any more problems.

Updating to a newer version of Ledger Live solved that issue. 👍👍

[mattyg]

Popup looks great!

Since Argent also has WalletConnect, you can attempt to login using that method. And that still don't work.

Yeah I think Argent has some different requirements to setup message signing since it's a "smart contract wallet" -- I didn't dig into the details much more: https://docs.argent.xyz/wallet-connect-and-argent#message-signature