Merge pull request #613 from threshold-network/coverage-pools-balance

Coverage Pools balance

Closes: threshold-network/website#88

Implements the Coverage Pools balance in the dashboard.

Note: In the project ([on release
branch](https://github.com/threshold-network/token-dashboard/blob/releases/mainnet/v1.10.0/package.json#L14))
we are using `v1.0.0` version of `@keep-network/coverage-pools` which has
contracts related to Keep. The T Coverage Pools are in `v2.0.0` version. Since
we still use `v1.0.0` version in our dApp to display it in the TVL I've decided
to install `v2.0.0` version next to the first one and call it
`@threshold-network/coverage-pools`.

On the `main` branch they both have `development` tag but on the release one we
should set the correct version accordingly.

README.md

@@ -61,18 +61,30 @@ REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
 ## Install Görli contracts
 
 ```
-yarn upgrade @threshold-network/solidity-contracts@goerli \
-  @keep-network/keep-core@1.8.1-goerli.0 \
+yarn upgrade @keep-network/coverage-pools@goerli \
+  @keep-network/ecdsa@goerli \
+  @keep-network/keep-core@goerli \
   @keep-network/keep-ecdsa@goerli \
+  @keep-network/random-beacon@goerli \
   @keep-network/tbtc@goerli \
-  @keep-network/coverage-pools@goerli
+  @keep-network/tbtc-v2@goerli \
+  @keep-network/tbtc-v2.ts@goerli \
+  @threshold-network/coverage-pools@npm:@keep-network/coverage-pools@goerli \
+  @threshold-network/solidity-contracts@goerli \
 ```
 
-**NOTE 1:** We provide explicit version of the `keep-core` package, because
-using `goerli` tag results in `expected manifest` error - probably caused by bug
-in Yarn: https://github.com/yarnpkg/yarn/issues/4731.
+**NOTE 1:** We use the same Goerli versions for both
+`@keep-network/coverage-pools` and `@threshold-network/coverage-pools`, because
+we don't have the newest version of the package on Goerli network, only on the
+Mainnet.
 
-**NOTE 2:** The `token-dashboard` package contains an indirect dependency to
+**NOTE 2:** If you encounter an `expected manifest` error while executing this,
+then try providing an explicit version of the `keep-core` package:
+`@keep-network/keep-core@1.8.1-goerli.0`
+The error is probably caused by a bug in Yarn:
+https://github.com/yarnpkg/yarn/issues/4731.
+
+**NOTE 3:** The `token-dashboard` package contains an indirect dependency to
 `@summa-tx/relay-sol@2.0.2` package, which downloads one of its sub-dependencies
 via unathenticated `git://` protocol. That protocol is no longer supported by
 GitHub. This means that in certain situations installation of the package or

package.json

@@ -28,6 +28,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@threshold-network/components": "development",
+    "@threshold-network/coverage-pools": "npm:@keep-network/coverage-pools@development",
     "@threshold-network/solidity-contracts": "development",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.9.1",

src/components/Link/index.tsx

@@ -17,9 +17,9 @@ type ConditionalLinkProps =
   | { isExternal?: false; to: string; href?: never }
   | { isExternal: true; to?: never; href: string }
 
-export type LinkProps = CommonLinkProps & ConditionalLinkProps
+export type LinkProps = ChakraLinkProps & CommonLinkProps & ConditionalLinkProps
 
-const Link: FC<ChakraLinkProps & LinkProps> = forwardRef(
+const Link: FC<LinkProps> = forwardRef(
   ({ isExternal, href, to, icon, children, ...props }, ref) => {
     const defaultColor = useColorModeValue("brand.500", "white")
     const finalColor = props.color ? props.color : defaultColor

src/components/StatHighlightCard.tsx

@@ -0,0 +1,63 @@
+import {
+  BoxProps,
+  Card,
+  H1,
+  HStack,
+  IconProps,
+  LabelSm,
+  TextProps,
+  VStack,
+} from "@threshold-network/components"
+import { FC } from "react"
+import TooltipIcon from "./TooltipIcon"
+
+export const StatHighlightCard: FC<BoxProps> = ({ children, ...restProps }) => {
+  return (
+    <Card h="100%" w="100%" {...restProps}>
+      {children}
+    </Card>
+  )
+}
+
+export const StatHighlightTitle: FC<{ title: string } & TextProps> = ({
+  title,
+  children,
+  ...restProps
+}) => {
+  return (
+    <HStack>
+      <LabelSm textTransform={"uppercase"} {...restProps}>
+        {title}
+      </LabelSm>
+      {children}
+    </HStack>
+  )
+}
+
+export const StatHighlightTitleTooltip: FC<
+  { label: string | JSX.Element } & IconProps
+> = ({ label, ...restProps }) => {
+  return (
+    <TooltipIcon
+      color="unset"
+      label={label}
+      width="20px"
+      height="20px"
+      alignSelf="center"
+      m="auto"
+      verticalAlign="text-top"
+      {...restProps}
+    />
+  )
+}
+
+export const StatHighlightValue: FC<{ value: string & TextProps }> = ({
+  value,
+  ...restProps
+}) => {
+  return (
+    <H1 mt="10" mb="9" textAlign="center" {...restProps}>
+      {value}
+    </H1>
+  )
+}

src/components/tBTC/Stats.tsx

@@ -7,12 +7,12 @@ import { ExternalHref } from "../../enums"
 import { RecentDeposit } from "../../hooks/tbtc"
 import Link from "../Link"
 
-export type TVLProps = {
+export type TvlProps = {
   tvl: string
   tvlInUSD: string
 }
 
-export const TVL: FC<TVLProps> = ({ tvl, tvlInUSD }) => {
+export const Tvl: FC<TvlProps> = ({ tvl, tvlInUSD }) => {
   return (
     <>
       <BodyMd mb="1.5">TVL</BodyMd>

src/enums/externalHref.ts

@@ -34,4 +34,5 @@ export enum ExternalHref {
   mintersAndGuardiansDocs = "https://blog.threshold.network/minters-guardians-and-a-strong-tbtc/",
   tBTCDuneDashboard = "https://dune.com/threshold/tbtc",
   delight = "https://delightlabs.io",
+  coveragePoolsDocs = "https://docs.threshold.network/applications/tbtc-v2/coverage-pool",
 }

src/hooks/__tests__/useFetchTvl.test.tsx

@@ -2,6 +2,7 @@ import { renderHook } from "@testing-library/react-hooks"
 import * as ethersUnits from "@ethersproject/units"
 import { Token } from "../../enums"
 import {
+  useAssetPoolContract,
   useKeepAssetPoolContract,
   useKeepBondingContract,
   useKeepTokenStakingContract,
@@ -15,9 +16,11 @@ import * as useTokenModule from "../useToken"
 import { TokenContext } from "../../contexts/TokenContext"
 import * as usdUtils from "../../utils/getUsdBalance"
 import { useTBTCv2TokenContract } from "../../web3/hooks/useTBTCv2TokenContract"
+import { FC } from "react"
 
 jest.mock("../../web3/hooks", () => ({
   ...(jest.requireActual("../../web3/hooks") as {}),
+  useAssetPoolContract: jest.fn(),
   useKeepAssetPoolContract: jest.fn(),
   useKeepBondingContract: jest.fn(),
   useKeepTokenStakingContract: jest.fn(),
@@ -63,10 +66,11 @@ describe("Test `useFetchTvl` hook", () => {
   const mockedKeepBondingContract = { address: "0x0" }
   const mockedTStakingContract = { address: "0x2" }
   const mockedMultiCallContract = { interface: {}, address: "0x3" }
-  const mockedKeepAssetPoolContract = { interface: {}, address: "0x4" }
-  const mockedtBTCTokenContract = { interface: {}, address: "0x5" }
+  const mockedAssetPoolContract = { interface: {}, address: "0x4" }
+  const mockedKeepAssetPoolContract = { interface: {}, address: "0x5" }
+  const mockedtBTCTokenContract = { interface: {}, address: "0x6" }
 
-  const wrapper = ({ children }) => (
+  const wrapper: FC = ({ children }) => (
     <TokenContext.Provider
       value={{
         [Token.Keep]: keepContext,
@@ -92,6 +96,9 @@ describe("Test `useFetchTvl` hook", () => {
     ;(useMulticallContract as jest.Mock).mockReturnValue(
       mockedMultiCallContract
     )
+    ;(useAssetPoolContract as jest.Mock).mockReturnValue(
+      mockedAssetPoolContract
+    )
     ;(useKeepAssetPoolContract as jest.Mock).mockReturnValue(
       mockedKeepAssetPoolContract
     )
@@ -108,7 +115,11 @@ describe("Test `useFetchTvl` hook", () => {
     // given
     const ethInKeepBonding = { raw: "10000000000000000000", format: "10.0" }
     const tbtcTokenTotalSupply = { raw: "5000000000000000000", format: "5.0" }
-    const coveragePoolTvl = { raw: "300000000000000000000", format: "300.0" }
+    const coveragePoolTvl = { raw: "500000000000000000000", format: "500.0" }
+    const keepCoveragePoolTvl = {
+      raw: "300000000000000000000",
+      format: "300.0",
+    }
     const keepStaking = { raw: "500000000000000000000", format: "500.0" }
     const tStaking = { raw: "600000000000000000000", format: "600.0" }
     const tBTC = { raw: "700000000000000000000", format: "700.0" }
@@ -117,6 +128,7 @@ describe("Test `useFetchTvl` hook", () => {
       ethInKeepBonding.raw,
       tbtcTokenTotalSupply.raw,
       coveragePoolTvl.raw,
+      keepCoveragePoolTvl.raw,
       keepStaking.raw,
       tStaking.raw,
       tBTC.raw,
@@ -131,7 +143,8 @@ describe("Test `useFetchTvl` hook", () => {
     const _expectedResult = {
       ecdsa: +ethInKeepBonding.format * mockedETHData.usdPrice,
       tbtc: +tbtcTokenTotalSupply.format * tbtcv1Context.usdConversion,
-      keepCoveragePool: +coveragePoolTvl.format * keepContext.usdConversion,
+      coveragePool: +coveragePoolTvl.format * tContext.usdConversion,
+      keepCoveragePool: +keepCoveragePoolTvl.format * keepContext.usdConversion,
       keepStaking: +keepStaking.format * keepContext.usdConversion,
       tStaking: +tStaking.format * tContext.usdConversion,
       tBTC: +tBTC.format * tBTCContext.usdConversion,
@@ -142,13 +155,15 @@ describe("Test `useFetchTvl` hook", () => {
     const expectedResult = {
       ecdsa: `${_expectedResult.ecdsa.toString()}.0`,
       tbtcv1: `${_expectedResult.tbtc.toString()}.0`,
+      coveragePool: `${_expectedResult.coveragePool.toString()}.0`,
       keepCoveragePool: `${_expectedResult.keepCoveragePool.toString()}.0`,
       keepStaking: `${_expectedResult.keepStaking.toString()}.0`,
       tStaking: `${_expectedResult.tStaking.toString()}.0`,
       tBTC: `${_expectedResult.tBTC.toString()}.0`,
       total: `${
         _expectedResult.ecdsa +
         _expectedResult.tbtc +
+        _expectedResult.coveragePool +
         _expectedResult.keepCoveragePool +
         _expectedResult.keepStaking +
         _expectedResult.tStaking +
@@ -169,6 +184,7 @@ describe("Test `useFetchTvl` hook", () => {
     expect(spyOnUseToken).toHaveBeenCalledWith(Token.TBTCV2)
     expect(useKeepBondingContract).toHaveBeenCalled()
     expect(useMulticallContract).toHaveBeenCalled()
+    expect(useAssetPoolContract).toHaveBeenCalled()
     expect(useKeepAssetPoolContract).toHaveBeenCalled()
     expect(useTStakingContract).toHaveBeenCalled()
     expect(useKeepTokenStakingContract).toHaveBeenCalled()
@@ -184,6 +200,11 @@ describe("Test `useFetchTvl` hook", () => {
         address: tbtcv1Context.contract.address,
         method: "totalSupply",
       },
+      {
+        interface: mockedAssetPoolContract.interface,
+        address: mockedAssetPoolContract.address,
+        method: "totalValue",
+      },
       {
         interface: mockedKeepAssetPoolContract.interface,
         address: mockedKeepAssetPoolContract.address,
@@ -225,32 +246,37 @@ describe("Test `useFetchTvl` hook", () => {
     )
 
     expect(spyOnToUsdBalance).toHaveBeenNthCalledWith(
-      7,
+      8,
       ethInKeepBonding.format,
       mockedETHData.usdPrice
     )
     expect(spyOnToUsdBalance).toHaveBeenNthCalledWith(
-      8,
+      9,
       tbtcTokenTotalSupply.format,
       tbtcv1Context.usdConversion
     )
     expect(spyOnToUsdBalance).toHaveBeenNthCalledWith(
-      9,
+      10,
       tBTC.format,
       tBTCContext.usdConversion
     )
     expect(spyOnToUsdBalance).toHaveBeenNthCalledWith(
-      10,
+      11,
       coveragePoolTvl.format,
+      tContext.usdConversion
+    )
+    expect(spyOnToUsdBalance).toHaveBeenNthCalledWith(
+      12,
+      keepCoveragePoolTvl.format,
       keepContext.usdConversion
     )
     expect(spyOnToUsdBalance).toHaveBeenNthCalledWith(
-      11,
+      13,
       keepStaking.format,
       keepContext.usdConversion
     )
     expect(spyOnToUsdBalance).toHaveBeenNthCalledWith(
-      12,
+      14,
       tStaking.format,
       tContext.usdConversion
     )