feat: support show all monitored addresses

NaturalSelectionLabs · Oct 20, 2023 · 4962b80 · 4962b80
1 parent 8ea73d8
commit 4962b80
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 55 deletions.
diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
@@ -2,7 +2,7 @@ import { useContext, useState } from 'react';
 import styled from 'styled-components';
 import { MetamaskActions, MetaMaskContext } from '../hooks';
 import {
-  addOwnWalletAddress,
+  // addOwnWalletAddress,
   connectSnap,
   getSnap,
   isLocalSnap,
@@ -12,6 +12,7 @@ import {
   shouldDisplayReconnectButton,
   showAlert,
   showAllActivities,
+  showAllMonitoredAddresses,
   showLastUpdated,
 } from '../utils';
 import {
@@ -178,32 +179,32 @@ const Index = () => {
     }
   };
 
-  const handleSendGetStateClick = async () => {
-    try {
-      const resp = await sendGetState();
-      await showAlert('Get State', JSON.stringify(resp, null, 2));
-    } catch (e) {
-      console.error(e);
-      dispatch({ type: MetamaskActions.SetError, payload: e });
-    }
-  };
-
-  const handleSendAddYourWalletClick = async () => {
-    try {
-      const resp = await addOwnWalletAddress();
-      if (resp && (resp as string[]).length > 0) {
-        await showAlert('Monitored', JSON.stringify(resp, null, 2));
-      } else {
-        await showAlert(
-          'Already Monitored',
-          'the wallet address is already monitored.',
-        );
-      }
-    } catch (e) {
-      console.error(e);
-      dispatch({ type: MetamaskActions.SetError, payload: e });
-    }
-  };
+  // const handleSendGetStateClick = async () => {
+  //   try {
+  //     const resp = await sendGetState();
+  //     await showAlert('Get State', JSON.stringify(resp, null, 2));
+  //   } catch (e) {
+  //     console.error(e);
+  //     dispatch({ type: MetamaskActions.SetError, payload: e });
+  //   }
+  // };
+
+  // const handleSendAddYourWalletClick = async () => {
+  //   try {
+  //     const resp = await addOwnWalletAddress();
+  //     if (resp && (resp as string[]).length > 0) {
+  //       await showAlert('Monitored', JSON.stringify(resp, null, 2));
+  //     } else {
+  //       await showAlert(
+  //         'Already Monitored',
+  //         'the wallet address is already monitored.',
+  //       );
+  //     }
+  //   } catch (e) {
+  //     console.error(e);
+  //     dispatch({ type: MetamaskActions.SetError, payload: e });
+  //   }
+  // };
 
   const handleSendSetStateClick = async () => {
     if (
@@ -287,6 +288,15 @@ const Index = () => {
     }
   };
 
+  const handleShowAllAddressesClick = async () => {
+    try {
+      await showAllMonitoredAddresses();
+    } catch (e) {
+      console.error(e);
+      dispatch({ type: MetamaskActions.SetError, payload: e });
+    }
+  };
+
   return (
     <Container>
       <Heading>
@@ -300,12 +310,12 @@ const Index = () => {
         3. When there is a new activity produced by any of your monitored
         addresses, <Span>you will be notified</Span>.
       </SubHeading>
+      {state.error && (
+        <ErrorMessage>
+          <b>An error happened:</b> {state.error.message}
+        </ErrorMessage>
+      )}
       <CardContainer>
-        {state.error && (
-          <ErrorMessage>
-            <b>An error happened:</b> {state.error.message}
-          </ErrorMessage>
-        )}
         {!isMetaMaskReady && (
           <Card
             content={{
@@ -447,6 +457,25 @@ const Index = () => {
           }
         />
 
+        <Card
+          content={{
+            title: 'Show All Addresses',
+            description: 'View all addresses from all the addresses monitored.',
+            button: (
+              <SendHelloButton
+                onClick={handleShowAllAddressesClick}
+                disabled={!state.installedSnap}
+              />
+            ),
+          }}
+          disabled={!state.installedSnap}
+          fullWidth={
+            isMetaMaskReady &&
+            Boolean(state.installedSnap) &&
+            !shouldDisplayReconnectButton(state.installedSnap)
+          }
+        />
+
         <Card
           content={{
             title: 'Monitor Any Address',

diff --git a/packages/site/src/utils/snap.ts b/packages/site/src/utils/snap.ts
@@ -155,4 +155,17 @@ export const showAllActivities = async () => {
     },
   });
 };
+
+export const showAllMonitoredAddresses = async () => {
+  await window.ethereum.request({
+    method: 'wallet_invokeSnap',
+    params: {
+      snapId: defaultSnapOrigin,
+      request: {
+        method: 'showAllMonitoredAddresses',
+      },
+    },
+  });
+};
+
 export const isLocalSnap = (snapId: string) => snapId.startsWith('local:');
diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/NaturalSelectionLabs/RSS3-MetaMask-Snap.git"
   },
   "source": {
-    "shasum": "qJEtxAAKUamn/Xa5MfMU/SU3PDyLZOpkE6De75PhsGs=",
+    "shasum": "VR2VgcEbiaPiSNYV3HP1YCB2L7UWDQ7PAdgAOrVk7PI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snap/src/index.ts b/packages/snap/src/index.ts
@@ -31,6 +31,8 @@ export type FetchSocialCountParams = {
  */
 export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
   switch (request.method) {
+    /** Basic function */
+    // set the state
     case 'setState': {
       const { socialActivities } = request.params as State;
       const state = await getState();
@@ -41,15 +43,53 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
       return true;
     }
 
+    // get the state
     case 'getState': {
       return await getState();
     }
 
+    // clear the state
     case 'clearState': {
       await clearState();
       return true;
     }
 
+    // get accounts by own wallet
+    case 'getAccounts': {
+      return await getAccounts();
+    }
+
+    // add account to state
+    case 'addAccount': {
+      const { account } = request.params as { account: string | undefined };
+      if (!account) {
+        return true;
+      }
+      return await addAddressToState(account);
+    }
+
+    // add multiple accounts by own wallet to state
+    case 'addOwnWalletAddresses': {
+      const accounts = await getAccounts();
+      return await addMultipleAddressesToState(accounts);
+    }
+
+    // User-defined Dialog.Alert
+    case 'showAlert': {
+      const { title, content } = request.params as {
+        title: string;
+        content: string;
+      };
+      return snap.request({
+        method: 'snap_dialog',
+        params: {
+          type: DialogType.Alert,
+          content: panel([heading(title), text(content)]),
+        },
+      });
+    }
+
+    // fetch the social activities by @rss3/js-sdk.
     case 'fetchSocialCount': {
       const params = request.params as FetchSocialCountParams | undefined;
       assert(
@@ -63,15 +103,9 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
       return await Promise.all(resultPromise);
     }
 
-    case 'getAccounts': {
-      return await getAccounts();
-    }
-
-    case 'addOwnWalletAddresses': {
-      const accounts = await getAccounts();
-      return await addMultipleAddressesToState(accounts);
-    }
+    /** Helper function */
 
+    // show the last updated activities
     case 'showLastUpdated': {
       const state = await getState();
       const content: any = [heading('Last Updated')];
@@ -91,6 +125,7 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
       });
     }
 
+    // show the all activities
     case 'showAllActivities': {
       const state = await getState();
       const content: any = [heading('All Activities')];
@@ -110,24 +145,19 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
       });
     }
 
-    case 'addAccount': {
-      const { account } = request.params as { account: string | undefined };
-      if (!account) {
-        return true;
-      }
-      return await addAddressToState(account);
-    }
-
-    case 'showAlert': {
-      const { title, content } = request.params as {
-        title: string;
-        content: string;
-      };
+    // show the all monitored addresses
+    case 'showAllMonitoredAddresses': {
+      const state = await getState();
+      const content: any = [heading('All Monitored Addresses')];
+      state.socialActivities.forEach((activity) => {
+        content.push(text(activity.address));
+        content.push(divider());
+      });
       return snap.request({
         method: 'snap_dialog',
         params: {
           type: DialogType.Alert,
-          content: panel([heading(title), text(content)]),
+          content: panel(content),
         },
       });
     }