Offchain votes choices

apps/api/src/controllers/votes/offchainVotes.integration.test.ts

@@ -22,7 +22,7 @@ const VOTER = "0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
 const FULL_VOTE_ITEM = {
   voter: VOTER,
   proposalId: "proposal-1",
-  choice: { "1": 1 },
+  choice: ["1"],
   vp: 100,
   reason: "",
   created: 1700000000,

apps/api/src/mappers/votes/offchainVotes.ts

@@ -44,12 +44,13 @@ export const OffchainVoteChoiceSchema = z
     z
       .number()
       .int()
-      .transform((val) => [val]),
-    z.array(z.number().int()),
+      .transform((val) => [val.toString()]),
+    z.array(z.string()),
+    z.record(z.string(), z.number()).transform((val) => Object.keys(val)),
   ])
   .openapi("SnapshotVoteChoice", {
     type: "array",
-    items: { type: "integer", nullable: false },
+    items: { type: "string", nullable: false },
   });
 
 export const OffchainVoteResponseSchema = z

apps/dashboard/.storybook/main.ts

@@ -39,6 +39,14 @@ const config: StorybookConfig = {
       "@apollo/client": dirname(
         require.resolve("@apollo/client/package.json"),
       ),
+      "@anticapture/graphql-client$": resolve(
+        __dirname,
+        "../../../packages/graphql-client/generated/hooks.ts",
+      ),
+      "@anticapture/graphql-client/hooks": resolve(
+        __dirname,
+        "../../../packages/graphql-client/generated/hooks.ts",
+      ),
     };
     return config;
   },

apps/dashboard/features/governance/components/proposal-overview/OffchainVotesContent.tsx

@@ -1,24 +1,26 @@
 "use client";
 
-import type { GetOffchainVotesByProposalIdQuery } from "@anticapture/graphql-client";
-import { useGetOffchainVotesByProposalIdQuery } from "@anticapture/graphql-client/hooks";
+import type { OffchainVote } from "@anticapture/graphql-client";
+import {
+  OrderDirection,
+  QueryInput_VotesOffchainByProposalId_OrderBy,
+  useGetOffchainVotesByProposalIdQuery,
+} from "@anticapture/graphql-client/hooks";
 import type { ColumnDef } from "@tanstack/react-table";
 import { CheckCircle2, CircleMinus, Inbox, XCircle } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Address } from "viem";
 
 import { VotesTable } from "@/features/governance/components/proposal-overview/VotesTable";
-import { BlankSlate, SkeletonRow } from "@/shared/components";
+import { BlankSlate } from "@/shared/components/design-system/blank-slate/BlankSlate";
+import { Button } from "@/shared/components/design-system/buttons/button/Button";
+import { SkeletonRow } from "@/shared/components/skeletons/SkeletonRow";
 import { EnsAvatar } from "@/shared/components/design-system/avatars/ens-avatar/EnsAvatar";
+import { ArrowState, ArrowUpDown } from "@/shared/components/icons";
 import type { DaoIdEnum } from "@/shared/types/daos";
-import { formatNumberUserReadable } from "@/shared/utils";
+import { formatNumberUserReadable } from "@/shared/utils/formatNumberUserReadable";
 import { getAuthHeaders } from "@/shared/utils/server-utils";
-
-type OffchainVoteItem = NonNullable<
-  NonNullable<
-    GetOffchainVotesByProposalIdQuery["votesOffchainByProposalId"]
-  >["items"][number]
->;
+import { CopyAndPasteButton } from "@/shared/components/buttons/CopyAndPasteButton";
 
 const LOADING_ROW = "__LOADING_ROW__";
 
@@ -63,9 +65,42 @@ export const OffchainVotesContent = ({
 }: OffchainVotesContentProps) => {
   const loadingRowRef = useRef<HTMLTableRowElement>(null);
 
+  const [orderBy, setOrderBy] =
+    useState<QueryInput_VotesOffchainByProposalId_OrderBy>(
+      QueryInput_VotesOffchainByProposalId_OrderBy.Timestamp,
+    );
+  const [orderDirection, setOrderDirection] = useState<OrderDirection>(
+    OrderDirection.Desc,
+  );
+
+  const handleSort = useCallback(
+    (field: QueryInput_VotesOffchainByProposalId_OrderBy) => {
+      if (orderBy === field) {
+        setOrderDirection((prev) =>
+          prev === OrderDirection.Asc
+            ? OrderDirection.Desc
+            : OrderDirection.Asc,
+        );
+      } else {
+        setOrderBy(field);
+        setOrderDirection(OrderDirection.Desc);
+      }
+    },
+    [orderBy],
+  );
+
   const { data, loading, error, fetchMore } =
     useGetOffchainVotesByProposalIdQuery({
-      variables: { id: proposalId, limit: 10, skip: 0 },
+      variables: {
+        id: proposalId,
+        limit: 10,
+        skip: 0,
+        fromDate: null,
+        toDate: null,
+        voterAddresses: null,
+        orderBy,
+        orderDirection,
+      },
       context: {
         headers: {
           "anticapture-dao-id": daoId,
@@ -78,7 +113,7 @@ export const OffchainVotesContent = ({
   const votes = useMemo(
     () =>
       (data?.votesOffchainByProposalId?.items ?? []).filter(
-        (vote): vote is OffchainVoteItem => vote !== null,
+        (vote): vote is OffchainVote => vote !== null,
       ),
     [data],
   );
@@ -116,7 +151,9 @@ export const OffchainVotesContent = ({
   }, [hasNextPage, loading, loadMore]);
 
   const tableData = useMemo(() => {
-    const rows: (OffchainVoteItem & { isSubRow?: boolean })[] = [];
+    const rows: (Omit<OffchainVote, "proposalId" | "proposalTitle"> & {
+      isSubRow?: boolean;
+    })[] = [];
 
     votes.forEach((vote) => {
       rows.push(vote);
@@ -142,10 +179,10 @@ export const OffchainVotesContent = ({
       });
     }
 
-    return rows as OffchainVoteItem[];
+    return rows as OffchainVote[];
   }, [votes, hasNextPage, loading]);
 
-  const columns: ColumnDef<OffchainVoteItem>[] = useMemo(
+  const columns: ColumnDef<OffchainVote>[] = useMemo(
     () => [
       {
         accessorKey: "voter",
@@ -199,6 +236,11 @@ export const OffchainVotesContent = ({
                 variant="rounded"
                 showName={true}
                 isDashed={true}
+              />{" "}
+              <CopyAndPasteButton
+                textToCopy={voter}
+                className="text-secondary hover:text-primary ml-2 inline-flex p-1 align-middle transition-colors"
+                iconSize="md"
               />
             </div>
           );
@@ -238,9 +280,27 @@ export const OffchainVotesContent = ({
         accessorKey: "created",
         size: 120,
         header: () => (
-          <div className="text-table-header flex h-8 w-full items-center justify-start px-2">
-            <p>Date</p>
-          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-secondary w-full justify-start"
+            onClick={() =>
+              handleSort(QueryInput_VotesOffchainByProposalId_OrderBy.Timestamp)
+            }
+          >
+            <h4 className="text-table-header whitespace-nowrap">Date</h4>
+            <ArrowUpDown
+              props={{ className: "size-4 ml-1" }}
+              activeState={
+                orderBy ===
+                QueryInput_VotesOffchainByProposalId_OrderBy.Timestamp
+                  ? orderDirection === OrderDirection.Asc
+                    ? ArrowState.UP
+                    : ArrowState.DOWN
+                  : ArrowState.DEFAULT
+              }
+            />
+          </Button>
         ),
         cell: ({ row }) => {
           const voter = row.getValue("voter") as string;
@@ -284,9 +344,31 @@ export const OffchainVotesContent = ({
         accessorKey: "vp",
         size: 160,
         header: () => (
-          <div className="text-table-header flex h-8 w-full items-center justify-start px-2">
-            <p>Voting Power</p>
-          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-secondary w-full justify-start"
+            onClick={() =>
+              handleSort(
+                QueryInput_VotesOffchainByProposalId_OrderBy.VotingPower,
+              )
+            }
+          >
+            <h4 className="text-table-header whitespace-nowrap">
+              Voting Power
+            </h4>
+            <ArrowUpDown
+              props={{ className: "size-4 ml-1" }}
+              activeState={
+                orderBy ===
+                QueryInput_VotesOffchainByProposalId_OrderBy.VotingPower
+                  ? orderDirection === OrderDirection.Asc
+                    ? ArrowState.UP
+                    : ArrowState.DOWN
+                  : ArrowState.DEFAULT
+              }
+            />
+          </Button>
         ),
         cell: ({ row }) => {
           const voter = row.getValue("voter") as string;
@@ -316,7 +398,7 @@ export const OffchainVotesContent = ({
         },
       },
     ],
-    [totalVotingPower, choices],
+    [totalVotingPower, choices, orderBy, orderDirection, handleSort],
   );
 
   if (error) return <div>Error: {error.message}</div>;
@@ -326,7 +408,7 @@ export const OffchainVotesContent = ({
       <div className="w-full lg:p-4">
         <VotesTable
           columns={columns}
-          data={Array.from({ length: 7 }, () => ({}) as OffchainVoteItem)}
+          data={Array.from({ length: 7 }, () => ({}) as OffchainVote)}
         />
       </div>
     );

apps/dashboard/package.json

@@ -11,7 +11,7 @@
     "test": "jest",
     "format": "prettier --write .",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "build-storybook": "pnpm --filter @anticapture/graphql-client codegen && storybook build",
     "clean": "rm -rf node_modules .next out build coverage storybook-static *.tsbuildinfo *storybook.log",
     "typecheck": "tsc --noEmit"
   },

packages/graphql-client/documents/governance/offchainProposals.graphql

@@ -58,19 +58,3 @@ query GetOffchainProposal($id: String!) {
   }
 }
 
-query GetOffchainVotesByProposalId(
-  $id: String!
-  $skip: Int
-  $limit: Int = 10
-) {
-  votesOffchainByProposalId(id: $id, skip: $skip, limit: $limit) {
-    items {
-      voter
-      choice
-      vp
-      reason
-      created
-    }
-    totalCount
-  }
-}

packages/graphql-client/documents/governance/offchainVotes.graphql

@@ -0,0 +1,32 @@
+query GetOffchainVotesByProposalId(
+  $id: String!
+  $fromDate: Int
+  $limit: Int
+  $orderBy: queryInput_votesOffchainByProposalId_orderBy = timestamp
+  $orderDirection: OrderDirection = asc
+  $skip: Int
+  $toDate: Int
+  $voterAddresses: [String]
+) {
+  votesOffchainByProposalId(
+    fromDate: $fromDate
+    limit: $limit
+    orderBy: $orderBy
+    orderDirection: $orderDirection
+    toDate: $toDate
+    voterAddresses: $voterAddresses
+    id: $id
+    skip: $skip
+  ) {
+    totalCount
+    items {
+      choice
+      created
+      proposalId
+      proposalTitle
+      reason
+      voter
+      vp
+    }
+  }
+}

turbo.json

@@ -37,9 +37,12 @@
       "outputs": ["dist/**", ".next/**"]
     },
     "storybook": {
-      "outputs": ["dist/**"]
+      "dependsOn": ["@anticapture/graphql-client#codegen"],
+      "persistent": true,
+      "cache": false
     },
     "build-storybook": {
+      "dependsOn": ["@anticapture/graphql-client#codegen"],
       "outputs": ["storybook-static/**"]
     },
     "start": {