From d0f468e5e739b17f5e016c52906bb16bc0a11ac6 Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Mon, 27 Dec 2021 14:26:05 -0300 Subject: [PATCH 01/11] Add hook for getting explorer URL in case it is not a gpv2 otherwise return undefined --- src/hooks/useGetOrders.tsx | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx index fef36216d..5c1120600 100644 --- a/src/hooks/useGetOrders.tsx +++ b/src/hooks/useGetOrders.tsx @@ -7,6 +7,7 @@ import { RawOrder } from 'api/operator/types' import { useNetworkId } from 'state/network' import { transformOrder } from 'utils' import { ORDERS_QUERY_INTERVAL } from 'apps/explorer/const' +import { Props as ExplorerLinkProps } from 'components/common/BlockExplorerLink' function isObjectEmpty(object: Record): boolean { // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars @@ -117,6 +118,42 @@ export function useGetTxOrders(txHash: string): Result { return { orders, error, isLoading } } +export function useTxOrderExplorerLink(txHash: string): ExplorerLinkProps | Record { + const networkId = useNetworkId() || undefined + const [isGPv2Tx, setGPv2Tx] = useState(false) + const [explorerLink, setExplorerLink] = useState({}) + + const fetchTxOrders = useCallback( + async (_txHash: string, networkId: Network): Promise => { + const { config: networkIdList } = CONFIG.exchangeContractConfig + const availableNetworks = new Set(networkIdList.map(({ networkId }) => networkId)) + + for (const network of availableNetworks) { + try { + const ordersFetched = await getTxOrders({ networkId: Number(network), txHash: _txHash }) + if (ordersFetched.length > 0) { + setGPv2Tx(true) + break + } + } catch (e) { + console.error(e) + } + } + if (!isGPv2Tx) setExplorerLink({ type: 'tx', networkId, identifier: txHash }) + }, + [isGPv2Tx, txHash], + ) + + useEffect(() => { + if (!networkId) { + return + } + + fetchTxOrders(txHash, networkId) + }, [fetchTxOrders, networkId, txHash]) + + return explorerLink +} export function useGetAccountOrders(ownerAddress: string, limit = 1000, offset = 0, pageIndex?: number): Result { const networkId = useNetworkId() || undefined const [isLoading, setIsLoading] = useState(false) From b601360e024f3f6125636ac086e0b4927310fbbc Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Tue, 4 Jan 2022 15:18:36 -0300 Subject: [PATCH 02/11] Move available networks outside the hook --- src/hooks/useGetOrders.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx index 5c1120600..b710fd8fa 100644 --- a/src/hooks/useGetOrders.tsx +++ b/src/hooks/useGetOrders.tsx @@ -122,13 +122,12 @@ export function useTxOrderExplorerLink(txHash: string): ExplorerLinkProps | Reco const networkId = useNetworkId() || undefined const [isGPv2Tx, setGPv2Tx] = useState(false) const [explorerLink, setExplorerLink] = useState({}) + const { config: networkIdList } = CONFIG.exchangeContractConfig + const availableNetworks = JSON.stringify(Array.from(new Set(networkIdList.map(({ networkId }) => networkId)))) const fetchTxOrders = useCallback( async (_txHash: string, networkId: Network): Promise => { - const { config: networkIdList } = CONFIG.exchangeContractConfig - const availableNetworks = new Set(networkIdList.map(({ networkId }) => networkId)) - - for (const network of availableNetworks) { + for (const network of JSON.parse(availableNetworks)) { try { const ordersFetched = await getTxOrders({ networkId: Number(network), txHash: _txHash }) if (ordersFetched.length > 0) { @@ -141,7 +140,7 @@ export function useTxOrderExplorerLink(txHash: string): ExplorerLinkProps | Reco } if (!isGPv2Tx) setExplorerLink({ type: 'tx', networkId, identifier: txHash }) }, - [isGPv2Tx, txHash], + [isGPv2Tx, txHash, availableNetworks], ) useEffect(() => { From 251dabed74032cf4d67f50e185e86e76a5f38616 Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Fri, 18 Feb 2022 16:48:49 -0300 Subject: [PATCH 03/11] Use hook and show link on not found page --- .../components/TransactionsTableWidget/index.tsx | 7 ++++++- src/components/RedirectToSearch.tsx | 5 +++-- src/components/orders/OrderNotFound/index.tsx | 11 +++++++++-- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/apps/explorer/components/TransactionsTableWidget/index.tsx b/src/apps/explorer/components/TransactionsTableWidget/index.tsx index 5302aec14..cb3acbb1a 100644 --- a/src/apps/explorer/components/TransactionsTableWidget/index.tsx +++ b/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 = ({ txHash }) => { const networkId = useNetworkId() || undefined const [redirectTo, setRedirectTo] = useState(false) const txHashParams = { networkId, txHash } + const notGpv2ExplorerData = useTxOrderExplorerLink(txHash) + // Avoid redirecting until another network is searched again useEffect(() => { if (orders?.length || isTxLoading) return @@ -58,7 +61,9 @@ export const TransactionsTableWidget: React.FC = ({ txHash }) => { return } if (redirectTo) { - return + return ( + + ) } if (!orders?.length) { diff --git a/src/components/RedirectToSearch.tsx b/src/components/RedirectToSearch.tsx index c864615f2..6e2b23005 100644 --- a/src/components/RedirectToSearch.tsx +++ b/src/components/RedirectToSearch.tsx @@ -4,9 +4,10 @@ import { Redirect } from 'react-router-dom' interface RedirectToSearchParams { from: string + data?: unknown } -const RedirectToSearch: React.FC = ({ from }) => { +const RedirectToSearch: React.FC = ({ from, data }) => { const prefix = usePathPrefix() || '' const prefixPath = prefix ? `/${prefix}` : '' const suffix = usePathSuffix() || '' @@ -15,7 +16,7 @@ const RedirectToSearch: React.FC = ({ from }) => { const newPath = pathMatchArray && pathMatchArray.length > 0 ? `${prefixPath}/search${pathMatchArray[1]}` : `${prefixPath}${suffix}` - return + return } export default RedirectToSearch diff --git a/src/components/orders/OrderNotFound/index.tsx b/src/components/orders/OrderNotFound/index.tsx index 9be60fb5b..1fff2914a 100644 --- a/src/components/orders/OrderNotFound/index.tsx +++ b/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; @@ -72,14 +73,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() 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', () => { @@ -103,6 +105,11 @@ export const OrderAddressNotFound: React.FC = (): JSX.Element => {

"{searchString}"

+ {showLinkData && ( +

+ This is not a CowProtocol transaction. See it in the +

+ )} ) : (

The search cannot be empty

From c5f4e96a61a57eedf8c292f42255e29bc91d243c Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Mon, 21 Feb 2022 16:52:21 -0300 Subject: [PATCH 04/11] Update hook in order to get correct network when it is from another one --- .../TransactionsTableWidget/index.tsx | 2 +- src/components/orders/OrderNotFound/index.tsx | 14 +++-- src/hooks/useGetOrders.tsx | 54 ++++++++++--------- 3 files changed, 39 insertions(+), 31 deletions(-) diff --git a/src/apps/explorer/components/TransactionsTableWidget/index.tsx b/src/apps/explorer/components/TransactionsTableWidget/index.tsx index cb3acbb1a..f04b4c701 100644 --- a/src/apps/explorer/components/TransactionsTableWidget/index.tsx +++ b/src/apps/explorer/components/TransactionsTableWidget/index.tsx @@ -44,7 +44,7 @@ export const TransactionsTableWidget: React.FC = ({ txHash }) => { const networkId = useNetworkId() || undefined const [redirectTo, setRedirectTo] = useState(false) const txHashParams = { networkId, txHash } - const notGpv2ExplorerData = useTxOrderExplorerLink(txHash) + const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, orders) // Avoid redirecting until another network is searched again useEffect(() => { diff --git a/src/components/orders/OrderNotFound/index.tsx b/src/components/orders/OrderNotFound/index.tsx index 1fff2914a..463edbc7a 100644 --- a/src/components/orders/OrderNotFound/index.tsx +++ b/src/components/orders/OrderNotFound/index.tsx @@ -35,6 +35,10 @@ const SearchSection = styled.div` background-color: ${({ theme }): string => theme.bg2}; ` +const LinkData = styled.p` + font-size: 1.6rem; +` + const SearchContent = styled.div` display: flex; flex-flow: row; @@ -105,11 +109,6 @@ export const OrderAddressNotFound: React.FC = (): JSX.Element => {

"{searchString}"

- {showLinkData && ( -

- This is not a CowProtocol transaction. See it in the -

- )} ) : (

The search cannot be empty

@@ -125,6 +124,11 @@ export const OrderAddressNotFound: React.FC = (): JSX.Element => { + {showLinkData && ( + + This is not a CowProtocol transaction. See it in the + + )} ) } diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx index a45c9f80d..8f60e541e 100644 --- a/src/hooks/useGetOrders.tsx +++ b/src/hooks/useGetOrders.tsx @@ -2,11 +2,13 @@ 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, @@ -150,37 +152,39 @@ export function useGetTxOrders(txHash: string): GetTxOrdersResult { return { orders, error, isLoading: isLoading || areErc20Loading, errorTxPresentInNetworkId } } -export function useTxOrderExplorerLink(txHash: string): ExplorerLinkProps | Record { +export function useTxOrderExplorerLink( + txHash: string, + orders: Order[] | undefined, +): ExplorerLinkProps | Record { const networkId = useNetworkId() || undefined - const [isGPv2Tx, setGPv2Tx] = useState(false) - const [explorerLink, setExplorerLink] = useState({}) - - const fetchTxOrders = useCallback( - async (_txHash: string, networkId: Network): Promise => { - try { - const { order: _orders, errorOrderPresentInNetworkId: errorTxPresentInNetworkIdRaw } = - await getTxOrderOnEveryNetwork(networkId, _txHash) - const ordersFetched = _orders || [] - - if (errorTxPresentInNetworkIdRaw) console.log({ _orders, errorTxPresentInNetworkIdRaw }) - - if (ordersFetched.length > 0) setGPv2Tx(true) - } catch (e) { - console.error('Failed to get orders', e) - } finally { - if (!isGPv2Tx) setExplorerLink({ type: 'tx', networkId, identifier: txHash }) - } - }, - [isGPv2Tx, txHash], - ) + const [explorerLink, setExplorerLink] = useState>({}) useEffect(() => { if (!networkId) { return } - fetchTxOrders(txHash, networkId) - }, [fetchTxOrders, networkId, txHash]) + 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 } From 09cee349d2efc8d065da3988200780546f9e49af Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Tue, 22 Feb 2022 16:00:17 -0300 Subject: [PATCH 05/11] Update styles --- src/components/orders/OrderNotFound/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/orders/OrderNotFound/index.tsx b/src/components/orders/OrderNotFound/index.tsx index 463edbc7a..cdcd6cfb7 100644 --- a/src/components/orders/OrderNotFound/index.tsx +++ b/src/components/orders/OrderNotFound/index.tsx @@ -37,6 +37,9 @@ const SearchSection = styled.div` const LinkData = styled.p` font-size: 1.6rem; + @media ${MEDIA.mobile} { + line-height: 1.5; + } ` const SearchContent = styled.div` From 1e4bb432c90d27f1d5a23b06dde34212b1235c5c Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Wed, 23 Feb 2022 18:59:27 -0300 Subject: [PATCH 06/11] Change text Co-authored-by: Leandro Boscariol --- src/components/orders/OrderNotFound/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/orders/OrderNotFound/index.tsx b/src/components/orders/OrderNotFound/index.tsx index cdcd6cfb7..070a0aa6f 100644 --- a/src/components/orders/OrderNotFound/index.tsx +++ b/src/components/orders/OrderNotFound/index.tsx @@ -129,7 +129,7 @@ export const OrderAddressNotFound: React.FC = (): JSX.Element => { {showLinkData && ( - This is not a CowProtocol transaction. See it in the + This is not a CowProtocol transaction. See it on )} From 9ee930be94e096b9e43ce28406caca44c198578d Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Wed, 23 Feb 2022 19:05:45 -0300 Subject: [PATCH 07/11] Show logo only for Etherscan links --- src/hooks/useGetOrders.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx index 8f60e541e..5105e2743 100644 --- a/src/hooks/useGetOrders.tsx +++ b/src/hooks/useGetOrders.tsx @@ -174,7 +174,7 @@ export function useTxOrderExplorerLink( type: 'tx', networkId: network, identifier: txHash, - showLogo: true, + showLogo: network !== Network.xDAI, label: network === Network.xDAI ? 'Blockscout' : 'Etherscan', }) } From 75b3af9030b45ed2e2a4a4dffe2b60e659c63f41 Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Thu, 24 Feb 2022 14:58:42 -0300 Subject: [PATCH 08/11] Show etherscan logo no matter the network --- src/hooks/useGetOrders.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx index 5105e2743..8f60e541e 100644 --- a/src/hooks/useGetOrders.tsx +++ b/src/hooks/useGetOrders.tsx @@ -174,7 +174,7 @@ export function useTxOrderExplorerLink( type: 'tx', networkId: network, identifier: txHash, - showLogo: network !== Network.xDAI, + showLogo: true, label: network === Network.xDAI ? 'Blockscout' : 'Etherscan', }) } From 8aa12647b39ac15bb8969b2d527e064a49249cc0 Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Thu, 24 Feb 2022 15:06:53 -0300 Subject: [PATCH 09/11] improve readability --- .../TransactionsTableWidget/index.tsx | 2 +- src/hooks/useGetOrders.tsx | 46 +++++++++---------- 2 files changed, 22 insertions(+), 26 deletions(-) diff --git a/src/apps/explorer/components/TransactionsTableWidget/index.tsx b/src/apps/explorer/components/TransactionsTableWidget/index.tsx index f04b4c701..5cf98e55d 100644 --- a/src/apps/explorer/components/TransactionsTableWidget/index.tsx +++ b/src/apps/explorer/components/TransactionsTableWidget/index.tsx @@ -44,7 +44,7 @@ export const TransactionsTableWidget: React.FC = ({ txHash }) => { const networkId = useNetworkId() || undefined const [redirectTo, setRedirectTo] = useState(false) const txHashParams = { networkId, txHash } - const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, orders) + const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, !orders?.length) // Avoid redirecting until another network is searched again useEffect(() => { diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx index 8f60e541e..e0dab5ce3 100644 --- a/src/hooks/useGetOrders.tsx +++ b/src/hooks/useGetOrders.tsx @@ -154,37 +154,33 @@ export function useGetTxOrders(txHash: string): GetTxOrdersResult { export function useTxOrderExplorerLink( txHash: string, - orders: Order[] | undefined, + isZeroOrders: boolean, ): ExplorerLinkProps | Record { const networkId = useNetworkId() || undefined const [explorerLink, setExplorerLink] = useState>({}) 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) + if (!networkId || !isZeroOrders) return + + 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 } - }, [explorerLink, networkId, orders, txHash]) + // reset provider + updateWeb3Provider(web3, networkId) + }, [explorerLink, isZeroOrders, networkId, txHash]) return explorerLink } From 339b3e8270a4b6b38aaa7ce82a940bda9fc68c07 Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Fri, 25 Feb 2022 17:38:23 -0300 Subject: [PATCH 10/11] Hook improvements --- .../explorer/components/TransactionsTableWidget/index.tsx | 7 +++---- src/hooks/useGetOrders.tsx | 6 +++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/apps/explorer/components/TransactionsTableWidget/index.tsx b/src/apps/explorer/components/TransactionsTableWidget/index.tsx index 5cf98e55d..69ff7a160 100644 --- a/src/apps/explorer/components/TransactionsTableWidget/index.tsx +++ b/src/apps/explorer/components/TransactionsTableWidget/index.tsx @@ -44,7 +44,8 @@ export const TransactionsTableWidget: React.FC = ({ txHash }) => { const networkId = useNetworkId() || undefined const [redirectTo, setRedirectTo] = useState(false) const txHashParams = { networkId, txHash } - const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, !orders?.length) + const isZeroOrders = !!(orders && orders.length === 0) + const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, isZeroOrders) // Avoid redirecting until another network is searched again useEffect(() => { @@ -61,9 +62,7 @@ export const TransactionsTableWidget: React.FC = ({ txHash }) => { return } if (redirectTo) { - return ( - - ) + return } if (!orders?.length) { diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx index e0dab5ce3..08a8e48b0 100644 --- a/src/hooks/useGetOrders.tsx +++ b/src/hooks/useGetOrders.tsx @@ -155,9 +155,9 @@ export function useGetTxOrders(txHash: string): GetTxOrdersResult { export function useTxOrderExplorerLink( txHash: string, isZeroOrders: boolean, -): ExplorerLinkProps | Record { +): ExplorerLinkProps | Record | undefined { const networkId = useNetworkId() || undefined - const [explorerLink, setExplorerLink] = useState>({}) + const [explorerLink, setExplorerLink] = useState | undefined>(undefined) useEffect(() => { if (!networkId || !isZeroOrders) return @@ -176,7 +176,7 @@ export function useTxOrderExplorerLink( }) } }) - if (Object.keys(explorerLink).length > 0) break + if (explorerLink) break } // reset provider updateWeb3Provider(web3, networkId) From 5465cadf033fff30249b0b60afb5c5aebfa397d5 Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Wed, 2 Mar 2022 15:19:04 -0300 Subject: [PATCH 11/11] Remove undefined state initialization --- src/hooks/useGetOrders.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx index 08a8e48b0..b3e5a3444 100644 --- a/src/hooks/useGetOrders.tsx +++ b/src/hooks/useGetOrders.tsx @@ -157,7 +157,7 @@ export function useTxOrderExplorerLink( isZeroOrders: boolean, ): ExplorerLinkProps | Record | undefined { const networkId = useNetworkId() || undefined - const [explorerLink, setExplorerLink] = useState | undefined>(undefined) + const [explorerLink, setExplorerLink] = useState | undefined>() useEffect(() => { if (!networkId || !isZeroOrders) return