From a66e614e17b9cf1e658837c6bf910af8e81cb728 Mon Sep 17 00:00:00 2001 From: Maarten Zuidhoorn Date: Fri, 3 May 2024 12:03:47 +0200 Subject: [PATCH] Add deprecation notice to legacy UI components (#2388) Now that JSX is merged, we can deprecate the legacy UI components. I've added a deprecation notice to all the legacy UI functions. --- packages/snaps-sdk/src/ui/components/address.ts | 2 ++ packages/snaps-sdk/src/ui/components/button.ts | 2 ++ packages/snaps-sdk/src/ui/components/copyable.ts | 2 ++ packages/snaps-sdk/src/ui/components/divider.ts | 2 ++ packages/snaps-sdk/src/ui/components/form.ts | 2 ++ packages/snaps-sdk/src/ui/components/heading.ts | 2 ++ packages/snaps-sdk/src/ui/components/image.ts | 2 ++ packages/snaps-sdk/src/ui/components/input.ts | 2 ++ packages/snaps-sdk/src/ui/components/panel.ts | 2 ++ packages/snaps-sdk/src/ui/components/row.ts | 2 ++ packages/snaps-sdk/src/ui/components/spinner.ts | 2 ++ packages/snaps-sdk/src/ui/components/text.ts | 2 ++ 12 files changed, 24 insertions(+) diff --git a/packages/snaps-sdk/src/ui/components/address.ts b/packages/snaps-sdk/src/ui/components/address.ts index a51684ede6..a8b69d7209 100644 --- a/packages/snaps-sdk/src/ui/components/address.ts +++ b/packages/snaps-sdk/src/ui/components/address.ts @@ -28,6 +28,8 @@ export type Address = Infer; * with the `value` property. * @param args.value - The address to be rendered. * @returns The address node as an object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = address({ value: '0x4bbeeb066ed09b7aed07bf39eee0460dfa261520' }); * const node = address('0x4bbeeb066ed09b7aed07bf39eee0460dfa261520'); diff --git a/packages/snaps-sdk/src/ui/components/button.ts b/packages/snaps-sdk/src/ui/components/button.ts index 4d92771032..ccedcb148d 100644 --- a/packages/snaps-sdk/src/ui/components/button.ts +++ b/packages/snaps-sdk/src/ui/components/button.ts @@ -53,6 +53,8 @@ export type Button = Infer; * @param args.value - The text content of the node. * @param args.name - The optional name of the button. * @returns The text node as object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * ```typescript * const node = button({ variant: 'primary', text: 'Hello, world!', name: 'myButton' }); diff --git a/packages/snaps-sdk/src/ui/components/copyable.ts b/packages/snaps-sdk/src/ui/components/copyable.ts index 74bd6ed630..7d916537bc 100644 --- a/packages/snaps-sdk/src/ui/components/copyable.ts +++ b/packages/snaps-sdk/src/ui/components/copyable.ts @@ -43,6 +43,8 @@ export type Copyable = Infer; * values are only displayed to the user after clicking on the component. * Defaults to false. * @returns A {@link Copyable} component. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = copyable('Hello, world!'); * const node = copyable({ value: 'Hello, world!' }); diff --git a/packages/snaps-sdk/src/ui/components/divider.ts b/packages/snaps-sdk/src/ui/components/divider.ts index 4bf6c51435..ebe630ab52 100644 --- a/packages/snaps-sdk/src/ui/components/divider.ts +++ b/packages/snaps-sdk/src/ui/components/divider.ts @@ -20,6 +20,8 @@ export type Divider = Infer; * Create a {@link Divider} node. * * @returns The divider node as object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = divider(); */ diff --git a/packages/snaps-sdk/src/ui/components/form.ts b/packages/snaps-sdk/src/ui/components/form.ts index 833e1c7ecd..0514bd2dbc 100644 --- a/packages/snaps-sdk/src/ui/components/form.ts +++ b/packages/snaps-sdk/src/ui/components/form.ts @@ -40,6 +40,8 @@ export type Form = Infer; * @param args.children - The child nodes of the form. This can be any valid * {@link FormComponent}. * @returns The form node as object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = form({ * name: 'myForm', diff --git a/packages/snaps-sdk/src/ui/components/heading.ts b/packages/snaps-sdk/src/ui/components/heading.ts index d88c8720db..f790140c12 100644 --- a/packages/snaps-sdk/src/ui/components/heading.ts +++ b/packages/snaps-sdk/src/ui/components/heading.ts @@ -29,6 +29,8 @@ export type Heading = Infer; * with the `value` property. * @param args.value - The heading text. * @returns The heading node as object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = heading({ value: 'Hello, world!' }); * const node = heading('Hello, world!'); diff --git a/packages/snaps-sdk/src/ui/components/image.ts b/packages/snaps-sdk/src/ui/components/image.ts index c498cab685..1027ba9eac 100644 --- a/packages/snaps-sdk/src/ui/components/image.ts +++ b/packages/snaps-sdk/src/ui/components/image.ts @@ -45,6 +45,8 @@ export type Image = Infer; * @param args.value - The SVG image to be rendered. Must be a valid SVG string. * @returns The image node as object. Other image formats are supported by * embedding them as data URLs in the SVG. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = image({ value: '' }); * const node = image(''); diff --git a/packages/snaps-sdk/src/ui/components/input.ts b/packages/snaps-sdk/src/ui/components/input.ts index 3bc47f3c11..5bc0db11eb 100644 --- a/packages/snaps-sdk/src/ui/components/input.ts +++ b/packages/snaps-sdk/src/ui/components/input.ts @@ -61,6 +61,8 @@ export type Input = Infer; * @param args.label - An optional input label. * @param args.error - An optional error text. * @returns The input node as an object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = input('myInput'); * const node = input('myInput', InputType.Text, 'my placeholder', 'myValue', 'myLabel'); diff --git a/packages/snaps-sdk/src/ui/components/panel.ts b/packages/snaps-sdk/src/ui/components/panel.ts index 64d98c4856..fa0949b2c5 100644 --- a/packages/snaps-sdk/src/ui/components/panel.ts +++ b/packages/snaps-sdk/src/ui/components/panel.ts @@ -68,6 +68,8 @@ export type Panel = { * @param args.children - The child nodes of the panel. This can be any valid * {@link Component}. * @returns The panel node as object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = panel({ * children: [ diff --git a/packages/snaps-sdk/src/ui/components/row.ts b/packages/snaps-sdk/src/ui/components/row.ts index 90320bd559..b13c5d0e53 100644 --- a/packages/snaps-sdk/src/ui/components/row.ts +++ b/packages/snaps-sdk/src/ui/components/row.ts @@ -53,6 +53,8 @@ export type Row = Infer; * @param args.value - Another component, is currently limited to `image`, `text` and `address`. * @param args.variant - An optional variant, either `default`, `warning` or `critical`. * @returns The row node as an object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = row({ label: 'Address', value: address('0x4bbeeb066ed09b7aed07bf39eee0460dfa261520') }); * const node = row({ label: 'Address', value: address('0x4bbeeb066ed09b7aed07bf39eee0460dfa261520'), variant: RowVariant.Warning }); diff --git a/packages/snaps-sdk/src/ui/components/spinner.ts b/packages/snaps-sdk/src/ui/components/spinner.ts index 151fdddf1f..4b2698bbf6 100644 --- a/packages/snaps-sdk/src/ui/components/spinner.ts +++ b/packages/snaps-sdk/src/ui/components/spinner.ts @@ -21,6 +21,8 @@ export type Spinner = Infer; * Create a {@link Spinner} node. * * @returns The spinner node as object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = spinner(); */ diff --git a/packages/snaps-sdk/src/ui/components/text.ts b/packages/snaps-sdk/src/ui/components/text.ts index 1bf895bc74..7b0c16d40c 100644 --- a/packages/snaps-sdk/src/ui/components/text.ts +++ b/packages/snaps-sdk/src/ui/components/text.ts @@ -41,6 +41,8 @@ export type Text = Infer; * @param args.markdown - An optional flag to enable or disable markdown. This * is enabled by default. * @returns The text node as object. + * @deprecated Snaps component functions are deprecated, in favor of the new JSX + * components. This function will be removed in a future release. * @example * const node = text({ value: 'Hello, world!' }); * const node = text('Hello, world!');