From 54b2f70ab46d487c3e517f36a209ecb9083edc8c Mon Sep 17 00:00:00 2001
From: Monte Lai <monte.lai@consensys.net>
Date: Wed, 4 Oct 2023 20:40:23 +0800
Subject: [PATCH] fix: add missing update available and arrow icon (#21101)

Adds a missing `Update Available` and arrow icon in the Add Snap Account Page.
---
 ui/pages/keyring-snaps/index.scss             |  1 +
 .../new-snap-account-page.tsx                 |  6 +++++
 .../snap-account-detail-page/header.tsx       |  2 +-
 .../__snapshots__/snap-card.test.tsx.snap     |  4 +--
 .../keyring-snaps/snap-card/snap-card.scss    |  7 +++++
 .../snap-card/snap-card.test.tsx              |  9 +++++++
 .../keyring-snaps/snap-card/snap-card.tsx     | 27 +++++++++++++++++--
 7 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 ui/pages/keyring-snaps/snap-card/snap-card.scss

diff --git a/ui/pages/keyring-snaps/index.scss b/ui/pages/keyring-snaps/index.scss
index 8762f63fd28c..0094ced75fc7 100644
--- a/ui/pages/keyring-snaps/index.scss
+++ b/ui/pages/keyring-snaps/index.scss
@@ -1,2 +1,3 @@
 @import "./snap-account-detail-page/snap-account-detail-page";
 @import "./new-snap-account-page/new-snap-account-page";
+@import "./snap-card/snap-card";
diff --git a/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx b/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx
index 2ec9aea8c6e9..03aa44b3bcde 100644
--- a/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx
+++ b/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx
@@ -2,6 +2,7 @@ import { Snap } from '@metamask/snaps-utils';
 import React, { useState, useEffect } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+import semver from 'semver';
 import { Box, Text } from '../../../components/component-library';
 import {
   AlignItems,
@@ -116,11 +117,16 @@ export default function NewSnapAccountPage() {
 
             const isInstalled = Boolean(foundSnap);
 
+            const updateAvailable = Boolean(
+              foundSnap?.version && semver.gt(snap.version, foundSnap.version),
+            );
+
             return (
               <SnapCard
                 {...snap}
                 key={index}
                 isInstalled={isInstalled}
+                updateAvailable={updateAvailable}
                 onClickFunc={() => {
                   history.push(`/add-snap-account/${snap.id}`);
                 }}
diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx b/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
index 9a53cbd67762..8786b9c1260f 100644
--- a/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
+++ b/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
@@ -91,7 +91,7 @@ export const SnapDetailHeader = ({
           <Box>
             {isInstalled && updateAvailable && (
               <Button
-                variant={ButtonVariant.Primary}
+                variant={ButtonVariant.Secondary}
                 marginRight={1}
                 onClick={() => {
                   setShowConfigPopoverType(ConfigureSnapPopupType.INSTALL);
diff --git a/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap b/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
index 8e7bc0b25278..3aa2c0322db2 100644
--- a/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
+++ b/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
@@ -41,10 +41,10 @@ exports[`SnapCard should render 1`] = `
       Secure your account with MetaMask Mobile
     </h3>
     <div
-      class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+      class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center"
     >
       <span
-        class="mm-box mm-icon mm-icon--size-md mm-box--margin-left-auto mm-box--display-inline-block mm-box--color-icon-alternative"
+        class="mm-box mm-icon mm-icon--size-xs mm-box--margin-left-auto mm-box--display-inline-block mm-box--color-icon-alternative"
         data-testid="to-snap-detail"
         style="mask-image: url('./images/icons/arrow-2-right.svg');"
       />
diff --git a/ui/pages/keyring-snaps/snap-card/snap-card.scss b/ui/pages/keyring-snaps/snap-card/snap-card.scss
new file mode 100644
index 000000000000..ce911c4fdb76
--- /dev/null
+++ b/ui/pages/keyring-snaps/snap-card/snap-card.scss
@@ -0,0 +1,7 @@
+.configure-button {
+  &:hover {
+    & > * {
+      color: var(--color-primary-inverse);
+    }
+  }
+}
diff --git a/ui/pages/keyring-snaps/snap-card/snap-card.test.tsx b/ui/pages/keyring-snaps/snap-card/snap-card.test.tsx
index 9660d8cc0658..94b128d9e311 100644
--- a/ui/pages/keyring-snaps/snap-card/snap-card.test.tsx
+++ b/ui/pages/keyring-snaps/snap-card/snap-card.test.tsx
@@ -72,4 +72,13 @@ describe('SnapCard', () => {
       ).toBeInTheDocument();
     });
   });
+
+  it('should show `Update Available` tag', () => {
+    const { getByText } = renderComponent({
+      ...snap,
+      isInstalled: true,
+      updateAvailable: true,
+    });
+    expect(getByText(messages.snapUpdateAvailable.message)).toBeInTheDocument();
+  });
 });
diff --git a/ui/pages/keyring-snaps/snap-card/snap-card.tsx b/ui/pages/keyring-snaps/snap-card/snap-card.tsx
index c3cc88bb3201..537acde8f65f 100644
--- a/ui/pages/keyring-snaps/snap-card/snap-card.tsx
+++ b/ui/pages/keyring-snaps/snap-card/snap-card.tsx
@@ -10,6 +10,7 @@ import {
   Icon,
   IconName,
   Text,
+  IconSize,
 } from '../../../components/component-library';
 import {
   AlignItems,
@@ -31,13 +32,14 @@ export default function SnapCard({
   snapTitle,
   snapSlug,
   isInstalled,
+  updateAvailable,
   website,
   id,
   onClickFunc,
 }: Pick<
   SnapCardProps,
   'iconUrl' | 'snapTitle' | 'snapSlug' | 'isInstalled' | 'website' | 'id'
-> & { onClickFunc: () => void }) {
+> & { onClickFunc: () => void; updateAvailable: boolean }) {
   const t = useI18nContext();
   const history = useHistory();
   const [showConfigPopover, setShowConfigPopover] = useState(false);
@@ -90,11 +92,20 @@ export default function SnapCard({
         </Box>
         {isInstalled ? (
           <Button
+            className="configure-button"
             data-testid="configure-snap-button"
             variant={ButtonVariant.Secondary}
             onClick={() => setShowConfigPopover(true)}
           >
             {t('snapConfigure')}
+            <Icon
+              as="span"
+              marginLeft={2}
+              name={IconName.Arrow2UpRight}
+              style={{
+                verticalAlign: 'middle',
+              }}
+            />
           </Button>
         ) : (
           <Button
@@ -119,11 +130,23 @@ export default function SnapCard({
         {snapSlug}
       </Text>
 
-      <Box display={Display.Flex} justifyContent={JustifyContent.spaceBetween}>
+      <Box
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        alignItems={AlignItems.center}
+        marginTop={2}
+      >
+        {updateAvailable && (
+          <Text color={TextColor.textAlternative}>
+            {t('snapUpdateAvailable')}
+          </Text>
+        )}
         <Icon
           data-testid="to-snap-detail"
           name={IconName.Arrow2Right}
           color={IconColor.iconAlternative}
+          size={IconSize.Xs}
           onClick={onClickFunc}
           marginLeft="auto"
         />