mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
make remove work
This commit is contained in:
parent
a541cbcee0
commit
eaf29003c3
@ -3,14 +3,13 @@ import React, {
|
|||||||
useState,
|
useState,
|
||||||
ChangeEvent,
|
ChangeEvent,
|
||||||
useEffect,
|
useEffect,
|
||||||
FormEvent,
|
|
||||||
useRef
|
useRef
|
||||||
} from 'react'
|
} from 'react'
|
||||||
import styles from './Remove.module.css'
|
import styles from './Remove.module.css'
|
||||||
import Header from './Header'
|
import Header from './Header'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import Actions from './Actions'
|
import Actions from './Actions'
|
||||||
import { LoggerInstance } from '@oceanprotocol/lib'
|
import { LoggerInstance, Pool } from '@oceanprotocol/lib'
|
||||||
import Token from './Token'
|
import Token from './Token'
|
||||||
import FormHelp from '@shared/FormInput/Help'
|
import FormHelp from '@shared/FormInput/Help'
|
||||||
import Button from '@shared/atoms/Button'
|
import Button from '@shared/atoms/Button'
|
||||||
@ -23,57 +22,51 @@ import Decimal from 'decimal.js'
|
|||||||
import { useAsset } from '@context/Asset'
|
import { useAsset } from '@context/Asset'
|
||||||
import content from '../../../../../content/price.json'
|
import content from '../../../../../content/price.json'
|
||||||
|
|
||||||
|
const slippagePresets = ['5', '10', '15', '25', '50']
|
||||||
|
|
||||||
export default function Remove({
|
export default function Remove({
|
||||||
setShowRemove,
|
setShowRemove,
|
||||||
poolAddress,
|
poolAddress,
|
||||||
poolTokens,
|
poolTokens,
|
||||||
totalPoolTokens,
|
totalPoolTokens,
|
||||||
datatokenSymbol,
|
baseTokenAddress,
|
||||||
|
baseTokenSymbol,
|
||||||
fetchAllData
|
fetchAllData
|
||||||
}: {
|
}: {
|
||||||
setShowRemove: (show: boolean) => void
|
setShowRemove: (show: boolean) => void
|
||||||
poolAddress: string
|
poolAddress: string
|
||||||
poolTokens: string
|
poolTokens: string
|
||||||
totalPoolTokens: string
|
totalPoolTokens: string
|
||||||
datatokenSymbol: string
|
baseTokenAddress: string
|
||||||
|
baseTokenSymbol: string
|
||||||
fetchAllData: () => void
|
fetchAllData: () => void
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const slippagePresets = ['5', '10', '15', '25', '50']
|
const { accountId, web3 } = useWeb3()
|
||||||
const { accountId } = useWeb3()
|
|
||||||
const { isAssetNetwork } = useAsset()
|
const { isAssetNetwork } = useAsset()
|
||||||
const [amountPercent, setAmountPercent] = useState('0')
|
const [amountPercent, setAmountPercent] = useState('0')
|
||||||
const [amountMaxPercent, setAmountMaxPercent] = useState('100')
|
const [amountMaxPercent, setAmountMaxPercent] = useState('100')
|
||||||
const [amountPoolShares, setAmountPoolShares] = useState('0')
|
const [amountPoolShares, setAmountPoolShares] = useState('0')
|
||||||
const [amountOcean, setAmountOcean] = useState('0')
|
const [amountOcean, setAmountOcean] = useState('0')
|
||||||
const [amountDatatoken, setAmountDatatoken] = useState('0')
|
|
||||||
const [isAdvanced, setIsAdvanced] = useState(false)
|
|
||||||
const [isLoading, setIsLoading] = useState<boolean>()
|
const [isLoading, setIsLoading] = useState<boolean>()
|
||||||
const [txId, setTxId] = useState<string>()
|
const [txId, setTxId] = useState<string>()
|
||||||
const [slippage, setSlippage] = useState<string>('5')
|
const [slippage, setSlippage] = useState<string>('5')
|
||||||
const [minOceanAmount, setMinOceanAmount] = useState<string>('0')
|
const [minOceanAmount, setMinOceanAmount] = useState<string>('0')
|
||||||
const [minDatatokenAmount, setMinDatatokenAmount] = useState<string>('0')
|
|
||||||
|
|
||||||
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
|
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
|
||||||
|
|
||||||
async function handleRemoveLiquidity() {
|
async function handleRemoveLiquidity() {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// const result =
|
const poolInstance = new Pool(web3, LoggerInstance)
|
||||||
// isAdvanced === true
|
const result = await poolInstance.exitswapPoolAmountIn(
|
||||||
// ? await ocean.pool.removePoolLiquidity(
|
accountId,
|
||||||
// accountId,
|
poolAddress,
|
||||||
// poolAddress,
|
baseTokenAddress,
|
||||||
// amountPoolShares,
|
amountPoolShares,
|
||||||
// minDatatokenAmount,
|
minOceanAmount
|
||||||
// minOceanAmount
|
)
|
||||||
// )
|
setTxId(result?.transactionHash)
|
||||||
// : await ocean.pool.removeOceanLiquidityWithMinimum(
|
|
||||||
// accountId,
|
|
||||||
// poolAddress,
|
|
||||||
// amountPoolShares,
|
|
||||||
// minOceanAmount
|
|
||||||
// )
|
|
||||||
// setTxId(result?.transactionHash)
|
|
||||||
fetchAllData()
|
fetchAllData()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
LoggerInstance.error(error.message)
|
LoggerInstance.error(error.message)
|
||||||
@ -88,26 +81,14 @@ export default function Remove({
|
|||||||
if (!accountId || !poolTokens) return
|
if (!accountId || !poolTokens) return
|
||||||
|
|
||||||
async function getMax() {
|
async function getMax() {
|
||||||
// const amountMaxPercent =
|
// const amountMaxPercent = await getMaxPercentRemove(poolAddress, poolTokens)
|
||||||
// isAdvanced === true
|
|
||||||
// ? '100'
|
|
||||||
// : await getMaxPercentRemove(poolAddress, poolTokens)
|
|
||||||
// setAmountMaxPercent(amountMaxPercent)
|
// setAmountMaxPercent(amountMaxPercent)
|
||||||
}
|
}
|
||||||
getMax()
|
getMax()
|
||||||
}, [accountId, isAdvanced, poolAddress, poolTokens])
|
}, [accountId, poolAddress, poolTokens])
|
||||||
|
|
||||||
const getValues = useRef(
|
const getValues = useRef(
|
||||||
debounce(async (newAmountPoolShares, isAdvanced) => {
|
debounce(async (newAmountPoolShares) => {
|
||||||
// if (isAdvanced === true) {
|
|
||||||
// const tokens = await ocean.pool.getTokensRemovedforPoolShares(
|
|
||||||
// poolAddress,
|
|
||||||
// `${newAmountPoolShares}`
|
|
||||||
// )
|
|
||||||
// setAmountOcean(tokens?.oceanAmount)
|
|
||||||
// setAmountDatatoken(tokens?.dtAmount)
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
// const amountOcean = await ocean.pool.getOceanRemovedforPoolShares(
|
// const amountOcean = await ocean.pool.getOceanRemovedforPoolShares(
|
||||||
// poolAddress,
|
// poolAddress,
|
||||||
// newAmountPoolShares
|
// newAmountPoolShares
|
||||||
@ -118,15 +99,8 @@ export default function Remove({
|
|||||||
// Check and set outputs when amountPoolShares changes
|
// Check and set outputs when amountPoolShares changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!accountId || !poolTokens) return
|
if (!accountId || !poolTokens) return
|
||||||
getValues.current(amountPoolShares, isAdvanced)
|
getValues.current(amountPoolShares)
|
||||||
}, [
|
}, [amountPoolShares, accountId, poolTokens, poolAddress, totalPoolTokens])
|
||||||
amountPoolShares,
|
|
||||||
isAdvanced,
|
|
||||||
accountId,
|
|
||||||
poolTokens,
|
|
||||||
poolAddress,
|
|
||||||
totalPoolTokens
|
|
||||||
])
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const minOceanAmount = new Decimal(amountOcean)
|
const minOceanAmount = new Decimal(amountOcean)
|
||||||
@ -134,14 +108,8 @@ export default function Remove({
|
|||||||
.dividedBy(100)
|
.dividedBy(100)
|
||||||
.toString()
|
.toString()
|
||||||
|
|
||||||
const minDatatokenAmount = new Decimal(amountDatatoken)
|
|
||||||
.mul(new Decimal(100).minus(new Decimal(slippage)))
|
|
||||||
.dividedBy(100)
|
|
||||||
.toString()
|
|
||||||
|
|
||||||
setMinOceanAmount(minOceanAmount.slice(0, 18))
|
setMinOceanAmount(minOceanAmount.slice(0, 18))
|
||||||
setMinDatatokenAmount(minDatatokenAmount.slice(0, 18))
|
}, [slippage, amountOcean])
|
||||||
}, [slippage, amountOcean, amountDatatoken, isAdvanced])
|
|
||||||
|
|
||||||
// Set amountPoolShares based on set slider value
|
// Set amountPoolShares based on set slider value
|
||||||
function handleAmountPercentChange(e: ChangeEvent<HTMLInputElement>) {
|
function handleAmountPercentChange(e: ChangeEvent<HTMLInputElement>) {
|
||||||
@ -168,22 +136,6 @@ export default function Remove({
|
|||||||
setAmountPoolShares(`${amountPoolShares.slice(0, 18)}`)
|
setAmountPoolShares(`${amountPoolShares.slice(0, 18)}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleAdvancedButton(e: FormEvent<HTMLButtonElement>) {
|
|
||||||
e.preventDefault()
|
|
||||||
setIsAdvanced(!isAdvanced)
|
|
||||||
|
|
||||||
setAmountPoolShares('0')
|
|
||||||
setAmountPercent('0')
|
|
||||||
setAmountOcean('0')
|
|
||||||
setSlippage('5')
|
|
||||||
setMinOceanAmount('0')
|
|
||||||
setMinDatatokenAmount('0')
|
|
||||||
|
|
||||||
if (isAdvanced === true) {
|
|
||||||
setAmountDatatoken('0')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSlippageChange(e: ChangeEvent<HTMLSelectElement>) {
|
function handleSlippageChange(e: ChangeEvent<HTMLSelectElement>) {
|
||||||
setSlippage(e.target.value)
|
setSlippage(e.target.value)
|
||||||
}
|
}
|
||||||
@ -219,20 +171,7 @@ export default function Remove({
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FormHelp>
|
<FormHelp>{content.pool.remove.simple}</FormHelp>
|
||||||
{isAdvanced === true
|
|
||||||
? content.pool.remove.advanced
|
|
||||||
: content.pool.remove.simple}
|
|
||||||
</FormHelp>
|
|
||||||
<Button
|
|
||||||
style="text"
|
|
||||||
size="small"
|
|
||||||
onClick={handleAdvancedButton}
|
|
||||||
disabled={!isAssetNetwork}
|
|
||||||
className={styles.toggle}
|
|
||||||
>
|
|
||||||
{isAdvanced === true ? 'Simple' : 'Advanced'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div className={styles.output}>
|
<div className={styles.output}>
|
||||||
@ -242,14 +181,7 @@ export default function Remove({
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>{content.pool.remove.output.titleOut} minimum</p>
|
<p>{content.pool.remove.output.titleOut} minimum</p>
|
||||||
{isAdvanced === true ? (
|
<Token symbol={baseTokenSymbol} balance={minOceanAmount} />
|
||||||
<>
|
|
||||||
<Token symbol="OCEAN" balance={minOceanAmount} />
|
|
||||||
<Token symbol={datatokenSymbol} balance={minDatatokenAmount} />
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Token symbol="OCEAN" balance={minOceanAmount} />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.slippage}>
|
<div className={styles.slippage}>
|
||||||
|
@ -33,6 +33,7 @@ interface PoolInfo {
|
|||||||
weightDt: string
|
weightDt: string
|
||||||
datatokenSymbol: string
|
datatokenSymbol: string
|
||||||
baseTokenSymbol: string
|
baseTokenSymbol: string
|
||||||
|
baseTokenAddress: string
|
||||||
totalPoolTokens: string
|
totalPoolTokens: string
|
||||||
totalLiquidityInOcean: Decimal
|
totalLiquidityInOcean: Decimal
|
||||||
}
|
}
|
||||||
@ -162,6 +163,7 @@ export default function Pool(): ReactElement {
|
|||||||
weightDt: getWeight(poolData.datatokenWeight),
|
weightDt: getWeight(poolData.datatokenWeight),
|
||||||
datatokenSymbol: poolData.datatoken.symbol,
|
datatokenSymbol: poolData.datatoken.symbol,
|
||||||
baseTokenSymbol: poolData.baseToken.symbol,
|
baseTokenSymbol: poolData.baseToken.symbol,
|
||||||
|
baseTokenAddress: poolData.baseToken.address,
|
||||||
totalPoolTokens: poolData.totalShares,
|
totalPoolTokens: poolData.totalShares,
|
||||||
totalLiquidityInOcean
|
totalLiquidityInOcean
|
||||||
}
|
}
|
||||||
@ -352,7 +354,8 @@ export default function Pool(): ReactElement {
|
|||||||
poolAddress={price?.address}
|
poolAddress={price?.address}
|
||||||
poolTokens={poolInfoUser?.poolShares}
|
poolTokens={poolInfoUser?.poolShares}
|
||||||
totalPoolTokens={poolInfo?.totalPoolTokens}
|
totalPoolTokens={poolInfo?.totalPoolTokens}
|
||||||
datatokenSymbol={poolInfo?.datatokenSymbol}
|
baseTokenAddress={poolInfo?.baseTokenAddress}
|
||||||
|
baseTokenSymbol={poolInfo?.baseTokenSymbol}
|
||||||
fetchAllData={fetchAllData}
|
fetchAllData={fetchAllData}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
Loading…
Reference in New Issue
Block a user