mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
remove liquidity screen styling
This commit is contained in:
parent
93b7b1b6c2
commit
fb479a167f
@ -1,4 +1,11 @@
|
||||
.removeInput {
|
||||
max-width: 12rem;
|
||||
margin: 0 auto var(--spacer) auto;
|
||||
composes: addInput from './Add.module.css';
|
||||
}
|
||||
|
||||
.buttonMax {
|
||||
composes: buttonMax from './Add.module.css';
|
||||
}
|
||||
|
||||
.userBalance {
|
||||
composes: userBalance from './Add.module.css';
|
||||
}
|
||||
|
@ -5,15 +5,21 @@ import Header from './Header'
|
||||
import { toast } from 'react-toastify'
|
||||
import InputElement from '../../../atoms/Input/InputElement'
|
||||
import Actions from './Actions'
|
||||
import { Logger } from '@oceanprotocol/lib'
|
||||
import Button from '../../../atoms/Button'
|
||||
import PriceUnit from '../../../atoms/Price/PriceUnit'
|
||||
import { Balance } from '.'
|
||||
|
||||
export default function Remove({
|
||||
setShowRemove,
|
||||
poolAddress,
|
||||
totalPoolTokens
|
||||
totalPoolTokens,
|
||||
userBalance
|
||||
}: {
|
||||
setShowRemove: (show: boolean) => void
|
||||
poolAddress: string
|
||||
totalPoolTokens: string
|
||||
userBalance: Balance
|
||||
}): ReactElement {
|
||||
const { ocean, accountId } = useOcean()
|
||||
const [amount, setAmount] = useState('')
|
||||
@ -32,7 +38,7 @@ export default function Remove({
|
||||
)
|
||||
setTxId(result.transactionHash)
|
||||
} catch (error) {
|
||||
console.error(error.message)
|
||||
Logger.error(error.message)
|
||||
toast.error(error.message)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
@ -43,6 +49,10 @@ export default function Remove({
|
||||
setAmount(e.target.value)
|
||||
}
|
||||
|
||||
function handleMax() {
|
||||
setAmount(userBalance.ocean)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.remove}>
|
||||
<Header
|
||||
@ -50,7 +60,11 @@ export default function Remove({
|
||||
backAction={() => setShowRemove(false)}
|
||||
/>
|
||||
|
||||
<div className={styles.removeInput}>
|
||||
<form className={styles.removeInput}>
|
||||
<div className={styles.userBalance}>
|
||||
<span>Your pool liquidity: </span>
|
||||
<PriceUnit price={userBalance.ocean} symbol="OCEAN" small />
|
||||
</div>
|
||||
<InputElement
|
||||
value={amount}
|
||||
name="ocean"
|
||||
@ -59,7 +73,18 @@ export default function Remove({
|
||||
placeholder="0"
|
||||
onChange={handleAmountChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{userBalance.ocean > amount && (
|
||||
<Button
|
||||
className={styles.buttonMax}
|
||||
style="text"
|
||||
size="small"
|
||||
onClick={handleMax}
|
||||
>
|
||||
Use Max
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
|
||||
{/* <Input name="dt" label={dtSymbol} type="number" placeholder="0" /> */}
|
||||
|
||||
|
@ -126,6 +126,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
|
||||
setShowRemove={setShowRemove}
|
||||
poolAddress={price.address}
|
||||
totalPoolTokens={totalPoolTokens}
|
||||
userBalance={userBalance}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
|
Loading…
Reference in New Issue
Block a user