[Explorer] Custom hook for getting explorer data for BlockExplorerLink component when it is not a gpv2 tx

src/apps/explorer/components/TransactionsTableWidget/index.tsx

@@ -6,6 +6,7 @@ import RedirectToSearch from 'components/RedirectToSearch'
 import Spinner from 'components/common/Spinner'
 import { RedirectToNetwork, useNetworkId } from 'state/network'
 import { Order } from 'api/operator'
+import { useTxOrderExplorerLink } from 'hooks/useGetOrders'
 import { TransactionsTableWithData } from 'apps/explorer/components/TransactionsTableWidget/TransactionsTableWithData'
 import { TabItemInterface } from 'components/common/Tabs/Tabs'
 import ExplorerTabs from '../common/ExplorerTabs/ExplorerTab'
@@ -43,6 +44,8 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
   const networkId = useNetworkId() || undefined
   const [redirectTo, setRedirectTo] = useState(false)
   const txHashParams = { networkId, txHash }
+  const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, orders)
+
   // Avoid redirecting until another network is searched again
   useEffect(() => {
     if (orders?.length || isTxLoading) return
@@ -58,7 +61,9 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
     return <RedirectToNetwork networkId={errorTxPresentInNetworkId} />
   }
   if (redirectTo) {
-    return <RedirectToSearch from="tx" />
+    return (
+      <RedirectToSearch data={Object.keys(notGpv2ExplorerData).length === 0 ? null : notGpv2ExplorerData} from="tx" />
+    )
   }
 
   if (!orders?.length) {

src/components/RedirectToSearch.tsx

@@ -4,9 +4,10 @@ import { Redirect } from 'react-router-dom'
 
 interface RedirectToSearchParams {
   from: string
+  data?: unknown
 }
 
-const RedirectToSearch: React.FC<RedirectToSearchParams> = ({ from }) => {
+const RedirectToSearch: React.FC<RedirectToSearchParams> = ({ from, data }) => {
   const prefix = usePathPrefix() || ''
   const prefixPath = prefix ? `/${prefix}` : ''
   const suffix = usePathSuffix() || ''
@@ -15,7 +16,7 @@ const RedirectToSearch: React.FC<RedirectToSearchParams> = ({ from }) => {
   const newPath =
     pathMatchArray && pathMatchArray.length > 0 ? `${prefixPath}/search${pathMatchArray[1]}` : `${prefixPath}${suffix}`
 
-  return <Redirect push={false} to={{ pathname: newPath, state: { referrer: from } }} />
+  return <Redirect push={false} to={{ pathname: newPath, state: { referrer: from, data } }} />
 }
 
 export default RedirectToSearch

src/components/orders/OrderNotFound/index.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import { Search } from 'apps/explorer/components/common/Search'
 import SupportIcon from 'assets/img/support.png'
 import { MEDIA } from 'const'
+import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 
 const Title = styled.h1`
   margin: 0.55rem 0 2.5rem;
@@ -34,6 +35,13 @@ const SearchSection = styled.div`
   background-color: ${({ theme }): string => theme.bg2};
 `
 
+const LinkData = styled.p`
+  font-size: 1.6rem;
+  @media ${MEDIA.mobile} {
+    line-height: 1.5;
+  }
+`
+
 const SearchContent = styled.div`
   display: flex;
   flex-flow: row;
@@ -72,14 +80,15 @@ const Support = styled.a`
 `
 interface LocationState {
   referrer: string
+  data: unknown
 }
 export const OrderAddressNotFound: React.FC = (): JSX.Element => {
   const { searchString } = useParams<{ searchString: string }>()
   const location = useLocation<LocationState>()
   const history = useHistory()
-  const { referrer } = location.state || { referrer: null }
+  const { referrer, data } = location.state || { referrer: null, data: null }
   const wasRedirected = referrer ? true : false
-
+  const showLinkData = referrer === 'tx' && data
   // used after refresh by remove referrer state if was redirected
   useEffect(() => {
     window.addEventListener('beforeunload', () => {
@@ -118,6 +127,11 @@ export const OrderAddressNotFound: React.FC = (): JSX.Element => {
           </SearchContent>
         </SearchSection>
       </Content>
+      {showLinkData && (
+        <LinkData>
+          This is not a CowProtocol transaction. See it in the <BlockExplorerLink {...(data as never)} />
+        </LinkData>
+      )}
     </>
   )
 }

src/hooks/useGetOrders.tsx

@@ -2,11 +2,14 @@ import { useState, useEffect, useCallback } from 'react'
 
 import { Network } from 'types'
 import { useMultipleErc20 } from 'hooks/useErc20'
+import { updateWeb3Provider } from 'api/web3'
+import { web3 } from 'apps/explorer/api'
 import { getAccountOrders, getTxOrders, Order } from 'api/operator'
 import { GetTxOrdersParams, RawOrder } from 'api/operator/types'
 import { useNetworkId } from 'state/network'
 import { transformOrder } from 'utils'
-import { ORDERS_QUERY_INTERVAL } from 'apps/explorer/const'
+import { ORDERS_QUERY_INTERVAL, NETWORK_ID_SEARCH_LIST } from 'apps/explorer/const'
+import { Props as ExplorerLinkProps } from 'components/common/BlockExplorerLink'
 import {
   GetOrderResult,
   MultipleOrders,
@@ -149,6 +152,43 @@ export function useGetTxOrders(txHash: string): GetTxOrdersResult {
   return { orders, error, isLoading: isLoading || areErc20Loading, errorTxPresentInNetworkId }
 }
 
+export function useTxOrderExplorerLink(
+  txHash: string,
+  orders: Order[] | undefined,
+): ExplorerLinkProps | Record<string, unknown> {
+  const networkId = useNetworkId() || undefined
+  const [explorerLink, setExplorerLink] = useState<ExplorerLinkProps | Record<string, unknown>>({})
+
+  useEffect(() => {
+    if (!networkId) {
+      return
+    }
+
+    if (!orders?.length) {
+      for (const network of NETWORK_ID_SEARCH_LIST) {
+        //update provider to find tx in network
+        updateWeb3Provider(web3, network)
+        web3.eth.getTransaction(txHash).then((tx) => {
+          if (tx) {
+            setExplorerLink({
+              type: 'tx',
+              networkId: network,
+              identifier: txHash,
+              showLogo: true,
+              label: network === Network.xDAI ? 'Blockscout' : 'Etherscan',
+            })
+          }
+        })
+        if (Object.keys(explorerLink).length > 0) break
+      }
+      // reset provider
+      updateWeb3Provider(web3, networkId)
+    }
+  }, [explorerLink, networkId, orders, txHash])
+
+  return explorerLink
+}
+
 export function useGetAccountOrders(
   ownerAddress: string,
   limit = 1000,