add clear button handling

MetaMask · Sep 17, 2024 · 8d48cdb · 8d48cdb
1 parent 9320bb8
commit 8d48cdb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 16 deletions.
diff --git a/packages/examples/packages/send-flow/snap.manifest.json b/packages/examples/packages/send-flow/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "5JS4MeFhPgGu+XKGmUzPDgtSm36g+X/9qOsiTg/oo2k=",
+    "shasum": "gzJCMLpHGnluVixURDT1ED3ia6/iuQvkdOpA3hjvDRM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/send-flow/src/components/SendFlow.tsx b/packages/examples/packages/send-flow/src/components/SendFlow.tsx
@@ -138,7 +138,11 @@ export const SendForm: SnapComponent<SendFormProps> = ({
       <Box>
         <Image src={jazzicon3} />
       </Box>
-      <Input name="to" placeholder="Enter receiving address" />
+      <Input
+        name="to"
+        placeholder="Enter receiving address"
+        value={toAddress ?? undefined}
+      />
       {toAddress !== null && toAddress !== '' && (
         <Box>
           <Button name="clear">

diff --git a/packages/examples/packages/send-flow/src/index.tsx b/packages/examples/packages/send-flow/src/index.tsx
@@ -105,25 +105,25 @@ export const onUserInput: OnUserInputHandler = async ({
 }) => {
   const { selectedCurrency, fees } = context as SendFlowContext;
 
+  const state = await snap.request({
+    method: 'snap_getInterfaceState',
+    params: { id },
+  });
+
+  const sendForm = state.sendForm as SendFormState;
+
+  const formErrors = formValidation(sendForm, context as SendFlowContext);
+
+  const total = {
+    amount: Number(sendForm.amount) + fees.amount,
+    fiat: 250 + fees.fiat,
+  };
+
   if (event.type === UserInputEventType.InputChangeEvent) {
     switch (event.name) {
       case 'amount':
       case 'to':
       case 'accountSelector': {
-        const state = await snap.request({
-          method: 'snap_getInterfaceState',
-          params: { id },
-        });
-
-        const sendForm = state.sendForm as SendFormState;
-
-        const formErrors = formValidation(sendForm, context as SendFlowContext);
-
-        const total = {
-          amount: Number(sendForm.amount) + fees.amount,
-          fiat: 250 + fees.fiat,
-        };
-
         await snap.request({
           method: 'snap_updateInterface',
           params: {
@@ -147,5 +147,29 @@ export const onUserInput: OnUserInputHandler = async ({
       default:
         break;
     }
+  } else if (event.type === UserInputEventType.ButtonClickEvent) {
+    switch (event.name) {
+      case 'clear':
+        await snap.request({
+          method: 'snap_updateInterface',
+          params: {
+            id,
+            ui: (
+              <SendFlow
+                accounts={accountsArray}
+                selectedAccount={sendForm.accountSelector}
+                selectedCurrency={selectedCurrency}
+                total={total}
+                fees={fees}
+                toAddress={null}
+                errors={formErrors}
+              />
+            ),
+          },
+        });
+        break;
+      default:
+        break;
+    }
   }
 };