mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
new pool layout
This commit is contained in:
parent
753b5c2c9c
commit
80901b5bb4
@ -1,4 +1,9 @@
|
||||
.statistics {
|
||||
.tokeninfo {
|
||||
margin-top: calc(var(--spacer) / 1.5);
|
||||
}
|
||||
|
||||
.tokens {
|
||||
composes: tokens from './index.module.css';
|
||||
}
|
||||
|
||||
.title {
|
||||
|
@ -21,16 +21,24 @@ export default function PoolStatistics({
|
||||
totalBalance.ocean + totalBalance.datatoken * Number(price)
|
||||
|
||||
return (
|
||||
<div className={styles.statistics}>
|
||||
<div className={styles.tokeninfo}>
|
||||
<h3 className={styles.title}>Pool Statistics</h3>
|
||||
<Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
|
||||
<Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
|
||||
<Token symbol="pool shares" balance={totalPoolTokens} noIcon />
|
||||
<Token symbol="% swap fee" balance={swapFee} noIcon />
|
||||
<Conversion
|
||||
price={`${totalLiquidityInOcean}`}
|
||||
className={styles.totalLiquidity}
|
||||
/>
|
||||
|
||||
<div className={styles.tokens}>
|
||||
<div>
|
||||
<Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
|
||||
<Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
|
||||
</div>
|
||||
<div>
|
||||
<Token symbol="pool shares" balance={totalPoolTokens} noIcon />
|
||||
<Token symbol="% swap fee" balance={swapFee} noIcon />
|
||||
</div>
|
||||
|
||||
<Conversion
|
||||
price={`${totalLiquidityInOcean}`}
|
||||
className={styles.totalLiquidity}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
.token {
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: calc(var(--spacer) / 3);
|
||||
margin-bottom: calc(var(--spacer) / 4);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
padding: 0.3rem;
|
||||
vertical-align: middle;
|
||||
margin-right: calc(var(--spacer) / 8);
|
||||
margin-top: -0.3rem;
|
||||
margin-top: -0.2rem;
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
|
@ -1,12 +1,11 @@
|
||||
.dataToken {
|
||||
margin-bottom: var(--spacer);
|
||||
padding-bottom: calc(var(--spacer) / 1.5);
|
||||
font-size: var(--font-size-large);
|
||||
border-bottom: 1px solid var(--brand-grey-lighter);
|
||||
margin-left: -2rem;
|
||||
margin-right: -2rem;
|
||||
padding-left: var(--spacer);
|
||||
padding-right: var(--spacer);
|
||||
padding-left: calc(var(--spacer) / 1.5);
|
||||
padding-right: calc(var(--spacer) / 1.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -22,25 +21,33 @@
|
||||
margin-right: calc(var(--spacer) / 3);
|
||||
}
|
||||
|
||||
.poolTokens {
|
||||
.tokeninfo {
|
||||
background: var(--brand-grey-dimmed);
|
||||
padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2)
|
||||
var(--spacer);
|
||||
border-bottom: 1px solid var(--brand-grey-lighter);
|
||||
margin-left: -2rem;
|
||||
margin-right: -2rem;
|
||||
}
|
||||
|
||||
.tokens {
|
||||
display: grid;
|
||||
gap: var(--spacer);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-base);
|
||||
margin-bottom: calc(var(--spacer) / 1.5);
|
||||
margin-bottom: calc(var(--spacer) / 3);
|
||||
}
|
||||
|
||||
.totalLiquidity {
|
||||
composes: token from './Token.module.css';
|
||||
margin-bottom: 0;
|
||||
font-weight: var(--font-weight-base) !important;
|
||||
font-size: var(--font-size-small);
|
||||
padding-left: var(--font-size-base);
|
||||
padding-top: calc(var(--spacer) / 3);
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--brand-grey-lighter);
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.totalLiquidity strong {
|
||||
|
@ -145,31 +145,39 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.poolTokens}>
|
||||
<div className={styles.tokeninfo}>
|
||||
<h3 className={styles.title}>
|
||||
Your Liquidity
|
||||
<Tooltip content="Explain what this represents, advantage of providing liquidity..." />
|
||||
</h3>
|
||||
|
||||
<div className={styles.tokens}>
|
||||
<h3 className={styles.title}>
|
||||
Your Liquidity
|
||||
<Tooltip content="Explain what this represents, advantage of providing liquidity..." />
|
||||
</h3>
|
||||
<Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
|
||||
<Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
|
||||
<Token symbol="pool shares" balance={poolTokens} noIcon />
|
||||
<Token symbol="% of pool" balance={poolShare} noIcon />
|
||||
<div>
|
||||
<Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
|
||||
<Token
|
||||
symbol={dtSymbol}
|
||||
balance={`${userLiquidity.datatoken}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Token symbol="pool shares" balance={poolTokens} noIcon />
|
||||
<Token symbol="% of pool" balance={poolShare} noIcon />
|
||||
</div>
|
||||
<Conversion
|
||||
price={`${totalUserLiquidityInOcean}`}
|
||||
className={styles.totalLiquidity}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PoolStatistics
|
||||
price={`${price.value}`}
|
||||
totalPoolTokens={totalPoolTokens}
|
||||
totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
|
||||
swapFee={swapFee}
|
||||
dtSymbol={dtSymbol}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PoolStatistics
|
||||
price={`${price.value}`}
|
||||
totalPoolTokens={totalPoolTokens}
|
||||
totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
|
||||
swapFee={swapFee}
|
||||
dtSymbol={dtSymbol}
|
||||
/>
|
||||
|
||||
<div className={stylesActions.actions}>
|
||||
<Button
|
||||
style="primary"
|
||||
|
Loading…
Reference in New Issue
Block a user