mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-29 00:57:50 +02:00
8a5bddbf6e
* get swap fee, max values * use baseToken instead of ocean * build fixes * set form trade tx - WIP * use pool info * logs deleted * merge fixes * use local ocean.js, get spot price * handle value changes, logs deleted * fixes after v4 merge * valid user liquidity displayed * get correct token amount * more fixes * form trade fixes * positive input values fix * use proper swap functions * use appConfig's marketFeeAddress * remove redundant setters * use consumeMarketPoolSwapFee * use poolInfo, remove log * code fixes * some more fixes * fees fix * use poolInfo data * various fixes * fixes and cleanup * fix build * partial decimal fix * add swap fee * fix sub updates * remove console * fix package * fix package-lock * remove ssh * fix blockies and package * fix comments * remove unused var Co-authored-by: ClaudiaHolhos <claudia@oceanprotocol.com> Co-authored-by: mihaisc <mihai@oceanprotocol.com>
96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
import { FormikContextType, useFormikContext } from 'formik'
|
|
import React, { ReactElement, useEffect, useState } from 'react'
|
|
import { useAsset } from '@context/Asset'
|
|
import Token from '../Pool/Token'
|
|
import styles from './Output.module.css'
|
|
|
|
import Decimal from 'decimal.js'
|
|
import { FormTradeData } from './_types'
|
|
import { usePool } from '@context/Pool'
|
|
|
|
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
|
|
|
|
export default function Output({
|
|
poolAddress,
|
|
lpSwapFee
|
|
}: {
|
|
poolAddress: string
|
|
lpSwapFee: string
|
|
}): ReactElement {
|
|
const { isAssetNetwork } = useAsset()
|
|
const { poolInfo } = usePool()
|
|
const [outputWithSlippage, setOutputWithSlippage] = useState<string>('0')
|
|
// Connect with form
|
|
const { values }: FormikContextType<FormTradeData> = useFormikContext()
|
|
|
|
// Get output values
|
|
useEffect(() => {
|
|
if (!poolAddress || !isAssetNetwork) return
|
|
|
|
async function getOutput() {
|
|
if (!values.baseToken || !values.datatoken || !values.output) return
|
|
|
|
const output =
|
|
values.output === 'exactIn'
|
|
? new Decimal(
|
|
values.type === 'sell' ? values.baseToken : values.datatoken
|
|
)
|
|
.mul(
|
|
new Decimal(1)
|
|
.minus(new Decimal(values.slippage).div(new Decimal(100)))
|
|
.toString()
|
|
)
|
|
.toString()
|
|
: new Decimal(
|
|
values.type === 'sell' ? values.datatoken : values.baseToken
|
|
)
|
|
.mul(
|
|
new Decimal(1)
|
|
.plus(new Decimal(values.slippage).div(new Decimal(100)))
|
|
.toString()
|
|
)
|
|
.toString()
|
|
|
|
setOutputWithSlippage(output)
|
|
}
|
|
getOutput()
|
|
}, [poolAddress, values, isAssetNetwork])
|
|
|
|
return (
|
|
<div className={styles.output}>
|
|
<div>
|
|
<p>
|
|
{values.output === 'exactIn' ? 'Minimum Received' : 'Maximum Sent'}
|
|
</p>
|
|
<Token
|
|
symbol={
|
|
values.type === 'buy'
|
|
? values.output === 'exactIn'
|
|
? poolInfo.datatokenSymbol
|
|
: poolInfo.baseTokenSymbol
|
|
: values.output === 'exactIn'
|
|
? poolInfo.baseTokenSymbol
|
|
: poolInfo.datatokenSymbol
|
|
}
|
|
balance={outputWithSlippage}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p>Swap fee</p>
|
|
<Token
|
|
symbol={`${
|
|
values.type === 'buy'
|
|
? poolInfo.baseTokenSymbol
|
|
: poolInfo.datatokenSymbol
|
|
} ${
|
|
poolInfo.liquidityProviderSwapFee
|
|
? `(${poolInfo.liquidityProviderSwapFee}%)`
|
|
: ''
|
|
}`}
|
|
balance={lpSwapFee}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|