Skip to content

I
interface
Commit 09380698 authored by Vignesh Mohankumar's avatar Vignesh Mohankumar Committed by GitHub
Browse files
Options

refactor: split phase0 flag into redesign, explore, tokenSafety (#4347) 

* changes so far

* more changes

* lint

* remove Phase0:
parent 1d96961f
Hide whitespace changes
Inline Side-by-side
Showing with 339 additions and 303 deletions
src/components/Button/index.tsx
View file @ 09380698
......@@ -77,35 +77,35 @@ export const ButtonPrimary = styled(BaseButton)`
}
`
export const ButtonLight = styled(BaseButton)<{ phase0Flag?: boolean }>`
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentActionSoft : theme.deprecated_primary5)};
color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentAction : theme.deprecated_primaryText1)};
font-size: ${({ phase0Flag }) => (phase0Flag ? '20px' : '16px')};
font-weight: ${({ phase0Flag }) => (phase0Flag ? '600' : '500')};
export const ButtonLight = styled(BaseButton)<{ redesignFlag?: boolean }>`
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentActionSoft : theme.deprecated_primary5)};
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primaryText1)};
font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '16px')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
&:focus {
box-shadow: 0 0 0 1pt
${({ theme, disabled, phase0Flag }) =>
!disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
background-color: ${({ theme, disabled, phase0Flag }) =>
!disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
${({ theme, disabled, redesignFlag }) =>
!disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
background-color: ${({ theme, disabled, redesignFlag }) =>
!disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
}
&:hover {
background-color: ${({ theme, disabled, phase0Flag }) =>
!disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
background-color: ${({ theme, disabled, redesignFlag }) =>
!disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
}
&:active {
box-shadow: 0 0 0 1pt
${({ theme, disabled, phase0Flag }) =>
!disabled && (phase0Flag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
background-color: ${({ theme, disabled, phase0Flag }) =>
!disabled && (phase0Flag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
${({ theme, disabled, redesignFlag }) =>
!disabled && (redesignFlag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
background-color: ${({ theme, disabled, redesignFlag }) =>
!disabled && (redesignFlag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
}
:disabled {
opacity: 0.4;
:hover {
cursor: auto;
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_primary5)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_primary5)};
box-shadow: none;
border: 1px solid transparent;
outline: none;
......
src/components/CurrencyInputPanel/index.tsx
View file @ 09380698
......@@ -7,7 +7,7 @@ import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
import { AutoColumn } from 'components/Column'
import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
import { isSupportedChain } from 'constants/chains'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { darken } from 'polished'
import { ReactNode, useCallback, useState } from 'react'
import { Lock } from 'react-feather'
......@@ -26,37 +26,37 @@ import { RowBetween, RowFixed } from '../Row'
import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
import { FiatValue } from './FiatValue'
const InputPanel = styled.div<{ hideInput?: boolean; phase0Flag: boolean }>`
const InputPanel = styled.div<{ hideInput?: boolean; redesignFlag: boolean }>`
${({ theme }) => theme.flexColumnNoWrap}
position: relative;
border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
background-color: ${({ theme, phase0Flag, hideInput }) =>
phase0Flag ? theme.none : hideInput ? 'transparent' : theme.deprecated_bg2};
background-color: ${({ theme, redesignFlag, hideInput }) =>
redesignFlag ? theme.none : hideInput ? 'transparent' : theme.deprecated_bg2};
z-index: 1;
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
transition: height 1s ease;
will-change: height;
`
const FixedContainer = styled.div<{ phase0Flag: boolean }>`
const FixedContainer = styled.div<{ redesignFlag: boolean }>`
width: 100%;
height: 100%;
position: absolute;
border-radius: 20px;
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_bg2)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_bg2)};
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
`
const Container = styled.div<{ hideInput: boolean; disabled: boolean; phase0Flag: boolean }>`
const Container = styled.div<{ hideInput: boolean; disabled: boolean; redesignFlag: boolean }>`
border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_bg0)};
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_bg1)};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_bg0)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_bg1)};
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
${({ theme, hideInput, disabled, phase0Flag }) =>
!phase0Flag &&
${({ theme, hideInput, disabled, redesignFlag }) =>
!redesignFlag &&
!disabled &&
`
:focus,
......@@ -71,11 +71,11 @@ const CurrencySelect = styled(ButtonGray)<{
selected: boolean
hideInput?: boolean
disabled?: boolean
phase0Flag: boolean
redesignFlag: boolean
}>`
align-items: center;
background-color: ${({ selected, theme, phase0Flag }) =>
phase0Flag
background-color: ${({ selected, theme, redesignFlag }) =>
redesignFlag
? selected
? theme.backgroundSurface
: theme.accentAction
......@@ -86,7 +86,7 @@ const CurrencySelect = styled(ButtonGray)<{
box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
cursor: pointer;
height: ${({ hideInput, phase0Flag }) => (phase0Flag ? 'unset' : hideInput ? '2.8rem' : '2.4rem')};
height: ${({ hideInput, redesignFlag }) => (redesignFlag ? 'unset' : hideInput ? '2.8rem' : '2.4rem')};
border-radius: 16px;
outline: none;
user-select: none;
......@@ -94,41 +94,42 @@ const CurrencySelect = styled(ButtonGray)<{
font-size: 24px;
font-weight: 400;
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
padding: ${({ selected, phase0Flag }) => (phase0Flag ? (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px') : '0 8px')};
gap: ${({ phase0Flag }) => (phase0Flag ? '8px' : '0px')};
padding: ${({ selected, redesignFlag }) =>
redesignFlag ? (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px') : '0 8px'};
gap: ${({ redesignFlag }) => (redesignFlag ? '8px' : '0px')};
justify-content: space-between;
margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
:focus,
:hover {
background-color: ${({ selected, theme, phase0Flag }) =>
background-color: ${({ selected, theme, redesignFlag }) =>
selected
? phase0Flag
? redesignFlag
? theme.backgroundSurface
: theme.deprecated_bg3
: darken(0.05, theme.deprecated_primary1)};
}
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
`
const InputCurrencySelect = styled(CurrencySelect)<{ phase0Flag: boolean }>`
background-color: ${({ theme, selected, phase0Flag }) =>
phase0Flag && (selected ? theme.backgroundModule : theme.accentAction)};
const InputCurrencySelect = styled(CurrencySelect)<{ redesignFlag: boolean }>`
background-color: ${({ theme, selected, redesignFlag }) =>
redesignFlag && (selected ? theme.backgroundModule : theme.accentAction)};
:focus,
:hover {
background-color: ${({ selected, theme, phase0Flag }) =>
background-color: ${({ selected, theme, redesignFlag }) =>
selected
? phase0Flag
? redesignFlag
? theme.backgroundInteractive
: theme.deprecated_bg3
: darken(0.05, theme.deprecated_primary1)};
}
`
const InputRow = styled.div<{ selected: boolean; phase0Flag: boolean }>`
const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
${({ theme }) => theme.flexRowNoWrap}
align-items: center;
justify-content: space-between;
padding: ${({ selected, phase0Flag }) =>
phase0Flag ? '0px' : selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem'};
padding: ${({ selected, redesignFlag }) =>
redesignFlag ? '0px' : selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem'};
`
const LabelRow = styled.div`
......@@ -145,10 +146,10 @@ const LabelRow = styled.div`
}
`
const FiatRow = styled(LabelRow)<{ phase0Flag: boolean }>`
const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
justify-content: flex-end;
padding: ${({ phase0Flag }) => phase0Flag && '8px 0px'};
height: ${({ phase0Flag }) => !phase0Flag && '24px'};
padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
height: ${({ redesignFlag }) => !redesignFlag && '24px'};
`
const NoBalanceState = styled.div`
......@@ -170,34 +171,34 @@ const Aligner = styled.span`
width: 100%;
`
const StyledDropDown = styled(DropDown)<{ selected: boolean; phase0Flag: boolean }>`
const StyledDropDown = styled(DropDown)<{ selected: boolean; redesignFlag: boolean }>`
margin: 0 0.25rem 0 0.35rem;
height: 35%;
margin-left: ${({ phase0Flag }) => phase0Flag && '8px'};
margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
path {
stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
stroke-width: ${({ phase0Flag }) => (phase0Flag ? '2px' : '1.5px')};
stroke-width: ${({ redesignFlag }) => (redesignFlag ? '2px' : '1.5px')};
}
`
const StyledTokenName = styled.span<{ active?: boolean; phase0Flag: boolean }>`
const StyledTokenName = styled.span<{ active?: boolean; redesignFlag: boolean }>`
${({ active }) => (active ? ' margin: 0 0.25rem 0 0.25rem;' : ' margin: 0 0.25rem 0 0.25rem;')}
font-size: ${({ active }) => (active ? '18px' : '18px')};
font-weight: ${({ phase0Flag }) => (phase0Flag ? '600' : '500')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
`
const StyledBalanceMax = styled.button<{ disabled?: boolean; phase0Flag: boolean }>`
const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boolean }>`
background-color: transparent;
background-color: ${({ theme, phase0Flag }) => !phase0Flag && theme.deprecated_primary5};
background-color: ${({ theme, redesignFlag }) => !redesignFlag && theme.deprecated_primary5};
border: none;
text-transform: ${({ phase0Flag }) => !phase0Flag && 'uppercase'};
border-radius: ${({ phase0Flag }) => !phase0Flag && '12px'};
color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentAction : theme.deprecated_primary1)};
text-transform: ${({ redesignFlag }) => !redesignFlag && 'uppercase'};
border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'};
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primary1)};
cursor: pointer;
font-size: ${({ phase0Flag }) => (phase0Flag ? '14px' : '11px')};
font-weight: ${({ phase0Flag }) => (phase0Flag ? '600' : '500')};
margin-left: ${({ phase0Flag }) => (phase0Flag ? '0px' : '0.25rem')};
font-size: ${({ redesignFlag }) => (redesignFlag ? '14px' : '11px')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
margin-left: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0.25rem')};
opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
padding: 4px 6px;
pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
......@@ -211,11 +212,11 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean; phase0Flag: boolean
}
`
const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; phase0Flag: boolean }>`
const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesignFlag: boolean }>`
${loadingOpacityMixin};
text-align: left;
font-variant: ${({ phase0Flag }) => phase0Flag && 'small-caps'};
font-feature-settings: ${({ phase0Flag }) => phase0Flag && 'pnum on, lnum on'};
font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
font-feature-settings: ${({ redesignFlag }) => redesignFlag && 'pnum on, lnum on'};
`
interface CurrencyInputPanelProps {
......@@ -265,8 +266,8 @@ export default function CurrencyInputPanel({
}: CurrencyInputPanelProps) {
const [modalOpen, setModalOpen] = useState(false)
const { account, chainId } = useWeb3React()
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
const theme = useTheme()
......@@ -277,9 +278,9 @@ export default function CurrencyInputPanel({
const chainAllowed = isSupportedChain(chainId)
return (
<InputPanel id={id} hideInput={hideInput} {...rest} phase0Flag={phase0FlagEnabled}>
<InputPanel id={id} hideInput={hideInput} {...rest} redesignFlag={redesignFlagEnabled}>
{locked && (
<FixedContainer phase0Flag={phase0FlagEnabled}>
<FixedContainer redesignFlag={redesignFlagEnabled}>
<AutoColumn gap="sm" justify="center">
<Lock />
<ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
......@@ -288,11 +289,11 @@ export default function CurrencyInputPanel({
</AutoColumn>
</FixedContainer>
)}
<Container hideInput={hideInput} disabled={!chainAllowed} phase0Flag={phase0FlagEnabled}>
<Container hideInput={hideInput} disabled={!chainAllowed} redesignFlag={redesignFlagEnabled}>
<InputRow
style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
selected={!onCurrencySelect}
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
>
{!hideInput && (
<StyledNumericalInput
......@@ -301,7 +302,7 @@ export default function CurrencyInputPanel({
onUserInput={onUserInput}
disabled={!chainAllowed}
$loading={loading}
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
/>
)}
......@@ -310,7 +311,7 @@ export default function CurrencyInputPanel({
visible={currency !== undefined}
selected={!!currency}
hideInput={hideInput}
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
className="open-currency-select-button"
onClick={() => {
if (onCurrencySelect) {
......@@ -328,14 +329,14 @@ export default function CurrencyInputPanel({
<CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} />
) : null}
{pair ? (
<StyledTokenName className="pair-name-container" phase0Flag={phase0FlagEnabled}>
<StyledTokenName className="pair-name-container" redesignFlag={redesignFlagEnabled}>
{pair?.token0.symbol}:{pair?.token1.symbol}
</StyledTokenName>
) : (
<StyledTokenName
className="token-symbol-container"
active={Boolean(currency && currency.symbol)}
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
>
{(currency && currency.symbol && currency.symbol.length > 20
? currency.symbol.slice(0, 4) +
......@@ -345,13 +346,13 @@ export default function CurrencyInputPanel({
</StyledTokenName>
)}
</RowFixed>
{onCurrencySelect && <StyledDropDown selected={!!currency} phase0Flag={phase0FlagEnabled} />}
{onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />}
</Aligner>
</InputCurrencySelect>
</InputRow>
{phase0FlagEnabled && !currency && (
{redesignFlagEnabled && !currency && (
<NoBalanceState>
<FiatRow phase0Flag={phase0FlagEnabled}>
<FiatRow redesignFlag={redesignFlagEnabled}>
<RowBetween>
<NoBalanceDash>-</NoBalanceDash>
<NoBalanceDash>-</NoBalanceDash>
......@@ -360,7 +361,7 @@ export default function CurrencyInputPanel({
</NoBalanceState>
)}
{!hideInput && !hideBalance && currency && (
<FiatRow phase0Flag={phase0FlagEnabled}>
<FiatRow redesignFlag={redesignFlagEnabled}>
<RowBetween>
<LoadingOpacityContainer $loading={loading}>
<FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
......@@ -388,7 +389,7 @@ export default function CurrencyInputPanel({
name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
>
<StyledBalanceMax onClick={onMax} phase0Flag={phase0FlagEnabled}>
<StyledBalanceMax onClick={onMax} redesignFlag={redesignFlagEnabled}>
<Trans>Max</Trans>
</StyledBalanceMax>
</TraceEvent>
......
src/components/FeatureFlagModal/FeatureFlagModal.tsx
View file @ 09380698
import { FeatureFlag, useUpdateFlag } from 'featureFlags'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { ReactNode } from 'react'
import { X } from 'react-feather'
import { useModalIsOpen, useToggleFeatureFlags } from 'state/application/hooks'
......@@ -100,18 +101,30 @@ export default function FeatureFlagModal() {
</CloseButton>
</Header>
<FeatureFlagOption
variants={Object.values(Phase0Variant)}
value={usePhase0Flag()}
featureFlag={FeatureFlag.phase0}
label="All Phase 0 changes (redesign, explore, header)."
/>
<FeatureFlagOption
variants={Object.values(Phase1Variant)}
value={usePhase1Flag()}
featureFlag={FeatureFlag.phase1}
label="All Phase 1 changes (nft features)."
/>
<FeatureFlagOption
variants={Object.values(RedesignVariant)}
value={useRedesignFlag()}
featureFlag={FeatureFlag.redesign}
label="Redesign"
/>
<FeatureFlagOption
variants={Object.values(ExploreVariant)}
value={useExploreFlag()}
featureFlag={FeatureFlag.explore}
label="Explore"
/>
<FeatureFlagOption
variants={Object.values(ExploreVariant)}
value={useExploreFlag()}
featureFlag={FeatureFlag.explore}
label="Token Safety"
/>
</Modal>
)
}
src/components/Header/index.tsx
View file @ 09380698
......@@ -3,7 +3,7 @@ import useScrollPosition from '@react-hook/window-scroll'
import { useWeb3React } from '@web3-react/core'
import { getChainInfoOrDefault } from 'constants/chainInfo'
import { SupportedChainId } from 'constants/chains'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
import useTheme from 'hooks/useTheme'
import { darken } from 'polished'
import { NavLink, useLocation } from 'react-router-dom'
......@@ -245,7 +245,7 @@ const StyledExternalLink = styled(ExternalLink)`
`
export default function Header() {
const phase0Flag = usePhase0Flag()
const exploreFlag = useExploreFlag()
const { account, chainId } = useWeb3React()
......@@ -292,7 +292,7 @@ export default function Header() {
<StyledNavLink id={`swap-nav-link`} to={'/swap'}>
<Trans>Swap</Trans>
</StyledNavLink>
{phase0Flag === Phase0Variant.Enabled && (
{exploreFlag === ExploreVariant.Enabled && (
<StyledNavLink id={`explore-nav-link`} to={'/explore'}>
<Trans>Explore</Trans>
</StyledNavLink>
......
src/components/NumericalInput/index.tsx
View file @ 09380698
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import React from 'react'
import styled from 'styled-components/macro'
import { escapeRegExp } from '../../utils'
const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string; phase0Flag: boolean }>`
const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string; redesignFlag: boolean }>`
color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
width: 0;
position: relative;
font-weight: ${({ phase0Flag }) => (phase0Flag ? 400 : 500)};
font-weight: ${({ redesignFlag }) => (redesignFlag ? 400 : 500)};
outline: none;
border: none;
flex: 1 1 auto;
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_bg1)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_bg1)};
font-size: ${({ fontSize }) => fontSize ?? '28px'};
text-align: ${({ align }) => align && align};
white-space: nowrap;
......@@ -36,7 +36,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
}
::placeholder {
color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textSecondary : theme.deprecated_text4)};
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text4)};
}
`
......@@ -56,8 +56,8 @@ export const Input = React.memo(function InnerInput({
align?: 'right' | 'left'
prependSymbol?: string | undefined
} & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const enforcer = (nextUserInput: string) => {
if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
onUserInput(nextUserInput)
......@@ -68,7 +68,7 @@ export const Input = React.memo(function InnerInput({
<StyledInput
{...rest}
value={prependSymbol && value ? prependSymbol + value : value}
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
onChange={(event) => {
if (prependSymbol) {
const value = event.target.value
......@@ -91,7 +91,7 @@ export const Input = React.memo(function InnerInput({
// text-specific options
type="text"
pattern="^[0-9]*[.,]?[0-9]*$"
placeholder={placeholder || (phase0FlagEnabled ? '0' : '0.0')}
placeholder={placeholder || (redesignFlagEnabled ? '0' : '0.0')}
minLength={1}
maxLength={79}
spellCheck="false"
......
src/components/QuestionHelper/index.tsx
View file @ 09380698
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { ReactNode, useCallback, useState } from 'react'
import { HelpCircle } from 'react-feather'
import styled from 'styled-components/macro'
import Tooltip from '../Tooltip'
const QuestionWrapper = styled.div<{ phase0Flag: boolean }>`
const QuestionWrapper = styled.div<{ redesignFlag: boolean }>`
display: flex;
align-items: center;
justify-content: center;
......@@ -18,8 +18,8 @@ const QuestionWrapper = styled.div<{ phase0Flag: boolean }>`
cursor: default;
border-radius: 36px;
font-size: 12px;
border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
color: ${({ theme, phase0Flag }) => !phase0Flag && theme.deprecated_text2};
border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
color: ${({ theme, redesignFlag }) => !redesignFlag && theme.deprecated_text2};
:hover,
:focus {
......@@ -27,12 +27,12 @@ const QuestionWrapper = styled.div<{ phase0Flag: boolean }>`
}
`
const QuestionMark = styled.span<{ phase0Flag?: boolean }>`
const QuestionMark = styled.span<{ redesignFlag?: boolean }>`
font-size: 14px;
margin-left: ${({ phase0Flag }) => phase0Flag && '8px'};
align-items: ${({ phase0Flag }) => phase0Flag && 'center'};
color: ${({ theme, phase0Flag }) => phase0Flag && theme.textSecondary};
margin-top: ${({ phase0Flag }) => phase0Flag && '2.5px'};
margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
align-items: ${({ redesignFlag }) => redesignFlag && 'center'};
color: ${({ theme, redesignFlag }) => redesignFlag && theme.textSecondary};
margin-top: ${({ redesignFlag }) => redesignFlag && '2.5px'};
`
export default function QuestionHelper({ text }: { text: ReactNode; size?: number }) {
......@@ -40,14 +40,14 @@ export default function QuestionHelper({ text }: { text: ReactNode; size?: numbe
const open = useCallback(() => setShow(true), [setShow])
const close = useCallback(() => setShow(false), [setShow])
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
return (
<span style={{ marginLeft: 4, display: 'flex', alignItems: 'center' }}>
<Tooltip text={text} show={show}>
<QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close} phase0Flag={phase0FlagEnabled}>
<QuestionMark phase0Flag={phase0FlagEnabled}>
{phase0FlagEnabled ? <HelpCircle size={16}></HelpCircle> : '?'}
<QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close} redesignFlag={redesignFlagEnabled}>
<QuestionMark redesignFlag={redesignFlagEnabled}>
{redesignFlagEnabled ? <HelpCircle size={16}></HelpCircle> : '?'}
</QuestionMark>
</QuestionWrapper>
</Tooltip>
......
src/components/SearchModal/CommonBases.tsx
View file @ 09380698
......@@ -6,7 +6,7 @@ import { AutoColumn } from 'components/Column'
import CurrencyLogo from 'components/CurrencyLogo'
import { AutoRow } from 'components/Row'
import { COMMON_BASES } from 'constants/routing'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
import { Text } from 'rebass'
import styled from 'styled-components/macro'
......@@ -18,17 +18,17 @@ const MobileWrapper = styled(AutoColumn)`
`};
`
const BaseWrapper = styled.div<{ disable?: boolean; phase0Flag?: boolean }>`
const BaseWrapper = styled.div<{ disable?: boolean; redesignFlag?: boolean }>`
border: 1px solid
${({ theme, disable, phase0Flag }) =>
${({ theme, disable, redesignFlag }) =>
disable
? phase0Flag
? redesignFlag
? theme.accentAction
: theme.none
: phase0Flag
: redesignFlag
? theme.backgroundOutline
: theme.deprecated_bg3};
border-radius: ${({ phase0Flag }) => (phase0Flag ? '16px' : '10px')};
border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '10px')};
display: flex;
padding: 6px;
padding-right: 12px;
......@@ -36,14 +36,15 @@ const BaseWrapper = styled.div<{ disable?: boolean; phase0Flag?: boolean }>`
align-items: center;
:hover {
cursor: ${({ disable }) => !disable && 'pointer'};
background-color: ${({ theme, disable, phase0Flag }) =>
(phase0Flag && theme.hoverDefault) || (!disable && theme.deprecated_bg2)};
background-color: ${({ theme, disable, redesignFlag }) =>
(redesignFlag && theme.hoverDefault) || (!disable && theme.deprecated_bg2)};
}
color: ${({ theme, disable, phase0Flag }) => disable && (phase0Flag ? theme.accentAction : theme.deprecated_text3)};
background-color: ${({ theme, disable, phase0Flag }) =>
disable && (phase0Flag ? theme.accentActionSoft : theme.deprecated_bg3)};
filter: ${({ disable, phase0Flag }) => disable && !phase0Flag && 'grayscale(1)'};
color: ${({ theme, disable, redesignFlag }) =>
disable && (redesignFlag ? theme.accentAction : theme.deprecated_text3)};
background-color: ${({ theme, disable, redesignFlag }) =>
disable && (redesignFlag ? theme.accentActionSoft : theme.deprecated_bg3)};
filter: ${({ disable, redesignFlag }) => disable && !redesignFlag && 'grayscale(1)'};
`
const formatAnalyticsEventProperties = (currency: Currency, searchQuery: string, isAddressSearch: string | false) => ({
......@@ -72,8 +73,8 @@ export default function CommonBases({
isAddressSearch: string | false
}) {
const bases = typeof chainId !== 'undefined' ? COMMON_BASES[chainId] ?? [] : []
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
return bases.length > 0 ? (
<MobileWrapper gap="md">
......@@ -94,7 +95,7 @@ export default function CommonBases({
onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
onClick={() => !isSelected && onSelect(currency)}
disable={isSelected}
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
key={currencyId(currency)}
>
<CurrencyLogoFromList currency={currency} />
......
src/components/SearchModal/CurrencyList/index.tsx
View file @ 09380698
......@@ -7,7 +7,8 @@ import { LightGreyCard } from 'components/Card'
import QuestionHelper from 'components/QuestionHelper'
import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
import { checkWarning } from 'constants/tokenSafety'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
import useTheme from 'hooks/useTheme'
import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
import { Check } from 'react-feather'
......@@ -142,8 +143,9 @@ function CurrencyRow({
const customAdded = useIsUserAddedToken(currency)
const balance = useCurrencyBalance(account ?? undefined, currency)
const warning = currency.isNative ? null : checkWarning(currency.address)
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const tokenSafetyFlag = useTokenSafetyFlag()
// only show add or remove buttons if not on selected list
return (
......@@ -155,7 +157,7 @@ function CurrencyRow({
>
<MenuItem
tabIndex={0}
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
style={style}
className={`token-item-${key}`}
onKeyPress={(e) => (!isSelected && e.key === 'Enter' ? onSelect() : null)}
......@@ -170,7 +172,7 @@ function CurrencyRow({
<Row>
<CurrencyName title={currency.name}>{currency.name}</CurrencyName>
{phase0FlagEnabled && <TokenSafetyIcon warning={warning} />}
{tokenSafetyFlag === TokenSafetyVariant.Enabled && <TokenSafetyIcon warning={warning} />}
</Row>
<ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
{!currency.isNative && !isOnSelectedList && customAdded ? (
......@@ -188,10 +190,10 @@ function CurrencyRow({
{showCurrencyAmount ? (
<RowFixed style={{ justifySelf: 'flex-end' }}>
{balance ? <Balance balance={balance} /> : account ? <Loader /> : null}
{phase0FlagEnabled && isSelected && <CheckIcon />}
{redesignFlagEnabled && isSelected && <CheckIcon />}
</RowFixed>
) : (
phase0FlagEnabled &&
redesignFlagEnabled &&
isSelected && (
<RowFixed style={{ justifySelf: 'flex-end' }}>
<CheckIcon />
......
src/components/SearchModal/CurrencySearch.tsx
View file @ 09380698
......@@ -5,7 +5,7 @@ import { useWeb3React } from '@web3-react/core'
import { EventName, ModalName } from 'components/AmplitudeAnalytics/constants'
import { Trace } from 'components/AmplitudeAnalytics/Trace'
import { sendEvent } from 'components/analytics'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import useDebounce from 'hooks/useDebounce'
import { useOnClickOutside } from 'hooks/useOnClickOutside'
import useTheme from 'hooks/useTheme'
......@@ -31,8 +31,8 @@ import CurrencyList from './CurrencyList'
import ImportRow from './ImportRow'
import { PaddedColumn, SearchInput, Separator } from './styleds'
const ContentWrapper = styled(Column)<{ phase0Flag?: boolean }>`
background-color: ${({ theme, phase0Flag }) => phase0Flag && theme.backgroundSurface};
const ContentWrapper = styled(Column)<{ redesignFlag?: boolean }>`
background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundSurface};
width: 100%;
flex: 1 1;
position: relative;
......@@ -75,8 +75,8 @@ export function CurrencySearch({
showImportView,
setImportToken,
}: CurrencySearchProps) {
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const { chainId } = useWeb3React()
const theme = useTheme()
......@@ -196,7 +196,7 @@ export function CurrencySearch({
}, [])
return (
<ContentWrapper phase0Flag={phase0FlagEnabled}>
<ContentWrapper redesignFlag={redesignFlagEnabled}>
<Trace name={EventName.TOKEN_SELECTOR_OPENED} modal={ModalName.TOKEN_SELECTOR} shouldLogImpression>
<PaddedColumn gap="16px">
<RowBetween>
......@@ -211,7 +211,7 @@ export function CurrencySearch({
id="token-search-input"
placeholder={t`Search name or paste address`}
autoComplete="off"
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
value={searchQuery}
ref={inputRef as RefObject<HTMLInputElement>}
onChange={handleInput}
......@@ -228,7 +228,7 @@ export function CurrencySearch({
/>
)}
</PaddedColumn>
<Separator phase0Flag={phase0FlagEnabled} />
<Separator redesignFlag={redesignFlagEnabled} />
{searchToken && !searchTokenIsAdded ? (
<Column style={{ padding: '20px 0', height: '100%' }}>
<ImportRow token={searchToken} showImportView={showImportView} setImportToken={setImportToken} />
......@@ -262,7 +262,7 @@ export function CurrencySearch({
</ThemedText.DeprecatedMain>
</Column>
)}
{!phase0FlagEnabled && (
{!redesignFlagEnabled && (
<Footer>
<Row justify="center">
<ButtonText
......
src/components/SearchModal/CurrencySearchModal.tsx
View file @ 09380698
import { Currency, Token } from '@uniswap/sdk-core'
import { TokenList } from '@uniswap/token-lists'
import TokenSafety from 'components/TokenSafety'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
import usePrevious from 'hooks/usePrevious'
import { useCallback, useEffect, useState } from 'react'
import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
......@@ -75,7 +75,7 @@ export default function CurrencySearchModal({
[setModalView, prevView]
)
const phase0Flag = usePhase0Flag()
const tokenSafetyFlag = useTokenSafetyFlag()
// change min height if not searching
let minHeight: number | undefined = 80
......@@ -102,7 +102,7 @@ export default function CurrencySearchModal({
if (importToken) {
minHeight = undefined
content =
phase0Flag === Phase0Variant.Enabled ? (
tokenSafetyFlag === TokenSafetyVariant.Enabled ? (
<TokenSafety
tokenAddress={importToken.address}
onContinue={() => handleCurrencySelect(importToken)}
......
src/components/SearchModal/styleds.tsx
View file @ 09380698
......@@ -21,7 +21,7 @@ export const PaddedColumn = styled(AutoColumn)`
padding: 20px;
`
export const MenuItem = styled(RowBetween)<{ phase0Flag?: boolean }>`
export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean }>`
padding: 4px 20px;
height: 56px;
display: grid;
......@@ -30,47 +30,47 @@ export const MenuItem = styled(RowBetween)<{ phase0Flag?: boolean }>`
cursor: ${({ disabled }) => !disabled && 'pointer'};
pointer-events: ${({ disabled }) => disabled && 'none'};
:hover {
background-color: ${({ theme, disabled, phase0Flag }) =>
(phase0Flag && theme.hoverDefault) || (!disabled && theme.deprecated_bg2)};
background-color: ${({ theme, disabled, redesignFlag }) =>
(redesignFlag && theme.hoverDefault) || (!disabled && theme.deprecated_bg2)};
}
opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
`
export const SearchInput = styled.input<{ phase0Flag?: boolean }>`
export const SearchInput = styled.input<{ redesignFlag?: boolean }>`
position: relative;
display: flex;
padding: 16px;
height: ${({ phase0Flag }) => phase0Flag && '40px'};
height: ${({ redesignFlag }) => redesignFlag && '40px'};
align-items: center;
width: 100%;
white-space: nowrap;
background: none;
background-color: ${({ theme, phase0Flag }) => phase0Flag && theme.backgroundModule};
background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundModule};
border: none;
outline: none;
border-radius: ${({ phase0Flag }) => (phase0Flag ? '12px' : '20px')};
border-radius: ${({ redesignFlag }) => (redesignFlag ? '12px' : '20px')};
color: ${({ theme }) => theme.deprecated_text1};
border-style: solid;
border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg3)};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg3)};
-webkit-appearance: none;
font-size: ${({ phase0Flag }) => (phase0Flag ? '16px' : '18px')};
font-size: ${({ redesignFlag }) => (redesignFlag ? '16px' : '18px')};
::placeholder {
color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textTertiary : theme.deprecated_text3)};
font-size: ${({ phase0Flag }) => phase0Flag && '16px'};
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textTertiary : theme.deprecated_text3)};
font-size: ${({ redesignFlag }) => redesignFlag && '16px'};
}
transition: border 100ms;
:focus {
border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? 'transparent' : theme.deprecated_primary1)};
background-color: ${({ theme, phase0Flag }) => phase0Flag && theme.accentActionSoft};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_primary1)};
background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.accentActionSoft};
outline: none;
}
`
export const Separator = styled.div<{ phase0Flag?: boolean }>`
export const Separator = styled.div<{ redesignFlag?: boolean }>`
width: 100%;
height: 1px;
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg2)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg2)};
`
export const SeparatorDark = styled.div`
......
src/components/Settings/index.tsx
View file @ 09380698
......@@ -3,7 +3,7 @@ import { t, Trans } from '@lingui/macro'
import { Percent } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core'
import { sendEvent } from 'components/analytics'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { isSupportedChainId } from 'lib/hooks/routing/clientSideSmartOrderRouter'
import { useContext, useRef, useState } from 'react'
import { Settings, X } from 'react-feather'
......@@ -23,16 +23,16 @@ import { RowBetween, RowFixed } from '../Row'
import Toggle from '../Toggle'
import TransactionSettings from '../TransactionSettings'
const StyledMenuIcon = styled(Settings)<{ phase0Flag: boolean }>`
const StyledMenuIcon = styled(Settings)<{ redesignFlag: boolean }>`
height: 20px;
width: 20px;
> * {
stroke: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textSecondary : theme.deprecated_text1)};
stroke: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
}
`
const StyledCloseIcon = styled(X)<{ phase0Flag: boolean }>`
const StyledCloseIcon = styled(X)<{ redesignFlag: boolean }>`
height: 20px;
width: 20px;
:hover {
......@@ -40,7 +40,7 @@ const StyledCloseIcon = styled(X)<{ phase0Flag: boolean }>`
}
> * {
stroke: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textSecondary : theme.deprecated_text1)};
stroke: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
}
`
......@@ -83,10 +83,10 @@ const StyledMenu = styled.div`
text-align: left;
`
const MenuFlyout = styled.span<{ phase0Flag: boolean }>`
const MenuFlyout = styled.span<{ redesignFlag: boolean }>`
min-width: 20.125rem;
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg2)};
border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg3)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg2)};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg3)};
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);
border-radius: 12px;
......@@ -97,7 +97,7 @@ const MenuFlyout = styled.span<{ phase0Flag: boolean }>`
top: 2rem;
right: 0rem;
z-index: 100;
color: ${({ theme, phase0Flag }) => phase0Flag && theme.textPrimary};
color: ${({ theme, redesignFlag }) => redesignFlag && theme.textPrimary};
${({ theme }) => theme.mediaWidth.upToMedium`
min-width: 18.125rem;
......@@ -123,8 +123,8 @@ const ModalContentWrapper = styled.div`
export default function SettingsTab({ placeholderSlippage }: { placeholderSlippage: Percent }) {
const { chainId } = useWeb3React()
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const node = useRef<HTMLDivElement>()
const open = useModalIsOpen(ApplicationModal.SETTINGS)
......@@ -152,7 +152,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
<Text fontWeight={500} fontSize={20}>
<Trans>Are you sure?</Trans>
</Text>
<StyledCloseIcon onClick={() => setShowConfirmation(false)} phase0Flag={phase0FlagEnabled} />
<StyledCloseIcon onClick={() => setShowConfirmation(false)} redesignFlag={redesignFlagEnabled} />
</RowBetween>
<Break />
<AutoColumn gap="lg" style={{ padding: '0 2rem' }}>
......@@ -190,7 +190,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
id="open-settings-dialog-button"
aria-label={t`Transaction Settings`}
>
<StyledMenuIcon phase0Flag={phase0FlagEnabled} />
<StyledMenuIcon redesignFlag={redesignFlagEnabled} />
{expertMode ? (
<EmojiWrapper>
<span role="img" aria-label="wizard-icon">
......@@ -200,10 +200,10 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
) : null}
</StyledMenuButton>
{open && (
<MenuFlyout phase0Flag={phase0FlagEnabled}>
<MenuFlyout redesignFlag={redesignFlagEnabled}>
<AutoColumn gap="md" style={{ padding: '1rem' }}>
<Text fontWeight={600} fontSize={14}>
<Trans>{phase0FlagEnabled ? 'Settings' : 'Transaction Settings'}</Trans>
<Trans>{redesignFlagEnabled ? 'Settings' : 'Transaction Settings'}</Trans>
</Text>
<TransactionSettings placeholderSlippage={placeholderSlippage} />
<Text fontWeight={600} fontSize={14}>
......
src/components/Toggle/index.tsx
View file @ 09380698
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { darken } from 'polished'
import { useState } from 'react'
import styled, { keyframes } from 'styled-components/macro'
const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean; phase0Flag: boolean }>`
const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean; redesignFlag: boolean }>`
align-items: center;
background: ${({ isActive, theme, phase0Flag }) =>
phase0Flag && isActive ? theme.accentActionSoft : theme.deprecated_bg1};
background: ${({ isActive, theme, redesignFlag }) =>
redesignFlag && isActive ? theme.accentActionSoft : theme.deprecated_bg1};
border: none;
border-radius: 20px;
cursor: pointer;
......@@ -73,8 +73,8 @@ interface ToggleProps {
export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
const [isInitialToggleLoad, setIsInitialToggleLoad] = useState(true)
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const switchToggle = () => {
toggle()
......@@ -82,7 +82,7 @@ export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
}
return (
<Wrapper id={id} isActive={isActive} onClick={switchToggle} phase0Flag={phase0FlagEnabled}>
<Wrapper id={id} isActive={isActive} onClick={switchToggle} redesignFlag={redesignFlagEnabled}>
<ToggleElement isActive={isActive} bgColor={bgColor} isInitialToggleLoad={isInitialToggleLoad} />
</Wrapper>
)
......
src/components/TransactionSettings/index.tsx
View file @ 09380698
......@@ -3,7 +3,7 @@ import { Percent } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core'
import { L2_CHAIN_IDS } from 'constants/chains'
import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import ms from 'ms.macro'
import { darken } from 'polished'
import { useContext, useState } from 'react'
......@@ -42,9 +42,9 @@ const FancyButton = styled.button`
}
`
const Option = styled(FancyButton)<{ active: boolean; phase0Flag: boolean }>`
const Option = styled(FancyButton)<{ active: boolean; redesignFlag: boolean }>`
margin-right: 8px;
border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
:hover {
cursor: pointer;
}
......@@ -52,10 +52,10 @@ const Option = styled(FancyButton)<{ active: boolean; phase0Flag: boolean }>`
color: ${({ active, theme }) => (active ? theme.deprecated_white : theme.deprecated_text1)};
`
const Input = styled.input<{ phase0Flag: boolean }>`
const Input = styled.input<{ redesignFlag: boolean }>`
background: ${({ theme }) => theme.deprecated_bg1};
font-size: 16px;
border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
width: auto;
outline: none;
&::-webkit-outer-spin-button,
......@@ -66,11 +66,11 @@ const Input = styled.input<{ phase0Flag: boolean }>`
text-align: right;
`
const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean; phase0Flag: boolean }>`
const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean; redesignFlag: boolean }>`
height: 2rem;
position: relative;
padding: 0 0.75rem;
border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
flex: 1;
border: ${({ theme, active, warning }) =>
active
......@@ -105,8 +105,8 @@ const THREE_DAYS_IN_SECONDS = ms`3 days` / 1000
export default function TransactionSettings({ placeholderSlippage }: TransactionSettingsProps) {
const { chainId } = useWeb3React()
const theme = useContext(ThemeContext)
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const userSlippageTolerance = useUserSlippageTolerance()
const setUserSlippageTolerance = useSetUserSlippageTolerance()
......@@ -182,7 +182,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
</RowFixed>
<RowBetween>
<Option
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
onClick={() => {
parseSlippageInput('')
}}
......@@ -191,7 +191,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
<Trans>Auto</Trans>
</Option>
<OptionCustom
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
active={userSlippageTolerance !== 'auto'}
warning={!!slippageError}
tabIndex={-1}
......@@ -205,7 +205,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
</SlippageEmojiContainer>
) : null}
<Input
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
placeholder={placeholderSlippage.toFixed(2)}
value={
slippageInput.length > 0
......@@ -259,10 +259,10 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
style={{ width: '80px' }}
warning={!!deadlineError}
tabIndex={-1}
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
>
<Input
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
placeholder={(DEFAULT_DEADLINE_FROM_NOW / 60).toString()}
value={
deadlineInput.length > 0
......
src/components/swap/AdvancedSwapDetails.tsx
View file @ 09380698
......@@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core'
import Card from 'components/Card'
import { LoadingRows } from 'components/Loader/styled'
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import useNativeCurrency from 'lib/hooks/useNativeCurrency'
import { useContext, useMemo } from 'react'
import { InterfaceTrade } from 'state/routing/types'
......@@ -55,8 +55,8 @@ export function AdvancedSwapDetails({
const theme = useContext(ThemeContext)
const { chainId } = useWeb3React()
const nativeCurrency = useNativeCurrency()
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const { expectedOutputAmount, priceImpact } = useMemo(() => {
return {
......@@ -109,7 +109,7 @@ export function AdvancedSwapDetails({
</ThemedText.DeprecatedBlack>
</TextWithLoadingPlaceholder>
</RowBetween>
<Separator phase0Flag={phase0FlagEnabled} />
<Separator redesignFlag={redesignFlagEnabled} />
<RowBetween>
<RowFixed style={{ marginRight: '20px' }}>
<MouseoverTooltip
......
src/components/swap/SwapDetailsDropdown.tsx
View file @ 09380698
......@@ -10,7 +10,7 @@ import { LoadingOpacityContainer } from 'components/Loader/styled'
import Row, { RowBetween, RowFixed } from 'components/Row'
import { MouseoverTooltipContent } from 'components/Tooltip'
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { useState } from 'react'
import { ChevronDown, Info } from 'react-feather'
import { InterfaceTrade } from 'state/routing/types'
......@@ -35,20 +35,20 @@ const StyledInfoIcon = styled(Info)`
color: ${({ theme }) => theme.deprecated_text3};
`
const StyledCard = styled(OutlineCard)<{ phase0Flag: boolean }>`
const StyledCard = styled(OutlineCard)<{ redesignFlag: boolean }>`
padding: 12px;
border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg3)};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg3)};
`
const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; phase0Flag: boolean }>`
padding: ${({ phase0Flag }) => (phase0Flag ? '8px 0px 0px 0px' : '4px 8px')};
background-color: ${({ open, theme, phase0Flag }) => (open && !phase0Flag ? theme.deprecated_bg1 : theme.none)};
const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; redesignFlag: boolean }>`
padding: ${({ redesignFlag }) => (redesignFlag ? '8px 0px 0px 0px' : '4px 8px')};
background-color: ${({ open, theme, redesignFlag }) => (open && !redesignFlag ? theme.deprecated_bg1 : theme.none)};
align-items: center;
border-top: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.none)};
margin-top: ${({ phase0Flag }) => phase0Flag && '8px'};
border-top: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.none)};
margin-top: ${({ redesignFlag }) => redesignFlag && '8px'};
cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
min-height: 40px;
border-radius: ${({ phase0Flag }) => !phase0Flag && '12px'};
border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'};
`
const RotatingArrow = styled(ChevronDown)<{ open?: boolean }>`
......@@ -128,8 +128,8 @@ export default function SwapDetailsDropdown({
const theme = useTheme()
const { chainId } = useWeb3React()
const [showDetails, setShowDetails] = useState(false)
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
return (
<Wrapper style={{ marginTop: '8px' }}>
......@@ -141,7 +141,7 @@ export default function SwapDetailsDropdown({
shouldLogImpression={!showDetails}
>
<StyledHeaderRow
phase0Flag={phase0FlagEnabled}
redesignFlag={redesignFlagEnabled}
onClick={() => setShowDetails(!showDetails)}
disabled={!trade}
open={showDetails}
......@@ -212,7 +212,7 @@ export default function SwapDetailsDropdown({
<AnimatedDropdown open={showDetails}>
<AutoColumn gap={'8px'} style={{ padding: '0', paddingBottom: '8px' }}>
{trade ? (
<StyledCard phase0Flag={phase0FlagEnabled}>
<StyledCard redesignFlag={redesignFlagEnabled}>
<AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />
</StyledCard>
) : null}
......
src/components/swap/SwapModalHeader.tsx
View file @ 09380698
......@@ -4,7 +4,7 @@ import { Price } from '@uniswap/sdk-core'
import { sendAnalyticsEvent } from 'components/AmplitudeAnalytics'
import { EventName, SWAP_PRICE_UPDATE_USER_RESPONSE } from 'components/AmplitudeAnalytics/constants'
import { formatPercentInBasisPointsNumber } from 'components/AmplitudeAnalytics/utils'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { useContext, useEffect, useState } from 'react'
import { AlertTriangle, ArrowDown } from 'react-feather'
import { Text } from 'rebass'
......@@ -25,11 +25,11 @@ import TradePrice from '../swap/TradePrice'
import { AdvancedSwapDetails } from './AdvancedSwapDetails'
import { SwapShowAcceptChanges, TruncatedText } from './styleds'
const ArrowWrapper = styled.div<{ phase0Flag: boolean }>`
const ArrowWrapper = styled.div<{ redesignFlag: boolean }>`
padding: 4px;
border-radius: 12px;
height: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
width: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
position: relative;
margin-top: -18px;
margin-bottom: -18px;
......@@ -37,9 +37,9 @@ const ArrowWrapper = styled.div<{ phase0Flag: boolean }>`
display: flex;
justify-content: center;
align-items: center;
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg1)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg1)};
border: 4px solid;
border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundModule : theme.deprecated_bg0)};
border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundModule : theme.deprecated_bg0)};
z-index: 2;
`
......@@ -85,8 +85,8 @@ export default function SwapModalHeader({
onAcceptChanges: () => void
}) {
const theme = useContext(ThemeContext)
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const [showInverted, setShowInverted] = useState<boolean>(false)
const [lastExecutionPrice, setLastExecutionPrice] = useState(trade.executionPrice)
......@@ -137,8 +137,8 @@ export default function SwapModalHeader({
</RowBetween>
</AutoColumn>
</LightCard>
<ArrowWrapper phase0Flag={phase0FlagEnabled}>
<ArrowDown size="16" color={phase0FlagEnabled ? theme.textPrimary : theme.deprecated_text2} />
<ArrowWrapper redesignFlag={redesignFlagEnabled}>
<ArrowDown size="16" color={redesignFlagEnabled ? theme.textPrimary : theme.deprecated_text2} />
</ArrowWrapper>
<LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
<AutoColumn gap={'8px'}>
......
src/components/swap/SwapRoute.tsx
View file @ 09380698
......@@ -12,7 +12,7 @@ import { LoadingRows } from 'components/Loader/styled'
import RoutingDiagram from 'components/RoutingDiagram/RoutingDiagram'
import { AutoRow, RowBetween } from 'components/Row'
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
import { memo, useState } from 'react'
import { Plus } from 'react-feather'
......@@ -23,12 +23,12 @@ import { Separator, ThemedText } from 'theme'
import { AutoRouterLabel, AutoRouterLogo } from './RouterLabel'
const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean; phase0Flag: boolean }>`
const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean; redesignFlag: boolean }>`
padding: ${({ fixedOpen }) => (fixedOpen ? '12px' : '12px 8px 12px 12px')};
border-radius: 16px;
border: 1px solid
${({ theme, fixedOpen, phase0Flag }) =>
fixedOpen ? 'transparent' : phase0Flag ? theme.backgroundOutline : theme.deprecated_bg2};
${({ theme, fixedOpen, redesignFlag }) =>
fixedOpen ? 'transparent' : redesignFlag ? theme.backgroundOutline : theme.deprecated_bg2};
cursor: pointer;
`
......@@ -56,8 +56,8 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
const routes = getTokenPath(trade)
const [open, setOpen] = useState(false)
const { chainId } = useWeb3React()
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const [darkMode] = useDarkModeManager()
......@@ -68,7 +68,7 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
: undefined
return (
<Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen} phase0Flag={phase0FlagEnabled}>
<Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen} redesignFlag={redesignFlagEnabled}>
<TraceEvent
events={[Event.onClick]}
name={EventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED}
......
src/components/swap/styleds.tsx
View file @ 09380698
......@@ -15,19 +15,19 @@ export const Wrapper = styled.div`
padding: 8px;
`
export const ArrowWrapper = styled.div<{ clickable: boolean; phase0Flag: boolean }>`
export const ArrowWrapper = styled.div<{ clickable: boolean; redesignFlag: boolean }>`
padding: 4px;
border-radius: 12px;
height: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
width: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
position: relative;
margin-top: -14px;
margin-bottom: ${({ phase0Flag }) => (phase0Flag ? '-18px' : '-14px')};
margin-bottom: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
left: calc(50% - 16px);
/* transform: rotate(90deg); */
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg1)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg1)};
border: 4px solid;
border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundModule : theme.deprecated_bg0)};
border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundModule : theme.deprecated_bg0)};
z-index: 2;
${({ clickable }) =>
......
src/featureFlags/flags/explore.ts 0 → 100644
View file @ 09380698
import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
export function useExploreFlag(): BaseVariant {
return useBaseFlag(FeatureFlag.explore)
}
export { BaseVariant as ExploreVariant }
src/featureFlags/flags/phase0.ts deleted 100644 → 0
View file @ 1d96961f
import { BaseVariant, useBaseFlag } from '../index'
export function usePhase0Flag(): BaseVariant {
return useBaseFlag('phase0')
}
export { BaseVariant as Phase0Variant }
src/featureFlags/flags/phase1.ts
View file @ 09380698
import { BaseVariant, useBaseFlag } from '../index'
import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
export function usePhase1Flag(): BaseVariant {
return useBaseFlag('phase1')
return useBaseFlag(FeatureFlag.phase1)
}
export { BaseVariant as Phase1Variant }
src/featureFlags/flags/redesign.ts 0 → 100644
View file @ 09380698
import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
export function useRedesignFlag(): BaseVariant {
return useBaseFlag(FeatureFlag.redesign)
}
export { BaseVariant as RedesignVariant }
src/featureFlags/flags/tokenSafety.ts 0 → 100644
View file @ 09380698
import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
export function useTokenSafetyFlag(): BaseVariant {
return useBaseFlag(FeatureFlag.tokenSafety)
}
export { BaseVariant as TokenSafetyVariant }
src/featureFlags/index.tsx
View file @ 09380698
......@@ -54,8 +54,10 @@ export enum BaseVariant {
}
export enum FeatureFlag {
phase0 = 'phase0',
explore = 'explore',
phase1 = 'phase1',
redesign = 'redesign',
tokenSafety = 'tokenSafety',
}
export function useBaseFlag(flag: string): BaseVariant {
......
src/pages/App.tsx
View file @ 09380698
......@@ -4,7 +4,7 @@ import { Trace } from 'components/AmplitudeAnalytics/Trace'
import Loader from 'components/Loader'
import TopLevelModals from 'components/TopLevelModals'
import { useFeatureFlagsIsLoaded } from 'featureFlags'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
import { lazy, Suspense, useEffect } from 'react'
import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
......@@ -104,7 +104,7 @@ const LazyLoadSpinner = () => (
export default function App() {
const isLoaded = useFeatureFlagsIsLoaded()
const phase0Flag = usePhase0Flag()
const exploreFlag = useExploreFlag()
const { pathname } = useLocation()
const currentPage = getCurrentPageFromLocation(pathname)
......@@ -150,7 +150,7 @@ export default function App() {
<Suspense fallback={<Loader />}>
{isLoaded ? (
<Routes>
{phase0Flag === Phase0Variant.Enabled && (
{exploreFlag === ExploreVariant.Enabled && (
<>
<Route path="/explore" element={<Explore />} />
<Route
......
src/pages/AppBody.tsx
View file @ 09380698
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import React from 'react'
import styled from 'styled-components/macro'
import { Z_INDEX } from 'theme'
export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string; phase0Flag?: boolean }>`
export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string; redesignFlag?: boolean }>`
position: relative;
margin-top: ${({ margin }) => margin ?? '0px'};
max-width: ${({ maxWidth, phase0Flag }) => maxWidth ?? (phase0Flag ? '420px' : '480px')};
max-width: ${({ maxWidth, redesignFlag }) => maxWidth ?? (redesignFlag ? '420px' : '480px')};
width: 100%;
background: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg0)};
border-radius: ${({ phase0Flag }) => (phase0Flag ? '16px' : '24px')};
border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.none)};
background: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '24px')};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.none)};
margin-top: 1rem;
margin-left: auto;
margin-right: auto;
z-index: ${Z_INDEX.deprecated_content};
font-feature-settings: ${({ phase0Flag }) => phase0Flag && "'ss02' off"};
box-shadow: ${({ phase0Flag }) =>
!phase0Flag &&
font-feature-settings: ${({ redesignFlag }) => redesignFlag && "'ss02' off"};
box-shadow: ${({ redesignFlag }) =>
!redesignFlag &&
'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)'};
`
......@@ -25,10 +25,10 @@ export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string; pha
* The styled container element that wraps the content of most pages and the tabs.
*/
export default function AppBody({ children, ...rest }: { children: React.ReactNode }) {
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
return (
<BodyWrapper {...rest} phase0Flag={phase0FlagEnabled}>
<BodyWrapper {...rest} redesignFlag={redesignFlagEnabled}>
{children}
</BodyWrapper>
)
......
src/pages/Swap/index.tsx
View file @ 09380698
......@@ -22,7 +22,7 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
import { MouseoverTooltip } from 'components/Tooltip'
import { isSupportedChain } from 'constants/chains'
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { useSwapCallback } from 'hooks/useSwapCallback'
import useTransactionDeadline from 'hooks/useTransactionDeadline'
import JSBI from 'jsbi'
......@@ -90,9 +90,9 @@ const ArrowUpWrapper = styled.div`
margin-left: 56%;
margin-top: -18%;
`
const BottomWrapper = styled.div<{ phase0Flag: boolean }>`
${({ phase0Flag }) =>
phase0Flag &&
const BottomWrapper = styled.div<{ redesignFlag: boolean }>`
${({ redesignFlag }) =>
redesignFlag &&
css`
background-color: ${({ theme }) => theme.backgroundModule};
border-radius: 12px;
......@@ -103,12 +103,12 @@ const BottomWrapper = styled.div<{ phase0Flag: boolean }>`
font-weight: 500;
`}
`
const TopInputWrapper = styled.div<{ phase0Flag: boolean }>`
padding: ${({ phase0Flag }) => phase0Flag && '0px 12px'};
visibility: ${({ phase0Flag }) => !phase0Flag && 'none'};
const TopInputWrapper = styled.div<{ redesignFlag: boolean }>`
padding: ${({ redesignFlag }) => redesignFlag && '0px 12px'};
visibility: ${({ redesignFlag }) => !redesignFlag && 'none'};
`
const BottomInputWrapper = styled.div<{ phase0Flag: boolean }>`
padding: ${({ phase0Flag }) => phase0Flag && '8px 0px'};
const BottomInputWrapper = styled.div<{ redesignFlag: boolean }>`
padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
`
export function getIsValidSwapQuote(
......@@ -155,8 +155,8 @@ const formatSwapQuoteReceivedEventProperties = (
export default function Swap() {
const navigate = useNavigate()
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const { account, chainId } = useWeb3React()
const loadedUrlParams = useDefaultsFromURLSearch()
const [newSwapQuoteNeedsLogging, setNewSwapQuoteNeedsLogging] = useState(true)
......@@ -526,7 +526,7 @@ export default function Swap() {
return (
<Trace page={PageName.SWAP_PAGE} shouldLogImpression>
<>
{phase0Flag === Phase0Variant.Enabled ? (
{redesignFlag === RedesignVariant.Enabled ? (
<TokenSafetyModal
isOpen={importTokensNotInDefault.length > 0 && !dismissTokenWarning}
tokenAddress={importTokensNotInDefault[0]?.address}
......@@ -562,7 +562,7 @@ export default function Swap() {
<AutoColumn gap={'0px'}>
<div style={{ display: 'relative' }}>
<TopInputWrapper phase0Flag={phase0FlagEnabled}>
<TopInputWrapper redesignFlag={redesignFlagEnabled}>
<Trace section={SectionName.CURRENCY_INPUT_PANEL}>
<CurrencyInputPanel
label={
......@@ -586,13 +586,13 @@ export default function Swap() {
/>
</Trace>
</TopInputWrapper>
<ArrowWrapper clickable={isSupportedChain(chainId)} phase0Flag={phase0FlagEnabled}>
<ArrowWrapper clickable={isSupportedChain(chainId)} redesignFlag={redesignFlagEnabled}>
<TraceEvent
events={[Event.onClick]}
name={EventName.SWAP_TOKENS_REVERSED}
element={ElementName.SWAP_TOKENS_REVERSE_ARROW_BUTTON}
>
{phase0FlagEnabled ? (
{redesignFlagEnabled ? (
<ArrowContainer
onClick={() => {
setApprovalSubmitted(false) // reset 2 step UI for approvals
......@@ -624,10 +624,10 @@ export default function Swap() {
</TraceEvent>
</ArrowWrapper>
</div>
<BottomWrapper phase0Flag={phase0FlagEnabled}>
{phase0FlagEnabled && 'For'}
<AutoColumn gap={phase0FlagEnabled ? '0px' : '8px'}>
<BottomInputWrapper phase0Flag={phase0FlagEnabled}>
<BottomWrapper redesignFlag={redesignFlagEnabled}>
{redesignFlagEnabled && 'For'}
<AutoColumn gap={redesignFlagEnabled ? '0px' : '8px'}>
<BottomInputWrapper redesignFlag={redesignFlagEnabled}>
<Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
<CurrencyInputPanel
value={formattedAmounts[Field.OUTPUT]}
......@@ -655,7 +655,7 @@ export default function Swap() {
{recipient !== null && !showWrap ? (
<>
<AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
<ArrowWrapper clickable={false} phase0Flag={phase0FlagEnabled}>
<ArrowWrapper clickable={false} redesignFlag={redesignFlagEnabled}>
<ArrowDown size="16" color={theme.deprecated_text2} />
</ArrowWrapper>
<LinkStyledButton id="remove-recipient-button" onClick={() => onChangeRecipient(null)}>
......@@ -691,7 +691,7 @@ export default function Swap() {
properties={{ received_swap_quote: getIsValidSwapQuote(trade, tradeState, swapInputError) }}
element={ElementName.CONNECT_WALLET_BUTTON}
>
<ButtonLight onClick={toggleWalletModal} phase0Flag={phase0FlagEnabled}>
<ButtonLight onClick={toggleWalletModal} redesignFlag={redesignFlagEnabled}>
<Trans>Connect Wallet</Trans>
</ButtonLight>
</TraceEvent>
......
src/theme/RadialGradientByChainUpdater.ts
View file @ 09380698
import { useWeb3React } from '@web3-react/core'
import { BaseVariant } from 'featureFlags'
import { usePhase0Flag } from 'featureFlags/flags/phase0'
import { useRedesignFlag } from 'featureFlags/flags/redesign'
import { useEffect } from 'react'
import { useDarkModeManager } from 'state/user/hooks'
......@@ -31,8 +31,8 @@ const setBackground = (newValues: TargetBackgroundStyles) =>
export default function RadialGradientByChainUpdater(): null {
const { chainId } = useWeb3React()
const [darkMode] = useDarkModeManager()
const phase0Flag = usePhase0Flag()
const phase0FlagEnabled = phase0Flag === BaseVariant.Enabled
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === BaseVariant.Enabled
// manage background color
useEffect(() => {
if (!backgroundRadialGradientElement) {
......@@ -43,10 +43,10 @@ export default function RadialGradientByChainUpdater(): null {
case SupportedChainId.ARBITRUM_ONE:
case SupportedChainId.ARBITRUM_RINKEBY:
setBackground(backgroundResetStyles)
const arbitrumLightGradient = phase0FlagEnabled
const arbitrumLightGradient = redesignFlagEnabled
? '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'
: 'radial-gradient(150% 100% at 50% 0%, #CDE8FB 0%, #FCF3F9 50%, #FFFFFF 100%)'
const arbitrumDarkGradient = phase0FlagEnabled
const arbitrumDarkGradient = redesignFlagEnabled
? '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'
: 'radial-gradient(150% 100% at 50% 0%, #0A294B 0%, #221E30 50%, #1F2128 100%)'
backgroundRadialGradientElement.style.background = darkMode ? arbitrumDarkGradient : arbitrumLightGradient
......@@ -54,10 +54,10 @@ export default function RadialGradientByChainUpdater(): null {
case SupportedChainId.OPTIMISM:
case SupportedChainId.OPTIMISTIC_KOVAN:
setBackground(backgroundResetStyles)
const optimismLightGradient = phase0FlagEnabled
const optimismLightGradient = redesignFlagEnabled
? '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'
: 'radial-gradient(150% 100% at 50% 0%, #FFFBF2 2%, #FFF4F9 53%, #FFFFFF 100%)'
const optimismDarkGradient = phase0FlagEnabled
const optimismDarkGradient = redesignFlagEnabled
? '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'
: 'radial-gradient(150% 100% at 50% 0%, #3E2E38 2%, #2C1F2D 53%, #1F2128 100%)'
backgroundRadialGradientElement.style.background = darkMode ? optimismDarkGradient : optimismLightGradient
......@@ -65,14 +65,14 @@ export default function RadialGradientByChainUpdater(): null {
case SupportedChainId.POLYGON:
case SupportedChainId.POLYGON_MUMBAI:
setBackground(backgroundResetStyles)
const polygonLightGradient = phase0FlagEnabled
const polygonLightGradient = redesignFlagEnabled
? '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'
: 'radial-gradient(153.32% 100% at 47.26% 0%, rgba(130, 71, 229, 0.0864) 0%, rgba(0, 41, 255, 0.06) 48.19%, rgba(0, 41, 255, 0.012) 100%), #FFFFFF'
const polygonDarkGradient = phase0FlagEnabled
const polygonDarkGradient = redesignFlagEnabled
? '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'
: 'radial-gradient(150.6% 98.22% at 48.06% 0%, rgba(130, 71, 229, 0.6) 0%, rgba(200, 168, 255, 0) 100%), #1F2128'
backgroundRadialGradientElement.style.background = darkMode ? polygonDarkGradient : polygonLightGradient
backgroundRadialGradientElement.style.backgroundBlendMode = phase0FlagEnabled
backgroundRadialGradientElement.style.backgroundBlendMode = redesignFlagEnabled
? 'none'
: darkMode
? 'overlay,normal'
......@@ -81,14 +81,14 @@ export default function RadialGradientByChainUpdater(): null {
case SupportedChainId.CELO:
case SupportedChainId.CELO_ALFAJORES:
setBackground(backgroundResetStyles)
const celoLightGradient = phase0FlagEnabled
const celoLightGradient = redesignFlagEnabled
? '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'
: 'radial-gradient(150% 100% at 50% 0%,#35D07F35 0, #FBCC5C35 100%)'
const celoDarkGradient = phase0FlagEnabled
const celoDarkGradient = redesignFlagEnabled
? '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'
: 'radial-gradient(150% 100% at 50% 0%, rgb(2 80 47) 2%, rgb(12 41 28) 53%, rgb(31, 33, 40) 100%)'
backgroundRadialGradientElement.style.background = darkMode ? celoDarkGradient : celoLightGradient
backgroundRadialGradientElement.style.backgroundBlendMode = phase0FlagEnabled
backgroundRadialGradientElement.style.backgroundBlendMode = redesignFlagEnabled
? 'none'
: darkMode
? 'overlay,normal'
......@@ -96,19 +96,19 @@ export default function RadialGradientByChainUpdater(): null {
break
default:
setBackground(initialStyles)
const defaultLightGradient = phase0FlagEnabled
const defaultLightGradient = redesignFlagEnabled
? 'radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
: 'radial-gradient(50% 50% at 50% 50%,#fc077d10 0,rgba(255,255,255,0) 100%)'
const defaultDarkGradient = phase0FlagEnabled
const defaultDarkGradient = redesignFlagEnabled
? 'linear-gradient(180deg, #202738 0%, #070816 100%)'
: 'radial-gradient(50% 50% at 50% 50%,#fc077d10 0,rgba(255,255,255,0) 100%)'
backgroundRadialGradientElement.style.background = darkMode ? defaultDarkGradient : defaultLightGradient
backgroundRadialGradientElement.style.backgroundBlendMode = phase0FlagEnabled
backgroundRadialGradientElement.style.backgroundBlendMode = redesignFlagEnabled
? 'none'
: darkMode
? 'overlay,normal'
: 'multiply,normal'
}
}, [darkMode, chainId, phase0FlagEnabled])
}, [darkMode, chainId, redesignFlagEnabled])
return null
}
src/theme/components.tsx
View file @ 09380698
......@@ -296,8 +296,8 @@ export const SmallOnly = styled.span`
`};
`
export const Separator = styled.div<{ phase0Flag?: boolean }>`
export const Separator = styled.div<{ redesignFlag?: boolean }>`
width: 100%;
height: 1px;
background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg2)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg2)};
`
src/theme/index.tsx
View file @ 09380698
import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import React, { useMemo } from 'react'
import { Text, TextProps as TextPropsOriginal } from 'rebass'
import styled, {
......@@ -272,9 +272,12 @@ function getTheme(darkMode: boolean, isNewColorsEnabled: boolean): DefaultTheme
}
export default function ThemeProvider({ children }: { children: React.ReactNode }) {
const phase0Flag = usePhase0Flag()
const redesignFlag = useRedesignFlag()
const darkMode = useIsDarkMode()
const themeObject = useMemo(() => getTheme(darkMode, phase0Flag === Phase0Variant.Enabled), [darkMode, phase0Flag])
const themeObject = useMemo(
() => getTheme(darkMode, redesignFlag === RedesignVariant.Enabled),
[darkMode, redesignFlag]
)
return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>
}
......
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