diff --git a/src/@utils/subgraph.ts b/src/@utils/subgraph.ts index ffeeb1080..6490db03f 100644 --- a/src/@utils/subgraph.ts +++ b/src/@utils/subgraph.ts @@ -25,6 +25,7 @@ import { } from '../@types/subgraph/PoolShares' import { OrdersData_orders as OrdersData } from '../@types/subgraph/OrdersData' import { UserSalesQuery as UsersSalesList } from '../@types/subgraph/UserSalesQuery' +import { PoolLiquidity } from 'src/@types/subgraph/PoolLiquidity' export interface UserLiquidity { price: string @@ -281,6 +282,44 @@ const TopSalesQuery = gql` } ` +const poolLiquidityQuery = gql` + query PoolLiquidity($pool: ID!, $owner: String!) { + pool(id: $pool) { + id + totalShares + poolFee + opfFee + marketFee + spotPrice + baseToken { + address + symbol + } + baseTokenWeight + baseTokenLiquidity + datatoken { + address + symbol + } + datatokenWeight + datatokenLiquidity + shares(where: { user: $owner }) { + shares + } + } + } +` + +const userPoolShareQuery = gql` + query PoolShare($pool: ID!, $user: String!) { + pool(id: $pool) { + shares(where: { user: $user }) { + shares + } + } + } +` + export function getSubgraphUri(chainId: number): string { const config = getOceanConfig(chainId) return config.subgraphUri @@ -776,3 +815,37 @@ export async function getTopAssetsPublishers( return publisherSales.slice(0, nrItems) } + +export async function getPoolData( + chainId: number, + pool: string, + owner: string +) { + const queryVariables = { + pool: pool.toLowerCase(), + owner: owner.toLowerCase() + } + const response: OperationResult = await fetchData( + poolLiquidityQuery, + queryVariables, + getQueryContext(chainId) + ) + return response?.data?.pool +} + +export async function getUserPoolShareBalance( + chainId: number, + pool: string, + accountId: string +): Promise { + const queryVariables = { + pool: pool.toLowerCase(), + user: accountId.toLowerCase() + } + const response: OperationResult = await fetchData( + userPoolShareQuery, + queryVariables, + getQueryContext(chainId) + ) + return response?.data?.pool?.shares[0]?.shares || '0' +} diff --git a/src/components/Asset/AssetActions/AssetActionHistoryTable.module.css b/src/components/Asset/AssetActions/AssetActionHistoryTable.module.css index 40d5064eb..63be54ad2 100644 --- a/src/components/Asset/AssetActions/AssetActionHistoryTable.module.css +++ b/src/components/Asset/AssetActions/AssetActionHistoryTable.module.css @@ -1,5 +1,5 @@ .actions { - /* composes: container from './AssetActions/Pool/index.module.css'; */ + composes: container from './Pool/index.module.css'; border-top: 1px solid var(--border-color); margin-top: calc(var(--spacer) / 1.5); padding: calc(var(--spacer) / 1.5); @@ -12,7 +12,7 @@ } .title { - /* composes: title from './AssetActions/Pool/index.module.css'; */ + composes: title from './Pool/index.module.css'; margin-bottom: 0; display: flex; align-items: center; diff --git a/src/components/Asset/AssetActions/Pool/Add/index.tsx b/src/components/Asset/AssetActions/Pool/Add/index.tsx index dd6c73115..2e058d38a 100644 --- a/src/components/Asset/AssetActions/Pool/Add/index.tsx +++ b/src/components/Asset/AssetActions/Pool/Add/index.tsx @@ -25,22 +25,22 @@ const initialValues: FormAddLiquidity = { export default function Add({ setShowAdd, - refreshInfo, poolAddress, totalPoolTokens, totalBalance, swapFee, dtSymbol, - dtAddress + dtAddress, + fetchAllData }: { setShowAdd: (show: boolean) => void - refreshInfo: () => void poolAddress: string totalPoolTokens: string totalBalance: PoolBalance swapFee: string dtSymbol: string dtAddress: string + fetchAllData: () => void }): ReactElement { const { accountId, balance, web3 } = useWeb3() const { isAssetNetwork } = useAsset() @@ -76,7 +76,7 @@ export default function Add({ setDtBalance(dtBalance) } getDtBalance() - }, [web3, accountId, dtAddress, coin]) + }, [web3, accountId, dtAddress, coin, isAssetNetwork]) // Get maximum amount for either OCEAN or datatoken useEffect(() => { @@ -113,7 +113,7 @@ export default function Add({ // : await ocean.pool.addDTLiquidity(accountId, poolAddress, `${amount}`) // setTxId(result?.transactionHash) // resetForm() - // refreshInfo() + fetchAllData() } catch (error) { console.error(error.message) toast.error(error.message) diff --git a/src/components/Asset/AssetActions/Pool/Remove.tsx b/src/components/Asset/AssetActions/Pool/Remove.tsx index b9048a441..a705e7431 100644 --- a/src/components/Asset/AssetActions/Pool/Remove.tsx +++ b/src/components/Asset/AssetActions/Pool/Remove.tsx @@ -25,18 +25,18 @@ import content from '../../../../../content/price.json' export default function Remove({ setShowRemove, - refreshInfo, poolAddress, poolTokens, totalPoolTokens, - dtSymbol + dtSymbol, + fetchAllData }: { setShowRemove: (show: boolean) => void - refreshInfo: () => void poolAddress: string poolTokens: string totalPoolTokens: string dtSymbol: string + fetchAllData: () => void }): ReactElement { const slippagePresets = ['5', '10', '15', '25', '50'] const { accountId } = useWeb3() @@ -74,7 +74,7 @@ export default function Remove({ // minOceanAmount // ) // setTxId(result?.transactionHash) - // refreshInfo() + fetchAllData() } catch (error) { LoggerInstance.error(error.message) toast.error(error.message) diff --git a/src/components/Asset/AssetActions/Pool/index.tsx b/src/components/Asset/AssetActions/Pool/index.tsx index e6fc0899a..ef5a8d035 100644 --- a/src/components/Asset/AssetActions/Pool/index.tsx +++ b/src/components/Asset/AssetActions/Pool/index.tsx @@ -13,380 +13,369 @@ import TokenList from './TokenList' import AssetActionHistoryTable from '../AssetActionHistoryTable' import Graph from './Graph' import { useAsset } from '@context/Asset' -import { gql, OperationResult } from 'urql' -import { PoolLiquidity } from '../../../../@types/subgraph/PoolLiquidity' +import { PoolLiquidity_pool as PoolLiquidityData } from '../../../../@types/subgraph/PoolLiquidity' import { useWeb3 } from '@context/Web3' import PoolTransactions from '@shared/PoolTransactions' -import { fetchData, getQueryContext } from '@utils/subgraph' import { isValidNumber } from '@utils/numbers' import Decimal from 'decimal.js' import content from '../../../../../content/price.json' +import { getPoolData, getUserPoolShareBalance } from '@utils/subgraph' Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 }) -const poolLiquidityQuery = gql` - query PoolLiquidity($pool: ID!, $owner: String) { - pool(id: $pool) { - id - totalShares - poolFee - opfFee - marketFee - spotPrice - baseToken { - address - symbol - } - baseTokenWeight - baseTokenLiquidity - datatoken { - address - symbol - } - datatokenWeight - datatokenLiquidity - shares(where: { user: $owner }) { - shares - } - } - } -` +function getWeight(weight: string) { + return isValidNumber(weight) ? new Decimal(weight).mul(10).toString() : '0' +} -const userPoolShareQuery = gql` - query PoolShare($pool: ID!, $user: String) { - pool(id: $pool) { - id - shares(where: { user: $user }) { - shares - } - } - } -` +interface PoolInfo { + poolFee: string + weightOcean: string + weightDt: string + dtSymbol: string + oceanSymbol: string + totalPoolTokens: string + totalLiquidityInOcean: Decimal +} + +interface PoolInfoUser { + totalLiquidityInOcean: Decimal + liquidity: PoolBalance + poolShares: string + poolShare: string // in % +} + +const initialPoolInfo: Partial = { + totalLiquidityInOcean: new Decimal(0) +} + +const initialPoolInfoUser: Partial = { + totalLiquidityInOcean: new Decimal(0) +} + +const initialPoolInfoCreator: Partial = initialPoolInfoUser export default function Pool(): ReactElement { const { accountId } = useWeb3() - const [dtSymbol, setDtSymbol] = useState() - const [oceanSymbol, setOceanSymbol] = useState() const { isInPurgatory, ddo, owner, price, refreshInterval, isAssetNetwork } = useAsset() - const [poolTokens, setPoolTokens] = useState() - const [totalPoolTokens, setTotalPoolTokens] = useState() - const [userLiquidity, setUserLiquidity] = useState() - const [swapFee, setSwapFee] = useState() - const [weightOcean, setWeightOcean] = useState() - const [weightDt, setWeightDt] = useState() + const [poolData, setPoolData] = useState() + const [poolInfo, setPoolInfo] = useState( + initialPoolInfo as PoolInfo + ) + const [poolInfoOwner, setPoolInfoOwner] = useState( + initialPoolInfoCreator as PoolInfoUser + ) + const [poolInfoUser, setPoolInfoUser] = useState( + initialPoolInfoUser as PoolInfoUser + ) + const [hasUserAddedLiquidity, setUserHasAddedLiquidity] = useState(false) const [showAdd, setShowAdd] = useState(false) const [showRemove, setShowRemove] = useState(false) const [isRemoveDisabled, setIsRemoveDisabled] = useState(false) + const [fetchInterval, setFetchInterval] = useState() - const [hasAddedLiquidity, setHasAddedLiquidity] = useState(false) - const [poolShare, setPoolShare] = useState() - const [totalUserLiquidityInOcean, setTotalUserLiquidityInOcean] = useState( - new Decimal(0) - ) - const [totalLiquidityInOcean, setTotalLiquidityInOcean] = useState( - new Decimal(0) - ) - - const [creatorTotalLiquidityInOcean, setCreatorTotalLiquidityInOcean] = - useState(new Decimal(0)) - const [creatorLiquidity, setCreatorLiquidity] = useState() - const [creatorPoolTokens, setCreatorPoolTokens] = useState() - const [creatorPoolShare, setCreatorPoolShare] = useState() - const [dataLiquidity, setdataLiquidity] = useState() - const [liquidityFetchInterval, setLiquidityFetchInterval] = - useState() - - // the purpose of the value is just to trigger the effect - const [refreshPool, setRefreshPool] = useState(false) - - const getPoolLiquidity = useCallback(async () => { + const fetchPoolData = useCallback(async () => { if (!ddo?.chainId || !price?.address || !owner) return - const queryVariables = { - pool: price.address.toLowerCase(), - owner: owner.toLowerCase() - } - const queryResult: OperationResult = await fetchData( - poolLiquidityQuery, - queryVariables, - getQueryContext(ddo.chainId) - ) - setdataLiquidity(queryResult?.data) + const poolData = await getPoolData(ddo.chainId, price.address, owner) + setPoolData(poolData) + LoggerInstance.log('[pool] Fetched pool data:', poolData) }, [ddo?.chainId, price?.address, owner]) - async function getUserPoolShareBalance() { - const queryVariables = { - pool: price.address.toLowerCase(), - user: accountId.toLowerCase() - } - const queryResult: OperationResult = await fetchData( - userPoolShareQuery, - queryVariables, - getQueryContext(ddo.chainId) + const fetchUserShares = useCallback(async () => { + if (!ddo?.chainId || !price?.address || !accountId) return + + const userShares = await getUserPoolShareBalance( + ddo.chainId, + price.address, + accountId ) - return queryResult?.data.pool.shares[0]?.shares - } + setPoolInfoUser((prevState) => ({ + ...prevState, + poolShares: userShares + })) + LoggerInstance.log(`[pool] Fetched user shares: ${userShares}`) + }, [ddo?.chainId, price?.address, accountId]) - const refetchLiquidity = useCallback(() => { - if (liquidityFetchInterval) return + // Helper: fetch everything + const fetchAllData = useCallback(() => { + fetchPoolData() + fetchUserShares() + }, [fetchPoolData, fetchUserShares]) - const newInterval = setInterval(() => getPoolLiquidity(), refreshInterval) - setLiquidityFetchInterval(newInterval) - }, [liquidityFetchInterval, getPoolLiquidity, refreshInterval]) + // Helper: start interval fetching + const initFetchInterval = useCallback(() => { + if (fetchInterval) return + + const newInterval = setInterval(() => { + fetchAllData() + LoggerInstance.log( + `[pool] Refetch interval fired after ${refreshInterval / 1000}s` + ) + }, refreshInterval) + setFetchInterval(newInterval) + }, [fetchInterval, fetchAllData, refreshInterval]) useEffect(() => { return () => { - clearInterval(liquidityFetchInterval) + clearInterval(fetchInterval) } - }, [liquidityFetchInterval]) + }, [fetchInterval]) + // + // 0 Fetch all the data on mount + // All further effects depend on the fetched data + // and only do further data checking and manipulation. + // useEffect(() => { - async function init() { - if (!dataLiquidity?.pool) { - await getPoolLiquidity() - return - } + fetchAllData() + initFetchInterval() + }, [fetchAllData, initFetchInterval]) - // Set symbols - setOceanSymbol(dataLiquidity.pool.baseToken.symbol) - setDtSymbol(dataLiquidity.pool.datatoken.symbol) + // + // 1 General Pool Info + // + useEffect(() => { + if (!poolData || !price?.ocean || !price?.datatoken) return - // Total pool shares - const totalPoolTokens = dataLiquidity.pool.totalShares - setTotalPoolTokens(totalPoolTokens) + // Pool Fee (swap fee) + // poolFee is tricky: to get 0.1% you need to convert from 0.001 + const poolFee = isValidNumber(poolData.poolFee) + ? new Decimal(poolData.poolFee).mul(100).toString() + : '0' - // Get poolFee - // poolFee is tricky: to get 0.1% you need to convert from 0.001 - const swapFee = isValidNumber(dataLiquidity.pool.poolFee) - ? new Decimal(dataLiquidity.pool.poolFee).mul(100).toString() + // Total Liquidity + const totalLiquidityInOcean = + isValidNumber(price.ocean) && + isValidNumber(price.datatoken) && + isValidNumber(poolData.spotPrice) + ? new Decimal(price.ocean).add( + new Decimal(price.datatoken).mul(poolData.spotPrice) + ) + : new Decimal(0) + + const newPoolInfo = { + poolFee, + weightOcean: getWeight(poolData.baseTokenWeight), + weightDt: getWeight(poolData.datatokenWeight), + dtSymbol: poolData.datatoken.symbol, + oceanSymbol: poolData.baseToken.symbol, + totalPoolTokens: poolData.totalShares, + totalLiquidityInOcean + } + setPoolInfo(newPoolInfo) + LoggerInstance.log('[pool] Created new pool info:', newPoolInfo) + }, [poolData, price?.datatoken, price?.ocean]) + + // + // 2 Pool Creator Info + // + useEffect(() => { + if ( + !poolData || + !poolInfo?.totalPoolTokens || + !price?.ocean || + !price?.datatoken + ) + return + + const ownerPoolTokens = poolData.shares[0]?.shares + + const ownerOceanBalance = + isValidNumber(ownerPoolTokens) && + isValidNumber(poolInfo.totalPoolTokens) && + isValidNumber(price.ocean) + ? new Decimal(ownerPoolTokens) + .dividedBy(new Decimal(poolInfo.totalPoolTokens)) + .mul(price.ocean) + .toString() : '0' - setSwapFee(swapFee) - // Get weights - function getWeight(weight: string) { - return isValidNumber(weight) - ? new Decimal(weight).mul(10).toString() - : '0' - } - const weightDt = dataLiquidity.pool.datatokenWeight - const weightDtDecimal = getWeight(weightDt) - setWeightDt(weightDtDecimal) + const ownerDtBalance = + isValidNumber(ownerPoolTokens) && + isValidNumber(poolInfo.totalPoolTokens) && + isValidNumber(price.datatoken) + ? new Decimal(ownerPoolTokens) + .dividedBy(new Decimal(poolInfo.totalPoolTokens)) + .mul(price.datatoken) + .toString() + : '0' - const weightOcean = dataLiquidity.pool.baseTokenWeight - const weightOceanDecimal = getWeight(weightOcean) - setWeightOcean(weightOceanDecimal) - - // - // Get everything the creator put into the pool - // - const creatorPoolTokens = dataLiquidity.pool.shares[0]?.shares - setCreatorPoolTokens(creatorPoolTokens) - - const creatorOceanBalance = - isValidNumber(creatorPoolTokens) && - isValidNumber(totalPoolTokens) && - isValidNumber(price.ocean) - ? new Decimal(creatorPoolTokens) - .dividedBy(new Decimal(totalPoolTokens)) - .mul(price.ocean) - .toString() - : '0' - - const creatorDtBalance = - isValidNumber(creatorPoolTokens) && - isValidNumber(totalPoolTokens) && - isValidNumber(price.datatoken) - ? new Decimal(creatorPoolTokens) - .dividedBy(new Decimal(totalPoolTokens)) - .mul(price.datatoken) - .toString() - : '0' - - const creatorLiquidity = { - ocean: creatorOceanBalance, - datatoken: creatorDtBalance - } - setCreatorLiquidity(creatorLiquidity) - - const totalCreatorLiquidityInOcean = - isValidNumber(creatorLiquidity?.ocean) && - isValidNumber(creatorLiquidity?.datatoken) && - isValidNumber(dataLiquidity.pool.spotPrice) - ? new Decimal(creatorLiquidity?.ocean).add( - new Decimal(creatorLiquidity?.datatoken).mul( - new Decimal(dataLiquidity.pool.spotPrice) - ) - ) - : new Decimal(0) - - setCreatorTotalLiquidityInOcean(totalCreatorLiquidityInOcean) - - const creatorPoolShare = - price?.ocean && - price?.datatoken && - creatorLiquidity && - isValidNumber(creatorPoolTokens) && - isValidNumber(totalPoolTokens) - ? new Decimal(creatorPoolTokens) - .dividedBy(new Decimal(totalPoolTokens)) - .mul(100) - .toFixed(2) - : '0' - - setCreatorPoolShare(creatorPoolShare) - refetchLiquidity() + const liquidity = { + ocean: ownerOceanBalance, + datatoken: ownerDtBalance } - init() - }, [ - dataLiquidity, - price?.datatoken, - price?.ocean, - getPoolLiquidity, - refetchLiquidity - ]) - useEffect(() => { - setIsRemoveDisabled(isInPurgatory && owner === accountId) - }, [isInPurgatory, owner, accountId]) - - useEffect(() => { - if (!dataLiquidity) return + const totalLiquidityInOcean = + isValidNumber(liquidity.ocean) && + isValidNumber(liquidity.datatoken) && + isValidNumber(poolData.spotPrice) + ? new Decimal(liquidity.ocean).add( + new Decimal(liquidity.datatoken).mul( + new Decimal(poolData.spotPrice) + ) + ) + : new Decimal(0) const poolShare = - isValidNumber(poolTokens) && - isValidNumber(totalPoolTokens) && - price?.ocean && - price?.datatoken && - new Decimal(poolTokens) - .dividedBy(new Decimal(totalPoolTokens)) + liquidity && + isValidNumber(ownerPoolTokens) && + isValidNumber(poolInfo.totalPoolTokens) + ? new Decimal(ownerPoolTokens) + .dividedBy(new Decimal(poolInfo.totalPoolTokens)) + .mul(100) + .toFixed(2) + : '0' + + const newPoolOwnerInfo = { + totalLiquidityInOcean, + liquidity, + poolShares: ownerPoolTokens, + poolShare + } + setPoolInfoOwner(newPoolOwnerInfo) + LoggerInstance.log('[pool] Created new owner pool info:', newPoolOwnerInfo) + }, [poolData, price?.ocean, price?.datatoken, poolInfo?.totalPoolTokens]) + + // + // 3 User Pool Info + // + useEffect(() => { + if ( + !poolData?.spotPrice || + !poolInfo?.totalPoolTokens || + !ddo?.chainId || + !accountId || + !price?.ocean || + !price?.datatoken + ) + return + + const poolShare = + isValidNumber(poolInfoUser.poolShares) && + isValidNumber(poolInfo.totalPoolTokens) && + new Decimal(poolInfoUser.poolShares) + .dividedBy(new Decimal(poolInfo.totalPoolTokens)) .mul(100) .toFixed(5) - setPoolShare(poolShare) - setHasAddedLiquidity(Number(poolShare) > 0) + setUserHasAddedLiquidity(Number(poolShare) > 0) - const totalUserLiquidityInOcean = - isValidNumber(userLiquidity?.ocean) && - isValidNumber(userLiquidity?.datatoken) && - isValidNumber(dataLiquidity.pool.spotPrice) - ? new Decimal(userLiquidity?.ocean).add( - new Decimal(userLiquidity?.datatoken).mul( - dataLiquidity.pool.spotPrice - ) - ) - : new Decimal(0) + // calculate user's provided liquidity based on pool tokens + const userOceanBalance = + isValidNumber(poolInfoUser.poolShares) && + isValidNumber(poolInfo.totalPoolTokens) && + isValidNumber(price.ocean) + ? new Decimal(poolInfoUser.poolShares) + .dividedBy(new Decimal(poolInfo.totalPoolTokens)) + .mul(price.ocean) + .toString() + : '0' - setTotalUserLiquidityInOcean(totalUserLiquidityInOcean) + const userDtBalance = + isValidNumber(poolInfoUser.poolShares) && + isValidNumber(poolInfo.totalPoolTokens) && + isValidNumber(price.datatoken) + ? new Decimal(poolInfoUser.poolShares) + .dividedBy(new Decimal(poolInfo.totalPoolTokens)) + .mul(price.datatoken) + .toString() + : '0' + + const liquidity = { + ocean: userOceanBalance, + datatoken: userDtBalance + } const totalLiquidityInOcean = - isValidNumber(price?.ocean) && - isValidNumber(price?.datatoken) && - isValidNumber(dataLiquidity.pool.spotPrice) - ? new Decimal(price?.ocean).add( - new Decimal(price?.datatoken).mul(dataLiquidity.pool.spotPrice) + isValidNumber(liquidity.ocean) && + isValidNumber(liquidity.datatoken) && + isValidNumber(poolData.spotPrice) + ? new Decimal(liquidity.ocean).add( + new Decimal(liquidity.datatoken).mul(poolData.spotPrice) ) : new Decimal(0) - setTotalLiquidityInOcean(totalLiquidityInOcean) - }, [dataLiquidity, userLiquidity, price, poolTokens, totalPoolTokens]) - - useEffect(() => { - if (!accountId || !price) return - - async function init() { - try { - // - // Get everything the user has put into the pool - // - const poolTokens = await getUserPoolShareBalance() - setPoolTokens(poolTokens) - - // calculate user's provided liquidity based on pool tokens - const userOceanBalance = - isValidNumber(poolTokens) && - isValidNumber(totalPoolTokens) && - isValidNumber(price.ocean) - ? new Decimal(poolTokens) - .dividedBy(new Decimal(totalPoolTokens)) - .mul(price.ocean) - .toString() - : '0' - - const userDtBalance = - isValidNumber(poolTokens) && - isValidNumber(totalPoolTokens) && - isValidNumber(price.datatoken) - ? new Decimal(poolTokens) - .dividedBy(new Decimal(totalPoolTokens)) - .mul(price.datatoken) - .toString() - : '0' - - const userLiquidity = { - ocean: userOceanBalance, - datatoken: userDtBalance - } - - setUserLiquidity(userLiquidity) - } catch (error) { - LoggerInstance.error(error.message) - } + const newPoolInfoUser = { + totalLiquidityInOcean, + liquidity, + poolShare } - init() - }, [accountId, price, ddo, refreshPool, owner, totalPoolTokens]) + setPoolInfoUser((prevState: PoolInfoUser) => ({ + ...prevState, + ...newPoolInfoUser + })) - const refreshInfo = async () => { - setRefreshPool(!refreshPool) + LoggerInstance.log('[pool] Created new user pool info:', { + poolShares: poolInfoUser?.poolShares, + ...newPoolInfoUser + }) + }, [ + poolData?.spotPrice, + poolInfoUser?.poolShares, + accountId, + price, + ddo?.chainId, + owner, + poolInfo?.totalPoolTokens + ]) - // need some form of replacement or something. - // await refreshPrice() - } + // + // Check if removing liquidity should be disabled. + // + useEffect(() => { + if (!owner || !accountId) return + + setIsRemoveDisabled(isInPurgatory && owner === accountId) + }, [isInPurgatory, owner, accountId]) return ( <> {showAdd ? ( ) : showRemove ? ( ) : ( <>
- ={' '} - + ={' '} +
Pool } - ocean={`${userLiquidity?.ocean}`} - oceanSymbol={oceanSymbol} - dt={`${userLiquidity?.datatoken}`} - dtSymbol={dtSymbol} - poolShares={poolTokens} - conversion={totalUserLiquidityInOcean} + ocean={`${poolInfoUser?.liquidity?.ocean}`} + oceanSymbol={poolInfo?.oceanSymbol} + dt={`${poolInfoUser?.liquidity?.datatoken}`} + dtSymbol={poolInfo?.dtSymbol} + poolShares={poolInfoUser?.poolShares} + conversion={poolInfoUser?.totalLiquidityInOcean} highlight > - + - + Pool Statistics - {weightDt && ( + {poolInfo?.weightDt && ( - {weightOcean}/{weightDt} + {poolInfo?.weightOcean}/{poolInfo?.weightDt} )} } ocean={`${price?.ocean}`} - oceanSymbol={oceanSymbol} + oceanSymbol={poolInfo?.oceanSymbol} dt={`${price?.datatoken}`} - dtSymbol={dtSymbol} - poolShares={totalPoolTokens} - conversion={totalLiquidityInOcean} + dtSymbol={poolInfo?.dtSymbol} + poolShares={poolInfo?.totalPoolTokens} + conversion={poolInfo?.totalLiquidityInOcean} showTVLLabel > - +
@@ -471,7 +468,7 @@ export default function Pool(): ReactElement { Add Liquidity - {hasAddedLiquidity && !isRemoveDisabled && ( + {hasUserAddedLiquidity && !isRemoveDisabled && (