diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx index 4682abe25..4f308c9db 100644 --- a/src/components/atoms/Price/Conversion.tsx +++ b/src/components/atoms/Price/Conversion.tsx @@ -68,9 +68,9 @@ export default function Conversion({ return ( - ≈ {priceConverted} {currency} + ≈ {priceConverted} {currency} ) } diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css index b0529e91c..e7935648e 100644 --- a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css +++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css @@ -4,3 +4,7 @@ .title { composes: title from './index.module.css'; } + +.totalLiquidity { + composes: totalLiquidity from './index.module.css'; +} diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx index f69cd5e1c..d400c650a 100644 --- a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx +++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx @@ -21,7 +21,7 @@ export default function PoolStatistics({ const { debug } = useUserPreferences() const totalLiquidityInOcean = - Number(totalBalance.ocean) + Number(totalBalance.datatoken) * Number(price) + totalBalance.ocean + totalBalance.datatoken * Number(price) return (
@@ -29,8 +29,11 @@ export default function PoolStatistics({ {debug === true && } + -
) } diff --git a/src/components/organisms/AssetActions/Pool/index.module.css b/src/components/organisms/AssetActions/Pool/index.module.css index 9d190af8a..7bcfebba6 100644 --- a/src/components/organisms/AssetActions/Pool/index.module.css +++ b/src/components/organisms/AssetActions/Pool/index.module.css @@ -32,3 +32,16 @@ font-size: var(--font-size-base); margin-bottom: calc(var(--spacer) / 1.5); } + +.totalLiquidity { + composes: token from './Token.module.css'; + font-weight: var(--font-weight-base) !important; + font-size: var(--font-size-small); + padding-left: var(--font-size-base); +} + +.totalLiquidity strong { + font-size: var(--font-size-base); + color: var(--brand-grey-dark); + line-height: 1; +} diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx index ee1a7d724..6338a2480 100644 --- a/src/components/organisms/AssetActions/Pool/index.tsx +++ b/src/components/organisms/AssetActions/Pool/index.tsx @@ -32,7 +32,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { const [poolTokens, setPoolTokens] = useState() const [totalPoolTokens, setTotalPoolTokens] = useState() const [dtSymbol, setDtSymbol] = useState() - const [userLiquidity, setUserBalance] = useState() + const [userLiquidity, setUserLiquidity] = useState() const [swapFee, setSwapFee] = useState() const [showAdd, setShowAdd] = useState(false) @@ -40,8 +40,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { const [isLoading, setIsLoading] = useState(true) const hasAddedLiquidity = - userLiquidity && - (Number(userLiquidity.ocean) > 0 || Number(userLiquidity.datatoken) > 0) + userLiquidity && (userLiquidity.ocean > 0 || userLiquidity.datatoken > 0) const poolShare = price?.ocean && @@ -49,6 +48,9 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { userLiquidity && ((Number(poolTokens) / Number(totalPoolTokens)) * 100).toFixed(2) + const totalUserLiquidityInOcean = + userLiquidity?.ocean + userLiquidity?.datatoken * price?.value + useEffect(() => { if (!ocean || !accountId || !price || !price.value) return @@ -79,18 +81,17 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { // calculate user's provided liquidity based on pool tokens const userOceanBalance = - (Number(poolTokens) / Number(totalPoolTokens)) * Number(price.ocean) + (Number(poolTokens) / Number(totalPoolTokens)) * price.ocean const userDtBalance = - (Number(poolTokens) / Number(totalPoolTokens)) * - Number(price.datatoken) + (Number(poolTokens) / Number(totalPoolTokens)) * price.datatoken const userLiquidity = { ocean: userOceanBalance, datatoken: userDtBalance } - setUserBalance(userLiquidity) + setUserLiquidity(userLiquidity) // Get swap fee // swapFee is tricky: to get 0.1% you need to convert from 0.001 @@ -155,6 +156,10 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { {debug === true && } + diff --git a/src/components/organisms/AssetContent/index.module.css b/src/components/organisms/AssetContent/index.module.css index aed5069f6..874cc5810 100644 --- a/src/components/organisms/AssetContent/index.module.css +++ b/src/components/organisms/AssetContent/index.module.css @@ -12,8 +12,7 @@ @media (min-width: 60rem) { .grid { - /* lazy golden ratio */ - grid-template-columns: 1.618fr minmax(0, 1fr); + grid-template-columns: 1.5fr minmax(0, 1fr); } .sticky { diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx index 6e627de5c..45989bf6a 100644 --- a/src/components/pages/Home.tsx +++ b/src/components/pages/Home.tsx @@ -14,7 +14,7 @@ import { useOcean } from '@oceanprotocol/react' const queryHighest = { page: 1, offset: 3, - query: { 'price.ocean': [0, 99999] }, + query: { 'price.type': ['pool'] }, sort: { 'price.value': 1 } }