feat: add glow on all pages (#5275)

* chore: add more pronounced glow on all nft pages * chore: add glow effect everywhere * chore: add in a few more places * wip: simplification * chore: describe API * chore: small refactor * feat: add glow to two more pages * chore: add glow on all other pages * chore: simplify * chore: tweaks * chore: update type * chore: update white bg as per Cal suggestion * chore: dont export props * chore: fix type Co-authored-by: Vignesh Mohankumar <me@vig.xyz>
2022-11-18 16:49:48 +01:00 · 2022-11-18 16:49:48 +01:00 · 72c5e64f74
commit 72c5e64f74
parent 01a44d49b0
28 changed files with 206 additions and 287 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html translate="no">
+
 <head>
  <meta charset="utf-8" />

@ -16,10 +17,8 @@

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="theme-color" content="#FC72FF" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'"
-    />
+  <meta http-equiv="Content-Security-Policy"
+    content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'" />

  <!--
      manifest.json provides metadata used when the app is installed as a PWA.
@ -76,19 +75,6 @@
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

-      #background-radial-gradient {
-        background: linear-gradient(180deg, #202738 0%, #070816 100%);
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        pointer-events: none;
-        width: 200vw;
-        height: 200vh;
-        transform: translate(-50vw, -100vh);
-        z-index: -1;
-      }
-
    html {
      min-height: 100%;
    }
@ -114,7 +100,6 @@
    <!-- Triggers the font to load immediately and then is replaced by the app -->
    <div>&emsp;</div>
  </div>
-
-    <div id="background-radial-gradient"></div>
 </body>
+
 </html>
--- a/src/components/Tokens/TokenTable/TokenTable.tsx
+++ b/src/components/Tokens/TokenTable/TokenTable.tsx
@ -1,21 +1,22 @@
 import { Trans } from '@lingui/macro'
 import { PAGE_SIZE, useTopTokens } from 'graphql/data/TopTokens'
-import { validateUrlChainParam } from 'graphql/data/util'
+import { chainBackendNameToId, validateUrlChainParam } from 'graphql/data/util'
 import { ReactNode } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
+import { glowEffect } from 'theme/styles/glow'

 import { MAX_WIDTH_MEDIA_BREAKPOINT } from '../constants'
 import { HeaderRow, LoadedRow, LoadingRow } from './TokenRow'

 const GridContainer = styled.div`
+  ${glowEffect}
+
  display: flex;
  flex-direction: column;
  max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
  background-color: ${({ theme }) => theme.backgroundSurface};
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
-    0px 24px 32px rgba(0, 0, 0, 0.01);
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
@ -45,9 +46,9 @@ const NoTokenDisplay = styled.div`
  gap: 8px;
 `

-function NoTokensState({ message }: { message: ReactNode }) {
+function NoTokensState({ chainId, message }: { chainId: number; message: ReactNode }) {
  return (
-    <GridContainer>
+    <GridContainer chainId={chainId}>
      <HeaderRow />
      <NoTokenDisplay>{message}</NoTokenDisplay>
    </GridContainer>
@ -64,9 +65,9 @@ const LoadingRows = ({ rowCount }: { rowCount: number }) => (
  </>
 )

-export function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) {
+export function LoadingTokenTable({ chainId, rowCount = PAGE_SIZE }: { chainId: number; rowCount?: number }) {
  return (
-    <GridContainer>
+    <GridContainer chainId={chainId}>
      <HeaderRow />
      <TokenDataContainer>
        <LoadingRows rowCount={rowCount} />
@ -77,14 +78,18 @@ export function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number

 export default function TokenTable({ setRowCount }: { setRowCount: (c: number) => void }) {
  // TODO: consider moving prefetched call into app.tsx and passing it here, use a preloaded call & updated on interval every 60s
+  // TODO: consider passing `chainId` and `chainName` from parent, where we already have it resolved
  const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName)
  const { tokens, sparklines } = useTopTokens(chainName)
  setRowCount(tokens?.length ?? PAGE_SIZE)

+  const chainId = chainBackendNameToId(chainName)
+
  /* loading and error state */
  if (!tokens) {
    return (
      <NoTokensState
+        chainId={chainId}
        message={
          <>
            <AlertTriangle size={16} />
@ -94,10 +99,10 @@ export default function TokenTable({ setRowCount }: { setRowCount: (c: number) =
      />
    )
  } else if (tokens?.length === 0) {
-    return <NoTokensState message={<Trans>No tokens found</Trans>} />
+    return <NoTokensState chainId={chainId} message={<Trans>No tokens found</Trans>} />
  } else {
    return (
-      <GridContainer>
+      <GridContainer chainId={chainId}>
        <HeaderRow />
        <TokenDataContainer>
          {tokens.map(
--- a/src/components/Widget/index.tsx
+++ b/src/components/Widget/index.tsx
@ -21,6 +21,8 @@ import {
 } from 'lib/utils/analytics'
 import { useCallback, useState } from 'react'
 import { useIsDarkMode } from 'state/user/hooks'
+import styled from 'styled-components/macro'
+import { glowEffect } from 'theme/styles/glow'
 import { computeRealizedPriceImpact } from 'utils/prices'
 import { switchChain } from 'utils/switchChain'

@ -37,6 +39,10 @@ function useWidgetTheme() {
  return useIsDarkMode() ? DARK_THEME : LIGHT_THEME
 }

+const WidgetWrapper = styled.div`
+  ${glowEffect}
+`
+
 export interface WidgetProps {
  token?: Currency
  onTokenChange?: (token: Currency) => void
@ -44,7 +50,7 @@ export interface WidgetProps {
 }

 export default function Widget({ token, onTokenChange, onReviewSwapClick }: WidgetProps) {
-  const { connector, provider } = useWeb3React()
+  const { connector, provider, chainId } = useWeb3React()
  const locale = useActiveLocale()
  const theme = useWidgetTheme()
  const { inputs, tokenSelector } = useSyncWidgetInputs({ token, onTokenChange })
@ -136,7 +142,7 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
  }

  return (
-    <>
+    <WidgetWrapper chainId={chainId}>
      <SwapWidget
        disableBranding
        hideConnectionUI
@ -159,11 +165,17 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
        onSwapPriceUpdateAck={onSwapPriceUpdateAck}
      />
      {tokenSelector}
-    </>
+    </WidgetWrapper>
  )
 }

 export function WidgetSkeleton() {
  const theme = useWidgetTheme()
-  return <SwapWidgetSkeleton theme={theme} width={WIDGET_WIDTH} />
+  const { chainId } = useWeb3React()
+
+  return (
+    <WidgetWrapper chainId={chainId}>
+      <SwapWidgetSkeleton theme={theme} width={WIDGET_WIDTH} />
+    </WidgetWrapper>
+  )
 }
--- a/src/components/swap/styleds.tsx
+++ b/src/components/swap/styleds.tsx
@ -4,6 +4,7 @@ import { ReactNode } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled, { css } from 'styled-components/macro'
+import { glowEffect } from 'theme/styles/glow'
 import { Z_INDEX } from 'theme/zIndex'

 import { AutoColumn } from '../Column'
@ -23,7 +24,9 @@ export const PageWrapper = styled.div`
 `

 // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
-export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
+export const SwapWrapper = styled.main`
+  ${glowEffect}
+
  position: relative;
  background: ${({ theme }) => theme.backgroundSurface};
  border-radius: 16px;
--- a/src/constants/chainInfo.ts
+++ b/src/constants/chainInfo.ts
@ -6,7 +6,6 @@ import celoLogo from 'assets/svg/celo_logo.svg'
 import optimismLogoUrl from 'assets/svg/optimistic_ethereum.svg'
 import polygonMaticLogo from 'assets/svg/polygon-matic-logo.svg'
 import ms from 'ms.macro'
-import { darkTheme } from 'theme/colors'

 import { SupportedChainId, SupportedL1ChainId, SupportedL2ChainId } from './chains'
 import { ARBITRUM_LIST, CELO_LIST, OPTIMISM_LIST } from './lists'
@ -32,8 +31,6 @@ interface BaseChainInfo {
    symbol: string // e.g. 'gorETH',
    decimals: number // e.g. 18,
  }
-  readonly color?: string
-  readonly backgroundColor?: string
 }

 export interface L1ChainInfo extends BaseChainInfo {
@ -61,7 +58,6 @@ const CHAIN_INFO: ChainInfoMap = {
    label: 'Ethereum',
    logoUrl: ethereumLogoUrl,
    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-    color: darkTheme.chain_1,
  },
  [SupportedChainId.RINKEBY]: {
    networkType: NetworkType.L1,
@ -71,7 +67,6 @@ const CHAIN_INFO: ChainInfoMap = {
    label: 'Rinkeby',
    logoUrl: ethereumLogoUrl,
    nativeCurrency: { name: 'Rinkeby Ether', symbol: 'rETH', decimals: 18 },
-    color: darkTheme.chain_4,
  },
  [SupportedChainId.ROPSTEN]: {
    networkType: NetworkType.L1,
@ -81,7 +76,6 @@ const CHAIN_INFO: ChainInfoMap = {
    label: 'Ropsten',
    logoUrl: ethereumLogoUrl,
    nativeCurrency: { name: 'Ropsten Ether', symbol: 'ropETH', decimals: 18 },
-    color: darkTheme.chain_3,
  },
  [SupportedChainId.KOVAN]: {
    networkType: NetworkType.L1,
@ -91,7 +85,6 @@ const CHAIN_INFO: ChainInfoMap = {
    label: 'Kovan',
    logoUrl: ethereumLogoUrl,
    nativeCurrency: { name: 'Kovan Ether', symbol: 'kovETH', decimals: 18 },
-    color: darkTheme.chain_420,
  },
  [SupportedChainId.GOERLI]: {
    networkType: NetworkType.L1,
@ -101,7 +94,6 @@ const CHAIN_INFO: ChainInfoMap = {
    label: 'Görli',
    logoUrl: ethereumLogoUrl,
    nativeCurrency: { name: 'Görli Ether', symbol: 'görETH', decimals: 18 },
-    color: darkTheme.chain_5,
  },
  [SupportedChainId.OPTIMISM]: {
    networkType: NetworkType.L2,
@ -118,8 +110,6 @@ const CHAIN_INFO: ChainInfoMap = {
    statusPage: 'https://optimism.io/status',
    helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-    color: darkTheme.chain_10,
-    backgroundColor: darkTheme.chain_10_background,
  },
  [SupportedChainId.OPTIMISM_GOERLI]: {
    networkType: NetworkType.L2,
@ -134,7 +124,6 @@ const CHAIN_INFO: ChainInfoMap = {
    statusPage: 'https://optimism.io/status',
    helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
    nativeCurrency: { name: 'Optimism Goerli Ether', symbol: 'görOpETH', decimals: 18 },
-    color: darkTheme.chain_420,
  },
  [SupportedChainId.ARBITRUM_ONE]: {
    networkType: NetworkType.L2,
@ -149,8 +138,6 @@ const CHAIN_INFO: ChainInfoMap = {
    defaultListUrl: ARBITRUM_LIST,
    helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-    color: darkTheme.chain_42,
-    backgroundColor: darkTheme.chain_42161_background,
  },
  [SupportedChainId.ARBITRUM_RINKEBY]: {
    networkType: NetworkType.L2,
@ -164,7 +151,6 @@ const CHAIN_INFO: ChainInfoMap = {
    defaultListUrl: ARBITRUM_LIST,
    helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
    nativeCurrency: { name: 'Rinkeby Arbitrum Ether', symbol: 'rinkArbETH', decimals: 18 },
-    color: darkTheme.chain_421611,
  },
  [SupportedChainId.POLYGON]: {
    networkType: NetworkType.L1,
@ -177,8 +163,6 @@ const CHAIN_INFO: ChainInfoMap = {
    logoUrl: polygonMaticLogo,
    circleLogoUrl: polygonCircleLogoUrl,
    nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 },
-    color: darkTheme.chain_137,
-    backgroundColor: darkTheme.chain_137_background,
  },
  [SupportedChainId.POLYGON_MUMBAI]: {
    networkType: NetworkType.L1,
--- a/src/graphql/data/util.ts
+++ b/src/graphql/data/util.ts
@ -52,6 +52,10 @@ export function chainIdToBackendName(chainId: number | undefined) {
    : CHAIN_ID_TO_BACKEND_NAME[SupportedChainId.MAINNET]
 }

+export function chainBackendNameToId(chain: string | undefined) {
+  return (chain && CHAIN_NAME_TO_CHAIN_ID[chain.toUpperCase()]) || SupportedChainId.MAINNET
+}
+
 export const URL_CHAIN_PARAM_TO_BACKEND: { [key: string]: Chain } = {
  ethereum: 'ETHEREUM',
  polygon: 'POLYGON',
--- a/src/index.tsx
+++ b/src/index.tsx
@ -25,7 +25,6 @@ import LogsUpdater from './state/logs/updater'
 import TransactionUpdater from './state/transactions/updater'
 import UserUpdater from './state/user/updater'
 import ThemeProvider, { ThemedGlobalStyle } from './theme'
-import RadialGradientByChainUpdater from './theme/components/RadialGradientByChainUpdater'

 const queryClient = new QueryClient()

@ -36,7 +35,6 @@ if (!!window.ethereum) {
 function Updaters() {
  return (
    <>
-      <RadialGradientByChainUpdater />
      <ListsUpdater />
      <UserUpdater />
      <ApplicationUpdater />
--- a/src/nft/components/details/AssetPriceDetails.tsx
+++ b/src/nft/components/details/AssetPriceDetails.tsx
@ -11,7 +11,8 @@ import { useMemo } from 'react'
 import { Upload } from 'react-feather'
 import { Link, useNavigate } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components/macro'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components/text'
+import { glowEffect } from 'theme/styles/glow'

 interface AssetPriceDetailsProps {
  asset: GenieAsset
@ -55,6 +56,8 @@ const Container = styled.div`
 `

 const BestPriceContainer = styled.div`
+  ${glowEffect}
+
  display: flex;
  flex-direction: column;
  gap: 8px;
--- a/src/nft/components/details/InfoContainer.tsx
+++ b/src/nft/components/details/InfoContainer.tsx
@ -1,6 +1,12 @@
 import { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import styled, { css } from 'styled-components/macro'
+import { glowEffect } from 'theme/styles/glow'
+
+const HeaderContainer = styled.div`
+  ${glowEffect}
+  margin-top: 28px;
+`

 const Header = styled.div<{ isOpen: boolean }>`
  display: flex;
@ -10,7 +16,6 @@ const Header = styled.div<{ isOpen: boolean }>`
  padding: 14px 20px;
  cursor: pointer;
  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  margin-top: 28px;
  width: 100%;
  align-items: center;

@ -74,7 +79,7 @@ const InfoContainer = ({
  const [isOpen, setIsOpen] = useState(!!defaultOpen)

  return (
-    <div>
+    <HeaderContainer>
      <Header isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
        <PrimaryHeader>
          {primaryHeader} <SecondaryHeader>{secondaryHeader}</SecondaryHeader>
@ -82,7 +87,7 @@ const InfoContainer = ({
        <SecondaryHeaderContainer>{isOpen ? <ChevronUp /> : <ChevronDown />}</SecondaryHeaderContainer>
      </Header>
      {isOpen && <ContentContainer>{children}</ContentContainer>}
-    </div>
+    </HeaderContainer>
  )
 }

--- a/src/nft/components/explore/Table.tsx
+++ b/src/nft/components/explore/Table.tsx
@ -5,7 +5,8 @@ import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Column, ColumnInstance, HeaderGroup, IdType, useSortBy, useTable } from 'react-table'
 import styled, { useTheme } from 'styled-components/macro'
-import { GlowEffect, ThemedText } from 'theme'
+import { ThemedText } from 'theme/components/text'
+import { glowEffect } from 'theme/styles/glow'

 import { Box } from '../../components/Box'
 import { CollectionTableColumn } from '../../types'
@ -19,6 +20,10 @@ const CELL_WIDTH = '160px'
 const MOBILE_CELL_WIDTH = '240px'
 const DESKTOP_CELL_WIDTH = '360px'

+const TableContainer = styled.div`
+  ${glowEffect}
+`
+
 const RankCellContainer = styled.div`
  display: flex;
  align-items: center;
@ -141,7 +146,7 @@ export function Table<D extends Record<string, unknown>>({
  }

  return (
-    <GlowEffect>
+    <TableContainer>
      <table {...getTableProps()} className={styles.table}>
        <thead className={styles.thead}>
          {headerGroups.map((headerGroup) => (
@ -218,7 +223,7 @@ export function Table<D extends Record<string, unknown>>({
          })}
        </tbody>
      </table>
-    </GlowEffect>
+    </TableContainer>
  )
 }

@ -229,7 +234,7 @@ interface LoadingTableProps {

 function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTableProps) {
  return (
-    <GlowEffect>
+    <TableContainer>
      <table {...props} className={styles.table}>
        <thead className={styles.thead}>
          {headerGroups.map((headerGroup) => (
@ -290,6 +295,6 @@ function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTablePr
          ))}
        </tbody>
      </table>
-    </GlowEffect>
+    </TableContainer>
  )
 }
--- a/src/pages/AddLiquidity/index.tsx
+++ b/src/pages/AddLiquidity/index.tsx
@ -540,7 +540,7 @@ export default function AddLiquidity() {
          )}
          pendingText={pendingText}
        />
-        <PageWrapper wide={!hasExistingPosition}>
+        <PageWrapper chainId={chainId} wide={!hasExistingPosition}>
          <AddRemoveTabs
            creating={false}
            adding={true}
--- a/src/pages/AddLiquidityV2/index.tsx
+++ b/src/pages/AddLiquidityV2/index.tsx
@ -42,7 +42,7 @@ import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { calculateSlippageAmount } from '../../utils/calculateSlippageAmount'
 import { currencyId } from '../../utils/currencyId'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
-import AppBody from '../AppBody'
+import { BodyWrapper } from '../AppBody'
 import { Dots, Wrapper } from '../Pool/styleds'
 import { ConfirmAddModalBottom } from './ConfirmAddModalBottom'
 import { PoolPriceBar } from './PoolPriceBar'
@ -322,7 +322,7 @@ export default function AddLiquidity() {

  return (
    <>
-      <AppBody>
+      <BodyWrapper chainId={chainId}>
        <AddRemoveTabs creating={isCreate} adding={true} defaultSlippage={DEFAULT_ADD_V2_SLIPPAGE_TOLERANCE} />
        <Wrapper>
          <TransactionConfirmationModal
@ -500,7 +500,7 @@ export default function AddLiquidity() {
            )}
          </AutoColumn>
        </Wrapper>
-      </AppBody>
+      </BodyWrapper>
      <SwitchLocaleLink />

      {!addIsUnsupported ? (
--- a/src/pages/AppBody.tsx
+++ b/src/pages/AppBody.tsx
@ -1,8 +1,10 @@
-import React from 'react'
 import styled from 'styled-components/macro'
+import { glowEffect } from 'theme/styles/glow'
 import { Z_INDEX } from 'theme/zIndex'

-export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
+export const BodyWrapper = styled.main<{ chainId?: number; margin?: string; maxWidth?: string }>`
+  ${glowEffect}
+
  position: relative;
  margin-top: ${({ margin }) => margin ?? '0px'};
  max-width: ${({ maxWidth }) => maxWidth ?? '420px'};
@ -16,10 +18,3 @@ export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
  z-index: ${Z_INDEX.deprecated_content};
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
 `
-
-/**
- * The styled container element that wraps the content of most pages and the tabs.
- */
-export default function AppBody({ children, ...rest }: { children: React.ReactNode }) {
-  return <BodyWrapper {...rest}>{children}</BodyWrapper>
-}
--- a/src/pages/CreateProposal/index.tsx
+++ b/src/pages/CreateProposal/index.tsx
@ -27,7 +27,7 @@ import { ExternalLink, ThemedText } from 'theme'
 import { CreateProposalTabs } from '../../components/NavigationTabs'
 import { LATEST_GOVERNOR_INDEX } from '../../constants/governance'
 import { UNI } from '../../constants/tokens'
-import AppBody from '../AppBody'
+import { BodyWrapper } from '../AppBody'
 import { ProposalActionDetail } from './ProposalActionDetail'
 import { ProposalAction, ProposalActionSelector, ProposalActionSelectorModal } from './ProposalActionSelector'
 import { ProposalEditor } from './ProposalEditor'
@ -241,7 +241,7 @@ ${bodyValue}
  return (
    <Trace page={PageName.VOTE_PAGE} shouldLogImpression>
      <PageWrapper>
-        <AppBody {...{ maxWidth: '800px' }}>
+        <BodyWrapper chainId={chainId} maxWidth="800px">
          <CreateProposalTabs />
          <CreateProposalWrapper>
            <BlueCard>
@ -299,7 +299,7 @@ ${bodyValue}
            onProposalActionSelect={(proposalAction: ProposalAction) => handleActionChange(proposalAction)}
          />
          <ProposalSubmissionModal isOpen={attempting} hash={hash} onDismiss={handleDismissSubmissionModal} />
-        </AppBody>
+        </BodyWrapper>
      </PageWrapper>
    </Trace>
  )
--- a/src/pages/MigrateV2/MigrateV2Pair.tsx
+++ b/src/pages/MigrateV2/MigrateV2Pair.tsx
@ -722,7 +722,7 @@ export default function MigrateV2Pair() {
  }

  return (
-    <BodyWrapper style={{ padding: 24 }}>
+    <BodyWrapper chainId={chainId} style={{ padding: 24 }}>
      <AutoColumn gap="16px">
        <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
          <BackArrow to="/migrate/v2" />
--- a/src/pages/MigrateV2/index.tsx
+++ b/src/pages/MigrateV2/index.tsx
@ -113,7 +113,7 @@ export default function MigrateV2() {

  return (
    <>
-      <BodyWrapper style={{ padding: 24 }}>
+      <BodyWrapper chainId={chainId} style={{ padding: 24 }}>
        <AutoColumn gap="16px">
          <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
            <BackArrow to="/pool/v2" />
--- a/src/pages/Pool/index.tsx
+++ b/src/pages/Pool/index.tsx
@ -16,6 +16,7 @@ import { useToggleWalletModal } from 'state/application/hooks'
 import { useUserHideClosedPositions } from 'state/user/hooks'
 import styled, { css, useTheme } from 'styled-components/macro'
 import { HideSmall, ThemedText } from 'theme'
+import { glowEffect } from 'theme/styles/glow'
 import { PositionDetails } from 'types/position'

 import { V2_FACTORY_ADDRESSES } from '../../constants/addresses'
@ -131,14 +132,14 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`
 `

 const MainContentWrapper = styled.main`
+  ${glowEffect}
+
  background-color: ${({ theme }) => theme.deprecated_bg0};
  border: 1px solid ${({ theme }) => theme.backgroundOutline};
  padding: 0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
-    0px 24px 32px rgba(0, 0, 0, 0.01);
 `

 function PositionsLoadingPlaceholder() {
@ -160,7 +161,7 @@ function PositionsLoadingPlaceholder() {
  )
 }

-function WrongNetworkCard() {
+function WrongNetworkCard({ chainId }: { chainId?: number }) {
  const theme = useTheme()

  return (
@ -174,7 +175,7 @@ function WrongNetworkCard() {
              </ThemedText.LargeHeader>
            </TitleRow>

-            <MainContentWrapper>
+            <MainContentWrapper chainId={chainId}>
              <ErrorContainer>
                <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
                  <NetworkIcon strokeWidth={1.2} />
@ -202,7 +203,7 @@ export default function Pool() {
  const { positions, loading: positionsLoading } = useV3Positions(account)

  if (!isSupportedChain(chainId)) {
-    return <WrongNetworkCard />
+    return <WrongNetworkCard chainId={chainId} />
  }

  const [openPositions, closedPositions] = positions?.reduce<[PositionDetails[], PositionDetails[]]>(
@ -291,7 +292,7 @@ export default function Pool() {
                </ButtonRow>
              </TitleRow>

-              <MainContentWrapper>
+              <MainContentWrapper chainId={chainId}>
                {positionsLoading ? (
                  <PositionsLoadingPlaceholder />
                ) : filteredPositions && closedPositions && filteredPositions.length > 0 ? (
--- a/src/pages/PoolFinder/index.tsx
+++ b/src/pages/PoolFinder/index.tsx
@ -26,7 +26,7 @@ import { usePairAdder } from '../../state/user/hooks'
 import { StyledInternalLink } from '../../theme'
 import { ThemedText } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
-import AppBody from '../AppBody'
+import { BodyWrapper } from '../AppBody'
 import { Dots } from '../Pool/styleds'

 enum Fields {
@ -99,7 +99,7 @@ export default function PoolFinder() {
  return (
    <Trace page={PageName.POOL_PAGE} shouldLogImpression>
      <>
-        <AppBody>
+        <BodyWrapper chainId={chainId}>
          <FindPoolTabs origin={query.get('origin') ?? '/pool/v2'} />
          <AutoColumn style={{ padding: '1rem' }} gap="md">
            <BlueCard>
@ -229,7 +229,7 @@ export default function PoolFinder() {
            showCommonBases
            selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
          />
-        </AppBody>
+        </BodyWrapper>
        <SwitchLocaleLink />
      </>
    </Trace>
--- a/src/pages/RemoveLiquidity/V3.tsx
+++ b/src/pages/RemoveLiquidity/V3.tsx
@ -37,7 +37,7 @@ import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens'
 import { TransactionType } from '../../state/transactions/types'
 import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { currencyId } from '../../utils/currencyId'
-import AppBody from '../AppBody'
+import { BodyWrapper } from '../AppBody'
 import { ResponsiveHeaderText, SmallMaxButton, Wrapper } from './styled'

 const DEFAULT_REMOVE_V3_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100)
@ -290,7 +290,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
        )}
        pendingText={pendingText}
      />
-      <AppBody>
+      <BodyWrapper chainId={chainId}>
        <AddRemoveTabs
          creating={false}
          adding={false}
@ -425,7 +425,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
            <Loader />
          )}
        </Wrapper>
-      </AppBody>
+      </BodyWrapper>
    </AutoColumn>
  )
 }
--- a/src/pages/RemoveLiquidity/index.tsx
+++ b/src/pages/RemoveLiquidity/index.tsx
@ -8,6 +8,7 @@ import { Currency, Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendEvent } from 'components/analytics'
 import { useV2LiquidityTokenPermit } from 'hooks/useV2LiquidityTokenPermit'
+import { BodyWrapper } from 'pages/AppBody'
 import { useCallback, useMemo, useState } from 'react'
 import { ArrowDown, Plus } from 'react-feather'
 import { useNavigate, useParams } from 'react-router-dom'
@ -42,7 +43,6 @@ import { StyledInternalLink, ThemedText } from '../../theme'
 import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { calculateSlippageAmount } from '../../utils/calculateSlippageAmount'
 import { currencyId } from '../../utils/currencyId'
-import AppBody from '../AppBody'
 import { ClickableText, MaxButton, Wrapper } from '../Pool/styleds'

 const DEFAULT_REMOVE_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100)
@ -430,7 +430,7 @@ export default function RemoveLiquidity() {

  return (
    <>
-      <AppBody>
+      <BodyWrapper chainId={chainId}>
        <AddRemoveTabs creating={false} adding={false} defaultSlippage={DEFAULT_REMOVE_LIQUIDITY_SLIPPAGE_TOLERANCE} />
        <Wrapper>
          <TransactionConfirmationModal
@ -670,7 +670,7 @@ export default function RemoveLiquidity() {
            </div>
          </AutoColumn>
        </Wrapper>
-      </AppBody>
+      </BodyWrapper>

      {pair ? (
        <AutoColumn style={{ minWidth: '20rem', width: '100%', maxWidth: '400px', marginTop: '1rem' }}>
--- a/src/pages/Swap/index.tsx
+++ b/src/pages/Swap/index.tsx
@ -509,7 +509,7 @@ export default function Swap() {
          showCancel={true}
        />
        <PageWrapper>
-          <SwapWrapper id="swap-page">
+          <SwapWrapper id="swap-page" chainId={chainId}>
            <SwapHeader allowedSlippage={allowedSlippage} />
            <ConfirmSwapModal
              isOpen={showConfirm}
--- a/src/pages/Tokens/index.tsx
+++ b/src/pages/Tokens/index.tsx
@ -9,7 +9,7 @@ import SearchBar from 'components/Tokens/TokenTable/SearchBar'
 import TimeSelector from 'components/Tokens/TokenTable/TimeSelector'
 import TokenTable, { LoadingTokenTable } from 'components/Tokens/TokenTable/TokenTable'
 import { PAGE_SIZE } from 'graphql/data/TopTokens'
-import { chainIdToBackendName, isValidBackendChainName } from 'graphql/data/util'
+import { chainBackendNameToId, chainIdToBackendName, isValidBackendChainName } from 'graphql/data/util'
 import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
 import { useResetAtom } from 'jotai/utils'
 import { Suspense, useEffect, useState } from 'react'
@ -93,6 +93,8 @@ const Tokens = () => {
    }
  })

+  const chainId = chainBackendNameToId(chainNameParam)
+
  return (
    <Trace page={PageName.TOKENS_PAGE} shouldLogImpression>
      <ExploreContainer>
@ -110,7 +112,7 @@ const Tokens = () => {
            <SearchBar />
          </SearchContainer>
        </FiltersWrapper>
-        <Suspense fallback={<LoadingTokenTable rowCount={rowCount} />}>
+        <Suspense fallback={<LoadingTokenTable chainId={chainId} rowCount={rowCount} />}>
          <TokenTable setRowCount={setRowCount} />
        </Suspense>
      </ExploreContainer>
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@ -86,11 +86,9 @@ export const colors = {
  // TODO: add all other vibrant variations
  networkEthereum: '#627EEA',
  networkOptimism: '#FF0420',
-  networkOptimismSoft: 'rgba(255, 4, 32, 0.16)',
  networkPolygon: '#A457FF',
  networkArbitrum: '#28A0F0',
-  networkPolygonSoft: 'rgba(164, 87, 255, 0.16)',
-  networkEthereumSoft: 'rgba(98, 126, 234, 0.16)',
+  networkCelo: '#35D07F',
 }

 export type Theme = typeof darkTheme
@ -99,21 +97,6 @@ const commonTheme = {
  white: colors.white,
  black: colors.black,

-  chain_1: colors.networkEthereum,
-  chain_3: colors.yellow400,
-  chain_4: colors.pink400,
-  chain_5: colors.green400,
-  chain_10: colors.networkOptimism,
-  chain_137: colors.networkPolygon,
-  chain_42: colors.networkArbitrum,
-  chain_420: colors.networkOptimism,
-  chain_42161: colors.networkEthereum,
-  chain_421611: colors.networkEthereum,
-  chain_80001: colors.networkPolygon,
-  chain_137_background: colors.purple900,
-  chain_10_background: colors.red900,
-  chain_42161_background: colors.blue900,
-
  hoverState: opacify(24, colors.blue200),
  hoverDefault: opacify(8, colors.gray200),
 }
@ -161,7 +144,11 @@ export const darkTheme = {
  deepShadow: '12px 16px 24px rgba(0, 0, 0, 0.24), 12px 8px 12px rgba(0, 0, 0, 0.24), 4px 4px 8px rgba(0, 0, 0, 0.32);',
  shallowShadow: '4px 4px 10px rgba(0, 0, 0, 0.24), 2px 2px 4px rgba(0, 0, 0, 0.12), 1px 2px 2px rgba(0, 0, 0, 0.12);',

-  networkDefaultShadow: `0px 40px 120px ${opacify(16, colors.blue400)}`,
+  networkDefaultShadow: `0px 40px 120px ${opacify(24, colors.blue400)}`,
+  networkPolygonShadow: `0px 40px 120px ${opacify(20, colors.networkPolygon)}`,
+  networkArbitrumShadow: `0px 40px 120px ${opacify(12, colors.networkArbitrum)}`,
+  networkOptimismShadow: `0px 40px 120px ${opacify(20, colors.networkOptimism)}`,
+  networkCeloShadow: `0px 20px 120px ${opacify(24, colors.networkCelo)}`,

  stateOverlayHover: opacify(8, colors.gray300),
  stateOverlayPressed: opacify(24, colors.gray200),
@ -172,7 +159,7 @@ export const lightTheme: Theme = {

  userThemeColor: colors.magentaVibrant,

-  background: '#faf9fa', //INTENTIONALLY OFF THEME TO GIVE WHITE BG A SOFTER VISUAL
+  background: '#FCFCFC', // INTENTIONALLY OFF THEME TO GIVE WHITE BG A SOFTER VISUAL
  backgroundBackdrop: colors.white,
  backgroundSurface: colors.white,
  backgroundModule: colors.gray50,
@ -213,6 +200,10 @@ export const lightTheme: Theme = {
    '6px 6px 10px rgba(51, 53, 72, 0.01), 2px 2px 6px rgba(51, 53, 72, 0.02), 1px 2px 2px rgba(51, 53, 72, 0.02);',

  networkDefaultShadow: `0px 40px 120px ${opacify(12, colors.pink400)}`,
+  networkPolygonShadow: `0px 40px 120px ${opacify(16, colors.networkPolygon)}`,
+  networkArbitrumShadow: `0px 40px 120px ${opacify(12, colors.networkArbitrum)}`,
+  networkOptimismShadow: `0px 40px 120px ${opacify(12, colors.networkOptimism)}`,
+  networkCeloShadow: `0px 20px 120px ${opacify(12, colors.networkCelo)}`,

  stateOverlayHover: opacify(8, colors.gray300),
  stateOverlayPressed: opacify(24, colors.gray200),
--- a/src/theme/components/RadialGradientByChainUpdater.ts
+++ b/src/theme/components/RadialGradientByChainUpdater.ts
@ -1,95 +0,0 @@
-import { useWeb3React } from '@web3-react/core'
-import { useIsNftPage } from 'hooks/useIsNftPage'
-import { useEffect } from 'react'
-import { useDarkModeManager } from 'state/user/hooks'
-
-import { SupportedChainId } from '../../constants/chains'
-import { darkTheme, lightTheme } from '../colors'
-
-const initialStyles = {
-  width: '200vw',
-  height: '200vh',
-  transform: 'translate(-50vw, -100vh)',
-}
-const backgroundResetStyles = {
-  width: '100vw',
-  height: '100vh',
-  transform: 'unset',
-}
-
-type TargetBackgroundStyles = typeof initialStyles | typeof backgroundResetStyles
-
-const backgroundRadialGradientElement = document.getElementById('background-radial-gradient')
-const setBackground = (newValues: TargetBackgroundStyles) =>
-  Object.entries(newValues).forEach(([key, value]) => {
-    if (backgroundRadialGradientElement) {
-      backgroundRadialGradientElement.style[key as keyof typeof backgroundResetStyles] = value
-    }
-  })
-
-export default function RadialGradientByChainUpdater(): null {
-  const { chainId } = useWeb3React()
-  const [darkMode] = useDarkModeManager()
-  const isNftPage = useIsNftPage()
-
-  // manage background color
-  useEffect(() => {
-    if (!backgroundRadialGradientElement) {
-      return
-    }
-
-    if (isNftPage) {
-      setBackground(initialStyles)
-      backgroundRadialGradientElement.style.background = darkMode
-        ? darkTheme.backgroundBackdrop
-        : lightTheme.backgroundBackdrop
-      return
-    }
-
-    switch (chainId) {
-      case SupportedChainId.ARBITRUM_ONE:
-      case SupportedChainId.ARBITRUM_RINKEBY:
-        setBackground(backgroundResetStyles)
-        const arbitrumLightGradient =
-          'radial-gradient(100% 100% at 50% 0%, rgba(205, 232, 251, 0.7) 0%, rgba(252, 243, 249, 0.6536) 49.48%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
-        const arbitrumDarkGradient =
-          'radial-gradient(100% 100% at 50% 0%, rgba(10, 41, 75, 0.7) 0%, rgba(34, 30, 48, 0.6536) 49.48%, rgba(31, 33, 40, 0) 100%), #0D0E0E'
-        backgroundRadialGradientElement.style.background = darkMode ? arbitrumDarkGradient : arbitrumLightGradient
-        break
-      case SupportedChainId.OPTIMISM:
-      case SupportedChainId.OPTIMISM_GOERLI:
-        setBackground(backgroundResetStyles)
-        const optimismLightGradient =
-          'radial-gradient(100% 100% at 50% 0%, rgba(255, 251, 242, 0.8) 0%, rgba(255, 244, 249, 0.6958) 50.52%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
-        const optimismDarkGradient =
-          'radial-gradient(100% 100% at 50% 0%, rgba(62, 46, 56, 0.8) 0%, rgba(44, 31, 45, 0.6958) 50.52%, rgba(31, 33, 40, 0) 100%), #0D0E0E'
-        backgroundRadialGradientElement.style.background = darkMode ? optimismDarkGradient : optimismLightGradient
-        break
-      case SupportedChainId.POLYGON:
-      case SupportedChainId.POLYGON_MUMBAI:
-        setBackground(backgroundResetStyles)
-        const polygonLightGradient =
-          'radial-gradient(100% 100% at 50% 0%, rgba(130, 71, 229, 0.2) 0%, rgba(200, 168, 255, 0.05) 52.6%, rgba(0, 0, 0, 0) 100%), #FFFFFF'
-        const polygonDarkGradient =
-          'radial-gradient(100% 100% at 50% 0%, rgba(130, 71, 229, 0.2) 0%, rgba(200, 168, 255, 0.05) 52.6%, rgba(0, 0, 0, 0) 100%), #0D0E0E'
-        backgroundRadialGradientElement.style.background = darkMode ? polygonDarkGradient : polygonLightGradient
-        break
-      case SupportedChainId.CELO:
-      case SupportedChainId.CELO_ALFAJORES:
-        setBackground(backgroundResetStyles)
-        const celoLightGradient =
-          'radial-gradient(100% 100% at 50% 0%, rgba(186, 228, 210, 0.7) 0%, rgba(252, 243, 249, 0.6536) 49.48%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
-        const celoDarkGradient =
-          'radial-gradient(100% 100% at 50% 0%, rgba(20, 49, 37, 0.29) 0%, rgba(12, 31, 23, 0.6536) 49.48%, rgba(31, 33, 40, 0) 100%, rgba(31, 33, 40, 0) 100%), #0D0E0E'
-        backgroundRadialGradientElement.style.background = darkMode ? celoDarkGradient : celoLightGradient
-        break
-      default:
-        setBackground(initialStyles)
-        const defaultLightGradient =
-          'radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
-        const defaultDarkGradient = 'linear-gradient(180deg, #202738 0%, #070816 100%)'
-        backgroundRadialGradientElement.style.background = darkMode ? defaultDarkGradient : defaultLightGradient
-    }
-  }, [darkMode, chainId, isNftPage])
-  return null
-}
--- a/src/theme/components/index.tsx
+++ b/src/theme/components/index.tsx
@ -470,8 +470,3 @@ export const Separator = styled.div`
  height: 1px;
  background-color: ${({ theme }) => theme.backgroundOutline};
 `
-
-export const GlowEffect = styled.div`
-  border-radius: 32px;
-  box-shadow: ${({ theme }) => theme.networkDefaultShadow};
-`
--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@ -99,7 +99,7 @@ export default function ThemeProvider({ children }: { children: React.ReactNode
 export const ThemedGlobalStyle = createGlobalStyle`
  html {
    color: ${({ theme }) => theme.deprecated_text1};
-    background-color: ${({ theme }) => theme.background} !important;
+    background-color: ${({ theme }) => theme.background};
  }

  a {
--- a/src/theme/styles/glow.tsx
+++ b/src/theme/styles/glow.tsx
@ -0,0 +1,26 @@
+import { SupportedChainId } from 'constants/chains'
+import { css, DefaultTheme } from 'styled-components/macro'
+
+const getShadowForChainId = (theme: DefaultTheme, chainId?: SupportedChainId) => {
+  switch (chainId) {
+    case SupportedChainId.ARBITRUM_ONE:
+    case SupportedChainId.ARBITRUM_RINKEBY:
+      return theme.networkArbitrumShadow
+    case SupportedChainId.OPTIMISM:
+    case SupportedChainId.OPTIMISM_GOERLI:
+      return theme.networkOptimismShadow
+    case SupportedChainId.POLYGON:
+    case SupportedChainId.POLYGON_MUMBAI:
+      return theme.networkPolygonShadow
+    case SupportedChainId.CELO:
+    case SupportedChainId.CELO_ALFAJORES:
+      return theme.networkCeloShadow
+    default:
+      return theme.networkDefaultShadow
+  }
+}
+
+export const glowEffect = css<{ chainId?: SupportedChainId }>`
+  border-radius: 16px;
+  box-shadow: ${({ theme, chainId }) => getShadowForChainId(theme, chainId)};
+`
--- a/src/theme/styles/index.ts
+++ b/src/theme/styles/index.ts