diff --git a/src/components/pages/Profile/History/PoolShares.module.css b/src/components/pages/Profile/History/PoolShares.module.css index 9cd00bbe6..4dcf96482 100644 --- a/src/components/pages/Profile/History/PoolShares.module.css +++ b/src/components/pages/Profile/History/PoolShares.module.css @@ -30,31 +30,31 @@ } } -.yourLiquidity { +.userLiquidity { display: flex; flex-direction: column; align-items: flex-end; } -.yourLiquidity [class*='Conversion-module--'] { +.userLiquidity [class*='Conversion-module--'] { margin-bottom: calc(var(--spacer) / 8); } -.yourLiquidity [class*='Conversion-module--'] strong { +.userLiquidity [class*='Conversion-module--'] strong { font-size: var(--font-size-base); } -.yourLiquidity [class*='Token-module--token'] { +.userLiquidity [class*='Token-module--token'] { display: flex; align-items: center; justify-content: flex-end; margin-bottom: calc(var(--spacer) / 8); } -.yourLiquidity [class*='Token-module--token'] div { +.userLiquidity [class*='Token-module--token'] div { font-size: var(--font-size-small); } -.yourLiquidity [class*='Token-module--icon'] { +.userLiquidity [class*='Token-module--icon'] { display: none; } diff --git a/src/components/pages/Profile/History/PoolShares.tsx b/src/components/pages/Profile/History/PoolShares.tsx index c943ce847..58e70f4a8 100644 --- a/src/components/pages/Profile/History/PoolShares.tsx +++ b/src/components/pages/Profile/History/PoolShares.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useEffect, useState } from 'react' +import React, { ReactElement, useCallback, useEffect, useState } from 'react' import Table from '../../../atoms/Table' import Conversion from '../../../atoms/Price/Conversion' import styles from './PoolShares.module.css' @@ -102,7 +102,7 @@ function Liquidity({ row, type }: { row: Asset; type: string }) { dataTokenBalance = row.poolShare.poolId.datatokenReserve.toString() } return ( -
+
}, @@ -161,6 +161,43 @@ const columns = [ } ] +async function getPoolSharesData(accountId: string, chainIds: number[]) { + const variables = { user: accountId?.toLowerCase() } + const data: PoolShare[] = [] + const result = await fetchDataForMultipleChains( + poolSharesQuery, + variables, + chainIds + ) + for (let i = 0; i < result.length; i++) { + result[i].poolShares.forEach((poolShare: PoolShare) => { + data.push(poolShare) + }) + } + return data +} + +async function getPoolSharesAssets(data: PoolShare[]) { + const assetList: Asset[] = [] + const source = axios.CancelToken.source() + + for (let i = 0; i < data.length; i++) { + const did = web3.utils + .toChecksumAddress(data[i].poolId.datatokenAddress) + .replace('0x', 'did:op:') + const ddo = await retrieveDDO(did, source.token) + const userLiquidity = calculateUserLiquidity(data[i]) + assetList.push({ + poolShare: data[i], + userLiquidity: userLiquidity, + networkId: ddo?.chainId, + createTime: data[i].poolId.createTime + }) + } + const assets = assetList.sort((a, b) => b.createTime - a.createTime) + return assets +} + export default function PoolShares({ accountId }: { @@ -172,33 +209,16 @@ export default function PoolShares({ const [dataFetchInterval, setDataFetchInterval] = useState() const { chainIds } = useUserPreferences() - async function fetchPoolSharesData() { - const variables = { user: accountId?.toLowerCase() } - const shares: PoolShare[] = [] - const result = await fetchDataForMultipleChains( - poolSharesQuery, - variables, - chainIds - ) - for (let i = 0; i < result.length; i++) { - result[i].poolShares.forEach((poolShare: PoolShare) => { - shares.push(poolShare) - }) - } - if (JSON.stringify(data) !== JSON.stringify(shares)) { - setData(shares) - } - } + const refetchPoolSharesData = useCallback(() => { + if (dataFetchInterval) return - function refetchPoolShares() { - if (!dataFetchInterval) { - setDataFetchInterval( - setInterval(function () { - fetchPoolSharesData() - }, REFETCH_INTERVAL) - ) - } - } + setDataFetchInterval( + setInterval(async () => { + const newData = await getPoolSharesData(accountId, chainIds) + setData(newData) + }, REFETCH_INTERVAL) + ) + }, [dataFetchInterval, chainIds, accountId]) useEffect(() => { return () => { @@ -207,43 +227,32 @@ export default function PoolShares({ }, [dataFetchInterval]) useEffect(() => { - async function getShares() { - const assetList: Asset[] = [] - const source = axios.CancelToken.source() + async function init() { + setLoading(true) + const newData = await getPoolSharesData(accountId, chainIds) + setData(newData) + refetchPoolSharesData() + } + init() + }, [accountId, chainIds, refetchPoolSharesData]) + useEffect(() => { + if (!data) return + + async function getShares() { try { - setLoading(true) - if (!data) { - await fetchPoolSharesData() - return + const newAssets = await getPoolSharesAssets(data) + if (JSON.stringify(assets) !== JSON.stringify(newAssets)) { + setAssets(newAssets) } - for (let i = 0; i < data.length; i++) { - const did = web3.utils - .toChecksumAddress(data[i].poolId.datatokenAddress) - .replace('0x', 'did:op:') - const ddo = await retrieveDDO(did, source.token) - const userLiquidity = calculateUserLiquidity(data[i]) - assetList.push({ - poolShare: data[i], - userLiquidity: userLiquidity, - networkId: ddo.chainId, - createTime: data[i].poolId.createTime - }) - } - const orderedAssets = assetList.sort( - (a, b) => b.createTime - a.createTime - ) - setAssets(orderedAssets) - refetchPoolShares() } catch (error) { console.error('Error fetching pool shares: ', error.message) } finally { setLoading(false) } } - getShares() - }, [accountId, chainIds, data]) + }, [accountId, chainIds, data, assets]) return accountId ? (