Add util for getting all networks info

src/components/AppLayout/Header/components/Layout.tsx

@@ -19,8 +19,7 @@ import { headerHeight, md, screenSm, sm } from 'src/theme/variables'
 import { useStateHandler } from 'src/logic/hooks/useStateHandler'
 
 import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
-import { NETWORK_NAMES } from 'src/utils/constants'
-import { getNetworkInfo } from 'src/config'
+import { getNetworkName, getNetworks } from 'src/config'
 import styled from 'styled-components'
 
 const StyledDivider = styled(Divider)`
@@ -85,8 +84,9 @@ const styles = () => ({
 const Layout = ({ classes, providerDetails, providerInfo }) => {
   const { clickAway, open, toggle } = useStateHandler()
   const { clickAway: clickAwayNetworks, open: openNetworks, toggle: toggleNetworks } = useStateHandler()
-  const networkInfo = getNetworkInfo()
-  console.log(networkInfo)
+  const networkName = getNetworkName() // Network name to be use for comparision
+  const networks = getNetworks()
+  console.log(networkName)
 
   return (
     <Row className={classes.summary}>
@@ -138,10 +138,10 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
                 <>
                   <ClickAwayListener mouseEvent="onClick" onClickAway={clickAwayNetworks} touchEvent={false}>
                     <List className={classes.network} component="div">
-                      {NETWORK_NAMES.map((network) => (
-                        <React.Fragment key={network.name}>
-                          <StyledLink href="#">
-                            <NetworkLabel networkName={network.name} />
+                      {networks.map((network) => (
+                        <React.Fragment key={network.id}>
+                          <StyledLink href={network.safeUrl}>
+                            <NetworkLabel networkName={network.label} />
                             <Icon type="check" size="md" color="primary" />
                           </StyledLink>
                           <StyledDivider />

src/config/index.ts

@@ -1,5 +1,4 @@
 import memoize from 'lodash.memoize'
-
 import networks from 'src/config/networks'
 import {
   EnvironmentSettings,
@@ -68,6 +67,16 @@ const configuration = (): NetworkSpecificConfiguration => {
 
 const getConfig: () => NetworkSpecificConfiguration = ensureOnce(configuration)
 
+export const getNetworks = (): { id: number; label: string; backgroundColor: string; safeUrl: string }[] => {
+  const { local, ...usefulNetworks } = networks
+  return Object.values(usefulNetworks).map((networkObj) => ({
+    id: networkObj.network.id,
+    label: networkObj.network.label,
+    backgroundColor: networkObj.network.backgroundColor,
+    safeUrl: networkObj.environment[getCurrentEnvironment()].safeUrl,
+  }))
+}
+
 export const getClientGatewayUrl = (): string => getConfig().clientGatewayUrl
 
 export const getTxServiceUrl = (): string => getConfig().txServiceUrl

src/config/networks/energy_web_chain.ts

@@ -6,6 +6,7 @@ import { EnvironmentSettings, ETHEREUM_NETWORK, NetworkConfig, WALLETS } from 's
 const baseConfig: EnvironmentSettings = {
   clientGatewayUrl: 'https://safe-client.ewc.gnosis.io/v1',
   txServiceUrl: 'https://safe-transaction.ewc.gnosis.io/api/v1',
+  safeUrl: 'https://ewc.gnosis-safe.io/app',
   safeAppsUrl: 'https://safe-apps-ewc.staging.gnosisdev.com',
   gasPriceOracle: {
     url: 'https://station.energyweb.org',

src/config/networks/local.ts

@@ -5,6 +5,7 @@ const baseConfig: EnvironmentSettings = {
   clientGatewayUrl: 'http://localhost:8001/v1',
   txServiceUrl: 'http://localhost:8000/api/v1',
   relayApiUrl: 'https://safe-relay.staging.gnosisdev.com/api/v1',
+  safeUrl: 'http://localhost:3000/app',
   safeAppsUrl: 'http://localhost:3002',
   gasPriceOracle: {
     url: 'https://ethgasstation.info/json/ethgasAPI.json',

src/config/networks/mainnet.ts

@@ -5,6 +5,7 @@ import { ETHGASSTATION_API_KEY } from 'src/utils/constants'
 const baseConfig: EnvironmentSettings = {
   clientGatewayUrl: 'https://safe-client.mainnet.staging.gnosisdev.com/v1',
   txServiceUrl: 'https://safe-transaction.mainnet.staging.gnosisdev.com/api/v1',
+  safeUrl: 'https://gnosis-safe.io/app',
   safeAppsUrl: 'https://safe-apps.dev.gnosisdev.com',
   gasPriceOracle: {
     url: 'https://ethgasstation.info/json/ethgasAPI.json',

src/config/networks/network.d.ts

@@ -88,6 +88,7 @@ export type EnvironmentSettings = GasPrice & {
   // TODO: Shall we keep a reference to the relay?
   relayApiUrl?: string
   safeAppsUrl: string
+  safeUrl: string
   rpcServiceUrl: string
   networkExplorerName: string
   networkExplorerUrl: string

src/config/networks/rinkeby.ts

@@ -5,6 +5,7 @@ import { ETHGASSTATION_API_KEY } from 'src/utils/constants'
 const baseConfig: EnvironmentSettings = {
   clientGatewayUrl: 'https://safe-client.rinkeby.staging.gnosisdev.com/v1',
   txServiceUrl: 'https://safe-transaction.rinkeby.staging.gnosisdev.com/api/v1',
+  safeUrl: 'https://rinkeby.gnosis-safe.io/app',
   safeAppsUrl: 'https://safe-apps.dev.gnosisdev.com',
   gasPriceOracle: {
     url: `https://ethgasstation.info/json/ethgasAPI.json?api-key=${ETHGASSTATION_API_KEY}`,

src/config/networks/volta.ts

@@ -4,6 +4,7 @@ import { EnvironmentSettings, ETHEREUM_NETWORK, NetworkConfig, WALLETS } from 's
 const baseConfig: EnvironmentSettings = {
   clientGatewayUrl: 'https://safe-client.volta.gnosis.io/v1',
   txServiceUrl: 'https://safe-transaction.volta.gnosis.io/api/v1',
+  safeUrl: 'https://volta.gnosis-safe.io/app',
   safeAppsUrl: 'https://safe-apps-volta.staging.gnosisdev.com',
   gasPriceOracle: {
     url: 'https://station.energyweb.org',

src/config/networks/xdai.ts

@@ -4,6 +4,7 @@ import { EnvironmentSettings, ETHEREUM_NETWORK, FEATURES, NetworkConfig, WALLETS
 const baseConfig: EnvironmentSettings = {
   clientGatewayUrl: 'https://safe-client.xdai.gnosis.io/v1',
   txServiceUrl: 'https://safe-transaction.xdai.gnosis.io/api/v1',
+  safeUrl: 'https://xdai.gnosis-safe.io/app',
   safeAppsUrl: 'https://safe-apps-xdai.staging.gnosisdev.com',
   gasPrice: 1e9,
   rpcServiceUrl: 'https://dai.poa.network/',
@@ -14,6 +15,9 @@ const baseConfig: EnvironmentSettings = {
 
 const xDai: NetworkConfig = {
   environment: {
+    dev: {
+      ...baseConfig,
+    },
     staging: {
       ...baseConfig,
     },

src/utils/constants.ts

@@ -35,13 +35,3 @@ export const SPENDING_LIMIT_MODULE_ADDRESS =
 export const KNOWN_MODULES = {
   [SPENDING_LIMIT_MODULE_ADDRESS]: 'Spending limit',
 }
-export const NETWORK_NAMES = [
-  { name: 'Ethereum', url: 'https://gnosis-safe.io/app' },
-  { name: 'xDai', url: 'https://xdai.gnosis-safe.io/app' },
-  { name: 'Polygon', url: 'https://polygon.gnosis-safe.io/app' },
-  { name: 'BSC', url: 'https://bsc.gnosis-safe.io/app' },
-  { name: 'Arbitrium', url: 'https://arbitrum.gnosis-safe.io/app' },
-  { name: 'EWC', url: 'https://ewc.gnosis-safe.io/app' },
-  { name: 'Rinkeby', url: 'https://rinkeby.gnosis-safe.io/app' },
-  { name: 'Volta', url: 'https://volta.gnosis-safe.io/app' },
-]