fix(snap-simple-keyring): fix site build in monorepo context

- Remove icon from gatsby-plugin-manifest to avoid sharp native binary,
  which cannot run its install script in the monorepo's isolated
  node_modules (lavamoat allow-scripts only scans root node_modules)
- Add raw-loader to site devDependencies; gatsby-plugin-webfonts@2.3.2
  uses it via inline loader syntax but does not declare it as a dependency
- Add @metamask/keyring-snap-client to build:snaps:deps; the site depends
  on it and webpack fails to resolve it if its dist/ doesn't exist

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ccharly

package.json

@@ -17,7 +17,7 @@
     "build": "ts-bridge --project tsconfig.build.json",
     "build:clean": "yarn build --clean",
     "build:snaps": "yarn build:snaps:deps && yarn workspaces foreach --all --include '@metamask/snap-simple-keyring' --parallel --verbose run build",
-    "build:snaps:deps": "yarn workspaces foreach --all --include '@metamask/keyring-utils' --include '@metamask/keyring-api' --include '@metamask/keyring-snap-sdk' --topological --verbose run build",
+    "build:snaps:deps": "yarn workspaces foreach --all --include '@metamask/keyring-utils' --include '@metamask/keyring-api' --include '@metamask/keyring-snap-sdk' --include '@metamask/keyring-snap-client' --topological --verbose run build",
     "build:docs": "yarn foreach build:docs",
     "build:only-clean": "rimraf -g 'packages/*/dist'",
     "build:types": "tsc --build tsconfig.build.json --verbose",

packages/snaps/simple-keyring/packages/site/gatsby-config.ts

@@ -14,10 +14,24 @@ const config: GatsbyConfig = {
       resolve: 'gatsby-plugin-manifest',
       options: {
         name: 'Template Snap',
-        icon: 'src/assets/logo.svg',
         theme_color: '#6F4CFF',
         background_color: '#FFFFFF',
         display: 'standalone',
+        // Pre-built icons avoid sharp (native binary) which can't run its
+        // install script in the monorepo's isolated node_modules. Regenerate
+        // from src/assets/logo.svg if the icon changes.
+        icons: [
+          {
+            src: 'icons/icon-192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: 'icons/icon-512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+        ],
       },
     },
     {

packages/snaps/simple-keyring/packages/site/gatsby-ssr.tsx

@@ -4,6 +4,25 @@ import React, { StrictMode } from 'react';
 import { App } from './src/App';
 import { Root } from './src/Root';
 
+// Inject the favicon manually instead of relying on gatsby-plugin-manifest's
+// `icon` option, which uses sharp to resize images. sharp requires a native
+// binary that cannot be installed in the monorepo (lavamoat's allow-scripts
+// plugin only scans root node_modules, so packages isolated by
+// hoistingLimits: "workspaces" are invisible to it). The pre-built PNGs in
+// static/icons/ are committed directly and referenced here.
+export const onRenderBody: GatsbySSR['onRenderBody'] = ({
+  setHeadComponents,
+}) => {
+  setHeadComponents([
+    <link
+      key="favicon"
+      rel="icon"
+      type="image/png"
+      href="/icons/icon-192.png"
+    />,
+  ]);
+};
+
 export const wrapRootElement: GatsbySSR['wrapRootElement'] = ({ element }) => (
   <StrictMode>
     <Root>{element}</Root>

packages/snaps/simple-keyring/packages/site/package.json

@@ -86,6 +86,7 @@
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
     "gatsby-plugin-webfonts": "^2.3.2",
     "prettier": "^2.8.4",
+    "raw-loader": "^4.0.2",
     "react-scripts": "^5.0.1",
     "rimraf": "^4.4.0",
     "typescript": "^4.9.5"

packages/snaps/simple-keyring/packages/site/static/icons/icon-192.png

@@ -5500,6 +5500,7 @@ __metadata:
     gatsby-plugin-svgr: "npm:^3.0.0-beta.0"
     gatsby-plugin-webfonts: "npm:^2.3.2"
     prettier: "npm:^2.8.4"
+    raw-loader: "npm:^4.0.2"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-helmet: "npm:^6.1.0"