Revamp connect wallet flow and design

[Sharqiewicz]

What:

• Show "Connect Wallet" option on the top right corner of Portal
• on clicking "Connect Wallet"
  • Show a modal to with all the wallet options
  • User should be able to select one of the options
  • on selecting, show all the available accounts from selected wallet that the user wants to connect
  • User should be able to select one option our of the available wallets
  • on successful connection show the "Wallet Connected" pop-up
  • on closing the pop-up on the top right corner the user should be able to see the connected account
• Unhappy Path
  • If the user does not have the available wallet option and selects one option
  • Show "Extension not installed" pop-up error
  • "Download polkadot.js extension here." clicking on here show redirect to the installation page of the extension
  • Links shared in the notes section
  • Once the user installs, on clicking "Reconnect" redirect the user to the wallet options modal for the selection.

How:

Wallet Connect Modal:

• Create a new modal for wallet connection.
• 📜 Display default wallets (Talisman, SubWallet, PolkadotJS, Metamask, WalletConnect, NovaWallet (mobile only)).
• 🧩 Show additional wallets if they are installed by the user.
• ⚙️ Unified account selection flow:
• • 1. Choose Wallet
• • 2. Display available accounts
• • 3. Select an account

Refactoring:

• 🔄 Refactor NovaWallet connection into a hook.
• 🔄 Refactor Metamask connection into a hook.
• 🔧 Create useWalletConnection hook for managing wallet connections (excluding WalletConnect which retains its previous implementation).

Mobile fixes

• 🛠️ fix ChainSelector (user was not able to select the chain)
• 🔄 React-DaisyUI Dropdown implementation is not working. I replaced it with normal DaisyUI implementation.

⚠️ all of the Dropdown usage should be replaced i.e. in AssetSelector (now in GET AMPE/PEN user is not able to select assets)

UI Adjustments:

• hide "Insufficient funds to execute transactions" tooltip on mobile
• hide ChainSelector chain name on mobile (only logo will be displayed)

PR Summary is still being created...

Closes #28 and closes #497.

[netlify]

✅ Deploy Preview for rococo-souffle-a625f5 ready!

Name	Link
🔨 Latest commit	b1fc776
🔍 Latest deploy log	https://app.netlify.com/sites/rococo-souffle-a625f5/deploys/66a0e64c7bfc2c0008023a97
😎 Deploy Preview	https://deploy-preview-498--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.

[Sharqiewicz]

@ebma Ready for review

[ebma]

The code looks very nice in general, great job @Sharqiewicz! In the following I list some things I noticed as a 'user'.

---

It was not contained in the designs either but I think we should definitely show the name of the respective wallet account in the list below 'Choose Account'. Otherwise it's really hard to find the account that I actually want to connect with.

---

The staking page seems broken when I connect an account via WalletConnect.

This not only seems to happen when a wallet is connected via WalletConnect. I checked and this also occurred when I connected the Joint Tech Product account via polkadot.js extension and reloading the page.

---

Clicking on this area in the search field won't focus the input field.

---

These are not clickable so let's either make them collapse the respective section or remove them. IMO, the upper one can be removed completely as there usually wouldn't be a need to collapse the upper section. Or maybe it's worth keeping on mobile, not sure.

[Sharqiewicz]

@ebma I have implemented the changes you asked for.
✅ Fixed the infinite loop of rerendering in /staking
✅ Removed arrow from "select wallet"
✅ Added show/hide functionality to "select account" on arrow click

I also added some changes for improving the accessibility on mobile (because now it's 😨 😔 😣)

As for displaying the name of the relevant wallet account, I have seen in other dApps (such as Moonbeam) that it only shows the address. So for now I would suggest a PR merge and then ask @prayagd about it

[prayagd]

@Sharqiewicz Great work

• Tested all the 4 wallets Polkadot.js, Talisman, Subwallet and Metamask, also work well on mobile
• Walletconnect does not work
• Please show wallet names next to the wallet address in the dropdown

[ebma]

Walletconnect does not work

I think this can be ignored because it probably only doesn't work because we would need to whitelist the URL of this deploy preview in the settings of our wallet-connect project. It worked locally IIRC.

[Sharqiewicz]

@prayagd The implementation of WalletConnect wasn't changed in this PR. It is the same as it was before. Locally it works perfectly

[ebma]

@Sharqiewicz I imagine that adding the names to the list wouldn't require too much effort or do you think it would?

[Sharqiewicz]

@ebma 10 seconds of work

[ebma]

Perfect, thanks for addressing everything 🙏 looks good to me now

One last thing I noticed is that the dialog doesn't have a clickaway listener, ie the dialog doesn't close when I click outside of it. Not sure how important this is.

[Sharqiewicz]

@ebma I used the general dialog component that we use for all modals in the app. It seems to me that all the modals in the app do not close when clicked outside. Should this behaviour be changed?

[ebma]

Ah okay 😅 Yes I think it would be more intuitive if the dialogs close on click away, what do you think @prayagd? But we can definitely take this to a different ticket and already merge this one.

[prayagd]

Yes I think it would be more intuitive if the dialogs close on click away, what do you think @prayagd?

yes i agree, but lets not fix that in this PR. I will create ticket for all modals throughout the portal to work this way. We can merge