feat: Update network select

[Lykhoyda]

Closes #264

• Updated the network selection for the desktop
• Updated the network selection for mobile
• Mobile menu style updates
• fix "watch account" or "connect" for mobile devices
• fix loader appearance for MultiProxy selection when there is no proxy

[asnaith]

Hey Anton, I noticed a couple of things here and also need a bit of clarification on a few things.

---

1. The network selector is less round and has a bit more space than the version on the issue / in figma. For example:

---

2. On the mobile menu we are still including the network name and the connect button and menu items are centered and not right aligned.

---

3. I noticed there's some gaps in the corners of the menu border:

---

4. It was not obvious to me what was fixed with regard to these two points below, could you please advise me on the nature of the change so that I can validate? 🙏

fix "watch account" or "connect" for mobile devices
fix loader appearance for MultiProxy selection when there is no proxy

---

5. Is the network selection supposed to look like this on mobile?

---

6. Lastly (and this could be out of the scope of this ticket) I feel like we should probably use a more distinct colour for the connect button now that we no longer have a blue background, what do you think? cc @Tbaut

[Tbaut]

For 6. I'd say I've no strong opinion. We could have it primary. But this doesn't have to be tackled in this PR since it's not par of it.

I'll give this PR a go after the comments from Andrew are addressed.

[Lykhoyda]

Hey Anton, I noticed a couple of things here and also need a bit of clarification on a few things.

1. The network selector is less round and has a bit more space than the version on the issue / in figma. For example:

2. On the mobile menu we are still including the network name and the connect button and menu items are centered and not right aligned. 3. I noticed there's some gaps in the corners of the menu border: 4. It was not obvious to me what was fixed with regard to these two points below, could you please advise me on the nature of the change so that I can validate? 🙏

fix "watch account" or "connect" for mobile devices
fix loader appearance for MultiProxy selection when there is no proxy

5. Is the network selection supposed to look like this on mobile?

6. Lastly (and this could be out of the scope of this ticket) I feel like we should probably use a more distinct colour for the connect button now that we no longer have a blue background, what do you think? cc @Tbaut

@asnaith Thank you for the review!

1. The reason why the selector is not rounded is that the changes should be reflected in the other components as well. Because if we round only the network selector it would look strange. I think it's a recent change in the design to have more rounded components. So it can be changed in a different story as it will touch other components. For consistency, I would keep a similar design for the current PR.

2. For the mobile menu I keep the name as we don't have a lack of space compared to the desktop version. It's also helpful to distinguish when the icon is the same but has different networks (Assethub-Dot and Assethub-Ksm). IMO it looks better when the items are centered, as your eyes are focused more on the middle of the screen and the text looks more readable. In the newer version of the mobile design the network selector and proxy are not part of the menu, so it will be changed anyway :)

3. Good catch!

fix "watch account" or "connect" for mobile devices

---

"fix loader appearance for MultiProxy selection when there is no proxy"

When you switch the network and have no multisig we show the loader and it disappears after checking that there is no multisig. It causes the UI to unnecessarily "jump".

5. So far we don't have a mobile design. I will make it a little bit bigger, but yeah it's how it looks now.

[Tbaut]

Some comments on one decision regarding the loader. For the rest, I don't have strong opinions regarding what was discussed above with Andrew.

[Tbaut]

Looking good from my side. I think the logo could be bigger in the network menu see my comments below. I opened an issue for the jumping annoyance #387.

[asnaith]

Hey @Lykhoyda Thank you for all those confirmations and clarifications. I just wanted to make sure what I noticed was intentional / just how it is for now.

I’ll create a separate issue for changing the connect button color.

Looks like we’re all good to go with this then :)