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

@@ -10,6 +10,7 @@ interface Props {
   formik?: boolean
   optional?: boolean
   defaultValue?: string
+  placeholder?: string
   onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => 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}
     />
   )
 }

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,13 +22,18 @@ 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
 }
 
 export function Swap({ header }: Props): ReactElement {
   const [loading, setLoading] = useState(false)
   const [hasSwapped, setSwapped] = useState(false)
+  const [userInputSwap, setUserInputSwap] = useState<string | null>(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 <Loading />
   }
 
-  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 {
       </Box>
       <Box mb={4}>
         <Typography>
-          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.
         </Typography>
       </Box>
       <SwarmDivider mb={4} />
@@ -91,9 +114,16 @@ export function Swap({ header }: Props): ReactElement {
         <SwarmTextInput
           label="Amount to swap"
           defaultValue={`${daiToSwap.toSignificantDigits(4)} XDAI`}
+          placeholder={`${daiToSwap.toSignificantDigits(4)} XDAI`}
           name="x"
-          onChange={() => false}
+          onChange={event => setUserInputSwap(event.target.value)}
         />
+        {daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) ? (
+          <Typography>Must keep at least {MINIMUM_XDAI} xDAI after swap!</Typography>
+        ) : null}
+        {bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ) ? (
+          <Typography>Must have at least {MINIMUM_XBZZ} xBZZ after swap!</Typography>
+        ) : null}
       </Box>
       <Box mb={4}>
         <ArrowDown size={24} color="#aaaaaa" />
@@ -117,7 +147,9 @@ export function Swap({ header }: Props): ReactElement {
         <SwarmButton
           iconType={Check}
           onClick={onSwap}
-          disabled={hasSwapped || loading || balance.dai.toDecimal.lte(1)}
+          disabled={
+            hasSwapped || loading || daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) || bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ)
+          }
           loading={loading}
         >
           Swap Now

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 <Loading />
   }
 
-  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 {
         <SwarmButton iconType={Check} onClick={() => navigate(next)} disabled={disabled}>
           Proceed
         </SwarmButton>
-        {disabled ? <Typography>Please deposit xDAI to the address above in order to proceed.</Typography> : null}
+        {disabled ? (
+          <Typography>Please deposit at least {MINIMUM_XDAI} xDAI to the address above in order to proceed.</Typography>
+        ) : null}
       </Grid>
     </>
   )