Worked on #17670 & #18714 for 7 files. (#18789)

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>

ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js

@@ -5,12 +5,12 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 
 import Box from '../../../ui/box';
 import Button from '../../../ui/button';
-import Typography from '../../../ui/typography/typography';
 import {
   DISPLAY,
-  FONT_WEIGHT,
-  TypographyVariant,
+  FontWeight,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
+import { Text } from '../../../component-library';
 
 const NUMBER_OF_AGGREGATORS_TO_DISPLAY = 2;
 
@@ -22,15 +22,13 @@ const DetectedTokenAggregators = ({ aggregators }) => {
 
   return (
     <Box display={DISPLAY.INLINE_FLEX} className="detected-token-aggregators">
-      <Typography
-        variant={TypographyVariant.H7}
-        fontWeight={FONT_WEIGHT.NORMAL}
-      >
+      <Text variant={TextVariant.bodySm} as="h6" fontWeight={FontWeight.Normal}>
         {t('fromTokenLists', [
           numOfHiddenAggregators > 0 && !displayMore ? (
-            <Typography
-              variant={TypographyVariant.H7}
-              fontWeight={FONT_WEIGHT.NORMAL}
+            <Text
+              variant={TextVariant.bodySm}
+              as="h6"
+              fontWeight={FontWeight.Normal}
               key="detected-token-aggrgators-with-more"
             >
               {`${aggregators
@@ -44,18 +42,19 @@ const DetectedTokenAggregators = ({ aggregators }) => {
               >
                 {t('plusXMore', [numOfHiddenAggregators])}
               </Button>
-            </Typography>
+            </Text>
           ) : (
-            <Typography
-              variant={TypographyVariant.H7}
-              fontWeight={FONT_WEIGHT.NORMAL}
+            <Text
+              variant={TextVariant.bodySm}
+              as="h6"
+              fontWeight={FontWeight.Normal}
               key="detected-token-aggrgators-without-more"
             >
               {`${aggregators.join(', ')}.`}
-            </Typography>
+            </Text>
           ),
         ])}
-      </Typography>
+      </Text>
     </Box>
   );
 };

ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js

@@ -5,8 +5,8 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 
 import Popover from '../../../ui/popover';
 import Button from '../../../ui/button';
-import Typography from '../../../ui/typography/typography';
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
+import { TextVariant } from '../../../../helpers/constants/design-system';
+import { Text } from '../../../component-library';
 
 const DetectedTokenIgnoredPopover = ({
   partiallyIgnoreDetectedTokens,
@@ -48,9 +48,10 @@ const DetectedTokenIgnoredPopover = ({
       })}
       footer={footer}
     >
-      <Typography
-        variant={TypographyVariant.H6}
-        tag={TypographyVariant.H6}
+      <Text
+        variant={TextVariant.bodySm}
+        as="h6"
+        tag={TextVariant.bodySm}
         marginTop={0}
         marginRight={5}
         marginBottom={7}
@@ -59,7 +60,7 @@ const DetectedTokenIgnoredPopover = ({
         {partiallyIgnoreDetectedTokens
           ? t('importSelectedTokensDescription')
           : t('ignoreTokenWarning')}
-      </Typography>
+      </Text>
     </Popover>
   );
 };

ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js

@@ -5,7 +5,7 @@ import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas';
 import {
   Color,
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 import { PRIORITY_LEVEL_ICON_MAP } from '../../../helpers/constants/gas';
 import { useGasFeeContext } from '../../../contexts/gasFee';
@@ -13,8 +13,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useTransactionEventFragment } from '../../../hooks/useTransactionEventFragment';
 import { useTransactionModalContext } from '../../../contexts/transaction-modal';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
-import Typography from '../../ui/typography/typography';
-import { Icon, IconName, IconSize } from '../../component-library';
+import { Icon, IconName, IconSize, Text } from '../../component-library';
 
 export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
   const t = useI18nContext();
@@ -87,22 +86,23 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
           contentText={
             <div className="edit-gas-fee-button__tooltip">
               {transaction?.origin && (
-                <Typography
-                  variant={TypographyVariant.H7}
+                <Text
+                  variant={TextVariant.bodySm}
+                  as="h6"
                   color={TextColor.textAlternative}
                 >
                   {t('dappSuggestedTooltip', [transaction.origin])}
-                </Typography>
+                </Text>
               )}
-              <Typography variant={TypographyVariant.H7}>
+              <Text variant={TextVariant.bodySm} as="h6">
                 <b>{t('maxBaseFee')}</b> {maxFeePerGas}
-              </Typography>
-              <Typography variant={TypographyVariant.H7}>
+              </Text>
+              <Text variant={TextVariant.bodySm} as="h6">
                 <b>{t('maxPriorityFee')}</b> {maxPriorityFeePerGas}
-              </Typography>
-              <Typography variant={TypographyVariant.H7}>
+              </Text>
+              <Text variant={TextVariant.bodySm} as="h6">
                 <b>{t('gasLimit')}</b> {gasLimit}
-              </Typography>
+              </Text>
             </div>
           }
           position="top"

ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js

@@ -6,16 +6,16 @@ import { useTransactionModalContext } from '../../../contexts/transaction-modal'
 import Box from '../../ui/box';
 import ErrorMessage from '../../ui/error-message';
 import Popover from '../../ui/popover';
-import Typography from '../../ui/typography/typography';
 
 import {
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
 import { useGasFeeContext } from '../../../contexts/gasFee';
 import AppLoadingSpinner from '../app-loading-spinner';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
+import { Text } from '../../component-library';
 import EditGasItem from './edit-gas-item';
 import NetworkStatistics from './network-statistics';
 
@@ -84,12 +84,13 @@ const EditGasFeePopover = () => {
             </Box>
             <Box>
               <NetworkStatistics />
-              <Typography
+              <Text
                 className="edit-gas-fee-popover__know-more"
                 align="center"
                 color={TextColor.textAlternative}
-                tag={TypographyVariant.paragraph}
-                variant={TypographyVariant.H7}
+                tag={TextVariant.bodyMd}
+                variant={TextVariant.bodySm}
+                as="h6"
               >
                 {t('learnMoreAboutGas', [
                   <a
@@ -101,7 +102,7 @@ const EditGasFeePopover = () => {
                     {t('learnMore')}
                   </a>,
                 ])}
-              </Typography>
+              </Text>
             </Box>
           </div>
         </div>

ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js

@@ -5,13 +5,13 @@ import {
   PriorityLevels,
 } from '../../../../../shared/constants/gas';
 import {
-  FONT_WEIGHT,
+  FontWeight,
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { isMetamaskSuggestedGasEstimate } from '../../../../helpers/utils/gas';
 import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
-import Typography from '../../../ui/typography';
+import { Text } from '../../../component-library';
 
 const EditGasToolTip = ({
   editGasMode,
@@ -107,43 +107,47 @@ const EditGasToolTip = ({
       ) : null}
       {toolTipMessage && (
         <div className="edit-gas-tooltip__container__message">
-          <Typography variant={TypographyVariant.H7}>
+          <Text variant={TextVariant.bodySm} as="h6">
             {toolTipMessage}
-          </Typography>
+          </Text>
         </div>
       )}
       {priorityLevel === PriorityLevels.custom ||
       estimateGreaterThanGasUse ? null : (
         <div className="edit-gas-tooltip__container__values">
           <div>
-            <Typography
-              variant={TypographyVariant.H7}
-              fontWeight={FONT_WEIGHT.BOLD}
+            <Text
+              variant={TextVariant.bodySm}
+              as="h6"
+              fontWeight={FontWeight.Bold}
               className="edit-gas-tooltip__container__label"
             >
               {t('maxBaseFee')}
-            </Typography>
+            </Text>
             {maxFeePerGas && (
-              <Typography
-                variant={TypographyVariant.H7}
+              <Text
+                variant={TextVariant.bodySm}
+                as="h6"
                 color={TextColor.textAlternative}
                 className="edit-gas-tooltip__container__value"
               >
                 {roundToDecimalPlacesRemovingExtraZeroes(maxFeePerGas, 4)}
-              </Typography>
+              </Text>
             )}
           </div>
           <div>
-            <Typography
-              variant={TypographyVariant.H7}
-              fontWeight={FONT_WEIGHT.BOLD}
+            <Text
+              variant={TextVariant.bodySm}
+              as="h6"
+              fontWeight={FontWeight.Bold}
               className="edit-gas-tooltip__container__label"
             >
               {t('priorityFeeProperCase')}
-            </Typography>
+            </Text>
             {maxPriorityFeePerGas && (
-              <Typography
-                variant={TypographyVariant.H7}
+              <Text
+                variant={TextVariant.bodySm}
+                as="h6"
                 color={TextColor.textAlternative}
                 className="edit-gas-tooltip__container__value"
               >
@@ -151,25 +155,27 @@ const EditGasToolTip = ({
                   maxPriorityFeePerGas,
                   4,
                 )}
-              </Typography>
+              </Text>
             )}
           </div>
           <div>
-            <Typography
-              variant={TypographyVariant.H7}
-              fontWeight={FONT_WEIGHT.BOLD}
+            <Text
+              variant={TextVariant.bodySm}
+              as="h6"
+              fontWeight={FontWeight.Bold}
               className="edit-gas-tooltip__container__label"
             >
               {t('gasLimit')}
-            </Typography>
+            </Text>
             {gasLimit && (
-              <Typography
-                variant={TypographyVariant.H7}
+              <Text
+                variant={TextVariant.bodySm}
+                as="h6"
                 color={TextColor.textAlternative}
                 className="edit-gas-tooltip__container__value"
               >
                 {roundToDecimalPlacesRemovingExtraZeroes(gasLimit, 4)}
-              </Typography>
+              </Text>
             )}
           </div>
         </div>

ui/components/app/modals/contract-details-modal/contract-details-modal.js

@@ -9,10 +9,9 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 import Identicon from '../../../ui/identicon';
 import { ellipsify } from '../../../../pages/send/send.utils';
 import Popover from '../../../ui/popover';
-import Typography from '../../../ui/typography';
 import {
-  FONT_WEIGHT,
-  TypographyVariant,
+  FontWeight,
+  TextVariant,
   DISPLAY,
   Size,
   BorderStyle,
@@ -25,7 +24,7 @@ import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import { getAddressBookEntry } from '../../../../selectors';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
 import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
-import { ButtonIcon, IconName } from '../../../component-library';
+import { ButtonIcon, IconName, Text } from '../../../component-library';
 
 export default function ContractDetailsModal({
   onClose,
@@ -62,32 +61,35 @@ export default function ContractDetailsModal({
         paddingLeft={4}
         className="contract-details-modal__content"
       >
-        <Typography
-          fontWeight={FONT_WEIGHT.BOLD}
-          variant={TypographyVariant.H5}
+        <Text
+          fontWeight={FontWeight.Bold}
+          variant={TextVariant.bodyMd}
+          as="h5"
           display={DISPLAY.FLEX}
           boxProps={{ marginTop: 0, marginBottom: 0 }}
         >
           {t('contractTitle')}
-        </Typography>
-        <Typography
-          variant={TypographyVariant.H7}
+        </Text>
+        <Text
+          variant={TextVariant.bodySm}
+          as="h6"
           display={DISPLAY.FLEX}
           color={TextColor.textAlternative}
           boxProps={{ marginTop: 2, marginBottom: 0 }}
         >
           {t('contractDescription')}
-        </Typography>
+        </Text>
         {!isContractRequestingSignature && (
           <>
-            <Typography
-              variant={TypographyVariant.H6}
+            <Text
+              variant={TextVariant.bodySm}
+              as="h6"
               display={DISPLAY.FLEX}
               marginTop={4}
               marginBottom={2}
             >
               {nft ? t('contractNFT') : t('contractToken')}
-            </Typography>
+            </Text>
             <Box
               display={DISPLAY.FLEX}
               borderRadius={Size.SM}
@@ -110,23 +112,25 @@ export default function ContractDetailsModal({
                 />
               )}
               <Box data-testid="recipient">
-                <Typography
-                  fontWeight={FONT_WEIGHT.BOLD}
-                  variant={TypographyVariant.H5}
+                <Text
+                  fontWeight={FontWeight.Bold}
+                  variant={TextVariant.bodyMd}
+                  as="h5"
                   marginTop={4}
                 >
                   {tokenName || ellipsify(tokenAddress)}
-                </Typography>
+                </Text>
                 {tokenName && (
-                  <Typography
-                    variant={TypographyVariant.H6}
+                  <Text
+                    variant={TextVariant.bodySm}
+                    as="h6"
                     display={DISPLAY.FLEX}
                     color={TextColor.textAlternative}
                     marginTop={0}
                     marginBottom={4}
                   >
                     {ellipsify(tokenAddress)}
-                  </Typography>
+                  </Text>
                 )}
               </Box>
               <Box
@@ -182,8 +186,9 @@ export default function ContractDetailsModal({
             </Box>
           </>
         )}
-        <Typography
-          variant={TypographyVariant.H6}
+        <Text
+          variant={TextVariant.bodySm}
+          as="h6"
           display={DISPLAY.FLEX}
           marginTop={4}
           marginBottom={2}
@@ -193,7 +198,7 @@ export default function ContractDetailsModal({
           {!nft &&
             !isContractRequestingSignature &&
             t('contractRequestingSpendingCap')}
-        </Typography>
+        </Text>
         <Box
           display={DISPLAY.FLEX}
           borderRadius={Size.SM}
@@ -207,23 +212,25 @@ export default function ContractDetailsModal({
             address={toAddress}
           />
           <Box data-testid="recipient">
-            <Typography
-              fontWeight={FONT_WEIGHT.BOLD}
-              variant={TypographyVariant.H5}
+            <Text
+              fontWeight={FontWeight.Bold}
+              variant={TextVariant.bodyMd}
+              as="h5"
               marginTop={4}
             >
               {addressBookEntry?.data?.name || ellipsify(toAddress)}
-            </Typography>
+            </Text>
             {addressBookEntry?.data?.name && (
-              <Typography
-                variant={TypographyVariant.H6}
+              <Text
+                variant={TextVariant.bodySm}
+                as="h6"
                 display={DISPLAY.FLEX}
                 color={TextColor.textAlternative}
                 marginTop={0}
                 marginBottom={4}
               >
                 {ellipsify(toAddress)}
-              </Typography>
+              </Text>
             )}
           </Box>
           <Box

ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js

@@ -3,12 +3,11 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import Box from '../../../components/ui/box';
 import Button from '../../../components/ui/button';
-import Typography from '../../../components/ui/typography';
 import {
-  TEXT_ALIGN,
-  TypographyVariant,
+  TextAlign,
+  TextVariant,
   JustifyContent,
-  FONT_WEIGHT,
+  FontWeight,
   DISPLAY,
 } from '../../../helpers/constants/design-system';
 import {
@@ -23,6 +22,7 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
+import { Text } from '../../../components/component-library';
 import SkipSRPBackup from './skip-srp-backup-popover';
 
 export default function SecureYourWallet() {
@@ -85,23 +85,25 @@ export default function SecureYourWallet() {
       />
       <Box
         justifyContent={JustifyContent.center}
-        textAlign={TEXT_ALIGN.CENTER}
+        textAlign={TextAlign.Center}
         marginBottom={4}
       >
-        <Typography
-          variant={TypographyVariant.H2}
-          fontWeight={FONT_WEIGHT.BOLD}
+        <Text
+          variant={TextVariant.headingLg}
+          as="h2"
+          fontWeight={FontWeight.Bold}
         >
           {t('seedPhraseIntroTitle')}
-        </Typography>
+        </Text>
       </Box>
       <Box justifyContent={JustifyContent.center} marginBottom={6}>
-        <Typography
-          variant={TypographyVariant.H4}
+        <Text
+          variant={TextVariant.headingSm}
+          as="h4"
           className="secure-your-wallet__details"
         >
           {t('seedPhraseIntroTitleCopy')}
-        </Typography>
+        </Text>
       </Box>
       <Box>
         <video
@@ -158,27 +160,27 @@ export default function SecureYourWallet() {
       </Box>
       <Box className="secure-your-wallet__desc">
         <Box marginBottom={4}>
-          <Typography
+          <Text
             as="p"
-            variant={TypographyVariant.H4}
-            fontWeight={FONT_WEIGHT.BOLD}
+            variant={TextVariant.headingSm}
+            fontWeight={FontWeight.Bold}
             boxProps={{ display: DISPLAY.BLOCK }}
           >
             {t('seedPhraseIntroSidebarTitleOne')}
-          </Typography>
-          <Typography as="p" variant={TypographyVariant.H4}>
+          </Text>
+          <Text as="p" variant={TextVariant.headingSm}>
             {t('seedPhraseIntroSidebarCopyOne')}
-          </Typography>
+          </Text>
         </Box>
         <Box marginBottom={4}>
-          <Typography
+          <Text
             as="p"
-            variant={TypographyVariant.H4}
-            fontWeight={FONT_WEIGHT.BOLD}
+            variant={TextVariant.headingSm}
+            fontWeight={FontWeight.Bold}
             boxProps={{ display: DISPLAY.BLOCK }}
           >
             {t('seedPhraseIntroSidebarTitleTwo')}
-          </Typography>
+          </Text>
           <ul className="secure-your-wallet__list">
             <li>{t('seedPhraseIntroSidebarBulletOne')}</li>
             <li>{t('seedPhraseIntroSidebarBulletThree')}</li>
@@ -186,22 +188,22 @@ export default function SecureYourWallet() {
           </ul>
         </Box>
         <Box marginBottom={6}>
-          <Typography
+          <Text
             as="p"
-            variant={TypographyVariant.H4}
-            fontWeight={FONT_WEIGHT.BOLD}
+            variant={TextVariant.headingSm}
+            fontWeight={FontWeight.Bold}
             boxProps={{ display: DISPLAY.BLOCK }}
           >
             {t('seedPhraseIntroSidebarTitleThree')}
-          </Typography>
-          <Typography as="p" variant={TypographyVariant.H4}>
+          </Text>
+          <Text as="p" variant={TextVariant.headingSm}>
             {t('seedPhraseIntroSidebarCopyTwo')}
-          </Typography>
+          </Text>
         </Box>
         <Box className="secure-your-wallet__highlighted" marginBottom={2}>
-          <Typography as="p" variant={TypographyVariant.H4}>
+          <Text as="p" variant={TextVariant.headingSm}>
             {t('seedPhraseIntroSidebarCopyThree')}
-          </Typography>
+          </Text>
         </Box>
       </Box>
     </div>