Replace xDai name from UserDetailsTable when no orders

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

@@ -2,6 +2,7 @@ import React, { useCallback, useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
+import { getNetworkFromId } from '@gnosis.pm/dex-js'
 import { Network } from 'types'
 import { NETWORK_ID_SEARCH_LIST } from 'apps/explorer/const'
 import { BlockchainNetwork } from './context/OrdersTableContext'
@@ -43,7 +44,7 @@ const Wrapper = styled.div`
   }
 `
 interface OrdersInNetwork {
-  network: string
+  network: number
 }
 
 interface ResultSeachInAnotherNetwork {
@@ -57,6 +58,11 @@ type EmptyMessageProps = ResultSeachInAnotherNetwork & {
   ownerAddress: string
 }
 
+const _getNetworkFromId = (networkId: number): string => {
+  const networkName = getNetworkFromId(networkId)
+  return networkName === 'xDai' ? 'Gnosis Chain' : networkName
+}
+
 export const EmptyOrdersMessage = ({
   isLoading,
   networkId,
@@ -77,7 +83,7 @@ export const EmptyOrdersMessage = ({
       ) : (
         <>
           <p>
-            No orders found on <strong>{Network[networkId]}</strong>.
+            No orders found on <strong>{_getNetworkFromId(networkId)}</strong>.
           </p>
           <section>
             {' '}
@@ -87,10 +93,10 @@ export const EmptyOrdersMessage = ({
                 {ordersInNetworks.map((e) => (
                   <li key={e.network}>
                     <Link
-                      to={`/${e.network.toLowerCase()}/address/${ownerAddress}`}
+                      to={`/${_getNetworkFromId(e.network).toLowerCase().replace(/\s+/g, '')}/address/${ownerAddress}`}
                       onClick={(): void => setLoadingState(true)}
                     >
-                      {e.network}
+                      {_getNetworkFromId(e.network)}
                     </Link>
                   </li>
                 ))}
@@ -124,7 +130,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)