Add chain ID selector to test-snaps

Author: Mrtenz

packages/test-snaps/src/features/snaps/ethereum-provider/EthereumProvider.tsx

@@ -1,11 +1,13 @@
 import { logError } from '@metamask/snaps-utils';
+import { numberToHex } from '@metamask/utils';
 import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { Button, ButtonGroup } from 'react-bootstrap';
 
 import { useInvokeMutation } from '../../../api';
 import { Result, Snap } from '../../../components';
 import { getSnapId } from '../../../utils';
-import { SignMessage, SignTypedData } from './components';
+import { SignMessage, SignTypedData, SwitchChain } from './components';
 import {
   ETHEREUM_PROVIDER_SNAP_ID,
   ETHEREUM_PROVIDER_SNAP_PORT,
@@ -14,11 +16,15 @@ import {
 
 export const EthereumProvider: FunctionComponent = () => {
   const [invokeSnap, { isLoading, data, error }] = useInvokeMutation();
+  const [chainId, setChainId] = useState<number>(1);
 
   const handleSubmit = (method: string) => {
     invokeSnap({
       snapId: getSnapId(ETHEREUM_PROVIDER_SNAP_ID, ETHEREUM_PROVIDER_SNAP_PORT),
       method,
+      params: {
+        chainId: numberToHex(chainId),
+      },
     }).catch(logError);
   };
 
@@ -33,6 +39,7 @@ export const EthereumProvider: FunctionComponent = () => {
       version={ETHEREUM_PROVIDER_VERSION}
       testId="ethereum-provider"
     >
+      <SwitchChain onChange={setChainId} />
       <ButtonGroup>
         <Button
           variant="secondary"
@@ -59,8 +66,8 @@ export const EthereumProvider: FunctionComponent = () => {
           {JSON.stringify(error, null, 2)}
         </span>
       </Result>
-      <SignMessage />
-      <SignTypedData />
+      <SignMessage chainId={chainId} />
+      <SignTypedData chainId={chainId} />
     </Snap>
   );
 };

packages/test-snaps/src/features/snaps/ethereum-provider/components/SignMessage.tsx

@@ -1,4 +1,5 @@
 import { logError } from '@metamask/snaps-utils';
+import { numberToHex } from '@metamask/utils';
 import type { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useState } from 'react';
 import { Button, Form } from 'react-bootstrap';
@@ -11,7 +12,13 @@ import {
   ETHEREUM_PROVIDER_SNAP_PORT,
 } from '../constants';
 
-export const SignMessage: FunctionComponent = () => {
+export type SignMessageProps = {
+  chainId: number;
+};
+
+export const SignMessage: FunctionComponent<SignMessageProps> = ({
+  chainId,
+}) => {
   const [message, setMessage] = useState('');
   const [invokeSnap, { isLoading, data, error }] = useInvokeMutation();
 
@@ -27,6 +34,7 @@ export const SignMessage: FunctionComponent = () => {
       method: 'personalSign',
       params: {
         message,
+        chainId: numberToHex(chainId),
       },
     }).catch(logError);
   };

packages/test-snaps/src/features/snaps/ethereum-provider/components/SignTypedData.tsx

@@ -1,4 +1,5 @@
 import { logError } from '@metamask/snaps-utils';
+import { numberToHex } from '@metamask/utils';
 import type { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useState } from 'react';
 import { Button, Form } from 'react-bootstrap';
@@ -11,7 +12,13 @@ import {
   ETHEREUM_PROVIDER_SNAP_PORT,
 } from '../constants';
 
-export const SignTypedData: FunctionComponent = () => {
+export type SignTypedDataProps = {
+  chainId: number;
+};
+
+export const SignTypedData: FunctionComponent<SignTypedDataProps> = ({
+  chainId,
+}) => {
   const [message, setMessage] = useState('');
   const [invokeSnap, { isLoading, data, error }] = useInvokeMutation();
 
@@ -27,6 +34,7 @@ export const SignTypedData: FunctionComponent = () => {
       method: 'signTypedData',
       params: {
         message,
+        chainId: numberToHex(chainId),
       },
     }).catch(logError);
   };

packages/test-snaps/src/features/snaps/ethereum-provider/components/SwitchChain.tsx

@@ -0,0 +1,28 @@
+import type { ChangeEvent, FunctionComponent } from 'react';
+
+export type SwitchChainProps = {
+  onChange: (chainId: number) => void;
+};
+
+export const SwitchChain: FunctionComponent<SwitchChainProps> = ({
+  onChange,
+}) => {
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    onChange(Number(event.target.value));
+  };
+
+  return (
+    <>
+      <h3 className="h5">Select chain</h3>
+      <select
+        id="select-chain"
+        className="form-select mb-3"
+        onChange={handleChange}
+      >
+        <option value="1">Ethereum</option>
+        <option value="59144">Linea</option>
+        <option value="11155111">Sepolia</option>
+      </select>
+    </>
+  );
+};

packages/test-snaps/src/features/snaps/ethereum-provider/components/index.ts

@@ -1,2 +1,3 @@
 export * from './SignMessage';
 export * from './SignTypedData';
+export * from './SwitchChain';