From 629bf045e88d4339bc3aaaceb1ba52b90837d754 Mon Sep 17 00:00:00 2001 From: ReflectiveChimp <55021052+ReflectiveChimp@users.noreply.github.com> Date: Tue, 6 Jul 2021 06:53:06 +0100 Subject: [PATCH] Disable auto network switch/add user network switch (#610) * -auto network switch prompt +ui for switching network/app * Remove `PoolAccordion` Rename `Vault-ConnectWallet` string to `Network-ConnectWallet` Remove `Network-Error` string * fix fantom app url * add manual wallet switch note * Remove Network-Error and rename Vault-ConnectWallet for newly added pl translations --- src/components/Header/Header.js | 4 +- .../NetworkConnectNotice.js | 108 ++++++++++++++++++ src/components/NetworkConnectNotice/styles.js | 34 ++++++ src/components/NetworkError/NetworkError.js | 26 ----- src/components/NetworkError/styles.js | 19 --- src/features/helpers/getNetworkData.js | 20 +++- src/features/home/App.js | 44 ++++--- src/features/vault/components/Pool/Pool.js | 12 +- .../components/PoolDetails/PoolAccordion.js | 41 ------- src/locales/ar/translation.json | 3 +- src/locales/de/translation.json | 3 +- src/locales/el/translation.json | 3 +- src/locales/en/translation.json | 13 ++- src/locales/es/translation.json | 3 +- src/locales/fil/translation.json | 3 +- src/locales/fr/translation.json | 3 +- src/locales/hi/translation.json | 1 - src/locales/id/translation.json | 1 - src/locales/it/translation.json | 3 +- src/locales/ko/translation.json | 1 - src/locales/ms/translation.json | 3 +- src/locales/nl/translation.json | 3 +- src/locales/pl/translation.json | 3 +- src/locales/pt-BR/translation.json | 3 +- src/locales/pt-PT/translation.json | 3 +- src/locales/ru/translation.json | 3 +- src/locales/se/translation.json | 1 - src/locales/tr/translation.json | 3 +- src/locales/uk/translation.json | 1 - src/locales/zh/translation.json | 3 +- 30 files changed, 212 insertions(+), 159 deletions(-) create mode 100644 src/components/NetworkConnectNotice/NetworkConnectNotice.js create mode 100644 src/components/NetworkConnectNotice/styles.js delete mode 100644 src/components/NetworkError/NetworkError.js delete mode 100644 src/components/NetworkError/styles.js delete mode 100644 src/features/vault/components/PoolDetails/PoolAccordion.js diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index c6ae63cb0..b6b5ffeee 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -11,7 +11,7 @@ import Menu from '@material-ui/icons/Menu'; import Close from '@material-ui/icons/Close'; import WbSunny from '@material-ui/icons/WbSunny'; import NightsStay from '@material-ui/icons/NightsStay'; -import { getNetworkBuyLink } from '../../features/helpers/getNetworkData'; +import { getNetworkBuyUrl } from '../../features/helpers/getNetworkData'; import styles from './styles'; const useStyles = makeStyles(styles); @@ -134,7 +134,7 @@ const LinkSidebar = ({ name, label, icon, classes }) => ( ); const getLinkUrl = name => { - return name === 'buy' ? getNetworkBuyLink() : `https://${name}.beefy.finance`; + return name === 'buy' ? getNetworkBuyUrl() : `https://${name}.beefy.finance`; }; export default Header; diff --git a/src/components/NetworkConnectNotice/NetworkConnectNotice.js b/src/components/NetworkConnectNotice/NetworkConnectNotice.js new file mode 100644 index 000000000..949bdce5a --- /dev/null +++ b/src/components/NetworkConnectNotice/NetworkConnectNotice.js @@ -0,0 +1,108 @@ +import React, { useCallback, useMemo, useState } from 'react'; +import Button from '@material-ui/core/Button'; +import { networkSettings, networkSetup } from 'common/networkSetup'; +import { getNetworkAppUrl, getNetworkFriendlyName } from 'features/helpers/getNetworkData'; +import { makeStyles } from '@material-ui/core/styles'; +import styles from './styles'; +import { useTranslation } from 'react-i18next'; + +const useStyles = makeStyles(styles); +const targetNetworkId = Number(process.env.REACT_APP_NETWORK_ID); + +export function NetworkConnectNotice({ + web3, + address, + networkId, + connectWallet, + disconnectWallet, +}) { + const [networkSetupError, setNetworkSetupError] = useState(null); + const { t } = useTranslation(); + const haveConnection = !!web3; + const haveAddress = !!address; + const isCorrectNetwork = networkId === targetNetworkId; + const isSupportedNetwork = networkId && networkId in networkSettings; + const targetNetworkFriendlyName = getNetworkFriendlyName(); + const classes = useStyles(); + let notice = null; + + const targetNetworkSetup = useCallback(() => { + setNetworkSetupError(null); + + networkSetup(targetNetworkId) + .then(() => { + setNetworkSetupError(null); + }) + .catch(e => { + if (typeof e === 'object' && typeof e.message === 'string') { + setNetworkSetupError(e.message); + } else if (typeof e === 'string') { + setNetworkSetupError(e); + } else { + setNetworkSetupError(t('Network-UnknownError')); + } + }); + }, [setNetworkSetupError, t]); + + const supportedNetwork = useMemo(() => { + return isSupportedNetwork + ? { + id: networkId, + app: getNetworkAppUrl(networkId), + name: getNetworkFriendlyName(networkId), + } + : null; + }, [isSupportedNetwork, networkId]); + + if (!haveConnection) { + notice = ( + <> +
+ {t('Network-ConnectionRequired', { network: targetNetworkFriendlyName })} +
+
+ +
+ + ); + } else if (!isCorrectNetwork) { + notice = ( + <> +
+ {t('Network-Supports', { network: targetNetworkFriendlyName })}{' '} + {isSupportedNetwork + ? t('Network-ConnectedTo', { network: supportedNetwork.name }) + : t('Network-ConnectedUnsupported')} +
+
+ + {isSupportedNetwork ? ( + + ) : null} + +
+
{t('Network-SwitchNote')}
+ {networkSetupError ?
{networkSetupError}
: ''} + + ); + } else if (!haveAddress) { + notice = ( + <> +
+ {t('Network-ConnectedTo', { network: targetNetworkFriendlyName })} +
+
{t('Network-NoWalletAddress')}
+ + ); + } + + return notice ?
{notice}
: null; +} diff --git a/src/components/NetworkConnectNotice/styles.js b/src/components/NetworkConnectNotice/styles.js new file mode 100644 index 000000000..cbf20bd2b --- /dev/null +++ b/src/components/NetworkConnectNotice/styles.js @@ -0,0 +1,34 @@ +const styles = theme => ({ + notice: { + backgroundColor: theme.palette.background.secondary, + padding: 25, + marginBottom: 25, + textAlign: 'center', + color: theme.palette.primary.main, + '& > :last-child': { + marginBottom: 0, + }, + }, + message: { + marginBottom: 15, + }, + actions: { + margin: '-10px -10px 15px 0', + }, + button: { + border: '1px solid ' + theme.palette.background.border, + padding: '4px 8px', + backgroundColor: theme.palette.background.default, + textTransform: 'none', + margin: '10px 10px 0 0', + }, + note: { + marginBottom: 15, + fontStyle: 'italic', + }, + error: { + color: 'red', + }, +}); + +export default styles; diff --git a/src/components/NetworkError/NetworkError.js b/src/components/NetworkError/NetworkError.js deleted file mode 100644 index 76035823d..000000000 --- a/src/components/NetworkError/NetworkError.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { makeStyles } from '@material-ui/core/styles'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; - -import { networkSettings } from 'common/networkSetup'; - -import styles from './styles'; - -const useStyles = makeStyles(styles); - -const NetworkError = ({ network }) => { - const { t } = useTranslation(); - const classes = useStyles(); - - return ( - - - {t('Network-Error', { network: networkSettings[network].chainName })} - - - ); -}; - -export default NetworkError; diff --git a/src/components/NetworkError/styles.js b/src/components/NetworkError/styles.js deleted file mode 100644 index de3b944b5..000000000 --- a/src/components/NetworkError/styles.js +++ /dev/null @@ -1,19 +0,0 @@ -const styles = theme => ({ - root: { - flexGrow: 1, - alignItems: 'center', - }, - textCenter: { - textAlign: 'center', - }, - networkError: { - padding: '12px', - borderRadius: '0', - background: theme.palette.background.secondary, - marginBottom: '2rem', - fontWeight: 900, - color: theme.palette.text.primary, - }, -}); - -export default styles; diff --git a/src/features/helpers/getNetworkData.js b/src/features/helpers/getNetworkData.js index 552a3dc0b..898f4572c 100644 --- a/src/features/helpers/getNetworkData.js +++ b/src/features/helpers/getNetworkData.js @@ -33,6 +33,14 @@ const networkTxUrls = { 250: hash => `https://ftmscan.com/tx/${hash}`, }; +const networkAppUrls = { + 56: 'https://app.beefy.finance/', + 128: 'https://heco.beefy.finance/', + 43114: 'https://avax.beefy.finance/', + 137: 'https://polygon.beefy.finance/', + 250: 'https://fantom.beefy.finance/', +}; + const networkFriendlyName = { 56: 'BSC', 128: 'HECO', @@ -41,7 +49,7 @@ const networkFriendlyName = { 250: 'Fantom', }; -const networkBuyLinks = { +const networkBuyUrls = { 56: 'https://app.1inch.io/#/r/0xF4cb25a1FF50E319c267b3E51CBeC2699FB2A43B', 128: 'https://ht.mdex.com/#/swap?inputCurrency=0xa71edc38d189767582c38a3145b5873052c3e47a&outputCurrency=0x765277eebeca2e31912c9946eae1021199b39c61', 137: 'https://app.1inch.io/#/r/0xF4cb25a1FF50E319c267b3E51CBeC2699FB2A43B', @@ -50,7 +58,7 @@ const networkBuyLinks = { }; export const getNetworkCoin = () => { - return nativeCoins.find(coin => coin.chainId == process.env.REACT_APP_NETWORK_ID); + return nativeCoins.find(coin => coin.chainId === Number(process.env.REACT_APP_NETWORK_ID)); }; export const getNetworkPools = () => { @@ -361,5 +369,9 @@ export const getNetworkConnectors = t => { }; export const getNetworkTxUrl = networkTxUrls[process.env.REACT_APP_NETWORK_ID]; -export const getNetworkFriendlyName = () => networkFriendlyName[process.env.REACT_APP_NETWORK_ID]; -export const getNetworkBuyLink = () => networkBuyLinks[process.env.REACT_APP_NETWORK_ID]; +export const getNetworkFriendlyName = (networkId = process.env.REACT_APP_NETWORK_ID) => + networkFriendlyName[networkId]; +export const getNetworkBuyUrl = (networkId = process.env.REACT_APP_NETWORK_ID) => + networkBuyUrls[networkId]; +export const getNetworkAppUrl = (networkId = process.env.REACT_APP_NETWORK_ID) => + networkAppUrls[networkId]; diff --git a/src/features/home/App.js b/src/features/home/App.js index b1d1b1f3c..88fd0d56c 100644 --- a/src/features/home/App.js +++ b/src/features/home/App.js @@ -1,22 +1,20 @@ -import React, { useEffect, useMemo, useState } from 'react'; -import { ThemeProvider, StylesProvider } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/core/styles'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { makeStyles, ThemeProvider, StylesProvider } from '@material-ui/core/styles'; import Header from 'components/Header/Header'; import HeaderLinks from 'components/HeaderLinks/HeaderLinks'; import NetworksProvider from 'components/NetworksProvider/NetworksProvider'; import NetworksModal from 'components/NetworksModal/NetworksModal'; -import NetworkError from 'components/NetworkError/NetworkError'; import { useTranslation } from 'react-i18next'; import { SnackbarProvider } from 'notistack'; import { Notifier } from 'features/common'; import Footer from 'components/Footer/Footer'; import Pastures from 'components/Pastures/Pastures'; +import { NetworkConnectNotice } from 'components/NetworkConnectNotice/NetworkConnectNotice'; import appStyle from './jss/appStyle.js'; import { createWeb3Modal } from '../web3'; import { useConnectWallet, useDisconnectWallet } from './redux/hooks'; import useNightMode from './hooks/useNightMode'; import createTheme from './jss/appTheme'; -import { networkSetup } from 'common/networkSetup'; const themes = { light: null, dark: null }; const getTheme = mode => { @@ -25,11 +23,10 @@ const getTheme = mode => { export default function App({ children }) { const { t } = useTranslation(); - const { connectWallet, web3, address, networkId, connected, connectWalletPending } = - useConnectWallet(); + const { connectWallet, web3, address, networkId, connected } = useConnectWallet(); const { disconnectWallet } = useDisconnectWallet(); const [web3Modal, setModal] = useState(null); - const [networkError, setNetworkError] = useState(null); + const { isNightMode, setNightMode } = useNightMode(); const theme = useMemo(() => getTheme(isNightMode ? 'dark' : 'light'), [isNightMode]); const useStyles = useMemo(() => { @@ -47,17 +44,13 @@ export default function App({ children }) { } }, [web3Modal, connectWallet]); - useEffect(() => { - if ( - web3 && - address && - !connectWalletPending && - networkId && - Boolean(networkId !== Number(process.env.REACT_APP_NETWORK_ID)) - ) { - networkSetup(process.env.REACT_APP_NETWORK_ID).catch(setNetworkError); - } - }, [web3, address, networkId, connectWalletPending, t]); + const connectWalletCallback = useCallback(() => { + connectWallet(web3Modal); + }, [web3Modal, connectWallet]); + + const disconnectWalletCallback = useCallback(() => { + disconnectWallet(web3, web3Modal); + }, [web3, web3Modal, disconnectWallet]); return ( @@ -71,8 +64,8 @@ export default function App({ children }) { connectWallet(web3Modal)} - disconnectWallet={() => disconnectWallet(web3, web3Modal)} + connectWallet={connectWalletCallback} + disconnectWallet={disconnectWalletCallback} isNightMode={isNightMode} setNightMode={() => setNightMode(!isNightMode)} /> @@ -82,12 +75,17 @@ export default function App({ children }) { />
- {networkError && } + {Boolean(networkId === Number(process.env.REACT_APP_NETWORK_ID)) && children}
-