feat: Card component

packages/examples/packages/bip32/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "te1oZPWHfniZ/ST6D/blxr8w6yhoR4qaJeeNoOP7O6A=",
+    "shasum": "RuWpXFKAcKwsw2uHEMyh1O5w6KjngWSs/9u1b3OO6Vc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/bip44/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "yzw5UM4aWmD8vLglR9gazcNC0yKntyPp5A5sPSmouL4=",
+    "shasum": "9O5Ttwb8OsYZhjOdQvef5cvbzlaX7ofgH6C6a9rOXmo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "a+jOIwfxC3ITF6MbF5ltQvM0ZvCJ5/NQJlbEsqWTQrk=",
+    "shasum": "v821sxB2ekoolCcPzAu0pkiEWgsHAyyoMw51IWxl5pk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "HPCtZ7reZrbut7cl09SnaoAHkzrvlvjc60leUfkcsVI=",
+    "shasum": "uCU3Ng6rztza9Gdqdv1lARTj7Jd26/bkTek9yBvFv1o=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/client-status/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "7BLeIk79FlkIK9fNKHcCdX8UChmjU7kOkGVLxOc29Kw=",
+    "shasum": "owFhLEXDWkncrq2vtoJ8vL+wGyGdYokhhJHk82YrVvc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/cronjobs/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "DMmgoUR+Q1/eYJTjZQ96jI406CpgObFs454UR1nKGM4=",
+    "shasum": "zpZkwMb/yIHk0p4QB02njlNLZbngJjK09/gAtQ6uoKo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/dialogs/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "F5K30FZGcmERlgvw8D8v4Vuqh2FP2fxSeq0KVOT4LYg=",
+    "shasum": "yb9Qyz/WzW5Q0hsQxcb+2f3w7EpniwcT0UzN75Sb1qU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/ethereum-provider/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "iHt9Se2I/fFZeIQW6p5qyNGt+wD7S2NKlNPLYjSTZMc=",
+    "shasum": "dshXsDhCXIjHKWm8YbSlP8t2/bDUvUKA7/p4mGlMauE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/ethers-js/snap.manifest.json

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

packages/examples/packages/file-upload/snap.manifest.json

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

packages/examples/packages/get-entropy/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "WXUTcCOLbtQnTMVKVz2X2IeQG8ICXkmDozXlil/Z3rI=",
+    "shasum": "iMdZJabdJey8pON8c83C1/wSn5toUOMZVb1my1/Iq/8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/get-file/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "dhEHU8KvnRAcZlEq4cnrhaVaEeRux9b0HA8LrA5GPnI=",
+    "shasum": "CAT7l9BD2Pl72sKYvzVShJAK38l0p5/QmDcISlh7A9A=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/home-page/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "YYz045/kftDaFs5MVv7EJzcMOtu7KBZa9RgceCoD9Gc=",
+    "shasum": "wcGav9POD8Y28L5HGRGSYkb+x8LmnRWl/QEoc2FEAHQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "17xibkzbvbonxdKRhYc1/hcy07SMuF1kUnWTww01Wh8=",
+    "shasum": "066gxukk8RbnEx16dAfYR5ewVkiqTCxWJMxitCrt9VU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/interactive-ui/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "RjotFvCYvRLQkQh0/MfN+KnVdoYaX/iG5xJ72hgea+8=",
+    "shasum": "71fsjwKD7Ylpb4vCoL0OImpY2913qUPHZn6uLr5tdJ4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "x2DFl/pD2oP4tX1xA+nGRlMKygBxECdsoUEuv+SIDCg=",
+    "shasum": "l0DffJ4FRaT7CYesLlKnn6/TABqoGwDbaP8xX9MZFSE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "/Jd80mRS0sRtJkysLijC+nFivuYFcpJN88c+0uPEAmE=",
+    "shasum": "B/tH17jw0/0icAW8XhfqvHn48tWejZAiOt8jXVlY8P4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/json-rpc/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "k38ku5e19Ma18bw8Fj7X7EdplcNcNUYGe1YSvMXSFFc=",
+    "shasum": "11m+yh3Qrt0eezPtngR3U8z0ufSGR0swK8eTGwSv7kQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/jsx/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "sG6nzWp3egu6KVdzrrx/xDnZxoHoropwbpw16VWRq1I=",
+    "shasum": "QxhpO+N8HIfgzLZcAjRayscoP3BMlMiYKVSTnE/wg6I=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/lifecycle-hooks/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "5GnkRgxSJ31ZrC88L5YT4085IXAtEW/ssOzb3vKdhGk=",
+    "shasum": "tlDICby29Io5VkQt9B3f6l7vjxGW7TH96JkFxLz5RBk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/localization/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "gEbnqa/dhseAw+m5voKOPmZU3RtrsAMzVv71TGgyrSI=",
+    "shasum": "i/1Z0hDFM8c5aXyI8zKOF9g7Q0fhCE4LYxsch8uEJI8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/manage-state/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "QYVpepzwJ55thY051dZjkO+FK/WTsIYoG/pH46PHz34=",
+    "shasum": "h/PHeqbq8vhWAjclfWJWOnIxIWWG12z/PjH9gzMqLnQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/network-access/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "pIiNNUSwbqXQsniqxkj40MNPi4Clf6mlfq1VIZAzfIM=",
+    "shasum": "0QylDwZOSxudUvfl0oBK6XU1rol3KZw3aJ302ffRtrs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/notifications/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "IoRhxK1wXSXko6nMqmkAUePNyMgVpWowoAWzjiPw5HE=",
+    "shasum": "Jp5Mz+1V/Pcy46a346OfMPYDy6bBg/1OrwapTc7jUlA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/rollup-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "YkohC4woUwiIwSOsXUvhrL9g5xMQ4f094tVwtTmQQ0Y=",
+    "shasum": "/00IgIA9lzQ37AT9YXLai2PI7I0g7egNnxfQPBfXSUI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/signature-insights/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "pP2JIcm3hGBQ2qpQHZUZckKEM/k6IJU2MEy0hm02HQg=",
+    "shasum": "7rtXzRXXniBYGoIU2M4IF5fjWByHGMxxrkFhH8Tj6cA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/transaction-insights/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "mHNCDPJXx/vNcx6bHIuU4yqGl6MI8MkGO2WDGTWORJI=",
+    "shasum": "rUToXzoOsq2NG80Fo7Ldo6FeIwnUSe6nkAeGyYJ8gyQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/wasm/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "up4UE5+k0FrYVyONu3Nf11+ngzt9DqW/0TxrUd45380=",
+    "shasum": "EVusAjusqBDipLeelxbkJYzfN7CeMovX5ty+2wbR5IM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/webpack-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "zN8Dkb34se77/TXqLyMRINMxX4YfhcjhBHtGLo1kGPU=",
+    "shasum": "l/j53uUy6hUdbiKpTbc2PWHwGeZ556zaF8dpDv1Wl2Q=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-sdk/src/jsx/components/Card.test.tsx

@@ -0,0 +1,27 @@
+import { Card } from './Card';
+
+describe('Card', () => {
+  it('renders a card', () => {
+    const result = (
+      <Card
+        image="<svg />"
+        title="Title"
+        description="Description"
+        value="$1200"
+        extra="0.12 ETH"
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Card',
+      key: null,
+      props: {
+        image: '<svg />',
+        title: 'Title',
+        description: 'Description',
+        value: '$1200',
+        extra: '0.12 ETH',
+      },
+    });
+  });
+});

packages/snaps-sdk/src/jsx/components/Card.ts

@@ -0,0 +1,42 @@
+import { createSnapComponent } from '../component';
+
+/**
+ * The props of the {@link Card} component.
+ *
+ * @property image - The image to show as part of the card, must be an SVG string.
+ * @property title - The title.
+ * @property description - The description, shown below the title.
+ * @property value - The value, shown on the right side.
+ * @property extra - An additional optional value shown below the value.
+ */
+export type CardProps = {
+  image?: string | undefined;
+  title: string;
+  description?: string | undefined;
+  value: string;
+  extra?: string | undefined;
+};
+
+const TYPE = 'Card';
+
+/**
+ * A card component which can be used to display values within a card structure.
+ *
+ * @param props - The props of the component.
+ * @param props.image - The image to show as part of the card, must be an SVG string.
+ * @param props.title - The title.
+ * @param props.description - The description, shown below the title.
+ * @param props.value - The value, shown on the right side.
+ * @param props.extra - An additional optional value shown below the value.
+ * @returns A card element.
+ * @example
+ * <Card image="<svg />" title="Title" description="Description" value="$1200" extra="0.12 ETH" />
+ */
+export const Card = createSnapComponent<CardProps, typeof TYPE>(TYPE);
+
+/**
+ * A card element.
+ *
+ * @see Card
+ */
+export type CardElement = ReturnType<typeof Card>;

packages/snaps-sdk/src/jsx/components/index.ts

@@ -1,5 +1,6 @@
 import type { AddressElement } from './Address';
 import type { BoxElement } from './Box';
+import type { CardElement } from './Card';
 import type { ContainerElement } from './Container';
 import type { CopyableElement } from './Copyable';
 import type { DividerElement } from './Divider';
@@ -19,6 +20,7 @@ export * from './form';
 export * from './formatting';
 export * from './Address';
 export * from './Box';
+export * from './Card';
 export * from './Copyable';
 export * from './Divider';
 export * from './Value';
@@ -40,6 +42,7 @@ export type JSXElement =
   | StandardFormattingElement
   | AddressElement
   | BoxElement
+  | CardElement
   | ContainerElement
   | CopyableElement
   | DividerElement