finish tests and fix bugs

Author: GuillaumeRx

packages/examples/packages/dialogs/src/components/custom.tsx

@@ -1,5 +1,4 @@
 import {
-  AccountSelector,
   Box,
   Button,
   Container,
@@ -23,7 +22,7 @@ export const CustomDialog: SnapComponent = () => (
         This is a custom dialog. It has a custom Footer and can be resolved to
         any value.
       </Text>
-      <AccountSelector name="account" switchSelectedAccount />
+      <Input name="custom-input" placeholder="Enter something..." />
     </Box>
     <Footer>
       <Button name="cancel">Cancel</Button>

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

@@ -10,17 +10,13 @@ import type { Account, Currency } from '../types';
 /**
  * The props for the {@link SendFlow} component.
  *
- * @property accounts - The available accounts.
- * @property selectedAccount - The currently selected account.
  * @property selectedCurrency - The selected currency to display.
  * @property total - The total cost of the transaction.
  * @property fees - The fees for the transaction.
  * @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;
@@ -35,8 +31,6 @@ export type SendFlowProps = {
  * A send flow component, which shows the user a form to send funds to another.
  *
  * @param props - The component props.
- * @param props.accounts - The available accounts.
- * @param props.selectedAccount - The currently selected account.
  * @param props.selectedCurrency - The selected currency to display.
  * @param props.total - The total cost of the transaction.
  * @param props.errors - The form errors.
@@ -45,8 +39,6 @@ export type SendFlowProps = {
  * @returns The SendFlow component.
  */
 export const SendFlow: SnapComponent<SendFlowProps> = ({
-  accounts,
-  selectedAccount,
   selectedCurrency,
   total,
   fees,
@@ -58,8 +50,6 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
       <Box>
         <SendFlowHeader />
         <SendForm
-          selectedAccount={selectedAccount}
-          accounts={accounts}
           selectedCurrency={selectedCurrency}
           errors={errors}
           displayAvatar={displayAvatar}

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

@@ -8,25 +8,21 @@ import {
   Input,
   AddressInput,
   Text,
+  AccountSelector,
   type SnapComponent,
 } from '@metamask/snaps-sdk/jsx';
 
-import { AccountSelector } from './AccountSelector';
 import btcIcon from '../images/btc.svg';
-import type { Account, SendFormErrors } from '../types';
+import type { SendFormErrors } from '../types';
 
 /**
  * The props for the {@link SendForm} component.
  *
- * @property selectedAccount - The currently selected account.
- * @property accounts - The available accounts.
  * @property errors - The form errors.
  * @property selectedCurrency - The selected currency to display.
  * @property displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFormProps = {
-  selectedAccount: string;
-  accounts: Account[];
   errors?: SendFormErrors;
   selectedCurrency: 'BTC' | '$';
   displayAvatar?: boolean | undefined;
@@ -36,22 +32,20 @@ export type SendFormProps = {
  * A component that shows the send form.
  *
  * @param props - The component props.
- * @param props.selectedAccount - The currently selected account.
- * @param props.accounts - The available accounts.
  * @param props.errors - The form errors.
  * @param props.selectedCurrency - The selected currency to display.
  * @param props.displayAvatar - Whether to display the avatar of the address.
  * @returns The SendForm component.
  */
 export const SendForm: SnapComponent<SendFormProps> = ({
-  selectedAccount,
-  accounts,
   errors,
   selectedCurrency,
   displayAvatar,
 }) => (
   <Form name="sendForm">
-    <AccountSelector selectedAccount={selectedAccount} accounts={accounts} />
+    <Field label="From account">
+      <AccountSelector name="accountSelector" switchSelectedAccount />
+    </Field>
     <Field label="Send amount" error={errors?.amount}>
       <Box>
         <Image src={btcIcon} />

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

@@ -7,7 +7,6 @@ import type {
 import { UserInputEventType } from '@metamask/snaps-sdk';
 
 import { SendFlow } from './components';
-import { accountsArray, accounts } from './data';
 import type { SendFormState, SendFlowContext } from './types';
 import { formValidation, generateSendFlow, isCaipHexAddress } from './utils';
 
@@ -26,8 +25,6 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
   switch (request.method) {
     case 'display': {
       const interfaceId = await generateSendFlow({
-        accountsArray,
-        accounts,
         fees: { amount: 1.0001, fiat: 1.23 },
       });
 
@@ -56,8 +53,6 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
  */
 export const onHomePage: OnHomePageHandler = async () => {
   const interfaceId = await generateSendFlow({
-    accountsArray,
-    accounts,
     fees: { amount: 1.0001, fiat: 1.23 },
   });
 
@@ -88,7 +83,7 @@ export const onUserInput: OnUserInputHandler = async ({
 
   const sendForm = state.sendForm as SendFormState;
 
-  const formErrors = formValidation(sendForm, context as SendFlowContext);
+  const formErrors = formValidation(sendForm);
 
   const total = {
     amount: Number(sendForm.amount ?? 0) + fees.amount,
@@ -128,8 +123,6 @@ export const onUserInput: OnUserInputHandler = async ({
             id,
             ui: (
               <SendFlow
-                accounts={accountsArray}
-                selectedAccount={sendForm.accountSelector}
                 selectedCurrency={selectedCurrency}
                 total={total}
                 fees={fees}
@@ -141,7 +134,6 @@ export const onUserInput: OnUserInputHandler = async ({
 
         break;
       }
-
       default:
         break;
     }

packages/examples/packages/send-flow/src/data.ts

@@ -1,3 +1,5 @@
+import type { AccountSelectorValue } from '@metamask/snaps-sdk';
+
 /**
  * The state of the send form.
  *
@@ -8,7 +10,7 @@
 export type SendFormState = {
   to: string;
   amount: string;
-  accountSelector: string;
+  accountSelector: AccountSelectorValue;
 };
 
 /**
@@ -22,21 +24,6 @@ export type SendFormErrors = {
   amount?: string;
 };
 
-/**
- * An Account of the send flow interface.
- *
- * @property name - The name of the account.
- * @property address - The address of the account.
- * @property balance - The balance of the account.
- * @property icon - The icon of the account.
- */
-export type Account = {
-  name: string;
-  address: string;
-  balance: Currency;
-  icon: string;
-};
-
 /**
  * A currency value.
  *
@@ -56,7 +43,6 @@ export type Currency = {
  * @property fees - The fees for the transaction.
  */
 export type SendFlowContext = {
-  accounts: Record<string, Account>;
   selectedCurrency: 'BTC' | '$';
   fees: Currency;
 };

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

@@ -7,48 +7,31 @@ import {
 } from '@metamask/utils';
 
 import { SendFlow } from './components';
-import type {
-  Account,
-  Currency,
-  SendFlowContext,
-  SendFormErrors,
-  SendFormState,
-} from './types';
+import type { Currency, SendFormErrors, SendFormState } from './types';
 
 export type GenerateSendFlowParams = {
-  accountsArray: Account[];
-  accounts: Record<string, Account>;
   fees: Currency;
 };
 
 /**
  * Generate the send flow.
  *
  * @param params - The parameters for the send form.
- * @param params.accountsArray - The available accounts as an array.
- * @param params.accounts - The available accounts.
  * @param params.fees - The fees for the transaction.
  * @returns The interface ID.
  */
-export async function generateSendFlow({
-  accountsArray,
-  accounts,
-  fees,
-}: GenerateSendFlowParams) {
+export async function generateSendFlow({ fees }: GenerateSendFlowParams) {
   return await snap.request({
     method: 'snap_createInterface',
     params: {
       ui: (
         <SendFlow
-          accounts={accountsArray}
-          selectedAccount={accountsArray[0].address}
           selectedCurrency="BTC"
           total={{ amount: 0, fiat: 0 }}
           fees={fees}
         />
       ),
       context: {
-        accounts,
         selectedCurrency: 'BTC',
         fees,
       },
@@ -60,27 +43,15 @@ export async function generateSendFlow({
  * Validate the send form.
  *
  * @param formState - The state of the send form.
- * @param context - The context of the interface.
  * @returns The form errors.
  */
-export function formValidation(
-  formState: SendFormState,
-  context: SendFlowContext,
-): SendFormErrors {
+export function formValidation(formState: SendFormState): SendFormErrors {
   const errors: Partial<SendFormErrors> = {};
 
   if (formState.to === 'invalid address') {
     errors.to = 'Invalid address';
   }
 
-  if (
-    formState.amount &&
-    Number(formState.amount) >
-      context.accounts[formState.accountSelector].balance.amount
-  ) {
-    errors.amount = 'Insufficient funds';
-  }
-
   return errors;
 }