[FLASK] snaps-monorepo@0.31.0 (#18142)

* allow SnapController to call `ApprovalController:updateRequestState` action

* combine popups

* show only autorship pill on result

* lint

* update `snaps-monorepo@0.31.0` and regen policies

* dedupe deps and fix fencing

* fix update button text

* fix fencing

* Update a bunch of e2es

* address requested changes

* update policy

* bump key-tree

* fix lint

* Update RPC E2E

* fix locales

* Remove wrong instance of window handle polling

* design changes and address pr comments

* remove unused imports

* fix lint

* fix fencing

* remove unused locales

* fence things

* re-add redirection

* bump test-snaps version

* Fix update e2e

* fix redirecting logic and address requested changes

* force update metamask state on approved

* move force update

---------

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>

app/_locales/de/messages.json

@@ -3376,16 +3376,9 @@
     "message": "Sie gewähren dem Snap „$1“ wichtige $2-Zugriffsrechte. Dies kann nicht rückgängig gemacht werden und gibt „$1“ Kontrolle über Ihre $2-Konten und Vermögenswerte. Stellen Sie sicher, dass Sie „$1“ vertrauen, bevor Sie fortfahren.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Für diesen Snap werden die folgenden Berechtigungen beantragt:"
-  },
   "snapUpdate": {
     "message": "Snap aktualisieren"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 benötigt eine neuere Version Ihres Snaps.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Snaps"
   },

app/_locales/el/messages.json

@@ -3376,16 +3376,9 @@
     "message": "Εκχωρείτε στο $2 βασική πρόσβαση στο snap \"$1\". Αυτό είναι αμετάκλητο και παρέχει στο \"$1\" τον έλεγχο των λογαριασμών και των περιουσιακών σας στοιχείων $2. Βεβαιωθείτε ότι εμπιστεύεστε το \"$1\" προτού συνεχίσετε.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Αυτό το snap αιτείται τις παρακάτω άδειες:"
-  },
   "snapUpdate": {
     "message": "Ενημέρωση Snap"
   },
-  "snapUpdateExplanation": {
-    "message": "Το $1 χρειάζεται μια νεότερη έκδοση του snap σας.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Snaps"
   },

app/_locales/en/messages.json

@@ -3028,6 +3028,9 @@
   "replace": {
     "message": "replace"
   },
+  "requestFailed": {
+    "message": "Request failed"
+  },
   "requestFlaggedAsMaliciousFallbackCopyReason": {
     "message": "The security provider has not shared additional details"
   },
@@ -3427,25 +3430,46 @@
   "snapInstall": {
     "message": "Install snap"
   },
+  "snapInstallRequest": {
+    "message": "$1 wants to install $2. Make sure you trust the authors before you proceed.",
+    "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"
+  },
   "snapInstallWarningCheck": {
-    "message": "To confirm that you understand, check the box."
+    "message": "Ensure that the permission below align with your intended actions. Only proceed with authors you trust."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "To confirm that you understand, check all the boxes."
+    "message": "Ensure that the permissions below align with your intended actions. Only proceed with authors you trust."
+  },
+  "snapInstallWarningHeading": {
+    "message": "Proceed with caution"
   },
   "snapInstallWarningKeyAccess": {
-    "message": "You are granting $2 key access to the snap \"$1\". This is irrevocable and grants \"$1\" control of your $2 accounts and assets. Make sure you trust \"$1\" before proceeding.",
+    "message": "Grant $2 key access to $1",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
+  "snapResultError": {
-    "message": "This snap is requesting the following permissions:"
+    "message": "Error"
+  },
+  "snapResultSuccess": {
+    "message": "Success"
+  },
+  "snapResultSuccessDescription": {
+    "message": "$1 is now available to use."
   },
   "snapUpdate": {
     "message": "Update snap"
   },
-  "snapUpdateExplanation": {
+  "snapUpdateRequest": {
-    "message": "$1 needs a newer version of your snap.",
+    "message": "$1 wants to update $2. Make sure you trust the authors before you proceed.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
+    "description": "$1 is the dApp origin requesting the snap and $2 is the snap name"
+  },
+  "snapUpdateRequestsPermission": {
+    "message": "$1 wants to update $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"
   },
   "snaps": {
     "message": "Snaps"
@@ -4386,6 +4410,9 @@
   "upArrow": {
     "message": "up arrow"
   },
+  "update": {
+    "message": "Update"
+  },
   "updatedWithDate": {
     "message": "Updated $1"
   },

app/_locales/es/messages.json

@@ -3376,16 +3376,9 @@
     "message": "Está otorgando acceso clave de $2 al complemento \"$1\". Esto es irrevocable y le otorga a \"$1\" el control de sus cuentas y activos de $2. Asegúrese de que confía en \"$1\" antes de continuar.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Este complemento solicita los siguientes permisos:"
-  },
   "snapUpdate": {
     "message": "Actualizar complemento"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 necesita una versión más reciente de su complemento.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Complementos"
   },

app/_locales/fr/messages.json

@@ -3376,16 +3376,9 @@
     "message": "Vous autorisez $2 à accéder à la clé du snap « $1 ». Cette action est irréversible et accorde à « $1 » le contrôle de vos comptes et actifs $2. Assurez-vous que vous faites confiance à « $1 » avant de continuer.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Ce snap demande les autorisations suivantes :"
-  },
   "snapUpdate": {
     "message": "Mettre à jour Snap"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 a besoin d’une version plus récente de votre snap.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Snaps"
   },

app/_locales/hi/messages.json

@@ -3376,16 +3376,9 @@
     "message": "आप स्नैप \"$1\" के लिए $2 कुंजी का एक्सेस प्रदान कर रहे हैं। यह अपरिवर्तनीय है और आपके $2 खातों और संपत्तियों पर \"$1\" नियंत्रण प्रदान करता है। आगे बढ़ने से पहले सुनिश्चित करें कि आप \"$1\" पर भरोसा करते हैं।",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "ये स्नैप निम्नलिखित अनुमतियों हेतु अनुरोध कर रहा है:"
-  },
   "snapUpdate": {
     "message": "स्नैप अपडेट करें"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 को आपके स्नैप के नए वर्जन की जरूरत है।",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "स्नैप्स"
   },

app/_locales/id/messages.json

@@ -3376,16 +3376,9 @@
     "message": "Anda memberikan $2 akses kunci ke snap \"$1\". Tindakan ini tidak dapat dibatalkan dan memberikan kendali \"$1\" atas akun dan aset $2 Anda. Sebelum melanjutkan, pastikan \"$1\" aman.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Snap ini meminta izin berikut:"
-  },
   "snapUpdate": {
     "message": "Perbarui Snap"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 memerlukan versi snap yang lebih baru.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Snap"
   },

app/_locales/ja/messages.json

@@ -3376,16 +3376,9 @@
     "message": "スナップ「$1」に $2 へのキーアクセスを許可しようとしています。この操作は取り消し不能であり、$2 アカウントとアセットのコントロールを「$1」に許可することになります。続行する前に、必ず「$1」が信頼できることを確認してください。",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "このスナップが次のパーミッションをリクエストしています:"
-  },
   "snapUpdate": {
     "message": "スナップを更新"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 に新しいバージョンのスナップが必要です。",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "スナップ"
   },

app/_locales/ko/messages.json

@@ -3376,16 +3376,9 @@
     "message": "'$1' 스냅 이용에 필요한 $2 키 액세스 권한을 부여하고 있습니다. 이 작업은 사용자의 $2 계정과 자산에 '$1' 제어 권한을 부여하며 취소가 불가능합니다. '$1의 신뢰성을 확인한 후에 진행하세요.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "이 스냅이 다음 권한을 요청하고 있습니다."
-  },
   "snapUpdate": {
     "message": "스냅 업데이트"
   },
-  "snapUpdateExplanation": {
-    "message": "$1에는 스냅의 새 버전이 필요합니다",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "스냅"
   },

app/_locales/pt/messages.json

@@ -3376,16 +3376,9 @@
     "message": "Você está concedendo ao snap \"$1\" acesso à sua chave $2. Isso é irrevogável e concede a \"$1\" controle de suas contas e ativos $2. Certifique-se de que confia em \"$1\" antes de prosseguir.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Esse snap está solicitando as seguintes permissões:"
-  },
   "snapUpdate": {
     "message": "Atualizar snap"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 precisa de uma versão mais nova do seu snap.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Snaps"
   },

app/_locales/ru/messages.json

@@ -3376,16 +3376,9 @@
     "message": "Вы предоставляете ключ доступа $2 к привязке \"$1\". Это действие нельзя отменить, и оно предоставляет \"$1\" управление всеми счетами и активами $2. Перед тем как продолжить, убедитесь, что доверяете \"$1\".",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Этот снап запрашивает следующие разрешения:"
-  },
   "snapUpdate": {
     "message": "Обновить снап"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 нужна более новая версия вашей привязки.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Снапы"
   },

app/_locales/tl/messages.json

@@ -3376,16 +3376,9 @@
     "message": "Binibigyan mo ang $2 ng key access sa snap na \"$1\". Hindi na ito mababawi at nagbibigay ito sa \"$1\" ng kontrol sa iyong mga $2 account at asset. Tiyaking pinagkakatiwalaan mo ang \"$1\" bago magpatuloy.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Hinihiling ng snap na ito ang mga sumusunod na pahintulot:"
-  },
   "snapUpdate": {
     "message": "I-update ang snap"
   },
-  "snapUpdateExplanation": {
-    "message": "Kailangan ng $1 ng bagong bersyon ng iyong snap.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Mga Snap"
   },

app/_locales/tr/messages.json

@@ -3376,16 +3376,9 @@
     "message": "\"$1\" için $2 anahtar erişimi veriyorsunuz. Bu iptal edilemez ve $2 hesaplarınıza ve varlıklarınıza \"$1\" kontrolü verir. İlerlemeden önce \"$1\" alanına güvendiğinizden emin olun.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Bu ek, aşağıdaki izinleri istiyor:"
-  },
   "snapUpdate": {
     "message": "Snap'i güncelle"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 için daha yeni bir snap sürümü gerekli.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Snap'ler"
   },

app/_locales/vi/messages.json

@@ -3376,16 +3376,9 @@
     "message": "Bạn đang cấp quyền truy cập khóa $2 cho Snap \"$1\". Hành động này không thể hủy bỏ và sẽ cấp quyền kiểm soát tài khoản và tài sản $2 của bạn cho \"$1\". Đảm bảo bạn tin tưởng \"$1\" trước khi tiếp tục.",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "Snap này đang yêu cầu các quyền sau:"
-  },
   "snapUpdate": {
     "message": "Cập nhật Snap"
   },
-  "snapUpdateExplanation": {
-    "message": "$1 cần một phiên bản Snap mới hơn.",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Snap"
   },

app/_locales/zh_CN/messages.json

@@ -3376,16 +3376,9 @@
     "message": "您正在向snap \"$1\"授予$2的密钥访问权限。此操作不可撤销，并会向\"$1\"授予对您的$2账户和资产的控制权。在继续之前，请确保您信任\"$1\"。",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
-  "snapRequestsPermission": {
-    "message": "此Snap正在请求以下权限："
-  },
   "snapUpdate": {
     "message": "更新Snap"
   },
-  "snapUpdateExplanation": {
-    "message": "$1需要更新版本的snap。",
-    "description": "$1 is the dapp that is requesting an update to the snap."
-  },
   "snaps": {
     "message": "Snap"
   },

app/scripts/metamask-controller.js

@@ -787,6 +787,7 @@ export default class MetamaskController extends EventEmitter {
         `${this.permissionController.name}:getSubjectNames`,
         `${this.permissionController.name}:updateCaveat`,
         `${this.approvalController.name}:addRequest`,
+        `${this.approvalController.name}:updateRequestState`,
         `${this.permissionController.name}:grantPermissions`,
         `${this.subjectMetadataController.name}:getSubjectMetadata`,
         'ExecutionService:executeSnap',
@@ -3979,7 +3980,6 @@ export default class MetamaskController extends EventEmitter {
         sendMetrics: this.metaMetricsController.trackEvent.bind(
           this.metaMetricsController,
         ),
-
         // Permission-related
         getAccounts: this.getPermittedAccounts.bind(this, origin),
         getPermissionsForOrigin: this.permissionController.getPermissions.bind(

lavamoat/browserify/beta/policy.json

@@ -1392,7 +1392,7 @@
       "packages": {
         "@metamask/key-tree": true,
         "@metamask/key-tree>@noble/hashes": true,
-        "@metamask/rpc-methods>@metamask/utils": true,
+        "@metamask/utils": true,
         "@metamask/utils>superstruct": true
       }
     },
@@ -1410,18 +1410,6 @@
         "browserify>buffer": true
       }
     },
-    "@metamask/rpc-methods>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/rpc-methods>nanoid": {
       "globals": {
         "crypto.getRandomValues": true

lavamoat/browserify/desktop/policy.json

@@ -1542,10 +1542,10 @@
         "@metamask/key-tree>@noble/hashes": true,
         "@metamask/rpc-methods>@metamask/browser-passworder": true,
         "@metamask/rpc-methods>@metamask/permission-controller": true,
-        "@metamask/rpc-methods>@metamask/utils": true,
         "@metamask/rpc-methods>nanoid": true,
         "@metamask/snaps-ui": true,
         "@metamask/snaps-utils": true,
+        "@metamask/utils": true,
         "@metamask/utils>superstruct": true,
         "eth-rpc-errors": true
       }
@@ -1594,18 +1594,6 @@
         "ethjs>ethjs-unit": true
       }
     },
-    "@metamask/rpc-methods>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/rpc-methods>nanoid": {
       "globals": {
         "crypto.getRandomValues": true
@@ -1669,7 +1657,6 @@
         "@metamask/snaps-controllers>@metamask/base-controller": true,
         "@metamask/snaps-controllers>@metamask/permission-controller": true,
         "@metamask/snaps-controllers>@metamask/subject-metadata-controller": true,
-        "@metamask/snaps-controllers>@metamask/utils": true,
         "@metamask/snaps-controllers>@xstate/fsm": true,
         "@metamask/snaps-controllers>concat-stream": true,
         "@metamask/snaps-controllers>gunzip-maybe": true,
@@ -1677,6 +1664,7 @@
         "@metamask/snaps-controllers>readable-web-to-node-stream": true,
         "@metamask/snaps-controllers>tar-stream": true,
         "@metamask/snaps-utils": true,
+        "@metamask/utils": true,
         "eth-rpc-errors": true,
         "json-rpc-engine": true,
         "json-rpc-middleware-stream": true,
@@ -1718,18 +1706,6 @@
         "@metamask/snaps-controllers>@metamask/base-controller": true
       }
     },
-    "@metamask/snaps-controllers>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/snaps-controllers>concat-stream": {
       "packages": {
         "@metamask/snaps-controllers>concat-stream>readable-stream": true,
@@ -1878,22 +1854,10 @@
     },
     "@metamask/snaps-ui": {
       "packages": {
-        "@metamask/snaps-ui>@metamask/utils": true,
+        "@metamask/utils": true,
         "@metamask/utils>superstruct": true
       }
     },
-    "@metamask/snaps-ui>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/snaps-utils": {
       "globals": {
         "TextDecoder": true,
@@ -1907,27 +1871,15 @@
       "packages": {
         "@metamask/key-tree>@noble/hashes": true,
         "@metamask/key-tree>@scure/base": true,
-        "@metamask/snaps-utils>@metamask/utils": true,
         "@metamask/snaps-utils>cron-parser": true,
         "@metamask/snaps-utils>fast-json-stable-stringify": true,
         "@metamask/snaps-utils>rfdc": true,
         "@metamask/snaps-utils>validate-npm-package-name": true,
+        "@metamask/utils": true,
         "@metamask/utils>superstruct": true,
         "semver": true
       }
     },
-    "@metamask/snaps-utils>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/snaps-utils>cron-parser": {
       "packages": {
         "browserify>browser-resolve": true,

lavamoat/browserify/flask/policy.json

@@ -1542,10 +1542,10 @@
         "@metamask/key-tree>@noble/hashes": true,
         "@metamask/rpc-methods>@metamask/browser-passworder": true,
         "@metamask/rpc-methods>@metamask/permission-controller": true,
-        "@metamask/rpc-methods>@metamask/utils": true,
         "@metamask/rpc-methods>nanoid": true,
         "@metamask/snaps-ui": true,
         "@metamask/snaps-utils": true,
+        "@metamask/utils": true,
         "@metamask/utils>superstruct": true,
         "eth-rpc-errors": true
       }
@@ -1594,18 +1594,6 @@
         "ethjs>ethjs-unit": true
       }
     },
-    "@metamask/rpc-methods>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/rpc-methods>nanoid": {
       "globals": {
         "crypto.getRandomValues": true
@@ -1669,7 +1657,6 @@
         "@metamask/snaps-controllers>@metamask/base-controller": true,
         "@metamask/snaps-controllers>@metamask/permission-controller": true,
         "@metamask/snaps-controllers>@metamask/subject-metadata-controller": true,
-        "@metamask/snaps-controllers>@metamask/utils": true,
         "@metamask/snaps-controllers>@xstate/fsm": true,
         "@metamask/snaps-controllers>concat-stream": true,
         "@metamask/snaps-controllers>gunzip-maybe": true,
@@ -1677,6 +1664,7 @@
         "@metamask/snaps-controllers>readable-web-to-node-stream": true,
         "@metamask/snaps-controllers>tar-stream": true,
         "@metamask/snaps-utils": true,
+        "@metamask/utils": true,
         "eth-rpc-errors": true,
         "json-rpc-engine": true,
         "json-rpc-middleware-stream": true,
@@ -1718,18 +1706,6 @@
         "@metamask/snaps-controllers>@metamask/base-controller": true
       }
     },
-    "@metamask/snaps-controllers>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/snaps-controllers>concat-stream": {
       "packages": {
         "@metamask/snaps-controllers>concat-stream>readable-stream": true,
@@ -1878,22 +1854,10 @@
     },
     "@metamask/snaps-ui": {
       "packages": {
-        "@metamask/snaps-ui>@metamask/utils": true,
+        "@metamask/utils": true,
         "@metamask/utils>superstruct": true
       }
     },
-    "@metamask/snaps-ui>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/snaps-utils": {
       "globals": {
         "TextDecoder": true,
@@ -1907,27 +1871,15 @@
       "packages": {
         "@metamask/key-tree>@noble/hashes": true,
         "@metamask/key-tree>@scure/base": true,
-        "@metamask/snaps-utils>@metamask/utils": true,
         "@metamask/snaps-utils>cron-parser": true,
         "@metamask/snaps-utils>fast-json-stable-stringify": true,
         "@metamask/snaps-utils>rfdc": true,
         "@metamask/snaps-utils>validate-npm-package-name": true,
+        "@metamask/utils": true,
         "@metamask/utils>superstruct": true,
         "semver": true
       }
     },
-    "@metamask/snaps-utils>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/snaps-utils>cron-parser": {
       "packages": {
         "browserify>browser-resolve": true,

lavamoat/browserify/main/policy.json

@@ -1392,7 +1392,7 @@
       "packages": {
         "@metamask/key-tree": true,
         "@metamask/key-tree>@noble/hashes": true,
-        "@metamask/rpc-methods>@metamask/utils": true,
+        "@metamask/utils": true,
         "@metamask/utils>superstruct": true
       }
     },
@@ -1410,18 +1410,6 @@
         "browserify>buffer": true
       }
     },
-    "@metamask/rpc-methods>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>superstruct": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/rpc-methods>nanoid": {
       "globals": {
         "crypto.getRandomValues": true

package.json

@@ -237,7 +237,7 @@
     "@metamask/etherscan-link": "^2.2.0",
     "@metamask/gas-fee-controller": "^1.0.0",
     "@metamask/jazzicon": "^2.0.0",
-    "@metamask/key-tree": "^6.2.1",
+    "@metamask/key-tree": "^7.0.0",
     "@metamask/logo": "^3.1.1",
     "@metamask/metamask-eth-abis": "^3.0.0",
     "@metamask/notification-controller": "^1.0.0",
@@ -247,13 +247,13 @@
     "@metamask/post-message-stream": "^6.0.0",
     "@metamask/providers": "^10.2.1",
     "@metamask/rate-limit-controller": "^1.0.0",
-    "@metamask/rpc-methods": "^0.30.0",
+    "@metamask/rpc-methods": "^0.31.0",
     "@metamask/scure-bip39": "^2.0.3",
     "@metamask/slip44": "^2.1.0",
     "@metamask/smart-transactions-controller": "^3.1.0",
-    "@metamask/snaps-controllers": "^0.30.0",
+    "@metamask/snaps-controllers": "^0.31.0",
-    "@metamask/snaps-ui": "^0.30.0",
+    "@metamask/snaps-ui": "^0.31.0",
-    "@metamask/snaps-utils": "^0.30.0",
+    "@metamask/snaps-utils": "^0.31.0",
     "@metamask/subject-metadata-controller": "^1.0.0",
     "@metamask/utils": "^5.0.0",
     "@ngraveio/bc-ur": "^1.1.6",

test/e2e/snaps/enums.js

@@ -1,3 +1,3 @@
 module.exports = {
-  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/5.0.3/',
+  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/5.1.0/',
 };

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

@@ -53,16 +53,8 @@ describe('Test Snap bip-32', function () {
           tag: 'button',
         });
 
-        await driver.delay(2000);
+        await driver.waitForSelector({ text: 'Approve & install' });
 
-        // switch to metamask extension
-        windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
-
-        // approve install of snap
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
@@ -77,6 +69,13 @@ describe('Test Snap bip-32', function () {
           tag: 'button',
         });
 
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         // switch back to test-snaps window
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 

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

@@ -52,16 +52,8 @@ describe('Test Snap bip-44', function () {
           tag: 'button',
         });
 
-        await driver.delay(2000);
+        await driver.waitForSelector({ text: 'Approve & install' });
 
-        // switch to metamask extension
-        windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
-
-        // approve install of snap
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
@@ -76,6 +68,13 @@ describe('Test Snap bip-44', function () {
           tag: 'button',
         });
 
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         // click send inputs on test snap page
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 

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

@@ -52,19 +52,20 @@ describe('Test Snap Cronjob', function () {
           tag: 'button',
         });
 
-        await driver.delay(2000);
+        await driver.waitForSelector({ text: 'Approve & install' });
 
-        // approve install of snap
-        windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         // click send inputs on test snap page
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 

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

@@ -52,19 +52,20 @@ describe('Test Snap Dialog', function () {
           tag: 'button',
         });
 
-        await driver.delay(2000);
+        await driver.waitForSelector({ text: 'Approve & install' });
 
-        // approve install of snap
-        windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         // switch to test snaps tab
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 

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

@@ -38,7 +38,7 @@ describe('Test Snap Error', function () {
         await driver.delay(1000);
 
         // switch to metamask extension and click connect
-        let windowHandles = await driver.waitUntilXWindowHandles(
+        const windowHandles = await driver.waitUntilXWindowHandles(
           3,
           1000,
           10000,
@@ -53,19 +53,20 @@ describe('Test Snap Error', function () {
           tag: 'button',
         });
 
-        await driver.delay(2000);
+        await driver.waitForSelector({ text: 'Approve & install' });
 
-        // approve install of snap
-        windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         // click send inputs on test snap page
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 

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

@@ -52,19 +52,20 @@ describe('Test Snap Installed', function () {
           tag: 'button',
         });
 
-        await driver.delay(2000);
+        await driver.waitForSelector({ text: 'Approve & install' });
 
-        // approve install of snap
-        windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         // click send inputs on test snap page
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
@@ -90,20 +91,20 @@ describe('Test Snap Installed', function () {
           tag: 'button',
         });
 
-        await driver.delay(2000);
+        await driver.waitForSelector({ text: 'Approve & install' });
 
-        // approve install of snap
-        windowHandles = await driver.getAllWindowHandles();
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
-        windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
         // wait for npm installation success

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

@@ -54,21 +54,19 @@ describe('Test Snap Management', function () {
           tag: 'button',
         });
 
-        await driver.delay(1000);
+        await driver.waitForSelector({ text: 'Approve & install' });
 
-        // approve install of snap
-        windowHandles = await driver.getAllWindowHandles();
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
-        // delay for npm installation
+        await driver.waitForSelector({ text: 'Ok' });
-        await driver.delay(2000);
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
 
         // switch to the original MM tab
         const extensionPage = windowHandles[0];

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

@@ -41,7 +41,7 @@ describe('Test Snap manageState', function () {
         await driver.delay(1000);
 
         // switch to metamask extension and click connect
-        let windowHandles = await driver.waitUntilXWindowHandles(
+        const windowHandles = await driver.waitUntilXWindowHandles(
           2,
           1000,
           10000,
@@ -54,19 +54,21 @@ describe('Test Snap manageState', function () {
           text: 'Connect',
           tag: 'button',
         });
-        await driver.delay(2000);
 
-        // approve install of snap
+        await driver.waitForSelector({ text: 'Approve & install' });
-        windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
+
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         // fill and click send inputs on test snap page
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 

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

@@ -40,7 +40,7 @@ describe('Test Snap Notification', function () {
         await driver.delay(1000);
 
         // switch to metamask extension and click connect
-        let windowHandles = await driver.waitUntilXWindowHandles(
+        const windowHandles = await driver.waitUntilXWindowHandles(
           3,
           1000,
           10000,
@@ -54,19 +54,21 @@ describe('Test Snap Notification', function () {
           text: 'Connect',
           tag: 'button',
         });
-        await driver.delay(2000);
 
-        // approve install of snap
+        await driver.waitForSelector({ text: 'Approve & install' });
-        windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
+
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         // click send inputs on test snap page
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 

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

@@ -28,13 +28,15 @@ describe('Test Snap RPC', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        // navigate to test snaps page and connect
+        // navigate to test snaps page
         await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
         await driver.delay(1000);
-        const snapButton1 = await driver.findElement('#connectRpcSnap');
+
+        // find and scroll to the bip32 test and connect
+        const snapButton1 = await driver.findElement('#connectBip32');
         await driver.scrollToElement(snapButton1);
         await driver.delay(1000);
-        await driver.clickElement('#connectRpcSnap');
+        await driver.clickElement('#connectBip32');
         await driver.delay(1000);
 
         // switch to metamask extension and click connect
@@ -52,20 +54,62 @@ describe('Test Snap RPC', function () {
           tag: 'button',
         });
 
-        await driver.delay(2000);
+        await driver.waitForSelector({ text: 'Approve & install' });
+
+        await driver.clickElement({
+          text: 'Approve & install',
+          tag: 'button',
+        });
+
+        // wait for permissions popover, click checkboxes and confirm
+        await driver.delay(1000);
+        await driver.clickElement('#key-access-bip32-m-44h-0h-secp256k1-0');
+        await driver.clickElement('#key-access-bip32-m-44h-0h-ed25519-0');
+        await driver.clickElement({
+          text: 'Confirm',
+          tag: 'button',
+        });
+
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
+        // switch back to test-snaps window
+        await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
+
+        const snapButton2 = await driver.findElement('#connectRpcSnap');
+        await driver.scrollToElement(snapButton2);
+        await driver.delay(1000);
+        await driver.clickElement('#connectRpcSnap');
+        await driver.delay(1000);
 
-        // approve install of snap
         windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
         );
+        await driver.clickElement({
+          text: 'Connect',
+          tag: 'button',
+        });
+
+        await driver.waitForSelector({ text: 'Approve & install' });
+
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
-        // switch back to test snaps page
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
         // wait for npm installation success
@@ -75,56 +119,14 @@ describe('Test Snap RPC', function () {
         });
 
         // click send inputs on test snap page
-        const snapButton2 = await driver.findElement('#sendRpc');
+        const snapButton3 = await driver.findElement('#sendRpc');
-        await driver.scrollToElement(snapButton2);
+        await driver.scrollToElement(snapButton3);
         await driver.delay(1000);
         await driver.clickElement('#sendRpc');
 
-        // approve and install part one
-        windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
-        await driver.clickElement({
-          text: 'Approve & install',
-          tag: 'button',
-        });
-
-        // wait for window to close
-        await driver.delay(2000);
-
-        // approve and install part two
-        windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
-        await driver.clickElement({
-          text: 'Approve & install',
-          tag: 'button',
-        });
-
-        // wait for permissions popover
-        await driver.waitForSelector({
-          text: 'Confirm',
-          tag: 'button',
-        });
-
-        // click checkboxes and confirm
-        await driver.clickElement('#key-access-bip32-m-44h-0h-secp256k1-0');
-        await driver.clickElement('#key-access-bip32-m-44h-0h-ed25519-0');
-        await driver.clickElement({
-          text: 'Confirm',
-          tag: 'button',
-        });
-
         // delay for result creation
         await driver.delay(2500);
 
-        // check the results of the custom confirm
-        windowHandles = await driver.waitUntilXWindowHandles(1, 1000, 10000);
-        await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
         const confirmResult = await driver.findElement('#rpcResult');
         assert.equal(
           await confirmResult.getText(),

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

@@ -53,26 +53,21 @@ describe('Test Snap TxInsights', function () {
           tag: 'button',
         });
 
-        // delay for npm installation
+        await driver.waitForSelector({ text: 'Approve & install' });
-        await driver.delay(2000);
 
-        // switch to metamask extension
-        windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
-
-        // approve install of snap
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
-        await driver.delay(1000);
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
 
         // switch to test-snaps page and get accounts
-        windowHandles = await driver.waitUntilXWindowHandles(1, 1000, 10000);
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
         await driver.clickElement('#getAccounts');
         await driver.delay(1000);

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

@@ -53,14 +53,9 @@ describe('Test Snap update', function () {
           text: 'Connect',
           tag: 'button',
         });
-        await driver.delay(2000);
 
-        // approve install of snap
+        await driver.waitForSelector({ text: 'Approve & install' });
-        windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
+
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
@@ -75,6 +70,13 @@ describe('Test Snap update', function () {
           tag: 'button',
         });
 
+        await driver.waitForSelector({ text: 'Ok' });
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
+
         // navigate to test snap page
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
@@ -101,16 +103,22 @@ describe('Test Snap update', function () {
           'MetaMask Notification',
           windowHandles,
         );
+
+        await driver.waitForSelector({ text: 'Approve & update' });
+
         await driver.clickElement({
           text: 'Approve & update',
           tag: 'button',
         });
 
-        // delay for npm installation
+        await driver.waitForSelector({ text: 'Ok' });
-        await driver.delay(2000);
+
+        await driver.clickElement({
+          text: 'Ok',
+          tag: 'button',
+        });
 
         // navigate to test snap page
-        windowHandles = await driver.waitUntilXWindowHandles(1, 1000, 10000);
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
         // look for the correct version text

ui/components/app/flask/install-error/index.js

@@ -0,0 +1 @@
+export { default } from './install-error';

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Box from '../../../ui/box/box';
+import {
+  AlignItems,
+  BLOCK_SIZES,
+  FLEX_DIRECTION,
+  FONT_WEIGHT,
+  JustifyContent,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
+import ActionableMessage from '../../../ui/actionable-message/actionable-message';
+import { Text } from '../../../component-library';
+
+const InstallError = ({ title, error }) => {
+  return (
+    <Box
+      flexDirection={FLEX_DIRECTION.COLUMN}
+      alignItems={AlignItems.center}
+      justifyContent={JustifyContent.center}
+      height={BLOCK_SIZES.FULL}
+      padding={2}
+    >
+      <Text fontWeight={FONT_WEIGHT.BOLD} variant={TextVariant.headingLg}>
+        {title}
+      </Text>
+      <Box padding={2}>
+        <ActionableMessage type="danger" message={error} />
+      </Box>
+    </Box>
+  );
+};
+
+InstallError.propTypes = {
+  title: PropTypes.node.isRequired,
+  error: PropTypes.string.isRequired,
+};
+
+export default InstallError;

ui/components/app/flask/snap-install-warning/snap-install-warning.js

@@ -4,10 +4,14 @@ import { produce } from 'immer';
 import classnames from 'classnames';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import CheckBox from '../../../ui/check-box/check-box.component';
-import Typography from '../../../ui/typography/typography';
+
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
+import {
+  TextVariant,
+  TEXT_ALIGN,
+} from '../../../../helpers/constants/design-system';
 import Popover from '../../../ui/popover';
 import Button from '../../../ui/button';
+import { Text } from '../../../component-library';
 
 /**
  * a very simple reducer using produce from Immer to keep checkboxes state manipulation
@@ -63,20 +67,23 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
   return (
     <Popover
       className="snap-install-warning"
-      title={t('areYouSure')}
+      title={t('snapInstallWarningHeading')}
+      centerTitle
       footer={<SnapInstallWarningFooter />}
       headerProps={{ padding: [6, 6, 0] }}
-      contentProps={{ padding: [6, 4] }}
+      contentProps={{
+        paddingLeft: [6, 4],
+        paddingRight: [6, 4],
+        paddingTop: 0,
+        paddingBottom: [6, 4],
+      }}
       footerProps={{ padding: [4, 6] }}
     >
-      <Typography
+      <Text paddingBottom={6} textAlign={TEXT_ALIGN.CENTER}>
-        variant={TypographyVariant.H6}
-        boxProps={{ paddingBottom: 4 }}
-      >
         {warnings.length > 1
           ? t('snapInstallWarningCheckPlural')
           : t('snapInstallWarningCheck')}
-      </Typography>
+      </Text>
       {warnings.map((warning, i) => (
         <div
           className={classnames('checkbox-label', {
@@ -89,7 +96,9 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
             id={warning.id}
             onClick={() => onCheckboxClicked(warning.id)}
           />
-          <label htmlFor={warning.id}>{warning.message}</label>
+          <label htmlFor={warning.id}>
+            <Text variant={TextVariant.bodySm}>{warning.message}</Text>
+          </label>
         </div>
       ))}
     </Popover>

ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { getSnapPrefix } from '@metamask/snaps-utils';
 import Chip from '../../../ui/chip';
 import Box from '../../../ui/box';
 import Typography from '../../../ui/typography';
@@ -11,20 +12,18 @@ import {
   TextColor,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { SNAPS_METADATA } from '../../../../../shared/constants/snaps';
+import {
-
+  getSnapName,
-const snapIdPrefixes = ['npm:', 'local:'];
+  removeSnapIdPrefix,
+} from '../../../../helpers/utils/util';
 
 const SnapsAuthorshipPill = ({ snapId, version, className }) => {
-  // @todo Use getSnapPrefix from snaps-monorepo when possible
   // 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 snapPrefix = snapIdPrefixes.find((prefix) =>
+  const snapPrefix = snapId && getSnapPrefix(snapId);
-    snapId?.startsWith(prefix),
+  const packageName = snapId && removeSnapIdPrefix(snapId);
-  );
-  const packageName = snapId?.replace(snapPrefix, '');
   const isNPM = snapPrefix === 'npm:';
   const url = isNPM
     ? `https://www.npmjs.com/package/${packageName}`
@@ -32,7 +31,7 @@ const SnapsAuthorshipPill = ({ snapId, version, className }) => {
   const icon = isNPM ? 'fab fa-npm fa-lg' : 'fas fa-code';
   const t = useI18nContext();
 
-  const friendlyName = SNAPS_METADATA[snapId]?.name ?? packageName;
+  const friendlyName = getSnapName(snapId);
 
   return (
     <a

ui/helpers/constants/routes.ts

@@ -36,6 +36,7 @@ const CONNECT_CONFIRM_PERMISSIONS_ROUTE = '/confirm-permissions';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 const CONNECT_SNAP_INSTALL_ROUTE = '/snap-install';
 const CONNECT_SNAP_UPDATE_ROUTE = '/snap-update';
+const CONNECT_SNAP_RESULT_ROUTE = '/snap-install-result';
 const NOTIFICATIONS_ROUTE = '/notifications';
 ///: END:ONLY_INCLUDE_IN
 const CONNECTED_ROUTE = '/connected';
@@ -211,6 +212,7 @@ export {
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   CONNECT_SNAP_INSTALL_ROUTE,
   CONNECT_SNAP_UPDATE_ROUTE,
+  CONNECT_SNAP_RESULT_ROUTE,
   NOTIFICATIONS_ROUTE,
   ///: END:ONLY_INCLUDE_IN
   CONNECTED_ROUTE,

ui/helpers/utils/permission.js

@@ -12,12 +12,15 @@ import {
   EndowmentPermissions,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../shared/constants/permissions';
-///: BEGIN:ONLY_INCLUDE_IN(flask)
-import { SNAPS_METADATA } from '../../../shared/constants/snaps';
-///: END:ONLY_INCLUDE_IN
 import { Icon, ICON_NAMES } from '../../components/component-library';
 import { Color } from '../constants/design-system';
-import { coinTypeToProtocolName, getSnapDerivationPathName } from './util'; // eslint-disable-line no-unused-vars
+///: BEGIN:ONLY_INCLUDE_IN(flask)
+import {
+  coinTypeToProtocolName,
+  getSnapDerivationPathName,
+  getSnapName,
+} from './util';
+///: END:ONLY_INCLUDE_IN
 
 const UNKNOWN_PERMISSION = Symbol('unknown');
 
@@ -148,7 +151,7 @@ const PERMISSION_DESCRIPTIONS = deepFreeze({
       rightIcon: null,
     };
     return Object.keys(snaps).map((snapId) => {
-      const friendlyName = SNAPS_METADATA[snapId]?.name;
+      const friendlyName = getSnapName(snapId);
       if (friendlyName) {
         return {
           ...baseDescription,

ui/helpers/utils/util.js

@@ -7,6 +7,9 @@ import { getFormattedIpfsUrl } from '@metamask/assets-controllers';
 import slip44 from '@metamask/slip44';
 import * as lodash from 'lodash';
 import bowser from 'bowser';
+///: BEGIN:ONLY_INCLUDE_IN(flask)
+import { getSnapPrefix } from '@metamask/snaps-utils';
+///: END:ONLY_INCLUDE_IN
 import { CHAIN_IDS } from '../../../shared/constants/network';
 import {
   toChecksumHexAddress,
@@ -20,7 +23,10 @@ import {
 import { Numeric } from '../../../shared/modules/Numeric';
 import { OUTDATED_BROWSER_VERSIONS } from '../constants/common';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
-import { SNAPS_DERIVATION_PATHS } from '../../../shared/constants/snaps';
+import {
+  SNAPS_DERIVATION_PATHS,
+  SNAPS_METADATA,
+} from '../../../shared/constants/snaps';
 ///: END:ONLY_INCLUDE_IN
 
 // formatData :: ( date: <Unix Timestamp> ) -> String
@@ -547,6 +553,12 @@ export function getSnapDerivationPathName(path, curve) {
 
   return pathMetadata?.name ?? null;
 }
+
+export const removeSnapIdPrefix = (snapId) =>
+  snapId.replace(getSnapPrefix(snapId), '');
+
+export const getSnapName = (snapId) =>
+  SNAPS_METADATA[snapId]?.name ?? removeSnapIdPrefix(snapId);
 ///: END:ONLY_INCLUDE_IN
 
 /**

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

@@ -1,14 +1,27 @@
 .snap-install {
   box-shadow: none;
 
-  .permissions-connect-permission-list {
+  .headers {
-    padding: 0 24px;
+    flex: 1;
 
-    .permission {
+    .permissions-connect-permission-list {
-      padding: 8px 0;
+      padding: 0 24px;
+
+      .permission {
+        padding: 8px 0;
+      }
+    }
+
+    .loader-container {
+      height: 100%;
+    }
+
+    &__permission-description {
+      border-bottom: 1px solid var(--color-border-default);
     }
   }
 
+
   .page-container__footer {
     width: 100%;
     margin-top: 12px;

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

@@ -3,7 +3,6 @@ import React, { useCallback, useState } from 'react';
 import { PageContainerFooter } from '../../../../components/ui/page-container';
 import PermissionsConnectPermissionList from '../../../../components/app/permissions-connect-permission-list';
 import PermissionsConnectFooter from '../../../../components/app/permissions-connect-footer';
-import PermissionConnectHeader from '../../../../components/app/permissions-connect-header';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import SnapInstallWarning from '../../../../components/app/flask/snap-install-warning';
 import Box from '../../../../components/ui/box/box';
@@ -13,13 +12,20 @@ import {
   BorderStyle,
   FLEX_DIRECTION,
   JustifyContent,
-  TypographyVariant,
+  TextVariant,
+  TEXT_ALIGN,
 } from '../../../../helpers/constants/design-system';
-import Typography from '../../../../components/ui/typography';
 import { getSnapInstallWarnings } from '../util';
+import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
+import InstallError from '../../../../components/app/flask/install-error/install-error';
+import SnapsAuthorshipPill from '../../../../components/app/flask/snaps-authorship-pill/snaps-authorship-pill';
+import { Text } from '../../../../components/component-library';
+import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
+import { getSnapName } from '../../../../helpers/utils/util';
 
 export default function SnapInstall({
   request,
+  requestState,
   approveSnapInstall,
   rejectSnapInstall,
   targetSubjectMetadata,
@@ -27,6 +33,7 @@ export default function SnapInstall({
   const t = useI18nContext();
 
   const [isShowingWarning, setIsShowingWarning] = useState(false);
+  const originMetadata = useOriginMetadata(request.metadata?.dappOrigin) || {};
 
   const onCancel = useCallback(
     () => rejectSnapInstall(request.metadata.id),
@@ -38,17 +45,37 @@ export default function SnapInstall({
     [request, approveSnapInstall],
   );
 
+  const hasError = !requestState.loading && requestState.error;
+
+  const isLoading = requestState.loading;
+
   const hasPermissions =
-    request?.permissions && Object.keys(request.permissions).length > 0;
+    !hasError &&
+    requestState?.permissions &&
+    Object.keys(requestState.permissions).length > 0;
+
+  const isEmpty = !isLoading && !hasError && !hasPermissions;
 
   const warnings = getSnapInstallWarnings(
-    request?.permissions ?? {},
+    requestState?.permissions ?? {},
     targetSubjectMetadata,
     t,
   );
 
   const shouldShowWarning = warnings.length > 0;
 
+  const snapName = getSnapName(targetSubjectMetadata.origin);
+
+  const handleSubmit = () => {
+    if (!hasError && shouldShowWarning) {
+      setIsShowingWarning(true);
+    } else if (hasError) {
+      onCancel();
+    } else {
+      onSubmit();
+    }
+  };
+
   return (
     <Box
       className="page-container snap-install"
@@ -62,32 +89,66 @@ export default function SnapInstall({
         alignItems={AlignItems.center}
         flexDirection={FLEX_DIRECTION.COLUMN}
       >
-        <PermissionConnectHeader
+        <SnapsAuthorshipPill
-          icon={targetSubjectMetadata.iconUrl}
+          snapId={targetSubjectMetadata.origin}
-          iconName={targetSubjectMetadata.name}
+          version={targetSubjectMetadata.version}
-          headerTitle={t('snapInstall')}
-          headerText={null} // TODO(ritave): Add header text when snaps support description
-          siteOrigin={targetSubjectMetadata.origin}
-          isSnapInstallOrUpdate
-          snapVersion={targetSubjectMetadata.version}
-          boxProps={{ alignItems: AlignItems.center }}
         />
+        {!hasError && (
+          <Text padding={[4, 4, 0, 4]} variant={TextVariant.headingLg}>
+            {t('snapInstall')}
+          </Text>
+        )}
+        {isLoading && (
+          <Box
+            className="loader-container"
+            flexDirection={FLEX_DIRECTION.COLUMN}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.center}
+          >
+            <PulseLoader />
+          </Box>
+        )}
+        {hasError && (
+          <InstallError error={requestState.error} title={t('requestFailed')} />
+        )}
         {hasPermissions && (
           <>
-            <Typography
+            <Text
-              boxProps={{
+              className="headers__permission-description"
-                padding: [4, 4, 0, 4],
+              paddingLeft={4}
-              }}
+              paddingRight={4}
-              variant={TypographyVariant.H7}
+              paddingBottom={4}
-              as="span"
+              textAlign={TEXT_ALIGN.CENTER}
             >
-              {t('snapRequestsPermission')}
+              {t('snapInstallRequestsPermission', [
-            </Typography>
+                <b key="1">{originMetadata?.hostname}</b>,
+                <b key="2">{snapName}</b>,
+              ])}
+            </Text>
             <PermissionsConnectPermissionList
-              permissions={request.permissions || {}}
+              permissions={requestState.permissions || {}}
             />
           </>
         )}
+        {isEmpty && (
+          <Box
+            flexDirection={FLEX_DIRECTION.COLUMN}
+            height={BLOCK_SIZES.FULL}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.center}
+          >
+            <Text
+              paddingLeft={4}
+              paddingRight={4}
+              textAlign={TEXT_ALIGN.CENTER}
+            >
+              {t('snapInstallRequest', [
+                <b key="1">{originMetadata?.hostname}</b>,
+                <b key="2">{snapName}</b>,
+              ])}
+            </Text>
+          </Box>
+        )}
       </Box>
       <Box
         className="footers"
@@ -99,12 +160,15 @@ export default function SnapInstall({
         </Box>
         <PageContainerFooter
           cancelButtonType="default"
+          hideCancel={hasError}
+          disabled={isLoading}
           onCancel={onCancel}
           cancelText={t('cancel')}
-          onSubmit={
+          onSubmit={handleSubmit}
-            shouldShowWarning ? () => setIsShowingWarning(true) : onSubmit
+          submitText={t(
-          }
+            // eslint-disable-next-line no-nested-ternary
-          submitText={t(hasPermissions ? 'approveAndInstall' : 'install')}
+            hasError ? 'ok' : hasPermissions ? 'approveAndInstall' : 'install',
+          )}
         />
       </Box>
       {isShowingWarning && (
@@ -120,6 +184,7 @@ export default function SnapInstall({
 
 SnapInstall.propTypes = {
   request: PropTypes.object.isRequired,
+  requestState: PropTypes.object.isRequired,
   approveSnapInstall: PropTypes.func.isRequired,
   rejectSnapInstall: PropTypes.func.isRequired,
   targetSubjectMetadata: PropTypes.shape({

ui/pages/permissions-connect/flask/snap-result/index.js

@@ -0,0 +1 @@
+export { default } from './snap-result';

ui/pages/permissions-connect/flask/snap-result/index.scss

@@ -0,0 +1,16 @@
+.snap-result {
+  box-shadow: none;
+
+  .headers {
+    flex: 1;
+
+    .loader-container {
+      height: 100%;
+    }
+  }
+
+  .page-container__footer {
+    width: 100%;
+    margin-top: 12px;
+  }
+}

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

@@ -0,0 +1,128 @@
+import PropTypes from 'prop-types';
+import React, { useCallback } from 'react';
+import { PageContainerFooter } from '../../../../components/ui/page-container';
+
+import PermissionsConnectFooter from '../../../../components/app/permissions-connect-footer';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+
+import Box from '../../../../components/ui/box/box';
+import {
+  AlignItems,
+  BLOCK_SIZES,
+  BorderStyle,
+  FLEX_DIRECTION,
+  FONT_WEIGHT,
+  JustifyContent,
+  TextVariant,
+  TEXT_ALIGN,
+} from '../../../../helpers/constants/design-system';
+import { Text } from '../../../../components/component-library';
+import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
+import InstallError from '../../../../components/app/flask/install-error/install-error';
+import SnapsAuthorshipPill from '../../../../components/app/flask/snaps-authorship-pill/snaps-authorship-pill';
+import { getSnapName } from '../../../../helpers/utils/util';
+
+export default function SnapResult({
+  request,
+  requestState,
+  approveSnapResult,
+  targetSubjectMetadata,
+}) {
+  const t = useI18nContext();
+
+  const onSubmit = useCallback(
+    () => approveSnapResult(request.metadata.id),
+    [request, approveSnapResult],
+  );
+
+  const hasError = !requestState.loading && requestState.error;
+
+  const isLoading = requestState.loading;
+
+  const snapName = getSnapName(targetSubjectMetadata.origin);
+
+  return (
+    <Box
+      className="page-container snap-result"
+      justifyContent={JustifyContent.spaceBetween}
+      height={BLOCK_SIZES.FULL}
+      borderStyle={BorderStyle.none}
+      flexDirection={FLEX_DIRECTION.COLUMN}
+    >
+      <Box
+        className="headers"
+        alignItems={AlignItems.center}
+        flexDirection={FLEX_DIRECTION.COLUMN}
+      >
+        <SnapsAuthorshipPill
+          snapId={targetSubjectMetadata.origin}
+          version={targetSubjectMetadata.version}
+        />
+        {isLoading && (
+          <Box
+            className="loader-container"
+            flexDirection={FLEX_DIRECTION.COLUMN}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.center}
+          >
+            <PulseLoader />
+          </Box>
+        )}
+        {!isLoading && !hasError && (
+          <Box
+            flexDirection={FLEX_DIRECTION.COLUMN}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.center}
+            height={BLOCK_SIZES.FULL}
+            padding={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')}
+          />
+        )}
+      </Box>
+      <Box
+        className="footers"
+        alignItems={AlignItems.center}
+        flexDirection={FLEX_DIRECTION.COLUMN}
+      >
+        <Box className="snap-install__footer--no-source-code" paddingTop={4}>
+          <PermissionsConnectFooter />
+        </Box>
+        <PageContainerFooter
+          hideCancel
+          disabled={isLoading}
+          onSubmit={onSubmit}
+          submitText={t('ok')}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+SnapResult.propTypes = {
+  request: PropTypes.object.isRequired,
+  requestState: PropTypes.object.isRequired,
+  approveSnapResult: PropTypes.func.isRequired,
+  targetSubjectMetadata: PropTypes.shape({
+    iconUrl: PropTypes.string,
+    name: PropTypes.string,
+    origin: PropTypes.string.isRequired,
+    sourceCode: PropTypes.string,
+    version: PropTypes.string,
+  }).isRequired,
+};

ui/pages/permissions-connect/flask/snap-update/index.scss

@@ -1,13 +1,25 @@
 .snap-update {
   box-shadow: none;
 
-  .update-snap-permission-list {
+  .headers {
-    padding: 0 24px;
+    flex: 1;
 
-    .new-permission,
+    .loader-container {
-    .approved-permission,
+      height: 100%;
-    .revoked-permission {
+    }
-      padding: 8px 0;
+
+    .update-snap-permission-list {
+      padding: 0 24px;
+
+      .new-permission,
+      .approved-permission,
+      .revoked-permission {
+        padding: 8px 0;
+      }
+    }
+
+    &__permission-description {
+      border-bottom: 1px solid var(--color-border-default);
     }
   }
 

ui/pages/permissions-connect/flask/snap-update/snap-update.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 import { PageContainerFooter } from '../../../../components/ui/page-container';
 import PermissionsConnectFooter from '../../../../components/app/permissions-connect-footer';
-import PermissionConnectHeader from '../../../../components/app/permissions-connect-header';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import SnapInstallWarning from '../../../../components/app/flask/snap-install-warning';
 import Box from '../../../../components/ui/box/box';
@@ -12,14 +11,22 @@ import {
   BorderStyle,
   FLEX_DIRECTION,
   JustifyContent,
-  TypographyVariant,
+  TextVariant,
+  TEXT_ALIGN,
 } from '../../../../helpers/constants/design-system';
-import Typography from '../../../../components/ui/typography';
+
 import UpdateSnapPermissionList from '../../../../components/app/flask/update-snap-permission-list';
 import { getSnapInstallWarnings } from '../util';
+import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
+import InstallError from '../../../../components/app/flask/install-error/install-error';
+import SnapsAuthorshipPill from '../../../../components/app/flask/snaps-authorship-pill/snaps-authorship-pill';
+import { Text } from '../../../../components/component-library';
+import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
+import { getSnapName } from '../../../../helpers/utils/util';
 
 export default function SnapUpdate({
   request,
+  requestState,
   approveSnapUpdate,
   rejectSnapUpdate,
   targetSubjectMetadata,
@@ -27,6 +34,7 @@ export default function SnapUpdate({
   const t = useI18nContext();
 
   const [isShowingWarning, setIsShowingWarning] = useState(false);
+  const originMetadata = useOriginMetadata(request.metadata?.dappOrigin) || {};
 
   const onCancel = useCallback(
     () => rejectSnapUpdate(request.metadata.id),
@@ -38,14 +46,21 @@ export default function SnapUpdate({
     [request, approveSnapUpdate],
   );
 
-  const approvedPermissions = request.approvedPermissions ?? {};
+  const approvedPermissions = requestState.approvedPermissions ?? {};
-  const revokedPermissions = request.unusedPermissions ?? {};
+  const revokedPermissions = requestState.unusedPermissions ?? {};
-  const newPermissions = request.newPermissions ?? {};
+  const newPermissions = requestState.newPermissions ?? {};
+
+  const isLoading = requestState.loading;
+  const hasError = !isLoading && requestState.error;
+
   const hasPermissions =
+    !hasError &&
     Object.keys(approvedPermissions).length +
       Object.keys(revokedPermissions).length +
       Object.keys(newPermissions).length >
-    0;
+      0;
+
+  const isEmpty = !isLoading && !hasError && !hasPermissions;
 
   const warnings = getSnapInstallWarnings(
     newPermissions,
@@ -55,6 +70,18 @@ export default function SnapUpdate({
 
   const shouldShowWarning = warnings.length > 0;
 
+  const snapName = getSnapName(targetSubjectMetadata.origin);
+
+  const handleSubmit = () => {
+    if (!hasError && shouldShowWarning) {
+      setIsShowingWarning(true);
+    } else if (hasError) {
+      onCancel();
+    } else {
+      onSubmit();
+    }
+  };
+
   return (
     <Box
       className="page-container snap-update"
@@ -68,36 +95,42 @@ export default function SnapUpdate({
         alignItems={AlignItems.center}
         flexDirection={FLEX_DIRECTION.COLUMN}
       >
-        <PermissionConnectHeader
+        <SnapsAuthorshipPill
-          icon={targetSubjectMetadata.iconUrl}
+          snapId={targetSubjectMetadata.origin}
-          iconName={targetSubjectMetadata.name}
+          version={requestState.newVersion}
-          headerTitle={t('snapUpdate')}
-          headerText={null} // TODO(ritave): Add header text when snaps support description
-          siteOrigin={request.snapId}
-          isSnapInstallOrUpdate
-          snapVersion={request.newVersion}
-          boxProps={{ alignItems: AlignItems.center }}
         />
-        <Typography
+        {!hasError && (
-          boxProps={{
+          <Text padding={[4, 4, 0, 4]} variant={TextVariant.headingLg}>
-            padding: [4, 4, 0, 4],
+            {t('snapUpdate')}
-          }}
+          </Text>
-          variant={TypographyVariant.H7}
+        )}
-          as="span"
+        {isLoading && (
-        >
+          <Box
-          {t('snapUpdateExplanation', [`${request.metadata.dappOrigin}`])}
+            className="loader-container"
-        </Typography>
+            flexDirection={FLEX_DIRECTION.COLUMN}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.center}
+          >
+            <PulseLoader />
+          </Box>
+        )}
+        {hasError && (
+          <InstallError error={requestState.error} title={t('requestFailed')} />
+        )}
         {hasPermissions && (
           <>
-            <Typography
+            <Text
-              boxProps={{
+              className="headers__permission-description"
-                padding: [2, 4, 0, 4],
+              paddingLeft={4}
-              }}
+              paddingRight={4}
-              variant={TypographyVariant.H7}
+              paddingBottom={4}
-              as="span"
+              textAlign={TEXT_ALIGN.CENTER}
             >
-              {t('snapRequestsPermission')}
+              {t('snapUpdateRequestsPermission', [
-            </Typography>
+                <b key="1">{originMetadata?.hostname}</b>,
+                <b key="2">{snapName}</b>,
+              ])}
+            </Text>
             <UpdateSnapPermissionList
               approvedPermissions={approvedPermissions}
               revokedPermissions={revokedPermissions}
@@ -105,6 +138,25 @@ export default function SnapUpdate({
             />
           </>
         )}
+        {isEmpty && (
+          <Box
+            flexDirection={FLEX_DIRECTION.COLUMN}
+            height={BLOCK_SIZES.FULL}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.center}
+          >
+            <Text
+              paddingLeft={4}
+              paddingRight={4}
+              textAlign={TEXT_ALIGN.CENTER}
+            >
+              {t('snapUpdateRequest', [
+                <b key="1">{originMetadata?.hostname}</b>,
+                <b key="2">{snapName}</b>,
+              ])}
+            </Text>
+          </Box>
+        )}
       </Box>
       <Box
         className="footers"
@@ -116,12 +168,15 @@ export default function SnapUpdate({
         </Box>
         <PageContainerFooter
           cancelButtonType="default"
+          hideCancel={hasError}
+          disabled={isLoading}
           onCancel={onCancel}
           cancelText={t('cancel')}
-          onSubmit={
+          onSubmit={handleSubmit}
-            shouldShowWarning ? () => setIsShowingWarning(true) : onSubmit
+          submitText={t(
-          }
+            // eslint-disable-next-line no-nested-ternary
-          submitText={t('approveAndUpdate')}
+            hasError ? 'ok' : hasPermissions ? 'approveAndUpdate' : 'update',
+          )}
         />
       </Box>
       {isShowingWarning && (
@@ -138,6 +193,7 @@ export default function SnapUpdate({
 
 SnapUpdate.propTypes = {
   request: PropTypes.object.isRequired,
+  requestState: PropTypes.object.isRequired,
   approveSnapUpdate: PropTypes.func.isRequired,
   rejectSnapUpdate: PropTypes.func.isRequired,
   targetSubjectMetadata: PropTypes.shape({

ui/pages/permissions-connect/flask/util.js

@@ -1,5 +1,16 @@
-import { flatMap } from '@metamask/snaps-utils';
+import React from 'react';
-import { coinTypeToProtocolName } from '../../../helpers/utils/util';
+import { Text } from '../../../components/component-library';
+import {
+  Color,
+  FONT_WEIGHT,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+
+import {
+  coinTypeToProtocolName,
+  getSnapName,
+  getSnapDerivationPathName,
+} from '../../../helpers/utils/util';
 
 export function getSnapInstallWarnings(permissions, targetSubjectMetadata, t) {
   const bip32EntropyPermissions =
@@ -15,24 +26,45 @@ export function getSnapInstallWarnings(permissions, targetSubjectMetadata, t) {
       .map(([, value]) => value);
 
   return [
-    ...flatMap(bip32EntropyPermissions, (permission, i) =>
+    ...bip32EntropyPermissions.flatMap((permission, i) =>
       permission.caveats[0].value.map(({ path, curve }) => ({
         id: `key-access-bip32-${path
           .join('-')
           .replace(/'/gu, 'h')}-${curve}-${i}`,
         message: t('snapInstallWarningKeyAccess', [
-          targetSubjectMetadata.name,
+          <Text
-          `${path.join('/')} (${curve})`,
+            key="1"
+            color={Color.primaryDefault}
+            fontWeight={FONT_WEIGHT.BOLD}
+            variant={TextVariant.bodySm}
+            as="span"
+          >
+            {getSnapName(targetSubjectMetadata.origin)}
+          </Text>,
+          <b key="2">
+            {getSnapDerivationPathName(path, curve) ??
+              `${path.join('/')} (${curve})`}
+          </b>,
         ]),
       })),
     ),
-    ...flatMap(bip44EntropyPermissions, (permission, i) =>
+    ...bip44EntropyPermissions.flatMap((permission, i) =>
       permission.caveats[0].value.map(({ coinType }) => ({
         id: `key-access-bip44-${coinType}-${i}`,
         message: t('snapInstallWarningKeyAccess', [
-          targetSubjectMetadata.name,
+          <Text
-          coinTypeToProtocolName(coinType) ||
+            key="1"
-            t('unrecognizedProtocol', [coinType]),
+            color={Color.primaryDefault}
+            fontWeight={FONT_WEIGHT.BOLD}
+            variant={TextVariant.bodySm}
+            as="span"
+          >
+            {getSnapName(targetSubjectMetadata.origin)}
+          </Text>,
+          <b key="2">
+            {coinTypeToProtocolName(coinType) ||
+              t('unrecognizedProtocol', [coinType])}
+          </b>,
         ]),
       })),
     ),

ui/pages/permissions-connect/index.scss

@@ -1,6 +1,7 @@
 @import 'choose-account/index';
 @import 'flask/snap-install/index';
 @import 'flask/snap-update/index';
+@import 'flask/snap-result/index';
 @import 'redirect/index';
 
 .permissions-connect {

ui/pages/permissions-connect/permissions-connect.component.js

@@ -19,6 +19,7 @@ import PermissionsRedirect from './redirect';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import SnapInstall from './flask/snap-install';
 import SnapUpdate from './flask/snap-update';
+import SnapResult from './flask/snap-result';
 ///: END:ONLY_INCLUDE_IN
 
 const APPROVE_TIMEOUT = MILLISECOND * 1200;
@@ -44,7 +45,9 @@ export default class PermissionConnect extends Component {
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
     snapInstallPath: PropTypes.string.isRequired,
     snapUpdatePath: PropTypes.string.isRequired,
-    isSnap: PropTypes.bool.isRequired,
+    snapResultPath: PropTypes.string.isRequired,
+    requestType: PropTypes.string.isRequired,
+    requestState: PropTypes.object.isRequired,
     approvePendingApproval: PropTypes.func.isRequired,
     rejectPendingApproval: PropTypes.func.isRequired,
     ///: END:ONLY_INCLUDE_IN
@@ -102,7 +105,8 @@ export default class PermissionConnect extends Component {
       ///: BEGIN:ONLY_INCLUDE_IN(flask)
       snapInstallPath,
       snapUpdatePath,
-      isSnap,
+      snapResultPath,
+      requestType,
       ///: END:ONLY_INCLUDE_IN
       getRequestAccountTabIds,
       permissionsRequest,
@@ -123,13 +127,20 @@ export default class PermissionConnect extends Component {
 
     if (history.location.pathname === connectPath && !isRequestingAccounts) {
       ///: BEGIN:ONLY_INCLUDE_IN(flask)
-      if (isSnap) {
+
-        history.push(
+      switch (requestType) {
-          permissionsRequest.newPermissions ? snapUpdatePath : snapInstallPath,
+        case 'wallet_installSnap':
-        );
+          history.push(snapInstallPath);
-      } else {
+          break;
-        ///: END:ONLY_INCLUDE_IN
+        case 'wallet_updateSnap':
-        history.push(confirmPermissionPath);
+          history.push(snapUpdatePath);
+          break;
+        case 'wallet_installSnapResult':
+          history.push(snapResultPath);
+          break;
+        default:
+          ///: END:ONLY_INCLUDE_IN
+          history.push(confirmPermissionPath);
         ///: BEGIN:ONLY_INCLUDE_IN(flask)
       }
       ///: END:ONLY_INCLUDE_IN
@@ -171,8 +182,8 @@ export default class PermissionConnect extends Component {
       ///: BEGIN:ONLY_INCLUDE_IN(flask)
       snapInstallPath,
       snapUpdatePath,
-      isSnap,
+      snapResultPath,
-      permissionsRequest,
+      requestType,
       ///: END:ONLY_INCLUDE_IN
     } = this.props;
     this.setState(
@@ -183,30 +194,65 @@ export default class PermissionConnect extends Component {
       () => this.props.history.push(confirmPermissionPath),
       ///: END:ONLY_INCLUDE_IN
       ///: BEGIN:ONLY_INCLUDE_IN(flask)
-      () =>
+      () => {
-        this.props.history.push(
+        switch (requestType) {
-          // eslint-disable-next-line no-nested-ternary
+          case 'wallet_installSnap':
-          isSnap
+            this.props.history.push(snapInstallPath);
-            ? permissionsRequest.newPermissions
+            break;
-              ? snapUpdatePath
+          case 'wallet_updateSnap':
-              : snapInstallPath
+            this.props.history.push(snapUpdatePath);
-            : confirmPermissionPath,
+            break;
-        ),
+          case 'wallet_installSnapResult':
+            this.props.history.push(snapResultPath);
+            break;
+          default:
+            this.props.history.push(confirmPermissionPath);
+        }
+      },
       ///: END:ONLY_INCLUDE_IN
     );
   };
 
   redirect(approved) {
-    const { history } = this.props;
+    const {
+      history,
+      ///: BEGIN:ONLY_INCLUDE_IN(flask)
+      permissionsRequest,
+      ///: END:ONLY_INCLUDE_IN
+    } = this.props;
+
+    ///: BEGIN:ONLY_INCLUDE_IN(flask)
+    const isRequestingSnap =
+      permissionsRequest?.permissions &&
+      Object.keys(permissionsRequest.permissions).includes('wallet_snap');
+
+    const shouldRedirect = !isRequestingSnap;
+
+    this.setState({
+      redirecting: shouldRedirect,
+      permissionsApproved: approved,
+    });
+    ///: END:ONLY_INCLUDE_IN
+
+    ///: BEGIN:ONLY_INCLUDE_IN(main,beta)
     this.setState({
       redirecting: true,
       permissionsApproved: approved,
     });
+    ///: END:ONLY_INCLUDE_IN
     this.removeBeforeUnload();
 
+    ///: BEGIN:ONLY_INCLUDE_IN(flask)
+    if (shouldRedirect && approved) {
+      setTimeout(() => history.push(DEFAULT_ROUTE), APPROVE_TIMEOUT);
+    }
+    ///: END:ONLY_INCLUDE_IN
+    ///: BEGIN:ONLY_INCLUDE_IN(main,beta)
     if (approved) {
       setTimeout(() => history.push(DEFAULT_ROUTE), APPROVE_TIMEOUT);
-    } else {
+    }
+    ///: END:ONLY_INCLUDE_IN
+    else {
       history.push(DEFAULT_ROUTE);
     }
   }
@@ -268,6 +314,8 @@ export default class PermissionConnect extends Component {
       ///: BEGIN:ONLY_INCLUDE_IN(flask)
       snapInstallPath,
       snapUpdatePath,
+      snapResultPath,
+      requestState,
       approvePendingApproval,
       rejectPendingApproval,
       ///: END:ONLY_INCLUDE_IN
@@ -340,19 +388,22 @@ export default class PermissionConnect extends Component {
               render={() => (
                 <SnapInstall
                   request={permissionsRequest || {}}
+                  requestState={requestState || {}}
                   approveSnapInstall={(requestId) => {
                     approvePendingApproval(requestId, {
                       ...permissionsRequest,
+                      permissions: requestState.permissions,
                       approvedAccounts: [...selectedAccountAddresses],
                     });
-                    this.redirect(true);
+                    this.setState({ permissionsApproved: true });
                   }}
                   rejectSnapInstall={(requestId) => {
                     rejectPendingApproval(
                       requestId,
                       serializeError(ethErrors.provider.userRejectedRequest()),
                     );
-                    this.redirect(false);
+                    this.setState({ permissionsApproved: true });
+                    this.removeBeforeUnload();
                   }}
                   targetSubjectMetadata={targetSubjectMetadata}
                 />
@@ -370,19 +421,44 @@ export default class PermissionConnect extends Component {
               render={() => (
                 <SnapUpdate
                   request={permissionsRequest || {}}
+                  requestState={requestState || {}}
                   approveSnapUpdate={(requestId) => {
                     approvePendingApproval(requestId, {
                       ...permissionsRequest,
+                      permissions: requestState.permissions,
                       approvedAccounts: [...selectedAccountAddresses],
                     });
-                    this.redirect(true);
+                    this.setState({ permissionsApproved: true });
                   }}
                   rejectSnapUpdate={(requestId) => {
                     rejectPendingApproval(
                       requestId,
                       serializeError(ethErrors.provider.userRejectedRequest()),
                     );
-                    this.redirect(false);
+                    this.setState({ permissionsApproved: false });
+                    this.removeBeforeUnload();
+                  }}
+                  targetSubjectMetadata={targetSubjectMetadata}
+                />
+              )}
+            />
+            {
+              ///: END:ONLY_INCLUDE_IN
+            }
+            {
+              ///: BEGIN:ONLY_INCLUDE_IN(flask)
+            }
+            <Route
+              path={snapResultPath}
+              exact
+              render={() => (
+                <SnapResult
+                  request={permissionsRequest || {}}
+                  requestState={requestState || {}}
+                  approveSnapResult={(requestId) => {
+                    approvePendingApproval(requestId);
+                    this.setState({ permissionsApproved: true });
+                    this.removeBeforeUnload();
                   }}
                   targetSubjectMetadata={targetSubjectMetadata}
                 />

ui/pages/permissions-connect/permissions-connect.container.js

@@ -8,6 +8,8 @@ import {
   getSelectedAddress,
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   getSnapInstallOrUpdateRequests,
+  getRequestState,
+  getRequestType,
   ///: END:ONLY_INCLUDE_IN
   getTargetSubjectMetadata,
 } from '../../selectors';
@@ -30,6 +32,7 @@ import {
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   CONNECT_SNAP_INSTALL_ROUTE,
   CONNECT_SNAP_UPDATE_ROUTE,
+  CONNECT_SNAP_RESULT_ROUTE,
   ///: END:ONLY_INCLUDE_IN
 } from '../../helpers/constants/routes';
 import PermissionApproval from './permissions-connect.component';
@@ -72,6 +75,10 @@ const mapStateToProps = (state, ownProps) => {
 
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   const isSnap = targetSubjectMetadata.subjectType === SubjectType.Snap;
+
+  const requestType = getRequestType(state, permissionsRequestId);
+
+  const requestState = getRequestState(state, permissionsRequestId);
   ///: END:ONLY_INCLUDE_IN
 
   const accountsWithLabels = getAccountsWithLabels(state);
@@ -91,6 +98,7 @@ const mapStateToProps = (state, ownProps) => {
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   const snapInstallPath = `${CONNECT_ROUTE}/${permissionsRequestId}${CONNECT_SNAP_INSTALL_ROUTE}`;
   const snapUpdatePath = `${CONNECT_ROUTE}/${permissionsRequestId}${CONNECT_SNAP_UPDATE_ROUTE}`;
+  const snapResultPath = `${CONNECT_ROUTE}/${permissionsRequestId}${CONNECT_SNAP_RESULT_ROUTE}`;
   ///: END:ONLY_INCLUDE_IN
 
   let totalPages = 1 + isRequestingAccounts;
@@ -105,7 +113,11 @@ const mapStateToProps = (state, ownProps) => {
   } else if (pathname === confirmPermissionPath) {
     page = isRequestingAccounts ? '2' : '1';
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
-  } else if (pathname === snapInstallPath || pathname === snapUpdatePath) {
+  } else if (
+    pathname === snapInstallPath ||
+    pathname === snapUpdatePath ||
+    pathname === snapResultPath
+  ) {
     page = isRequestingAccounts ? '3' : '2';
     ///: END:ONLY_INCLUDE_IN
   } else {
@@ -115,9 +127,12 @@ const mapStateToProps = (state, ownProps) => {
   return {
     isRequestingAccounts,
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
-    isSnap,
+    requestType,
     snapInstallPath,
     snapUpdatePath,
+    snapResultPath,
+    requestState,
+    isSnap,
     ///: END:ONLY_INCLUDE_IN
     permissionsRequest,
     permissionsRequestId,

ui/selectors/permissions.js

@@ -310,7 +310,9 @@ export function getSnapInstallOrUpdateRequests(state) {
   return Object.values(state.metamask.pendingApprovals)
     .filter(
       ({ type }) =>
-        type === 'wallet_installSnap' || type === 'wallet_updateSnap',
+        type === 'wallet_installSnap' ||
+        type === 'wallet_updateSnap' ||
+        type === 'wallet_installSnapResult',
     )
     .map(({ requestData }) => requestData);
 }
@@ -334,3 +336,11 @@ export function getFirstPermissionRequest(state) {
 export function getPermissions(state, origin) {
   return getPermissionSubjects(state)[origin]?.permissions;
 }
+
+export function getRequestState(state, id) {
+  return state.metamask.pendingApprovals[id]?.requestState;
+}
+
+export function getRequestType(state, id) {
+  return state.metamask.pendingApprovals[id]?.type;
+}

ui/store/actions.ts

@@ -3696,6 +3696,7 @@ export function approvePermissionsRequest(
       if (err) {
         dispatch(displayWarning(err));
       }
+      forceUpdateMetamaskState(dispatch);
     });
   };
 }

yarn.lock

@@ -4002,9 +4002,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/key-tree@npm:^6.2.1":
+"@metamask/key-tree@npm:^7.0.0":
-  version: 6.2.1
+  version: 7.0.0
-  resolution: "@metamask/key-tree@npm:6.2.1"
+  resolution: "@metamask/key-tree@npm:7.0.0"
   dependencies:
     "@metamask/scure-bip39": ^2.1.0
     "@metamask/utils": ^3.3.0
@@ -4012,7 +4012,7 @@ __metadata:
     "@noble/hashes": ^1.0.0
     "@noble/secp256k1": ^1.5.5
     "@scure/base": ^1.0.0
-  checksum: 78931e20a2c933535c17d21e092dbc66e3e96f3c171a6814af51830b7774dd3b4059326180a3b1f52e48a258254a7ea70a31d0c335bf24a8c4250f8d196bc7ba
+  checksum: e3b8371ba41766e1936ff0b0b34c46b7a1297e51fe177246ae6446c4f15a6601a6ed4fc5d01d0594e8b1e9b1682096900f7ab4e7e15df94041ec025116a635b9
   languageName: node
   linkType: hard
 
@@ -4267,22 +4267,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/rpc-methods@npm:^0.30.0":
+"@metamask/rpc-methods@npm:^0.31.0":
-  version: 0.30.0
+  version: 0.31.0
-  resolution: "@metamask/rpc-methods@npm:0.30.0"
+  resolution: "@metamask/rpc-methods@npm:0.31.0"
   dependencies:
     "@metamask/browser-passworder": ^4.0.2
-    "@metamask/key-tree": ^6.2.1
+    "@metamask/key-tree": ^7.0.0
     "@metamask/permission-controller": ^3.0.0
-    "@metamask/snaps-ui": ^0.30.0
+    "@metamask/snaps-ui": ^0.31.0
-    "@metamask/snaps-utils": ^0.30.0
+    "@metamask/snaps-utils": ^0.31.0
     "@metamask/types": ^1.1.0
-    "@metamask/utils": ^3.4.1
+    "@metamask/utils": ^5.0.0
     "@noble/hashes": ^1.1.3
     eth-rpc-errors: ^4.0.2
     nanoid: ^3.1.31
     superstruct: ^1.0.3
-  checksum: ae584a2ea403653199c17e4fe43bdf26d25f2dbab8609e48f85d6a1def762526370e145cf69dc5649ee501f6e170ea27161b3d908c62ff1e9617af5e23564793
+  checksum: 73e7271279a3eff43f5bca46343d582a3f90f2eda3c8e4dcfc46e01f097be2222decf8a4d66aee3a8fc4fdc1b15de176460ea0f2a87ec99889a2c5456800879c
   languageName: node
   linkType: hard
 
@@ -4329,21 +4329,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/snaps-controllers@npm:^0.30.0":
+"@metamask/snaps-controllers@npm:^0.31.0":
-  version: 0.30.0
+  version: 0.31.0
-  resolution: "@metamask/snaps-controllers@npm:0.30.0"
+  resolution: "@metamask/snaps-controllers@npm:0.31.0"
   dependencies:
     "@metamask/approval-controller": ^2.0.0
     "@metamask/base-controller": ^2.0.0
     "@metamask/object-multiplex": ^1.1.0
     "@metamask/permission-controller": ^3.0.0
     "@metamask/post-message-stream": ^6.1.0
-    "@metamask/rpc-methods": ^0.30.0
+    "@metamask/rpc-methods": ^0.31.0
-    "@metamask/snaps-execution-environments": ^0.30.0
+    "@metamask/snaps-execution-environments": ^0.31.0
-    "@metamask/snaps-registry": ^1.1.0
+    "@metamask/snaps-registry": ^1.1.1
-    "@metamask/snaps-utils": ^0.30.0
+    "@metamask/snaps-utils": ^0.31.0
     "@metamask/subject-metadata-controller": ^2.0.0
-    "@metamask/utils": ^3.4.1
+    "@metamask/utils": ^5.0.0
     "@xstate/fsm": ^2.0.0
     concat-stream: ^2.0.0
     cron-parser: ^4.5.0
@@ -4356,61 +4356,61 @@ __metadata:
     pump: ^3.0.0
     readable-web-to-node-stream: ^3.0.2
     tar-stream: ^2.2.0
-  checksum: 022f875037fd058c237b8cba80e47a5ef222d379a073af4a35242e15c8c83ac902050ab8ae51a80536254b4ccb7e73b854c49b3ff5fac51154071da46d879e20
+  checksum: 6e3a69216a3dbcdef7702caf60795bd7bc25169e491d695a14638c0ce67dcfc67e509f8f29604d974d23cc132edf933e16d2859d4502455e805a2ffd9a366d12
   languageName: node
   linkType: hard
 
-"@metamask/snaps-execution-environments@npm:^0.30.0":
+"@metamask/snaps-execution-environments@npm:^0.31.0":
-  version: 0.30.0
+  version: 0.31.0
-  resolution: "@metamask/snaps-execution-environments@npm:0.30.0"
+  resolution: "@metamask/snaps-execution-environments@npm:0.31.0"
   dependencies:
     "@metamask/object-multiplex": ^1.2.0
     "@metamask/post-message-stream": ^6.1.0
     "@metamask/providers": ^10.2.0
-    "@metamask/rpc-methods": ^0.30.0
+    "@metamask/rpc-methods": ^0.31.0
-    "@metamask/snaps-utils": ^0.30.0
+    "@metamask/snaps-utils": ^0.31.0
-    "@metamask/utils": ^3.4.1
+    "@metamask/utils": ^5.0.0
     eth-rpc-errors: ^4.0.3
     json-rpc-engine: ^6.1.0
     pump: ^3.0.0
     ses: ^0.18.1
     stream-browserify: ^3.0.0
     superstruct: ^1.0.3
-  checksum: ee81caec7bf77703510983f62f3f2cf94753b624ba14691ff80ca30efab9a07ca329b278cd08323c72bcb3aeef7e78d089af4d35d14a469afc4f7bb8bc7e5fa7
+  checksum: 114b8370980868e3a8db650a9cac35a31f063d82621bbc7e052157a54ee96b60c26db260bcac904813b751fec103da5fe74af061d0c7dd3fb6c50dd975258350
   languageName: node
   linkType: hard
 
-"@metamask/snaps-registry@npm:^1.0.0, @metamask/snaps-registry@npm:^1.1.0":
+"@metamask/snaps-registry@npm:^1.1.1":
-  version: 1.1.0
+  version: 1.1.1
-  resolution: "@metamask/snaps-registry@npm:1.1.0"
+  resolution: "@metamask/snaps-registry@npm:1.1.1"
   dependencies:
-    "@metamask/utils": ^3.4.0
+    "@metamask/utils": ^5.0.0
     superstruct: ^1.0.3
-  checksum: a67a9e7a30a2f7bc55d130b278573aa2bf043ab5c5935704ab8166898dadf37557284412f9b653f9ed52059a557a51b8472aabbe6887a06922d5526ead12199b
+  checksum: 1e77c30af2955baf559160c1098f79a042196b23cd691448668672b4c8c3d92a0602061ab4c4f05b2f60310cfd81147c5e87ce80da6d4a48e45765d569132a77
   languageName: node
   linkType: hard
 
-"@metamask/snaps-ui@npm:^0.30.0":
+"@metamask/snaps-ui@npm:^0.31.0":
-  version: 0.30.0
+  version: 0.31.0
-  resolution: "@metamask/snaps-ui@npm:0.30.0"
+  resolution: "@metamask/snaps-ui@npm:0.31.0"
   dependencies:
-    "@metamask/utils": ^3.4.1
+    "@metamask/utils": ^5.0.0
     superstruct: ^1.0.3
-  checksum: a4612e08e830542b094bf995023221a24dfa45861d3ca919c1c11ae1bd3d6933789d40c667780145bcd3ff3053d0593e654ae1812ea9f3c7cc973d500cfb0a96
+  checksum: b4d7df0e3f3bd28c8cb958c72143d442c44f0ca4f02e226725b804e9f24c1d9a0f7d1d46818adb2969651d4a4626b57a80e669c9867f0dc3335fd85cf458c9a3
   languageName: node
   linkType: hard
 
-"@metamask/snaps-utils@npm:^0.30.0":
+"@metamask/snaps-utils@npm:^0.31.0":
-  version: 0.30.0
+  version: 0.31.0
-  resolution: "@metamask/snaps-utils@npm:0.30.0"
+  resolution: "@metamask/snaps-utils@npm:0.31.0"
   dependencies:
     "@babel/core": ^7.18.6
     "@babel/types": ^7.18.7
     "@metamask/permission-controller": ^3.0.0
     "@metamask/providers": ^10.2.1
-    "@metamask/snaps-registry": ^1.0.0
+    "@metamask/snaps-registry": ^1.1.1
-    "@metamask/snaps-ui": ^0.30.0
+    "@metamask/snaps-ui": ^0.31.0
-    "@metamask/utils": ^3.4.1
+    "@metamask/utils": ^5.0.0
     "@noble/hashes": ^1.1.3
     "@scure/base": ^1.1.1
     cron-parser: ^4.5.0
@@ -4422,7 +4422,7 @@ __metadata:
     ses: ^0.18.1
     superstruct: ^1.0.3
     validate-npm-package-name: ^5.0.0
-  checksum: 56334795dee7deeddd63badd35870ebb51ba5336071146bd6f48a9f7c1d703515241ac9371d7a4e054d77d7c6d06f34530e7b9439074339a46fea89920d32bce
+  checksum: 007dc6e08989b0a197cc84d95b29a194c3408a2f9e822a42c2060a1c842ff10c737cf8f5f0e8f8178a7ea7f98565cfc8e16eaa9181331b50b5dc13c3a80655cd
   languageName: node
   linkType: hard
 
@@ -4464,7 +4464,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/utils@npm:^3.0.1, @metamask/utils@npm:^3.0.3, @metamask/utils@npm:^3.3.0, @metamask/utils@npm:^3.3.1, @metamask/utils@npm:^3.4.0, @metamask/utils@npm:^3.4.1":
+"@metamask/utils@npm:^3.0.1, @metamask/utils@npm:^3.0.3, @metamask/utils@npm:^3.3.0, @metamask/utils@npm:^3.3.1, @metamask/utils@npm:^3.4.1":
   version: 3.6.0
   resolution: "@metamask/utils@npm:3.6.0"
   dependencies:
@@ -24280,7 +24280,7 @@ __metadata:
     "@metamask/forwarder": ^1.1.0
     "@metamask/gas-fee-controller": ^1.0.0
     "@metamask/jazzicon": ^2.0.0
-    "@metamask/key-tree": ^6.2.1
+    "@metamask/key-tree": ^7.0.0
     "@metamask/logo": ^3.1.1
     "@metamask/metamask-eth-abis": ^3.0.0
     "@metamask/notification-controller": ^1.0.0
@@ -24291,13 +24291,13 @@ __metadata:
     "@metamask/post-message-stream": ^6.0.0
     "@metamask/providers": ^10.2.1
     "@metamask/rate-limit-controller": ^1.0.0
-    "@metamask/rpc-methods": ^0.30.0
+    "@metamask/rpc-methods": ^0.31.0
     "@metamask/scure-bip39": ^2.0.3
     "@metamask/slip44": ^2.1.0
     "@metamask/smart-transactions-controller": ^3.1.0
-    "@metamask/snaps-controllers": ^0.30.0
+    "@metamask/snaps-controllers": ^0.31.0
-    "@metamask/snaps-ui": ^0.30.0
+    "@metamask/snaps-ui": ^0.31.0
-    "@metamask/snaps-utils": ^0.30.0
+    "@metamask/snaps-utils": ^0.31.0
     "@metamask/subject-metadata-controller": ^1.0.0
     "@metamask/test-dapp": ^5.6.0
     "@metamask/utils": ^5.0.0