Skip to content

Commit

Permalink
Add moar analytics (#885)
Browse files Browse the repository at this point in the history 
* Add moar analytics

* comment
  • Loading branch information
@valentinoConti
valentinoConti authored Nov 8, 2024
1 parent 0593a73 commit 7fcb81b
Show file tree
Hide file tree
Showing 16 changed files with 321 additions and 69 deletions.
10 changes: 9 additions & 1 deletion src/components/atoms/Fullscreenable/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import React, { useEffect, useRef, useState } from "react";
import analytics from "src/analytics";

type FullscreenableProps = React.ComponentPropsWithoutRef<"div"> & {
children: React.ReactNode;
buttonRef: React.RefObject<HTMLDivElement>;
itemName: string;
style?: React.CSSProperties;
};

const Fullscreenable: React.FC<FullscreenableProps> = ({
children,
buttonRef,
itemName,
style,
...props
}) => {
Expand All @@ -21,6 +24,11 @@ const Fullscreenable: React.FC<FullscreenableProps> = ({
};

const handleFullscreenClick = () => {
analytics.track("fullscreen", {
selected: !isFullscreen,
selectedType: itemName,
});

if (isFullscreen || !fullscreenElemRef.current) {
document.exitFullscreen();
} else {
Expand All @@ -37,7 +45,7 @@ const Fullscreenable: React.FC<FullscreenableProps> = ({
document.removeEventListener("fullscreenchange", handleFullscreenChange);
button?.removeEventListener("click", handleFullscreenClick);
};
}, [buttonRef, isFullscreen]);
}, [buttonRef, isFullscreen, itemName]);

return (
<div
Expand Down
41 changes: 36 additions & 5 deletions src/components/molecules/CrossChainChart/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { ChainId } from "@wormhole-foundation/sdk";
import { SwapSmallVerticalIcon, GlobeIcon, FullscreenIcon } from "src/icons/generic";
import { useWindowSize } from "src/utils/hooks";
import "./styles.scss";
import analytics from "src/analytics";

interface ICsvRow {
"Target Chain": number;
Expand Down Expand Up @@ -193,7 +194,7 @@ const CrossChainChart = ({ isHomePage = false }: { isHomePage?: boolean }) => {
const fullscreenBtnRef = useRef(null);

return (
<Fullscreenable className="cross-chain" buttonRef={fullscreenBtnRef}>
<Fullscreenable className="cross-chain" buttonRef={fullscreenBtnRef} itemName="crossChainChart">
<div className="cross-chain-top">
<div className="cross-chain-top-title">
<GlobeIcon width={24} />
Expand All @@ -202,7 +203,16 @@ const CrossChainChart = ({ isHomePage = false }: { isHomePage?: boolean }) => {
<FullscreenIcon width={20} />
</div>
{isHomePage && (
<NavLink className="token-activity-title-link" to="/analytics/chains">
<NavLink
className="token-activity-title-link"
to="/analytics/chains"
onClick={() => {
analytics.track("viewMore", {
network: currentNetwork,
selected: "Cross-Chain Activity",
});
}}
>
View More
</NavLink>
)}
Expand All @@ -226,7 +236,15 @@ const CrossChainChart = ({ isHomePage = false }: { isHomePage?: boolean }) => {
ariaLabel="Select type"
className="cross-chain-options-items"
items={TYPE_LIST}
onValueChange={value => setSelectedType(value)}
onValueChange={value => {
setSelectedType(value);

analytics.track("metricSelected", {
network: currentNetwork,
selected: value,
selectedType: "crossChainChart",
});
}}
value={selectedType}
/>
) : (
Expand All @@ -237,7 +255,13 @@ const CrossChainChart = ({ isHomePage = false }: { isHomePage?: boolean }) => {
<button
aria-label="Select graphic type"
className="cross-chain-destination-button"
onClick={() => setSelectedDestination(isSources ? "destinations" : "sources")}
onClick={() => {
setSelectedDestination(isSources ? "destinations" : "sources");
analytics.track("crossChainChartDirection", {
network: currentNetwork,
selected: isSources ? "Source to Target" : "Target to Source",
});
}}
>
<SwapSmallVerticalIcon width={24} />

Expand All @@ -250,7 +274,14 @@ const CrossChainChart = ({ isHomePage = false }: { isHomePage?: boolean }) => {
<Select
name="timeRange"
value={selectedTimeRange}
onValueChange={(value: any) => setSelectedTimeRange(value)}
onValueChange={(value: any) => {
setSelectedTimeRange(value);

analytics.track("crossChainChartTimeRange", {
network: environment.network,
selected: value.label,
});
}}
menuPortalTarget={document.querySelector(".cross-chain")}
items={RANGE_LIST}
ariaLabel="Select Time Range"
Expand Down
55 changes: 44 additions & 11 deletions src/components/molecules/ProtocolsActivity/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,15 @@ const ProtocolsActivity = () => {

const [someZeroValue, setSomeZeroValue] = useState(false);
const [scaleSelected, setScaleSelectedState] = useState<"linear" | "logarithmic">("linear");
const setScaleSelected = (value: "linear" | "logarithmic") => {
const setScaleSelected = (value: "linear" | "logarithmic", track: boolean) => {
setScaleSelectedState(value);
analytics.track("scaleSelected", {
selected: value,
selectedType: "protocolsActivity",
});

if (track) {
analytics.track("scaleSelected", {
selected: value,
selectedType: "protocolsActivity",
});
}
};
const [chartSelected, setChartSelected] = useState<"area" | "bar">("area");

Expand Down Expand Up @@ -291,9 +294,9 @@ const ProtocolsActivity = () => {

setSomeZeroValue(seriesHasZeroValue);
if (seriesHasZeroValue) {
setScaleSelected("linear");
setScaleSelected("linear", false);
} else if (seriesHasNonZeroValue) {
setScaleSelected("logarithmic");
setScaleSelected("logarithmic", false);
}
}, [series]);

Expand Down Expand Up @@ -336,7 +339,11 @@ const ProtocolsActivity = () => {
const fullscreenBtnRef = useRef(null);

return (
<Fullscreenable className="protocols-activity" buttonRef={fullscreenBtnRef}>
<Fullscreenable
className="protocols-activity"
buttonRef={fullscreenBtnRef}
itemName="protocolsActivity"
>
{openFilters && <div className="chain-activity-bg" onClick={handleFiltersOpened} />}

<h3 className="protocols-activity-title">
Expand Down Expand Up @@ -393,6 +400,11 @@ const ProtocolsActivity = () => {
menuPortalStyles={{ zIndex: 100 }}
name="protocol"
onValueChange={protocol => {
analytics.track("protocolsActivityProtocol", {
network: currentNetwork,
selected: protocol.label,
});

setFilters(prevFilters => ({
...prevFilters,
appId: protocol?.value === filters.appId ? "" : protocol.value,
Expand All @@ -416,6 +428,12 @@ const ProtocolsActivity = () => {
name="timeRange"
onValueChange={timeRange => {
setSelectedTimeRange(timeRange);

analytics.track("protocolsActivityTimeRange", {
network: currentNetwork,
selected: timeRange.label,
});

setFilters(prevFilters => ({
...prevFilters,
from: timeRange.value,
Expand All @@ -429,7 +447,15 @@ const ProtocolsActivity = () => {
ariaLabel="Select metric type (volume or transfers)"
className="protocols-activity-container-top-filters-metric"
items={isMainnet ? METRIC_CHART_LIST : [METRIC_CHART_LIST[1]]}
onValueChange={value => setMetricSelected(value)}
onValueChange={value => {
setMetricSelected(value);

analytics.track("metricSelected", {
network: currentNetwork,
selected: value,
selectedType: "protocolsActivity",
});
}}
value={metricSelected}
/>

Expand All @@ -455,7 +481,14 @@ const ProtocolsActivity = () => {
ariaLabel="Select type"
className="protocols-activity-container-top-toggle-design"
items={TYPE_CHART_LIST}
onValueChange={value => setChartSelected(value)}
onValueChange={value => {
setChartSelected(value);

analytics.track("protocolsActivityChartType", {
network: currentNetwork,
selected: value,
});
}}
value={chartSelected}
/>
</div>
Expand Down Expand Up @@ -500,7 +533,7 @@ const ProtocolsActivity = () => {
ariaLabel="Select scale"
className="protocols-activity-container-chart-scale"
items={SCALE_CHART_LIST}
onValueChange={value => setScaleSelected(value)}
onValueChange={value => setScaleSelected(value, true)}
value={scaleSelected}
/>
)}
Expand Down
12 changes: 11 additions & 1 deletion src/components/molecules/ProtocolsStats/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { formatNumber } from "src/utils/number";
import { formatAppId } from "src/utils/crypto";
import { getClient } from "src/api/Client";
import "./styles.scss";
import analytics from "src/analytics";

// TODO: remove when /protocols/stats returns the correct app_id
const protocolMapping: Record<string, string> = {
Expand Down Expand Up @@ -91,7 +92,16 @@ const ProtocolsStats = ({ numberOfProtocols }: { numberOfProtocols?: number }) =
: "Protocols Stats"}

{numberOfProtocols && (
<NavLink className="protocols-stats-title-link" to="/analytics/protocols">
<NavLink
className="protocols-stats-title-link"
to="/analytics/protocols"
onClick={() => {
analytics.track("viewMore", {
network: currentNetwork,
selected: "Protocols Stats",
});
}}
>
View More
</NavLink>
)}
Expand Down
19 changes: 17 additions & 2 deletions src/components/molecules/TopAssets/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,15 @@ const TopAssets = () => {
ariaLabel="Select metric type (volume or transfers)"
className="token-activity-container-top-toggle"
items={isMainnet ? METRIC_CHART_LIST : [METRIC_CHART_LIST[1]]}
onValueChange={value => setMetricSelected(value)}
onValueChange={value => {
setMetricSelected(value);

analytics.track("metricSelected", {
network: currentNetwork,
selected: value,
selectedType: "topAssets",
});
}}
value={metricSelected}
/>

Expand All @@ -140,7 +148,14 @@ const TopAssets = () => {
className="top-assets-header-select"
items={RANGE_LIST}
name="topAssetTimeRange"
onValueChange={(value: any) => setSelectedTopAssetTimeRange(value)}
onValueChange={(value: any) => {
setSelectedTopAssetTimeRange(value);

analytics.track("topAssetsTimeRange", {
network: environment.network,
selected: value.label,
});
}}
value={selectedTopAssetTimeRange}
/>
</div>
Expand Down
10 changes: 9 additions & 1 deletion src/components/molecules/WormholeStats/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { formatNumber } from "src/utils/number";
import { getClient } from "src/api/Client";
import { InfoCircleIcon, LinkIcon } from "src/icons/generic";
import "./styles.scss";
import analytics from "src/analytics";

const RANGE_LIST: { label: string; value: "24h" | "7d" | "30d" }[] = [
{ label: "Last 24 hours", value: "24h" },
Expand Down Expand Up @@ -170,7 +171,14 @@ const WormholeStats = () => {
className="wormhole-stats-container-item-title-time-select"
items={RANGE_LIST}
name="topAssetTimeRange"
onValueChange={value => setRangeTime(value)}
onValueChange={value => {
setRangeTime(value);

analytics.track("wormholeStatsTimeRange", {
network: environment.network,
selected: value.label,
});
}}
value={{
label: (
<>
Expand Down
Loading

0 comments on commit 7fcb81b

Please sign in to comment.