917 rename xdai to gc (#918)

# Summary

Closes #917 

- [x] Replace **XDAI** to **GNOSIS CHAIN** on Header Logo
- [x] Substitute `/xdai/...` to `/gc/...` on URL
- [x] Replace **xDai** name from `UserDetailsTable` when no orders and found on other networks

## To Test

1. Header Logo
  Go to https://pr918--gpui.review.gnosisdev.com/gc and verify Header
2. Substitute `xdai` for `gc`   
  Try to use `xdai` URL with https://pr918--gpui.review.gnosisdev.com/xdai
3. Replace **xDai** from `UserDetailsTable`
  Go to UserDetails with address on `mainnet` [0xFF714b8b0e2700303eC912BD40496C3997ceEa2b](https://pr918--gpui.review.gnosisdev.com/address/0xFF714b8b0e2700303eC912BD40496C3997ceEa2b)

src/apps/explorer/ExplorerApp.tsx

@@ -12,7 +12,7 @@ import { GenericLayout } from 'components/layout'
 import { Header } from './layout/Header'
 import { media } from 'theme/styles/media'
 
-import { NetworkUpdater, RedirectMainnet } from 'state/network'
+import { NetworkUpdater, RedirectMainnet, RedirectXdai } from 'state/network'
 import { initAnalytics } from 'api/analytics'
 import RouteAnalytics from 'components/analytics/RouteAnalytics'
 import NetworkAnalytics from 'components/analytics/NetworkAnalytics'
@@ -167,7 +167,8 @@ export const ExplorerApp: React.FC = () => {
         <StateUpdaters />
         <Switch>
           <Route path="/mainnet" component={RedirectMainnet} />
-          <Route path={['/xdai', '/rinkeby', '/']} component={AppContent} />
+          <Route path="/xdai" component={RedirectXdai} />
+          <Route path={['/gc', '/rinkeby', '/']} component={AppContent} />
         </Switch>
       </Router>
       {process.env.NODE_ENV === 'development' && <Console />}

src/apps/explorer/components/OrdersTableWidget/useSearchInAnotherNetwork.tsx

@@ -10,6 +10,8 @@ import { Order, getAccountOrders } from 'api/operator'
 import Spinner from 'components/common/Spinner'
 import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 import { MEDIA } from 'const'
+import { PREFIX_BY_NETWORK_ID } from 'state/network'
+import { networkOptions } from 'components/NetworkSelector'
 
 const Wrapper = styled.div`
   display: flex;
@@ -50,7 +52,7 @@ const StyledBlockExplorerLink = styled(BlockExplorerLink)`
   }
 `
 interface OrdersInNetwork {
-  network: string
+  network: number
 }
 
 interface ResultSeachInAnotherNetwork {
@@ -64,6 +66,10 @@ type EmptyMessageProps = ResultSeachInAnotherNetwork & {
   ownerAddress: string
 }
 
+const _findNetworkName = (networkId: number): string => {
+  return networkOptions.find((e) => e.id === networkId)?.name || 'Unknown network'
+}
+
 export const EmptyOrdersMessage = ({
   isLoading,
   networkId,
@@ -84,7 +90,7 @@ export const EmptyOrdersMessage = ({
       ) : (
         <>
           <p>
-            No orders found on <strong>{Network[networkId]}</strong> for:{' '}
+            No orders found on <strong>{_findNetworkName(networkId)}</strong> for:{' '}
             <StyledBlockExplorerLink
               identifier={ownerAddress}
               type="address"
@@ -100,10 +106,10 @@ export const EmptyOrdersMessage = ({
                 {ordersInNetworks.map((e) => (
                   <li key={e.network}>
                     <Link
-                      to={`/${e.network.toLowerCase()}/address/${ownerAddress}`}
+                      to={`/${PREFIX_BY_NETWORK_ID.get(e.network)}/address/${ownerAddress}`}
                       onClick={(): void => setLoadingState(true)}
                     >
-                      {e.network}
+                      {_findNetworkName(e.network)}
                     </Link>
                   </li>
                 ))}
@@ -137,7 +143,7 @@ export const useSearchInAnotherNetwork = (
           .then((response) => {
             if (!response.length) return
 
-            return { network: Network[network] }
+            return { network }
           })
           .catch((e) => {
             console.error(`Failed to fetch order in ${Network[network]}`, e)

src/apps/explorer/layout/Header.tsx

@@ -3,8 +3,7 @@ import React from 'react'
 import { Navigation } from 'components/layout/GenericLayout/Navigation'
 import { Header as GenericHeader } from 'components/layout/GenericLayout/Header'
 import { NetworkSelector } from 'components/NetworkSelector'
-import { getNetworkFromId } from '@gnosis.pm/dex-js'
-import { useNetworkId } from 'state/network'
+import { PREFIX_BY_NETWORK_ID, useNetworkId } from 'state/network'
 import styled from 'styled-components'
 
 const Logo = styled.span`
@@ -36,10 +35,10 @@ export const Header: React.FC = () => {
     return null
   }
 
-  const network = networkId !== 1 ? getNetworkFromId(networkId).toLowerCase() : null
+  const prefixNetwork = PREFIX_BY_NETWORK_ID.get(networkId)
 
   return (
-    <GenericHeader logoAlt="Gnosis Protocol" linkTo={`/${network || ''}`} label={<Logo>Gnosis Protocol</Logo>}>
+    <GenericHeader logoAlt="Gnosis Protocol" linkTo={`/${prefixNetwork || ''}`} label={<Logo>Gnosis Protocol</Logo>}>
       <Navigation>
         <NetworkSelector networkId={networkId} />
         {/*      

src/components/NetworkSelector/NetworkSelector.styled.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { COLOURS } from 'styles'
 
-const { fadedGreyishWhiteOpacity, white } = COLOURS
+const { fadedGreyishWhiteOpacity, white, hippieBlue } = COLOURS
 
 export const SelectorContainer = styled.div`
   display: flex;
@@ -67,8 +67,8 @@ export const Option = styled.div`
     &.rinkeby {
       background: ${({ theme }): string => theme.yellow4};
     }
-    &.xdai {
-      background: ${({ theme }): string => theme.orange1};
+    &.gnosischain {
+      background: ${(): string => hippieBlue};
     }
     &.ethereum {
       background: ${({ theme }): string => theme.blue4};
@@ -97,9 +97,9 @@ export const NetworkLabel = styled.span`
     color: ${({ theme }): string => theme.textSecondary1};
   }
 
-  &.xdai {
-    background: ${({ theme }): string => theme.orangeOpacity};
-    color: ${({ theme }): string => theme.orange};
+  &.gnosischain {
+    background: ${(): string => `rgb(72 169 166 / 25%);`};
+    color: ${(): string => hippieBlue};
   }
 `
 

src/components/NetworkSelector/index.tsx

@@ -6,6 +6,7 @@ import { SelectorContainer, OptionsContainer, Option, NetworkLabel, StyledFAIcon
 import { replaceURL } from 'utils/url'
 import { NO_REDIRECT_HOME_ROUTES } from 'const'
 import { Network } from 'types'
+import { cleanNetworkName } from 'utils'
 
 type networkSelectorProps = {
   networkId: number
@@ -17,16 +18,16 @@ type NetworkOptions = {
   url: string
 }
 
-const networkOptions: NetworkOptions[] = [
+export const networkOptions: NetworkOptions[] = [
   {
     id: Network.Mainnet,
     name: 'Ethereum',
     url: '',
   },
   {
     id: Network.xDAI,
-    name: 'xDAI',
-    url: 'xdai',
+    name: 'Gnosis Chain',
+    url: 'gc',
   },
   {
     id: Network.Rinkeby,
@@ -70,13 +71,13 @@ export const NetworkSelector: React.FC<networkSelectorProps> = ({ networkId }) =
   }
   return (
     <SelectorContainer ref={selectContainer} onClick={(): void => setOpen(!open)}>
-      <NetworkLabel className={name}>{name}</NetworkLabel>
+      <NetworkLabel className={cleanNetworkName(name)}>{name}</NetworkLabel>
       <span className={`arrow ${open && 'open'}`} />
       {open && (
         <OptionsContainer width={selectContainer.current?.offsetWidth || 0}>
           {networkOptions.map((network) => (
             <Option onClick={(): void => redirectToNetwork(network.url, networkId)} key={network.id}>
-              <div className={`dot ${network.name.toLowerCase()} `} />
+              <div className={`dot ${cleanNetworkName(network.name)} `} />
               <div className={`name ${network.id === networkId && 'selected'}`}>{network.name}</div>
               {network.id === networkId && <StyledFAIcon icon={faCheck} />}
             </Option>

src/state/network/updater.tsx

@@ -12,10 +12,10 @@ import { web3 } from 'apps/explorer/api'
 const MAINNET_PREFIX = ''
 const NETWORK_PREFIXES_RAW: [Network, string][] = [
   [Network.Mainnet, ''],
-  [Network.xDAI, 'xdai'],
+  [Network.xDAI, 'gc'],
   [Network.Rinkeby, 'rinkeby'],
 ]
-const PREFIX_BY_NETWORK_ID: Map<Network, string> = new Map(NETWORK_PREFIXES_RAW)
+export const PREFIX_BY_NETWORK_ID: Map<Network, string> = new Map(NETWORK_PREFIXES_RAW)
 const NETWORK_ID_BY_PREFIX: Map<string, Network> = new Map(NETWORK_PREFIXES_RAW.map(([key, value]) => [value, key]))
 
 function getNetworkId(network = MAINNET_PREFIX): Network {
@@ -29,13 +29,13 @@ function getNetworkPrefix(network: Network): string {
 }
 
 /**
- * Decompose URL pathname like /xdai/orders/123
+ * Decompose URL pathname like /gc/orders/123
  *
- * @returns ['xdai', 'orders/123']
+ * @returns ['gc', 'orders/123']
  */
 export const useDecomposedPath = (): [string, string] | [] => {
   const { pathname } = useLocation()
-  const pathMatchArray = pathname.match('/(rinkeby|xdai|mainnet)?/?(.*)')
+  const pathMatchArray = pathname.match('/(rinkeby|xdai|mainnet|gc)?/?(.*)')
 
   return pathMatchArray == null ? [] : [pathMatchArray[1], pathMatchArray[2]]
 }
@@ -59,12 +59,24 @@ export const RedirectToNetwork = (props: { networkId: Network }): JSX.Element |
   return <Redirect push={false} to={newPath} />
 }
 
+/** Replace Network name in URL from X to Y */
+export const SubstituteNetworkName = (from: string, toNetworkName = ''): string => {
+  const { pathname } = useLocation()
+
+  const pathMatchArray = pathname.match(`/${from}(.*)`)
+  return pathMatchArray && pathMatchArray.length > 0 ? `${toNetworkName}${pathMatchArray[1]}` : '/'
+}
+
 /** Redirects to the canonnical URL for mainnet */
 export const RedirectMainnet = (): JSX.Element => {
-  const { pathname } = useLocation()
+  const newPath = SubstituteNetworkName('mainnet')
+
+  return <Redirect push={false} to={newPath} />
+}
 
-  const pathMatchArray = pathname.match('/mainnet(.*)')
-  const newPath = pathMatchArray && pathMatchArray.length > 0 ? pathMatchArray[1] : '/'
+/** Redirects to the xDai to the GnosisChain new name */
+export const RedirectXdai = (): JSX.Element => {
+  const newPath = SubstituteNetworkName('xdai', '/gc')
 
   return <Redirect push={false} to={newPath} />
 }
@@ -77,7 +89,7 @@ export const NetworkUpdater: React.FC = () => {
   const location = useLocation()
 
   useEffect(() => {
-    const networkMatchArray = location.pathname.match('^/(rinkeby|xdai)')
+    const networkMatchArray = location.pathname.match('^/(rinkeby|gc)')
     const network = networkMatchArray && networkMatchArray.length > 0 ? networkMatchArray[1] : undefined
     const networkId = getNetworkId(network)
 

src/styles/colours.ts

@@ -3,6 +3,7 @@ export const COLOURS = {
   whiteDark: '#e9e9f0',
   blue: '#3F77FF',
   blueDark: '#185afb',
+  hippieBlue: '#48A9A6',
   purple: '#8958FF',
   bgLight: '#edf2f7',
   bgDark: 'linear-gradient(0deg, #21222E 0.05%, #2C2D3F 100%)',

src/utils/miscellaneous.ts

@@ -1,6 +1,7 @@
 import BN from 'bn.js'
 import BigNumber from 'bignumber.js'
 import Web3 from 'web3'
+import { TEN, ZERO } from '@gnosis.pm/dex-js'
 
 const toChecksumAddress = Web3.utils.toChecksumAddress
 
@@ -9,7 +10,6 @@ import { AssertionError } from 'assert'
 import { AuctionElement, Trade, Order } from 'api/exchange/ExchangeApi'
 import { batchIdToDate } from './time'
 import { ORDER_FILLED_FACTOR, MINIMUM_ALLOWANCE_DECIMALS, DEFAULT_TIMEOUT, NATIVE_TOKEN_ADDRESS } from 'const'
-import { TEN, ZERO } from '@gnosis.pm/dex-js'
 
 export function assertNonNull<T>(val: T, message: string): asserts val is NonNullable<T> {
   if (val === undefined || val === null) {
@@ -280,3 +280,10 @@ export const isAnAddressAccount = (text: string): boolean => {
  * @returns true if valid or false if not
  */
 export const isEns = (text: string): boolean => text.match(/[a-zA-Z0-9]+\.[a-zA-Z]+$/)?.input !== undefined
+
+/** Convert string to lowercase and remove whitespace */
+export function cleanNetworkName(networkName: string | undefined): string {
+  if (!networkName) return ''
+
+  return networkName.replace(/\s+/g, '').toLowerCase()
+}

test/utils/miscellaneous.spec.ts

@@ -1,5 +1,5 @@
 import { tokenList } from '../data'
-import { getToken, isAnAddressAccount, isAnOrderId, isEns } from 'utils'
+import { cleanNetworkName, getToken, isAnAddressAccount, isAnOrderId, isEns } from 'utils'
 import BN from 'bn.js'
 import { pathAccordingTo } from 'hooks/useSearchSubmit'
 
@@ -156,3 +156,20 @@ describe('isEns', () => {
     expect(result).toBe(true)
   })
 })
+
+describe('cleanNetworkName', () => {
+  it('should return empty string for undefined input', () => {
+    const text = undefined
+
+    const result = cleanNetworkName(text)
+
+    expect(result).toBe('')
+  })
+  it('should return lowercase withouth white space', () => {
+    const text = 'Gnosis Chain'
+
+    const result = cleanNetworkName(text)
+
+    expect(result).toBe('gnosischain')
+  })
+})