[FLASK] Update UI (for audit) (UI facelift) (#19388)

* Update UI (for audit)

Revert yarn.lock change

Update e2e tests with new copy for a button

Make UI changes to custom Snap UI

Update UI on snap installation success page

Fix icon on installation success

Fix snap name font weight in installation page

Add UI changes for Snap installation failed page

Add new copy for snap installation screen

Update e2e tests OK button name

Update OK button names in e2e tests

Return previous functionality of update flow

Add error message handling for update screens

* Fix after rebase

* Fix messages.json update message

* Revert SCSS changes

* Refactor failed and success screen rendering

app/_locales/de/messages.json

@@ -359,9 +359,6 @@
     "message": "Erlauben Sie den Zugriff auf und die Übertragung von all Ihren $1?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Genehmigen und installieren"
-  },
   "approveButtonText": {
     "message": "Genehmigen"
   },

app/_locales/el/messages.json

@@ -359,9 +359,6 @@
     "message": "Δίνετε άδεια για να αποκτήσετε πρόσβαση σε όλα σας τα $1;",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Έγκριση και Εγκατάσταση"
-  },
   "approveButtonText": {
     "message": "Έγκριση"
   },

app/_locales/en/messages.json

@@ -398,9 +398,6 @@
     "message": "Allow access to and transfer all of your NFTs from $1?",
     "description": "$1 a link to contract on the block explorer when we're not able to retrieve a erc721 or erc1155 name"
   },
-  "approveAndInstall": {
-    "message": "Approve & install"
-  },
   "approveButtonText": {
     "message": "Approve"
   },
@@ -3784,8 +3781,11 @@
     "description": "$1 is the dApp origin requesting the snap and $2 is the snap name"
   },
   "snapInstallRequestsPermission": {
-    "message": "$1 wants to install $2, which is requesting the following permissions. Make sure you trust the authors before you proceed.",
-    "description": "$1 is the dApp origin requesting the snap and $2 is the snap name"
+    "message": "Installing $1 gives it the following permissions. Only continue if you trust $1.",
+    "description": "$1 is the snap name."
+  },
+  "snapInstallSuccess": {
+    "message": "Installation complete"
   },
   "snapInstallWarningCheck": {
     "message": "Ensure that the permission below aligns with your intended actions. Only proceed with authors you trust."
@@ -3804,6 +3804,14 @@
     "message": "Grant $2 public key access to $1",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
+  "snapInstallationErrorDescription": {
+    "message": "$1 couldn’t be installed.",
+    "description": "Error description used when snap installation fails. $1 is the snap name."
+  },
+  "snapInstallationErrorTitle": {
+    "message": "Installation failed",
+    "description": "Error title used when snap installation fails."
+  },
   "snapResultError": {
     "message": "Error"
   },
@@ -3811,15 +3819,26 @@
     "message": "Success"
   },
   "snapResultSuccessDescription": {
-    "message": "$1 is now available to use."
+    "message": "$1 is ready to use"
   },
   "snapUpdate": {
     "message": "Update snap"
   },
+  "snapUpdateErrorDescription": {
+    "message": "$1 couldn’t be updated.",
+    "description": "Error description used when snap update fails. $1 is the snap name."
+  },
+  "snapUpdateErrorTitle": {
+    "message": "Update failed",
+    "description": "Error title used when snap update fails."
+  },
   "snapUpdateRequest": {
     "message": "$1 wants to update $2 to $3 which gives it the following permissions. Only continue if you trust $2.",
     "description": "$1 is the dApp origin requesting the snap, $2 is the snap name and $3 is the snap version."
   },
+  "snapUpdateSuccess": {
+    "message": "Update complete"
+  },
   "snaps": {
     "message": "Snaps"
   },

app/_locales/es/messages.json

@@ -359,9 +359,6 @@
     "message": "¿Dar permiso para acceder a todo su $1?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Aprobar e instalar"
-  },
   "approveButtonText": {
     "message": "Aprobar"
   },

app/_locales/fr/messages.json

@@ -359,9 +359,6 @@
     "message": "Voulez-vous lui accorder l’autorisation d’accéder et de transférer tous vos $1 ?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Approuver et installer"
-  },
   "approveButtonText": {
     "message": "Approuver"
   },

app/_locales/hi/messages.json

@@ -359,9 +359,6 @@
     "message": "आपके सभी $1 को एक्सेस और ट्रांसफर करने के लिए अनुमति दें",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "स्वीकृत और इंस्टॉल करें"
-  },
   "approveButtonText": {
     "message": "अनुमोदित करें"
   },

app/_locales/id/messages.json

@@ -359,9 +359,6 @@
     "message": "Berikan izin untuk mengakses dan mentransfer seluruh $1 Anda?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Setujui & instal"
-  },
   "approveButtonText": {
     "message": "Setujui"
   },

app/_locales/it/messages.json

@@ -290,9 +290,6 @@
     "message": "Consenti l'accesso e il trasferimento di tutti i tuoi $1?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Approva & installa"
-  },
   "approveButtonText": {
     "message": "Approva"
   },

app/_locales/ja/messages.json

@@ -359,9 +359,6 @@
     "message": "すべての $1 へのアクセスとその送金を許可しますか？",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "承認してインストール"
-  },
   "approveButtonText": {
     "message": "承認"
   },

app/_locales/ko/messages.json

@@ -359,9 +359,6 @@
     "message": "내 모든 $1에 액세스 및 전송할 수 있는 권한을 부여할까요?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "승인 및 설치"
-  },
   "approveButtonText": {
     "message": "승인"
   },

app/_locales/pt/messages.json

@@ -359,9 +359,6 @@
     "message": "Permitir acesso a todos os seus $1?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Aprovar e instalar"
-  },
   "approveButtonText": {
     "message": "Aprovar"
   },

app/_locales/ru/messages.json

@@ -359,9 +359,6 @@
     "message": "Разрешить доступ ко всем вашим $1?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Одобрить и установить"
-  },
   "approveButtonText": {
     "message": "Одобрить"
   },

app/_locales/tl/messages.json

@@ -359,9 +359,6 @@
     "message": "Payagan ang pag-access at paglipat ng lahat ng iyong $1?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Aprubahan at I-install"
-  },
   "approveButtonText": {
     "message": "Aprubahan"
   },

app/_locales/tr/messages.json

@@ -359,9 +359,6 @@
     "message": "Sahip olduğun tüm $1 için erişim ve transfer izni verilsin mi?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Onayla ve Yükle"
-  },
   "approveButtonText": {
     "message": "Onayla"
   },

app/_locales/vi/messages.json

@@ -359,9 +359,6 @@
     "message": "Cấp quyền truy cập vào và chuyển tất cả $1 của bạn?",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "Chấp nhận và cài đặt"
-  },
   "approveButtonText": {
     "message": "Phê duyệt"
   },

app/_locales/zh_CN/messages.json

@@ -359,9 +359,6 @@
     "message": "是否允许访问您的所有$1？",
     "description": "$1 is the symbol of the token for which the user is granting approval"
   },
-  "approveAndInstall": {
-    "message": "批准并安装"
-  },
   "approveButtonText": {
     "message": "批准"
   },

test/e2e/snaps/test-snap-bip-32.spec.js

@@ -52,10 +52,10 @@ describe('Test Snap bip-32', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
@@ -71,9 +71,9 @@ describe('Test Snap bip-32', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-bip-44.spec.js

@@ -52,9 +52,9 @@ describe('Test Snap bip-44', function () {
           text: 'Connect',
           tag: 'button',
         });
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
@@ -65,9 +65,9 @@ describe('Test Snap bip-44', function () {
           text: 'Confirm',
           tag: 'button',
         });
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-cronjob.spec.js

@@ -52,17 +52,17 @@ describe('Test Snap Cronjob', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-dialog.spec.js

@@ -52,17 +52,17 @@ describe('Test Snap Dialog', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-error.spec.js

@@ -53,17 +53,17 @@ describe('Test Snap Error', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-ethprovider.spec.js

@@ -51,17 +51,17 @@ describe('Test Snap ethereum_provider', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-getentropy.spec.js

@@ -51,17 +51,17 @@ describe('Test Snap getEntropy', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-installed.spec.js

@@ -51,17 +51,17 @@ describe('Test Snap Installed', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 
@@ -90,17 +90,17 @@ describe('Test Snap Installed', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-management.spec.js

@@ -54,17 +54,17 @@ describe('Test Snap Management', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-managestate.spec.js

@@ -55,17 +55,17 @@ describe('Test Snap manageState', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-networkaccess.spec.js

@@ -54,17 +54,17 @@ describe('Test Snap networkAccess', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-notification.spec.js

@@ -55,17 +55,17 @@ describe('Test Snap Notification', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-rpc.spec.js

@@ -53,10 +53,10 @@ describe('Test Snap RPC', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
@@ -72,10 +72,10 @@ describe('Test Snap RPC', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 
@@ -98,17 +98,17 @@ describe('Test Snap RPC', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-txinsights.spec.js

@@ -53,17 +53,17 @@ describe('Test Snap TxInsights', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-update.spec.js

@@ -53,10 +53,10 @@ describe('Test Snap update', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
@@ -72,10 +72,10 @@ describe('Test Snap update', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 
@@ -110,10 +110,10 @@ describe('Test Snap update', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

test/e2e/snaps/test-snap-wasm.spec.js

@@ -52,17 +52,17 @@ describe('Test Snap WASM', function () {
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Approve & install' });
+        await driver.waitForSelector({ text: 'Install' });
 
         await driver.clickElement({
-          text: 'Approve & install',
+          text: 'Install',
           tag: 'button',
         });
 
-        await driver.waitForSelector({ text: 'Ok' });
+        await driver.waitForSelector({ text: 'OK' });
 
         await driver.clickElement({
-          text: 'Ok',
+          text: 'OK',
           tag: 'button',
         });
 

ui/components/app/permission-cell/permission-cell.js

@@ -95,9 +95,8 @@ const PermissionCell = ({
           {title}
         </Text>
         <Text
-          size={Size.XS}
           className="permission-cell__status"
-          variant={TextVariant.bodyXs}
+          variant={TextVariant.bodySm}
           color={TextColor.textAlternative}
         >
           {!revoked &&

ui/components/app/snaps/install-error/install-error.js

@@ -3,16 +3,19 @@ import PropTypes from 'prop-types';
 import Box from '../../../ui/box/box';
 import {
   AlignItems,
+  BackgroundColor,
   BLOCK_SIZES,
   FLEX_DIRECTION,
   FONT_WEIGHT,
+  IconColor,
   JustifyContent,
+  TextAlign,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import ActionableMessage from '../../../ui/actionable-message/actionable-message';
-import { Text } from '../../../component-library';
+import { AvatarIcon, IconSize, Text } from '../../../component-library';
 
-const InstallError = ({ title, error }) => {
+const InstallError = ({ title, error, description, iconName }) => {
   return (
     <Box
       flexDirection={FLEX_DIRECTION.COLUMN}
@@ -21,9 +24,22 @@ const InstallError = ({ title, error }) => {
       height={BLOCK_SIZES.FULL}
       padding={2}
     >
+      {iconName && (
+        <AvatarIcon
+          iconName={iconName}
+          size={IconSize.Xl}
+          iconProps={{
+            size: IconSize.Xl,
+          }}
+          color={IconColor.errorDefault}
+          backgroundColor={BackgroundColor.errorMuted}
+          marginBottom={4}
+        />
+      )}
       <Text fontWeight={FONT_WEIGHT.BOLD} variant={TextVariant.headingLg}>
         {title}
       </Text>
+      {description && <Text textAlign={TextAlign.Center}>{description}</Text>}
       <Box padding={2}>
         <ActionableMessage type="danger" message={error} />
       </Box>
@@ -34,6 +50,8 @@ const InstallError = ({ title, error }) => {
 InstallError.propTypes = {
   title: PropTypes.node.isRequired,
   error: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  iconName: PropTypes.string,
 };
 
 export default InstallError;

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js

@@ -4,11 +4,11 @@ import { isComponent } from '@metamask/snaps-ui';
 import { useSelector } from 'react-redux';
 import MetaMaskTemplateRenderer from '../../metamask-template-renderer/metamask-template-renderer';
 import {
-  TypographyVariant,
-  FONT_WEIGHT,
   DISPLAY,
   FLEX_DIRECTION,
-  OVERFLOW_WRAP,
+  TypographyVariant,
+  OverflowWrap,
+  FontWeight,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { SnapDelineator } from '../snap-delineator';
@@ -37,9 +37,9 @@ export const UI_MAPPING = {
     element: 'Typography',
     children: props.value,
     props: {
-      variant: TypographyVariant.H3,
-      fontWeight: FONT_WEIGHT.BOLD,
-      overflowWrap: OVERFLOW_WRAP.BREAK_WORD,
+      variant: TypographyVariant.H4,
+      fontWeight: FontWeight.Bold,
+      overflowWrap: OverflowWrap.BreakWord,
     },
   }),
   text: (props) => ({

ui/pages/permissions-connect/snaps/snap-install/index.scss

@@ -7,10 +7,6 @@
     &__loader-container {
       height: 100%;
     }
-
-    &__permission-description {
-      border-bottom: 1px solid var(--color-border-default);
-    }
   }
 
   .page-container__footer {

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

@@ -12,12 +12,13 @@ import {
   JustifyContent,
   TextVariant,
   TEXT_ALIGN,
+  FontWeight,
 } from '../../../../helpers/constants/design-system';
 import { getSnapInstallWarnings } from '../util';
 import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
 import InstallError from '../../../../components/app/snaps/install-error/install-error';
 import SnapAuthorship from '../../../../components/app/snaps/snap-authorship';
-import { Text } from '../../../../components/component-library';
+import { Text, ValidTag } from '../../../../components/component-library';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
 import { getSnapName } from '../../../../helpers/utils/util';
 import SnapPermissionsList from '../../../../components/app/snaps/snap-permissions-list';
@@ -125,8 +126,14 @@ export default function SnapInstall({
               textAlign={TEXT_ALIGN.CENTER}
             >
               {t('snapInstallRequestsPermission', [
-                <b key="1">{originMetadata?.hostname}</b>,
-                <b key="2">{snapName}</b>,
+                <Text
+                  as={ValidTag.Span}
+                  key="2"
+                  variant={TextVariant.bodyMd}
+                  fontWeight={FontWeight.Medium}
+                >
+                  {snapName}
+                </Text>,
               ])}
             </Text>
             <SnapPermissionsList
@@ -165,7 +172,7 @@ export default function SnapInstall({
           onSubmit={handleSubmit}
           submitText={t(
             // eslint-disable-next-line no-nested-ternary
-            hasError ? 'ok' : hasPermissions ? 'approveAndInstall' : 'install',
+            hasError ? 'ok' : 'install',
           )}
         />
       </Box>

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

@@ -12,9 +12,18 @@ import {
   FONT_WEIGHT,
   JustifyContent,
   TextVariant,
-  TEXT_ALIGN,
+  BackgroundColor,
+  IconColor,
+  TextAlign,
+  FontWeight,
 } from '../../../../helpers/constants/design-system';
-import { Text } from '../../../../components/component-library';
+import {
+  AvatarIcon,
+  IconName,
+  IconSize,
+  Text,
+  ValidTag,
+} from '../../../../components/component-library';
 import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
 import InstallError from '../../../../components/app/snaps/install-error/install-error';
 import SnapAuthorship from '../../../../components/app/snaps/snap-authorship';
@@ -34,11 +43,95 @@ export default function SnapResult({
   );
 
   const hasError = !requestState.loading && requestState.error;
-
   const isLoading = requestState.loading;
-
   const snapName = getSnapName(targetSubjectMetadata.origin);
 
+  function getSuccessScreen(requestType, snapNameToRender) {
+    let successScreenTitle;
+    switch (requestType) {
+      case 'wallet_installSnap':
+        successScreenTitle = t('snapInstallSuccess');
+        break;
+      case 'wallet_updateSnap':
+        successScreenTitle = t('snapUpdateSuccess');
+        break;
+      default:
+        successScreenTitle = t('snapResultSuccess');
+    }
+
+    return (
+      <Box
+        flexDirection={FLEX_DIRECTION.COLUMN}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
+        height={BLOCK_SIZES.FULL}
+        paddingTop={2}
+        paddingBottom={2}
+      >
+        <AvatarIcon
+          className="snap-result__header__icon"
+          iconName={IconName.Confirmation}
+          size={IconSize.Xl}
+          iconProps={{
+            size: IconSize.Xl,
+          }}
+          color={IconColor.successDefault}
+          backgroundColor={BackgroundColor.successMuted}
+        />
+        <Text
+          fontWeight={FONT_WEIGHT.BOLD}
+          variant={TextVariant.headingLg}
+          paddingBottom={2}
+          marginTop={4}
+        >
+          {successScreenTitle}
+        </Text>
+        <Text textAlign={TextAlign.Center}>
+          {t('snapResultSuccessDescription', [
+            <Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Medium}>
+              {snapNameToRender}
+            </Text>,
+          ])}
+        </Text>
+      </Box>
+    );
+  }
+
+  function getFailedScreen(requestType, snapNameToRender) {
+    let failedScreenTitle;
+    let failedScreenDescription;
+
+    switch (requestType) {
+      case 'wallet_installSnap':
+        failedScreenTitle = t('snapInstallationErrorTitle');
+        failedScreenDescription = t('snapInstallationErrorDescription', [
+          <Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Medium}>
+            {snapNameToRender}
+          </Text>,
+        ]);
+        break;
+      case 'wallet_updateSnap':
+        failedScreenTitle = t('snapUpdateErrorTitle');
+        failedScreenDescription = t('snapUpdateErrorDescription', [
+          <Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Medium}>
+            {snapNameToRender}
+          </Text>,
+        ]);
+        break;
+      default:
+        failedScreenTitle = t('snapResultError');
+    }
+
+    return (
+      <InstallError
+        error={requestState.error}
+        title={failedScreenTitle}
+        description={failedScreenDescription}
+        iconName={IconName.Warning}
+      />
+    );
+  }
+
   return (
     <Box
       className="page-container snap-result"
@@ -65,33 +158,10 @@ export default function SnapResult({
             <PulseLoader />
           </Box>
         )}
-        {!isLoading && !hasError && (
-          <Box
-            flexDirection={FLEX_DIRECTION.COLUMN}
-            alignItems={AlignItems.center}
-            justifyContent={JustifyContent.center}
-            height={BLOCK_SIZES.FULL}
-            paddingTop={2}
-            paddingBottom={2}
-          >
-            <Text
-              fontWeight={FONT_WEIGHT.BOLD}
-              variant={TextVariant.headingLg}
-              paddingBottom={2}
-            >
-              {t('snapResultSuccess')}
-            </Text>
-            <Text textAlign={TEXT_ALIGN.CENTER}>
-              {t('snapResultSuccessDescription', [<b key="1">{snapName}</b>])}
-            </Text>
-          </Box>
-        )}
-        {hasError && (
-          <InstallError
-            error={requestState.error}
-            title={t('snapResultError')}
-          />
-        )}
+        {!isLoading &&
+          !hasError &&
+          getSuccessScreen(requestState.type, snapName)}
+        {hasError && getFailedScreen(requestState.type, snapName)}
       </Box>
       <Box
         className="snap-result__footer"
@@ -102,7 +172,7 @@ export default function SnapResult({
           hideCancel
           disabled={isLoading}
           onSubmit={onSubmit}
-          submitText={t('ok')}
+          submitText={t('ok').toUpperCase()}
         />
       </Box>
     </Box>