feat: Add RadioButton component (MetaMask#2592)

Adds support for a `RadioGroup/Radio` component, that can be used on its own or as part of a `Field`. ```jsx <RadioGroup name="radiogroup" value="option3"> <Radio value="option1">Option 1</Radio> <Radio value="option2">Option 2</Radio> <Radio value="option3">Option 3</Radio> </RadioGroup> ``` Similarly to `Input`, it optionally uses value to determine the initial value/preselected `Radio` item. This can also be used to control the input when re-rendering with snap_updateInterface. The `RadioGroup` will also trigger `InputChangeEvent` similarly to an `Input`. This PR mostly adds validation and types for this new component as well as some handling for the form state. This will need a follow-up PR in the extension to complete integration. This PR also adds support for `chooseFromRadioGroup` to `snaps-jest` and uses this new component in the `Interactive UI example Snap`. Related task: MetaMask/MetaMask-planning#1571
retectreports · Jul 24, 2024 · 12eaf23 · 12eaf23
1 parent f7c4121
commit 12eaf23
Show file tree

Hide file tree

Showing 48 changed files with 713 additions and 35 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": "+iXB4ursqJMaWWR3fHJYNCxM8di9xvLeYoTv9jjMfjI=",
+    "shasum": "WNhzkvYVd0xOpOg6MmYvBmsJ0w4KCIAREcPBEZNrg+c=",
     "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": "j9P+pv0vxS6MqADtGzIpFQsTTZjhiKxpXp1MlfGvgMo=",
+    "shasum": "+UQXDxKLVSrolt66+DeyR78774UQY6umQLoS7mnt8KI=",
     "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": "Q9txBAsd1Ti3Wkp+0S1Ra5Pr5/E6XDvK9Y7VNKh5gkI=",
+    "shasum": "wb6AsKr6qrNvT8pusf0Pd1ipSuqXGtGahoWuCH6zm8g=",
     "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": "VCkeaa154OzOdAlNLhXItNXIlGyUaGP/7Emwe3SGrs8=",
+    "shasum": "pcSuQBX7alunJRZc0LeMZA6bBfEFliQCLSUI9AP4K1Y=",
     "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": "bxdSLOnvbn6YB+sx+gO7/m3TJ1H6n0HtdZqF79ivwwc=",
+    "shasum": "2bGMwuIxHS3LyOZVBBIHiIUrs81iXlZlSdMH1Bxa3Wo=",
     "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": "w8joIp3iT9niOPMTEkIFF90dvWweOEv0dOa3VRg4EaY=",
+    "shasum": "l81/4yCc8cF+YDkvX16CtkOHYPkzuTPTT0MLvxWXx8o=",
     "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": "nv4HftdM7pplaozX8SvKzW2yovcXRtrHbhpIDVxYbWk=",
+    "shasum": "gjrSOqbZdNIS0vpab+AEPE5YCQqYK4tGauYSKv5icbY=",
     "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": "zga2LbSptxEp2jKJjYW7cbX6Rce31AFDCE6+Vw28Rtg=",
+    "shasum": "j+X/IG9GaPmq2plxOVfNL9HnTlUCygrHdBotVzvXsQU=",
     "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": "qWsfSE/q+SOlwVXpWQPbo138eu8Lr+bZdGE4q8rDJkE=",
+    "shasum": "1KkHDC1Omu73rW7lZMGjSUVE90bIhOn/crjvAjzs+4c=",
     "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": "0NXBdGNFyI8Nkspox5XlEUpuG2Qq63CujGF7IOoPmEY=",
+    "shasum": "e+17MgQS5Y26/3bQMvlOMIboQtB7HurFoKn47+lXeBQ=",
     "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": "rySr4yZWGGLVvJVfSJ3Jj0xFl5+KpdxeSAdzmo5gyME=",
+    "shasum": "BoxfS/Rq9Qnuz1PwTKLJ6kZUG9gOtoBvZuT60P2mTZM=",
     "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": "ryPz8htXh8QeSFf/drty6QNVnXueollOwytqqeYVCnw=",
+    "shasum": "hGr6jbj2wqgXSVlBEkh6YaNM20qibJS0pmSNnnzbrPo=",
     "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": "+sH7ONT+9GTYsxUjZzJED7hM7IIz/ney/rQqY8sMbug=",
+    "shasum": "J4MZSgobYT2voAIOWmh26oE9Jfhmw/EhJ5wUF0x4dMs=",
     "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": "21gXIQI2uKjbuCEoMLwemFH0Ib4jMgQqiIE3La5sl9k=",
+    "shasum": "NEE7Uljm8LscKgqSpgl8+ORBUKv+Of7ddQOLAMwdLgc=",
     "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": "pb48uILYeb7mT0LcsxDZPrc0KUw+lxoSwO/e26xKALQ=",
+    "shasum": "ZW499tpnY1lunCe5WP5mg0d5mRDb3nQCHASvLDLU4h4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx b/packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx
@@ -1,5 +1,7 @@
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 import {
+  Radio,
+  RadioGroup,
   Button,
   Box,
   Field,
@@ -25,6 +27,11 @@ export type InteractiveFormState = {
    */
   'example-dropdown': string;
 
+  /**
+   * The value of the example RadioGroup.
+   */
+  'example-radiogroup': string;
+
   /**
    * The value of the example checkbox.
    */
@@ -46,6 +53,13 @@ export const InteractiveForm: SnapComponent = () => {
             <Option value="option3">Option 3</Option>
           </Dropdown>
         </Field>
+        <Field label="Example RadioGroup">
+          <RadioGroup name="example-radiogroup">
+            <Radio value="option1">Option 1</Radio>
+            <Radio value="option2">Option 2</Radio>
+            <Radio value="option3">Option 3</Radio>
+          </RadioGroup>
+        </Field>
         <Field label="Example Checkbox">
           <Checkbox name="example-checkbox" label="Checkbox" />
         </Field>

diff --git a/packages/examples/packages/interactive-ui/src/index.test.tsx b/packages/examples/packages/interactive-ui/src/index.test.tsx
@@ -43,6 +43,8 @@ describe('onRpcRequest', () => {
 
       await formScreen.selectInDropdown('example-dropdown', 'option3');
 
+      await formScreen.selectFromRadioGroup('example-radiogroup', 'option3');
+
       await formScreen.clickElement('example-checkbox');
 
       await formScreen.clickElement('submit');
@@ -55,6 +57,7 @@ describe('onRpcRequest', () => {
           values={{
             'example-input': 'foobar',
             'example-dropdown': 'option3',
+            'example-radiogroup': 'option3',
             'example-checkbox': true,
           }}
         />,
@@ -85,6 +88,7 @@ describe('onRpcRequest', () => {
           values={{
             'example-input': '',
             'example-dropdown': 'option1',
+            'example-radiogroup': 'option1',
             'example-checkbox': false,
           }}
         />,
@@ -110,6 +114,8 @@ describe('onHomePage', () => {
 
     await formScreen.selectInDropdown('example-dropdown', 'option3');
 
+    await formScreen.selectFromRadioGroup('example-radiogroup', 'option3');
+
     await formScreen.clickElement('submit');
 
     const resultScreen = response.getInterface();
@@ -119,6 +125,7 @@ describe('onHomePage', () => {
         values={{
           'example-input': 'foobar',
           'example-dropdown': 'option3',
+          'example-radiogroup': 'option3',
           'example-checkbox': false,
         }}
       />,

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": "mQB3xpSBlUUoaBHaVO3mbWHJJBt5isBbhgC++s6arFU=",
+    "shasum": "Sh4evK9MVBJU76d6c871vwwIMy4pZLZfyunpIgRY16M=",
     "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": "O2Sb2t0ADBZPopPAyweSHQV69tnsfnqu8KM2iaPxVqQ=",
+    "shasum": "R6vnCPwtky2dww8FD4bWg+3xcW5Z1Aq3jR7SV26lp20=",
     "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": "SxLNMg1eeEVVwuoJLRaSJNIICRqMZzL8rI3WAnJvJdI=",
+    "shasum": "GtTCmgH0M9TMGt26X776icOrGv3McF4p4MzKSgftmQA=",
     "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": "hSBuaInB3v2p5r2tg+DPgvrtIeiP35TD34ZFNAfDqbQ=",
+    "shasum": "5vrTBeoOseOkZaw/UnE5u/lGg8kLMBhZTwDZ7m8rNt0=",
     "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": "RL+zdZP3hJWPZRNmLZErYwF4/cFoBjQCdreEQRXfTNI=",
+    "shasum": "Pa9/lWvpvS29g/ffuKALB+1QpnoZG+k6qfHjajhVN6s=",
     "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": "wTfijFIQOBHX5z4VPL4uYkO1+qmCREzPZjTxh2+zYek=",
+    "shasum": "WJbdDTE22t4Q2sfPZE4w1UGrw9GqIwb9IbIA2nZNKic=",
     "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": "twnP7bpowAlGmbmsnKc32/usTUGCPkvPxP4eCdWMaeU=",
+    "shasum": "tS3LCn96CrR8/u9r4ZQ+/BX/DsfQyUL6QmyRKwbDHOc=",
     "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": "1XllDrzhXP6aHrtyVKdA6jgPhwSCIM0zjPgXsFMOvkE=",
+    "shasum": "Y4AV6VIEb/7W8S1c4BKUkLx0P5RnNcCVelNf0xLng/c=",
     "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": "pCV/1BuNHzZ4LoDxTYiFcZ2TYnP4juq0v2zWvCY2xEU=",
+    "shasum": "74Jdif2X6SP5hUFo/Aze4aMveg1KXBNHIzbnv9+8oug=",
     "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": "K9RWfqiDh1J35IDNzK8m3zAMKsE8CmigX++Un0mBOKA=",
+    "shasum": "PQjFlmBc5ZMtDw+UgTV8zlWIbIMCytWBWGE2ha7QjbI=",
     "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": "PP5YB3peSBGqqydQltx3dolGtD36y/cj+V79HUk/dK0=",
+    "shasum": "LQImo2GsBpVxgz5HgkoQuHKDbecwITvmsKhDtUPT9JA=",
     "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": "/In50uvFLDRJh4Vrb9EyhPF/kPKFA9htS1jroO3aDLg=",
+    "shasum": "Na88LjAm9R1hQE/ogO3W9t0fpn572XoOA8zN8oK6leo=",
     "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": "MLP+ENE5E95zSiZZTD0b4XEtPFPRyOnUkvVodG1fzuI=",
+    "shasum": "sRktKOiqiVeKvzsdOerxaRlinUd7l1fRWDdgATsn0Kk=",
     "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": "zHjmX/AyXEOrW2WZZUUbn7oFrZJBQp0+zuK4Q2s6DcE=",
+    "shasum": "gAFGtmKKoA8q0wD4mV/I/wl/Pk4DW+zFXaCmNnhMZMQ=",
     "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.5,
+  "branches": 92.54,
   "functions": 96.91,
   "lines": 98.01,
   "statements": 97.7