fix: users can now upgrade to light node if they have enough funds (#458)

src/pages/rpc/Confirmation.tsx

@@ -1,5 +1,5 @@
 import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
-import { ReactElement } from 'react'
+import { ReactElement, useContext, useState } from 'react'
 import Check from 'remixicon-react/CheckLineIcon'
 import BankCard from 'remixicon-react/BankCard2LineIcon'
 import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
@@ -9,6 +9,13 @@ import ExpandableListItemActions from '../../components/ExpandableListItemAction
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { ROUTES } from '../../routes'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as TopUpContext } from '../../providers/TopUp'
+import { useIsBeeDesktop } from '../../hooks/apiHooks'
+import { BeeModes } from '@ethersphere/bee-js'
+import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import { Loading } from '../../components/Loading'
+import { useSnackbar } from 'notistack'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -24,10 +31,43 @@ const useStyles = makeStyles(() =>
   }),
 )
 
+const MINIMUM_XDAI = '0.05'
+const MINIMUM_XBZZ = '0.1'
+
 export default function Confirmation(): ReactElement {
   const navigate = useNavigate()
-
   const styles = useStyles()
+  const { isBeeDesktop } = useIsBeeDesktop()
+  const { balance, nodeInfo } = useContext(BeeContext)
+  const { providerUrl } = useContext(TopUpContext)
+  const [loading, setLoading] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
+
+  const canUpgradeToLightNode =
+    isBeeDesktop &&
+    nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT &&
+    balance?.dai.toDecimal.gte(MINIMUM_XDAI) &&
+    balance?.bzz.toDecimal.gte(MINIMUM_XBZZ)
+
+  async function restart() {
+    if (!providerUrl) {
+      return
+    }
+    setLoading(true)
+    try {
+      await upgradeToLightNode(providerUrl)
+      await restartBeeNode()
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
+    }
+    setLoading(false)
+  }
+
+  if (!balance) {
+    return <Loading />
+  }
 
   return (
     <>
@@ -58,6 +98,22 @@ export default function Confirmation(): ReactElement {
             Get started with bank card
           </SwarmButton>
         </ExpandableListItemActions>
+        {canUpgradeToLightNode && (
+          <>
+            <Box mt={8} mb={2}>
+              <Typography align="center">
+                It seems that you have enough balance to upgrade your bee node to light node. By upgrading you will gain
+                access to file upload and faster downloads.
+              </Typography>
+            </Box>
+            <ExpandableListItemActions>
+              <SwarmButton iconType={Check} onClick={restart} disabled={loading} loading={loading}>
+                Upgrade now
+              </SwarmButton>
+              <div />
+            </ExpandableListItemActions>
+          </>
+        )}
       </Grid>
     </>
   )

src/pages/top-up/GiftCardFund.tsx

@@ -17,9 +17,12 @@ import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
+import { useIsBeeDesktop } from '../../hooks/apiHooks'
+import { BeeModes } from '@ethersphere/bee-js'
 
 export function GiftCardFund(): ReactElement {
-  const { nodeAddresses, balance } = useContext(BeeContext)
+  const { isBeeDesktop } = useIsBeeDesktop()
+  const { nodeAddresses, balance, nodeInfo } = useContext(BeeContext)
   const { provider, providerUrl } = useContext(TopUpContext)
 
   const [loading, setLoading] = useState(false)
@@ -42,6 +45,24 @@ export function GiftCardFund(): ReactElement {
     return <Loading />
   }
 
+  const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+
+  async function restart() {
+    if (!providerUrl) {
+      return
+    }
+
+    try {
+      await sleepMs(5_000)
+      await upgradeToLightNode(providerUrl)
+      await restartBeeNode()
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
+    }
+  }
+
   async function onFund() {
     if (!wallet || !nodeAddresses || !providerUrl) {
       return
@@ -51,13 +72,11 @@ export function GiftCardFund(): ReactElement {
 
     try {
       await wallet.transfer(nodeAddresses.ethereum, providerUrl)
-      enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
-      await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
-      navigate(ROUTES.RESTART_LIGHT)
+      enqueueSnackbar('Successfully funded node', { variant: 'success' })
+
+      if (canUpgradeToLightNode) await restart()
     } catch (error) {
-      enqueueSnackbar(`Failed to fund/restart node: ${error}`, { variant: 'error' })
+      enqueueSnackbar(`Failed to fund: ${error}`, { variant: 'error' })
     } finally {
       setLoading(false)
     }
@@ -101,7 +120,7 @@ export function GiftCardFund(): ReactElement {
         <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
       </Box>
       <SwarmButton iconType={Check} onClick={onFund} disabled={loading} loading={loading}>
-        Send all funds to your node
+        {canUpgradeToLightNode ? 'Send all funds to your node and Upgrade' : 'Send all funds to your node'}
       </SwarmButton>
     </>
   )

src/pages/top-up/Swap.tsx

@@ -1,3 +1,4 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Typography } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import { useSnackbar } from 'notistack'
@@ -13,6 +14,7 @@ import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { useIsBeeDesktop } from '../../hooks/apiHooks'
 import { BzzToken } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
 import { Context as BeeContext } from '../../providers/Bee'
@@ -36,7 +38,8 @@ export function Swap({ header }: Props): ReactElement {
   const [price] = useState(DaiToken.fromDecimal('0.6', 18))
 
   const { providerUrl } = useContext(TopUpContext)
-  const { balance, nodeAddresses } = useContext(BeeContext)
+  const { balance, nodeAddresses, nodeInfo } = useContext(BeeContext)
+  const { isBeeDesktop } = useIsBeeDesktop()
 
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()
@@ -67,6 +70,24 @@ export function Swap({ header }: Props): ReactElement {
   const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
   const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedBy(100).dividedToIntegerBy(price.toDecimal))
 
+  const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+
+  async function restart() {
+    if (!providerUrl) {
+      return
+    }
+
+    try {
+      await sleepMs(5_000)
+      await upgradeToLightNode(providerUrl)
+      await restartBeeNode()
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
+    }
+  }
+
   async function onSwap() {
     if (hasSwapped || !providerUrl) {
       return
@@ -75,12 +96,9 @@ export function Swap({ header }: Props): ReactElement {
     setSwapped(true)
     try {
       await performSwap(daiToSwap.toString)
-      enqueueSnackbar('Successfully swapped, restarting...', { variant: 'success' })
-      await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
-      navigate(ROUTES.RESTART_LIGHT)
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      enqueueSnackbar('Successfully swapped', { variant: 'success' })
+
+      if (canUpgradeToLightNode) await restart()
     } catch (error) {
       enqueueSnackbar(`Failed to swap: ${error}`, { variant: 'error' })
     } finally {
@@ -152,7 +170,7 @@ export function Swap({ header }: Props): ReactElement {
           }
           loading={loading}
         >
-          Swap Now
+          {canUpgradeToLightNode ? 'Swap Now and Upgrade' : 'Swap Now'}
         </SwarmButton>
       </ExpandableListItemActions>
     </>