feat(docs): ACT-1528 - Improvement for MM Reference Pages (#1545)

* feat(docs): made improvements for MM reference pages * Apply suggestions from code review --------- Co-authored-by: Alexandra Carrillo <[email protected]>
MetaMask · Sep 12, 2024 · 3a99bf2 · 3a99bf2
1 parent 76f1195
commit 3a99bf2
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/src/components/ParserOpenRPC/AuthBox/index.tsx b/src/components/ParserOpenRPC/AuthBox/index.tsx
@@ -19,7 +19,7 @@ export const AuthBox = ({ handleConnect }: AuthBoxProps) => {
   }
   return (
     <div className={styles.msgWrapper}>
-      <div className={styles.msgText}>Connect your MetaMask wallet to send requests to your Infura API keys.</div>
+      <div className={styles.msgText}>Connect your MetaMask wallet to run requests successfully.</div>
       <div>
         <button
           className={clsx(global.primaryBtn, styles.msgButton)}

diff --git a/src/components/ParserOpenRPC/RequestBox/index.tsx b/src/components/ParserOpenRPC/RequestBox/index.tsx
@@ -4,6 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
 import { MethodParam } from "@site/src/components/ParserOpenRPC/interfaces";
 import styles from "./styles.module.css";
 import global from "../global.module.css";
+import { Tooltip } from "@site/src/components/ParserOpenRPC/Tooltip";
 
 interface RequestBoxProps {
   isMetamaskInstalled: boolean;
@@ -33,6 +34,22 @@ export default function RequestBox({
     return JSON.stringify(response, null, 2);
   }, [response]);
 
+  const methodsWithRequiredWalletConnection = ["eth_accounts", "eth_sendTransaction", "personal_sign", "eth_signTypedData_v4"];
+  const isRunAndCustomizeRequestDisabled = methodsWithRequiredWalletConnection.includes(method) ?
+    !isMetamaskInstalled :
+    false;
+
+  const runRequestButton = (
+    <button
+      className={global.primaryBtn}
+      disabled={isRunAndCustomizeRequestDisabled}
+      onClick={submitRequest}
+      data-test-id="run-request"
+    >
+      Run request
+    </button>
+  );
+
   return (
     <>
       <div className={styles.cardWrapper}>
@@ -48,21 +65,20 @@ export default function RequestBox({
           {params.length > 0 && (
             <button
               className={clsx(global.linkBtn, "margin-right--md")}
-              disabled={!isMetamaskInstalled}
+              disabled={isRunAndCustomizeRequestDisabled}
               onClick={openModal}
               data-test-id="customize-request"
             >
               Customize request
             </button>
           )}
-          <button
-            className={global.primaryBtn}
-            disabled={!isMetamaskInstalled}
-            onClick={submitRequest}
-            data-test-id="run-request"
-          >
-            Run request
-          </button>
+          {
+            isRunAndCustomizeRequestDisabled ?
+              (<Tooltip message="Before you can run or customize this request, please connect your MetaMask wallet first.">
+                {runRequestButton}
+              </Tooltip>) :
+              runRequestButton
+          }
         </div>
       </div>
       {response !== undefined && (

diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx
@@ -103,7 +103,7 @@ export default function ParserOpenRPC({ network, method, extraContent }: ParserP
 
   if (currentMethodData === null) return null;
 
-  const { metaMaskProvider, metaMaskConnectHandler } = useContext(MetamaskProviderContext);
+  const { metaMaskAccount, metaMaskProvider, metaMaskConnectHandler } = useContext(MetamaskProviderContext);
 
   const onParamsChangeHandle = (data) => {
     trackInputChangeForSegment({
@@ -226,9 +226,9 @@ export default function ParserOpenRPC({ network, method, extraContent }: ParserP
         </div>
         <div className={global.colRight}>
           <div className={global.stickyCol}>
-            {!metaMaskProvider && <AuthBox handleConnect={metaMaskConnectHandler} />}
+            {!metaMaskAccount && <AuthBox handleConnect={metaMaskConnectHandler} />}
             <RequestBox
-              isMetamaskInstalled={!!metaMaskProvider}
+              isMetamaskInstalled={!!metaMaskAccount}
               method={method}
               params={currentMethodData.params}
               paramsData={paramsData}

diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
@@ -1,4 +1,4 @@
-import React, { useState, createContext, ReactChild } from "react";
+import React, { useEffect, useState, createContext, ReactChild } from "react";
 import { MetaMaskSDK } from "@metamask/sdk";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
@@ -20,6 +20,11 @@ export default function Root({ children }: { children: ReactChild}) {
     }
   });
 
+  useEffect(() => {
+    const provider = sdk?.getProvider();
+    setMetaMaskProvider(provider);
+  }, []);
+
   const metaMaskConnectHandler = async () => {
     try {
       const accounts = await sdk?.connect();