diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
index 00e2ef8a5c6a..962b630562d1 100644
--- a/ui/components/app/metamask-template-renderer/safe-component-list.js
+++ b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -1,84 +1,111 @@
-import Button from '../../ui/button';
-import Chip from '../../ui/chip';
-import DefinitionList from '../../ui/definition-list';
-import TruncatedDefinitionList from '../../ui/truncated-definition-list';
-import Popover from '../../ui/popover';
-import Typography from '../../ui/typography';
-import Box from '../../ui/box';
-import MetaMaskTranslation from '../metamask-translation';
-import NetworkDisplay from '../network-display';
-import TextArea from '../../ui/textarea/textarea';
-import TextField from '../../ui/text-field';
 import ConfirmationNetworkSwitch from '../../../pages/confirmations/confirmation/components/confirmation-network-switch';
-import UrlIcon from '../../ui/url-icon';
-import Tooltip from '../../ui/tooltip/tooltip';
+import { SmartTransactionStatusPage } from '../../../pages/smart-transactions/smart-transaction-status-page';
 import {
   AvatarIcon,
+  BannerAlert,
   FormTextField,
   Text,
-  BannerAlert,
 } from '../../component-library';
+import { AccountListItem } from '../../multichain';
 import ActionableMessage from '../../ui/actionable-message/actionable-message';
+import Box from '../../ui/box';
+import Button from '../../ui/button';
+import Chip from '../../ui/chip';
+import DefinitionList from '../../ui/definition-list';
+import Preloader from '../../ui/icon/preloader';
 import OriginPill from '../../ui/origin-pill/origin-pill';
-import { AccountListItem } from '../../multichain';
+import Popover from '../../ui/popover';
+import Spinner from '../../ui/spinner';
+import TextField from '../../ui/text-field';
+import TextArea from '../../ui/textarea/textarea';
+import Tooltip from '../../ui/tooltip/tooltip';
+import TruncatedDefinitionList from '../../ui/truncated-definition-list';
+import Typography from '../../ui/typography';
+import UrlIcon from '../../ui/url-icon';
 import {
   ConfirmInfoRow,
   ConfirmInfoRowAddress,
   ConfirmInfoRowValueDouble,
 } from '../confirm/info/row';
-import { SnapDelineator } from '../snaps/snap-delineator';
+import MetaMaskTranslation from '../metamask-translation';
+import NetworkDisplay from '../network-display';
 import { Copyable } from '../snaps/copyable';
-import Spinner from '../../ui/spinner';
-import Preloader from '../../ui/icon/preloader';
-import { SnapUIMarkdown } from '../snaps/snap-ui-markdown';
-import { SnapUILink } from '../snaps/snap-ui-link';
-import { SmartTransactionStatusPage } from '../../../pages/smart-transactions/smart-transaction-status-page';
+import { SnapDelineator } from '../snaps/snap-delineator';
+import { SnapUIAddress } from '../snaps/snap-ui-address';
+import { SnapUIAvatar } from '../snaps/snap-ui-avatar';
+import { SnapUIButton } from '../snaps/snap-ui-button';
+import { SnapUICard } from '../snaps/snap-ui-card';
+import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
+import { SnapUIDropdown } from '../snaps/snap-ui-dropdown';
+import { SnapUIFileInput } from '../snaps/snap-ui-file-input';
+import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
+import { SnapUIForm } from '../snaps/snap-ui-form';
 import { SnapUIIcon } from '../snaps/snap-ui-icon';
 import { SnapUIImage } from '../snaps/snap-ui-image';
-import { SnapUIFileInput } from '../snaps/snap-ui-file-input';
 import { SnapUIInput } from '../snaps/snap-ui-input';
-import { SnapUIForm } from '../snaps/snap-ui-form';
-import { SnapUIButton } from '../snaps/snap-ui-button';
-import { SnapUIDropdown } from '../snaps/snap-ui-dropdown';
+import { SnapUILink } from '../snaps/snap-ui-link';
+import { SnapUIMarkdown } from '../snaps/snap-ui-markdown';
 import { SnapUIRadioGroup } from '../snaps/snap-ui-radio-group';
-import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
-import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
-import { SnapUICard } from '../snaps/snap-ui-card';
-import { SnapUIAddress } from '../snaps/snap-ui-address';
-import { SnapUIAvatar } from '../snaps/snap-ui-avatar';
 import { SnapUISelector } from '../snaps/snap-ui-selector';
-import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
+import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
-import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
 import { SnapAccountErrorMessage } from '../../../pages/confirmations/components/snap-account-error-message';
+import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
 import { CreateSnapAccount } from '../../../pages/create-snap-account';
-import { CreateNamedSnapAccount } from '../../multichain/create-named-snap-account';
 import {
   RemoveSnapAccount,
   SnapAccountCard,
 } from '../../../pages/remove-snap-account';
 import { SnapAccountRedirect } from '../../../pages/snap-account-redirect';
+import { CreateNamedSnapAccount } from '../../multichain/create-named-snap-account';
 import SnapAuthorshipHeader from '../snaps/snap-authorship-header';
 ///: END:ONLY_INCLUDE_IF
 
 export const safeComponentList = {
   a: 'a',
-  ActionableMessage,
   AccountListItem,
+  ActionableMessage,
   AvatarIcon,
   b: 'b',
+  BannerAlert,
   Box,
   Button,
   Chip,
   ConfirmationNetworkSwitch,
+  ConfirmInfoRow,
+  ConfirmInfoRowAddress,
+  ConfirmInfoRowValueDouble,
+  Copyable,
   DefinitionList,
   div: 'div',
+  FormTextField,
   i: 'i',
   MetaMaskTranslation,
   NetworkDisplay,
+  OriginPill,
   p: 'p',
   Popover,
+  Preloader,
+  SnapDelineator,
+  SnapUIAddress,
+  SnapUIAvatar,
+  SnapUIButton,
+  SnapUICard,
+  SnapUICheckbox,
+  SnapUIDropdown,
+  SnapUIFileInput,
+  SnapUIForm,
+  SnapUIFooterButton,
+  SnapUIIcon,
+  SnapUIImage,
+  SnapUIInput,
+  SnapUILink,
+  SnapUIMarkdown,
+  SnapUIRadioGroup,
+  SnapUISelector,
+  SnapUITooltip,
   span: 'span',
+  Spinner,
   Text,
   TextArea,
   TextField,
@@ -87,41 +114,14 @@ export const safeComponentList = {
   Typography,
   SmartTransactionStatusPage,
   UrlIcon,
-  OriginPill,
-  Copyable,
-  SnapDelineator,
-  SnapUIMarkdown,
-  SnapUILink,
-  SnapUIIcon,
-  SnapUIImage,
-  BannerAlert,
-  Spinner,
-  Preloader,
-  ConfirmInfoRow,
-  ConfirmInfoRowAddress,
-  ConfirmInfoRowValueDouble,
-  SnapUIFileInput,
-  SnapUIInput,
-  SnapUIButton,
-  SnapUIForm,
-  SnapUIDropdown,
-  SnapUIRadioGroup,
-  SnapUICheckbox,
-  SnapUITooltip,
-  SnapUICard,
-  SnapUISelector,
-  SnapUIAddress,
-  SnapUIAvatar,
-  SnapUIFooterButton,
-  FormTextField,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+  CreateNamedSnapAccount,
   CreateSnapAccount,
   RemoveSnapAccount,
-  CreateNamedSnapAccount,
-  SnapAccountSuccessMessage,
+  SnapAccountCard,
   SnapAccountErrorMessage,
-  SnapAuthorshipHeader,
   SnapAccountRedirect,
-  SnapAccountCard,
+  SnapAccountSuccessMessage,
+  SnapAuthorshipHeader,
   ///: END:ONLY_INCLUDE_IF
 };
diff --git a/ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap b/ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap
deleted file mode 100644
index c25eda6c3b4c..000000000000
--- a/ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<OriginPill /> renders 1`] = `
-<div>
-  <div
-    class="mm-box mm-box--margin-top-6 mm-box--margin-right-4 mm-box--margin-left-4 mm-box--padding-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--rounded-pill mm-box--border-style-solid mm-box--border-color-border-muted mm-box--border-width-1"
-    data-testid="test-data-test-id"
-  >
-    <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
-      data-testid="test-data-test-id-avatar-favicon"
-    >
-      <span
-        class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
-        style="mask-image: url('./images/icons/global.svg');"
-      />
-    </div>
-    <h6
-      class="mm-box mm-text mm-text--body-sm mm-box--margin-left-1 mm-box--color-text-alternative"
-      data-testid="test-data-test-id-text"
-    >
-      Test Origin
-    </h6>
-  </div>
-</div>
-`;
diff --git a/ui/components/ui/origin-pill/origin-pill.test.js b/ui/components/ui/origin-pill/origin-pill.test.js
deleted file mode 100644
index 44a1ae60ec0a..000000000000
--- a/ui/components/ui/origin-pill/origin-pill.test.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import mockState from '../../../../test/data/mock-state.json';
-import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import OriginPill from './origin-pill';
-
-describe('<OriginPill />', () => {
-  it('renders', () => {
-    const defaultProps = {
-      origin: 'Test Origin',
-      dataTestId: 'test-data-test-id',
-    };
-
-    const store = configureMockStore()(mockState);
-    const { container } = renderWithProvider(
-      <OriginPill {...defaultProps} />,
-      store,
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/ui/components/ui/origin-pill/origin-pill.test.tsx b/ui/components/ui/origin-pill/origin-pill.test.tsx
new file mode 100644
index 000000000000..13034a6a83e1
--- /dev/null
+++ b/ui/components/ui/origin-pill/origin-pill.test.tsx
@@ -0,0 +1,27 @@
+import { screen } from '@testing-library/dom';
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import OriginPill from './origin-pill';
+
+describe('<OriginPill />', () => {
+  it('renders correct elements', () => {
+    const defaultProps = {
+      origin: 'Test Origin',
+      dataTestId: 'test-data-test-id',
+    };
+    const store = configureMockStore()(mockState);
+
+    renderWithProvider(<OriginPill {...defaultProps} />, store);
+
+    expect(screen.getByTestId(defaultProps.dataTestId)).toBeDefined();
+    expect(
+      screen.getByTestId(`${defaultProps.dataTestId}-avatar-favicon`),
+    ).toBeDefined();
+    expect(screen.getByTestId(`${defaultProps.dataTestId}-text`)).toBeDefined();
+    expect(
+      screen.getByTestId(`${defaultProps.dataTestId}-text`),
+    ).toHaveTextContent(defaultProps.origin);
+  });
+});
diff --git a/ui/components/ui/origin-pill/origin-pill.js b/ui/components/ui/origin-pill/origin-pill.tsx
similarity index 86%
rename from ui/components/ui/origin-pill/origin-pill.js
rename to ui/components/ui/origin-pill/origin-pill.tsx
index ec84f9330e1a..c5b5e973fdae 100644
--- a/ui/components/ui/origin-pill/origin-pill.js
+++ b/ui/components/ui/origin-pill/origin-pill.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import {
   AlignItems,
+  BorderColor,
   BorderRadius,
   BorderStyle,
-  Color,
   Display,
   JustifyContent,
   TextColor,
@@ -14,7 +14,12 @@ import {
 import { getSubjectMetadata } from '../../../selectors';
 import { AvatarFavicon, Box, Text } from '../../component-library';
 
-export default function OriginPill({ origin, dataTestId }) {
+type OriginPillProps = {
+  origin: string;
+  dataTestId: string;
+};
+
+export default function OriginPill({ origin, dataTestId }: OriginPillProps) {
   const subjectMetadata = useSelector(getSubjectMetadata);
 
   const { iconUrl: siteImage = '' } = subjectMetadata[origin] || {};
@@ -28,7 +33,7 @@ export default function OriginPill({ origin, dataTestId }) {
       marginRight={4}
       marginLeft={4}
       padding={2}
-      borderColor={Color.borderMuted}
+      borderColor={BorderColor.borderMuted}
       borderStyle={BorderStyle.solid}
       borderRadius={BorderRadius.pill}
       borderWidth={1}