Merge branch 'dev' into feat/ens-in-evidence

Author: alcercu

web/src/components/NumberDisplay.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 
 import { Tooltip } from "@kleros/ui-components-library";
+
+import { commify } from "utils/commify";
+
 interface INumberDisplay {
  value: string | number;
  unit?: string;
@@ -31,10 +34,11 @@ const NumberDisplay: React.FC<INumberDisplay> = ({
  isCurrency = false,
 }) => {
  const parsedValue = Number(value);
- const formattedValue = getFormattedValue(parsedValue, decimals);
+ const formattedValue = commify(getFormattedValue(parsedValue, decimals));
  const tooltipValue = isCurrency ? `${unit} ${value}` : `${value} ${unit}`;
  const displayUnit = showUnitInDisplay ? unit : "";
  const displayValue = isCurrency ? `${displayUnit} ${formattedValue}` : `${formattedValue} ${displayUnit}`;
+
  return (
  <Tooltip small text={tooltipValue} place={place}>
  {displayValue}

web/src/hooks/queries/useCasesQuery.ts

@@ -3,6 +3,7 @@ import { Address } from "viem";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 import { isUndefined } from "utils/index";
+import { sanitizeFilter } from "utils/sanitizeFilter";
 
 import { graphql } from "src/graphql";
 import {
@@ -71,38 +72,39 @@ const myCasesQueryWhere = graphql(`
 
 export const useCasesQuery = (skip = 0, first = 3, where?: Dispute_Filter, sortOrder?: OrderDirection) => {
  const { graphqlBatcher } = useGraphqlBatcher();
+ const sanitizedWhere = sanitizeFilter(where);
 
  return useQuery<CasesPageQuery>({
- queryKey: [`useCasesQuery`, skip, where, sortOrder, first],
+ queryKey: [`useCasesQuery`, skip, sanitizedWhere, sortOrder, first],
  queryFn: async () =>
  await graphqlBatcher.fetch({
  id: crypto.randomUUID(),
- document: isUndefined(where) ? casesQuery : casesQueryWhere,
+ document: isUndefined(sanitizedWhere) ? casesQuery : casesQueryWhere,
  variables: {
  first,
  skip,
- where,
+ where: sanitizedWhere,
  orderDirection: sortOrder ?? "desc",
  },
  }),
  });
 };
 
 export const useMyCasesQuery = (user?: Address, skip = 0, where?: Dispute_Filter, sortOrder?: OrderDirection) => {
- const isEnabled = !isUndefined(user);
  const { graphqlBatcher } = useGraphqlBatcher();
+ const sanitizedWhere = sanitizeFilter(where);
 
  return useQuery<MyCasesQuery>({
- queryKey: [`useMyCasesQuery`, user, skip, where, sortOrder],
- enabled: isEnabled,
+ queryKey: ["useMyCasesQuery", user, skip, sanitizedWhere, sortOrder],
+ enabled: !isUndefined(user),
  queryFn: async () =>
  await graphqlBatcher.fetch({
  id: crypto.randomUUID(),
- document: isUndefined(where) ? myCasesQuery : myCasesQueryWhere,
+ document: isUndefined(sanitizedWhere) ? myCasesQuery : myCasesQueryWhere,
  variables: {
  skip,
  id: user?.toLowerCase(),
- where,
+ where: sanitizedWhere,
  orderDirection: sortOrder ?? "desc",
  },
  }),

web/src/hooks/queries/useUser.ts

@@ -3,6 +3,7 @@ import { Address } from "viem";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
+import { sanitizeFilter } from "utils/sanitizeFilter";
 import { STALE_TIME } from "src/consts";
 import { graphql } from "src/graphql";
 import { UserQuery, Dispute_Filter, UserDisputeFilterQuery, UserDetailsFragment } from "src/graphql/graphql";
@@ -52,19 +53,20 @@ const userQueryDisputeFilter = graphql(`
 `);
 
 export const useUserQuery = (address?: Address, where?: Dispute_Filter) => {
+ const sanitizedWhere = sanitizeFilter(where);
  const isEnabled = address !== undefined;
- const query = where ? userQueryDisputeFilter : userQuery;
+ const query = sanitizedWhere ? userQueryDisputeFilter : userQuery;
  const { graphqlBatcher } = useGraphqlBatcher();
 
  return useQuery<UserQuery | UserDisputeFilterQuery>({
- queryKey: [`userQuery${address?.toLowerCase()}`],
+ queryKey: ["userQuery", address?.toLowerCase(), sanitizedWhere],
  enabled: isEnabled,
  staleTime: STALE_TIME,
  queryFn: async () =>
  await graphqlBatcher.fetch({
  id: crypto.randomUUID(),
  document: query,
- variables: { address: address?.toLowerCase(), where },
+ variables: { address: address?.toLowerCase(), where: sanitizedWhere },
  }),
  });
 };

web/src/pages/Profile/index.tsx

@@ -11,7 +11,7 @@ import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 import { DisputeDetailsFragment, useMyCasesQuery } from "queries/useCasesQuery";
 import { useUserQuery } from "queries/useUser";
-import { OrderDirection } from "src/graphql/graphql";
+import { Dispute_Filter, OrderDirection, UserDetailsFragment } from "src/graphql/graphql";
 
 import CasesDisplay from "components/CasesDisplay";
 import ConnectWallet from "components/ConnectWallet";
@@ -50,6 +50,33 @@ const ConnectWalletContainer = styled.div`
  color: ${({ theme }) => theme.primaryText};
 `;
 
+const calculateStats = (user: UserDetailsFragment, filter: Dispute_Filter) => {
+ const toInt = (v) => Number(v) || 0;
+ let totalCases, ruledCases;
+
+ if (!user) {
+ totalCases = 0;
+ ruledCases = 0;
+ } else if (filter?.period === "appeal") {
+ totalCases = toInt(user.totalAppealingDisputes);
+ ruledCases = 0;
+ } else if (filter?.ruled === true) {
+ totalCases = toInt(user.totalResolvedDisputes);
+ ruledCases = totalCases;
+ } else if (filter?.ruled === false) {
+ totalCases = toInt(user.disputes?.length);
+ ruledCases = 0;
+ } else {
+ totalCases = toInt(user.disputes?.length);
+ ruledCases = toInt(user.totalResolvedDisputes);
+ }
+
+ return {
+ totalCases,
+ ruledCases,
+ };
+};
+
 const Profile: React.FC = () => {
  const { isConnected, address: connectedAddress } = useAccount();
  const { page, order, filter } = useParams();
@@ -69,8 +96,10 @@ const Profile: React.FC = () => {
  order === "asc" ? OrderDirection.Asc : OrderDirection.Desc
  );
  const { data: userData } = useUserQuery(addressToQuery, decodedFilter);
- const totalCases = userData?.user?.disputes.length;
- const totalResolvedCases = parseInt(userData?.user?.totalResolvedDisputes);
+ const { totalCases, ruledCases: totalResolvedCases } = useMemo(
+ () => calculateStats(userData?.user, decodedFilter),
+ [userData?.user, decodedFilter]
+ );
  const totalPages = useMemo(
  () => (!isUndefined(totalCases) ? Math.ceil(totalCases / casesPerPage) : 1),
  [totalCases, casesPerPage]

web/src/utils/sanitizeFilter.ts

@@ -0,0 +1,5 @@
+export const sanitizeFilter = <T extends Record<string, any>>(f?: T) => {
+ if (!f) return undefined as unknown as T;
+ const cleaned = Object.fromEntries(Object.entries(f).filter(([_, v]) => !(Array.isArray(v) && v.length === 0)));
+ return Object.keys(cleaned).length ? (cleaned as T) : undefined;
+};