1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-16 17:33:26 +02:00
market/src/components/organisms/AssetActions/Trade/Output.tsx

78 lines
2.2 KiB
TypeScript
Raw Normal View History

Swap tokens (#204) * swap Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * validation and calculation Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * refactor Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove unused effect Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix interval Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * increase refresh timer, remove optional params Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * make inputs show up without wallet * style fixes * restyling * styling * more styling * fix refresh price Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove test effect * fixes, get data as early as possible from DDO and initial state * refactor * refactor * refactor * label tweaks * copy * typo * prototype output * remove price header * ouput swap fee * fix * spacing * copy * refactor pool transaction titles * copy * update math Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * use messaging tweaks * tab tweaks, output refactor * fix dark mode selection style * prototype output * method tweaks * slippage to 1%, added warnig banner Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * form tweaks * error fix * empty inputs by default * longer intervals * maxOcean validation fix * slippage tolerance UI * modified slippage UI * refactor, refresh ocean user balance * move typings/models around * typing fix * fixed output values Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * bump oceanlib Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove console.log * remove placeholder * tweak * non-web3 browser tweak Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
2020-11-16 16:21:15 +01:00
import { FormikContextType, useFormikContext } from 'formik'
import React, { ReactElement, useEffect, useState } from 'react'
import { FormTradeData } from '../../../../models/FormTrade'
import { useOcean } from '../../../../providers/Ocean'
Swap tokens (#204) * swap Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * validation and calculation Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * refactor Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove unused effect Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix interval Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * increase refresh timer, remove optional params Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * make inputs show up without wallet * style fixes * restyling * styling * more styling * fix refresh price Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove test effect * fixes, get data as early as possible from DDO and initial state * refactor * refactor * refactor * label tweaks * copy * typo * prototype output * remove price header * ouput swap fee * fix * spacing * copy * refactor pool transaction titles * copy * update math Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * use messaging tweaks * tab tweaks, output refactor * fix dark mode selection style * prototype output * method tweaks * slippage to 1%, added warnig banner Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * form tweaks * error fix * empty inputs by default * longer intervals * maxOcean validation fix * slippage tolerance UI * modified slippage UI * refactor, refresh ocean user balance * move typings/models around * typing fix * fixed output values Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * bump oceanlib Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove console.log * remove placeholder * tweak * non-web3 browser tweak Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
2020-11-16 16:21:15 +01:00
import Token from '../Pool/Token'
import styles from './Output.module.css'
export default function Output({
dtSymbol,
poolAddress
}: {
dtSymbol: string
poolAddress: string
}): ReactElement {
const { ocean } = useOcean()
const [maxOutput, setMaxOutput] = useState<string>()
const [swapFee, setSwapFee] = useState<string>()
const [swapFeeValue, setSwapFeeValue] = useState<string>()
// Connect with form
const { values }: FormikContextType<FormTradeData> = useFormikContext()
// Get swap fee
useEffect(() => {
if (!ocean || !poolAddress) return
async function getSwapFee() {
const swapFee = await ocean.pool.getSwapFee(poolAddress)
// swapFee is tricky: to get 0.1% you need to convert from 0.001
setSwapFee(`${Number(swapFee) * 100}`)
const value =
values.type === 'buy'
? Number(swapFee) * values.ocean
: Number(swapFee) * values.datatoken
setSwapFeeValue(value.toString())
}
getSwapFee()
}, [ocean, poolAddress, values])
// Get output values
useEffect(() => {
if (!ocean || !poolAddress) return
async function getOutput() {
// Minimum received
// TODO: check if this here is redundant cause we call some of that already in Swap.tsx
const maxImpact = 1 - Number(values.slippage) / 100
const maxPrice =
values.type === 'buy'
? (values.datatoken * maxImpact).toString()
: (values.ocean * maxImpact).toString()
setMaxOutput(maxPrice)
}
getOutput()
}, [ocean, poolAddress, values])
return (
<div className={styles.output}>
<div>
<p>Minimum Received</p>
<Token
symbol={values.type === 'buy' ? dtSymbol : 'OCEAN'}
balance={maxOutput}
/>
</div>
<div>
<p>Swap fee</p>
<Token
symbol={`${values.type === 'buy' ? `OCEAN` : dtSymbol} ${
swapFee ? `(${swapFee}%)` : ''
}`}
balance={swapFeeValue}
/>
</div>
</div>
)
}