From 23d3acda57cc187ef45fa5dd7904395d0cc34ac7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nejc=20Drobni=C4=8D?= Date: Tue, 25 Jan 2022 21:54:26 +0100 Subject: [PATCH 1/3] refactor: add logo to chains --- src/constants/chains.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/constants/chains.ts b/src/constants/chains.ts index 46bac40..ae37274 100644 --- a/src/constants/chains.ts +++ b/src/constants/chains.ts @@ -1,3 +1,5 @@ +import bobaLogoUrl from 'public/assets/chains/boba.svg'; + export enum SupportedChainId { BOBA = 288, BOBA_RINKEBY = 28 @@ -50,6 +52,7 @@ interface BaseChainInfo { readonly networkType: NetworkType; readonly blockWaitMsBeforeWarning?: number; readonly explorer: string; + readonly logoUrl: string; readonly label: string; readonly addNetworkInfo: AddNetworkInfo; } @@ -71,6 +74,7 @@ export const CHAIN_INFO: ChainInfoMap = { networkType: NetworkType.L2, // blockWaitMsBeforeWarning: ms`25m`, explorer: 'https://blockexplorer.boba.network/', + logoUrl: bobaLogoUrl, label: 'Boba L2', addNetworkInfo: { nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 }, @@ -81,6 +85,7 @@ export const CHAIN_INFO: ChainInfoMap = { networkType: NetworkType.L2, // blockWaitMsBeforeWarning: ms`25m`, explorer: 'https://blockexplorer.rinkeby.boba.network/', + logoUrl: bobaLogoUrl, label: 'Boba L2 Rinkeby', addNetworkInfo: { nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 }, From 6913a63726c0ee1eef59511529afcbe55bc0bfc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nejc=20Drobni=C4=8D?= Date: Tue, 25 Jan 2022 22:29:19 +0100 Subject: [PATCH 2/3] feat: wrong network indicator --- src/components/Connect/Connect.tsx | 21 +++++++++++++------ src/components/Connect/MetamaskConnect.tsx | 2 +- src/components/Connect/TorusConnect.tsx | 6 +----- .../Connect/WalletConnectConnect.tsx | 6 +----- src/components/Connect/WalletLinkConnect.tsx | 6 +----- src/components/Navbar/Navbar.tsx | 13 ++++++++++-- 6 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/components/Connect/Connect.tsx b/src/components/Connect/Connect.tsx index eb5bd8a..126822b 100644 --- a/src/components/Connect/Connect.tsx +++ b/src/components/Connect/Connect.tsx @@ -1,3 +1,4 @@ +import { UnsupportedChainIdError } from '@web3-react/core'; import GenericModal from 'components/Modals/GenericModal'; import { useActiveWeb3React } from 'hooks/useActiveWeb3React'; import useEagerConnect from 'hooks/useEagerConnect'; @@ -11,10 +12,12 @@ import WalletLinkConnect from './WalletLinkConnect'; const Connect: React.FC = () => { const dispatch = useDispatch(); - const { active } = useActiveWeb3React(); + const { active, error } = useActiveWeb3React(); const triedToEagerConnect = useEagerConnect(); const open = useSelector(selectConnectingStatus); + const wrongNetwork = error instanceof UnsupportedChainIdError; + useEffect(() => { dispatch(setEagerAttempt(triedToEagerConnect)); }, [triedToEagerConnect, active, dispatch]); @@ -23,13 +26,19 @@ const Connect: React.FC = () => { dispatch(setConnectingStatus(state))} - modalTitle="Connect a wallet" + modalTitle={wrongNetwork ? 'Wrong Network' : 'Connect a wallet'} onTitleCloseClick={() => dispatch(setConnectingStatus(false))} > - - - - + {wrongNetwork ? ( + <>Please connect to a supported network in the dropdown menu or in your wallet. + ) : ( + <> + + + + + + )} ); }; diff --git a/src/components/Connect/MetamaskConnect.tsx b/src/components/Connect/MetamaskConnect.tsx index 4e415a6..a2c09a9 100644 --- a/src/components/Connect/MetamaskConnect.tsx +++ b/src/components/Connect/MetamaskConnect.tsx @@ -22,7 +22,7 @@ const MetamaskConnect: React.FC = () => { } }, [active, error]); - if (error || !triedToEagerConnect) { + if (!triedToEagerConnect) { return null; } diff --git a/src/components/Connect/TorusConnect.tsx b/src/components/Connect/TorusConnect.tsx index d65d320..8c81ef5 100644 --- a/src/components/Connect/TorusConnect.tsx +++ b/src/components/Connect/TorusConnect.tsx @@ -4,11 +4,7 @@ import { useActiveWeb3React } from 'hooks/useActiveWeb3React'; import React from 'react'; const TorusConnect: React.FC = () => { - const { error, activate, setError } = useActiveWeb3React(); - - if (error) { - return null; - } + const { activate, setError } = useActiveWeb3React(); return ( <> diff --git a/src/components/Connect/WalletConnectConnect.tsx b/src/components/Connect/WalletConnectConnect.tsx index 3519af9..451efe3 100644 --- a/src/components/Connect/WalletConnectConnect.tsx +++ b/src/components/Connect/WalletConnectConnect.tsx @@ -4,11 +4,7 @@ import { useActiveWeb3React } from 'hooks/useActiveWeb3React'; import React from 'react'; const WalletConnectConnect: React.FC = () => { - const { error, activate, setError } = useActiveWeb3React(); - - if (error) { - return null; - } + const { activate, setError } = useActiveWeb3React(); return ( <> diff --git a/src/components/Connect/WalletLinkConnect.tsx b/src/components/Connect/WalletLinkConnect.tsx index d1e5057..162ca33 100644 --- a/src/components/Connect/WalletLinkConnect.tsx +++ b/src/components/Connect/WalletLinkConnect.tsx @@ -3,11 +3,7 @@ import { useActiveWeb3React } from 'hooks/useActiveWeb3React'; import React from 'react'; const WalletLinkConnect: React.FC = () => { - const { error, activate, setError } = useActiveWeb3React(); - - if (error) { - return null; - } + const { activate, setError } = useActiveWeb3React(); return ( <> diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 78bb050..c043588 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -1,17 +1,18 @@ +import { UnsupportedChainIdError } from '@web3-react/core'; import AccountName from 'components/Account/AccountName'; import { useActiveWeb3React } from 'hooks/useActiveWeb3React'; import Link from 'next/link'; import React from 'react'; +import { If, Then, Else, Case, Default, Switch } from 'react-if'; import { useDispatch } from 'react-redux'; import { setConnectingStatus } from 'state/reducers/user'; -import { If, Then, Else, Switch, Case, Default } from 'react-if'; import AppBar from './AppBar'; import { useRouter } from 'next/router'; const Navbar: React.FC = () => { const router = useRouter(); const dispatch = useDispatch(); - const { active } = useActiveWeb3React(); + const { active, error } = useActiveWeb3React(); return ( <> @@ -34,6 +35,14 @@ const Navbar: React.FC = () => {
+ + +
From ab36b6f3846f9a3fb4cb6e3cd81d0b35ca0b09de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nejc=20Drobni=C4=8D?= Date: Tue, 25 Jan 2022 22:38:08 +0100 Subject: [PATCH 3/3] fix: if connection is active close wallets menu --- src/components/Connect/Connect.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Connect/Connect.tsx b/src/components/Connect/Connect.tsx index 126822b..e899e1b 100644 --- a/src/components/Connect/Connect.tsx +++ b/src/components/Connect/Connect.tsx @@ -20,6 +20,7 @@ const Connect: React.FC = () => { useEffect(() => { dispatch(setEagerAttempt(triedToEagerConnect)); + if (active === true) dispatch(setConnectingStatus(false)); }, [triedToEagerConnect, active, dispatch]); return (