feat(docs): added mm install msg

src/components/ParserOpenRPC/AuthBox/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
+
+interface AuthBoxProps {
+  isMetamaskInstalled: boolean;
+}
+
+const MetamaskInstallMessage = () => (
+  <div className={styles.msgWrapper}>
+    <strong className={styles.msgHeading}>Install MetaMask</strong>
+    <p className={styles.msgText}>Install MetaMask for your browser to enable interactive features</p>
+    <Link className={styles.primaryBtn} href="https://metamask.io/download/">Install MetaMask</Link>
+  </div>
+);
+
+export const AuthBox = ({ isMetamaskInstalled }: AuthBoxProps) => {
+  return (
+    <>
+      {isMetamaskInstalled ? <MetamaskInstallMessage /> : null}
+    </>
+  );
+};

src/components/ParserOpenRPC/AuthBox/styles.module.css

@@ -0,0 +1,42 @@
+.msgWrapper {
+  text-align: center;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #848C96;
+  margin-bottom: 16px;
+}
+
+.msgHeading {
+  display: block;
+  font-size: 16px;
+  line-height: 1.2;
+  margin: 0 0 10px;
+}
+
+.msgText {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.primaryBtn {
+  background: #1098FC;
+  color: #141618;
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 12px 16px;
+  margin-bottom: 1px;
+  cursor: pointer;
+  transition-property: 'color', 'background-color';
+  transition-duration: .4s;
+  transition-timing-function: ease;
+}
+
+.primaryBtn:hover {
+  text-decoration: none;
+  color: #fff;
+  background-color: #036AB5;
+}

src/components/ParserOpenRPC/index.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import { ResponseItem, NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc";
-import DetailsBox from "./DetailsBox";
-import InteractiveBox from "./InteractiveBox";
+import DetailsBox from "@site/src/components/ParserOpenRPC/DetailsBox";
+import InteractiveBox from "@site/src/components/ParserOpenRPC/InteractiveBox";
+import { AuthBox } from "@site/src/components/ParserOpenRPC/AuthBox";
 
 interface ParserProps {
   network: NETWORK_NAMES;
@@ -11,6 +12,7 @@ interface ParserProps {
 
 export default function ParserOpenRPC({ network, method }: ParserProps) {
   if (!method || !network) return null;
+  const [metamaskInstalled, setMetamaskInstalled] = useState(false);
 
   const { netData } = usePluginData("plugin-json-rpc") as { netData?: ResponseItem[] };
   const currentNetwork = netData.find(net => net.name === network);
@@ -30,9 +32,14 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
 
   if (currentMethodData === null) return null;
 
+  useEffect(() => {
+    const installed = !!(window as any)?.ethereum;
+    setMetamaskInstalled(installed);
+  }, []);
+
   return (
     <div className="row">
-      <div className="col col--7">
+      <div className="col col--7" style={{ borderRight: "1px solid #848C96" }}>
         <DetailsBox
           method={method}
           description={currentMethodData.description}
@@ -42,6 +49,7 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
         />
       </div>
       <div className="col col--5">
+        <AuthBox isMetamaskInstalled={metamaskInstalled} />
         <InteractiveBox
           method={method}
           params={currentMethodData.params}