chore: Bump Snaps packages (#17051)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This bumps Snaps packages to the latest version. Notable changes
include:
- Support for NFTs in the Snaps Asset API
- A feature flag to force local Snaps to be have like preinstalled Snaps
for development purposes
- Allow all children in `Row`

## **Related issues**

Fixes: #16696

Author: FrederikBolding

.js.env.example

@@ -154,3 +154,6 @@ export IOS_GOOGLE_REDIRECT_URI='com.googleusercontent.apps.615965109465-h6tp2h3c
 
 # Enable 7702 locally
 export MM_SMART_ACCOUNT_UI_ENABLED="true"
+
+# Preinstalled Snaps
+export FORCE_PREINSTALLED_SNAPS="false"

app/components/Snaps/SnapUICard/SnapUICard.tsx

@@ -33,6 +33,7 @@ export const SnapUICard: FunctionComponent<SnapUICardProps> = ({
     alignItems={AlignItems.center}
     // eslint-disable-next-line react-native/no-inline-styles
     style={{ flex: 1 }}
+    gap={8}
   >
     <Box
       gap={16}

app/components/Snaps/SnapUIFooterButton/SnapUIFooterButton.tsx

@@ -119,7 +119,7 @@ export const SnapUIFooterButton: FunctionComponent<SnapUIFooterButtonProps> = ({
         color={
           variant === ButtonVariants.Primary
             ? theme.colors.primary.inverse
-            : theme.colors.primary.default
+            : theme.colors.text.default
         }
       >
         {children}

app/components/Snaps/SnapUIRenderer/__snapshots__/SnapUIRenderer.test.ts.snap

@@ -139,7 +139,7 @@ exports[`SnapUIRenderer adds a footer if required 1`] = `
           accessibilityRole="text"
           style={
             {
-              "color": "#4459ff",
+              "color": "#121314",
               "fontFamily": "Geist Medium",
               "fontSize": 16,
               "letterSpacing": 0,
@@ -940,12 +940,14 @@ exports[`SnapUIRenderer renders complex nested components 1`] = `
               <View
                 alignItems="center"
                 flexDirection="row"
+                gap={8}
                 justifyContent="space-between"
                 style={
                   [
                     {
                       "alignItems": "center",
                       "flexDirection": "row",
+                      "gap": 8,
                       "justifyContent": "space-between",
                     },
                     {
@@ -1165,7 +1167,7 @@ exports[`SnapUIRenderer renders complex nested components 1`] = `
           accessibilityRole="text"
           style={
             {
-              "color": "#4459ff",
+              "color": "#121314",
               "fontFamily": "Geist Medium",
               "fontSize": 16,
               "letterSpacing": 0,
@@ -1417,7 +1419,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
           accessibilityRole="text"
           style={
             {
-              "color": "#4459ff",
+              "color": "#121314",
               "fontFamily": "Geist Medium",
               "fontSize": 16,
               "letterSpacing": 0,
@@ -2088,7 +2090,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
           accessibilityRole="text"
           style={
             {
-              "color": "#4459ff",
+              "color": "#121314",
               "fontFamily": "Geist Medium",
               "fontSize": 16,
               "letterSpacing": 0,

app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap

@@ -474,12 +474,14 @@ exports[`SnapUIForm will render with fields 1`] = `
                   <View
                     alignItems="center"
                     flexDirection="row"
+                    gap={8}
                     justifyContent="space-between"
                     style={
                       [
                         {
                           "alignItems": "center",
                           "flexDirection": "row",
+                          "gap": 8,
                           "justifyContent": "space-between",
                         },
                         {
@@ -909,12 +911,14 @@ exports[`SnapUIForm will render with fields 1`] = `
                                 <View
                                   alignItems="center"
                                   flexDirection="row"
+                                  gap={8}
                                   justifyContent="space-between"
                                   style={
                                     [
                                       {
                                         "alignItems": "center",
                                         "flexDirection": "row",
+                                        "gap": 8,
                                         "justifyContent": "space-between",
                                       },
                                       {
@@ -1057,12 +1061,14 @@ exports[`SnapUIForm will render with fields 1`] = `
                                 <View
                                   alignItems="center"
                                   flexDirection="row"
+                                  gap={8}
                                   justifyContent="space-between"
                                   style={
                                     [
                                       {
                                         "alignItems": "center",
                                         "flexDirection": "row",
+                                        "gap": 8,
                                         "justifyContent": "space-between",
                                       },
                                       {

app/components/Snaps/SnapUIRenderer/components/index.ts

@@ -16,6 +16,7 @@ import { form } from './form';
 import { icon } from './icon';
 import { field } from './field';
 import { section } from './section';
+import { selector } from './selector';
 import { spinner } from './spinner';
 import { skeleton } from './skeleton';
 import { address } from './address';
@@ -45,6 +46,7 @@ export const COMPONENT_MAPPING = {
   Field: field,
   Icon: icon,
   Section: section,
+  Selector: selector,
   Spinner: spinner,
   Skeleton: skeleton,
   Avatar: avatar,

app/core/Engine/controllers/snaps/snap-controller-init.test.ts

@@ -65,6 +65,7 @@ describe('SnapControllerInit', () => {
         disableSnapInstallation: true,
         requireAllowlist: true,
         useCaip25Permission: true,
+        forcePreinstalledSnaps: false,
       },
       getFeatureFlags: expect.any(Function),
       getMnemonicSeed: expect.any(Function),

app/core/Engine/controllers/snaps/snap-controller-init.ts

@@ -44,6 +44,10 @@ export const snapControllerInit: ControllerInitFunction<
   const disableSnapInstallation = process.env.METAMASK_BUILD_TYPE !== 'flask';
   const allowLocalSnaps = process.env.METAMASK_BUILD_TYPE === 'flask';
 
+  ///: BEGIN:ONLY_INCLUDE_IF(flask)
+  const forcePreinstalledSnaps = process.env.FORCE_PREINSTALLED_SNAPS === 'true';
+  ///: END:ONLY_INCLUDE_IF
+
   const encryptor = new Encryptor({
     keyDerivationOptions: LEGACY_DERIVATION_OPTIONS,
   });
@@ -103,6 +107,9 @@ export const snapControllerInit: ControllerInitFunction<
       disableSnapInstallation,
       requireAllowlist,
       useCaip25Permission: true,
+      ///: BEGIN:ONLY_INCLUDE_IF(flask)
+      forcePreinstalledSnaps,
+      ///: END:ONLY_INCLUDE_IF
     },
 
     // @ts-expect-error: `encryptorFactory` is not compatible with the expected

app/core/SnapKeyring/utils/snaps.ts

@@ -9,13 +9,32 @@ import {
 import { SnapKeyringBuilderMessenger } from '../types';
 import I18n from '../../../../locales/i18n';
 
+///: BEGIN:ONLY_INCLUDE_IF(flask)
+/**
+ * Whether to force local Snaps to be treated as preinstalled Snaps.
+ *
+ * This is used in development environments to allow Snaps to use features that
+ * are normally reserved for preinstalled Snaps.
+ */
+const FORCE_PREINSTALLED_SNAPS =
+  process.env.FORCE_PREINSTALLED_SNAPS === 'true';
+///: END:ONLY_INCLUDE_IF
+
 /**
  * Check if a Snap is a preinstalled Snap.
  *
  * @param snapId - Snap ID to verify.
  * @returns True if Snap is a preinstalled Snap, false otherwise.
  */
 export function isSnapPreinstalled(snapId: SnapId) {
+  ///: BEGIN:ONLY_INCLUDE_IF(flask)
+  // For development purposes, allow local Snaps to be treated as preinstalled
+  // Snaps if the `FORCE_PREINSTALLED_SNAPS` environment variable is enabled.
+  if (FORCE_PREINSTALLED_SNAPS && snapId.startsWith('local:')) {
+    return true;
+  }
+  ///: END:ONLY_INCLUDE_IF
+
   return PREINSTALLED_SNAPS.some((snap) => snap.snapId === snapId);
 }
 

package.json

@@ -241,11 +241,11 @@
     "@metamask/signature-controller": "^30.0.0",
     "@metamask/slip44": "^4.2.0",
     "@metamask/smart-transactions-controller": "^16.5.0",
-    "@metamask/snaps-controllers": "^14.0.2",
-    "@metamask/snaps-execution-environments": "^10.0.0",
+    "@metamask/snaps-controllers": "^14.1.0",
+    "@metamask/snaps-execution-environments": "^10.1.0",
     "@metamask/snaps-rpc-methods": "^13.3.0",
-    "@metamask/snaps-sdk": "^9.1.0",
-    "@metamask/snaps-utils": "^11.0.0",
+    "@metamask/snaps-sdk": "^9.2.0",
+    "@metamask/snaps-utils": "^11.1.0",
     "@metamask/solana-wallet-snap": "^1.35.2",
     "@metamask/solana-wallet-standard": "^0.5.0",
     "@metamask/stake-sdk": "^3.2.0",