chore(master): release 0.16.0 (#371)

* feat: add top up

* chore: remove console.log

* build: add pseudo-missing dependency

* feat: add missing top up components

* fix: crypto route

* feat(wip): add gift wallet logic

* fix: fix gift wallet flows

* feat: simplify flow without fund step

* feat: add loading screens

* fix: remove alert

* fix: prepend http if needed

* fix: fix bug that was reintroduced with merge

* refactor: rename minusEther to minusBaseUnits

* fix: remove unused setStartedAt

* build: remove unused dependency

.github/dependabot.yml

@@ -0,0 +1,13 @@
+# See config in https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  # Enable version updates for npm
+  - package-ecosystem: 'npm'
+    # Look for `package.json` and `lock` files in the `root` directory
+    directory: '/'
+    # Check the npm registry for updates every day (weekdays)
+    schedule:
+      interval: 'weekly'
+    # Always increase the version in package.json as well (for patch versions by default only package-lock.json i updated)
+    versioning-strategy: increase

.github/semantic.yml

@@ -0,0 +1,2 @@
+# Always validate the PR title, and ignore the commits
+titleOnly: true

.github/workflows/check.yaml

@@ -52,6 +52,9 @@ jobs:
         env:
           CI: true
 
+      - name: Dependency check
+        run: npm run depcheck
+
       - name: Types check
         run: npm run check:types
 
@@ -62,7 +65,7 @@ jobs:
         uses: ethersphere/update-supported-bee-action@v1
         if: github.ref == 'refs/heads/master'
         with:
-          token: ${{ secrets.REPO_GHA_PAT }}
+          token: ${{ secrets.GHA_PAT_BASIC }}
 
       - name: Build
         run: npm run build
@@ -71,15 +74,18 @@ jobs:
         run: npm run build:component
 
       - name: Create preview
-        uses: ethersphere/beeload-action@v1
+        uses: ethersphere/swarm-actions/pr-preview@v0
         with:
           bee-url: https://unlimited.gateway.ethswarm.org
-          preview: 'true'
-          token: ${{ secrets.REPO_GHA_PAT }}
-          extra-params: '-H "${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}"'
+          token: ${{ secrets.GHA_PAT_BASIC }}
+          error-document: index.html
+          headers: "${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}"
 
       - name: Upload to testnet
+        uses: ethersphere/swarm-actions/upload-dir@v0
         continue-on-error: true
-        uses: ethersphere/beeload-action@v1
         with:
+          index-document: index.html
+          error-document: index.html
+          dir: ./build
           bee-url: https://api.gateway.testnet.ethswarm.org

.github/workflows/release_github.yaml

@@ -11,10 +11,10 @@ jobs:
   release-please:
     runs-on: ubuntu-latest
     steps:
-      - uses: GoogleCloudPlatform/release-please-action@v2
+      - uses: GoogleCloudPlatform/release-please-action@v3
         id: release
         with:
-          token: ${{ secrets.REPO_GHA_PAT }}
+          token: ${{ secrets.GHA_PAT_BASIC }}
           release-type: node
           package-name: bee-dashboard
           bump-minor-pre-major: true

CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## [0.16.0](https://github.com/ethersphere/bee-dashboard/compare/v0.15.0...v0.16.0) (2022-06-02)
+
+
+### Features
+
+* add light node upgrade top up methods ([#372](https://github.com/ethersphere/bee-dashboard/issues/372)) ([a768b4e](https://github.com/ethersphere/bee-dashboard/commit/a768b4ea0675596f6fe49771ef9d0755af00db56))
+* allow for the port to be configured ([#370](https://github.com/ethersphere/bee-dashboard/issues/370)) ([b6f138b](https://github.com/ethersphere/bee-dashboard/commit/b6f138b423cbe18b078fd38ea64b4c7a839d4e6e))
+* recognize ens domains ([#351](https://github.com/ethersphere/bee-dashboard/issues/351)) ([5917a13](https://github.com/ethersphere/bee-dashboard/commit/5917a133172c9e2fc0a81fb2fa19ea29ff976d03))
+
+## [0.15.0](https://github.com/ethersphere/bee-dashboard/compare/v0.14.0...v0.15.0) (2022-05-16)
+
+
+### Features
+
+* add aditional information to the stamps overview ([#349](https://github.com/ethersphere/bee-dashboard/issues/349)) ([23dea07](https://github.com/ethersphere/bee-dashboard/commit/23dea07f6e53da91f87078749f07bd95c9e65983))
+* add bee desktop toolkit ([#311](https://github.com/ethersphere/bee-dashboard/issues/311)) ([ecaf205](https://github.com/ethersphere/bee-dashboard/commit/ecaf2054fc5aaa5fa4f1d0b3fb2753af9d9b233e))
+* add bee-desktop settings capabilities ([#323](https://github.com/ethersphere/bee-dashboard/issues/323)) ([87b0b71](https://github.com/ethersphere/bee-dashboard/commit/87b0b71cc63098a5d886ff47d52715c250d1b659))
+* support for bzz.link cids when downloading files ([#350](https://github.com/ethersphere/bee-dashboard/issues/350)) ([3784b29](https://github.com/ethersphere/bee-dashboard/commit/3784b29f148b706d5bc40b69b5ae898efa2c1990))
+* wait for postage stamp to be usable when bying it ([#352](https://github.com/ethersphere/bee-dashboard/issues/352)) ([1e2face](https://github.com/ethersphere/bee-dashboard/commit/1e2face10e93818f281526d8245f84834e5ecb86))
+
+
+### Bug Fixes
+
+* app crash caused by inputing non-number characters ([#347](https://github.com/ethersphere/bee-dashboard/issues/347)) ([a67be7a](https://github.com/ethersphere/bee-dashboard/commit/a67be7a31ec88e9ce9c7764ec4523496c157d08a))
+* connection health indicator values to reflect the current network conditions ([#353](https://github.com/ethersphere/bee-dashboard/issues/353)) ([07561aa](https://github.com/ethersphere/bee-dashboard/commit/07561aaed2ce7f7ffd7ecfd8ae8b5190cc9893bc))
+* nested directory upload preserves the directory structure ([#365](https://github.com/ethersphere/bee-dashboard/issues/365)) ([86978b7](https://github.com/ethersphere/bee-dashboard/commit/86978b7e999584173b082eef86074af698523752))
+* remove restrictions on postage stamp label ([#354](https://github.com/ethersphere/bee-dashboard/issues/354)) ([b6b9914](https://github.com/ethersphere/bee-dashboard/commit/b6b9914548a0ac00ed293ea35490ce38e9d6adaa))
+* show current postage stamp price per block ([#348](https://github.com/ethersphere/bee-dashboard/issues/348)) ([906a457](https://github.com/ethersphere/bee-dashboard/commit/906a457ae5a8683f82d218759fd66dc1b7c9a220))
+
+## [0.14.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.13.0...v0.14.0) (2022-04-14)
+
+
+### Features
+
+* add hook that detects if the bee-dashboard is run within bee-desktop ([#334](https://www.github.com/ethersphere/bee-dashboard/issues/334)) ([eb9e309](https://www.github.com/ethersphere/bee-dashboard/commit/eb9e309c8bc0327d137f190d6873618cb215fece))
+* detect bee mode and enable/disable status checks accordingly ([#318](https://www.github.com/ethersphere/bee-dashboard/issues/318)) ([8baecb7](https://www.github.com/ethersphere/bee-dashboard/commit/8baecb783f1574af1cd1f17738efae4b0ac9f0c8))
+* optional status checks (e.g. connected peers > 0 or funded chequebook) ([#331](https://www.github.com/ethersphere/bee-dashboard/issues/331)) ([5d0fbf7](https://www.github.com/ethersphere/bee-dashboard/commit/5d0fbf705dfed6738980c751a9654199d60a3787))
+
+
+### Bug Fixes
+
+* postage stamp price and TTL calculation ([#305](https://www.github.com/ethersphere/bee-dashboard/issues/305)) ([d0b3f1a](https://www.github.com/ethersphere/bee-dashboard/commit/d0b3f1abee7ea017bdd05954d5fadafb67365efd))
+
 ## [0.13.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.12.0...v0.13.0) (2022-01-28)
 
 

README.md

@@ -13,7 +13,7 @@
 **Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
 working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
 
-This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.4.1-238867f1<!-- SUPPORTED_BEE_END -->**.
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.6.0-6ceadd35<!-- SUPPORTED_BEE_END -->**.
 Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
 [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
 [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
@@ -60,6 +60,15 @@ bee-dashboard
 
 This should open the webpage on [`http://localhost:8080`](http://localhost:8080)
 
+You can also define your own port with the `PORT` environment variable. E.g.
+
+```sh
+export PORT=3005
+bee-dashboard
+```
+
+Will start the bee-dashboard on [`http://localhost:3005`](http://localhost:3005)
+
 ### Docker
 
 To build Docker image and run it, execute the following from inside project directory:

commitlint.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-max-line-length': [0, 'always', Infinity], // disable commit body length restriction
+  },
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.13.0",
+  "version": "0.16.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -26,7 +26,7 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "3.1.0",
+    "@ethersphere/bee-js": "^4.1.1",
     "@ethersphere/manifest-js": "1.1.0",
     "@ethersphere/swarm-cid": "^0.1.0",
     "@material-ui/core": "4.12.3",
@@ -35,6 +35,7 @@
     "axios": "0.24.0",
     "bignumber.js": "9.0.1",
     "ethereumjs-wallet": "^1.0.2",
+    "ethers": "^5.6.4",
     "file-saver": "^2.0.5",
     "formik": "2.2.9",
     "formik-material-ui": "3.0.1",
@@ -59,18 +60,21 @@
     "@babel/plugin-proposal-class-properties": "7.16.0",
     "@babel/plugin-transform-runtime": "7.16.4",
     "@babel/preset-env": "7.16.4",
-    "@babel/preset-react": "7.16.0",
+    "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "7.16.0",
     "@commitlint/config-conventional": "14.1.0",
-    "@testing-library/jest-dom": "5.15.0",
+    "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@types/cors": "^2.8.12",
+    "@types/express": "^4.17.13",
     "@types/file-saver": "2.0.4",
     "@types/jest": "27.0.2",
     "@types/qrcode.react": "1.0.2",
     "@types/react": "17.0.34",
     "@types/react-copy-to-clipboard": "5.0.2",
     "@types/react-dom": "17.0.11",
-    "@types/react-router": "5.1.17",
+    "@types/react-router": "5.1.18",
     "@types/react-router-dom": "5.3.2",
     "@types/react-syntax-highlighter": "13.5.2",
     "@types/semver": "7.3.9",
@@ -80,9 +84,10 @@
     "babel-loader": "8.1.0",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-tsconfig-paths": "1.0.2",
-    "depcheck": "1.4.2",
+    "cors": "^2.8.5",
+    "depcheck": "^1.4.3",
     "eslint": "7.24.0",
-    "eslint-config-prettier": "8.2.0",
+    "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "5.10.0",
     "eslint-plugin-import": "2.25.2",
@@ -92,10 +97,11 @@
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-testing-library": "3.10.2",
+    "express": "^4.17.3",
     "file-loader": "6.2.0",
     "prettier": "2.4.1",
     "react-scripts": "4.0.3",
-    "ts-node": "^10.4.0",
+    "ts-node": "^10.7.0",
     "typescript": "4.4.4",
     "web-vitals": "2.1.2",
     "webpack": "4.44.2",

serve.js

@@ -1,34 +1,35 @@
 #!/usr/bin/env node
 
 const path = require('path')
-const handler = require('serve-handler');
-const http = require('http');
+const handler = require('serve-handler')
+const http = require('http')
 const opener = require('opener')
 
+const port = process.env.PORT || 8080
+
 const serverConfig = {
   public: path.join(__dirname, 'build'),
   trailingSlash: false,
-  rewrites: [
-    { source: "**", destination: "/index.html" },
-  ],
+  rewrites: [{ source: '**', destination: '/index.html' }],
   headers: [
-      {
-        source: "*",
-        headers: [{
-          key: "Cache-Control",
-          value: "max-age=3600"
-        }]
-      }
-  ]
+    {
+      source: '*',
+      headers: [
+        {
+          key: 'Cache-Control',
+          value: 'max-age=3600',
+        },
+      ],
+    },
+  ],
 }
 
 const server = http.createServer((request, response) => {
+  return handler(request, response, serverConfig)
+})
 
-  return handler(request, response, serverConfig);
-})
- 
-server.listen(8080, () => {
-  console.log('Starting up Bee Dashboard on address http://localhost:8080')
+server.listen(port, () => {
+  console.log(`Starting up Bee Dashboard on address http://localhost:${port}`)
   console.log('Hit CTRL-C to stop the server')
-  opener('http://localhost:8080')
+  opener(`http://localhost:${port}`)
 })

src/App.tsx

@@ -11,6 +11,7 @@ import { Provider as FileProvider } from './providers/File'
 import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as SettingsProvider } from './providers/Settings'
 import { Provider as StampsProvider } from './providers/Stamps'
+import { Provider as TopUpProvider } from './providers/TopUp'
 import BaseRouter from './routes'
 import { theme } from './theme'
 
@@ -29,16 +30,18 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElem
             <FileProvider>
               <FeedsProvider>
                 <PlatformProvider>
-                  <SnackbarProvider>
-                    <Router>
-                      <>
-                        <CssBaseline />
-                        <Dashboard>
-                          <BaseRouter />
-                        </Dashboard>
-                      </>
-                    </Router>
-                  </SnackbarProvider>
+                  <TopUpProvider>
+                    <SnackbarProvider>
+                      <Router>
+                        <>
+                          <CssBaseline />
+                          <Dashboard>
+                            <BaseRouter />
+                          </Dashboard>
+                        </>
+                      </Router>
+                    </SnackbarProvider>
+                  </TopUpProvider>
                 </PlatformProvider>
               </FeedsProvider>
             </FileProvider>

src/components/AlertVersion.tsx

@@ -1,54 +0,0 @@
-import { ReactElement, useState, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Alert, AlertTitle } from '@material-ui/lab'
-import Collapse from '@material-ui/core/Collapse'
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from '@material-ui/icons/Close'
-import { Context } from '../providers/Bee'
-import { SUPPORTED_BEE_VERSION_EXACT } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      marginBottom: theme.spacing(2),
-    },
-  }),
-)
-
-export default function VersionAlert(): ReactElement | null {
-  const classes = useStyles()
-  const { isLoading, latestUserVersionExact } = useContext(Context)
-  const [open, setOpen] = useState<boolean>(true)
-
-  const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === latestUserVersionExact
-
-  if (isLoading || !latestUserVersionExact) return null
-
-  return (
-    <Collapse in={!isExactlySupportedBeeVersion && open}>
-      <div className={classes.root}>
-        <Alert
-          severity="warning"
-          action={
-            <IconButton
-              aria-label="close"
-              color="inherit"
-              size="small"
-              onClick={() => {
-                setOpen(false)
-              }}
-            >
-              <CloseIcon fontSize="inherit" />
-            </IconButton>
-          }
-        >
-          <AlertTitle>Warning</AlertTitle>
-          Your Bee node version (<code>{latestUserVersionExact}</code>) does not exactly match the Bee version we tested
-          the Bee Dashboard against (<code>{SUPPORTED_BEE_VERSION_EXACT}</code>). Please note that some functionality
-          may not work properly.
-        </Alert>
-      </div>
-    </Collapse>
-  )
-}

src/components/CashoutModal.tsx

@@ -6,7 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useState, useContext } from 'react'
+import { ReactElement, useContext, useState } from 'react'
 import { Zap } from 'react-feather'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
@@ -61,7 +61,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
   return (
     <div>
       <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
-        Cash out peer {peerId.substr(0, 8)}[…]
+        Cash out peer {peerId.slice(0, 8)}[…]
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>

src/components/ExpandableListItemInput.tsx

@@ -55,7 +55,7 @@ interface Props {
   confirmLabelDisabled?: boolean
   loading?: boolean
   onChange?: (value: string) => void
-  onConfirm: (value: string) => void
+  onConfirm?: (value: string) => void
   mapperFn?: (value: string) => string
   locked?: boolean
 }
@@ -138,7 +138,9 @@ export default function ExpandableListItemKey({
             }
             loading={loading}
             iconType={Search}
-            onClick={() => onConfirm(inputValue)}
+            onClick={() => {
+              if (onConfirm) onConfirm(inputValue)
+            }}
           >
             {confirmLabel || 'Save'}
           </SwarmButton>

src/components/ExpandableListItemKey.tsx

@@ -38,6 +38,7 @@ const useStyles = makeStyles((theme: Theme) =>
 interface Props {
   label: string
   value: string
+  expanded?: boolean
 }
 
 const lengthWithoutPrefix = (s: string) => s.replace(/^0x/i, '').length
@@ -54,9 +55,9 @@ const split = (s: string): string[] => {
   return s.match(/(0x|.{1,8})/gi) || []
 }
 
-export default function ExpandableListItemKey({ label, value }: Props): ReactElement | null {
+export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
   const classes = useStyles()
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(expanded || false)
   const [copied, setCopied] = useState(false)
   const toggleOpen = () => setOpen(!open)
 

src/components/SideBar.tsx

@@ -2,7 +2,7 @@ import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { OpenInNewSharp } from '@material-ui/icons'
 import type { ReactElement } from 'react'
-import { Bookmark, BookOpen, DollarSign, FileText, Home, Layers, Settings } from 'react-feather'
+import { Bookmark, BookOpen, Briefcase, DollarSign, FileText, Gift, Home, Layers, Settings } from 'react-feather'
 import { Link } from 'react-router-dom'
 import Logo from '../assets/logo.svg'
 import { config } from '../config'
@@ -41,6 +41,16 @@ const navBarItems = [
     path: ROUTES.SETTINGS,
     icon: Settings,
   },
+  {
+    label: 'Account',
+    path: ROUTES.WALLET,
+    icon: Briefcase,
+  },
+  {
+    label: 'Gift Wallets',
+    path: ROUTES.GIFT_CODES,
+    icon: Gift,
+  },
 ]
 
 const drawerWidth = 300

src/components/SideBarStatus.tsx

@@ -66,11 +66,9 @@ export default function SideBarItem({ path }: Props): ReactElement {
       disableRipple
     >
       <ListItemIcon style={{ marginLeft: '30px' }}>
-        <StatusIcon isOk={status.all} isLoading={isLoading} />
+        <StatusIcon checkState={status.all} isLoading={isLoading} />
       </ListItemIcon>
-      <ListItemText
-        primary={<Typography className={classes.smallerText}>{`Node ${status.all ? 'OK' : 'Error'}`}</Typography>}
-      />
+      <ListItemText primary={<Typography className={classes.smallerText}>{`Node ${status.all}`}</Typography>} />
       <ListItemIcon className={classes.icon}>
         {status.all ? null : <ArrowRight className={classes.iconSmall} />}
       </ListItemIcon>

src/components/StatusIcon.tsx

@@ -1,23 +1,40 @@
 import type { ReactElement } from 'react'
 import { CircularProgress } from '@material-ui/core'
+import { CheckState } from '../providers/Bee'
 
 interface Props {
-  isOk: boolean
+  checkState: CheckState
   isLoading?: boolean
   size?: number | string
   className?: string
 }
 
-export default function StatusIcon({ isOk, size, className, isLoading }: Props): ReactElement {
+export default function StatusIcon({ checkState, size, className, isLoading }: Props): ReactElement {
   const s = size || '1rem'
 
   if (isLoading) return <CircularProgress size={s} className={className} />
 
+  let backgroundColor: string
+  switch (checkState) {
+    case CheckState.OK:
+      backgroundColor = '#1de600'
+      break
+    case CheckState.WARNING:
+      backgroundColor = 'orange'
+      break
+    case CheckState.ERROR:
+      backgroundColor = '#ff3a52'
+      break
+    default:
+      // Default is error
+      backgroundColor = '#ff3a52'
+  }
+
   return (
     <span
       className={className}
       style={{
-        backgroundColor: isOk ? '#1de600' : '#ff3a52',
+        backgroundColor,
         height: s,
         width: s,
         borderRadius: '50%',

src/components/SwarmButton.tsx

@@ -10,6 +10,7 @@ interface Props {
   disabled?: boolean
   loading?: boolean
   cancel?: boolean
+  variant?: 'text' | 'contained' | 'outlined'
 }
 
 const useStyles = makeStyles(() =>
@@ -49,6 +50,7 @@ export function SwarmButton({
   disabled,
   loading,
   cancel,
+  variant = 'contained',
 }: Props): ReactElement {
   const classes = useStyles()
 
@@ -76,7 +78,7 @@ export function SwarmButton({
         onClick()
         event.currentTarget.blur()
       }}
-      variant="contained"
+      variant={variant}
       startIcon={icon}
       disabled={disabled}
     >

src/components/SwarmDivider.tsx

@@ -0,0 +1,17 @@
+import { Box, Divider } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  my?: number
+  mt?: number
+  mb?: number
+  color?: string
+}
+
+export function SwarmDivider({ my, mt, mb, color = '#cbcbcb' }: Props): ReactElement {
+  return (
+    <Box my={my} mt={mt} mb={mb}>
+      <Divider style={{ borderColor: color }} />
+    </Box>
+  )
+}

src/components/SwarmTextInput.tsx

@@ -9,6 +9,7 @@ interface Props {
   password?: boolean
   formik?: boolean
   optional?: boolean
+  defaultValue?: string
   onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }
 
@@ -32,7 +33,15 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 )
 
-export function SwarmTextInput({ name, label, password, optional, formik, onChange }: Props): ReactElement {
+export function SwarmTextInput({
+  name,
+  label,
+  password,
+  optional,
+  formik,
+  onChange,
+  defaultValue,
+}: Props): ReactElement {
   const classes = useStyles()
 
   if (formik) {
@@ -46,7 +55,7 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
         fullWidth
         variant="filled"
         className={classes.field}
-        defaultValue=""
+        defaultValue={defaultValue || ''}
         InputProps={{ disableUnderline: true }}
       />
     )
@@ -60,7 +69,7 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
       fullWidth
       variant="filled"
       className={classes.field}
-      defaultValue=""
+      defaultValue={defaultValue || ''}
       onChange={onChange}
       InputProps={{ disableUnderline: true }}
     />

src/config.ts

@@ -9,6 +9,7 @@ class Config {
   public readonly BEE_DOCS_HOST: string
   public readonly BEE_DISCORD_HOST: string
   public readonly GITHUB_REPO_URL: string
+  public readonly BEE_DESKTOP_URL: string
 
   constructor() {
     this.BEE_API_HOST =
@@ -21,6 +22,7 @@ class Config {
     this.BEE_DISCORD_HOST = getProcessEnv('REACT_APP_BEE_DISCORD_HOST') || 'https://discord.gg/eKr9XPv7'
     this.GITHUB_REPO_URL =
       getProcessEnv('REACT_APP_BEE_GITHUB_REPO_URL') || 'https://api.github.com/repos/ethersphere/bee'
+    this.BEE_DESKTOP_URL = getProcessEnv('REACT_APP_BEE_DESKTOP_URL') || window.location.origin
   }
 }
 

src/constants.ts

@@ -1,3 +1,4 @@
 export const META_FILE_NAME = '.swarmgatewaymeta.json'
 export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
 export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
+export const BZZ_LINK_DOMAIN = process.env.REACT_APP_BZZ_LINK_DOMAIN || 'bzz.link'

src/hooks/apiHooks.test.ts

@@ -0,0 +1,73 @@
+import { renderHook } from '@testing-library/react-hooks'
+import express from 'express'
+import cors from 'cors'
+import type { Server } from 'http'
+import { useIsBeeDesktop } from './apiHooks'
+
+interface AddressInfo {
+  address: string
+  family: string
+  port: number
+}
+
+export function mockServer(data: Record<string | number | symbol, string>): Promise<Server> {
+  const app = express()
+  app.use(cors())
+
+  app.get('/info', (req, res) => {
+    res.send(data)
+  })
+
+  return new Promise(resolve => {
+    const server = app.listen(() => {
+      resolve(server)
+    })
+  })
+}
+
+let serverCorrect: Server
+let serverWrong: Server
+
+let serverCorrectURL: string
+let serverWrongURL: string
+
+beforeAll(async () => {
+  serverCorrect = await mockServer({ name: 'bee-desktop' })
+  const portServerCorrect = (serverCorrect.address() as AddressInfo).port
+  serverCorrectURL = `http://localhost:${portServerCorrect}`
+
+  serverWrong = await mockServer({ foo: 'bar' })
+  const portServerWrong = (serverWrong.address() as AddressInfo).port
+  serverWrongURL = `http://localhost:${portServerWrong}`
+})
+
+afterAll(async () => {
+  await new Promise(resolve => serverCorrect.close(resolve))
+  await new Promise(resolve => serverWrong.close(resolve))
+})
+
+describe('useIsBeeDesktop', () => {
+  it('should fail when connected to wrong server', async () => {
+    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverWrongURL }))
+
+    expect(result.current.isLoading).toBe(true)
+    expect(result.current.isBeeDesktop).toBe(false)
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+    expect(result.current.isBeeDesktop).toBe(false)
+  })
+
+  it('should return isBeeDesktop true when connected to bee-desktop', async () => {
+    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverCorrectURL }))
+
+    expect(result.current.isLoading).toBe(true)
+    expect(result.current.isBeeDesktop).toBe(false)
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+    expect(result.current.isBeeDesktop).toBe(true)
+  })
+})

src/hooks/apiHooks.tsx

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
 import { config } from '../config'
+import { getJson } from '../utils/net'
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -8,6 +9,90 @@ export interface LatestBeeReleaseHook {
   error: Error | null
 }
 
+export interface IsBeeDesktopHook {
+  isBeeDesktop: boolean
+  isLoading: boolean
+}
+
+interface Config {
+  BEE_DESKTOP_URL: string
+}
+
+/**
+ * Detect if the dashboard is run within bee-desktop
+ *
+ * @returns isBeeDesktop true if this is run within bee-desktop
+ */
+export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
+  const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
+  const [isLoading, setLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    axios
+      .get(`${conf.BEE_DESKTOP_URL}/info`)
+      .then(res => {
+        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
+        else setIsBeeDesktop(false)
+      })
+      .catch(() => {
+        setIsBeeDesktop(false)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [conf])
+
+  return { isBeeDesktop, isLoading }
+}
+
+export interface BeeConfig {
+  'api-addr': string
+  'debug-api-addr': string
+  'debug-api-enable': boolean
+  password: string
+  'swap-enable': boolean
+  'swap-initial-deposit': bigint
+  mainnet: boolean
+  'full-node': boolean
+  'chain-enable': boolean
+  'cors-allowed-origins': string
+  'resolver-options': string
+  'use-postage-snapshot': boolean
+  'data-dir': string
+  transaction: string
+  'block-hash': string
+  'swap-endpoint'?: string
+}
+
+export interface GetBeeConfig {
+  config: BeeConfig | null
+  isLoading: boolean
+  error: Error | null
+}
+
+export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
+  const [beeConfig, setBeeConfig] = useState<BeeConfig | null>(null)
+  const [isLoading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    getJson<BeeConfig>(`${conf.BEE_DESKTOP_URL}/config`)
+      .then(beeConf => {
+        setBeeConfig(beeConf)
+        setError(null)
+      })
+      .catch((err: Error) => {
+        setError(err)
+        setBeeConfig(null)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [conf])
+
+  return { config: beeConfig, isLoading, error }
+}
+
 export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
   const [latestBeeRelease, setLatestBeeRelease] = useState<LatestBeeRelease | null>(null)
   const [isLoadingLatestBeeRelease, setLoading] = useState<boolean>(false)

src/layout/Dashboard.tsx

@@ -1,12 +1,8 @@
-import { useContext, ReactElement } from 'react'
+import { CircularProgress, Container } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement, useContext } from 'react'
 import ErrorBoundary from '../components/ErrorBoundary'
-import AlertVersion from '../components/AlertVersion'
-import { Container, CircularProgress } from '@material-ui/core'
-
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-
 import SideBar from '../components/SideBar'
-
 import { Context } from '../providers/Bee'
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -33,7 +29,6 @@ const Dashboard = (props: Props): ReactElement => {
       <Container className={classes.content}>
         <ErrorBoundary>
           <>
-            <AlertVersion />
             {isLoading ? (
               <div style={{ textAlign: 'center', width: '100%' }}>
                 <CircularProgress />

src/models/BzzToken.ts

@@ -0,0 +1,8 @@
+import { BigNumber } from 'bignumber.js'
+import { Token } from './Token'
+
+export class BzzToken extends Token {
+  constructor(amount: BigNumber | string | BigInt) {
+    super(amount, 16)
+  }
+}

src/models/DaiToken.ts

@@ -0,0 +1,8 @@
+import { BigNumber } from 'bignumber.js'
+import { Token } from './Token'
+
+export class DaiToken extends Token {
+  constructor(amount: BigNumber | string | BigInt) {
+    super(amount, 18)
+  }
+}

src/models/Token.ts

@@ -13,7 +13,9 @@ export class Token {
   constructor(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS) {
     const a = makeBigNumber(amount)
 
-    if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) throw new TypeError('Not a valid token values')
+    if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) {
+      throw new TypeError(`Not a valid token values: ${amount} ${decimals}`)
+    }
 
     this.amount = a
     this.decimals = decimals
@@ -57,4 +59,32 @@ export class Token {
   toFixedDecimal(digits = 7): string {
     return this.toDecimal.toFixed(digits)
   }
+
+  toSignificantDigits(digits = 4): string {
+    const asString = this.toDecimal.toFixed(this.decimals)
+
+    let indexOfSignificantDigit = -1
+    let reachedDecimalPoint = false
+
+    for (let i = 0; i < asString.length; i++) {
+      const char = asString[i]
+
+      if (char === '.') {
+        reachedDecimalPoint = true
+        indexOfSignificantDigit = i + 1
+      } else if (reachedDecimalPoint && char !== '0') {
+        indexOfSignificantDigit = i
+        break
+      }
+    }
+
+    return asString.slice(0, indexOfSignificantDigit + digits)
+  }
+
+  minusBaseUnits(amount: string): Token {
+    return new Token(
+      this.toBigNumber.minus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
+      this.decimals,
+    )
+  }
 }

src/pages/accounting/PeerBalances.tsx

@@ -1,11 +1,9 @@
 import type { ReactElement } from 'react'
-
+import CashoutModal from '../../components/CashoutModal'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-
-import CashoutModal from '../../components/CashoutModal'
 import { Accounting } from '../../hooks/accounting'
 import type { Token } from '../../models/Token'
 
@@ -25,7 +23,7 @@ export default function PeerBalances({ accounting, isLoadingUncashed, totalUncas
       {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
         <ExpandableList
           key={peer}
-          label={`Peer ${peer.substr(0, 8)}[…]`}
+          label={`Peer ${peer.slice(0, 8)}[…]`}
           level={1}
           info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
         >

src/pages/accounting/index.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useContext } from 'react'
 
 import PeerBalances from './PeerBalances'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { useAccounting } from '../../hooks/accounting'
 import ExpandableList from '../../components/ExpandableList'
@@ -19,7 +19,7 @@ export default function Accounting(): ReactElement {
 
   const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
 
-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   return (
     <div>

src/pages/feeds/index.tsx

@@ -8,7 +8,7 @@ import ExpandableListItemActions from '../../components/ExpandableListItemAction
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { SwarmButton } from '../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as IdentityContext, Identity } from '../../providers/Feeds'
 import { ROUTES } from '../../routes'
 import { formatEnum } from '../../utils'
@@ -60,7 +60,7 @@ export default function Feeds(): ReactElement {
     setShowDelete(true)
   }
 
-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   return (
     <div>

src/pages/files/AssetSummary.tsx

@@ -1,25 +1,32 @@
 import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { Utils } from '@ethersphere/bee-js'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import ExpandableListItemLink from '../../components/ExpandableListItemLink'
 
 interface Props {
   isWebsite?: boolean
-  hash: string
+  reference: string
 }
 
-export function AssetSummary({ isWebsite, hash }: Props): ReactElement {
+export function AssetSummary({ isWebsite, reference }: Props): ReactElement {
+  const isHash = Utils.isHexString(reference) && reference.length === 64
+
   return (
     <>
       <Box mb={4}>
-        <ExpandableListItemKey label="Swarm hash" value={hash} />
-        <ExpandableListItemLink label="Share on Swarm Gateway" value={`https://gateway.ethswarm.org/access/${hash}`} />
-        {isWebsite && (
+        {isHash && <ExpandableListItemKey label="Swarm hash" value={reference} />}
+        {!isHash && <ExpandableListItemLink label="ENS" value={reference} />}
+        <ExpandableListItemLink
+          label="Share on Swarm Gateway"
+          value={`https://gateway.ethswarm.org/access/${reference}`}
+        />
+        {isWebsite && isHash && (
           <ExpandableListItemLink
             label="BZZ Link"
-            value={`https://${swarmCid.encodeManifestReference(hash).toString()}.bzz.link`}
+            value={`https://${swarmCid.encodeManifestReference(reference).toString()}.bzz.link`}
           />
         )}
       </Box>

src/pages/files/Download.tsx

@@ -8,7 +8,7 @@ import { History } from '../../components/History'
 import { Context, defaultUploadOrigin } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
-import { extractSwarmHash } from '../../utils'
+import { recognizeEnsOrSwarmHash, regexpEns } from '../../utils'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { FileNavigation } from './FileNavigation'
 
@@ -23,10 +23,17 @@ export function Download(): ReactElement {
   const navigate = useNavigate()
 
   const validateChange = (value: string) => {
-    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) {
+    if (
+      Utils.isHexString(value, 64) ||
+      Utils.isHexString(value, 128) ||
+      !value.trim().length ||
+      regexpEns.test(value)
+    ) {
       setReferenceError(undefined)
     } else {
-      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+      setReferenceError(
+        'Incorrect format of swarm hash. Expected 64 or 128 hexstring characters, bzz.link url or ENS domain.',
+      )
     }
   }
 
@@ -71,20 +78,6 @@ export function Download(): ReactElement {
     }
   }
 
-  function recognizeSwarmHash(value: string) {
-    if (value.length < 64) {
-      return value
-    }
-
-    const hash = extractSwarmHash(value)
-
-    if (hash) {
-      return hash
-    }
-
-    return value
-  }
-
   return (
     <>
       <FileNavigation active="DOWNLOAD" />
@@ -97,7 +90,7 @@ export function Download(): ReactElement {
         confirmLabelDisabled={Boolean(referenceError) || loading}
         placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
         expandedOnly
-        mapperFn={value => recognizeSwarmHash(value)}
+        mapperFn={value => recognizeEnsOrSwarmHash(value)}
         loading={loading}
       />
       <History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />

src/pages/files/SelectStamp.tsx

@@ -1,5 +1,5 @@
+import { Button, ListItemIcon, Menu, MenuItem, Typography } from '@material-ui/core'
 import React, { ReactElement } from 'react'
-import { Button, ListItemIcon, Typography, Menu, MenuItem } from '@material-ui/core'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 interface Props {
@@ -35,7 +35,7 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
             selected={stamp.batchID === selectedStamp?.batchID}
           >
             <ListItemIcon>{stamp.usageText}</ListItemIcon>
-            <Typography variant="body2">{stamp.batchID.substr(0, 8)}[…]</Typography>
+            <Typography variant="body2">{stamp.batchID.slice(0, 8)}[…]</Typography>
           </MenuItem>
         ))}
       </Menu>

src/pages/files/Share.tsx

@@ -151,7 +151,7 @@ export function Share(): ReactElement {
         <AssetPreview metadata={metadata} previewUri={preview} />
       </Box>
       <Box mb={4}>
-        <AssetSummary isWebsite={metadata?.isWebsite} hash={reference} />
+        <AssetSummary isWebsite={metadata?.isWebsite} reference={reference} />
       </Box>
       <DownloadActionBar
         onOpen={onOpen}

src/pages/files/Upload.tsx

@@ -6,7 +6,8 @@ import { DocumentationText } from '../../components/DocumentationText'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as IdentityContext, Identity } from '../../providers/Feeds'
 import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
@@ -21,7 +22,6 @@ import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
 import { StampPreview } from './StampPreview'
 import { UploadActionBar } from './UploadActionBar'
-import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 
 export function Upload(): ReactElement {
   const [step, setStep] = useState(0)
@@ -43,7 +43,7 @@ export function Upload(): ReactElement {
     refresh()
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   if (!files.length) {
     setFiles([])
@@ -71,7 +71,7 @@ export function Upload(): ReactElement {
       return
     }
 
-    let fls = files.map(packageFile) // Apart from packaging, this is needed to not modify the original files array as it can trigger effects
+    let fls: FilePath[] = files.map(f => packageFile(f)) // Apart from packaging, this is needed to not modify the original files array as it can trigger effects
     let indexDocument: string | undefined = undefined // This means we assume it's folder
 
     if (files.length === 1) indexDocument = files[0].name
@@ -83,11 +83,11 @@ export function Upload(): ReactElement {
         // The website is in some directory, remove it
         if (idx.commonPrefix) {
           const substrStart = idx.commonPrefix.length
-          indexDocument = idx.indexPath.substr(substrStart)
-          fls = fls.map(f => {
-            const path = (f.path as string).substr(substrStart)
+          indexDocument = idx.indexPath.slice(substrStart)
+          fls = files.map(f => {
+            const path = (f.path as string).slice(substrStart)
 
-            return { ...f, path, webkitRelativePath: path, fullPath: path }
+            return packageFile(f, path)
           })
         } else {
           // The website is not packed in a directory

src/pages/gift-code/index.tsx

@@ -0,0 +1,98 @@
+import { Box, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { Check, X } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import { SwarmButton } from '../../components/SwarmButton'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as TopUpContext } from '../../providers/TopUp'
+import { createGiftWallet } from '../../utils/desktop'
+import { generateWallet } from '../../utils/identity'
+import { ResolvedWallet } from '../../utils/wallet'
+
+export default function Index(): ReactElement {
+  const { giftWallets, addGiftWallet } = useContext(TopUpContext)
+  const { balance } = useContext(BeeContext)
+
+  const [loading, setLoading] = useState(false)
+  const [balances, setBalances] = useState<ResolvedWallet[]>([])
+
+  useEffect(() => {
+    async function mapGiftWallets() {
+      const results = []
+      for (const giftWallet of giftWallets) {
+        results.push(await ResolvedWallet.make(giftWallet))
+      }
+      setBalances(results)
+    }
+
+    mapGiftWallets()
+  }, [giftWallets])
+
+  const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
+
+  async function onCreate() {
+    enqueueSnackbar('Sending funds to gift wallet...')
+    setLoading(true)
+    try {
+      const wallet = generateWallet()
+      addGiftWallet(wallet)
+      await createGiftWallet(wallet.getAddressString())
+      enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
+    } catch (error) {
+      enqueueSnackbar(`Failed to fund gift wallet: ${error}`, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function onCancel() {
+    navigate(-1)
+  }
+
+  if (!balance) {
+    return <Loading />
+  }
+
+  return (
+    <>
+      <HistoryHeader>Invite to Swarm...</HistoryHeader>
+      <Box mb={4}>
+        <Typography>
+          Generate and share a gift wallet that anyone can use to set-up their light node with Swarm Desktop. This will
+          use 1 XDAI and 5 BZZ from your node wallet.
+        </Typography>
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+      </Box>
+      <Box mb={2}>
+        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+      </Box>
+      <Box mb={4}>
+        {balances.map((x, i) => (
+          <Box mb={2} key={i}>
+            <ExpandableListItemKey label={`swarm${String(i).padStart(3, '0')}`} value={x.privateKey} />
+            <ExpandableListItemKey label="Address" value={x.address} />
+            <ExpandableListItem label="XDAI balance" value={`${x.dai.toSignificantDigits(4)} XDAI`} />
+            <ExpandableListItem label="BZZ balance" value={`${x.bzz.toSignificantDigits(4)} BZZ`} />
+          </Box>
+        ))}
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton onClick={onCreate} iconType={Check} loading={loading} disabled={loading}>
+          Generate gift wallet
+        </SwarmButton>
+        <SwarmButton onClick={onCancel} cancel iconType={X} disabled={loading}>
+          Cancel
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </>
+  )
+}

src/pages/info/index.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useContext } from 'react'
 import { Button } from '@material-ui/core'
 
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -17,13 +17,15 @@ export default function Status(): ReactElement {
     topology,
     nodeAddresses,
     chequebookAddress,
+    nodeInfo,
   } = useContext(BeeContext)
 
-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   return (
     <div>
       <ExpandableList label="Bee Node" defaultOpen>
+        <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
         <ExpandableListItem
           label="Agent"
           value={

src/pages/restart/LightModeRestart.tsx

@@ -0,0 +1,32 @@
+import { BeeModes } from '@ethersphere/bee-js'
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router'
+import { Loading } from '../../components/Loading'
+import { Context } from '../../providers/Bee'
+import { ROUTES } from '../../routes'
+
+export default function Settings(): ReactElement {
+  const [startedAt] = useState(Date.now())
+  const { apiHealth, nodeInfo } = useContext(Context)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (Date.now() - startedAt < 45_000) {
+      return
+    }
+
+    if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
+      navigate(ROUTES.INFO)
+    }
+  }, [startedAt, navigate, nodeInfo, apiHealth])
+
+  return (
+    <>
+      <Box mb={4}>
+        <Loading />
+      </Box>
+      <Typography>Your node is being upgraded to light mode... postage syncing may take up to 10 minutes.</Typography>
+    </>
+  )
+}

src/pages/restart/Restart.tsx

@@ -0,0 +1,41 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router'
+import { Loading } from '../../components/Loading'
+import { Context } from '../../providers/Bee'
+import { ROUTES } from '../../routes'
+
+export default function Settings(): ReactElement {
+  const [waited, setWaited] = useState(false)
+  const { apiHealth } = useContext(Context)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (waited) {
+      return
+    }
+
+    const timeout = setTimeout(() => setWaited(true), 5_000)
+
+    return () => clearTimeout(timeout)
+  }, [waited])
+
+  useEffect(() => {
+    if (!waited) {
+      return
+    }
+
+    if (apiHealth) {
+      navigate(ROUTES.INFO)
+    }
+  }, [navigate, waited, apiHealth])
+
+  return (
+    <>
+      <Box mb={4}>
+        <Loading />
+      </Box>
+      <Typography>You will be redirected automatically once your node is up and running.</Typography>
+    </>
+  )
+}

src/pages/rpc/Confirmation.tsx

@@ -0,0 +1,61 @@
+import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { Battery, BatteryCharging, Check, Gift } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { ROUTES } from '../../routes'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    checkWrapper: {
+      background: 'rgba(0, 230, 118, 0.25)',
+      borderRadius: 99999,
+      width: '180px',
+      height: '180px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  }),
+)
+
+export default function Confirmation(): ReactElement {
+  const navigate = useNavigate()
+
+  const styles = useStyles()
+
+  return (
+    <>
+      <HistoryHeader>Connect to the blockchain</HistoryHeader>
+      <Grid container direction="column" alignItems="center">
+        <Box mb={6}>
+          <div className={styles.checkWrapper}>
+            <Check size={100} color="#ededed" />
+          </div>
+        </Box>
+        <Box mb={1}>
+          <Typography style={{ fontWeight: 'bold' }}>Your node&apos;s RPC endpoint is set up correctly!</Typography>
+        </Box>
+        <Box mb={4}>
+          <Typography align="center">Lastly, you will need to top-up your node wallet.</Typography>
+          <Typography align="center">
+            If you&apos;re not familiar with cryptocurrencies, you can start with a bank card.
+          </Typography>
+        </Box>
+        <ExpandableListItemActions>
+          <SwarmButton iconType={Battery} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
+            Get started with bank card
+          </SwarmButton>
+          <SwarmButton iconType={BatteryCharging} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
+            Use DAI
+          </SwarmButton>
+          <SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>
+            Use a gift code
+          </SwarmButton>
+        </ExpandableListItemActions>
+      </Grid>
+    </>
+  )
+}

src/pages/rpc/index.tsx

@@ -0,0 +1,61 @@
+import { Box, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { Check } from 'react-feather'
+import { useNavigate } from 'react-router'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context } from '../../providers/TopUp'
+import { ROUTES } from '../../routes'
+import { Rpc } from '../../utils/rpc'
+
+export default function Index(): ReactElement {
+  const { jsonRpcProvider, setJsonRpcProvider } = useContext(Context)
+
+  const [provider, setProvider] = useState(jsonRpcProvider)
+
+  const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
+
+  async function onSubmit() {
+    try {
+      await Rpc.eth_getBlockByNumber(provider)
+      enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' })
+      setJsonRpcProvider(provider)
+      navigate(ROUTES.CONFIRMATION)
+    } catch (error) {
+      enqueueSnackbar('Could not connect to RPC provider.', { variant: 'error' })
+    }
+  }
+
+  return (
+    <>
+      <HistoryHeader>Connect to the blockchain</HistoryHeader>
+      <Box mb={1}>
+        <Typography style={{ fontWeight: 'bold' }}>Set up RPC endpoint</Typography>
+      </Box>
+      <Box mb={4}>
+        <Typography>
+          To connect to and retrieve data from the blockchain, you&apos;ll need to connect to a publicly-provided node
+          via the node&apos;s RPC endpoint. If you&apos;re not familiar with this, you may use{' '}
+          <a href="https://getblock.io/" target="_blank" rel="noreferrer">
+            https://getblock.io/
+          </a>
+          .
+        </Typography>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput
+          name="rpc-endpoint"
+          label="RPC Endpoint"
+          onChange={event => setProvider(event.target.value)}
+          defaultValue={jsonRpcProvider}
+        />
+      </Box>
+      <SwarmButton iconType={Check} onClick={onSubmit}>
+        Connect
+      </SwarmButton>
+    </>
+  )
+}

src/pages/settings/index.tsx

@@ -1,10 +1,36 @@
+import CircularProgress from '@material-ui/core/CircularProgress'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { Context as SettingsContext } from '../../providers/Settings'
 
-export default function Settings(): ReactElement {
-  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl, lockedApiSettings } = useContext(SettingsContext)
+export default function SettingsPage(): ReactElement {
+  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl, lockedApiSettings, config, isLoading } =
+    useContext(SettingsContext)
+
+  if (isLoading) {
+    return (
+      <div style={{ textAlign: 'center', width: '100%' }}>
+        <CircularProgress />
+      </div>
+    )
+  }
+
+  // Run within Bee Desktop, display read only config
+  if (config) {
+    return (
+      <ExpandableList label="Bee Desktop Settings" defaultOpen>
+        <ExpandableListItemInput label="Bee API" value={config['api-addr']} locked />
+        <ExpandableListItemInput label="Bee Debug API" value={config['debug-api-addr']} locked />
+        <ExpandableListItemInput label="CORS" value={config['cors-allowed-origins']} locked />
+        <ExpandableListItemInput label="Data DIR" value={config['data-dir']} locked />
+        <ExpandableListItemInput label="ENS resolver URL" value={config['resolver-options']} locked />
+        {config['swap-endpoint'] && (
+          <ExpandableListItemInput label="SWAP endpoint" value={config['swap-endpoint']} locked />
+        )}
+      </ExpandableList>
+    )
+  }
 
   return (
     <ExpandableList label="API Settings" defaultOpen>

src/pages/stamps/PostageStamp.tsx

@@ -9,10 +9,13 @@ interface Props {
 }
 
 export function PostageStamp({ stamp, shorten }: Props): ReactElement {
+  const batchId = shorten ? stamp.batchID.slice(0, 8) : stamp.batchID
+  const label = `${batchId}${stamp.label ? ` - ${stamp.label}` : ''}`
+
   return (
     <Box p={2} width="100%">
       <Grid container justifyContent="space-between" alignItems="center" direction="row">
-        <Typography variant="subtitle2">{shorten ? stamp.batchID.slice(0, 8) : stamp.batchID}</Typography>
+        <Typography variant="subtitle2">{label}</Typography>
         <Capacity width="100px" usage={stamp.usage} />
       </Grid>
     </Box>

src/pages/stamps/PostageStampCreation.tsx

@@ -2,7 +2,7 @@ import { Box, Grid, Typography } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import { Form, Formik, FormikHelpers } from 'formik'
 import { useSnackbar } from 'notistack'
-import React, { ReactElement, useContext } from 'react'
+import { ReactElement, useContext } from 'react'
 import { Check } from 'react-feather'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
@@ -13,8 +13,8 @@ import {
   calculateStampPrice,
   convertAmountToSeconds,
   convertDepthToBytes,
-  formatBzz,
   secondsToTimeString,
+  waitUntilStampUsable,
 } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
 
@@ -50,24 +50,29 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
   }
 
   function getTtl(amount: number): string {
-    if (isNaN(amount) || amount <= 0) {
-      return '-'
-    }
-
-    return secondsToTimeString(convertAmountToSeconds(amount))
-  }
-
-  function getPrice(depth: number, amount: number): string {
-    const hasInvalidInput = isNaN(amount) || amount <= 0 || isNaN(depth) || depth < 17 || depth > 255
     const isCurrentPriceAvailable = chainState && chainState.currentPrice
 
-    if (hasInvalidInput || !isCurrentPriceAvailable) {
+    if (amount <= 0 || !isCurrentPriceAvailable) {
       return '-'
     }
 
-    const price = calculateStampPrice(depth, amount, chainState.currentPrice)
+    const pricePerBlock = Number.parseInt(chainState.currentPrice, 10)
 
-    return `${formatBzz(price)} BZZ`
+    return `${secondsToTimeString(
+      convertAmountToSeconds(amount, pricePerBlock),
+    )} (with price of ${pricePerBlock.toFixed(0)} per block)`
+  }
+
+  function getPrice(depth: number, amount: bigint): string {
+    const hasInvalidInput = amount <= 0 || isNaN(depth) || depth < 17 || depth > 255
+
+    if (hasInvalidInput) {
+      return '-'
+    }
+
+    const price = calculateStampPrice(depth, amount)
+
+    return `${price.toSignificantDigits()} BZZ`
   }
 
   return (
@@ -83,7 +88,8 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
           const amount = BigInt(values.amount)
           const depth = Number.parseInt(values.depth)
           const options = values.label ? { label: values.label } : undefined
-          await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+          const batch = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+          await waitUntilStampUsable(batch, beeDebugApi)
           actions.resetForm()
           await refresh()
           onFinished()
@@ -114,20 +120,17 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
           else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
         }
 
-        // Label
-        if (values.label && !/^[0-9a-z]*$/i.test(values.label)) errors.label = 'Label must be an alphanumeric string'
-
         return errors
       }}
     >
-      {({ submitForm, isValid, isSubmitting, values }) => (
+      {({ submitForm, isValid, isSubmitting, values, errors }) => (
         <Form>
           <Box mb={2}>
             <SwarmTextInput name="depth" label="Depth" formik />
             <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
               <Grid container justifyContent="space-between">
                 <Typography>Corresponding file size</Typography>
-                <Typography>{getFileSize(parseInt(values.depth || '0', 10))}</Typography>
+                <Typography>{!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}</Typography>
               </Grid>
             </Box>
           </Box>
@@ -136,7 +139,9 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
             <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
               <Grid container justifyContent="space-between">
                 <Typography>Corresponding TTL (Time to live)</Typography>
-                <Typography>{getTtl(parseInt(values.amount || '0', 10))}</Typography>
+                <Typography>
+                  {!errors.amount && values.amount ? getTtl(Number.parseInt(values.amount, 10)) : '-'}
+                </Typography>
               </Grid>
             </Box>
           </Box>
@@ -146,7 +151,11 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
           <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
             <Grid container justifyContent="space-between">
               <Typography>Indicative Price</Typography>
-              <Typography>{getPrice(parseInt(values.depth || '0', 10), parseInt(values.amount || '0', 10))}</Typography>
+              <Typography>
+                {!errors.amount && !errors.depth && values.amount && values.depth
+                  ? getPrice(parseInt(values.depth, 10), BigInt(values.amount))
+                  : '-'}
+              </Typography>
             </Grid>
           </Box>
           <SwarmButton

src/pages/stamps/StampsTable.tsx

@@ -4,6 +4,7 @@ import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
+import { secondsToTimeString } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
 import { PostageStamp } from './PostageStamp'
 
@@ -30,6 +31,14 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
                 )}`}
               />
               <ExpandableListItem label="Amount" value={parseInt(stamp.amount, 10).toLocaleString()} />
+              <ExpandableListItem
+                label="Expires in"
+                value={stamp.batchTTL === -1 ? 'does not expire' : `${secondsToTimeString(stamp.batchTTL)}`}
+              />
+              <ExpandableListItem label="Label" value={stamp.label} />
+              <ExpandableListItem label="Usable" value={stamp.usable ? 'yes' : 'no'} />
+              <ExpandableListItem label="Exists" value={stamp.exists ? 'yes' : 'no'} />
+              <ExpandableListItem label="Purchase Block Number" value={stamp.blockNumber} />
             </>
           }
         >

src/pages/stamps/index.tsx

@@ -5,7 +5,7 @@ import { PlusSquare } from 'react-feather'
 import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as StampsContext } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
 import StampsTable from './StampsTable'
@@ -41,7 +41,7 @@ export default function Stamp(): ReactElement {
     return () => stop()
   }, [status]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   function navigateToNewStamp() {
     navigate(ROUTES.STAMPS_NEW)

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -1,39 +1,59 @@
 import { useContext } from 'react'
 import DepositModal from '../../../containers/DepositModal'
-import type { ReactElement } from 'react'
+import type { ReactElement, ReactNode } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 const ChequebookDeployFund = (): ReactElement | null => {
   const { status, isLoading, chequebookAddress } = useContext(Context)
-  const isOk = status.chequebook
+  const { checkState, isEnabled } = status.chequebook
+
+  if (!isEnabled) return null
+
+  let text: ReactNode
+
+  switch (checkState) {
+    case CheckState.OK:
+      text = 'Your chequebook is deployed and funded'
+      break
+    case CheckState.WARNING:
+      text = (
+        <>
+          Your chequebook is not funded. Please deposit some xBZZ to your chequebook address. You may need to aquire BZZ
+          (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the xDai network through the{' '}
+          <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
+          xDAI token. You can purchase DAI on the network and bridge it to xDai network through the{' '}
+          <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+          <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+        </>
+      )
+      break
+    default:
+      text = (
+        <>
+          Your chequebook is either not deployed nor funded. To run the node you will need xDAI and xBZZ on the xDai
+          network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to
+          the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
+          transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
+          network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+          <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+        </>
+      )
+  }
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Chequebook Deployment & Funding
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Chequebook Deployment & Funding
         </>
       }
     >
-      <ExpandableListItemNote>
-        {isOk ? (
-          'Your chequebook is deployed and funded'
-        ) : (
-          <>
-            Your chequebook is either not deployed or funded. To run the node you will need xDAI and xBZZ on the xDai
-            network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to
-            the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
-            transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
-            network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
-            <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
-          </>
-        )}
-      </ExpandableListItemNote>
+      <ExpandableListItemNote>{text}</ExpandableListItemNote>
       {chequebookAddress && (
         <>
           <ExpandableListItemKey label="Chequebook Address" value={chequebookAddress.chequebookAddress} />

src/pages/status/SetupSteps/DebugConnectionCheck.tsx

@@ -6,30 +6,32 @@ import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
 
 export default function NodeConnectionCheck(): ReactElement | null {
   const { status, isLoading } = useContext(Context)
   const { setDebugApiUrl, apiDebugUrl } = useContext(SettingsContext)
-  const isOk = status.debugApiConnection
+  const { checkState, isEnabled } = status.debugApiConnection
+
+  if (!isEnabled) return null
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee Debug API
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Bee Debug API
         </>
       }
     >
       <ExpandableListItemNote>
-        {isOk
+        {checkState === CheckState.OK
           ? 'The connection to the Bee nodes debug API has been successful'
           : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
 
-      {!isOk && (
+      {checkState === CheckState.ERROR && (
         <ExpandableList level={1} label="Troubleshoot">
           <ExpandableListItem
             label={

src/pages/status/SetupSteps/EthereumConnectionCheck.tsx

@@ -3,22 +3,24 @@ import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 export default function EthereumConnectionCheck(): ReactElement | null {
   const { status, isLoading, nodeAddresses } = useContext(Context)
-  const isOk = status.blockchainConnection
+  const { checkState, isEnabled } = status.blockchainConnection
+
+  if (!isEnabled) return null
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Blockchain
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Blockchain
         </>
       }
     >
       <ExpandableListItemNote>
-        {isOk ? (
+        {checkState === CheckState.OK ? (
           'Your node is connected to the xDai blockchain'
         ) : (
           <>

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

@@ -7,28 +7,30 @@ import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 export default function NodeConnectionCheck(): ReactElement | null {
   const { setApiUrl, apiUrl } = useContext(SettingsContext)
   const { status, isLoading } = useContext(Context)
-  const isOk = status.apiConnection
+  const { isEnabled, checkState } = status.apiConnection
+
+  if (!isEnabled) return null
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee API
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Bee API
         </>
       }
     >
       <ExpandableListItemNote>
-        {isOk
+        {checkState === CheckState.OK
           ? 'The connection to the Bee nodes API has been successful'
           : 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
-      {!isOk && (
+      {checkState === CheckState.ERROR && (
         <ExpandableList level={1} label="Troubleshoot">
           <ExpandableListItem
             label={

src/pages/status/SetupSteps/PeerConnection.tsx

@@ -1,27 +1,37 @@
-import { ReactElement, useContext } from 'react'
+import { ReactElement, ReactNode, useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import TopologyStats from '../../../components/TopologyStats'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 export default function PeerConnection(): ReactElement | null {
   const { status, isLoading, topology } = useContext(Context)
-  const isOk = status.topology
+  const { isEnabled, checkState } = status.topology
+
+  if (!isEnabled) return null
+
+  let text: ReactNode
+  switch (checkState) {
+    case CheckState.OK:
+      text = 'You are connected to other Bee nodes'
+      break
+
+    // Both error state and warning state
+    default:
+      text =
+        'Your node is not connected to any peers. Please wait a bit if you just started the node, otherwise review your configuration file.'
+  }
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Peers
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Peers
         </>
       }
     >
-      <ExpandableListItemNote>
-        {isOk
-          ? 'You are connected to other Bee nodes'
-          : 'Your node is not connected to any peers. Please wait a bit if you just started the node, otherwise review your configuration file.'}
-      </ExpandableListItemNote>
+      <ExpandableListItemNote>{text}</ExpandableListItemNote>
 
       <TopologyStats topology={topology} />
     </ExpandableList>

src/pages/status/SetupSteps/VersionCheck.tsx

@@ -4,22 +4,24 @@ import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 export default function VersionCheck(): ReactElement | null {
   const { status, isLoading, latestUserVersion, latestPublishedVersion, latestBeeVersionUrl } = useContext(Context)
-  const isOk = status.version
+  const { isEnabled, checkState } = status.version
+
+  if (!isEnabled) return null
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Bee Version
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Bee Version
         </>
       }
     >
       <ExpandableListItemNote>
-        {isOk ? (
+        {checkState === CheckState.OK ? (
           'You are running the latest version of Bee.'
         ) : (
           <>

src/pages/top-up/BankCardTopUpIndex.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import Index from '.'
+import { ROUTES } from '../../routes'
+
+export function BankCardTopUpIndex(): ReactElement {
+  return (
+    <Index
+      header={'Top-up with bank card'}
+      title={'Use a bank card to buy xDAI to the funding wallet address below'}
+      p={
+        <Typography>
+          It&apos;s recommended to buy an amount equivalent to 5 to 10 EUR maximum. If you&apos;re not familiar with
+          cryptocurrencies, you may use{' '}
+          <a href="https://ramp.network/buy/" rel="noreferrer" target="_blank">
+            https://ramp.network/buy/
+          </a>
+          .
+        </Typography>
+      }
+      next={ROUTES.TOP_UP_BANK_CARD_SWAP}
+    />
+  )
+}

src/pages/top-up/CryptoTopUpIndex.tsx

@@ -0,0 +1,23 @@
+import { Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import Index from '.'
+import { ROUTES } from '../../routes'
+
+export function CryptoTopUpIndex(): ReactElement {
+  return (
+    <Index
+      header={'Top-up with cryptocurrencies'}
+      title={'Send xDAI to the funding wallet below'}
+      p={
+        <Typography>
+          For security reasons it is recommended to send maximum 5 to 10 xDAI. To get xDAI from DAI you may use{' '}
+          <a href="https://bridge.xdaichain.com/" rel="noreferrer" target="_blank">
+            https://bridge.xdaichain.com/
+          </a>
+          .
+        </Typography>
+      }
+      next={ROUTES.TOP_UP_CRYPTO_SWAP}
+    />
+  )
+}

src/pages/top-up/GiftCardFund.tsx

@@ -0,0 +1,107 @@
+import { Box, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { ArrowDown, Check } from 'react-feather'
+import { useNavigate, useParams } from 'react-router'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import { ProgressIndicator } from '../../components/ProgressIndicator'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as TopUpContext } from '../../providers/TopUp'
+import { ROUTES } from '../../routes'
+import { sleepMs } from '../../utils'
+import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import { ResolvedWallet } from '../../utils/wallet'
+
+export function GiftCardFund(): ReactElement {
+  const { nodeAddresses, balance } = useContext(BeeContext)
+  const { jsonRpcProvider } = useContext(TopUpContext)
+
+  const [loading, setLoading] = useState(false)
+  const [wallet, setWallet] = useState<ResolvedWallet | null>(null)
+
+  const { privateKeyString } = useParams()
+
+  const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (!privateKeyString) {
+      return
+    }
+
+    ResolvedWallet.make(privateKeyString).then(setWallet)
+  }, [privateKeyString])
+
+  if (!wallet || !balance) {
+    return <Loading />
+  }
+
+  async function onFund() {
+    if (!wallet || !nodeAddresses) {
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      await wallet.transfer(nodeAddresses.ethereum)
+      enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
+      await sleepMs(5_000)
+      await upgradeToLightNode(jsonRpcProvider)
+      await restartBeeNode()
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      enqueueSnackbar(`Failed to fund/restart node: ${error}`, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <HistoryHeader>Top-up with gift code</HistoryHeader>
+      <Box mb={4}>
+        <ProgressIndicator index={1} steps={['Paste gift code', 'Fund your node']} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>Send funds to your Bee node</Typography>
+      </Box>
+      <Box mb={4}>
+        <Typography>
+          Deposit all the funds from the gift wallet to your node wallet address. You can use the button below to
+          transfer all funds to your node.
+        </Typography>
+      </Box>
+      <SwarmDivider mb={4} />
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Gift wallet address" value={wallet.address || 'N/A'} />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItem label="XDAI balance" value={`${wallet.dai.toSignificantDigits(4)} XDAI`} />
+      </Box>
+      <Box mb={4}>
+        <ExpandableListItem label="BZZ balance" value={`${wallet.bzz.toSignificantDigits(4)} BZZ`} />
+      </Box>
+      <Box mb={4}>
+        <ArrowDown size={24} color="#aaaaaa" />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses?.ethereum || 'N/A'} expanded />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+      </Box>
+      <Box mb={2}>
+        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+      </Box>
+      <SwarmButton iconType={Check} onClick={onFund} disabled={loading} loading={loading}>
+        Send all funds to your node
+      </SwarmButton>
+    </>
+  )
+}

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -0,0 +1,71 @@
+import { Box, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useState } from 'react'
+import { ArrowRight } from 'react-feather'
+import { useNavigate } from 'react-router'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { ProgressIndicator } from '../../components/ProgressIndicator'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { BzzToken } from '../../models/BzzToken'
+import { DaiToken } from '../../models/DaiToken'
+import { ROUTES } from '../../routes'
+import { getWalletFromPrivateKeyString } from '../../utils/identity'
+import { Rpc } from '../../utils/rpc'
+
+export function GiftCardTopUpIndex(): ReactElement {
+  const [loading, setLoading] = useState(false)
+  const [giftCode, setGiftCode] = useState('')
+
+  const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
+
+  async function onProceed() {
+    setLoading(true)
+    try {
+      const wallet = getWalletFromPrivateKeyString(giftCode)
+      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.getAddressString()))
+      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.getAddressString()))
+
+      if (dai.toDecimal.lt(0.001) || bzz.toDecimal.lt(0.001)) {
+        throw Error('Gift wallet does not have enough funds')
+      }
+      enqueueSnackbar('Successfully verified gift wallet', { variant: 'success' })
+      navigate(ROUTES.TOP_UP_GIFT_CODE_FUND.replace(':privateKeyString', giftCode))
+    } catch (error) {
+      enqueueSnackbar(`Gift wallet could not be verified: ${error}`, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <HistoryHeader>Top-up with gift code</HistoryHeader>
+      <Box mb={4}>
+        <ProgressIndicator index={0} steps={['Paste gift code', 'Fund your node']} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>Please paste your gift code below</Typography>
+      </Box>
+      <Box mb={4}>
+        A gift code is a unique key to a gift wallet that you can use to fund your node. Please don&apos;t share your
+        gift code as it can only be used once.
+      </Box>
+      <SwarmDivider mb={4} />
+      <Box mb={2}>
+        <SwarmTextInput
+          label="Gift code"
+          name="gift-code"
+          onChange={event => {
+            setGiftCode(event.target.value)
+          }}
+        />
+      </Box>
+      <SwarmButton iconType={ArrowRight} loading={loading} disabled={loading} onClick={onProceed}>
+        Proceed
+      </SwarmButton>
+    </>
+  )
+}

src/pages/top-up/Swap.tsx

@@ -0,0 +1,127 @@
+import { Box, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { ArrowDown, Check } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { BzzToken } from '../../models/BzzToken'
+import { DaiToken } from '../../models/DaiToken'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as TopUpContext } from '../../providers/TopUp'
+import { ROUTES } from '../../routes'
+import { sleepMs } from '../../utils'
+import { performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import { TopUpProgressIndicator } from './TopUpProgressIndicator'
+
+interface Props {
+  header: string
+}
+
+export function Swap({ header }: Props): ReactElement {
+  const [loading, setLoading] = useState(false)
+  const [hasSwapped, setSwapped] = useState(false)
+
+  const { jsonRpcProvider } = useContext(TopUpContext)
+  const { balance } = useContext(BeeContext)
+
+  const navigate = useNavigate()
+  const { enqueueSnackbar } = useSnackbar()
+
+  if (!balance) {
+    return <Loading />
+  }
+
+  const daiToSwap = balance.dai.minusBaseUnits('1')
+
+  const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
+  const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedToIntegerBy(200))
+
+  async function onSwap() {
+    if (hasSwapped) {
+      return
+    }
+    setLoading(true)
+    setSwapped(true)
+    try {
+      await performSwap(daiToSwap.toString)
+      enqueueSnackbar('Successfully swapped, restarting...', { variant: 'success' })
+      await sleepMs(5_000)
+      await upgradeToLightNode(jsonRpcProvider)
+      await restartBeeNode()
+      navigate(ROUTES.RESTART_LIGHT)
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+    } catch (error) {
+      enqueueSnackbar(`Failed to swap: ${error}`, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <HistoryHeader>{header}</HistoryHeader>
+      <Box mb={4}>
+        <TopUpProgressIndicator index={1} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>Swap some xDAI to BZZ</Typography>
+      </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.
+        </Typography>
+      </Box>
+      <SwarmDivider mb={4} />
+      <Box mb={4}>
+        <Typography>
+          Your current balance is {balance.dai.toSignificantDigits(4)} xDAI and {balance.bzz.toSignificantDigits(4)}{' '}
+          BZZ.
+        </Typography>
+      </Box>
+      <Box mb={4}>
+        <SwarmTextInput
+          label="Amount to swap"
+          defaultValue={`${daiToSwap.toSignificantDigits(4)} XDAI`}
+          name="x"
+          onChange={() => false}
+        />
+      </Box>
+      <Box mb={4}>
+        <ArrowDown size={24} color="#aaaaaa" />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItem
+          label="Resulting XDAI balance after swap"
+          value={`${daiAfterSwap.toSignificantDigits(4)} XDAI`}
+        />
+      </Box>
+      <Box mb={2}>
+        <ExpandableListItem
+          label="Resulting BZZ balance after swap"
+          value={`${bzzAfterSwap.toSignificantDigits(4)} BZZ`}
+        />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton
+          iconType={Check}
+          onClick={onSwap}
+          disabled={hasSwapped || loading || balance.dai.toDecimal.lte(1)}
+          loading={loading}
+        >
+          Swap Now
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </>
+  )
+}

src/pages/top-up/TopUpProgressIndicator.tsx

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react'
+import { ProgressIndicator } from '../../components/ProgressIndicator'
+
+interface Props {
+  index: number
+}
+
+export function TopUpProgressIndicator({ index }: Props): ReactElement {
+  return <ProgressIndicator index={index} steps={['Buy xDAI', 'Swap BZZ']} />
+}

src/pages/top-up/index.tsx

@@ -0,0 +1,56 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
+import { Check } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { Context } from '../../providers/Bee'
+import { TopUpProgressIndicator } from './TopUpProgressIndicator'
+
+interface Props {
+  header: string
+  title: string
+  p: ReactElement
+  next: string
+}
+
+export default function Index({ header, title, p, next }: Props): ReactElement {
+  const { nodeAddresses, balance } = useContext(Context)
+  const navigate = useNavigate()
+
+  if (!balance || !nodeAddresses) {
+    return <Loading />
+  }
+
+  const disabled = balance.dai.toDecimal.lte(1)
+
+  return (
+    <>
+      <HistoryHeader>{header}</HistoryHeader>
+      <Box mb={4}>
+        <TopUpProgressIndicator index={0} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>{title}</Typography>
+      </Box>
+      <Box mb={4}>{p}</Box>
+      <SwarmDivider mb={4} />
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
+      </Box>
+      <Box mb={4}>
+        <ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
+      </Box>
+      <Grid container direction="row" justifyContent="space-between">
+        <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}
+      </Grid>
+    </>
+  )
+}

src/providers/Bee.tsx

@@ -1,10 +1,11 @@
-import type {
+import {
+  BeeModes,
   ChainState,
   ChequebookAddressResponse,
   Health,
   LastChequesResponse,
   NodeAddresses,
-  NodesInfo,
+  NodeInfo,
   Peer,
   Topology,
 } from '@ethersphere/bee-js'
@@ -14,20 +15,33 @@ import { engines } from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
 import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
+import { WalletAddress } from '../utils/wallet'
 import { Context as SettingsContext } from './Settings'
 
+export enum CheckState {
+  OK = 'OK',
+  WARNING = 'Warning',
+  ERROR = 'Error',
+}
+
+interface StatusItem {
+  isEnabled: boolean
+  checkState: CheckState
+}
+
 interface Status {
-  all: boolean
-  version: boolean
-  blockchainConnection: boolean
-  debugApiConnection: boolean
-  apiConnection: boolean
-  topology: boolean
-  chequebook: boolean
+  all: CheckState
+  version: StatusItem
+  blockchainConnection: StatusItem
+  debugApiConnection: StatusItem
+  apiConnection: StatusItem
+  topology: StatusItem
+  chequebook: StatusItem
 }
 
 interface ContextInterface {
   status: Status
+  balance: WalletAddress | null
   latestPublishedVersion?: string
   latestUserVersion?: string
   latestUserVersionExact?: string
@@ -37,7 +51,7 @@ interface ContextInterface {
   apiHealth: boolean
   debugApiHealth: Health | null
   nodeAddresses: NodeAddresses | null
-  nodeInfo: NodesInfo | null
+  nodeInfo: NodeInfo | null
   topology: Topology | null
   chequebookAddress: ChequebookAddressResponse | null
   peers: Peer[] | null
@@ -55,18 +69,17 @@ interface ContextInterface {
   refresh: () => Promise<void>
 }
 
-const startedInDevMode = window.location.search.includes('devMode=1')
-
 const initialValues: ContextInterface = {
   status: {
-    all: false,
-    version: false,
-    blockchainConnection: false,
-    debugApiConnection: false,
-    apiConnection: false,
-    topology: false,
-    chequebook: false,
+    all: CheckState.ERROR,
+    version: { isEnabled: false, checkState: CheckState.ERROR },
+    blockchainConnection: { isEnabled: false, checkState: CheckState.ERROR },
+    debugApiConnection: { isEnabled: false, checkState: CheckState.ERROR },
+    apiConnection: { isEnabled: false, checkState: CheckState.ERROR },
+    topology: { isEnabled: false, checkState: CheckState.ERROR },
+    chequebook: { isEnabled: false, checkState: CheckState.ERROR },
   },
+  balance: null,
   latestPublishedVersion: undefined,
   latestUserVersion: undefined,
   latestUserVersionExact: undefined,
@@ -104,34 +117,69 @@ interface Props {
 function getStatus(
   debugApiHealth: Health | null,
   nodeAddresses: NodeAddresses | null,
-  nodeInfo: NodesInfo | null,
+  nodeInfo: NodeInfo | null,
   apiHealth: boolean,
   topology: Topology | null,
   chequebookAddress: ChequebookAddressResponse | null,
   chequebookBalance: ChequebookBalance | null,
   error: Error | null,
 ): Status {
-  // FIXME: `devMode` is a temporary workaround to be able to develop with only one node
-  const devMode = startedInDevMode || Boolean(process.env.REACT_APP_DEV_MODE) || nodeInfo?.beeMode === 'dev'
-  const status = {
-    version: Boolean(
-      debugApiHealth &&
-        semver.satisfies(debugApiHealth.version, engines.bee, {
-          includePrerelease: true,
-        }),
-    ),
-    blockchainConnection: Boolean(nodeAddresses?.ethereum),
-    debugApiConnection: Boolean(debugApiHealth?.status === 'ok'),
-    apiConnection: apiHealth,
-    topology: Boolean(topology?.connected && topology?.connected > 0) || devMode,
-    chequebook:
-      (Boolean(chequebookAddress?.chequebookAddress) &&
-        chequebookBalance !== null &&
-        chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)) ||
-      devMode,
+  const status: Status = { ...initialValues.status }
+
+  // Version check
+  status.version.isEnabled = true
+  status.version.checkState =
+    debugApiHealth &&
+    semver.satisfies(debugApiHealth.version, engines.bee, {
+      includePrerelease: true,
+    })
+      ? CheckState.OK
+      : CheckState.ERROR
+
+  // Blockchain connection check
+  status.blockchainConnection.isEnabled = true
+  status.blockchainConnection.checkState = Boolean(debugApiHealth?.status === 'ok') ? CheckState.OK : CheckState.ERROR
+
+  // Debug API connection check
+  status.debugApiConnection.isEnabled = true
+  status.debugApiConnection.checkState = Boolean(debugApiHealth?.status === 'ok') ? CheckState.OK : CheckState.ERROR
+
+  // API connection check
+  status.apiConnection.isEnabled = true
+  status.apiConnection.checkState = apiHealth ? CheckState.OK : CheckState.ERROR
+
+  // Topology check
+  if (nodeInfo && [BeeModes.FULL, BeeModes.LIGHT, BeeModes.ULTRA_LIGHT].includes(nodeInfo.beeMode)) {
+    status.topology.isEnabled = true
+    status.topology.checkState = topology?.connected && topology?.connected > 0 ? CheckState.OK : CheckState.WARNING
   }
 
-  return { ...status, all: !error && Object.values(status).every(v => v) }
+  // Chequebook check
+  if (error || (nodeInfo && [BeeModes.FULL, BeeModes.LIGHT].includes(nodeInfo.beeMode))) {
+    status.chequebook.isEnabled = true
+
+    if (
+      chequebookAddress?.chequebookAddress &&
+      chequebookBalance !== null &&
+      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)
+    ) {
+      status.chequebook.checkState = CheckState.OK
+    } else if (chequebookAddress?.chequebookAddress) status.chequebook.checkState = CheckState.WARNING
+    else status.chequebook.checkState = CheckState.OK
+  }
+
+  // Determine overall status
+  if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
+    status.all = CheckState.ERROR
+  } else if (
+    Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING)
+  ) {
+    status.all = CheckState.WARNING
+  } else {
+    status.all = CheckState.OK
+  }
+
+  return status
 }
 
 export function Provider({ children }: Props): ReactElement {
@@ -139,7 +187,7 @@ export function Provider({ children }: Props): ReactElement {
   const [apiHealth, setApiHealth] = useState<boolean>(false)
   const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
-  const [nodeInfo, setNodeInfo] = useState<NodesInfo | null>(null)
+  const [nodeInfo, setNodeInfo] = useState<NodeInfo | null>(null)
   const [topology, setNodeTopology] = useState<Topology | null>(null)
   const [chequebookAddress, setChequebookAddress] = useState<ChequebookAddressResponse | null>(null)
   const [peers, setPeers] = useState<Peer[] | null>(null)
@@ -148,6 +196,7 @@ export function Provider({ children }: Props): ReactElement {
   const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
   const [settlements, setSettlements] = useState<Settlements | null>(null)
   const [chainState, setChainState] = useState<ChainState | null>(null)
+  const [walletAddress, setWalletAddress] = useState<WalletAddress | null>(initialValues.balance)
 
   const { latestBeeRelease } = useLatestBeeRelease()
 
@@ -187,6 +236,18 @@ export function Provider({ children }: Props): ReactElement {
     refresh()
   }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (nodeAddresses?.ethereum) {
+      WalletAddress.make(nodeAddresses.ethereum).then(setWalletAddress)
+    }
+  }, [nodeAddresses])
+
+  useEffect(() => {
+    const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), 30_000)
+
+    return () => clearInterval(interval)
+  }, [walletAddress])
+
   const refresh = async () => {
     // Don't want to refresh when already refreshing
     if (isRefreshing) return
@@ -343,6 +404,7 @@ export function Provider({ children }: Props): ReactElement {
           chequebookBalance,
           error,
         ),
+        balance: walletAddress,
         latestUserVersion,
         latestUserVersionExact,
         latestPublishedVersion,

src/providers/Settings.tsx

@@ -1,6 +1,7 @@
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
 import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
 import { config } from '../config'
+import { BeeConfig, useGetBeeConfig } from '../hooks/apiHooks'
 
 interface ContextInterface {
   apiUrl: string
@@ -10,6 +11,10 @@ interface ContextInterface {
   setApiUrl: (url: string) => void
   setDebugApiUrl: (url: string) => void
   lockedApiSettings: boolean
+  desktopApiKey: string
+  config: BeeConfig | null
+  isLoading: boolean
+  error: Error | null
 }
 
 const initialValues: ContextInterface = {
@@ -20,6 +25,10 @@ const initialValues: ContextInterface = {
   setApiUrl: () => {}, // eslint-disable-line
   setDebugApiUrl: () => {}, // eslint-disable-line
   lockedApiSettings: false,
+  desktopApiKey: '',
+  config: null,
+  isLoading: true,
+  error: null,
 }
 
 export const Context = createContext<ContextInterface>(initialValues)
@@ -43,9 +52,30 @@ export function Provider({
   const [beeApi, setBeeApi] = useState<Bee | null>(null)
   const [beeDebugApi, setBeeDebugApi] = useState<BeeDebug | null>(null)
   const [lockedApiSettings] = useState<boolean>(Boolean(extLockedApiSettings))
+  const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
+  const { config, isLoading, error } = useGetBeeConfig()
 
-  const url = beeApiUrl || apiUrl
-  const debugUrl = beeDebugApiUrl || apiDebugUrl
+  function makeHttpUrl(string: string): string {
+    if (!string.startsWith('http')) {
+      return `http://${string}`
+    }
+
+    return string
+  }
+
+  const url = makeHttpUrl(config?.['api-addr'] || beeApiUrl || apiUrl)
+  const debugUrl = makeHttpUrl(config?.['debug-api-addr'] || beeDebugApiUrl || apiDebugUrl)
+
+  useEffect(() => {
+    const urlSearchParams = new URLSearchParams(window.location.search)
+    const newApiKey = urlSearchParams.get('v')
+
+    if (newApiKey) {
+      localStorage.setItem('apiKey', newApiKey)
+      window.location.search = ''
+      setDesktopApiKey(newApiKey)
+    }
+  }, [])
 
   useEffect(() => {
     try {
@@ -75,6 +105,10 @@ export function Provider({
         setApiUrl,
         setDebugApiUrl,
         lockedApiSettings,
+        desktopApiKey,
+        config,
+        isLoading,
+        error,
       }}
     >
       {children}

src/providers/TopUp.tsx

@@ -0,0 +1,73 @@
+import Wallet from 'ethereumjs-wallet'
+import { createContext, ReactElement, useEffect, useState } from 'react'
+import { setJsonRpcInDesktop } from '../utils/desktop'
+import { getWalletFromPrivateKeyString } from '../utils/identity'
+
+const LocalStorageKeys = {
+  jsonRpcProvider: 'json-rpc-provider',
+  depositWallet: 'deposit-wallet',
+  giftWallets: 'gift-wallets',
+  invitation: 'invitation',
+}
+
+interface ContextInterface {
+  jsonRpcProvider: string
+  giftWallets: Wallet[]
+  setJsonRpcProvider: (jsonRpcProvider: string) => void
+  addGiftWallet: (wallet: Wallet) => void
+}
+
+const initialValues: ContextInterface = {
+  jsonRpcProvider: '',
+  giftWallets: [],
+  setJsonRpcProvider: () => {}, // eslint-disable-line
+  addGiftWallet: () => {}, // eslint-disable-line
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactElement
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [jsonRpcProvider, setJsonRpcProvider] = useState(
+    localStorage.getItem('json-rpc-provider') || initialValues.jsonRpcProvider,
+  )
+  const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
+
+  useEffect(() => {
+    const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)
+
+    if (existingGiftWallets) {
+      setGiftWallets(JSON.parse(existingGiftWallets).map(getWalletFromPrivateKeyString))
+    }
+  }, [])
+
+  function setAndPersistJsonRpcProvider(jsonRpcProvider: string) {
+    localStorage.setItem(LocalStorageKeys.jsonRpcProvider, jsonRpcProvider)
+    setJsonRpcProvider(jsonRpcProvider)
+    // eslint-disable-next-line no-console
+    setJsonRpcInDesktop(jsonRpcProvider).catch(console.error)
+  }
+
+  function addGiftWallet(wallet: Wallet) {
+    const newArray = [...giftWallets, wallet]
+    localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.getPrivateKeyString())))
+    setGiftWallets(newArray)
+  }
+
+  return (
+    <Context.Provider
+      value={{
+        jsonRpcProvider,
+        giftWallets,
+        setJsonRpcProvider: setAndPersistJsonRpcProvider,
+        addGiftWallet,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  )
+}

src/react-app-env.d.ts

@@ -5,23 +5,6 @@ interface LatestBeeRelease {
   html_url: string
 }
 
-interface StatusHookCommon {
-  isOk: boolean
-}
-
-interface StatusNodeVersionHook extends StatusHookCommon {
-  userVersion?: string
-  latestVersion?: string
-  latestUrl: string
-  isLatestBeeVersion: boolean
-}
-interface StatusEthereumConnectionHook extends StatusHookCommon {
-  nodeAddresses: NodeAddresses | null
-}
-interface StatusTopologyHook extends StatusHookCommon {
-  topology: Topology | null
-}
-
 interface SwarmMetadata {
   size: number
   name: string

src/routes.tsx

@@ -9,11 +9,21 @@ import { Download } from './pages/files/Download'
 import { Share } from './pages/files/Share'
 import { Upload } from './pages/files/Upload'
 import { UploadLander } from './pages/files/UploadLander'
+import GiftCards from './pages/gift-code'
 import Info from './pages/info'
+import LightModeRestart from './pages/restart/LightModeRestart'
+import Restart from './pages/restart/Restart'
+import Wallet from './pages/rpc'
+import Confirmation from './pages/rpc/Confirmation'
 import Settings from './pages/settings'
 import Stamps from './pages/stamps'
 import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
 import Status from './pages/status'
+import { BankCardTopUpIndex } from './pages/top-up/BankCardTopUpIndex'
+import { CryptoTopUpIndex } from './pages/top-up/CryptoTopUpIndex'
+import { GiftCardFund } from './pages/top-up/GiftCardFund'
+import { GiftCardTopUpIndex } from './pages/top-up/GiftCardTopUpIndex'
+import { Swap } from './pages/top-up/Swap'
 
 export enum ROUTES {
   INFO = '/',
@@ -31,6 +41,17 @@ export enum ROUTES {
   FEEDS_NEW = '/feeds/new',
   FEEDS_UPDATE = '/feeds/update/:hash',
   FEEDS_PAGE = '/feeds/:uuid',
+  WALLET = '/wallet',
+  CONFIRMATION = '/wallet/confirmation',
+  TOP_UP_CRYPTO = '/top-up/crypto',
+  TOP_UP_CRYPTO_SWAP = '/top-up/crypto/swap',
+  TOP_UP_BANK_CARD = '/top-up/bank-card',
+  TOP_UP_BANK_CARD_SWAP = '/top-up/bank-card/swap',
+  TOP_UP_GIFT_CODE = '/top-up/gift-code',
+  TOP_UP_GIFT_CODE_FUND = '/top-up/gift-code/fund/:privateKeyString',
+  GIFT_CODES = '/gift-codes',
+  RESTART = '/restart',
+  RESTART_LIGHT = '/light-mode-restart',
 }
 
 const BaseRouter = (): ReactElement => (
@@ -49,6 +70,17 @@ const BaseRouter = (): ReactElement => (
     <Route path={ROUTES.FEEDS_UPDATE} element={<UpdateFeed />} />
     <Route path={ROUTES.FEEDS_PAGE} element={<FeedSubpage />} />
     <Route path={ROUTES.INFO} element={<Info />} />
+    <Route path={ROUTES.WALLET} element={<Wallet />} />
+    <Route path={ROUTES.CONFIRMATION} element={<Confirmation />} />
+    <Route path={ROUTES.GIFT_CODES} element={<GiftCards />} />
+    <Route path={ROUTES.TOP_UP_CRYPTO} element={<CryptoTopUpIndex />} />
+    <Route path={ROUTES.TOP_UP_CRYPTO_SWAP} element={<Swap header="Top-up with cryptocurrencies" />} />
+    <Route path={ROUTES.TOP_UP_BANK_CARD} element={<BankCardTopUpIndex />} />
+    <Route path={ROUTES.TOP_UP_BANK_CARD_SWAP} element={<Swap header="Top-up with bank card" />} />
+    <Route path={ROUTES.TOP_UP_GIFT_CODE} element={<GiftCardTopUpIndex />} />
+    <Route path={ROUTES.TOP_UP_GIFT_CODE_FUND} element={<GiftCardFund />} />
+    <Route path={ROUTES.RESTART} element={<Restart />} />
+    <Route path={ROUTES.RESTART_LIGHT} element={<LightModeRestart />} />
   </Routes>
 )
 

src/types.ts

@@ -1,4 +1,23 @@
+import type { NodeAddresses, Topology } from '@ethersphere/bee-js'
 import type { Token } from './models/Token'
+import { CheckState } from './providers/Bee'
+
+export interface StatusHookCommon {
+  checkState: CheckState
+}
+
+export interface StatusNodeVersionHook extends StatusHookCommon {
+  userVersion?: string
+  latestVersion?: string
+  latestUrl: string
+  isLatestBeeVersion: boolean
+}
+export interface StatusEthereumConnectionHook extends StatusHookCommon {
+  nodeAddresses: NodeAddresses | null
+}
+export interface StatusTopologyHook extends StatusHookCommon {
+  topology: Topology | null
+}
 
 export interface ChequebookBalance {
   totalBalance: Token

src/utils/bzz-contract-interface.ts

@@ -0,0 +1,25 @@
+export const bzzContractInterface = [
+  {
+    type: 'function',
+    stateMutability: 'nonpayable',
+    payable: false,
+    outputs: [
+      {
+        type: 'bool',
+        name: '',
+      },
+    ],
+    name: 'transfer',
+    inputs: [
+      {
+        type: 'address',
+        name: '_to',
+      },
+      {
+        type: 'uint256',
+        name: '_value',
+      },
+    ],
+    constant: false,
+  },
+]

src/utils/bzz-faucet.ts

@@ -0,0 +1,5 @@
+import axios from 'axios'
+
+export async function requestBzz(address: string): Promise<void> {
+  await axios.post(`https://xbzz-faucet.apyos.dev/xbzz/${address}`)
+}

src/utils/desktop.ts

@@ -0,0 +1,53 @@
+import axios from 'axios'
+import { getJson, postJson } from './net'
+
+interface DesktopStatus {
+  status: 0 | 1 | 2
+  address: string | null
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  config: Record<string, any>
+}
+
+export async function getDesktopStatus(): Promise<DesktopStatus> {
+  const response = await getJson(`http://${getDesktopHost()}/status`)
+
+  return response as DesktopStatus
+}
+
+export async function getGasFromFaucet(address: string): Promise<void> {
+  await axios.post(`http://getxdai.co/${address}/0.1`)
+}
+
+export async function upgradeToLightNode(rpcProvider: string): Promise<void> {
+  await updateDesktopConfiguration({
+    'chain-enable': true,
+    'swap-enable': true,
+    'swap-endpoint': rpcProvider,
+  })
+}
+
+export async function setJsonRpcInDesktop(value: string): Promise<void> {
+  await updateDesktopConfiguration({
+    'swap-endpoint': value,
+  })
+}
+
+async function updateDesktopConfiguration(values: Record<string, unknown>): Promise<void> {
+  await postJson(`http://${getDesktopHost()}/config`, values)
+}
+
+export async function restartBeeNode(): Promise<void> {
+  await postJson(`http://${getDesktopHost()}/restart`)
+}
+
+export async function createGiftWallet(address: string): Promise<void> {
+  await postJson(`http://${getDesktopHost()}/gift-wallet/${address}`)
+}
+
+export async function performSwap(daiAmount: string): Promise<void> {
+  await postJson(`http://${getDesktopHost()}/swap`, { dai: daiAmount })
+}
+
+function getDesktopHost(): string {
+  return window.location.host
+}

src/utils/file.ts

@@ -87,8 +87,8 @@ export function getPath(file: FilePath): string {
 /**
  * Utility function that is needed to have correct directory structure as webkitRelativePath is read only
  */
-export function packageFile(file: FilePath): FilePath {
-  const path = getPath(file)
+export function packageFile(file: FilePath, pathOverwrite?: string): FilePath {
+  const path = pathOverwrite || getPath(file)
 
   return {
     path: path,

src/utils/identity.ts

@@ -79,9 +79,11 @@ function getWalletFromIdentity(identity: Identity, password?: string): Promise<W
 }
 
 async function getWallet(type: IdentityType, data: string, password?: string): Promise<Wallet> {
-  return type === 'PRIVATE_KEY'
-    ? Wallet.fromPrivateKey(Buffer.from(trimHexString(data), 'hex'))
-    : await Wallet.fromV3(data, password as string)
+  return type === 'PRIVATE_KEY' ? getWalletFromPrivateKeyString(data) : await Wallet.fromV3(data, password as string)
+}
+
+export function getWalletFromPrivateKeyString(privateKey: string): Wallet {
+  return Wallet.fromPrivateKey(Buffer.from(trimHexString(privateKey), 'hex'))
 }
 
 export async function updateFeed(

src/utils/index.test.ts

@@ -0,0 +1,186 @@
+import { extractSwarmHash, extractSwarmCid, extractEns, recognizeEnsOrSwarmHash } from './index'
+
+interface TestObject {
+  input: string
+  expectedOutput: string | undefined
+}
+
+const correctHashes: TestObject[] = [
+  // non-encrypted
+  {
+    input: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+    expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+  {
+    input: 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+    expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+  {
+    input: 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+    expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+  {
+    input: 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
+    expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+  {
+    input: 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
+    expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+  // encrypted
+  {
+    input:
+      'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+    expectedOutput:
+      'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+  {
+    input:
+      'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+    expectedOutput:
+      'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+  {
+    input:
+      'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+    expectedOutput:
+      'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+  {
+    input:
+      'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
+    expectedOutput:
+      'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+  {
+    input:
+      'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
+    expectedOutput:
+      'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+  },
+]
+
+const wrongHashes: string[] = [
+  // one character too long
+  'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa',
+  'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa',
+  'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa',
+  'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa/',
+  'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa/',
+
+  // a bit shorter
+  'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d',
+]
+
+describe('extractSwarmHash', () => {
+  test('should correctly extract hash', () => {
+    correctHashes.forEach(({ input, expectedOutput }) => {
+      const hash = extractSwarmHash(input)
+      expect(hash).toBe(expectedOutput)
+    })
+  })
+  test('should not extract hash from incorrect inputs', () => {
+    wrongHashes.forEach(input => {
+      const hash = extractSwarmHash(input)
+      expect(hash).toBe(undefined)
+    })
+  })
+})
+
+const correctCids: TestObject[] = [
+  {
+    input: 'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.bzz.link',
+    expectedOutput: 'e80a3df165abbf275ae5480e9e51241d2e6368c4ed379771424af29ca35b29d4',
+  },
+  {
+    input: 'https://bah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vookq.bzz.link',
+    expectedOutput: 'd2f269c0b99d5bbbcdb93d7f0a85815ad23f851dd2fa94509124c401f7b57395',
+  },
+]
+const wrongCids: string[] = [
+  'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.another.domain',
+  'http://bah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vookq.bzz.link',
+  'https://not_cid.bzz.link',
+  'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.subdomain.bzz.link',
+  'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.subdomain.bzz.link',
+  'https://bah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vook.bzz.link',
+  'https://aah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vookq.bzz.link',
+]
+
+describe('extractSwarmCid', () => {
+  test('should correctly extract hash', () => {
+    correctCids.forEach(({ input, expectedOutput }) => {
+      const hash = extractSwarmCid(input)
+      expect(hash).toBe(expectedOutput)
+    })
+  })
+  test('should not extract cid from incorrect urls', () => {
+    wrongCids.forEach(url => {
+      const hash = extractSwarmCid(url)
+      expect(hash).toBe(undefined)
+    })
+  })
+})
+
+const correctEns: TestObject[] = [
+  {
+    input: 'test.eth',
+    expectedOutput: 'test.eth',
+  },
+  {
+    input: 't-est.eth',
+    expectedOutput: 't-est.eth',
+  },
+  {
+    input: 'http://test.eth/whatever',
+    expectedOutput: 'test.eth',
+  },
+  {
+    input: 'https://alice.test.eth?whatever',
+    expectedOutput: 'alice.test.eth',
+  },
+  {
+    input: 'swarm.example.eth/?id=1&page=2',
+    expectedOutput: 'swarm.example.eth',
+  },
+  {
+    input: 'http://swarm.example.eth#up',
+    expectedOutput: 'swarm.example.eth',
+  },
+  {
+    input: 'http://site.eth:8008',
+    expectedOutput: 'site.eth',
+  },
+]
+
+const wrongEns: string[] = ['http://test.ethereum/whatever']
+
+describe('extractEns', () => {
+  test('should correctly extract ens domain', () => {
+    correctEns.forEach(({ input, expectedOutput }) => {
+      const hash = extractEns(input)
+      expect(hash).toBe(expectedOutput)
+    })
+  })
+  test('should not extract ens from incorrect inputs', () => {
+    wrongEns.forEach(url => {
+      const hash = extractEns(url)
+      expect(hash).toBe(undefined)
+    })
+  })
+})
+
+describe('recognizeEnsOrSwarmHash', () => {
+  test('should correctly extract hash or ens', () => {
+    ;[...correctHashes, ...correctCids, ...correctEns].forEach(({ input, expectedOutput }) => {
+      const hash = recognizeEnsOrSwarmHash(input)
+      expect(hash).toBe(expectedOutput)
+    })
+  })
+  test('should not extract hash or ens from incorrect inputs but instead return them', () => {
+    ;[...wrongHashes, ...wrongCids, ...wrongEns].forEach(url => {
+      const hash = recognizeEnsOrSwarmHash(url)
+      expect(hash).toBe(url)
+    })
+  })
+})

src/utils/index.ts

@@ -1,5 +1,8 @@
-import { NumberString } from '@ethersphere/bee-js'
 import { BigNumber } from 'bignumber.js'
+import { Token } from '../models/Token'
+import { decodeCid } from '@ethersphere/swarm-cid'
+import { BZZ_LINK_DOMAIN } from '../constants'
+import { BatchId, BeeDebug, PostageBatch } from '@ethersphere/bee-js'
 
 /**
  * Test if value is an integer
@@ -108,10 +111,51 @@ export function makeRetriablePromise<T>(fn: () => Promise<T>, maxRetries = 3, de
   })
 }
 
-export function extractSwarmHash(string: string): string | null {
-  const matches = string.match(/[a-fA-F0-9]{64,128}/)
+// Matches exactly 64 or 128 caracters alphanumeric characters that are surrounded by non-alpha num characters
+const regexpMatchHash = /(?:^|[^a-f0-9]+)([a-f0-9]{64}|[a-f0-9]{128})(?:$|[^a-f0-9]+)/i
 
-  return (matches && matches[0]) || null
+export function extractSwarmHash(string: string): string | undefined {
+  const matches = string.match(regexpMatchHash)
+
+  return (matches && matches[1]) || undefined
+}
+
+// Matches the CID from bzz-link subdomain
+const regexpMatchCID = new RegExp(`https://(bah5acgza[a-z0-9]{52})\\.${BZZ_LINK_DOMAIN}`, 'i')
+
+export function extractSwarmCid(s: string): string | undefined {
+  const matches = s.match(regexpMatchCID)
+
+  if (!matches || !matches[1]) {
+    return
+  }
+
+  const cid = matches[1]
+  try {
+    const decodeResult = decodeCid(cid)
+
+    if (!decodeResult.type) {
+      return
+    }
+
+    return decodeResult.reference
+  } catch (e) {
+    return
+  }
+}
+
+// Matches any number of subdomain with .eth
+// e.g. this.is.just-a-test.eth
+export const regexpEns = /((?:(?:[^-./?:\s][^./?:\s]{0,61}[^-./?:\s]|[^-./?:\s]{1,2})\.)+eth)(?:$|[/?:#].*)/i
+
+export function extractEns(value: string): string | undefined {
+  const matches = value.match(regexpEns)
+
+  return (matches && matches[1]) || undefined
+}
+
+export function recognizeEnsOrSwarmHash(value: string): string {
+  return extractEns(value) || extractSwarmHash(value) || extractSwarmCid(value) || value
 }
 
 export function uuidV4(): string {
@@ -159,38 +203,21 @@ export function secondsToTimeString(seconds: number): string {
   return `${unit.toFixed(1)} years`
 }
 
-export function formatBzz(amount: number): string {
-  const asString = amount.toFixed(16)
-
-  let indexOfSignificantDigit = -1
-  let reachedDecimalPoint = false
-
-  for (let i = 0; i < asString.length; i++) {
-    const char = asString[i]
-
-    if (char === '.') {
-      reachedDecimalPoint = true
-    } else if (reachedDecimalPoint && char !== '0') {
-      indexOfSignificantDigit = i
-      break
-    }
-  }
-
-  return asString.slice(0, indexOfSignificantDigit + 4)
-}
-
 export function convertDepthToBytes(depth: number): number {
   return 2 ** depth * 4096
 }
 
-export function convertAmountToSeconds(amount: number): number {
-  return amount / 10 / 1
+export function convertAmountToSeconds(amount: number, pricePerBlock: number): number {
+  // TODO: blocktime should come directly from the blockchain as it may differ between different networks
+  const blockTime = 5 // On mainnet there is 5 seconds between blocks
+
+  // See https://github.com/ethersphere/bee/blob/66f079930d739182c4c79eb6008784afeeba1096/pkg/debugapi/postage.go#L410-L413
+  return (amount * blockTime) / pricePerBlock
 }
 
-export function calculateStampPrice(depth: number, amount: number, currentPrice: NumberString): number {
-  const price = parseInt(currentPrice, 10)
-
-  return (amount * 2 ** (depth - 16) * price) / 1e16
+export function calculateStampPrice(depth: number, amount: bigint): Token {
+  // See https://github.com/ethersphere/bee/blob/66f079930d739182c4c79eb6008784afeeba1096/pkg/debugapi/postage.go#L410-L413
+  return new Token(amount * BigInt(2 ** depth)) // FIXME: the 2 ** depth should be performed on bigint already
 }
 
 export function shortenText(text: string, length = 20, separator = '[…]'): string {
@@ -200,3 +227,29 @@ export function shortenText(text: string, length = 20, separator = '[…]'): str
 
   return `${text.slice(0, length)}${separator}${text.slice(-length)}`
 }
+
+const DEFAULT_POLLING_FREQUENCY = 1_000
+const DEFAULT_STAMP_USABLE_TIMEOUT = 120_000
+
+interface Options {
+  pollingFrequency?: number
+  timeout?: number
+}
+
+export async function waitUntilStampUsable(
+  batchId: BatchId,
+  beeDebug: BeeDebug,
+  options?: Options,
+): Promise<PostageBatch> {
+  const timeout = options?.timeout || DEFAULT_STAMP_USABLE_TIMEOUT
+  const pollingFrequency = options?.pollingFrequency || DEFAULT_POLLING_FREQUENCY
+
+  for (let i = 0; i < timeout; i += pollingFrequency) {
+    const stamp = await beeDebug.getPostageBatch(batchId)
+
+    if (stamp.usable) return stamp
+    await sleepMs(pollingFrequency)
+  }
+
+  throw new Error('Wait until stamp usable timeout has been reached')
+}

src/utils/net.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import axios from 'axios'
+
+export function getJson<T extends Record<string, any>>(url: string): Promise<T> {
+  return sendRequest(url, 'GET') as Promise<T>
+}
+
+export function postJson(url: string, data?: Record<string, any>): Promise<Record<string, unknown>> {
+  return sendRequest(url, 'POST', data)
+}
+
+async function sendRequest(
+  url: string,
+  method: 'GET' | 'POST',
+  data?: Record<string, unknown>,
+): Promise<Record<string, any>> {
+  const authorization = localStorage.getItem('apiKey')
+
+  if (!authorization) {
+    throw Error('API key not found in local storage')
+  }
+  const headers = {
+    authorization,
+  }
+  const response = await axios(url, {
+    method,
+    headers,
+    data,
+  })
+
+  return response.data
+}

src/utils/rpc.ts

@@ -0,0 +1,131 @@
+import { debounce } from '@material-ui/core'
+import axios from 'axios'
+import { Contract, providers, Wallet } from 'ethers'
+import { bzzContractInterface } from './bzz-contract-interface'
+
+export const JSON_RPC_PROVIDER = 'https://gno.getblock.io/mainnet/?api_key=d7b92d96-9784-49a8-a800-b3edd1647fc7'
+
+async function eth_getBalance(address: string): Promise<string> {
+  if (!address.startsWith('0x')) {
+    address = `0x${address}`
+  }
+  const response = await axios(JSON_RPC_PROVIDER, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    data: {
+      jsonrpc: '2.0',
+      method: 'eth_getBalance',
+      params: [address, 'latest'],
+      id: 1,
+    },
+  })
+
+  return response.data.result
+}
+
+async function eth_getBlockByNumber(provider = JSON_RPC_PROVIDER): Promise<string> {
+  const response = await axios(provider, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    data: {
+      jsonrpc: '2.0',
+      method: 'eth_getBlockByNumber',
+      params: ['latest', false],
+      id: 1,
+    },
+  })
+
+  return response.data.result
+}
+
+const partialERC20tokenABI = [
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_owner',
+        type: 'address',
+      },
+    ],
+    name: 'balanceOf',
+    outputs: [
+      {
+        name: 'balance',
+        type: 'uint256',
+      },
+    ],
+    payable: false,
+    type: 'function',
+  },
+]
+
+const provider = new providers.JsonRpcProvider(JSON_RPC_PROVIDER)
+
+async function eth_getBalanceERC20(
+  address: string,
+  tokenAddress = '0xdbf3ea6f5bee45c02255b2c26a16f300502f68da',
+): Promise<string> {
+  if (!address.startsWith('0x')) {
+    address = `0x${address}`
+  }
+  const contract = new Contract(tokenAddress, partialERC20tokenABI, provider)
+  const balance = await contract.balanceOf(address)
+
+  return balance.toString()
+}
+
+interface TransferResponse {
+  transaction: providers.TransactionResponse
+  receipt: providers.TransactionReceipt
+}
+
+export async function sendNativeTransaction(
+  privateKey: string,
+  to: string,
+  value: string,
+  jsonRpcProvider: string,
+): Promise<TransferResponse> {
+  const signer = await makeReadySigner(privateKey, jsonRpcProvider)
+  const gasPrice = await signer.getGasPrice()
+  const transaction = await signer.sendTransaction({ to, value, gasPrice })
+  const receipt = await transaction.wait(1)
+
+  return { transaction, receipt }
+}
+
+export async function sendBzzTransaction(
+  privateKey: string,
+  to: string,
+  value: string,
+  jsonRpcProvider: string,
+): Promise<TransferResponse> {
+  const signer = await makeReadySigner(privateKey, jsonRpcProvider)
+  const gasPrice = await signer.getGasPrice()
+  const bzz = new Contract('0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da', bzzContractInterface, signer)
+  const transaction = await bzz.transfer(to, value, { gasPrice })
+  const receipt = await transaction.wait(1)
+
+  return { transaction, receipt }
+}
+
+async function makeReadySigner(privateKey: string, jsonRpcProvider: string) {
+  const provider = new providers.JsonRpcProvider(jsonRpcProvider, 100)
+  await provider.ready
+  const signer = new Wallet(privateKey, provider)
+
+  return signer
+}
+
+export const Rpc = {
+  sendNativeTransaction,
+  sendBzzTransaction,
+  _eth_getBalance: eth_getBalance,
+  _eth_getBalanceERC20: eth_getBalanceERC20,
+  eth_getBalance: debounce(eth_getBalance, 1_000),
+  eth_getBalanceERC20: debounce(eth_getBalanceERC20, 1_000),
+  eth_getBlockByNumber,
+}

src/utils/threshold.ts

@@ -1,6 +1,6 @@
-const OPTIMAL_CONNECTED_PEERS = 200
-const OPTIMAL_POPULATION = 100000
-const OPTIMAL_DEPTH = 12
+const OPTIMAL_CONNECTED_PEERS = 100
+const OPTIMAL_POPULATION = 1000
+const OPTIMAL_DEPTH = 4
 
 interface Threshold {
   minimumValue: number

src/utils/wallet.ts

@@ -0,0 +1,72 @@
+import Wallet from 'ethereumjs-wallet'
+import { sleepMs } from '.'
+import { BzzToken } from '../models/BzzToken'
+import { DaiToken } from '../models/DaiToken'
+import { getWalletFromPrivateKeyString } from './identity'
+import { Rpc } from './rpc'
+
+export class WalletAddress {
+  private constructor(public address: string, public bzz: BzzToken, public dai: DaiToken) {}
+
+  static async make(address: string): Promise<WalletAddress> {
+    const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address))
+    const dai = new DaiToken(await Rpc._eth_getBalance(address))
+
+    return new WalletAddress(address, bzz, dai)
+  }
+
+  public async refresh(): Promise<WalletAddress> {
+    this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address))
+    this.dai = new DaiToken(await Rpc._eth_getBalance(this.address))
+
+    return this
+  }
+}
+
+export class ResolvedWallet {
+  public address: string
+  public privateKey: string
+
+  private constructor(public wallet: Wallet, public bzz: BzzToken, public dai: DaiToken) {
+    this.address = wallet.getAddressString()
+    this.privateKey = wallet.getPrivateKeyString()
+  }
+
+  static async make(privateKeyOrWallet: string | Wallet): Promise<ResolvedWallet> {
+    const wallet =
+      typeof privateKeyOrWallet === 'string' ? getWalletFromPrivateKeyString(privateKeyOrWallet) : privateKeyOrWallet
+    const address = wallet.getAddressString()
+    const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address))
+    const dai = new DaiToken(await Rpc._eth_getBalance(address))
+
+    return new ResolvedWallet(wallet, bzz, dai)
+  }
+
+  public async refresh(): Promise<ResolvedWallet> {
+    this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address))
+    this.dai = new DaiToken(await Rpc._eth_getBalance(this.address))
+
+    return this
+  }
+
+  public async transfer(
+    destination: string,
+    jsonRpcProvider = 'https://gno.getblock.io/mainnet/?api_key=d7b92d96-9784-49a8-a800-b3edd1647fc7',
+  ): Promise<void> {
+    const DUMMY_GAS_PRICE = '300000000000000'
+
+    if (this.bzz.toDecimal.gt(0.1)) {
+      await Rpc.sendBzzTransaction(this.privateKey, destination, this.bzz.toString, jsonRpcProvider)
+      await sleepMs(5_000)
+    }
+
+    if (this.dai.toBigNumber.gt(DUMMY_GAS_PRICE)) {
+      await Rpc.sendNativeTransaction(
+        this.privateKey,
+        destination,
+        this.dai.toBigNumber.minus(DUMMY_GAS_PRICE).toString(),
+        jsonRpcProvider,
+      )
+    }
+  }
+}