chore: remove redesign flag in swap (#4964)

This commit is contained in:
vignesh mohankumar 2022-10-19 17:42:34 -04:00 committed by GitHub
parent c7ea77d292
commit bf13b4a917
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 85 additions and 128 deletions

@ -4,7 +4,6 @@ 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 { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import useNativeCurrency from 'lib/hooks/useNativeCurrency'
import { useMemo } from 'react'
import { InterfaceTrade } from 'state/routing/types'
@ -55,8 +54,6 @@ export function AdvancedSwapDetails({
const theme = useTheme()
const { chainId } = useWeb3React()
const nativeCurrency = useNativeCurrency()
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const { expectedOutputAmount, priceImpact } = useMemo(() => {
return {
@ -109,7 +106,7 @@ export function AdvancedSwapDetails({
</ThemedText.DeprecatedBlack>
</TextWithLoadingPlaceholder>
</RowBetween>
<Separator redesignFlag={redesignFlagEnabled} />
<Separator />
<RowBetween>
<RowFixed style={{ marginRight: '20px' }}>
<MouseoverTooltip

@ -10,7 +10,6 @@ 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 { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { useState } from 'react'
import { ChevronDown, Info } from 'react-feather'
import { InterfaceTrade } from 'state/routing/types'
@ -23,13 +22,13 @@ import { ResponsiveTooltipContainer } from './styleds'
import SwapRoute from './SwapRoute'
import TradePrice from './TradePrice'
const Wrapper = styled(Row)<{ redesignFlag: boolean }>`
const Wrapper = styled(Row)`
width: 100%;
justify-content: center;
border-radius: ${({ redesignFlag }) => redesignFlag && 'inherit'};
padding: ${({ redesignFlag }) => redesignFlag && '8px 12px'};
margin-top: ${({ redesignFlag }) => (redesignFlag ? '0px' : '4px')};
min-height: ${({ redesignFlag }) => redesignFlag && '32px'};
border-radius: inherit;
padding: 8px 12px;
margin-top: 0;
min-height: 32px;
`
const StyledInfoIcon = styled(Info)`
@ -39,18 +38,15 @@ const StyledInfoIcon = styled(Info)`
color: ${({ theme }) => theme.deprecated_text3};
`
const StyledCard = styled(OutlineCard)<{ redesignFlag: boolean }>`
const StyledCard = styled(OutlineCard)`
padding: 12px;
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg3)};
border: 1px solid ${({ theme }) => theme.backgroundOutline};
`
const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; redesignFlag: boolean }>`
padding: ${({ redesignFlag }) => (redesignFlag ? '0' : '4px 8px')};
background-color: ${({ open, theme, redesignFlag }) =>
open && !redesignFlag ? theme.deprecated_bg1 : 'transparent'};
const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean }>`
padding: 0;
align-items: center;
cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'};
`
const RotatingArrow = styled(ChevronDown)<{ open?: boolean }>`
@ -130,11 +126,9 @@ export default function SwapDetailsDropdown({
const theme = useTheme()
const { chainId } = useWeb3React()
const [showDetails, setShowDetails] = useState(false)
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
return (
<Wrapper style={{ marginTop: redesignFlagEnabled ? '0' : '8px' }} redesignFlag={redesignFlagEnabled}>
<Wrapper style={{ marginTop: '0' }}>
<AutoColumn gap={'8px'} style={{ width: '100%', marginBottom: '-8px' }}>
<TraceEvent
events={[Event.onClick]}
@ -142,12 +136,7 @@ export default function SwapDetailsDropdown({
element={ElementName.SWAP_DETAILS_DROPDOWN}
shouldLogImpression={!showDetails}
>
<StyledHeaderRow
redesignFlag={redesignFlagEnabled}
onClick={() => setShowDetails(!showDetails)}
disabled={!trade}
open={showDetails}
>
<StyledHeaderRow onClick={() => setShowDetails(!showDetails)} disabled={!trade} open={showDetails}>
<RowFixed style={{ position: 'relative' }}>
{loading || syncing ? (
<StyledPolling>
@ -214,7 +203,7 @@ export default function SwapDetailsDropdown({
<AnimatedDropdown open={showDetails}>
<AutoColumn gap={'8px'} style={{ padding: '0', paddingBottom: '8px' }}>
{trade ? (
<StyledCard redesignFlag={redesignFlagEnabled}>
<StyledCard>
<AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />
</StyledCard>
) : null}

@ -3,7 +3,6 @@ import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
import { sendAnalyticsEvent } from 'analytics'
import { EventName, SWAP_PRICE_UPDATE_USER_RESPONSE } from 'analytics/constants'
import { getPriceUpdateBasisPoints } from 'analytics/utils'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { useEffect, useState } from 'react'
import { AlertTriangle, ArrowDown } from 'react-feather'
import { Text } from 'rebass'
@ -24,11 +23,11 @@ import TradePrice from '../swap/TradePrice'
import { AdvancedSwapDetails } from './AdvancedSwapDetails'
import { SwapShowAcceptChanges, TruncatedText } from './styleds'
const ArrowWrapper = styled.div<{ redesignFlag: boolean }>`
const ArrowWrapper = styled.div`
padding: 4px;
border-radius: 12px;
height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
height: 40px;
width: 40px;
position: relative;
margin-top: -18px;
margin-bottom: -18px;
@ -36,9 +35,9 @@ const ArrowWrapper = styled.div<{ redesignFlag: boolean }>`
display: flex;
justify-content: center;
align-items: center;
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg1)};
background-color: ${({ theme }) => theme.backgroundSurface};
border: 4px solid;
border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundModule : theme.deprecated_bg0)};
border-color: ${({ theme }) => theme.backgroundModule};
z-index: 2;
`
@ -75,8 +74,6 @@ export default function SwapModalHeader({
onAcceptChanges: () => void
}) {
const theme = useTheme()
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const [showInverted, setShowInverted] = useState<boolean>(false)
const [lastExecutionPrice, setLastExecutionPrice] = useState(trade.executionPrice)
@ -127,8 +124,8 @@ export default function SwapModalHeader({
</RowBetween>
</AutoColumn>
</LightCard>
<ArrowWrapper redesignFlag={redesignFlagEnabled}>
<ArrowDown size="16" color={redesignFlagEnabled ? theme.textPrimary : theme.deprecated_text2} />
<ArrowWrapper>
<ArrowDown size="16" color={theme.textPrimary} />
</ArrowWrapper>
<LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
<AutoColumn gap={'8px'}>

@ -12,7 +12,6 @@ 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 { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
import { memo, useState } from 'react'
import { Plus } from 'react-feather'
@ -23,12 +22,10 @@ import { Separator, ThemedText } from 'theme'
import { AutoRouterLabel, AutoRouterLogo } from './RouterLabel'
const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean; redesignFlag: boolean }>`
const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean }>`
padding: ${({ fixedOpen }) => (fixedOpen ? '12px' : '12px 8px 12px 12px')};
border-radius: 16px;
border: 1px solid
${({ theme, fixedOpen, redesignFlag }) =>
fixedOpen ? 'transparent' : redesignFlag ? theme.backgroundOutline : theme.deprecated_bg2};
border: 1px solid ${({ theme, fixedOpen }) => (fixedOpen ? 'transparent' : theme.backgroundOutline)};
cursor: pointer;
`
@ -56,8 +53,6 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
const routes = getTokenPath(trade)
const [open, setOpen] = useState(false)
const { chainId } = useWeb3React()
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const [darkMode] = useDarkModeManager()
@ -68,7 +63,7 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
: undefined
return (
<Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen} redesignFlag={redesignFlagEnabled}>
<Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen}>
<TraceEvent
events={[Event.onClick]}
name={EventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED}

@ -8,7 +8,7 @@ import { Z_INDEX } from 'theme/zIndex'
import { AutoColumn } from '../Column'
export const PageWrapper = styled.div<{ redesignFlag: boolean }>`
export const PageWrapper = styled.div`
padding: 68px 8px 0px;
max-width: 480px;
width: 100%;
@ -23,30 +23,27 @@ export const PageWrapper = styled.div<{ redesignFlag: boolean }>`
`
// Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string; redesignFlag: boolean }>`
export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
position: relative;
background: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '24px')};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : 'transparent')};
background: ${({ theme }) => theme.backgroundSurface};
border-radius: 16px;
border: 1px solid ${({ theme }) => theme.backgroundOutline};
padding: 8px;
z-index: ${Z_INDEX.deprecated_content};
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)'};
`
export const ArrowWrapper = styled.div<{ clickable: boolean; redesignFlag: boolean }>`
export const ArrowWrapper = styled.div<{ clickable: boolean }>`
border-radius: 12px;
height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
height: 40px;
width: 40px;
position: relative;
margin-top: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
margin-bottom: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
margin-top: -18px;
margin-bottom: -18px;
margin-left: auto;
margin-right: auto;
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundInteractive : theme.deprecated_bg1)};
background-color: ${({ theme }) => theme.backgroundInteractive};
border: 4px solid;
border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
border-color: ${({ theme }) => theme.backgroundSurface};
z-index: 2;
${({ clickable }) =>

@ -15,7 +15,6 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
import { MouseoverTooltip } from 'components/Tooltip'
import { isSupportedChain } from 'constants/chains'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { useSwapCallback } from 'hooks/useSwapCallback'
import useTransactionDeadline from 'hooks/useTransactionDeadline'
import JSBI from 'jsbi'
@ -27,7 +26,7 @@ import { Text } from 'rebass'
import { useToggleWalletModal } from 'state/application/hooks'
import { InterfaceTrade } from 'state/routing/types'
import { TradeState } from 'state/routing/types'
import styled, { css, useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components/macro'
import { currencyAmountToPreciseFloat, formatTransactionAmount } from 'utils/formatNumbers'
import AddressInputPanel from '../../components/AddressInputPanel'
@ -42,7 +41,6 @@ import ConfirmSwapModal from '../../components/swap/ConfirmSwapModal'
import { ArrowWrapper, PageWrapper, SwapCallbackError, SwapWrapper } from '../../components/swap/styleds'
import SwapHeader from '../../components/swap/SwapHeader'
import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
import TokenWarningModal from '../../components/TokenWarningModal'
import { TOKEN_SHORTHANDS } from '../../constants/tokens'
import { useAllTokens, useCurrency } from '../../hooks/Tokens'
import { ApprovalState, useApproveCallbackFromTrade } from '../../hooks/useApproveCallback'
@ -76,12 +74,8 @@ const ArrowContainer = styled.div`
height: 100%;
`
const SwapSection = styled.div<{ redesignFlag: boolean }>`
const SwapSection = styled.div`
position: relative;
${({ redesignFlag }) =>
redesignFlag &&
css`
background-color: ${({ theme }) => theme.backgroundModule};
border-radius: 12px;
padding: 16px;
@ -113,19 +107,18 @@ const SwapSection = styled.div<{ redesignFlag: boolean }>`
&:focus-within:before {
border-color: ${({ theme }) => theme.stateOverlayPressed};
}
`}
`
const OutputSwapSection = styled(SwapSection)<{ showDetailsDropdown: boolean }>`
border-bottom: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundSurface}`};
border-bottom-left-radius: ${({ redesignFlag, showDetailsDropdown }) => redesignFlag && showDetailsDropdown && '0'};
border-bottom-right-radius: ${({ redesignFlag, showDetailsDropdown }) => redesignFlag && showDetailsDropdown && '0'};
border-bottom: ${({ theme }) => `1px solid ${theme.backgroundSurface}`};
border-bottom-left-radius: ${({ showDetailsDropdown }) => showDetailsDropdown && '0'};
border-bottom-right-radius: ${({ showDetailsDropdown }) => showDetailsDropdown && '0'};
`
const DetailsSwapSection = styled(SwapSection)`
padding: 0;
border-top-left-radius: ${({ redesignFlag }) => redesignFlag && '0'};
border-top-right-radius: ${({ redesignFlag }) => redesignFlag && '0'};
border-top-left-radius: 0;
border-top-right-radius: 0;
`
export function getIsValidSwapQuote(
@ -151,8 +144,6 @@ const TRADE_STRING = 'SwapRouter'
export default function Swap() {
const navigate = useNavigate()
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const { account, chainId } = useWeb3React()
const loadedUrlParams = useDefaultsFromURLSearch()
const [newSwapQuoteNeedsLogging, setNewSwapQuoteNeedsLogging] = useState(true)
@ -511,7 +502,6 @@ export default function Swap() {
return (
<Trace page={PageName.SWAP_PAGE} shouldLogImpression>
<>
{redesignFlagEnabled ? (
<TokenSafetyModal
isOpen={importTokensNotInDefault.length > 0 && !dismissTokenWarning}
tokenAddress={importTokensNotInDefault[0]?.address}
@ -520,16 +510,8 @@ export default function Swap() {
onCancel={handleDismissTokenWarning}
showCancel={true}
/>
) : (
<TokenWarningModal
isOpen={importTokensNotInDefault.length > 0 && !dismissTokenWarning}
tokens={importTokensNotInDefault}
onConfirm={handleConfirmTokenWarning}
onDismiss={handleDismissTokenWarning}
/>
)}
<PageWrapper redesignFlag={redesignFlagEnabled}>
<SwapWrapper id="swap-page" redesignFlag={redesignFlagEnabled}>
<PageWrapper>
<SwapWrapper id="swap-page">
<SwapHeader allowedSlippage={allowedSlippage} />
<ConfirmSwapModal
isOpen={showConfirm}
@ -549,7 +531,7 @@ export default function Swap() {
/>
<div style={{ display: 'relative' }}>
<SwapSection redesignFlag={redesignFlagEnabled}>
<SwapSection>
<Trace section={SectionName.CURRENCY_INPUT_PANEL}>
<SwapCurrencyInputPanel
label={
@ -573,7 +555,7 @@ export default function Swap() {
/>
</Trace>
</SwapSection>
<ArrowWrapper clickable={isSupportedChain(chainId)} redesignFlag={redesignFlagEnabled}>
<ArrowWrapper clickable={isSupportedChain(chainId)}>
<TraceEvent
events={[Event.onClick]}
name={EventName.SWAP_TOKENS_REVERSED}
@ -598,9 +580,9 @@ export default function Swap() {
</TraceEvent>
</ArrowWrapper>
</div>
<AutoColumn gap={redesignFlagEnabled ? '12px' : '8px'}>
<AutoColumn gap={'12px'}>
<div>
<OutputSwapSection redesignFlag={redesignFlagEnabled} showDetailsDropdown={showDetailsDropdown}>
<OutputSwapSection showDetailsDropdown={showDetailsDropdown}>
<Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
<SwapCurrencyInputPanel
value={formattedAmounts[Field.OUTPUT]}
@ -624,7 +606,7 @@ export default function Swap() {
{recipient !== null && !showWrap ? (
<>
<AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
<ArrowWrapper clickable={false} redesignFlag={redesignFlagEnabled}>
<ArrowWrapper clickable={false}>
<ArrowDown size="16" color={theme.deprecated_text2} />
</ArrowWrapper>
<LinkStyledButton id="remove-recipient-button" onClick={() => onChangeRecipient(null)}>
@ -636,7 +618,7 @@ export default function Swap() {
) : null}
</OutputSwapSection>
{showDetailsDropdown && (
<DetailsSwapSection redesignFlag={redesignFlagEnabled}>
<DetailsSwapSection>
<SwapDetailsDropdown
trade={trade}
syncing={routeIsSyncing}
@ -663,7 +645,7 @@ export default function Swap() {
properties={{ received_swap_quote: getIsValidSwapQuote(trade, tradeState, swapInputError) }}
element={ElementName.CONNECT_WALLET_BUTTON}
>
<ButtonLight onClick={toggleWalletModal} redesignFlag={redesignFlagEnabled} fontWeight={600}>
<ButtonLight onClick={toggleWalletModal} fontWeight={600}>
<Trans>Connect Wallet</Trans>
</ButtonLight>
</TraceEvent>