ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: enable jsx-curly-brace-presence and autofix (#5242)

Browse Source
This commit is contained in:
Mike Grabowski 2022-11-16 11:09:53 +01:00 committed by GitHub
parent 55c3c527f5
commit c479239ab0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
73 changed files with 226 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.json
View File

@ -52,6 +52,7 @@
"@typescript-eslint/ban-ts-ignore": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"react/react-in-jsx-scope": "off",
"react/jsx-curly-brace-presence": ["error", {"props": "never", "children": "never" }],
"object-shorthand": ["error", "always"],
"no-restricted-imports": [
"error",

2
src/components/AccountDetails/TransactionSummary.tsx
View File

@ -75,7 +75,7 @@ function ClaimSummary({ info: { recipient, uniAmountRaw } }: { info: ClaimTransa
const { ENSName } = useENSName()
return typeof uniAmountRaw === 'string' ? (
<Trans>
Claim <FormattedCurrencyAmount rawAmount={uniAmountRaw} symbol={'UNI'} decimals={18} sigFigs={4} /> for{' '}
Claim <FormattedCurrencyAmount rawAmount={uniAmountRaw} symbol="UNI" decimals={18} sigFigs={4} /> for{' '}
{ENSName ?? recipient}
</Trans>
) : (

2
src/components/AccountDetails/index.tsx
View File

@ -302,7 +302,7 @@ export default function AccountDetails({
</UpperSection>
{!!pendingTransactions.length || !!confirmedTransactions.length ? (
<LowerSection>
<AutoRow mb={'1rem'} style={{ justifyContent: 'space-between' }}>
<AutoRow mb="1rem" style={{ justifyContent: 'space-between' }}>
<ThemedText.DeprecatedBody>
<Trans>Recent Transactions</Trans>
</ThemedText.DeprecatedBody>

20
src/components/Button/index.tsx
View File

@ -345,22 +345,20 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
if (!active) {
return (
<ButtonOutlined $borderRadius="12px" padding="12px 8px" {...rest}>
{<RowBetween>{children}</RowBetween>}
<RowBetween>{children}</RowBetween>
</ButtonOutlined>
)
} else {
return (
<ActiveOutlined {...rest} padding="12px 8px" $borderRadius="12px">
{
<RowBetween>
{children}
<CheckboxWrapper>
<Circle>
<ResponsiveCheck size={13} stroke={theme.deprecated_white} />
</Circle>
</CheckboxWrapper>
</RowBetween>
}
<RowBetween>
{children}
<CheckboxWrapper>
<Circle>
<ResponsiveCheck size={13} stroke={theme.deprecated_white} />
</Circle>
</CheckboxWrapper>
</RowBetween>
</ActiveOutlined>
)
}

2
src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
View File

@ -281,7 +281,7 @@ export default function SwapCurrencyInputPanel({
<DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
</span>
) : currency ? (
<CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} />
<CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size="24px" />
) : null}
{pair ? (
<StyledTokenName className="pair-name-container">

2
src/components/CurrencyInputPanel/index.tsx
View File

@ -269,7 +269,7 @@ export default function CurrencyInputPanel({
<DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
</span>
) : currency ? (
<CurrencyLogo style={{ marginRight: '0.5rem' }} currency={currency} size={'24px'} />
<CurrencyLogo style={{ marginRight: '0.5rem' }} currency={currency} size="24px" />
) : null}
{pair ? (
<StyledTokenName className="pair-name-container">

2
src/components/ErrorBoundary/index.tsx
View File

@ -98,7 +98,7 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren<unk
return (
<FallbackWrapper>
<BodyWrapper>
<AutoColumn gap={'md'}>
<AutoColumn gap="md">
<SomethingWentWrongWrapper>
<ThemedText.DeprecatedLabel fontSize={24} fontWeight={600}>
<Trans>Something went wrong</Trans>

2
src/components/LiquidityChartRangeInput/Brush.tsx
View File

@ -213,7 +213,7 @@ export const Brush = ({
visible={showLabels || hovering}
>
<TooltipBackground y="0" x="-30" height="30" width="60" rx="8" />
<Tooltip transform={`scale(-1, 1)`} y="15" dominantBaseline="middle">
<Tooltip transform="scale(-1, 1)" y="15" dominantBaseline="middle">
{brushLabelValue('w', localBrushExtent[0])}
</Tooltip>
</LabelGroup>

6
src/components/ModalViews/index.tsx
View File

@ -27,9 +27,9 @@ export function LoadingView({ children, onDismiss }: { children: any; onDismiss:
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
<CustomLightSpinner src={Circle} alt="loader" size="90px" />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
{children}
<ThemedText.DeprecatedSubHeader>
<Trans>Confirm this transaction in your wallet</Trans>
@ -60,7 +60,7 @@ export function SubmittedView({
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
{children}
{chainId && hash && (
<ExternalLink

2
src/components/NavBar/MenuDropdown.tsx
View File

@ -42,7 +42,7 @@ const PrimaryMenuRow = ({
<Row onClick={close}>{children}</Row>
</NavLink>
) : (
<Row as="a" href={href} target={'_blank'} rel={'noopener noreferrer'} className={styles.MenuRow}>
<Row as="a" href={href} target="_blank" rel="noopener noreferrer" className={styles.MenuRow}>
{children}
</Row>
)}

2
src/components/NavBar/index.tsx
View File

@ -65,7 +65,7 @@ const PageTabs = () => {
<Trans>NFTs</Trans>
</MenuItem>
)}
<MenuItem href="/pool" id={'pool-nav-link'} isActive={isPoolActive}>
<MenuItem href="/pool" id="pool-nav-link" isActive={isPoolActive}>
<Trans>Pool</Trans>
</MenuItem>
</>

2
src/components/Polling/index.tsx
View File

@ -141,7 +141,7 @@ export default function Polling() {
<>
<RowFixed>
<StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} warning={warning}>
<ExternalLink href={'https://etherscan.io/gastracker'}>
<ExternalLink href="https://etherscan.io/gastracker">
{priceGwei ? (
<RowFixed style={{ marginRight: '8px' }}>
<ThemedText.DeprecatedMain fontSize="11px" mr="8px" color={theme.deprecated_text3}>

2
src/components/Popups/ClaimPopup.tsx
View File

@ -121,7 +121,7 @@ export default function ClaimPopup() {
</ThemedText.DeprecatedSubHeader>
</AutoColumn>
<AutoColumn style={{ zIndex: 10 }} justify="center">
<ButtonPrimary padding="8px" $borderRadius="8px" width={'fit-content'} onClick={handleToggleSelfClaimModal}>
<ButtonPrimary padding="8px" $borderRadius="8px" width="fit-content" onClick={handleToggleSelfClaimModal}>
<Trans>Claim your UNI tokens</Trans>
</ButtonPrimary>
</AutoColumn>

4
src/components/PositionCard/V2.tsx
View File

@ -143,7 +143,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
</RowFixed>
{token0Deposited ? (
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{token0Deposited?.toSignificant(6)}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
@ -161,7 +161,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
</RowFixed>
{token1Deposited ? (
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{token1Deposited?.toSignificant(6)}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />

8
src/components/PositionCard/index.tsx
View File

@ -115,7 +115,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
</Text>
{token0Deposited ? (
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{token0Deposited?.toSignificant(6)}
</Text>
</RowFixed>
@ -129,7 +129,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
</Text>
{token1Deposited ? (
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{token1Deposited?.toSignificant(6)}
</Text>
</RowFixed>
@ -254,7 +254,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
</RowFixed>
{token0Deposited ? (
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{token0Deposited?.toSignificant(6)}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
@ -272,7 +272,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
</RowFixed>
{token1Deposited ? (
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{token1Deposited?.toSignificant(6)}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />

10
src/components/PrivacyPolicy/index.tsx
View File

@ -124,11 +124,11 @@ export function PrivacyPolicy() {
<AutoColumn gap="16px">
<AutoColumn gap="8px" style={{ width: '100%' }}>
<StyledExternalCard>
<ExternalLink href={'https://uniswap.org/terms-of-service'}>
<ExternalLink href="https://uniswap.org/terms-of-service">
<RowBetween>
<AutoRow gap="4px">
<Info size={20} />
<ThemedText.DeprecatedMain fontSize={14} color={'deprecated_primaryText1'}>
<ThemedText.DeprecatedMain fontSize={14} color="deprecated_primaryText1">
<Trans>Uniswap Labs&apos; Terms of Service</Trans>
</ThemedText.DeprecatedMain>
</AutoRow>
@ -137,11 +137,11 @@ export function PrivacyPolicy() {
</ExternalLink>
</StyledExternalCard>
<StyledExternalCard>
<ExternalLink href={'https://uniswap.org/privacy-policy/'}>
<ExternalLink href="https://uniswap.org/privacy-policy/">
<RowBetween>
<AutoRow gap="4px">
<Info size={20} />
<ThemedText.DeprecatedMain fontSize={14} color={'deprecated_primaryText1'}>
<ThemedText.DeprecatedMain fontSize={14} color="deprecated_primaryText1">
<Trans>Privacy Policy</Trans>
</ThemedText.DeprecatedMain>
</AutoRow>
@ -159,7 +159,7 @@ export function PrivacyPolicy() {
<AutoColumn gap="8px">
<AutoRow gap="4px">
<Info size={18} />
<ThemedText.DeprecatedMain fontSize={14} color={'deprecated_text1'}>
<ThemedText.DeprecatedMain fontSize={14} color="deprecated_text1">
{name}
</ThemedText.DeprecatedMain>
</AutoRow>

2
src/components/ProgressSteps/index.tsx
View File

@ -55,7 +55,7 @@ export default function ProgressCircles({ steps, disabled = false, ...rest }: Pr
const theme = useTheme()
return (
<Wrapper justify={'center'} {...rest}>
<Wrapper justify="center" {...rest}>
<Grouping>
{steps.map((step, i) => {
return (

6
src/components/RoutingDiagram/RoutingDiagram.tsx
View File

@ -99,9 +99,9 @@ export default function RoutingDiagram({
<Wrapper>
{routes.map((entry, index) => (
<RouteContainerRow key={index}>
<CurrencyLogo currency={tokenIn} size={'20px'} />
<CurrencyLogo currency={tokenIn} size="20px" />
<Route entry={entry} />
<CurrencyLogo currency={tokenOut} size={'20px'} />
<CurrencyLogo currency={tokenOut} size="20px" />
</RouteContainerRow>
))}
</Wrapper>
@ -117,7 +117,7 @@ function Route({ entry: { percent, path, protocol } }: { entry: RoutingDiagramEn
<OpaqueBadge>
{protocol === Protocol.MIXED ? (
<MixedProtocolBadge>
<BadgeText fontSize={12}>{'V3 + V2'}</BadgeText>
<BadgeText fontSize={12}>V3 + V2</BadgeText>
</MixedProtocolBadge>
) : (
<ProtocolBadge>

8
src/components/SearchModal/CurrencyList/index.test.tsx
View File

@ -52,8 +52,8 @@ it('renders loading rows when isLoading is true', () => {
showImportView={noOp}
setImportToken={noOp}
isLoading={true}
searchQuery={''}
isAddressSearch={''}
searchQuery=""
isAddressSearch=""
/>
)
expect(asFragment()).toMatchSnapshot()
@ -70,8 +70,8 @@ it('renders currency rows correctly when currencies list is non-empty', () => {
showImportView={noOp}
setImportToken={noOp}
isLoading={false}
searchQuery={''}
isAddressSearch={''}
searchQuery=""
isAddressSearch=""
/>
)
expect(asFragment()).toMatchSnapshot()

4
src/components/SearchModal/CurrencyList/index.tsx
View File

@ -151,7 +151,7 @@ export function CurrencyRow({
<Column>
<CurrencyLogo
currency={currency}
size={'36px'}
size="36px"
style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }}
/>
</Column>
@ -161,7 +161,7 @@ export function CurrencyRow({
<TokenSafetyIcon warning={warning} />
{isBlockedToken && <BlockedTokenIcon />}
</Row>
<ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
<ThemedText.DeprecatedDarkGray ml="0px" fontSize="12px" fontWeight={300}>
{currency.symbol}
</ThemedText.DeprecatedDarkGray>
</AutoColumn>

2
src/components/Settings/index.tsx
View File

@ -164,7 +164,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
</Text>
<ButtonError
error={true}
padding={'12px'}
padding="12px"
onClick={() => {
const confirmWord = t`confirm`
if (window.prompt(t`Please type the word "${confirmWord}" to enable expert mode.`) === confirmWord) {

2
src/components/TokenSafety/TokenSafetyMessage.tsx
View File

@ -52,7 +52,7 @@ export default function TokenWarningMessage({ warning, tokenAddress }: TokenWarn
return (
<Label color={color}>
<TitleRow>
{warning.canProceed ? <AlertTriangle size={'16px'} /> : <AlertOctagon size={'16px'} />}
{warning.canProceed ? <AlertTriangle size="16px" /> : <AlertOctagon size="16px" />}
<Title marginLeft="7px">{warning.message}</Title>
</TitleRow>

8
src/components/Tokens/TokenDetails/About.tsx
View File

@ -99,10 +99,10 @@ export function AboutSection({ address, description, homepageUrl, twitterName }:
<Trans>Links</Trans>
</ThemedText.SubHeaderSmall>
<ResourcesContainer>
<Resource name={'Etherscan'} link={`https://etherscan.io/address/${address}`} />
<Resource name={'More analytics'} link={`https://info.uniswap.org/#/tokens/${address}`} />
{homepageUrl && <Resource name={'Website'} link={homepageUrl} />}
{twitterName && <Resource name={'Twitter'} link={`https://twitter.com/${twitterName}`} />}
<Resource name="Etherscan" link={`https://etherscan.io/address/${address}`} />
<Resource name="More analytics" link={`https://info.uniswap.org/#/tokens/${address}`} />
{homepageUrl && <Resource name="Website" link={homepageUrl} />}
{twitterName && <Resource name="Twitter" link={`https://twitter.com/${twitterName}`} />}
</ResourcesContainer>
</AboutContainer>
)

4
src/components/Tokens/TokenDetails/PriceChart.tsx
View File

@ -263,7 +263,7 @@ export function PriceChart({ width, height, prices, timePeriod }: PriceChartProp
tickStroke={theme.backgroundOutline}
tickLength={4}
hideTicks={true}
tickTransform={'translate(0 -5)'}
tickTransform="translate(0 -5)"
tickValues={ticks}
top={graphHeight - 1}
tickLabelProps={() => ({
@ -320,7 +320,7 @@ export function PriceChart({ width, height, prices, timePeriod }: PriceChartProp
y={0}
width={width}
height={graphHeight}
fill={'transparent'}
fill="transparent"
onTouchStart={handleHover}
onTouchMove={handleHover}
onMouseMove={handleHover}

2
src/components/Tokens/TokenDetails/ShareButton.tsx
View File

@ -91,7 +91,7 @@ export default function ShareButton(tokenInfo: TokenInfo) {
return (
<ShareButtonDisplay ref={node}>
<Share onClick={toggleShare} aria-label={`ShareOptions`} open={open} />
<Share onClick={toggleShare} aria-label="ShareOptions" open={open} />
{open && (
<ShareActions>
<ShareAction onClick={() => copyHelperRef.current?.forceCopy()}>

4
src/components/Tokens/TokenDetails/index.tsx
View File

@ -149,11 +149,11 @@ export default function TokenDetails({
<LogoContainer>
<CurrencyLogo
src={logoSrc}
size={'32px'}
size="32px"
symbol={isNative ? nativeCurrency?.symbol : token?.symbol}
currency={isNative ? nativeCurrency : token}
/>
<L2NetworkLogo networkUrl={L2Icon} size={'16px'} />
<L2NetworkLogo networkUrl={L2Icon} size="16px" />
</LogoContainer>
{token?.name ?? <Trans>Name not found</Trans>}
<TokenSymbol>{token?.symbol ?? <Trans>Symbol not found</Trans>}</TokenSymbol>

2
src/components/Tokens/TokenTable/NetworkFilter.tsx
View File

@ -103,7 +103,7 @@ export default function NetworkFilter() {
return (
<StyledMenu ref={node}>
<NetworkFilterOption onClick={toggleMenu} aria-label={`networkFilter`} active={open}>
<NetworkFilterOption onClick={toggleMenu} aria-label="networkFilter" active={open}>
<StyledMenuContent>
<NetworkLabel>
<Logo src={chainInfo?.logoUrl} /> {chainInfo?.label}

2
src/components/Tokens/TokenTable/TimeSelector.tsx
View File

@ -111,7 +111,7 @@ export default function TimeSelector() {
return (
<StyledMenu ref={node}>
<FilterOption onClick={toggleMenu} aria-label={`timeSelector`} active={open}>
<FilterOption onClick={toggleMenu} aria-label="timeSelector" active={open}>
<StyledMenuContent>
{DISPLAYS[activeTime]}
<Chevron open={open}>

10
src/components/TransactionConfirmationModal/index.tsx
View File

@ -73,7 +73,7 @@ function ConfirmationPendingContent({
<ConfirmedIcon inline={inline}>
<CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<Text fontWeight={500} fontSize={20} color={theme.textPrimary} textAlign="center">
<Trans>Waiting for confirmation</Trans>
</Text>
@ -135,7 +135,7 @@ function TransactionSubmittedContent({
<ConfirmedIcon inline={inline}>
<ArrowUpCircle strokeWidth={1} size={inline ? '40px' : '75px'} color={theme.accentActive} />
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'} style={{ paddingBottom: '12px' }}>
<AutoColumn gap="12px" justify="center" style={{ paddingBottom: '12px' }}>
<ThemedText.MediumHeader textAlign="center">
<Trans>Transaction submitted</Trans>
</ThemedText.MediumHeader>
@ -148,7 +148,7 @@ function TransactionSubmittedContent({
) : (
<RowFixed>
<Trans>Added {currencyToAdd.symbol} </Trans>
<CheckCircle size={'16px'} stroke={theme.deprecated_green1} style={{ marginLeft: '6px' }} />
<CheckCircle size="16px" stroke={theme.deprecated_green1} style={{ marginLeft: '6px' }} />
</RowFixed>
)}
</ButtonLight>
@ -276,7 +276,7 @@ function L2Content({
<CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
)}
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<Text fontWeight={500} fontSize={20} textAlign="center">
{!hash ? (
<Trans>Confirm transaction in wallet</Trans>
@ -300,7 +300,7 @@ function L2Content({
) : (
<div style={{ height: '17px' }} />
)}
<Text color={theme.deprecated_text3} style={{ margin: '20px 0 0 0' }} fontSize={'14px'}>
<Text color={theme.deprecated_text3} style={{ margin: '20px 0 0 0' }} fontSize="14px">
{!secondsToConfirm ? (
<div style={{ height: '24px' }} />
) : (

2
src/components/WalletModal/InjectedOption.tsx
View File

@ -20,7 +20,7 @@ const METAMASK_PROPS = {
}
export function InstallMetaMaskOption() {
return <Option {...METAMASK_PROPS} header={<Trans>Install MetaMask</Trans>} link={'https://metamask.io/'} />
return <Option {...METAMASK_PROPS} header={<Trans>Install MetaMask</Trans>} link="https://metamask.io/" />
}
export function MetaMaskOption({ tryActivation }: { tryActivation: (connector: Connector) => void }) {

2
src/components/WalletModal/Option.tsx
View File

@ -130,7 +130,7 @@ export default function Option({
<OptionCardLeft>
<HeaderText color={color}>
<IconWrapper size={size}>
<img src={icon} alt={'Icon'} />
<img src={icon} alt="Icon" />
</IconWrapper>
{header}
</HeaderText>

2
src/components/WalletModal/index.tsx
View File

@ -325,7 +325,7 @@ export default function WalletModal({
)
return nftFlagEnabled ? (
<AutoRow style={{ flexWrap: 'nowrap', padding: '4px 16px' }}>
<ThemedText.BodySecondary fontSize={16} lineHeight={'24px'}>
<ThemedText.BodySecondary fontSize={16} lineHeight="24px">
{content}
</ThemedText.BodySecondary>
</AutoRow>

8
src/components/claim/AddressClaimModal.tsx
View File

@ -152,18 +152,18 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
</RowBetween>
<ConfirmedIcon>
{!claimConfirmed ? (
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
<CustomLightSpinner src={Circle} alt="loader" size="90px" />
) : (
<UniTokenAnimated width="72px" src={tokenLogo} alt="UNI logo" />
)}
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
{claimConfirmed ? <Trans>Claimed</Trans> : <Trans>Claiming</Trans>}
</ThemedText.DeprecatedLargeHeader>
{!claimConfirmed && (
<Text fontSize={36} color={'#ff007a'} fontWeight={800}>
<Text fontSize={36} color="#ff007a" fontWeight={800}>
<Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
</Text>
)}

8
src/components/claim/ClaimModal.tsx
View File

@ -180,18 +180,18 @@ export default function ClaimModal() {
</RowBetween>
<ConfirmedIcon>
{!claimConfirmed ? (
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
<CustomLightSpinner src={Circle} alt="loader" size="90px" />
) : (
<UniTokenAnimated width="72px" src={tokenLogo} alt="UNI" />
)}
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
{claimConfirmed ? <Trans>Claimed!</Trans> : <Trans>Claiming</Trans>}
</ThemedText.DeprecatedLargeHeader>
{!claimConfirmed && (
<Text fontSize={36} color={'#ff007a'} fontWeight={800}>
<Text fontSize={36} color="#ff007a" fontWeight={800}>
<Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
</Text>
)}

4
src/components/earn/ClaimRewardModal.tsx
View File

@ -106,7 +106,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
)}
{attempting && !hash && (
<LoadingView onDismiss={wrappedOnDismiss}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedBody fontSize={20}>
<Trans>Claiming {stakingInfo?.earnedAmount?.toSignificant(6)} UNI</Trans>
</ThemedText.DeprecatedBody>
@ -115,7 +115,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
)}
{hash && (
<SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader>

4
src/components/earn/PoolCard.tsx
View File

@ -167,13 +167,13 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
<>
<Break />
<BottomSection showBackground={true}>
<ThemedText.DeprecatedBlack color={'deprecated_white'} fontWeight={500}>
<ThemedText.DeprecatedBlack color="deprecated_white" fontWeight={500}>
<span>
<Trans>Your rate</Trans>
</span>
</ThemedText.DeprecatedBlack>
<ThemedText.DeprecatedBlack style={{ textAlign: 'right' }} color={'deprecated_white'} fontWeight={500}>
<ThemedText.DeprecatedBlack style={{ textAlign: 'right' }} color="deprecated_white" fontWeight={500}>
<span role="img" aria-label="wizard-icon" style={{ marginRight: '0.5rem' }}>
⚡
</span>

6
src/components/earn/StakingModal.tsx
View File

@ -178,7 +178,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
showMaxButton={!atMaxAmount}
currency={stakingInfo.stakedAmount.currency}
pair={dummyPair}
label={''}
label=""
renderBalance={(amount) => <Trans>Available to deposit: {formatCurrencyAmount(amount, 4)}</Trans>}
id="stake-liquidity-token"
/>
@ -222,7 +222,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
)}
{attempting && !hash && (
<LoadingView onDismiss={wrappedOnDismiss}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Depositing Liquidity</Trans>
</ThemedText.DeprecatedLargeHeader>
@ -234,7 +234,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
)}
{attempting && hash && (
<SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader>

8
src/components/earn/UnstakingModal.tsx
View File

@ -91,7 +91,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
{stakingInfo?.stakedAmount && (
<AutoColumn justify="center" gap="md">
<ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
{<FormattedCurrencyAmount currencyAmount={stakingInfo.stakedAmount} />}
<FormattedCurrencyAmount currencyAmount={stakingInfo.stakedAmount} />
</ThemedText.DeprecatedBody>
<ThemedText.DeprecatedBody>
<Trans>Deposited liquidity:</Trans>
@ -101,7 +101,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
{stakingInfo?.earnedAmount && (
<AutoColumn justify="center" gap="md">
<ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
{<FormattedCurrencyAmount currencyAmount={stakingInfo?.earnedAmount} />}
<FormattedCurrencyAmount currencyAmount={stakingInfo?.earnedAmount} />
</ThemedText.DeprecatedBody>
<ThemedText.DeprecatedBody>
<Trans>Unclaimed UNI</Trans>
@ -118,7 +118,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
)}
{attempting && !hash && (
<LoadingView onDismiss={wrappedOnDismiss}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedBody fontSize={20}>
<Trans>Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UNI-V2</Trans>
</ThemedText.DeprecatedBody>
@ -130,7 +130,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
)}
{hash && (
<SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader>

4
src/components/swap/SwapDetailsDropdown.tsx
View File

@ -129,7 +129,7 @@ export default function SwapDetailsDropdown({
return (
<Wrapper style={{ marginTop: '0' }}>
<AutoColumn gap={'8px'} style={{ width: '100%', marginBottom: '-8px' }}>
<AutoColumn gap="8px" style={{ width: '100%', marginBottom: '-8px' }}>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.SWAP_DETAILS_EXPANDED}
@ -201,7 +201,7 @@ export default function SwapDetailsDropdown({
</StyledHeaderRow>
</TraceEvent>
<AnimatedDropdown open={showDetails}>
<AutoColumn gap={'8px'} style={{ padding: '0', paddingBottom: '8px' }}>
<AutoColumn gap="8px" style={{ padding: '0', paddingBottom: '8px' }}>
{trade ? (
<StyledCard>
<AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />

20
src/components/swap/SwapModalHeader.tsx
View File

@ -99,11 +99,11 @@ export default function SwapModalHeader({
}, [shouldLogModalCloseEvent, showAcceptChanges, setShouldLogModalCloseEvent, trade, priceUpdate])
return (
<AutoColumn gap={'4px'} style={{ marginTop: '1rem' }}>
<AutoColumn gap="4px" style={{ marginTop: '1rem' }}>
<LightCard padding="0.75rem 1rem">
<AutoColumn gap={'8px'}>
<AutoColumn gap="8px">
<RowBetween align="center">
<RowFixed gap={'0px'}>
<RowFixed gap="0px">
<TruncatedText
fontSize={24}
fontWeight={500}
@ -112,8 +112,8 @@ export default function SwapModalHeader({
{trade.inputAmount.toSignificant(6)}
</TruncatedText>
</RowFixed>
<RowFixed gap={'0px'}>
<CurrencyLogo currency={trade.inputAmount.currency} size={'20px'} style={{ marginRight: '12px' }} />
<RowFixed gap="0px">
<CurrencyLogo currency={trade.inputAmount.currency} size="20px" style={{ marginRight: '12px' }} />
<Text fontSize={20} fontWeight={500}>
{trade.inputAmount.currency.symbol}
</Text>
@ -128,15 +128,15 @@ export default function SwapModalHeader({
<ArrowDown size="16" color={theme.textPrimary} />
</ArrowWrapper>
<LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
<AutoColumn gap={'8px'}>
<AutoColumn gap="8px">
<RowBetween align="flex-end">
<RowFixed gap={'0px'}>
<RowFixed gap="0px">
<TruncatedText fontSize={24} fontWeight={500}>
{trade.outputAmount.toSignificant(6)}
</TruncatedText>
</RowFixed>
<RowFixed gap={'0px'}>
<CurrencyLogo currency={trade.outputAmount.currency} size={'20px'} style={{ marginRight: '12px' }} />
<RowFixed gap="0px">
<CurrencyLogo currency={trade.outputAmount.currency} size="20px" style={{ marginRight: '12px' }} />
<Text fontSize={20} fontWeight={500}>
{trade.outputAmount.currency.symbol}
</Text>
@ -159,7 +159,7 @@ export default function SwapModalHeader({
<AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} />
</LightCard>
{showAcceptChanges ? (
<SwapShowAcceptChanges justify="flex-start" gap={'0px'}>
<SwapShowAcceptChanges justify="flex-start" gap="0px">
<RowBetween>
<RowFixed>
<AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} />

4
src/components/swap/UnsupportedCurrencyFooter.tsx
View File

@ -84,7 +84,7 @@ export default function UnsupportedCurrencyFooter({
<OutlineCard key={token.address?.concat('not-supported')}>
<AutoColumn gap="10px">
<AutoRow gap="5px" align="center">
<CurrencyLogo currency={token} size={'24px'} />
<CurrencyLogo currency={token} size="24px" />
<ThemedText.DeprecatedBody fontWeight={500}>{token.symbol}</ThemedText.DeprecatedBody>
</AutoRow>
{chainId && (
@ -108,7 +108,7 @@ export default function UnsupportedCurrencyFooter({
</AutoColumn>
</Card>
</Modal>
<StyledButtonEmpty padding={'0'} onClick={() => setShowDetails(true)}>
<StyledButtonEmpty padding="0" onClick={() => setShowDetails(true)}>
<ThemedText.DeprecatedBlue>
<Trans>Read more about unsupported assets</Trans>
</ThemedText.DeprecatedBlue>

4
src/components/vote/DelegateModal.tsx
View File

@ -120,7 +120,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
)}
{attempting && !hash && (
<LoadingView onDismiss={wrappedOnDismiss}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
{usingDelegate ? <Trans>Delegating votes</Trans> : <Trans>Unlocking Votes</Trans>}
</ThemedText.DeprecatedLargeHeader>
@ -130,7 +130,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
)}
{hash && (
<SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader>

10
src/components/vote/ExecuteModal.tsx
View File

@ -106,10 +106,10 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
<StyledClosed onClick={wrappedOnDismiss} />
</RowBetween>
<ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
<CustomLightSpinner src={Circle} alt="loader" size="90px" />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Executing</Trans>
</ThemedText.DeprecatedLargeHeader>
@ -129,8 +129,8 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Execution Submitted</Trans>
</ThemedText.DeprecatedLargeHeader>

10
src/components/vote/QueueModal.tsx
View File

@ -106,10 +106,10 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
<StyledClosed onClick={wrappedOnDismiss} />
</RowBetween>
<ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
<CustomLightSpinner src={Circle} alt="loader" size="90px" />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Queueing</Trans>
</ThemedText.DeprecatedLargeHeader>
@ -129,8 +129,8 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader>

10
src/components/vote/VoteModal.tsx
View File

@ -120,10 +120,10 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
<StyledClosed onClick={wrappedOnDismiss} />
</RowBetween>
<ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
<CustomLightSpinner src={Circle} alt="loader" size="90px" />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Submitting Vote</Trans>
</ThemedText.DeprecatedLargeHeader>
@ -143,8 +143,8 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader>

2
src/nft/components/bag/profile/ListingModal.tsx
View File

@ -253,7 +253,7 @@ const ListingModal = () => {
</Box>
</Box>
) : (
<ListingButton onClick={clickStartListingFlow} buttonText={'Start listing'} showWarningOverride={isMobile} />
<ListingButton onClick={clickStartListingFlow} buttonText="Start listing" showWarningOverride={isMobile} />
)}
{(listingStatus === ListingStatus.PENDING || listingStatus === ListingStatus.SIGNING) && (
<Box

2
src/nft/components/bag/profile/ProfileAssetRow.tsx
View File

@ -25,7 +25,7 @@ const ProfileAssetRow = ({ asset }: { asset: WalletAsset }) => {
removeAsset(asset)
}}
>
<img className={styles.removeIcon} src={'/nft/svgs/minusCircle.svg'} alt="Remove item" />
<img className={styles.removeIcon} src="/nft/svgs/minusCircle.svg" alt="Remove item" />
</Box>
<img className={styles.tagAssetImage} src={asset.imageUrl} alt={asset.name} />
</div>

2
src/nft/components/collection/ActivityCells.tsx
View File

@ -362,7 +362,7 @@ export const ItemCell = ({ event, rarityVerified, collectionName, eventTimestamp
<Row gap="16" overflow="hidden" whiteSpace="nowrap">
{!noContent ? (
<Box
as={'img'}
as="img"
alt={event.tokenMetadata?.name || event.tokenId}
src={getItemImage(event.tokenMetadata)}
draggable={false}

16
src/nft/components/collection/Card.tsx
View File

@ -205,7 +205,7 @@ const Container = ({
return (
<CardContext.Provider value={providerValue}>
<Box
position={'relative'}
position="relative"
ref={assetRef}
borderRadius={BORDER_RADIUS}
borderBottomLeftRadius={BORDER_RADIUS}
@ -244,14 +244,14 @@ const Image = () => {
return (
<Box display="flex" overflow="hidden" borderTopLeftRadius={BORDER_RADIUS} borderTopRightRadius={BORDER_RADIUS}>
<Box
as={'img'}
as="img"
width="full"
style={{
aspectRatio: '1',
transition: 'transform 0.4s ease 0s',
}}
src={asset.imageUrl || asset.smallImageUrl}
objectFit={'contain'}
objectFit="contain"
draggable={false}
onError={() => setNoContent(true)}
onLoad={(e) => {
@ -289,7 +289,7 @@ const Video = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => {
<>
<Box display="flex" overflow="hidden">
<Box
as={'img'}
as="img"
alt={asset.name || asset.tokenId}
width="full"
style={{
@ -298,7 +298,7 @@ const Video = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => {
willChange: 'transform',
}}
src={asset.imageUrl || asset.smallImageUrl}
objectFit={'contain'}
objectFit="contain"
draggable={false}
onError={() => setNoContent(true)}
onLoad={() => {
@ -382,7 +382,7 @@ const Audio = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => {
<>
<Box display="flex" overflow="hidden">
<Box
as={'img'}
as="img"
alt={asset.name || asset.tokenId}
width="full"
style={{
@ -390,7 +390,7 @@ const Audio = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => {
transition: 'transform 0.4s ease 0s',
}}
src={asset.imageUrl || asset.smallImageUrl}
objectFit={'contain'}
objectFit="contain"
draggable={false}
onError={() => setNoContent(true)}
onLoad={(e) => {
@ -592,7 +592,7 @@ const SecondaryInfo = ({ children }: { children: ReactNode }) => {
const TertiaryInfo = ({ children }: { children: ReactNode }) => {
return (
<Box marginTop={'8'} color="textSecondary">
<Box marginTop="8" color="textSecondary">
{children}
</Box>
)

2
src/nft/components/collection/CollectionStats.tsx
View File

@ -245,7 +245,7 @@ const CollectionDescription = ({ description }: { description: string }) => {
const StatsItem = ({ children, label, shouldHide }: { children: ReactNode; label: string; shouldHide: boolean }) => {
return (
<Box display={shouldHide ? 'none' : 'flex'} flexDirection={'column'} alignItems="baseline" gap="2" height="min">
<Box display={shouldHide ? 'none' : 'flex'} flexDirection="column" alignItems="baseline" gap="2" height="min">
<span className={styles.statsValue}>{children}</span>
<Box as="span" className={styles.statsLabel}>
{label}

2
src/nft/components/collection/MarketplaceSelect.tsx
View File

@ -213,5 +213,5 @@ export const MarketplaceSelect = () => {
setTraitsOpen(TraitPosition.MARKPLACE_INDEX, !isOpen)
}
return <FilterDropdown title={'Marketplaces'} items={MarketplaceItems} onClick={onClick} isOpen={isOpen} />
return <FilterDropdown title="Marketplaces" items={MarketplaceItems} onClick={onClick} isOpen={isOpen} />
}

4
src/nft/components/collection/TraitSelect.tsx
View File

@ -70,8 +70,8 @@ const TraitItem = ({
<Row
key={trait.trait_value}
maxWidth="full"
overflowX={'hidden'}
overflowY={'hidden'}
overflowX="hidden"
overflowY="hidden"
fontWeight="normal"
className={`${subheadSmall} ${styles.subRowHover}`}
justifyContent="space-between"

4
src/nft/components/collection/TransactionCompleteModal.tsx
View File

@ -126,8 +126,8 @@ const TxCompleteModal = () => {
marginTop={{ sm: '20', md: '20' }}
flexWrap={{ sm: 'wrap', md: 'nowrap' }}
alignItems="center"
paddingRight={'40'}
paddingLeft={'40'}
paddingRight="40"
paddingLeft="40"
className={styles.bottomBar}
justifyContent="space-between"
>

2
src/nft/components/common/SortDropdown/FilterSortDropdown.tsx
View File

@ -13,7 +13,7 @@ export const FilterSortDropdown = ({ sortDropDownOptions }: { sortDropDownOption
const sortItems = sortDropDownOptions.map((option) => (
<SortByItem dropDownOption={option} parentOnClick={onClick} key={option.displayText} />
))
return <FilterDropdown title={'Sort by'} items={sortItems} onClick={onClick} isOpen={isOpen} />
return <FilterDropdown title="Sort by" items={sortItems} onClick={onClick} isOpen={isOpen} />
}
const SortByItem = ({

26
src/nft/components/details/AssetPriceDetails.tsx
View File

@ -204,7 +204,7 @@ export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => {
<Container>
<BestPriceContainer>
<HeaderRow>
<ThemedText.SubHeader fontWeight={500} lineHeight={'24px'}>
<ThemedText.SubHeader fontWeight={500} lineHeight="24px">
{listing ? 'Your Price' : 'List for Sale'}
</ThemedText.SubHeader>
{listing && <MarketplaceIcon alt={listing.marketplace} src={getMarketplaceIcon(listing.marketplace)} />}
@ -212,32 +212,32 @@ export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => {
<PriceRow>
{listing ? (
<>
<ThemedText.MediumHeader fontSize={'28px'} lineHeight={'36px'}>
<ThemedText.MediumHeader fontSize="28px" lineHeight="36px">
{formatEthPrice(asset.priceInfo.ETHPrice)}
</ThemedText.MediumHeader>
{USDPrice && (
<ThemedText.BodySecondary lineHeight={'24px'}>
<ThemedText.BodySecondary lineHeight="24px">
{ethNumberStandardFormatter(USDPrice, true, true)}
</ThemedText.BodySecondary>
)}
</>
) : (
<ThemedText.BodySecondary fontSize="14px" lineHeight={'20px'}>
<ThemedText.BodySecondary fontSize="14px" lineHeight="20px">
Get the best price for your NFT by selling with Uniswap.
</ThemedText.BodySecondary>
)}
</PriceRow>
{expirationDate && (
<ThemedText.BodySecondary fontSize={'14px'}>Sale ends: {timeLeft(expirationDate)}</ThemedText.BodySecondary>
<ThemedText.BodySecondary fontSize="14px">Sale ends: {timeLeft(expirationDate)}</ThemedText.BodySecondary>
)}
{!listing ? (
<BuyNowButton assetInBag={false} margin={true} useAccentColor={true} onClick={goToListPage}>
<ThemedText.SubHeader lineHeight={'20px'}>List</ThemedText.SubHeader>
<ThemedText.SubHeader lineHeight="20px">List</ThemedText.SubHeader>
</BuyNowButton>
) : (
<>
<BuyNowButton assetInBag={false} margin={true} useAccentColor={false} onClick={goToListPage}>
<ThemedText.SubHeader lineHeight={'20px'}>Adjust listing</ThemedText.SubHeader>
<ThemedText.SubHeader lineHeight="20px">Adjust listing</ThemedText.SubHeader>
</BuyNowButton>
</>
)}
@ -338,22 +338,22 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
{cheapestOrder && asset.priceInfo ? (
<BestPriceContainer>
<HeaderRow>
<ThemedText.SubHeader fontWeight={500} lineHeight={'24px'}>
<ThemedText.SubHeader fontWeight={500} lineHeight="24px">
Best Price
</ThemedText.SubHeader>
<MarketplaceIcon alt={cheapestOrder.marketplace} src={getMarketplaceIcon(cheapestOrder.marketplace)} />
</HeaderRow>
<PriceRow>
<ThemedText.MediumHeader fontSize={'28px'} lineHeight={'36px'}>
<ThemedText.MediumHeader fontSize="28px" lineHeight="36px">
{formatEthPrice(asset.priceInfo.ETHPrice)} ETH
</ThemedText.MediumHeader>
{USDPrice && (
<ThemedText.BodySecondary lineHeight={'24px'}>
<ThemedText.BodySecondary lineHeight="24px">
{ethNumberStandardFormatter(USDPrice, true, true)}
</ThemedText.BodySecondary>
)}
</PriceRow>
{expirationDate && <Tertiary fontSize={'14px'}>Sale ends: {timeLeft(expirationDate)}</Tertiary>}
{expirationDate && <Tertiary fontSize="14px">Sale ends: {timeLeft(expirationDate)}</Tertiary>}
<div>
{!isErc1555 || !assetInBag ? (
<BuyNowButtonContainer>
@ -368,7 +368,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
}
}}
>
<SubHeader color="white" lineHeight={'20px'}>
<SubHeader color="white" lineHeight="20px">
<span>{assetInBag ? 'Remove' : 'Buy Now'}</span>
</SubHeader>
</BuyNowButton>
@ -383,7 +383,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
<BuyNowButtonContainer>
<Erc1155BuyNowText>
<ThemedText.SubHeader lineHeight={'20px'}>{quantity}</ThemedText.SubHeader>
<ThemedText.SubHeader lineHeight="20px">{quantity}</ThemedText.SubHeader>
</Erc1155BuyNowText>
</BuyNowButtonContainer>

6
src/nft/components/profile/list/ListPage.tsx
View File

@ -670,7 +670,7 @@ const MarketplaceRow = ({
}}
>
<Box className={styles.removeMarketplace} visibility={hovered ? 'visible' : 'hidden'} position="absolute">
<Box as="img" width="32" src={'/nft/svgs/minusCircle.svg'} alt="Remove item" />
<Box as="img" width="32" src="/nft/svgs/minusCircle.svg" alt="Remove item" />
</Box>
<Box
as="img"
@ -781,7 +781,7 @@ const NFTListRow = ({ asset, globalPriceMethod, globalPrice, setGlobalPrice, sel
}}
>
<Box className={styles.removeAsset} visibility={hovered ? 'visible' : 'hidden'} position="absolute">
<Box as="img" width="32" src={'/nft/svgs/minusCircle.svg'} alt="Remove item" />
<Box as="img" width="32" src="/nft/svgs/minusCircle.svg" alt="Remove item" />
</Box>
<Box
as="img"
@ -898,7 +898,7 @@ export const ListPage = () => {
<NFTListingsGrid selectedMarkets={selectedMarkets} />
</MarketWrap>
<Box display={{ sm: 'flex', md: 'none' }} marginTop="14" marginX="16" marginBottom="32">
<ListingButton onClick={toggleBag} buttonText={'Continue listing'} />
<ListingButton onClick={toggleBag} buttonText="Continue listing" />
</Box>
</Column>
)

2
src/pages/AddLiquidity/Review.tsx
View File

@ -31,7 +31,7 @@ export function Review({
position={position}
inRange={!outOfRange}
ticksAtLimit={ticksAtLimit}
title={'Selected Range'}
title="Selected Range"
/>
) : null}
</AutoColumn>

10
src/pages/AddLiquidity/index.tsx
View File

@ -434,7 +434,7 @@ export default function AddLiquidity() {
const Buttons = () =>
addIsUnsupported ? (
<ButtonPrimary disabled={true} $borderRadius="12px" padding={'12px'}>
<ButtonPrimary disabled={true} $borderRadius="12px" padding="12px">
<ThemedText.DeprecatedMain mb="4px">
<Trans>Unsupported Asset</Trans>
</ThemedText.DeprecatedMain>
@ -446,12 +446,12 @@ export default function AddLiquidity() {
properties={{ received_swap_quote: false }}
element={ElementName.CONNECT_WALLET_BUTTON}
>
<ButtonLight onClick={toggleWalletModal} $borderRadius="12px" padding={'12px'}>
<ButtonLight onClick={toggleWalletModal} $borderRadius="12px" padding="12px">
<Trans>Connect Wallet</Trans>
</ButtonLight>
</TraceEvent>
) : (
<AutoColumn gap={'md'}>
<AutoColumn gap="md">
{(approvalA === ApprovalState.NOT_APPROVED ||
approvalA === ApprovalState.PENDING ||
approvalB === ApprovalState.NOT_APPROVED ||
@ -862,9 +862,7 @@ export default function AddLiquidity() {
Full range positions may earn less fees than concentrated positions. Learn more{' '}
<ExternalLink
style={{ color: theme.deprecated_yellow3, textDecoration: 'underline' }}
href={
'https://help.uniswap.org/en/articles/5434296-can-i-provide-liquidity-over-the-full-range-in-v3'
}
href="https://help.uniswap.org/en/articles/5434296-can-i-provide-liquidity-over-the-full-range-in-v3"
>
here
</ExternalLink>

16
src/pages/AddLiquidityV2/index.tsx
View File

@ -249,7 +249,7 @@ export default function AddLiquidity() {
{currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol + ' Pool Tokens'}
</Text>
</Row>
<ThemedText.DeprecatedItalic fontSize={12} textAlign="left" padding={'8px 0 0 0 '}>
<ThemedText.DeprecatedItalic fontSize={12} textAlign="left" padding="8px 0 0 0 ">
<Trans>
Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
will revert.
@ -347,13 +347,13 @@ export default function AddLiquidity() {
<ColumnCenter>
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.DeprecatedLink fontWeight={600} color={'deprecated_primaryText1'}>
<ThemedText.DeprecatedLink fontWeight={600} color="deprecated_primaryText1">
<Trans>You are the first liquidity provider.</Trans>
</ThemedText.DeprecatedLink>
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
<ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans>The ratio of tokens you add will set the price of this pool.</Trans>
</ThemedText.DeprecatedLink>
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
<ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans>Once you are happy with the rate click supply to review.</Trans>
</ThemedText.DeprecatedLink>
</AutoColumn>
@ -363,7 +363,7 @@ export default function AddLiquidity() {
<ColumnCenter>
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
<ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans>
<b>
<Trans>Tip:</Trans>
@ -406,7 +406,7 @@ export default function AddLiquidity() {
/>
{currencies[Field.CURRENCY_A] && currencies[Field.CURRENCY_B] && pairState !== PairState.INVALID && (
<>
<LightCard padding="0px" $borderRadius={'20px'}>
<LightCard padding="0px" $borderRadius="20px">
<RowBetween padding="1rem">
<ThemedText.DeprecatedSubHeader fontWeight={500} fontSize={14}>
{noLiquidity ? (
@ -416,7 +416,7 @@ export default function AddLiquidity() {
)}
</ThemedText.DeprecatedSubHeader>
</RowBetween>{' '}
<LightCard padding="1rem" $borderRadius={'20px'}>
<LightCard padding="1rem" $borderRadius="20px">
<PoolPriceBar
currencies={currencies}
poolTokenPercentage={poolTokenPercentage}
@ -446,7 +446,7 @@ export default function AddLiquidity() {
</ButtonLight>
</TraceEvent>
) : (
<AutoColumn gap={'md'}>
<AutoColumn gap="md">
{(approvalA === ApprovalState.NOT_APPROVED ||
approvalA === ApprovalState.PENDING ||
approvalB === ApprovalState.NOT_APPROVED ||

4
src/pages/CreateProposal/ProposalSubmissionModal.tsx
View File

@ -24,7 +24,7 @@ export const ProposalSubmissionModal = ({
<Modal isOpen={isOpen} onDismiss={onDismiss}>
{!hash ? (
<LoadingView onDismiss={onDismiss}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader>
<Trans>Submitting Proposal</Trans>
</ThemedText.DeprecatedLargeHeader>
@ -32,7 +32,7 @@ export const ProposalSubmissionModal = ({
</LoadingView>
) : (
<SubmittedView onDismiss={onDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}>
<AutoColumn gap="12px" justify="center">
<Text fontWeight={500} fontSize={20} textAlign="center">
<Trans>Proposal Submitted</Trans>
</Text>

2
src/pages/CreateProposal/index.tsx
View File

@ -246,7 +246,7 @@ ${bodyValue}
<CreateProposalWrapper>
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
<ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans>
<strong>Tip:</strong> Select an action and describe your proposal for the community. The proposal
cannot be modified after submission, so please verify all information before submitting. The voting

4
src/pages/Earn/Manage.tsx
View File

@ -224,7 +224,7 @@ export default function Manage() {
<ButtonPrimary
padding="8px"
$borderRadius="8px"
width={'fit-content'}
width="fit-content"
as={Link}
to={`/add/${currencyA && currencyId(currencyA)}/${currencyB && currencyId(currencyB)}`}
>
@ -314,7 +314,7 @@ export default function Manage() {
decimalPlaces={4}
start={parseFloat(countUpAmountPrevious)}
end={parseFloat(countUpAmount)}
thousandsSeparator={','}
thousandsSeparator=","
duration={1}
/>
</ThemedText.DeprecatedLargeHeader>

4
src/pages/MigrateV2/index.tsx
View File

@ -169,11 +169,11 @@ export default function MigrateV2() {
<EmptyState message={<Trans>No V2 Liquidity found.</Trans>} />
)}
<AutoColumn justify={'center'} gap="md">
<AutoColumn justify="center" gap="md">
<Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
<Trans>
Don’t see one of your v2 positions?{' '}
<StyledInternalLink id="import-pool-link" to={'/find?origin=/migrate/v2'}>
<StyledInternalLink id="import-pool-link" to="/find?origin=/migrate/v2">
Import it.
</StyledInternalLink>
</Trans>

2
src/pages/Pool/CTACards.tsx
View File

@ -97,7 +97,7 @@ export default function CTACards() {
return (
<CTASection>
<CTA1 href={'https://help.uniswap.org/en/articles/5391541-providing-liquidity-on-uniswap-v3'}>
<CTA1 href="https://help.uniswap.org/en/articles/5391541-providing-liquidity-on-uniswap-v3">
<ResponsiveColumn>
<HeaderText>
<Trans>Learn about providing liquidity</Trans> ↗

16
src/pages/Pool/PositionPage.tsx
View File

@ -196,7 +196,7 @@ function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Cu
return (
<ExternalLink href={getExplorerLink(chainId, address, ExplorerDataType.TOKEN)}>
<RowFixed>
<CurrencyLogo currency={currency} size={'20px'} style={{ marginRight: '0.5rem' }} />
<CurrencyLogo currency={currency} size="20px" style={{ marginRight: '0.5rem' }} />
<ThemedText.DeprecatedMain>{currency?.symbol} ↗</ThemedText.DeprecatedMain>
</RowFixed>
</ExternalLink>
@ -205,7 +205,7 @@ function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Cu
return (
<RowFixed>
<CurrencyLogo currency={currency} size={'20px'} style={{ marginRight: '0.5rem' }} />
<CurrencyLogo currency={currency} size="20px" style={{ marginRight: '0.5rem' }} />
<ThemedText.DeprecatedMain>{currency?.symbol}</ThemedText.DeprecatedMain>
</RowFixed>
)
@ -523,12 +523,12 @@ export function PositionPage() {
function modalHeader() {
return (
<AutoColumn gap={'md'} style={{ marginTop: '20px' }}>
<AutoColumn gap="md" style={{ marginTop: '20px' }}>
<LightCard padding="12px 16px">
<AutoColumn gap="md">
<RowBetween>
<RowFixed>
<CurrencyLogo currency={feeValueUpper?.currency} size={'20px'} style={{ marginRight: '0.5rem' }} />
<CurrencyLogo currency={feeValueUpper?.currency} size="20px" style={{ marginRight: '0.5rem' }} />
<ThemedText.DeprecatedMain>
{feeValueUpper ? formatCurrencyAmount(feeValueUpper, 4) : '-'}
</ThemedText.DeprecatedMain>
@ -537,7 +537,7 @@ export function PositionPage() {
</RowBetween>
<RowBetween>
<RowFixed>
<CurrencyLogo currency={feeValueLower?.currency} size={'20px'} style={{ marginRight: '0.5rem' }} />
<CurrencyLogo currency={feeValueLower?.currency} size="20px" style={{ marginRight: '0.5rem' }} />
<ThemedText.DeprecatedMain>
{feeValueLower ? formatCurrencyAmount(feeValueLower, 4) : '-'}
</ThemedText.DeprecatedMain>
@ -612,7 +612,7 @@ export function PositionPage() {
<ResponsiveRow>
<RowFixed>
<DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={24} margin={true} />
<ThemedText.DeprecatedLabel fontSize={'24px'} mr="10px">
<ThemedText.DeprecatedLabel fontSize="24px" mr="10px">
&nbsp;{currencyQuote?.symbol}&nbsp;/&nbsp;{currencyBase?.symbol}
</ThemedText.DeprecatedLabel>
<Badge style={{ marginRight: '8px' }}>
@ -807,7 +807,7 @@ export function PositionPage() {
<RowFixed>
<CurrencyLogo
currency={feeValueUpper?.currency}
size={'20px'}
size="20px"
style={{ marginRight: '0.5rem' }}
/>
<ThemedText.DeprecatedMain>{feeValueUpper?.currency?.symbol}</ThemedText.DeprecatedMain>
@ -822,7 +822,7 @@ export function PositionPage() {
<RowFixed>
<CurrencyLogo
currency={feeValueLower?.currency}
size={'20px'}
size="20px"
style={{ marginRight: '0.5rem' }}
/>
<ThemedText.DeprecatedMain>{feeValueLower?.currency?.symbol}</ThemedText.DeprecatedMain>

4
src/pages/Pool/index.tsx
View File

@ -168,7 +168,7 @@ function WrongNetworkCard() {
<PageWrapper>
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="lg" style={{ width: '100%' }}>
<TitleRow padding={'0'}>
<TitleRow padding="0">
<ThemedText.LargeHeader>
<Trans>Pools</Trans>
</ThemedText.LargeHeader>
@ -266,7 +266,7 @@ export default function Pool() {
<PageWrapper>
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="lg" style={{ width: '100%' }}>
<TitleRow padding={'0'}>
<TitleRow padding="0">
<ThemedText.LargeHeader>
<Trans>Pools</Trans>
</ThemedText.LargeHeader>

2
src/pages/Pool/v2.tsx
View File

@ -189,7 +189,7 @@ export default function Pool() {
) : (
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="md" style={{ width: '100%' }}>
<TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
<TitleRow style={{ marginTop: '1rem' }} padding="0">
<HideSmall>
<ThemedText.DeprecatedMediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
<Trans>Your V2 liquidity</Trans>

12
src/pages/PoolFinder/index.tsx
View File

@ -104,7 +104,7 @@ export default function PoolFinder() {
<AutoColumn style={{ padding: '1rem' }} gap="md">
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
<ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans>
<b>Tip:</b> Use this tool to find v2 pools that don&apos;t automatically appear in the interface.
</Trans>
@ -120,12 +120,12 @@ export default function PoolFinder() {
{currency0 ? (
<Row>
<CurrencyLogo currency={currency0} />
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
<Text fontWeight={500} fontSize={20} marginLeft="12px">
{currency0.symbol}
</Text>
</Row>
) : (
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
<Text fontWeight={500} fontSize={20} marginLeft="12px">
<Trans>Select a token</Trans>
</Text>
)}
@ -144,12 +144,12 @@ export default function PoolFinder() {
{currency1 ? (
<Row>
<CurrencyLogo currency={currency1} />
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
<Text fontWeight={500} fontSize={20} marginLeft="12px">
{currency1.symbol}
</Text>
</Row>
) : (
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
<Text fontWeight={500} fontSize={20} marginLeft="12px">
<Trans>Select a token</Trans>
</Text>
)}
@ -162,7 +162,7 @@ export default function PoolFinder() {
<Text textAlign="center" fontWeight={500}>
<Trans>Pool Found!</Trans>
</Text>
<StyledInternalLink to={`/pool/v2`}>
<StyledInternalLink to="/pool/v2">
<Text textAlign="center">
<Trans>Manage this pool.</Trans>
</Text>

20
src/pages/RemoveLiquidity/V3.tsx
View File

@ -202,13 +202,13 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
function modalHeader() {
return (
<AutoColumn gap={'sm'} style={{ padding: '16px' }}>
<AutoColumn gap="sm" style={{ padding: '16px' }}>
<RowBetween align="flex-end">
<Text fontSize={16} fontWeight={500}>
<Trans>Pooled {liquidityValue0?.currency?.symbol}:</Trans>
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue0?.currency} />
@ -219,7 +219,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>Pooled {liquidityValue1?.currency?.symbol}:</Trans>
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue1?.currency} />
@ -231,7 +231,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
fontSize={12}
color={theme.deprecated_text2}
textAlign="left"
padding={'8px 0 0 0'}
padding="8px 0 0 0"
>
<Trans>You will also collect fees earned from this position.</Trans>
</ThemedText.DeprecatedItalic>
@ -240,7 +240,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>{feeValue0?.currency?.symbol} Fees Earned:</Trans>
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue0?.currency} />
@ -251,7 +251,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>{feeValue1?.currency?.symbol} Fees Earned:</Trans>
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue1?.currency} />
@ -349,7 +349,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>Pooled {liquidityValue0?.currency?.symbol}:</Trans>
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue0?.currency} />
@ -360,7 +360,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>Pooled {liquidityValue1?.currency?.symbol}:</Trans>
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue1?.currency} />
@ -374,7 +374,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>{feeValue0?.currency?.symbol} Fees Earned:</Trans>
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue0?.currency} />
@ -385,7 +385,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>{feeValue1?.currency?.symbol} Fees Earned:</Trans>
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<Text fontSize={16} fontWeight={500} marginLeft="6px">
{feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue1?.currency} />

19
src/pages/RemoveLiquidity/index.tsx
View File

@ -290,13 +290,13 @@ export default function RemoveLiquidity() {
function modalHeader() {
return (
<AutoColumn gap={'md'} style={{ marginTop: '20px' }}>
<AutoColumn gap="md" style={{ marginTop: '20px' }}>
<RowBetween align="flex-end">
<Text fontSize={24} fontWeight={500}>
{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}
</Text>
<RowFixed gap="4px">
<CurrencyLogo currency={currencyA} size={'24px'} />
<CurrencyLogo currency={currencyA} size="24px" />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
{currencyA?.symbol}
</Text>
@ -310,19 +310,14 @@ export default function RemoveLiquidity() {
{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}
</Text>
<RowFixed gap="4px">
<CurrencyLogo currency={currencyB} size={'24px'} />
<CurrencyLogo currency={currencyB} size="24px" />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
{currencyB?.symbol}
</Text>
</RowFixed>
</RowBetween>
<ThemedText.DeprecatedItalic
fontSize={12}
color={theme.deprecated_text2}
textAlign="left"
padding={'12px 0 0 0'}
>
<ThemedText.DeprecatedItalic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding="12px 0 0 0">
<Trans>
Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
will revert.
@ -456,7 +451,7 @@ export default function RemoveLiquidity() {
<AutoColumn gap="md">
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
<ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans>
<b>Tip:</b> Removing pool tokens converts your position back into underlying tokens at the current
rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.
@ -591,7 +586,7 @@ export default function RemoveLiquidity() {
onMax={() => onUserInput(Field.LIQUIDITY_PERCENT, '100')}
showMaxButton={!atMaxAmount}
currency={currencyA}
label={'Output'}
label="Output"
onCurrencySelect={handleSelectCurrencyA}
id="remove-liquidity-tokena"
/>
@ -605,7 +600,7 @@ export default function RemoveLiquidity() {
onMax={() => onUserInput(Field.LIQUIDITY_PERCENT, '100')}
showMaxButton={!atMaxAmount}
currency={currencyB}
label={'Output'}
label="Output"
onCurrencySelect={handleSelectCurrencyB}
id="remove-liquidity-tokenb"
/>

2
src/pages/Swap/index.tsx
View File

@ -578,7 +578,7 @@ export default function Swap() {
</TraceEvent>
</ArrowWrapper>
</div>
<AutoColumn gap={'12px'}>
<AutoColumn gap="12px">
<div>
<OutputSwapSection showDetailsDropdown={showDetailsDropdown}>
<Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>

4
src/pages/Vote/VotePage.tsx
View File

@ -419,7 +419,7 @@ export default function VotePage() {
</AutoColumn>
<ProgressWrapper>
<Progress
status={'for'}
status="for"
percentageString={
proposalData?.forCount.greaterThan(0) ? `${forPercentage?.toFixed(0) ?? 0}%` : '0%'
}
@ -443,7 +443,7 @@ export default function VotePage() {
</AutoColumn>
<ProgressWrapper>
<Progress
status={'against'}
status="against"
percentageString={
proposalData?.againstCount?.greaterThan(0) ? `${againstPercentage?.toFixed(0) ?? 0}%` : '0%'
}

38
src/theme/index.tsx
View File

@ -245,46 +245,46 @@ const TextWrapper = styled(Text)<{ color: keyof AllColors }>`
*/
export const ThemedText = {
BodyPrimary(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={16} color={'textPrimary'} {...props} />
return <TextWrapper fontWeight={400} fontSize={16} color="textPrimary" {...props} />
},
BodySecondary(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={16} color={'textSecondary'} {...props} />
return <TextWrapper fontWeight={400} fontSize={16} color="textSecondary" {...props} />
},
HeadlineSmall(props: TextProps) {
return <TextWrapper fontWeight={600} fontSize={20} lineHeight="28px" color={'textPrimary'} {...props} />
return <TextWrapper fontWeight={600} fontSize={20} lineHeight="28px" color="textPrimary" {...props} />
},
LargeHeader(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={36} color={'textPrimary'} {...props} />
return <TextWrapper fontWeight={400} fontSize={36} color="textPrimary" {...props} />
},
Link(props: TextProps) {
return <TextWrapper fontWeight={600} fontSize={14} color={'accentAction'} {...props} />
return <TextWrapper fontWeight={600} fontSize={14} color="accentAction" {...props} />
},
MediumHeader(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={20} color={'textPrimary'} {...props} />
return <TextWrapper fontWeight={400} fontSize={20} color="textPrimary" {...props} />
},
SubHeader(props: TextProps) {
return <TextWrapper fontWeight={600} fontSize={16} color={'textPrimary'} {...props} />
return <TextWrapper fontWeight={600} fontSize={16} color="textPrimary" {...props} />
},
SubHeaderSmall(props: TextProps) {
return <TextWrapper fontWeight={500} fontSize={14} color={'textSecondary'} {...props} />
return <TextWrapper fontWeight={500} fontSize={14} color="textSecondary" {...props} />
},
DeprecatedMain(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_text2'} {...props} />
return <TextWrapper fontWeight={500} color="deprecated_text2" {...props} />
},
DeprecatedLink(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_primary1'} {...props} />
return <TextWrapper fontWeight={500} color="deprecated_primary1" {...props} />
},
DeprecatedLabel(props: TextProps) {
return <TextWrapper fontWeight={600} color={'deprecated_text1'} {...props} />
return <TextWrapper fontWeight={600} color="deprecated_text1" {...props} />
},
DeprecatedBlack(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_text1'} {...props} />
return <TextWrapper fontWeight={500} color="deprecated_text1" {...props} />
},
DeprecatedWhite(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_white'} {...props} />
return <TextWrapper fontWeight={500} color="deprecated_white" {...props} />
},
DeprecatedBody(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={16} color={'deprecated_text1'} {...props} />
return <TextWrapper fontWeight={400} fontSize={16} color="deprecated_text1" {...props} />
},
DeprecatedLargeHeader(props: TextProps) {
return <TextWrapper fontWeight={600} fontSize={24} {...props} />
@ -299,19 +299,19 @@ export const ThemedText = {
return <TextWrapper fontWeight={500} fontSize={11} {...props} />
},
DeprecatedBlue(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_blue1'} {...props} />
return <TextWrapper fontWeight={500} color="deprecated_blue1" {...props} />
},
DeprecatedYellow(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_yellow3'} {...props} />
return <TextWrapper fontWeight={500} color="deprecated_yellow3" {...props} />
},
DeprecatedDarkGray(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_text3'} {...props} />
return <TextWrapper fontWeight={500} color="deprecated_text3" {...props} />
},
DeprecatedGray(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_bg3'} {...props} />
return <TextWrapper fontWeight={500} color="deprecated_bg3" {...props} />
},
DeprecatedItalic(props: TextProps) {
return <TextWrapper fontWeight={500} fontSize={12} fontStyle={'italic'} color={'deprecated_text2'} {...props} />
return <TextWrapper fontWeight={500} fontSize={12} fontStyle="italic" color="deprecated_text2" {...props} />
},
DeprecatedError({ error, ...props }: { error: boolean } & TextProps) {
return <TextWrapper fontWeight={500} color={error ? 'deprecated_red1' : 'deprecated_text2'} {...props} />