mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
Incorrect wallet balance on trade tab fix (#1310)
* display the actual base token wallet amount * delete logs * balance dt fix * width changes * remove last commit changes * sell values * balance fix for dt item * logs and comments removed * fix max calculations Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * disable inputs on trade actions * clear inputs after submit and catch tx errors * fix dep Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fetch reserver from contracts Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix null and tag key Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * label change and cleanup Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> Co-authored-by: ClaudiaHolhos <claudia@oceanprotocol.com> Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro> Co-authored-by: Matthias Kretschmann <m@kretschmann.io> Co-authored-by: Enzo Vezzaro <enzo-vezzaro@live.it>
This commit is contained in:
parent
1ed3fd8a04
commit
6324e85b0f
20
package-lock.json
generated
20
package-lock.json
generated
@ -4020,9 +4020,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@portis/web3": {
|
"node_modules/@portis/web3": {
|
||||||
"version": "4.0.7",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz",
|
||||||
"integrity": "sha512-p/mPjjspIDPGpn2LsMP8HaQlS1OwksPYgpJUbMkwty2xCpJ8CU1xZjqc5rsFDGbCJEwC0jlpVx26jVkoBSoJ3A==",
|
"integrity": "sha512-efGssWqrwpYPzQyOupYPpWmjPU/WwcFGoPXzjLbjQ3Z4Z7Q4qqqwkMeE1mwMbxWudFKlHz/VxdpJrDA42Ufqrg==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"ethereumjs-util": "5.2.0",
|
"ethereumjs-util": "5.2.0",
|
||||||
"penpal": "3.0.7",
|
"penpal": "3.0.7",
|
||||||
@ -12607,10 +12607,7 @@
|
|||||||
"node_modules/jsonify": {
|
"node_modules/jsonify": {
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
|
||||||
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
|
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
|
||||||
"engines": {
|
|
||||||
"node": "*"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"node_modules/jsprim": {
|
"node_modules/jsprim": {
|
||||||
"version": "1.4.2",
|
"version": "1.4.2",
|
||||||
@ -21920,9 +21917,9 @@
|
|||||||
"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
|
"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
|
||||||
},
|
},
|
||||||
"@portis/web3": {
|
"@portis/web3": {
|
||||||
"version": "4.0.7",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz",
|
||||||
"integrity": "sha512-p/mPjjspIDPGpn2LsMP8HaQlS1OwksPYgpJUbMkwty2xCpJ8CU1xZjqc5rsFDGbCJEwC0jlpVx26jVkoBSoJ3A==",
|
"integrity": "sha512-efGssWqrwpYPzQyOupYPpWmjPU/WwcFGoPXzjLbjQ3Z4Z7Q4qqqwkMeE1mwMbxWudFKlHz/VxdpJrDA42Ufqrg==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"ethereumjs-util": "5.2.0",
|
"ethereumjs-util": "5.2.0",
|
||||||
"penpal": "3.0.7",
|
"penpal": "3.0.7",
|
||||||
@ -31940,7 +31937,8 @@
|
|||||||
"styled-jsx": {
|
"styled-jsx": {
|
||||||
"version": "5.0.1",
|
"version": "5.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.1.tgz",
|
||||||
"integrity": "sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw=="
|
"integrity": "sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==",
|
||||||
|
"requires": {}
|
||||||
},
|
},
|
||||||
"supports-color": {
|
"supports-color": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
|
@ -41,8 +41,8 @@ export default function Tags({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes}>
|
<div className={classes}>
|
||||||
{tags?.map((tag) => (
|
{tags?.map((tag, i) => (
|
||||||
<Tag tag={tag} noLinks={noLinks} key={tag} />
|
<Tag tag={tag} noLinks={noLinks} key={tag + i} />
|
||||||
))}
|
))}
|
||||||
{shouldShowMore && (
|
{shouldShowMore && (
|
||||||
<span className={styles.more}>{`+ ${items.length - max} more`}</span>
|
<span className={styles.more}>{`+ ${items.length - max} more`}</span>
|
||||||
|
@ -35,10 +35,10 @@ export default function FormTrade({
|
|||||||
const { isAssetNetwork } = useAsset()
|
const { isAssetNetwork } = useAsset()
|
||||||
const { debug } = useUserPreferences()
|
const { debug } = useUserPreferences()
|
||||||
const { appConfig } = useMarketMetadata()
|
const { appConfig } = useMarketMetadata()
|
||||||
const { poolInfo } = usePool()
|
const { poolInfo, fetchAllData } = usePool()
|
||||||
|
|
||||||
const [txId, setTxId] = useState<string>()
|
const [txId, setTxId] = useState<string>()
|
||||||
const [coinFrom, setCoinFrom] = useState<string>('OCEAN')
|
const [coinFrom, setCoinFrom] = useState<string>('OCEAN')
|
||||||
|
|
||||||
const [maximumBaseToken, setMaximumBaseToken] = useState('0')
|
const [maximumBaseToken, setMaximumBaseToken] = useState('0')
|
||||||
const [maximumDt, setMaximumDt] = useState('0')
|
const [maximumDt, setMaximumDt] = useState('0')
|
||||||
const [isWarningAccepted, setIsWarningAccepted] = useState(false)
|
const [isWarningAccepted, setIsWarningAccepted] = useState(false)
|
||||||
@ -105,6 +105,10 @@ export default function FormTrade({
|
|||||||
tokenInOutMarket,
|
tokenInOutMarket,
|
||||||
amountsInOutMaxFee
|
amountsInOutMaxFee
|
||||||
)
|
)
|
||||||
|
|
||||||
|
if (!tx) {
|
||||||
|
throw new Error('Failed to swap tokens!')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (values.output === 'exactOut') {
|
if (values.output === 'exactOut') {
|
||||||
const tokenOutMarket: TokenInOutMarket = {
|
const tokenOutMarket: TokenInOutMarket = {
|
||||||
@ -139,8 +143,11 @@ export default function FormTrade({
|
|||||||
tokenOutMarket,
|
tokenOutMarket,
|
||||||
amountsOutMaxFee
|
amountsOutMaxFee
|
||||||
)
|
)
|
||||||
|
if (!tx) {
|
||||||
|
throw new Error('Failed to swap tokens!')
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
await fetchAllData()
|
||||||
setTxId(tx?.transactionHash)
|
setTxId(tx?.transactionHash)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
LoggerInstance.error(error.message)
|
LoggerInstance.error(error.message)
|
||||||
@ -152,8 +159,10 @@ export default function FormTrade({
|
|||||||
<Formik
|
<Formik
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
validationSchema={validationSchema}
|
validationSchema={validationSchema}
|
||||||
onSubmit={async (values, { setSubmitting, resetForm }) => {
|
onSubmit={async (values, { setFieldValue, setSubmitting, resetForm }) => {
|
||||||
await handleTrade(values)
|
await handleTrade(values)
|
||||||
|
await setFieldValue('baseToken', '')
|
||||||
|
await setFieldValue('datatoken', '')
|
||||||
resetForm()
|
resetForm()
|
||||||
setSubmitting(false)
|
setSubmitting(false)
|
||||||
}}
|
}}
|
||||||
@ -167,6 +176,7 @@ export default function FormTrade({
|
|||||||
setCoin={setCoinFrom}
|
setCoin={setCoinFrom}
|
||||||
setMaximumBaseToken={setMaximumBaseToken}
|
setMaximumBaseToken={setMaximumBaseToken}
|
||||||
setMaximumDt={setMaximumDt}
|
setMaximumDt={setMaximumDt}
|
||||||
|
isLoading={isSubmitting}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className={styles.alertWrap}>
|
<div className={styles.alertWrap}>
|
||||||
|
@ -30,13 +30,15 @@ export default function Swap({
|
|||||||
balance,
|
balance,
|
||||||
setMaximumDt,
|
setMaximumDt,
|
||||||
setMaximumBaseToken,
|
setMaximumBaseToken,
|
||||||
setCoin
|
setCoin,
|
||||||
|
isLoading
|
||||||
}: {
|
}: {
|
||||||
asset: AssetExtended
|
asset: AssetExtended
|
||||||
balance: PoolBalance
|
balance: PoolBalance
|
||||||
setMaximumDt: (value: string) => void
|
setMaximumDt: (value: string) => void
|
||||||
setMaximumBaseToken: (value: string) => void
|
setMaximumBaseToken: (value: string) => void
|
||||||
setCoin: (value: string) => void
|
setCoin: (value: string) => void
|
||||||
|
isLoading: boolean
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { isAssetNetwork } = useAsset()
|
const { isAssetNetwork } = useAsset()
|
||||||
const { web3 } = useWeb3()
|
const { web3 } = useWeb3()
|
||||||
@ -69,92 +71,83 @@ export default function Swap({
|
|||||||
const [lpSwapFee, setLpSwapFee] = useState<string>()
|
const [lpSwapFee, setLpSwapFee] = useState<string>()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!asset || !balance || !values?.type || !web3 || !appConfig) return
|
if (!asset || !balance || !values?.type || !web3 || !appConfig || !poolInfo)
|
||||||
|
return
|
||||||
const poolInstance = new Pool(web3)
|
const poolInstance = new Pool(web3)
|
||||||
|
|
||||||
async function calculateMaximum() {
|
async function calculateMaximum() {
|
||||||
const maxDtFromPool =
|
const datatokenLiquidity = await poolInstance.getReserve(
|
||||||
values.type === 'buy'
|
poolData.id,
|
||||||
? calcMaxExactIn(poolData.datatokenLiquidity)
|
poolData.datatoken.address
|
||||||
: calcMaxExactOut(poolData.datatokenLiquidity)
|
|
||||||
|
|
||||||
const maxBaseTokenFromPool =
|
|
||||||
values.type === 'buy'
|
|
||||||
? calcMaxExactOut(poolData.baseTokenLiquidity)
|
|
||||||
: calcMaxExactIn(poolData.baseTokenLiquidity)
|
|
||||||
|
|
||||||
const amountDataToken =
|
|
||||||
values.type === 'buy'
|
|
||||||
? maxDtFromPool
|
|
||||||
: new Decimal(balance.baseToken).greaterThan(
|
|
||||||
calcMaxExactIn(poolData.datatokenLiquidity)
|
|
||||||
)
|
)
|
||||||
? calcMaxExactIn(poolData.datatokenLiquidity)
|
const baseTokenLiquidity = await poolInstance.getReserve(
|
||||||
: new Decimal(balance.datatoken)
|
poolData.id,
|
||||||
|
poolData.baseToken.address
|
||||||
const amountBaseToken =
|
|
||||||
values.type === 'buy'
|
|
||||||
? new Decimal(balance.baseToken).greaterThan(
|
|
||||||
calcMaxExactIn(poolData.baseTokenLiquidity)
|
|
||||||
)
|
)
|
||||||
? calcMaxExactIn(poolData.baseTokenLiquidity)
|
if (values.type === 'buy') {
|
||||||
: new Decimal(balance.baseToken)
|
const maxBaseTokenFromPool = calcMaxExactIn(baseTokenLiquidity)
|
||||||
: maxBaseTokenFromPool
|
|
||||||
|
|
||||||
try {
|
const maxBaseTokens = maxBaseTokenFromPool.greaterThan(
|
||||||
const maxBuyBaseToken: PoolPriceAndFees =
|
new Decimal(balance.baseToken)
|
||||||
await poolInstance.getAmountOutExactIn(
|
|
||||||
asset.accessDetails.addressOrId,
|
|
||||||
poolInfo.datatokenAddress,
|
|
||||||
poolInfo.baseTokenAddress,
|
|
||||||
amountDataToken.toString(),
|
|
||||||
appConfig.consumeMarketPoolSwapFee
|
|
||||||
)
|
)
|
||||||
|
? balance.baseToken
|
||||||
|
: maxBaseTokenFromPool.toDecimalPlaces(MAX_DECIMALS).toString()
|
||||||
|
|
||||||
const maxBuyDt: PoolPriceAndFees =
|
const maxDt = await poolInstance.getAmountOutExactIn(
|
||||||
await poolInstance.getAmountOutExactIn(
|
|
||||||
asset.accessDetails?.addressOrId,
|
asset.accessDetails?.addressOrId,
|
||||||
poolInfo.baseTokenAddress,
|
poolInfo.baseTokenAddress,
|
||||||
poolInfo.datatokenAddress,
|
poolInfo.datatokenAddress,
|
||||||
amountBaseToken.toString(),
|
maxBaseTokens.toString(),
|
||||||
appConfig.consumeMarketPoolSwapFee
|
appConfig.consumeMarketPoolSwapFee
|
||||||
)
|
)
|
||||||
const maximumDt =
|
const maximumDt = new Decimal(maxDt.tokenAmount)
|
||||||
values.type === 'buy'
|
.toDecimalPlaces(MAX_DECIMALS)
|
||||||
? amountDataToken.greaterThan(new Decimal(maxBuyDt.tokenAmount))
|
.toString()
|
||||||
? maxBuyDt.tokenAmount
|
|
||||||
: amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString()
|
|
||||||
: amountDataToken.greaterThan(new Decimal(balance.datatoken))
|
|
||||||
? balance.datatoken
|
|
||||||
: amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString()
|
|
||||||
|
|
||||||
const maximumBaseToken =
|
|
||||||
values.type === 'sell'
|
|
||||||
? amountBaseToken.greaterThan(
|
|
||||||
new Decimal(maxBuyBaseToken.tokenAmount)
|
|
||||||
)
|
|
||||||
? maxBuyBaseToken.tokenAmount
|
|
||||||
: amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString()
|
|
||||||
: amountBaseToken.greaterThan(new Decimal(balance.baseToken))
|
|
||||||
? balance.baseToken
|
|
||||||
: amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString()
|
|
||||||
|
|
||||||
setMaximumDt(maximumDt)
|
setMaximumDt(maximumDt)
|
||||||
setMaximumBaseToken(maximumBaseToken)
|
setMaximumBaseToken(maxBaseTokens)
|
||||||
|
|
||||||
setBaseTokenItem((prevState) => ({
|
setBaseTokenItem((prevState) => ({
|
||||||
...prevState,
|
...prevState,
|
||||||
amount: amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString(),
|
amount: balance.baseToken,
|
||||||
maxAmount: maximumBaseToken
|
maxAmount: maxBaseTokens
|
||||||
}))
|
}))
|
||||||
|
|
||||||
setDtItem((prevState) => ({
|
setDtItem((prevState) => ({
|
||||||
...prevState,
|
...prevState,
|
||||||
amount: amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString(),
|
amount: datatokenLiquidity,
|
||||||
maxAmount: maximumDt
|
maxAmount: maximumDt
|
||||||
}))
|
}))
|
||||||
} catch (error) {
|
} else {
|
||||||
LoggerInstance.error(error.message)
|
const maxDtFromPool = calcMaxExactIn(datatokenLiquidity)
|
||||||
|
const maxDatatokens = maxDtFromPool.greaterThan(
|
||||||
|
new Decimal(balance.datatoken)
|
||||||
|
)
|
||||||
|
? balance.datatoken
|
||||||
|
: maxDtFromPool.toDecimalPlaces(MAX_DECIMALS).toString()
|
||||||
|
|
||||||
|
const maxBaseTokens = await poolInstance.getAmountOutExactIn(
|
||||||
|
asset.accessDetails?.addressOrId,
|
||||||
|
poolInfo?.datatokenAddress,
|
||||||
|
poolInfo?.baseTokenAddress,
|
||||||
|
maxDatatokens.toString(),
|
||||||
|
appConfig.consumeMarketPoolSwapFee
|
||||||
|
)
|
||||||
|
const maximumBasetokens = new Decimal(maxBaseTokens.tokenAmount)
|
||||||
|
.toDecimalPlaces(MAX_DECIMALS)
|
||||||
|
.toString()
|
||||||
|
setMaximumDt(maxDatatokens)
|
||||||
|
setMaximumBaseToken(maximumBasetokens)
|
||||||
|
|
||||||
|
setDtItem((prevState) => ({
|
||||||
|
...prevState,
|
||||||
|
amount: balance.datatoken,
|
||||||
|
maxAmount: maxDatatokens
|
||||||
|
}))
|
||||||
|
setBaseTokenItem((prevState) => ({
|
||||||
|
...prevState,
|
||||||
|
amount: baseTokenLiquidity,
|
||||||
|
maxAmount: maximumBasetokens
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
calculateMaximum()
|
calculateMaximum()
|
||||||
@ -167,12 +160,11 @@ export default function Swap({
|
|||||||
asset,
|
asset,
|
||||||
web3,
|
web3,
|
||||||
dtItem.token,
|
dtItem.token,
|
||||||
|
dtItem.amount,
|
||||||
baseTokenItem.token,
|
baseTokenItem.token,
|
||||||
poolInfo.liquidityProviderSwapFee,
|
baseTokenItem.amount,
|
||||||
poolInfo.datatokenAddress,
|
|
||||||
poolInfo.baseTokenAddress,
|
|
||||||
appConfig,
|
appConfig,
|
||||||
appConfig.consumeMarketPoolSwapFee
|
poolInfo
|
||||||
])
|
])
|
||||||
|
|
||||||
const switchTokens = () => {
|
const switchTokens = () => {
|
||||||
@ -321,7 +313,7 @@ export default function Swap({
|
|||||||
<TradeInput
|
<TradeInput
|
||||||
name={values.type === 'sell' ? 'datatoken' : 'baseToken'}
|
name={values.type === 'sell' ? 'datatoken' : 'baseToken'}
|
||||||
item={values.type === 'sell' ? dtItem : baseTokenItem}
|
item={values.type === 'sell' ? dtItem : baseTokenItem}
|
||||||
disabled={!isAssetNetwork}
|
disabled={!isAssetNetwork || isLoading}
|
||||||
handleValueChange={handleValueChange}
|
handleValueChange={handleValueChange}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -329,7 +321,7 @@ export default function Swap({
|
|||||||
className={styles.swapButton}
|
className={styles.swapButton}
|
||||||
style="text"
|
style="text"
|
||||||
onClick={switchTokens}
|
onClick={switchTokens}
|
||||||
disabled={!isAssetNetwork}
|
disabled={!isAssetNetwork || isLoading}
|
||||||
>
|
>
|
||||||
<Arrow />
|
<Arrow />
|
||||||
</Button>
|
</Button>
|
||||||
@ -337,7 +329,7 @@ export default function Swap({
|
|||||||
<TradeInput
|
<TradeInput
|
||||||
name={values.type === 'sell' ? 'baseToken' : 'datatoken'}
|
name={values.type === 'sell' ? 'baseToken' : 'datatoken'}
|
||||||
item={values.type === 'sell' ? baseTokenItem : dtItem}
|
item={values.type === 'sell' ? baseTokenItem : dtItem}
|
||||||
disabled={!isAssetNetwork}
|
disabled={!isAssetNetwork || isLoading}
|
||||||
handleValueChange={handleValueChange}
|
handleValueChange={handleValueChange}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -351,7 +343,7 @@ export default function Swap({
|
|||||||
tokenAmount={tokenAmount}
|
tokenAmount={tokenAmount}
|
||||||
spotPrice={spotPrice}
|
spotPrice={spotPrice}
|
||||||
/>
|
/>
|
||||||
<Slippage disabled={!isAssetNetwork} />
|
<Slippage disabled={!isAssetNetwork || isLoading} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -38,7 +38,7 @@ export default function TradeInput({
|
|||||||
const isTopField =
|
const isTopField =
|
||||||
(name === 'baseToken' && values.type === 'buy') ||
|
(name === 'baseToken' && values.type === 'buy') ||
|
||||||
(name === 'datatoken' && values.type === 'sell')
|
(name === 'datatoken' && values.type === 'sell')
|
||||||
const titleAvailable = isTopField ? `Balance` : `Available from pool`
|
const titleAvailable = isTopField ? `Your Balance` : `Pool Balance`
|
||||||
const titleMaximum = isTopField ? `Maximum to spend` : `Maximum to receive`
|
const titleMaximum = isTopField ? `Maximum to spend` : `Maximum to receive`
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user