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

output Liquidity Provider Fee

This commit is contained in:
Matthias Kretschmann 2020-08-06 11:41:18 +02:00
parent 988c7bc89a
commit 0b1505d5f3
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 38 additions and 13 deletions

View File

@ -35,9 +35,10 @@
.tokens {
display: grid;
margin-bottom: -2rem;
margin-left: -3rem;
margin-right: -3rem;
border-bottom: 1px solid var(--brand-grey-lighter);
}
@media screen and (min-width: 40rem) {
@ -46,11 +47,20 @@
}
}
.summary {
text-align: center;
margin-top: var(--spacer);
margin-bottom: -2rem;
}
.summary input {
max-width: 5rem;
}
.alertArea {
margin-left: -3rem;
margin-right: -3rem;
padding: var(--spacer) calc(var(--spacer) / 2);
padding-bottom: 0;
margin-top: var(--spacer);
border-top: 1px solid var(--brand-grey-lighter);
}

View File

@ -8,17 +8,21 @@ import Alert from '../../../atoms/Alert'
import Coin from './Coin'
import { isCorrectNetwork } from '../../../../utils/wallet'
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
import InputElement from '../../../atoms/Input/InputElement'
import Label from '../../../atoms/Input/Label'
export default function Advanced({
ocean,
tokensToMint,
weightOnDataToken,
onChange
liquidityProviderFee,
onOceanChange
}: {
ocean: string
tokensToMint: number
weightOnDataToken: string
onChange: (event: ChangeEvent<HTMLInputElement>) => void
liquidityProviderFee: string
onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
}): ReactElement {
const { appConfig } = useSiteMetadata()
const { account, balance, chainId, refreshBalance } = useOcean()
@ -40,18 +44,19 @@ export default function Advanced({
} else {
setError(undefined)
}
}, [ocean])
}, [ocean, chainId, account, balance])
// refetch balance periodically
useEffect(() => {
if (!account) return
refreshBalance()
const balanceInterval = setInterval(() => refreshBalance(), 10000) // 10 sec.
return () => {
clearInterval(balanceInterval)
}
}, [])
}, [ocean, chainId, account])
return (
<div className={stylesIndex.content}>
@ -78,7 +83,7 @@ export default function Advanced({
symbol="OCEAN"
value={ocean}
weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
onChange={onChange}
onOceanChange={onOceanChange}
/>
<Coin
name="tokensToMint"
@ -89,6 +94,16 @@ export default function Advanced({
/>
</div>
<footer className={styles.summary}>
<Label htmlFor="liquidityProviderFee">Liquidity Provider Fee</Label>
<InputElement
value={liquidityProviderFee}
name="liquidityProviderFee"
readOnly
postfix="%"
/>
</footer>
{error && (
<div className={styles.alertArea}>
<Alert text={error} state="error" />

View File

@ -10,14 +10,14 @@ export default function Coin({
name,
value,
weight,
onChange,
onOceanChange,
readOnly
}: {
symbol: string
name: string
value: string
weight: string
onChange?: (event: ChangeEvent<HTMLInputElement>) => void
onOceanChange?: (event: ChangeEvent<HTMLInputElement>) => void
readOnly?: boolean
}): ReactElement {
return (
@ -31,7 +31,7 @@ export default function Coin({
value={value}
name={name}
type="number"
onChange={onChange}
onChange={onOceanChange}
readOnly={readOnly}
prefix={symbol}
/>

View File

@ -8,7 +8,7 @@ import { useField } from 'formik'
export default function Price(props: InputProps): ReactElement {
const [field, meta, helpers] = useField(props)
const { weightOnDataToken } = field.value
const { weightOnDataToken, liquidityProviderFee } = field.value
const [ocean, setOcean] = useState('1')
const [tokensToMint, setTokensToMint] = useState<number>()
@ -26,7 +26,6 @@ export default function Price(props: InputProps): ReactElement {
useEffect(() => {
const tokensToMint = Number(ocean) * Number(weightOnDataToken)
setTokensToMint(tokensToMint)
console.log(field.value)
helpers.setValue({ ...field.value, tokensToMint })
}, [ocean])
@ -42,7 +41,8 @@ export default function Price(props: InputProps): ReactElement {
ocean={ocean}
tokensToMint={tokensToMint}
weightOnDataToken={weightOnDataToken}
onChange={handleOceanChange}
onOceanChange={handleOceanChange}
liquidityProviderFee={liquidityProviderFee}
/>
)
}