feat(docs): added request and fixed bug

Author: aednikanov

src/components/ParserOpenRPC/ProjectsBox/index.tsx

@@ -58,10 +58,7 @@ const ProjectsBox = () => {
     if (options?.length > 0) {
       setUserAPIKey(options[0].value);
     }
-    if (!walletLinked) {
-      setUserAPIKey("");
-    }
-  }, [options.length, walletLinked]);
+  }, [options.length]);
 
   useEffect(() => {
     if (walletLinked) {

src/components/ParserOpenRPC/RequestBox/index.tsx

@@ -1,11 +1,11 @@
-import React, {useContext, useMemo} from "react";
+import React, { useContext, useMemo } from "react";
 import clsx from "clsx";
 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/Tooltip";
-import {MetamaskProviderContext} from "@site/src/theme/Root";
+import { MetamaskProviderContext } from "@site/src/theme/Root";
 
 interface RequestBoxProps {
   isMetamaskInstalled: boolean;

src/components/ParserOpenRPC/index.tsx

@@ -51,10 +51,18 @@ export default function ParserOpenRPC({
   const [isDrawerContentFixed, setIsDrawerContentFixed] = useState(false);
   const [drawerLabel, setDrawerLabel] = useState(null);
   const [isComplexTypeView, setIsComplexTypeView] = useState(false);
-  const { metaMaskAccount, metaMaskProvider } = useContext(
+  const { metaMaskAccount, metaMaskProvider, userAPIKey } = useContext(
     MetamaskProviderContext
   );
   const { colorMode } = useColorMode();
+  const trackAnalyticsForRequest = (response) => {
+    trackClickForSegment({
+      eventName: "Request Sent",
+      clickType: "Request Sent",
+      userExperience: "B",
+      ...(response?.code && { responseStatus: response.code }),
+    });
+  }
   const openModal = () => {
     setModalOpen(true);
     trackClickForSegment({
@@ -147,21 +155,39 @@ export default function ParserOpenRPC({
   };
 
   const onSubmitRequestHandle = async () => {
-    if (!metaMaskProvider) return;
-    try {
-      const response = await metaMaskProvider?.request({
-        method: method,
-        params: paramsData,
-      });
-      setReqResult(response);
-      trackClickForSegment({
-        eventName: "Request Sent",
-        clickType: "Request Sent",
-        userExperience: "B",
-        ...(response?.code && { responseStatus: response.code }),
-      });
-    } catch (e) {
-      setReqResult(e);
+    if (isMetamaskNetwork) {
+      if (!metaMaskProvider) return
+      try {
+        const response = await metaMaskProvider?.request({
+          method: method,
+          params: paramsData
+        })
+        setReqResult(response);
+        trackAnalyticsForRequest(response);
+      } catch (e) {
+        setReqResult(e);
+      }
+    } else {
+      const NETWORK_URL = "https://linea-mainnet.infura.io";
+      const URL = `${NETWORK_URL}/v3/${userAPIKey}`;
+      let params = {
+        method: "POST",
+        "Content-Type": "application/json",
+        body: JSON.stringify({
+          jsonrpc: "2.0",
+          method,
+          params: paramsData,
+          id: 1,
+        }),
+      };
+      const res = await fetch(URL, params);
+      if (res.ok) {
+        const response = await res.json();
+        setReqResult(response.result);
+        trackAnalyticsForRequest(response.result);
+      } else {
+        console.error("error");
+      }
     }
   };
 

src/theme/Root.tsx

@@ -202,6 +202,7 @@ export const LoginProvider = ({ children }) => {
       setMetaMaskAccount(undefined);
       setProjects({});
       setWalletLinked(undefined);
+      setUserAPIKey("");
       clearStorage();
     } catch (err) {
       console.warn("failed to disconnect..", err);