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

* changes so far

* more changes

* lint

* remove Phase0:

src/components/Button/index.tsx

@@ -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/FeatureFlagModal/FeatureFlagModal.tsx

 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

@@ -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

-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

-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

@@ -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

@@ -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

@@ -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

 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

@@ -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

@@ -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

-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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useExploreFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.explore)
+}
+
+export { BaseVariant as ExploreVariant }

src/featureFlags/flags/phase0.ts

-import { BaseVariant, useBaseFlag } from '../index'
-
-export function usePhase0Flag(): BaseVariant {
-  return useBaseFlag('phase0')
-}
-
-export { BaseVariant as Phase0Variant }

src/featureFlags/flags/phase1.ts

-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

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useRedesignFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.redesign)
+}
+
+export { BaseVariant as RedesignVariant }

src/featureFlags/flags/tokenSafety.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useTokenSafetyFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.tokenSafety)
+}
+
+export { BaseVariant as TokenSafetyVariant }

src/featureFlags/index.tsx

@@ -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

@@ -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

-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

@@ -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

 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

@@ -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

-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>
 }