From f602b55743065b0569f8a9460465b6fe42fd4804 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Tue, 19 Nov 2024 11:00:34 +0100 Subject: [PATCH 1/3] Add support for `Address` in `Card` title --- .../src/jsx/components/Card.test.tsx | 39 +++++++++++++++++++ packages/snaps-sdk/src/jsx/components/Card.ts | 3 +- .../snaps-sdk/src/jsx/validation.test.tsx | 13 +++++++ packages/snaps-sdk/src/jsx/validation.ts | 22 +++++------ 4 files changed, 65 insertions(+), 12 deletions(-) diff --git a/packages/snaps-sdk/src/jsx/components/Card.test.tsx b/packages/snaps-sdk/src/jsx/components/Card.test.tsx index dc4ad2c8df..ca17dab82b 100644 --- a/packages/snaps-sdk/src/jsx/components/Card.test.tsx +++ b/packages/snaps-sdk/src/jsx/components/Card.test.tsx @@ -1,3 +1,4 @@ +import { Address } from './Address'; import { Card } from './Card'; describe('Card', () => { @@ -24,4 +25,42 @@ describe('Card', () => { }, }); }); + + it('renders a card with an address as title', () => { + const result = ( + + } + description="Description" + value="$1200" + extra="0.12 ETH" + /> + ); + + expect(result).toStrictEqual({ + type: 'Card', + key: null, + props: { + image: '', + title: { + key: null, + props: { + address: '0x1234567890123456789012345678901234567890', + avatar: false, + displayName: true, + }, + type: 'Address', + }, + description: 'Description', + value: '$1200', + extra: '0.12 ETH', + }, + }); + }); }); diff --git a/packages/snaps-sdk/src/jsx/components/Card.ts b/packages/snaps-sdk/src/jsx/components/Card.ts index b9af39a702..a78a77e138 100644 --- a/packages/snaps-sdk/src/jsx/components/Card.ts +++ b/packages/snaps-sdk/src/jsx/components/Card.ts @@ -1,4 +1,5 @@ import { createSnapComponent } from '../component'; +import type { AddressElement } from './Address'; /** * The props of the {@link Card} component. @@ -11,7 +12,7 @@ import { createSnapComponent } from '../component'; */ export type CardProps = { image?: string | undefined; - title: string; + title: string | AddressElement; description?: string | undefined; value: string; extra?: string | undefined; diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index 04255bb467..3982ff2319 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -701,6 +701,19 @@ describe('CardStruct', () => { value="$1200" extra="0.12 ETH" />, + + } + description="Description" + value="$1200" + extra="0.12 ETH" + />, ])('validates a card element', (value) => { expect(is(value, CardStruct)).toBe(true); }); diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index 800fe04dd3..981075805a 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -339,12 +339,22 @@ export const DropdownStruct: Describe = element('Dropdown', { children: children([OptionStruct]), }); +/** + * A struct for the {@link AddressElement} type. + */ +export const AddressStruct: Describe = element('Address', { + address: nullUnion([HexChecksumAddressStruct, CaipAccountIdStruct]), + truncate: optional(boolean()), + displayName: optional(boolean()), + avatar: optional(boolean()), +}); + /** * A struct for the {@link CardElement} type. */ export const CardStruct: Describe = element('Card', { image: optional(string()), - title: string(), + title: nullUnion([string(), AddressStruct]), description: optional(string()), value: string(), extra: optional(string()), @@ -538,16 +548,6 @@ export const FormattingStruct: Describe = typedUnion( [BoldStruct, ItalicStruct], ); -/** - * A struct for the {@link AddressElement} type. - */ -export const AddressStruct: Describe = element('Address', { - address: nullUnion([HexChecksumAddressStruct, CaipAccountIdStruct]), - truncate: optional(boolean()), - displayName: optional(boolean()), - avatar: optional(boolean()), -}); - /** * A struct for the {@link AvatarElement} type. */ From 51b089b4abd86536668d1203c009b22306f45a65 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Tue, 19 Nov 2024 11:03:41 +0100 Subject: [PATCH 2/3] update manifests --- packages/examples/packages/browserify-plugin/snap.manifest.json | 2 +- packages/examples/packages/browserify/snap.manifest.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index bb85919513..2f1d9b7758 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": "LciQX9cjRXeSErEsKRm9OEFW8jAq9doqaa9b/TfGN3Y=", + "shasum": "ylLDqomDRg+p+bnetUKrtX77Wnk38ujREPpT3w8PjG8=", "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 f3ae515fcb..1dd4f3e49c 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": "83SohbQ4Vp/wI2lFXL6tyuvWy7bLcRSL3yZikZEZrAg=", + "shasum": "1kb/f8AOFmBcah5zUq3QjiaIV08Uf9H3NPazsiM9lcY=", "location": { "npm": { "filePath": "dist/bundle.js", From bbf5985e7576e920593b8e0f58033c93a10cdfa1 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Tue, 19 Nov 2024 11:17:04 +0100 Subject: [PATCH 3/3] use `selectiveUnion` --- .../examples/packages/browserify-plugin/snap.manifest.json | 2 +- packages/examples/packages/browserify/snap.manifest.json | 2 +- packages/snaps-sdk/src/jsx/validation.ts | 7 ++++++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index 2f1d9b7758..3ffc4ee3ab 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": "ylLDqomDRg+p+bnetUKrtX77Wnk38ujREPpT3w8PjG8=", + "shasum": "8LxymXn6+X9URWzkmurIZEyCypzF3OUm53FLjlNW0/I=", "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 1dd4f3e49c..3fedc26619 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": "1kb/f8AOFmBcah5zUq3QjiaIV08Uf9H3NPazsiM9lcY=", + "shasum": "hYGGCiIVhwOlDnwIyfpkscAd5bc2kVAyzXMq3UC6ORQ=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index 981075805a..adbc39b1db 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -354,7 +354,12 @@ export const AddressStruct: Describe = element('Address', { */ export const CardStruct: Describe = element('Card', { image: optional(string()), - title: nullUnion([string(), AddressStruct]), + title: selectiveUnion((value) => { + if (typeof value === 'object') { + return AddressStruct; + } + return string(); + }), description: optional(string()), value: string(), extra: optional(string()),