Adding LinkWithPrefixNetwork

src/components/common/LinkWithPrefixNetwork/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Link, LinkProps } from 'react-router-dom'
+
+import { usePathPrefix } from 'state/network'
+
+export function LinkWithPrefixNetwork(props: LinkProps): JSX.Element {
+  const { to, children, ...otherParams } = props
+  const prefix = usePathPrefix()
+  const _to = prefix ? `/${prefix}${to}` : to
+
+  return (
+    <Link to={_to} {...otherParams}>
+      {children}
+    </Link>
+  )
+}

src/components/orders/DetailsTable/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
 import { media } from 'theme/styles/media'
-import { Link } from 'react-router-dom'
 
 import { Order } from 'api/operator'
 
@@ -22,6 +21,7 @@ import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
 import { StatusLabel } from 'components/orders/StatusLabel'
 import { GasFeeDisplay } from 'components/orders/GasFeeDisplay'
 import { triggerEvent } from 'api/analytics'
+import { LinkWithPrefixNetwork } from 'components/common/LinkWithPrefixNetwork'
 
 const Table = styled(SimpleTable)`
   border: 0.1rem solid ${({ theme }): string => theme.borderPrimary};
@@ -144,7 +144,7 @@ export function DetailsTable(props: Props): JSX.Element | null {
               <RowWithCopyButton
                 textToCopy={owner}
                 onCopy={(): void => onCopy('ownerAddress')}
-                contentsToDisplay={<Link to={`/address/${owner}`}>{owner}</Link>}
+                contentsToDisplay={<LinkWithPrefixNetwork to={`/address/${owner}`}>{owner}</LinkWithPrefixNetwork>}
               />
             </td>
           </tr>
@@ -156,7 +156,9 @@ export function DetailsTable(props: Props): JSX.Element | null {
               <RowWithCopyButton
                 textToCopy={receiver}
                 onCopy={(): void => onCopy('receiverAddress')}
-                contentsToDisplay={<Link to={`/address/${receiver}`}>{receiver}</Link>}
+                contentsToDisplay={
+                  <LinkWithPrefixNetwork to={`/address/${receiver}`}>{receiver}</LinkWithPrefixNetwork>
+                }
               />
             </td>
           </tr>

src/state/network/updater.tsx

@@ -28,19 +28,33 @@ function getNetworkPrefix(network: Network): string {
   return prefix || MAINNET_PREFIX
 }
 
-/** Redirects to the canonnical URL for mainnet */
-export const RedirectToNetwork = (props: { networkId: Network }): JSX.Element | null => {
-  const { networkId } = props
+/**
+ * Decompose URL pathname like /xdai/orders/123
+ *
+ * @returns ['xdai', 'orders/123']
+ */
+export const useDecomposedPath = (): [string, string] | [] => {
   const { pathname } = useLocation()
-  const prefix = getNetworkPrefix(networkId)
-
   const pathMatchArray = pathname.match('/(rinkeby|xdai|mainnet)?/?(.*)')
-  if (pathMatchArray == null) {
+
+  return pathMatchArray == null ? [] : [pathMatchArray[1], pathMatchArray[2]]
+}
+
+export const usePathPrefix = (): string | undefined => useDecomposedPath()[0]
+export const usePathSuffix = (): string | undefined => useDecomposedPath()[1]
+
+/** Redirects to the canonnical URL for mainnet */
+export const RedirectToNetwork = (props: { networkId: Network }): JSX.Element | null => {
+  const pathnameSuffix = usePathSuffix()
+  if (pathnameSuffix === undefined) {
     return null
   }
 
+  const { networkId } = props
+  const prefix = getNetworkPrefix(networkId)
+
   const prefixPath = prefix ? `/${prefix}` : ''
-  const newPath = prefixPath + '/' + pathMatchArray[2]
+  const newPath = prefixPath + '/' + pathnameSuffix
 
   return <Redirect push={false} to={newPath} />
 }

test/hooks/useDecomposedPath.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+
+import { useDecomposedPath, usePathPrefix, usePathSuffix } from 'state/network'
+import { MemoryRouter } from 'react-router'
+
+interface Props {
+  children?: React.ReactNode
+  mockLocation: string
+}
+
+function wrapperMemoryRouter(props: Props): JSX.Element {
+  return (
+    <>
+      <MemoryRouter initialEntries={[props.mockLocation]}>{props.children}</MemoryRouter>
+    </>
+  )
+}
+
+describe('useDecomposedPath', () => {
+  it('get prefix network and suffix of pathname on react-router', () => {
+    // given
+    const networkPrefix = '/rinkeby'
+    const pathSuffix = '/address/123'
+    const mockLocation = networkPrefix + pathSuffix
+
+    //when
+    const { result } = renderHook(() => useDecomposedPath(), {
+      wrapper: ({ children }) => wrapperMemoryRouter({ children, mockLocation }),
+    })
+
+    expect(result.current[0]).toBe(networkPrefix.substr(1)) // rinkeby
+    expect(result.current[1]).toBe(pathSuffix.substr(1)) // addrres...
+  })
+
+  it('should return an empty array when the regex does not match', () => {
+    const mockLocation = 'badpathname'
+
+    //when
+    const { result } = renderHook(() => useDecomposedPath(), {
+      wrapper: ({ children }) => wrapperMemoryRouter({ children, mockLocation }),
+    })
+
+    expect(result.current).toEqual([])
+  })
+})
+
+describe('usePathPrefix', () => {
+  it('should return network prefix when it matches the regex', () => {
+    const networkPrefix = '/xdai'
+    const pathSuffix = '/address/123'
+    const mockLocation = networkPrefix + pathSuffix
+
+    const { result } = renderHook(() => usePathPrefix(), {
+      wrapper: ({ children }) => wrapperMemoryRouter({ children, mockLocation }),
+    })
+
+    expect(result.current).toBe(networkPrefix.substr(1))
+  })
+
+  it('should return undefined when it does not match regex', () => {
+    const mockLocation = '/address/123'
+
+    //when
+    const { result } = renderHook(() => usePathPrefix(), {
+      wrapper: ({ children }) => wrapperMemoryRouter({ children, mockLocation }),
+    })
+
+    expect(result.current).toBe(undefined)
+  })
+})
+
+describe('usePathSuffix', () => {
+  it('should return paht suffix', () => {
+    const networkPrefix = '/xdai'
+    const pathSuffix = '/address/123'
+    const mockLocation = networkPrefix + pathSuffix
+
+    const { result } = renderHook(() => usePathSuffix(), {
+      wrapper: ({ children }) => wrapperMemoryRouter({ children, mockLocation }),
+    })
+
+    expect(result.current).toBe(pathSuffix.substr(1))
+  })
+
+  it('should return undefined when it does not match regex', () => {
+    const mockLocation = '/xdai'
+
+    //when
+    const { result } = renderHook(() => usePathSuffix(), {
+      wrapper: ({ children }) => wrapperMemoryRouter({ children, mockLocation }),
+    })
+
+    expect(result.current).toBe('')
+  })
+})