fix(send-flow-snap): add missing displayAvatar props, add tests, update snaps-simulation (#3312)

The send-flow example snap is only passing the `displayAvatar` prop in
the `to` scenario but not in the others. This can land you in a
situation where you paste a valid address in the to field, start to type
an amount in the amount field, then the avatar disappears because no
`displayAvatar` prop is being passed.

### Summary of changes

- Updated the send flow snap's `onUserInput` code to properly pass the
`displayAvatar` prop in all scenarios.
- Added tests for the snap.
- Added an SVG transformer so jest can handle the icons that are
imported in the snap.
- Updated the structure of the SVGs so it's consistent with what jest
expects.
- Updated `typeInField` in `snaps-simulation` so that it properly
attaches the `chainId` to the input value.

Author: hmalik88

packages/examples/packages/send-flow/jest.config.js

@@ -33,4 +33,10 @@ module.exports = deepmerge(baseConfig, {
       '<rootDir>/node_modules/@metamask/$1',
     ],
   },
+
+  // Transform SVG files using our custom transformer
+  transform: {
+    ...baseConfig.transform,
+    '\\.svg$': '<rootDir>/test/transformers/svgTransformer.js',
+  },
 });

packages/examples/packages/send-flow/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "u6ivnu9fXa7saZ10sruh8I3ZKZjeAur4W+9+LVp9BoU=",
+    "shasum": "FOyn/lPGc/Fu6cW6EgX8OwklVJ/+HBydyqz+IDE8M+U=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/send-flow/src/images/btc.svg

@@ -1,6 +1,9 @@
 import { expect } from '@jest/globals';
 import { installSnap } from '@metamask/snaps-jest';
 
+import { SendFlow } from './components';
+import { accountsArray } from './data';
+
 describe('onRpcRequest', () => {
   it('throws an error if the requested method does not exist', async () => {
     const { request } = await installSnap();
@@ -21,6 +24,222 @@ describe('onRpcRequest', () => {
   });
 
   describe('display', () => {
-    it.todo('shows a custom dialog with the SendFlow interface');
+    it('shows a custom dialog with the SendFlow interface', async () => {
+      const { request } = await installSnap();
+
+      const response = request({
+        method: 'display',
+      });
+
+      const sendFlowInterface = await response.getInterface();
+
+      expect(sendFlowInterface).toRender(
+        <SendFlow
+          accounts={accountsArray}
+          selectedAccount={accountsArray[0].address}
+          selectedCurrency="BTC"
+          total={{ amount: 0, fiat: 0 }}
+          fees={{ amount: 1.0001, fiat: 1.23 }}
+        />,
+      );
+    });
+  });
+});
+
+describe('onHomePage', () => {
+  it('returns a custom UI', async () => {
+    const { onHomePage } = await installSnap();
+
+    const response = await onHomePage();
+
+    const sendFlowInterface = response.getInterface();
+
+    expect(sendFlowInterface).toRender(
+      <SendFlow
+        accounts={accountsArray}
+        selectedAccount={accountsArray[0].address}
+        selectedCurrency="BTC"
+        total={{ amount: 0, fiat: 0 }}
+        fees={{ amount: 1.0001, fiat: 1.23 }}
+      />,
+    );
+  });
+});
+
+describe('onUserInput', () => {
+  it('handles account selection', async () => {
+    const { request } = await installSnap();
+
+    const response = request({
+      method: 'display',
+    });
+
+    const sendFlowInterface = await response.getInterface();
+
+    await sendFlowInterface.selectFromSelector(
+      'accountSelector',
+      accountsArray[1].address,
+    );
+
+    const updatedInterface = await response.getInterface();
+
+    expect(updatedInterface).toRender(
+      <SendFlow
+        accounts={accountsArray}
+        selectedAccount={accountsArray[1].address}
+        selectedCurrency="BTC"
+        total={{ amount: 1.0001, fiat: 251.23 }}
+        fees={{ amount: 1.0001, fiat: 1.23 }}
+        errors={{}}
+        displayAvatar={false}
+      />,
+    );
+  });
+
+  it('handles amount input', async () => {
+    const { request } = await installSnap();
+
+    const response = request({
+      method: 'display',
+    });
+
+    const sendFlowInterface = await response.getInterface();
+
+    await sendFlowInterface.typeInField('amount', '0.5');
+
+    const updatedInterface = await response.getInterface();
+
+    expect(updatedInterface).toRender(
+      <SendFlow
+        accounts={accountsArray}
+        selectedAccount={accountsArray[0].address}
+        selectedCurrency="BTC"
+        total={{ amount: 1.5001, fiat: 251.23 }}
+        fees={{ amount: 1.0001, fiat: 1.23 }}
+        errors={{}}
+        displayAvatar={false}
+      />,
+    );
+  });
+
+  it('handles to input', async () => {
+    const { request } = await installSnap();
+
+    const response = request({
+      method: 'display',
+    });
+
+    const sendFlowInterface = await response.getInterface();
+
+    await sendFlowInterface.typeInField(
+      'to',
+      '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+    );
+
+    const updatedInterface = await response.getInterface();
+
+    expect(updatedInterface).toRender(
+      <SendFlow
+        accounts={accountsArray}
+        selectedAccount={accountsArray[0].address}
+        selectedCurrency="BTC"
+        total={{ amount: 1.0001, fiat: 251.23 }}
+        fees={{ amount: 1.0001, fiat: 1.23 }}
+        errors={{}}
+        displayAvatar={true}
+      />,
+    );
+  });
+
+  it('handles invalid input', async () => {
+    const { request } = await installSnap();
+
+    const response = request({
+      method: 'display',
+    });
+
+    const sendFlowInterface = await response.getInterface();
+
+    await sendFlowInterface.typeInField('amount', '2');
+
+    const updatedInterface = await response.getInterface();
+
+    expect(updatedInterface).toRender(
+      <SendFlow
+        accounts={accountsArray}
+        selectedAccount={accountsArray[0].address}
+        selectedCurrency="BTC"
+        total={{ amount: 3.0000999999999998, fiat: 251.23 }}
+        fees={{ amount: 1.0001, fiat: 1.23 }}
+        errors={{ amount: 'Insufficient funds' }}
+        displayAvatar={false}
+      />,
+    );
+  });
+
+  it('maintains state across multiple interactions', async () => {
+    const { request } = await installSnap();
+
+    const response = request({
+      method: 'display',
+    });
+
+    const sendFlowInterface = await response.getInterface();
+
+    await sendFlowInterface.selectFromSelector(
+      'accountSelector',
+      accountsArray[1].address,
+    );
+
+    await sendFlowInterface.typeInField('amount', '0.5');
+
+    const updatedInterface = await response.getInterface();
+
+    expect(updatedInterface).toRender(
+      <SendFlow
+        accounts={accountsArray}
+        selectedAccount={accountsArray[1].address}
+        selectedCurrency="BTC"
+        total={{ amount: 1.5001, fiat: 251.23 }}
+        fees={{ amount: 1.0001, fiat: 1.23 }}
+        errors={{}}
+        displayAvatar={false}
+      />,
+    );
+
+    await sendFlowInterface.typeInField(
+      'to',
+      '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+    );
+
+    const updatedInterface2 = await response.getInterface();
+
+    expect(updatedInterface2).toRender(
+      <SendFlow
+        accounts={accountsArray}
+        selectedAccount={accountsArray[1].address}
+        selectedCurrency="BTC"
+        total={{ amount: 1.5001, fiat: 251.23 }}
+        fees={{ amount: 1.0001, fiat: 1.23 }}
+        errors={{}}
+        displayAvatar={true}
+      />,
+    );
+
+    await sendFlowInterface.typeInField('amount', '0');
+
+    const updatedInterface3 = await response.getInterface();
+
+    expect(updatedInterface3).toRender(
+      <SendFlow
+        accounts={accountsArray}
+        selectedAccount={accountsArray[1].address}
+        selectedCurrency="BTC"
+        total={{ amount: 1.0001, fiat: 251.23 }}
+        fees={{ amount: 1.0001, fiat: 1.23 }}
+        errors={{}}
+        displayAvatar={true}
+      />,
+    );
   });
 });

packages/examples/packages/send-flow/src/images/jazzicon1.svg

@@ -113,7 +113,9 @@ export const onUserInput: OnUserInputHandler = async ({
                 errors={formErrors}
                 // For testing purposes, we display the avatar if the address is
                 // a valid hex checksum address.
-                displayAvatar={isCaipHexAddress(event.value)}
+                displayAvatar={isCaipHexAddress(
+                  event.name === 'to' ? event.value : sendForm.to,
+                )}
               />
             ),
           },
@@ -134,6 +136,7 @@ export const onUserInput: OnUserInputHandler = async ({
                 total={total}
                 fees={fees}
                 errors={formErrors}
+                displayAvatar={isCaipHexAddress(sendForm.to)}
               />
             ),
           },

packages/examples/packages/send-flow/src/images/jazzicon2.svg

@@ -0,0 +1,26 @@
+/**
+ * A custom transformer for SVG files in Jest tests.
+ */
+module.exports = {
+  /**
+   * Process an SVG file for Jest tests.
+   *
+   * @param {string} sourceText - The content of the SVG file.
+   * @returns {object} The transformed code.
+   */
+  process(sourceText) {
+    return {
+      code: `module.exports = ${JSON.stringify(sourceText)};`,
+    };
+  },
+
+  /**
+   * Generate a cache key for the transformation.
+   *
+   * @param {string} sourceText - The content of the SVG file.
+   * @returns {string} A cache key for Jest to use for caching purposes.
+   */
+  getCacheKey(sourceText) {
+    return sourceText;
+  },
+};

packages/examples/packages/send-flow/src/index.test.tsx

@@ -26,3 +26,8 @@ export const DEFAULT_CURRENCY = 'usd';
  * The default JSON-RPC endpoint for Ethereum requests.
  */
 export const DEFAULT_JSON_RPC_ENDPOINT = 'https://cloudflare-eth.com/';
+
+/**
+ * The types of inputs that can be used in the `typeInField` interface action.
+ */
+export const TYPEABLE_INPUTS = ['Input', 'AddressInput'];

packages/examples/packages/send-flow/src/index.tsx

@@ -18,6 +18,7 @@ import {
   RadioGroup,
   Radio,
   Box,
+  AddressInput,
   Input,
   FileInput,
   Checkbox,
@@ -924,6 +925,55 @@ describe('typeInField', () => {
     });
   });
 
+  it('updates the interface state and sends an InputChangeEvent for an AddressInput', async () => {
+    jest.spyOn(rootControllerMessenger, 'call');
+    const content = (
+      <AddressInput
+        name="addressInput"
+        chainId="eip155:0"
+        placeholder="Enter an address"
+      />
+    );
+
+    const interfaceId = await interfaceController.createInterface(
+      MOCK_SNAP_ID,
+      content,
+    );
+
+    await typeInField(
+      rootControllerMessenger,
+      interfaceId,
+      content,
+      MOCK_SNAP_ID,
+      'addressInput',
+      '0x1234567890123456789012345678901234567890',
+    );
+
+    expect(rootControllerMessenger.call).toHaveBeenCalledWith(
+      'SnapInterfaceController:updateInterfaceState',
+      interfaceId,
+      { addressInput: 'eip155:0:0x1234567890123456789012345678901234567890' },
+    );
+
+    expect(handleRpcRequestMock).toHaveBeenCalledWith(MOCK_SNAP_ID, {
+      origin: 'metamask',
+      handler: HandlerType.OnUserInput,
+      request: {
+        jsonrpc: '2.0',
+        method: ' ',
+        params: {
+          event: {
+            type: UserInputEventType.InputChangeEvent,
+            name: 'addressInput',
+            value: 'eip155:0:0x1234567890123456789012345678901234567890',
+          },
+          id: interfaceId,
+          context: null,
+        },
+      },
+    });
+  });
+
   it('throws if there is no inputs in the interface', async () => {
     const content = text('bar');
 
@@ -964,7 +1014,7 @@ describe('typeInField', () => {
         'baz',
       ),
     ).rejects.toThrow(
-      'Expected an element of type "Input", but found "Button".',
+      'Expected an element of type "Input" or "AddressInput", but found "Button".',
     );
   });
 });