Enhance local development setup by adding lifecycle hooks permission and installing message signing snap if not present

Author: mj-kiwi

packages/gator-permissions-snap/snap.manifest.ts

@@ -5,7 +5,7 @@ import type { SnapManifest } from '@metamask/7715-permissions-shared/types';
 
 const kernelSnapId = process.env.KERNEL_SNAP_ID;
 const messageSnapId = process.env.MESSAGE_SIGNING_SNAP_ID;
-
+const snapEnv = process.env.SNAP_ENV;
 const manifest: SnapManifest = {
   version: '0.2.1',
   description: 'Grants 7715 permissions from a DeleGator smart account',
@@ -47,4 +47,9 @@ if (kernelSnapId) {
   };
 }
 
+if (snapEnv === 'local') {
+  // Grant lifecycle hooks permission in local development environment
+  manifest.initialPermissions['endowment:lifecycle-hooks'] = {};
+}
+
 export default manifest;

packages/gator-permissions-snap/src/index.ts

@@ -14,6 +14,7 @@ import {
   MethodNotFoundError,
   InvalidRequestError,
   InternalError,
+  OnInstallHandler,
 } from '@metamask/snaps-sdk';
 
 import { AccountApiClient } from './clients/accountApiClient';
@@ -37,6 +38,7 @@ import { TokenMetadataService } from './services/tokenMetadataService';
 import { TokenPricesService } from './services/tokenPricesService';
 import { createStateManager } from './stateManagement';
 import { UserEventDispatcher } from './userEventDispatcher';
+import { GetSnapsResponse } from '@metamask/7715-permissions-shared/types';
 
 const isStorePermissionsFeatureEnabled =
   process.env.STORE_PERMISSIONS_ENABLED === 'true';
@@ -228,3 +230,30 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
  */
 export const onUserInput: OnUserInputHandler =
   userEventDispatcher.createUserInputEventHandler();
+
+export const onInstall: OnInstallHandler = async () => {
+  /**
+   * Local Development Only
+   *
+   * The message signing snap must be installed and the gator permissions snap must
+   * have permission to communicate with the message signing snap, or the request is rejected.
+   *
+   * Since the message signing snap is preinstalled in production, and has
+   * initialConnections configured to automatically connect to the gator snap, this is not needed in production.
+   */
+  // eslint-disable-next-line no-restricted-globals
+  if (snapEnv === 'local' && isStorePermissionsFeatureEnabled) {
+    const installedSnaps = (await snap.request({
+      method: 'wallet_getSnaps',
+    })) as unknown as GetSnapsResponse;
+    if (!installedSnaps[messageSigningSnapId]) {
+      logger.debug('Installing local message signing snap');
+      await snap.request({
+        method: 'wallet_requestSnaps',
+        params: {
+          [messageSigningSnapId]: {},
+        },
+      });
+    }
+  }
+};

packages/site/src/components/Buttons.tsx

@@ -94,17 +94,6 @@ export const ConnectButton = (
   );
 };
 
-export const InstallButton = (
-  props: ComponentProps<typeof Button> & { $isInstalled?: boolean },
-) => {
-  return (
-    <Button {...props}>
-      <FlaskFox />
-      <ButtonText>{props.$isInstalled ? 'Installed' : 'Install'}</ButtonText>
-    </Button>
-  );
-};
-
 export const CustomMessageButton = (
   props: ComponentProps<typeof Button> & { $text?: string },
 ) => {

packages/site/src/pages/index.tsx

@@ -14,7 +14,6 @@ import * as chains from 'viem/chains';
 
 import {
   ConnectButton,
-  InstallButton,
   InstallFlaskButton,
   CustomMessageButton,
   Card,
@@ -33,11 +32,7 @@ import type {
   NativeTokenPeriodicPermissionRequest,
   ERC20TokenPeriodicPermissionRequest,
 } from '../components/permissions/types';
-import {
-  kernelSnapOrigin,
-  gatorSnapOrigin,
-  messageSigningSnapOrigin,
-} from '../config';
+import { kernelSnapOrigin, gatorSnapOrigin } from '../config';
 import {
   useMetaMask,
   useMetaMaskContext,
@@ -98,7 +93,6 @@ const Index = () => {
   const { isFlask, snapsDetected, installedSnaps, provider } = useMetaMask();
   const requestKernelSnap = useRequestSnap(kernelSnapOrigin);
   const requestPermissionSnap = useRequestSnap(gatorSnapOrigin);
-  const requestMessageSigningSnap = useRequestSnap(messageSigningSnapOrigin);
 
   const { delegateAccount } = useDelegateAccount({ chain: selectedChain });
   const { bundlerClient, getFeePerGas } = useBundlerClient({
@@ -122,9 +116,6 @@ const Index = () => {
 
   const isKernelSnapReady = Boolean(installedSnaps[kernelSnapOrigin]);
   const isGatorSnapReady = Boolean(installedSnaps[gatorSnapOrigin]);
-  const isMessageSigningSnapReady = Boolean(
-    installedSnaps[messageSigningSnapOrigin],
-  );
 
   const chainId = selectedChain.id;
   const [permissionType, setPermissionType] = useState('native-token-stream');
@@ -496,23 +487,6 @@ const Index = () => {
           />
         )}
 
-        <Card
-          content={{
-            title: 'Message Signing Snap',
-            description:
-              'Set up by installing and authorizing the message signing snap.',
-            button: (
-              <InstallButton
-                onClick={requestMessageSigningSnap}
-                disabled={!isMetaMaskReady || isMessageSigningSnapReady}
-                $isInstalled={isMessageSigningSnapReady}
-              />
-            ),
-          }}
-          fullWidth
-          disabled={!isMetaMaskReady}
-        />
-
         <Card
           content={{
             title: `${isKernelSnapReady ? 'Reconnect' : 'Connect'}(kernel)`,