feat: use new SnapAuthorshipPill component to show snap origin in c…

…onfirmation flow (#26881)

## **Description**


Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change? Previously, the confirmation page
would just show the snap id for "request from" as part of the
confirmation screen.
2. What is the improvement/solution? A pill is now used to show the snap
icon and name, the pill opens up to a metadata modal.

Fixes: MetaMask/MetaMask-planning#3085

## **Manual testing steps**

1. Build the extension
2. Install a snap that uses `personal_sign`
3. Call `personal_sign` from the snap

## **Screenshots/Recordings**




https://github.com/user-attachments/assets/894ebaf8-9b58-4073-913e-bce64db2ad2a




## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

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;