Remove usage of getImageComponent

Author: FrederikBolding

packages/examples/packages/images/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "JD232NPirmuJ0UTjZGtQx0so1T7yGKgxss+XdbqUDnA=",
+    "shasum": "A2pzU53b9kEBkckTMFDxcPr9/lbaEsOvNUJK+rNx3/8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/images/src/index.test.tsx

@@ -1,6 +1,5 @@
 import { expect } from '@jest/globals';
 import { installSnap, assertIsAlertDialog } from '@metamask/snaps-jest';
-import { DialogType } from '@metamask/snaps-sdk';
 import { Box, Text, Image } from '@metamask/snaps-sdk/jsx';
 import { renderSVG } from 'uqr';
 
@@ -53,49 +52,11 @@ describe('onRpcRequest', () => {
   });
 
   describe('getCat', () => {
-    // This test is flaky, so we disable it for now.
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('shows a cat', async () => {
-      const { request } = await installSnap();
-
-      const response = request({
-        method: 'getCat',
-      });
-
-      const ui = await response.getInterface();
-      assertIsAlertDialog(ui);
-
-      expect(ui).toStrictEqual(
-        expect.objectContaining({
-          type: DialogType.Alert,
-          content: {
-            type: 'panel',
-            children: [
-              {
-                type: 'text',
-                value: 'Enjoy your cat!',
-              },
-              {
-                type: 'image',
-                value: expect.any(String),
-              },
-            ],
-          },
-        }),
-      );
-
-      await ui.ok();
-
-      expect(await response).toRespondWith(null);
-    });
-  });
-
-  describe('getCatExternal', () => {
     it('shows a cat using an external URL', async () => {
       const { request } = await installSnap();
 
       const response = request({
-        method: 'getCatExternal',
+        method: 'getCat',
       });
 
       const ui = await response.getInterface();

packages/examples/packages/images/src/index.tsx

@@ -1,9 +1,5 @@
 import type { OnRpcRequestHandler } from '@metamask/snaps-sdk';
-import {
-  DialogType,
-  getImageComponent,
-  MethodNotFoundError,
-} from '@metamask/snaps-sdk';
+import { DialogType, MethodNotFoundError } from '@metamask/snaps-sdk';
 import { Box, Text, Image } from '@metamask/snaps-sdk/jsx';
 import { renderSVG } from 'uqr';
 
@@ -24,10 +20,8 @@ type GetQrCodeParams = {
  * `wallet_invokeSnap` method. This handler handles two methods:
  *
  * - `getQrCode`: Show a QR code to the user. The QR code is generated using
- * the `uqr` library, and rendered using the `image` component.
- * - `getCat`: Show a cat to the user. The cat image is fetched using the
- * `getImageComponent` helper. The helper returns an `image` component, which
- * can be rendered in a Snap dialog, for example.
+ * the `uqr` library, and rendered using the `Image` component.
+ * - `getCat`: Show a cat to the user using an external image.
  *
  * @param params - The request parameters.
  * @param params.request - The JSON-RPC request object.
@@ -42,7 +36,7 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
       const { data } = request.params as GetQrCodeParams;
 
       // `renderSVG` returns a `<svg>` element as a string, which can be
-      // rendered using the `image` component.
+      // rendered using the `Image` component.
       const qr = renderSVG(data);
 
       return await snap.request({
@@ -60,31 +54,6 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
     }
 
     case 'getCat': {
-      return await snap.request({
-        method: 'snap_dialog',
-        params: {
-          type: DialogType.Alert,
-          content: (
-            // The `getImageComponent` helper can also be used to fetch an image
-            // from a URL and render it using the `Image` component.
-            <Box>
-              <Text>Enjoy your cat!</Text>
-              <Image
-                src={
-                  (
-                    await getImageComponent('https://cataas.com/cat', {
-                      width: 400,
-                    })
-                  ).value
-                }
-              />
-            </Box>
-          ),
-        },
-      });
-    }
-
-    case 'getCatExternal': {
       return await snap.request({
         method: 'snap_dialog',
         params: {

packages/snaps-sdk/src/images.ts

@@ -105,6 +105,7 @@ export type ImageOptions = {
  * @param options.request - The options to use when fetching the image data.
  * This is passed directly to `fetch`.
  * @returns A promise that resolves to the image data as an image component.
+ * @deprecated Use `<Image src="external_url" />` instead. This function will be removed in a future release.
  */
 export async function getImageComponent(
   url: string,

packages/test-snaps/src/features/snaps/images/Images.tsx

@@ -14,7 +14,6 @@ export const Images: FunctionComponent = () => {
       testId="images"
     >
       <ShowImage name="Cat" method="getCat" />
-      <ShowImage name="External Cat" method="getCatExternal" />
       <ShowImage name="SVG" method="getSvgIcon" />
       <ShowImage name="PNG" method="getPngIcon" />
       <ShowQr />