From 879bf68f5df7adb1b143506580e31ed3c2b2ccb9 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 11:32:49 +0200 Subject: [PATCH 01/15] Extract a common component Extract a common list item component with outline variant as we use them in several places in dapp. We can't add a new variant using chakra theming because the `ListItem` is a part of the `List` component and does not have separate theme. In that case we should pass the eg `variant="otuline"` to the `List` component but in my opinion does not fit here because list can be order or unordered. --- src/components/OutlineListItem.tsx | 19 +++++++++++++++++++ .../tBTC/Bridge/BridgeActivity/index.tsx | 17 ++--------------- 2 files changed, 21 insertions(+), 15 deletions(-) create mode 100644 src/components/OutlineListItem.tsx diff --git a/src/components/OutlineListItem.tsx b/src/components/OutlineListItem.tsx new file mode 100644 index 000000000..32e0f6812 --- /dev/null +++ b/src/components/OutlineListItem.tsx @@ -0,0 +1,19 @@ +import { FC } from "react" +import { ListItem, ListItemProps } from "@threshold-network/components" + +export const OutlineListItem: FC = ({ ...props }) => { + return ( + + ) +} diff --git a/src/pages/tBTC/Bridge/BridgeActivity/index.tsx b/src/pages/tBTC/Bridge/BridgeActivity/index.tsx index 64bd293e4..ac37bad42 100644 --- a/src/pages/tBTC/Bridge/BridgeActivity/index.tsx +++ b/src/pages/tBTC/Bridge/BridgeActivity/index.tsx @@ -7,7 +7,6 @@ import { Image, LabelSm, List, - ListItem, useColorModeValue, Box, LinkBox, @@ -21,6 +20,7 @@ import emptyHistoryImageSrcDark from "../../../../static/images/tBTC-bridge-no-h import emptyHistoryImageSrcLight from "../../../../static/images/tBTC-bridge-no-history-light.svg" import { InlineTokenBalance } from "../../../../components/TokenBalance" import Link from "../../../../components/Link" +import { OutlineListItem } from "../../../../components/OutlineListItem" const bridgeActivityStatusToBadgeProps: Record< BridgeActivityStatus, @@ -64,20 +64,7 @@ export const BridgeActivityCard: FC> = ({ } const ActivityItemWrapper: FC = ({ children }) => ( - + {children} ) From c49e4ffe177d6248feea3426604206344fbff4c1 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 11:40:57 +0200 Subject: [PATCH 02/15] Add the tBTC bridge stats card on overview page --- src/components/tBTC/RecentDeposits.tsx | 46 +++++++++++++ src/enums/externalHref.ts | 1 + src/pages/Overview/Network/index.tsx | 3 +- .../Overview/Network/tBTCBridgeStats.tsx | 65 +++++++++++++++++++ 4 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 src/components/tBTC/RecentDeposits.tsx create mode 100644 src/pages/Overview/Network/tBTCBridgeStats.tsx diff --git a/src/components/tBTC/RecentDeposits.tsx b/src/components/tBTC/RecentDeposits.tsx new file mode 100644 index 000000000..a0b8b2574 --- /dev/null +++ b/src/components/tBTC/RecentDeposits.tsx @@ -0,0 +1,46 @@ +import { FC } from "react" +import { BodySm, List, HStack } from "@threshold-network/components" +import shortenAddress from "../../utils/shortenAddress" +import Identicon from "../Identicon" +import { OutlineListItem } from "../OutlineListItem" +import { InlineTokenBalance } from "../TokenBalance" + +type RecentDeposit = { + amount: string + address: string + date: string + txHash: string +} + +type RecentDepositsProps = { + deposits: RecentDeposit[] +} + +export const RecentDeposits: FC = ({ deposits }) => { + return {deposits.map(renderRecentDeposit)} +} + +const RecentDepositItem: FC = ({ amount, address, date }) => { + return ( + + + + + + + {shortenAddress(address)} + + {/* TODO: format date */} + {date} + + ) +} + +const renderRecentDeposit = (item: RecentDeposit) => ( + +) diff --git a/src/enums/externalHref.ts b/src/enums/externalHref.ts index 9e8547241..7083ed670 100644 --- a/src/enums/externalHref.ts +++ b/src/enums/externalHref.ts @@ -32,4 +32,5 @@ export enum ExternalHref { tBTCRecoveryGuide = "https://github.com/keep-network/tbtc-v2/blob/main/typescript/scripts/README.adoc", btcConfirmations = "https://en.bitcoin.it/wiki/Confirmation", mintersAndGuardiansDocs = "https://blog.threshold.network/minters-guardians-and-a-strong-tbtc/", + tBTCDuneDashboard = "https://dune.com/threshold/tbtc", } diff --git a/src/pages/Overview/Network/index.tsx b/src/pages/Overview/Network/index.tsx index 28ac9ff86..af6b01384 100644 --- a/src/pages/Overview/Network/index.tsx +++ b/src/pages/Overview/Network/index.tsx @@ -5,6 +5,7 @@ import WalletBalances from "./WalletBalances" import StakingOverview from "./StakingOverview" import { useFetchTvl } from "../../../hooks/useFetchTvl" import { PageComponent } from "../../../types" +import { TBTCBrdigeStats } from "./tBTCBridgeStats" const Network: PageComponent = () => { const [data, fetchtTvlData] = useFetchTvl() @@ -15,7 +16,7 @@ const Network: PageComponent = () => { return ( - + diff --git a/src/pages/Overview/Network/tBTCBridgeStats.tsx b/src/pages/Overview/Network/tBTCBridgeStats.tsx new file mode 100644 index 000000000..5d31054d9 --- /dev/null +++ b/src/pages/Overview/Network/tBTCBridgeStats.tsx @@ -0,0 +1,65 @@ +import { + BodyMd, + Box, + Card, + Divider, + H1, + H5, + LabelSm, +} from "@threshold-network/components" +import { InlineTokenBalance } from "../../../components/TokenBalance" +import Link from "../../../components/Link" +import { ExternalHref } from "../../../enums" +import { RecentDeposits } from "../../../components/tBTC/RecentDeposits" + +// TODO: fetch recent deposit from the subgraph. +const mockDeposits = [ + { + amount: "100000000000000000", + address: "0xbaf6dc2e647aeb6f510f9e318856a1bcd66c5e19", + date: "1680772306", + txHash: "1", + }, + { + amount: "155000000000000000", + address: "0xd0111cf5bf230832f422da1c6c1d0a512d4e005a", + date: "1680772306", + txHash: "2", + }, + { + amount: "2000000000000000000", + address: "0x60d0f24d97222726dd8355368cc4584500f31ae8", + date: "1680772306", + txHash: "3", + }, + { + amount: "24000000000000000000", + address: "0xdac17f958d2ee523a2206206994597c13d831ec7", + date: "1680772306", + txHash: "4", + }, +] + +export const TBTCBrdigeStats = () => { + return ( + + tBTC Bridge Stats + TVL + {/* TODO: Fetch tvl from contracts.*/} +

+ {" "} +
tBTC
+

+ $8,000,234.00 USD + + + Protocol History + + + + View on Dune Analytics + + + + ) +} From f05204615377c7dc3a4f2f8e7657897d2d772582 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 13:29:50 +0200 Subject: [PATCH 03/15] Add function that returns relative time --- src/utils/date.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/utils/date.ts b/src/utils/date.ts index d221d1c90..d6e2a3d9a 100644 --- a/src/utils/date.ts +++ b/src/utils/date.ts @@ -2,6 +2,9 @@ export const ONE_SEC_IN_MILISECONDS = 1000 export const ONE_MINUTE_IN_SECONDS = 60 export const ONE_HOUR_IN_SECONDS = 3600 export const ONE_DAY_IN_SECONDS = 86400 +export const ONE_WEEK_IN_SECONDS = ONE_DAY_IN_SECONDS * 7 +export const ONE_MONTH_IN_SECONDS = ONE_DAY_IN_SECONDS * 30 +export const ONE_YEAR_IN_SECONDS = ONE_DAY_IN_SECONDS * 365 export const dateToUnixTimestamp = (date: Date = new Date()) => { return Math.floor(date.getTime() / ONE_SEC_IN_MILISECONDS) @@ -29,3 +32,30 @@ export const formatDate = ( locales, options ) + +// unit, max diff, divisor +const unitsToDivisor: [Intl.RelativeTimeFormatUnit, number, number][] = [ + ["second", ONE_MINUTE_IN_SECONDS, 1], + ["minute", ONE_HOUR_IN_SECONDS, ONE_MINUTE_IN_SECONDS], + ["hour", ONE_DAY_IN_SECONDS, ONE_HOUR_IN_SECONDS], + ["day", ONE_WEEK_IN_SECONDS, ONE_DAY_IN_SECONDS], + ["week", ONE_MONTH_IN_SECONDS, ONE_WEEK_IN_SECONDS], + ["month", ONE_YEAR_IN_SECONDS, ONE_MONTH_IN_SECONDS], + ["year", Infinity, ONE_YEAR_IN_SECONDS], +] +const rtf = new Intl.RelativeTimeFormat("en-gb", { style: "short" }) + +export const getRelativeTime = (dateOrUnixTimestamp: Date | number): string => { + const time = + typeof dateOrUnixTimestamp === "number" + ? dateOrUnixTimestamp + : dateToUnixTimestamp(dateOrUnixTimestamp) + + const diff = Math.round(time - dateToUnixTimestamp()) + + const [unit, , divisor] = + unitsToDivisor.find(([, maxDiff]) => maxDiff > Math.abs(diff)) ?? + unitsToDivisor[0] + + return rtf.format(Math.floor(diff / divisor), unit) +} From 93933be1dc6c8b3fc9df311a554c7b8524e09872 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 13:30:56 +0200 Subject: [PATCH 04/15] Render relative time in `RecentDeposits` component --- src/components/tBTC/RecentDeposits.tsx | 6 +++--- src/pages/Overview/Network/tBTCBridgeStats.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/tBTC/RecentDeposits.tsx b/src/components/tBTC/RecentDeposits.tsx index a0b8b2574..06dc15e0d 100644 --- a/src/components/tBTC/RecentDeposits.tsx +++ b/src/components/tBTC/RecentDeposits.tsx @@ -4,11 +4,12 @@ import shortenAddress from "../../utils/shortenAddress" import Identicon from "../Identicon" import { OutlineListItem } from "../OutlineListItem" import { InlineTokenBalance } from "../TokenBalance" +import { getRelativeTime } from "../../utils/date" type RecentDeposit = { amount: string address: string - date: string + date: number txHash: string } @@ -35,8 +36,7 @@ const RecentDepositItem: FC = ({ amount, address, date }) => { {shortenAddress(address)} - {/* TODO: format date */} - {date} + {getRelativeTime(date)} ) } diff --git a/src/pages/Overview/Network/tBTCBridgeStats.tsx b/src/pages/Overview/Network/tBTCBridgeStats.tsx index 5d31054d9..877f3ff68 100644 --- a/src/pages/Overview/Network/tBTCBridgeStats.tsx +++ b/src/pages/Overview/Network/tBTCBridgeStats.tsx @@ -17,25 +17,25 @@ const mockDeposits = [ { amount: "100000000000000000", address: "0xbaf6dc2e647aeb6f510f9e318856a1bcd66c5e19", - date: "1680772306", + date: 1680776443, txHash: "1", }, { amount: "155000000000000000", address: "0xd0111cf5bf230832f422da1c6c1d0a512d4e005a", - date: "1680772306", + date: 1680772306, txHash: "2", }, { amount: "2000000000000000000", address: "0x60d0f24d97222726dd8355368cc4584500f31ae8", - date: "1680772306", + date: 1680769504, txHash: "3", }, { amount: "24000000000000000000", address: "0xdac17f958d2ee523a2206206994597c13d831ec7", - date: "1680772306", + date: 1680772306, txHash: "4", }, ] From 9872656ed1512d46901255a1a72657c49f0ab89b Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 14:16:15 +0200 Subject: [PATCH 05/15] Update `useFetchTvl` hook Take into account the tBTC v2 token total supply. Also here we fix unit test for this hook. --- src/hooks/__tests__/useFetchTvl.test.tsx | 76 +++++++++++++++++------- src/hooks/useFetchTvl.ts | 67 ++++++++++++++------- 2 files changed, 99 insertions(+), 44 deletions(-) diff --git a/src/hooks/__tests__/useFetchTvl.test.tsx b/src/hooks/__tests__/useFetchTvl.test.tsx index 1eed3f3d7..a6be479e0 100644 --- a/src/hooks/__tests__/useFetchTvl.test.tsx +++ b/src/hooks/__tests__/useFetchTvl.test.tsx @@ -14,6 +14,7 @@ import { useFetchTvl } from "../useFetchTvl" import * as useTokenModule from "../useToken" import { TokenContext } from "../../contexts/TokenContext" import * as usdUtils from "../../utils/getUsdBalance" +import { useTBTCv2TokenContract } from "../../web3/hooks/useTBTCv2TokenContract" jest.mock("../../web3/hooks", () => ({ ...(jest.requireActual("../../web3/hooks") as {}), @@ -25,6 +26,11 @@ jest.mock("../../web3/hooks", () => ({ useTStakingContract: jest.fn(), })) +jest.mock("../../web3/hooks/useTBTCv2TokenContract", () => ({ + ...(jest.requireActual("../../web3/hooks/useTBTCv2TokenContract") as {}), + useTBTCv2TokenContract: jest.fn(), +})) + jest.mock("../useETHData", () => ({ ...(jest.requireActual("../useETHData") as {}), useETHData: jest.fn(), @@ -35,7 +41,7 @@ describe("Test `useFetchTvl` hook", () => { contract: {} as any, usdConversion: 1, } as any - const tbtcContext = { + const tbtcv1Context = { contract: {} as any, usdConversion: 2, } as any @@ -49,20 +55,25 @@ describe("Test `useFetchTvl` hook", () => { contract: {} as any, usdConversion: 4, } as any - + const tBTCContext = { + contract: {} as any, + usdConversion: 2, + } as any const mockedKeepTokenStakingContract = { address: "0x1" } const mockedKeepBondingContract = { address: "0x0" } const mockedTStakingContract = { address: "0x2" } const mockedMultiCallContract = { interface: {}, address: "0x3" } const mockedKeepAssetPoolContract = { interface: {}, address: "0x4" } + const mockedtBTCTokenContract = { interface: {}, address: "0x5" } const wrapper = ({ children }) => ( {children} @@ -88,6 +99,9 @@ describe("Test `useFetchTvl` hook", () => { ;(useKeepTokenStakingContract as jest.Mock).mockReturnValue( mockedKeepTokenStakingContract ) + ;(useTBTCv2TokenContract as jest.Mock).mockReturnValue( + mockedtBTCTokenContract + ) }) test("should fetch tvl data correctly.", async () => { @@ -97,6 +111,7 @@ describe("Test `useFetchTvl` hook", () => { const coveragePoolTvl = { 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" } const multicallRequestResult = [ ethInKeepBonding.raw, @@ -104,6 +119,7 @@ describe("Test `useFetchTvl` hook", () => { coveragePoolTvl.raw, keepStaking.raw, tStaking.raw, + tBTC.raw, ] multicallRequest.mockResolvedValue(multicallRequestResult) @@ -113,27 +129,30 @@ describe("Test `useFetchTvl` hook", () => { const spyOnUseToken = jest.spyOn(useTokenModule, "useToken") const _expectedResult = { - ecdsa: ethInKeepBonding.format * mockedETHData.usdPrice, - tbtc: tbtcTokenTotalSupply.format * tbtcContext.usdConversion, - keepCoveragePool: coveragePoolTvl.format * keepContext.usdConversion, - keepStaking: keepStaking.format * keepContext.usdConversion, - tStaking: tStaking.format * tContext.usdConversion, + ecdsa: +ethInKeepBonding.format * mockedETHData.usdPrice, + tbtc: +tbtcTokenTotalSupply.format * tbtcv1Context.usdConversion, + keepCoveragePool: +coveragePoolTvl.format * keepContext.usdConversion, + keepStaking: +keepStaking.format * keepContext.usdConversion, + tStaking: +tStaking.format * tContext.usdConversion, + tBTC: +tBTC.format * tBTCContext.usdConversion, } // `FixedNumber` from `@ethersproject/bignumber` adds trailing zero so we // need to do the same here. const expectedResult = { ecdsa: `${_expectedResult.ecdsa.toString()}.0`, - tbtc: `${_expectedResult.tbtc.toString()}.0`, + tbtcv1: `${_expectedResult.tbtc.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.keepCoveragePool + _expectedResult.keepStaking + - _expectedResult.tStaking + _expectedResult.tStaking + + _expectedResult.tBTC }.0`, } @@ -147,6 +166,7 @@ describe("Test `useFetchTvl` hook", () => { expect(spyOnUseToken).toHaveBeenCalledWith(Token.Keep) expect(spyOnUseToken).toHaveBeenCalledWith(Token.TBTC) expect(spyOnUseToken).toHaveBeenCalledWith(Token.T) + expect(spyOnUseToken).toHaveBeenCalledWith(Token.TBTCV2) expect(useKeepBondingContract).toHaveBeenCalled() expect(useMulticallContract).toHaveBeenCalled() expect(useKeepAssetPoolContract).toHaveBeenCalled() @@ -160,8 +180,8 @@ describe("Test `useFetchTvl` hook", () => { args: [mockedKeepBondingContract.address], }, { - interface: tbtcContext.contract.interface, - address: tbtcContext.contract.address, + interface: tbtcv1Context.contract.interface, + address: tbtcv1Context.contract.address, method: "totalSupply", }, { @@ -181,6 +201,11 @@ describe("Test `useFetchTvl` hook", () => { method: "balanceOf", args: [mockedTStakingContract.address], }, + { + interface: tBTCContext.contract.interface, + address: tBTCContext.contract.address, + method: "totalSupply", + }, ]) result.current[1]() @@ -188,36 +213,43 @@ describe("Test `useFetchTvl` hook", () => { await waitForNextUpdate() expect(multicallRequest).toHaveBeenCalled() - expect(spyOnFormatUnits).toHaveBeenCalledTimes( - multicallRequestResult.length - ) - // The `toUsdBalance` function was called 2x times because it was called + + // The `toUsdBalance` and `spyOnFormatUnits` function was called 2x times because it was called // first on mount for every value and then after fetching on-chain data. expect(spyOnToUsdBalance).toHaveBeenCalledTimes( multicallRequestResult.length * 2 ) + expect(spyOnFormatUnits).toHaveBeenCalledTimes( + multicallRequestResult.length * 2 + ) + expect(spyOnToUsdBalance).toHaveBeenNthCalledWith( - 6, + 7, ethInKeepBonding.format, mockedETHData.usdPrice ) expect(spyOnToUsdBalance).toHaveBeenNthCalledWith( - 7, + 8, tbtcTokenTotalSupply.format, - tbtcContext.usdConversion + tbtcv1Context.usdConversion ) expect(spyOnToUsdBalance).toHaveBeenNthCalledWith( - 8, + 9, + tBTC.format, + tBTCContext.usdConversion + ) + expect(spyOnToUsdBalance).toHaveBeenNthCalledWith( + 10, coveragePoolTvl.format, keepContext.usdConversion ) expect(spyOnToUsdBalance).toHaveBeenNthCalledWith( - 9, + 11, keepStaking.format, keepContext.usdConversion ) expect(spyOnToUsdBalance).toHaveBeenNthCalledWith( - 10, + 12, tStaking.format, tContext.usdConversion ) diff --git a/src/hooks/useFetchTvl.ts b/src/hooks/useFetchTvl.ts index 811977b02..a145dbb59 100644 --- a/src/hooks/useFetchTvl.ts +++ b/src/hooks/useFetchTvl.ts @@ -1,4 +1,5 @@ import { useState, useCallback, useMemo } from "react" +import { BigNumberish } from "ethers" import { formatUnits } from "@ethersproject/units" import { useKeepBondingContract, @@ -15,51 +16,58 @@ import { toUsdBalance } from "../utils/getUsdBalance" interface TVLRawData { ecdsaTVL: string - tbtcTVL: string + tbtcv1TVL: string keepCoveragePoolTVL: string keepStakingTVL: string tStakingTVL: string + tBTC: string // TODO: add PRE and NU TVL } interface TVLData { ecdsa: string - tbtc: string + tbtcv1: string keepCoveragePool: string keepStaking: string tStaking: string + tBTC: string total: string } const initialState = { ecdsaTVL: "0", - tbtcTVL: "0", + tbtcv1TVL: "0", + tBTC: "0", keepCoveragePoolTVL: "0", keepStakingTVL: "0", tStakingTVL: "0", } -export const useFetchTvl = (): [TVLData, () => Promise] => { +export const useFetchTvl = (): [ + TVLData, + () => Promise, + TVLRawData +] => { const [rawData, setRawData] = useState(initialState) const { ecdsaTVL, - tbtcTVL, + tbtcv1TVL: tbtcTVL, keepCoveragePoolTVL, keepStakingTVL, tStakingTVL, + tBTC: tBTCTVL, } = rawData const eth = useETHData() const keep = useToken(Token.Keep) - const tbtc = useToken(Token.TBTC) + const tbtcv1 = useToken(Token.TBTC) const t = useToken(Token.T) const keepBonding = useKeepBondingContract() const multicall = useMulticallContract() const keepAssetPool = useKeepAssetPoolContract() const tTokenStaking = useTStakingContract() const keepTokenStaking = useKeepTokenStakingContract() - // TODO: fetch tbtcv2 data - // const tbtcv2 = useToken(Token.TBTCV2) + const tBTCToken = useToken(Token.TBTCV2) const fetchOnChainData = useMulticall([ { @@ -69,8 +77,8 @@ export const useFetchTvl = (): [TVLData, () => Promise] => { args: [keepBonding?.address], }, { - address: tbtc.contract?.address!, - interface: tbtc.contract?.interface!, + address: tbtcv1.contract?.address!, + interface: tbtcv1.contract?.interface!, method: "totalSupply", }, { @@ -90,6 +98,11 @@ export const useFetchTvl = (): [TVLData, () => Promise] => { method: "balanceOf", args: [tTokenStaking?.address], }, + { + address: tBTCToken.contract?.address!, + interface: tBTCToken.contract?.interface!, + method: "totalSupply", + }, ]) const fetchTVLData = useCallback(async () => { @@ -98,18 +111,20 @@ export const useFetchTvl = (): [TVLData, () => Promise] => { const [ ethInKeepBonding, - tbtcTokenTotalSupply, + tbtcv1TokenTotalSupply, coveragePoolTvl, keepStaking, tStaking, - ] = chainData.map((amount: string) => formatUnits(amount.toString())) + tBTCTokenTotalSupply, + ] = chainData.map((amount: BigNumberish) => amount.toString()) const data: TVLRawData = { ecdsaTVL: ethInKeepBonding, - tbtcTVL: tbtcTokenTotalSupply, + tbtcv1TVL: tbtcv1TokenTotalSupply, keepCoveragePoolTVL: coveragePoolTvl, keepStakingTVL: keepStaking, tStakingTVL: tStaking, + tBTC: tBTCTokenTotalSupply, } setRawData(data) @@ -117,30 +132,36 @@ export const useFetchTvl = (): [TVLData, () => Promise] => { }, [fetchOnChainData]) const data = useMemo(() => { - const ecdsa = toUsdBalance(ecdsaTVL, eth.usdPrice) + const ecdsa = toUsdBalance(formatUnits(ecdsaTVL), eth.usdPrice) - const tbtcUSD = toUsdBalance(tbtcTVL, tbtc.usdConversion) + const tbtcv1USD = toUsdBalance(formatUnits(tbtcTVL), tbtcv1.usdConversion) + const tBTCUSD = toUsdBalance(formatUnits(tBTCTVL), tBTCToken.usdConversion) const keepCoveragePool = toUsdBalance( - keepCoveragePoolTVL, + formatUnits(keepCoveragePoolTVL), keep.usdConversion ) - const keepStaking = toUsdBalance(keepStakingTVL, keep.usdConversion) + const keepStaking = toUsdBalance( + formatUnits(keepStakingTVL), + keep.usdConversion + ) - const tStaking = toUsdBalance(tStakingTVL, t.usdConversion) + const tStaking = toUsdBalance(formatUnits(tStakingTVL), t.usdConversion) return { ecdsa: ecdsa.toString(), - tbtc: tbtcUSD.toString(), + tbtcv1: tbtcv1USD.toString(), keepCoveragePool: keepCoveragePool.toString(), keepStaking: keepStaking.toString(), tStaking: tStaking.toString(), + tBTC: tBTCUSD.toString(), total: ecdsa - .addUnsafe(tbtcUSD) + .addUnsafe(tbtcv1USD) .addUnsafe(keepCoveragePool) .addUnsafe(keepStaking) .addUnsafe(tStaking) + .addUnsafe(tBTCUSD) .toString(), } as TVLData }, [ @@ -149,11 +170,13 @@ export const useFetchTvl = (): [TVLData, () => Promise] => { tbtcTVL, keepStakingTVL, tStakingTVL, + tBTCTVL, eth.usdPrice, keep.usdConversion, - tbtc.usdConversion, + tbtcv1.usdConversion, t.usdConversion, + tBTCToken.usdConversion, ]) - return [data, fetchTVLData] + return [data, fetchTVLData, rawData] } From 1dfd44722f2c92a1611c051fae220e931f6b741a Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 14:17:58 +0200 Subject: [PATCH 06/15] Display fetched tvl data for tBTC network --- src/pages/Overview/Network/index.tsx | 7 +++---- .../Overview/Network/tBTCBridgeStats.tsx | 19 +++++++++++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/pages/Overview/Network/index.tsx b/src/pages/Overview/Network/index.tsx index af6b01384..7265dec11 100644 --- a/src/pages/Overview/Network/index.tsx +++ b/src/pages/Overview/Network/index.tsx @@ -1,14 +1,13 @@ import { useEffect } from "react" import { SimpleGrid, Stack } from "@threshold-network/components" import TotalValueLocked from "./TotalValueLocked" -import WalletBalances from "./WalletBalances" import StakingOverview from "./StakingOverview" import { useFetchTvl } from "../../../hooks/useFetchTvl" import { PageComponent } from "../../../types" import { TBTCBrdigeStats } from "./tBTCBridgeStats" const Network: PageComponent = () => { - const [data, fetchtTvlData] = useFetchTvl() + const [tvlInUSD, fetchtTvlData, tvlInTokenUnits] = useFetchTvl() useEffect(() => { fetchtTvlData() @@ -16,10 +15,10 @@ const Network: PageComponent = () => { return ( - + - + ) diff --git a/src/pages/Overview/Network/tBTCBridgeStats.tsx b/src/pages/Overview/Network/tBTCBridgeStats.tsx index 877f3ff68..8cc3cc8d2 100644 --- a/src/pages/Overview/Network/tBTCBridgeStats.tsx +++ b/src/pages/Overview/Network/tBTCBridgeStats.tsx @@ -1,3 +1,4 @@ +import { FC } from "react" import { BodyMd, Box, @@ -11,6 +12,7 @@ import { InlineTokenBalance } from "../../../components/TokenBalance" import Link from "../../../components/Link" import { ExternalHref } from "../../../enums" import { RecentDeposits } from "../../../components/tBTC/RecentDeposits" +import { formatFiatCurrencyAmount } from "../../../utils/formatAmount" // TODO: fetch recent deposit from the subgraph. const mockDeposits = [ @@ -40,17 +42,26 @@ const mockDeposits = [ }, ] -export const TBTCBrdigeStats = () => { +type TBTCBrdigeStatsProps = { + tvl: string + tvlInUSD: string +} + +export const TBTCBrdigeStats: FC = ({ + tvl, + tvlInUSD, +}) => { return ( tBTC Bridge Stats TVL {/* TODO: Fetch tvl from contracts.*/}

- {" "} -
tBTC
+
tBTC

- $8,000,234.00 USD + + {formatFiatCurrencyAmount(tvlInUSD, "0,00.00")} USD + Protocol History From 060f20e47c2e4b68d9830eb5453f666e255d3954 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 15:40:39 +0200 Subject: [PATCH 07/15] Fetch recent deposits from subgraph API And display data in component. --- src/components/tBTC/RecentDeposits.tsx | 8 +-- src/hooks/tbtc/index.ts | 1 + src/hooks/tbtc/useFetchRecentDeposits.ts | 55 +++++++++++++++ src/pages/Overview/Network/index.tsx | 8 ++- .../Overview/Network/tBTCBridgeStats.tsx | 33 ++------- src/utils/subgraphAPI.ts | 67 +++++++++++++++++++ 6 files changed, 135 insertions(+), 37 deletions(-) create mode 100644 src/hooks/tbtc/useFetchRecentDeposits.ts create mode 100644 src/utils/subgraphAPI.ts diff --git a/src/components/tBTC/RecentDeposits.tsx b/src/components/tBTC/RecentDeposits.tsx index 06dc15e0d..08f18602c 100644 --- a/src/components/tBTC/RecentDeposits.tsx +++ b/src/components/tBTC/RecentDeposits.tsx @@ -5,13 +5,7 @@ import Identicon from "../Identicon" import { OutlineListItem } from "../OutlineListItem" import { InlineTokenBalance } from "../TokenBalance" import { getRelativeTime } from "../../utils/date" - -type RecentDeposit = { - amount: string - address: string - date: number - txHash: string -} +import { RecentDeposit } from "../../hooks/tbtc/useFetchRecentDeposits" type RecentDepositsProps = { deposits: RecentDeposit[] diff --git a/src/hooks/tbtc/index.ts b/src/hooks/tbtc/index.ts index 87ac00cc7..734d0c1e3 100644 --- a/src/hooks/tbtc/index.ts +++ b/src/hooks/tbtc/index.ts @@ -5,3 +5,4 @@ export * from "./useSubscribeToOptimisticMintingFinalizedEvent" export * from "./useSubsribeToDepositRevealedEvent" export * from "./useSubscribeToOptimisticMintingRequestedEvent" export * from "./useFetchDepositDetails" +export * from "./useFetchRecentDeposits" diff --git a/src/hooks/tbtc/useFetchRecentDeposits.ts b/src/hooks/tbtc/useFetchRecentDeposits.ts new file mode 100644 index 000000000..c3999c34f --- /dev/null +++ b/src/hooks/tbtc/useFetchRecentDeposits.ts @@ -0,0 +1,55 @@ +import { useEffect, useRef, useState } from "react" +import { subgraphAPI } from "../../utils/subgraphAPI" + +export type RecentDeposit = { + amount: string + address: string + date: number + txHash: string +} + +export const useFetchRecentDeposits = ( + numberOfDeposits: number = 4 +): [RecentDeposit[], boolean, string] => { + const shouldUpdateState = useRef(true) + const [deposits, setDeposits] = useState([]) + const [isFetching, setIsFetching] = useState(false) + const [error, setError] = useState("") + + useEffect(() => { + const fetch = async () => { + if (!shouldUpdateState.current) return + setIsFetching(true) + + try { + const data = await subgraphAPI.fetchRecenttBTCDeposits(numberOfDeposits) + if (!shouldUpdateState.current) return + + setDeposits( + data.map((_) => ({ + amount: _.amount, + txHash: _.txHash, + date: _.timestamp, + address: _.address, + })) + ) + } catch (error) { + if (!shouldUpdateState.current) return + + setError((error as unknown as Error).toString()) + } finally { + if (!shouldUpdateState.current) return + + setIsFetching(false) + } + } + + fetch() + + return () => { + shouldUpdateState.current = false + } + }, [numberOfDeposits]) + + return [deposits, isFetching, error] +} diff --git a/src/pages/Overview/Network/index.tsx b/src/pages/Overview/Network/index.tsx index 7265dec11..2e714ea29 100644 --- a/src/pages/Overview/Network/index.tsx +++ b/src/pages/Overview/Network/index.tsx @@ -5,9 +5,11 @@ import StakingOverview from "./StakingOverview" import { useFetchTvl } from "../../../hooks/useFetchTvl" import { PageComponent } from "../../../types" import { TBTCBrdigeStats } from "./tBTCBridgeStats" +import { useFetchRecentDeposits } from "../../../hooks/tbtc" const Network: PageComponent = () => { const [tvlInUSD, fetchtTvlData, tvlInTokenUnits] = useFetchTvl() + const [deposits, isFetching, error] = useFetchRecentDeposits() useEffect(() => { fetchtTvlData() @@ -15,7 +17,11 @@ const Network: PageComponent = () => { return ( - + diff --git a/src/pages/Overview/Network/tBTCBridgeStats.tsx b/src/pages/Overview/Network/tBTCBridgeStats.tsx index 8cc3cc8d2..134b95ecb 100644 --- a/src/pages/Overview/Network/tBTCBridgeStats.tsx +++ b/src/pages/Overview/Network/tBTCBridgeStats.tsx @@ -13,43 +13,18 @@ import Link from "../../../components/Link" import { ExternalHref } from "../../../enums" import { RecentDeposits } from "../../../components/tBTC/RecentDeposits" import { formatFiatCurrencyAmount } from "../../../utils/formatAmount" - -// TODO: fetch recent deposit from the subgraph. -const mockDeposits = [ - { - amount: "100000000000000000", - address: "0xbaf6dc2e647aeb6f510f9e318856a1bcd66c5e19", - date: 1680776443, - txHash: "1", - }, - { - amount: "155000000000000000", - address: "0xd0111cf5bf230832f422da1c6c1d0a512d4e005a", - date: 1680772306, - txHash: "2", - }, - { - amount: "2000000000000000000", - address: "0x60d0f24d97222726dd8355368cc4584500f31ae8", - date: 1680769504, - txHash: "3", - }, - { - amount: "24000000000000000000", - address: "0xdac17f958d2ee523a2206206994597c13d831ec7", - date: 1680772306, - txHash: "4", - }, -] +import { RecentDeposit } from "../../../hooks/tbtc" type TBTCBrdigeStatsProps = { tvl: string tvlInUSD: string + deposits: RecentDeposit[] } export const TBTCBrdigeStats: FC = ({ tvl, tvlInUSD, + deposits, }) => { return ( @@ -65,7 +40,7 @@ export const TBTCBrdigeStats: FC = ({ Protocol History - + View on Dune Analytics diff --git a/src/utils/subgraphAPI.ts b/src/utils/subgraphAPI.ts new file mode 100644 index 000000000..b0b8cf2e9 --- /dev/null +++ b/src/utils/subgraphAPI.ts @@ -0,0 +1,67 @@ +import axios from "axios" + +const TBTC_SUBGRAPH_URL = + "https://api.thegraph.com/subgraphs/name/suntzu93/threshold-tbtc" + +type TransactionRawResponse = { + // Actually transacion hash where the tbtc tokens were minted. + id: string + timestamp: string + deposits: { + actualAmountReceived: string + user: { + // ETH address + id: string + } + }[] +} + +const mapToRecentDepositData = (transaction: TransactionRawResponse) => { + const amount = transaction.deposits[0].actualAmountReceived + const address = transaction.deposits[0].user.id + const txHash = transaction.id + const timestamp = +transaction.timestamp + + return { + amount, + address, + txHash, + timestamp, + } +} + +const fetchRecenttBTCDeposits = async (numberOfDeposits = 4) => { + const response = await axios.post(TBTC_SUBGRAPH_URL, { + query: `query { + transactions( + where: { description: "Minting Finalized" } + first: ${numberOfDeposits} + orderBy: timestamp + orderDirection: desc + ) { + id + timestamp + deposits { + actualAmountReceived + user { + id + } + } + } + }`, + }) + + if (response.data && response.data.errors) { + const errorMsg = "Failed to fetch data from tBTC v2 subgraph API." + console.error(errorMsg, response.data.errors) + throw new Error(errorMsg) + } + + return (response.data.data.transactions as TransactionRawResponse[]).map( + mapToRecentDepositData + ) +} + +export const subgraphAPI = { + fetchRecenttBTCDeposits, +} From fdb995a61476bf4c5f164ffc7cb7e405f64feb61 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 16:47:03 +0200 Subject: [PATCH 08/15] Move common parts to a separate component To use some tBTC stats in other places in T dapp. --- src/components/tBTC/RecentDeposits.tsx | 17 +++-- src/components/tBTC/Stats.tsx | 64 +++++++++++++++++++ src/components/tBTC/index.ts | 1 + .../Overview/Network/tBTCBridgeStats.tsx | 44 +++---------- 4 files changed, 86 insertions(+), 40 deletions(-) create mode 100644 src/components/tBTC/Stats.tsx diff --git a/src/components/tBTC/RecentDeposits.tsx b/src/components/tBTC/RecentDeposits.tsx index 08f18602c..6c72ccd56 100644 --- a/src/components/tBTC/RecentDeposits.tsx +++ b/src/components/tBTC/RecentDeposits.tsx @@ -1,5 +1,5 @@ import { FC } from "react" -import { BodySm, List, HStack } from "@threshold-network/components" +import { BodySm, List, HStack, ListProps } from "@threshold-network/components" import shortenAddress from "../../utils/shortenAddress" import Identicon from "../Identicon" import { OutlineListItem } from "../OutlineListItem" @@ -7,12 +7,19 @@ import { InlineTokenBalance } from "../TokenBalance" import { getRelativeTime } from "../../utils/date" import { RecentDeposit } from "../../hooks/tbtc/useFetchRecentDeposits" -type RecentDepositsProps = { +export type RecentDepositsProps = { deposits: RecentDeposit[] -} +} & ListProps -export const RecentDeposits: FC = ({ deposits }) => { - return {deposits.map(renderRecentDeposit)} +export const RecentDeposits: FC = ({ + deposits, + ...restProps +}) => { + return ( + + {deposits.map(renderRecentDeposit)} + + ) } const RecentDepositItem: FC = ({ amount, address, date }) => { diff --git a/src/components/tBTC/Stats.tsx b/src/components/tBTC/Stats.tsx new file mode 100644 index 000000000..d28d3c5e0 --- /dev/null +++ b/src/components/tBTC/Stats.tsx @@ -0,0 +1,64 @@ +import { ComponentProps, FC } from "react" +import { BodyMd, Box, BoxProps, H1, H5 } from "@threshold-network/components" +import { InlineTokenBalance } from "../TokenBalance" +import { formatFiatCurrencyAmount } from "../../utils/formatAmount" +import { RecentDeposits, RecentDepositsProps } from "./RecentDeposits" +import { ExternalHref } from "../../enums" +import { RecentDeposit } from "../../hooks/tbtc" +import Link from "../Link" + +export type TVLProps = { + tvl: string + tvlInUSD: string +} + +export const TVL: FC = ({ tvl, tvlInUSD }) => { + return ( + <> + TVL +

+
tBTC
+

+ + {formatFiatCurrencyAmount(tvlInUSD, "0,00.00")} USD + + + ) +} + +export type ProtocolHistoryProps = { + deposits: RecentDeposit[] +} + +export const ProtocolHistoryTitle: FC> = ( + props +) => ( + + Protocol History + +) + +export const ProtocolHistoryViewMoreLink: FC = (props) => ( + + + View on Dune Analytics + + +) + +export const ProtocolHistoryRecentDeposits: FC = ({ + deposits, + ...restProps +}) => + +export const DefaultProtocolHistory: FC = ({ + deposits, +}) => { + return ( + <> + + + + + ) +} diff --git a/src/components/tBTC/index.ts b/src/components/tBTC/index.ts index be61e49b7..564c7c00d 100644 --- a/src/components/tBTC/index.ts +++ b/src/components/tBTC/index.ts @@ -1,2 +1,3 @@ export * from "./TakeNoteList" export * from "./Links" +export * from "./Stats" diff --git a/src/pages/Overview/Network/tBTCBridgeStats.tsx b/src/pages/Overview/Network/tBTCBridgeStats.tsx index 134b95ecb..0b5da69aa 100644 --- a/src/pages/Overview/Network/tBTCBridgeStats.tsx +++ b/src/pages/Overview/Network/tBTCBridgeStats.tsx @@ -1,25 +1,13 @@ import { FC } from "react" +import { Card, Divider, LabelSm } from "@threshold-network/components" import { - BodyMd, - Box, - Card, - Divider, - H1, - H5, - LabelSm, -} from "@threshold-network/components" -import { InlineTokenBalance } from "../../../components/TokenBalance" -import Link from "../../../components/Link" -import { ExternalHref } from "../../../enums" -import { RecentDeposits } from "../../../components/tBTC/RecentDeposits" -import { formatFiatCurrencyAmount } from "../../../utils/formatAmount" -import { RecentDeposit } from "../../../hooks/tbtc" + DefaultProtocolHistory, + ProtocolHistoryProps, + TVL, + TVLProps, +} from "../../../components/tBTC" -type TBTCBrdigeStatsProps = { - tvl: string - tvlInUSD: string - deposits: RecentDeposit[] -} +type TBTCBrdigeStatsProps = ProtocolHistoryProps & TVLProps export const TBTCBrdigeStats: FC = ({ tvl, @@ -29,23 +17,9 @@ export const TBTCBrdigeStats: FC = ({ return ( tBTC Bridge Stats - TVL - {/* TODO: Fetch tvl from contracts.*/} -

-
tBTC
-

- - {formatFiatCurrencyAmount(tvlInUSD, "0,00.00")} USD - - + - Protocol History - - - - View on Dune Analytics - - + ) } From 721c248d61072c416adcbbb68bda0c2afc4b7450 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 16:48:33 +0200 Subject: [PATCH 09/15] Update the empty state of the deposit page Display tBTC stats as an empty state if user is not connected with a wallet. --- .../Bridge/MintingCard/MintingFlowRouter.tsx | 48 ++++++++++++++++--- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/src/pages/tBTC/Bridge/MintingCard/MintingFlowRouter.tsx b/src/pages/tBTC/Bridge/MintingCard/MintingFlowRouter.tsx index 11a80d964..ba36ab218 100644 --- a/src/pages/tBTC/Bridge/MintingCard/MintingFlowRouter.tsx +++ b/src/pages/tBTC/Bridge/MintingCard/MintingFlowRouter.tsx @@ -10,11 +10,19 @@ import { useWeb3React } from "@web3-react/core" import SubmitTxButton from "../../../../components/SubmitTxButton" import { useModal } from "../../../../hooks/useModal" import { ModalType } from "../../../../enums" -import { BridgeContractLink } from "../../../../components/tBTC" +import { + BridgeContractLink, + ProtocolHistoryRecentDeposits, + ProtocolHistoryTitle, + ProtocolHistoryViewMoreLink, + TVL, +} from "../../../../components/tBTC" import { TbtcMintingCardTitle } from "../components/TbtcMintingCardTitle" import { useRemoveDepositData } from "../../../../hooks/tbtc/useRemoveDepositData" import { useAppDispatch } from "../../../../hooks/store" import { tbtcSlice } from "../../../../store/tbtc" +import { useFetchTvl } from "../../../../hooks/useFetchTvl" +import { useFetchRecentDeposits } from "../../../../hooks/tbtc" const MintingFlowRouterBase = () => { const dispatch = useAppDispatch() @@ -80,20 +88,46 @@ const MintingFlowRouterBase = () => { export const MintingFlowRouter: FC = () => { const { active } = useWeb3React() + const [tvlInUSD, fetchTvl, tvl] = useFetchTvl() + const [deposits] = useFetchRecentDeposits(3) + + useEffect(() => { + fetchTvl() + }, [fetchTvl]) return ( {active ? ( - + <> + + + + + ) : ( <> -
Connect wallet to mint tBTC
- + +
Ready to mint tBTC?
+ + + + + )} - - - ) } From abdaa98cd0cbc67f57fd9601996fef0760f0bc63 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 6 Apr 2023 17:47:21 +0200 Subject: [PATCH 10/15] Make protocol history item clickable We want to redirect users to transaction details in the blockexplorer. --- src/components/ViewInBlockExplorer.tsx | 2 +- src/components/tBTC/RecentDeposits.tsx | 59 ++++++++++++++++++++------ 2 files changed, 48 insertions(+), 13 deletions(-) diff --git a/src/components/ViewInBlockExplorer.tsx b/src/components/ViewInBlockExplorer.tsx index 2649da6f5..8a149eb70 100644 --- a/src/components/ViewInBlockExplorer.tsx +++ b/src/components/ViewInBlockExplorer.tsx @@ -9,7 +9,7 @@ import { supportedChainId } from "../utils/getEnvVariable" export type Chain = "bitcoin" | "ethereum" -const createLinkToBlockExplorerForChain: Record< +export const createLinkToBlockExplorerForChain: Record< Chain, (id: string, type: ExplorerDataType) => string > = { diff --git a/src/components/tBTC/RecentDeposits.tsx b/src/components/tBTC/RecentDeposits.tsx index 6c72ccd56..e9f2be83d 100644 --- a/src/components/tBTC/RecentDeposits.tsx +++ b/src/components/tBTC/RecentDeposits.tsx @@ -1,11 +1,23 @@ import { FC } from "react" -import { BodySm, List, HStack, ListProps } from "@threshold-network/components" +import { + BodySm, + List, + HStack, + ListProps, + LinkBox, + LinkOverlay, + Link, +} from "@threshold-network/components" import shortenAddress from "../../utils/shortenAddress" import Identicon from "../Identicon" import { OutlineListItem } from "../OutlineListItem" import { InlineTokenBalance } from "../TokenBalance" import { getRelativeTime } from "../../utils/date" import { RecentDeposit } from "../../hooks/tbtc/useFetchRecentDeposits" +import ViewInBlockExplorer, { + createLinkToBlockExplorerForChain, +} from "../ViewInBlockExplorer" +import { ExplorerDataType } from "../../utils/createEtherscanLink" export type RecentDepositsProps = { deposits: RecentDeposit[] @@ -22,23 +34,46 @@ export const RecentDeposits: FC = ({ ) } -const RecentDepositItem: FC = ({ amount, address, date }) => { +const RecentDepositItem: FC = ({ + amount, + address, + date, + txHash, +}) => { return ( - - - - + + + + + + {shortenAddress(address)} {getRelativeTime(date)} - + ) } From e794f298f9b76c06920e65c8edfc7130d7ad88b2 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Mon, 17 Apr 2023 12:15:50 +0200 Subject: [PATCH 11/15] Rename tBTC stats component `DefaultProtocolHistory` -> `ProtocolHistory` --- src/components/tBTC/Stats.tsx | 4 +--- src/pages/Overview/Network/tBTCBridgeStats.tsx | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/tBTC/Stats.tsx b/src/components/tBTC/Stats.tsx index d28d3c5e0..5501d0e36 100644 --- a/src/components/tBTC/Stats.tsx +++ b/src/components/tBTC/Stats.tsx @@ -51,9 +51,7 @@ export const ProtocolHistoryRecentDeposits: FC = ({ ...restProps }) => -export const DefaultProtocolHistory: FC = ({ - deposits, -}) => { +export const ProtocolHistory: FC = ({ deposits }) => { return ( <> diff --git a/src/pages/Overview/Network/tBTCBridgeStats.tsx b/src/pages/Overview/Network/tBTCBridgeStats.tsx index 0b5da69aa..7410f64a2 100644 --- a/src/pages/Overview/Network/tBTCBridgeStats.tsx +++ b/src/pages/Overview/Network/tBTCBridgeStats.tsx @@ -1,7 +1,7 @@ import { FC } from "react" import { Card, Divider, LabelSm } from "@threshold-network/components" import { - DefaultProtocolHistory, + ProtocolHistory, ProtocolHistoryProps, TVL, TVLProps, @@ -19,7 +19,7 @@ export const TBTCBrdigeStats: FC = ({ tBTC Bridge Stats - + ) } From 197bd1d10ddb4b8b427b80db02604fda44b2d5df Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Mon, 17 Apr 2023 12:19:08 +0200 Subject: [PATCH 12/15] Fix typos in comments --- src/hooks/__tests__/useFetchTvl.test.tsx | 5 +++-- src/utils/subgraphAPI.ts | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/hooks/__tests__/useFetchTvl.test.tsx b/src/hooks/__tests__/useFetchTvl.test.tsx index a6be479e0..7b0444fba 100644 --- a/src/hooks/__tests__/useFetchTvl.test.tsx +++ b/src/hooks/__tests__/useFetchTvl.test.tsx @@ -214,8 +214,9 @@ describe("Test `useFetchTvl` hook", () => { expect(multicallRequest).toHaveBeenCalled() - // The `toUsdBalance` and `spyOnFormatUnits` function was called 2x times because it was called - // first on mount for every value and then after fetching on-chain data. + // The `toUsdBalance` and `spyOnFormatUnits` function were called 2x times + // because they were called called first on mount for every value and then + // after fetching on-chain data. expect(spyOnToUsdBalance).toHaveBeenCalledTimes( multicallRequestResult.length * 2 ) diff --git a/src/utils/subgraphAPI.ts b/src/utils/subgraphAPI.ts index b0b8cf2e9..fdaacf35e 100644 --- a/src/utils/subgraphAPI.ts +++ b/src/utils/subgraphAPI.ts @@ -4,7 +4,7 @@ const TBTC_SUBGRAPH_URL = "https://api.thegraph.com/subgraphs/name/suntzu93/threshold-tbtc" type TransactionRawResponse = { - // Actually transacion hash where the tbtc tokens were minted. + // Actual transaction hash where the tBTC tokens were minted. id: string timestamp: string deposits: { From 713bf2f3874dab6877beeab155e472a724f1de9b Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Mon, 17 Apr 2023 12:22:24 +0200 Subject: [PATCH 13/15] Add comment to `TransactionRawResponse` type Clarify in comment that the `timestamp` field is in seconds. --- src/utils/subgraphAPI.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/subgraphAPI.ts b/src/utils/subgraphAPI.ts index fdaacf35e..2fb14bdca 100644 --- a/src/utils/subgraphAPI.ts +++ b/src/utils/subgraphAPI.ts @@ -6,6 +6,7 @@ const TBTC_SUBGRAPH_URL = type TransactionRawResponse = { // Actual transaction hash where the tBTC tokens were minted. id: string + // Unix timestamps in seconds. timestamp: string deposits: { actualAmountReceived: string From c0b941fc80877eb599b8f9c614a363c7d42d43e2 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Mon, 17 Apr 2023 12:26:59 +0200 Subject: [PATCH 14/15] Reneame subgraph api function We should write `TBTC` (started with capital `T`) when it's in the middle of the word that is writtne in camelCase convention. Everywhere else we should stick to `tBTC`. --- src/hooks/tbtc/useFetchRecentDeposits.ts | 2 +- src/utils/subgraphAPI.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/hooks/tbtc/useFetchRecentDeposits.ts b/src/hooks/tbtc/useFetchRecentDeposits.ts index c3999c34f..13360dfb9 100644 --- a/src/hooks/tbtc/useFetchRecentDeposits.ts +++ b/src/hooks/tbtc/useFetchRecentDeposits.ts @@ -22,7 +22,7 @@ export const useFetchRecentDeposits = ( setIsFetching(true) try { - const data = await subgraphAPI.fetchRecenttBTCDeposits(numberOfDeposits) + const data = await subgraphAPI.fetchRecentTBTCDeposits(numberOfDeposits) if (!shouldUpdateState.current) return setDeposits( diff --git a/src/utils/subgraphAPI.ts b/src/utils/subgraphAPI.ts index 2fb14bdca..b03cfeca7 100644 --- a/src/utils/subgraphAPI.ts +++ b/src/utils/subgraphAPI.ts @@ -31,7 +31,7 @@ const mapToRecentDepositData = (transaction: TransactionRawResponse) => { } } -const fetchRecenttBTCDeposits = async (numberOfDeposits = 4) => { +const fetchRecentTBTCDeposits = async (numberOfDeposits = 4) => { const response = await axios.post(TBTC_SUBGRAPH_URL, { query: `query { transactions( @@ -64,5 +64,5 @@ const fetchRecenttBTCDeposits = async (numberOfDeposits = 4) => { } export const subgraphAPI = { - fetchRecenttBTCDeposits, + fetchRecentTBTCDeposits, } From 4324da8dd2d66c60caee8bc9b12a7e0333f7e7b6 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Mon, 17 Apr 2023 12:29:52 +0200 Subject: [PATCH 15/15] Fix typo in component name `TBTCBrdigeStats` -> `TBTCBridgeStats` --- src/pages/Overview/Network/index.tsx | 4 ++-- src/pages/Overview/Network/tBTCBridgeStats.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/Overview/Network/index.tsx b/src/pages/Overview/Network/index.tsx index 2e714ea29..2306a5184 100644 --- a/src/pages/Overview/Network/index.tsx +++ b/src/pages/Overview/Network/index.tsx @@ -4,7 +4,7 @@ import TotalValueLocked from "./TotalValueLocked" import StakingOverview from "./StakingOverview" import { useFetchTvl } from "../../../hooks/useFetchTvl" import { PageComponent } from "../../../types" -import { TBTCBrdigeStats } from "./tBTCBridgeStats" +import { TBTCBridgeStats } from "./tBTCBridgeStats" import { useFetchRecentDeposits } from "../../../hooks/tbtc" const Network: PageComponent = () => { @@ -17,7 +17,7 @@ const Network: PageComponent = () => { return ( - = ({ +export const TBTCBridgeStats: FC = ({ tvl, tvlInUSD, deposits,