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

c479239a · Mike Grabowski · GitHub · 55c3c527 · c479239a · c479239a
Commit c479239a authored Nov 16, 2022 by Mike Grabowski Committed by GitHub Nov 16, 2022
73 changed files
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -52,6 +52,7 @@
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "react/react-in-jsx-scope": "off",
+    "react/jsx-curly-brace-presence": ["error", {"props": "never", "children": "never" }],
    "object-shorthand": ["error", "always"],
    "no-restricted-imports": [
      "error",

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

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

--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -345,13 +345,12 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
  if (!active) {
    return (
      <ButtonOutlined $borderRadius="12px" padding="12px 8px" {...rest}>
-        {<RowBetween>{children}</RowBetween>}
+        <RowBetween>{children}</RowBetween>
      </ButtonOutlined>
    )
  } else {
    return (
      <ActiveOutlined {...rest} padding="12px 8px" $borderRadius="12px">
-        {
        <RowBetween>
          {children}
          <CheckboxWrapper>
@@ -360,7 +359,6 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
            </Circle>
          </CheckboxWrapper>
        </RowBetween>
-        }
      </ActiveOutlined>
    )
  }

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

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

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

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

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

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

--- a/src/components/NavBar/index.tsx
+++ b/src/components/NavBar/index.tsx
@@ -65,7 +65,7 @@ const PageTabs = () => {
          <Trans>NFTs</Trans>
        </MenuItem>
      )}
-      <MenuItem href="/pool" id={'pool-nav-link'} isActive={isPoolActive}>
+      <MenuItem href="/pool" id="pool-nav-link" isActive={isPoolActive}>
        <Trans>Pool</Trans>
      </MenuItem>
    </>

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

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

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

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

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

--- a/src/components/ProgressSteps/index.tsx
+++ b/src/components/ProgressSteps/index.tsx
@@ -55,7 +55,7 @@ export default function ProgressCircles({ steps, disabled = false, ...rest }: Pr
  const theme = useTheme()

  return (
-    <Wrapper justify={'center'} {...rest}>
+    <Wrapper justify="center" {...rest}>
      <Grouping>
        {steps.map((step, i) => {
          return (

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

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

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

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

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


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

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

--- a/src/components/Tokens/TokenDetails/ShareButton.tsx
+++ b/src/components/Tokens/TokenDetails/ShareButton.tsx
@@ -91,7 +91,7 @@ export default function ShareButton(tokenInfo: TokenInfo) {

  return (
    <ShareButtonDisplay ref={node}>
-      <Share onClick={toggleShare} aria-label={`ShareOptions`} open={open} />
+      <Share onClick={toggleShare} aria-label="ShareOptions" open={open} />
      {open && (
        <ShareActions>
          <ShareAction onClick={() => copyHelperRef.current?.forceCopy()}>

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

--- a/src/components/Tokens/TokenTable/NetworkFilter.tsx
+++ b/src/components/Tokens/TokenTable/NetworkFilter.tsx
@@ -103,7 +103,7 @@ export default function NetworkFilter() {

  return (
    <StyledMenu ref={node}>
-      <NetworkFilterOption onClick={toggleMenu} aria-label={`networkFilter`} active={open}>
+      <NetworkFilterOption onClick={toggleMenu} aria-label="networkFilter" active={open}>
        <StyledMenuContent>
          <NetworkLabel>
            <Logo src={chainInfo?.logoUrl} /> {chainInfo?.label}

--- a/src/components/Tokens/TokenTable/TimeSelector.tsx
+++ b/src/components/Tokens/TokenTable/TimeSelector.tsx
@@ -111,7 +111,7 @@ export default function TimeSelector() {

  return (
    <StyledMenu ref={node}>
-      <FilterOption onClick={toggleMenu} aria-label={`timeSelector`} active={open}>
+      <FilterOption onClick={toggleMenu} aria-label="timeSelector" active={open}>
        <StyledMenuContent>
          {DISPLAYS[activeTime]}
          <Chevron open={open}>

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

--- a/src/components/WalletModal/InjectedOption.tsx
+++ b/src/components/WalletModal/InjectedOption.tsx
@@ -20,7 +20,7 @@ const METAMASK_PROPS = {
 }

 export function InstallMetaMaskOption() {
-  return <Option {...METAMASK_PROPS} header={<Trans>Install MetaMask</Trans>} link={'https://metamask.io/'} />
+  return <Option {...METAMASK_PROPS} header={<Trans>Install MetaMask</Trans>} link="https://metamask.io/" />
 }

 export function MetaMaskOption({ tryActivation }: { tryActivation: (connector: Connector) => void }) {

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

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

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

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

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

--- a/src/components/earn/PoolCard.tsx
+++ b/src/components/earn/PoolCard.tsx
@@ -167,13 +167,13 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
        <>
          <Break />
          <BottomSection showBackground={true}>
-            <ThemedText.DeprecatedBlack color={'deprecated_white'} fontWeight={500}>
+            <ThemedText.DeprecatedBlack color="deprecated_white" fontWeight={500}>
              <span>
                <Trans>Your rate</Trans>
              </span>
            </ThemedText.DeprecatedBlack>

-            <ThemedText.DeprecatedBlack style={{ textAlign: 'right' }} color={'deprecated_white'} fontWeight={500}>
+            <ThemedText.DeprecatedBlack style={{ textAlign: 'right' }} color="deprecated_white" fontWeight={500}>
              <span role="img" aria-label="wizard-icon" style={{ marginRight: '0.5rem' }}>
                ⚡
              </span>

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

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

--- a/src/components/swap/SwapDetailsDropdown.tsx
+++ b/src/components/swap/SwapDetailsDropdown.tsx
@@ -129,7 +129,7 @@ export default function SwapDetailsDropdown({

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

--- a/src/components/swap/SwapModalHeader.tsx
+++ b/src/components/swap/SwapModalHeader.tsx
@@ -99,11 +99,11 @@ export default function SwapModalHeader({
  }, [shouldLogModalCloseEvent, showAcceptChanges, setShouldLogModalCloseEvent, trade, priceUpdate])

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

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

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

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

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

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

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

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

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

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

 const TertiaryInfo = ({ children }: { children: ReactNode }) => {
  return (
-    <Box marginTop={'8'} color="textSecondary">
+    <Box marginTop="8" color="textSecondary">
      {children}
    </Box>
  )

--- a/src/nft/components/collection/CollectionStats.tsx
+++ b/src/nft/components/collection/CollectionStats.tsx
@@ -245,7 +245,7 @@ const CollectionDescription = ({ description }: { description: string }) => {

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

--- a/src/nft/components/collection/MarketplaceSelect.tsx
+++ b/src/nft/components/collection/MarketplaceSelect.tsx
@@ -213,5 +213,5 @@ export const MarketplaceSelect = () => {
    setTraitsOpen(TraitPosition.MARKPLACE_INDEX, !isOpen)
  }

-  return <FilterDropdown title={'Marketplaces'} items={MarketplaceItems} onClick={onClick} isOpen={isOpen} />
+  return <FilterDropdown title="Marketplaces" items={MarketplaceItems} onClick={onClick} isOpen={isOpen} />
 }
--- a/src/nft/components/collection/TraitSelect.tsx
+++ b/src/nft/components/collection/TraitSelect.tsx
@@ -70,8 +70,8 @@ const TraitItem = ({
    <Row
      key={trait.trait_value}
      maxWidth="full"
-      overflowX={'hidden'}
-      overflowY={'hidden'}
+      overflowX="hidden"
+      overflowY="hidden"
      fontWeight="normal"
      className={`${subheadSmall} ${styles.subRowHover}`}
      justifyContent="space-between"

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

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

 const SortByItem = ({

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

                <BuyNowButtonContainer>
                  <Erc1155BuyNowText>
-                    <ThemedText.SubHeader lineHeight={'20px'}>{quantity}</ThemedText.SubHeader>
+                    <ThemedText.SubHeader lineHeight="20px">{quantity}</ThemedText.SubHeader>
                  </Erc1155BuyNowText>
                </BuyNowButtonContainer>


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

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

--- a/src/pages/AddLiquidity/index.tsx
+++ b/src/pages/AddLiquidity/index.tsx
@@ -434,7 +434,7 @@ export default function AddLiquidity() {

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

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

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

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

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

--- a/src/pages/MigrateV2/index.tsx
+++ b/src/pages/MigrateV2/index.tsx
@@ -169,11 +169,11 @@ export default function MigrateV2() {
            <EmptyState message={<Trans>No V2 Liquidity found.</Trans>} />
          )}

-          <AutoColumn justify={'center'} gap="md">
+          <AutoColumn justify="center" gap="md">
            <Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
              <Trans>
                Don’t see one of your v2 positions?{' '}
-                <StyledInternalLink id="import-pool-link" to={'/find?origin=/migrate/v2'}>
+                <StyledInternalLink id="import-pool-link" to="/find?origin=/migrate/v2">
                  Import it.
                </StyledInternalLink>
              </Trans>

--- a/src/pages/Pool/CTACards.tsx
+++ b/src/pages/Pool/CTACards.tsx
@@ -97,7 +97,7 @@ export default function CTACards() {

  return (
    <CTASection>
-      <CTA1 href={'https://help.uniswap.org/en/articles/5391541-providing-liquidity-on-uniswap-v3'}>
+      <CTA1 href="https://help.uniswap.org/en/articles/5391541-providing-liquidity-on-uniswap-v3">
        <ResponsiveColumn>
          <HeaderText>
            <Trans>Learn about providing liquidity</Trans> ↗

--- a/src/pages/Pool/PositionPage.tsx
+++ b/src/pages/Pool/PositionPage.tsx
@@ -196,7 +196,7 @@ function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Cu
    return (
      <ExternalLink href={getExplorerLink(chainId, address, ExplorerDataType.TOKEN)}>
        <RowFixed>
-          <CurrencyLogo currency={currency} size={'20px'} style={{ marginRight: '0.5rem' }} />
+          <CurrencyLogo currency={currency} size="20px" style={{ marginRight: '0.5rem' }} />
          <ThemedText.DeprecatedMain>{currency?.symbol} ↗</ThemedText.DeprecatedMain>
        </RowFixed>
      </ExternalLink>
@@ -205,7 +205,7 @@ function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Cu

  return (
    <RowFixed>
-      <CurrencyLogo currency={currency} size={'20px'} style={{ marginRight: '0.5rem' }} />
+      <CurrencyLogo currency={currency} size="20px" style={{ marginRight: '0.5rem' }} />
      <ThemedText.DeprecatedMain>{currency?.symbol}</ThemedText.DeprecatedMain>
    </RowFixed>
  )
@@ -523,12 +523,12 @@ export function PositionPage() {

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

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

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

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

--- a/src/pages/RemoveLiquidity/V3.tsx
+++ b/src/pages/RemoveLiquidity/V3.tsx
@@ -202,13 +202,13 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {

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

--- a/src/pages/RemoveLiquidity/index.tsx
+++ b/src/pages/RemoveLiquidity/index.tsx
@@ -290,13 +290,13 @@ export default function RemoveLiquidity() {

  function modalHeader() {
    return (
-      <AutoColumn gap={'md'} style={{ marginTop: '20px' }}>
+      <AutoColumn gap="md" style={{ marginTop: '20px' }}>
        <RowBetween align="flex-end">
          <Text fontSize={24} fontWeight={500}>
            {parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}
          </Text>
          <RowFixed gap="4px">
-            <CurrencyLogo currency={currencyA} size={'24px'} />
+            <CurrencyLogo currency={currencyA} size="24px" />
            <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
              {currencyA?.symbol}
            </Text>
@@ -310,19 +310,14 @@ export default function RemoveLiquidity() {
            {parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}
          </Text>
          <RowFixed gap="4px">
-            <CurrencyLogo currency={currencyB} size={'24px'} />
+            <CurrencyLogo currency={currencyB} size="24px" />
            <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
              {currencyB?.symbol}
            </Text>
          </RowFixed>
        </RowBetween>

-        <ThemedText.DeprecatedItalic
-          fontSize={12}
-          color={theme.deprecated_text2}
-          textAlign="left"
-          padding={'12px 0 0 0'}
-        >
+        <ThemedText.DeprecatedItalic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding="12px 0 0 0">
          <Trans>
            Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
            will revert.
@@ -456,7 +451,7 @@ export default function RemoveLiquidity() {
          <AutoColumn gap="md">
            <BlueCard>
              <AutoColumn gap="10px">
-                <ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
+                <ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
                  <Trans>
                    <b>Tip:</b> Removing pool tokens converts your position back into underlying tokens at the current
                    rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.
@@ -591,7 +586,7 @@ export default function RemoveLiquidity() {
                  onMax={() => onUserInput(Field.LIQUIDITY_PERCENT, '100')}
                  showMaxButton={!atMaxAmount}
                  currency={currencyA}
-                  label={'Output'}
+                  label="Output"
                  onCurrencySelect={handleSelectCurrencyA}
                  id="remove-liquidity-tokena"
                />
@@ -605,7 +600,7 @@ export default function RemoveLiquidity() {
                  onMax={() => onUserInput(Field.LIQUIDITY_PERCENT, '100')}
                  showMaxButton={!atMaxAmount}
                  currency={currencyB}
-                  label={'Output'}
+                  label="Output"
                  onCurrencySelect={handleSelectCurrencyB}
                  id="remove-liquidity-tokenb"
                />

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

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

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