From 02901c40e28f1def04ebe78f96144760a90787ba Mon Sep 17 00:00:00 2001
From: Mati Dastugue <mdastugu@amazon.com>
Date: Tue, 1 Jun 2021 10:56:47 -0300
Subject: [PATCH] Add network info

---
 .../AppLayout/Header/components/Layout.tsx    | 22 +++++++++----------
 src/utils/constants.ts                        | 11 +++++++++-
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx
index 01c7a978..dd247b24 100644
--- a/src/components/AppLayout/Header/components/Layout.tsx
+++ b/src/components/AppLayout/Header/components/Layout.tsx
@@ -19,7 +19,8 @@ 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 { NETWORKSNAMES } from 'src/utils/constants'
+import { NETWORK_NAMES } from 'src/utils/constants'
+import { getNetworkInfo } from 'src/config'
 
 const styles = () => ({
   root: {
@@ -69,16 +70,8 @@ const styles = () => ({
 const Layout = ({ classes, providerDetails, providerInfo }) => {
   const { clickAway, open, toggle } = useStateHandler()
   const { clickAway: clickAwayNetworks, open: openNetworks, toggle: toggleNetworks } = useStateHandler()
-
-  const networkList = NETWORKSNAMES.map((network) => {
-    return (
-      <>
-        <NetworkLabel networkName={network} />
-        <Divider />
-      </>
-    )
-  })
-
+  const networkInfo = getNetworkInfo()
+  console.log(networkInfo)
   return (
     <Row className={classes.summary}>
       <Col className={classes.logo} middle="xs" start="xs">
@@ -129,7 +122,12 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
                 <>
                   <ClickAwayListener mouseEvent="onClick" onClickAway={clickAwayNetworks} touchEvent={false}>
                     <List className={classes.network} component="div">
-                      {networkList}
+                      {NETWORK_NAMES.map((network) => (
+                        <React.Fragment key={network.name}>
+                          <NetworkLabel networkName={network.name} />
+                          <Divider />
+                        </React.Fragment>
+                      ))}
                     </List>
                   </ClickAwayListener>
                 </>
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index c903a831..83f31961 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -34,4 +34,13 @@ export const SPENDING_LIMIT_MODULE_ADDRESS =
 export const KNOWN_MODULES = {
   [SPENDING_LIMIT_MODULE_ADDRESS]: 'Spending limit',
 }
-export const NETWORKSNAMES = ['Ethereum', 'xDai', 'Polygon', 'BSC', 'Arbitrium', 'EWC', 'Rinkeby', 'Volta']
+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' },
+]