Skip to content

I
interface
Commit c7ea77d2 authored by vignesh mohankumar's avatar vignesh mohankumar Committed by GitHub
Browse files
Options

chore: rm redesign flags from CurrencyInputPanel (#4966) 

* chore: remove flags from CurrencyInputPanel

* one more rm

* unused

* unused
parent 00d67437
Hide whitespace changes
Inline Side-by-side
Showing with 65 additions and 136 deletions
src/components/CurrencyInputPanel/FiatValue.tsx
View file @ c7ea77d2
......@@ -2,7 +2,6 @@ import { Trans } from '@lingui/macro'
// eslint-disable-next-line no-restricted-imports
import { t } from '@lingui/macro'
import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { useMemo } from 'react'
import { useTheme } from 'styled-components/macro'
......@@ -18,7 +17,6 @@ export function FiatValue({
priceImpact?: Percent
}) {
const theme = useTheme()
const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
const priceImpactColor = useMemo(() => {
if (!priceImpact) return undefined
if (priceImpact.lessThan('0')) return theme.deprecated_green1
......@@ -31,14 +29,8 @@ export function FiatValue({
const p = Number(fiatValue?.toFixed())
const visibleDecimalPlaces = p < 1.05 ? 4 : 2
const textColor = redesignFlagEnabled
? theme.textSecondary
: fiatValue
? theme.deprecated_text3
: theme.deprecated_text4
return (
<ThemedText.DeprecatedBody fontSize={14} color={textColor}>
<ThemedText.DeprecatedBody fontSize={14} color={theme.textSecondary}>
{fiatValue && <>${fiatValue?.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })}</>}
{priceImpact ? (
<span style={{ color: priceImpactColor }}>
......
src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
View file @ c7ea77d2
......@@ -7,11 +7,10 @@ import { TraceEvent } from 'analytics/TraceEvent'
import { AutoColumn } from 'components/Column'
import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
import { isSupportedChain } from 'constants/chains'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { darken } from 'polished'
import { ReactNode, useCallback, useState } from 'react'
import { Lock } from 'react-feather'
import styled, { css, useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components/macro'
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
......@@ -25,45 +24,31 @@ import { RowBetween, RowFixed } from '../Row'
import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
import { FiatValue } from './FiatValue'
const InputPanel = styled.div<{ hideInput?: boolean; redesignFlag: boolean }>`
const InputPanel = styled.div<{ hideInput?: boolean }>`
${({ theme }) => theme.flexColumnNoWrap}
position: relative;
border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
background-color: ${({ theme, redesignFlag, hideInput }) =>
redesignFlag ? 'transparent' : hideInput ? 'transparent' : theme.deprecated_bg2};
z-index: 1;
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
transition: height 1s ease;
will-change: height;
`
const FixedContainer = styled.div<{ redesignFlag: boolean }>`
const FixedContainer = styled.div`
width: 100%;
height: 100%;
position: absolute;
border-radius: 20px;
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg2)};
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
`
const Container = styled.div<{ hideInput: boolean; disabled: boolean; redesignFlag: boolean }>`
min-height: ${({ redesignFlag }) => redesignFlag && '44px'};
const Container = styled.div<{ hideInput: boolean }>`
min-height: 44px;
border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg0)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)};
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
${({ theme, hideInput, disabled, redesignFlag }) =>
!redesignFlag &&
!disabled &&
`
:focus,
:hover {
border: 1px solid ${hideInput ? ' transparent' : theme.deprecated_bg3};
}
`}
`
const CurrencySelect = styled(ButtonGray)<{
......@@ -71,22 +56,14 @@ const CurrencySelect = styled(ButtonGray)<{
selected: boolean
hideInput?: boolean
disabled?: boolean
redesignFlag: boolean
}>`
align-items: center;
background-color: ${({ selected, theme, redesignFlag }) =>
redesignFlag
? selected
? theme.backgroundInteractive
: theme.accentAction
: selected
? theme.deprecated_bg2
: theme.deprecated_primary1};
background-color: ${({ selected, theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
cursor: pointer;
height: ${({ hideInput, redesignFlag }) => (redesignFlag ? 'unset' : hideInput ? '2.8rem' : '2.4rem')};
height: unset;
border-radius: 16px;
outline: none;
user-select: none;
......@@ -94,72 +71,52 @@ const CurrencySelect = styled(ButtonGray)<{
font-size: 24px;
font-weight: 400;
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
padding: ${({ selected, redesignFlag }) =>
redesignFlag ? (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px') : '0 8px'};
gap: ${({ redesignFlag }) => (redesignFlag ? '8px' : '0px')};
padding: ${({ selected }) => (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px')};
gap: 8px;
justify-content: space-between;
margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
${({ redesignFlag, selected }) =>
!redesignFlag &&
css`
&:hover {
background-color: ${({ theme }) => (selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1))};
}
&:active {
background-color: ${({ theme }) => (selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1))};
}
`}
${({ redesignFlag, selected }) =>
redesignFlag &&
css`
&:hover,
&:active {
background-color: ${({ theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
}
&:hover,
&:active {
background-color: ${({ theme, selected }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
}
&:before {
background-size: 100%;
border-radius: inherit;
&:before {
background-size: 100%;
border-radius: inherit;
position: absolute;
top: 0;
left: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
}
width: 100%;
height: 100%;
content: '';
}
&:hover:before {
background-color: ${({ theme }) => theme.stateOverlayHover};
}
&:hover:before {
background-color: ${({ theme }) => theme.stateOverlayHover};
}
&:active:before {
background-color: ${({ theme }) => theme.stateOverlayPressed};
}
`}
&:active:before {
background-color: ${({ theme }) => theme.stateOverlayPressed};
}
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
`
const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
const InputRow = styled.div`
${({ theme }) => theme.flexRowNoWrap}
align-items: center;
justify-content: space-between;
padding: ${({ selected, redesignFlag }) =>
redesignFlag ? '0px' : selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem'};
`
const LabelRow = styled.div<{ redesignFlag: boolean }>`
const LabelRow = styled.div`
${({ theme }) => theme.flexRowNoWrap}
align-items: center;
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
color: ${({ theme }) => theme.textSecondary};
font-size: 0.75rem;
line-height: 1rem;
padding: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0 1rem 1rem')};
span:hover {
cursor: pointer;
......@@ -167,11 +124,10 @@ const LabelRow = styled.div<{ redesignFlag: boolean }>`
}
`
const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
const FiatRow = styled(LabelRow)`
justify-content: flex-end;
min-height: ${({ redesignFlag }) => redesignFlag && '20px'};
padding: ${({ redesignFlag }) => redesignFlag && '8px 0px 0px 0px'};
height: ${({ redesignFlag }) => !redesignFlag && '24px'};
min-height: 20px;
padding: 8px 0px 0px 0px;
`
const Aligner = styled.span`
......@@ -181,34 +137,30 @@ const Aligner = styled.span`
width: 100%;
`
const StyledDropDown = styled(DropDown)<{ selected: boolean; redesignFlag: boolean }>`
const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
margin: 0 0.25rem 0 0.35rem;
height: 35%;
margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
margin-left: 8px;
path {
stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
stroke-width: ${({ redesignFlag }) => (redesignFlag ? '2px' : '1.5px')};
stroke-width: 2px;
}
`
const StyledTokenName = styled.span<{ active?: boolean; redesignFlag: boolean }>`
const StyledTokenName = styled.span<{ active?: boolean }>`
${({ active }) => (active ? ' margin: 0 0.25rem 0 0.25rem;' : ' margin: 0 0.25rem 0 0.25rem;')}
font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '18px')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
font-size: 20px;
font-weight: 600;
`
const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boolean }>`
const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
background-color: transparent;
background-color: ${({ theme, redesignFlag }) => !redesignFlag && theme.deprecated_primary5};
border: none;
text-transform: ${({ redesignFlag }) => !redesignFlag && 'uppercase'};
border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'};
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primary1)};
color: ${({ theme }) => theme.accentAction};
cursor: pointer;
font-size: ${({ redesignFlag }) => (redesignFlag ? '14px' : '11px')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
margin-left: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0.25rem')};
font-size: 14px;
font-weight: 600;
opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
padding: 4px 6px;
pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
......@@ -222,12 +174,12 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boole
}
`
const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesignFlag: boolean }>`
const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }>`
${loadingOpacityMixin};
text-align: left;
font-size: ${({ redesignFlag }) => redesignFlag && '36px'};
line-height: ${({ redesignFlag }) => redesignFlag && '44px'};
font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
font-size: 36px;
line-height: 44px;
font-variant: small-caps;
`
interface SwapCurrencyInputPanelProps {
......@@ -277,8 +229,6 @@ export default function SwapCurrencyInputPanel({
}: SwapCurrencyInputPanelProps) {
const [modalOpen, setModalOpen] = useState(false)
const { account, chainId } = useWeb3React()
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
const theme = useTheme()
......@@ -289,9 +239,9 @@ export default function SwapCurrencyInputPanel({
const chainAllowed = isSupportedChain(chainId)
return (
<InputPanel id={id} hideInput={hideInput} {...rest} redesignFlag={redesignFlagEnabled}>
<InputPanel id={id} hideInput={hideInput} {...rest}>
{locked && (
<FixedContainer redesignFlag={redesignFlagEnabled}>
<FixedContainer>
<AutoColumn gap="sm" justify="center">
<Lock />
<ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
......@@ -300,12 +250,8 @@ export default function SwapCurrencyInputPanel({
</AutoColumn>
</FixedContainer>
)}
<Container hideInput={hideInput} disabled={!chainAllowed} redesignFlag={redesignFlagEnabled}>
<InputRow
style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
selected={!onCurrencySelect}
redesignFlag={redesignFlagEnabled}
>
<Container hideInput={hideInput}>
<InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}>
{!hideInput && (
<StyledNumericalInput
className="token-amount-input"
......@@ -313,7 +259,6 @@ export default function SwapCurrencyInputPanel({
onUserInput={onUserInput}
disabled={!chainAllowed}
$loading={loading}
redesignFlag={redesignFlagEnabled}
/>
)}
......@@ -322,7 +267,6 @@ export default function SwapCurrencyInputPanel({
visible={currency !== undefined}
selected={!!currency}
hideInput={hideInput}
redesignFlag={redesignFlagEnabled}
className="open-currency-select-button"
onClick={() => {
if (onCurrencySelect) {
......@@ -340,15 +284,11 @@ export default function SwapCurrencyInputPanel({
<CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} />
) : null}
{pair ? (
<StyledTokenName className="pair-name-container" redesignFlag={redesignFlagEnabled}>
<StyledTokenName className="pair-name-container">
{pair?.token0.symbol}:{pair?.token1.symbol}
</StyledTokenName>
) : (
<StyledTokenName
className="token-symbol-container"
active={Boolean(currency && currency.symbol)}
redesignFlag={redesignFlagEnabled}
>
<StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
{(currency && currency.symbol && currency.symbol.length > 20
? currency.symbol.slice(0, 4) +
'...' +
......@@ -357,12 +297,12 @@ export default function SwapCurrencyInputPanel({
</StyledTokenName>
)}
</RowFixed>
{onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />}
{onCurrencySelect && <StyledDropDown selected={!!currency} />}
</Aligner>
</CurrencySelect>
</InputRow>
{!hideInput && !hideBalance && currency && (
<FiatRow redesignFlag={redesignFlagEnabled}>
<FiatRow>
<RowBetween>
<LoadingOpacityContainer $loading={loading}>
<FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
......@@ -370,8 +310,8 @@ export default function SwapCurrencyInputPanel({
{account ? (
<RowFixed style={{ height: '17px' }}>
<ThemedText.DeprecatedBody
color={redesignFlag ? theme.textSecondary : theme.deprecated_text3}
fontWeight={redesignFlag ? 400 : 500}
color={theme.textSecondary}
fontWeight={400}
fontSize={14}
style={{ display: 'inline' }}
>
......@@ -389,7 +329,7 @@ export default function SwapCurrencyInputPanel({
name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
>
<StyledBalanceMax onClick={onMax} redesignFlag={redesignFlagEnabled}>
<StyledBalanceMax onClick={onMax}>
<Trans>Max</Trans>
</StyledBalanceMax>
</TraceEvent>
......
src/components/CurrencyInputPanel/index.tsx
View file @ c7ea77d2
......@@ -7,7 +7,6 @@ import { TraceEvent } from 'analytics/TraceEvent'
import { AutoColumn } from 'components/Column'
import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
import { isSupportedChain } from 'constants/chains'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { darken } from 'polished'
import { ReactNode, useCallback, useState } from 'react'
import { Lock } from 'react-feather'
......@@ -115,10 +114,10 @@ const LabelRow = styled.div`
}
`
const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
const FiatRow = styled(LabelRow)`
justify-content: flex-end;
padding: ${({ redesignFlag }) => redesignFlag && '0px 1rem 0.75rem'};
height: ${({ redesignFlag }) => (redesignFlag ? '32px' : '16px')};
padding: 0px 1rem 0.75rem;
height: 32px;
`
const Aligner = styled.span`
......@@ -220,8 +219,6 @@ export default function CurrencyInputPanel({
const { account, chainId } = useWeb3React()
const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
const theme = useTheme()
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const handleDismissSearch = useCallback(() => {
setModalOpen(false)
......@@ -293,7 +290,7 @@ export default function CurrencyInputPanel({
</CurrencySelect>
</InputRow>
{!hideInput && !hideBalance && currency && (
<FiatRow redesignFlag={redesignFlagEnabled}>
<FiatRow>
<RowBetween>
<LoadingOpacityContainer $loading={loading}>
<FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment