Fix Wrong Wallet Network Label (#1163)

* Fix network label

* rename component

* use interfaceNetwork as a default parameter

Co-authored-by: Mati Dastugue <mdastugu@amazon.com>
Co-authored-by: Mikhail <mmvsha73@gmail.com>

src/components/Header/components/NetworkLabel.tsx

@@ -6,8 +6,8 @@ import Paragraph from 'src/components/layout/Paragraph'
 import { getNetwork } from 'src/config'
 import { border, md, screenSm, sm, xs } from 'src/theme/variables'
 
-const network = getNetwork()
-const formattedNetwork = network[0].toUpperCase() + network.substring(1).toLowerCase()
+const interfaceNetwork = getNetwork()
+const formatNetwork = (network: string): string => network[0].toUpperCase() + network.substring(1).toLowerCase()
 
 const useStyles = makeStyles({
   container: {
@@ -31,8 +31,13 @@ const useStyles = makeStyles({
   },
 })
 
-const EarlyAccessLabel = () => {
+interface NetworkLabelProps {
+  network?: string
+}
+
+const NetworkLabel = ({ network = interfaceNetwork }: NetworkLabelProps): React.ReactElement => {
   const classes = useStyles()
+  const formattedNetwork = formatNetwork(network)
 
   return (
     <Col className={classes.container} middle="xs" start="xs">
@@ -43,4 +48,4 @@ const EarlyAccessLabel = () => {
   )
 }
 
-export default EarlyAccessLabel
+export default NetworkLabel

src/components/Header/components/ProviderInfo/ProviderAccessible.tsx

@@ -63,10 +63,11 @@ const useStyles = makeStyles({
 interface ProviderInfoProps {
   connected: boolean
   provider: string
+  network: string
   userAddress: string
 }
 
-const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps): React.ReactElement => {
+const ProviderInfo = ({ connected, provider, userAddress, network }: ProviderInfoProps): React.ReactElement => {
   const classes = useStyles()
   const cutAddress = connected ? shortVersionOf(userAddress, 4) : 'Connection Error'
   const color = connected ? 'primary' : 'warning'
@@ -95,7 +96,7 @@ const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps):
         </div>
       </Col>
       <Col className={classes.networkLabel} layout="column" start="sm">
-        <NetworkLabel />
+        <NetworkLabel network={network} />
       </Col>
     </>
   )

src/components/Header/index.tsx

@@ -55,13 +55,13 @@ class HeaderComponent extends React.PureComponent<any, any> {
 
   getProviderInfoBased = () => {
     const { hasError } = this.state
-    const { available, loaded, provider, userAddress } = this.props
+    const { available, loaded, provider, userAddress, network } = this.props
 
     if (hasError || !loaded) {
       return <ProviderDisconnected />
     }
 
-    return <ProviderAccessible connected={available} provider={provider} userAddress={userAddress} />
+    return <ProviderAccessible connected={available} provider={provider} network={network} userAddress={userAddress} />
   }
 
   getProviderDetailsBased = () => {