chore(master): release 0.15.0 (#367 )

ci: update release-please github action (#366 )
fix: nested directory upload preserves the directory structure (#365 )
2022-05-16 11:52:58 +02:00 · 2022-05-16 11:45:35 +02:00 · 2022-05-16 10:39:00 +02:00 · 2022-05-03 18:14:13 +02:00 · 2022-05-03 18:07:37 +02:00 · 2022-04-29 13:42:29 +02:00
72 changed files with 3466 additions and 1082 deletions
@@ -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
@@ -0,0 +1,2 @@
+# Always validate the PR title, and ignore the commits
+titleOnly: true
@@ -52,6 +52,9 @@ jobs:
        env:
          CI: true

+      - name: Dependency check
+        run: npm run depcheck
+
      - name: Types check
        run: npm run check:types

@@ -62,10 +65,27 @@ 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

      - name: Build Component
        run: npm run build:component
+
+      - name: Create preview
+        uses: ethersphere/swarm-actions/pr-preview@v0
+        with:
+          bee-url: https://unlimited.gateway.ethswarm.org
+          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
+        with:
+          index-document: index.html
+          error-document: index.html
+          dir: ./build
+          bee-url: https://api.gateway.testnet.ethswarm.org
@@ -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
@@ -1,5 +1,56 @@
 # Changelog

+## [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)
+
+
+### Features
+
+* add hash based routing ([#287](https://www.github.com/ethersphere/bee-dashboard/issues/287)) ([9ee1c91](https://www.github.com/ethersphere/bee-dashboard/commit/9ee1c9107bb08d1838044f39e4d0dd5817c8f283))
+* add metadata and preview ([#292](https://www.github.com/ethersphere/bee-dashboard/issues/292)) ([f401314](https://www.github.com/ethersphere/bee-dashboard/commit/f4013142afdb407e699eff9587921e23c971f1db))
+
+
+### Bug Fixes
+
+* clean up spinner and disabled state on download page ([#294](https://www.github.com/ethersphere/bee-dashboard/issues/294)) ([a406e0f](https://www.github.com/ethersphere/bee-dashboard/commit/a406e0fc014991fcbaca230f27f41cd071d8a863))
+* correct folder name when uploading multiple files or mix of files & directories ([#291](https://www.github.com/ethersphere/bee-dashboard/issues/291)) ([d878747](https://www.github.com/ethersphere/bee-dashboard/commit/d8787476acf068be6609a77b1fadb2f61d0fd502))
+* disable feeds page when disconnected ([#293](https://www.github.com/ethersphere/bee-dashboard/issues/293)) ([1310deb](https://www.github.com/ethersphere/bee-dashboard/commit/1310deb17aec91f368f99974aaa245abb0a3e201))
+* do not print size and name when meta is unknown ([#297](https://www.github.com/ethersphere/bee-dashboard/issues/297)) ([7880c80](https://www.github.com/ethersphere/bee-dashboard/commit/7880c802aea6b0830ca52b47b88540b8df5888cc))
+* get current price from chain state ([#286](https://www.github.com/ethersphere/bee-dashboard/issues/286)) ([bc82e67](https://www.github.com/ethersphere/bee-dashboard/commit/bc82e6756154b33d01796a6e66e51dcfa1495338))
+
 ## [0.12.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.2...v0.12.0) (2021-12-21)


@@ -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.5.1-d0a77598<!-- 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).
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-max-line-length': [0, 'always', Infinity], // disable commit body length restriction
+  },
+}
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.12.0",
+  "version": "0.15.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": "^3.3.4",
    "@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",
@@ -48,8 +49,8 @@
    "react-dom": ">= 17.0.2",
    "react-feather": "2.0.9",
    "react-identicons": "1.2.5",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "6.2.1",
+    "react-router-dom": "6.2.1",
    "react-syntax-highlighter": "15.4.4",
    "semver": "7.3.5",
    "serve-handler": "6.1.3"
@@ -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",
@@ -6,13 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
-    
-    <meta
-      name="description"
-      content="Bee Dashboard"
-    />
+    <meta name="description" content="Bee Dashboard" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
@@ -1,34 +1,63 @@
@font-face {
-  font-family: "IBMPlexMono500";
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-Light.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-Regular.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-Medium.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-SemiBold.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'IBMPlexMono500';
  src: url(assets/fonts/IBMPlexMono500.ttf) format('truetype');
  font-weight: 500;
 }
@font-face {
-  font-family: "IBMPlexMono600";
+  font-family: 'IBMPlexMono600';
  src: url(assets/fonts/IBMPlexMono600.ttf) format('truetype');
  font-weight: 600;
 }
@font-face {
-  font-family: "IBMPlexMonoregular";
+  font-family: 'IBMPlexMonoregular';
  src: url(assets/fonts/IBMPlexMonoregular.ttf) format('truetype');
  font-weight: 300;
 }
@font-face {
-  font-family: "WorkSans-Italic-VariableFont_wght";
+  font-family: 'WorkSans-Italic-VariableFont_wght';
  src: url(assets/fonts/WorkSans-Italic-VariableFont_wght.ttf) format('truetype');
  font-weight: 700;
 }
@font-face {
-  font-family: "WorkSans-VariableFont_wght";
+  font-family: 'WorkSans-VariableFont_wght';
  src: url(assets/fonts/WorkSans-VariableFont_wght.ttf) format('truetype');
  font-weight: 400;
 }

 .App {
-  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-family: 'Work Sans', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
 }

-a, button {  
-  font-family: "IBMPlexMono500" !important;
+a,
+button {
+  font-family: 'IBMPlexMono500' !important;
  color: #dd7700;
-}
+}
@@ -2,7 +2,7 @@ import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
 import React, { ReactElement } from 'react'
-import { BrowserRouter as Router } from 'react-router-dom'
+import { HashRouter as Router } from 'react-router-dom'
 import './App.css'
 import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
@@ -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>
@@ -3,7 +3,7 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
 import { ReactElement, useState } from 'react'
 import CopyToClipboard from 'react-copy-to-clipboard'
-import { useHistory } from 'react-router'
+import { useNavigate } from 'react-router'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -61,7 +61,7 @@ export default function ExpandableListItemLink({
 }: Props): ReactElement | null {
  const classes = useStyles()
  const [copied, setCopied] = useState(false)
-  const history = useHistory()
+  const navigate = useNavigate()

  const tooltipClickHandler = () => setCopied(true)
  const tooltipCloseHandler = () => setCopied(false)
@@ -72,7 +72,7 @@ export default function ExpandableListItemLink({
    if (navigationType === 'NEW_WINDOW') {
      window.open(link || value)
    } else {
-      history.push(link || value)
+      navigate(link || value)
    }
  }

@@ -1,7 +1,7 @@
 import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
 import { ArrowBack } from '@material-ui/icons'
 import { ReactElement } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'

 interface Props {
  children: string
@@ -20,10 +20,10 @@ const useStyles = makeStyles(() =>

 export function HistoryHeader({ children }: Props): ReactElement {
  const classes = useStyles()
-  const history = useHistory()
+  const navigate = useNavigate()

  function goBack() {
-    history.goBack()
+    navigate(-1)
  }

  return (
@@ -50,7 +50,7 @@ interface Props {
 export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
  const classes = useStyles()
  const location = useLocation()
-  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+  const isSelected = Boolean(path && matchPath(location.pathname, path))

  return (
    <StyledListItem button selected={isSelected} disableRipple>
@@ -56,7 +56,7 @@ export default function SideBarItem({ path }: Props): ReactElement {
  const { status, isLoading } = useContext(Context)
  const classes = useStyles()
  const location = useLocation()
-  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+  const isSelected = Boolean(path && matchPath(location.pathname, path))

  return (
    <ListItem
@@ -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>
@@ -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%',
@@ -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}
    >
@@ -25,6 +25,11 @@ const useStyles = makeStyles((theme: Theme) =>
      '& fieldset': {
        border: 0,
      },
+      '& .MuiSelect-select': {
+        '&:focus': {
+          background: theme.palette.background.paper,
+        },
+      },
    },
    option: {
      height: '52px',
@@ -48,6 +53,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
          defaultValue={defaultValue || ''}
          className={classes.select}
          placeholder={label}
+          MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
        >
          {options.map((x, i) => (
            <MenuItem key={i} value={x.value} className={classes.option}>
@@ -71,6 +77,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
        defaultValue={defaultValue || ''}
        onChange={onChange}
        placeholder={label}
+        MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
      >
        {options.map((x, i) => (
          <MenuItem key={i} value={x.value} className={classes.option}>
@@ -9,6 +9,7 @@ interface Props {
  password?: boolean
  formik?: boolean
  optional?: boolean
+  defaultValue?: string
  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }

@@ -16,15 +17,31 @@ const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    field: {
      background: theme.palette.background.paper,
-      height: '52px',
      '& fieldset': {
        border: 0,
      },
+      '& .Mui-focused': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiInputBase-root': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiFilledInput-root': {
+        borderRadius: 0,
+      },
    },
  }),
 )

-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) {
@@ -36,9 +53,10 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
        name={name}
        label={label}
        fullWidth
-        variant="outlined"
+        variant="filled"
        className={classes.field}
-        defaultValue=""
+        defaultValue={defaultValue || ''}
+        InputProps={{ disableUnderline: true }}
      />
    )
  }
@@ -49,10 +67,11 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
      required
      label={label}
      fullWidth
-      variant="outlined"
+      variant="filled"
      className={classes.field}
-      defaultValue=""
+      defaultValue={defaultValue || ''}
      onChange={onChange}
+      InputProps={{ disableUnderline: true }}
    />
  )
 }
@@ -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
  }
 }

@@ -0,0 +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'
@@ -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)
+  })
+})
@@ -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)
@@ -57,4 +57,25 @@ export class Token {
  toFixedDecimal(digits = 7): string {
    return this.toDecimal.toFixed(digits)
  }
+
+  toSignificantDigits(digits = 4): string {
+    const asString = this.toDecimal.toFixed(16)
+
+    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)
+  }
 }
@@ -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>
@@ -3,7 +3,7 @@ import { Form, Formik } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { Check, X } from 'react-feather'
-import { useHistory } from 'react-router'
+import { useNavigate } from 'react-router'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -34,7 +34,7 @@ export default function CreateNewFeed(): ReactElement {
  const [loading, setLoading] = useState(false)
  const { enqueueSnackbar } = useSnackbar()

-  const history = useHistory()
+  const navigate = useNavigate()

  async function onSubmit(values: FormValues) {
    setLoading(true)
@@ -65,12 +65,12 @@ export default function CreateNewFeed(): ReactElement {
    const identity = await convertWalletToIdentity(wallet, values.type, values.identityName, values.password)
    persistIdentity(identities, identity)
    setIdentities(identities)
-    history.push(ROUTES.FEEDS)
+    navigate(ROUTES.FEEDS)
    setLoading(false)
  }

  function cancel() {
-    history.goBack()
+    navigate(-1)
  }

  return (
@@ -2,7 +2,7 @@ import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { X } from 'react-feather'
-import { RouteComponentProps, useHistory } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -15,20 +15,16 @@ import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { UploadArea } from '../files/UploadArea'

-interface MatchParams {
-  uuid: string
-}
-
-export function FeedSubpage(props: RouteComponentProps<MatchParams>): ReactElement {
+export function FeedSubpage(): ReactElement {
  const { identities } = useContext(IdentityContext)
+  const { uuid } = useParams()
  const { beeApi } = useContext(SettingsContext)
  const { status } = useContext(BeeContext)

-  const history = useHistory()
+  const navigate = useNavigate()

  const [available, setAvailable] = useState(false)

-  const uuid = props.match.params.uuid
  const identity = identities.find(x => x.uuid === uuid)

  useEffect(() => {
@@ -44,13 +40,13 @@ export function FeedSubpage(props: RouteComponentProps<MatchParams>): ReactEleme
  }, [beeApi, uuid, identity])

  if (!identity || !status.all) {
-    history.replace(ROUTES.FEEDS)
+    navigate(ROUTES.FEEDS, { replace: true })

    return <></>
  }

  function onClose() {
-    history.push(ROUTES.FEEDS)
+    navigate(ROUTES.FEEDS)
  }

  return (
@@ -2,7 +2,7 @@ import { Box, Grid, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { Bookmark, X } from 'react-feather'
-import { RouteComponentProps, useHistory } from 'react-router'
+import { useParams, useNavigate } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -16,15 +16,12 @@ import { ROUTES } from '../../routes'
 import { persistIdentity, updateFeed } from '../../utils/identity'
 import { FeedPasswordDialog } from './FeedPasswordDialog'

-interface MatchParams {
-  hash: string
-}
-
-export default function UpdateFeed(props: RouteComponentProps<MatchParams>): ReactElement {
+export default function UpdateFeed(): ReactElement {
  const { identities, setIdentities } = useContext(IdentityContext)
  const { beeApi, beeDebugApi } = useContext(SettingsContext)
  const { stamps, refresh } = useContext(StampContext)
  const { status } = useContext(BeeContext)
+  const { hash } = useParams()

  const [selectedStamp, setSelectedStamp] = useState<string | null>(null)
  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
@@ -32,7 +29,7 @@ export default function UpdateFeed(props: RouteComponentProps<MatchParams>): Rea
  const { enqueueSnackbar } = useSnackbar()
  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)

-  const history = useHistory()
+  const navigate = useNavigate()

  useEffect(() => {
    refresh()
@@ -50,7 +47,7 @@ export default function UpdateFeed(props: RouteComponentProps<MatchParams>): Rea
  }

  function onCancel() {
-    history.goBack()
+    navigate(-1)
  }

  function onBeginUpdatingFeed() {
@@ -76,10 +73,10 @@ export default function UpdateFeed(props: RouteComponentProps<MatchParams>): Rea
    }

    try {
-      await updateFeed(beeApi, identity, props.match.params.hash, selectedStamp, password as string)
+      await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
      persistIdentity(identities, identity)
      setIdentities([...identities])
-      history.push(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
+      navigate(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
    } catch (error: unknown) {
      setLoading(false)

@@ -1,13 +1,14 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
 import { Download, Info, PlusSquare, Trash } from 'react-feather'
-import { useHistory } from 'react-router'
+import { useNavigate } from 'react-router'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { SwarmButton } from '../../components/SwarmButton'
-import { Context as BeeContext } from '../../providers/Bee'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as IdentityContext, Identity } from '../../providers/Feeds'
 import { ROUTES } from '../../routes'
 import { formatEnum } from '../../utils'
@@ -20,7 +21,7 @@ export default function Feeds(): ReactElement {
  const { identities, setIdentities } = useContext(IdentityContext)
  const { status } = useContext(BeeContext)

-  const history = useHistory()
+  const navigate = useNavigate()

  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
  const [showImport, setShowImport] = useState(false)
@@ -28,11 +29,11 @@ export default function Feeds(): ReactElement {
  const [showDelete, setShowDelete] = useState(false)

  function createNewFeed() {
-    return history.push(ROUTES.FEEDS_NEW)
+    return navigate(ROUTES.FEEDS_NEW)
  }

  function viewFeed(uuid: string) {
-    history.push(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
+    navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
  }

  function onDialogClose() {
@@ -59,6 +60,8 @@ export default function Feeds(): ReactElement {
    setShowDelete(true)
  }

+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
  return (
    <div>
      {showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
@@ -95,11 +98,9 @@ export default function Feeds(): ReactElement {
          {x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
          <Box mt={0.75}>
            <ExpandableListItemActions>
-              {status.all && (
-                <SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
-                  View Feed Page
-                </SwarmButton>
-              )}
+              <SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
+                View Feed Page
+              </SwarmButton>
              <SwarmButton onClick={() => onShowExport(x)} iconType={Download}>
                Export...
              </SwarmButton>
@@ -1,99 +1,58 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { Web } from '@material-ui/icons'
-import { ReactElement, useEffect, useState } from 'react'
+import { ReactElement } from 'react'
 import { File, Folder } from 'react-feather'
 import { FitImage } from '../../components/FitImage'
-import { detectIndexHtml, getAssetNameFromFiles, getHumanReadableFileSize } from '../../utils/file'
-import { SwarmFile } from '../../utils/SwarmFile'
+import { shortenText } from '../../utils'
+import { getHumanReadableFileSize } from '../../utils/file'
+import { shortenHash } from '../../utils/hash'
 import { AssetIcon } from './AssetIcon'

 interface Props {
-  assetName?: string
-  files: SwarmFile[]
+  previewUri?: string
+  metadata?: Metadata
 }

 // TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)

-export function AssetPreview({ assetName, files }: Props): ReactElement {
-  const [previewComponent, setPreviewComponent] = useState<ReactElement | undefined>(undefined)
-  const [previewUri, setPreviewUri] = useState<string | undefined>(undefined)
+export function AssetPreview({ metadata, previewUri }: Props): ReactElement | null {
+  let previewComponent = <File />
+  let type = metadata?.type

-  useEffect(() => {
-    if (files.length === 1) {
-      // single image
-      if (files[0].type.startsWith('image/')) {
-        files[0].arrayBuffer().then(value => {
-          const blob = new Blob([value])
-          setPreviewUri(URL.createObjectURL(blob))
-        })
-        // single non-image
-      } else {
-        setPreviewUri(undefined)
-        setPreviewComponent(<AssetIcon icon={<File />} />)
-      }
-      // collection
-    } else if (detectIndexHtml(files)) {
-      setPreviewUri(undefined)
-      setPreviewComponent(<AssetIcon icon={<Web />} />)
-    } else {
-      setPreviewUri(undefined)
-      setPreviewComponent(<AssetIcon icon={<Folder />} />)
-    }
-  }, [files])
-
-  const getPrimaryText = () => {
-    const name = getAssetNameFromFiles(files)
-
-    if (files.length === 1) {
-      return 'Filename: ' + (assetName || name)
-    }
-
-    return 'Folder name: ' + (assetName || name)
+  if (metadata?.isWebsite) {
+    previewComponent = <Web />
+    type = 'Website'
+  } else if (metadata?.type === 'folder') {
+    previewComponent = <Folder />
+    type = 'Folder'
  }

-  const getKind = () => {
-    if (files.length === 1) {
-      return files[0].type
-    }
-
-    if (detectIndexHtml(files)) {
-      return 'Website'
-    }
-
-    return 'Folder'
-  }
-
-  const isFolder = () => ['Folder', 'Website'].includes(getKind())
-
-  const getSize = () => {
-    const bytes = files.reduce((total, item) => total + item.size, 0)
-
-    return getHumanReadableFileSize(bytes)
-  }
-
-  const size = getSize()
-
  return (
    <Box mb={4}>
      <Box bgcolor="background.paper">
        <Grid container direction="row">
-          {previewComponent ? (
-            previewComponent
-          ) : (
+          {previewUri ? (
            <FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
+          ) : (
+            <AssetIcon icon={previewComponent} />
          )}
          <Box p={2}>
-            <Typography>{getPrimaryText()}</Typography>
-            <Typography>Kind: {getKind()}</Typography>
-            {size !== '0 bytes' && <Typography>Size: {size}</Typography>}
+            {metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}
+            {metadata?.name && metadata?.name !== metadata?.hash && (
+              <Typography>
+                {metadata?.type === 'folder' ? 'Folder Name' : 'Filename'}: {shortenText(metadata?.name)}
+              </Typography>
+            )}
+            <Typography>Kind: {type}</Typography>
+            {metadata?.size ? <Typography>Size: {getHumanReadableFileSize(metadata.size)}</Typography> : null}
          </Box>
        </Grid>
      </Box>
-      {isFolder() && (
+      {metadata?.type === 'folder' && metadata.count && (
        <Box mt={0.25} p={2} bgcolor="background.paper">
          <Grid container justifyContent="space-between" alignItems="center" direction="row">
            <Typography variant="subtitle2">Folder content</Typography>
-            <Typography variant="subtitle2">{files.length} items</Typography>
+            <Typography variant="subtitle2">{metadata.count} items</Typography>
          </Grid>
        </Box>
      )}
@@ -4,21 +4,19 @@ import { ReactElement } from 'react'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import ExpandableListItemLink from '../../components/ExpandableListItemLink'
-import { detectIndexHtml } from '../../utils/file'
-import { SwarmFile } from '../../utils/SwarmFile'

 interface Props {
-  files: SwarmFile[]
+  isWebsite?: boolean
  hash: string
 }

-export function AssetSummary({ files, hash }: Props): ReactElement {
+export function AssetSummary({ isWebsite, hash }: Props): ReactElement {
  return (
    <>
      <Box mb={4}>
        <ExpandableListItemKey label="Swarm hash" value={hash} />
        <ExpandableListItemLink label="Share on Swarm Gateway" value={`https://gateway.ethswarm.org/access/${hash}`} />
-        {detectIndexHtml(files) && (
+        {isWebsite && (
          <ExpandableListItemLink
            label="BZZ Link"
            value={`https://${swarmCid.encodeManifestReference(hash).toString()}.bzz.link`}
@@ -2,13 +2,13 @@ import { Utils } from '@ethersphere/bee-js'
 import { ManifestJs } from '@ethersphere/manifest-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 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 { recognizeSwarmHash } from '../../utils'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { FileNavigation } from './FileNavigation'

@@ -20,7 +20,7 @@ export function Download(): ReactElement {
  const { setUploadOrigin } = useContext(Context)

  const { enqueueSnackbar } = useSnackbar()
-  const history = useHistory()
+  const navigate = useNavigate()

  const validateChange = (value: string) => {
    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) {
@@ -54,7 +54,7 @@ export function Download(): ReactElement {
      const indexDocument = await manifestJs.getIndexDocumentPath(identifier)
      putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, identifier, determineHistoryName(identifier, indexDocument))
      setUploadOrigin(defaultUploadOrigin)
-      history.push(ROUTES.HASH.replace(':hash', identifier))
+      navigate(ROUTES.HASH.replace(':hash', identifier))
    } catch (error: unknown) {
      let message = typeof error === 'object' && error !== null && Reflect.get(error, 'message')

@@ -71,20 +71,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" />
@@ -32,12 +32,12 @@ export function DownloadActionBar({
        <SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
          Download
        </SwarmButton>
-        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} loading={loading} cancel>
+        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
          Close
        </SwarmButton>
      </ExpandableListItemActions>
      <Box mb={1} mr={1}>
-        <SwarmButton onClick={onUpdateFeed} iconType={Bookmark}>
+        <SwarmButton onClick={onUpdateFeed} iconType={Bookmark} disabled={loading}>
          Update Feed
        </SwarmButton>
      </Box>
@@ -1,6 +1,6 @@
 import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { ROUTES } from '../../routes'

 interface Props {
@@ -24,10 +24,10 @@ const useStyles = makeStyles((theme: Theme) =>

 export function FileNavigation({ active }: Props): ReactElement {
  const classes = useStyles()
-  const history = useHistory()
+  const navigate = useNavigate()

  function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
-    history.push(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD)
+    navigate(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD)
  }

  return (
@@ -4,40 +4,37 @@ import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { RouteComponentProps, useHistory } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import config from '../../config'
+import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
-import { convertBeeFileToBrowserFile, convertManifestToFiles } from '../../utils/file'
-import { shortenHash } from '../../utils/hash'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
-import { SwarmFile } from '../../utils/SwarmFile'
 import { AssetPreview } from './AssetPreview'
 import { AssetSummary } from './AssetSummary'
 import { DownloadActionBar } from './DownloadActionBar'

-interface MatchParams {
-  hash: string
-}
-
-export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
+export function Share(): ReactElement {
  const { apiUrl, beeApi } = useContext(SettingsContext)
  const { status } = useContext(BeeContext)

-  const reference = props.match.params.hash
+  const { hash } = useParams()
+  const reference = hash! // eslint-disable-line

-  const history = useHistory()
+  const navigate = useNavigate()
  const { enqueueSnackbar } = useSnackbar()

  const [loading, setLoading] = useState(true)
  const [downloading, setDownloading] = useState(false)
-  const [files, setFiles] = useState<SwarmFile[]>([])
  const [swarmEntries, setSwarmEntries] = useState<Record<string, string>>({})
  const [indexDocument, setIndexDocument] = useState<string | null>(null)
  const [notFound, setNotFound] = useState(false)
+  const [preview, setPreview] = useState<string | undefined>(undefined)
+  const [metadata, setMetadata] = useState<Metadata | undefined>()

  async function prepare() {
    if (!beeApi || !status.all) {
@@ -54,16 +51,37 @@ export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
      return
    }
    const entries = await manifestJs.getHashes(reference)
-    setSwarmEntries(entries)
    const indexDocument = await manifestJs.getIndexDocumentPath(reference)
    setIndexDocument(indexDocument)

-    if (Object.keys(entries).length === 1) {
-      const response = await beeApi.downloadFile(reference)
-      setFiles([new SwarmFile(convertBeeFileToBrowserFile(response) as File)])
-    } else {
-      setFiles(convertManifestToFiles(entries))
+    const previewFile = entries[PREVIEW_FILE_NAME]
+
+    delete entries[META_FILE_NAME]
+    delete entries[PREVIEW_FILE_NAME]
+    setSwarmEntries(entries)
+
+    const count = Object.keys(entries).length
+
+    let metadata: Metadata | undefined = {
+      hash,
+      size: 0,
+      type: count > 1 ? 'folder' : 'unknown',
+      name: reference,
+      isWebsite: Boolean(indexDocument) && count > 1,
+      count,
    }
+
+    try {
+      const mtdt = await beeApi.downloadFile(reference, META_FILE_NAME)
+      const remoteMetadata = mtdt.data.text()
+      metadata = { ...metadata, ...(JSON.parse(remoteMetadata) as Metadata) }
+    } catch (e) {} // eslint-disable-line no-empty
+
+    if (previewFile) {
+      setPreview(`${config.BEE_API_HOST}/bzz/${reference}/${PREVIEW_FILE_NAME}`)
+    }
+
+    setMetadata(metadata)
  }

  function onOpen() {
@@ -71,16 +89,17 @@ export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
  }

  function onClose() {
-    // POP means there is no history - nowhere to go back yet
-    if (history.action === 'POP') {
-      history.push(ROUTES.UPLOAD)
+    if (navigate.length > 0) {
+      // There is at least one different route in browser history that we can return to
+      navigate(-1)
    } else {
-      history.goBack()
+      // This is the first page user opened, navigate to upload page instead of going back
+      navigate(ROUTES.UPLOAD)
    }
  }

  function onUpdateFeed() {
-    history.push(ROUTES.FEEDS_UPDATE.replace(':hash', reference))
+    navigate(ROUTES.FEEDS_UPDATE.replace(':hash', reference))
  }

  useEffect(() => {
@@ -111,8 +130,6 @@ export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
    setDownloading(false)
  }

-  const assetName = shortenHash(reference)
-
  if (!status.all) return <TroubleshootConnectionCard />

  if (loading) {
@@ -131,17 +148,17 @@ export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
  return (
    <>
      <Box mb={4}>
-        <AssetPreview files={files} assetName={assetName} />
+        <AssetPreview metadata={metadata} previewUri={preview} />
      </Box>
      <Box mb={4}>
-        <AssetSummary files={files} hash={reference} />
+        <AssetSummary isWebsite={metadata?.isWebsite} hash={reference} />
      </Box>
      <DownloadActionBar
        onOpen={onOpen}
        onCancel={onClose}
        onDownload={onDownload}
        onUpdateFeed={onUpdateFeed}
-        hasIndexDocument={Boolean(indexDocument && files.length > 1)}
+        hasIndexDocument={Boolean(metadata?.isWebsite)}
        loading={downloading}
      />
    </>
@@ -1,18 +1,18 @@
 import { Box } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 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 { 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'
 import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
-import { detectIndexHtml, getAssetNameFromFiles } from '../../utils/file'
+import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils/file'
 import { persistIdentity, updateFeed } from '../../utils/identity'
 import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { FeedPasswordDialog } from '../feeds/FeedPasswordDialog'
@@ -21,6 +21,7 @@ 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)
@@ -31,22 +32,22 @@ export function Upload(): ReactElement {

  const { refresh } = useContext(StampsContext)
  const { beeApi } = useContext(SettingsContext)
-  const { files, setFiles, uploadOrigin } = useContext(FileContext)
+  const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
  const { identities, setIdentities } = useContext(IdentityContext)
  const { status } = useContext(BeeContext)

  const { enqueueSnackbar } = useSnackbar()
-  const history = useHistory()
+  const navigate = useNavigate()

  useEffect(() => {
    refresh()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />

  if (!files.length) {
    setFiles([])
-    history.replace(ROUTES.UPLOAD)
+    navigate(ROUTES.UPLOAD, { replace: true })

    return <></>
  }
@@ -66,26 +67,73 @@ export function Upload(): ReactElement {
  }

  const uploadFiles = (password?: string) => {
-    if (!beeApi || !files.length || !stamp) {
+    if (!beeApi || !files.length || !stamp || !metadata) {
      return
    }

-    const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(files) || undefined
+    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
+    else if (files.length > 1) {
+      const idx = detectIndexHtml(files)
+
+      // This is a website
+      if (idx) {
+        // The website is in some directory, remove it
+        if (idx.commonPrefix) {
+          const substrStart = idx.commonPrefix.length
+          indexDocument = idx.indexPath.substr(substrStart)
+          fls = files.map(f => {
+            const path = (f.path as string).substr(substrStart)
+
+            return packageFile(f, path)
+          })
+        } else {
+          // The website is not packed in a directory
+          indexDocument = idx.indexPath
+        }
+      }
+    }
+    const lastModified = files[0].lastModified
+
+    // We want to store only some metadata
+    const mtd: SwarmMetadata = {
+      name: metadata.name,
+      size: metadata.size,
+    }
+
+    // Type of the file only makes sense for a single file
+    if (files.length === 1) mtd.type = metadata.type
+
+    const metafile = new File([JSON.stringify(mtd)], META_FILE_NAME, {
+      type: 'application/json',
+      lastModified,
+    })
+    fls.push(packageFile(metafile))
+
+    if (previewBlob) {
+      const previewFile = new File([previewBlob], PREVIEW_FILE_NAME, {
+        type: 'image/jpeg',
+        lastModified,
+      })
+      fls.push(packageFile(previewFile))
+    }

    setUploading(true)

    beeApi
-      .uploadFiles(stamp.batchID, files as unknown as File[], { indexDocument })
+      .uploadFiles(stamp.batchID, fls, { indexDocument })
      .then(hash => {
        putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))

        if (uploadOrigin.origin === 'UPLOAD') {
-          history.replace(ROUTES.HASH.replace(':hash', hash.reference))
+          navigate(ROUTES.HASH.replace(':hash', hash.reference), { replace: true })
        } else {
          updateFeed(beeApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(() => {
            persistIdentity(identities, identity as Identity)
            setIdentities([...identities])
-            history.replace(ROUTES.FEEDS_PAGE.replace(':uuid', uploadOrigin.uuid as string))
+            navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
          })
        }
      })
@@ -121,7 +169,7 @@ export function Upload(): ReactElement {
      <Box mb={4}>
        <ProgressIndicator steps={['Preview', 'Add postage stamp', 'Upload to node']} index={step} />
      </Box>
-      {(step === 0 || step === 2) && <AssetPreview files={files} />}
+      {(step === 0 || step === 2) && <AssetPreview metadata={metadata} previewUri={previewUri} />}
      {step === 1 && (
        <>
          <Box mb={2}>
@@ -3,13 +3,12 @@ import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import { SwarmButton } from '../../components/SwarmButton'
 import { Context, UploadOrigin } from '../../providers/File'
 import { ROUTES } from '../../routes'
 import { detectIndexHtml } from '../../utils/file'
-import { SwarmFile } from '../../utils/SwarmFile'

 interface Props {
  uploadOrigin: UploadOrigin
@@ -51,7 +50,7 @@ const useStyles = makeStyles((theme: Theme) =>
 export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
  const { setFiles, setUploadOrigin } = useContext(Context)
  const classes = useStyles()
-  const history = useHistory()
+  const navigate = useNavigate()
  const { enqueueSnackbar } = useSnackbar()
  const [strictWebsiteMode, setStrictWebsiteMode] = useState(false)
  const [version, setVersion] = useState(0)
@@ -99,8 +98,8 @@ export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {

  const handleChange = (files?: File[]) => {
    if (files) {
-      const swarmFiles = files.map(x => new SwarmFile(x))
-      const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(swarmFiles) || undefined
+      const FilePaths = files as FilePath[]
+      const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(FilePaths) || undefined

      if (files.length && strictWebsiteMode && !indexDocument) {
        enqueueSnackbar('To upload a website, there must be an index.html or index.htm in the root of the folder.', {
@@ -111,11 +110,11 @@ export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
        return
      }

-      setFiles(swarmFiles)
+      setFiles(FilePaths)

      if (files.length) {
        setUploadOrigin(uploadOrigin)
-        history.push(ROUTES.UPLOAD_IN_PROGRESS)
+        navigate(ROUTES.UPLOAD_IN_PROGRESS)
      }
    }
  }
@@ -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={
@@ -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>
@@ -1,14 +1,14 @@
 import { ReactElement } from 'react'
-import { useHistory } from 'react-router'
+import { useNavigate } from 'react-router'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ROUTES } from '../../routes'
 import { PostageStampCreation } from './PostageStampCreation'

 export function CreatePostageStampPage(): ReactElement {
-  const history = useHistory()
+  const navigate = useNavigate()

  function onFinished() {
-    history.push(ROUTES.STAMPS)
+    navigate(ROUTES.STAMPS)
  }

  return (
@@ -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>
@@ -2,18 +2,19 @@ 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'
+import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context } from '../../providers/Stamps'
+import { Context as StampsContext } from '../../providers/Stamps'
 import {
  calculateStampPrice,
  convertAmountToSeconds,
  convertDepthToBytes,
-  formatBzz,
  secondsToTimeString,
+  waitUntilStampUsable,
 } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'

@@ -34,8 +35,10 @@ interface Props {
 }

 export function PostageStampCreation({ onFinished }: Props): ReactElement {
-  const { refresh } = useContext(Context)
+  const { chainState } = useContext(BeeContext)
+  const { refresh } = useContext(StampsContext)
  const { beeDebugApi } = useContext(SettingsContext)
+
  const { enqueueSnackbar } = useSnackbar()

  function getFileSize(depth: number): string {
@@ -47,20 +50,29 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
  }

  function getTtl(amount: number): string {
-    if (isNaN(amount) || amount <= 0) {
+    const isCurrentPriceAvailable = chainState && chainState.currentPrice
+
+    if (amount <= 0 || !isCurrentPriceAvailable) {
      return '-'
    }

-    return secondsToTimeString(convertAmountToSeconds(amount))
+    const pricePerBlock = Number.parseInt(chainState.currentPrice, 10)
+
+    return `${secondsToTimeString(
+      convertAmountToSeconds(amount, pricePerBlock),
+    )} (with price of ${pricePerBlock.toFixed(0)} per block)`
  }

-  function getPrice(depth: number, amount: number): string {
-    if (isNaN(amount) || amount <= 0 || isNaN(depth) || depth < 17 || depth > 255) {
+  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 `${formatBzz(price)} BZZ`
+    return `${price.toSignificantDigits()} BZZ`
  }

  return (
@@ -76,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()
@@ -107,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>
@@ -129,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>
@@ -139,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
@@ -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} />
            </>
          }
        >
@@ -2,10 +2,10 @@ import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { ReactElement, useContext, useEffect } from 'react'
 import { PlusSquare } from 'react-feather'
-import { useHistory } from 'react-router'
+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'
@@ -29,7 +29,7 @@ const useStyles = makeStyles(() =>
 export default function Stamp(): ReactElement {
  const classes = useStyles()

-  const history = useHistory()
+  const navigate = useNavigate()

  const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
  const { status } = useContext(BeeContext)
@@ -41,10 +41,10 @@ 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() {
-    history.push(ROUTES.STAMPS_NEW)
+    navigate(ROUTES.STAMPS_NEW)
  }

  return (
@@ -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} />
@@ -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={
@@ -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'
        ) : (
          <>
@@ -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={
@@ -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>
@@ -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.'
        ) : (
          <>
@@ -1,9 +1,11 @@
-import type {
+import {
+  BeeModes,
+  ChainState,
  ChequebookAddressResponse,
  Health,
  LastChequesResponse,
  NodeAddresses,
-  NodesInfo,
+  NodeInfo,
  Peer,
  Topology,
 } from '@ethersphere/bee-js'
@@ -13,20 +15,38 @@ import { engines } from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
 import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
+import { Rpc } from '../utils/rpc'
 import { Context as SettingsContext } from './Settings'

+interface RpcBalance {
+  bzz: Token
+  xdai: Token
+}
+
+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: RpcBalance
  latestPublishedVersion?: string
  latestUserVersion?: string
  latestUserVersionExact?: string
@@ -36,7 +56,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
@@ -44,6 +64,7 @@ interface ContextInterface {
  peerBalances: Balance[] | null
  peerCheques: LastChequesResponse | null
  settlements: Settlements | null
+  chainState: ChainState | null
  latestBeeRelease: LatestBeeRelease | null
  isLoading: boolean
  isRefreshing: boolean
@@ -53,17 +74,19 @@ 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: {
+    bzz: new Token('0', 16),
+    xdai: new Token('0', 18),
  },
  latestPublishedVersion: undefined,
  latestUserVersion: undefined,
@@ -82,6 +105,7 @@ const initialValues: ContextInterface = {
  peerBalances: null,
  peerCheques: null,
  settlements: null,
+  chainState: null,
  latestBeeRelease: null,
  isLoading: true,
  isRefreshing: false,
@@ -101,34 +125,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 {
@@ -136,7 +195,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)
@@ -144,6 +203,10 @@ export function Provider({ children }: Props): ReactElement {
  const [peerBalances, setPeerBalances] = useState<Balance[] | null>(null)
  const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
  const [settlements, setSettlements] = useState<Settlements | null>(null)
+  const [chainState, setChainState] = useState<ChainState | null>(null)
+  const [bzz, setBzz] = useState<Token>(initialValues.balance.bzz)
+  const [xdai, setXdai] = useState<Token>(initialValues.balance.xdai)
+
  const { latestBeeRelease } = useLatestBeeRelease()

  const [error, setError] = useState<Error | null>(initialValues.error)
@@ -177,10 +240,27 @@ export function Provider({ children }: Props): ReactElement {
    setPeerBalances(null)
    setPeerCheques(null)
    setSettlements(null)
+    setChainState(null)

    refresh()
  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps

+  useEffect(() => {
+    if (nodeAddresses?.ethereum) {
+      // debounced calls
+      const xdai = Rpc.eth_getBalance(nodeAddresses.ethereum)
+      const bzz = Rpc.eth_getBalanceERC20(nodeAddresses.ethereum)
+
+      if (xdai?.then) {
+        xdai.then(balance => setXdai(new Token(balance, 18)))
+      }
+
+      if (bzz?.then) {
+        bzz.then(balance => setBzz(new Token(balance, 16)))
+      }
+    }
+  }, [nodeAddresses])
+
  const refresh = async () => {
    // Don't want to refresh when already refreshing
    if (isRefreshing) return
@@ -277,6 +357,12 @@ export function Provider({ children }: Props): ReactElement {
          .then(setPeerCheques)
          .catch(() => setPeerCheques(null)),

+        // Chain state
+        beeDebugApi
+          .getChainState()
+          .then(setChainState)
+          .catch(() => setChainState(null)),
+
        // Chequebook balance
        chequeBalanceWrapper()
          .then(setChequebookBalance)
@@ -331,6 +417,10 @@ export function Provider({ children }: Props): ReactElement {
          chequebookBalance,
          error,
        ),
+        balance: {
+          xdai,
+          bzz,
+        },
        latestUserVersion,
        latestUserVersionExact,
        latestPublishedVersion,
@@ -354,6 +444,7 @@ export function Provider({ children }: Props): ReactElement {
        peerBalances,
        peerCheques,
        settlements,
+        chainState,
        latestBeeRelease,
        isLoading,
        isRefreshing,
@@ -1,17 +1,22 @@
 /* eslint-disable @typescript-eslint/no-empty-function */

-import { createContext, ReactChild, ReactElement, useState } from 'react'
-import { SwarmFile } from '../utils/SwarmFile'
+import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'
+import { getMetadata } from '../utils/file'
+import { resize } from '../utils/image'
+import { PREVIEW_DIMENSIONS } from '../constants'

 export type UploadOrigin = { origin: 'UPLOAD' | 'FEED'; uuid?: string }

 export const defaultUploadOrigin: UploadOrigin = { origin: 'UPLOAD' }

 interface ContextInterface {
-  files: SwarmFile[]
-  setFiles: (files: SwarmFile[]) => void
+  files: FilePath[]
+  setFiles: (files: FilePath[]) => void
  uploadOrigin: UploadOrigin
  setUploadOrigin: (uploadOrigin: UploadOrigin) => void
+  metadata?: Metadata
+  previewUri?: string
+  previewBlob?: Blob
 }

 const initialValues: ContextInterface = {
@@ -29,8 +34,38 @@ interface Props {
 }

 export function Provider({ children }: Props): ReactElement {
-  const [files, setFiles] = useState<SwarmFile[]>(initialValues.files)
+  const [files, setFiles] = useState<FilePath[]>(initialValues.files)
  const [uploadOrigin, setUploadOrigin] = useState<UploadOrigin>(initialValues.uploadOrigin)
+  const [metadata, setMetadata] = useState<Metadata | undefined>(undefined)
+  const [previewUri, setPreviewUri] = useState<string | undefined>(undefined)
+  const [previewBlob, setPreviewBlob] = useState<Blob | undefined>(undefined)

-  return <Context.Provider value={{ files, setFiles, uploadOrigin, setUploadOrigin }}>{children}</Context.Provider>
+  useEffect(() => {
+    setMetadata(getMetadata(files))
+
+    if (previewUri) {
+      URL.revokeObjectURL(previewUri) // Clear the preview from memory
+      setPreviewUri(undefined)
+      setPreviewBlob(undefined)
+    }
+
+    if (files.length !== 1 || !files[0].type.startsWith('image')) return
+
+    resize(files[0], PREVIEW_DIMENSIONS.maxWidth, PREVIEW_DIMENSIONS.maxHeight).then(blob => {
+      setPreviewUri(URL.createObjectURL(blob)) // NOTE: Until it is cleared with URL.revokeObjectURL, the file stays allocated in memory
+      setPreviewBlob(blob)
+    })
+
+    return () => {
+      if (previewUri) {
+        URL.revokeObjectURL(previewUri)
+      }
+    }
+  }, [files]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <Context.Provider value={{ files, setFiles, uploadOrigin, setUploadOrigin, metadata, previewUri, previewBlob }}>
+      {children}
+    </Context.Provider>
+  )
 }
@@ -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,36 +52,56 @@ 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 = config?.['api-addr'] || beeApiUrl || apiUrl
+  const debugUrl = 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 {
-      setBeeApi(new Bee(apiUrl))
-      sessionStorage.setItem('api_host', apiUrl)
+      setBeeApi(new Bee(url))
+      sessionStorage.setItem('api_host', url)
    } catch (e) {
      setBeeApi(null)
    }
-  }, [apiUrl])
-
-  useEffect(() => {
-    if (beeApiUrl) setApiUrl(beeApiUrl)
-  }, [beeApiUrl])
-
-  useEffect(() => {
-    if (beeDebugApiUrl) setDebugApiUrl(beeDebugApiUrl)
-  }, [beeDebugApiUrl])
+  }, [url])

  useEffect(() => {
    try {
-      setBeeDebugApi(new BeeDebug(apiDebugUrl))
-      sessionStorage.setItem('debug_api_host', apiDebugUrl)
+      setBeeDebugApi(new BeeDebug(debugUrl))
+      sessionStorage.setItem('debug_api_host', debugUrl)
    } catch (e) {
      setBeeDebugApi(null)
    }
-  }, [apiDebugUrl])
+  }, [debugUrl])

  return (
    <Context.Provider
-      value={{ apiUrl, apiDebugUrl, beeApi, beeDebugApi, setApiUrl, setDebugApiUrl, lockedApiSettings }}
+      value={{
+        apiUrl: url,
+        apiDebugUrl: debugUrl,
+        beeApi,
+        beeDebugApi,
+        setApiUrl,
+        setDebugApiUrl,
+        lockedApiSettings,
+        desktopApiKey,
+        config,
+        isLoading,
+        error,
+      }}
    >
      {children}
    </Context.Provider>
@@ -5,19 +5,17 @@ interface LatestBeeRelease {
  html_url: string
 }

-interface StatusHookCommon {
-  isOk: boolean
+interface SwarmMetadata {
+  size: number
+  name: string
+  type?: string
 }

-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 Metadata extends SwarmMetadata {
+  type: string
+  isWebsite: boolean
+  count?: number
+  hash?: string
 }
+
+type FilePath = File & { path?: string; fullPath?: string }
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react'
-import { Route, Switch } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
 import Accounting from './pages/accounting'
 import Feeds from './pages/feeds'
 import CreateNewFeed from './pages/feeds/CreateNewFeed'
@@ -34,22 +34,22 @@ export enum ROUTES {
 }

 const BaseRouter = (): ReactElement => (
-  <Switch>
-    <Route exact path={ROUTES.UPLOAD_IN_PROGRESS} component={Upload} />
-    <Route exact path={ROUTES.UPLOAD} component={UploadLander} />
-    <Route exact path={ROUTES.DOWNLOAD} component={Download} />
-    <Route exact path={ROUTES.HASH} component={Share} />
-    <Route exact path={ROUTES.ACCOUNTING} component={Accounting} />
-    <Route exact path={ROUTES.SETTINGS} component={Settings} />
-    <Route exact path={ROUTES.STAMPS} component={Stamps} />
-    <Route exact path={ROUTES.STAMPS_NEW} component={CreatePostageStampPage} />
-    <Route exact path={ROUTES.STATUS} component={Status} />
-    <Route exact path={ROUTES.FEEDS} component={Feeds} />
-    <Route exact path={ROUTES.FEEDS_NEW} component={CreateNewFeed} />
-    <Route exact path={ROUTES.FEEDS_UPDATE} component={UpdateFeed} />
-    <Route exact path={ROUTES.FEEDS_PAGE} component={FeedSubpage} />
-    <Route path={ROUTES.INFO} component={Info} />
-  </Switch>
+  <Routes>
+    <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
+    <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
+    <Route path={ROUTES.DOWNLOAD} element={<Download />} />
+    <Route path={ROUTES.HASH} element={<Share />} />
+    <Route path={ROUTES.ACCOUNTING} element={<Accounting />} />
+    <Route path={ROUTES.SETTINGS} element={<Settings />} />
+    <Route path={ROUTES.STAMPS} element={<Stamps />} />
+    <Route path={ROUTES.STAMPS_NEW} element={<CreatePostageStampPage />} />
+    <Route path={ROUTES.STATUS} element={<Status />} />
+    <Route path={ROUTES.FEEDS} element={<Feeds />} />
+    <Route path={ROUTES.FEEDS_NEW} element={<CreateNewFeed />} />
+    <Route path={ROUTES.FEEDS_UPDATE} element={<UpdateFeed />} />
+    <Route path={ROUTES.FEEDS_PAGE} element={<FeedSubpage />} />
+    <Route path={ROUTES.INFO} element={<Info />} />
+  </Routes>
 )

 export default BaseRouter
@@ -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
@@ -1,24 +0,0 @@
-export class SwarmFile {
-  public name: string
-  public path: string
-  public type: string
-  public size: number
-  public webkitRelativePath: string
-  public arrayBuffer: () => Promise<ArrayBuffer>
-  private data: Promise<ArrayBuffer>
-
-  constructor(file: File) {
-    const path = Reflect.get(file, 'path') || file.webkitRelativePath || file.name
-    this.path = path.startsWith('/') ? path.slice(1) : path
-    this.webkitRelativePath = this.path
-    this.name = file.name
-    this.type = file.type
-    this.size = file.size
-    this.data = file.arrayBuffer()
-    this.arrayBuffer = async () => {
-      const data = await this.data
-
-      return data
-    }
-  }
-}
@@ -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}`)
+}
@@ -0,0 +1,39 @@
+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,
+  })
+}
+
+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`)
+}
+
+function getDesktopHost(): string {
+  return window.location.host
+}
@@ -1,28 +1,32 @@
-import { FileData } from '@ethersphere/bee-js'
-import { SwarmFile } from './SwarmFile'
-
 const indexHtmls = ['index.html', 'index.htm']

-export function detectIndexHtml(files: SwarmFile[]): string | false {
-  if (!files.length) {
+interface DetectedIndex {
+  indexPath: string
+  commonPrefix?: string
+}
+
+export function detectIndexHtml(files: FilePath[]): DetectedIndex | false {
+  const paths = files.map(getPath)
+
+  if (!paths.length) {
    return false
  }

-  const exactMatch = files.find(x => indexHtmls.includes(x.path))
+  const exactMatch = paths.find(x => indexHtmls.includes(x))

  if (exactMatch) {
-    return exactMatch.name
+    return { indexPath: exactMatch }
  }

-  const prefix = files[0].path.split('/')[0] + '/'
+  const prefix = paths[0].split('/')[0] + '/'

-  const allStartWithSamePrefix = files.every(x => x.path.startsWith(prefix))
+  const allStartWithSamePrefix = paths.every(x => x.startsWith(prefix))

  if (allStartWithSamePrefix) {
-    const match = files.find(x => indexHtmls.map(y => prefix + y).includes(x.path))
+    const match = paths.find(x => indexHtmls.map(y => prefix + y).includes(x))

    if (match) {
-      return match.name
+      return { indexPath: match, commonPrefix: prefix }
    }
  }

@@ -53,37 +57,50 @@ export function getHumanReadableFileSize(bytes: number): string {
  return bytes + ' bytes'
 }

-export function convertBeeFileToBrowserFile(file: FileData<ArrayBuffer>): Partial<File> {
+export function getAssetNameFromFiles(files: FilePath[]): string {
+  if (files.length === 1) return files[0].name
+
+  if (files.length > 0) {
+    const prefix = getPath(files[0]).split('/')[0]
+
+    // Only if all files have a common prefix we can use it as a folder name
+    if (files.every(f => getPath(f).split('/')[0] === prefix)) return prefix
+  }
+
+  return 'unknown'
+}
+
+export function getMetadata(files: FilePath[]): Metadata {
+  const size = files.reduce((total, item) => total + item.size, 0)
+  const isWebsite = Boolean(detectIndexHtml(files))
+  const name = getAssetNameFromFiles(files)
+  const type = files.length === 1 ? files[0].type : 'folder'
+  const count = files.length
+
+  return { size, name, type, isWebsite, count }
+}
+
+export function getPath(file: FilePath): string {
+  return (file.path || file.webkitRelativePath || file.name).replace(/^\//g, '') // remove the starting slash
+}
+
+/**
+ * Utility function that is needed to have correct directory structure as webkitRelativePath is read only
+ */
+export function packageFile(file: FilePath, pathOverwrite?: string): FilePath {
+  const path = pathOverwrite || getPath(file)
+
  return {
+    path: path,
+    fullPath: path,
+    webkitRelativePath: path,
+    lastModified: file.lastModified,
    name: file.name,
-    size: file.data.byteLength,
-    type: file.contentType,
-    arrayBuffer: () => new Promise(resolve => resolve(file.data)),
+    size: file.size,
+    type: file.type,
+    stream: file.stream,
+    slice: file.slice,
+    text: file.text,
+    arrayBuffer: async () => await file.arrayBuffer(), // This is needed for successful upload and can not simply be { arrayBuffer: file.arrayBuffer }
  }
 }
-
-export function convertManifestToFiles(files: Record<string, string>): SwarmFile[] {
-  return Object.entries(files).map(
-    x =>
-      ({
-        name: x[0],
-        path: x[0],
-        type: 'n/a',
-        size: 0,
-        webkitRelativePath: x[0],
-        arrayBuffer: () => new Promise(resolve => resolve(new ArrayBuffer(0))),
-      } as SwarmFile),
-  )
-}
-
-export function getAssetNameFromFiles(files: SwarmFile[]): string {
-  if (!files.length) {
-    return 'Unknown'
-  }
-
-  if (files.length === 1) {
-    return files[0].name
-  }
-
-  return files[0].path.split('/')[0]
-}
@@ -0,0 +1,89 @@
+interface Dimensions {
+  width: number
+  height: number
+}
+
+/**
+ * Get the dimensions of the image after resize
+ *
+ * @param imgWidth  Current image width
+ * @param imgHeight Current image height
+ * @param maxWidth  Desired max width
+ * @param maxHeight Desired max height
+ *
+ * @returns Downscaled dimensions of the image to fit in the bounding box
+ */
+export function getDimensions(imgWidth: number, imgHeight: number, maxWidth?: number, maxHeight?: number): Dimensions {
+  const ratioWidth = maxWidth ? imgWidth / maxWidth : 1
+  const ratioHeight = maxHeight ? imgHeight / maxHeight : 1
+
+  const ratio = Math.max(ratioWidth, ratioHeight)
+
+  // No need to resize
+  if (ratio <= 1) return { width: imgWidth, height: imgHeight }
+
+  return { width: imgWidth / ratio, height: imgHeight / ratio }
+}
+
+/**
+ * Resize image passed to fit in the bounding box defined with maxWidth and maxHeight.
+ * Note that one or both of the bounding box dimensions may be omitted
+ *
+ * @param file      Image file to be resized
+ * @param maxWidth  Maximal image width
+ * @param maxHeight Maximal image height
+ *
+ * @returns Promise that resolves into the resized image blob
+ */
+export function resize(file: File, maxWidth?: number, maxHeight?: number): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const allowedTypes = [
+      'image/bmp',
+      'image/gif',
+      'image/vnd.microsoft.icon',
+      'image/jpeg',
+      'image/png',
+      'image/svg+xml',
+      'image/tiff',
+      'image/webp',
+    ]
+
+    if (!file.size || !file.type || !allowedTypes.includes(file.type)) return reject('File not supported!')
+
+    try {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = event => {
+        const src = event?.target?.result
+
+        if (!src || typeof src !== 'string') throw new Error('Failed to load the image source')
+
+        const img = new Image()
+        img.src = src
+        img.onload = () => {
+          const dimensions = getDimensions(img.width, img.height, maxWidth, maxHeight)
+          const elem = document.createElement('canvas')
+          elem.width = dimensions.width
+          elem.height = dimensions.height
+          const ctx = elem.getContext('2d')
+
+          if (!ctx) throw new Error('Failed to create canvas context')
+
+          ctx.drawImage(img, 0, 0, elem.width, elem.height)
+          ctx.canvas.toBlob(
+            blob => {
+              if (!blob) throw new Error('Failed to extract the blob from canvas')
+
+              resolve(blob)
+            },
+            'image/jpeg',
+            1,
+          )
+        }
+      }
+      reader.onerror = error => reject(error)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
@@ -0,0 +1,138 @@
+import { extractSwarmHash, extractSwarmCid, recognizeSwarmHash } 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)
+    })
+  })
+})
+
+describe('recognizeSwarmHash', () => {
+  test('should correctly extract hash', () => {
+    ;[...correctHashes, ...correctCids].forEach(({ input, expectedOutput }) => {
+      const hash = recognizeSwarmHash(input)
+      expect(hash).toBe(expectedOutput)
+    })
+  })
+  test('should not extract hash from incorrect inputs but instead return them', () => {
+    ;[...wrongHashes, ...wrongCids].forEach(url => {
+      const hash = recognizeSwarmHash(url)
+      expect(hash).toBe(url)
+    })
+  })
+})
@@ -1,4 +1,8 @@
 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
@@ -107,10 +111,41 @@ 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
+  }
+}
+
+export function recognizeSwarmHash(value: string): string {
+  return extractSwarmHash(value) || extractSwarmCid(value) || value
 }

 export function uuidV4(): string {
@@ -158,34 +193,53 @@ 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): number {
-  return (amount * 2 ** (depth - 16) * 2) / 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 {
+  if (text.length <= length * 2 + separator.length) {
+    return text
+  }
+
+  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')
 }
@@ -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
+}
@@ -0,0 +1,66 @@
+import { debounce } from '@material-ui/core'
+import axios from 'axios'
+import { Contract, providers } from 'ethers'
+
+const 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(PROVIDER, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    data: {
+      jsonrpc: '2.0',
+      method: 'eth_getBalance',
+      params: [address, 'latest'],
+      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(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()
+}
+
+export const Rpc = {
+  eth_getBalance: debounce(eth_getBalance, 1_000),
+  eth_getBalanceERC20: debounce(eth_getBalanceERC20, 1_000),
+}
@@ -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
Author	SHA1	Message	Date
bee-worker	145ebc1232	chore(master): release 0.15.0 (#367 )	2022-05-16 11:52:58 +02:00
Vojtech Simetka	bfe38e96b4	ci: update release-please github action (#366 )	2022-05-16 11:45:35 +02:00
Vojtech Simetka	86978b7e99	fix: nested directory upload preserves the directory structure (#365 )	2022-05-16 10:39:00 +02:00
dependabot[bot]	efd3158b2b	build(deps-dev): bump ts-node from 10.4.0 to 10.7.0 (#360 ) Bumps [ts-node](https://github.com/TypeStrong/ts-node) from 10.4.0 to 10.7.0. - [Release notes](https://github.com/TypeStrong/ts-node/releases) - [Commits](https://github.com/TypeStrong/ts-node/compare/v10.4.0...v10.7.0) --- updated-dependencies: - dependency-name: ts-node dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-05-03 18:14:13 +02:00
Vojtech Simetka	07561aaed2	fix: connection health indicator values to reflect the current network conditions (#353 ) * fix: connection health indicator values to reflect the current network conditions * fix: remove depth check as it seems the depth is always 0 * Revert "fix: remove depth check as it seems the depth is always 0" This reverts commit 363ead8fba9bc79266abdf2d8c3f540d75da5b48. * fix: updated the values according to the bee team advice	2022-05-03 18:07:37 +02:00
Vojtech Simetka	1e2face10e	feat: wait for postage stamp to be usable when bying it (#352 ) * feat: wait for postage stamp to be usable when bying it * refactor: simplified the waitUntilStampUsable function	2022-04-29 13:42:29 +02:00
Vojtech Simetka	b6b9914548	fix: remove restrictions on postage stamp label (#354 )	2022-04-29 13:42:01 +02:00
Vojtech Simetka	87b0b71cc6	feat: add bee-desktop settings capabilities (#323 ) * refactor: make the config readonly and extract endpoint calls to hook (+2 squashed commits) Squashed commits: [91ffe45] feat: add swap-endpoint [e1d0c3a] feat: add bee-desktop settings capabilities * feat: use the request mechanism that uses the bee-desktop API key * fix: properly reset the error or on error set the config to null	2022-04-29 09:30:46 +02:00
dependabot[bot]	8114fa7d73	build(deps-dev): bump @babel/preset-react from 7.16.0 to 7.16.7 (#345 ) Bumps [@babel/preset-react](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-react) from 7.16.0 to 7.16.7. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.16.7/packages/babel-preset-react) --- updated-dependencies: - dependency-name: "@babel/preset-react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-29 08:18:54 +02:00
dependabot[bot]	e454a7eba0	build(deps-dev): bump eslint-config-prettier from 8.2.0 to 8.5.0 (#344 ) Bumps [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) from 8.2.0 to 8.5.0. - [Release notes](https://github.com/prettier/eslint-config-prettier/releases) - [Changelog](https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/eslint-config-prettier/compare/v8.2.0...v8.5.0) --- updated-dependencies: - dependency-name: eslint-config-prettier dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-29 08:17:32 +02:00
Vojtech Simetka	3784b29f14	feat: support for bzz.link cids when downloading files (#350 ) * feat: detect and extract bzz.link cids into hash when downloading files * test: add quite thorough testsuite	2022-04-25 20:38:36 +05:00
Vojtech Simetka	a67be7a31e	fix: app crash caused by inputing non-number characters (#347 )	2022-04-24 21:40:52 +05:00
Vojtech Simetka	23dea07f6e	feat: add aditional information to the stamps overview (#349 )	2022-04-24 21:40:41 +05:00
Vojtech Simetka	906a457ae5	fix: show current postage stamp price per block (#348 )	2022-04-24 21:40:31 +05:00
dependabot[bot]	0a69409077	build(deps-dev): bump @testing-library/jest-dom from 5.15.0 to 5.16.4 (#343 ) Bumps [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) from 5.15.0 to 5.16.4. - [Release notes](https://github.com/testing-library/jest-dom/releases) - [Changelog](https://github.com/testing-library/jest-dom/blob/main/CHANGELOG.md) - [Commits](https://github.com/testing-library/jest-dom/compare/v5.15.0...v5.16.4) --- updated-dependencies: - dependency-name: "@testing-library/jest-dom" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-22 18:58:06 +05:00
dependabot[bot]	9026e65b1f	build(deps-dev): bump @types/react-router from 5.1.17 to 5.1.18 (#342 ) Bumps [@types/react-router](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-router) from 5.1.17 to 5.1.18. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-router) --- updated-dependencies: - dependency-name: "@types/react-router" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-22 18:57:34 +05:00
dependabot[bot]	a21e60f2d8	build(deps): bump ethers from 5.6.1 to 5.6.4 (#341 ) Bumps [ethers](https://github.com/ethers-io/ethers.js/tree/HEAD/packages/ethers) from 5.6.1 to 5.6.4. - [Release notes](https://github.com/ethers-io/ethers.js/releases) - [Changelog](https://github.com/ethers-io/ethers.js/blob/master/CHANGELOG.md) - [Commits](https://github.com/ethers-io/ethers.js/commits/v5.6.4/packages/ethers) --- updated-dependencies: - dependency-name: ethers dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-22 18:57:03 +05:00
Vojtech Simetka	39f59fcc07	ci: allow longer commit messages in commitlint (#346 )	2022-04-22 17:49:25 +05:00
Vojtech Simetka	75967b2bf5	ci: add dependabot (#335 )	2022-04-21 19:33:15 +05:00
Cafe137	ecaf2054fc	feat: add bee desktop toolkit (#311 ) * feat: add light node upgrade * refactor: improve upgrade page * feat: pretty print xdai and add xbzz faucets * feat: display xBZZ balance (#312) * refactor: change rpc provider * fix: remove version alert * fix: load really xBZZ balance instead of xDAI (#314) * feat: add bee desktop api key support * chore: remove dead code * chore: revert useless change * refactor: extract desktop utils module (#339) * refactor: extract desktop utils module * fix: add 0x prefix if it missing from address * refactor: extract BalanceProvider * fix: remove double finally * fix: remove token fallbacks * fix: reuse address and handle balance errors * chore: disable eslint for any * refactor: remove upgrade page * refactor: cleanup, debounce and axios * refactor: change fetch to axios * chore: remove dead code * chore: revert import ordering * refactor: use axios instead of fetch * refactor: use token instead of string Co-authored-by: Cafe137 <aron@aronsoos.com> Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>	2022-04-21 16:29:50 +02:00
bee-worker	9b5b2973cb	chore: release 0.14.0 (#319 )	2022-04-14 16:03:11 +05:00
bee-worker	36da804ca4	docs: update supported bee (#337 )	2022-04-14 15:42:02 +05:00
Vojtech Simetka	8f51aa9e89	ci: migrate to swarm-actions for PR previews (#310 )	2022-04-14 15:31:09 +05:00
Vojtech Simetka	0a31a04148	chore(deps): update bee-js to 3.3.4 (#336 )	2022-04-14 15:30:46 +05:00
Vojtech Simetka	eb9e309c8b	feat: add hook that detects if the bee-dashboard is run within bee-desktop (#334 ) * feat: add hook that detects if the bee-dashboard is run withing bee-desktop * chore: make the URL configurable * feat: remove error and instead return false * test: add testing with mockserver	2022-04-13 19:00:37 +05:00
Vojtech Simetka	5d0fbf705d	feat: optional status checks (e.g. connected peers > 0 or funded chequebook) (#331 ) * feat: make some check optional (e.g. connected peers > 0 or funded chequebook) * fix: alter setup step text to better describe what needs to be done * refactor: rename isOk from boolean value to checkState enum * fix: add checking for any error	2022-04-13 18:09:30 +05:00
Ivan Vandot	cd332c4dfd	chore: replace REPO_GHA_PAT with GHA_PAT_BASIC (#330 )	2022-04-08 22:23:50 +02:00
Cafe137	224fe4ce25	refactor: add missing props to generic components (#325 ) * refactor: add missing props to generic components * fix: remove undefined from variant Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>	2022-04-05 22:54:16 +02:00
Vojtech Simetka	4736e82da5	ci: enable depcheck (#320 )	2022-04-01 11:22:27 +02:00
Vojtech Simetka	8baecb783f	feat: detect bee mode and enable/disable status checks accordingly (#318 )	2022-03-29 15:37:40 +02:00
bee-worker	bf24d61584	docs: update supported bee (#316 )	2022-03-27 23:11:31 +02:00
Vojtech Simetka	01351a0380	chore(deps): update to bee-js 3.3.3 (#315 ) * chore(deps): update to bee-js 3.3.3-pre.0 * chore: update to bee-js 3.3.3	2022-03-27 22:40:49 +02:00
Vojtech Simetka	d0b3f1abee	fix: postage stamp price and TTL calculation (#305 ) * fix: postage stamp price and TTL calculation * chore: removed logs and fixed linter issues	2022-03-10 17:49:09 +01:00
bee-worker	d9e7560117	chore: release 0.13.0 (#289 )	2022-01-31 13:04:20 +01:00
Cafe137	3a30ee59d4	ci: add swarm-cli extra flags (#299 ) * ci: add swarm-cli extra flags * ci: rename SWARM_CLI_EXTRA_FLAGS to GATEWAY_AUTHORIZATION_HEADER * ci: change bee-url	2022-01-28 14:02:15 +01:00
Cafe137	7880c802ae	fix: do not print size and name when meta is unknown (#297 ) * fix: do not print zero when size is unknown * fix: do not print name if it is the same as the hash * feat: shorten asset name	2022-01-27 16:22:27 +01:00
Vojtech Simetka	f4013142af	feat: add metadata and preview (#292 ) * chore: upload flow uses metadata object and has preview * chore: remove SwarmFile * feat: upload metadata and file preview * feat: add metadata and preview on download * fix: package the meta and preview files * fix: upload websites that are inside a folder (#296) * fix: upload websites that are inside a folder * docs: few comments to clarify what is going on * refactor: decrease local variables and fix state order to detect websites properly Co-authored-by: Cafe137 <aron@aronsoos.com>	2022-01-26 18:29:09 +01:00
Cafe137	57bff96c99	style: make select and text input style consistent (#295 )	2022-01-25 18:03:40 +01:00
Cafe137	a406e0fc01	fix: clean up spinner and disabled state on download page (#294 )	2022-01-25 18:02:57 +01:00
Cafe137	1310deb17a	fix: disable feeds page when disconnected (#293 )	2022-01-25 18:02:20 +01:00
Vojtech Simetka	d8787476ac	fix: correct folder name when uploading multiple files or mix of files & directories (#291 )	2022-01-24 18:03:06 +01:00
Cafe137	bc82e67561	fix: get current price from chain state (#286 ) * fix: get current price from chain state * refactor: do not allow optional currentPrice	2022-01-20 15:49:41 +01:00
Cafe137	63e79ae2aa	ci: enable beeload action (#290 ) * ci: enable beeload action * ci: remove testnet * ci: add continue-on-error to testnet beeload-action	2022-01-20 15:49:30 +01:00
Cafe137	48ce9ba659	refactor: remove google fonts dependency (#285 ) * refactor: remove google fonts dependency * fix: change montserrat to work sans * refactor: omit unicode ranges	2022-01-20 14:51:46 +01:00
Cafe137	9ee1c9107b	feat: add hash based routing (#287 )	2022-01-20 14:51:27 +01:00
Vojtech Simetka	a90b4c439b	chore(deps): update react router from v5 to v6 (#280 ) * chore(deps): update react router from v5 to v6 * fix: correctly choose navigate target if there is no history	2022-01-17 14:47:26 +01:00
Vojtech Simetka	2187b9001c	refactor: settings to use less useEffects (and therefore less re-renders) (#277 )	2022-01-17 12:31:07 +01:00