Skip to content

I
interface
Commit 785c2a67 authored by Charles Bachmeier's avatar Charles Bachmeier Committed by GitHub
Browse files
Options

fix: Revert "feat: add glow on all pages" (#5315) 

Revert "feat: add glow on all pages (#5275)"

This reverts commit 72c5e64f.
parent 56a99525
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 212 deletions
public/index.html
View file @ 785c2a67
<!DOCTYPE html>
<html translate="no">
<head>
<meta charset="utf-8" />
<head>
<meta charset="utf-8" />
<title>Uniswap Interface</title>
<meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
<title>Uniswap Interface</title>
<meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
<!--
<!--
%PUBLIC_URL% will be replaced with the URL of the `public` folder during build.
Only files inside the `public` folder can be referenced from the HTML.
-->
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
<link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
<link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
<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'" />
<!--
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
<link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
<link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
<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'"
/>
<!--
manifest.json provides metadata used when the app is installed as a PWA.
See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://www.google-analytics.com/" />
<link rel="preconnect" href="https://www.google-analytics.com/" />
<link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
<style>
* {
font-family: 'Inter', sans-serif;
box-sizing: border-box;
}
<style>
* {
font-family: 'Inter', sans-serif;
box-sizing: border-box;
}
/**
/**
Explicitly load Inter var from public/ so it does not block LCP's critical path.
*/
@font-face {
font-family: 'Inter custom';
font-weight: 100 900;
font-style: normal;
font-display: block;
font-named-instance: 'Regular';
src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2');
}
@supports (font-variation-settings: normal) {
* {
font-family: 'Inter custom', sans-serif;
@font-face {
font-family: 'Inter custom';
font-weight: 100 900;
font-style: normal;
font-display: block;
font-named-instance: 'Regular';
src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2');
}
@supports (font-variation-settings: normal) {
* {
font-family: 'Inter custom', sans-serif;
}
}
html,
body {
margin: 0;
padding: 0;
}
}
html,
body {
margin: 0;
padding: 0;
}
button {
user-select: none;
}
html {
font-size: 16px;
font-variant: none;
font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
min-height: 100%;
}
@media (prefers-color-scheme: dark) {
button {
user-select: none;
}
html {
background-color: #212429;
font-size: 16px;
font-variant: none;
font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-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;
}
}
@media (prefers-color-scheme: light) {
html {
background-color: #f7f8fa;
min-height: 100%;
}
@media (prefers-color-scheme: dark) {
html {
background-color: #212429;
}
}
@media (prefers-color-scheme: light) {
html {
background-color: #f7f8fa;
}
}
}
</style>
</head>
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<!-- Triggers the font to load immediately and then is replaced by the app -->
<div>&emsp;</div>
</div>
</body>
<div id="root">
<!-- Triggers the font to load immediately and then is replaced by the app -->
<div>&emsp;</div>
</div>
</html>
\ No newline at end of file
<div id="background-radial-gradient"></div>
</body>
</html>
src/components/Tokens/TokenTable/TokenTable.tsx
View file @ 785c2a67
import { Trans } from '@lingui/macro'
import { PAGE_SIZE, useTopTokens } from 'graphql/data/TopTokens'
import { chainBackendNameToId, validateUrlChainParam } from 'graphql/data/util'
import { 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;
......@@ -46,9 +45,9 @@ const NoTokenDisplay = styled.div`
gap: 8px;
`
function NoTokensState({ chainId, message }: { chainId: number; message: ReactNode }) {
function NoTokensState({ message }: { message: ReactNode }) {
return (
<GridContainer chainId={chainId}>
<GridContainer>
<HeaderRow />
<NoTokenDisplay>{message}</NoTokenDisplay>
</GridContainer>
......@@ -65,9 +64,9 @@ const LoadingRows = ({ rowCount }: { rowCount: number }) => (
</>
)
export function LoadingTokenTable({ chainId, rowCount = PAGE_SIZE }: { chainId: number; rowCount?: number }) {
export function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) {
return (
<GridContainer chainId={chainId}>
<GridContainer>
<HeaderRow />
<TokenDataContainer>
<LoadingRows rowCount={rowCount} />
......@@ -78,18 +77,14 @@ export function LoadingTokenTable({ chainId, rowCount = PAGE_SIZE }: { chainId:
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} />
......@@ -99,10 +94,10 @@ export default function TokenTable({ setRowCount }: { setRowCount: (c: number) =
/>
)
} else if (tokens?.length === 0) {
return <NoTokensState chainId={chainId} message={<Trans>No tokens found</Trans>} />
return <NoTokensState message={<Trans>No tokens found</Trans>} />
} else {
return (
<GridContainer chainId={chainId}>
<GridContainer>
<HeaderRow />
<TokenDataContainer>
{tokens.map(
......
src/components/Widget/index.tsx
View file @ 785c2a67
......@@ -21,8 +21,6 @@ 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'
......@@ -39,10 +37,6 @@ function useWidgetTheme() {
return useIsDarkMode() ? DARK_THEME : LIGHT_THEME
}
const WidgetWrapper = styled.div`
${glowEffect}
`
export interface WidgetProps {
token?: Currency
onTokenChange?: (token: Currency) => void
......@@ -50,7 +44,7 @@ export interface WidgetProps {
}
export default function Widget({ token, onTokenChange, onReviewSwapClick }: WidgetProps) {
const { connector, provider, chainId } = useWeb3React()
const { connector, provider } = useWeb3React()
const locale = useActiveLocale()
const theme = useWidgetTheme()
const { inputs, tokenSelector } = useSyncWidgetInputs({ token, onTokenChange })
......@@ -142,7 +136,7 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
}
return (
<WidgetWrapper chainId={chainId}>
<>
<SwapWidget
disableBranding
hideConnectionUI
......@@ -165,17 +159,11 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
onSwapPriceUpdateAck={onSwapPriceUpdateAck}
/>
{tokenSelector}
</WidgetWrapper>
</>
)
}
export function WidgetSkeleton() {
const theme = useWidgetTheme()
const { chainId } = useWeb3React()
return (
<WidgetWrapper chainId={chainId}>
<SwapWidgetSkeleton theme={theme} width={WIDGET_WIDTH} />
</WidgetWrapper>
)
return <SwapWidgetSkeleton theme={theme} width={WIDGET_WIDTH} />
}
src/components/swap/styleds.tsx
View file @ 785c2a67
......@@ -4,7 +4,6 @@ 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'
......@@ -24,9 +23,7 @@ export const PageWrapper = styled.div`
`
// Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
export const SwapWrapper = styled.main`
${glowEffect}
export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
position: relative;
background: ${({ theme }) => theme.backgroundSurface};
border-radius: 16px;
......
src/constants/chainInfo.ts
View file @ 785c2a67
......@@ -6,6 +6,7 @@ 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'
......@@ -31,6 +32,8 @@ interface BaseChainInfo {
symbol: string // e.g. 'gorETH',
decimals: number // e.g. 18,
}
readonly color?: string
readonly backgroundColor?: string
}
export interface L1ChainInfo extends BaseChainInfo {
......@@ -58,6 +61,7 @@ const CHAIN_INFO: ChainInfoMap = {
label: 'Ethereum',
logoUrl: ethereumLogoUrl,
nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
color: darkTheme.chain_1,
},
[SupportedChainId.RINKEBY]: {
networkType: NetworkType.L1,
......@@ -67,6 +71,7 @@ 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,
......@@ -76,6 +81,7 @@ 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,
......@@ -85,6 +91,7 @@ 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,
......@@ -94,6 +101,7 @@ 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,
......@@ -110,6 +118,8 @@ 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,
......@@ -124,6 +134,7 @@ 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,
......@@ -138,6 +149,8 @@ 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,
......@@ -151,6 +164,7 @@ 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,
......@@ -163,6 +177,8 @@ 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,
......
src/graphql/data/util.ts
View file @ 785c2a67
......@@ -52,10 +52,6 @@ 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',
......
src/index.tsx
View file @ 785c2a67
......@@ -25,6 +25,7 @@ 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()
......@@ -35,6 +36,7 @@ if (!!window.ethereum) {
function Updaters() {
return (
<>
<RadialGradientByChainUpdater />
<ListsUpdater />
<UserUpdater />
<ApplicationUpdater />
......
src/nft/components/details/AssetPriceDetails.tsx
View file @ 785c2a67
......@@ -11,8 +11,7 @@ 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/components/text'
import { glowEffect } from 'theme/styles/glow'
import { ThemedText } from 'theme'
interface AssetPriceDetailsProps {
asset: GenieAsset
......@@ -56,8 +55,6 @@ const Container = styled.div`
`
const BestPriceContainer = styled.div`
${glowEffect}
display: flex;
flex-direction: column;
gap: 8px;
......
src/nft/components/details/InfoContainer.tsx
View file @ 785c2a67
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;
......@@ -16,6 +10,7 @@ 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;
......@@ -79,7 +74,7 @@ const InfoContainer = ({
const [isOpen, setIsOpen] = useState(!!defaultOpen)
return (
<HeaderContainer>
<div>
<Header isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
<PrimaryHeader>
{primaryHeader} <SecondaryHeader>{secondaryHeader}</SecondaryHeader>
......@@ -87,7 +82,7 @@ const InfoContainer = ({
<SecondaryHeaderContainer>{isOpen ? <ChevronUp /> : <ChevronDown />}</SecondaryHeaderContainer>
</Header>
{isOpen && <ContentContainer>{children}</ContentContainer>}
</HeaderContainer>
</div>
)
}
......
src/nft/components/explore/Table.tsx
View file @ 785c2a67
......@@ -5,8 +5,7 @@ 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 { ThemedText } from 'theme/components/text'
import { glowEffect } from 'theme/styles/glow'
import { GlowEffect, ThemedText } from 'theme'
import { Box } from '../../components/Box'
import { CollectionTableColumn } from '../../types'
......@@ -20,10 +19,6 @@ 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;
......@@ -146,7 +141,7 @@ export function Table<D extends Record<string, unknown>>({
}
return (
<TableContainer>
<GlowEffect>
<table {...getTableProps()} className={styles.table}>
<thead className={styles.thead}>
{headerGroups.map((headerGroup) => (
......@@ -223,7 +218,7 @@ export function Table<D extends Record<string, unknown>>({
})}
</tbody>
</table>
</TableContainer>
</GlowEffect>
)
}
......@@ -234,7 +229,7 @@ interface LoadingTableProps {
function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTableProps) {
return (
<TableContainer>
<GlowEffect>
<table {...props} className={styles.table}>
<thead className={styles.thead}>
{headerGroups.map((headerGroup) => (
......@@ -295,6 +290,6 @@ function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTablePr
))}
</tbody>
</table>
</TableContainer>
</GlowEffect>
)
}
src/pages/AddLiquidity/index.tsx
View file @ 785c2a67
......@@ -540,7 +540,7 @@ export default function AddLiquidity() {
)}
pendingText={pendingText}
/>
<PageWrapper chainId={chainId} wide={!hasExistingPosition}>
<PageWrapper wide={!hasExistingPosition}>
<AddRemoveTabs
creating={false}
adding={true}
......
src/pages/AddLiquidityV2/index.tsx
View file @ 785c2a67
......@@ -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 { BodyWrapper } from '../AppBody'
import AppBody 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 (
<>
<BodyWrapper chainId={chainId}>
<AppBody>
<AddRemoveTabs creating={isCreate} adding={true} defaultSlippage={DEFAULT_ADD_V2_SLIPPAGE_TOLERANCE} />
<Wrapper>
<TransactionConfirmationModal
......@@ -500,7 +500,7 @@ export default function AddLiquidity() {
)}
</AutoColumn>
</Wrapper>
</BodyWrapper>
</AppBody>
<SwitchLocaleLink />
{!addIsUnsupported ? (
......
src/pages/AppBody.tsx
View file @ 785c2a67
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<{ chainId?: number; margin?: string; maxWidth?: string }>`
${glowEffect}
export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
position: relative;
margin-top: ${({ margin }) => margin ?? '0px'};
max-width: ${({ maxWidth }) => maxWidth ?? '420px'};
......@@ -18,3 +16,10 @@ export const BodyWrapper = styled.main<{ chainId?: number; margin?: string; maxW
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>
}
src/pages/CreateProposal/index.tsx
View file @ 785c2a67
......@@ -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 { BodyWrapper } from '../AppBody'
import AppBody 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>
<BodyWrapper chainId={chainId} maxWidth="800px">
<AppBody {...{ maxWidth: '800px' }}>
<CreateProposalTabs />
<CreateProposalWrapper>
<BlueCard>
......@@ -299,7 +299,7 @@ ${bodyValue}
onProposalActionSelect={(proposalAction: ProposalAction) => handleActionChange(proposalAction)}
/>
<ProposalSubmissionModal isOpen={attempting} hash={hash} onDismiss={handleDismissSubmissionModal} />
</BodyWrapper>
</AppBody>
</PageWrapper>
</Trace>
)
......
src/pages/MigrateV2/MigrateV2Pair.tsx
View file @ 785c2a67
......@@ -722,7 +722,7 @@ export default function MigrateV2Pair() {
}
return (
<BodyWrapper chainId={chainId} style={{ padding: 24 }}>
<BodyWrapper style={{ padding: 24 }}>
<AutoColumn gap="16px">
<AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
<BackArrow to="/migrate/v2" />
......
src/pages/MigrateV2/index.tsx
View file @ 785c2a67
......@@ -113,7 +113,7 @@ export default function MigrateV2() {
return (
<>
<BodyWrapper chainId={chainId} style={{ padding: 24 }}>
<BodyWrapper style={{ padding: 24 }}>
<AutoColumn gap="16px">
<AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
<BackArrow to="/pool/v2" />
......
src/pages/Pool/index.tsx
View file @ 785c2a67
......@@ -16,7 +16,6 @@ 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'
......@@ -133,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() {
......@@ -162,7 +161,7 @@ function PositionsLoadingPlaceholder() {
)
}
function WrongNetworkCard({ chainId }: { chainId?: number }) {
function WrongNetworkCard() {
const theme = useTheme()
return (
......@@ -176,7 +175,7 @@ function WrongNetworkCard({ chainId }: { chainId?: number }) {
</ThemedText.LargeHeader>
</TitleRow>
<MainContentWrapper chainId={chainId}>
<MainContentWrapper>
<ErrorContainer>
<ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
<NetworkIcon strokeWidth={1.2} />
......@@ -204,7 +203,7 @@ export default function Pool() {
const { positions, loading: positionsLoading } = useV3Positions(account)
if (!isSupportedChain(chainId)) {
return <WrongNetworkCard chainId={chainId} />
return <WrongNetworkCard />
}
const [openPositions, closedPositions] = positions?.reduce<[PositionDetails[], PositionDetails[]]>(
......@@ -293,7 +292,7 @@ export default function Pool() {
</ButtonRow>
</TitleRow>
<MainContentWrapper chainId={chainId}>
<MainContentWrapper>
{positionsLoading ? (
<PositionsLoadingPlaceholder />
) : filteredPositions && closedPositions && filteredPositions.length > 0 ? (
......
src/pages/PoolFinder/index.tsx
View file @ 785c2a67
......@@ -26,7 +26,7 @@ import { usePairAdder } from '../../state/user/hooks'
import { StyledInternalLink } from '../../theme'
import { ThemedText } from '../../theme'
import { currencyId } from '../../utils/currencyId'
import { BodyWrapper } from '../AppBody'
import AppBody from '../AppBody'
import { Dots } from '../Pool/styleds'
enum Fields {
......@@ -99,7 +99,7 @@ export default function PoolFinder() {
return (
<Trace page={PageName.POOL_PAGE} shouldLogImpression>
<>
<BodyWrapper chainId={chainId}>
<AppBody>
<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}
/>
</BodyWrapper>
</AppBody>
<SwitchLocaleLink />
</>
</Trace>
......
src/pages/RemoveLiquidity/V3.tsx
View file @ 785c2a67
......@@ -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 { BodyWrapper } from '../AppBody'
import AppBody 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}
/>
<BodyWrapper chainId={chainId}>
<AppBody>
<AddRemoveTabs
creating={false}
adding={false}
......@@ -425,7 +425,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Loader />
)}
</Wrapper>
</BodyWrapper>
</AppBody>
</AutoColumn>
)
}
src/pages/RemoveLiquidity/index.tsx
View file @ 785c2a67
......@@ -8,7 +8,6 @@ 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'
......@@ -43,6 +42,7 @@ 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 (
<>
<BodyWrapper chainId={chainId}>
<AppBody>
<AddRemoveTabs creating={false} adding={false} defaultSlippage={DEFAULT_REMOVE_LIQUIDITY_SLIPPAGE_TOLERANCE} />
<Wrapper>
<TransactionConfirmationModal
......@@ -670,7 +670,7 @@ export default function RemoveLiquidity() {
</div>
</AutoColumn>
</Wrapper>
</BodyWrapper>
</AppBody>
{pair ? (
<AutoColumn style={{ minWidth: '20rem', width: '100%', maxWidth: '400px', marginTop: '1rem' }}>
......
src/pages/Swap/index.tsx
View file @ 785c2a67
......@@ -509,7 +509,7 @@ export default function Swap() {
showCancel={true}
/>
<PageWrapper>
<SwapWrapper id="swap-page" chainId={chainId}>
<SwapWrapper id="swap-page">
<SwapHeader allowedSlippage={allowedSlippage} />
<ConfirmSwapModal
isOpen={showConfirm}
......
src/pages/Tokens/index.tsx
View file @ 785c2a67
......@@ -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 { chainBackendNameToId, chainIdToBackendName, isValidBackendChainName } from 'graphql/data/util'
import { chainIdToBackendName, isValidBackendChainName } from 'graphql/data/util'
import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
import { useResetAtom } from 'jotai/utils'
import { Suspense, useEffect, useState } from 'react'
......@@ -93,8 +93,6 @@ const Tokens = () => {
}
})
const chainId = chainBackendNameToId(chainNameParam)
return (
<Trace page={PageName.TOKENS_PAGE} shouldLogImpression>
<ExploreContainer>
......@@ -112,7 +110,7 @@ const Tokens = () => {
<SearchBar />
</SearchContainer>
</FiltersWrapper>
<Suspense fallback={<LoadingTokenTable chainId={chainId} rowCount={rowCount} />}>
<Suspense fallback={<LoadingTokenTable rowCount={rowCount} />}>
<TokenTable setRowCount={setRowCount} />
</Suspense>
</ExploreContainer>
......
src/theme/colors.ts
View file @ 785c2a67
......@@ -86,9 +86,11 @@ export const colors = {
// TODO: add all other vibrant variations
networkEthereum: '#627EEA',
networkOptimism: '#FF0420',
networkOptimismSoft: 'rgba(255, 4, 32, 0.16)',
networkPolygon: '#A457FF',
networkArbitrum: '#28A0F0',
networkCelo: '#35D07F',
networkPolygonSoft: 'rgba(164, 87, 255, 0.16)',
networkEthereumSoft: 'rgba(98, 126, 234, 0.16)',
}
export type Theme = typeof darkTheme
......@@ -97,6 +99,21 @@ 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),
}
......@@ -144,11 +161,7 @@ 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(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)}`,
networkDefaultShadow: `0px 40px 120px ${opacify(16, colors.blue400)}`,
stateOverlayHover: opacify(8, colors.gray300),
stateOverlayPressed: opacify(24, colors.gray200),
......@@ -159,7 +172,7 @@ export const lightTheme: Theme = {
userThemeColor: colors.magentaVibrant,
background: '#FCFCFC', // INTENTIONALLY OFF THEME TO GIVE WHITE BG A SOFTER VISUAL
background: '#faf9fa', //INTENTIONALLY OFF THEME TO GIVE WHITE BG A SOFTER VISUAL
backgroundBackdrop: colors.white,
backgroundSurface: colors.white,
backgroundModule: colors.gray50,
......@@ -200,10 +213,6 @@ 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),
......
src/theme/components/RadialGradientByChainUpdater.ts 0 → 100644
View file @ 785c2a67
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
}
src/theme/components/index.tsx
View file @ 785c2a67
......@@ -477,3 +477,8 @@ 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};
`
src/theme/index.tsx
View file @ 785c2a67
......@@ -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};
background-color: ${({ theme }) => theme.background} !important;
}
a {
......
src/theme/styles/glow.tsx deleted 100644 → 0
View file @ 56a99525
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)};
`
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment