Feat(web)/case cards indicators

subgraph/core/schema.graphql

@@ -305,6 +305,7 @@ type ClassicContribution implements Contribution @entity {
 
   localRound: ClassicRound!
   amount: BigInt!
+  rewardAmount: BigInt
   choice: BigInt!
   rewardWithdrawn: Boolean!
 }

subgraph/core/src/DisputeKitClassic.ts

@@ -126,5 +126,6 @@ export function handleWithdrawal(event: Withdrawal): void {
   const contribution = ensureClassicContributionFromEvent(event);
   if (!contribution) return;
   contribution.rewardWithdrawn = true;
+  contribution.rewardAmount = event.params._amount;
   contribution.save();
 }

subgraph/core/src/entities/ClassicContribution.ts

@@ -3,9 +3,7 @@ import { Contribution as ContributionEvent, Withdrawal } from "../../generated/D
 import { DISPUTEKIT_ID } from "../DisputeKitClassic";
 
 export function ensureClassicContributionFromEvent<T>(event: T): ClassicContribution | null {
-  if (!(event instanceof ContributionEvent) && !(event instanceof Withdrawal)) {
-    return null;
-  }
+  if (!(event instanceof ContributionEvent) && !(event instanceof Withdrawal)) return null;
   const coreDisputeID = event.params._coreDisputeID.toString();
   const coreRoundIndex = event.params._coreRoundID.toString();
   const roundID = `${DISPUTEKIT_ID}-${coreDisputeID}-${coreRoundIndex}`;
@@ -25,9 +23,11 @@ export function ensureClassicContributionFromEvent<T>(event: T): ClassicContribu
     classicContribution.rewardWithdrawn = false;
   } else {
     const currentAmount = classicContribution.amount;
-    classicContribution.amount = currentAmount.plus(event.params._amount);
+    // we dont want to increase amount on withdraw event, the amount in that event is reward/reimburse amount
+    if (event instanceof ContributionEvent) {
+      classicContribution.amount = currentAmount.plus(event.params._amount);
+    }
   }
-
   classicContribution.save();
   return classicContribution;
 }

subgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

web/src/components/DisputeCard/CardLabels/Label.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from "react";
+import styled, { Theme, useTheme } from "styled-components";
+
+const COLORS: Record<string, Array<keyof Theme>> = {
+  red: ["error", "errorLight"],
+  green: ["success", "successLight"],
+  blue: ["primaryBlue", "mediumBlue"],
+  purple: ["secondaryPurple", "mediumPurple"],
+  lightPurple: ["tint", "mediumPurple"],
+  grey: ["secondaryText", "lightGrey"],
+};
+
+export type IColors = keyof typeof COLORS;
+
+const LabelContainer = styled.div<{ backgroundColor: string }>`
+  display: inline-flex;
+  padding: 4px 8px;
+  align-items: center;
+  gap: 10px;
+  border-radius: 300px;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+`;
+
+const IconContainer = styled.div<{ contentColor: string }>`
+  height: 14px;
+  width: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > svg {
+    fill: ${({ contentColor }) => contentColor};
+  }
+`;
+
+const StyledText = styled.label<{ contentColor: string }>`
+  font-size: 12px;
+  font-weight: 400;
+  color: ${({ contentColor }) => contentColor};
+`;
+
+export interface ILabelProps {
+  text: string;
+  icon: React.FC<React.SVGAttributes<SVGElement>>;
+  color: keyof typeof COLORS;
+}
+
+const Label: React.FC<ILabelProps> = ({ text, icon: Icon, color }) => {
+  const theme = useTheme();
+  const [contentColor, backgroundColor] = useMemo(() => {
+    return COLORS[color].map((color) => theme[color]);
+  }, [theme, color]);
+
+  return (
+    <LabelContainer {...{ backgroundColor }}>
+      <IconContainer {...{ contentColor }}>
+        <Icon />
+      </IconContainer>
+      <StyledText {...{ contentColor }}>{text}</StyledText>
+    </LabelContainer>
+  );
+};
+
+export default Label;

web/src/components/DisputeCard/CardLabels/RewardsAndFundLabel.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import EthIcon from "assets/svgs/icons/eth.svg";
+import PnkIcon from "assets/svgs/icons/kleros.svg";
+import NumberDisplay from "components/NumberDisplay";
+
+const Container = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex-wrap: wrap;
+`;
+
+const StyledIcon = styled.div<{ color: string }>`
+  width: 12px;
+  height: 12px;
+
+  path {
+    fill: ${({ color }) => color};
+  }
+`;
+
+const StyledLabel = styled.label<{ color: string }>`
+  color: ${({ color }) => color};
+`;
+interface IRewardsAndFundLabel {
+  value: string;
+  unit: "ETH" | "PNK";
+  isFund?: boolean;
+}
+
+const RewardsAndFundLabel: React.FC<IRewardsAndFundLabel> = ({ value, unit = "ETH", isFund = false }) => {
+  const theme = useTheme();
+  const isWon = Number(value) > 0;
+  const color = isWon ? theme.success : theme.error;
+  return Number(value) !== 0 ? (
+    <Container>
+      <StyledLabel color={isFund ? theme.tint : color}>
+        <NumberDisplay {...{ value, unit }} showUnitInDisplay={false} />
+      </StyledLabel>
+      <StyledIcon as={unit === "ETH" ? EthIcon : PnkIcon} color={isFund ? theme.tint : color} />
+    </Container>
+  ) : null;
+};
+
+export default RewardsAndFundLabel;