feat(reference): merged main & fixed conflicts

MetaMask · Jul 9, 2024 · fcb1f3d · fcb1f3d
2 parents e263fbc + 2e3163c
commit fcb1f3d
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 40 deletions.
diff --git a/src/components/CodeTerminal/CodeTerminal.jsx b/src/components/CodeTerminal/CodeTerminal.jsx
@@ -4,11 +4,7 @@ import TerminalViewBox from "./TerminalViewBox";
 import ControlPanel from "./ControlPanel";
 import { INFO_MSG } from "./AlertMsg";
 import MessageBox from "@site/src/components/MessageBox/MessageBox";
-import Select from 'react-dropdown-select';
 import { INIT_REQ_SET } from "@site/src/lib/constants";
-import {
-  trackClickForSegmentAnalytics
-} from "@site/src/lib/segmentAnalytics";
 import Heading from '@theme/Heading'
 
 const CodeTerminal = () => {
@@ -96,12 +92,6 @@ const CodeTerminal = () => {
         method: "GET"
       };
     }
-    trackClickForSegmentAnalytics({
-      type: "Submit Button",
-      clickText: "Send Request",
-      location: "https://docs.infura.io/",
-      userId: user.id,
-    });
     try {
       const res = await fetch(URL, params);
       if (res.ok) {

diff --git a/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx b/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx
@@ -63,8 +63,8 @@ export const ConditionalField = (props: FieldTemplateProps) => {
         <div className={styles.tableColumn}>
           <div className={clsx(styles.tableValueRow, styles.tableValueRowPadding)}>
             {formData === undefined ? "" : String(formData)}
-            <span className={styles.tableColumnType}>
-              <span className={styles.dropdown} onClick={() => { setIsOpened(!isOpened); }}>
+            <span className={clsx(styles.tableColumnType, styles.tableColumnTypeDropdown)} onClick={() => { setIsOpened(!isOpened); }}>
+              <span className={styles.dropdown}>
                 {schema?.anyOf ? "anyOf" : "oneOf"}
                 <span className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
                 <span className={clsx(styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
@@ -77,7 +77,7 @@ export const ConditionalField = (props: FieldTemplateProps) => {
                     onClick={onDropdownOptionClick}
                     data-value={listItem.title}
                   >
-                    {`${listItem.title}: ${listItem?.enum ? "enum" : listItem.type}`}
+                    {listItem.title}
                   </li>
                 ))}
               </ul>

diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css
@@ -61,6 +61,13 @@
   line-height: 24px;
   font-size: 14px;
 }
+.tableColumnTypeDropdown {
+  width: 100%;
+  justify-content: flex-end;
+}
+.tableColumnTypeDropdown:hover {
+  cursor: pointer;
+}
 .tableLabelIconError {
   width: 11px;
   height: 11px;

diff --git a/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx
@@ -6,7 +6,7 @@ import styles from "@site/src/components/ParserOpenRPC/InteractiveBox/styles.mod
 import clsx from "clsx";
 import { ParserOpenRPCContext } from "@site/src/components/ParserOpenRPC";
 
-export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, formData, formContext }: ArrayFieldTemplateProps) => {
+export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, formData }: ArrayFieldTemplateProps) => {
   const [isComplexArrayEditView, setIsComplexArrayEditView] = useState(false);
   const { setIsDrawerContentFixed, setDrawerLabel, isComplexTypeView, setIsComplexTypeView } = useContext(ParserOpenRPCContext);
   const { collapsed, toggleCollapsed } = useCollapsible({ initialState: true });
@@ -19,6 +19,12 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f
     setIsComplexArrayEditView(true);
     setIsComplexTypeView(true);
   }
+  const addSimpleArray = () => {
+    toggleCollapsed();
+    if(collapsed && formData?.length === 0) {
+      onAddClick();
+    }
+  }
 
   return (
     <div>
@@ -31,7 +37,9 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f
             <div className={styles.arrayFormDataWrap}>
               {JSON.stringify(formData, null, " ")}
             </div>
-            <span className={styles.tableColumnType} onClick={isSimpleArray ? toggleCollapsed : addComplexArray}>
+            <span
+              className={clsx(styles.tableColumnType, styles.tableColumnTypeDropdown)}
+              onClick={isSimpleArray ? addSimpleArray : addComplexArray}>
               <span className={styles.dropdown}>
                 {schema.type}
                 <span className={

diff --git a/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget.tsx b/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget.tsx
@@ -14,8 +14,8 @@ export const DropdownWidget = ({ name, value, onChange, schema, options }: Widge
       <div className={styles.tableColumn}>
         <div className={clsx(styles.tableValueRow, styles.tableValueRowPadding)}>
           {value === undefined ? "" : String(value)}
-          <span className={styles.tableColumnType}>
-            <span className={styles.dropdown} onClick={() => { setIsOpened(!isOpened); }}>
+          <span className={clsx(styles.tableColumnType, styles.tableColumnTypeDropdown)} onClick={() => { setIsOpened(!isOpened); }}>
+            <span className={styles.dropdown}>
               {schema.type}
               <span className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
               <span className={clsx(styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>

diff --git a/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx b/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx
@@ -15,8 +15,8 @@ export const SelectWidget = ({ value, onChange, schema, options, label }: Widget
       <div className={styles.tableColumn}>
         <div className={clsx(styles.tableValueRow, styles.tableValueRowPadding)}>
           {emptyValue ? "" : String(value)}
-          <span className={styles.tableColumnType}>
-            <span className={styles.dropdown} onClick={() => { setIsOpened(!isOpened); }}>
+          <span className={clsx(styles.tableColumnType, styles.tableColumnTypeDropdown)} onClick={() => { setIsOpened(!isOpened); }}>
+            <span className={styles.dropdown}>
               {schema?.enum ? 'enum' : schema?.type}
               <span className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
               <span className={clsx(styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>

diff --git a/src/components/ParserOpenRPC/ModalDrawer/styles.module.css b/src/components/ParserOpenRPC/ModalDrawer/styles.module.css
@@ -12,7 +12,6 @@
   transition-property: 'transform', 'opacity';
   transition-duration: .4s;
   transition-timing-function: ease;
-  box-shadow: 0 2px 40px 0 rgba(0, 0, 0, .1);
   overflow: hidden;
   background-color: #292A36;
 }
@@ -97,7 +96,7 @@
   overflow-y: hidden;
 }
 
-@media (width <= 996px) {
+@media (width <= 1200px) {
   .modalContainer {
     position: fixed;
     left: 0;

diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx
@@ -11,6 +11,12 @@ 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 { useLocation } from "@docusaurus/router";
 import { useSyncProviders } from "@site/src/hooks/useSyncProviders.ts"
 
 interface ParserProps {
@@ -36,7 +42,14 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
   const [drawerLabel, setDrawerLabel] = useState(null);
   const [isComplexTypeView, setIsComplexTypeView] = useState(false);
   const { colorMode } = useColorMode();
-  const openModal = () => setModalOpen(true);
+  const openModal = () => {
+    setModalOpen(true);
+    trackClickForSegment({
+      eventName: "Customize Request",
+      clickType: "Customize Request",
+      userExperience: "new"
+    })
+  };
   const closeModal = () => setModalOpen(false);
 
   const { netData } = usePluginData("plugin-json-rpc") as { netData?: ResponseItem[] };
@@ -75,7 +88,9 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
 
   if (currentMethodData === null) return null;
 
-  const [metamaskProviders, setMetamaskProviders] = useState([]);
+  const location = useLocation();
+
+  // const [metamaskProviders, setMetamaskProviders] = useState([]);
   const [selectedWallet, setSelectedWallet] = useState(0);
   const providers = useSyncProviders();
 
@@ -84,15 +99,26 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
   }
 
   useEffect(() => {
-    const isMetamaskProviders = providers.filter(pr => pr?.info?.name?.includes("MetaMask"));
-    setMetamaskProviders([...isMetamaskProviders]);
+    trackPageViewForSegment({
+      name: "Reference page",
+      path: location.pathname,
+      userExperience: "new"
+    })
+  }, []);
+
+  const metamaskProviders = useMemo(() => {
+    return providers.filter(pr => pr?.info?.name?.includes("MetaMask"));
   }, [providers]);
 
   const onParamsChangeHandle = (data) => {
     if (typeof data !== 'object' || data === null || Object.keys(data).length === 0) {
       setParamsData([]);
     }
     setParamsData(Object.values(data));
+    trackInputChangeForSegment({
+      eventName: "Request Configuration Started",
+      userExperience: "new"
+    })
   }
 
   const onSubmitRequestHandle = async () => {
@@ -103,6 +129,12 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
         params: paramsData
       })
       setReqResult(response);
+      trackClickForSegment({
+        eventName: "Request Sent",
+        clickType: "Request Sent",
+        userExperience: "new",
+        ...(response?.code && { responseStatus: response.code })
+      })
     } catch (e) {
       setReqResult(e);
     }

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -328,3 +328,9 @@ button:hover {
 [data-theme="dark"] .tippy-popper[x-placement^=top] [x-arrow] {
   border-top-color: rgba(255, 255, 255, 1);
 }
+
+@media (max-width: 1200px) {
+  .navbar__item {
+    font-size: 14px;
+  }
+}
diff --git a/src/lib/segmentAnalytics.js b/src/lib/segmentAnalytics.js
@@ -1,25 +1,45 @@
-export const trackClickForSegmentAnalytics = ({
-  type,
-  clickUrl,
-  clickText,
-  location,
-  userId,
+export const trackPageViewForSegment = ({
+  name,
+  path,
+  userExperience
 }) => {
   if (window.analytics) {
-    window.analytics.track(`CTA ${type} Clicked`, {
-      ...(clickUrl && { click_url: clickUrl }),
-      ...(clickText && { click_text: clickText }),
-      ...(location && { location }),
-      ...(userId && { user_id: userId }),
+    window.analytics.page("Page viewed", name, {
+      ...(path && { path: path }),
+      ...(userExperience && { user_experience: userExperience })
     });
   }
 };
 
-export const trackPageForSegmentAnalytics = ({ name, path, userId }) => {
+export const trackClickForSegment = ({
+  eventName,
+  clickType,
+  userExperience,
+  responseStatus,
+  responseMsg,
+  timestamp,
+}) => {
   if (window.analytics) {
-    window.analytics.page("Page view", name, {
-      ...(path && { path: path }),
-      ...(userId && { userId: userId }),
+    window.analytics.track(`CTA ${clickType} Clicked`, {
+      ...(eventName && { event_name: eventName }),
+      ...(userExperience && { user_experience: userExperience }),
+      ...(responseStatus && { response_status: responseStatus }),
+      ...(responseMsg && { response_msg: responseMsg }),
+      ...(timestamp && { timestamp: timestamp }),
     });
   }
 };
+
+export const trackInputChangeForSegment = ({
+  eventName,
+  userExperience,
+  timestamp,
+}) => {
+  if (window.analytics) {
+    window.analytics.track(`Input changed`, {
+      ...(eventName && { event_name: eventName }),
+      ...(userExperience && { user_experience: userExperience }),
+      ...(timestamp && { timestamp: timestamp }),
+    });
+  }
+};