From e5c419781f81a97c62a9f31f1a4d54572d1191a0 Mon Sep 17 00:00:00 2001
From: Alfetopito <alfetopito@users.noreply.github.com>
Date: Wed, 18 Dec 2024 17:11:53 +0000
Subject: [PATCH 1/5] chore: temporarily hardcode subgraph urls

---
 apps/explorer/src/consts/subgraphUrls.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

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, string | null> = {
-  [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',
 }

From 8afaaf150daf84d44cf2371ff8173b8cc1af3da2 Mon Sep 17 00:00:00 2001
From: Alfetopito <alfetopito@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:10:20 +0000
Subject: [PATCH 2/5] fix: center search bar on home

---
 apps/explorer/src/explorer/pages/Home/index.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/explorer/src/explorer/pages/Home/index.tsx b/apps/explorer/src/explorer/pages/Home/index.tsx
index e16587b8e7..438ae3a344 100644
--- a/apps/explorer/src/explorer/pages/Home/index.tsx
+++ b/apps/explorer/src/explorer/pages/Home/index.tsx
@@ -18,9 +18,6 @@ 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;
   padding: 0;
 
   ${Media.upToMedium()} {
@@ -30,9 +27,16 @@ const Wrapper = styled(WrapperMod)`
   ${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 = () => {
       <Helmet>
         <title>{APP_TITLE}</title>
       </Helmet>
-      <h1>Search on CoW Protocol Explorer</h1>
-      <Search className="home" />
+      <SearchWrapper>
+        <h1>Search on CoW Protocol Explorer</h1>
+        <Search className="home" />
+      </SearchWrapper>
       <SummaryWrapper>
         {showCharts && (
           <>

From a0426324196bd1b076fec53338cfbc857fbfed47 Mon Sep 17 00:00:00 2001
From: Alfetopito <alfetopito@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:14:22 +0000
Subject: [PATCH 3/5] fix: comment out table row breaking the table

---
 apps/explorer/src/components/token/TokenTable/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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> = (props) => {
     } else {
       tableContent = (
         <>
-          <tr>
+          {/* <tr>
             <td>Sorted by Volume(24h): from highest to lowest</td>
-          </tr>
+          </tr> */}
           {items.map((item, i) => (
             <RowToken key={`${item.id}-${i}`} index={i + tableState.pageOffset} token={item} />
           ))}

From b31ecfefca03dc470e3b1a5cb647a1dcd23325b7 Mon Sep 17 00:00:00 2001
From: Alfetopito <alfetopito@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:42:34 +0000
Subject: [PATCH 4/5] chore: attempt to fix home table

---
 .../layout/GenericLayout/Footer/index.tsx     | 16 ++++++----
 .../components/layout/GenericLayout/index.tsx | 32 ++++++++++++++++---
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx b/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx
index 3f8dd01bfc..10f6fda93f 100644
--- a/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx
+++ b/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx
@@ -16,23 +16,25 @@ const FooterStyled = styled.footer`
   align-items: center;
   box-sizing: border-box;
   font-size: 1.2rem;
-  flex: 1 1 auto;
   color: ${({ theme }): string => theme.textSecondary2};
   width: 100%;
   justify-content: space-around;
-  margin: auto auto 0;
-  height: auto;
   padding: 1rem;
-  max-height: 4rem;
+  height: 4rem;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
 
   ${Media.upToMedium()} {
-    margin: 0 auto;
+    position: relative;
+    margin: 0;
     flex-flow: column wrap;
     padding: 1.6rem 1.6rem 4rem;
     justify-content: flex-start;
     gap: 1.6rem;
-    bottom: initial;
-    max-height: initial;
+    height: auto;
+    max-height: none;
   }
 
   > a {
diff --git a/apps/explorer/src/components/layout/GenericLayout/index.tsx b/apps/explorer/src/components/layout/GenericLayout/index.tsx
index d950862f08..d2a4f88e87 100644
--- a/apps/explorer/src/components/layout/GenericLayout/index.tsx
+++ b/apps/explorer/src/components/layout/GenericLayout/index.tsx
@@ -1,10 +1,30 @@
 import { PropsWithChildren } from 'react'
 
-import { ThemeProvider, StaticGlobalStyle, ThemedGlobalStyle } from 'theme'
+import { Media } from '@cowprotocol/ui'
+
+import styled from 'styled-components/macro'
+import { StaticGlobalStyle, ThemedGlobalStyle, ThemeProvider } from 'theme'
 
 import { Footer } from './Footer'
 import { Header } from './Header'
 
+const PageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+`
+
+const MainContent = styled.main`
+  flex: 1;
+  padding-bottom: 5rem;
+  width: 100%;
+
+  ${Media.upToMedium()} {
+    padding-bottom: 0;
+  }
+`
+
 export type Props = PropsWithChildren<{
   header?: React.ReactNode | null
   footer?: React.ReactNode | null
@@ -18,9 +38,13 @@ export const GenericLayout: React.FC<Props> = ({ header = defaultHeader, footer
     <StaticGlobalStyle />
     <ThemeProvider>
       <ThemedGlobalStyle />
-      {header}
-      {children}
-      {footer}
+      <PageWrapper>
+        {header}
+        <MainContent>
+          {children}
+        </MainContent>
+        {footer}
+      </PageWrapper>
     </ThemeProvider>
   </>
 )

From a92d512d8360cb6171a549f2b19d973908d3f119 Mon Sep 17 00:00:00 2001
From: Alexandr Kazachenko <shoom3301@gmail.com>
Date: Thu, 19 Dec 2024 17:55:25 +0500
Subject: [PATCH 5/5] fix: fix page layout

---
 .../BlockExplorerLink/BlockExplorerLink.tsx   |  8 ++---
 .../components/common/TokenDisplay/index.tsx  |  6 +++-
 .../layout/GenericLayout/Footer/index.tsx     | 18 +++++------
 .../components/layout/GenericLayout/index.tsx | 32 +++----------------
 .../src/explorer/pages/Home/index.tsx         |  4 +--
 apps/explorer/src/explorer/styled.ts          |  9 ++----
 apps/explorer/src/theme/styles/global.ts      |  1 -
 7 files changed, 26 insertions(+), 52 deletions(-)

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: Props) => {
 
   return (
     <ExternalLink href={url} target="_blank" rel="noopener noreferrer" className={className}>
-      <span>{label}</span>
+      <TokenSymbol token={{ symbol: label }} length={24} />
       {showLogo && <LogoWrapper title={`Open it on ${CHAIN_INFO[networkId].explorerTitle}`} src={LOGO_MAP.etherscan} />}
     </ExternalLink>
   )
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<Props>): React.ReactNode {
       <StyledImg address={imageAddress} network={network} />
       {isNativeToken(erc20.address) ? (
         // There's nowhere to link when it's a native token, so, only display the symbol
-        <NativeWrapper>{erc20.symbol}</NativeWrapper>
+        <NativeWrapper>
+          <TokenSymbol length={24} token={erc20} />
+        </NativeWrapper>
       ) : (
         <BlockExplorerLink identifier={erc20.address} type="token" label={tokenLabel} networkId={network} />
       )}
diff --git a/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx b/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx
index 10f6fda93f..a5f67cb87f 100644
--- a/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx
+++ b/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx
@@ -16,25 +16,23 @@ const FooterStyled = styled.footer`
   align-items: center;
   box-sizing: border-box;
   font-size: 1.2rem;
+  flex: 1 1 auto;
   color: ${({ theme }): string => theme.textSecondary2};
   width: 100%;
   justify-content: space-around;
-  padding: 1rem;
-  height: 4rem;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 10;
+  margin: auto auto 0;
+  height: auto;
+  padding: 3rem 1rem 4rem 1rem;
+  max-height: 4rem;
 
   ${Media.upToMedium()} {
-    position: relative;
-    margin: 0;
+    margin: 0 auto;
     flex-flow: column wrap;
     padding: 1.6rem 1.6rem 4rem;
     justify-content: flex-start;
     gap: 1.6rem;
-    height: auto;
-    max-height: none;
+    bottom: initial;
+    max-height: initial;
   }
 
   > a {
diff --git a/apps/explorer/src/components/layout/GenericLayout/index.tsx b/apps/explorer/src/components/layout/GenericLayout/index.tsx
index d2a4f88e87..d950862f08 100644
--- a/apps/explorer/src/components/layout/GenericLayout/index.tsx
+++ b/apps/explorer/src/components/layout/GenericLayout/index.tsx
@@ -1,30 +1,10 @@
 import { PropsWithChildren } from 'react'
 
-import { Media } from '@cowprotocol/ui'
-
-import styled from 'styled-components/macro'
-import { StaticGlobalStyle, ThemedGlobalStyle, ThemeProvider } from 'theme'
+import { ThemeProvider, StaticGlobalStyle, ThemedGlobalStyle } from 'theme'
 
 import { Footer } from './Footer'
 import { Header } from './Header'
 
-const PageWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  width: 100%;
-`
-
-const MainContent = styled.main`
-  flex: 1;
-  padding-bottom: 5rem;
-  width: 100%;
-
-  ${Media.upToMedium()} {
-    padding-bottom: 0;
-  }
-`
-
 export type Props = PropsWithChildren<{
   header?: React.ReactNode | null
   footer?: React.ReactNode | null
@@ -38,13 +18,9 @@ export const GenericLayout: React.FC<Props> = ({ header = defaultHeader, footer
     <StaticGlobalStyle />
     <ThemeProvider>
       <ThemedGlobalStyle />
-      <PageWrapper>
-        {header}
-        <MainContent>
-          {children}
-        </MainContent>
-        {footer}
-      </PageWrapper>
+      {header}
+      {children}
+      {footer}
     </ThemeProvider>
   </>
 )
diff --git a/apps/explorer/src/explorer/pages/Home/index.tsx b/apps/explorer/src/explorer/pages/Home/index.tsx
index 438ae3a344..99f93fdeeb 100644
--- a/apps/explorer/src/explorer/pages/Home/index.tsx
+++ b/apps/explorer/src/explorer/pages/Home/index.tsx
@@ -17,11 +17,11 @@ import { Wrapper as WrapperMod } from '../styled'
 
 const Wrapper = styled(WrapperMod)`
   max-width: 100%;
-  height: calc(100vh - 10rem);
+  min-height: calc(100vh - 10rem);
   padding: 0;
 
   ${Media.upToMedium()} {
-    height: 50vh;
+    min-height: 50vh;
   }
 
   ${Media.upToSmall()} {
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 {