feat: Add getChainId method to Ethereum provider example (#3407)

`net_version` seems to be mocked in the extension E2E environment, so we
can't use it to test the switch functionality.

---------

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>

Author: Mrtenz

packages/examples/packages/ethereum-provider/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "7i20r0cCFwMESzBcTMgRNOt82AjwHneiM6LtD7vXCGw=",
+    "shasum": "caZ/yWFuxoz8zSE78Anp+6/K1zhJ+CPEwuC63ujX86Q=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/ethereum-provider/src/index.test.ts

@@ -55,6 +55,20 @@ describe('onRpcRequest', () => {
     });
   });
 
+  describe('getChainId', () => {
+    const MOCK_CHAIN_ID = '0x01'; // Ethereum Mainnet
+
+    it('returns the current network version', async () => {
+      const { request } = await installSnap();
+
+      const response = await request({
+        method: 'getChainId',
+      });
+
+      expect(response).toRespondWith(MOCK_CHAIN_ID);
+    });
+  });
+
   describe('getAccounts', () => {
     it('returns the addresses granted access to by the user', async () => {
       const { request } = await installSnap();

packages/examples/packages/ethereum-provider/src/index.ts

@@ -64,6 +64,27 @@ async function getVersion() {
   return version;
 }
 
+/**
+ * Get the current chain ID using the `ethereum` global. This is essentially
+ * the same as the `window.ethereum` global, but does not have access to all
+ * methods.
+ *
+ * Note that using the `ethereum` global requires the
+ * `endowment:ethereum-provider` permission.
+ *
+ * @returns The current chain ID as a string.
+ * @see https://docs.metamask.io/snaps/reference/permissions/#endowmentethereum-provider
+ */
+async function getChainId() {
+  const chainId = await ethereum.request<string>({
+    method: 'eth_chainId',
+  });
+
+  assert(chainId, 'Ethereum provider did not return a chain ID.');
+
+  return chainId;
+}
+
 /**
  * Get the Ethereum accounts that the snap has access to using the `ethereum`
  * global. This is essentially the same as the `window.ethereum` global, but
@@ -208,10 +229,11 @@ async function signTypedData(message: string, from: string) {
 
 /**
  * Handle incoming JSON-RPC requests from the dapp, sent through the
- * `wallet_invokeSnap` method. This handler handles five methods:
+ * `wallet_invokeSnap` method. This handler handles six methods:
  *
  * - `getGasPrice`: Get the current Ethereum gas price as a hexadecimal string.
  * - `getVersion`: Get the current Ethereum network version as a string.
+ * - `getChainId`: Get the current Ethereum chain ID as a string.
  * - `getAccounts`: Get the Ethereum accounts that the snap has access to.
  * - `personalSign`: Sign a message using an Ethereum account.
  * - `signTypedData` Sign a struct using an Ethereum account.
@@ -233,6 +255,9 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
     case 'getVersion':
       return await getVersion();
 
+    case 'getChainId':
+      return await getChainId();
+
     case 'getAccounts':
       return await getAccounts();
 

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

@@ -28,7 +28,7 @@ export const EthereumProvider: FunctionComponent = () => {
     }).catch(logError);
   };
 
-  const handleGetVersion = () => handleSubmit('getVersion');
+  const handleGetChainId = () => handleSubmit('getChainId');
   const handleGetAccounts = () => handleSubmit('getAccounts');
 
   return (
@@ -46,9 +46,9 @@ export const EthereumProvider: FunctionComponent = () => {
           id="sendEthprovider"
           className="mb-3"
           disabled={isLoading}
-          onClick={handleGetVersion}
+          onClick={handleGetChainId}
         >
-          Get Version
+          Get Chain ID
         </Button>
         <Button
           variant="primary"