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

add/remove baseToken only

This commit is contained in:
Matthias Kretschmann 2022-01-24 14:27:28 +00:00
parent c140cdc82c
commit 4dc188d3e4
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 44 additions and 156 deletions

View File

@ -50,7 +50,7 @@ export default function Actions({
<TokenApproval
actionButton={actionButton}
amount={amount}
coin={coin}
coin={coin || 'OCEAN'}
disabled={isDisabled}
/>
) : (

View File

@ -8,11 +8,9 @@ import {
useFormikContext
} from 'formik'
import Button from '@shared/atoms/Button'
import CoinSelect from '../CoinSelect'
import { FormAddLiquidity } from '.'
import UserLiquidity from '../../UserLiquidity'
import { useWeb3 } from '@context/Web3'
import { isValidNumber } from '@utils/numbers'
import Decimal from 'decimal.js'
import { useAsset } from '@context/Asset'
@ -20,11 +18,8 @@ import { LoggerInstance, Pool } from '@oceanprotocol/lib'
export default function FormAdd({
tokenInAddress,
coin,
dtBalance,
dtSymbol,
tokenInSymbol,
amountMax,
setCoin,
setAmount,
totalPoolTokens,
totalBalance,
@ -33,11 +28,8 @@ export default function FormAdd({
setNewPoolShare
}: {
tokenInAddress: string
coin: string
dtBalance: string
dtSymbol: string
tokenInSymbol: string
amountMax: string
setCoin: (value: string) => void
setAmount: (value: string) => void
totalPoolTokens: string
totalBalance: PoolBalance
@ -111,16 +103,12 @@ export default function FormAdd({
setNewPoolShare
])
useEffect(() => {
setFieldValue('amount', undefined)
}, [coin])
return (
<>
<UserLiquidity
amount={coin === 'OCEAN' ? balance.ocean : dtBalance}
amount={balance.ocean}
amountMax={amountMax}
symbol={coin}
symbol={tokenInSymbol}
/>
<Field name="amount">
@ -138,13 +126,7 @@ export default function FormAdd({
min="0"
value={`${values.amount}`}
step="any"
prefix={
<CoinSelect
dtSymbol={dtSymbol}
setCoin={setCoin}
disabled={!web3 || !isAssetNetwork}
/>
}
prefix={tokenInSymbol}
placeholder="0"
field={field}
form={form}
@ -154,7 +136,7 @@ export default function FormAdd({
)}
</Field>
{(Number(balance.ocean) || dtBalance) > (values.amount || 0) && (
{Number(balance.ocean) && (
<Button
className={styles.buttonMax}
style="text"

View File

@ -13,8 +13,7 @@ export default function Output({
swapFee,
dtSymbol,
totalPoolTokens,
totalBalance,
coin
totalBalance
}: {
newPoolTokens: string
newPoolShare: string
@ -22,7 +21,6 @@ export default function Output({
dtSymbol: string
totalPoolTokens: string
totalBalance: PoolBalance
coin: string
}): ReactElement {
const { help, titleIn, titleOut } = content.pool.add.output
@ -37,21 +35,14 @@ export default function Output({
return
const newPoolSupply = new Decimal(totalPoolTokens).plus(newPoolTokens)
const ratio = new Decimal(newPoolTokens).div(newPoolSupply)
const newOceanReserve =
coin === 'OCEAN'
? new Decimal(totalBalance.ocean).plus(values.amount)
: new Decimal(totalBalance.ocean)
const newDtReserve =
coin === 'OCEAN'
? new Decimal(totalBalance.datatoken)
: new Decimal(totalBalance.datatoken).plus(values.amount)
const newOceanReserve = new Decimal(totalBalance.ocean).plus(values.amount)
const newDtReserve = new Decimal(totalBalance.datatoken)
const poolOcean = newOceanReserve.mul(ratio).toString()
const poolDatatoken = newDtReserve.mul(ratio).toString()
setPoolOcean(poolOcean)
setPoolDatatoken(poolDatatoken)
}, [
values.amount,
coin,
totalBalance,
totalPoolTokens,
newPoolShare,

View File

@ -13,7 +13,8 @@ import DebugOutput from '@shared/DebugOutput'
import { useWeb3 } from '@context/Web3'
import { useAsset } from '@context/Asset'
import content from '../../../../../../content/price.json'
import { Datatoken, LoggerInstance, Pool } from '@oceanprotocol/lib'
import { LoggerInstance, Pool } from '@oceanprotocol/lib'
import { getOceanConfig } from '@utils/ocean'
export interface FormAddLiquidity {
amount: number
@ -30,7 +31,7 @@ export default function Add({
totalBalance,
swapFee,
dtSymbol,
dtAddress,
baseTokenSymbol,
fetchAllData
}: {
setShowAdd: (show: boolean) => void
@ -39,15 +40,13 @@ export default function Add({
totalBalance: PoolBalance
swapFee: string
dtSymbol: string
dtAddress: string
baseTokenSymbol: string
fetchAllData: () => void
}): ReactElement {
const { accountId, balance, web3 } = useWeb3()
const { isAssetNetwork } = useAsset()
const { debug } = useUserPreferences()
const [txId, setTxId] = useState<string>()
const [coin, setCoin] = useState('OCEAN')
const [dtBalance, setDtBalance] = useState<string>()
const [amountMax, setAmountMax] = useState<string>()
const [amount, setAmount] = useState<string>('0')
const [newPoolTokens, setNewPoolTokens] = useState('0')
@ -62,62 +61,37 @@ export default function Add({
.min(0.00001, (param) => `Must be more or equal to ${param.min}`)
.max(
Number(amountMax),
`Maximum you can add is ${Number(amountMax).toFixed(2)} ${coin}`
`Maximum you can add is ${Number(amountMax).toFixed(2)} OCEAN`
)
.required('Required')
})
// Get datatoken balance when datatoken selected
useEffect(() => {
if (!web3 || !accountId || !isAssetNetwork || coin === 'OCEAN') return
async function getDtBalance() {
const datatokenInstance = new Datatoken(web3)
const dtBalance = await datatokenInstance.balance(dtAddress, accountId)
setDtBalance(dtBalance)
}
getDtBalance()
}, [web3, accountId, dtAddress, coin, isAssetNetwork])
// Get maximum amount for either OCEAN or datatoken
// Get maximum amount for OCEAN
useEffect(() => {
if (!web3 || !accountId || !isAssetNetwork || !poolAddress) return
async function getMaximum() {
const poolInstance = new Pool(web3, LoggerInstance)
const baseTokenAddress = await poolInstance.getBasetoken(poolAddress)
const tokenInAddress = coin === 'OCEAN' ? baseTokenAddress : dtAddress
setTokenInAddress(tokenInAddress)
try {
const poolInstance = new Pool(web3, LoggerInstance)
const tokenInAddress = await poolInstance.getBasetoken(poolAddress)
setTokenInAddress(tokenInAddress)
const amountMaxPool = await poolInstance.getReserve(
poolAddress,
tokenInAddress
)
const amountMaxPool = await poolInstance.getReserve(
poolAddress,
tokenInAddress
)
// coin === 'OCEAN'
// ? await poolInstance.getOceanMaxAddLiquidity(poolAddress)
// : await poolInstance.getDTMaxAddLiquidity(poolAddress)
const amountMax =
coin === 'OCEAN'
? Number(balance.ocean) > Number(amountMaxPool)
const amountMax =
Number(balance.ocean) > Number(amountMaxPool)
? amountMaxPool
: balance.ocean
: Number(dtBalance) > Number(amountMaxPool)
? amountMaxPool
: dtBalance
setAmountMax(Number(amountMax).toFixed(3))
setAmountMax(Number(amountMax).toFixed(3))
} catch (error) {
LoggerInstance.error(error.message)
}
}
getMaximum()
}, [
web3,
accountId,
isAssetNetwork,
poolAddress,
dtAddress,
coin,
dtBalance,
balance.ocean
])
}, [web3, accountId, isAssetNetwork, poolAddress, balance?.ocean])
// Submit
async function handleAddLiquidity(amount: number, resetForm: () => void) {
@ -133,10 +107,10 @@ export default function Add({
minPoolAmountOut
)
setTxId(result?.transactionHash)
// resetForm()
fetchAllData()
resetForm()
} catch (error) {
console.error(error.message)
LoggerInstance.error(error.message)
toast.error(error.message)
}
}
@ -161,11 +135,8 @@ export default function Add({
{isWarningAccepted ? (
<FormAdd
tokenInAddress={tokenInAddress}
coin={coin}
dtBalance={dtBalance}
dtSymbol={dtSymbol}
tokenInSymbol={baseTokenSymbol}
amountMax={amountMax}
setCoin={setCoin}
setAmount={setAmount}
totalPoolTokens={totalPoolTokens}
totalBalance={totalBalance}
@ -196,7 +167,6 @@ export default function Add({
dtSymbol={dtSymbol}
totalPoolTokens={totalPoolTokens}
totalBalance={totalBalance}
coin={coin}
/>
<Actions
@ -212,7 +182,6 @@ export default function Add({
actionName={content.pool.add.action}
action={submitForm}
amount={amount}
coin={coin}
txId={txId}
/>
{debug && <DebugOutput title="Collected values" output={values} />}

View File

@ -1,26 +0,0 @@
.coinSelect {
composes: select from '@shared/FormInput/InputElement.module.css';
font-size: var(--font-size-small);
font-weight: var(--font-weight-base);
border: none;
margin-left: -0.5rem;
margin-right: -0.5rem;
background-color: var(--background-highlight);
width: auto;
padding: 0 1.25rem 0 0.25rem;
height: 41px;
text-align: center;
/* custom arrow, without the divider line */
background-image: linear-gradient(
45deg,
transparent 50%,
var(--font-color-text) 50%
),
linear-gradient(135deg, var(--font-color-text) 50%, transparent 50%);
background-position: calc(100% - 14px) 1.2rem, calc(100% - 9px) 1.2rem, 100% 0;
}
.option {
color: var(--font-color-heading);
}

View File

@ -1,27 +0,0 @@
import React, { ReactElement } from 'react'
import styles from './CoinSelect.module.css'
export default function CoinSelect({
dtSymbol,
disabled,
setCoin
}: {
dtSymbol: string
disabled: boolean
setCoin: (coin: string) => void
}): ReactElement {
return (
<select
className={styles.coinSelect}
onChange={(e) => setCoin(e.target.value)}
disabled={disabled}
>
<option className={styles.option} value="OCEAN">
OCEAN
</option>
<option className={styles.option} value={dtSymbol}>
{dtSymbol}
</option>
</select>
)
}

View File

@ -32,7 +32,7 @@ interface PoolInfo {
weightOcean: string
weightDt: string
dtSymbol: string
oceanSymbol: string
baseTokenSymbol: string
totalPoolTokens: string
totalLiquidityInOcean: Decimal
}
@ -161,7 +161,7 @@ export default function Pool(): ReactElement {
weightOcean: getWeight(poolData.baseTokenWeight),
weightDt: getWeight(poolData.datatokenWeight),
dtSymbol: poolData.datatoken.symbol,
oceanSymbol: poolData.baseToken.symbol,
baseTokenSymbol: poolData.baseToken.symbol,
totalPoolTokens: poolData.totalShares,
totalLiquidityInOcean
}
@ -327,7 +327,6 @@ export default function Pool(): ReactElement {
//
useEffect(() => {
if (!owner || !accountId) return
setIsRemoveDisabled(isInPurgatory && owner === accountId)
}, [isInPurgatory, owner, accountId])
@ -337,14 +336,14 @@ export default function Pool(): ReactElement {
<Add
setShowAdd={setShowAdd}
poolAddress={price?.address}
totalPoolTokens={poolInfo.totalPoolTokens}
totalPoolTokens={poolInfo?.totalPoolTokens}
totalBalance={{
ocean: new Decimal(price?.ocean).toString(),
datatoken: new Decimal(price?.datatoken).toString()
}}
swapFee={poolInfo.poolFee}
dtSymbol={poolInfo.dtSymbol}
dtAddress={ddo?.services[0].datatokenAddress}
swapFee={poolInfo?.poolFee}
dtSymbol={poolInfo?.dtSymbol}
baseTokenSymbol={poolInfo?.baseTokenSymbol}
fetchAllData={fetchAllData}
/>
) : showRemove ? (
@ -362,7 +361,7 @@ export default function Pool(): ReactElement {
<PriceUnit price="1" symbol={poolInfo?.dtSymbol} /> ={' '}
<PriceUnit
price={`${price?.value}`}
symbol={poolInfo?.oceanSymbol}
symbol={poolInfo?.baseTokenSymbol}
/>
<Tooltip content={content.pool.tooltips.price} />
<div className={styles.dataTokenLinks}>
@ -398,7 +397,7 @@ export default function Pool(): ReactElement {
</>
}
ocean={`${poolInfoUser?.liquidity?.ocean}`}
oceanSymbol={poolInfo?.oceanSymbol}
oceanSymbol={poolInfo?.baseTokenSymbol}
dt={`${poolInfoUser?.liquidity?.datatoken}`}
dtSymbol={poolInfo?.dtSymbol}
poolShares={poolInfoUser?.poolShares}
@ -415,7 +414,7 @@ export default function Pool(): ReactElement {
<TokenList
title="Pool Creator Statistics"
ocean={`${poolInfoOwner?.liquidity?.ocean}`}
oceanSymbol={poolInfo?.oceanSymbol}
oceanSymbol={poolInfo?.baseTokenSymbol}
dt={`${poolInfoOwner?.liquidity?.datatoken}`}
dtSymbol={poolInfo?.dtSymbol}
poolShares={poolInfoOwner?.poolShares}
@ -444,7 +443,7 @@ export default function Pool(): ReactElement {
</>
}
ocean={`${price?.ocean}`}
oceanSymbol={poolInfo?.oceanSymbol}
oceanSymbol={poolInfo?.baseTokenSymbol}
dt={`${price?.datatoken}`}
dtSymbol={poolInfo?.dtSymbol}
poolShares={poolInfo?.totalPoolTokens}