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

prepare add/remove screens

This commit is contained in:
Matthias Kretschmann 2020-08-18 23:26:59 +02:00
parent 2194b55753
commit 71e56e4344
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 101 additions and 2 deletions

View File

@ -0,0 +1,2 @@
.add {
}

View File

@ -0,0 +1,24 @@
import React, { ReactElement } from 'react'
import styles from './Add.module.css'
import stylesIndex from './index.module.css'
import Button from '../../../atoms/Button'
export default function Add({
setShowAdd
}: {
setShowAdd: (show: boolean) => void
}): ReactElement {
return (
<div className={styles.add}>
<Button
className={stylesIndex.back}
style="text"
size="small"
onClick={() => setShowAdd(false)}
>
Back
</Button>
<h3 className={stylesIndex.title}>Add Liquidity</h3>
</div>
)
}

View File

@ -0,0 +1,24 @@
import React, { ReactElement } from 'react'
import styles from './Remove.module.css'
import stylesIndex from './index.module.css'
import Button from '../../../atoms/Button'
export default function Remove({
setShowRemove
}: {
setShowRemove: (show: boolean) => void
}): ReactElement {
return (
<div className={styles.remove}>
<Button
className={stylesIndex.back}
style="text"
size="small"
onClick={() => setShowRemove(false)}
>
Back
</Button>
<h3 className={stylesIndex.title}>Remove Liquidity</h3>
</div>
)
}

View File

@ -1,6 +1,7 @@
.token {
font-weight: var(--font-weight-bold);
margin-bottom: calc(var(--spacer) / 4);
white-space: nowrap;
}
.symbol {

View File

@ -23,3 +23,23 @@
.tokens {
}
.actions {
margin-left: -2rem;
margin-right: -2rem;
padding-left: var(--spacer);
padding-right: var(--spacer);
margin-top: calc(var(--spacer) / 2);
padding-top: calc(var(--spacer) / 1.5);
border-top: 1px solid var(--brand-grey-lighter);
text-align: center;
}
.actions button {
margin-left: calc(var(--spacer) / 4);
margin-right: calc(var(--spacer) / 4);
}
.back {
margin-bottom: var(--spacer);
}

View File

@ -5,6 +5,9 @@ import styles from './index.module.css'
import Token from './Token'
import PriceUnit from '../../../atoms/Price/PriceUnit'
import Loader from '../../../atoms/Loader'
import Button from '../../../atoms/Button'
import Add from './Add'
import Remove from './Remove'
interface Balance {
ocean: string
@ -18,8 +21,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
const [dtPrice, setDtPrice] = useState<string>()
const [dtSymbol, setDtSymbol] = useState<string>()
const [userBalance, setUserBalance] = useState<Balance>()
const [showAdd, setShowAdd] = useState<boolean>()
const [showRemove, setShowRemove] = useState<boolean>()
const isLoading = !ocean || !totalBalance || !userBalance || !dtPrice
const hasAddedLiquidity =
userBalance && (Number(userBalance.ocean) > 0 || Number(userBalance.dt) > 0)
useEffect(() => {
async function init() {
@ -67,6 +74,10 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
<>
{isLoading ? (
<Loader message="Retrieving pools..." />
) : showAdd ? (
<Add setShowAdd={setShowAdd} />
) : showRemove ? (
<Remove setShowRemove={setShowRemove} />
) : (
<>
<div className={styles.dataToken}>
@ -87,6 +98,22 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
<Token symbol={dtSymbol} balance={totalBalance.dt} />
</div>
</div>
<div className={styles.actions}>
<Button
style="primary"
size="small"
onClick={() => setShowAdd(true)}
>
Add Liquidity
</Button>
{hasAddedLiquidity && (
<Button size="small" onClick={() => setShowRemove(true)}>
Remove
</Button>
)}
</div>
</>
)}
</>

View File

@ -1,6 +1,6 @@
.grid {
display: grid;
gap: calc(var(--spacer) * 2);
gap: calc(var(--spacer) * 1.5);
position: relative;
margin-top: -1.5rem;
}

View File

@ -26,7 +26,6 @@ export default function PageTemplateAssetDetails({
try {
const metadataStore = new MetadataStore(config.metadataStoreUri, Logger)
const ddo = await metadataStore.retrieveDDO(did)
setDdo(ddo)
if (!ddo) {
setTitle('Could not retrieve asset')
@ -34,6 +33,8 @@ export default function PageTemplateAssetDetails({
return
}
setDdo(ddo)
const { attributes }: ServiceMetadataMarket = ddo.findServiceByType(
'metadata'
)