This repository has been archived by the owner on Jan 24, 2023. It is now read-only.
forked from yfii/dfi
-
Notifications
You must be signed in to change notification settings - Fork 261
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
859936c
commit 629bf04
Showing
30 changed files
with
212 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
108 changes: 108 additions & 0 deletions
108
src/components/NetworkConnectNotice/NetworkConnectNotice.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = ( | ||
| <> | ||
| <div className={classes.message}> | ||
| {t('Network-ConnectionRequired', { network: targetNetworkFriendlyName })} | ||
| </div> | ||
| <div className={classes.actions}> | ||
| <Button onClick={connectWallet} className={classes.button}> | ||
| {t('Network-ConnectWallet')} | ||
| </Button> | ||
| </div> | ||
| </> | ||
| ); | ||
| } else if (!isCorrectNetwork) { | ||
| notice = ( | ||
| <> | ||
| <div className={classes.message}> | ||
| {t('Network-Supports', { network: targetNetworkFriendlyName })}{' '} | ||
| {isSupportedNetwork | ||
| ? t('Network-ConnectedTo', { network: supportedNetwork.name }) | ||
| : t('Network-ConnectedUnsupported')} | ||
| </div> | ||
| <div className={classes.actions}> | ||
| <Button onClick={targetNetworkSetup} className={classes.button}> | ||
| {t('Network-SwitchToNetwork', { network: targetNetworkFriendlyName })} | ||
| </Button> | ||
| {isSupportedNetwork ? ( | ||
| <Button href={supportedNetwork.app} className={classes.button}> | ||
| {t('Network-GoToApp', { network: supportedNetwork.name })} | ||
| </Button> | ||
| ) : null} | ||
| <Button onClick={disconnectWallet} className={classes.button}> | ||
| {t('Network-DisconnectWallet')} | ||
| </Button> | ||
| </div> | ||
| <div className={classes.note}>{t('Network-SwitchNote')}</div> | ||
| {networkSetupError ? <div className={classes.error}>{networkSetupError}</div> : ''} | ||
| </> | ||
| ); | ||
| } else if (!haveAddress) { | ||
| notice = ( | ||
| <> | ||
| <div className={classes.message}> | ||
| {t('Network-ConnectedTo', { network: targetNetworkFriendlyName })} | ||
| </div> | ||
| <div className={classes.error}>{t('Network-NoWalletAddress')}</div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| return notice ? <div className={classes.notice}>{notice}</div> : null; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.