oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

small PoolShares refactor

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-09-02 19:35:49 +02:00
parent 30f262de33
commit fe065aea58
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 71 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/pages/Profile/History/PoolShares.module.css
View File

@ -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;
}

115
src/components/pages/Profile/History/PoolShares.tsx
View File

@ -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 (
<div className={styles.yourLiquidity}>
<div className={styles.userLiquidity}>
<Conversion
price={price}
className={styles.totalLiquidity}
@ -146,7 +146,7 @@ const columns = [
}
},
{
name: 'Your Liquidity',
name: 'Liquidity',
selector: function getAssetRow(row: Asset) {
return <Liquidity row={row} type="user" />
},
@ -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<NodeJS.Timeout>()
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()
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()
try {
async function init() {
setLoading(true)
if (!data) {
await fetchPoolSharesData()
return
const newData = await getPoolSharesData(accountId, chainIds)
setData(newData)
refetchPoolSharesData()
}
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
})
init()
}, [accountId, chainIds, refetchPoolSharesData])
useEffect(() => {
if (!data) return
async function getShares() {
try {
const newAssets = await getPoolSharesAssets(data)
if (JSON.stringify(assets) !== JSON.stringify(newAssets)) {
setAssets(newAssets)
}
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 ? (
<Table