Dashboard: stats widget

src/components/Dashboard/AccountBanner.js

@@ -4,11 +4,9 @@ import { GU, Help, LoadingRing, useTheme } from '@aragon/ui'
 
 import AccountBannerInfo from './AccountBannerInfo'
 import CircleGraph from '../CircleGraph'
-
 import { useCourtConfig } from '../../providers/CourtConfig'
-import { useTotalActiveBalancePolling } from '../../hooks/useCourtContracts'
+import { useTotalActiveBalance } from '../../hooks/useCourtStats'
 import { useJurorFirstTimeANJActivation } from '../../hooks/useANJ'
-import { useCourtClock } from '../../providers/CourtClock'
 
 import { ACCOUNT_STATUS_JUROR_ACTIVE } from '../../types/account-status-types'
 import { formatUnits, getPercentageBN, bigNum } from '../../lib/math-utils'
@@ -164,10 +162,7 @@ const Wrapper = ({ mainIcon, information }) => {
 
 const BannerWithProbability = ({ activeBalance }) => {
   const theme = useTheme()
-  const { currentTermId } = useCourtClock()
-  const totalActiveBalanceCurrentTerm = useTotalActiveBalancePolling(
-    currentTermId
-  )
+  const [totalActiveBalanceCurrentTerm] = useTotalActiveBalance()
 
   const fetchingTotalBalance = totalActiveBalanceCurrentTerm.eq(bigNum(-1))
   if (fetchingTotalBalance) {

src/components/Dashboard/Balance.js

@@ -4,6 +4,7 @@ import { animated, useSpring } from 'react-spring'
 
 import Loading from './Loading'
 import ANJLockedDistribution from './ANJLockedDistribution'
+import SplitAmount from '../SplitAmount'
 
 import { useCourtConfig } from '../../providers/CourtConfig'
 import { useANJBalanceToUsd } from '../../hooks/useTokenBalanceToUsd'
@@ -15,28 +16,6 @@ import { movementDirection, convertToString } from '../../types/anj-types'
 import ANJIcon from '../../assets/IconANJ.svg'
 import lockIcon from '../../assets/IconLock.svg'
 
-const splitAmount = amount => {
-  const [integer, fractional] = amount.split('.')
-  return (
-    <span
-      css={`
-        margin-right: 5px;
-      `}
-    >
-      <span className="integer">{integer}</span>
-      {fractional && (
-        <span
-          css={`
-            font-size: 16px;
-          `}
-        >
-          .{fractional}
-        </span>
-      )}
-    </span>
-  )
-}
-
 const Balance = React.memo(function Balance({
   label,
   amount,
@@ -113,7 +92,9 @@ const Balance = React.memo(function Balance({
                   align-items: center;
                 `}
               >
-                {splitAmount(formatUnits(amount, { digits: decimals }))}
+                <SplitAmount
+                  amount={formatUnits(amount, { digits: decimals })}
+                />
                 <img height="20" width="18" src={ANJIcon} alt="ANJ" />
               </div>
               <span

src/components/Dashboard/CourtStats.js

@@ -1,20 +1,131 @@
 import React from 'react'
-import { Box, Distribution } from '@aragon/ui'
+import { Box, GU, textStyle, useTheme } from '@aragon/ui'
+import { formatUnits } from '../../lib/math-utils'
+import useCourtStats from '../../hooks/useCourtStats'
+import {
+  useANJBalanceToUsd,
+  useTokenBalanceToUsd,
+} from '../../hooks/useTokenBalanceToUsd'
+import Loading from './Loading'
+import SplitAmount from '../SplitAmount'
+
+function CourtStats() {
+  const theme = useTheme()
+  const [stats, fetching] = useCourtStats()
 
-const CourtStats = () => {
   return (
-    <Box heading="Court Stats">
-      <Distribution
-        heading="Disputes"
-        items={[
-          { item: 'New', percentage: 37 },
-          { item: 'Adjudicated', percentage: 22 },
-          { item: 'Appeals', percentage: 15 },
-          { item: 'Executed', percentage: 12 },
-        ]}
-      />
+    <Box heading="Court Metrics" padding={3 * GU}>
+      {(() => {
+        if (fetching) {
+          return <Loading height={86} />
+        }
+        return stats.map((stat, index) => {
+          return (
+            <div
+              key={index}
+              css={`
+                margin-bottom: ${2 * GU}px;
+                &:last-child {
+                  margin-bottom: 0;
+                }
+              `}
+            >
+              <span
+                css={`
+                  ${textStyle('body2')};
+                  color: ${theme.surfaceContentSecondary};
+                  display: block;
+                  margin-bottom: ${1 * GU}px;
+                `}
+              >
+                {stat.label}
+              </span>
+              {stat.token ? (
+                <TokenStats stat={stat} theme={theme} />
+              ) : (
+                <span
+                  css={`
+                    ${textStyle('title2')};
+                    font-weight: 300;
+                  `}
+                >
+                  {!stat.error ? stat.value : '-'}
+                </span>
+              )}
+            </div>
+          )
+        })
+      })()}
     </Box>
   )
 }
 
+function TokenStats({ stat, theme }) {
+  const { value, token, error } = stat
+  const { decimals, icon, symbol } = token
+  return (
+    <>
+      <div
+        css={`
+          margin-bottom: ${1 * GU}px;
+        `}
+      >
+        <span
+          css={`
+            ${textStyle('title2')};
+            font-weight: 300;
+          `}
+        >
+          {!error ? (
+            <SplitAmount amount={formatUnits(value, { digits: decimals })} />
+          ) : (
+            '-'
+          )}
+        </span>
+        {!error && (
+          <div
+            css={`
+              display: inline-flex;
+            `}
+          >
+            <img
+              css={`
+                margin-right: ${0.5 * GU}px;
+              `}
+              height="20"
+              width="18"
+              src={icon}
+            />
+          </div>
+        )}
+      </div>
+      <span
+        css={`
+          ${textStyle('body2')};
+          color: ${theme.positive};
+        `}
+      >
+        $
+        {!error
+          ? symbol === 'ANJ'
+            ? AnjUsdValue(value)
+            : TokenUsdValue(token, value)
+          : '-'}
+      </span>
+    </>
+  )
+}
+
+function AnjUsdValue(amount) {
+  const usdValue = useANJBalanceToUsd(amount)
+
+  return usdValue
+}
+
+function TokenUsdValue(token, amount) {
+  const { decimals, symbol } = token
+  const usdValue = useTokenBalanceToUsd(symbol, decimals, amount)
+  return usdValue
+}
+
 export default CourtStats

src/components/Dashboard/Dashboard.js

@@ -11,6 +11,7 @@ import ActivateANJ from './panels/ActivateANJ'
 import WithdrawANJ from './panels/WithdrawANJ'
 import DeactivateANJ from './panels/DeactivateANJ'
 import AppealColateralModule from './AppealColateralModule'
+import CourtStats from './CourtStats'
 
 import { useWallet } from '../../providers/Wallet'
 import { DashboardStateProvider } from './DashboardStateProvider'
@@ -66,7 +67,11 @@ function Dashboard() {
           )}
 
           {!wallet.account ? (
-            <Tasks onlyTable />
+            <Split
+              primary={<Tasks onlyTable />}
+              secondary={<CourtStats />}
+              invert="horizontal"
+            />
           ) : (
             <Split
               primary={<Tasks onlyTable />}

src/components/SplitAmount.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { GU, textStyle } from '@aragon/ui'
+
+export default function SplitAmount({ amount }) {
+  const [integer, fractional] = amount.split('.')
+  return (
+    <span
+      css={`
+        margin-right: ${0.5 * GU}px;
+      `}
+    >
+      <span>{integer}</span>
+      {fractional && (
+        <span
+          css={`
+            ${textStyle('title2')}
+            font-weight: 300;
+          `}
+        >
+          .{fractional}
+        </span>
+      )}
+    </span>
+  )
+}

src/endpoints.js

@@ -26,7 +26,8 @@ function getAPIBase() {
 
 export default function endpoints() {
   const [API_BASE_HTTP, API_BASE_WS] = getAPIBase()
-  const networkType = getNetworkType(CHAIN_ID)
+  const networkType =
+    getNetworkType(CHAIN_ID) === 'private' ? 'rpc' : getNetworkType(CHAIN_ID)
 
   const API_PATH =
     networkType === 'main'

src/flagged-disputes/precedence-campaign-disputes.js

@@ -1,25 +1,27 @@
 import {
   networks,
+  getNetwork,
+  getInternalNetworkName,
   RINKEBY_COURT,
   RINKEBY_STAGING_COURT,
   RINKEBY_USABILITY_COURT,
 } from '../networks'
-import { getNetworkType } from '../lib/web3-utils'
 
 const PRECEDENCE_CAMPAIGN_DISPUTES = {
-  rpc: new Map([[networks.rpc.court, ['0']]]),
-  ropsten: new Map([[networks.ropsten.court, []]]),
+  main: new Map([[networks.main.court, []]]),
   rinkeby: new Map([
     [RINKEBY_COURT, []],
     [RINKEBY_STAGING_COURT, []],
     [RINKEBY_USABILITY_COURT, []],
   ]),
-  main: new Map([[networks.main.court, []]]),
+  ropsten: new Map([[networks.ropsten.court, []]]),
+  local: new Map([[networks.local.court, ['0']]]),
 }
 
 export function getPrecedenceCampaignDisputesByCourt() {
-  const networkType = getNetworkType()
-  const courtAddress = networks[networkType].court
+  const courtAddress = getNetwork().court
 
-  return PRECEDENCE_CAMPAIGN_DISPUTES[networkType].get(courtAddress)
+  return PRECEDENCE_CAMPAIGN_DISPUTES[getInternalNetworkName()].get(
+    courtAddress
+  )
 }

src/flagged-disputes/voided-disputes.js

@@ -1,20 +1,14 @@
 import {
   networks,
+  getInternalNetworkName,
+  getNetwork,
   RINKEBY_COURT,
   RINKEBY_STAGING_COURT,
   RINKEBY_USABILITY_COURT,
 } from '../networks'
-import { getNetworkType } from '../lib/web3-utils'
 import env from '../environment'
 
 const VOIDED_DISPUTES = {
-  rpc: new Map([[networks.rpc.court, new Map([])]]),
-  ropsten: new Map([[networks.ropsten.court, new Map([])]]),
-  rinkeby: new Map([
-    [RINKEBY_COURT, new Map([])],
-    [RINKEBY_USABILITY_COURT, new Map([])],
-    [RINKEBY_STAGING_COURT, new Map([])],
-  ]),
   main: new Map([
     [
       networks.main.court,
@@ -32,15 +26,20 @@ const VOIDED_DISPUTES = {
       ),
     ],
   ]),
+  rinkeby: new Map([
+    [RINKEBY_COURT, new Map([])],
+    [RINKEBY_USABILITY_COURT, new Map([])],
+    [RINKEBY_STAGING_COURT, new Map([])],
+  ]),
+  ropsten: new Map([[networks.ropsten.court, new Map([])]]),
+  local: new Map([[networks.local.court, new Map([])]]),
 }
 
 export function getVoidedDisputesByCourt() {
   if (env('SKIP_VOIDING')) {
     return new Map([])
   }
+  const courtAddress = getNetwork().court
 
-  const networkType = getNetworkType()
-  const courtAddress = networks[networkType].court
-
-  return VOIDED_DISPUTES[networkType].get(courtAddress)
+  return VOIDED_DISPUTES[getInternalNetworkName()].get(courtAddress)
 }

src/hooks/query-hooks.js

@@ -2,7 +2,7 @@ import { useQuery } from 'urql'
 
 import { JurorDrafts } from '../queries/jurorDrafts'
 import { JurorFeesClaimed } from '../queries/juror'
-import { FirstANJActivationMovement } from '../queries/balances'
+import { ActiveJurors, FirstANJActivationMovement } from '../queries/balances'
 
 export function useJurorDraftQuery(jurorId) {
   const [result] = useQuery({
@@ -51,3 +51,11 @@ export function useFirstANJActivationQuery(jurorId, { pause = false }) {
 
   return juror ? juror.anjMovements[0] : null
 }
+
+export function useActiveJurorsNumber() {
+  const [{ data, error }] = useQuery({
+    query: ActiveJurors,
+  })
+
+  return [data?.jurors?.length, error]
+}