feat(docs): added handle errors & loading

MetaMask · Oct 1, 2024 · a8e7c0d · a8e7c0d
1 parent 8626f91
commit a8e7c0d
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 41 deletions.
diff --git a/src/components/CustomReferencePage/styles.module.css b/src/components/CustomReferencePage/styles.module.css
@@ -5,19 +5,15 @@
 @media (width >= 997px) {
   .sidebarViewport {
     height: 100%;
-
-    /* max-height: 100vh; */
+    max-height: 100vh;
     position: sticky;
     top: 0;
   }
 
   .sidebar {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     width: var(--doc-sidebar-width);
-    margin-top: calc(-1 * var(--ifm-navbar-height));
-    border-right: 1px solid var(--ifm-toc-border-color);
-    will-change: width;
-    transition: width var(--ifm-transition-fast) ease;
-    clip-path: inset(0);
   }
 }
diff --git a/src/components/ParserOpenRPC/RequestBox/index.tsx b/src/components/ParserOpenRPC/RequestBox/index.tsx
@@ -6,7 +6,6 @@ import styles from "./styles.module.css";
 import global from "../global.module.css";
 import { Tooltip } from "@site/src/components/Tooltip";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
-import { LINEA_REQUEST_URL } from "@site/src/lib/constants";
 
 interface RequestBoxProps {
   isMetamaskInstalled: boolean;
@@ -19,6 +18,8 @@ interface RequestBoxProps {
   isMetamaskNetwork?: boolean;
   defExampleResponse?: any;
   resetResponseHandle: () => void;
+  requestURL: string;
+  isLoading: boolean;
 }
 
 export default function RequestBox({
@@ -32,17 +33,18 @@ export default function RequestBox({
   isMetamaskNetwork = false,
   defExampleResponse,
   resetResponseHandle,
+  requestURL = "",
+  isLoading,
 }: RequestBoxProps) {
   const { userAPIKey } = useContext(MetamaskProviderContext);
   const exampleRequest = useMemo(() => {
     const preparedParams = JSON.stringify(paramsData, null, 2);
     const preparedShellParams = JSON.stringify(paramsData);
-    const NETWORK_URL = "https://linea-mainnet.infura.io";
     const API_KEY = userAPIKey ? userAPIKey : "<YOUR-API-KEY>";
     if (isMetamaskNetwork) {
       return `await window.ethereum.request({\n "method": "${method}",\n "params": ${preparedParams.replace(/"([^"]+)":/g, '$1:')},\n});`;
     }
-    return `curl ${LINEA_REQUEST_URL}/v3/${API_KEY} \\\n  -X POST \\\n  -H "Content-Type: application/json" \\\n  -d '{\n    "jsonrpc": "2.0",\n    "method": "${method}",\n    "params": ${preparedShellParams},\n    "id": 1\n  }'`;
+    return `curl ${requestURL}${API_KEY} \\\n  -X POST \\\n  -H "Content-Type: application/json" \\\n  -d '{\n    "jsonrpc": "2.0",\n    "method": "${method}",\n    "params": ${preparedShellParams},\n    "id": 1\n  }'`;
   }, [userAPIKey, method, paramsData]);
 
   const exampleResponse = useMemo(() => {
@@ -66,12 +68,12 @@ export default function RequestBox({
 
   const runRequestButton = (
     <button
-      className={global.primaryBtn}
-      disabled={isRunAndCustomizeRequestDisabled}
+      className={clsx(global.primaryBtn, styles.runBtnWrap)}
+      disabled={isRunAndCustomizeRequestDisabled || isLoading}
       onClick={submitRequest}
       data-test-id="run-request"
     >
-      Run request
+      {isLoading ? <span className={styles.loader}></span> : "Run request"}
     </button>
   );
 

diff --git a/src/components/ParserOpenRPC/RequestBox/styles.module.css b/src/components/ParserOpenRPC/RequestBox/styles.module.css
@@ -40,3 +40,28 @@
   background: none;
   border: 0;
 }
+
+.runBtnWrap {
+  display: flex;
+  justify-content: center;
+  min-width: 109px;
+}
+
+.loader {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #FFF;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx
@@ -24,7 +24,7 @@ import {
 import { AuthBox } from "@site/src/components/ParserOpenRPC/AuthBox";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 import ProjectsBox from "@site/src/components/ParserOpenRPC/ProjectsBox";
-import { LINEA_REQUEST_URL, REF_PATH } from "@site/src/lib/constants";
+import { LINEA_REQUEST_URL } from "@site/src/lib/constants";
 
 interface ParserProps {
   network: NETWORK_NAMES;
@@ -57,6 +57,7 @@ export default function ParserOpenRPC({
   const [isComplexTypeView, setIsComplexTypeView] = useState(false);
   const { metaMaskAccount, metaMaskProvider, userAPIKey } = useContext(MetamaskProviderContext);
   const [defExampleResponse, setDefExampleResponse] = useState(undefined);
+  const [isLoading, setIsLoading] = useState(false);
   const { colorMode } = useColorMode();
   const trackAnalyticsForRequest = (response) => {
     trackClickForSegment({
@@ -130,6 +131,7 @@ export default function ParserOpenRPC({
       paramStructure: currentMethod?.paramStructure || null,
       errors,
       tags,
+      servers: currentNetwork.data?.servers?.[0]?.url || null
     };
   }, [currentNetwork, method]);
 
@@ -185,39 +187,71 @@ export default function ParserOpenRPC({
     setParamsData(Object.values(data));
   };
 
-  const onSubmitRequestHandle = async () => {
-    if (isMetamaskNetwork) {
-      if (!metaMaskProvider) return
-      try {
-        const response = await metaMaskProvider?.request({
-          method: method,
-          params: paramsData
-        })
-        setReqResult(response);
-        trackAnalyticsForRequest(response);
-      } catch (e) {
-        setReqResult(e);
-      }
+  const handleMetaMaskRequest = async () => {
+    if (!metaMaskProvider) return;
+    setIsLoading(true);
+    try {
+      const response = await metaMaskProvider.request({
+        method,
+        params: paramsData,
+      });
+      setReqResult(response);
+      trackAnalyticsForRequest(response);
+    } catch (e) {
+      setReqResult(e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const getInfuraUrl = (url: string) => {
+    if (process.env.VERCEL_ENV === "production") {
+      return url;
     } else {
-      const URL = `${LINEA_REQUEST_URL}/v3/${userAPIKey}`;
-      let params = {
-        method: "POST",
+      return url.replace("infura.io", "dev.infura.org");
+    }
+  }
+
+  const INIT_URL = currentMethodData.servers !== null ? getInfuraUrl(currentMethodData.servers) : LINEA_REQUEST_URL;
+
+  const handleServiceRequest = async () => {
+    const URL = `${INIT_URL}${userAPIKey}`;
+    const params = {
+      method: "POST",
+      headers: {
         "Content-Type": "application/json",
-        body: JSON.stringify({
-          jsonrpc: "2.0",
-          method,
-          params: paramsData,
-          id: 1,
-        }),
-      };
+      },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method,
+        params: paramsData,
+        id: 1,
+      }),
+    };
+    setIsLoading(true);
+    try {
       const res = await fetch(URL, params);
       if (res.ok) {
         const response = await res.json();
         setReqResult(response.result);
         trackAnalyticsForRequest(response.result);
       } else {
-        console.error("error");
+        const errorText = await res.text();
+        const errorState = JSON.parse(errorText);
+        setReqResult(`Request failed. Status: ${res.status}. ${errorState}`);
       }
+    } catch (e) {
+      setReqResult(`${e}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onSubmitRequestHandle = async () => {
+    if (isMetamaskNetwork) {
+      await handleMetaMaskRequest();
+    } else {
+      await handleServiceRequest();
     }
   };
 
@@ -314,6 +348,8 @@ export default function ParserOpenRPC({
               isMetamaskNetwork={isMetamaskNetwork}
               defExampleResponse={defExampleResponse}
               resetResponseHandle={resetResponseHandle}
+              requestURL={INIT_URL}
+              isLoading={isLoading}
             />
           </div>
         </div>

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -474,8 +474,8 @@ export const REQUEST_PARAMS = (method = "POST") => ({
 export const AUTH_WALLET_SESSION_NAME = "auth.wallet.session";
 export const AUTH_WALLET_TOKEN = "auth.wallet.token";
 export const AUTH_WALLET_PROJECTS = "auth.wallet.projects";
-export const LINEA_DEV_URL = "https://linea-mainnet.dev.infura.org";
-export const LINEA_PROD_URL = "https://linea-mainnet.infura.io";
+export const LINEA_DEV_URL = "https://linea-mainnet.dev.infura.org/v3/";
+export const LINEA_PROD_URL = "https://linea-mainnet.infura.io/v3/";
 export const LINEA_REQUEST_URL = process.env.VERCEL_ENV === "production"
     ? LINEA_PROD_URL
     : LINEA_DEV_URL;