address requested changes

Author: GuillaumeRx

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

@@ -44,7 +44,7 @@ export const SendForm: SnapComponent<SendFormProps> = ({
 }) => (
   <Form name="sendForm">
     <Field label="From account">
-      <AccountSelector name="accountSelector" switchSelectedAccount />
+      <AccountSelector name="accountSelector" switchGlobalAccount />
     </Field>
     <Field label="Send amount" error={errors?.amount}>
       <Box>

packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx

@@ -229,8 +229,8 @@ describe('SnapInterfaceController', () => {
             <Field label="baz">
               <AccountSelector
                 name="baz"
-                switchSelectedAccount
-                selectedAddress="eip155:0:0x1234567890123456789012345678901234567890"
+                switchGlobalAccount
+                value="eip155:0:0x1234567890123456789012345678901234567890"
               />
             </Field>
             <Field label="foobar">

packages/snaps-controllers/src/interface/utils.test.tsx

@@ -646,9 +646,13 @@ describe('constructState', () => {
       <Box>
         <AssetSelector
           name="foo"
+<<<<<<< HEAD
           addresses={[
             'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
           ]}
+=======
+          value="eip155:0:0x1234567890123456789012345678901234567890"
+>>>>>>> 82969fe5 (address requested changes)
         />
       </Box>
     );
@@ -727,9 +731,13 @@ describe('constructState', () => {
           <Field label="foo">
             <AssetSelector
               name="foo"
+<<<<<<< HEAD
               addresses={[
                 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
               ]}
+=======
+              value="eip155:0:0x1234567890123456789012345678901234567890"
+>>>>>>> 82969fe5 (address requested changes)
             />
           </Field>
         </Form>
@@ -766,6 +774,7 @@ describe('constructState', () => {
 
     const element = (
       <Box>
+<<<<<<< HEAD
         <Form name="form">
           <Field label="foo">
             <AssetSelector
@@ -777,6 +786,12 @@ describe('constructState', () => {
             />
           </Field>
         </Form>
+=======
+        <AccountSelector
+          name="foo"
+          value="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
+        />
+>>>>>>> 82969fe5 (address requested changes)
       </Box>
     );
 
@@ -829,6 +844,7 @@ describe('constructState', () => {
     });
   });
 
+<<<<<<< HEAD
   it('sets the value to null if the account has no assets', () => {
     elementDataGetters.getAssetsState.mockReturnValue({
       assetsMetadata: {
@@ -845,14 +861,27 @@ describe('constructState', () => {
     elementDataGetters.getAccountByAddress.mockReturnValue({
       id: MOCK_ACCOUNT_ID,
     });
+=======
+  it('switches the selected account if `switchGlobalAccount` is set', () => {
+    getAccountByAddress.mockImplementation((address: string) => ({
+      id: 'foo',
+      address,
+      scopes: ['eip155:0'],
+    }));
+>>>>>>> 82969fe5 (address requested changes)
 
     const element = (
       <Box>
         <AssetSelector
           name="foo"
+<<<<<<< HEAD
           addresses={[
             'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
           ]}
+=======
+          value="eip155:0:0x1234567890123456789012345678901234567890"
+          switchGlobalAccount
+>>>>>>> 82969fe5 (address requested changes)
         />
       </Box>
     );

packages/snaps-controllers/src/interface/utils.ts

@@ -27,7 +27,7 @@ import type {
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
 import {
-  createAddressList,
+  createAccountList,
   getJsonSizeUnsafe,
   getJsxChildren,
   getJsxElementFromComponent,
@@ -101,9 +101,15 @@ type GetAccountByAddress = (
 
 type SetSelectedAccount = (accountId: string) => void;
 
+/**
+ * A function to get the selected account in the client.
+ *
+ * @returns The selected account.
+ */
 type GetSelectedAccount = () => InternalAccount | undefined;
 
 /**
+<<<<<<< HEAD
  * Data getters for elements.
  * This is used to get data from elements that is not directly accessible from the element itself.
  *
@@ -116,6 +122,23 @@ type ElementDataGetters = {
   getSelectedAccount: GetSelectedAccount;
   setSelectedAccount: SetSelectedAccount;
 };
+=======
+ * A function to get an account by address.
+ *
+ * @param address - The address of the account.
+ * @returns The account with the given address or undefined if none.
+ */
+type GetAccountByAddress = (
+  address: CaipAccountAddress,
+) => InternalAccount | undefined;
+
+/**
+ * A function to set the selected account in the client.
+ *
+ * @param accountId - The ID of the account to set as selected.
+ */
+type SetSelectedAccount = (accountId: string) => void;
+>>>>>>> 82969fe5 (address requested changes)
 
 /**
  * Get a JSX element from a component or JSX element. If the component is a
@@ -276,7 +299,7 @@ function constructComponentSpecificDefaultState(
 
       const { id, address, scopes } = account;
 
-      const addresses = createAddressList(address, scopes);
+      const addresses = createAccountList(address, scopes);
 
       return { accountId: id, addresses };
     }
@@ -297,6 +320,7 @@ function constructComponentSpecificDefaultState(
 }
 
 /**
+<<<<<<< HEAD
  * Get the state value for an asset selector.
  *
  * @param value - The asset selector value.
@@ -323,6 +347,41 @@ export function getAssetSelectorStateValue(
     name: asset.name,
     symbol: asset.symbol,
   };
+=======
+ * Get the state value for an account selector.
+ *
+ * @param element - The account selector element.
+ * @param getAccountByAddress - A function to get an account by address.
+ * @param setSelectedAccount - A function to set the selected account in the client.
+ * @returns The state value for the account selector.
+ */
+function getAccountSelectorStateValue(
+  element: AccountSelectorElement,
+  getAccountByAddress: GetAccountByAddress,
+  setSelectedAccount: SetSelectedAccount,
+) {
+  if (!element.props.value) {
+    return undefined;
+  }
+
+  const { address: parsedAddress } = parseCaipAccountId(element.props.value);
+
+  const account = getAccountByAddress(parsedAddress);
+
+  if (!account) {
+    return undefined;
+  }
+
+  if (element.props.switchGlobalAccount) {
+    setSelectedAccount(account.id);
+  }
+
+  const { id, address, scopes } = account;
+
+  const addresses = createAccountList(address, scopes);
+
+  return { accountId: id, addresses };
+>>>>>>> 82969fe5 (address requested changes)
 }
 
 /**
@@ -359,6 +418,7 @@ function getComponentStateValue(
     case 'Checkbox':
       return element.props.checked;
 
+<<<<<<< HEAD
     case 'AssetSelector':
       return getAssetSelectorStateValue(element.props.value, getAssetsState);
 
@@ -392,6 +452,14 @@ function getComponentStateValue(
 
       return { accountId: id, addresses };
     }
+=======
+    case 'AccountSelector':
+      return getAccountSelectorStateValue(
+        element,
+        getAccountByAddress,
+        setSelectedAccount,
+      );
+>>>>>>> 82969fe5 (address requested changes)
 
     default:
       return element.props.value;

packages/snaps-controllers/src/test-utils/controller.ts

@@ -830,18 +830,31 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       (address: string) => ({
         address,
         id: 'foo',
+<<<<<<< HEAD
         scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+=======
+        scopes: ['eip155:0'],
+>>>>>>> 82969fe5 (address requested changes)
       }),
     );
 
     messenger.registerActionHandler(
       'AccountsController:getSelectedMultichainAccount',
+<<<<<<< HEAD
       () =>
         ({
           address: '0x1234567890123456789012345678901234567890',
           id: 'foo',
           scopes: ['eip155:0'],
         }) as unknown as InternalAccount,
+=======
+      // @ts-expect-error partial mock
+      () => ({
+        address: '0x1234567890123456789012345678901234567890',
+        id: 'foo',
+        scopes: ['eip155:0'],
+      }),
+>>>>>>> 82969fe5 (address requested changes)
     );
 
     messenger.registerActionHandler(

packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx

@@ -48,32 +48,32 @@ describe('AccountSelector', () => {
 
   it('returns an account selector element with the switchGlobalAccount filter prop', () => {
     const result = (
-      <AccountSelector name="account" switchSelectedAccount={true} />
+      <AccountSelector name="account" switchGlobalAccount={true} />
     );
 
     expect(result).toStrictEqual({
       type: 'AccountSelector',
       props: {
         name: 'account',
-        switchSelectedAccount: true,
+        switchGlobalAccount: true,
       },
       key: null,
     });
   });
 
-  it('returns an account selector element with a selectedAccount prop', () => {
+  it('returns an account selector element with a value prop', () => {
     const result = (
       <AccountSelector
         name="account"
-        selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
+        value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
       />
     );
 
     expect(result).toStrictEqual({
       type: 'AccountSelector',
       props: {
         name: 'account',
-        selectedAddress: 'eip155:1:0x1234567890abcdef1234567890abcdef12345678',
+        value: 'eip155:1:0x1234567890abcdef1234567890abcdef12345678',
       },
       key: null,
     });
@@ -85,8 +85,8 @@ describe('AccountSelector', () => {
         name="account"
         chainIds={['bip122:000000000019d6689c085ae165831e93']}
         hideExternalAccounts={true}
-        switchSelectedAccount={true}
-        selectedAddress="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
+        switchGlobalAccount={true}
+        value="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
       />
     );
 
@@ -96,8 +96,8 @@ describe('AccountSelector', () => {
         name: 'account',
         chainIds: ['bip122:000000000019d6689c085ae165831e93'],
         hideExternalAccounts: true,
-        switchSelectedAccount: true,
-        selectedAddress:
+        switchGlobalAccount: true,
+        value:
           'bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6',
       },
       key: null,

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

@@ -7,17 +7,17 @@ import { createSnapComponent } from '../../component';
  *
  * @property name - The name of the account selector. This is used to identify the
  * state in the form data.
- * @property hideExternalAccounts - Whether to hide accounts that doesn't belong to the snap.
+ * @property hideExternalAccounts - Whether to hide accounts that don't belong to the snap.
  * @property chainIds - The chain IDs to filter the accounts to show.
- * @property switchSelectedAccount - Whether to switch the selected account in the client.
- * @property selectedAddress - The selected address.
+ * @property switchGlobalAccount - Whether to switch the selected account in the client.
+ * @property value - The selected address.
  */
 export type AccountSelectorProps = {
   name: string;
   hideExternalAccounts?: boolean | undefined;
   chainIds?: CaipChainId[] | undefined;
-  switchSelectedAccount?: boolean | undefined;
-  selectedAddress?: CaipAccountId | undefined;
+  switchGlobalAccount?: boolean | undefined;
+  value?: CaipAccountId | undefined;
 };
 
 const TYPE = 'AccountSelector';
@@ -30,8 +30,8 @@ const TYPE = 'AccountSelector';
  * state in the form data.
  * @param props.hideExternalAccounts - Whether to hide accounts that doesn't belong to the snap.
  * @param props.chainIds - The chain IDs to filter the accounts to show.
- * @param props.switchSelectedAccount - Whether to switch the selected account in the client.
- * @param props.selectedAddress - The selected address.
+ * @param props.switchGlobalAccount - Whether to switch the selected account in the client.
+ * @param props.value - The selected address.
  * @returns An account selector element.
  * @example
  * <AccountSelector name="account-selector" />
@@ -40,11 +40,11 @@ const TYPE = 'AccountSelector';
  * @example
  * <AccountSelector name="account-selector" chainIds={['eip155:1']} />
  * @example
- * <AccountSelector name="account-selector" switchSelectedAccount />
+ * <AccountSelector name="account-selector" switchGlobalAccount />
  * @example
- * <AccountSelector name="account-selector" selectedAddress="eip155:1:0x1234..." />
+ * <AccountSelector name="account-selector" value="eip155:1:0x1234..." />
  * @example
- * <AccountSelector name="account-selector" hideExternalAccounts chainIds={['eip155:1']} switchSelectedAccount selectedAddress="eip155:1:0x1234..." />
+ * <AccountSelector name="account-selector" hideExternalAccounts chainIds={['eip155:1']} switchGlobalAccount value="eip155:1:0x1234..." />
  */
 export const AccountSelector = createSnapComponent<
   AccountSelectorProps,