made gauges tvl show even when not connected (#83)

baofinance · Nov 26, 2022 · 60459d9 · 60459d9
1 parent a97ae48
commit 60459d9
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 47 deletions.
diff --git a/src/hooks/gauges/useGaugeInfo.ts b/src/hooks/gauges/useGaugeInfo.ts
@@ -3,7 +3,6 @@ import { useWeb3React } from '@web3-react/core'
 import { BigNumber } from 'ethers'
 import { ActiveSupportedGauge } from '../../bao/lib/types'
 import useBao from '../base/useBao'
-import useTransactionHandler from '../base/useTransactionHandler'
 import { providerKey } from '@/utils/index'
 import { useQuery } from '@tanstack/react-query'
 import { useTxReceiptUpdater } from '@/hooks/base/useTransactionProvider'
@@ -23,8 +22,8 @@ type GaugeInfo = {
 const useGaugeInfo = (gauge: ActiveSupportedGauge): GaugeInfo => {
 	const { library, account, chainId } = useWeb3React()
 	const bao = useBao()
-	const { txSuccess } = useTransactionHandler()
 
+	const enabled = !!bao && !!account && !!gauge
 	const { data: gaugeInfo, refetch } = useQuery(
 		['@/hooks/vebao/useGaugeInfo', providerKey(library, account, chainId), gauge.gaugeContract.address],
 		async () => {
@@ -80,12 +79,15 @@ const useGaugeInfo = (gauge: ActiveSupportedGauge): GaugeInfo => {
 			}
 		},
 		{
-			enabled: !!bao && !!account && !!gauge,
+			enabled,
 		},
 	)
 
-	useTxReceiptUpdater(refetch)
-	useBlockUpdater(refetch, 10)
+	const _refetch = () => {
+		if (enabled) refetch()
+	}
+	useTxReceiptUpdater(_refetch)
+	useBlockUpdater(_refetch, 10)
 
 	return gaugeInfo
 }

diff --git a/src/hooks/gauges/useGaugeTVL.ts b/src/hooks/gauges/useGaugeTVL.ts
@@ -1,33 +1,30 @@
 import Config from '@/bao/lib/config'
 import { ActiveSupportedGauge } from '@/bao/lib/types'
-import useTransactionHandler from '@/hooks/base/useTransactionHandler'
-import useTransactionProvider from '@/hooks/base/useTransactionProvider'
 import { CurveLp__factory, Uni_v2_lp__factory } from '@/typechain/factories'
 import GraphUtil from '@/utils/graph'
 import Multicall from '@/utils/multicall'
 import { fromDecimal } from '@/utils/numberFormat'
 import { useQuery } from '@tanstack/react-query'
 import { useWeb3React } from '@web3-react/core'
 import { BigNumber } from 'ethers'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import useBao from '../base/useBao'
 import usePrice from '../base/usePrice'
 import useBasketInfo from '../baskets/useBasketInfo'
 import useBaskets from '../baskets/useBaskets'
 import useComposition from '../baskets/useComposition'
 import useNav from '../baskets/useNav'
-import useGaugeInfo from './useGaugeInfo'
+//import useGaugeInfo from './useGaugeInfo'
 import usePoolInfo from './usePoolInfo'
+import { providerKey } from '@/utils/index'
+import { useTxReceiptUpdater } from '@/hooks/base/useTransactionProvider'
+import { useBlockUpdater } from '@/hooks/base/useBlock'
 
 const useGaugeTVL = (gauge: ActiveSupportedGauge) => {
 	const { library, chainId, account } = useWeb3React()
-	const [gaugeTVL, setGaugeTVL] = useState<BigNumber | undefined>()
-	const [boostedTVL, setBoostedTVL] = useState<BigNumber | undefined>()
 	const bao = useBao()
-	const { txSuccess } = useTransactionHandler()
-	const { transactions } = useTransactionProvider()
 	const poolInfo = usePoolInfo(gauge)
-	const gaugeInfo = useGaugeInfo(gauge)
+	//const gaugeInfo = useGaugeInfo(gauge)
 
 	//Get bSTBL price. Probably not the best way to do so, but it works for now.
 	const baskets = useBaskets()
@@ -81,40 +78,57 @@ const useGaugeTVL = (gauge: ActiveSupportedGauge) => {
 		)
 	}, [bSTBLPrice, baoPrice, baoUSDPrice, daiPrice, ethPrice, gauge.symbol, poolInfo, threeCrvPrice])
 
-	const fetchGaugeTVL = useCallback(async () => {
-		const curveLpContract = CurveLp__factory.connect(gauge.lpAddress, library)
-		const uniLpContract = Uni_v2_lp__factory.connect(gauge.lpAddress, library)
-		const query = Multicall.createCallContext([
-			gauge.type.toLowerCase() === 'curve'
-				? {
-						contract: curveLpContract,
-						ref: gauge?.lpAddress,
-						calls: [{ method: 'balanceOf', params: [gauge?.gaugeAddress] }, { method: 'totalSupply' }],
-				  }
-				: {
-						contract: uniLpContract,
-						ref: gauge?.lpAddress,
-						calls: [{ method: 'balanceOf', params: [gauge?.gaugeAddress] }, { method: 'totalSupply' }],
-				  },
-		])
-		const { [gauge?.lpAddress]: res0 } = Multicall.parseCallResults(await bao.multicall.call(query))
+	const tvlDataEnabled = !!gauge && !!library && !!bao && !!poolTVL
+	const { data: tvlData, refetch } = useQuery(
+		['@/hooks/gauges/useGaugeTVL', providerKey(library, account, chainId), poolTVL, gauge.gaugeAddress],
+		async () => {
+			const curveLpContract = CurveLp__factory.connect(gauge.lpAddress, library)
+			const uniLpContract = Uni_v2_lp__factory.connect(gauge.lpAddress, library)
+			const query = Multicall.createCallContext([
+				gauge.type.toLowerCase() === 'curve'
+					? {
+							contract: curveLpContract,
+							ref: gauge?.lpAddress,
+							calls: [{ method: 'balanceOf', params: [gauge?.gaugeAddress] }, { method: 'totalSupply' }],
+					  }
+					: {
+							contract: uniLpContract,
+							ref: gauge?.lpAddress,
+							calls: [{ method: 'balanceOf', params: [gauge?.gaugeAddress] }, { method: 'totalSupply' }],
+					  },
+			])
+			const { [gauge?.lpAddress]: res0 } = Multicall.parseCallResults(await bao.multicall.call(query))
+
+			const gaugeBalance = res0[0].values[0]
+			const totalSupply = res0[1].values[0]
+			const lpPrice = poolTVL && poolTVL.div(totalSupply)
+			const gaugeTVL = lpPrice && lpPrice.mul(gaugeBalance)
 
-		const gaugeBalance = res0[0].values[0]
-		const totalSupply = res0[1].values[0]
-		const lpPrice = poolTVL && poolTVL.div(totalSupply)
-		const gaugeTVL = lpPrice && lpPrice.mul(gaugeBalance)
-		const boostedTVL = lpPrice && gaugeInfo && lpPrice.mul(gaugeInfo.workingSupply)
+			// FIXME: please do boosted TVL from a different hook Vital! When you see this lol. Trust me.
+			//const boostedTVL = lpPrice && gaugeInfo && lpPrice.mul(gaugeInfo.workingSupply)
+			const boostedTVL = BigNumber.from(0)
 
-		setGaugeTVL(gaugeTVL)
-		setBoostedTVL(boostedTVL)
-	}, [gauge, library, bao, poolTVL, gaugeInfo])
+			return {
+				gaugeTVL,
+				boostedTVL,
+			}
+		},
+		{
+			enabled: tvlDataEnabled,
+			placeholderData: {
+				gaugeTVL: undefined,
+				boostedTVL: undefined,
+			},
+		},
+	)
 
-	useEffect(() => {
-		if (!(bao && account && gauge)) return
-		fetchGaugeTVL()
-	}, [account, bao, gauge, transactions, txSuccess, fetchGaugeTVL])
+	const _refetch = () => {
+		if (tvlDataEnabled) refetch()
+	}
+	useTxReceiptUpdater(_refetch)
+	useBlockUpdater(_refetch, 10)
 
-	return { gaugeTVL, boostedTVL }
+	return tvlData
 }
 
 export default useGaugeTVL
diff --git a/src/hooks/gauges/usePoolInfo.ts b/src/hooks/gauges/usePoolInfo.ts
@@ -60,9 +60,9 @@ const usePoolInfo = (gauge: ActiveSupportedGauge): PoolInfoTypes => {
 	}, [account, library, gauge, chainId, bao.multicall])
 
 	useEffect(() => {
-		if (!(bao && account && gauge)) return
+		if (!(bao && gauge)) return
 		fetchPoolInfo()
-	}, [bao, account, gauge, txSuccess])
+	}, [bao, gauge, txSuccess, fetchPoolInfo])
 
 	return poolInfo
 }

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -25,7 +25,7 @@ import TransactionProvider from '@/contexts/Transactions'
 import TxPopup from '@/components/TxPopup'
 import '@/components/TxPopup/styles.css'
 
-console.log('v1.0.4')
+console.log('v1.0.5')
 
 function getLibrary(provider: any): Web3Provider {
 	const library = new Web3Provider(provider)