Skip to content

Commit 82969fe

Browse files
GuillaumeRxGuillaumeRx
committed
address requested changes
1 parent b32f31a commit 82969fe

File tree

12 files changed

+116
-82
lines changed

12 files changed

+116
-82
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const SendForm: SnapComponent<SendFormProps> = ({
4848
}) => (
4949
<Form name="sendForm">
5050
<Field label="From account">
51-
<AccountSelector name="accountSelector" switchSelectedAccount />
51+
<AccountSelector name="accountSelector" switchGlobalAccount />
5252
</Field>
5353
<Field label="Send amount" error={errors?.amount}>
5454
<Box>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,8 +182,8 @@ describe('SnapInterfaceController', () => {
182182
<Field label="baz">
183183
<AccountSelector
184184
name="baz"
185-
switchSelectedAccount
186-
selectedAddress="eip155:0:0x1234567890123456789012345678901234567890"
185+
switchGlobalAccount
186+
value="eip155:0:0x1234567890123456789012345678901234567890"
187187
/>
188188
</Field>
189189
<Field label="foobar">

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -770,7 +770,7 @@ describe('constructState', () => {
770770
<Box>
771771
<AccountSelector
772772
name="foo"
773-
selectedAddress="eip155:0:0x1234567890123456789012345678901234567890"
773+
value="eip155:0:0x1234567890123456789012345678901234567890"
774774
/>
775775
</Box>
776776
);
@@ -849,7 +849,7 @@ describe('constructState', () => {
849849
<Field label="foo">
850850
<AccountSelector
851851
name="foo"
852-
selectedAddress="eip155:0:0x1234567890123456789012345678901234567890"
852+
value="eip155:0:0x1234567890123456789012345678901234567890"
853853
/>
854854
</Field>
855855
</Form>
@@ -886,7 +886,7 @@ describe('constructState', () => {
886886
<Box>
887887
<AccountSelector
888888
name="foo"
889-
selectedAddress="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
889+
value="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
890890
/>
891891
</Box>
892892
);
@@ -929,7 +929,7 @@ describe('constructState', () => {
929929
});
930930
});
931931

932-
it('switches the selected account if `switchSelectedAccount` is set', () => {
932+
it('switches the selected account if `switchGlobalAccount` is set', () => {
933933
getAccountByAddress.mockImplementation((address: string) => ({
934934
id: 'foo',
935935
address,
@@ -940,8 +940,8 @@ describe('constructState', () => {
940940
<Box>
941941
<AccountSelector
942942
name="foo"
943-
selectedAddress="eip155:0:0x1234567890123456789012345678901234567890"
944-
switchSelectedAccount
943+
value="eip155:0:0x1234567890123456789012345678901234567890"
944+
switchGlobalAccount
945945
/>
946946
</Box>
947947
);

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

Lines changed: 61 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,36 @@ import type {
2222
} from '@metamask/snaps-sdk/jsx';
2323
import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
2424
import {
25-
createAddressList,
25+
createAccountList,
2626
getJsonSizeUnsafe,
2727
getJsxChildren,
2828
getJsxElementFromComponent,
2929
walkJsx,
3030
} from '@metamask/snaps-utils';
3131
import { parseCaipAccountId, type CaipAccountAddress } from '@metamask/utils';
3232

33+
/**
34+
* A function to get the selected account in the client.
35+
*
36+
* @returns The selected account.
37+
*/
3338
type GetSelectedAccount = () => InternalAccount | undefined;
39+
40+
/**
41+
* A function to get an account by address.
42+
*
43+
* @param address - The address of the account.
44+
* @returns The account with the given address or undefined if none.
45+
*/
3446
type GetAccountByAddress = (
3547
address: CaipAccountAddress,
3648
) => InternalAccount | undefined;
49+
50+
/**
51+
* A function to set the selected account in the client.
52+
*
53+
* @param accountId - The ID of the account to set as selected.
54+
*/
3755
type SetSelectedAccount = (accountId: string) => void;
3856

3957
/**
@@ -110,7 +128,7 @@ function constructComponentSpecificDefaultState(
110128

111129
const { id, address, scopes } = account;
112130

113-
const addresses = createAddressList(address, scopes);
131+
const addresses = createAccountList(address, scopes);
114132

115133
return { accountId: id, addresses };
116134
}
@@ -123,6 +141,42 @@ function constructComponentSpecificDefaultState(
123141
}
124142
}
125143

144+
/**
145+
* Get the state value for an account selector.
146+
*
147+
* @param element - The account selector element.
148+
* @param getAccountByAddress - A function to get an account by address.
149+
* @param setSelectedAccount - A function to set the selected account in the client.
150+
* @returns The state value for the account selector.
151+
*/
152+
function getAccountSelectorStateValue(
153+
element: AccountSelectorElement,
154+
getAccountByAddress: GetAccountByAddress,
155+
setSelectedAccount: SetSelectedAccount,
156+
) {
157+
if (!element.props.value) {
158+
return undefined;
159+
}
160+
161+
const { address: parsedAddress } = parseCaipAccountId(element.props.value);
162+
163+
const account = getAccountByAddress(parsedAddress);
164+
165+
if (!account) {
166+
return undefined;
167+
}
168+
169+
if (element.props.switchGlobalAccount) {
170+
setSelectedAccount(account.id);
171+
}
172+
173+
const { id, address, scopes } = account;
174+
175+
const addresses = createAccountList(address, scopes);
176+
177+
return { accountId: id, addresses };
178+
}
179+
126180
/**
127181
* Get the state value for a stateful component.
128182
*
@@ -149,32 +203,13 @@ function getComponentStateValue(
149203
case 'Checkbox':
150204
return element.props.checked;
151205

152-
case 'AccountSelector': {
153-
if (!element.props.selectedAddress) {
154-
return undefined;
155-
}
156-
157-
const { address: parsedAddress } = parseCaipAccountId(
158-
element.props.selectedAddress,
206+
case 'AccountSelector':
207+
return getAccountSelectorStateValue(
208+
element,
209+
getAccountByAddress,
210+
setSelectedAccount,
159211
);
160212

161-
const account = getAccountByAddress(parsedAddress);
162-
163-
if (!account) {
164-
return undefined;
165-
}
166-
167-
if (element.props.switchSelectedAccount) {
168-
setSelectedAccount(account.id);
169-
}
170-
171-
const { id, address, scopes } = account;
172-
173-
const addresses = createAddressList(address, scopes);
174-
175-
return { accountId: id, addresses };
176-
}
177-
178213
default:
179214
return element.props.value;
180215
}

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

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
generateSalt,
1010
isVaultUpdated,
1111
} from '@metamask/browser-passworder';
12-
import type { InternalAccount } from '@metamask/keyring-internal-api';
1312
import type {
1413
PermissionConstraint,
1514
SubjectPermissions,
@@ -803,22 +802,22 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
803802

804803
messenger.registerActionHandler(
805804
'AccountsController:getAccountByAddress',
806-
(address: string) =>
807-
({
808-
address,
809-
id: 'foo',
810-
scopes: ['eip155:0'],
811-
} as unknown as InternalAccount),
805+
// @ts-expect-error partial mock
806+
(address: string) => ({
807+
address,
808+
id: 'foo',
809+
scopes: ['eip155:0'],
810+
}),
812811
);
813812

814813
messenger.registerActionHandler(
815814
'AccountsController:getSelectedMultichainAccount',
816-
() =>
817-
({
818-
address: '0x1234567890123456789012345678901234567890',
819-
id: 'foo',
820-
scopes: ['eip155:0'],
821-
} as unknown as InternalAccount),
815+
// @ts-expect-error partial mock
816+
() => ({
817+
address: '0x1234567890123456789012345678901234567890',
818+
id: 'foo',
819+
scopes: ['eip155:0'],
820+
}),
822821
);
823822

824823
messenger.registerActionHandler(

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,32 +48,32 @@ describe('AccountSelector', () => {
4848

4949
it('returns an account selector element with the switchGlobalAccount filter prop', () => {
5050
const result = (
51-
<AccountSelector name="account" switchSelectedAccount={true} />
51+
<AccountSelector name="account" switchGlobalAccount={true} />
5252
);
5353

5454
expect(result).toStrictEqual({
5555
type: 'AccountSelector',
5656
props: {
5757
name: 'account',
58-
switchSelectedAccount: true,
58+
switchGlobalAccount: true,
5959
},
6060
key: null,
6161
});
6262
});
6363

64-
it('returns an account selector element with a selectedAccount prop', () => {
64+
it('returns an account selector element with a value prop', () => {
6565
const result = (
6666
<AccountSelector
6767
name="account"
68-
selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
68+
value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
6969
/>
7070
);
7171

7272
expect(result).toStrictEqual({
7373
type: 'AccountSelector',
7474
props: {
7575
name: 'account',
76-
selectedAddress: 'eip155:1:0x1234567890abcdef1234567890abcdef12345678',
76+
value: 'eip155:1:0x1234567890abcdef1234567890abcdef12345678',
7777
},
7878
key: null,
7979
});
@@ -85,8 +85,8 @@ describe('AccountSelector', () => {
8585
name="account"
8686
chainIds={['bip122:000000000019d6689c085ae165831e93']}
8787
hideExternalAccounts={true}
88-
switchSelectedAccount={true}
89-
selectedAddress="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
88+
switchGlobalAccount={true}
89+
value="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
9090
/>
9191
);
9292

@@ -96,8 +96,8 @@ describe('AccountSelector', () => {
9696
name: 'account',
9797
chainIds: ['bip122:000000000019d6689c085ae165831e93'],
9898
hideExternalAccounts: true,
99-
switchSelectedAccount: true,
100-
selectedAddress:
99+
switchGlobalAccount: true,
100+
value:
101101
'bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6',
102102
},
103103
key: null,

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ import { createSnapComponent } from '../../component';
77
*
88
* @property name - The name of the account selector. This is used to identify the
99
* state in the form data.
10-
* @property hideExternalAccounts - Whether to hide accounts that doesn't belong to the snap.
10+
* @property hideExternalAccounts - Whether to hide accounts that don't belong to the snap.
1111
* @property chainIds - The chain IDs to filter the accounts to show.
12-
* @property switchSelectedAccount - Whether to switch the selected account in the client.
13-
* @property selectedAddress - The selected address.
12+
* @property switchGlobalAccount - Whether to switch the selected account in the client.
13+
* @property value - The selected address.
1414
*/
1515
export type AccountSelectorProps = {
1616
name: string;
1717
hideExternalAccounts?: boolean | undefined;
1818
chainIds?: CaipChainId[] | undefined;
19-
switchSelectedAccount?: boolean | undefined;
20-
selectedAddress?: CaipAccountId | undefined;
19+
switchGlobalAccount?: boolean | undefined;
20+
value?: CaipAccountId | undefined;
2121
};
2222

2323
const TYPE = 'AccountSelector';
@@ -30,8 +30,8 @@ const TYPE = 'AccountSelector';
3030
* state in the form data.
3131
* @param props.hideExternalAccounts - Whether to hide accounts that doesn't belong to the snap.
3232
* @param props.chainIds - The chain IDs to filter the accounts to show.
33-
* @param props.switchSelectedAccount - Whether to switch the selected account in the client.
34-
* @param props.selectedAddress - The selected address.
33+
* @param props.switchGlobalAccount - Whether to switch the selected account in the client.
34+
* @param props.value - The selected address.
3535
* @returns An account selector element.
3636
* @example
3737
* <AccountSelector name="account-selector" />
@@ -40,11 +40,11 @@ const TYPE = 'AccountSelector';
4040
* @example
4141
* <AccountSelector name="account-selector" chainIds={['eip155:1']} />
4242
* @example
43-
* <AccountSelector name="account-selector" switchSelectedAccount />
43+
* <AccountSelector name="account-selector" switchGlobalAccount />
4444
* @example
45-
* <AccountSelector name="account-selector" selectedAddress="eip155:1:0x1234..." />
45+
* <AccountSelector name="account-selector" value="eip155:1:0x1234..." />
4646
* @example
47-
* <AccountSelector name="account-selector" hideExternalAccounts chainIds={['eip155:1']} switchSelectedAccount selectedAddress="eip155:1:0x1234..." />
47+
* <AccountSelector name="account-selector" hideExternalAccounts chainIds={['eip155:1']} switchGlobalAccount value="eip155:1:0x1234..." />
4848
*/
4949
export const AccountSelector = createSnapComponent<
5050
AccountSelectorProps,

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -582,17 +582,17 @@ describe('AccountSelectorStruct', () => {
582582
chainIds={['bip122:000000000019d6689c085ae165831e93']}
583583
/>,
584584
<AccountSelector name="account" hideExternalAccounts />,
585-
<AccountSelector name="account" switchSelectedAccount />,
585+
<AccountSelector name="account" switchGlobalAccount />,
586586
<AccountSelector
587587
name="account"
588-
selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
588+
value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
589589
/>,
590590
<AccountSelector
591591
name="account"
592592
chainIds={['foo:bar']}
593593
hideExternalAccounts
594-
switchSelectedAccount
595-
selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
594+
switchGlobalAccount
595+
value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
596596
/>,
597597
])('validates an account picker element', (value) => {
598598
expect(is(value, AccountSelectorStruct)).toBe(true);
@@ -612,15 +612,15 @@ describe('AccountSelectorStruct', () => {
612612
<Text>foo</Text>
613613
</AccountSelector>,
614614
// @ts-expect-error - Invalid props.
615-
<AccountSelector switchSelectedAccount="foo" />,
615+
<AccountSelector switchGlobalAccount="foo" />,
616616
// @ts-expect-error - Invalid props.
617617
<AccountSelector chainIds={['bip122:000000000019d6689c085ae165831e93']} />,
618618
// @ts-expect-error - Invalid props.
619-
<AccountSelector selectedAddress={42} />,
619+
<AccountSelector value={42} />,
620620
<AccountSelector
621621
name="account"
622622
chainIds={['foo:bar']}
623-
selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
623+
value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
624624
// @ts-expect-error - Invalid props.
625625
hideExternalAccounts={42}
626626
/>,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -381,8 +381,8 @@ export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
381381
Infer<typeof CaipChainIdStruct>[] | undefined,
382382
null
383383
>,
384-
switchSelectedAccount: optional(boolean()),
385-
selectedAddress: optional(CaipAccountIdStruct),
384+
switchGlobalAccount: optional(boolean()),
385+
value: optional(CaipAccountIdStruct),
386386
},
387387
);
388388

0 commit comments

Comments
 (0)