fix: NetworkSelect mobile toggle bug

[brunocrosier]

Fixes: [3690]

[vercel]

@brunocrosier is attempting to deploy a commit to the Uniswap Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

widgets – ./

🔍 Inspect: https://vercel.com/uniswap/widgets/FNLguSUuBHhBjizmaNyKAFdvNeoB
✅ Preview: https://widgets-git-fork-brunocrosier-networkselect-3690-uniswap.vercel.app

interface – ./

🔍 Inspect: https://vercel.com/uniswap/interface/7E6H6yak7SRVovR4icWnkVACbPsm
✅ Preview: https://interface-git-fork-brunocrosier-networkselect-3690-uniswap.vercel.app

[brunocrosier]

Means we no longer need to assert as any

<SelectorWrapper ref={node as any} ... >

becomes

<SelectorWrapper ref={node} ... >

[brunocrosier]

The reason why we can't have just do:

 <SelectorWrapper ref={node} onMouseEnter={toggle} onMouseLeave={toggle} onClick={toggle}>

is that we could end up in this state:

1. hover to open
2. click to close (at this point, mouse is still hovering over element)

this would mean that when the mouse leaves, the toggle function would be called again, thereby reopening the modal (which is not the desired behaviour)

[willhennessy]

Thanks Bruno! Looks like the Vercel build failed with the below prettier error. Can you fix ?

Running "yarn run build"
--
14:27:34.613 | yarn run v1.22.17
14:27:34.650 | $ react-scripts build
14:27:36.704 | Creating an optimized production build...
14:29:13.073 | Failed to compile.
14:29:13.074 |  
14:29:13.074 | src/components/WalletModal/index.tsx
14:29:13.074 | Line 16:29:  Insert `·`  prettier/prettier
14:29:13.074 |  
14:29:13.074 | Search for the keywords to learn more about each error.
14:29:13.074 |  
14:29:13.075 |  
14:29:13.187 | error Command failed with exit code 1.
14:29:13.187 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
14:29:13.197 | Error: Command "yarn run build" exited with 1

[brunocrosier]

Hey @willhennessy

Hmm that's strange. I was able to run yarn build locally with no issues, and also was able to deploy to Vercel (see here: https://interface-sooty.vercel.app/#/swap?chain=mainnet)

The strange thing is, I didn't make any changes to src/components/WalletModal/index.tsx in this PR

I think there's a chance you may be looking at a different PR by mistake? I can see that there is another open PR which does modify src/components/WalletModal/index.tsx - and there is indeed a missing space at line 16, column 29

I have commented that file with a suggested fix here: https://github.com/Uniswap/interface/pull/3693/files#r847601265

Any questions, let me know!

[willhennessy]

Sorry! You're right, I was reviewing PRs and mixed up the tabs. Great detective work.

We're getting an engineer to review the PR asap. Thanks bruno.

[JFrankfurt]

I think you should

• drop the package.json changes and add them in a new pr w/ a windows compatible script.
• look into a local compatibility solution (prob git config) for the prettier issue

[brunocrosier]

@zzmp @JFrankfurt Thanks for your comments. I have removed the Windows changes, and will create a separate PR for that!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
interface	✅ Ready (Inspect)	Visit Preview	Jul 11, 2022 at 7:48PM (UTC)