feat: add new stake simulator design, add new juror effectivestake metric to subgraph

Author: kemuru

subgraph/core/schema.graphql

@@ -120,6 +120,7 @@ type JurorTokensPerCourt @entity {
   id: ID! # user.id-court.id
   juror: User!
   court: Court!
+  effectiveStake: BigInt!
   staked: BigInt!
   locked: BigInt!
   delayed: BigInt!

subgraph/core/src/entities/JurorTokensPerCourt.ts

@@ -23,6 +23,7 @@ export function createJurorTokensPerCourt(jurorAddress: string, courtID: string)
   const jurorTokens = new JurorTokensPerCourt(id);
   jurorTokens.juror = jurorAddress;
   jurorTokens.court = courtID;
+  jurorTokens.effectiveStake = ZERO;
   jurorTokens.staked = ZERO;
   jurorTokens.locked = ZERO;
   jurorTokens.delayed = ZERO;
@@ -31,6 +32,37 @@ export function createJurorTokensPerCourt(jurorAddress: string, courtID: string)
   return jurorTokens;
 }
 
+export function updateJurorEffectiveStake(jurorAddress: string, courtID: string): void {
+  let court = Court.load(courtID);
+  if (!court) {
+    return;
+  }
+
+  while (court) {
+    const jurorTokensPerCourt = ensureJurorTokensPerCourt(jurorAddress, court.id);
+    let totalStake = jurorTokensPerCourt.staked;
+    const childrenCourts = court.children.load();
+
+    for (let i = 0; i < childrenCourts.length; i++) {
+      const childCourtID = childrenCourts[i].id;
+      const childCourt = Court.load(childCourtID);
+      if (childCourt) {
+        const childJurorTokensPerCourt = ensureJurorTokensPerCourt(jurorAddress, childCourt.id);
+        totalStake = totalStake.plus(childJurorTokensPerCourt.effectiveStake);
+      }
+    }
+
+    jurorTokensPerCourt.effectiveStake = totalStake;
+    jurorTokensPerCourt.save();
+
+    if (court.parent && court.parent !== null) {
+      court = Court.load(court.parent as string);
+    } else {
+      break;
+    }
+  }
+}
+
 export function updateJurorStake(
   jurorAddress: string,
   courtID: string,
@@ -61,6 +93,7 @@ export function updateJurorStake(
   juror.save();
   court.save();
   updateEffectiveStake(courtID);
+  updateJurorEffectiveStake(jurorAddress, courtID);
 }
 
 export function updateJurorDelayedStake(jurorAddress: string, courtID: string, amount: BigInt): void {

web/src/assets/svgs/icons/arrow-right.svg

@@ -14,6 +14,7 @@ const jurorStakeDetailsQuery = graphql(`
         id
         name
       }
+      effectiveStake
       staked
       locked
     }

web/src/assets/svgs/icons/clock.svg

@@ -6,6 +6,7 @@ const Container = styled.div`
   display: flex;
   align-items: flex-start;
   gap: 8px;
+  padding-top: 4px;
 `;
 
 const StyledSpan = styled.span`
@@ -14,11 +15,9 @@ const StyledSpan = styled.span`
 `;
 
 const StyledInfoCircle = styled(InfoCircle)`
-  display: inline-block;
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  vertical-align: top;
 `;
 
 const Info: React.FC = () => {

web/src/assets/svgs/icons/dollar.svg

@@ -1,19 +1,21 @@
 import React, { useState, useMemo, useEffect } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 import { useParams } from "react-router-dom";
 import { useDebounce } from "react-use";
 import { useAccount } from "wagmi";
 
 import { REFETCH_INTERVAL } from "consts/index";
+
 import { useReadSortitionModuleGetJurorBalance, useReadPnkBalanceOf } from "hooks/contracts/generated";
 import { useParsedAmount } from "hooks/useParsedAmount";
+
 import { commify, uncommify } from "utils/commify";
 import { formatPNK, roundNumberDown } from "utils/format";
 import { isUndefined } from "utils/index";
 
 import { NumberInputField } from "components/NumberInputField";
-
 import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton";
 
 const StyledField = styled(NumberInputField)`
@@ -23,6 +25,12 @@ const StyledField = styled(NumberInputField)`
 const LabelArea = styled.div`
   display: flex;
   justify-content: space-between;
+
+  ${landscapeStyle(
+    () => css`
+      width: 92%;
+    `
+  )}
 `;
 
 const StyledLabel = styled.label`
@@ -36,6 +44,12 @@ const InputArea = styled.div`
   align-items: center;
   gap: 12px;
   width: 100%;
+
+  ${landscapeStyle(
+    () => css`
+      width: 92%;
+    `
+  )}
 `;
 
 const InputFieldAndButton = styled.div`

web/src/hooks/queries/useJurorStakeDetailsQuery.ts

@@ -8,6 +8,8 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
 `;
 
 const PNKLogoAndTitle = styled.div`