feat: use new SnapAuthorshipPill component to show snap origin in confirmation flow

ui/components/app/app-components.scss

@@ -34,6 +34,7 @@
 @import 'snaps/show-more/index';
 @import 'snaps/insight-warnings/index';
 @import 'snaps/snap-authorship-header/index';
+@import 'snaps/snap-authorship-pill/index';
 @import 'snaps/snap-footer-button/index';
 @import 'hold-to-reveal-button/index';
 @import 'home-notification/index';

ui/components/app/confirm/info/info.stories.tsx

@@ -17,7 +17,7 @@ const mockRowConfigs: ConfirmInfoRowConfig[] = [
     label: 'Origin',
     type: ConfirmInfoRowType.UrlType,
     rowProps: {
-      address: 'https://metamask.github.io',
+      url: 'https://metamask.github.io',
     },
   },
   {

ui/components/app/confirm/info/row/url.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   Box,
   Icon,
@@ -16,13 +16,38 @@ import {
   TextVariant,
   BackgroundColor,
 } from '../../../../../helpers/constants/design-system';
+import SnapAuthorshipPill from '../../../snaps/snap-authorship-pill';
+import { SnapMetadataModal } from '../../../snaps/snap-metadata-modal';
+import { isSnapId } from '../../../../../helpers/utils/snaps';
 
 export type ConfirmInfoRowUrlProps = {
   url: string;
 };
 
 export const ConfirmInfoRowUrl = ({ url }: ConfirmInfoRowUrlProps) => {
   let urlObject;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const handlePillClick = useCallback(
+    () => setIsModalOpen(true),
+    [setIsModalOpen],
+  );
+  const handleModalClose = useCallback(
+    () => setIsModalOpen(false),
+    [setIsModalOpen],
+  );
+
+  if (isSnapId(url)) {
+    return (
+      <>
+        <SnapAuthorshipPill snapId={url} onClick={handlePillClick} />
+        <SnapMetadataModal
+          snapId={url}
+          isOpen={isModalOpen}
+          onClose={handleModalClose}
+        />
+      </>
+    );
+  }
 
   try {
     urlObject = new URL(url);

ui/components/app/snaps/snap-authorship-pill/index.scss

@@ -0,0 +1,7 @@
+.snap-authorship-pill {
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-background-alternative);
+  }
+}

ui/components/app/snaps/snap-authorship-pill/index.ts

@@ -0,0 +1 @@
+export { default } from './snap-authorship-pill';

ui/components/app/snaps/snap-authorship-pill/snap-authorship-pill.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import SnapAuthorshipPill from './snap-authorship-pill'
+
+export default {
+  title: 'Components/App/Snaps/SnapAuthorshipPill',
+  component: SnapAuthorshipPill,
+  argTypes: {
+    snapId: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <SnapAuthorshipPill {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  snapId: 'npm:@metamask/test-snap-bip44',
+};

ui/components/app/snaps/snap-authorship-pill/snap-authorship-pill.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Box, IconSize, Text } from '../../../component-library';
+import { SnapIcon } from '../snap-icon';
+import { getSnapMetadata } from '../../../../selectors';
+import {
+  AlignItems,
+  BorderRadius,
+  Display,
+  FlexDirection,
+  TextColor,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
+
+type SnapAuthorshipPillProps = {
+  snapId: string;
+  onClick: () => void;
+};
+
+const SnapAuthorshipPill: React.FC<SnapAuthorshipPillProps> = ({
+  snapId,
+  onClick,
+}) => {
+  const { name: snapName } = useSelector((state) =>
+    // @ts-expect-error ts is picking up the wrong type for the selector
+    getSnapMetadata(state, snapId),
+  );
+
+  return (
+    <Box
+      className="snap-authorship-pill"
+      display={Display.Flex}
+      flexDirection={FlexDirection.Row}
+      alignItems={AlignItems.center}
+      borderRadius={BorderRadius.pill}
+      paddingTop={1}
+      paddingBottom={1}
+      paddingLeft={1}
+      paddingRight={2}
+      onClick={onClick}
+    >
+      <SnapIcon avatarSize={IconSize.Sm} snapId={snapId} />
+      <Text
+        color={TextColor.primaryDefault}
+        variant={TextVariant.bodyMdMedium}
+        ellipsis
+        paddingLeft={1}
+      >
+        {snapName}
+      </Text>
+    </Box>
+  );
+};
+
+export default SnapAuthorshipPill;