From f0001dca06442b482a540c9e240af4dfcb2563b6 Mon Sep 17 00:00:00 2001 From: TrofimovAnton85 <98453427+TrofimovAnton85@users.noreply.github.com> Date: Tue, 9 Jul 2024 09:47:00 +0200 Subject: [PATCH 1/2] feat(reference): act-1447 - added capture events to reference pages (#1394) --- src/components/CodeTerminal/CodeTerminal.jsx | 10 ---- src/components/ParserOpenRPC/index.tsx | 32 ++++++++++++- src/lib/segmentAnalytics.js | 50 ++++++++++++++------ 3 files changed, 66 insertions(+), 26 deletions(-) diff --git a/src/components/CodeTerminal/CodeTerminal.jsx b/src/components/CodeTerminal/CodeTerminal.jsx index 875af4e667e..bf3efe77205 100644 --- 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/index.tsx b/src/components/ParserOpenRPC/index.tsx index 7bcdad5729b..7cd7d9f61a8 100644 --- 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"; interface ParserProps { network: NETWORK_NAMES; @@ -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,9 +88,16 @@ export default function ParserOpenRPC({ network, method }: ParserProps) { if (currentMethodData === null) return null; + const location = useLocation(); + useEffect(() => { const installed = !!(window as any)?.ethereum; setMetamaskInstalled(installed); + trackPageViewForSegment({ + name: "Reference page", + path: location.pathname, + userExperience: "new" + }) }, []); const onParamsChangeHandle = (data) => { @@ -85,6 +105,10 @@ export default function ParserOpenRPC({ network, method }: ParserProps) { setParamsData([]); } setParamsData(Object.values(data)); + trackInputChangeForSegment({ + eventName: "Request Configuration Started", + userExperience: "new" + }) } const onSubmitRequestHandle = async () => { @@ -94,6 +118,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/lib/segmentAnalytics.js b/src/lib/segmentAnalytics.js index 798c5f85907..fc47a9323e9 100644 --- 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 }), + }); + } +}; \ No newline at end of file From 2e3163ce1246c5fe09fea571fa93644ab095bfd2 Mon Sep 17 00:00:00 2001 From: Denys Nikanov <91739319+aednikanov@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:23:44 +0300 Subject: [PATCH 2/2] added fixes and improvements (#1395) --- .../InteractiveBox/fields/ConditionalField.tsx | 6 +++--- .../ParserOpenRPC/InteractiveBox/styles.module.css | 7 +++++++ .../InteractiveBox/templates/ArrayFieldTemplate.tsx | 12 ++++++++++-- .../InteractiveBox/widgets/DropdownWidget.tsx | 4 ++-- .../InteractiveBox/widgets/SelectWidget.tsx | 4 ++-- .../ParserOpenRPC/ModalDrawer/styles.module.css | 3 +-- src/css/custom.css | 6 ++++++ 7 files changed, 31 insertions(+), 11 deletions(-) diff --git a/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx b/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx index 70aa82fce1c..b008d7c4151 100644 --- 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) => {
{formData === undefined ? "" : String(formData)} - - { setIsOpened(!isOpened); }}> + { setIsOpened(!isOpened); }}> + {schema?.anyOf ? "anyOf" : "oneOf"} @@ -77,7 +77,7 @@ export const ConditionalField = (props: FieldTemplateProps) => { onClick={onDropdownOptionClick} data-value={listItem.title} > - {`${listItem.title}: ${listItem?.enum ? "enum" : listItem.type}`} + {listItem.title} ))} diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css index 5627e664e24..0d3820def48 100644 --- 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 index b0e18bf64b7..018e7928bf2 100644 --- 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 (
@@ -31,7 +37,9 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f
{JSON.stringify(formData, null, " ")}
- + {schema.type}
{value === undefined ? "" : String(value)} - - { setIsOpened(!isOpened); }}> + { setIsOpened(!isOpened); }}> + {schema.type} diff --git a/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx b/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx index 029e6b3e912..7ce49d2f520 100644 --- 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
{emptyValue ? "" : String(value)} - - { setIsOpened(!isOpened); }}> + { setIsOpened(!isOpened); }}> + {schema?.enum ? 'enum' : schema?.type} diff --git a/src/components/ParserOpenRPC/ModalDrawer/styles.module.css b/src/components/ParserOpenRPC/ModalDrawer/styles.module.css index 4fcd5412374..6453f9c8355 100644 --- 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/css/custom.css b/src/css/custom.css index 7307122adda..ff726cc9b93 100644 --- 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; + } +}