Part of #17670 for: accreditation.component.js (#20057)

* Part of #17670 for: accreditation.component.js

* Update checkbox.test.tsx.snap

* Update ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update accreditation.component.js

* Update ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Updating component to use component library components and removing unused CSS

---------

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/app/transaction-decoding/components/ui/accreditation/accrediation.component.stories.js

@@ -11,6 +11,7 @@ export default {
     address: { control: 'string' },
   },
   args: {
+    fetchVia: 'fetchVia',
     address: '0x6b175474e89094c44da98b954eedeac495271d0f',
   },
 };

ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js

@@ -8,11 +8,22 @@ import {
 } from '../../../../../../selectors';
 import { I18nContext } from '../../../../../../contexts/i18n';
 
-import { TypographyVariant } from '../../../../../../helpers/constants/design-system';
+import {
-
+  BUTTON_VARIANT,
-import Button from '../../../../../ui/button';
+  Button,
-import Typography from '../../../../../ui/typography';
+  Icon,
-import { Icon, IconName } from '../../../../../component-library';
+  IconName,
+  Text,
+  Box,
+  BUTTON_SIZES,
+} from '../../../../../component-library';
+import {
+  AlignItems,
+  Display,
+  TextVariant,
+  FlexDirection,
+  FlexWrap,
+} from '../../../../../../helpers/constants/design-system';
 
 const Accreditation = ({ fetchVia, address }) => {
   const t = useContext(I18nContext);
@@ -20,48 +31,37 @@ const Accreditation = ({ fetchVia, address }) => {
   const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
   const addressLink = getAccountLink(address, chainId, rpcPrefs);
 
-  const AccreditationLink = () => {
+  return (
-    return (
+    <Box
-      <>
+      className="accreditation"
-        <Typography
+      marginTop={2}
-          variant={TypographyVariant.H7}
+      alignItems={AlignItems.center}
-          className="accreditation__prefix"
+      display={Display.Flex}
-          boxProps={{ margin: 0 }}
+    >
-        >
+      <Icon name={IconName.Info} marginRight={2} />
+      <Box
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        flexWrap={FlexWrap.Wrap}
+      >
+        <Text variant={TextVariant.bodySm}>
           {t('transactionDecodingAccreditationVerified', [
             <Button
-              type="link"
+              variant={BUTTON_VARIANT.LINK}
-              className="accreditation__link"
+              href={addressLink}
-              onClick={() => {
+              externalLink
-                global.platform.openTab({
-                  url: addressLink,
-                });
-              }}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={t('etherscanView')}
               key="accreditation-link-button"
+              size={BUTTON_SIZES.INHERIT}
             >
               {fetchVia}
             </Button>,
           ])}
-        </Typography>
+        </Text>
-        <Typography variant={TypographyVariant.H7} boxProps={{ margin: 0 }}>
+        <Text variant={TextVariant.bodySm}>
           {t('transactionDecodingAccreditationDecoded')}
-        </Typography>
+        </Text>
-      </>
+      </Box>
-    );
+    </Box>
-  };
-
-  return (
-    <div className="accreditation">
-      <div className="accreditation__icon">
-        <Icon name={IconName.Info} />
-      </div>
-      <div className="accreditation__info">
-        <AccreditationLink />
-      </div>
-    </div>
   );
 };
 

ui/components/app/transaction-decoding/components/ui/accreditation/index.scss

@@ -1,24 +0,0 @@
-.accreditation {
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-
-  &__icon {
-    margin-right: 8px;
-  }
-
-  &__info {
-    color: var(--color-text-default);
-    display: flex;
-    flex-flow: column;
-    flex-wrap: wrap;
-  }
-
-  &__link.btn-link {
-    @include H7;
-
-    display: inherit;
-    padding: 0 4px;
-  }
-}
-

ui/components/app/transaction-decoding/index.scss

@@ -1,6 +1,5 @@
 //styling for ui components
 @import './components/ui/copy-raw-data/index';
-@import './components/ui/accreditation/index';
 
 //styling for decoding components
 @import './components/decoding/address/index';