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

* changes so far * more changes * lint * remove Phase0:

refactor: split phase0 flag into redesign, explore, tokenSafety (#4347)
* changes so far * more changes * lint * remove Phase0:
09380698 · Vignesh Mohankumar · GitHub · 1d96961f · 09380698 · 09380698
Commit 09380698 authored Aug 15, 2022 by Vignesh Mohankumar Committed by GitHub Aug 15, 2022
31 changed files
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -77,35 +77,35 @@ export const ButtonPrimary = styled(BaseButton)`
  }
 `
-export const ButtonLight = styled(BaseButton)<{ phase0Flag?: boolean }>`
+export const ButtonLight = styled(BaseButton)<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentActionSoft : theme.deprecated_primary5)};
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentActionSoft : theme.deprecated_primary5)};
-  color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentAction : theme.deprecated_primaryText1)};
+  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primaryText1)};
-  font-size: ${({ phase0Flag }) => (phase0Flag ? '20px' : '16px')};
+  font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '16px')};
-  font-weight: ${({ phase0Flag }) => (phase0Flag ? '600' : '500')};
+  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
  &:focus {
    box-shadow: 0 0 0 1pt
-      ${({ theme, disabled, phase0Flag }) =>
+      ${({ theme, disabled, redesignFlag }) =>
-        !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+        !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
-    background-color: ${({ theme, disabled, phase0Flag }) =>
+    background-color: ${({ theme, disabled, redesignFlag }) =>
-      !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
  }
  &:hover {
-    background-color: ${({ theme, disabled, phase0Flag }) =>
+    background-color: ${({ theme, disabled, redesignFlag }) =>
-      !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
  }
  &:active {
    box-shadow: 0 0 0 1pt
-      ${({ theme, disabled, phase0Flag }) =>
+      ${({ theme, disabled, redesignFlag }) =>
-        !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
+        !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
-    background-color: ${({ theme, disabled, phase0Flag }) =>
+    background-color: ${({ theme, disabled, redesignFlag }) =>
-      !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
+      !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;

--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
--- a/src/components/FeatureFlagModal/FeatureFlagModal.tsx
+++ b/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>
  )
 }
--- a/src/components/Header/index.tsx
+++ b/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>

--- a/src/components/NumericalInput/index.tsx
+++ b/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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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"

--- a/src/components/QuestionHelper/index.tsx
+++ b/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'};
+  border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
-  color: ${({ theme, phase0Flag }) => !phase0Flag && theme.deprecated_text2};
+  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'};
+  margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
-  align-items: ${({ phase0Flag }) => phase0Flag && 'center'};
+  align-items: ${({ redesignFlag }) => redesignFlag && 'center'};
-  color: ${({ theme, phase0Flag }) => phase0Flag && theme.textSecondary};
+  color: ${({ theme, redesignFlag }) => redesignFlag && theme.textSecondary};
-  margin-top: ${({ phase0Flag }) => phase0Flag && '2.5px'};
+  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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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}>
+        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close} redesignFlag={redesignFlagEnabled}>
-          <QuestionMark phase0Flag={phase0FlagEnabled}>
+          <QuestionMark redesignFlag={redesignFlagEnabled}>
-            {phase0FlagEnabled ? <HelpCircle size={16}></HelpCircle> : '?'}
+            {redesignFlagEnabled ? <HelpCircle size={16}></HelpCircle> : '?'}
          </QuestionMark>
        </QuestionWrapper>
      </Tooltip>

--- a/src/components/SearchModal/CommonBases.tsx
+++ b/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 }) =>
+    background-color: ${({ theme, disable, redesignFlag }) =>
-      (phase0Flag && theme.hoverDefault) || (!disable && theme.deprecated_bg2)};
+      (redesignFlag && theme.hoverDefault) || (!disable && theme.deprecated_bg2)};
  }
-  color: ${({ theme, disable, phase0Flag }) => disable && (phase0Flag ? theme.accentAction : theme.deprecated_text3)};
+  color: ${({ theme, disable, redesignFlag }) =>
-  background-color: ${({ theme, disable, phase0Flag }) =>
+    disable && (redesignFlag ? theme.accentAction : theme.deprecated_text3)};
-    disable && (phase0Flag ? theme.accentActionSoft : theme.deprecated_bg3)};
+  background-color: ${({ theme, disable, redesignFlag }) =>
-  filter: ${({ disable, phase0Flag }) => disable && !phase0Flag && 'grayscale(1)'};
+    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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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} />

--- a/src/components/SearchModal/CurrencyList/index.tsx
+++ b/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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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 />

--- a/src/components/SearchModal/CurrencySearch.tsx
+++ b/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 }>`
+const ContentWrapper = styled(Column)<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, phase0Flag }) => phase0Flag && theme.backgroundSurface};
+  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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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

--- a/src/components/SearchModal/CurrencySearchModal.tsx
+++ b/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)}

--- a/src/components/SearchModal/styleds.tsx
+++ b/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 }) =>
+    background-color: ${({ theme, disabled, redesignFlag }) =>
-      (phase0Flag && theme.hoverDefault) || (!disabled && theme.deprecated_bg2)};
+      (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)};
+    color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textTertiary : theme.deprecated_text3)};
-    font-size: ${({ phase0Flag }) => phase0Flag && '16px'};
+    font-size: ${({ redesignFlag }) => redesignFlag && '16px'};
  }
  transition: border 100ms;
  :focus {
-    border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? 'transparent' : theme.deprecated_primary1)};
+    border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_primary1)};
-    background-color: ${({ theme, phase0Flag }) => phase0Flag && theme.accentActionSoft};
+    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`

--- a/src/components/Settings/index.tsx
+++ b/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)};
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg2)};
-  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg3)};
+  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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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}>

--- a/src/components/Toggle/index.tsx
+++ b/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 }) =>
+  background: ${({ isActive, theme, redesignFlag }) =>
-    phase0Flag && isActive ? theme.accentActionSoft : theme.deprecated_bg1};
+    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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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>
  )

--- a/src/components/TransactionSettings/index.tsx
+++ b/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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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

--- a/src/components/swap/AdvancedSwapDetails.tsx
+++ b/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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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

--- a/src/components/swap/SwapDetailsDropdown.tsx
+++ b/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 }>`
+const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; redesignFlag: boolean }>`
-  padding: ${({ phase0Flag }) => (phase0Flag ? '8px 0px 0px 0px' : '4px 8px')};
+  padding: ${({ redesignFlag }) => (redesignFlag ? '8px 0px 0px 0px' : '4px 8px')};
-  background-color: ${({ open, theme, phase0Flag }) => (open && !phase0Flag ? theme.deprecated_bg1 : theme.none)};
+  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)};
+  border-top: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.none)};
-  margin-top: ${({ phase0Flag }) => phase0Flag && '8px'};
+  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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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}

--- a/src/components/swap/SwapModalHeader.tsx
+++ b/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')};
+  height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
-  width: ${({ phase0Flag }) => (phase0Flag ? '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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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}>
+      <ArrowWrapper redesignFlag={redesignFlagEnabled}>
-        <ArrowDown size="16" color={phase0FlagEnabled ? theme.textPrimary : theme.deprecated_text2} />
+        <ArrowDown size="16" color={redesignFlagEnabled ? theme.textPrimary : theme.deprecated_text2} />
      </ArrowWrapper>
      <LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
        <AutoColumn gap={'8px'}>

--- a/src/components/swap/SwapRoute.tsx
+++ b/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 }) =>
+    ${({ theme, fixedOpen, redesignFlag }) =>
-      fixedOpen ? 'transparent' : phase0Flag ? theme.backgroundOutline : theme.deprecated_bg2};
+      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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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}

--- a/src/components/swap/styleds.tsx
+++ b/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')};
+  height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
-  width: ${({ phase0Flag }) => (phase0Flag ? '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 }) =>

--- a/src/featureFlags/flags/explore.ts
+++ b/src/featureFlags/flags/explore.ts
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+export function useExploreFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.explore)
+}
+export { BaseVariant as ExploreVariant }
--- a/src/featureFlags/flags/phase0.ts
+++ b/src/featureFlags/flags/phase0.ts
-import { BaseVariant, useBaseFlag } from '../index'
-export function usePhase0Flag(): BaseVariant {
-  return useBaseFlag('phase0')
-}
-export { BaseVariant as Phase0Variant }
--- a/src/featureFlags/flags/phase1.ts
+++ b/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 }
--- a/src/featureFlags/flags/redesign.ts
+++ b/src/featureFlags/flags/redesign.ts
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+export function useRedesignFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.redesign)
+}
+export { BaseVariant as RedesignVariant }
--- a/src/featureFlags/flags/tokenSafety.ts
+++ b/src/featureFlags/flags/tokenSafety.ts
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+export function useTokenSafetyFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.tokenSafety)
+}
+export { BaseVariant as TokenSafetyVariant }
--- a/src/featureFlags/index.tsx
+++ b/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 {

--- a/src/pages/App.tsx
+++ b/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

--- a/src/pages/AppBody.tsx
+++ b/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)};
+  background: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
-  border-radius: ${({ phase0Flag }) => (phase0Flag ? '16px' : '24px')};
+  border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '24px')};
-  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.none)};
+  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"};
+  font-feature-settings: ${({ redesignFlag }) => redesignFlag && "'ss02' off"};
-  box-shadow: ${({ phase0Flag }) =>
+  box-shadow: ${({ redesignFlag }) =>
-    !phase0Flag &&
+    !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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
  return (
-    <BodyWrapper {...rest} phase0Flag={phase0FlagEnabled}>
+    <BodyWrapper {...rest} redesignFlag={redesignFlagEnabled}>
      {children}
    </BodyWrapper>
  )

--- a/src/pages/Swap/index.tsx
+++ b/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 }>`
+const BottomWrapper = styled.div<{ redesignFlag: boolean }>`
-  ${({ phase0Flag }) =>
+  ${({ redesignFlag }) =>
-    phase0Flag &&
+    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 }>`
+const TopInputWrapper = styled.div<{ redesignFlag: boolean }>`
-  padding: ${({ phase0Flag }) => phase0Flag && '0px 12px'};
+  padding: ${({ redesignFlag }) => redesignFlag && '0px 12px'};
-  visibility: ${({ phase0Flag }) => !phase0Flag && 'none'};
+  visibility: ${({ redesignFlag }) => !redesignFlag && 'none'};
 `
-const BottomInputWrapper = styled.div<{ phase0Flag: boolean }>`
+const BottomInputWrapper = styled.div<{ redesignFlag: boolean }>`
-  padding: ${({ phase0Flag }) => phase0Flag && '8px 0px'};
+  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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  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}>
+              <BottomWrapper redesignFlag={redesignFlagEnabled}>
-                {phase0FlagEnabled && 'For'}
+                {redesignFlagEnabled && 'For'}
-                <AutoColumn gap={phase0FlagEnabled ? '0px' : '8px'}>
+                <AutoColumn gap={redesignFlagEnabled ? '0px' : '8px'}>
-                  <BottomInputWrapper phase0Flag={phase0FlagEnabled}>
+                  <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>

--- a/src/theme/RadialGradientByChainUpdater.ts
+++ b/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 redesignFlag = useRedesignFlag()
-  const phase0FlagEnabled = phase0Flag === BaseVariant.Enabled
+  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
 }
--- a/src/theme/components.tsx
+++ b/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)};
 `
--- a/src/theme/index.tsx
+++ b/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>
 }