Unsupported network UI redesign

[willhennessy]

When you connect with an unsupported network you see this

the Connect wallet button in the swap box is inaccurate because your wallet is already connected.

When you click on that button you see this message which feels like a dead end. How is the user supposed to know what an appropriate network is, or how to connect to it?

@maggievalentine can you propose a design? Options

1. Rename the button to "Wrong network" (should we soften this language to "Unsupported network"?) and force open the network selector in the top-right corner. Make that network menu non-dismissable until the user clicks a supported network.
2. Rename the button to "Switch networks" (what color should that button be?) and when clicked open the dropdown network selector in the top-right? This is an awkward pattern.
3. (same) .. when clicked open a modal with our networks to choose from? This would be a duplicate of the network selector functionality

[willhennessy]

Here's the UX specification and a mock from Maggie!

Figma

Header

• Remove the "Wrong Network" badge
• Apply the same red error state background color and white font color to the network selector
• Change the text of the network selector to "Switch Network"
• Change the network pulse icon to an AlertTriangle, size=16
• Update the title of the dropdown box to "Select a supported network"

Swap box

• The submit button should be in disabled state with text "Swap"
• Token selector should be disabled (note: the mock below shows them enabled, please ignore)
• Input and output fields should be disabled (note: the mock below shows them enabled, please ignore)

Footer

• In the bottom right corner of the screen, hide the component that shows block number, block indicator dot, and gwei gas price

[joeyiny]

Hey I'm on it!

Question — should the disabled 'Swap' button say 'Switch Network' as well? which will prompt that same popup where the user can switch networks?

I feel it could add a bit more accessibility to end user :)

@maggievalentine

[willhennessy]

Great question! The button used to behave that way, but we’ve been refining the design system and decided that button should say “swap” and we’ll put directions like “switch network” elsewhere in the UI Also in this case, it would be unexpected for the button in the swap box to trigger the network menu in the header

On Thu, Dec 23, 2021 at 6:20 PM joey iny ***@***.***> wrote: Hey I'm on it! Question — should the disabled 'Swap' button say 'Switch Network' as well? and that prompts the user to switch networks? — Reply to this email directly, view it on GitHub <#2627 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJT5WMCEHCC7H4QQVBBGY3USO4F7ANCNFSM5GDZ2USA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>

-- [image: UL-Monogram_Pink.png] *Will Hennessy * Product Manager E: ***@***.*** Uniswap Labs <http://uniswap.org/>

[willhennessy]

Hi Joey, how's it going? We just had a user contact support about this flow so I'd love to ship the feature soon.

We also need to make sure selecting a network prompts the wallet to switch networks. We noticed in #3088 that currently is not happening.

[tinaszheng]

@willhennessy - just started on this issue but realized that our current version of react-web3 doesn't support requesting network changes once a wallet goes to an unsupported chain (confirmed with @NoahZinsmeister)

i'll prioritize upgrading the library (tracked here: #3099) so that i can work on this after 😺

[joeyiny]

@willhennessy @tinaszheng so sorry for delay guys.

I did actually implement the feature, but the web3 library doesn't prompt the user's wallet to change networks on switch.

Can push code/video momentarily