oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-11-15 01:34:57 +01:00
Code Releases Activity

refactor

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-10-12 12:28:07 +02:00
parent 80901b5bb4
commit 51ab425c35
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 79 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
View File

@ -3,6 +3,7 @@ import { Balance } from '.'
import styles from './PoolStatistics.module.css'
import Token from './Token'
import Conversion from '../../../atoms/Price/Conversion'
import TokenList from './TokenList'
export default function PoolStatistics({
price,
@ -21,24 +22,20 @@ export default function PoolStatistics({
totalBalance.ocean + totalBalance.datatoken * Number(price)
return (
<div className={styles.tokeninfo}>
<h3 className={styles.title}>Pool Statistics</h3>
<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}
/>
<TokenList title="Pool Statistics">
<div>
<Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
<Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
</div>
</div>
<div>
<Token symbol="pool shares" balance={totalPoolTokens} noIcon />
<Token symbol="% swap fee" balance={swapFee} noIcon />
</div>
<Conversion
price={`${totalLiquidityInOcean}`}
className={styles.totalLiquidity}
/>
</TokenList>
)
}

23
src/components/organisms/AssetActions/Pool/TokenList.module.css Normal file
View File

@ -0,0 +1,23 @@
.tokeninfo {
padding-top: calc(var(--spacer) / 1.5);
}
.tokens {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row;
}
.title {
font-size: var(--font-size-base);
margin-bottom: calc(var(--spacer) / 3);
}
.highlight {
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;
}

19
src/components/organisms/AssetActions/Pool/TokenList.tsx Normal file
View File

@ -0,0 +1,19 @@
import React, { ReactElement, ReactNode } from 'react'
import styles from './TokenList.module.css'
export default function TokenList({
title,
children,
highlight
}: {
title: string | ReactNode
children: ReactNode
highlight?: boolean
}): ReactElement {
return (
<div className={`${styles.tokeninfo} ${highlight ? styles.highlight : ''}`}>
<h3 className={styles.title}>{title}</h3>
<div className={styles.tokens}>{children}</div>
</div>
)
}

20
src/components/organisms/AssetActions/Pool/index.module.css
View File

@ -21,26 +21,6 @@
margin-right: calc(var(--spacer) / 3);
}
.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;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row;
}
.title {
font-size: var(--font-size-base);
margin-bottom: calc(var(--spacer) / 3);
}
.totalLiquidity {
composes: token from './Token.module.css';
margin-bottom: 0;

45
src/components/organisms/AssetActions/Pool/index.tsx
View File

@ -13,6 +13,7 @@ import Conversion from '../../../atoms/Price/Conversion'
import EtherscanLink from '../../../atoms/EtherscanLink'
import PoolStatistics from './PoolStatistics'
import Token from './Token'
import TokenList from './TokenList'
export interface Balance {
ocean: number
@ -145,30 +146,28 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
</div>
</div>
<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}>
<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}
/>
<TokenList
title={
<>
Your Liquidity
<Tooltip content="Explain what this represents, advantage of providing liquidity..." />
</>
}
highlight
>
<div>
<Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
<Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
</div>
</div>
<div>
<Token symbol="pool shares" balance={poolTokens} noIcon />
<Token symbol="% of pool" balance={poolShare} noIcon />
</div>
<Conversion
price={`${totalUserLiquidityInOcean}`}
className={styles.totalLiquidity}
/>
</TokenList>
<PoolStatistics
price={`${price.value}`}