Add displayAvatar prop to AddressInput component (#3264)

The `displayAvatar` prop is being added to the `AddressInput` component
to allow a snap to indicate that it has validated the value of the
component itself. Updated the send flow example snap as well, removed
dead code that was missed previously.

Author: hmalik88

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "PNtdcFc5HFBGHnv3e/8CUhm16s6+Ksmmc38dF34lsSw=",
+    "shasum": "1V2d/+iUgdA+QeXEVHKxmle1VvQJaVC6KaHqSevpWBQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "1V+pdRmIER1rMRFWU02Fzc+LXLUcCoCHAXsbu2JXgSI=",
+    "shasum": "/i4ajCNv/9R1NuYAfSTnq8j8czxSymcZhcjZgnhj3Pg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/send-flow/package.json

@@ -44,7 +44,9 @@
   },
   "dependencies": {
     "@metamask/rpc-errors": "^7.0.2",
-    "@metamask/snaps-sdk": "workspace:^"
+    "@metamask/snaps-sdk": "workspace:^",
+    "@metamask/superstruct": "^3.1.0",
+    "@metamask/utils": "^11.2.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.5.0",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "wE+wX6shyn8Q1Tu8SrUCOdSjARmQrq2jbCKiRqFz5EY=",
+    "shasum": "5qERUafayyDWQ12V/+htfEs2wzmQwhSn0EcQolI7quo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/send-flow/src/components/SendFlow.tsx

@@ -15,20 +15,20 @@ import type { Account, Currency } from '../types';
  * @property selectedCurrency - The selected currency to display.
  * @property total - The total cost of the transaction.
  * @property fees - The fees for the transaction.
- * @property flushToAddress - Whether to flush the address field or not.
  * @property errors - The form errors.
+ * @property displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFlowProps = {
   accounts: Account[];
   selectedAccount: string;
   selectedCurrency: 'BTC' | '$';
   total: Currency;
   fees: Currency;
-  flushToAddress?: boolean;
   errors?: {
     amount?: string;
     to?: string;
   };
+  displayAvatar?: boolean | undefined;
 };
 
 /**
@@ -41,7 +41,7 @@ export type SendFlowProps = {
  * @param props.total - The total cost of the transaction.
  * @param props.errors - The form errors.
  * @param props.fees - The fees for the transaction.
- * @param props.flushToAddress - Whether to flush the address field or not.
+ * @param props.displayAvatar - Whether to display the avatar of the address.
  * @returns The SendFlow component.
  */
 export const SendFlow: SnapComponent<SendFlowProps> = ({
@@ -50,8 +50,8 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
   selectedCurrency,
   total,
   fees,
-  flushToAddress,
   errors,
+  displayAvatar,
 }) => {
   return (
     <Container>
@@ -61,8 +61,8 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
           selectedAccount={selectedAccount}
           accounts={accounts}
           selectedCurrency={selectedCurrency}
-          flushToAddress={flushToAddress}
           errors={errors}
+          displayAvatar={displayAvatar}
         />
         <TransactionSummary fees={fees} total={total} />
       </Box>

packages/examples/packages/send-flow/src/components/SendForm.tsx

@@ -22,14 +22,14 @@ import type { Account, SendFormErrors } from '../types';
  * @property accounts - The available accounts.
  * @property errors - The form errors.
  * @property selectedCurrency - The selected currency to display.
- * @property flushToAddress - Whether to flush the address field or not.
+ * @property displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFormProps = {
   selectedAccount: string;
   accounts: Account[];
   errors?: SendFormErrors;
   selectedCurrency: 'BTC' | '$';
-  flushToAddress?: boolean;
+  displayAvatar?: boolean | undefined;
 };
 
 /**
@@ -40,15 +40,15 @@ export type SendFormProps = {
  * @param props.accounts - The available accounts.
  * @param props.errors - The form errors.
  * @param props.selectedCurrency - The selected currency to display.
- * @param props.flushToAddress - Whether to flush the address field or not.
+ * @param props.displayAvatar - Whether to display the avatar of the address.
  * @returns The SendForm component.
  */
 export const SendForm: SnapComponent<SendFormProps> = ({
   selectedAccount,
   accounts,
   errors,
   selectedCurrency,
-  flushToAddress,
+  displayAvatar,
 }) => (
   <Form name="sendForm">
     <AccountSelector selectedAccount={selectedAccount} accounts={accounts} />
@@ -69,7 +69,7 @@ export const SendForm: SnapComponent<SendFormProps> = ({
         name="to"
         chainId="eip155:0"
         placeholder="Enter receiving address"
-        value={flushToAddress ? '' : undefined}
+        displayAvatar={displayAvatar}
       />
     </Field>
   </Form>

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

@@ -5,6 +5,8 @@ import type {
   OnRpcRequestHandler,
 } from '@metamask/snaps-sdk';
 import { UserInputEventType } from '@metamask/snaps-sdk';
+import { is } from '@metamask/superstruct';
+import { HexChecksumAddressStruct } from '@metamask/utils';
 
 import { SendFlow } from './components';
 import { accountsArray, accounts } from './data';
@@ -98,8 +100,8 @@ export const onUserInput: OnUserInputHandler = async ({
   if (event.type === UserInputEventType.InputChangeEvent) {
     switch (event.name) {
       case 'amount':
-      case 'to':
-      case 'accountSelector': {
+      case 'to': {
+        // For testing purposes, we display the avatar if the address is a valid hex checksum address.
         await snap.request({
           method: 'snap_updateInterface',
           params: {
@@ -112,19 +114,14 @@ export const onUserInput: OnUserInputHandler = async ({
                 total={total}
                 fees={fees}
                 errors={formErrors}
+                displayAvatar={is(event.value, HexChecksumAddressStruct)}
               />
             ),
           },
         });
-
         break;
       }
-      default:
-        break;
-    }
-  } else if (event.type === UserInputEventType.ButtonClickEvent) {
-    switch (event.name) {
-      case 'clear':
+      case 'accountSelector': {
         await snap.request({
           method: 'snap_updateInterface',
           params: {
@@ -136,13 +133,14 @@ export const onUserInput: OnUserInputHandler = async ({
                 selectedCurrency={selectedCurrency}
                 total={total}
                 fees={fees}
-                flushToAddress={true}
                 errors={formErrors}
               />
             ),
           },
         });
+
         break;
+      }
       default:
         break;
     }

packages/snaps-sdk/src/jsx/components/form/AddressInput.ts

@@ -8,6 +8,7 @@ export type AddressInputProps = {
   chainId: CaipChainId;
   placeholder?: string | undefined;
   disabled?: boolean | undefined;
+  displayAvatar?: boolean | undefined;
 };
 
 const TYPE = 'AddressInput';
@@ -21,6 +22,7 @@ const TYPE = 'AddressInput';
  * @param props.chainId - The CAIP-2 chain ID of the address.
  * @param props.placeholder - The placeholder text of the input field.
  * @param props.disabled - Whether the input field is disabled.
+ * @param props.displayAvatar - Whether to display the avatar of the address.
  * @returns An input element.
  * @example
  * <AddressInput name="address" value="0x1234567890123456789012345678901234567890" chainId="eip155:1" />

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -221,6 +221,12 @@ describe('AddressInputStruct', () => {
     />,
     <AddressInput name="address" chainId="eip155:1" placeholder="foo" />,
     <AddressInput name="address" chainId="eip155:1" disabled={true} />,
+    <AddressInput
+      name="address"
+      chainId="eip155:1"
+      displayAvatar={true}
+      value="0x1234567890abcdef1234567890abcdef12345678"
+    />,
   ])('validates an address input element', (value) => {
     expect(is(value, AddressInputStruct)).toBe(true);
   });
@@ -242,6 +248,13 @@ describe('AddressInputStruct', () => {
     <AddressInput name="foo" chainId="eip155:1" placeholder={32} />,
     // @ts-expect-error - Invalid props.
     <AddressInput name="foo" chainId="eip155:1" disabled="bar" />,
+    <AddressInput
+      name="foo"
+      chainId="eip155:1"
+      // @ts-expect-error - Invalid props.
+      displayAvatar={123}
+      value="0x1234567890abcdef1234567890abcdef12345678"
+    />,
   ])('does not validate "%p"', (value) => {
     expect(is(value, AddressInputStruct)).toBe(false);
   });

packages/snaps-sdk/src/jsx/validation.ts

@@ -358,6 +358,7 @@ export const AddressInputStruct: Describe<AddressInputElement> = element(
     value: optional(string()),
     placeholder: optional(string()),
     disabled: optional(boolean()),
+    displayAvatar: optional(boolean()),
   },
 );