Commit c479239a authored by Mike Grabowski's avatar Mike Grabowski Committed by GitHub

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

parent 55c3c527
...@@ -52,6 +52,7 @@ ...@@ -52,6 +52,7 @@
"@typescript-eslint/ban-ts-ignore": "off", "@typescript-eslint/ban-ts-ignore": "off",
"@typescript-eslint/explicit-module-boundary-types": "off", "@typescript-eslint/explicit-module-boundary-types": "off",
"react/react-in-jsx-scope": "off", "react/react-in-jsx-scope": "off",
"react/jsx-curly-brace-presence": ["error", {"props": "never", "children": "never" }],
"object-shorthand": ["error", "always"], "object-shorthand": ["error", "always"],
"no-restricted-imports": [ "no-restricted-imports": [
"error", "error",
......
...@@ -75,7 +75,7 @@ function ClaimSummary({ info: { recipient, uniAmountRaw } }: { info: ClaimTransa ...@@ -75,7 +75,7 @@ function ClaimSummary({ info: { recipient, uniAmountRaw } }: { info: ClaimTransa
const { ENSName } = useENSName() const { ENSName } = useENSName()
return typeof uniAmountRaw === 'string' ? ( return typeof uniAmountRaw === 'string' ? (
<Trans> <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} {ENSName ?? recipient}
</Trans> </Trans>
) : ( ) : (
......
...@@ -302,7 +302,7 @@ export default function AccountDetails({ ...@@ -302,7 +302,7 @@ export default function AccountDetails({
</UpperSection> </UpperSection>
{!!pendingTransactions.length || !!confirmedTransactions.length ? ( {!!pendingTransactions.length || !!confirmedTransactions.length ? (
<LowerSection> <LowerSection>
<AutoRow mb={'1rem'} style={{ justifyContent: 'space-between' }}> <AutoRow mb="1rem" style={{ justifyContent: 'space-between' }}>
<ThemedText.DeprecatedBody> <ThemedText.DeprecatedBody>
<Trans>Recent Transactions</Trans> <Trans>Recent Transactions</Trans>
</ThemedText.DeprecatedBody> </ThemedText.DeprecatedBody>
......
...@@ -345,22 +345,20 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti ...@@ -345,22 +345,20 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
if (!active) { if (!active) {
return ( return (
<ButtonOutlined $borderRadius="12px" padding="12px 8px" {...rest}> <ButtonOutlined $borderRadius="12px" padding="12px 8px" {...rest}>
{<RowBetween>{children}</RowBetween>} <RowBetween>{children}</RowBetween>
</ButtonOutlined> </ButtonOutlined>
) )
} else { } else {
return ( return (
<ActiveOutlined {...rest} padding="12px 8px" $borderRadius="12px"> <ActiveOutlined {...rest} padding="12px 8px" $borderRadius="12px">
{ <RowBetween>
<RowBetween> {children}
{children} <CheckboxWrapper>
<CheckboxWrapper> <Circle>
<Circle> <ResponsiveCheck size={13} stroke={theme.deprecated_white} />
<ResponsiveCheck size={13} stroke={theme.deprecated_white} /> </Circle>
</Circle> </CheckboxWrapper>
</CheckboxWrapper> </RowBetween>
</RowBetween>
}
</ActiveOutlined> </ActiveOutlined>
) )
} }
......
...@@ -281,7 +281,7 @@ export default function SwapCurrencyInputPanel({ ...@@ -281,7 +281,7 @@ export default function SwapCurrencyInputPanel({
<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: '2px' }} currency={currency} size="24px" />
) : null} ) : null}
{pair ? ( {pair ? (
<StyledTokenName className="pair-name-container"> <StyledTokenName className="pair-name-container">
......
...@@ -269,7 +269,7 @@ export default function CurrencyInputPanel({ ...@@ -269,7 +269,7 @@ 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: '0.5rem' }} currency={currency} size={'24px'} /> <CurrencyLogo style={{ marginRight: '0.5rem' }} currency={currency} size="24px" />
) : null} ) : null}
{pair ? ( {pair ? (
<StyledTokenName className="pair-name-container"> <StyledTokenName className="pair-name-container">
......
...@@ -98,7 +98,7 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren<unk ...@@ -98,7 +98,7 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren<unk
return ( return (
<FallbackWrapper> <FallbackWrapper>
<BodyWrapper> <BodyWrapper>
<AutoColumn gap={'md'}> <AutoColumn gap="md">
<SomethingWentWrongWrapper> <SomethingWentWrongWrapper>
<ThemedText.DeprecatedLabel fontSize={24} fontWeight={600}> <ThemedText.DeprecatedLabel fontSize={24} fontWeight={600}>
<Trans>Something went wrong</Trans> <Trans>Something went wrong</Trans>
......
...@@ -213,7 +213,7 @@ export const Brush = ({ ...@@ -213,7 +213,7 @@ export const Brush = ({
visible={showLabels || hovering} visible={showLabels || hovering}
> >
<TooltipBackground y="0" x="-30" height="30" width="60" rx="8" /> <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])} {brushLabelValue('w', localBrushExtent[0])}
</Tooltip> </Tooltip>
</LabelGroup> </LabelGroup>
......
...@@ -27,9 +27,9 @@ export function LoadingView({ children, onDismiss }: { children: any; onDismiss: ...@@ -27,9 +27,9 @@ export function LoadingView({ children, onDismiss }: { children: any; onDismiss:
<CloseIcon onClick={onDismiss} /> <CloseIcon onClick={onDismiss} />
</RowBetween> </RowBetween>
<ConfirmedIcon> <ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} /> <CustomLightSpinner src={Circle} alt="loader" size="90px" />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
{children} {children}
<ThemedText.DeprecatedSubHeader> <ThemedText.DeprecatedSubHeader>
<Trans>Confirm this transaction in your wallet</Trans> <Trans>Confirm this transaction in your wallet</Trans>
...@@ -60,7 +60,7 @@ export function SubmittedView({ ...@@ -60,7 +60,7 @@ export function SubmittedView({
<ConfirmedIcon> <ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} /> <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
{children} {children}
{chainId && hash && ( {chainId && hash && (
<ExternalLink <ExternalLink
......
...@@ -42,7 +42,7 @@ const PrimaryMenuRow = ({ ...@@ -42,7 +42,7 @@ const PrimaryMenuRow = ({
<Row onClick={close}>{children}</Row> <Row onClick={close}>{children}</Row>
</NavLink> </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} {children}
</Row> </Row>
)} )}
......
...@@ -65,7 +65,7 @@ const PageTabs = () => { ...@@ -65,7 +65,7 @@ const PageTabs = () => {
<Trans>NFTs</Trans> <Trans>NFTs</Trans>
</MenuItem> </MenuItem>
)} )}
<MenuItem href="/pool" id={'pool-nav-link'} isActive={isPoolActive}> <MenuItem href="/pool" id="pool-nav-link" isActive={isPoolActive}>
<Trans>Pool</Trans> <Trans>Pool</Trans>
</MenuItem> </MenuItem>
</> </>
......
...@@ -141,7 +141,7 @@ export default function Polling() { ...@@ -141,7 +141,7 @@ export default function Polling() {
<> <>
<RowFixed> <RowFixed>
<StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} warning={warning}> <StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} warning={warning}>
<ExternalLink href={'https://etherscan.io/gastracker'}> <ExternalLink href="https://etherscan.io/gastracker">
{priceGwei ? ( {priceGwei ? (
<RowFixed style={{ marginRight: '8px' }}> <RowFixed style={{ marginRight: '8px' }}>
<ThemedText.DeprecatedMain fontSize="11px" mr="8px" color={theme.deprecated_text3}> <ThemedText.DeprecatedMain fontSize="11px" mr="8px" color={theme.deprecated_text3}>
......
...@@ -121,7 +121,7 @@ export default function ClaimPopup() { ...@@ -121,7 +121,7 @@ export default function ClaimPopup() {
</ThemedText.DeprecatedSubHeader> </ThemedText.DeprecatedSubHeader>
</AutoColumn> </AutoColumn>
<AutoColumn style={{ zIndex: 10 }} justify="center"> <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> <Trans>Claim your UNI tokens</Trans>
</ButtonPrimary> </ButtonPrimary>
</AutoColumn> </AutoColumn>
......
...@@ -143,7 +143,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position ...@@ -143,7 +143,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
</RowFixed> </RowFixed>
{token0Deposited ? ( {token0Deposited ? (
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{token0Deposited?.toSignificant(6)} {token0Deposited?.toSignificant(6)}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
...@@ -161,7 +161,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position ...@@ -161,7 +161,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
</RowFixed> </RowFixed>
{token1Deposited ? ( {token1Deposited ? (
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{token1Deposited?.toSignificant(6)} {token1Deposited?.toSignificant(6)}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />
......
...@@ -115,7 +115,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos ...@@ -115,7 +115,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
</Text> </Text>
{token0Deposited ? ( {token0Deposited ? (
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{token0Deposited?.toSignificant(6)} {token0Deposited?.toSignificant(6)}
</Text> </Text>
</RowFixed> </RowFixed>
...@@ -129,7 +129,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos ...@@ -129,7 +129,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
</Text> </Text>
{token1Deposited ? ( {token1Deposited ? (
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{token1Deposited?.toSignificant(6)} {token1Deposited?.toSignificant(6)}
</Text> </Text>
</RowFixed> </RowFixed>
...@@ -254,7 +254,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi ...@@ -254,7 +254,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
</RowFixed> </RowFixed>
{token0Deposited ? ( {token0Deposited ? (
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{token0Deposited?.toSignificant(6)} {token0Deposited?.toSignificant(6)}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
...@@ -272,7 +272,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi ...@@ -272,7 +272,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
</RowFixed> </RowFixed>
{token1Deposited ? ( {token1Deposited ? (
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{token1Deposited?.toSignificant(6)} {token1Deposited?.toSignificant(6)}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />
......
...@@ -124,11 +124,11 @@ export function PrivacyPolicy() { ...@@ -124,11 +124,11 @@ export function PrivacyPolicy() {
<AutoColumn gap="16px"> <AutoColumn gap="16px">
<AutoColumn gap="8px" style={{ width: '100%' }}> <AutoColumn gap="8px" style={{ width: '100%' }}>
<StyledExternalCard> <StyledExternalCard>
<ExternalLink href={'https://uniswap.org/terms-of-service'}> <ExternalLink href="https://uniswap.org/terms-of-service">
<RowBetween> <RowBetween>
<AutoRow gap="4px"> <AutoRow gap="4px">
<Info size={20} /> <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> <Trans>Uniswap Labs&apos; Terms of Service</Trans>
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
</AutoRow> </AutoRow>
...@@ -137,11 +137,11 @@ export function PrivacyPolicy() { ...@@ -137,11 +137,11 @@ export function PrivacyPolicy() {
</ExternalLink> </ExternalLink>
</StyledExternalCard> </StyledExternalCard>
<StyledExternalCard> <StyledExternalCard>
<ExternalLink href={'https://uniswap.org/privacy-policy/'}> <ExternalLink href="https://uniswap.org/privacy-policy/">
<RowBetween> <RowBetween>
<AutoRow gap="4px"> <AutoRow gap="4px">
<Info size={20} /> <Info size={20} />
<ThemedText.DeprecatedMain fontSize={14} color={'deprecated_primaryText1'}> <ThemedText.DeprecatedMain fontSize={14} color="deprecated_primaryText1">
<Trans>Privacy Policy</Trans> <Trans>Privacy Policy</Trans>
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
</AutoRow> </AutoRow>
...@@ -159,7 +159,7 @@ export function PrivacyPolicy() { ...@@ -159,7 +159,7 @@ export function PrivacyPolicy() {
<AutoColumn gap="8px"> <AutoColumn gap="8px">
<AutoRow gap="4px"> <AutoRow gap="4px">
<Info size={18} /> <Info size={18} />
<ThemedText.DeprecatedMain fontSize={14} color={'deprecated_text1'}> <ThemedText.DeprecatedMain fontSize={14} color="deprecated_text1">
{name} {name}
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
</AutoRow> </AutoRow>
......
...@@ -55,7 +55,7 @@ export default function ProgressCircles({ steps, disabled = false, ...rest }: Pr ...@@ -55,7 +55,7 @@ export default function ProgressCircles({ steps, disabled = false, ...rest }: Pr
const theme = useTheme() const theme = useTheme()
return ( return (
<Wrapper justify={'center'} {...rest}> <Wrapper justify="center" {...rest}>
<Grouping> <Grouping>
{steps.map((step, i) => { {steps.map((step, i) => {
return ( return (
......
...@@ -99,9 +99,9 @@ export default function RoutingDiagram({ ...@@ -99,9 +99,9 @@ export default function RoutingDiagram({
<Wrapper> <Wrapper>
{routes.map((entry, index) => ( {routes.map((entry, index) => (
<RouteContainerRow key={index}> <RouteContainerRow key={index}>
<CurrencyLogo currency={tokenIn} size={'20px'} /> <CurrencyLogo currency={tokenIn} size="20px" />
<Route entry={entry} /> <Route entry={entry} />
<CurrencyLogo currency={tokenOut} size={'20px'} /> <CurrencyLogo currency={tokenOut} size="20px" />
</RouteContainerRow> </RouteContainerRow>
))} ))}
</Wrapper> </Wrapper>
...@@ -117,7 +117,7 @@ function Route({ entry: { percent, path, protocol } }: { entry: RoutingDiagramEn ...@@ -117,7 +117,7 @@ function Route({ entry: { percent, path, protocol } }: { entry: RoutingDiagramEn
<OpaqueBadge> <OpaqueBadge>
{protocol === Protocol.MIXED ? ( {protocol === Protocol.MIXED ? (
<MixedProtocolBadge> <MixedProtocolBadge>
<BadgeText fontSize={12}>{'V3 + V2'}</BadgeText> <BadgeText fontSize={12}>V3 + V2</BadgeText>
</MixedProtocolBadge> </MixedProtocolBadge>
) : ( ) : (
<ProtocolBadge> <ProtocolBadge>
......
...@@ -52,8 +52,8 @@ it('renders loading rows when isLoading is true', () => { ...@@ -52,8 +52,8 @@ it('renders loading rows when isLoading is true', () => {
showImportView={noOp} showImportView={noOp}
setImportToken={noOp} setImportToken={noOp}
isLoading={true} isLoading={true}
searchQuery={''} searchQuery=""
isAddressSearch={''} isAddressSearch=""
/> />
) )
expect(asFragment()).toMatchSnapshot() expect(asFragment()).toMatchSnapshot()
...@@ -70,8 +70,8 @@ it('renders currency rows correctly when currencies list is non-empty', () => { ...@@ -70,8 +70,8 @@ it('renders currency rows correctly when currencies list is non-empty', () => {
showImportView={noOp} showImportView={noOp}
setImportToken={noOp} setImportToken={noOp}
isLoading={false} isLoading={false}
searchQuery={''} searchQuery=""
isAddressSearch={''} isAddressSearch=""
/> />
) )
expect(asFragment()).toMatchSnapshot() expect(asFragment()).toMatchSnapshot()
......
...@@ -151,7 +151,7 @@ export function CurrencyRow({ ...@@ -151,7 +151,7 @@ export function CurrencyRow({
<Column> <Column>
<CurrencyLogo <CurrencyLogo
currency={currency} currency={currency}
size={'36px'} size="36px"
style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }} style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }}
/> />
</Column> </Column>
...@@ -161,7 +161,7 @@ export function CurrencyRow({ ...@@ -161,7 +161,7 @@ export function CurrencyRow({
<TokenSafetyIcon warning={warning} /> <TokenSafetyIcon warning={warning} />
{isBlockedToken && <BlockedTokenIcon />} {isBlockedToken && <BlockedTokenIcon />}
</Row> </Row>
<ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}> <ThemedText.DeprecatedDarkGray ml="0px" fontSize="12px" fontWeight={300}>
{currency.symbol} {currency.symbol}
</ThemedText.DeprecatedDarkGray> </ThemedText.DeprecatedDarkGray>
</AutoColumn> </AutoColumn>
......
...@@ -164,7 +164,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa ...@@ -164,7 +164,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
</Text> </Text>
<ButtonError <ButtonError
error={true} error={true}
padding={'12px'} padding="12px"
onClick={() => { onClick={() => {
const confirmWord = t`confirm` const confirmWord = t`confirm`
if (window.prompt(t`Please type the word "${confirmWord}" to enable expert mode.`) === confirmWord) { if (window.prompt(t`Please type the word "${confirmWord}" to enable expert mode.`) === confirmWord) {
......
...@@ -52,7 +52,7 @@ export default function TokenWarningMessage({ warning, tokenAddress }: TokenWarn ...@@ -52,7 +52,7 @@ export default function TokenWarningMessage({ warning, tokenAddress }: TokenWarn
return ( return (
<Label color={color}> <Label color={color}>
<TitleRow> <TitleRow>
{warning.canProceed ? <AlertTriangle size={'16px'} /> : <AlertOctagon size={'16px'} />} {warning.canProceed ? <AlertTriangle size="16px" /> : <AlertOctagon size="16px" />}
<Title marginLeft="7px">{warning.message}</Title> <Title marginLeft="7px">{warning.message}</Title>
</TitleRow> </TitleRow>
......
...@@ -99,10 +99,10 @@ export function AboutSection({ address, description, homepageUrl, twitterName }: ...@@ -99,10 +99,10 @@ export function AboutSection({ address, description, homepageUrl, twitterName }:
<Trans>Links</Trans> <Trans>Links</Trans>
</ThemedText.SubHeaderSmall> </ThemedText.SubHeaderSmall>
<ResourcesContainer> <ResourcesContainer>
<Resource name={'Etherscan'} link={`https://etherscan.io/address/${address}`} /> <Resource name="Etherscan" link={`https://etherscan.io/address/${address}`} />
<Resource name={'More analytics'} link={`https://info.uniswap.org/#/tokens/${address}`} /> <Resource name="More analytics" link={`https://info.uniswap.org/#/tokens/${address}`} />
{homepageUrl && <Resource name={'Website'} link={homepageUrl} />} {homepageUrl && <Resource name="Website" link={homepageUrl} />}
{twitterName && <Resource name={'Twitter'} link={`https://twitter.com/${twitterName}`} />} {twitterName && <Resource name="Twitter" link={`https://twitter.com/${twitterName}`} />}
</ResourcesContainer> </ResourcesContainer>
</AboutContainer> </AboutContainer>
) )
......
...@@ -263,7 +263,7 @@ export function PriceChart({ width, height, prices, timePeriod }: PriceChartProp ...@@ -263,7 +263,7 @@ export function PriceChart({ width, height, prices, timePeriod }: PriceChartProp
tickStroke={theme.backgroundOutline} tickStroke={theme.backgroundOutline}
tickLength={4} tickLength={4}
hideTicks={true} hideTicks={true}
tickTransform={'translate(0 -5)'} tickTransform="translate(0 -5)"
tickValues={ticks} tickValues={ticks}
top={graphHeight - 1} top={graphHeight - 1}
tickLabelProps={() => ({ tickLabelProps={() => ({
...@@ -320,7 +320,7 @@ export function PriceChart({ width, height, prices, timePeriod }: PriceChartProp ...@@ -320,7 +320,7 @@ export function PriceChart({ width, height, prices, timePeriod }: PriceChartProp
y={0} y={0}
width={width} width={width}
height={graphHeight} height={graphHeight}
fill={'transparent'} fill="transparent"
onTouchStart={handleHover} onTouchStart={handleHover}
onTouchMove={handleHover} onTouchMove={handleHover}
onMouseMove={handleHover} onMouseMove={handleHover}
......
...@@ -91,7 +91,7 @@ export default function ShareButton(tokenInfo: TokenInfo) { ...@@ -91,7 +91,7 @@ export default function ShareButton(tokenInfo: TokenInfo) {
return ( return (
<ShareButtonDisplay ref={node}> <ShareButtonDisplay ref={node}>
<Share onClick={toggleShare} aria-label={`ShareOptions`} open={open} /> <Share onClick={toggleShare} aria-label="ShareOptions" open={open} />
{open && ( {open && (
<ShareActions> <ShareActions>
<ShareAction onClick={() => copyHelperRef.current?.forceCopy()}> <ShareAction onClick={() => copyHelperRef.current?.forceCopy()}>
......
...@@ -149,11 +149,11 @@ export default function TokenDetails({ ...@@ -149,11 +149,11 @@ export default function TokenDetails({
<LogoContainer> <LogoContainer>
<CurrencyLogo <CurrencyLogo
src={logoSrc} src={logoSrc}
size={'32px'} size="32px"
symbol={isNative ? nativeCurrency?.symbol : token?.symbol} symbol={isNative ? nativeCurrency?.symbol : token?.symbol}
currency={isNative ? nativeCurrency : token} currency={isNative ? nativeCurrency : token}
/> />
<L2NetworkLogo networkUrl={L2Icon} size={'16px'} /> <L2NetworkLogo networkUrl={L2Icon} size="16px" />
</LogoContainer> </LogoContainer>
{token?.name ?? <Trans>Name not found</Trans>} {token?.name ?? <Trans>Name not found</Trans>}
<TokenSymbol>{token?.symbol ?? <Trans>Symbol not found</Trans>}</TokenSymbol> <TokenSymbol>{token?.symbol ?? <Trans>Symbol not found</Trans>}</TokenSymbol>
......
...@@ -103,7 +103,7 @@ export default function NetworkFilter() { ...@@ -103,7 +103,7 @@ export default function NetworkFilter() {
return ( return (
<StyledMenu ref={node}> <StyledMenu ref={node}>
<NetworkFilterOption onClick={toggleMenu} aria-label={`networkFilter`} active={open}> <NetworkFilterOption onClick={toggleMenu} aria-label="networkFilter" active={open}>
<StyledMenuContent> <StyledMenuContent>
<NetworkLabel> <NetworkLabel>
<Logo src={chainInfo?.logoUrl} /> {chainInfo?.label} <Logo src={chainInfo?.logoUrl} /> {chainInfo?.label}
......
...@@ -111,7 +111,7 @@ export default function TimeSelector() { ...@@ -111,7 +111,7 @@ export default function TimeSelector() {
return ( return (
<StyledMenu ref={node}> <StyledMenu ref={node}>
<FilterOption onClick={toggleMenu} aria-label={`timeSelector`} active={open}> <FilterOption onClick={toggleMenu} aria-label="timeSelector" active={open}>
<StyledMenuContent> <StyledMenuContent>
{DISPLAYS[activeTime]} {DISPLAYS[activeTime]}
<Chevron open={open}> <Chevron open={open}>
......
...@@ -73,7 +73,7 @@ function ConfirmationPendingContent({ ...@@ -73,7 +73,7 @@ function ConfirmationPendingContent({
<ConfirmedIcon inline={inline}> <ConfirmedIcon inline={inline}>
<CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} /> <CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<Text fontWeight={500} fontSize={20} color={theme.textPrimary} textAlign="center"> <Text fontWeight={500} fontSize={20} color={theme.textPrimary} textAlign="center">
<Trans>Waiting for confirmation</Trans> <Trans>Waiting for confirmation</Trans>
</Text> </Text>
...@@ -135,7 +135,7 @@ function TransactionSubmittedContent({ ...@@ -135,7 +135,7 @@ function TransactionSubmittedContent({
<ConfirmedIcon inline={inline}> <ConfirmedIcon inline={inline}>
<ArrowUpCircle strokeWidth={1} size={inline ? '40px' : '75px'} color={theme.accentActive} /> <ArrowUpCircle strokeWidth={1} size={inline ? '40px' : '75px'} color={theme.accentActive} />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'} style={{ paddingBottom: '12px' }}> <AutoColumn gap="12px" justify="center" style={{ paddingBottom: '12px' }}>
<ThemedText.MediumHeader textAlign="center"> <ThemedText.MediumHeader textAlign="center">
<Trans>Transaction submitted</Trans> <Trans>Transaction submitted</Trans>
</ThemedText.MediumHeader> </ThemedText.MediumHeader>
...@@ -148,7 +148,7 @@ function TransactionSubmittedContent({ ...@@ -148,7 +148,7 @@ function TransactionSubmittedContent({
) : ( ) : (
<RowFixed> <RowFixed>
<Trans>Added {currencyToAdd.symbol} </Trans> <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> </RowFixed>
)} )}
</ButtonLight> </ButtonLight>
...@@ -276,7 +276,7 @@ function L2Content({ ...@@ -276,7 +276,7 @@ function L2Content({
<CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} /> <CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
)} )}
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<Text fontWeight={500} fontSize={20} textAlign="center"> <Text fontWeight={500} fontSize={20} textAlign="center">
{!hash ? ( {!hash ? (
<Trans>Confirm transaction in wallet</Trans> <Trans>Confirm transaction in wallet</Trans>
...@@ -300,7 +300,7 @@ function L2Content({ ...@@ -300,7 +300,7 @@ function L2Content({
) : ( ) : (
<div style={{ height: '17px' }} /> <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 ? ( {!secondsToConfirm ? (
<div style={{ height: '24px' }} /> <div style={{ height: '24px' }} />
) : ( ) : (
......
...@@ -20,7 +20,7 @@ const METAMASK_PROPS = { ...@@ -20,7 +20,7 @@ const METAMASK_PROPS = {
} }
export function InstallMetaMaskOption() { 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 }) { export function MetaMaskOption({ tryActivation }: { tryActivation: (connector: Connector) => void }) {
......
...@@ -130,7 +130,7 @@ export default function Option({ ...@@ -130,7 +130,7 @@ export default function Option({
<OptionCardLeft> <OptionCardLeft>
<HeaderText color={color}> <HeaderText color={color}>
<IconWrapper size={size}> <IconWrapper size={size}>
<img src={icon} alt={'Icon'} /> <img src={icon} alt="Icon" />
</IconWrapper> </IconWrapper>
{header} {header}
</HeaderText> </HeaderText>
......
...@@ -325,7 +325,7 @@ export default function WalletModal({ ...@@ -325,7 +325,7 @@ export default function WalletModal({
) )
return nftFlagEnabled ? ( return nftFlagEnabled ? (
<AutoRow style={{ flexWrap: 'nowrap', padding: '4px 16px' }}> <AutoRow style={{ flexWrap: 'nowrap', padding: '4px 16px' }}>
<ThemedText.BodySecondary fontSize={16} lineHeight={'24px'}> <ThemedText.BodySecondary fontSize={16} lineHeight="24px">
{content} {content}
</ThemedText.BodySecondary> </ThemedText.BodySecondary>
</AutoRow> </AutoRow>
......
...@@ -152,18 +152,18 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole ...@@ -152,18 +152,18 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
</RowBetween> </RowBetween>
<ConfirmedIcon> <ConfirmedIcon>
{!claimConfirmed ? ( {!claimConfirmed ? (
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} /> <CustomLightSpinner src={Circle} alt="loader" size="90px" />
) : ( ) : (
<UniTokenAnimated width="72px" src={tokenLogo} alt="UNI logo" /> <UniTokenAnimated width="72px" src={tokenLogo} alt="UNI logo" />
)} )}
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader fontWeight={600} color="black"> <ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
{claimConfirmed ? <Trans>Claimed</Trans> : <Trans>Claiming</Trans>} {claimConfirmed ? <Trans>Claimed</Trans> : <Trans>Claiming</Trans>}
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
{!claimConfirmed && ( {!claimConfirmed && (
<Text fontSize={36} color={'#ff007a'} fontWeight={800}> <Text fontSize={36} color="#ff007a" fontWeight={800}>
<Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans> <Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
</Text> </Text>
)} )}
......
...@@ -180,18 +180,18 @@ export default function ClaimModal() { ...@@ -180,18 +180,18 @@ export default function ClaimModal() {
</RowBetween> </RowBetween>
<ConfirmedIcon> <ConfirmedIcon>
{!claimConfirmed ? ( {!claimConfirmed ? (
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} /> <CustomLightSpinner src={Circle} alt="loader" size="90px" />
) : ( ) : (
<UniTokenAnimated width="72px" src={tokenLogo} alt="UNI" /> <UniTokenAnimated width="72px" src={tokenLogo} alt="UNI" />
)} )}
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader fontWeight={600} color="black"> <ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
{claimConfirmed ? <Trans>Claimed!</Trans> : <Trans>Claiming</Trans>} {claimConfirmed ? <Trans>Claimed!</Trans> : <Trans>Claiming</Trans>}
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
{!claimConfirmed && ( {!claimConfirmed && (
<Text fontSize={36} color={'#ff007a'} fontWeight={800}> <Text fontSize={36} color="#ff007a" fontWeight={800}>
<Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans> <Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
</Text> </Text>
)} )}
......
...@@ -106,7 +106,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta ...@@ -106,7 +106,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
)} )}
{attempting && !hash && ( {attempting && !hash && (
<LoadingView onDismiss={wrappedOnDismiss}> <LoadingView onDismiss={wrappedOnDismiss}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedBody fontSize={20}> <ThemedText.DeprecatedBody fontSize={20}>
<Trans>Claiming {stakingInfo?.earnedAmount?.toSignificant(6)} UNI</Trans> <Trans>Claiming {stakingInfo?.earnedAmount?.toSignificant(6)} UNI</Trans>
</ThemedText.DeprecatedBody> </ThemedText.DeprecatedBody>
...@@ -115,7 +115,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta ...@@ -115,7 +115,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
)} )}
{hash && ( {hash && (
<SubmittedView onDismiss={wrappedOnDismiss} hash={hash}> <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans> <Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
......
...@@ -167,13 +167,13 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo }) ...@@ -167,13 +167,13 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
<> <>
<Break /> <Break />
<BottomSection showBackground={true}> <BottomSection showBackground={true}>
<ThemedText.DeprecatedBlack color={'deprecated_white'} fontWeight={500}> <ThemedText.DeprecatedBlack color="deprecated_white" fontWeight={500}>
<span> <span>
<Trans>Your rate</Trans> <Trans>Your rate</Trans>
</span> </span>
</ThemedText.DeprecatedBlack> </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 role="img" aria-label="wizard-icon" style={{ marginRight: '0.5rem' }}>
</span> </span>
......
...@@ -178,7 +178,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui ...@@ -178,7 +178,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
showMaxButton={!atMaxAmount} showMaxButton={!atMaxAmount}
currency={stakingInfo.stakedAmount.currency} currency={stakingInfo.stakedAmount.currency}
pair={dummyPair} pair={dummyPair}
label={''} label=""
renderBalance={(amount) => <Trans>Available to deposit: {formatCurrencyAmount(amount, 4)}</Trans>} renderBalance={(amount) => <Trans>Available to deposit: {formatCurrencyAmount(amount, 4)}</Trans>}
id="stake-liquidity-token" id="stake-liquidity-token"
/> />
...@@ -222,7 +222,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui ...@@ -222,7 +222,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
)} )}
{attempting && !hash && ( {attempting && !hash && (
<LoadingView onDismiss={wrappedOnDismiss}> <LoadingView onDismiss={wrappedOnDismiss}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Depositing Liquidity</Trans> <Trans>Depositing Liquidity</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
...@@ -234,7 +234,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui ...@@ -234,7 +234,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
)} )}
{attempting && hash && ( {attempting && hash && (
<SubmittedView onDismiss={wrappedOnDismiss} hash={hash}> <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans> <Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
......
...@@ -91,7 +91,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki ...@@ -91,7 +91,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
{stakingInfo?.stakedAmount && ( {stakingInfo?.stakedAmount && (
<AutoColumn justify="center" gap="md"> <AutoColumn justify="center" gap="md">
<ThemedText.DeprecatedBody fontWeight={600} fontSize={36}> <ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
{<FormattedCurrencyAmount currencyAmount={stakingInfo.stakedAmount} />} <FormattedCurrencyAmount currencyAmount={stakingInfo.stakedAmount} />
</ThemedText.DeprecatedBody> </ThemedText.DeprecatedBody>
<ThemedText.DeprecatedBody> <ThemedText.DeprecatedBody>
<Trans>Deposited liquidity:</Trans> <Trans>Deposited liquidity:</Trans>
...@@ -101,7 +101,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki ...@@ -101,7 +101,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
{stakingInfo?.earnedAmount && ( {stakingInfo?.earnedAmount && (
<AutoColumn justify="center" gap="md"> <AutoColumn justify="center" gap="md">
<ThemedText.DeprecatedBody fontWeight={600} fontSize={36}> <ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
{<FormattedCurrencyAmount currencyAmount={stakingInfo?.earnedAmount} />} <FormattedCurrencyAmount currencyAmount={stakingInfo?.earnedAmount} />
</ThemedText.DeprecatedBody> </ThemedText.DeprecatedBody>
<ThemedText.DeprecatedBody> <ThemedText.DeprecatedBody>
<Trans>Unclaimed UNI</Trans> <Trans>Unclaimed UNI</Trans>
...@@ -118,7 +118,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki ...@@ -118,7 +118,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
)} )}
{attempting && !hash && ( {attempting && !hash && (
<LoadingView onDismiss={wrappedOnDismiss}> <LoadingView onDismiss={wrappedOnDismiss}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedBody fontSize={20}> <ThemedText.DeprecatedBody fontSize={20}>
<Trans>Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UNI-V2</Trans> <Trans>Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UNI-V2</Trans>
</ThemedText.DeprecatedBody> </ThemedText.DeprecatedBody>
...@@ -130,7 +130,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki ...@@ -130,7 +130,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
)} )}
{hash && ( {hash && (
<SubmittedView onDismiss={wrappedOnDismiss} hash={hash}> <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans> <Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
......
...@@ -129,7 +129,7 @@ export default function SwapDetailsDropdown({ ...@@ -129,7 +129,7 @@ export default function SwapDetailsDropdown({
return ( return (
<Wrapper style={{ marginTop: '0' }}> <Wrapper style={{ marginTop: '0' }}>
<AutoColumn gap={'8px'} style={{ width: '100%', marginBottom: '-8px' }}> <AutoColumn gap="8px" style={{ width: '100%', marginBottom: '-8px' }}>
<TraceEvent <TraceEvent
events={[BrowserEvent.onClick]} events={[BrowserEvent.onClick]}
name={EventName.SWAP_DETAILS_EXPANDED} name={EventName.SWAP_DETAILS_EXPANDED}
...@@ -201,7 +201,7 @@ export default function SwapDetailsDropdown({ ...@@ -201,7 +201,7 @@ export default function SwapDetailsDropdown({
</StyledHeaderRow> </StyledHeaderRow>
</TraceEvent> </TraceEvent>
<AnimatedDropdown open={showDetails}> <AnimatedDropdown open={showDetails}>
<AutoColumn gap={'8px'} style={{ padding: '0', paddingBottom: '8px' }}> <AutoColumn gap="8px" style={{ padding: '0', paddingBottom: '8px' }}>
{trade ? ( {trade ? (
<StyledCard> <StyledCard>
<AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} /> <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />
......
...@@ -99,11 +99,11 @@ export default function SwapModalHeader({ ...@@ -99,11 +99,11 @@ export default function SwapModalHeader({
}, [shouldLogModalCloseEvent, showAcceptChanges, setShouldLogModalCloseEvent, trade, priceUpdate]) }, [shouldLogModalCloseEvent, showAcceptChanges, setShouldLogModalCloseEvent, trade, priceUpdate])
return ( return (
<AutoColumn gap={'4px'} style={{ marginTop: '1rem' }}> <AutoColumn gap="4px" style={{ marginTop: '1rem' }}>
<LightCard padding="0.75rem 1rem"> <LightCard padding="0.75rem 1rem">
<AutoColumn gap={'8px'}> <AutoColumn gap="8px">
<RowBetween align="center"> <RowBetween align="center">
<RowFixed gap={'0px'}> <RowFixed gap="0px">
<TruncatedText <TruncatedText
fontSize={24} fontSize={24}
fontWeight={500} fontWeight={500}
...@@ -112,8 +112,8 @@ export default function SwapModalHeader({ ...@@ -112,8 +112,8 @@ export default function SwapModalHeader({
{trade.inputAmount.toSignificant(6)} {trade.inputAmount.toSignificant(6)}
</TruncatedText> </TruncatedText>
</RowFixed> </RowFixed>
<RowFixed gap={'0px'}> <RowFixed gap="0px">
<CurrencyLogo currency={trade.inputAmount.currency} size={'20px'} style={{ marginRight: '12px' }} /> <CurrencyLogo currency={trade.inputAmount.currency} size="20px" style={{ marginRight: '12px' }} />
<Text fontSize={20} fontWeight={500}> <Text fontSize={20} fontWeight={500}>
{trade.inputAmount.currency.symbol} {trade.inputAmount.currency.symbol}
</Text> </Text>
...@@ -128,15 +128,15 @@ export default function SwapModalHeader({ ...@@ -128,15 +128,15 @@ export default function SwapModalHeader({
<ArrowDown size="16" color={theme.textPrimary} /> <ArrowDown size="16" color={theme.textPrimary} />
</ArrowWrapper> </ArrowWrapper>
<LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}> <LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
<AutoColumn gap={'8px'}> <AutoColumn gap="8px">
<RowBetween align="flex-end"> <RowBetween align="flex-end">
<RowFixed gap={'0px'}> <RowFixed gap="0px">
<TruncatedText fontSize={24} fontWeight={500}> <TruncatedText fontSize={24} fontWeight={500}>
{trade.outputAmount.toSignificant(6)} {trade.outputAmount.toSignificant(6)}
</TruncatedText> </TruncatedText>
</RowFixed> </RowFixed>
<RowFixed gap={'0px'}> <RowFixed gap="0px">
<CurrencyLogo currency={trade.outputAmount.currency} size={'20px'} style={{ marginRight: '12px' }} /> <CurrencyLogo currency={trade.outputAmount.currency} size="20px" style={{ marginRight: '12px' }} />
<Text fontSize={20} fontWeight={500}> <Text fontSize={20} fontWeight={500}>
{trade.outputAmount.currency.symbol} {trade.outputAmount.currency.symbol}
</Text> </Text>
...@@ -159,7 +159,7 @@ export default function SwapModalHeader({ ...@@ -159,7 +159,7 @@ export default function SwapModalHeader({
<AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} /> <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} />
</LightCard> </LightCard>
{showAcceptChanges ? ( {showAcceptChanges ? (
<SwapShowAcceptChanges justify="flex-start" gap={'0px'}> <SwapShowAcceptChanges justify="flex-start" gap="0px">
<RowBetween> <RowBetween>
<RowFixed> <RowFixed>
<AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} /> <AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} />
......
...@@ -84,7 +84,7 @@ export default function UnsupportedCurrencyFooter({ ...@@ -84,7 +84,7 @@ export default function UnsupportedCurrencyFooter({
<OutlineCard key={token.address?.concat('not-supported')}> <OutlineCard key={token.address?.concat('not-supported')}>
<AutoColumn gap="10px"> <AutoColumn gap="10px">
<AutoRow gap="5px" align="center"> <AutoRow gap="5px" align="center">
<CurrencyLogo currency={token} size={'24px'} /> <CurrencyLogo currency={token} size="24px" />
<ThemedText.DeprecatedBody fontWeight={500}>{token.symbol}</ThemedText.DeprecatedBody> <ThemedText.DeprecatedBody fontWeight={500}>{token.symbol}</ThemedText.DeprecatedBody>
</AutoRow> </AutoRow>
{chainId && ( {chainId && (
...@@ -108,7 +108,7 @@ export default function UnsupportedCurrencyFooter({ ...@@ -108,7 +108,7 @@ export default function UnsupportedCurrencyFooter({
</AutoColumn> </AutoColumn>
</Card> </Card>
</Modal> </Modal>
<StyledButtonEmpty padding={'0'} onClick={() => setShowDetails(true)}> <StyledButtonEmpty padding="0" onClick={() => setShowDetails(true)}>
<ThemedText.DeprecatedBlue> <ThemedText.DeprecatedBlue>
<Trans>Read more about unsupported assets</Trans> <Trans>Read more about unsupported assets</Trans>
</ThemedText.DeprecatedBlue> </ThemedText.DeprecatedBlue>
......
...@@ -120,7 +120,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro ...@@ -120,7 +120,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
)} )}
{attempting && !hash && ( {attempting && !hash && (
<LoadingView onDismiss={wrappedOnDismiss}> <LoadingView onDismiss={wrappedOnDismiss}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
{usingDelegate ? <Trans>Delegating votes</Trans> : <Trans>Unlocking Votes</Trans>} {usingDelegate ? <Trans>Delegating votes</Trans> : <Trans>Unlocking Votes</Trans>}
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
...@@ -130,7 +130,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro ...@@ -130,7 +130,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
)} )}
{hash && ( {hash && (
<SubmittedView onDismiss={wrappedOnDismiss} hash={hash}> <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans> <Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
......
...@@ -106,10 +106,10 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM ...@@ -106,10 +106,10 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
<StyledClosed onClick={wrappedOnDismiss} /> <StyledClosed onClick={wrappedOnDismiss} />
</RowBetween> </RowBetween>
<ConfirmedIcon> <ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} /> <CustomLightSpinner src={Circle} alt="loader" size="90px" />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Executing</Trans> <Trans>Executing</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
...@@ -129,8 +129,8 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM ...@@ -129,8 +129,8 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
<ConfirmedIcon> <ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} /> <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Execution Submitted</Trans> <Trans>Execution Submitted</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
......
...@@ -106,10 +106,10 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal ...@@ -106,10 +106,10 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
<StyledClosed onClick={wrappedOnDismiss} /> <StyledClosed onClick={wrappedOnDismiss} />
</RowBetween> </RowBetween>
<ConfirmedIcon> <ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} /> <CustomLightSpinner src={Circle} alt="loader" size="90px" />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Queueing</Trans> <Trans>Queueing</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
...@@ -129,8 +129,8 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal ...@@ -129,8 +129,8 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
<ConfirmedIcon> <ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} /> <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans> <Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
......
...@@ -120,10 +120,10 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }: ...@@ -120,10 +120,10 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
<StyledClosed onClick={wrappedOnDismiss} /> <StyledClosed onClick={wrappedOnDismiss} />
</RowBetween> </RowBetween>
<ConfirmedIcon> <ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} /> <CustomLightSpinner src={Circle} alt="loader" size="90px" />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Submitting Vote</Trans> <Trans>Submitting Vote</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
...@@ -143,8 +143,8 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }: ...@@ -143,8 +143,8 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
<ConfirmedIcon> <ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} /> <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}> <AutoColumn gap="100px" justify="center">
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Transaction Submitted</Trans> <Trans>Transaction Submitted</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
......
...@@ -253,7 +253,7 @@ const ListingModal = () => { ...@@ -253,7 +253,7 @@ const ListingModal = () => {
</Box> </Box>
</Box> </Box>
) : ( ) : (
<ListingButton onClick={clickStartListingFlow} buttonText={'Start listing'} showWarningOverride={isMobile} /> <ListingButton onClick={clickStartListingFlow} buttonText="Start listing" showWarningOverride={isMobile} />
)} )}
{(listingStatus === ListingStatus.PENDING || listingStatus === ListingStatus.SIGNING) && ( {(listingStatus === ListingStatus.PENDING || listingStatus === ListingStatus.SIGNING) && (
<Box <Box
......
...@@ -25,7 +25,7 @@ const ProfileAssetRow = ({ asset }: { asset: WalletAsset }) => { ...@@ -25,7 +25,7 @@ const ProfileAssetRow = ({ asset }: { asset: WalletAsset }) => {
removeAsset(asset) 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> </Box>
<img className={styles.tagAssetImage} src={asset.imageUrl} alt={asset.name} /> <img className={styles.tagAssetImage} src={asset.imageUrl} alt={asset.name} />
</div> </div>
......
...@@ -362,7 +362,7 @@ export const ItemCell = ({ event, rarityVerified, collectionName, eventTimestamp ...@@ -362,7 +362,7 @@ export const ItemCell = ({ event, rarityVerified, collectionName, eventTimestamp
<Row gap="16" overflow="hidden" whiteSpace="nowrap"> <Row gap="16" overflow="hidden" whiteSpace="nowrap">
{!noContent ? ( {!noContent ? (
<Box <Box
as={'img'} as="img"
alt={event.tokenMetadata?.name || event.tokenId} alt={event.tokenMetadata?.name || event.tokenId}
src={getItemImage(event.tokenMetadata)} src={getItemImage(event.tokenMetadata)}
draggable={false} draggable={false}
......
...@@ -205,7 +205,7 @@ const Container = ({ ...@@ -205,7 +205,7 @@ const Container = ({
return ( return (
<CardContext.Provider value={providerValue}> <CardContext.Provider value={providerValue}>
<Box <Box
position={'relative'} position="relative"
ref={assetRef} ref={assetRef}
borderRadius={BORDER_RADIUS} borderRadius={BORDER_RADIUS}
borderBottomLeftRadius={BORDER_RADIUS} borderBottomLeftRadius={BORDER_RADIUS}
...@@ -244,14 +244,14 @@ const Image = () => { ...@@ -244,14 +244,14 @@ const Image = () => {
return ( return (
<Box display="flex" overflow="hidden" borderTopLeftRadius={BORDER_RADIUS} borderTopRightRadius={BORDER_RADIUS}> <Box display="flex" overflow="hidden" borderTopLeftRadius={BORDER_RADIUS} borderTopRightRadius={BORDER_RADIUS}>
<Box <Box
as={'img'} as="img"
width="full" width="full"
style={{ style={{
aspectRatio: '1', aspectRatio: '1',
transition: 'transform 0.4s ease 0s', transition: 'transform 0.4s ease 0s',
}} }}
src={asset.imageUrl || asset.smallImageUrl} src={asset.imageUrl || asset.smallImageUrl}
objectFit={'contain'} objectFit="contain"
draggable={false} draggable={false}
onError={() => setNoContent(true)} onError={() => setNoContent(true)}
onLoad={(e) => { onLoad={(e) => {
...@@ -289,7 +289,7 @@ const Video = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => { ...@@ -289,7 +289,7 @@ const Video = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => {
<> <>
<Box display="flex" overflow="hidden"> <Box display="flex" overflow="hidden">
<Box <Box
as={'img'} as="img"
alt={asset.name || asset.tokenId} alt={asset.name || asset.tokenId}
width="full" width="full"
style={{ style={{
...@@ -298,7 +298,7 @@ const Video = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => { ...@@ -298,7 +298,7 @@ const Video = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => {
willChange: 'transform', willChange: 'transform',
}} }}
src={asset.imageUrl || asset.smallImageUrl} src={asset.imageUrl || asset.smallImageUrl}
objectFit={'contain'} objectFit="contain"
draggable={false} draggable={false}
onError={() => setNoContent(true)} onError={() => setNoContent(true)}
onLoad={() => { onLoad={() => {
...@@ -382,7 +382,7 @@ const Audio = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => { ...@@ -382,7 +382,7 @@ const Audio = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => {
<> <>
<Box display="flex" overflow="hidden"> <Box display="flex" overflow="hidden">
<Box <Box
as={'img'} as="img"
alt={asset.name || asset.tokenId} alt={asset.name || asset.tokenId}
width="full" width="full"
style={{ style={{
...@@ -390,7 +390,7 @@ const Audio = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => { ...@@ -390,7 +390,7 @@ const Audio = ({ shouldPlay, setCurrentTokenPlayingMedia }: MediaProps) => {
transition: 'transform 0.4s ease 0s', transition: 'transform 0.4s ease 0s',
}} }}
src={asset.imageUrl || asset.smallImageUrl} src={asset.imageUrl || asset.smallImageUrl}
objectFit={'contain'} objectFit="contain"
draggable={false} draggable={false}
onError={() => setNoContent(true)} onError={() => setNoContent(true)}
onLoad={(e) => { onLoad={(e) => {
...@@ -592,7 +592,7 @@ const SecondaryInfo = ({ children }: { children: ReactNode }) => { ...@@ -592,7 +592,7 @@ const SecondaryInfo = ({ children }: { children: ReactNode }) => {
const TertiaryInfo = ({ children }: { children: ReactNode }) => { const TertiaryInfo = ({ children }: { children: ReactNode }) => {
return ( return (
<Box marginTop={'8'} color="textSecondary"> <Box marginTop="8" color="textSecondary">
{children} {children}
</Box> </Box>
) )
......
...@@ -245,7 +245,7 @@ const CollectionDescription = ({ description }: { description: string }) => { ...@@ -245,7 +245,7 @@ const CollectionDescription = ({ description }: { description: string }) => {
const StatsItem = ({ children, label, shouldHide }: { children: ReactNode; label: string; shouldHide: boolean }) => { const StatsItem = ({ children, label, shouldHide }: { children: ReactNode; label: string; shouldHide: boolean }) => {
return ( 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> <span className={styles.statsValue}>{children}</span>
<Box as="span" className={styles.statsLabel}> <Box as="span" className={styles.statsLabel}>
{label} {label}
......
...@@ -213,5 +213,5 @@ export const MarketplaceSelect = () => { ...@@ -213,5 +213,5 @@ export const MarketplaceSelect = () => {
setTraitsOpen(TraitPosition.MARKPLACE_INDEX, !isOpen) 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} />
} }
...@@ -70,8 +70,8 @@ const TraitItem = ({ ...@@ -70,8 +70,8 @@ const TraitItem = ({
<Row <Row
key={trait.trait_value} key={trait.trait_value}
maxWidth="full" maxWidth="full"
overflowX={'hidden'} overflowX="hidden"
overflowY={'hidden'} overflowY="hidden"
fontWeight="normal" fontWeight="normal"
className={`${subheadSmall} ${styles.subRowHover}`} className={`${subheadSmall} ${styles.subRowHover}`}
justifyContent="space-between" justifyContent="space-between"
......
...@@ -126,8 +126,8 @@ const TxCompleteModal = () => { ...@@ -126,8 +126,8 @@ const TxCompleteModal = () => {
marginTop={{ sm: '20', md: '20' }} marginTop={{ sm: '20', md: '20' }}
flexWrap={{ sm: 'wrap', md: 'nowrap' }} flexWrap={{ sm: 'wrap', md: 'nowrap' }}
alignItems="center" alignItems="center"
paddingRight={'40'} paddingRight="40"
paddingLeft={'40'} paddingLeft="40"
className={styles.bottomBar} className={styles.bottomBar}
justifyContent="space-between" justifyContent="space-between"
> >
......
...@@ -13,7 +13,7 @@ export const FilterSortDropdown = ({ sortDropDownOptions }: { sortDropDownOption ...@@ -13,7 +13,7 @@ export const FilterSortDropdown = ({ sortDropDownOptions }: { sortDropDownOption
const sortItems = sortDropDownOptions.map((option) => ( const sortItems = sortDropDownOptions.map((option) => (
<SortByItem dropDownOption={option} parentOnClick={onClick} key={option.displayText} /> <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 = ({ const SortByItem = ({
......
...@@ -204,7 +204,7 @@ export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => { ...@@ -204,7 +204,7 @@ export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => {
<Container> <Container>
<BestPriceContainer> <BestPriceContainer>
<HeaderRow> <HeaderRow>
<ThemedText.SubHeader fontWeight={500} lineHeight={'24px'}> <ThemedText.SubHeader fontWeight={500} lineHeight="24px">
{listing ? 'Your Price' : 'List for Sale'} {listing ? 'Your Price' : 'List for Sale'}
</ThemedText.SubHeader> </ThemedText.SubHeader>
{listing && <MarketplaceIcon alt={listing.marketplace} src={getMarketplaceIcon(listing.marketplace)} />} {listing && <MarketplaceIcon alt={listing.marketplace} src={getMarketplaceIcon(listing.marketplace)} />}
...@@ -212,32 +212,32 @@ export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => { ...@@ -212,32 +212,32 @@ export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => {
<PriceRow> <PriceRow>
{listing ? ( {listing ? (
<> <>
<ThemedText.MediumHeader fontSize={'28px'} lineHeight={'36px'}> <ThemedText.MediumHeader fontSize="28px" lineHeight="36px">
{formatEthPrice(asset.priceInfo.ETHPrice)} {formatEthPrice(asset.priceInfo.ETHPrice)}
</ThemedText.MediumHeader> </ThemedText.MediumHeader>
{USDPrice && ( {USDPrice && (
<ThemedText.BodySecondary lineHeight={'24px'}> <ThemedText.BodySecondary lineHeight="24px">
{ethNumberStandardFormatter(USDPrice, true, true)} {ethNumberStandardFormatter(USDPrice, true, true)}
</ThemedText.BodySecondary> </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. Get the best price for your NFT by selling with Uniswap.
</ThemedText.BodySecondary> </ThemedText.BodySecondary>
)} )}
</PriceRow> </PriceRow>
{expirationDate && ( {expirationDate && (
<ThemedText.BodySecondary fontSize={'14px'}>Sale ends: {timeLeft(expirationDate)}</ThemedText.BodySecondary> <ThemedText.BodySecondary fontSize="14px">Sale ends: {timeLeft(expirationDate)}</ThemedText.BodySecondary>
)} )}
{!listing ? ( {!listing ? (
<BuyNowButton assetInBag={false} margin={true} useAccentColor={true} onClick={goToListPage}> <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>
) : ( ) : (
<> <>
<BuyNowButton assetInBag={false} margin={true} useAccentColor={false} onClick={goToListPage}> <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> </BuyNowButton>
</> </>
)} )}
...@@ -338,22 +338,22 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps) ...@@ -338,22 +338,22 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
{cheapestOrder && asset.priceInfo ? ( {cheapestOrder && asset.priceInfo ? (
<BestPriceContainer> <BestPriceContainer>
<HeaderRow> <HeaderRow>
<ThemedText.SubHeader fontWeight={500} lineHeight={'24px'}> <ThemedText.SubHeader fontWeight={500} lineHeight="24px">
Best Price Best Price
</ThemedText.SubHeader> </ThemedText.SubHeader>
<MarketplaceIcon alt={cheapestOrder.marketplace} src={getMarketplaceIcon(cheapestOrder.marketplace)} /> <MarketplaceIcon alt={cheapestOrder.marketplace} src={getMarketplaceIcon(cheapestOrder.marketplace)} />
</HeaderRow> </HeaderRow>
<PriceRow> <PriceRow>
<ThemedText.MediumHeader fontSize={'28px'} lineHeight={'36px'}> <ThemedText.MediumHeader fontSize="28px" lineHeight="36px">
{formatEthPrice(asset.priceInfo.ETHPrice)} ETH {formatEthPrice(asset.priceInfo.ETHPrice)} ETH
</ThemedText.MediumHeader> </ThemedText.MediumHeader>
{USDPrice && ( {USDPrice && (
<ThemedText.BodySecondary lineHeight={'24px'}> <ThemedText.BodySecondary lineHeight="24px">
{ethNumberStandardFormatter(USDPrice, true, true)} {ethNumberStandardFormatter(USDPrice, true, true)}
</ThemedText.BodySecondary> </ThemedText.BodySecondary>
)} )}
</PriceRow> </PriceRow>
{expirationDate && <Tertiary fontSize={'14px'}>Sale ends: {timeLeft(expirationDate)}</Tertiary>} {expirationDate && <Tertiary fontSize="14px">Sale ends: {timeLeft(expirationDate)}</Tertiary>}
<div> <div>
{!isErc1555 || !assetInBag ? ( {!isErc1555 || !assetInBag ? (
<BuyNowButtonContainer> <BuyNowButtonContainer>
...@@ -368,7 +368,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps) ...@@ -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> <span>{assetInBag ? 'Remove' : 'Buy Now'}</span>
</SubHeader> </SubHeader>
</BuyNowButton> </BuyNowButton>
...@@ -383,7 +383,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps) ...@@ -383,7 +383,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
<BuyNowButtonContainer> <BuyNowButtonContainer>
<Erc1155BuyNowText> <Erc1155BuyNowText>
<ThemedText.SubHeader lineHeight={'20px'}>{quantity}</ThemedText.SubHeader> <ThemedText.SubHeader lineHeight="20px">{quantity}</ThemedText.SubHeader>
</Erc1155BuyNowText> </Erc1155BuyNowText>
</BuyNowButtonContainer> </BuyNowButtonContainer>
......
...@@ -670,7 +670,7 @@ const MarketplaceRow = ({ ...@@ -670,7 +670,7 @@ const MarketplaceRow = ({
}} }}
> >
<Box className={styles.removeMarketplace} visibility={hovered ? 'visible' : 'hidden'} position="absolute"> <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>
<Box <Box
as="img" as="img"
...@@ -781,7 +781,7 @@ const NFTListRow = ({ asset, globalPriceMethod, globalPrice, setGlobalPrice, sel ...@@ -781,7 +781,7 @@ const NFTListRow = ({ asset, globalPriceMethod, globalPrice, setGlobalPrice, sel
}} }}
> >
<Box className={styles.removeAsset} visibility={hovered ? 'visible' : 'hidden'} position="absolute"> <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>
<Box <Box
as="img" as="img"
...@@ -898,7 +898,7 @@ export const ListPage = () => { ...@@ -898,7 +898,7 @@ export const ListPage = () => {
<NFTListingsGrid selectedMarkets={selectedMarkets} /> <NFTListingsGrid selectedMarkets={selectedMarkets} />
</MarketWrap> </MarketWrap>
<Box display={{ sm: 'flex', md: 'none' }} marginTop="14" marginX="16" marginBottom="32"> <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> </Box>
</Column> </Column>
) )
......
...@@ -31,7 +31,7 @@ export function Review({ ...@@ -31,7 +31,7 @@ export function Review({
position={position} position={position}
inRange={!outOfRange} inRange={!outOfRange}
ticksAtLimit={ticksAtLimit} ticksAtLimit={ticksAtLimit}
title={'Selected Range'} title="Selected Range"
/> />
) : null} ) : null}
</AutoColumn> </AutoColumn>
......
...@@ -434,7 +434,7 @@ export default function AddLiquidity() { ...@@ -434,7 +434,7 @@ export default function AddLiquidity() {
const Buttons = () => const Buttons = () =>
addIsUnsupported ? ( addIsUnsupported ? (
<ButtonPrimary disabled={true} $borderRadius="12px" padding={'12px'}> <ButtonPrimary disabled={true} $borderRadius="12px" padding="12px">
<ThemedText.DeprecatedMain mb="4px"> <ThemedText.DeprecatedMain mb="4px">
<Trans>Unsupported Asset</Trans> <Trans>Unsupported Asset</Trans>
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
...@@ -446,12 +446,12 @@ export default function AddLiquidity() { ...@@ -446,12 +446,12 @@ export default function AddLiquidity() {
properties={{ received_swap_quote: false }} properties={{ received_swap_quote: false }}
element={ElementName.CONNECT_WALLET_BUTTON} element={ElementName.CONNECT_WALLET_BUTTON}
> >
<ButtonLight onClick={toggleWalletModal} $borderRadius="12px" padding={'12px'}> <ButtonLight onClick={toggleWalletModal} $borderRadius="12px" padding="12px">
<Trans>Connect Wallet</Trans> <Trans>Connect Wallet</Trans>
</ButtonLight> </ButtonLight>
</TraceEvent> </TraceEvent>
) : ( ) : (
<AutoColumn gap={'md'}> <AutoColumn gap="md">
{(approvalA === ApprovalState.NOT_APPROVED || {(approvalA === ApprovalState.NOT_APPROVED ||
approvalA === ApprovalState.PENDING || approvalA === ApprovalState.PENDING ||
approvalB === ApprovalState.NOT_APPROVED || approvalB === ApprovalState.NOT_APPROVED ||
...@@ -862,9 +862,7 @@ export default function AddLiquidity() { ...@@ -862,9 +862,7 @@ export default function AddLiquidity() {
Full range positions may earn less fees than concentrated positions. Learn more{' '} Full range positions may earn less fees than concentrated positions. Learn more{' '}
<ExternalLink <ExternalLink
style={{ color: theme.deprecated_yellow3, textDecoration: 'underline' }} style={{ color: theme.deprecated_yellow3, textDecoration: 'underline' }}
href={ href="https://help.uniswap.org/en/articles/5434296-can-i-provide-liquidity-over-the-full-range-in-v3"
'https://help.uniswap.org/en/articles/5434296-can-i-provide-liquidity-over-the-full-range-in-v3'
}
> >
here here
</ExternalLink> </ExternalLink>
......
...@@ -249,7 +249,7 @@ export default function AddLiquidity() { ...@@ -249,7 +249,7 @@ export default function AddLiquidity() {
{currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol + ' Pool Tokens'} {currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol + ' Pool Tokens'}
</Text> </Text>
</Row> </Row>
<ThemedText.DeprecatedItalic fontSize={12} textAlign="left" padding={'8px 0 0 0 '}> <ThemedText.DeprecatedItalic fontSize={12} textAlign="left" padding="8px 0 0 0 ">
<Trans> <Trans>
Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
will revert. will revert.
...@@ -347,13 +347,13 @@ export default function AddLiquidity() { ...@@ -347,13 +347,13 @@ export default function AddLiquidity() {
<ColumnCenter> <ColumnCenter>
<BlueCard> <BlueCard>
<AutoColumn gap="10px"> <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> <Trans>You are the first liquidity provider.</Trans>
</ThemedText.DeprecatedLink> </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> <Trans>The ratio of tokens you add will set the price of this pool.</Trans>
</ThemedText.DeprecatedLink> </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> <Trans>Once you are happy with the rate click supply to review.</Trans>
</ThemedText.DeprecatedLink> </ThemedText.DeprecatedLink>
</AutoColumn> </AutoColumn>
...@@ -363,7 +363,7 @@ export default function AddLiquidity() { ...@@ -363,7 +363,7 @@ export default function AddLiquidity() {
<ColumnCenter> <ColumnCenter>
<BlueCard> <BlueCard>
<AutoColumn gap="10px"> <AutoColumn gap="10px">
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}> <ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans> <Trans>
<b> <b>
<Trans>Tip:</Trans> <Trans>Tip:</Trans>
...@@ -406,7 +406,7 @@ export default function AddLiquidity() { ...@@ -406,7 +406,7 @@ export default function AddLiquidity() {
/> />
{currencies[Field.CURRENCY_A] && currencies[Field.CURRENCY_B] && pairState !== PairState.INVALID && ( {currencies[Field.CURRENCY_A] && currencies[Field.CURRENCY_B] && pairState !== PairState.INVALID && (
<> <>
<LightCard padding="0px" $borderRadius={'20px'}> <LightCard padding="0px" $borderRadius="20px">
<RowBetween padding="1rem"> <RowBetween padding="1rem">
<ThemedText.DeprecatedSubHeader fontWeight={500} fontSize={14}> <ThemedText.DeprecatedSubHeader fontWeight={500} fontSize={14}>
{noLiquidity ? ( {noLiquidity ? (
...@@ -416,7 +416,7 @@ export default function AddLiquidity() { ...@@ -416,7 +416,7 @@ export default function AddLiquidity() {
)} )}
</ThemedText.DeprecatedSubHeader> </ThemedText.DeprecatedSubHeader>
</RowBetween>{' '} </RowBetween>{' '}
<LightCard padding="1rem" $borderRadius={'20px'}> <LightCard padding="1rem" $borderRadius="20px">
<PoolPriceBar <PoolPriceBar
currencies={currencies} currencies={currencies}
poolTokenPercentage={poolTokenPercentage} poolTokenPercentage={poolTokenPercentage}
...@@ -446,7 +446,7 @@ export default function AddLiquidity() { ...@@ -446,7 +446,7 @@ export default function AddLiquidity() {
</ButtonLight> </ButtonLight>
</TraceEvent> </TraceEvent>
) : ( ) : (
<AutoColumn gap={'md'}> <AutoColumn gap="md">
{(approvalA === ApprovalState.NOT_APPROVED || {(approvalA === ApprovalState.NOT_APPROVED ||
approvalA === ApprovalState.PENDING || approvalA === ApprovalState.PENDING ||
approvalB === ApprovalState.NOT_APPROVED || approvalB === ApprovalState.NOT_APPROVED ||
......
...@@ -24,7 +24,7 @@ export const ProposalSubmissionModal = ({ ...@@ -24,7 +24,7 @@ export const ProposalSubmissionModal = ({
<Modal isOpen={isOpen} onDismiss={onDismiss}> <Modal isOpen={isOpen} onDismiss={onDismiss}>
{!hash ? ( {!hash ? (
<LoadingView onDismiss={onDismiss}> <LoadingView onDismiss={onDismiss}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<ThemedText.DeprecatedLargeHeader> <ThemedText.DeprecatedLargeHeader>
<Trans>Submitting Proposal</Trans> <Trans>Submitting Proposal</Trans>
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
...@@ -32,7 +32,7 @@ export const ProposalSubmissionModal = ({ ...@@ -32,7 +32,7 @@ export const ProposalSubmissionModal = ({
</LoadingView> </LoadingView>
) : ( ) : (
<SubmittedView onDismiss={onDismiss} hash={hash}> <SubmittedView onDismiss={onDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify="center">
<Text fontWeight={500} fontSize={20} textAlign="center"> <Text fontWeight={500} fontSize={20} textAlign="center">
<Trans>Proposal Submitted</Trans> <Trans>Proposal Submitted</Trans>
</Text> </Text>
......
...@@ -246,7 +246,7 @@ ${bodyValue} ...@@ -246,7 +246,7 @@ ${bodyValue}
<CreateProposalWrapper> <CreateProposalWrapper>
<BlueCard> <BlueCard>
<AutoColumn gap="10px"> <AutoColumn gap="10px">
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}> <ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans> <Trans>
<strong>Tip:</strong> Select an action and describe your proposal for the community. The proposal <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 cannot be modified after submission, so please verify all information before submitting. The voting
......
...@@ -224,7 +224,7 @@ export default function Manage() { ...@@ -224,7 +224,7 @@ export default function Manage() {
<ButtonPrimary <ButtonPrimary
padding="8px" padding="8px"
$borderRadius="8px" $borderRadius="8px"
width={'fit-content'} width="fit-content"
as={Link} as={Link}
to={`/add/${currencyA && currencyId(currencyA)}/${currencyB && currencyId(currencyB)}`} to={`/add/${currencyA && currencyId(currencyA)}/${currencyB && currencyId(currencyB)}`}
> >
...@@ -314,7 +314,7 @@ export default function Manage() { ...@@ -314,7 +314,7 @@ export default function Manage() {
decimalPlaces={4} decimalPlaces={4}
start={parseFloat(countUpAmountPrevious)} start={parseFloat(countUpAmountPrevious)}
end={parseFloat(countUpAmount)} end={parseFloat(countUpAmount)}
thousandsSeparator={','} thousandsSeparator=","
duration={1} duration={1}
/> />
</ThemedText.DeprecatedLargeHeader> </ThemedText.DeprecatedLargeHeader>
......
...@@ -169,11 +169,11 @@ export default function MigrateV2() { ...@@ -169,11 +169,11 @@ export default function MigrateV2() {
<EmptyState message={<Trans>No V2 Liquidity found.</Trans>} /> <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' }}> <Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
<Trans> <Trans>
Don’t see one of your v2 positions?{' '} 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. Import it.
</StyledInternalLink> </StyledInternalLink>
</Trans> </Trans>
......
...@@ -97,7 +97,7 @@ export default function CTACards() { ...@@ -97,7 +97,7 @@ export default function CTACards() {
return ( return (
<CTASection> <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> <ResponsiveColumn>
<HeaderText> <HeaderText>
<Trans>Learn about providing liquidity</Trans> <Trans>Learn about providing liquidity</Trans>
......
...@@ -196,7 +196,7 @@ function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Cu ...@@ -196,7 +196,7 @@ function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Cu
return ( return (
<ExternalLink href={getExplorerLink(chainId, address, ExplorerDataType.TOKEN)}> <ExternalLink href={getExplorerLink(chainId, address, ExplorerDataType.TOKEN)}>
<RowFixed> <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> <ThemedText.DeprecatedMain>{currency?.symbol}</ThemedText.DeprecatedMain>
</RowFixed> </RowFixed>
</ExternalLink> </ExternalLink>
...@@ -205,7 +205,7 @@ function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Cu ...@@ -205,7 +205,7 @@ function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Cu
return ( return (
<RowFixed> <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> <ThemedText.DeprecatedMain>{currency?.symbol}</ThemedText.DeprecatedMain>
</RowFixed> </RowFixed>
) )
...@@ -523,12 +523,12 @@ export function PositionPage() { ...@@ -523,12 +523,12 @@ export function PositionPage() {
function modalHeader() { function modalHeader() {
return ( return (
<AutoColumn gap={'md'} style={{ marginTop: '20px' }}> <AutoColumn gap="md" style={{ marginTop: '20px' }}>
<LightCard padding="12px 16px"> <LightCard padding="12px 16px">
<AutoColumn gap="md"> <AutoColumn gap="md">
<RowBetween> <RowBetween>
<RowFixed> <RowFixed>
<CurrencyLogo currency={feeValueUpper?.currency} size={'20px'} style={{ marginRight: '0.5rem' }} /> <CurrencyLogo currency={feeValueUpper?.currency} size="20px" style={{ marginRight: '0.5rem' }} />
<ThemedText.DeprecatedMain> <ThemedText.DeprecatedMain>
{feeValueUpper ? formatCurrencyAmount(feeValueUpper, 4) : '-'} {feeValueUpper ? formatCurrencyAmount(feeValueUpper, 4) : '-'}
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
...@@ -537,7 +537,7 @@ export function PositionPage() { ...@@ -537,7 +537,7 @@ export function PositionPage() {
</RowBetween> </RowBetween>
<RowBetween> <RowBetween>
<RowFixed> <RowFixed>
<CurrencyLogo currency={feeValueLower?.currency} size={'20px'} style={{ marginRight: '0.5rem' }} /> <CurrencyLogo currency={feeValueLower?.currency} size="20px" style={{ marginRight: '0.5rem' }} />
<ThemedText.DeprecatedMain> <ThemedText.DeprecatedMain>
{feeValueLower ? formatCurrencyAmount(feeValueLower, 4) : '-'} {feeValueLower ? formatCurrencyAmount(feeValueLower, 4) : '-'}
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
...@@ -612,7 +612,7 @@ export function PositionPage() { ...@@ -612,7 +612,7 @@ export function PositionPage() {
<ResponsiveRow> <ResponsiveRow>
<RowFixed> <RowFixed>
<DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={24} margin={true} /> <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} &nbsp;{currencyQuote?.symbol}&nbsp;/&nbsp;{currencyBase?.symbol}
</ThemedText.DeprecatedLabel> </ThemedText.DeprecatedLabel>
<Badge style={{ marginRight: '8px' }}> <Badge style={{ marginRight: '8px' }}>
...@@ -807,7 +807,7 @@ export function PositionPage() { ...@@ -807,7 +807,7 @@ export function PositionPage() {
<RowFixed> <RowFixed>
<CurrencyLogo <CurrencyLogo
currency={feeValueUpper?.currency} currency={feeValueUpper?.currency}
size={'20px'} size="20px"
style={{ marginRight: '0.5rem' }} style={{ marginRight: '0.5rem' }}
/> />
<ThemedText.DeprecatedMain>{feeValueUpper?.currency?.symbol}</ThemedText.DeprecatedMain> <ThemedText.DeprecatedMain>{feeValueUpper?.currency?.symbol}</ThemedText.DeprecatedMain>
...@@ -822,7 +822,7 @@ export function PositionPage() { ...@@ -822,7 +822,7 @@ export function PositionPage() {
<RowFixed> <RowFixed>
<CurrencyLogo <CurrencyLogo
currency={feeValueLower?.currency} currency={feeValueLower?.currency}
size={'20px'} size="20px"
style={{ marginRight: '0.5rem' }} style={{ marginRight: '0.5rem' }}
/> />
<ThemedText.DeprecatedMain>{feeValueLower?.currency?.symbol}</ThemedText.DeprecatedMain> <ThemedText.DeprecatedMain>{feeValueLower?.currency?.symbol}</ThemedText.DeprecatedMain>
......
...@@ -168,7 +168,7 @@ function WrongNetworkCard() { ...@@ -168,7 +168,7 @@ function WrongNetworkCard() {
<PageWrapper> <PageWrapper>
<AutoColumn gap="lg" justify="center"> <AutoColumn gap="lg" justify="center">
<AutoColumn gap="lg" style={{ width: '100%' }}> <AutoColumn gap="lg" style={{ width: '100%' }}>
<TitleRow padding={'0'}> <TitleRow padding="0">
<ThemedText.LargeHeader> <ThemedText.LargeHeader>
<Trans>Pools</Trans> <Trans>Pools</Trans>
</ThemedText.LargeHeader> </ThemedText.LargeHeader>
...@@ -266,7 +266,7 @@ export default function Pool() { ...@@ -266,7 +266,7 @@ export default function Pool() {
<PageWrapper> <PageWrapper>
<AutoColumn gap="lg" justify="center"> <AutoColumn gap="lg" justify="center">
<AutoColumn gap="lg" style={{ width: '100%' }}> <AutoColumn gap="lg" style={{ width: '100%' }}>
<TitleRow padding={'0'}> <TitleRow padding="0">
<ThemedText.LargeHeader> <ThemedText.LargeHeader>
<Trans>Pools</Trans> <Trans>Pools</Trans>
</ThemedText.LargeHeader> </ThemedText.LargeHeader>
......
...@@ -189,7 +189,7 @@ export default function Pool() { ...@@ -189,7 +189,7 @@ export default function Pool() {
) : ( ) : (
<AutoColumn gap="lg" justify="center"> <AutoColumn gap="lg" justify="center">
<AutoColumn gap="md" style={{ width: '100%' }}> <AutoColumn gap="md" style={{ width: '100%' }}>
<TitleRow style={{ marginTop: '1rem' }} padding={'0'}> <TitleRow style={{ marginTop: '1rem' }} padding="0">
<HideSmall> <HideSmall>
<ThemedText.DeprecatedMediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}> <ThemedText.DeprecatedMediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
<Trans>Your V2 liquidity</Trans> <Trans>Your V2 liquidity</Trans>
......
...@@ -104,7 +104,7 @@ export default function PoolFinder() { ...@@ -104,7 +104,7 @@ export default function PoolFinder() {
<AutoColumn style={{ padding: '1rem' }} gap="md"> <AutoColumn style={{ padding: '1rem' }} gap="md">
<BlueCard> <BlueCard>
<AutoColumn gap="10px"> <AutoColumn gap="10px">
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}> <ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans> <Trans>
<b>Tip:</b> Use this tool to find v2 pools that don&apos;t automatically appear in the interface. <b>Tip:</b> Use this tool to find v2 pools that don&apos;t automatically appear in the interface.
</Trans> </Trans>
...@@ -120,12 +120,12 @@ export default function PoolFinder() { ...@@ -120,12 +120,12 @@ export default function PoolFinder() {
{currency0 ? ( {currency0 ? (
<Row> <Row>
<CurrencyLogo currency={currency0} /> <CurrencyLogo currency={currency0} />
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}> <Text fontWeight={500} fontSize={20} marginLeft="12px">
{currency0.symbol} {currency0.symbol}
</Text> </Text>
</Row> </Row>
) : ( ) : (
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}> <Text fontWeight={500} fontSize={20} marginLeft="12px">
<Trans>Select a token</Trans> <Trans>Select a token</Trans>
</Text> </Text>
)} )}
...@@ -144,12 +144,12 @@ export default function PoolFinder() { ...@@ -144,12 +144,12 @@ export default function PoolFinder() {
{currency1 ? ( {currency1 ? (
<Row> <Row>
<CurrencyLogo currency={currency1} /> <CurrencyLogo currency={currency1} />
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}> <Text fontWeight={500} fontSize={20} marginLeft="12px">
{currency1.symbol} {currency1.symbol}
</Text> </Text>
</Row> </Row>
) : ( ) : (
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}> <Text fontWeight={500} fontSize={20} marginLeft="12px">
<Trans>Select a token</Trans> <Trans>Select a token</Trans>
</Text> </Text>
)} )}
...@@ -162,7 +162,7 @@ export default function PoolFinder() { ...@@ -162,7 +162,7 @@ export default function PoolFinder() {
<Text textAlign="center" fontWeight={500}> <Text textAlign="center" fontWeight={500}>
<Trans>Pool Found!</Trans> <Trans>Pool Found!</Trans>
</Text> </Text>
<StyledInternalLink to={`/pool/v2`}> <StyledInternalLink to="/pool/v2">
<Text textAlign="center"> <Text textAlign="center">
<Trans>Manage this pool.</Trans> <Trans>Manage this pool.</Trans>
</Text> </Text>
......
...@@ -202,13 +202,13 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { ...@@ -202,13 +202,13 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
function modalHeader() { function modalHeader() {
return ( return (
<AutoColumn gap={'sm'} style={{ padding: '16px' }}> <AutoColumn gap="sm" style={{ padding: '16px' }}>
<RowBetween align="flex-end"> <RowBetween align="flex-end">
<Text fontSize={16} fontWeight={500}> <Text fontSize={16} fontWeight={500}>
<Trans>Pooled {liquidityValue0?.currency?.symbol}:</Trans> <Trans>Pooled {liquidityValue0?.currency?.symbol}:</Trans>
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />} {liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue0?.currency} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue0?.currency} />
...@@ -219,7 +219,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { ...@@ -219,7 +219,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>Pooled {liquidityValue1?.currency?.symbol}:</Trans> <Trans>Pooled {liquidityValue1?.currency?.symbol}:</Trans>
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />} {liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue1?.currency} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue1?.currency} />
...@@ -231,7 +231,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { ...@@ -231,7 +231,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
fontSize={12} fontSize={12}
color={theme.deprecated_text2} color={theme.deprecated_text2}
textAlign="left" textAlign="left"
padding={'8px 0 0 0'} padding="8px 0 0 0"
> >
<Trans>You will also collect fees earned from this position.</Trans> <Trans>You will also collect fees earned from this position.</Trans>
</ThemedText.DeprecatedItalic> </ThemedText.DeprecatedItalic>
...@@ -240,7 +240,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { ...@@ -240,7 +240,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>{feeValue0?.currency?.symbol} Fees Earned:</Trans> <Trans>{feeValue0?.currency?.symbol} Fees Earned:</Trans>
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />} {feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue0?.currency} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue0?.currency} />
...@@ -251,7 +251,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { ...@@ -251,7 +251,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>{feeValue1?.currency?.symbol} Fees Earned:</Trans> <Trans>{feeValue1?.currency?.symbol} Fees Earned:</Trans>
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />} {feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue1?.currency} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue1?.currency} />
...@@ -349,7 +349,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { ...@@ -349,7 +349,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>Pooled {liquidityValue0?.currency?.symbol}:</Trans> <Trans>Pooled {liquidityValue0?.currency?.symbol}:</Trans>
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />} {liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue0?.currency} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue0?.currency} />
...@@ -360,7 +360,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { ...@@ -360,7 +360,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>Pooled {liquidityValue1?.currency?.symbol}:</Trans> <Trans>Pooled {liquidityValue1?.currency?.symbol}:</Trans>
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />} {liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue1?.currency} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue1?.currency} />
...@@ -374,7 +374,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { ...@@ -374,7 +374,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>{feeValue0?.currency?.symbol} Fees Earned:</Trans> <Trans>{feeValue0?.currency?.symbol} Fees Earned:</Trans>
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />} {feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue0?.currency} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue0?.currency} />
...@@ -385,7 +385,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { ...@@ -385,7 +385,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<Trans>{feeValue1?.currency?.symbol} Fees Earned:</Trans> <Trans>{feeValue1?.currency?.symbol} Fees Earned:</Trans>
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft="6px">
{feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />} {feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />}
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue1?.currency} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue1?.currency} />
......
...@@ -290,13 +290,13 @@ export default function RemoveLiquidity() { ...@@ -290,13 +290,13 @@ export default function RemoveLiquidity() {
function modalHeader() { function modalHeader() {
return ( return (
<AutoColumn gap={'md'} style={{ marginTop: '20px' }}> <AutoColumn gap="md" style={{ marginTop: '20px' }}>
<RowBetween align="flex-end"> <RowBetween align="flex-end">
<Text fontSize={24} fontWeight={500}> <Text fontSize={24} fontWeight={500}>
{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)} {parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}
</Text> </Text>
<RowFixed gap="4px"> <RowFixed gap="4px">
<CurrencyLogo currency={currencyA} size={'24px'} /> <CurrencyLogo currency={currencyA} size="24px" />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}> <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
{currencyA?.symbol} {currencyA?.symbol}
</Text> </Text>
...@@ -310,19 +310,14 @@ export default function RemoveLiquidity() { ...@@ -310,19 +310,14 @@ export default function RemoveLiquidity() {
{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)} {parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}
</Text> </Text>
<RowFixed gap="4px"> <RowFixed gap="4px">
<CurrencyLogo currency={currencyB} size={'24px'} /> <CurrencyLogo currency={currencyB} size="24px" />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}> <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
{currencyB?.symbol} {currencyB?.symbol}
</Text> </Text>
</RowFixed> </RowFixed>
</RowBetween> </RowBetween>
<ThemedText.DeprecatedItalic <ThemedText.DeprecatedItalic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding="12px 0 0 0">
fontSize={12}
color={theme.deprecated_text2}
textAlign="left"
padding={'12px 0 0 0'}
>
<Trans> <Trans>
Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
will revert. will revert.
...@@ -456,7 +451,7 @@ export default function RemoveLiquidity() { ...@@ -456,7 +451,7 @@ export default function RemoveLiquidity() {
<AutoColumn gap="md"> <AutoColumn gap="md">
<BlueCard> <BlueCard>
<AutoColumn gap="10px"> <AutoColumn gap="10px">
<ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}> <ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
<Trans> <Trans>
<b>Tip:</b> Removing pool tokens converts your position back into underlying tokens at the current <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. 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() { ...@@ -591,7 +586,7 @@ export default function RemoveLiquidity() {
onMax={() => onUserInput(Field.LIQUIDITY_PERCENT, '100')} onMax={() => onUserInput(Field.LIQUIDITY_PERCENT, '100')}
showMaxButton={!atMaxAmount} showMaxButton={!atMaxAmount}
currency={currencyA} currency={currencyA}
label={'Output'} label="Output"
onCurrencySelect={handleSelectCurrencyA} onCurrencySelect={handleSelectCurrencyA}
id="remove-liquidity-tokena" id="remove-liquidity-tokena"
/> />
...@@ -605,7 +600,7 @@ export default function RemoveLiquidity() { ...@@ -605,7 +600,7 @@ export default function RemoveLiquidity() {
onMax={() => onUserInput(Field.LIQUIDITY_PERCENT, '100')} onMax={() => onUserInput(Field.LIQUIDITY_PERCENT, '100')}
showMaxButton={!atMaxAmount} showMaxButton={!atMaxAmount}
currency={currencyB} currency={currencyB}
label={'Output'} label="Output"
onCurrencySelect={handleSelectCurrencyB} onCurrencySelect={handleSelectCurrencyB}
id="remove-liquidity-tokenb" id="remove-liquidity-tokenb"
/> />
......
...@@ -578,7 +578,7 @@ export default function Swap() { ...@@ -578,7 +578,7 @@ export default function Swap() {
</TraceEvent> </TraceEvent>
</ArrowWrapper> </ArrowWrapper>
</div> </div>
<AutoColumn gap={'12px'}> <AutoColumn gap="12px">
<div> <div>
<OutputSwapSection showDetailsDropdown={showDetailsDropdown}> <OutputSwapSection showDetailsDropdown={showDetailsDropdown}>
<Trace section={SectionName.CURRENCY_OUTPUT_PANEL}> <Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
......
...@@ -419,7 +419,7 @@ export default function VotePage() { ...@@ -419,7 +419,7 @@ export default function VotePage() {
</AutoColumn> </AutoColumn>
<ProgressWrapper> <ProgressWrapper>
<Progress <Progress
status={'for'} status="for"
percentageString={ percentageString={
proposalData?.forCount.greaterThan(0) ? `${forPercentage?.toFixed(0) ?? 0}%` : '0%' proposalData?.forCount.greaterThan(0) ? `${forPercentage?.toFixed(0) ?? 0}%` : '0%'
} }
...@@ -443,7 +443,7 @@ export default function VotePage() { ...@@ -443,7 +443,7 @@ export default function VotePage() {
</AutoColumn> </AutoColumn>
<ProgressWrapper> <ProgressWrapper>
<Progress <Progress
status={'against'} status="against"
percentageString={ percentageString={
proposalData?.againstCount?.greaterThan(0) ? `${againstPercentage?.toFixed(0) ?? 0}%` : '0%' proposalData?.againstCount?.greaterThan(0) ? `${againstPercentage?.toFixed(0) ?? 0}%` : '0%'
} }
......
...@@ -245,46 +245,46 @@ const TextWrapper = styled(Text)<{ color: keyof AllColors }>` ...@@ -245,46 +245,46 @@ const TextWrapper = styled(Text)<{ color: keyof AllColors }>`
*/ */
export const ThemedText = { export const ThemedText = {
BodyPrimary(props: TextProps) { BodyPrimary(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={16} color={'textPrimary'} {...props} /> return <TextWrapper fontWeight={400} fontSize={16} color="textPrimary" {...props} />
}, },
BodySecondary(props: TextProps) { BodySecondary(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={16} color={'textSecondary'} {...props} /> return <TextWrapper fontWeight={400} fontSize={16} color="textSecondary" {...props} />
}, },
HeadlineSmall(props: TextProps) { 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) { LargeHeader(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={36} color={'textPrimary'} {...props} /> return <TextWrapper fontWeight={400} fontSize={36} color="textPrimary" {...props} />
}, },
Link(props: TextProps) { Link(props: TextProps) {
return <TextWrapper fontWeight={600} fontSize={14} color={'accentAction'} {...props} /> return <TextWrapper fontWeight={600} fontSize={14} color="accentAction" {...props} />
}, },
MediumHeader(props: TextProps) { MediumHeader(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={20} color={'textPrimary'} {...props} /> return <TextWrapper fontWeight={400} fontSize={20} color="textPrimary" {...props} />
}, },
SubHeader(props: TextProps) { SubHeader(props: TextProps) {
return <TextWrapper fontWeight={600} fontSize={16} color={'textPrimary'} {...props} /> return <TextWrapper fontWeight={600} fontSize={16} color="textPrimary" {...props} />
}, },
SubHeaderSmall(props: TextProps) { SubHeaderSmall(props: TextProps) {
return <TextWrapper fontWeight={500} fontSize={14} color={'textSecondary'} {...props} /> return <TextWrapper fontWeight={500} fontSize={14} color="textSecondary" {...props} />
}, },
DeprecatedMain(props: TextProps) { DeprecatedMain(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_text2'} {...props} /> return <TextWrapper fontWeight={500} color="deprecated_text2" {...props} />
}, },
DeprecatedLink(props: TextProps) { DeprecatedLink(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_primary1'} {...props} /> return <TextWrapper fontWeight={500} color="deprecated_primary1" {...props} />
}, },
DeprecatedLabel(props: TextProps) { DeprecatedLabel(props: TextProps) {
return <TextWrapper fontWeight={600} color={'deprecated_text1'} {...props} /> return <TextWrapper fontWeight={600} color="deprecated_text1" {...props} />
}, },
DeprecatedBlack(props: TextProps) { DeprecatedBlack(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_text1'} {...props} /> return <TextWrapper fontWeight={500} color="deprecated_text1" {...props} />
}, },
DeprecatedWhite(props: TextProps) { DeprecatedWhite(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_white'} {...props} /> return <TextWrapper fontWeight={500} color="deprecated_white" {...props} />
}, },
DeprecatedBody(props: TextProps) { 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) { DeprecatedLargeHeader(props: TextProps) {
return <TextWrapper fontWeight={600} fontSize={24} {...props} /> return <TextWrapper fontWeight={600} fontSize={24} {...props} />
...@@ -299,19 +299,19 @@ export const ThemedText = { ...@@ -299,19 +299,19 @@ export const ThemedText = {
return <TextWrapper fontWeight={500} fontSize={11} {...props} /> return <TextWrapper fontWeight={500} fontSize={11} {...props} />
}, },
DeprecatedBlue(props: TextProps) { DeprecatedBlue(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_blue1'} {...props} /> return <TextWrapper fontWeight={500} color="deprecated_blue1" {...props} />
}, },
DeprecatedYellow(props: TextProps) { DeprecatedYellow(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_yellow3'} {...props} /> return <TextWrapper fontWeight={500} color="deprecated_yellow3" {...props} />
}, },
DeprecatedDarkGray(props: TextProps) { DeprecatedDarkGray(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_text3'} {...props} /> return <TextWrapper fontWeight={500} color="deprecated_text3" {...props} />
}, },
DeprecatedGray(props: TextProps) { DeprecatedGray(props: TextProps) {
return <TextWrapper fontWeight={500} color={'deprecated_bg3'} {...props} /> return <TextWrapper fontWeight={500} color="deprecated_bg3" {...props} />
}, },
DeprecatedItalic(props: TextProps) { 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) { DeprecatedError({ error, ...props }: { error: boolean } & TextProps) {
return <TextWrapper fontWeight={500} color={error ? 'deprecated_red1' : 'deprecated_text2'} {...props} /> return <TextWrapper fontWeight={500} color={error ? 'deprecated_red1' : 'deprecated_text2'} {...props} />
......
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