diff --git a/packages/next-common/components/statistics/referenda/delegationStats.jsx b/packages/next-common/components/statistics/referenda/delegationStats.jsx
new file mode 100644
index 0000000000..1a930648a5
--- /dev/null
+++ b/packages/next-common/components/statistics/referenda/delegationStats.jsx
@@ -0,0 +1,56 @@
+import DelegateeSummary from "next-common/components/statistics/referenda/delegateeSummary";
+import TrackDelegationSummary from "next-common/components/statistics/referenda/trackDelegationSummary";
+import DelegatedAddressSummary from "next-common/components/statistics/referenda/delegatedAddressSummary";
+import { cn } from "next-common/utils";
+import { useNavCollapsed } from "next-common/context/nav";
+import Summary from "./delegationSummary";
+import TrackSelect from "./trackSelect";
+import { useState } from "react";
+import TrackDelegationList from "./trackDelegationList";
+
+export default function ReferendaDelegationStats({
+ tracksStats,
+ delegatee,
+ delegationSummary,
+}) {
+ const [navCollapsed] = useNavCollapsed();
+ const [selectedTrackId, setSelectedTrackId] = useState("");
+
+ return (
+ <>
+
_div]:min-w-[calc(50%-16px)] [&_>_div]:flex-1",
+ !navCollapsed ? "max-md:flex-col" : "max-sm:flex-col",
+ )}
+ >
+
+
+
+
+
+
+ {selectedTrackId ? (
+
+ ) : (
+ <>
+
+
+
+
+ >
+ )}
+ >
+ );
+}
diff --git a/packages/next-common/components/statistics/referenda/delegationSummary.js b/packages/next-common/components/statistics/referenda/delegationSummary.js
new file mode 100644
index 0000000000..e1b00a6997
--- /dev/null
+++ b/packages/next-common/components/statistics/referenda/delegationSummary.js
@@ -0,0 +1,34 @@
+import { SecondaryCard } from "next-common/components/styled/containers/secondaryCard";
+import Summary from "next-common/components/summary";
+import ValueDisplay from "next-common/components/valueDisplay";
+import { useChainSettings } from "next-common/context/chain";
+import { toPrecision } from "next-common/utils";
+
+export default function DelegationSummary({ delegator, delegatee, capital }) {
+ const { symbol, decimals } = useChainSettings();
+ return (
+
+
+ ),
+ },
+ ]}
+ />
+
+ );
+}
diff --git a/packages/next-common/components/statistics/referenda/referendaDelegatee/index.js b/packages/next-common/components/statistics/referenda/referendaDelegatee/index.js
index 44ad381063..d6e18ee0b9 100644
--- a/packages/next-common/components/statistics/referenda/referendaDelegatee/index.js
+++ b/packages/next-common/components/statistics/referenda/referendaDelegatee/index.js
@@ -3,7 +3,6 @@ import useColumns from "next-common/components/styledList/useColumns";
import nextApi from "next-common/services/nextApi";
import Pagination from "next-common/components/pagination";
import useStateChanged from "next-common/hooks/useStateChanged";
-import EnterSVG from "next-common/assets/imgs/icons/enter.svg";
import Flex from "next-common/components/styled/flex";
import BeenDelegatedListPopup from "../beenDelegatedPopup";
import { useChainSettings } from "next-common/context/chain";
@@ -14,6 +13,7 @@ import { startCase } from "lodash-es";
import AddressUser from "next-common/components/user/addressUser";
import DataList from "next-common/components/dataList";
import ScrollerX from "next-common/components/styled/containers/scrollerX";
+import DetailButton from "next-common/components/detailButton";
function getSortParams(sortedColumn) {
if (!sortedColumn) {
@@ -89,7 +89,7 @@ export default function ReferendaDelegatee({ delegatee }) {
},
{
name: "",
- style: { textAlign: "right", maxWidth: "40px", minWidth: "40px" },
+ style: { textAlign: "right", maxWidth: "80px", minWidth: "80px" },
},
],
"VOTES",
@@ -148,9 +148,14 @@ export default function ReferendaDelegatee({ delegatee }) {
value={toPrecision(item.votes || 0, decimals)}
symbol={voteSymbol || symbol}
/>,
-
-
- ,
+
+ {
+ setDelegateeData(item);
+ setShowPopup(true);
+ }}
+ />
+
,
];
row.onClick = () => {
diff --git a/packages/next-common/components/statistics/referenda/trackDelegationList.jsx b/packages/next-common/components/statistics/referenda/trackDelegationList.jsx
new file mode 100644
index 0000000000..e87418254a
--- /dev/null
+++ b/packages/next-common/components/statistics/referenda/trackDelegationList.jsx
@@ -0,0 +1,62 @@
+import nextApi from "next-common/services/nextApi";
+import { useEffect, useState } from "react";
+import DemocracyStatistics from "../democracy";
+import Loading from "next-common/components/loading";
+import { EmptyList } from "next-common/utils/constants";
+
+export default function TrackDelegationList({ trackId }) {
+ const [isLoading, setIsLoading] = useState(false);
+ const [data, setData] = useState({
+ delegatee: EmptyList,
+ delegators: EmptyList,
+ trackSummary: {},
+ });
+
+ useEffect(() => {
+ setIsLoading(true);
+ Promise.all([
+ nextApi.fetch(`referenda/tracks/${trackId}/delegatee`, {
+ sort: JSON.stringify(["delegatedVotes", "desc"]),
+ pageSize: 25,
+ }),
+ nextApi.fetch(`referenda/tracks/${trackId}/delegators`, {
+ sort: JSON.stringify(["votes", "desc"]),
+ pageSize: 25,
+ }),
+ nextApi.fetch(`referenda/tracks/${trackId}/summary`),
+ ])
+ .then(
+ ([
+ { result: delegatee },
+ { result: delegators },
+ { result: trackSummary },
+ ]) => {
+ setData({
+ delegatee: delegatee ?? EmptyList,
+ delegators: delegators ?? EmptyList,
+ trackSummary: trackSummary ?? {},
+ });
+ },
+ )
+ .finally(() => {
+ setIsLoading(false);
+ });
+ }, [trackId]);
+
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/packages/next-common/components/statistics/referenda/trackSelect.js b/packages/next-common/components/statistics/referenda/trackSelect.js
new file mode 100644
index 0000000000..d9e0bd812e
--- /dev/null
+++ b/packages/next-common/components/statistics/referenda/trackSelect.js
@@ -0,0 +1,35 @@
+import Select from "next-common/components/select";
+import { usePageProps } from "next-common/context/page";
+import { useMemo } from "react";
+import { startCase } from "lodash-es";
+
+export default function TrackSelect({ selectedTrackId, setSelectedTrackId }) {
+ const { tracks } = usePageProps();
+
+ const options = useMemo(
+ () => [
+ { label: "All Tracks", value: "" },
+ { divider: true },
+ ...tracks.map((track) => ({
+ label: (
+
+ [{track.id}] {startCase(track.name)}
+
+ ),
+ value: track.id.toString(),
+ })),
+ ],
+ [tracks],
+ );
+
+ return (
+