Uniswap · vm · Jul 26, 2022 · Jul 26, 2022 · Jul 26, 2022
diff --git a/src/components/AccountDetails/index.tsx b/src/components/AccountDetails/index.tsx
@@ -339,9 +339,9 @@ export default function AccountDetails({
       {!!pendingTransactions.length || !!confirmedTransactions.length ? (
         <LowerSection>
           <AutoRow mb={'1rem'} style={{ justifyContent: 'space-between' }}>
-            <ThemedText.Body>
+            <ThemedText.DeprecatedBody>
               <Trans>Recent Transactions</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
             <LinkStyledButton onClick={clearAllTransactionsCallback}>
               <Trans>(clear all)</Trans>
             </LinkStyledButton>
@@ -351,9 +351,9 @@ export default function AccountDetails({
         </LowerSection>
       ) : (
         <LowerSection>
-          <ThemedText.Body color={theme.deprecated_text1}>
+          <ThemedText.DeprecatedBody color={theme.deprecated_text1}>
             <Trans>Your transactions will appear here...</Trans>
-          </ThemedText.Body>
+          </ThemedText.DeprecatedBody>
         </LowerSection>
       )}
     </>

diff --git a/src/components/AddressInputPanel/index.tsx b/src/components/AddressInputPanel/index.tsx
@@ -108,9 +108,9 @@ export default function AddressInputPanel({
         <InputContainer>
           <AutoColumn gap="md">
             <RowBetween>
-              <ThemedText.Black color={theme.deprecated_text2} fontWeight={500} fontSize={14}>
+              <ThemedText.DeprecatedBlack color={theme.deprecated_text2} fontWeight={500} fontSize={14}>
                 {label ?? <Trans>Recipient</Trans>}
-              </ThemedText.Black>
+              </ThemedText.DeprecatedBlack>
               {address && chainId && (
                 <ExternalLink
                   href={getExplorerLink(chainId, name ?? address, ExplorerDataType.ADDRESS)}

diff --git a/src/components/ConnectedAccountBlocked/index.tsx b/src/components/ConnectedAccountBlocked/index.tsx
@@ -33,22 +33,22 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
     <Modal isOpen={props.isOpen} onDismiss={Function.prototype()}>
       <ContentWrapper>
         <WarningIcon />
-        <ThemedText.LargeHeader lineHeight={2} marginBottom={1} marginTop={1}>
+        <ThemedText.DeprecatedLargeHeader lineHeight={2} marginBottom={1} marginTop={1}>
           <Trans>Blocked Address</Trans>
-        </ThemedText.LargeHeader>
-        <ThemedText.DarkGray fontSize={12} marginBottom={12}>
+        </ThemedText.DeprecatedLargeHeader>
+        <ThemedText.DeprecatedDarkGray fontSize={12} marginBottom={12}>
           {props.account}
-        </ThemedText.DarkGray>
-        <ThemedText.Main fontSize={14} marginBottom={12}>
+        </ThemedText.DeprecatedDarkGray>
+        <ThemedText.DeprecatedMain fontSize={14} marginBottom={12}>
           <Trans>This address is blocked on the Uniswap Labs interface because it is associated with one or more</Trans>{' '}
           <ExternalLink href="https://help.uniswap.org/en/articles/6149816">
             <Trans>blocked activities</Trans>
           </ExternalLink>
           .
-        </ThemedText.Main>
-        <ThemedText.Main fontSize={12}>
+        </ThemedText.DeprecatedMain>
+        <ThemedText.DeprecatedMain fontSize={12}>
           <Trans>If you believe this is an error, please send an email including your address to </Trans>{' '}
-        </ThemedText.Main>
+        </ThemedText.DeprecatedMain>
         <Copy iconSize={12} toCopy="compliance@uniswap.org" color={theme.deprecated_primary1} iconPosition="right">
           compliance@uniswap.org
         </Copy>

diff --git a/src/components/CurrencyInputPanel/FiatValue.tsx b/src/components/CurrencyInputPanel/FiatValue.tsx
@@ -31,7 +31,7 @@ export function FiatValue({
   const visibleDecimalPlaces = p < 1.05 ? 4 : 2
 
   return (
-    <ThemedText.Body fontSize={14} color={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}>
+    <ThemedText.DeprecatedBody fontSize={14} color={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}>
       {fiatValue ? (
         <Trans>
           $
@@ -51,6 +51,6 @@ export function FiatValue({
           </MouseoverTooltip>
         </span>
       ) : null}
-    </ThemedText.Body>
+    </ThemedText.DeprecatedBody>
   )
 }
diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
@@ -232,9 +232,9 @@ export default function CurrencyInputPanel({
         <FixedContainer>
           <AutoColumn gap="sm" justify="center">
             <Lock />
-            <ThemedText.Label fontSize="12px" textAlign="center" padding="0 12px">
+            <ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
               <Trans>The market price is outside your specified price range. Single-asset deposit only.</Trans>
-            </ThemedText.Label>
+            </ThemedText.DeprecatedLabel>
           </AutoColumn>
         </FixedContainer>
       )}
@@ -297,7 +297,7 @@ export default function CurrencyInputPanel({
               </LoadingOpacityContainer>
               {account ? (
                 <RowFixed style={{ height: '17px' }}>
-                  <ThemedText.Body
+                  <ThemedText.DeprecatedBody
                     onClick={onMax}
                     color={theme.deprecated_text3}
                     fontWeight={500}
@@ -311,7 +311,7 @@ export default function CurrencyInputPanel({
                         <Trans>Balance: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
                       )
                     ) : null}
-                  </ThemedText.Body>
+                  </ThemedText.DeprecatedBody>
                   {showMaxButton && selectedCurrencyBalance ? (
                     <TraceEvent
                       events={[Event.onClick]}

diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
@@ -101,13 +101,13 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren<unk
           <BodyWrapper>
             <AutoColumn gap={'md'}>
               <SomethingWentWrongWrapper>
-                <ThemedText.Label fontSize={24} fontWeight={600}>
+                <ThemedText.DeprecatedLabel fontSize={24} fontWeight={600}>
                   <Trans>Something went wrong</Trans>
-                </ThemedText.Label>
+                </ThemedText.DeprecatedLabel>
               </SomethingWentWrongWrapper>
               <CodeBlockWrapper>
                 <code>
-                  <ThemedText.Main fontSize={10}>{error.stack}</ThemedText.Main>
+                  <ThemedText.DeprecatedMain fontSize={10}>{error.stack}</ThemedText.DeprecatedMain>
                 </code>
               </CodeBlockWrapper>
               {IS_UNISWAP ? (
@@ -120,18 +120,18 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren<unk
                       )}`}
                       target="_blank"
                     >
-                      <ThemedText.Link fontSize={16}>
+                      <ThemedText.DeprecatedLink fontSize={16}>
                         <Trans>Create an issue on GitHub</Trans>
                         <span>↗</span>
-                      </ThemedText.Link>
+                      </ThemedText.DeprecatedLink>
                     </ExternalLink>
                   </LinkWrapper>
                   <LinkWrapper>
                     <ExternalLink id="get-support-on-discord" href="https://discord.gg/FCfyBSbCU5" target="_blank">
-                      <ThemedText.Link fontSize={16}>
+                      <ThemedText.DeprecatedLink fontSize={16}>
                         <Trans>Get support on Discord</Trans>
                         <span>↗</span>
-                      </ThemedText.Link>
+                      </ThemedText.DeprecatedLink>
                     </ExternalLink>
                   </LinkWrapper>
                 </AutoRow>

diff --git a/src/components/FeeSelector/FeeOption.tsx b/src/components/FeeSelector/FeeOption.tsx
@@ -11,7 +11,7 @@ import { ThemedText } from 'theme'
 import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'
 import { FEE_AMOUNT_DETAIL } from './shared'
 
-const ResponsiveText = styled(ThemedText.Label)`
+const ResponsiveText = styled(ThemedText.DeprecatedLabel)`
   line-height: 16px;
   font-size: 14px;
 
@@ -37,9 +37,9 @@ export function FeeOption({ feeAmount, active, poolState, distributions, onClick
           <ResponsiveText>
             <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}%</Trans>
           </ResponsiveText>
-          <ThemedText.Main fontWeight={400} fontSize="12px" textAlign="left">
+          <ThemedText.DeprecatedMain fontWeight={400} fontSize="12px" textAlign="left">
             {FEE_AMOUNT_DETAIL[feeAmount].description}
-          </ThemedText.Main>
+          </ThemedText.DeprecatedMain>
         </AutoColumn>
 
         {distributions && (

diff --git a/src/components/FeeSelector/FeeTierPercentageBadge.tsx b/src/components/FeeSelector/FeeTierPercentageBadge.tsx
@@ -17,15 +17,15 @@ export function FeeTierPercentageBadge({
 }) {
   return (
     <Badge>
-      <ThemedText.Label fontSize={10}>
+      <ThemedText.DeprecatedLabel fontSize={10}>
         {!distributions || poolState === PoolState.NOT_EXISTS || poolState === PoolState.INVALID ? (
           <Trans>Not created</Trans>
         ) : distributions[feeAmount] !== undefined ? (
           <Trans>{distributions[feeAmount]?.toFixed(0)}% select</Trans>
         ) : (
           <Trans>No data</Trans>
         )}
-      </ThemedText.Label>
+      </ThemedText.DeprecatedLabel>
     </Badge>
   )
 }
diff --git a/src/components/FeeSelector/index.tsx b/src/components/FeeSelector/index.tsx
@@ -149,18 +149,18 @@ export default function FeeSelector({
             <AutoColumn id="add-liquidity-selected-fee">
               {!feeAmount ? (
                 <>
-                  <ThemedText.Label>
+                  <ThemedText.DeprecatedLabel>
                     <Trans>Fee tier</Trans>
-                  </ThemedText.Label>
-                  <ThemedText.Main fontWeight={400} fontSize="12px" textAlign="left">
+                  </ThemedText.DeprecatedLabel>
+                  <ThemedText.DeprecatedMain fontWeight={400} fontSize="12px" textAlign="left">
                     <Trans>The % you will earn in fees.</Trans>
-                  </ThemedText.Main>
+                  </ThemedText.DeprecatedMain>
                 </>
               ) : (
                 <>
-                  <ThemedText.Label className="selected-fee-label">
+                  <ThemedText.DeprecatedLabel className="selected-fee-label">
                     <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}% fee tier</Trans>
-                  </ThemedText.Label>
+                  </ThemedText.DeprecatedLabel>
                   <Box style={{ width: 'fit-content', marginTop: '8px' }} className="selected-fee-percentage">
                     {distributions && (
                       <FeeTierPercentageBadge

diff --git a/src/components/Header/Polling.tsx b/src/components/Header/Polling.tsx
@@ -31,7 +31,7 @@ const StyledPolling = styled.div<{ warning: boolean }>`
     display: none;
   `}
 `
-const StyledPollingNumber = styled(ThemedText.Small)<{ breathe: boolean; hovering: boolean }>`
+const StyledPollingNumber = styled(ThemedText.DeprecatedSmall)<{ breathe: boolean; hovering: boolean }>`
   transition: opacity 0.25s ease;
   opacity: ${({ breathe, hovering }) => (hovering ? 0.7 : breathe ? 1 : 0.5)};
   :hover {
@@ -143,7 +143,7 @@ export default function Polling() {
           <ExternalLink href={'https://etherscan.io/gastracker'}>
             {priceGwei ? (
               <RowFixed style={{ marginRight: '8px' }}>
-                <ThemedText.Main fontSize="11px" mr="8px" color={theme.deprecated_text3}>
+                <ThemedText.DeprecatedMain fontSize="11px" mr="8px" color={theme.deprecated_text3}>
                   <MouseoverTooltip
                     text={
                       <Trans>
@@ -154,7 +154,7 @@ export default function Polling() {
                   >
                     {priceGwei.toString()} <Trans>gwei</Trans>
                   </MouseoverTooltip>
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
                 <StyledGasDot />
               </RowFixed>
             ) : null}

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -313,15 +313,15 @@ export default function Header() {
           {availableClaim && !showClaimPopup && (
             <UNIWrapper onClick={toggleClaimModal}>
               <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
-                <ThemedText.White padding="0 2px">
+                <ThemedText.DeprecatedWhite padding="0 2px">
                   {claimTxn && !claimTxn?.receipt ? (
                     <Dots>
                       <Trans>Claiming UNI</Trans>
                     </Dots>
                   ) : (
                     <Trans>Claim UNI</Trans>
                   )}
-                </ThemedText.White>
+                </ThemedText.DeprecatedWhite>
               </UNIAmount>
               <CardNoise />
             </UNIWrapper>

diff --git a/src/components/InputStepCounter/InputStepCounter.tsx b/src/components/InputStepCounter/InputStepCounter.tsx
@@ -57,13 +57,13 @@ const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
   `};
 `
 
-const InputTitle = styled(ThemedText.Small)`
+const InputTitle = styled(ThemedText.DeprecatedSmall)`
   color: ${({ theme }) => theme.deprecated_text2};
   font-size: 12px;
   font-weight: 500;
 `
 
-const ButtonLabel = styled(ThemedText.White)<{ disabled: boolean }>`
+const ButtonLabel = styled(ThemedText.DeprecatedWhite)<{ disabled: boolean }>`
   color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text2 : theme.deprecated_text1)} !important;
 `
 

diff --git a/src/components/LiquidityChartRangeInput/index.tsx b/src/components/LiquidityChartRangeInput/index.tsx
@@ -58,9 +58,9 @@ function InfoBox({ message, icon }: { message?: ReactNode; icon: ReactNode }) {
     <ColumnCenter style={{ height: '100%', justifyContent: 'center' }}>
       {icon}
       {message && (
-        <ThemedText.MediumHeader padding={10} marginTop="20px" textAlign="center">
+        <ThemedText.DeprecatedMediumHeader padding={10} marginTop="20px" textAlign="center">
           {message}
-        </ThemedText.MediumHeader>
+        </ThemedText.DeprecatedMediumHeader>
       )}
     </ColumnCenter>
   )

diff --git a/src/components/ModalViews/index.tsx b/src/components/ModalViews/index.tsx
@@ -32,9 +32,9 @@ export function LoadingView({ children, onDismiss }: { children: any; onDismiss:
       </ConfirmedIcon>
       <AutoColumn gap="100px" justify={'center'}>
         {children}
-        <ThemedText.SubHeader>
+        <ThemedText.DeprecatedSubHeader>
           <Trans>Confirm this transaction in your wallet</Trans>
-        </ThemedText.SubHeader>
+        </ThemedText.DeprecatedSubHeader>
       </AutoColumn>
     </ConfirmOrLoadingWrapper>
   )
@@ -68,9 +68,9 @@ export function SubmittedView({
             href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
             style={{ marginLeft: '4px' }}
           >
-            <ThemedText.SubHeader>
+            <ThemedText.DeprecatedSubHeader>
               <Trans>View transaction on Explorer</Trans>
-            </ThemedText.SubHeader>
+            </ThemedText.DeprecatedSubHeader>
           </ExternalLink>
         )}
       </AutoColumn>

diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx
@@ -94,7 +94,7 @@ export function AddRemoveTabs({
         >
           <StyledArrowLeft stroke={theme.deprecated_text2} />
         </StyledHistoryLink>
-        <ThemedText.MediumHeader
+        <ThemedText.DeprecatedMediumHeader
           fontWeight={500}
           fontSize={20}
           style={{ flex: '1', margin: 'auto', textAlign: children ? 'start' : 'center' }}
@@ -106,7 +106,7 @@ export function AddRemoveTabs({
           ) : (
             <Trans>Remove Liquidity</Trans>
           )}
-        </ThemedText.MediumHeader>
+        </ThemedText.DeprecatedMediumHeader>
         <Box style={{ marginRight: '.5rem' }}>{children}</Box>
         <SettingsTab placeholderSlippage={defaultSlippage} />
       </RowBetween>

diff --git a/src/components/Popups/ClaimPopup.tsx b/src/components/Popups/ClaimPopup.tsx
@@ -98,23 +98,27 @@ export default function ClaimPopup() {
           <StyledClose stroke="white" onClick={toggleShowClaimPopup} />
           <AutoColumn style={{ padding: '2rem 0', zIndex: 10 }} justify="center">
             <UniToken width="48px" src={tokenLogo} />{' '}
-            <ThemedText.White style={{ marginTop: '1rem' }} fontSize={36} fontWeight={600}>
+            <ThemedText.DeprecatedWhite style={{ marginTop: '1rem' }} fontSize={36} fontWeight={600}>
               {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
-            </ThemedText.White>
-            <ThemedText.White style={{ paddingTop: '1.25rem', textAlign: 'center' }} fontWeight={600} color="white">
+            </ThemedText.DeprecatedWhite>
+            <ThemedText.DeprecatedWhite
+              style={{ paddingTop: '1.25rem', textAlign: 'center' }}
+              fontWeight={600}
+              color="white"
+            >
               <span role="img" aria-label="party">
                 🎉
               </span>{' '}
               <Trans>UNI has arrived</Trans>{' '}
               <span role="img" aria-label="party">
                 🎉
               </span>
-            </ThemedText.White>
-            <ThemedText.SubHeader style={{ paddingTop: '0.5rem', textAlign: 'center' }} color="white">
+            </ThemedText.DeprecatedWhite>
+            <ThemedText.DeprecatedSubHeader style={{ paddingTop: '0.5rem', textAlign: 'center' }} color="white">
               <Trans>
                 Thanks for being part of the Uniswap community <Heart size={12} />
               </Trans>
-            </ThemedText.SubHeader>
+            </ThemedText.DeprecatedSubHeader>
           </AutoColumn>
           <AutoColumn style={{ zIndex: 10 }} justify="center">
             <ButtonPrimary padding="8px" $borderRadius="8px" width={'fit-content'} onClick={handleToggleSelfClaimModal}>

diff --git a/src/components/Popups/FailedNetworkSwitchPopup.tsx b/src/components/Popups/FailedNetworkSwitchPopup.tsx
@@ -23,12 +23,12 @@ export default function FailedNetworkSwitchPopup({ chainId }: { chainId: Support
         <AlertCircle color={theme.deprecated_red1} size={24} />
       </div>
       <AutoColumn gap="8px">
-        <ThemedText.Body fontWeight={500}>
+        <ThemedText.DeprecatedBody fontWeight={500}>
           <Trans>
             Failed to switch networks from the Uniswap Interface. In order to use Uniswap on {chainInfo.label}, you must
             change the network in your wallet.
           </Trans>
-        </ThemedText.Body>
+        </ThemedText.DeprecatedBody>
       </AutoColumn>
     </RowNoFlex>
   )