mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-30 13:51:42 +02:00
basic error handling during add/remove
This commit is contained in:
parent
da23dd51da
commit
cd1c514ac0
|
@ -6,6 +6,7 @@ import Input from '../../../atoms/Input'
|
||||||
import { useOcean } from '@oceanprotocol/react'
|
import { useOcean } from '@oceanprotocol/react'
|
||||||
import Header from './Header'
|
import Header from './Header'
|
||||||
import Loader from '../../../atoms/Loader'
|
import Loader from '../../../atoms/Loader'
|
||||||
|
import { toast } from 'react-toastify'
|
||||||
|
|
||||||
export default function Add({
|
export default function Add({
|
||||||
setShowAdd,
|
setShowAdd,
|
||||||
|
@ -19,17 +20,23 @@ export default function Add({
|
||||||
const { ocean, accountId } = useOcean()
|
const { ocean, accountId } = useOcean()
|
||||||
const [amount, setAmount] = useState<string>()
|
const [amount, setAmount] = useState<string>()
|
||||||
const [isLoading, setIsLoading] = useState<boolean>()
|
const [isLoading, setIsLoading] = useState<boolean>()
|
||||||
const [error, setError] = useState<string>()
|
|
||||||
|
|
||||||
async function handleAddLiquidity() {
|
async function handleAddLiquidity() {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
const result = await ocean.pool.addOceanLiquidity(
|
|
||||||
accountId,
|
try {
|
||||||
poolAddress,
|
const result = await ocean.pool.addOceanLiquidity(
|
||||||
amount
|
accountId,
|
||||||
)
|
poolAddress,
|
||||||
console.log(result)
|
amount
|
||||||
setIsLoading(false)
|
)
|
||||||
|
console.log(result)
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error.message)
|
||||||
|
toast.error(error.message)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
|
function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
|
||||||
|
|
|
@ -1,9 +1,12 @@
|
||||||
import React, { ReactElement, useState, ChangeEvent } from 'react'
|
import React, { ReactElement, useState, ChangeEvent } from 'react'
|
||||||
import styles from './Remove.module.css'
|
import styles from './Remove.module.css'
|
||||||
|
import stylesIndex from './index.module.css'
|
||||||
import Button from '../../../atoms/Button'
|
import Button from '../../../atoms/Button'
|
||||||
import Input from '../../../atoms/Input'
|
import Input from '../../../atoms/Input'
|
||||||
import { useOcean } from '@oceanprotocol/react'
|
import { useOcean } from '@oceanprotocol/react'
|
||||||
import Header from './Header'
|
import Header from './Header'
|
||||||
|
import { toast } from 'react-toastify'
|
||||||
|
import Loader from '../../../atoms/Loader'
|
||||||
|
|
||||||
export default function Remove({
|
export default function Remove({
|
||||||
setShowRemove,
|
setShowRemove,
|
||||||
|
@ -14,16 +17,27 @@ export default function Remove({
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { ocean, accountId } = useOcean()
|
const { ocean, accountId } = useOcean()
|
||||||
const [amount, setAmount] = useState<string>()
|
const [amount, setAmount] = useState<string>()
|
||||||
|
const [isLoading, setIsLoading] = useState<boolean>()
|
||||||
|
|
||||||
const maximumPoolShares = '?'
|
const maximumPoolShares = '?'
|
||||||
|
|
||||||
async function handleRemoveLiquidity() {
|
async function handleRemoveLiquidity() {
|
||||||
await ocean.pool.removeOceanLiquidity(
|
setIsLoading(true)
|
||||||
accountId,
|
|
||||||
poolAddress,
|
try {
|
||||||
amount,
|
const result = await ocean.pool.removeOceanLiquidity(
|
||||||
maximumPoolShares
|
accountId,
|
||||||
)
|
poolAddress,
|
||||||
|
amount,
|
||||||
|
maximumPoolShares
|
||||||
|
)
|
||||||
|
console.log(result)
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error.message)
|
||||||
|
toast.error(error.message)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
|
function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
|
||||||
|
@ -48,13 +62,19 @@ export default function Remove({
|
||||||
|
|
||||||
<p>You will receive:</p>
|
<p>You will receive:</p>
|
||||||
|
|
||||||
<Button
|
<div className={stylesIndex.actions}>
|
||||||
style="primary"
|
{isLoading ? (
|
||||||
size="small"
|
<Loader message="Removing Liquidity..." />
|
||||||
onClick={() => handleRemoveLiquidity()}
|
) : (
|
||||||
>
|
<Button
|
||||||
Remove
|
style="primary"
|
||||||
</Button>
|
size="small"
|
||||||
|
onClick={() => handleRemoveLiquidity()}
|
||||||
|
>
|
||||||
|
Supply
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user