feat(docs): fix for auth

src/components/ParserOpenRPC/index.tsx

@@ -83,7 +83,11 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
 
   if (currentMethodData === null) return null;
 
-  const { sdk, connected, provider, account } = useSDK();
+  const { sdk, ready, connected, provider, account } = useSDK();
+
+  const isConnected = useMemo(() => {
+    return ready && connected && !!account
+  }, [ready, connected, account]);
 
   useEffect(() => {
     if ((window as any)?.Sentry) {
@@ -140,6 +144,8 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
     closeComplexTypeView();
   }
 
+  console.log("connected_acc", connected, account);
+
   return (
     <ParserOpenRPCContext.Provider
       value={{ setIsDrawerContentFixed, setDrawerLabel, isComplexTypeView, setIsComplexTypeView }}
@@ -188,7 +194,7 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
         </div>
         <div className={global.colRight}>
           <div className={global.stickyCol}>
-            {!connected && <AuthBox handleConnect={connectSDKHandler} />}
+            {!isConnected && <AuthBox handleConnect={connectSDKHandler} />}
             <RequestBox
               isMetamaskInstalled={connected}
               method={method}

src/theme/Layout/index.tsx

@@ -7,7 +7,6 @@ import Layout from "@theme-original/Layout";
 import ParserOpenRPC from "@site/src/components/ParserOpenRPC";
 import { ResponseItem, NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc";
 import styles from "./styles.module.css";
-import { MetaMaskProvider } from '@metamask/sdk-react';
 
 const REF_FF = "mm-new-reference-enabled";
 const REF_PATH = "/wallet/reference/";
@@ -17,18 +16,6 @@ const EXEPT_METHODS = [
   "eth_signTypedData_v4"
 ];
 
-const SDK_OPTIONS = {
-  logging:{
-    developerMode: false,
-  },
-  checkInstallationImmediately: false,
-  dappMetadata: {
-    name: "New reference pages",
-    url: "https://docs.metamask.io/",
-  },
-  preferDesktop: true
-}
-
 export default function LayoutWrapper({ children }) {
   const location = useLocation();
   const { netData } = usePluginData("plugin-json-rpc") as { netData?: ResponseItem[] };
@@ -69,20 +56,18 @@ export default function LayoutWrapper({ children }) {
           return (
             <>
               {newReferenceEnabled && ldReady && referencePageName ? (
-                <MetaMaskProvider sdkOptions={{...SDK_OPTIONS}}>
-                  <Layout>
-                    <div className={styles.pageWrapper}>
-                      {children?.props?.children[0]?.type === "aside" && (
-                        <>{children.props.children[0]}</>
-                      )}
-                      <div className={styles.mainContainer}>
-                        <div className={styles.contentWrapper}>
-                          <ParserOpenRPC network={NETWORK_NAMES.metamask} method={referencePageName} />
-                        </div>
+                <Layout>
+                  <div className={styles.pageWrapper}>
+                    {children?.props?.children[0]?.type === "aside" && (
+                      <>{children.props.children[0]}</>
+                    )}
+                    <div className={styles.mainContainer}>
+                      <div className={styles.contentWrapper}>
+                        <ParserOpenRPC network={NETWORK_NAMES.metamask} method={referencePageName} />
                       </div>
                     </div>
-                  </Layout>
-                </MetaMaskProvider>
+                  </div>
+                </Layout>
               ) : (
                 <Layout>{children}</Layout>
               )}

src/theme/Root.tsx

@@ -0,0 +1,29 @@
+import React, { ReactChild } from "react";
+import { MetaMaskProvider } from '@metamask/sdk-react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+export default function Root({ children }: { children: ReactChild}) {
+  return (
+    <BrowserOnly fallback={<div>Loading...</div>}>
+      {
+        () => {
+          return (
+            <MetaMaskProvider debug={false} sdkOptions={{
+              logging:{
+                  developerMode: false,
+                },
+                checkInstallationImmediately: false,
+                dappMetadata: {
+                  name: "New mm app",
+                  url: "https://docs.metamask.io/",
+                },
+                preferDesktop: true
+            }}>
+              {children}
+            </MetaMaskProvider>
+          )
+        }
+      }
+    </BrowserOnly>
+  );
+}