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:
parent
2194b55753
commit
71e56e4344
@ -0,0 +1,2 @@
|
||||
.add {
|
||||
}
|
24
src/components/organisms/AssetActions/Pool/Add.tsx
Normal file
24
src/components/organisms/AssetActions/Pool/Add.tsx
Normal 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>
|
||||
)
|
||||
}
|
24
src/components/organisms/AssetActions/Pool/Remove.tsx
Normal file
24
src/components/organisms/AssetActions/Pool/Remove.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
.token {
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: calc(var(--spacer) / 4);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
@ -1,6 +1,6 @@
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: calc(var(--spacer) * 2);
|
||||
gap: calc(var(--spacer) * 1.5);
|
||||
position: relative;
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
@ -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'
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user