feat: remove local development hooks and add InstallButton component

Author: mj-kiwi

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

@@ -4,7 +4,6 @@
 import type { SnapManifest } from '@metamask/7715-permissions-shared/types';
 
 const kernelSnapId = process.env.KERNEL_SNAP_ID;
-const snapEnv = process.env.SNAP_ENV;
 
 const manifest: SnapManifest = {
   version: '0.2.1',
@@ -40,11 +39,6 @@ const manifest: SnapManifest = {
   manifestVersion: '0.1',
 };
 
-// Only include lifecycle hooks permission in local development
-if (snapEnv === 'local') {
-  manifest.initialPermissions['endowment:lifecycle-hooks'] = {};
-}
-
 if (kernelSnapId) {
   manifest.initialConnections = {
     [kernelSnapId]: {},

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

@@ -1,5 +1,4 @@
 /* eslint-disable no-restricted-globals */
-import type { GetSnapsResponse } from '@metamask/7715-permissions-shared/types';
 import { logger } from '@metamask/7715-permissions-shared/utils';
 import {
   AuthType,
@@ -8,7 +7,6 @@ import {
   UserStorage,
 } from '@metamask/profile-sync-controller/sdk';
 import {
-  type OnInstallHandler,
   type Json,
   type JsonRpcParams,
   type OnRpcRequestHandler,
@@ -219,36 +217,3 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
  */
 export const onUserInput: OnUserInputHandler =
   userEventDispatcher.createUserInputEventHandler();
-
-/**
- * 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') {
-  const installHandler: OnInstallHandler = async () => {
-    if (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]: {},
-          },
-        });
-      }
-    }
-  };
-
-  // Export onInstall for local development only
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (globalThis as any).onInstall = installHandler;
-}

packages/site/src/components/Buttons.tsx

@@ -94,6 +94,17 @@ 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

@@ -18,6 +18,7 @@ import * as chains from 'viem/chains';
 
 import {
   ConnectButton,
+  InstallButton,
   InstallFlaskButton,
   CustomMessageButton,
   Card,
@@ -29,6 +30,11 @@ import {
   NativeTokenPeriodicForm,
   ERC20TokenPeriodicForm,
 } from '../components/permissions';
+import {
+  kernelSnapOrigin,
+  gatorSnapOrigin,
+  messageSigningSnapOrigin,
+} from '../config';
 import {
   Container,
   Heading,
@@ -41,7 +47,6 @@ import {
   ResponseContainer,
   CopyButton,
 } from '../styles';
-import { kernelSnapOrigin, gatorSnapOrigin } from '../config';
 import {
   useMetaMask,
   useMetaMaskContext,
@@ -97,6 +102,8 @@ 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({
     chain: selectedChain,
@@ -124,6 +131,9 @@ 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');
@@ -175,13 +185,13 @@ const Index = () => {
     if (!delegateAccount) {
       throw new Error('Delegate account not found');
     }
-    
+
     // Generate a unique identifier for this redemption request
     const requestId = `redeem-${Date.now()}-${Math.random()}`;
-    
+
     // Add this request to pending requests
     setPendingPermissionRequests(prev => new Set(prev).add(requestId));
-    
+
     setReceipt(null);
     setPermissionResponseError(null);
 
@@ -267,10 +277,10 @@ const Index = () => {
 
     // Generate a unique identifier for this permission request
     const requestId = `${type}-${Date.now()}-${Math.random()}`;
-    
+
     // Add this request to pending requests
     setPendingPermissionRequests(prev => new Set(prev).add(requestId));
-    
+
     setPermissionResponse(null);
     setReceipt(null);
     setPermissionResponseError(null);
@@ -497,6 +507,23 @@ 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)`,