Add updates to Snaps custom UI

MetaMask · Aug 26, 2024 · 0fa8196 · 0fa8196
1 parent 23aabcd
commit 0fa8196
Show file tree

Hide file tree

Showing 19 changed files with 47 additions and 150 deletions.
diff --git a/ui/components/app/connected-sites-list/connected-snaps.js b/ui/components/app/connected-sites-list/connected-snaps.js
@@ -5,7 +5,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Box, IconName, IconSize, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MenuItem } from '../../ui/menu';
-import SnapAvatar from '../snaps/snap-avatar';
 import {
   AlignItems,
   BlockSize,
@@ -18,6 +17,7 @@ import ConnectedAccountsListOptions from '../connected-accounts-list/connected-a
 import { getOriginOfCurrentTab } from '../../../selectors';
 import { disconnectOriginFromSnap } from '../../../store/actions';
 import { getSnapRoute } from '../../../helpers/utils/util';
+import { SnapIcon } from '../snaps/snap-icon';
 
 export default function ConnectedSnaps({ connectedSubjects }) {
   const [showOptions, setShowOptions] = useState();
@@ -74,11 +74,7 @@ export default function ConnectedSnaps({ connectedSubjects }) {
             display={Display.Flex}
             alignItems={AlignItems.center}
           >
-            <SnapAvatar
-              snapId={subject.origin}
-              badgeSize={IconSize.Xs}
-              avatarSize={IconSize.Md}
-            />
+            <SnapIcon snapId={subject.origin} avatarSize={IconSize.Md} />
             <Text
               variant={TextVariant.bodyLgMedium}
               className="connected-accounts-list__account-name"

diff --git a/ui/components/app/snaps/copyable/copyable.js b/ui/components/app/snaps/copyable/copyable.js
@@ -9,6 +9,7 @@ import {
   Display,
   OverflowWrap,
   IconColor,
+  BorderColor,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import { Icon, IconName, Box, Text } from '../../../component-library';
@@ -60,6 +61,8 @@ export const Copyable = ({
           : BackgroundColor.backgroundAlternative
       }
       borderRadius={BorderRadius.LG}
+      borderColor={BorderColor.borderMuted}
+      borderWidth={1}
       padding={2}
       marginTop={marginTop}
       marginBottom={marginBottom}

diff --git a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { stripSnapPrefix } from '@metamask/snaps-utils';
 import { useSelector } from 'react-redux';
 import {
   BackgroundColor,
@@ -25,9 +24,9 @@ import {
   ButtonIconSize,
   ButtonIcon,
 } from '../../../component-library';
-import SnapAvatar from '../snap-avatar';
 import { SnapMetadataModal } from '../snap-metadata-modal';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { SnapIcon } from '../snap-icon';
 
 const SnapAuthorshipHeader = ({
   snapId,
@@ -40,11 +39,6 @@ const SnapAuthorshipHeader = ({
 }) => {
   const t = useI18nContext();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  // We're using optional chaining with snapId, because with the current implementation
-  // of snap update in the snap controller, we do not have reference to snapId when an
-  // update request is rejected because the reference comes from the request itself and not subject metadata
-  // like it is done with snap install
-  const packageName = snapId && stripSnapPrefix(snapId);
 
   const { name: snapName } = useSelector((state) =>
     getSnapMetadata(state, snapId),
@@ -57,13 +51,15 @@ const SnapAuthorshipHeader = ({
   return (
     <Box
       className={classnames('snaps-authorship-header', className)}
-      backgroundColor={BackgroundColor.backgroundAlternative}
+      backgroundColor={BackgroundColor.backgroundDefault}
       width={BlockSize.Full}
       alignItems={AlignItems.center}
       display={Display.Flex}
       padding={4}
       style={{
         boxShadow,
+        minHeight: '64px',
+        zIndex: 1,
       }}
     >
       {snapId && (
@@ -96,11 +92,7 @@ const SnapAuthorshipHeader = ({
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
         >
-          <SnapAvatar
-            snapId={snapId}
-            avatarSize={IconSize.Sm}
-            badgeSize={IconSize.Xs}
-          />
+          <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} />
           <Text
             color={TextColor.textDefault}
             variant={TextVariant.bodyMdMedium}
@@ -115,15 +107,7 @@ const SnapAuthorshipHeader = ({
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
           paddingTop={1}
-        >
-          <Text
-            ellipsis
-            variant={TextVariant.bodySm}
-            color={TextColor.textAlternative}
-          >
-            {packageName}
-          </Text>
-        </Box>
+        ></Box>
       </Box>
       {showInfo && (
         <Box marginLeft="auto">

diff --git a/ui/components/app/snaps/snap-avatar/index.js b/ui/components/app/snaps/snap-avatar/index.js
diff --git a/ui/components/app/snaps/snap-avatar/snap-avatar.js b/ui/components/app/snaps/snap-avatar/snap-avatar.js
diff --git a/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js b/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js
diff --git a/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js b/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
@@ -17,8 +17,8 @@ import {
 } from '../../../component-library';
 import Tooltip from '../../../ui/tooltip/tooltip';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import SnapAvatar from '../snap-avatar/snap-avatar';
 import { getSnapMetadata } from '../../../../selectors';
+import { SnapIcon } from '../snap-icon';
 
 export default function SnapConnectCell({ origin, snapId }) {
   const t = useI18nContext();
@@ -33,7 +33,7 @@ export default function SnapConnectCell({ origin, snapId }) {
       paddingTop={2}
       paddingBottom={2}
     >
-      <SnapAvatar snapId={snapId} />
+      <SnapIcon snapId={snapId} />
       <Box width="full" paddingLeft={4} paddingRight={4}>
         <Text>
           {t('connectSnap', [

diff --git a/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js b/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
@@ -18,7 +18,7 @@ import {
 
 import { Box, Text } from '../../../component-library';
 import { getSnapMetadata } from '../../../../selectors';
-import SnapAvatar from '../snap-avatar';
+import { SnapIcon } from '../snap-icon';
 
 const SnapLegacyAuthorshipHeader = ({
   snapId,
@@ -45,7 +45,7 @@ const SnapLegacyAuthorshipHeader = ({
       marginRight={marginRight}
     >
       <Box>
-        <SnapAvatar snapId={snapId} />
+        <SnapIcon snapId={snapId} />
       </Box>
       <Box
         marginLeft={4}

diff --git a/ui/components/app/snaps/snap-list-item/snap-list-item.js b/ui/components/app/snaps/snap-list-item/snap-list-item.js
@@ -17,7 +17,7 @@ import {
   IconSize,
   Icon,
 } from '../../../component-library';
-import SnapAvatar from '../snap-avatar';
+import { SnapIcon } from '../snap-icon';
 
 const SnapListItem = ({
   name,
@@ -45,7 +45,7 @@ const SnapListItem = ({
         width={BlockSize.Full}
       >
         <Box>
-          <SnapAvatar snapId={snapId} />
+          <SnapIcon snapId={snapId} />
         </Box>
         <Box
           paddingLeft={4}

diff --git a/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js b/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
@@ -32,14 +32,14 @@ import {
   TextAlign,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
-import SnapAvatar from '../snap-avatar';
 import { formatDate } from '../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
 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 { SnapIcon } from '../snap-icon';
 
 export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
   const t = useI18nContext();
@@ -99,7 +99,7 @@ export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
           }}
         >
           <Box>
-            <SnapAvatar snapId={snapId} />
+            <SnapIcon snapId={snapId} />
           </Box>
           <Text variant={TextVariant.bodyMdMedium} textAlign={TextAlign.Center}>
             {snapName}

diff --git a/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx b/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
@@ -55,6 +55,9 @@ export const SnapUIDropdown: FunctionComponent<SnapUIDropdownProps> = ({
         data-testid="snaps-dropdown"
         selectedOption={value}
         onChange={handleChange}
+        style={{
+          border: '1px solid var(--color-border-muted)',
+        }}
         {...props}
       />
       {error && (

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -20,7 +20,7 @@ export const DEFAULT_FOOTER = {
     className: 'snap-ui-renderer__footer',
     backgroundColor: BackgroundColor.backgroundDefault,
     style: {
-      boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+      boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
     },
   },
 };

diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -22,6 +22,10 @@
     height: 1px;
   }
 
+  &__input > .mm-text-field {
+    border-color: var(--color-border-muted);
+  }
+
   &__panel {
     gap: 8px;
   }

diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
@@ -14,6 +14,7 @@ import { SnapInterfaceContextProvider } from '../../../../contexts/snaps';
 import PulseLoader from '../../../ui/pulse-loader';
 import {
   AlignItems,
+  BackgroundColor,
   BlockSize,
   Display,
   JustifyContent,

diff --git a/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx b/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
@@ -18,7 +18,7 @@ import type { NotificationListItemTextProps } from '../notification-list-item-te
 import { NotificationListItemText } from '../notification-list-item-text';
 import { formatMenuItemDate } from '../../../helpers/utils/notification.util';
 import { SnapUIMarkdown } from '../../app/snaps/snap-ui-markdown';
-import SnapAvatar from '../../app/snaps/snap-avatar';
+import { SnapIcon } from '../../app/snaps/snap-icon';
 
 export type NotificationListItemSnapProps = {
   id: string;
@@ -104,9 +104,8 @@ export const NotificationListItemSnap = ({
         )}
 
         <Box height={BlockSize.Full} className="notification-list-item__icon">
-          <SnapAvatar
+          <SnapIcon
             snapId="npm:@metamask/notification-example-snap"
-            badgeBackgroundColor={BackgroundColor.backgroundDefault}
             avatarSize={IconSize.Md}
           />
         </Box>

diff --git a/ui/components/multichain/pages/permissions-page/connection-list-item.js b/ui/components/multichain/pages/permissions-page/connection-list-item.js
@@ -26,8 +26,8 @@ import {
   Text,
 } from '../../../component-library';
 import { getURLHost } from '../../../../helpers/utils/util';
-import SnapAvatar from '../../../app/snaps/snap-avatar/snap-avatar';
 import { getAvatarNetworkColor } from '../../../../helpers/utils/accounts';
+import { SnapIcon } from '../../../app/snaps/snap-icon';
 import { ConnectionListTooltip } from './connection-list-tooltip/connection-list-tooltip';
 
 export const ConnectionListItem = ({ connection, onClick }) => {
@@ -54,12 +54,10 @@ export const ConnectionListItem = ({ connection, onClick }) => {
         style={{ alignSelf: 'center' }}
       >
         {isSnap ? (
-          <SnapAvatar
+          <SnapIcon
             className="connection-list-item__snap-avatar"
             snapId={connection.id}
-            badgeSize={IconSize.Xs}
             avatarSize={IconSize.Md}
-            borderWidth={0}
           />
         ) : (
           <BadgeWrapper