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/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,11 @@ export default function SnapsConnect({
   const snaps = getDedupedSnaps(request, currentPermissions);
 
   const SnapsConnectContent = () => {
-    const { hostname: trimmedOrigin } = useOriginMetadata(origin) || {};
+    let trimmedOrigin = (useOriginMetadata(origin) || {})?.hostname;
+
+    if (isSnapId(origin)) {
+      trimmedOrigin = targetSubjectMetadata.name;
+    }
 
     const snapId = snaps[0];
     const { name: snapName } = useSelector((state) =>

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

@@ -52,6 +52,7 @@ import SnapUpdateAlert from '../../../components/app/snaps/snap-update-alert';
 import { CONNECT_ROUTE } from '../../../helpers/constants/routes';
 import { ShowMore } from '../../../components/app/snaps/show-more';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+import { isSnapId } from '../../../helpers/utils/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}