diff --git a/src/components/AppLayout/Header/components/NetworkLabel.tsx b/src/components/AppLayout/Header/components/NetworkLabel.tsx index 8186a03cbe..edd88fe3a6 100644 --- a/src/components/AppLayout/Header/components/NetworkLabel.tsx +++ b/src/components/AppLayout/Header/components/NetworkLabel.tsx @@ -3,14 +3,9 @@ import * as React from 'react' import Col from 'src/components/layout/Col' import Paragraph from 'src/components/layout/Paragraph' -import { getNetworkId, getNetworkInfo } from 'src/config' -import { ETHEREUM_NETWORK } from 'src/config/networks/network.d' +import { getNetworkInfo } from 'src/config' import { border, md, screenSm, sm, xs, fontColor } from 'src/theme/variables' -const interfaceNetwork = getNetworkId() -const formatNetwork = (network: number): string => - ETHEREUM_NETWORK[network][0].toUpperCase() + ETHEREUM_NETWORK[network].substring(1).toLowerCase() - const networkInfo = getNetworkInfo() const useStyles = makeStyles({ @@ -36,18 +31,13 @@ const useStyles = makeStyles({ }, }) -interface NetworkLabelProps { - network?: number -} - -const NetworkLabel = ({ network = interfaceNetwork }: NetworkLabelProps): React.ReactElement => { +const NetworkLabel = (): React.ReactElement => { const classes = useStyles() - const formattedNetwork = formatNetwork(network) return ( - {formattedNetwork} + {networkInfo.label} ) diff --git a/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx b/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx index 272a6013dd..0f3ff77f0d 100644 --- a/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx +++ b/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx @@ -1,4 +1,4 @@ -import { withStyles } from '@material-ui/core/styles' +import { makeStyles } from '@material-ui/core/styles' import Dot from '@material-ui/icons/FiberManualRecord' import classNames from 'classnames' import * as React from 'react' @@ -17,10 +17,11 @@ import { ETHEREUM_NETWORK } from 'src/config/networks/network.d' import { getExplorerInfo } from 'src/config' import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing' import { CircleDot } from '../CircleDot' +import { createStyles } from '@material-ui/core' const walletIcon = require('../../assets/wallet.svg') -const styles = () => ({ +const styles = createStyles({ container: { padding: `${md} 12px`, display: 'flex', @@ -90,10 +91,30 @@ const styles = () => ({ }, }) -const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard, provider, userAddress }) => { +type Props = { + connected: boolean + network: ETHEREUM_NETWORK + onDisconnect: () => void + openDashboard?: (() => void | null) | boolean + provider?: string + userAddress: string +} + +const useStyles = makeStyles(styles) + +export const UserDetails = ({ + connected, + network, + onDisconnect, + openDashboard, + provider, + userAddress, +}: Props): React.ReactElement => { const status = connected ? 'Connected' : 'Connection error' const color = connected ? 'primary' : 'warning' const explorerUrl = getExplorerInfo(userAddress) + const classes = useStyles() + return ( <> @@ -172,5 +193,3 @@ const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard, ) } - -export default withStyles(styles as any)(UserDetails) diff --git a/src/components/AppLayout/Header/components/ProviderInfo/ProviderAccessible.tsx b/src/components/AppLayout/Header/components/ProviderInfo/ProviderAccessible.tsx index 675e352974..563c3abbb6 100644 --- a/src/components/AppLayout/Header/components/ProviderInfo/ProviderAccessible.tsx +++ b/src/components/AppLayout/Header/components/ProviderInfo/ProviderAccessible.tsx @@ -63,11 +63,10 @@ interface ProviderInfoProps { connected: boolean provider: string // TODO: [xDai] Review. This may cause some issues with EthHashInfo. - network: number userAddress: string } -const ProviderInfo = ({ connected, provider, userAddress, network }: ProviderInfoProps): React.ReactElement => { +const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps): React.ReactElement => { const classes = useStyles() const addressColor = connected ? 'text' : 'warning' return ( @@ -107,7 +106,7 @@ const ProviderInfo = ({ connected, provider, userAddress, network }: ProviderInf - + ) diff --git a/src/components/AppLayout/Header/index.tsx b/src/components/AppLayout/Header/index.tsx index 5636fbd6dc..6c2b8e4390 100644 --- a/src/components/AppLayout/Header/index.tsx +++ b/src/components/AppLayout/Header/index.tsx @@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux' import Layout from './components/Layout' import ConnectDetails from './components/ProviderDetails/ConnectDetails' -import UserDetails from './components/ProviderDetails/UserDetails' +import { UserDetails } from './components/ProviderDetails/UserDetails' import ProviderAccessible from './components/ProviderInfo/ProviderAccessible' import ProviderDisconnected from './components/ProviderInfo/ProviderDisconnected' import { @@ -54,7 +54,7 @@ const HeaderComponent = (): React.ReactElement => { return } - return + return } const getProviderDetailsBased = () => { diff --git a/src/components/SafeListSidebar/SafeList/AddresWrapper.tsx b/src/components/SafeListSidebar/SafeList/AddresWrapper.tsx index 2dda0e11aa..dac6c17a6d 100644 --- a/src/components/SafeListSidebar/SafeList/AddresWrapper.tsx +++ b/src/components/SafeListSidebar/SafeList/AddresWrapper.tsx @@ -5,7 +5,6 @@ import { formatAmount } from 'src/logic/tokens/utils/formatAmount' import { sameAddress } from 'src/logic/wallets/ethAddresses' import DefaultBadge from './DefaultBadge' import { SafeRecordProps } from 'src/logic/safe/store/models/safe' -import { getExplorerInfo } from 'src/config' import { DefaultSafe } from 'src/routes/safe/store/reducer/types/safe' import { SetDefaultSafe } from 'src/logic/safe/store/actions/setDefaultSafe' import { makeStyles } from '@material-ui/core/styles' @@ -52,10 +51,10 @@ type Props = { export const AddressWrapper = (props: Props): React.ReactElement => { const classes = useStyles() const { safe, defaultSafe, setDefaultSafe } = props - const explorerUrl = getExplorerInfo(safe.address) + return (
- +
{`${formatAmount(safe.ethBalance)} ETH`} diff --git a/src/config/networks/local.ts b/src/config/networks/local.ts index 0be103570d..ad51c88312 100644 --- a/src/config/networks/local.ts +++ b/src/config/networks/local.ts @@ -23,6 +23,7 @@ const local: NetworkConfig = { backgroundColor: '#E8673C', textColor: '#ffffff', label: 'LocalRPC', + isTestNet: true, nativeCoin: { address: '0x000', name: 'Ether', diff --git a/src/config/networks/mainnet.ts b/src/config/networks/mainnet.ts index 4876af22d3..89945ae6af 100644 --- a/src/config/networks/mainnet.ts +++ b/src/config/networks/mainnet.ts @@ -31,6 +31,7 @@ const mainnet: NetworkConfig = { backgroundColor: '#E8E7E6', textColor: '#001428', label: 'Mainnet', + isTestNet: false, nativeCoin: { address: '0x000', name: 'Ether', diff --git a/src/config/networks/network.d.ts b/src/config/networks/network.d.ts index 77345ea9e8..fbdebfca83 100644 --- a/src/config/networks/network.d.ts +++ b/src/config/networks/network.d.ts @@ -27,6 +27,7 @@ export type NetworkSettings = { backgroundColor: string, textColor: string, label: string, + isTestNet: boolean, nativeCoin: Token, } diff --git a/src/config/networks/rinkeby.ts b/src/config/networks/rinkeby.ts index 41e2977a4f..2f0650b0e3 100644 --- a/src/config/networks/rinkeby.ts +++ b/src/config/networks/rinkeby.ts @@ -31,6 +31,7 @@ const rinkeby: NetworkConfig = { backgroundColor: '#E8673C', textColor: '#ffffff', label: 'Rinkeby', + isTestNet: true, nativeCoin: { address: '0x000', name: 'Ether', diff --git a/src/config/networks/xdai.ts b/src/config/networks/xdai.ts index 86dd160429..4756b9c409 100644 --- a/src/config/networks/xdai.ts +++ b/src/config/networks/xdai.ts @@ -16,7 +16,8 @@ const xDai: NetworkConfig = { id: ETHEREUM_NETWORK.XDAI, backgroundColor: '#48A8A6', textColor: '#ffffff', - label: 'xDai STAKE', + label: 'xDai', + isTestNet: false, nativeCoin: { address: '0x000', name: 'xDai', diff --git a/src/logic/notifications/notificationTypes.ts b/src/logic/notifications/notificationTypes.ts index d1b1b90cd7..9765045660 100644 --- a/src/logic/notifications/notificationTypes.ts +++ b/src/logic/notifications/notificationTypes.ts @@ -45,7 +45,7 @@ const NOTIFICATION_IDS = { SETTINGS_CHANGE_EXECUTED_MSG: 'SETTINGS_CHANGE_EXECUTED_MSG', SETTINGS_CHANGE_EXECUTED_MORE_CONFIRMATIONS_MSG: 'SETTINGS_CHANGE_EXECUTED_MORE_CONFIRMATIONS_MSG', SETTINGS_CHANGE_FAILED_MSG: 'SETTINGS_CHANGE_FAILED_MSG', - RINKEBY_VERSION_MSG: 'RINKEBY_VERSION_MSG', + TESTNET_VERSION_MSG: 'TESTNET_VERSION_MSG', WRONG_NETWORK_MSG: 'WRONG_NETWORK_MSG', ADDRESS_BOOK_NEW_ENTRY_SUCCESS: 'ADDRESS_BOOK_NEW_ENTRY_SUCCESS', ADDRESS_BOOK_EDIT_ENTRY_SUCCESS: 'ADDRESS_BOOK_EDIT_ENTRY_SUCCESS', @@ -192,8 +192,8 @@ export const NOTIFICATIONS: Record = { }, // Network - RINKEBY_VERSION_MSG: { - message: "Rinkeby Version: Don't send Mainnet assets to this Safe", + TESTNET_VERSION_MSG: { + message: "Testnet Version: Don't send production assets to this Safe", options: { variant: WARNING, persist: true, preventDuplicate: true }, }, WRONG_NETWORK_MSG: { diff --git a/src/logic/wallets/store/actions/fetchProvider.ts b/src/logic/wallets/store/actions/fetchProvider.ts index c2907c67dc..79ce447960 100644 --- a/src/logic/wallets/store/actions/fetchProvider.ts +++ b/src/logic/wallets/store/actions/fetchProvider.ts @@ -2,10 +2,9 @@ import ReactGA from 'react-ga' import addProvider from './addProvider' -import { getNetworkId } from 'src/config' +import { getNetworkId, getNetworkInfo } from 'src/config' import { NOTIFICATIONS, enhanceSnackbarForAction } from 'src/logic/notifications' import enqueueSnackbar from 'src/logic/notifications/store/actions/enqueueSnackbar' -import { ETHEREUM_NETWORK } from 'src/config/networks/network.d' import { getProviderInfo, getWeb3 } from 'src/logic/wallets/getWeb3' import { makeProvider } from 'src/logic/wallets/store/model/provider' import { updateStoredTransactionsStatus } from 'src/logic/safe/store/actions/transactions/utils/transactionHelpers' @@ -29,8 +28,9 @@ const handleProviderNotification = (provider, dispatch) => { dispatch(enqueueSnackbar(NOTIFICATIONS.WRONG_NETWORK_MSG)) return } - if (ETHEREUM_NETWORK.RINKEBY === getNetworkId()) { - dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.RINKEBY_VERSION_MSG))) + + if (getNetworkInfo().isTestNet) { + dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.TESTNET_VERSION_MSG))) } if (available) {