feat(ref): improved eth_decrypt method flow (#1765)

Author: TrofimovAnton85

package-lock.json

@@ -38,6 +38,7 @@
     "@intercom/messenger-js-sdk": "^0.0.14",
     "@mdx-js/react": "^3.0.0",
     "@metamask/design-tokens": "^1.11.1",
+    "@metamask/eth-sig-util": "^7.0.3",
     "@metamask/profile-sync-controller": "^0.9.6",
     "@metamask/sdk": "^0.31.1",
     "@rjsf/core": "^5.22.1",

package.json

@@ -48,7 +48,7 @@ export default function RequestBox({
   requestURL = "",
   isLoading,
 }: RequestBoxProps) {
-  const { userAPIKey } = useContext(MetamaskProviderContext);
+  const { userAPIKey, userEncPublicKey } = useContext(MetamaskProviderContext);
   const [currentLang, setCurrentLang] = useState(langOptions[0]);
   const exampleRequest = useMemo(() => {
     const preparedParams = JSON.stringify(paramsData, null, 2);
@@ -77,15 +77,17 @@ export default function RequestBox({
     return false
   }, [response, defExampleResponse]);
 
-  const methodsWithRequiredWalletConnection = ["eth_accounts", "eth_sendTransaction", "personal_sign", "eth_signTypedData_v4"];
+  const methodsWithRequiredWalletConnection = ["eth_accounts", "eth_sendTransaction", "personal_sign", "eth_signTypedData_v4", "eth_getEncryptionPublicKey"];
   const isRunAndCustomizeRequestDisabled = isMetamaskNetwork && methodsWithRequiredWalletConnection.includes(method) ?
     !isMetamaskInstalled :
     false;
 
+  const isMetamaskDecryptDisabled = isMetamaskNetwork && !userEncPublicKey && method === "eth_decrypt";
+
   const runRequestButton = (
     <button
       className={clsx(global.primaryBtn, styles.runBtnWrap)}
-      disabled={isRunAndCustomizeRequestDisabled || isLoading}
+      disabled={isRunAndCustomizeRequestDisabled || isLoading || isMetamaskDecryptDisabled}
       onClick={submitRequest}
       data-test-id="run-request"
     >
@@ -123,16 +125,20 @@ export default function RequestBox({
           {params.length > 0 && (
             <button
               className={clsx(global.linkBtn, "margin-right--md")}
-              disabled={isRunAndCustomizeRequestDisabled}
+              disabled={isRunAndCustomizeRequestDisabled || isMetamaskDecryptDisabled}
               onClick={openModal}
               data-test-id="customize-request"
             >
               Customize request
             </button>
           )}
           {
-            isRunAndCustomizeRequestDisabled ?
-              (<Tooltip message="Before you can run or customize this request, please connect your MetaMask wallet first.">
+            isRunAndCustomizeRequestDisabled || isMetamaskDecryptDisabled ?
+              (<Tooltip message={
+                isMetamaskDecryptDisabled
+                ? "Please connect your MetaMask wallet first and run eth_getEncryptionPublicKey"
+                : "Before you can run or customize this request, please connect your MetaMask wallet first."
+              }>
                 {runRequestButton}
               </Tooltip>) :
               runRequestButton

src/components/ParserOpenRPC/RequestBox/index.tsx

@@ -25,6 +25,8 @@ import { MetamaskProviderContext } from "@site/src/theme/Root";
 import ProjectsBox from "@site/src/components/ParserOpenRPC/ProjectsBox";
 import { LINEA_REQUEST_URL } from "@site/src/lib/constants";
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import { encrypt } from '@metamask/eth-sig-util';
+import { hexlify } from 'ethers';
 
 interface ParserProps {
   network: NETWORK_NAMES;
@@ -59,7 +61,7 @@ export default function ParserOpenRPC({
   const [isDrawerContentFixed, setIsDrawerContentFixed] = useState(false);
   const [drawerLabel, setDrawerLabel] = useState(null);
   const [isComplexTypeView, setIsComplexTypeView] = useState(false);
-  const { metaMaskAccount, metaMaskProvider, userAPIKey } = useContext(MetamaskProviderContext);
+  const { metaMaskAccount, metaMaskProvider, userAPIKey, userEncPublicKey, setUserEncPublicKey } = useContext(MetamaskProviderContext);
   const [defExampleResponse, setDefExampleResponse] = useState(undefined);
   const [isLoading, setIsLoading] = useState(false);
   const { colorMode } = useColorMode();
@@ -126,6 +128,21 @@ export default function ParserOpenRPC({
       "tags",
     );
 
+    if (!!userEncPublicKey && method === "eth_decrypt") {
+      const encDefValue = hexlify(Buffer.from(JSON.stringify(
+        encrypt({
+          publicKey: userEncPublicKey,
+          data: "Test message",
+          version: 'x25519-xsalsa20-poly1305',
+        }),
+      )))
+      currentMethod?.examples[0]?.params?.forEach(item => {
+        if (item.name === "EncryptedMessage" && !!encDefValue) {
+          item.value = encDefValue;
+        };
+      })
+    }
+
     return {
       description: currentMethod.description || null,
       summary: currentMethod.summary || null,
@@ -202,6 +219,9 @@ export default function ParserOpenRPC({
       });
       setReqResult(response);
       trackAnalyticsForRequest(response);
+      if (method === "eth_getEncryptionPublicKey" && response) {
+        setUserEncPublicKey(response as string)
+      }
     } catch (e) {
       setReqResult(e);
     } finally {

src/components/ParserOpenRPC/index.tsx

@@ -65,6 +65,8 @@ interface IMetamaskProviderContext {
   userAPIKey?: string;
   setUserAPIKey?: (key: string) => void;
   fetchLineaEns?: (walletId: string) => Promise<void>;
+  userEncPublicKey?: string;
+  setUserEncPublicKey?: (key: string) => void;
 }
 
 export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
@@ -90,6 +92,8 @@ export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
   userAPIKey: "",
   setUserAPIKey: () => {},
   fetchLineaEns: () => new Promise(() => {}),
+  userEncPublicKey: undefined,
+  setUserEncPublicKey: () => {},
 });
 
 const sdk = new MetaMaskSDK({
@@ -122,6 +126,7 @@ export const LoginProvider = ({ children }) => {
   const [needsMfa, setNeedsMfa] = useState<boolean>(false);
   const [walletAuthUrl, setWalletAuthUrl] = useState<string>("");
   const [userAPIKey, setUserAPIKey] = useState("");
+  const [userEncPublicKey, setUserEncPublicKey] = useState(undefined);
   const { siteConfig } = useDocusaurusContext();
   const { DASHBOARD_URL, GF_SURVEY_KEY, LINEA_ENS_URL } = siteConfig?.customFields || {};
 
@@ -289,6 +294,8 @@ export const LoginProvider = ({ children }) => {
           userAPIKey,
           setUserAPIKey,
           fetchLineaEns,
+          userEncPublicKey,
+          setUserEncPublicKey,
         } as IMetamaskProviderContext
       }
     >