Skip to content

I
interface
Commit 85d8566c authored by lynn's avatar lynn Committed by GitHub
Browse files
Options

feat: make currencyInputPanel redesign changes apply only to swap (#4456) 

* init: revert to pre redesign swap changes

* differentiate between swapCurrencyInputPanel and regular

* it was inverted whoops

* add padding to fiat row from cal
parent 44d68e3e
Show whitespace changes
Inline Side-by-side
Showing with 469 additions and 118 deletions
src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx 0 → 100644
View file @ 85d8566c
import { Trans } from '@lingui/macro'
import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
import { Pair } from '@uniswap/v2-sdk'
import { useWeb3React } from '@web3-react/core'
import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
import { TraceEvent } from 'components/AmplitudeAnalytics/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 { useLocation } from 'react-router-dom'
import styled, { useTheme } from 'styled-components/macro'
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
import { useCurrencyBalance } from '../../state/connection/hooks'
import { ThemedText } from '../../theme'
import { ButtonGray } from '../Button'
import CurrencyLogo from '../CurrencyLogo'
import DoubleCurrencyLogo from '../DoubleLogo'
import { Input as NumericalInput } from '../NumericalInput'
import { RowBetween, RowFixed } from '../Row'
import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
import { FiatValue } from './FiatValue'
const InputPanel = styled.div<{ hideInput?: boolean; redesignFlag: 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 }>`
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 }>`
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)<{
visible: boolean
selected: boolean
hideInput?: boolean
disabled?: boolean
redesignFlag: boolean
}>`
align-items: center;
background-color: ${({ selected, theme, redesignFlag }) =>
redesignFlag
? selected
? theme.backgroundSurface
: theme.accentAction
: selected
? theme.deprecated_bg2
: theme.deprecated_primary1};
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')};
border-radius: 16px;
outline: none;
user-select: none;
border: none;
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')};
justify-content: space-between;
margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
:focus,
:hover {
background-color: ${({ selected, theme, redesignFlag }) =>
selected
? redesignFlag
? theme.backgroundSurface
: theme.deprecated_bg3
: darken(0.05, theme.deprecated_primary1)};
}
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
`
const InputCurrencySelect = styled(CurrencySelect)<{ redesignFlag: boolean }>`
background-color: ${({ theme, selected, redesignFlag }) =>
redesignFlag && (selected ? theme.backgroundModule : theme.accentAction)};
:focus,
:hover {
background-color: ${({ selected, theme, redesignFlag }) =>
selected
? redesignFlag
? theme.backgroundInteractive
: theme.deprecated_bg3
: darken(0.05, theme.deprecated_primary1)};
}
`
const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
${({ 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`
${({ theme }) => theme.flexRowNoWrap}
align-items: center;
color: ${({ theme }) => theme.deprecated_text1};
font-size: 0.75rem;
line-height: 1rem;
padding: 0 1rem 1rem;
span:hover {
cursor: pointer;
color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
}
`
const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
justify-content: flex-end;
padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
height: ${({ redesignFlag }) => !redesignFlag && '24px'};
`
const NoBalanceState = styled.div`
color: ${({ theme }) => theme.textTertiary};
font-weight: 400;
justify-content: space-between;
padding: 0px 4px;
`
const NoBalanceDash = styled.span`
color: ${({ theme }) => theme.textTertiary};
font-variant: small-caps;
font-feature-settings: 'pnum' on, 'lnum' on;
`
const Aligner = styled.span`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
`
const StyledDropDown = styled(DropDown)<{ selected: boolean; redesignFlag: boolean }>`
margin: 0 0.25rem 0 0.35rem;
height: 35%;
margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
path {
stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
stroke-width: ${({ redesignFlag }) => (redesignFlag ? '2px' : '1.5px')};
}
`
const StyledTokenName = styled.span<{ active?: boolean; redesignFlag: boolean }>`
${({ active }) => (active ? ' margin: 0 0.25rem 0 0.25rem;' : ' margin: 0 0.25rem 0 0.25rem;')}
font-size: ${({ active }) => (active ? '18px' : '18px')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
`
const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: 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)};
cursor: pointer;
font-size: ${({ redesignFlag }) => (redesignFlag ? '14px' : '11px')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
margin-left: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0.25rem')};
opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
padding: 4px 6px;
pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
:hover {
opacity: ${({ disabled }) => (!disabled ? 0.8 : 0.4)};
}
:focus {
outline: none;
}
`
const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesignFlag: boolean }>`
${loadingOpacityMixin};
text-align: left;
font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
font-feature-settings: ${({ redesignFlag }) => redesignFlag && 'pnum on, lnum on'};
`
interface SwapCurrencyInputPanelProps {
value: string
onUserInput: (value: string) => void
onMax?: () => void
showMaxButton: boolean
label?: ReactNode
onCurrencySelect?: (currency: Currency) => void
currency?: Currency | null
hideBalance?: boolean
pair?: Pair | null
hideInput?: boolean
otherCurrency?: Currency | null
fiatValue?: CurrencyAmount<Token> | null
priceImpact?: Percent
id: string
showCommonBases?: boolean
showCurrencyAmount?: boolean
disableNonToken?: boolean
renderBalance?: (amount: CurrencyAmount<Currency>) => ReactNode
locked?: boolean
loading?: boolean
}
export default function SwapCurrencyInputPanel({
value,
onUserInput,
onMax,
showMaxButton,
onCurrencySelect,
currency,
otherCurrency,
id,
showCommonBases,
showCurrencyAmount,
disableNonToken,
renderBalance,
fiatValue,
priceImpact,
hideBalance = false,
pair = null, // used for double token logo
hideInput = false,
locked = false,
loading = false,
...rest
}: 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()
const { pathname } = useLocation()
const isAddLiquidityPage = pathname.includes('/add') && !pathname.includes('/add/v2')
const handleDismissSearch = useCallback(() => {
setModalOpen(false)
}, [setModalOpen])
const chainAllowed = isSupportedChain(chainId)
return (
<InputPanel id={id} hideInput={hideInput} {...rest} redesignFlag={redesignFlagEnabled}>
{locked && (
<FixedContainer redesignFlag={redesignFlagEnabled}>
<AutoColumn gap="sm" justify="center">
<Lock />
<ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
<Trans>The market price is outside your specified price range. Single-asset deposit only.</Trans>
</ThemedText.DeprecatedLabel>
</AutoColumn>
</FixedContainer>
)}
<Container hideInput={hideInput} disabled={!chainAllowed} redesignFlag={redesignFlagEnabled}>
<InputRow
style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
selected={!onCurrencySelect}
redesignFlag={redesignFlagEnabled}
>
{!hideInput && (
<StyledNumericalInput
className="token-amount-input"
value={value}
onUserInput={onUserInput}
disabled={!chainAllowed}
$loading={loading}
redesignFlag={redesignFlagEnabled}
/>
)}
<InputCurrencySelect
disabled={!chainAllowed}
visible={currency !== undefined}
selected={!!currency}
hideInput={hideInput}
redesignFlag={redesignFlagEnabled}
className="open-currency-select-button"
onClick={() => {
if (onCurrencySelect) {
setModalOpen(true)
}
}}
>
<Aligner>
<RowFixed>
{pair ? (
<span style={{ marginRight: '0.5rem' }}>
<DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
</span>
) : currency ? (
<CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} />
) : null}
{pair ? (
<StyledTokenName className="pair-name-container" redesignFlag={redesignFlagEnabled}>
{pair?.token0.symbol}:{pair?.token1.symbol}
</StyledTokenName>
) : (
<StyledTokenName
className="token-symbol-container"
active={Boolean(currency && currency.symbol)}
redesignFlag={redesignFlagEnabled}
>
{(currency && currency.symbol && currency.symbol.length > 20
? currency.symbol.slice(0, 4) +
'...' +
currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
: currency?.symbol) || <Trans>Select token</Trans>}
</StyledTokenName>
)}
</RowFixed>
{onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />}
</Aligner>
</InputCurrencySelect>
</InputRow>
{redesignFlagEnabled && !currency && !isAddLiquidityPage && (
<NoBalanceState>
<FiatRow redesignFlag={redesignFlagEnabled}>
<RowBetween>
<NoBalanceDash>-</NoBalanceDash>
<NoBalanceDash>-</NoBalanceDash>
</RowBetween>
</FiatRow>
</NoBalanceState>
)}
{!hideInput && !hideBalance && currency && (
<FiatRow redesignFlag={redesignFlagEnabled}>
<RowBetween>
<LoadingOpacityContainer $loading={loading}>
<FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
</LoadingOpacityContainer>
{account ? (
<RowFixed style={{ height: '17px' }}>
<ThemedText.DeprecatedBody
onClick={onMax}
color={theme.deprecated_text3}
fontWeight={500}
fontSize={14}
style={{ display: 'inline', cursor: 'pointer' }}
>
{!hideBalance && currency && selectedCurrencyBalance ? (
renderBalance ? (
renderBalance(selectedCurrencyBalance)
) : (
<Trans>Balance: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
)
) : null}
</ThemedText.DeprecatedBody>
{showMaxButton && selectedCurrencyBalance ? (
<TraceEvent
events={[Event.onClick]}
name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
>
<StyledBalanceMax onClick={onMax} redesignFlag={redesignFlagEnabled}>
<Trans>Max</Trans>
</StyledBalanceMax>
</TraceEvent>
) : null}
</RowFixed>
) : (
<span />
)}
</RowBetween>
</FiatRow>
)}
</Container>
{onCurrencySelect && (
<CurrencySearchModal
isOpen={modalOpen}
onDismiss={handleDismissSearch}
onCurrencySelect={onCurrencySelect}
selectedCurrency={currency}
otherSelectedCurrency={otherCurrency}
showCommonBases={showCommonBases}
showCurrencyAmount={showCurrencyAmount}
disableNonToken={disableNonToken}
/>
)}
</InputPanel>
)
}
src/components/CurrencyInputPanel/index.tsx
View file @ 85d8566c
...@@ -11,7 +11,6 @@ import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign' ...@@ -11,7 +11,6 @@ import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { darken } from 'polished' import { darken } from 'polished'
import { ReactNode, useCallback, useState } from 'react' import { ReactNode, useCallback, useState } from 'react'
import { Lock } from 'react-feather' import { Lock } from 'react-feather'
import { useLocation } from 'react-router-dom'
import styled, { useTheme } from 'styled-components/macro' import styled, { useTheme } from 'styled-components/macro'
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount' import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
...@@ -26,37 +25,35 @@ import { RowBetween, RowFixed } from '../Row' ...@@ -26,37 +25,35 @@ import { RowBetween, RowFixed } from '../Row'
import CurrencySearchModal from '../SearchModal/CurrencySearchModal' import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
import { FiatValue } from './FiatValue' import { FiatValue } from './FiatValue'
const InputPanel = styled.div<{ hideInput?: boolean; redesignFlag: boolean }>` const InputPanel = styled.div<{ hideInput?: boolean }>`
${({ theme }) => theme.flexColumnNoWrap} ${({ theme }) => theme.flexColumnNoWrap}
position: relative; position: relative;
border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')}; border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
background-color: ${({ theme, redesignFlag, hideInput }) => background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.deprecated_bg2)};
redesignFlag ? 'transparent' : hideInput ? 'transparent' : theme.deprecated_bg2};
z-index: 1; z-index: 1;
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')}; width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
transition: height 1s ease; transition: height 1s ease;
will-change: height; will-change: height;
` `
const FixedContainer = styled.div<{ redesignFlag: boolean }>` const FixedContainer = styled.div`
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
border-radius: 20px; border-radius: 20px;
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg2)}; background-color: ${({ theme }) => theme.deprecated_bg2};
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 2;
` `
const Container = styled.div<{ hideInput: boolean; disabled: boolean; redesignFlag: boolean }>` const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')}; border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg0)}; border: 1px solid ${({ theme }) => theme.deprecated_bg0};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)}; background-color: ${({ theme }) => theme.deprecated_bg1};
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')}; width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
${({ theme, hideInput, disabled, redesignFlag }) => ${({ theme, hideInput, disabled }) =>
!redesignFlag &&
!disabled && !disabled &&
` `
:focus, :focus,
...@@ -71,65 +68,38 @@ const CurrencySelect = styled(ButtonGray)<{ ...@@ -71,65 +68,38 @@ const CurrencySelect = styled(ButtonGray)<{
selected: boolean selected: boolean
hideInput?: boolean hideInput?: boolean
disabled?: boolean disabled?: boolean
redesignFlag: boolean
}>` }>`
align-items: center; align-items: center;
background-color: ${({ selected, theme, redesignFlag }) => background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg2 : theme.deprecated_primary1)};
redesignFlag
? selected
? theme.backgroundSurface
: theme.accentAction
: selected
? theme.deprecated_bg2
: theme.deprecated_primary1};
opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)}; opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')}; box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)}; color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
cursor: pointer; cursor: pointer;
height: ${({ hideInput, redesignFlag }) => (redesignFlag ? 'unset' : hideInput ? '2.8rem' : '2.4rem')};
border-radius: 16px; border-radius: 16px;
outline: none; outline: none;
user-select: none; user-select: none;
border: none; border: none;
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 500;
height: ${({ hideInput }) => (hideInput ? '2.8rem' : '2.4rem')};
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')}; width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
padding: ${({ selected, redesignFlag }) => padding: 0 8px;
redesignFlag ? (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px') : '0 8px'};
gap: ${({ redesignFlag }) => (redesignFlag ? '8px' : '0px')};
justify-content: space-between; justify-content: space-between;
margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')}; margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
:focus, :focus,
:hover { :hover {
background-color: ${({ selected, theme, redesignFlag }) => background-color: ${({ selected, theme }) =>
selected selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1)};
? redesignFlag
? theme.backgroundSurface
: theme.deprecated_bg3
: darken(0.05, theme.deprecated_primary1)};
} }
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')}; visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
` `
const InputCurrencySelect = styled(CurrencySelect)<{ redesignFlag: boolean }>`
background-color: ${({ theme, selected, redesignFlag }) =>
redesignFlag && (selected ? theme.backgroundModule : theme.accentAction)};
:focus,
:hover {
background-color: ${({ selected, theme, redesignFlag }) =>
selected
? redesignFlag
? theme.backgroundInteractive
: theme.deprecated_bg3
: darken(0.05, theme.deprecated_primary1)};
}
`
const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>` const InputRow = styled.div<{ selected: boolean }>`
${({ theme }) => theme.flexRowNoWrap} ${({ theme }) => theme.flexRowNoWrap}
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: ${({ selected, redesignFlag }) => padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem')};
redesignFlag ? '0px' : selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem'};
` `
const LabelRow = styled.div` const LabelRow = styled.div`
...@@ -139,7 +109,6 @@ const LabelRow = styled.div` ...@@ -139,7 +109,6 @@ const LabelRow = styled.div`
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1rem; line-height: 1rem;
padding: 0 1rem 1rem; padding: 0 1rem 1rem;
span:hover { span:hover {
cursor: pointer; cursor: pointer;
color: ${({ theme }) => darken(0.2, theme.deprecated_text2)}; color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
...@@ -148,20 +117,8 @@ const LabelRow = styled.div` ...@@ -148,20 +117,8 @@ const LabelRow = styled.div`
const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>` const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
justify-content: flex-end; justify-content: flex-end;
padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'}; padding: ${({ redesignFlag }) => redesignFlag && '0px 1rem 0.75rem'};
height: ${({ redesignFlag }) => !redesignFlag && '24px'}; height: ${({ redesignFlag }) => (redesignFlag ? '32px' : '16px')};
`
const NoBalanceState = styled.div`
color: ${({ theme }) => theme.textTertiary};
font-weight: 400;
justify-content: space-between;
padding: 0px 4px;
`
const NoBalanceDash = styled.span`
color: ${({ theme }) => theme.textTertiary};
font-variant: small-caps;
font-feature-settings: 'pnum' on, 'lnum' on;
` `
const Aligner = styled.span` const Aligner = styled.span`
...@@ -171,34 +128,31 @@ const Aligner = styled.span` ...@@ -171,34 +128,31 @@ const Aligner = styled.span`
width: 100%; width: 100%;
` `
const StyledDropDown = styled(DropDown)<{ selected: boolean; redesignFlag: boolean }>` const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
path { path {
stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)}; stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
stroke-width: ${({ redesignFlag }) => (redesignFlag ? '2px' : '1.5px')}; stroke-width: 1.5px;
} }
` `
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;')} ${({ active }) => (active ? ' margin: 0 0.25rem 0 0.25rem;' : ' margin: 0 0.25rem 0 0.25rem;')}
font-size: ${({ active }) => (active ? '18px' : '18px')}; font-size: ${({ active }) => (active ? '18px' : '18px')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
` `
const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boolean }>` const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
background-color: transparent; background-color: transparent;
background-color: ${({ theme, redesignFlag }) => !redesignFlag && theme.deprecated_primary5}; background-color: ${({ theme }) => theme.deprecated_primary5};
border: none; border: none;
text-transform: ${({ redesignFlag }) => !redesignFlag && 'uppercase'}; border-radius: 12px;
border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'}; color: ${({ theme }) => theme.deprecated_primary1};
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primary1)};
cursor: pointer; cursor: pointer;
font-size: ${({ redesignFlag }) => (redesignFlag ? '14px' : '11px')}; font-size: 11px;
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')}; font-weight: 500;
margin-left: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0.25rem')}; margin-left: 0.25rem;
opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)}; opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
padding: 4px 6px; padding: 4px 6px;
pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')}; pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
...@@ -212,11 +166,9 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boole ...@@ -212,11 +166,9 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boole
} }
` `
const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesignFlag: boolean }>` const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }>`
${loadingOpacityMixin}; ${loadingOpacityMixin};
text-align: left; text-align: left;
font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
font-feature-settings: ${({ redesignFlag }) => redesignFlag && 'pnum on, lnum on'};
` `
interface CurrencyInputPanelProps { interface CurrencyInputPanelProps {
...@@ -266,12 +218,10 @@ export default function CurrencyInputPanel({ ...@@ -266,12 +218,10 @@ export default function CurrencyInputPanel({
}: CurrencyInputPanelProps) { }: CurrencyInputPanelProps) {
const [modalOpen, setModalOpen] = useState(false) const [modalOpen, setModalOpen] = useState(false)
const { account, chainId } = useWeb3React() const { account, chainId } = useWeb3React()
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined) const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
const theme = useTheme() const theme = useTheme()
const { pathname } = useLocation() const redesignFlag = useRedesignFlag()
const isAddLiquidityPage = pathname.includes('/add') && !pathname.includes('/add/v2') const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const handleDismissSearch = useCallback(() => { const handleDismissSearch = useCallback(() => {
setModalOpen(false) setModalOpen(false)
...@@ -280,9 +230,9 @@ export default function CurrencyInputPanel({ ...@@ -280,9 +230,9 @@ export default function CurrencyInputPanel({
const chainAllowed = isSupportedChain(chainId) const chainAllowed = isSupportedChain(chainId)
return ( return (
<InputPanel id={id} hideInput={hideInput} {...rest} redesignFlag={redesignFlagEnabled}> <InputPanel id={id} hideInput={hideInput} {...rest}>
{locked && ( {locked && (
<FixedContainer redesignFlag={redesignFlagEnabled}> <FixedContainer>
<AutoColumn gap="sm" justify="center"> <AutoColumn gap="sm" justify="center">
<Lock /> <Lock />
<ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px"> <ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
...@@ -291,12 +241,8 @@ export default function CurrencyInputPanel({ ...@@ -291,12 +241,8 @@ export default function CurrencyInputPanel({
</AutoColumn> </AutoColumn>
</FixedContainer> </FixedContainer>
)} )}
<Container hideInput={hideInput} disabled={!chainAllowed} redesignFlag={redesignFlagEnabled}> <Container hideInput={hideInput} disabled={!chainAllowed}>
<InputRow <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
selected={!onCurrencySelect}
redesignFlag={redesignFlagEnabled}
>
{!hideInput && ( {!hideInput && (
<StyledNumericalInput <StyledNumericalInput
className="token-amount-input" className="token-amount-input"
...@@ -304,16 +250,14 @@ export default function CurrencyInputPanel({ ...@@ -304,16 +250,14 @@ export default function CurrencyInputPanel({
onUserInput={onUserInput} onUserInput={onUserInput}
disabled={!chainAllowed} disabled={!chainAllowed}
$loading={loading} $loading={loading}
redesignFlag={redesignFlagEnabled}
/> />
)} )}
<InputCurrencySelect <CurrencySelect
disabled={!chainAllowed} disabled={!chainAllowed}
visible={currency !== undefined} visible={currency !== undefined}
selected={!!currency} selected={!!currency}
hideInput={hideInput} hideInput={hideInput}
redesignFlag={redesignFlagEnabled}
className="open-currency-select-button" className="open-currency-select-button"
onClick={() => { onClick={() => {
if (onCurrencySelect) { if (onCurrencySelect) {
...@@ -328,40 +272,26 @@ export default function CurrencyInputPanel({ ...@@ -328,40 +272,26 @@ export default function CurrencyInputPanel({
<DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} /> <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
</span> </span>
) : currency ? ( ) : currency ? (
<CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} /> <CurrencyLogo style={{ marginRight: '0.5rem' }} currency={currency} size={'24px'} />
) : null} ) : null}
{pair ? ( {pair ? (
<StyledTokenName className="pair-name-container" redesignFlag={redesignFlagEnabled}> <StyledTokenName className="pair-name-container">
{pair?.token0.symbol}:{pair?.token1.symbol} {pair?.token0.symbol}:{pair?.token1.symbol}
</StyledTokenName> </StyledTokenName>
) : ( ) : (
<StyledTokenName <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
className="token-symbol-container"
active={Boolean(currency && currency.symbol)}
redesignFlag={redesignFlagEnabled}
>
{(currency && currency.symbol && currency.symbol.length > 20 {(currency && currency.symbol && currency.symbol.length > 20
? currency.symbol.slice(0, 4) + ? currency.symbol.slice(0, 4) +
'...' + '...' +
currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length) currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
: currency?.symbol) || <Trans>Select token</Trans>} : currency?.symbol) || <Trans>Select a token</Trans>}
</StyledTokenName> </StyledTokenName>
)} )}
</RowFixed> </RowFixed>
{onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />} {onCurrencySelect && <StyledDropDown selected={!!currency} />}
</Aligner> </Aligner>
</InputCurrencySelect> </CurrencySelect>
</InputRow> </InputRow>
{redesignFlagEnabled && !currency && !isAddLiquidityPage && (
<NoBalanceState>
<FiatRow redesignFlag={redesignFlagEnabled}>
<RowBetween>
<NoBalanceDash>-</NoBalanceDash>
<NoBalanceDash>-</NoBalanceDash>
</RowBetween>
</FiatRow>
</NoBalanceState>
)}
{!hideInput && !hideBalance && currency && ( {!hideInput && !hideBalance && currency && (
<FiatRow redesignFlag={redesignFlagEnabled}> <FiatRow redesignFlag={redesignFlagEnabled}>
<RowBetween> <RowBetween>
...@@ -391,8 +321,8 @@ export default function CurrencyInputPanel({ ...@@ -391,8 +321,8 @@ export default function CurrencyInputPanel({
name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED} name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
element={ElementName.MAX_TOKEN_AMOUNT_BUTTON} element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
> >
<StyledBalanceMax onClick={onMax} redesignFlag={redesignFlagEnabled}> <StyledBalanceMax onClick={onMax}>
<Trans>Max</Trans> <Trans>MAX</Trans>
</StyledBalanceMax> </StyledBalanceMax>
</TraceEvent> </TraceEvent>
) : null} ) : null}
......
src/pages/Swap/index.tsx
View file @ 85d8566c
...@@ -38,7 +38,7 @@ import AddressInputPanel from '../../components/AddressInputPanel' ...@@ -38,7 +38,7 @@ import AddressInputPanel from '../../components/AddressInputPanel'
import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button' import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
import { GreyCard } from '../../components/Card' import { GreyCard } from '../../components/Card'
import { AutoColumn } from '../../components/Column' import { AutoColumn } from '../../components/Column'
import CurrencyInputPanel from '../../components/CurrencyInputPanel' import SwapCurrencyInputPanel from '../../components/CurrencyInputPanel/SwapCurrencyInputPanel'
import CurrencyLogo from '../../components/CurrencyLogo' import CurrencyLogo from '../../components/CurrencyLogo'
import Loader from '../../components/Loader' import Loader from '../../components/Loader'
import { AutoRow } from '../../components/Row' import { AutoRow } from '../../components/Row'
...@@ -541,7 +541,7 @@ export default function Swap() { ...@@ -541,7 +541,7 @@ export default function Swap() {
<div style={{ display: 'relative' }}> <div style={{ display: 'relative' }}>
<TopInputWrapper redesignFlag={redesignFlagEnabled}> <TopInputWrapper redesignFlag={redesignFlagEnabled}>
<Trace section={SectionName.CURRENCY_INPUT_PANEL}> <Trace section={SectionName.CURRENCY_INPUT_PANEL}>
<CurrencyInputPanel <SwapCurrencyInputPanel
label={ label={
independentField === Field.OUTPUT && !showWrap ? ( independentField === Field.OUTPUT && !showWrap ? (
<Trans>From (at most)</Trans> <Trans>From (at most)</Trans>
...@@ -606,7 +606,7 @@ export default function Swap() { ...@@ -606,7 +606,7 @@ export default function Swap() {
<AutoColumn gap={redesignFlagEnabled ? '0px' : '8px'}> <AutoColumn gap={redesignFlagEnabled ? '0px' : '8px'}>
<BottomInputWrapper redesignFlag={redesignFlagEnabled}> <BottomInputWrapper redesignFlag={redesignFlagEnabled}>
<Trace section={SectionName.CURRENCY_OUTPUT_PANEL}> <Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
<CurrencyInputPanel <SwapCurrencyInputPanel
value={formattedAmounts[Field.OUTPUT]} value={formattedAmounts[Field.OUTPUT]}
onUserInput={handleTypeOutput} onUserInput={handleTypeOutput}
label={ label={
......
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