From 09c9820ef3286ac4a54f26f6fa1332b041afee09 Mon Sep 17 00:00:00 2001
From: aednikanov <denys.nikanov@agileengine.com>
Date: Thu, 26 Sep 2024 18:28:28 +0300
Subject: [PATCH] feat(docs): added request and fixed bug

---
 .../ParserOpenRPC/ProjectsBox/index.tsx       |  5 +-
 .../ParserOpenRPC/RequestBox/index.tsx        |  4 +-
 src/components/ParserOpenRPC/index.tsx        | 58 ++++++++++++++-----
 src/theme/Root.tsx                            |  1 +
 4 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/components/ParserOpenRPC/ProjectsBox/index.tsx b/src/components/ParserOpenRPC/ProjectsBox/index.tsx
index f2ffff84616..52f2713165d 100644
--- a/src/components/ParserOpenRPC/ProjectsBox/index.tsx
+++ b/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) {
diff --git a/src/components/ParserOpenRPC/RequestBox/index.tsx b/src/components/ParserOpenRPC/RequestBox/index.tsx
index 97f5d26cecb..ec6bdc96857 100644
--- a/src/components/ParserOpenRPC/RequestBox/index.tsx
+++ b/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;
diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx
index 110af47180b..231c2c3f7d2 100644
--- a/src/components/ParserOpenRPC/index.tsx
+++ b/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");
+      }
     }
   };
 
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
index 39af7c5ece3..f6ea1acd791 100644
--- a/src/theme/Root.tsx
+++ b/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);