feat(reference): act-1446 - added ff condition for reference pages

src/components/ParserOpenRPC/global.module.css

@@ -85,7 +85,7 @@
 
 .colLeft {
   position: relative;
-  width: 65%;
+  width: calc(100% - 420px);
   border-right: 1px solid #444950;
   overflow: hidden;
 }
@@ -97,7 +97,7 @@
 }
 
 .colRight {
-  width: 35%;
+  width: 420px;
   padding-left: 23px;
 }
 

src/components/ParserOpenRPC/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useMemo, useState } from 'react'
+import React, { createContext, useMemo, useState } from 'react'
 import { usePluginData } from "@docusaurus/useGlobalData";
 import { ResponseItem, NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc";
 import DetailsBox from "@site/src/components/ParserOpenRPC/DetailsBox";
@@ -11,11 +11,7 @@ import global from "./global.module.css";
 import modalDrawerStyles from "./ModalDrawer/styles.module.css";
 import clsx from "clsx";
 import { useColorMode } from "@docusaurus/theme-common";
-import {
-  trackPageViewForSegment,
-  trackClickForSegment,
-  trackInputChangeForSegment
-} from "@site/src/lib/segmentAnalytics";
+import { trackClickForSegment, trackInputChangeForSegment } from "@site/src/lib/segmentAnalytics";
 import { useLocation } from "@docusaurus/router";
 import { useSyncProviders } from "@site/src/hooks/useSyncProviders.ts"
 
@@ -47,13 +43,13 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
     trackClickForSegment({
       eventName: "Customize Request",
       clickType: "Customize Request",
-      userExperience: "new"
+      userExperience: "B"
     })
   };
   const closeModal = () => setModalOpen(false);
 
   const { netData } = usePluginData("plugin-json-rpc") as { netData?: ResponseItem[] };
-  const currentNetwork = netData.find(net => net.name === network);
+  const currentNetwork = netData?.find(net => net.name === network);
 
   if (!currentNetwork && currentNetwork.error) return null;
 
@@ -97,14 +93,6 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
     setSelectedWallet(i);
   }
 
-  useEffect(() => {
-    trackPageViewForSegment({
-      name: "Reference page",
-      path: location.pathname,
-      userExperience: "new"
-    })
-  }, []);
-
   const metamaskProviders = useMemo(() => {
     const isMetamasks = providers.filter(pr => pr?.info?.name?.includes("MetaMask"));
     if (isMetamasks.length > 1) {
@@ -121,7 +109,7 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
     setParamsData(Object.values(data));
     trackInputChangeForSegment({
       eventName: "Request Configuration Started",
-      userExperience: "new"
+      userExperience: "B"
     })
   }
 
@@ -136,7 +124,7 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
       trackClickForSegment({
         eventName: "Request Sent",
         clickType: "Request Sent",
-        userExperience: "new",
+        userExperience: "B",
         ...(response?.code && { responseStatus: response.code })
       })
     } catch (e) {

src/theme/Layout/index.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect, useMemo } from "react";
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import { usePluginData } from "@docusaurus/useGlobalData";
+import ldClient from "launchdarkly";
+import { useLocation } from "@docusaurus/router";
+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";
+
+const REF_FF = "mm-new-reference-enabled";
+const REF_PATH = "/wallet/reference/";
+const EXEPT_METHODS = [
+  "wallet_requestPermissions",
+  "wallet_revokePermissions",
+  "eth_signTypedData_v4"
+];
+
+export default function LayoutWrapper({ children }) {
+  const location = useLocation();
+  const { netData } = usePluginData("plugin-json-rpc") as { netData?: ResponseItem[] };
+  const [ldReady, setLdReady] = useState(false);
+  const [newReferenceEnabled, setNewReferenceEnabled] = useState(false);
+
+  const metamaskNetwork = netData?.find(net => net.name === NETWORK_NAMES.metamask);
+  const metamaskMethods = metamaskNetwork?.data?.methods?.map((item) => item.name) || [];
+
+  const referencePageName = useMemo(() => {
+    const currentPath = location.pathname;
+    if (currentPath.includes(REF_PATH) && metamaskMethods.length > 0) {
+      const methodPath = currentPath.replace(REF_PATH, "").replace("/", "");
+      const page = metamaskMethods.find(name => name.toLowerCase() === methodPath && !EXEPT_METHODS.includes(name));
+      return page;
+    }
+    return false;
+  }, [location.pathname, metamaskMethods]);
+
+  useEffect(() => {
+    ldClient.waitUntilReady().then(() => {
+      setNewReferenceEnabled(ldClient.variation(REF_FF, false));
+      setLdReady(true);
+    });
+    const handleChange = (current) => {
+      setNewReferenceEnabled(current);
+    };
+    ldClient.on(`change:${REF_FF}`, handleChange);
+    return () => {
+      ldClient.off(`change:${REF_FF}`, handleChange);
+    };
+  }, []);
+
+  return (
+    <BrowserOnly>
+      {
+        () => {
+          return (
+            <>
+              {newReferenceEnabled && ldReady && referencePageName ? (
+                <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>
+                  </div>
+                </Layout>
+              ) : (
+                <Layout>{children}</Layout>
+              )}
+            </>
+          )
+        }
+      }
+    </BrowserOnly>
+  );
+}

src/theme/Layout/styles.module.css

@@ -0,0 +1,21 @@
+.pageWrapper {
+  display: flex;
+  width: 100%;
+  flex: 1 0 0%;
+}
+
+.mainContainer {
+  width: 100%;
+  padding: 20px 30px;
+}
+
+.contentWrapper {
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+@media (width <= 996px) {
+  .pageWrapper {
+    display: block;
+  }
+}