From 29638487a81166efe9ecdb7bf2fa8a560d49915c Mon Sep 17 00:00:00 2001 From: ae_atrofimov Date: Wed, 10 Jul 2024 14:45:19 +0200 Subject: [PATCH 1/4] feat(reference): act-1446 - added ff condition for reference pages --- .../ParserOpenRPC/global.module.css | 4 +- src/components/ParserOpenRPC/index.tsx | 24 ++---- src/theme/Layout/index.tsx | 77 +++++++++++++++++++ src/theme/Layout/styles.module.css | 21 +++++ 4 files changed, 106 insertions(+), 20 deletions(-) create mode 100644 src/theme/Layout/index.tsx create mode 100644 src/theme/Layout/styles.module.css diff --git a/src/components/ParserOpenRPC/global.module.css b/src/components/ParserOpenRPC/global.module.css index cbf763225ff..a64fbcc95b7 100644 --- a/src/components/ParserOpenRPC/global.module.css +++ b/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; } diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx index 20bf5c87c40..49d336e367e 100644 --- a/src/components/ParserOpenRPC/index.tsx +++ b/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) { diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx new file mode 100644 index 00000000000..dbdead2377b --- /dev/null +++ b/src/theme/Layout/index.tsx @@ -0,0 +1,77 @@ +import React, { useState, useEffect, useMemo } from "react"; +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 { trackPageViewForSegment } from "@site/src/lib/segmentAnalytics"; +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)); + trackPageViewForSegment({ + name: "Reference page", + path: location.pathname, + userExperience: page ? "B" : "A" + }) + 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 ( + <> + {newReferenceEnabled && ldReady && referencePageName ? ( + +
+ {children?.props?.children[0]?.type === "aside" && ( + <>{children.props.children[0]} + )} +
+
+ +
+
+
+ + ) : ( + {children} + )} + + ); +} diff --git a/src/theme/Layout/styles.module.css b/src/theme/Layout/styles.module.css new file mode 100644 index 00000000000..daed129489f --- /dev/null +++ b/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 <= 997px) { + .pageWrapper { + display: block; + } +} \ No newline at end of file From 371872bfac22ba403c82de85dc364297640e2a0e Mon Sep 17 00:00:00 2001 From: ae_atrofimov Date: Wed, 10 Jul 2024 15:00:01 +0200 Subject: [PATCH 2/4] feat(reference): act-1446 - fixes for build --- src/theme/Layout/index.tsx | 45 +++++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index dbdead2377b..cbfe115acce 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -1,4 +1,5 @@ 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"; @@ -55,23 +56,31 @@ export default function LayoutWrapper({ children }) { }, []); return ( - <> - {newReferenceEnabled && ldReady && referencePageName ? ( - -
- {children?.props?.children[0]?.type === "aside" && ( - <>{children.props.children[0]} - )} -
-
- -
-
-
- - ) : ( - {children} - )} - + + { + () => { + return ( + <> + {newReferenceEnabled && ldReady && referencePageName ? ( + +
+ {children?.props?.children[0]?.type === "aside" && ( + <>{children.props.children[0]} + )} +
+
+ +
+
+
+ + ) : ( + {children} + )} + + ) + } + } + ); } From 8055e241e37380eb19e4cd9bcb8783c336a4719d Mon Sep 17 00:00:00 2001 From: ae_atrofimov Date: Wed, 10 Jul 2024 15:57:53 +0200 Subject: [PATCH 3/4] feat(reference): act-1446 - minor fix --- src/theme/Layout/index.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index cbfe115acce..10714da4a0c 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -6,7 +6,6 @@ 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 { trackPageViewForSegment } from "@site/src/lib/segmentAnalytics"; import styles from "./styles.module.css"; const REF_FF = "mm-new-reference-enabled"; @@ -31,11 +30,6 @@ export default function LayoutWrapper({ children }) { 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)); - trackPageViewForSegment({ - name: "Reference page", - path: location.pathname, - userExperience: page ? "B" : "A" - }) return page; } return false; From d9cf444f6ee177401125f44429939b5e9f0a3c50 Mon Sep 17 00:00:00 2001 From: ae_atrofimov Date: Wed, 10 Jul 2024 17:31:31 +0200 Subject: [PATCH 4/4] feat(reference): act-1446 - minor style fix --- src/theme/Layout/styles.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/Layout/styles.module.css b/src/theme/Layout/styles.module.css index daed129489f..bfd9ca409a2 100644 --- a/src/theme/Layout/styles.module.css +++ b/src/theme/Layout/styles.module.css @@ -14,7 +14,7 @@ margin: 0 auto; } -@media (width <= 997px) { +@media (width <= 996px) { .pageWrapper { display: block; }