feat: UI/UX improvements (#39)

## Description

- Updates the snap to use latest version of Snaps Dynamic UI (JSX
components)
- Removed "ENS disclaimer message" in place of conditionally rendering
ENS instructions in the `WatchForm`

closes:
https://github.com/orgs/MetaMask/projects/75/views/6?pane=issue&itemId=67344493

## Screenshots

Ethereum Mainnet
<img width="342" alt="Screenshot 2024-07-30 at 4 29 27 PM"
src="https://github.com/user-attachments/assets/c84afd20-06f7-46d4-b874-d684e555ed30">

Other network
<img width="357" alt="Screenshot 2024-07-30 at 4 30 04 PM"
src="https://github.com/user-attachments/assets/b52144b2-faac-4d31-a510-8a02481509cb">

.eslintrc.js

@@ -13,6 +13,24 @@ module.exports = {
         'no-restricted-globals': 'off',
         'spaced-comment': ['error', 'always', { markers: ['/'] }],
         'import/no-nodejs-modules': ['error', { allow: ['buffer', 'crypto'] }],
+        // This allows importing the `Text` JSX component.
+        '@typescript-eslint/no-shadow': [
+          'error',
+          {
+            allow: ['Text'],
+          },
+        ],
+
+        // Without the `allowAny` option, this rule causes a lot of false
+        // positives.
+        '@typescript-eslint/restrict-template-expressions': [
+          'error',
+          {
+            allowAny: true,
+            allowBoolean: true,
+            allowNumber: true,
+          },
+        ],
       },
     },
 
@@ -50,5 +68,6 @@ module.exports = {
     'dist/',
     'docs/',
     '.yarn/',
+    'site/',
   ],
 };

package.json

@@ -45,7 +45,7 @@
     "@ethereumjs/tx": "^5.1.0",
     "@ethereumjs/util": "^9.0.1",
     "@metamask/keyring-api": "^4.0.1",
-    "@metamask/snaps-sdk": "^3.1.0",
+    "@metamask/snaps-sdk": "^6.0.0",
     "@metamask/utils": "^8.3.0",
     "ethers": "^5.7.2",
     "uuid": "^9.0.0"
@@ -57,16 +57,16 @@
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
-    "@metamask/snaps-cli": "^6.0.2",
+    "@metamask/snaps-cli": "^6.2.1",
     "@metamask/snaps-jest": "^6.0.1",
     "@metamask/snaps-types": "^3.1.0",
     "@types/jest": "^29.5.11",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
     "depcheck": "^1.4.7",
-    "eslint": "^8.36.0",
+    "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.7.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "~2.26.0",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-jsdoc": "^40.0.3",
     "eslint-plugin-n": "^16.1.0",

snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/metamask/snap-watch-only.git"
   },
   "source": {
-    "shasum": "YqLkMSiq8S1mMn+4IZi7sltx7J+Lv+wpta0hNtyyGFg=",
+    "shasum": "16ZT41K5qxR9LH7oAQhZSFwDDTJV4Mp4v+GJUYMNUFI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

src/index.ts

@@ -9,7 +9,7 @@ import type { OnKeyringRequestHandler } from '@metamask/snaps-types';
 import { WatchOnlyKeyring } from './keyring';
 import { originPermissions } from './permissions';
 import { getState } from './stateManagement';
-import { WatchFormNames } from './ui/components';
+import { WatchFormNames } from './ui/components/WatchForm';
 import { createInterface, showErrorMessage } from './ui/ui';
 import { isMainnet, validateUserInput } from './ui/ui-utils';
 
@@ -88,7 +88,7 @@ export const onUserInput: OnUserInputHandler = async ({ id, event }) => {
     event.type === UserInputEventType.FormSubmitEvent &&
     event.name === WatchFormNames.AddressForm
   ) {
-    const inputValue = event.value[WatchFormNames.AddressInput];
+    const inputValue = event.value[WatchFormNames.AddressInput]?.toString();
 
     if (!inputValue) {
       const onMainnet = await isMainnet();

src/ui/components/ErrorMessage.tsx

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { RowVariant } from '@metamask/snaps-sdk';
+import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+import { Row, Text } from '@metamask/snaps-sdk/jsx';
+
+export type ErrorMessageProps = {
+  message: string;
+};
+
+export const ErrorMessage: SnapComponent<ErrorMessageProps> = ({
+  message,
+}: ErrorMessageProps) => {
+  return (
+    <Row label="Error" variant={RowVariant.Critical}>
+      <Text>{message}</Text>
+    </Row>
+  );
+};

src/ui/components/SpinnerWithMessage.tsx

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+import { Box, Divider, Heading, Spinner, Text } from '@metamask/snaps-sdk/jsx';
+
+export type SpinnerWithMessageProps = {
+  message?: string;
+};
+
+export const SpinnerWithMessage: SnapComponent<SpinnerWithMessageProps> = ({
+  message,
+}: SpinnerWithMessageProps) => {
+  return (
+    <Box>
+      <Heading>Processing</Heading>
+      <Divider />
+      {message && <Text>{message}</Text>}
+      <Spinner />
+    </Box>
+  );
+};

src/ui/components/SuccessMessage.tsx

@@ -0,0 +1,40 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { isValidAddress } from '@ethereumjs/util';
+import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+import {
+  Address,
+  Box,
+  Divider,
+  Heading,
+  Spinner,
+  Text,
+} from '@metamask/snaps-sdk/jsx';
+import type { Hex } from '@metamask/utils';
+import { add0x, getChecksumAddress, isValidHexAddress } from '@metamask/utils';
+
+export type SuccessMessageProps = {
+  value?: string;
+  message?: string;
+  withSpinner?: boolean;
+};
+
+export const SuccessMessage: SnapComponent<SuccessMessageProps> = ({
+  value,
+  message,
+  withSpinner,
+}: SuccessMessageProps) => {
+  return (
+    <Box>
+      <Heading>Success</Heading>
+      <Divider />
+      <Text>{message}</Text>
+      {value && (isValidHexAddress(value as Hex) || isValidAddress(value)) ? (
+        <Address address={getChecksumAddress(add0x(value)) as Hex} />
+      ) : (
+        <Text>{value}</Text>
+      )}
+      {withSpinner && <Spinner />}
+    </Box>
+  );
+};

src/ui/components/WatchForm.tsx

@@ -0,0 +1,69 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { ButtonType } from '@metamask/snaps-sdk';
+import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+import {
+  Box,
+  Button,
+  Field,
+  Form,
+  Heading,
+  Input,
+  Text,
+} from '@metamask/snaps-sdk/jsx';
+
+import {
+  WATCH_FORM_DESCRIPTION,
+  WATCH_FORM_DESCRIPTION_MAINNET,
+  WATCH_FORM_HEADER,
+  WATCH_FORM_INPUT_LABEL,
+  WATCH_FORM_INPUT_PLACEHOLDER,
+  WATCH_FORM_INPUT_PLACEHOLDER_MAINNET,
+  WATCH_FORM_INSTRUCTIONS,
+} from '../content';
+
+export enum WatchFormNames {
+  AddressForm = 'address-form',
+  AddressInput = 'address-input',
+  SubmitButton = 'submit',
+}
+
+export type WatchFormProps = {
+  onMainnet: boolean;
+};
+
+export const WatchForm: SnapComponent<WatchFormProps> = ({
+  onMainnet,
+}: WatchFormProps) => {
+  return (
+    <Box>
+      <Heading>{WATCH_FORM_HEADER}</Heading>
+      <Text>
+        {onMainnet ? WATCH_FORM_DESCRIPTION_MAINNET : WATCH_FORM_DESCRIPTION}
+      </Text>
+      <Text>{WATCH_FORM_INSTRUCTIONS}</Text>
+      <Form name={WatchFormNames.AddressForm}>
+        <Field label={WATCH_FORM_INPUT_LABEL}>
+          <Input
+            name={WatchFormNames.AddressInput}
+            type="text"
+            placeholder={
+              onMainnet
+                ? WATCH_FORM_INPUT_PLACEHOLDER_MAINNET
+                : WATCH_FORM_INPUT_PLACEHOLDER
+            }
+          />
+        </Field>
+        <Box direction="horizontal" alignment="space-around">
+          <Button
+            name={WatchFormNames.SubmitButton}
+            type={ButtonType.Submit}
+            variant="primary"
+          >
+            Watch
+          </Button>
+        </Box>
+      </Form>
+    </Box>
+  );
+};