diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css new file mode 100644 index 000000000..b0529e91c --- /dev/null +++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css @@ -0,0 +1,6 @@ +.statistics { +} + +.title { + composes: title from './index.module.css'; +} diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx new file mode 100644 index 000000000..1713ca801 --- /dev/null +++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx @@ -0,0 +1,36 @@ +import { useUserPreferences } from '../../../../providers/UserPreferences' +import React, { ReactElement } from 'react' +import { Balance } from '.' +import styles from './PoolStatistics.module.css' +import Token from './Token' +import Conversion from '../../../atoms/Price/Conversion' + +export default function PoolStatistics({ + price, + dtSymbol, + totalBalance, + totalPoolTokens, + swapFee +}: { + price: string + dtSymbol: string + totalBalance: Balance + totalPoolTokens: string + swapFee: string +}): ReactElement { + const { debug } = useUserPreferences() + + const totalLiquidityInOcean = + Number(totalBalance.ocean) + Number(totalBalance.dt) * Number(price) + + return ( +
+

Pool Statistics

+ + + {debug === true && } + + +
+ ) +} diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx index f24db347e..b7cfaaf33 100644 --- a/src/components/organisms/AssetActions/Pool/index.tsx +++ b/src/components/organisms/AssetActions/Pool/index.tsx @@ -3,7 +3,7 @@ import { useOcean, useMetadata } from '@oceanprotocol/react' import { DDO } from '@oceanprotocol/lib' import styles from './index.module.css' import stylesActions from './Actions.module.css' -import Token from './Token' +import { useUserPreferences } from '../../../../providers/UserPreferences' import PriceUnit from '../../../atoms/Price/PriceUnit' import Loader from '../../../atoms/Loader' import Button from '../../../atoms/Button' @@ -12,7 +12,8 @@ import Remove from './Remove' import Tooltip from '../../../atoms/Tooltip' import Conversion from '../../../atoms/Price/Conversion' import EtherscanLink from '../../../atoms/EtherscanLink' -import { useUserPreferences } from '../../../../providers/UserPreferences' +import PoolStatistics from './PoolStatistics' +import Token from './Token' export interface Balance { ocean: string @@ -163,15 +164,13 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { -
-

Pool Statistics

- - - {debug === true && ( - - )} - -
+