feat(snaps): Settings Page

shared/constants/snaps/permissions.ts

@@ -7,6 +7,7 @@ export const EndowmentPermissions = Object.freeze({
   'endowment:webassembly': 'endowment:webassembly',
   'endowment:lifecycle-hooks': 'endowment:lifecycle-hooks',
   'endowment:page-home': 'endowment:page-home',
+  'endowment:page-settings': 'endowment:page-settings',
   'endowment:signature-insight': 'endowment:signature-insight',
   'endowment:name-lookup': 'endowment:name-lookup',
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)

ui/components/app/snaps/snap-settings-page/index.ts

@@ -0,0 +1 @@
+export * from './snap-settings-renderer';

ui/components/app/snaps/snap-settings-page/snap-settings-renderer.tsx

@@ -0,0 +1,81 @@
+import React, { FunctionComponent, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+
+import { deleteInterface } from '../../../../store/actions';
+import { Box, Text } from '../../../component-library';
+import {
+  BackgroundColor,
+  BlockSize,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
+import { SnapDelineator } from '../snap-delineator';
+import { getSnapMetadata } from '../../../../selectors';
+import { DelineatorType } from '../../../../helpers/constants/snaps';
+import { Copyable } from '../copyable';
+import { SnapUIRenderer } from '../snap-ui-renderer';
+import { useSnapSettings } from '../../../../hooks/snaps/useSnapSettings';
+import { decodeSnapIdFromPathname } from '../../../../helpers/utils/snaps';
+
+type SnapSettingsRendererProps = {
+  snapId: string;
+};
+
+export const SnapSettingsRenderer: FunctionComponent<
+  SnapSettingsRendererProps
+> = () => {
+  const { pathname } = useLocation();
+  const dispatch = useDispatch();
+  const t = useI18nContext();
+
+  const snapId = useMemo(() => decodeSnapIdFromPathname(pathname), [pathname]);
+
+  const { name: snapName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
+  );
+
+  const { data, error, loading } = useSnapSettings({
+    snapId,
+  });
+
+  const interfaceId = !loading && !error ? data?.id : undefined;
+
+  useEffect(() => {
+    return () => {
+      interfaceId && dispatch(deleteInterface(interfaceId));
+    };
+  }, [interfaceId]);
+
+  if (!snapId) {
+    return null;
+  }
+
+  return (
+    <Box
+      height={BlockSize.Full}
+      width={BlockSize.Full}
+      backgroundColor={BackgroundColor.backgroundDefault}
+    >
+      {error && (
+        <Box height={BlockSize.Full} padding={4}>
+          <SnapDelineator snapName={snapName} type={DelineatorType.Error}>
+            <Text variant={TextVariant.bodySm} marginBottom={4}>
+              {t('snapsUIError', [<b key="0">{snapName}</b>])}
+            </Text>
+            <Copyable text={error.message} />
+          </SnapDelineator>
+        </Box>
+      )}
+      {(interfaceId || loading) && (
+        <SnapUIRenderer
+          snapId={snapId}
+          interfaceId={interfaceId}
+          isLoading={loading}
+          useDelineator={false}
+          contentBackgroundColor={BackgroundColor.backgroundDefault}
+        />
+      )}
+    </Box>
+  );
+};

ui/components/app/tab-bar/index.scss

@@ -38,11 +38,16 @@
       display: flex;
       align-items: center;
       position: relative;
+      overflow: hidden;
       width: 100%;
 
       &__title {
         @include design-system.H4;
 
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
         @include design-system.screen-sm-min {
           @include design-system.H6;
         }

ui/helpers/constants/routes.ts

@@ -62,6 +62,9 @@ PATH_NAME_MAP[CONTACT_ADD_ROUTE] = 'Add Contact Settings Page';
 export const CONTACT_VIEW_ROUTE = '/settings/contact-list/view-contact';
 PATH_NAME_MAP[`${CONTACT_VIEW_ROUTE}/:address`] = 'View Contact Settings Page';
 
+export const SNAP_SETTINGS_ROUTE = '/settings/snap';
+PATH_NAME_MAP[`${SNAP_SETTINGS_ROUTE}/:snapId`] = 'Snap Settings Page';
+
 export const REVEAL_SEED_ROUTE = '/seed';
 PATH_NAME_MAP[REVEAL_SEED_ROUTE] = 'Reveal Secret Recovery Phrase Page';
 

ui/helpers/utils/snaps.ts

@@ -0,0 +1,40 @@
+import { SnapId } from '@metamask/snaps-sdk';
+import { isProduction } from '../../../shared/modules/environment';
+
+/**
+ * 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: unknown): value is SnapId {
+  return (
+    (typeof value === 'string' || value instanceof String) &&
+    (value.startsWith('local:') || value.startsWith('npm:'))
+  );
+}
+
+/**
+ * Decode a snap ID fron a pathname.
+ *
+ * @param pathname - The pathname to decode the snap ID from.
+ * @returns The decoded snap ID, or `undefined` if the snap ID could not be decoded.
+ */
+export const decodeSnapIdFromPathname = (pathname: string) => {
+  const snapIdURI = pathname?.match(/[^/]+$/u)?.[0];
+  return snapIdURI && decodeURIComponent(snapIdURI);
+};
+
+const IGNORED_EXAMPLE_SNAPS = ['npm:@metamask/preinstalled-example-snap'];
+
+/**
+ * Check if the given snap ID is ignored in production.
+ *
+ * @param snapId - The snap ID to check.
+ * @returns `true` if the snap ID is ignored in production, and `false` otherwise.
+ */
+export const isSnapIgnoredInProd = (snapId: string) => {
+  return isProduction() ? IGNORED_EXAMPLE_SNAPS.includes(snapId) : false;
+};

ui/hooks/snaps/useSnapSettings.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  forceUpdateMetamaskState,
+  handleSnapRequest,
+} from '../../store/actions';
+
+export function useSnapSettings({ snapId }: { snapId?: string }) {
+  const dispatch = useDispatch();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [data, setData] = useState<{ id: string } | undefined>(undefined);
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function fetchPage() {
+      try {
+        setError(undefined);
+        setLoading(true);
+
+        const newData = snapId
+          ? ((await handleSnapRequest({
+              snapId,
+              origin: '',
+              handler: 'onSettingsPage',
+              request: {
+                jsonrpc: '2.0',
+                method: ' ',
+              },
+            })) as { id: string })
+          : undefined;
+        if (!cancelled) {
+          setData(newData);
+          forceUpdateMetamaskState(dispatch);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err as Error);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    fetchPage();
+    return () => {
+      cancelled = true;
+    };
+  }, [snapId]);
+
+  return { data, error, loading };
+}

ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx

@@ -145,7 +145,7 @@ describe('PersonalSignInfo', () => {
       getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE);
 
     (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(false);
-    (snapUtils.isSnapId as jest.Mock).mockReturnValue(true);
+    (snapUtils.isSnapId as unknown as jest.Mock).mockReturnValue(true);
 
     const mockStore = configureMockStore([])(state);
     const { queryByText, getByText } = renderWithConfirmContextProvider(
@@ -167,7 +167,7 @@ describe('PersonalSignInfo', () => {
     const state =
       getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE);
     (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(false);
-    (snapUtils.isSnapId as jest.Mock).mockReturnValue(true);
+    (snapUtils.isSnapId as unknown as jest.Mock).mockReturnValue(true);
 
     const mockStore = configureMockStore([])(state);
     const { getByText, queryByText } = renderWithConfirmContextProvider(

ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.test.tsx

@@ -65,7 +65,7 @@ describe('TypedSignInfo', () => {
       type: TransactionType.signTypedData,
       chainId: '0x5',
     });
-    (snapUtils.isSnapId as jest.Mock).mockReturnValue(true);
+    (snapUtils.isSnapId as unknown as jest.Mock).mockReturnValue(true);
     const mockStore = configureMockStore([])(mockState);
     const { queryByText } = renderWithConfirmContextProvider(
       <TypedSignInfoV1 />,
@@ -88,7 +88,7 @@ describe('TypedSignInfo', () => {
       type: TransactionType.signTypedData,
       chainId: '0x5',
     });
-    (snapUtils.isSnapId as jest.Mock).mockReturnValue(false);
+    (snapUtils.isSnapId as unknown as jest.Mock).mockReturnValue(false);
     const mockStore = configureMockStore([])(mockState);
     const { queryByText } = renderWithConfirmContextProvider(
       <TypedSignInfoV1 />,

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx

@@ -153,7 +153,7 @@ describe('TypedSignInfo', () => {
       type: TransactionType.signTypedData,
       chainId: '0x5',
     });
-    (snapUtils.isSnapId as jest.Mock).mockReturnValue(true);
+    (snapUtils.isSnapId as unknown as jest.Mock).mockReturnValue(true);
     const mockStore = configureMockStore([])(mockState);
     const { queryByText } = renderWithConfirmContextProvider(
       <TypedSignInfo />,
@@ -177,7 +177,7 @@ describe('TypedSignInfo', () => {
       type: TransactionType.signTypedData,
       chainId: '0x5',
     });
-    (snapUtils.isSnapId as jest.Mock).mockReturnValue(false);
+    (snapUtils.isSnapId as unknown as jest.Mock).mockReturnValue(false);
     const mockStore = configureMockStore([])(mockState);
     const { queryByText } = renderWithConfirmContextProvider(
       <TypedSignInfo />,

ui/pages/settings/index.scss

@@ -56,7 +56,7 @@
 
       &__title {
         @include design-system.screen-sm-min {
-          width: 197px;
+          margin-right: 16px;
         }
 
         @include design-system.screen-sm-max {
@@ -230,6 +230,7 @@
       display: flex;
       flex-direction: column;
       flex: 1 1 auto;
+      max-width: 100vw;
 
       @include design-system.screen-sm-min {
         flex: 0 0 40%;