diff --git a/src/components/ParserOpenRPC/ProjectsBox/index.tsx b/src/components/ParserOpenRPC/ProjectsBox/index.tsx index f2ffff8461..52f2713165 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 97f5d26cec..ec6bdc9685 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 110af47180..231c2c3f7d 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 39af7c5ece..f6ea1acd79 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);