From c6cb28ea28a738cabe074b60926ed58bedb74ac8 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Fri, 27 Sep 2024 14:44:47 +0200 Subject: [PATCH 1/2] Allow multiple chain ID in `AccountSelector` --- .../packages/browserify-plugin/snap.manifest.json | 2 +- .../examples/packages/browserify/snap.manifest.json | 2 +- .../src/jsx/components/form/AccountSelector.test.tsx | 4 ++-- .../src/jsx/components/form/AccountSelector.ts | 10 +++++----- packages/snaps-sdk/src/jsx/validation.test.tsx | 10 +++++----- packages/snaps-sdk/src/jsx/validation.ts | 10 ++++++---- 6 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index 304213343d..12a25704bc 100644 --- a/packages/examples/packages/browserify-plugin/snap.manifest.json +++ b/packages/examples/packages/browserify-plugin/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "zGgTjLWTEn796eXGvv66p8tGxZSa82yEEGnRtyVutEc=", + "shasum": "MwD85WOJiZizARdcztsXN2FTVrTiU69LJHY+DA3ypVg=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json index 80491ec47b..695c678142 100644 --- a/packages/examples/packages/browserify/snap.manifest.json +++ b/packages/examples/packages/browserify/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "qfkidJLew8JNN2Enx4pDUgWNgLPqBkG0k3mGQRR1oaY=", + "shasum": "S7VSggheQfMh8jJJSNcBzDt2rr+CypLnR7dSnnuQOi8=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx index 7904e60cbf..d11515c3d1 100644 --- a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx +++ b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx @@ -6,7 +6,7 @@ describe('AccountSelector', () => { ); @@ -16,7 +16,7 @@ describe('AccountSelector', () => { props: { name: 'account', title: 'From account', - chainId: 'bip122:p2wpkh', + chainId: ['bip122:p2wpkh'], selectedAddress: 'bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6', }, key: null, diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts index 78f54cf63b..f9441cf9f3 100644 --- a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts +++ b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts @@ -8,14 +8,14 @@ import { createSnapComponent } from '../../component'; * @property name - The name of the account selector. This is used to identify the * state in the form data. * @property title - The title of the account selector. This is displayed in the UI. - * @property chainId - The chain ID of the account selector. This should be a valid CAIP-2 chain ID. + * @property chainId - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array. * @property selectedAddress - The default selected address of the account selector. This should be a * valid CAIP-10 account address. */ export type AccountSelectorProps = { name: string; title: string; - chainId: CaipChainId; + chainId: CaipChainId[]; selectedAddress: CaipAccountAddress; }; @@ -30,14 +30,14 @@ const TYPE = 'AccountSelector'; * @param props.name - The name of the account selector field. This is used to identify the * state in the form data. * @param props.title - The title of the account selector field. This is displayed in the UI. - * @param props.chainId - The chain ID of the account selector. This should be a valid CAIP-2 chain ID. + * @param props.chainId - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array. * @param props.selectedAddress - The selected address of the account selector. This should be a * valid CAIP-10 account address. * @returns An account selector element. * @example - * + * * @example - * + * */ export const AccountSelector = createSnapComponent< AccountSelectorProps, diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index ff42634d56..e00bdba01a 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -963,13 +963,13 @@ describe('AccountSelectorStruct', () => { , , ])('validates an account picker element', (value) => { @@ -994,19 +994,19 @@ describe('AccountSelectorStruct', () => { // @ts-expect-error - Invalid props. , // @ts-expect-error - Invalid props. - , + , // @ts-expect-error - Invalid props. , , , foo, diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index b07da65ffb..5b88e16f3c 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -342,10 +342,12 @@ export const AccountSelectorStruct: Describe = element( { name: string(), title: string(), - chainId: CaipChainIdStruct as unknown as Struct< - Infer, - Infer - >, + chainId: array( + CaipChainIdStruct as unknown as Struct< + Infer, + Infer + >, + ), selectedAddress: CaipAccountAddressStruct, }, ); From c8a4aaffee39c664bfd3b2d71473e470d119239e Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Fri, 27 Sep 2024 14:50:10 +0200 Subject: [PATCH 2/2] rename `chainId` prop to `chainIds` --- .../packages/browserify-plugin/snap.manifest.json | 2 +- .../examples/packages/browserify/snap.manifest.json | 2 +- .../src/jsx/components/form/AccountSelector.test.tsx | 4 ++-- .../src/jsx/components/form/AccountSelector.ts | 10 +++++----- packages/snaps-sdk/src/jsx/validation.test.tsx | 10 +++++----- packages/snaps-sdk/src/jsx/validation.ts | 2 +- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index 12a25704bc..ff42946368 100644 --- a/packages/examples/packages/browserify-plugin/snap.manifest.json +++ b/packages/examples/packages/browserify-plugin/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "MwD85WOJiZizARdcztsXN2FTVrTiU69LJHY+DA3ypVg=", + "shasum": "hU2i377FhKzvwrx4y28hc5XFO3KccCUq7bAJdsQ2CD0=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json index 695c678142..e69b567157 100644 --- a/packages/examples/packages/browserify/snap.manifest.json +++ b/packages/examples/packages/browserify/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "S7VSggheQfMh8jJJSNcBzDt2rr+CypLnR7dSnnuQOi8=", + "shasum": "VCd6NkT2lPRvH5tKtzCqtW4dO8zEA3/zagYxhhv1mBI=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx index d11515c3d1..02d65c70a0 100644 --- a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx +++ b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx @@ -6,7 +6,7 @@ describe('AccountSelector', () => { ); @@ -16,7 +16,7 @@ describe('AccountSelector', () => { props: { name: 'account', title: 'From account', - chainId: ['bip122:p2wpkh'], + chainIds: ['bip122:p2wpkh'], selectedAddress: 'bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6', }, key: null, diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts index f9441cf9f3..68d2aaf938 100644 --- a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts +++ b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts @@ -8,14 +8,14 @@ import { createSnapComponent } from '../../component'; * @property name - The name of the account selector. This is used to identify the * state in the form data. * @property title - The title of the account selector. This is displayed in the UI. - * @property chainId - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array. + * @property chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array. * @property selectedAddress - The default selected address of the account selector. This should be a * valid CAIP-10 account address. */ export type AccountSelectorProps = { name: string; title: string; - chainId: CaipChainId[]; + chainIds: CaipChainId[]; selectedAddress: CaipAccountAddress; }; @@ -30,14 +30,14 @@ const TYPE = 'AccountSelector'; * @param props.name - The name of the account selector field. This is used to identify the * state in the form data. * @param props.title - The title of the account selector field. This is displayed in the UI. - * @param props.chainId - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array. + * @param props.chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array. * @param props.selectedAddress - The selected address of the account selector. This should be a * valid CAIP-10 account address. * @returns An account selector element. * @example - * + * * @example - * + * */ export const AccountSelector = createSnapComponent< AccountSelectorProps, diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index e00bdba01a..d9b47508a0 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -963,13 +963,13 @@ describe('AccountSelectorStruct', () => { , , ])('validates an account picker element', (value) => { @@ -994,19 +994,19 @@ describe('AccountSelectorStruct', () => { // @ts-expect-error - Invalid props. , // @ts-expect-error - Invalid props. - , + , // @ts-expect-error - Invalid props. , , , foo, diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index 5b88e16f3c..d4f5d4dfa8 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -342,7 +342,7 @@ export const AccountSelectorStruct: Describe = element( { name: string(), title: string(), - chainId: array( + chainIds: array( CaipChainIdStruct as unknown as Struct< Infer, Infer