From 26ce0efc0b5e441863d8991af6121f105f8c7981 Mon Sep 17 00:00:00 2001 From: Cafe137 <77121044+Cafe137@users.noreply.github.com> Date: Tue, 28 Jun 2022 15:24:33 +0200 Subject: [PATCH] fix: sensible deposit and swap (#448) * fix: indicate and lower minimum xdai to deposit * fix: take user input on swap page * fix: change minimum_dai to minimum_bzz * fix: token naming convention * refactor: use constants * fix: check for positive decimal --- src/components/SwarmTextInput.tsx | 4 +++ src/pages/top-up/Swap.tsx | 46 ++++++++++++++++++++++++++----- src/pages/top-up/index.tsx | 10 +++++-- 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/src/components/SwarmTextInput.tsx b/src/components/SwarmTextInput.tsx index e321df4..a4def78 100644 --- a/src/components/SwarmTextInput.tsx +++ b/src/components/SwarmTextInput.tsx @@ -10,6 +10,7 @@ interface Props { formik?: boolean optional?: boolean defaultValue?: string + placeholder?: string onChange?: (event: ChangeEvent) => void } @@ -41,6 +42,7 @@ export function SwarmTextInput({ formik, onChange, defaultValue, + placeholder, }: Props): ReactElement { const classes = useStyles() @@ -57,6 +59,7 @@ export function SwarmTextInput({ className={classes.field} defaultValue={defaultValue || ''} InputProps={{ disableUnderline: true }} + placeholder={placeholder} /> ) } @@ -72,6 +75,7 @@ export function SwarmTextInput({ defaultValue={defaultValue || ''} onChange={onChange} InputProps={{ disableUnderline: true }} + placeholder={placeholder} /> ) } diff --git a/src/pages/top-up/Swap.tsx b/src/pages/top-up/Swap.tsx index e560042..c09037f 100644 --- a/src/pages/top-up/Swap.tsx +++ b/src/pages/top-up/Swap.tsx @@ -1,9 +1,10 @@ import { Box, Typography } from '@material-ui/core' +import BigNumber from 'bignumber.js' import { useSnackbar } from 'notistack' import { ReactElement, useContext, useState } from 'react' +import { useNavigate } from 'react-router' import ArrowDown from 'remixicon-react/ArrowDownCircleLineIcon' import Check from 'remixicon-react/CheckLineIcon' -import { useNavigate } from 'react-router' import ExpandableListItem from '../../components/ExpandableListItem' import ExpandableListItemActions from '../../components/ExpandableListItemActions' import ExpandableListItemKey from '../../components/ExpandableListItemKey' @@ -21,6 +22,9 @@ import { sleepMs } from '../../utils' import { performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop' import { TopUpProgressIndicator } from './TopUpProgressIndicator' +const MINIMUM_XDAI = '0.1' +const MINIMUM_XBZZ = '0.1' + interface Props { header: string } @@ -28,6 +32,8 @@ interface Props { export function Swap({ header }: Props): ReactElement { const [loading, setLoading] = useState(false) const [hasSwapped, setSwapped] = useState(false) + const [userInputSwap, setUserInputSwap] = useState(null) + const [price] = useState(DaiToken.fromDecimal('0.6', 18)) const { providerUrl } = useContext(TopUpContext) const { balance, nodeAddresses } = useContext(BeeContext) @@ -39,10 +45,27 @@ export function Swap({ header }: Props): ReactElement { return } - const daiToSwap = balance.dai.minusBaseUnits('1') + const optimalSwap = balance.dai.minusBaseUnits('1') + const lowAmountSwap = new DaiToken(balance.dai.toBigNumber.dividedToIntegerBy(2)) + + let daiToSwap: DaiToken + + function isPositiveDecimal(value: string): boolean { + try { + return new BigNumber(value).isPositive() + } catch { + return false + } + } + + if (userInputSwap && isPositiveDecimal(userInputSwap)) { + daiToSwap = DaiToken.fromDecimal(userInputSwap, 18) + } else { + daiToSwap = lowAmountSwap.toBigNumber.gt(optimalSwap.toBigNumber) ? lowAmountSwap : optimalSwap + } const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber)) - const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedToIntegerBy(200)) + const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedBy(100).dividedToIntegerBy(price.toDecimal)) async function onSwap() { if (hasSwapped || !providerUrl) { @@ -76,8 +99,8 @@ export function Swap({ header }: Props): ReactElement { - You need to swap xDAI to BZZ in order to use Swarm. Make sure to keep at least 1 xDAI in order to pay for - transaction costs on the network. + You need to swap xDAI to BZZ in order to use Swarm. Make sure to keep at least {MINIMUM_XDAI} xDAI in order to + pay for transaction costs on the network. @@ -91,9 +114,16 @@ export function Swap({ header }: Props): ReactElement { false} + onChange={event => setUserInputSwap(event.target.value)} /> + {daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) ? ( + Must keep at least {MINIMUM_XDAI} xDAI after swap! + ) : null} + {bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ) ? ( + Must have at least {MINIMUM_XBZZ} xBZZ after swap! + ) : null} @@ -117,7 +147,9 @@ export function Swap({ header }: Props): ReactElement { Swap Now diff --git a/src/pages/top-up/index.tsx b/src/pages/top-up/index.tsx index 8e89de1..2f3c71f 100644 --- a/src/pages/top-up/index.tsx +++ b/src/pages/top-up/index.tsx @@ -1,7 +1,7 @@ import { Box, Grid, Typography } from '@material-ui/core' import { ReactElement, useContext } from 'react' -import Check from 'remixicon-react/CheckLineIcon' import { useNavigate } from 'react-router' +import Check from 'remixicon-react/CheckLineIcon' import ExpandableListItem from '../../components/ExpandableListItem' import ExpandableListItemKey from '../../components/ExpandableListItemKey' import { HistoryHeader } from '../../components/HistoryHeader' @@ -11,6 +11,8 @@ import { SwarmDivider } from '../../components/SwarmDivider' import { Context } from '../../providers/Bee' import { TopUpProgressIndicator } from './TopUpProgressIndicator' +const MINIMUM_XDAI = '0.5' + interface Props { header: string title: string @@ -26,7 +28,7 @@ export default function Index({ header, title, p, next }: Props): ReactElement { return } - const disabled = balance.dai.toDecimal.lte(1) + const disabled = balance.dai.toDecimal.lt(MINIMUM_XDAI) return ( <> @@ -49,7 +51,9 @@ export default function Index({ header, title, p, next }: Props): ReactElement { navigate(next)} disabled={disabled}> Proceed - {disabled ? Please deposit xDAI to the address above in order to proceed. : null} + {disabled ? ( + Please deposit at least {MINIMUM_XDAI} xDAI to the address above in order to proceed. + ) : null} )