fix(snaps): Fix types on custom UI Input (#27860)

## **Description**

This PR fixes a type issue on custom UI `Input` component.


[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27860?quickstart=1)

## **Related issues**

## **Manual testing steps**

## **Screenshots/Recordings**

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/components/app/snaps/snap-ui-renderer/components/field.ts

@@ -14,6 +14,7 @@ import { radioGroup as radioGroupFn } from './radioGroup';
 import { checkbox as checkboxFn } from './checkbox';
 import { selector as selectorFn } from './selector';
 import { UIComponentFactory, UIComponentParams } from './types';
+import { constructInputProps } from './input';
 
 export const field: UIComponentFactory<FieldElement> = ({
   element,
@@ -79,9 +80,7 @@ export const field: UIComponentFactory<FieldElement> = ({
           id: input.props.name,
           placeholder: input.props.placeholder,
           label: element.props.label,
-          textFieldProps: {
-            type: input.props.type,
-          },
+          ...constructInputProps(input.props),
           name: input.props.name,
           form,
           error: element.props.error !== undefined,

ui/components/app/snaps/snap-ui-renderer/components/input.ts

@@ -1,21 +1,50 @@
-import { InputElement } from '@metamask/snaps-sdk/jsx';
+import { InputElement, NumberInputProps } from '@metamask/snaps-sdk/jsx';
 
+import { hasProperty } from '@metamask/utils';
 import { UIComponentFactory } from './types';
 
-export const input: UIComponentFactory<InputElement> = ({ element, form }) => ({
-  element: 'SnapUIInput',
-  props: {
-    id: element.props.name,
-    placeholder: element.props.placeholder,
-    textFieldProps: {
-      type: element.props.type,
-      inputProps: {
-        step: element.props.step,
-        min: element.props.min,
-        max: element.props.max,
+export const constructInputProps = (props: InputElement['props']) => {
+  if (!hasProperty(props, 'type')) {
+    return {
+      textFieldProps: {
+        type: 'text',
       },
+    };
+  }
+
+  switch (props.type) {
+    case 'number': {
+      const { step, min, max, type } = props as NumberInputProps;
+
+      return {
+        textFieldProps: {
+          type,
+          inputProps: {
+            step: step?.toString(),
+            min: min?.toString(),
+            max: max?.toString(),
+          },
+        },
+      };
+    }
+    default:
+      return {
+        textFieldProps: {
+          type: props.type,
+        },
+      };
+  }
+};
+
+export const input: UIComponentFactory<InputElement> = ({ element, form }) => {
+  return {
+    element: 'SnapUIInput',
+    props: {
+      id: element.props.name,
+      placeholder: element.props.placeholder,
+      ...constructInputProps(element.props),
+      name: element.props.name,
+      form,
     },
-    name: element.props.name,
-    form,
-  },
-});
+  };
+};