diff --git a/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx b/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx index c70a23322c..6942fc0ee4 100644 --- a/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx +++ b/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx @@ -1,9 +1,9 @@ -import React, { ReactElement } from 'react' +import React from 'react' import { CHAIN_INFO } from '@cowprotocol/common-const' import { BlockExplorerLinkType, getBlockExplorerUrl } from '@cowprotocol/common-utils' import { SupportedChainId } from '@cowprotocol/cow-sdk' -import { ExternalLink } from '@cowprotocol/ui' +import { ExternalLink, TokenSymbol } from '@cowprotocol/ui' import LogoWrapper, { LOGO_MAP } from 'components/common/LogoWrapper' import { abbreviateString } from 'utils' @@ -24,7 +24,7 @@ export interface Props { /** * label to replace textContent generated from identifier */ - label?: string | ReactElement | void + label?: string | void /** * Use the URL as a label @@ -58,7 +58,7 @@ export const BlockExplorerLink: React.FC = (props: Props) => { return ( - {label} + {showLogo && } ) diff --git a/apps/explorer/src/components/common/TokenDisplay/index.tsx b/apps/explorer/src/components/common/TokenDisplay/index.tsx index 780c76af20..353ecac1d4 100644 --- a/apps/explorer/src/components/common/TokenDisplay/index.tsx +++ b/apps/explorer/src/components/common/TokenDisplay/index.tsx @@ -1,3 +1,5 @@ +import { TokenSymbol } from '@cowprotocol/ui' + import { TokenErc20 } from '@gnosis.pm/dex-js' import { BlockExplorerLink } from 'components/common/BlockExplorerLink' import TokenImg from 'components/common/TokenImg' @@ -51,7 +53,9 @@ export function TokenDisplay(props: Readonly): React.ReactNode { {isNativeToken(erc20.address) ? ( // There's nowhere to link when it's a native token, so, only display the symbol - {erc20.symbol} + + + ) : ( )} diff --git a/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx b/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx index 3f8dd01bfc..a5f67cb87f 100644 --- a/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx +++ b/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx @@ -22,7 +22,7 @@ const FooterStyled = styled.footer` justify-content: space-around; margin: auto auto 0; height: auto; - padding: 1rem; + padding: 3rem 1rem 4rem 1rem; max-height: 4rem; ${Media.upToMedium()} { diff --git a/apps/explorer/src/components/token/TokenTable/index.tsx b/apps/explorer/src/components/token/TokenTable/index.tsx index dcd1635e9d..6757ef96b5 100644 --- a/apps/explorer/src/components/token/TokenTable/index.tsx +++ b/apps/explorer/src/components/token/TokenTable/index.tsx @@ -281,9 +281,9 @@ const TokenTable: React.FC = (props) => { } else { tableContent = ( <> - + {/* Sorted by Volume(24h): from highest to lowest - + */} {items.map((item, i) => ( ))} diff --git a/apps/explorer/src/consts/subgraphUrls.ts b/apps/explorer/src/consts/subgraphUrls.ts index ab1f94af67..c285a6cdcd 100644 --- a/apps/explorer/src/consts/subgraphUrls.ts +++ b/apps/explorer/src/consts/subgraphUrls.ts @@ -8,9 +8,13 @@ function getSubgraphUrl(chainId: SupportedChainId, suffix: string): string | nul * When value is null, then Subgraph is not supported for the network */ export const SUBGRAPH_URLS: Record = { - [SupportedChainId.MAINNET]: getSubgraphUrl(SupportedChainId.MAINNET, 'MAINNET'), - [SupportedChainId.GNOSIS_CHAIN]: getSubgraphUrl(SupportedChainId.GNOSIS_CHAIN, 'GNOSIS_CHAIN'), - [SupportedChainId.ARBITRUM_ONE]: getSubgraphUrl(SupportedChainId.ARBITRUM_ONE, 'ARBITRUM_ONE'), + [SupportedChainId.MAINNET]: + 'https://subgraph.satsuma-prod.com/a29a417e85ec/cow-nomev-labs-pt516811924/cow-subgraph-mainnet/api', + [SupportedChainId.GNOSIS_CHAIN]: + 'https://subgraph.satsuma-prod.com/a29a417e85ec/cow-nomev-labs-pt516811924/cow-subgraphs-gnosis/api', + [SupportedChainId.ARBITRUM_ONE]: + 'https://subgraph.satsuma-prod.com/a29a417e85ec/cow-nomev-labs-pt516811924/cow-subgraph-arb/api', [SupportedChainId.BASE]: getSubgraphUrl(SupportedChainId.BASE, 'BASE'), - [SupportedChainId.SEPOLIA]: getSubgraphUrl(SupportedChainId.SEPOLIA, 'SEPOLIA'), + [SupportedChainId.SEPOLIA]: + 'https://subgraph.satsuma-prod.com/a29a417e85ec/cow-nomev-labs-pt516811924/cow-subgraph-sepolia/api', } diff --git a/apps/explorer/src/explorer/pages/Home/index.tsx b/apps/explorer/src/explorer/pages/Home/index.tsx index e16587b8e7..99f93fdeeb 100644 --- a/apps/explorer/src/explorer/pages/Home/index.tsx +++ b/apps/explorer/src/explorer/pages/Home/index.tsx @@ -17,22 +17,26 @@ import { Wrapper as WrapperMod } from '../styled' const Wrapper = styled(WrapperMod)` max-width: 100%; - height: calc(100vh - 10rem); - flex-flow: column wrap; - justify-content: center; - display: flex; + min-height: calc(100vh - 10rem); padding: 0; ${Media.upToMedium()} { - height: 50vh; + min-height: 50vh; } ${Media.upToSmall()} { padding: 0 1.6rem; } +` + +const SearchWrapper = styled.div` + flex-flow: column wrap; + justify-content: center; + display: flex; > h1 { justify-content: center; + text-align: center; padding: 2.4rem 0 0.75rem; margin: 0 0 2.4rem; font-size: 2.4rem; @@ -82,8 +86,10 @@ export const Home: React.FC = () => { {APP_TITLE} -

Search on CoW Protocol Explorer

- + +

Search on CoW Protocol Explorer

+ +
{showCharts && ( <> diff --git a/apps/explorer/src/explorer/styled.ts b/apps/explorer/src/explorer/styled.ts index 0d634f1a3f..9cc3752198 100644 --- a/apps/explorer/src/explorer/styled.ts +++ b/apps/explorer/src/explorer/styled.ts @@ -29,12 +29,9 @@ export const GlobalStyle = createGlobalStyle` html, body, #root { - display: block; - max-width: 100vw; - overflow-x: hidden; - margin: 0; - padding: 0; - position: relative; + display: flex; + flex-direction: column; + flex-grow: 1; ${ScrollBarStyle} } diff --git a/apps/explorer/src/theme/styles/global.ts b/apps/explorer/src/theme/styles/global.ts index 1ec5905bb2..1472b3226e 100644 --- a/apps/explorer/src/theme/styles/global.ts +++ b/apps/explorer/src/theme/styles/global.ts @@ -35,7 +35,6 @@ export const StaticGlobalStyle = createGlobalStyle` box-sizing: border-box; overscroll-behavior-y: none; scroll-behavior: smooth; - overflow-x: hidden; } *, *:before, *:after {