update simulator and fix tests

Author: GuillaumeRx

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "vdovVqAuPpZUhBv7sp9jeWcbswewQ+b1/DmLtqMzCo4=",
+    "shasum": "hXzhJjb3I9KofDHIA533vEAW0XRzESeroiYc0bsQkn8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/rpc-methods/jest.config.js

@@ -10,10 +10,10 @@ module.exports = deepmerge(baseConfig, {
   ],
   coverageThreshold: {
     global: {
-      branches: 87.6,
+      branches: 87.9,
       functions: 100,
-      lines: 97.95,
-      statements: 96.34,
+      lines: 98.22,
+      statements: 96.64,
     },
   },
 });

packages/snaps-controllers/src/snaps/SnapController.test.ts

@@ -1979,12 +1979,10 @@ describe('SnapController', () => {
 
       rootMessenger.registerActionHandler(
         'PhishingController:testOrigin',
-        async () =>
-          // @ts-expect-error will deal with it later.
-          Promise.resolve({
-            result: true,
-            type: 'fuzzy',
-          }),
+        () => ({
+          result: true,
+          type: 'fuzzy',
+        }),
       );
 
       await expect(

packages/snaps-simulator/src/components/Icon.tsx

@@ -157,6 +157,10 @@ const DEFAULT_ICONS = {
     alt: 'Text',
     src: textIcon,
   },
+  link: {
+    alt: 'Link',
+    src: textIcon,
+  },
   copyable: {
     alt: 'Copyable',
     src: copyableIcon,

packages/snaps-simulator/src/features/builder/components/Node.tsx

@@ -14,6 +14,7 @@ export const EDITABLE_NODES = [
   NodeType.Text,
   NodeType.Copyable,
   NodeType.Image,
+  NodeType.Link,
 ];
 
 type NodeProps = {

packages/snaps-simulator/src/features/builder/components/TemplateComponentList.tsx

@@ -5,6 +5,7 @@ import {
   divider,
   heading,
   image,
+  link,
   panel,
   text,
 } from '@metamask/snaps-ui';
@@ -47,6 +48,12 @@ const TEMPLATE_COMPONENTS: TemplateComponent[] = [
     data: text('Text'),
     droppable: false,
   },
+  {
+    icon: 'link',
+    text: 'Link',
+    data: link('Link', 'https://foo.bar'),
+    droppable: false,
+  },
   {
     icon: 'divider',
     text: 'Divider',

packages/snaps-simulator/src/features/builder/utils.ts

@@ -86,6 +86,7 @@ function getComponentArgs(component: Component): string {
   switch (component.type) {
     case NodeType.Panel:
       return component.children.map(getComponentArgs).join(',\n');
+    case NodeType.Link:
     case NodeType.Text:
     case NodeType.Heading:
     case NodeType.Copyable:

packages/snaps-simulator/src/features/renderer/Renderer.tsx

@@ -10,6 +10,7 @@ import {
   Heading,
   Spinner,
   Image,
+  Link,
 } from './components';
 
 export const components: Record<
@@ -23,6 +24,7 @@ export const components: Record<
   [NodeType.Spinner]: Spinner,
   [NodeType.Text]: Text,
   [NodeType.Image]: Image,
+  [NodeType.Link]: Link,
 };
 
 type RendererProps = {

packages/snaps-simulator/src/features/renderer/components/Link.tsx

@@ -0,0 +1,26 @@
+import { Link as ChakraLink } from '@chakra-ui/react';
+import { isComponent } from '@metamask/snaps-ui';
+import { assert } from '@metamask/utils';
+import type { FunctionComponent } from 'react';
+
+export type LinkProps = {
+  id: string;
+  node: unknown;
+};
+
+export const Link: FunctionComponent<LinkProps> = ({ node, id }) => {
+  assert(isComponent(node), 'Expected value to be a valid UI component.');
+  assert(node.type === 'link', 'Expected value to be a link component.');
+
+  return (
+    <ChakraLink
+      fontFamily="custom"
+      fontSize="sm"
+      paddingBottom="1"
+      key={`${id}-link`}
+      href={node.url}
+    >
+      {node.value}
+    </ChakraLink>
+  );
+};

packages/snaps-simulator/src/features/renderer/components/Text.tsx

@@ -1,7 +1,7 @@
-import { Text as ChakraText } from '@chakra-ui/react';
+import { Text as ChakraText, Link as ChakraLink } from '@chakra-ui/react';
 import { isComponent } from '@metamask/snaps-ui';
 import { assert } from '@metamask/utils';
-import type { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 import ReactMarkdown from 'react-markdown';
 
 export type TextProps = {
@@ -15,13 +15,16 @@ export const Text: FunctionComponent<TextProps> = ({ node, id }) => {
 
   return (
     <ReactMarkdown
-      allowedElements={['p', 'strong', 'em']}
+      allowedElements={['p', 'strong', 'em', 'a']}
       components={{
         p: ({ children: value }) => (
           <ChakraText fontFamily="custom" fontSize="sm" paddingBottom="1">
             {value}
           </ChakraText>
         ),
+        a: ({ children: value, href }) => (
+          <ChakraLink href={href}>{value}</ChakraLink>
+        ),
       }}
       key={`${id}-text`}
     >