Update send flow snap to use new AddressInput component (#3167)

Updated the send flow example snap to use the new `AddressInput`
component.

Author: hmalik88

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "TBt+UJnVWgfYB6xDuI94gT0Ns1WPw4LdJKFcxeUH8Rg=",
+    "shasum": "K4N1OVwbY1dfSZpc4QvAWprZVI0FQSR8KB5NZoOXPFY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -15,7 +15,6 @@ 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 displayClearIcon - Whether to display the clear icon or not.
  * @property flushToAddress - Whether to flush the address field or not.
  * @property errors - The form errors.
  */
@@ -25,7 +24,6 @@ export type SendFlowProps = {
   selectedCurrency: 'BTC' | '$';
   total: Currency;
   fees: Currency;
-  displayClearIcon: boolean;
   flushToAddress?: boolean;
   errors?: {
     amount?: string;
@@ -43,7 +41,6 @@ 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.displayClearIcon - Whether to display the clear icon or not.
  * @param props.flushToAddress - Whether to flush the address field or not.
  * @returns The SendFlow component.
  */
@@ -53,7 +50,6 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
   selectedCurrency,
   total,
   fees,
-  displayClearIcon,
   flushToAddress,
   errors,
 }) => {
@@ -66,7 +62,6 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
           accounts={accounts}
           selectedCurrency={selectedCurrency}
           flushToAddress={flushToAddress}
-          displayClearIcon={displayClearIcon}
           errors={errors}
         />
         <TransactionSummary fees={fees} total={total} />

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

@@ -6,13 +6,13 @@ import {
   Icon,
   Image,
   Input,
+  AddressInput,
   Text,
   type SnapComponent,
 } from '@metamask/snaps-sdk/jsx';
 
 import { AccountSelector } from './AccountSelector';
 import btcIcon from '../images/btc.svg';
-import jazzicon3 from '../images/jazzicon3.svg';
 import type { Account, SendFormErrors } from '../types';
 
 /**
@@ -22,15 +22,13 @@ import type { Account, SendFormErrors } from '../types';
  * @property accounts - The available accounts.
  * @property errors - The form errors.
  * @property selectedCurrency - The selected currency to display.
- * @property displayClearIcon - Whether to display the clear icon or not.
  * @property flushToAddress - Whether to flush the address field or not.
  */
 export type SendFormProps = {
   selectedAccount: string;
   accounts: Account[];
   errors?: SendFormErrors;
   selectedCurrency: 'BTC' | '$';
-  displayClearIcon: boolean;
   flushToAddress?: boolean;
 };
 
@@ -42,7 +40,6 @@ 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.displayClearIcon - Whether to display the clear icon or not.
  * @param props.flushToAddress - Whether to flush the address field or not.
  * @returns The SendForm component.
  */
@@ -51,7 +48,6 @@ export const SendForm: SnapComponent<SendFormProps> = ({
   accounts,
   errors,
   selectedCurrency,
-  displayClearIcon,
   flushToAddress,
 }) => (
   <Form name="sendForm">
@@ -69,21 +65,12 @@ export const SendForm: SnapComponent<SendFormProps> = ({
       </Box>
     </Field>
     <Field label="To account" error={errors?.to}>
-      <Box>
-        <Image src={jazzicon3} />
-      </Box>
-      <Input
+      <AddressInput
         name="to"
+        chainId="eip155:0"
         placeholder="Enter receiving address"
         value={flushToAddress ? '' : undefined}
       />
-      {displayClearIcon && (
-        <Box>
-          <Button name="clear">
-            <Icon name="close" color="primary" />
-          </Button>
-        </Box>
-      )}
     </Field>
   </Form>
 );

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

@@ -111,7 +111,6 @@ export const onUserInput: OnUserInputHandler = async ({
                 selectedCurrency={selectedCurrency}
                 total={total}
                 fees={fees}
-                displayClearIcon={Boolean(sendForm.to) && sendForm.to !== ''}
                 errors={formErrors}
               />
             ),
@@ -138,7 +137,6 @@ export const onUserInput: OnUserInputHandler = async ({
                 total={total}
                 fees={fees}
                 flushToAddress={true}
-                displayClearIcon={false}
                 errors={formErrors}
               />
             ),

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

@@ -37,7 +37,6 @@ export async function generateSendFlow({
           selectedCurrency="BTC"
           total={{ amount: 0, fiat: 0 }}
           fees={fees}
-          displayClearIcon={false}
         />
       ),
       context: {

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

@@ -41,11 +41,11 @@ import type {
   StringElement,
 } from './component';
 import type {
-  AddressInputElement,
   AssetSelectorElement,
   AvatarElement,
   SkeletonElement,
   AddressElement,
+  AddressInputElement,
   BoldElement,
   BoxElement,
   ButtonElement,