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>
This commit is contained in:
Mike Grabowski
GitHub
parent
01a44d49b0
commit
72c5e64f74
@ -1,120 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html translate="no">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>Uniswap Interface</title>
|
||||
<meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<!--
|
||||
<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" />
|
||||
<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'"
|
||||
/>
|
||||
<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');
|
||||
}
|
||||
@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;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
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) {
|
||||
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);
|
||||
}
|
||||
|
||||
#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;
|
||||
background-color: #212429;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
html {
|
||||
min-height: 100%;
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
background-color: #212429;
|
||||
}
|
||||
}
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
html {
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<div id="root">
|
||||
<!-- Triggers the font to load immediately and then is replaced by the app -->
|
||||
<div> </div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<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> </div>
|
||||
</div>
|
||||
|
||||
<div id="background-radial-gradient"></div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -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(
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -540,7 +540,7 @@ export default function AddLiquidity() {
|
||||
)}
|
||||
pendingText={pendingText}
|
||||
/>
|
||||
<PageWrapper wide={!hasExistingPosition}>
|
||||
<PageWrapper chainId={chainId} wide={!hasExistingPosition}>
|
||||
<AddRemoveTabs
|
||||
creating={false}
|
||||
adding={true}
|
||||
|
||||
@ -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 ? (
|
||||
|
||||
@ -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>
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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 ? (
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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' }}>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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),
|
||||
|
||||
@ -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
|
||||
}
|
||||
@ -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};
|
||||
`
|
||||
|
||||
@ -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 {
|
||||
|
||||
26
src/theme/styles/glow.tsx
Normal file
26
src/theme/styles/glow.tsx
Normal file
@ -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)};
|
||||
`
|
||||
Loading…
Reference in New Issue
Block a user