feat: Allow external images

Author: FrederikBolding

packages/snaps-sdk/src/index.ts

@@ -1,5 +1,6 @@
 // Only internals that are used by other Snaps packages should be exported here.
 export type { EnumToUnion } from './internals';
+export type { UriOptions } from './internals';
 export {
   getErrorData,
   getErrorMessage,
@@ -13,6 +14,7 @@ export {
   selectiveUnion,
   nonEmptyRecord,
   ISO8601DateStruct,
+  uri,
 } from './internals';
 
 // Re-exported from `@metamask/utils` for convenience.

packages/snaps-sdk/src/internals/index.ts

@@ -5,3 +5,4 @@ export * from './structs';
 export * from './jsx';
 export * from './svg';
 export * from './time';
+export * from './uri';

packages/snaps-sdk/src/internals/uri.ts

@@ -0,0 +1,35 @@
+import {
+  refine,
+  string,
+  type,
+  assert as assertSuperstruct,
+  StructError,
+} from '@metamask/superstruct';
+import type { Struct } from '@metamask/superstruct';
+
+import { getErrorMessage } from '@metamask/snaps-sdk';
+
+export type UriOptions<Type extends string> = {
+  protocol?: Struct<Type>;
+  hash?: Struct<Type>;
+  port?: Struct<Type>;
+  hostname?: Struct<Type>;
+  pathname?: Struct<Type>;
+  search?: Struct<Type>;
+};
+
+export const uri = (opts: UriOptions<any> = {}) =>
+  refine(string(), 'uri', (value) => {
+    try {
+      const url = new URL(value);
+
+      const UrlStruct = type(opts);
+      assertSuperstruct(url, UrlStruct);
+      return true;
+    } catch (error) {
+      if (error instanceof StructError) {
+        return getErrorMessage(error);
+      }
+      return `Expected URL, got "${value.toString()}"`;
+    }
+  });

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -1305,6 +1305,7 @@ describe('ImageStruct', () => {
     <Image src="<svg />" alt="alt" />,
     <Image src="<svg />" />,
     <Image src="<svg />" alt="alt" borderRadius="medium" />,
+    <Image src="https://example.com/foo.png" />,
   ])('validates an image element', (value) => {
     expect(is(value, ImageStruct)).toBe(true);
   });
@@ -1322,6 +1323,7 @@ describe('ImageStruct', () => {
     <Image src="<svg />" alt={42} />,
     // @ts-expect-error - Invalid props.
     <Image src="<svg />" borderRadius="52px" />,
+    <Image src="http://example.com/foo.png" />,
     <Text>foo</Text>,
     <Box>
       <Text>foo</Text>

packages/snaps-sdk/src/jsx/validation.ts

@@ -91,6 +91,7 @@ import {
   svg,
   typedUnion,
   ISO8601DateStruct,
+  uri,
 } from '../internals';
 import {
   NonEip155AssetTypeStruct,
@@ -238,7 +239,7 @@ export const BorderRadiusStruct = nullUnion([
  * A struct for the {@link ImageElement} type.
  */
 export const ImageStruct: Describe<ImageElement> = element('Image', {
-  src: svg(),
+  src: nullUnion([svg(), uri({ protocol: literal('https:') })]),
   alt: optional(string()),
   borderRadius: optional(BorderRadiusStruct),
 });

packages/snaps-utils/src/types.ts

@@ -1,15 +1,7 @@
-import { getErrorMessage } from '@metamask/snaps-sdk';
-import {
-  is,
-  optional,
-  refine,
-  size,
-  string,
-  type,
-  assert as assertSuperstruct,
-  StructError,
-} from '@metamask/superstruct';
-import type { Infer, Struct } from '@metamask/superstruct';
+import type { UriOptions } from '@metamask/snaps-sdk';
+import { uri } from '@metamask/snaps-sdk';
+import { is, optional, size, string, type } from '@metamask/superstruct';
+import type { Infer } from '@metamask/superstruct';
 import type { Json } from '@metamask/utils';
 import { definePattern, VersionStruct } from '@metamask/utils';
 
@@ -109,30 +101,7 @@ type ObjectParameters<
 
 export type SnapExportsParameters = ObjectParameters<SnapFunctionExports>;
 
-type UriOptions<Type extends string> = {
-  protocol?: Struct<Type>;
-  hash?: Struct<Type>;
-  port?: Struct<Type>;
-  hostname?: Struct<Type>;
-  pathname?: Struct<Type>;
-  search?: Struct<Type>;
-};
-
-export const uri = (opts: UriOptions<any> = {}) =>
-  refine(string(), 'uri', (value) => {
-    try {
-      const url = new URL(value);
-
-      const UrlStruct = type(opts);
-      assertSuperstruct(url, UrlStruct);
-      return true;
-    } catch (error) {
-      if (error instanceof StructError) {
-        return getErrorMessage(error);
-      }
-      return `Expected URL, got "${value.toString()}"`;
-    }
-  });
+export { uri } from '@metamask/snaps-sdk';
 
 /**
  * Returns whether a given value is a valid URL.