fix: Correct Row variant in JSX (#2486)

The JSX `Row` component had the `critical` variant misnamed making it impossible to use. This PR fixes that, it also adds support for converting legacy components that use `variant`.
MetaMask · Jun 13, 2024 · caf42e3 · caf42e3
1 parent 61b2f3b
commit caf42e3
Show file tree

Hide file tree

Showing 32 changed files with 41 additions and 31 deletions.
diff --git a/packages/examples/packages/bip32/snap.manifest.json b/packages/examples/packages/bip32/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "m534qYi/XgCxoRE4vFgV1lXgrnYeTCpJeG++gGXthMI=",
+    "shasum": "zAX3zpia+GVlYwefQz3qVY3O7ubnW6iBCFWBRmcei4E=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/bip44/snap.manifest.json b/packages/examples/packages/bip44/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "qsn0aZs/dUcVkIDJqBdrUS4PQUZdxl5U+yXgzXunY94=",
+    "shasum": "c80K8ISvX9SxOzpD1XTSqHxi/oVQoEAJ+Y5spCtCi5s=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "8vhRM3+4qtu3k6W5vZvWkuQXqXlNKbHwAhEzzEsUwHU=",
+    "shasum": "R7hCUzfYl50tu4GjCH94+DriHaeDVYJtRkeYbJVtwQU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "usvFzN09f2l10Zjk/7OhFl0i851kNH3lOYj7+JhDYeY=",
+    "shasum": "r5qYFnac1xM+c6383mmJKJD1BtYm7xSya0fgZ6OKXAc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/client-status/snap.manifest.json b/packages/examples/packages/client-status/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "INNGJezYrSDbp/lkANrW/7ydAoXGjIZbLKW44hjSL1c=",
+    "shasum": "3F3splIWT701Gy44Fv5FQBwkVq8IKhPEMArvNOzMuUw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/cronjobs/snap.manifest.json b/packages/examples/packages/cronjobs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "GSSdbj7tOl5BI/zCUCWHnBBh7d+jDthFLImX8zoBCbE=",
+    "shasum": "Gz8Gi1nrpWoAA2P4/rpD/yYsHLZv9xqJSQWiQOOkA4c=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/dialogs/snap.manifest.json b/packages/examples/packages/dialogs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jJ827B8WyucghCYg6GdADMetSqCHG1bcc69J15pG1yc=",
+    "shasum": "vfqOWZkx2MCuE17IhxYwfhNO21pLoHATKnLu2xiVjnk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/ethereum-provider/snap.manifest.json b/packages/examples/packages/ethereum-provider/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "XeRKT1KZyxC7FoxhglQri2n5tzTGaeVkumNRL8dFmX8=",
+    "shasum": "USXVYrPhQoMrEJKhJIhgSjheHQ0xvLIj2QXEaj8OVtg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/ethers-js/snap.manifest.json b/packages/examples/packages/ethers-js/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "rlCs4sFFfjx2/jKHvQZZj8EXbxKvoTNg+XJXuC0OBso=",
+    "shasum": "ePqEKqZD06WNks6BmvNs2HGv5uqw8meI4aIcYHFij0Q=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/get-entropy/snap.manifest.json b/packages/examples/packages/get-entropy/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "ninTM4hA+ZfBMd1NyE5kwk6A9QLTDzHdIbq5fsuwiHg=",
+    "shasum": "SVacVTZ42QTcvb4Usz+cGp2e5hFyrsrlwBmrWB9Nzx0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/get-file/snap.manifest.json b/packages/examples/packages/get-file/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "WF57L3AOwWUawv695Kqjwhq2OlIpno7KAYTxvpQ5Lmw=",
+    "shasum": "ZosdV2QwEYJ/yywUWk/IX016ylaN/nZT2cCfh50Fuj8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/home-page/snap.manifest.json b/packages/examples/packages/home-page/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "RY+rMJcEl/XnmeffViFape1SBJhD98LvO6BG9kYUj+k=",
+    "shasum": "cOPK5By46fbBb66Y9X+6KajBZz9LokreCFt34eBzfvs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/images/snap.manifest.json b/packages/examples/packages/images/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "wH0gEOfFOoRbk6CnXPmPx/ZG/WKozq2a1IYRMsonryk=",
+    "shasum": "hpjjgvbbCvd4SzNRyka8szx4ATk4KHGLeBGtkyGhNr0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/interactive-ui/snap.manifest.json b/packages/examples/packages/interactive-ui/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "+BZjKNAin4KDTOiqUFdln/sU8XvRNylsSD63pZ9DZgM=",
+    "shasum": "SrX0VKXee+l4Y1PkIEVHVTYHJeS0dPq8biaYLexxe3s=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "ZKmCHrMsYtL7qqYYiYdhyJ6cSGQpn/IMRAvSp2XQP7k=",
+    "shasum": "w/kQjoVrR0QXKvlYsbxJjyr99nPtRgADoxMLdwSuhzQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "/xrkYe6ggWvH40bytUvTG+B2iR7z2xTR6jr0xCJ9TnA=",
+    "shasum": "yR7cPjniaUedjI5ct4oarCTtfn5Tm1S2KUhZQffO5uE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/json-rpc/snap.manifest.json b/packages/examples/packages/json-rpc/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Y5AZFL08UGh5nM8m/oi3/kt3qOVW4fgyjudy61jJU2c=",
+    "shasum": "0Q3VKywf5n3hbuaWjdrwnGBMmNm2iU3bWffhCKC1UJE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/jsx/snap.manifest.json b/packages/examples/packages/jsx/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "rQwGWqV0U0QhNO31NOelIGYl3PQKux4FBSvYoa6qAQc=",
+    "shasum": "8mX0sPkLP85fLz4a1WLXf0BKXMMx3FD/+hh9y+3GVqQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/lifecycle-hooks/snap.manifest.json b/packages/examples/packages/lifecycle-hooks/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "AJLrq/+sBh2CcXSlkq8abgrpQTx82IRFPPoEd7pMGuE=",
+    "shasum": "zOcUoe1c/O+kmvhXyP13SxMHQtN4o8/6S2AryR2wAnc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/localization/snap.manifest.json b/packages/examples/packages/localization/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "e3+BzxCOIxD7Ge6bfbOVfYn8qAgJGjX2ptbbIcK01Xg=",
+    "shasum": "tJt5oKKkZP40Zry6dCs3X7ICqWYMcq9ROGkh2aRJydQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/manage-state/snap.manifest.json b/packages/examples/packages/manage-state/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "AZri1Pta5Hb2tKLBFDszJlkGcqGkk8ucv8HeYpsmwIA=",
+    "shasum": "itYAGJ1hCRxTBA0NH7a0oWgkJAj0d3xQGsYSEM6ZRcE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/network-access/snap.manifest.json b/packages/examples/packages/network-access/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "ytDZYJr3F7NsaxV7XIWsTkXpoxLVwBjKm64OTV3t06s=",
+    "shasum": "/TMVNiKINxKKrA90Y3KZA3pY7uY0rZFQ3Mn13CpTOHA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/notifications/snap.manifest.json b/packages/examples/packages/notifications/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "duYiAbBLBLIj7BZLCJssKwlDXF2D411Cu/7qw978NWk=",
+    "shasum": "OiOj32TxNeokYbDYbYUUo4deGd5+2qqfoUNGep7g7DA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/rollup-plugin/snap.manifest.json b/packages/examples/packages/rollup-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "0kIdLWEd22s28BwqHKDbz6d82hEQmfN53PNLt1gIeIc=",
+    "shasum": "DxzNxMl9/9jjyQ36+UMOwySeXhpm8H5aHXzx8VL4gY0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/signature-insights/snap.manifest.json b/packages/examples/packages/signature-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "DzJFebhj7CZv7Mn++/G9uSeDjYgTOVSUdq7sBDwNvOk=",
+    "shasum": "WAnCb4phM9FGp4RLtp4Cn96wDxXeNIqqaFHdV/fpQcE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/transaction-insights/snap.manifest.json b/packages/examples/packages/transaction-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "NcGYsp8dE2bmD6Zn0nQ43J3GLZCQPw6Jb5jLeEcw+ak=",
+    "shasum": "9J7Bh8EZDF3L+vdTxn3eJHDIlglw9BuFaZThmS1juvA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/wasm/snap.manifest.json b/packages/examples/packages/wasm/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Lab+FwniA9wQTm/b9m3Ub07AneVO5BQzl/m65uxjso0=",
+    "shasum": "h9Ks6D8llUNa4tlouFWaAovss0zsuLAU940HuECNqBU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/webpack-plugin/snap.manifest.json b/packages/examples/packages/webpack-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "cbpitk6uFzdy2tnlRruUz/I4nXw2mpZCt+2UHQa2efg=",
+    "shasum": "zs+CYN/3rA/Ch771BleugXBN+11TPxN4xX7OqdlLTWw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snaps-sdk/src/jsx/components/Row.ts b/packages/snaps-sdk/src/jsx/components/Row.ts
@@ -25,7 +25,7 @@ export type RowChildren =
 export type RowProps = {
   label: string;
   children: RowChildren;
-  variant?: 'default' | 'warning' | 'error';
+  variant?: 'default' | 'warning' | 'critical';
   tooltip?: string | undefined;
 };
 

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -309,7 +309,7 @@ export const RowStruct: Describe<RowElement> = element('Row', {
   label: string(),
   children: nullUnion([AddressStruct, ImageStruct, TextStruct, ValueStruct]),
   variant: optional(
-    nullUnion([literal('default'), literal('warning'), literal('error')]),
+    nullUnion([literal('default'), literal('warning'), literal('critical')]),
   ),
   tooltip: optional(string()),
 });

diff --git a/packages/snaps-utils/src/ui.test.tsx b/packages/snaps-utils/src/ui.test.tsx
@@ -382,6 +382,16 @@ describe('getJsxElementFromComponent', () => {
     );
   });
 
+  it('returns the JSX element for a row component with a variant', () => {
+    expect(
+      getJsxElementFromComponent(row('foo', text('bar'), 'critical')),
+    ).toStrictEqual(
+      <Row label="foo" variant="critical">
+        <Text>bar</Text>
+      </Row>,
+    );
+  });
+
   it('returns the JSX element for a row component with an address component', () => {
     expect(
       getJsxElementFromComponent(

diff --git a/packages/snaps-utils/src/ui.tsx b/packages/snaps-utils/src/ui.tsx
@@ -283,7 +283,7 @@ export function getJsxElementFromComponent(
 
       case NodeType.Row:
         return (
-          <Row label={component.label}>
+          <Row label={component.label} variant={component.variant}>
             {getElement(component.value) as RowChildren}
           </Row>
         );