Replacing deprecated constants (#19858)

MetaMask · Jul 12, 2023 · c86cbf5 · c86cbf5
1 parent 23c3e8f
commit c86cbf5
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 20 deletions.
diff --git a/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js b/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js
@@ -3,14 +3,12 @@ import PropTypes from 'prop-types';
 
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 
-import Box from '../../../ui/box';
-import Button from '../../../ui/button';
 import {
-  DISPLAY,
+  Display,
   FontWeight,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
-import { Text } from '../../../component-library';
+import { Text, Box, ButtonLink } from '../../../component-library';
 
 const NUMBER_OF_AGGREGATORS_TO_DISPLAY = 2;
 
@@ -21,7 +19,7 @@ const DetectedTokenAggregators = ({ aggregators }) => {
   const [displayMore, setDisplayMore] = useState(false);
 
   return (
-    <Box display={DISPLAY.INLINE_FLEX} className="detected-token-aggregators">
+    <Box display={Display.InlineFlex} className="detected-token-aggregators">
       <Text variant={TextVariant.bodySm} as="h6" fontWeight={FontWeight.Normal}>
         {t('fromTokenLists', [
           numOfHiddenAggregators > 0 && !displayMore ? (
@@ -34,14 +32,13 @@ const DetectedTokenAggregators = ({ aggregators }) => {
               {`${aggregators
                 .slice(0, NUMBER_OF_AGGREGATORS_TO_DISPLAY)
                 .join(', ')}`}
-              <Button
-                type="link"
+              <ButtonLink
                 className="detected-token-aggregators__link"
                 onClick={() => setDisplayMore(true)}
                 key="detected-token-aggrgators-link"
               >
                 {t('plusXMore', [numOfHiddenAggregators])}
-              </Button>
+              </ButtonLink>
             </Text>
           ) : (
             <Text

diff --git a/...nents/app/detected-token/detected-token-aggregators/detected-token-aggregators.stories.js b/...nents/app/detected-token/detected-token-aggregators/detected-token-aggregators.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { DISPLAY } from '../../../../helpers/constants/design-system';
+import { Display } from '../../../../helpers/constants/design-system';
 
-import Box from '../../../ui/box';
+import { Box } from '../../../component-library';
 import DetectedTokenAggregators from './detected-token-aggregators';
 
 export default {
@@ -31,7 +31,7 @@ export default {
 
 const Template = (args) => {
   return (
-    <Box display={DISPLAY.GRID}>
+    <Box display={Display.Grid}>
       <DetectedTokenAggregators aggregators={args.aggregators1} />
       <DetectedTokenAggregators aggregators={args.aggregators2} />
     </Box>

diff --git a/ui/components/app/detected-token/detected-token-details/detected-token-details.js b/ui/components/app/detected-token/detected-token-details/detected-token-details.js
@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
-import Box from '../../../ui/box';
+import { Box } from '../../../component-library';
 import Identicon from '../../../ui/identicon';
 import DetectedTokenValues from '../detected-token-values/detected-token-values';
 import DetectedTokenAddress from '../detected-token-address/detected-token-address';
 import DetectedTokenAggregators from '../detected-token-aggregators/detected-token-aggregators';
-import { DISPLAY } from '../../../../helpers/constants/design-system';
+import { Display } from '../../../../helpers/constants/design-system';
 import { getTokenList } from '../../../../selectors';
 
 const DetectedTokenDetails = ({
@@ -20,7 +20,7 @@ const DetectedTokenDetails = ({
 
   return (
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       className="detected-token-details"
       marginBottom={4}
     >
@@ -30,7 +30,7 @@ const DetectedTokenDetails = ({
         diameter={40}
       />
       <Box
-        display={DISPLAY.GRID}
+        display={Display.Grid}
         marginLeft={2}
         className="detected-token-details__data"
       >

diff --git a/ui/components/app/detected-token/detected-token-details/detected-token-details.stories.js b/ui/components/app/detected-token/detected-token-details/detected-token-details.stories.js
@@ -7,7 +7,7 @@ export default {
 
   argTypes: {
     token: { control: 'object' },
-    handleTokenSelection: { control: 'func' },
+    handleTokenSelection: { action: 'handleTokenSelection' },
     tokensListDetected: { control: 'array' },
   },
   args: {

diff --git a/ui/components/app/detected-token/detected-token-values/detected-token-values.js b/ui/components/app/detected-token/detected-token-values/detected-token-values.js
@@ -2,18 +2,17 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
-import Box from '../../../ui/box';
 import CheckBox from '../../../ui/check-box';
 
 import {
-  DISPLAY,
+  Display,
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { useTokenTracker } from '../../../../hooks/useTokenTracker';
 import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount';
 import { getUseCurrencyRateCheck } from '../../../../selectors';
-import { Text } from '../../../component-library';
+import { Text, Box } from '../../../component-library';
 
 const DetectedTokenValues = ({
   token,
@@ -44,7 +43,7 @@ const DetectedTokenValues = ({
   };
 
   return (
-    <Box display={DISPLAY.INLINE_FLEX} className="detected-token-values">
+    <Box display={Display.InlineFlex} className="detected-token-values">
       <Box marginBottom={1}>
         <Text variant={TextVariant.bodyLgMedium} as="h4">
           {`${balanceString || '0'} ${token.symbol}`}