fix: Show correct origins when snaps use wallet_requestSnaps

test/data/mock-state.json

@@ -1978,6 +1978,24 @@
             "parentCapability": "snap_getBip44Entropy"
           }
         }
+      },
+      "https://snaps.metamask.io": {
+        "origin": "https://snaps.metamask.io",
+        "permissions": {
+          "wallet_snap": {
+            "caveats": [
+              {
+                "type": "snapIds",
+                "value": {
+                  "npm:@metamask/test-snap-bip44": {}
+                }
+              }
+            ],
+            "date": 1718117256761,
+            "id": "sBxmdvnow7QiN9aS4uSdn",
+            "invoker": "https://snaps.metamask.io"
+          }
+        }
       }
     }
   },

ui/components/app/connected-sites-list/connected-sites-list.component.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../ui/button';
-import { AvatarFavicon } from '../../component-library';
+import { AvatarFavicon, IconSize } from '../../component-library';
 import { stripHttpsSchemeWithoutPort } from '../../../helpers/utils/util';
 import SiteOrigin from '../../ui/site-origin';
 import { Size } from '../../../helpers/constants/design-system';
+import { isSnapId } from '../../../helpers/utils/snaps';
+import { SnapIcon } from '../snaps/snap-icon';
 
 export default class ConnectedSitesList extends Component {
   static contextTypes = {
@@ -20,30 +22,26 @@ export default class ConnectedSitesList extends Component {
       }),
     ).isRequired,
     onDisconnect: PropTypes.func.isRequired,
+    getSnapName: PropTypes.func.isRequired,
   };
 
-  render() {
-    const { connectedSubjects, onDisconnect } = this.props;
+  getConnectedSitesListContent = () => {
+    const { connectedSubjects, onDisconnect, getSnapName } = this.props;
     const { t } = this.context;
-
-    return (
-      <main className="connected-sites-list__content-rows">
-        {connectedSubjects.map((subject) => (
+    return connectedSubjects.map((subject) => {
+      if (isSnapId(subject.origin)) {
+        const snapName = getSnapName(subject.origin);
+        return (
           <div
             key={subject.origin}
             className="connected-sites-list__content-row"
           >
             <div className="connected-sites-list__subject-info">
-              <AvatarFavicon
-                className="connected-sites-list__subject-icon"
-                name={subject.name}
-                size={Size.MD}
-                src={subject.iconUrl}
-              />
+              <SnapIcon avatarSize={IconSize.Md} snapId={subject.origin} />
               <SiteOrigin
                 className="connected-sites-list__subject-name"
-                title={subject.extensionId || subject.origin}
-                siteOrigin={this.getSubjectDisplayName(subject)}
+                title={snapName}
+                siteOrigin={snapName}
               />
             </div>
             <Button
@@ -54,7 +52,39 @@ export default class ConnectedSitesList extends Component {
               {t('disconnect')}
             </Button>
           </div>
-        ))}
+        );
+      }
+      return (
+        <div key={subject.origin} className="connected-sites-list__content-row">
+          <div className="connected-sites-list__subject-info">
+            <AvatarFavicon
+              className="connected-sites-list__subject-icon"
+              name={subject.name}
+              size={Size.MD}
+              src={subject.iconUrl}
+            />
+            <SiteOrigin
+              className="connected-sites-list__subject-name"
+              title={subject.extensionId || subject.origin}
+              siteOrigin={this.getSubjectDisplayName(subject)}
+            />
+          </div>
+          <Button
+            className="connected-sites-list__content-row-link-button"
+            onClick={() => onDisconnect(subject.origin)}
+            type="link"
+          >
+            {t('disconnect')}
+          </Button>
+        </div>
+      );
+    });
+  };
+
+  render() {
+    return (
+      <main className="connected-sites-list__content-rows">
+        {this.getConnectedSitesListContent()}
       </main>
     );
   }

ui/components/app/connected-sites-list/connected-sites-list.container.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { getSnapMetadata } from '../../../selectors';
+import ConnectedSitesList from './connected-sites-list.component';
+
+function mapStateToProps(state) {
+  return { getSnapName: (id) => getSnapMetadata(state, id).name };
+}
+
+export default connect(mapStateToProps, null)(ConnectedSitesList);

ui/components/app/connected-sites-list/connected-sites-list.js

@@ -0,0 +1 @@
+export { default } from './connected-sites-list.container';

ui/components/app/connected-sites-list/index.js

@@ -1 +1 @@
-export { default } from './connected-sites-list.component';
+export { default } from './connected-sites-list';

ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js

@@ -40,6 +40,7 @@ import { ShowMore } from '../show-more';
 import SnapExternalPill from '../snap-version/snap-external-pill';
 import { useSafeWebsite } from '../../../../hooks/snaps/useSafeWebsite';
 import Tooltip from '../../../ui/tooltip';
+import { isSnapId } from '../../../../helpers/utils/snaps';
 
 export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
   const t = useI18nContext();
@@ -60,6 +61,7 @@ export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
     : undefined;
 
   const installOrigin = useOriginMetadata(installInfo?.origin);
+  const isSnapRequesting = isSnapId(installInfo?.origin);
 
   const snapPrefix = getSnapPrefix(snapId);
   const packageName = stripSnapPrefix(snapId);
@@ -161,7 +163,11 @@ export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
                   </Tooltip>
                 )}
               </Box>
-              <Text ellipsis>{installOrigin.host}</Text>
+              <Text ellipsis>
+                {isSnapRequesting
+                  ? stripSnapPrefix(installInfo.origin)
+                  : installOrigin.host}
+              </Text>
             </Box>
           )}
           <Box

ui/helpers/utils/snaps.js

@@ -0,0 +1,14 @@
+/**
+ * Check if the given value is a valid snap ID.
+ *
+ * NOTE: This function is a duplicate oF a yet to be released version in @metamask/snaps-utils.
+ *
+ * @param value - The value to check.
+ * @returns `true` if the value is a valid snap ID, and `false` otherwise.
+ */
+export function isSnapId(value) {
+  return (
+    (typeof value === 'string' || value instanceof String) &&
+    (value.startsWith('local:') || value.startsWith('npm:'))
+  );
+}

ui/pages/permissions-connect/snaps/snap-install/snap-install.js

@@ -34,6 +34,7 @@ import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
 import { getSnapMetadata, getSnapsMetadata } from '../../../../selectors';
 import { getSnapName } from '../../../../helpers/utils/util';
 import PermissionConnectHeader from '../../../../components/app/permission-connect-header';
+import { isSnapId } from '../../../../helpers/utils/snaps';
 
 export default function SnapInstall({
   request,
@@ -69,6 +70,9 @@ export default function SnapInstall({
   const hasError = !requestState.loading && requestState.error;
   const isLoading = requestState.loading;
 
+  // we already have access to the requesting snap's metadata
+  const isOriginSnap = isSnapId(request?.metadata?.dappOrigin);
+
   const warnings = getSnapInstallWarnings(
     requestState?.permissions ?? {},
     t,
@@ -111,11 +115,15 @@ export default function SnapInstall({
       flexDirection={FlexDirection.Column}
       backgroundColor={BackgroundColor.backgroundAlternative}
     >
-      {isLoading || hasError ? (
+      {(isLoading || hasError) && !isOriginSnap ? (
         <PermissionConnectHeader origin={origin} iconUrl={iconUrl} />
       ) : (
         <SnapAuthorshipHeader
-          snapId={targetSubjectMetadata.origin}
+          snapId={
+            isLoading && isOriginSnap
+              ? request?.metadata?.dappOrigin
+              : targetSubjectMetadata.origin
+          }
           onCancel={onCancel}
         />
       )}

ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js

@@ -23,6 +23,7 @@ import SnapPrivacyWarning from '../../../../components/app/snaps/snap-privacy-wa
 import { getPermissions, getSnapMetadata } from '../../../../selectors';
 import SnapAvatar from '../../../../components/app/snaps/snap-avatar/snap-avatar';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
+import { isSnapId } from '../../../../helpers/utils/snaps';
 
 export default function SnapsConnect({
   request,
@@ -57,7 +58,15 @@ export default function SnapsConnect({
   const snaps = getDedupedSnaps(request, currentPermissions);
 
   const SnapsConnectContent = () => {
-    const { hostname: trimmedOrigin } = useOriginMetadata(origin) || {};
+    let trimmedOrigin = (useOriginMetadata(origin) || {})?.hostname;
+    const { name } = useSelector((state) =>
+      // hack around the selector throwing
+      getSnapMetadata(state, isSnapId(origin) ? origin : `npm:${origin}`),
+    );
+
+    if (isSnapId(origin)) {
+      trimmedOrigin = name;
+    }
 
     const snapId = snaps[0];
     const { name: snapName } = useSelector((state) =>

ui/pages/snaps/snap-view/snap-settings.js

@@ -51,6 +51,7 @@ import { DelineatorType } from '../../../helpers/constants/snaps';
 import SnapUpdateAlert from '../../../components/app/snaps/snap-update-alert';
 import { CONNECT_ROUTE } from '../../../helpers/constants/routes';
 import { ShowMore } from '../../../components/app/snaps/show-more';
+import { isSnapId } from '../../../helpers/utils/snaps';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { KeyringSnapRemovalResultStatus } from './constants';
 ///: END:ONLY_INCLUDE_IF
@@ -129,6 +130,15 @@ function SnapSettings({ snapId, initRemove, resetInitRemove }) {
     }
   };
 
+  const connectedTitle = () => {
+    if (connectedSubjects.every((subject) => isSnapId(subject.origin))) {
+      return t('connectedSnaps');
+    } else if (connectedSubjects.some((subject) => isSnapId(subject.origin))) {
+      return t('connectedSitesAndSnaps');
+    }
+    return t('connectedSites');
+  };
+
   useEffect(() => {
     if (initRemove) {
       setIsShowingRemoveWarning(true);
@@ -167,7 +177,7 @@ function SnapSettings({ snapId, initRemove, resetInitRemove }) {
       </Box>
       <Box className="snap-view__content__connected-sites" marginTop={12}>
         <Text variant={TextVariant.bodyLgMedium} marginBottom={2}>
-          {t('connectedSites')}
+          {connectedTitle()}
         </Text>
         <ConnectedSitesList
           connectedSubjects={connectedSubjects}