Slightly refactor send flow example

Author: Mrtenz

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "INn+njbWhdgWBpvU4y5opvJpDWSyT14xl7DQEvwY0JM=",
+    "shasum": "fwMVpG2q/9ej3M3mAf5A/gfeXhZI7W2a4veQmVHKlME=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -3,16 +3,13 @@ import type {
   OnHomePageHandler,
   OnUserInputHandler,
   OnRpcRequestHandler,
-  CaipAccountId,
 } from '@metamask/snaps-sdk';
 import { UserInputEventType } from '@metamask/snaps-sdk';
-import { is } from '@metamask/superstruct';
-import { HexChecksumAddressStruct, parseCaipAccountId } from '@metamask/utils';
 
 import { SendFlow } from './components';
 import { accountsArray, accounts } from './data';
 import type { SendFormState, SendFlowContext } from './types';
-import { formValidation, generateSendFlow } from './utils';
+import { formValidation, generateSendFlow, isCaipHexAddress } from './utils';
 
 /**
  * Handle incoming JSON-RPC requests from the dapp, sent through the
@@ -102,15 +99,6 @@ export const onUserInput: OnUserInputHandler = async ({
     switch (event.name) {
       case 'amount':
       case 'to': {
-        // For testing purposes, we display the avatar if the address is a valid hex checksum address.
-        let parsedAddress;
-        try {
-          parsedAddress = parseCaipAccountId(
-            event.value as CaipAccountId,
-          ).address;
-        } catch {
-          /** noop */
-        }
         await snap.request({
           method: 'snap_updateInterface',
           params: {
@@ -123,13 +111,16 @@ export const onUserInput: OnUserInputHandler = async ({
                 total={total}
                 fees={fees}
                 errors={formErrors}
-                displayAvatar={is(parsedAddress, HexChecksumAddressStruct)}
+                // For testing purposes, we display the avatar if the address is
+                // a valid hex checksum address.
+                displayAvatar={isCaipHexAddress(event.value)}
               />
             ),
           },
         });
         break;
       }
+
       case 'accountSelector': {
         await snap.request({
           method: 'snap_updateInterface',
@@ -150,6 +141,7 @@ export const onUserInput: OnUserInputHandler = async ({
 
         break;
       }
+
       default:
         break;
     }

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

@@ -1,3 +1,11 @@
+import type { Hex } from '@metamask/utils';
+import {
+  isStrictHexString,
+  isCaipAccountId,
+  parseCaipAccountId,
+  isValidHexAddress,
+} from '@metamask/utils';
+
 import { SendFlow } from './components';
 import type {
   Account,
@@ -88,3 +96,18 @@ export function truncate(str: string, length: number): string {
     ? `${str.slice(0, 5)}...${str.slice(str.length - 5, str.length)}`
     : str;
 }
+
+/**
+ * Check if a string is a valid hex address.
+ *
+ * @param value - The value to check.
+ * @returns Whether the value is a valid hex address.
+ */
+export function isCaipHexAddress(value: unknown): value is Hex {
+  if (isCaipAccountId(value)) {
+    const { address } = parseCaipAccountId(value);
+    return isStrictHexString(address) && isValidHexAddress(address);
+  }
+
+  return false;
+}