(Feature) [xDai] - Cosmetic fixes

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 (
     <Col className={classes.container} middle="xs" start="xs">
       <Paragraph className={classes.text} size="xs">
-        {formattedNetwork}
+        {networkInfo.label}
       </Paragraph>
     </Col>
   )

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 (
     <>
       <Block className={classes.container}>
@@ -172,5 +193,3 @@ const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard,
     </>
   )
 }
-
-export default withStyles(styles as any)(UserDetails)

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
         </div>
       </Col>
       <Col className={classes.networkLabel} layout="column" start="sm">
-        <NetworkLabel network={network} />
+        <NetworkLabel />
       </Col>
     </>
   )

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 <ProviderDisconnected />
     }
 
-    return <ProviderAccessible connected={available} provider={provider} network={network} userAddress={userAddress} />
+    return <ProviderAccessible connected={available} provider={provider} userAddress={userAddress} />
   }
 
   const getProviderDetailsBased = () => {

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 (
     <div className={classes.wrapper}>
-      <EthHashInfo hash={safe.address} name={safe.name} showIdenticon shortenHash={4} explorerUrl={explorerUrl} />
+      <EthHashInfo hash={safe.address} name={safe.name} showIdenticon shortenHash={4} />
 
       <div className={classes.addressDetails}>
         <Text size="xl">{`${formatAmount(safe.ethBalance)} ETH`}</Text>

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',

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',

src/config/networks/network.d.ts

@@ -27,6 +27,7 @@ export type NetworkSettings = {
   backgroundColor: string,
   textColor: string,
   label: string,
+  isTestNet: boolean,
   nativeCoin: Token,
 }
 

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',

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',

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<NotificationId, Notification> = {
   },
 
   // 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: {

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) {