Update entropy example and test-snaps to allow specifying entropy source

Author: Mrtenz

packages/examples/packages/get-entropy/snap.config.ts

@@ -2,7 +2,7 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  input: resolve(__dirname, 'src/index.ts'),
+  input: resolve(__dirname, 'src/index.tsx'),
   server: {
     port: 8009,
   },

packages/examples/packages/get-entropy/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "lmkCL1vKbBcM9oIiHMkfGq1P7CATFx/fksf+kvlv+eU=",
+    "shasum": "RAiYJUhEOg3GuNxpzlXbK6OVvBgLTtaS/R14t9oagY8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

…amples/packages/get-entropy/src/index.ts …mples/packages/get-entropy/src/index.tsxpackages/examples/packages/get-entropy/src/index.ts renamed to packages/examples/packages/get-entropy/src/index.tsx packages/examples/packages/get-entropy/src/index.ts renamed to packages/examples/packages/get-entropy/src/index.tsx

@@ -1,18 +1,15 @@
 import type { OnRpcRequestHandler } from '@metamask/snaps-sdk';
 import {
   DialogType,
-  panel,
-  text,
-  heading,
-  copyable,
-  UserRejectedRequestError,
   MethodNotFoundError,
+  UserRejectedRequestError,
 } from '@metamask/snaps-sdk';
+import { Box, Copyable, Heading, Text } from '@metamask/snaps-sdk/jsx';
 import { bytesToHex, stringToBytes } from '@metamask/utils';
 import { sign } from '@noble/bls12-381';
 
 import type { SignMessageParams } from './types';
-import { getEntropy } from './utils';
+import { getEntropy, getEntropySourceName } from './utils';
 
 /**
  * Handle incoming JSON-RPC requests from the dapp, sent through the
@@ -31,31 +28,40 @@ import { getEntropy } from './utils';
 export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
   switch (request.method) {
     case 'signMessage': {
-      const { message, salt } = request.params as SignMessageParams;
+      const { message, salt, source } = request.params as SignMessageParams;
 
       const approved = await snap.request({
         method: 'snap_dialog',
         params: {
           type: DialogType.Confirmation,
-          content: panel([
-            heading('Signature request'),
-            text(
-              'Do you want to sign the following message with snap entropy?',
-            ),
-            copyable(message),
-          ]),
+          content: (
+            <Box>
+              <Heading>Signature request</Heading>
+              <Text>
+                Do you want to sign the following message with Snap entropy, and
+                the entropy source "{await getEntropySourceName(source)}"?
+              </Text>
+              <Copyable value={message} />
+            </Box>
+          ),
         },
       });
 
       if (!approved) {
         throw new UserRejectedRequestError();
       }
 
-      const privateKey = await getEntropy(salt);
+      const privateKey = await getEntropy(salt, source);
       const newLocal = await sign(stringToBytes(message), privateKey);
       return bytesToHex(newLocal);
     }
 
+    case 'getEntropySources': {
+      return await snap.request({
+        method: 'snap_listEntropySources',
+      });
+    }
+
     default:
       throw new MethodNotFoundError({ method: request.method });
   }

packages/examples/packages/get-entropy/src/types.ts

@@ -15,4 +15,10 @@ export type SignMessageParams = {
    * Defaults to "Signing key".
    */
   salt?: string;
+
+  /**
+   * The entropy source to use for the signature. If not provided, the primary
+   * entropy source will be used.
+   */
+  source?: string | undefined;
 };

packages/examples/packages/get-entropy/src/utils.ts

@@ -13,17 +13,54 @@ import { remove0x } from '@metamask/utils';
  *
  * @param salt - The salt to use for the entropy derivation. Using a different
  * salt will result in completely different entropy being generated.
+ * @param source - The entropy source to use for the entropy derivation. If not
+ * provided, the primary entropy source will be used.
  * @returns The generated entropy, without the leading "0x".
  * @see https://docs.metamask.io/snaps/reference/rpc-api/#snap_getentropy
  */
-export async function getEntropy(salt = 'Signing key') {
+export async function getEntropy(
+  salt = 'Signing key',
+  source?: string | undefined,
+) {
   const entropy = await snap.request({
     method: 'snap_getEntropy',
     params: {
       version: 1,
       salt,
+      source,
     },
   });
 
   return remove0x(entropy);
 }
+
+/**
+ * Get the name of an entropy source by its ID using the
+ * `snap_listEntropySources` JSON-RPC method.
+ *
+ * If the ID is not provided, the name of the primary entropy source will be
+ * returned.
+ *
+ * @param id - The ID of the entropy source.
+ * @returns The name of the entropy source.
+ */
+export async function getEntropySourceName(id?: string | undefined) {
+  if (id) {
+    const sources = await snap.request({
+      method: 'snap_listEntropySources',
+    });
+
+    const source = sources.find((item) => item.id === id);
+    if (source) {
+      if (source.name.length > 0) {
+        return source.name;
+      }
+
+      return source.id;
+    }
+
+    return 'unknown source';
+  }
+
+  return 'primary source';
+}

packages/test-snaps/src/api.ts

@@ -16,6 +16,7 @@ declare global {
 
 export enum Tag {
   Accounts = 'Accounts',
+  EntropySources = 'Entropy Sources',
   InstalledSnaps = 'Installed Snaps',
   TestState = 'Test State',
   UnencryptedTestState = 'Unencrypted Test State',

packages/test-snaps/src/features/snaps/get-entropy/GetEntropy.tsx

@@ -1,6 +1,7 @@
 import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 
-import { SignMessage } from './components';
+import { EntropySources, SignMessage } from './components';
 import {
   GET_ENTROPY_PORT,
   GET_ENTROPY_SNAP_ID,
@@ -9,6 +10,8 @@ import {
 import { Snap } from '../../../components';
 
 export const GetEntropy: FunctionComponent = () => {
+  const [source, setSource] = useState<string | undefined>(undefined);
+
   return (
     <Snap
       name="Get Entropy Snap"
@@ -17,7 +20,8 @@ export const GetEntropy: FunctionComponent = () => {
       version={GET_ENTROPY_VERSION}
       testId="GetEntropySnap"
     >
-      <SignMessage />
+      <EntropySources onChange={setSource} />
+      <SignMessage source={source} />
     </Snap>
   );
 };

packages/test-snaps/src/features/snaps/get-entropy/components/EntropySources.tsx

@@ -0,0 +1,60 @@
+import type { EntropySource } from '@metamask/snaps-sdk';
+import type { ChangeEvent, FunctionComponent } from 'react';
+
+import { Result } from '../../../../components';
+import { useEntropySources } from '../hooks';
+
+export type EntropySourcesProps = {
+  onChange: (source: string) => void;
+};
+
+/**
+ * Get the name of the source.
+ *
+ * @param source - The source.
+ * @returns The name of the source.
+ */
+function getSourceName(source: EntropySource) {
+  const name = source.name.length === 0 ? source.id : source.name;
+
+  if (source.primary) {
+    return `${name} (primary)`;
+  }
+
+  return name;
+}
+
+export const EntropySources: FunctionComponent<EntropySourcesProps> = ({
+  onChange,
+}) => {
+  const entropySources = useEntropySources();
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <>
+      <h3 className="h5">Entropy source</h3>
+      <select
+        id="select-chain"
+        className="form-select mb-3"
+        onChange={handleChange}
+      >
+        <option value="" disabled={true}>
+          Select an entropy source
+        </option>
+        {entropySources?.map((source) => (
+          <option key={source.id} value={source.id}>
+            {getSourceName(source)}
+          </option>
+        ))}
+      </select>
+      <Result className="mb-3">
+        <pre id="entropySourcesResult" style={{ margin: 0 }}>
+          {JSON.stringify(entropySources, null, 2)}
+        </pre>
+      </Result>
+    </>
+  );
+};

packages/test-snaps/src/features/snaps/get-entropy/components/SignMessage.tsx

@@ -8,7 +8,13 @@ import { Result } from '../../../../components';
 import { getSnapId } from '../../../../utils';
 import { GET_ENTROPY_SNAP_ID, GET_ENTROPY_PORT } from '../constants';
 
-export const SignMessage: FunctionComponent = () => {
+export type SignMessageProps = {
+  source: string | undefined;
+};
+
+export const SignMessage: FunctionComponent<SignMessageProps> = ({
+  source,
+}) => {
   const [message, setMessage] = useState('');
   const [invokeSnap, { isLoading, data, error }] = useInvokeMutation();
 
@@ -24,6 +30,7 @@ export const SignMessage: FunctionComponent = () => {
       method: 'signMessage',
       params: {
         message,
+        ...(source !== undefined && { source }),
       },
     }).catch(logError);
   };

packages/test-snaps/src/features/snaps/get-entropy/components/index.ts

@@ -1 +1,2 @@
+export * from './EntropySources';
 export * from './SignMessage';