feat: Add selector component (#2645)

Adds a new type of form component called `Selector`. It can be used as a "rich" dropdown that allows displaying more than just text. Otherwise functions very similarly to a dropdown from the Snaps platform perspective. It can be used as such: ```jsx <Selector name="selector" value="foo" title="Choose an option"> <SelectorOption value="foo"> <Card title="Foo" value="$1" /> </SelectorOption> <SelectorOption value="bar"> <Card title="Bar" value="$1" /> </SelectorOption> </Selector> ``` Each client will have a different implementation of how the selector is shown, but for reference the extension will show a modal that lets the user pick between the options of the selector. --------- Co-authored-by: MetaMask Bot <[email protected]>
MetaMask · Aug 26, 2024 · 80dcc86 · 80dcc86
1 parent 4e0eb2c
commit 80dcc86
Show file tree

Hide file tree

Showing 40 changed files with 484 additions and 49 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": "ik7uBPZA2o4lF5QljJZQSa2RdCng8nYtKsEulOWXZU4=",
+    "shasum": "meplfIhDKAdAYfRjk1slGTks3rI6+uPewth+sL7o/Go=",
     "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": "vpc0ie9a1H8KWv8UMpOBaPZyGJTjESuvjv1ERUMttaM=",
+    "shasum": "hM4uyKv1VEidiHratstws0S/LdBzPWjOQncUkHBNDP0=",
     "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": "HRGY/ewBpqh8U7fsF/3QgRrpKqn0uDNTdpi83ZCqPQ0=",
+    "shasum": "uFeB4RsFZsV7ZYjLPEp8R+R96iuN9gpHjYB1MKUy0bw=",
     "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": "x1+/hSsNK4ymlrifMWvkwpibVxNSUekwvYdIwmw7T2k=",
+    "shasum": "9RcL8rtVPwRiXki5Vs+pEA6lO1CthaofVv2UQF1COlY=",
     "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": "YaCBzI0O1i5L5l5gFfzmNhfwuvnnxbkfmsNjLkwFhfY=",
+    "shasum": "BmrBVhdD2ZmEdDjNVdEiVSzd3uS8PiGgmZcvYmHnHxw=",
     "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": "dxp0O4Nhq7QOU1k6S5FJvaxvuc5wGnLsInCZ184N6gM=",
+    "shasum": "oZbPamYypPK6BHoVJ/Mx0l7pLIBjQRBtbZNZWyDMPGs=",
     "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": "AP2i5PiuYC9Dr9chFNMP1FMDJmPwpsFBr34+OKEfo/4=",
+    "shasum": "prxccwZ+383T+7jjMrSabwO74aBRyoKEnnP1o7r1Aac=",
     "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": "6NIpWbenThi4e3LAiAAB0MP2PQcAcdadhcKAccM66yo=",
+    "shasum": "GSpRcUSfCYEWViNqYyG3NdTa4/nO8EGukSHvGBVXtT8=",
     "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": "4Nt428/mGU2ozcXM+X28gZjmKbyI1BQxuDntChDFl0M=",
+    "shasum": "bG6octHXbG5c1Keftfj2kCbHcATOJMnVe5oy4ENLGYM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/file-upload/snap.manifest.json b/packages/examples/packages/file-upload/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "YNic7/VXJF32HBUr5npNpXopQB7wwY50d9ejLpVclKI=",
+    "shasum": "dRJ64XJAM36aNfsZBN7FC8fGmh/4b3nd0V0wJZQfmzk=",
     "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": "0vquB1L/2Ftqhkth3a2hhU9P8Ij6QAh0VFDhvFi60sw=",
+    "shasum": "z/xO4vaYBErIumDuzkS1JuWD0w3M/JQzrkl7QdH+Rsw=",
     "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": "FZAIkcXgzle5cFsso165dzSTwerIFAzASA8rptjezmc=",
+    "shasum": "RY6WMOfBdTEWYMUX7zIzNy7ZmMjZdxEZUbsW4d7bAWc=",
     "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": "B2lQ3m9r4PRZ2vRrrFgenZvRSomQKIs8sJOSM5U9hDQ=",
+    "shasum": "7w5lE7ZVBqS66ghFwA5z3USgqOxh6vU2d71JBi5dx+s=",
     "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": "kA505849kj9G8hG1R92ZD0qGYEoUr4TXXk8PxGBG5nQ=",
+    "shasum": "xJUmec7F6/It7kfSljqHWM76MSJSmytZlPvlgyLxxXI=",
     "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": "9RyN2IznzsqwJO/7mhIKxp4DVQd0ongnYbN9MeFowI0=",
+    "shasum": "rvE1wmZmbTWiskg2VPVLbn8KT2PFkFQ5v3tGFqybsRE=",
     "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": "IPgrx/srJ0pnYXbMpymuHMWWHMb9MZfyekCiiH8IDjQ=",
+    "shasum": "dsc+T0qqSAe1LoKYI/8HPVk3yBktRoaRSOvRMjlF5B8=",
     "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": "WFtsYTJglOJChmrR8AtwRRamhFXzrqmtyCizcg1zIK4=",
+    "shasum": "XZ4Pt2LJwOMXBm1wQXtJP3l/qZgC218Z/n3xYE8BGjM=",
     "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": "YDat1yOn2nLtxCIls+5lbNYnahRdV9EfASQI/b/9lhg=",
+    "shasum": "wokl2HTmrbZObmcc1MH9a7so9xrZkXNhRcCqtfepGA0=",
     "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": "+Nb1THmpw/hGhx5AmYY8lJ8sdELuLKHv/n4ndO1WTCo=",
+    "shasum": "v2qKGCM4FTPM6wUB4lbKO556tDV00aYZDjd3RxvMcsI=",
     "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": "Jrk/yg039/Qf51OfijNmqn+jA4+jS+DdbDTTXGK52t8=",
+    "shasum": "iyRAkal8Vql5iD1XJwIp/9KNi/kk3HjlfdfklQf3UW0=",
     "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": "iwYePZv3WxiRNwYWLJMYFVezr4FVNt9vKENR+l5cUv4=",
+    "shasum": "LofJCTQeoNFWE+F1S1OTGzcUyJPJiTskgK9aIRrt1NM=",
     "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": "yfuwl/IJSpXoW950VQsJYOt5wugF4zqrwEJmHpfXdH0=",
+    "shasum": "f6IlmDjDvF8G3hEaIF8mrBl5irEpYgg6WPqpdk7P+is=",
     "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": "W6MFWW9qbN2L2Jrx49JjLzAvoiQA9uUcnWPTkNUFvE4=",
+    "shasum": "JtcrsUNAGdf3v4dr4uo1XQgom71wdtifM/rh54HgnEs=",
     "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": "MZSLIUmv+W4OVk8BdXpbCsrkpKZ2DcXbyWCbje1bZjA=",
+    "shasum": "Nm2UUq7WZAa+oFy8y08o0bDHwLrVKpP00WW+F/UVw4o=",
     "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": "CeDhOKcmnMXKwDdC2HozIABPQ+q/oVUFxrhiNNIclDc=",
+    "shasum": "DFfEzW8wLRohClvMLn+mN/pN+YmB39HgrDcQavUDISg=",
     "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": "0eVnlZsCe7wuh964O9xM/hGczrpDZF7yekn9DZKgXNM=",
+    "shasum": "hsCvm1U9gV/4FzppkTRoVd8kjAmDHc1ar2KaV1SLUcM=",
     "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": "sq30Pjd883FkDKbg1hAvud3vc0XD3MOsHT6vqpNh5kE=",
+    "shasum": "Vizjf/UbRArRlUspGuMRFkCZXEMwK20c/8wTCJhNSc0=",
     "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": "726OomzJecbcMjZqZEFPBdM+Zn49gOljb6pFJNOmSW0=",
+    "shasum": "I5yXL+XH56rFZiJfGc6Pq4v4lcXwuUIhkk/vbMbS5O4=",
     "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": "LuxkyGh4b6uksSaom6Yp4Uzezibjg9oskNh4L62vvMA=",
+    "shasum": "5hX1yMdOi/HxZesj7T4qXvR/Cu4GVpQHnfbavDPS45U=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snaps-controllers/coverage.json b/packages/snaps-controllers/coverage.json
@@ -1,5 +1,5 @@
 {
-  "branches": 92.54,
+  "branches": 92.59,
   "functions": 96.91,
   "lines": 98.01,
   "statements": 97.71

diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -12,6 +12,9 @@ import {
   Checkbox,
   RadioGroup,
   Radio,
+  Selector,
+  Card,
+  SelectorOption,
 } from '@metamask/snaps-sdk/jsx';
 
 import { assertNameIsUnique, constructState, getJsxInterface } from './utils';
@@ -456,6 +459,94 @@ describe('constructState', () => {
     });
   });
 
+  it('sets default value for root level Selector', () => {
+    const element = (
+      <Box>
+        <Selector name="foo" title="Choose an option">
+          <SelectorOption value="option1">
+            <Card title="Option 1" value="$1" />
+          </SelectorOption>
+          <SelectorOption value="option2">
+            <Card title="Option 1" value="$1" />
+          </SelectorOption>
+        </Selector>
+      </Box>
+    );
+
+    const result = constructState({}, element);
+    expect(result).toStrictEqual({
+      foo: 'option1',
+    });
+  });
+
+  it('supports root level Selector', () => {
+    const element = (
+      <Box>
+        <Selector name="foo" title="Choose an option" value="option2">
+          <SelectorOption value="option1">
+            <Card title="Option 1" value="$1" />
+          </SelectorOption>
+          <SelectorOption value="option2">
+            <Card title="Option 1" value="$1" />
+          </SelectorOption>
+        </Selector>
+      </Box>
+    );
+
+    const result = constructState({}, element);
+    expect(result).toStrictEqual({
+      foo: 'option2',
+    });
+  });
+
+  it('sets default value for Selector in form', () => {
+    const element = (
+      <Box>
+        <Form name="form">
+          <Field label="foo">
+            <Selector name="foo" title="Choose an option">
+              <SelectorOption value="option1">
+                <Card title="Option 1" value="$1" />
+              </SelectorOption>
+              <SelectorOption value="option2">
+                <Card title="Option 1" value="$1" />
+              </SelectorOption>
+            </Selector>
+          </Field>
+        </Form>
+      </Box>
+    );
+
+    const result = constructState({}, element);
+    expect(result).toStrictEqual({
+      form: { foo: 'option1' },
+    });
+  });
+
+  it('supports Selector in form', () => {
+    const element = (
+      <Box>
+        <Form name="form">
+          <Field label="foo">
+            <Selector name="foo" title="Choose an option" value="option2">
+              <SelectorOption value="option1">
+                <Card title="Option 1" value="$1" />
+              </SelectorOption>
+              <SelectorOption value="option2">
+                <Card title="Option 1" value="$1" />
+              </SelectorOption>
+            </Selector>
+          </Field>
+        </Form>
+      </Box>
+    );
+
+    const result = constructState({}, element);
+    expect(result).toStrictEqual({
+      form: { foo: 'option2' },
+    });
+  });
+
   it('supports nested fields', () => {
     const element = (
       <Box>