chore: release 0.12.0 (#274)

* feat(wip): add basic feed operations

* ci: bump checks

* ci: bump checks

* feat: rework stamps and add feed functionalities

* refactor: polish and fixes

* feat(wip): add formulas

* feat: show bzz.link for websites

* feat: add stamp empty states and formatBzz

* feat: add feed download

* chore: update manifest-js version

* feat: dev mode support with bee-js 3.1.0 (#273)

* feat: dev mode support with bee-js 3.1.0

* fix: added missing package-lock.json file

* build: remove PR preview

* style: work on design

* feat: add TroubleshootConnectionCard

* build: remove depcheck

Co-authored-by: Attila Gazso <agazso@gmail.com>

.babelrc.js

@@ -0,0 +1,50 @@
+'use strict'
+
+module.exports = function (api) {
+  const targets = '>1% and not ie 11 and not dead'
+  api.cache(true)
+  api.cacheDirectory = true
+
+  return {
+    presets: [
+      '@babel/preset-typescript',
+      [
+        '@babel/preset-env',
+        {
+          targets,
+          modules: false,
+        }
+      ],
+      ['@babel/preset-react', {runtime: 'automatic' }]
+    ],
+    plugins: [
+      [
+        "babel-plugin-tsconfig-paths",
+        {
+          "relative": true,
+          "extensions": [
+            ".js",
+            ".jsx",
+            ".ts",
+            ".tsx",
+            ".es",
+            ".es6",
+            ".mjs"
+          ],
+          "rootDir": ".",
+          "tsconfig": "tsconfig.lib.json",
+        }
+      ],
+      "@babel/plugin-proposal-numeric-separator",
+      "syntax-dynamic-import",
+      '@babel/plugin-proposal-class-properties',
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ]
+    ]
+  }
+}

.depcheckrc.json

@@ -1,3 +1,19 @@
 {
-  "ignores": ["@types/jest", "@commitlint/config-conventional", "@types/react-router"]
+  "ignores": [
+    "@types/jest", 
+    "@commitlint/config-conventional", 
+    "@types/react-router",
+    "@babel/core",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime",
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    "babel-loader",
+    "babel-plugin-syntax-dynamic-import",
+    "babel-plugin-tsconfig-paths",
+    "file-loader",
+    "ts-node",
+    "webpack-cli"
+  ]
 }

.github/workflows/check.yaml

@@ -52,8 +52,11 @@ jobs:
         env:
           CI: true
 
-      - name: Dependency check
-        run: npm run depcheck
+      - name: Types check
+        run: npm run check:types
+
+      - name: Types build
+        run: npm run compile:types
 
       - name: Update supported Bee action
         uses: ethersphere/update-supported-bee-action@v1
@@ -64,7 +67,5 @@ jobs:
       - name: Build
         run: npm run build
 
-      - name: Create preview
-        uses: ethersphere/beeload-action@v1
-        with:
-          preview: 'true'
+      - name: Build Component
+        run: npm run build:component

.github/workflows/publish_npmjs.yaml

@@ -15,6 +15,8 @@ jobs:
           node-version: 14
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci
+      - run: npm run compile:types
+      - run: npm run build:component
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/lib
 
 # misc
 .DS_Store

CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [0.12.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.2...v0.12.0) (2021-12-21)
+
+
+### Features
+
+* add identity and feed management ([#272](https://www.github.com/ethersphere/bee-dashboard/issues/272)) ([25b65c3](https://www.github.com/ethersphere/bee-dashboard/commit/25b65c3fb770b09c685fe66596e372dfbb616625))
+
+### [0.11.2](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.1...v0.11.2) (2021-12-15)
+
+
+### Bug Fixes
+
+* **ci:** add lib folder to the package.json files prop ([#270](https://www.github.com/ethersphere/bee-dashboard/issues/270)) ([5ac0f01](https://www.github.com/ethersphere/bee-dashboard/commit/5ac0f01bf50ee23b474ab9c8d61c6af418544083))
+
+### [0.11.1](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.0...v0.11.1) (2021-12-14)
+
+
+### Bug Fixes
+
+* typo in publish script ([#268](https://www.github.com/ethersphere/bee-dashboard/issues/268)) ([c1e77bf](https://www.github.com/ethersphere/bee-dashboard/commit/c1e77bfc0d3ac442d6bacec7402f576a6422927e))
+
+## [0.11.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.10.0...v0.11.0) (2021-12-14)
+
+
+### Features
+
+* modularisation ([#244](https://www.github.com/ethersphere/bee-dashboard/issues/244)) ([2a13da1](https://www.github.com/ethersphere/bee-dashboard/commit/2a13da1a6c5925946d22666a84f975cec87df115))
+
+
+### Bug Fixes
+
+* **build:** bee-dashboard component building ([#267](https://www.github.com/ethersphere/bee-dashboard/issues/267)) ([153b007](https://www.github.com/ethersphere/bee-dashboard/commit/153b007387618e34e1d5dc7fd82d49722783e757))
+
+## [0.10.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.9.0...v0.10.0) (2021-12-07)
+
+
+### Features
+
+* add website and folder upload and download ([#260](https://www.github.com/ethersphere/bee-dashboard/issues/260)) ([3ef1ad9](https://www.github.com/ethersphere/bee-dashboard/commit/3ef1ad9574c9193f83d8a1447fddb79266c1a4f4))
+
 ## [0.9.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.8.0...v0.9.0) (2021-11-25)
 
 

README.md

@@ -13,7 +13,7 @@
 **Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
 working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
 
-This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.4.0-8fa696a8<!-- SUPPORTED_BEE_END -->**.
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.4.1-238867f1<!-- 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).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.9.0",
+  "version": "0.12.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -15,6 +15,8 @@
   "bin": {
     "bee-dashboard": "./serve.js"
   },
+  "main": "lib/App.js",
+  "types": "lib/src/App.d.ts",
   "bugs": {
     "url": "https://github.com/ethersphere/bee-dashboard/issues/"
   },
@@ -24,32 +26,45 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "3.0.0",
+    "@ethersphere/bee-js": "3.1.0",
+    "@ethersphere/manifest-js": "1.1.0",
+    "@ethersphere/swarm-cid": "^0.1.0",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.57",
     "axios": "0.24.0",
     "bignumber.js": "9.0.1",
+    "ethereumjs-wallet": "^1.0.2",
+    "file-saver": "^2.0.5",
     "formik": "2.2.9",
     "formik-material-ui": "3.0.1",
+    "jszip": "^3.7.1",
     "material-ui-dropzone": "3.5.0",
     "notistack": "1.0.10",
     "opener": "1.5.2",
     "qrcode.react": "1.0.1",
-    "react": "17.0.2",
+    "react": ">= 17.0.2",
     "react-copy-to-clipboard": "5.0.4",
-    "react-dom": "17.0.2",
+    "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-syntax-highlighter": "15.4.4",
     "semver": "7.3.5",
     "serve-handler": "6.1.3"
   },
   "devDependencies": {
+    "@babel/core": "7.16.0",
+    "@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-typescript": "7.16.0",
     "@commitlint/config-conventional": "14.1.0",
     "@testing-library/jest-dom": "5.15.0",
     "@testing-library/react": "12.1.2",
+    "@types/file-saver": "2.0.4",
     "@types/jest": "27.0.2",
     "@types/qrcode.react": "1.0.2",
     "@types/react": "17.0.34",
@@ -62,6 +77,9 @@
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "babel-eslint": "10.1.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-syntax-dynamic-import": "6.18.0",
+    "babel-plugin-tsconfig-paths": "1.0.2",
     "depcheck": "1.4.2",
     "eslint": "7.24.0",
     "eslint-config-prettier": "8.2.0",
@@ -74,22 +92,34 @@
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-testing-library": "3.10.2",
+    "file-loader": "6.2.0",
     "prettier": "2.4.1",
     "react-scripts": "4.0.3",
+    "ts-node": "^10.4.0",
     "typescript": "4.4.4",
-    "web-vitals": "2.1.2"
+    "web-vitals": "2.1.2",
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.9.1"
+  },
+  "peerDependencies": {
+    "react": ">= 17.0.2",
+    "react-dom": ">= 17.0.2"
   },
   "scripts": {
     "prepare": "npm run build",
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "build:component": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --mode=production",
+    "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
     "test": "react-scripts test",
     "serve": "node ./serve.js",
     "depcheck": "depcheck .",
     "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\""
+    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "check:types": "tsc --project tsconfig.lib.json"
   },
   "files": [
+    "lib",
     "build",
     "serve.js"
   ],

src/App.tsx

@@ -1,37 +1,47 @@
-import { ReactElement } from 'react'
+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 './App.css'
-
-import { ThemeProvider } from '@material-ui/core/styles'
-import CssBaseline from '@material-ui/core/CssBaseline'
-import { SnackbarProvider } from 'notistack'
-
-import BaseRouter from './routes'
 import Dashboard from './layout/Dashboard'
-import { theme } from './theme'
-import { Provider as StampsProvider } from './providers/Stamps'
-import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as BeeProvider } from './providers/Bee'
+import { Provider as FeedsProvider } from './providers/Feeds'
+import { Provider as FileProvider } from './providers/File'
+import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as SettingsProvider } from './providers/Settings'
+import { Provider as StampsProvider } from './providers/Stamps'
+import BaseRouter from './routes'
+import { theme } from './theme'
 
-const App = (): ReactElement => (
+interface Props {
+  beeApiUrl?: string
+  beeDebugApiUrl?: string
+  lockedApiSettings?: boolean
+}
+
+const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (
   <div className="App">
     <ThemeProvider theme={theme}>
-      <SettingsProvider>
+      <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
         <BeeProvider>
           <StampsProvider>
-            <PlatformProvider>
-              <SnackbarProvider>
-                <Router>
-                  <>
-                    <CssBaseline />
-                    <Dashboard>
-                      <BaseRouter />
-                    </Dashboard>
-                  </>
-                </Router>
-              </SnackbarProvider>
-            </PlatformProvider>
+            <FileProvider>
+              <FeedsProvider>
+                <PlatformProvider>
+                  <SnackbarProvider>
+                    <Router>
+                      <>
+                        <CssBaseline />
+                        <Dashboard>
+                          <BaseRouter />
+                        </Dashboard>
+                      </>
+                    </Router>
+                  </SnackbarProvider>
+                </PlatformProvider>
+              </FeedsProvider>
+            </FileProvider>
           </StampsProvider>
         </BeeProvider>
       </SettingsProvider>

src/components/AlertUploadSize.tsx

@@ -3,7 +3,7 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { Alert, AlertTitle } from '@material-ui/lab'
 import { ReactElement } from 'react'
 
-const LIMIT = 100_000_000 // 100 megabytes
+const LIMIT = 100000000 // 100 megabytes
 
 interface Props {
   files: File[]

src/components/CloseButton.tsx

@@ -0,0 +1,26 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
+import { Close } from '@material-ui/icons'
+import { ReactElement } from 'react'
+
+interface Props {
+  onClose: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapper: {
+      padding: theme.spacing(1),
+      cursor: 'pointer',
+    },
+  }),
+)
+
+export function CloseButton({ onClose }: Props): ReactElement {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.wrapper} onClick={onClose}>
+      <Close />
+    </div>
+  )
+}

src/components/Code.tsx

@@ -0,0 +1,38 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: string
+  prettify?: boolean
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapper: {
+      overflow: 'scroll',
+      background: '#ffffff',
+    },
+    pre: {
+      maxHeight: '6em',
+      padding: theme.spacing(2),
+    },
+  }),
+)
+
+function prettifyString(string: string): string {
+  try {
+    return JSON.stringify(JSON.parse(string), null, 4)
+  } catch {
+    return string
+  }
+}
+
+export function Code({ children, prettify }: Props): ReactElement {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.wrapper}>
+      <pre className={classes.pre}>{prettify ? prettifyString(children) : children}</pre>
+    </div>
+  )
+}

src/components/DocumentationText.tsx

@@ -0,0 +1,21 @@
+import { createStyles, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: (string | ReactElement)[] | (string | ReactElement)
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    text: {
+      color: '#606060',
+      fontSize: '0.9rem',
+    },
+  }),
+)
+
+export function DocumentationText({ children }: Props): ReactElement {
+  const classes = useStyles()
+
+  return <Typography className={classes.text}>{children}</Typography>
+}

src/components/EthereumAddress.tsx

@@ -1,9 +1,9 @@
 import { Typography } from '@material-ui/core/'
-import QRCodeModal from './QRCodeModal'
-import ClipboardCopy from './ClipboardCopy'
-
-import Identicon from 'react-identicons'
 import { ReactElement } from 'react'
+import Identicon from 'react-identicons'
+import { config } from '../config'
+import ClipboardCopy from './ClipboardCopy'
+import QRCodeModal from './QRCodeModal'
 
 interface Props {
   address: string | undefined
@@ -36,9 +36,7 @@ export default function EthereumAddress(props: Props): ReactElement {
                     }
                   : { marginRight: '7px' }
               }
-              href={`${process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${
-                props.address
-              }`}
+              href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
               target="_blank"
               rel="noreferrer"
             >

src/components/ExpandableListItemActions.tsx

@@ -4,8 +4,12 @@ import { ReactElement, ReactNode } from 'react'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    wrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
     action: {
-      marginTop: theme.spacing(0.75),
       marginBottom: theme.spacing(1),
       marginRight: theme.spacing(1),
     },
@@ -21,16 +25,16 @@ export default function ExpandableListItemActions({ children }: Props): ReactEle
 
   if (Array.isArray(children)) {
     return (
-      <Grid container direction="row">
+      <div className={classes.wrapper}>
         {children
           // Exclude falsy values to allow conditional rendering
           .filter(x => x)
           .map((a, i) => (
-            <Grid key={i} className={classes.action}>
+            <div key={i} className={classes.action}>
               {a}
-            </Grid>
+            </div>
           ))}
-      </Grid>
+      </div>
     )
   }
 

src/components/ExpandableListItemInput.tsx

@@ -1,10 +1,11 @@
-import { Button, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
+import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
-import { Check, Edit, Minus, RotateCcw } from 'react-feather'
+import { Edit, Minus, Search, X } from 'react-feather'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
+import { SwarmButton } from './SwarmButton'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -52,9 +53,11 @@ interface Props {
   expandedOnly?: boolean
   confirmLabel?: string
   confirmLabelDisabled?: boolean
+  loading?: boolean
   onChange?: (value: string) => void
   onConfirm: (value: string) => void
   mapperFn?: (value: string) => string
+  locked?: boolean
 }
 
 export default function ExpandableListItemKey({
@@ -67,7 +70,9 @@ export default function ExpandableListItemKey({
   expandedOnly,
   helperText,
   placeholder,
+  loading,
   mapperFn,
+  locked,
 }: Props): ReactElement | null {
   const classes = useStyles()
   const [open, setOpen] = useState(Boolean(expandedOnly))
@@ -96,7 +101,7 @@ export default function ExpandableListItemKey({
             <Typography variant="body2">
               <div>
                 {!open && value}
-                {!expandedOnly && (
+                {!expandedOnly && !locked && (
                   <IconButton size="small" className={classes.copyValue}>
                     {open ? (
                       <Minus onClick={toggleOpen} strokeWidth={1} />
@@ -116,6 +121,7 @@ export default function ExpandableListItemKey({
               fullWidth
               className={classes.content}
               autoFocus
+              hidden={locked}
             />
           </Collapse>
         </Grid>
@@ -123,26 +129,27 @@ export default function ExpandableListItemKey({
       <Collapse in={open} timeout="auto" unmountOnExit>
         {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
         <ExpandableListItemActions>
-          <Button
-            variant="contained"
+          <SwarmButton
             disabled={
+              loading ||
               inputValue === value ||
               Boolean(confirmLabelDisabled) || // Disable if external validation is provided
               (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
             }
-            startIcon={<Check size="1rem" />}
+            loading={loading}
+            iconType={Search}
             onClick={() => onConfirm(inputValue)}
           >
             {confirmLabel || 'Save'}
-          </Button>
-          <Button
-            variant="contained"
-            disabled={inputValue === value || inputValue === ''}
-            startIcon={<RotateCcw size="1rem" />}
+          </SwarmButton>
+          <SwarmButton
+            disabled={loading || inputValue === value || inputValue === ''}
+            iconType={X}
             onClick={() => setInputValue(value || '')}
+            cancel
           >
             Cancel
-          </Button>
+          </SwarmButton>
         </ExpandableListItemActions>
       </Collapse>
     </>

src/components/ExpandableListItemLink.tsx

@@ -1,8 +1,9 @@
 import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { OpenInNewSharp } from '@material-ui/icons'
+import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
 import { ReactElement, useState } from 'react'
 import CopyToClipboard from 'react-copy-to-clipboard'
+import { useHistory } from 'react-router'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -46,15 +47,35 @@ const useStyles = makeStyles((theme: Theme) =>
 interface Props {
   label: string
   value: string
+  link?: string
+  navigationType?: 'NEW_WINDOW' | 'HISTORY_PUSH'
+  allowClipboard?: boolean
 }
 
-export default function ExpandableListItemLink({ label, value }: Props): ReactElement | null {
+export default function ExpandableListItemLink({
+  label,
+  value,
+  link,
+  navigationType = 'NEW_WINDOW',
+  allowClipboard = true,
+}: Props): ReactElement | null {
   const classes = useStyles()
   const [copied, setCopied] = useState(false)
+  const history = useHistory()
 
   const tooltipClickHandler = () => setCopied(true)
   const tooltipCloseHandler = () => setCopied(false)
 
+  const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value
+
+  function onNavigation() {
+    if (navigationType === 'NEW_WINDOW') {
+      window.open(link || value)
+    } else {
+      history.push(link || value)
+    }
+  }
+
   return (
     <ListItem className={classes.header}>
       <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
@@ -62,15 +83,19 @@ export default function ExpandableListItemLink({ label, value }: Props): ReactEl
           {label && <Typography variant="body1">{label}</Typography>}
           <Typography variant="body2">
             <div>
-              <span className={classes.copyValue}>
-                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                  <CopyToClipboard text={value}>
-                    <span onClick={tooltipClickHandler}>{value.slice(0, 19)}...</span>
-                  </CopyToClipboard>
-                </Tooltip>
-              </span>
+              {allowClipboard && (
+                <span className={classes.copyValue}>
+                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                    <CopyToClipboard text={value}>
+                      <span onClick={tooltipClickHandler}>{displayValue}</span>
+                    </CopyToClipboard>
+                  </Tooltip>
+                </span>
+              )}
+              {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
               <IconButton size="small" className={classes.openLinkIcon}>
-                <OpenInNewSharp onClick={() => window.open(value)} strokeWidth={1} />
+                {navigationType === 'NEW_WINDOW' && <OpenInNewSharp onClick={onNavigation} strokeWidth={1} />}
+                {navigationType === 'HISTORY_PUSH' && <ArrowForward onClick={onNavigation} strokeWidth={1} />}
               </IconButton>
             </div>
           </Typography>

src/components/History.tsx

@@ -0,0 +1,37 @@
+import { ReactElement, useEffect, useState } from 'react'
+import { getPrettyDateString } from '../utils/date'
+import { getHistorySafe, HistoryItem, HISTORY_KEYS } from '../utils/local-storage'
+import ExpandableList from './ExpandableList'
+import ExpandableListItemLink from './ExpandableListItemLink'
+
+interface Props {
+  title: string
+  localStorageKey: HISTORY_KEYS
+}
+
+export function History({ title, localStorageKey }: Props): ReactElement | null {
+  const [items, setItems] = useState<HistoryItem[]>([])
+
+  useEffect(() => {
+    setItems(getHistorySafe(localStorageKey))
+  }, [localStorageKey])
+
+  if (!items.length) {
+    return null
+  }
+
+  return (
+    <ExpandableList label={title} defaultOpen>
+      {items.map((x, i) => (
+        <ExpandableListItemLink
+          label={getPrettyDateString(new Date(x.createdAt))}
+          value={x.name}
+          link={'/files/hash/' + x.hash}
+          key={i}
+          navigationType="HISTORY_PUSH"
+          allowClipboard={false}
+        />
+      ))}
+    </ExpandableList>
+  )
+}

src/components/HistoryHeader.tsx

@@ -0,0 +1,41 @@
+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'
+
+interface Props {
+  children: string
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    pressable: {
+      cursor: 'pointer',
+    },
+    icon: {
+      color: '#242424',
+    },
+  }),
+)
+
+export function HistoryHeader({ children }: Props): ReactElement {
+  const classes = useStyles()
+  const history = useHistory()
+
+  function goBack() {
+    history.goBack()
+  }
+
+  return (
+    <Box mb={4}>
+      <Grid container direction="row">
+        <Box mr={2}>
+          <div className={classes.pressable} onClick={goBack}>
+            <ArrowBack className={classes.icon} />
+          </div>
+        </Box>
+        <Typography variant="h1">{children}</Typography>
+      </Grid>
+    </Box>
+  )
+}

src/components/Loading.tsx

@@ -0,0 +1,10 @@
+import { CircularProgress, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+export function Loading(): ReactElement {
+  return (
+    <Grid container direction="row" justifyContent="center" alignItems="center">
+      <CircularProgress />
+    </Grid>
+  )
+}

src/components/ProgressIndicator.tsx

@@ -0,0 +1,55 @@
+import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  steps: string[]
+  index: number
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      height: '52px',
+      display: 'flex',
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    todo: {
+      background: '#f7f7f7',
+      color: '#c9c9c9',
+    },
+    inProgress: {
+      background: '#ffffff',
+      color: '#242424',
+      height: '52px',
+    },
+    done: {
+      background: '#f7f7f7',
+      color: '#606060',
+      height: '52px',
+    },
+  }),
+)
+
+export function ProgressIndicator({ steps, index }: Props): ReactElement {
+  const classes = useStyles()
+
+  function pickClass(i: number): string {
+    if (i === index) {
+      return classes.inProgress
+    }
+
+    return i < index ? classes.done : classes.todo
+  }
+
+  return (
+    <Grid container justifyContent="space-between">
+      {steps.map((x, i) => (
+        <div key={i} className={`${classes.wrapper} ${pickClass(i)}`}>
+          <Typography>{x}</Typography>
+        </div>
+      ))}
+    </Grid>
+  )
+}

src/components/SideBar.tsx

@@ -1,16 +1,15 @@
-import type { ReactElement } from 'react'
-import { Link } from 'react-router-dom'
-
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
+import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { OpenInNewSharp } from '@material-ui/icons'
-import { Divider, List, Drawer, Grid, Link as MUILink } from '@material-ui/core'
-import { Home, FileText, DollarSign, Settings, Layers, BookOpen } from 'react-feather'
+import type { ReactElement } from 'react'
+import { Bookmark, BookOpen, DollarSign, FileText, Home, Layers, Settings } from 'react-feather'
+import { Link } from 'react-router-dom'
+import Logo from '../assets/logo.svg'
+import { config } from '../config'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
 
-import Logo from '../assets/logo.svg'
-
 const navBarItems = [
   {
     label: 'Info',
@@ -19,9 +18,14 @@ const navBarItems = [
   },
   {
     label: 'Files',
-    path: ROUTES.FILES,
+    path: ROUTES.UPLOAD,
     icon: FileText,
   },
+  {
+    label: 'Feeds',
+    path: ROUTES.FEEDS,
+    icon: Bookmark,
+  },
   {
     label: 'Stamps',
     path: ROUTES.STAMPS,
@@ -113,7 +117,7 @@ export default function SideBar(): ReactElement {
           </List>
           <Divider className={classes.divider} />
           <List>
-            <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" className={classes.link}>
+            <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
               <SideBarItem
                 iconStart={<BookOpen className={classes.icon} />}
                 iconEnd={<OpenInNewSharp className={classes.iconSmall} />}

src/components/SwarmButton.tsx

@@ -9,13 +9,16 @@ interface Props {
   className?: string
   disabled?: boolean
   loading?: boolean
+  cancel?: boolean
 }
 
 const useStyles = makeStyles(() =>
   createStyles({
     button: {
+      height: '52px',
       position: 'relative',
       whiteSpace: 'nowrap',
+      color: '#242424',
       '&:hover, &:focus': {
         '& svg': {
           stroke: '#fff',
@@ -23,6 +26,10 @@ const useStyles = makeStyles(() =>
         },
       },
     },
+    cancelButton: {
+      background: '#f7f7f7',
+      color: '#606060',
+    },
     spinnerWrapper: {
       position: 'absolute',
       left: '50%',
@@ -34,19 +41,37 @@ const useStyles = makeStyles(() =>
   }),
 )
 
-export function SwarmButton({ children, onClick, iconType, className, disabled, loading }: Props): ReactElement {
+export function SwarmButton({
+  children,
+  onClick,
+  iconType,
+  className,
+  disabled,
+  loading,
+  cancel,
+}: Props): ReactElement {
   const classes = useStyles()
 
+  function getIconColor() {
+    if (loading || disabled) {
+      return 'rgba(0, 0, 0, 0.26)'
+    }
+
+    return cancel ? '#606060' : '#dd7700'
+  }
+
+  function getButtonClassName() {
+    return [className, classes.button, cancel && classes.cancelButton].filter(x => x).join(' ')
+  }
+
   const icon = React.createElement(iconType, {
     size: '1.25rem',
-    color: disabled ? 'rgba(0, 0, 0, 0.26)' : '#dd7700',
+    color: getIconColor(),
   })
 
-  const classNames = className ? [className, classes.button].join(' ') : classes.button
-
   return (
     <Button
-      className={classNames}
+      className={getButtonClassName()}
       onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
         onClick()
         event.currentTarget.blur()

src/components/SwarmDialog.tsx

@@ -0,0 +1,23 @@
+import { Box, Dialog, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: ReactElement | ReactElement[]
+}
+
+export function SwarmDialog({ children }: Props): ReactElement {
+  return (
+    <Dialog
+      open={true}
+      PaperProps={{
+        style: { borderRadius: 0, background: '#efefef' },
+      }}
+    >
+      <Box p={4} sx={{ maxWidth: '100%', width: '650px' }}>
+        <Grid container direction="column">
+          {children}
+        </Grid>
+      </Box>
+    </Dialog>
+  )
+}

src/components/SwarmSelect.tsx

@@ -0,0 +1,83 @@
+import { createStyles, FormHelperText, makeStyles, MenuItem, Select as SimpleSelect, Theme } from '@material-ui/core'
+import { Field } from 'formik'
+import { Select } from 'formik-material-ui'
+import { ReactElement } from 'react'
+
+export type SelectEvent = React.ChangeEvent<{
+  name?: string | undefined
+  value: unknown
+}>
+
+interface Props {
+  label?: string
+  name?: string
+  options: { value: string; label: string }[]
+  onChange?: (event: SelectEvent) => void
+  formik?: boolean
+  defaultValue?: string
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    select: {
+      borderRadius: 0,
+      background: theme.palette.background.paper,
+      '& fieldset': {
+        border: 0,
+      },
+    },
+    option: {
+      height: '52px',
+    },
+  }),
+)
+
+export function SwarmSelect({ defaultValue, formik, name, options, onChange, label }: Props): ReactElement {
+  const classes = useStyles()
+
+  if (formik) {
+    return (
+      <>
+        {label && <FormHelperText>{label}</FormHelperText>}
+        <Field
+          required
+          component={Select}
+          name={name}
+          fullWidth
+          variant="outlined"
+          defaultValue={defaultValue || ''}
+          className={classes.select}
+          placeholder={label}
+        >
+          {options.map((x, i) => (
+            <MenuItem key={i} value={x.value} className={classes.option}>
+              {x.label}
+            </MenuItem>
+          ))}
+        </Field>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {label && <FormHelperText>{label}</FormHelperText>}
+      <SimpleSelect
+        required
+        name={name}
+        fullWidth
+        variant="outlined"
+        className={classes.select}
+        defaultValue={defaultValue || ''}
+        onChange={onChange}
+        placeholder={label}
+      >
+        {options.map((x, i) => (
+          <MenuItem key={i} value={x.value} className={classes.option}>
+            {x.label}
+          </MenuItem>
+        ))}
+      </SimpleSelect>
+    </>
+  )
+}

src/components/SwarmTextInput.tsx

@@ -0,0 +1,58 @@
+import { createStyles, makeStyles, TextField as SimpleTextField, Theme } from '@material-ui/core'
+import { Field } from 'formik'
+import { TextField } from 'formik-material-ui'
+import { ChangeEvent, ReactElement } from 'react'
+
+interface Props {
+  name: string
+  label: string
+  password?: boolean
+  formik?: boolean
+  optional?: boolean
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    field: {
+      background: theme.palette.background.paper,
+      height: '52px',
+      '& fieldset': {
+        border: 0,
+      },
+    },
+  }),
+)
+
+export function SwarmTextInput({ name, label, password, optional, formik, onChange }: Props): ReactElement {
+  const classes = useStyles()
+
+  if (formik) {
+    return (
+      <Field
+        component={TextField}
+        type={password ? 'password' : undefined}
+        required={!optional}
+        name={name}
+        label={label}
+        fullWidth
+        variant="outlined"
+        className={classes.field}
+        defaultValue=""
+      />
+    )
+  }
+
+  return (
+    <SimpleTextField
+      type={password ? 'password' : undefined}
+      required
+      label={label}
+      fullWidth
+      variant="outlined"
+      className={classes.field}
+      defaultValue=""
+      onChange={onChange}
+    />
+  )
+}

src/components/TitleWithClose.tsx

@@ -0,0 +1,31 @@
+import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { CloseButton } from './CloseButton'
+
+interface Props {
+  children: string
+  onClose: () => void
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    text: {
+      color: '#606060',
+      fontWeight: 'bold',
+    },
+  }),
+)
+
+export function TitleWithClose({ children, onClose }: Props): ReactElement {
+  const classes = useStyles()
+
+  return (
+    <Grid container justifyContent="space-between" alignItems="center">
+      <span>&nbsp;</span>
+      <Typography className={classes.text} align="center">
+        {children}
+      </Typography>
+      <CloseButton onClose={onClose} />
+    </Grid>
+  )
+}

src/components/TroubleshootConnectionCard.tsx

@@ -1,10 +1,10 @@
-import type { ReactElement } from 'react'
-import { Link } from 'react-router-dom'
-
+import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Button, Grid, Typography, Link as MuiLink } from '@material-ui/core/'
-import { ROUTES } from '../routes'
+import type { ReactElement } from 'react'
 import { Activity } from 'react-feather'
+import { Link } from 'react-router-dom'
+import { config } from '../config'
+import { ROUTES } from '../routes'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -37,11 +37,11 @@ export default function TroubleshootConnectionCard(): ReactElement {
       <Grid item className={classes.content}>
         <Typography align="center">
           Please check your node status to fix the problem. You can also check out the{' '}
-          <MuiLink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={config.BEE_DOCS_HOST} target="_blank" rel="noreferrer">
             Swarm Bee Docs
           </MuiLink>{' '}
           or ask for support on the{' '}
-          <MuiLink href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={config.BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
             Ethereum Swarm Discord
           </MuiLink>
           .

src/config.ts

@@ -0,0 +1,29 @@
+function getProcessEnv(key: string): string | undefined | false {
+  return typeof process === 'object' && process.env[key]
+}
+
+class Config {
+  public readonly BEE_API_HOST: string
+  public readonly BEE_DEBUG_API_HOST: string
+  public readonly BLOCKCHAIN_EXPLORER_URL: string
+  public readonly BEE_DOCS_HOST: string
+  public readonly BEE_DISCORD_HOST: string
+  public readonly GITHUB_REPO_URL: string
+
+  constructor() {
+    this.BEE_API_HOST =
+      sessionStorage.getItem('api_host') || getProcessEnv('REACT_APP_BEE_HOST') || 'http://localhost:1633'
+    this.BEE_DEBUG_API_HOST =
+      sessionStorage.getItem('debug_api_host') || getProcessEnv('REACT_APP_BEE_DEBUG_HOST') || 'http://localhost:1635'
+    this.BLOCKCHAIN_EXPLORER_URL =
+      getProcessEnv('REACT_APP_BLOCKCHAIN_EXPLORER_URL') || 'https://blockscout.com/xdai/mainnet'
+    this.BEE_DOCS_HOST = getProcessEnv('REACT_APP_BEE_DOCS_HOST') || 'https://docs.ethswarm.org/docs/'
+    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'
+  }
+}
+
+export const config = new Config()
+
+export default config

src/hooks/apiHooks.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react'
 import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { config } from '../config'
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -14,7 +15,7 @@ export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
 
   useEffect(() => {
     axios
-      .get(`${process.env.REACT_APP_BEE_GITHUB_REPO_URL}/releases/latest`)
+      .get(`${config.GITHUB_REPO_URL}/releases/latest`)
       .then(res => {
         setLatestBeeRelease(res.data)
       })

src/pages/feeds/CreateNewFeed.tsx

@@ -0,0 +1,133 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+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 { DocumentationText } from '../../components/DocumentationText'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmSelect } from '../../components/SwarmSelect'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as FeedsContext, IdentityType } from '../../providers/Feeds'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
+import { convertWalletToIdentity, generateWallet, persistIdentity } from '../../utils/identity'
+
+interface FormValues {
+  identityName?: string
+  type?: IdentityType
+  password?: string
+}
+
+const initialValues: FormValues = {
+  identityName: '',
+  type: 'PRIVATE_KEY',
+  password: '',
+}
+
+export default function CreateNewFeed(): ReactElement {
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { identities, setIdentities } = useContext(FeedsContext)
+  const [loading, setLoading] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
+
+  const history = useHistory()
+
+  async function onSubmit(values: FormValues) {
+    setLoading(true)
+
+    if (!beeApi) {
+      enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+    const wallet = generateWallet()
+    const stamps = await beeDebugApi?.getAllPostageBatch()
+
+    if (!stamps || !stamps.length) {
+      enqueueSnackbar(<span>No stamp available</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+
+    if (!values.identityName || !values.type) {
+      enqueueSnackbar(<span>Form is unfinished</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+
+    const identity = await convertWalletToIdentity(wallet, values.type, values.identityName, values.password)
+    persistIdentity(identities, identity)
+    setIdentities(identities)
+    history.push(ROUTES.FEEDS)
+    setLoading(false)
+  }
+
+  function cancel() {
+    history.goBack()
+  }
+
+  return (
+    <div>
+      <HistoryHeader>Create new feed</HistoryHeader>
+      <Box mb={4}>
+        <DocumentationText>
+          To create a feed you will need to create an identity. Please refer to the{' '}
+          <a
+            href="https://docs.ethswarm.org/api/#tag/Feed/paths/~1feeds~1{owner}~1{topic}/post"
+            target="_blank"
+            rel="noreferrer"
+          >
+            official Bee documentation
+          </a>{' '}
+          to understand how feeds work.
+        </DocumentationText>
+      </Box>
+      <Formik initialValues={initialValues} onSubmit={onSubmit}>
+        {({ submitForm, values }) => (
+          <Form>
+            <Box mb={0.25}>
+              <SwarmTextInput name="identityName" label="Identity name" formik />
+            </Box>
+            <Box mb={0.25}>
+              <SwarmSelect
+                formik
+                name="type"
+                options={[
+                  { label: 'Keypair Only', value: 'PRIVATE_KEY' },
+                  { label: 'Password Protected', value: 'V3' },
+                ]}
+              />
+            </Box>
+            {values.type === 'V3' && <SwarmTextInput name="password" label="Password" password formik />}
+            <Box mt={2}>
+              <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+            </Box>
+            <Box mt={2} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+              <Grid container justifyContent="space-between">
+                <Typography>Feeds name</Typography>
+                <Typography>{values.identityName} Website</Typography>
+              </Grid>
+            </Box>
+            <Box mt={1.25}>
+              <ExpandableListItemActions>
+                <SwarmButton onClick={submitForm} iconType={Check} disabled={loading} loading={loading}>
+                  Create Feed
+                </SwarmButton>
+                <SwarmButton onClick={cancel} iconType={X} disabled={loading} cancel>
+                  Cancel
+                </SwarmButton>
+              </ExpandableListItemActions>
+            </Box>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  )
+}

src/pages/feeds/DeleteFeedDialog.tsx

@@ -0,0 +1,35 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { Trash, X } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { TitleWithClose } from '../../components/TitleWithClose'
+import { Identity } from '../../providers/Feeds'
+
+interface Props {
+  identity: Identity
+  onConfirm: (identity: Identity) => void
+  onClose: () => void
+}
+
+export function DeleteFeedDialog({ identity, onConfirm, onClose }: Props): ReactElement {
+  return (
+    <SwarmDialog>
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Delete</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <Typography align="center">{`You are about to delete feed ${identity.name} Website. It is strongly advised to export this feed first.`}</Typography>
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Trash} onClick={() => onConfirm(identity)}>
+          Delete
+        </SwarmButton>
+        <SwarmButton iconType={X} onClick={onClose} cancel>
+          Cancel
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/ExportFeedDialog.tsx

@@ -0,0 +1,71 @@
+import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
+import { saveAs } from 'file-saver'
+import { useSnackbar } from 'notistack'
+import { ReactElement } from 'react'
+import { Clipboard, Download } from 'react-feather'
+import { Code } from '../../components/Code'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { TitleWithClose } from '../../components/TitleWithClose'
+import { Identity } from '../../providers/Feeds'
+
+interface Props {
+  identity: Identity
+  onClose: () => void
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      maxWidth: '100%',
+    },
+  }),
+)
+
+export function ExportFeedDialog({ identity, onClose }: Props): ReactElement {
+  const { enqueueSnackbar } = useSnackbar()
+
+  const classes = useStyles()
+
+  function onDownload() {
+    saveAs(
+      new Blob([identity.identity], {
+        type: 'application/json',
+      }),
+      identity.name + '.json',
+    )
+  }
+
+  function getExportText() {
+    return identity.type === 'V3' ? 'JSON file' : 'the private key string'
+  }
+
+  function onCopy() {
+    navigator.clipboard
+      .writeText(identity.identity)
+      .then(() => enqueueSnackbar('Copied to Clipboard', { variant: 'success' }))
+  }
+
+  return (
+    <SwarmDialog>
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Export</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <Typography align="center">{`We exported the identity associated with this feed as ${getExportText()}.`}</Typography>
+      </Box>
+      <Box mb={4} className={classes.wrapper}>
+        <Code prettify>{identity.identity}</Code>
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Download} onClick={onDownload}>
+          Download JSON File
+        </SwarmButton>
+        <SwarmButton iconType={Clipboard} onClick={onCopy}>
+          Copy To Clipboard
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/FeedPasswordDialog.tsx

@@ -0,0 +1,52 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement, useState } from 'react'
+import { Check, X } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { TitleWithClose } from '../../components/TitleWithClose'
+
+interface Props {
+  feedName: string
+  onProceed: (password: string) => void
+  onCancel: () => void
+  loading: boolean
+}
+
+export function FeedPasswordDialog({ feedName, onProceed, onCancel, loading }: Props): ReactElement {
+  const [password, setPassword] = useState('')
+
+  function onProceedClick() {
+    return onProceed(password)
+  }
+
+  return (
+    <SwarmDialog>
+      <Box mb={4}>
+        <TitleWithClose onClose={onCancel}>Update Feed</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <Typography>Please enter the password for “{feedName}”:</Typography>
+      </Box>
+      <Box mb={4}>
+        <SwarmTextInput
+          label="Password"
+          name="password"
+          onChange={event => {
+            setPassword(event.target.value)
+          }}
+          password
+        />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Check} onClick={onProceedClick} disabled={loading} loading={loading}>
+          Proceed
+        </SwarmButton>
+        <SwarmButton iconType={X} onClick={onCancel} cancel disabled={loading}>
+          Cancel
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/FeedSubpage.tsx

@@ -0,0 +1,94 @@
+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 { DocumentationText } from '../../components/DocumentationText'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import ExpandableListItemLink from '../../components/ExpandableListItemLink'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as IdentityContext } from '../../providers/Feeds'
+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 {
+  const { identities } = useContext(IdentityContext)
+  const { beeApi } = useContext(SettingsContext)
+  const { status } = useContext(BeeContext)
+
+  const history = useHistory()
+
+  const [available, setAvailable] = useState(false)
+
+  const uuid = props.match.params.uuid
+  const identity = identities.find(x => x.uuid === uuid)
+
+  useEffect(() => {
+    if (!identity || !identity.feedHash) {
+      return
+    }
+
+    try {
+      beeApi?.downloadData(identity.feedHash).then(() => setAvailable(true))
+    } catch {
+      setAvailable(false)
+    }
+  }, [beeApi, uuid, identity])
+
+  if (!identity || !status.all) {
+    history.replace(ROUTES.FEEDS)
+
+    return <></>
+  }
+
+  function onClose() {
+    history.push(ROUTES.FEEDS)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>{`${identity.name} Website`}</HistoryHeader>
+      <UploadArea showHelp={false} uploadOrigin={{ origin: 'FEED', uuid }} />
+      {available && identity.feedHash ? (
+        <>
+          <Box mb={0.25}>
+            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
+          </Box>
+          <Box mb={4}>
+            <ExpandableListItemLink
+              label="BZZ Link"
+              value={`https://${swarmCid.encodeFeedReference(identity.feedHash)}.bzz.link`}
+            />
+          </Box>
+        </>
+      ) : (
+        <Box mb={4}>
+          <DocumentationText>
+            This feed is curently not pointing anywhere, you can update the feed to fix this. Please refer to the{' '}
+            <a
+              href="https://docs.ethswarm.org/api/#tag/Feed/paths/~1feeds~1{owner}~1{topic}/post"
+              target="_blank"
+              rel="noreferrer"
+            >
+              official Bee documentation
+            </a>
+            .
+          </DocumentationText>
+        </Box>
+      )}
+      <ExpandableListItemActions>
+        <SwarmButton iconType={X} onClick={onClose} cancel>
+          Close
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </div>
+  )
+}

src/pages/feeds/ImportFeedDialog.tsx

@@ -0,0 +1,113 @@
+import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import React, { ReactElement, useContext, useRef, useState } from 'react'
+import { Check, Upload } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { TitleWithClose } from '../../components/TitleWithClose'
+import { Context, Identity } from '../../providers/Feeds'
+import { importIdentity, persistIdentity } from '../../utils/identity'
+
+interface Props {
+  onClose: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    textarea: {
+      width: '100%',
+      border: 0,
+      padding: theme.spacing(1),
+    },
+    displayNone: {
+      display: 'none',
+    },
+  }),
+)
+
+export function ImportFeedDialog({ onClose }: Props): ReactElement {
+  const [textareaValue, setTextareaValue] = useState('')
+  const [name, setName] = useState('')
+  const fileInputRef = useRef(null)
+
+  const { identities, setIdentities } = useContext(Context)
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  const classes = useStyles()
+
+  async function onImport() {
+    const feed = await importIdentity(name, textareaValue)
+
+    if (feed) {
+      onFeedReady(feed)
+    } else {
+      enqueueSnackbar('Feed is not valid', { variant: 'error' })
+    }
+  }
+
+  function onUploadIdentityFile() {
+    if (fileInputRef.current) {
+      const input = fileInputRef.current as HTMLInputElement
+      input.click()
+    }
+  }
+
+  function onIdentityFileSelected(event: React.ChangeEvent<HTMLInputElement>) {
+    const fileReader = new FileReader()
+    const file = event.target?.files?.[0]
+    fileReader.onload = async event => {
+      const string = event.target?.result
+
+      if (string) {
+        const feed = await importIdentity(name, string as string)
+
+        if (feed) {
+          onFeedReady(feed)
+        } else {
+          enqueueSnackbar('Feed is not valid', { variant: 'error' })
+        }
+      }
+    }
+
+    if (file) {
+      fileReader.readAsText(file)
+    }
+  }
+
+  function onFeedReady(identity: Identity) {
+    persistIdentity(identities, identity)
+    setIdentities(identities)
+    enqueueSnackbar('Feed imported successfully', { variant: 'success' })
+    onClose()
+  }
+
+  return (
+    <SwarmDialog>
+      <input onChange={onIdentityFileSelected} ref={fileInputRef} className={classes.displayNone} type="file" />
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Import</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput label="Identity Name" name="name" onChange={event => setName(event.target.value)} />
+      </Box>
+      <Box mb={4}>
+        <TextareaAutosize
+          className={classes.textarea}
+          minRows={5}
+          onChange={event => setTextareaValue(event.target.value)}
+        />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Upload} onClick={onUploadIdentityFile}>
+          Upload Json File
+        </SwarmButton>
+        <SwarmButton iconType={Check} onClick={onImport}>
+          Use Pasted Text
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/UpdateFeed.tsx

@@ -0,0 +1,151 @@
+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 ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SelectEvent, SwarmSelect } from '../../components/SwarmSelect'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as StampContext } from '../../providers/Stamps'
+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 {
+  const { identities, setIdentities } = useContext(IdentityContext)
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { stamps, refresh } = useContext(StampContext)
+  const { status } = useContext(BeeContext)
+
+  const [selectedStamp, setSelectedStamp] = useState<string | null>(null)
+  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
+  const [loading, setLoading] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
+  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
+
+  const history = useHistory()
+
+  useEffect(() => {
+    refresh()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  function onFeedChange(event: SelectEvent) {
+    const uuid = event.target.value
+    setSelectedIdentity(identities.find(x => x.uuid === uuid) || null)
+  }
+
+  function onStampChange(event: SelectEvent) {
+    const batchId = event.target.value as string
+    setSelectedStamp(batchId)
+  }
+
+  function onCancel() {
+    history.goBack()
+  }
+
+  function onBeginUpdatingFeed() {
+    if (!selectedIdentity) {
+      return
+    }
+
+    if (selectedIdentity.type === 'V3') {
+      setShowPasswordPrompt(true)
+    } else {
+      onFeedUpdate(selectedIdentity)
+    }
+  }
+
+  async function onFeedUpdate(identity: Identity, password?: string) {
+    setLoading(true)
+
+    if (!beeApi || !beeDebugApi || !selectedStamp) {
+      enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+
+    try {
+      await updateFeed(beeApi, identity, props.match.params.hash, selectedStamp, password as string)
+      persistIdentity(identities, identity)
+      setIdentities([...identities])
+      history.push(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
+    } catch (error: unknown) {
+      setLoading(false)
+
+      const message = (typeof error === 'object' && error !== null && Reflect.get(error, 'message')) || ''
+
+      if (message.includes('possibly wrong passphrase')) {
+        enqueueSnackbar('Wrong password, please try again', { variant: 'error' })
+      } else {
+        enqueueSnackbar('Could not update feed at this time, please try again later', { variant: 'error' })
+      }
+    }
+  }
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <div>
+      {showPasswordPrompt && selectedIdentity && (
+        <FeedPasswordDialog
+          feedName={selectedIdentity.name + ' Website'}
+          onCancel={() => {
+            setShowPasswordPrompt(false)
+          }}
+          onProceed={(password: string) => {
+            onFeedUpdate(selectedIdentity, password)
+          }}
+          loading={loading}
+        />
+      )}
+      <HistoryHeader>Update feed</HistoryHeader>
+      <Box mb={2}>
+        <Grid container>
+          <SwarmSelect
+            options={identities.map(x => ({ value: x.uuid, label: `${x.name} Website` }))}
+            onChange={onFeedChange}
+            label="Feed"
+          />
+        </Grid>
+      </Box>
+
+      <Box mb={4}>
+        <Grid container>
+          {stamps ? (
+            <SwarmSelect
+              options={stamps.map(x => ({ value: x.batchID, label: x.batchID.slice(0, 8) }))}
+              onChange={onStampChange}
+              label="Stamp"
+            />
+          ) : (
+            <Typography>You need to buy a stamp first to be able to update a feed.</Typography>
+          )}
+        </Grid>
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton
+          onClick={onBeginUpdatingFeed}
+          iconType={Bookmark}
+          loading={!showPasswordPrompt && loading}
+          disabled={loading || !selectedStamp || !selectedIdentity}
+        >
+          Update Selected Feed
+        </SwarmButton>
+        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
+          Close
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </div>
+  )
+}

src/pages/feeds/index.tsx

@@ -0,0 +1,115 @@
+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 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 { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { ROUTES } from '../../routes'
+import { formatEnum } from '../../utils'
+import { persistIdentitiesWithoutUpdate } from '../../utils/identity'
+import { DeleteFeedDialog } from './DeleteFeedDialog'
+import { ExportFeedDialog } from './ExportFeedDialog'
+import { ImportFeedDialog } from './ImportFeedDialog'
+
+export default function Feeds(): ReactElement {
+  const { identities, setIdentities } = useContext(IdentityContext)
+  const { status } = useContext(BeeContext)
+
+  const history = useHistory()
+
+  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
+  const [showImport, setShowImport] = useState(false)
+  const [showExport, setShowExport] = useState(false)
+  const [showDelete, setShowDelete] = useState(false)
+
+  function createNewFeed() {
+    return history.push(ROUTES.FEEDS_NEW)
+  }
+
+  function viewFeed(uuid: string) {
+    history.push(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
+  }
+
+  function onDialogClose() {
+    setShowDelete(false)
+    setShowExport(false)
+    setShowImport(false)
+    setSelectedIdentity(null)
+  }
+
+  function onDelete(identity: Identity) {
+    onDialogClose()
+    const updatedFeeds = identities.filter(x => x.uuid !== identity.uuid)
+    setIdentities(updatedFeeds)
+    persistIdentitiesWithoutUpdate(updatedFeeds)
+  }
+
+  function onShowExport(identity: Identity) {
+    setSelectedIdentity(identity)
+    setShowExport(true)
+  }
+
+  function onShowDelete(identity: Identity) {
+    setSelectedIdentity(identity)
+    setShowDelete(true)
+  }
+
+  return (
+    <div>
+      {showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
+      {showExport && selectedIdentity && <ExportFeedDialog identity={selectedIdentity} onClose={onDialogClose} />}
+      {showDelete && selectedIdentity && (
+        <DeleteFeedDialog
+          identity={selectedIdentity}
+          onClose={onDialogClose}
+          onConfirm={(identity: Identity) => onDelete(identity)}
+        />
+      )}
+      <Box mb={4}>
+        <Typography variant="h1">Feeds</Typography>
+      </Box>
+      <Box mb={4}>
+        <ExpandableListItemActions>
+          <SwarmButton iconType={PlusSquare} onClick={createNewFeed}>
+            Create New Feed
+          </SwarmButton>
+          <SwarmButton iconType={PlusSquare} onClick={() => setShowImport(true)}>
+            Import Feed
+          </SwarmButton>
+        </ExpandableListItemActions>
+      </Box>
+      {identities.map((x, i) => (
+        <ExpandableList key={i} label={`${x.name} Website`} defaultOpen>
+          <Box mb={0.5}>
+            <ExpandableList label={x.name} level={1}>
+              <ExpandableListItemKey label="Identity address" value={x.address} />
+              <ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
+            </ExpandableList>
+          </Box>
+          <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+          {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={() => onShowExport(x)} iconType={Download}>
+                Export...
+              </SwarmButton>
+              <SwarmButton onClick={() => onShowDelete(x)} iconType={Trash}>
+                Delete...
+              </SwarmButton>
+            </ExpandableListItemActions>
+          </Box>
+        </ExpandableList>
+      ))}
+    </div>
+  )
+}

src/pages/files/AssetPreview.tsx

@@ -3,15 +3,18 @@ import { Web } from '@material-ui/icons'
 import { ReactElement, useEffect, useState } from 'react'
 import { File, Folder } from 'react-feather'
 import { FitImage } from '../../components/FitImage'
-import { detectIndexHtml, getHumanReadableFileSize } from '../../utils/file'
+import { detectIndexHtml, getAssetNameFromFiles, getHumanReadableFileSize } from '../../utils/file'
 import { SwarmFile } from '../../utils/SwarmFile'
 import { AssetIcon } from './AssetIcon'
 
 interface Props {
+  assetName?: string
   files: SwarmFile[]
 }
 
-export function AssetPreview({ files }: Props): ReactElement {
+// 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)
 
@@ -39,11 +42,13 @@ export function AssetPreview({ files }: Props): ReactElement {
   }, [files])
 
   const getPrimaryText = () => {
+    const name = getAssetNameFromFiles(files)
+
     if (files.length === 1) {
-      return 'Filename: ' + files[0].name
+      return 'Filename: ' + (assetName || name)
     }
 
-    return 'Folder name: ' + files[0].path.split('/')[0]
+    return 'Folder name: ' + (assetName || name)
   }
 
   const getKind = () => {
@@ -66,6 +71,8 @@ export function AssetPreview({ files }: Props): ReactElement {
     return getHumanReadableFileSize(bytes)
   }
 
+  const size = getSize()
+
   return (
     <Box mb={4}>
       <Box bgcolor="background.paper">
@@ -78,7 +85,7 @@ export function AssetPreview({ files }: Props): ReactElement {
           <Box p={2}>
             <Typography>{getPrimaryText()}</Typography>
             <Typography>Kind: {getKind()}</Typography>
-            <Typography>Size: {getSize()}</Typography>
+            {size !== '0 bytes' && <Typography>Size: {size}</Typography>}
           </Box>
         </Grid>
       </Box>

src/pages/files/AssetSummary.tsx

@@ -0,0 +1,35 @@
+import * as swarmCid from '@ethersphere/swarm-cid'
+import { Box } from '@material-ui/core'
+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[]
+  hash: string
+}
+
+export function AssetSummary({ files, 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) && (
+          <ExpandableListItemLink
+            label="BZZ Link"
+            value={`https://${swarmCid.encodeManifestReference(hash).toString()}.bzz.link`}
+          />
+        )}
+      </Box>
+      <DocumentationText>
+        The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided
+        for testing purposes only. Learn more at{' '}
+        <a href="https://gateway.ethswarm.org/">https://gateway.ethswarm.org/</a>.
+      </DocumentationText>
+    </>
+  )
+}

src/pages/files/Download.tsx

@@ -1,41 +1,60 @@
 import { Utils } from '@ethersphere/bee-js'
-import { Box } from '@material-ui/core'
+import { ManifestJs } from '@ethersphere/manifest-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
+import { useHistory } 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 { convertBeeFileToBrowserFile } from '../../utils/file'
-import { SwarmFile } from '../../utils/SwarmFile'
-import { AssetPreview } from './AssetPreview'
-import { DownloadActionBar } from './DownloadActionBar'
+import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { FileNavigation } from './FileNavigation'
 
-export default function Files(): ReactElement {
-  const { apiUrl, beeApi } = useContext(SettingsContext)
-
-  const [reference, setReference] = useState('')
+export function Download(): ReactElement {
+  const [loading, setLoading] = useState(false)
+  const { beeApi } = useContext(SettingsContext)
   const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
-  const [downloadedFile, setDownloadedFile] = useState<Partial<File> | null>(null)
+
+  const { setUploadOrigin } = useContext(Context)
 
   const { enqueueSnackbar } = useSnackbar()
+  const history = useHistory()
 
   const validateChange = (value: string) => {
-    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128)) setReferenceError(undefined)
-    else setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
-  }
-
-  function onDownload() {
-    window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
+    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) {
+      setReferenceError(undefined)
+    } else {
+      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+    }
   }
 
   async function onSwarmIdentifier(identifier: string) {
+    setLoading(true)
+
     if (!beeApi) {
+      setLoading(false)
+
       return
     }
-    setReference(identifier)
+
     try {
-      const response = await beeApi.downloadFile(identifier)
-      setDownloadedFile(convertBeeFileToBrowserFile(response))
+      const manifestJs = new ManifestJs(beeApi)
+      const feedIdentifier = await manifestJs.resolveFeedManifest(identifier)
+
+      if (feedIdentifier) {
+        identifier = feedIdentifier
+      }
+      const isManifest = await manifestJs.isManifest(identifier)
+
+      if (!isManifest) {
+        throw Error('The specified hash does not contain valid content.')
+      }
+      const indexDocument = await manifestJs.getIndexDocumentPath(identifier)
+      putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, identifier, determineHistoryName(identifier, indexDocument))
+      setUploadOrigin(defaultUploadOrigin)
+      history.push(ROUTES.HASH.replace(':hash', identifier))
     } catch (error: unknown) {
       let message = typeof error === 'object' && error !== null && Reflect.get(error, 'message')
 
@@ -47,20 +66,11 @@ export default function Files(): ReactElement {
         message = 'The specified hash was not found.'
       }
       enqueueSnackbar(<span>Error: {message || 'Unknown'}</span>, { variant: 'error' })
+    } finally {
+      setLoading(false)
     }
   }
 
-  if (downloadedFile) {
-    return (
-      <>
-        <Box mb={4}>
-          <AssetPreview files={[new SwarmFile(downloadedFile as File)]} />
-        </Box>
-        <DownloadActionBar onCancel={() => setDownloadedFile(null)} onDownload={onDownload} />
-      </>
-    )
-  }
-
   function recognizeSwarmHash(value: string) {
     if (value.length < 64) {
       return value
@@ -76,16 +86,21 @@ export default function Files(): ReactElement {
   }
 
   return (
-    <ExpandableListItemInput
-      label="Swarm Hash"
-      onConfirm={value => onSwarmIdentifier(value)}
-      onChange={validateChange}
-      helperText={referenceError}
-      confirmLabel={'Search'}
-      confirmLabelDisabled={Boolean(referenceError)}
-      placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
-      expandedOnly
-      mapperFn={value => recognizeSwarmHash(value)}
-    />
+    <>
+      <FileNavigation active="DOWNLOAD" />
+      <ExpandableListItemInput
+        label="Swarm Hash"
+        onConfirm={value => onSwarmIdentifier(value)}
+        onChange={validateChange}
+        helperText={referenceError}
+        confirmLabel={'Find'}
+        confirmLabelDisabled={Boolean(referenceError) || loading}
+        placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
+        expandedOnly
+        mapperFn={value => recognizeSwarmHash(value)}
+        loading={loading}
+      />
+      <History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />
+    </>
   )
 }

src/pages/files/DownloadActionBar.tsx

@@ -1,24 +1,46 @@
-import { Button } from '@material-ui/core'
-import { Clear } from '@material-ui/icons'
+import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Download } from 'react-feather'
+import { Bookmark, Download, Link, X } from 'react-feather'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 
 interface Props {
-  onDownload: () => void
+  onOpen: () => void
   onCancel: () => void
+  onDownload: () => void
+  onUpdateFeed: () => void
+  hasIndexDocument: boolean
+  loading: boolean
 }
 
-export function DownloadActionBar({ onDownload, onCancel }: Props): ReactElement {
+export function DownloadActionBar({
+  onOpen,
+  onCancel,
+  onDownload,
+  onUpdateFeed,
+  hasIndexDocument,
+  loading,
+}: Props): ReactElement {
   return (
-    <ExpandableListItemActions>
-      <SwarmButton onClick={onDownload} iconType={Download}>
-        Download This File
-      </SwarmButton>
-      <Button onClick={onCancel} variant="contained" startIcon={<Clear />}>
-        Cancel
-      </Button>
-    </ExpandableListItemActions>
+    <Grid container justifyContent="space-between">
+      <ExpandableListItemActions>
+        {hasIndexDocument && (
+          <SwarmButton onClick={onOpen} iconType={Link} disabled={loading}>
+            View Website
+          </SwarmButton>
+        )}
+        <SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
+          Download
+        </SwarmButton>
+        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} loading={loading} cancel>
+          Close
+        </SwarmButton>
+      </ExpandableListItemActions>
+      <Box mb={1} mr={1}>
+        <SwarmButton onClick={onUpdateFeed} iconType={Bookmark}>
+          Update Feed
+        </SwarmButton>
+      </Box>
+    </Grid>
   )
 }

src/pages/files/FileNavigation.tsx

@@ -0,0 +1,41 @@
+import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { useHistory } from 'react-router-dom'
+import { ROUTES } from '../../routes'
+
+interface Props {
+  active: 'UPLOAD' | 'DOWNLOAD'
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+      marginBottom: theme.spacing(4),
+    },
+    leftTab: {
+      marginRight: theme.spacing(0.5),
+    },
+    rightTab: {
+      marginLeft: theme.spacing(0.5),
+    },
+  }),
+)
+
+export function FileNavigation({ active }: Props): ReactElement {
+  const classes = useStyles()
+  const history = useHistory()
+
+  function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
+    history.push(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD)
+  }
+
+  return (
+    <div className={classes.root}>
+      <Tabs value={active === 'UPLOAD' ? 0 : 1} onChange={onChange} variant="fullWidth">
+        <Tab className={classes.leftTab} key="UPLOAD" label="Upload" />
+        <Tab className={classes.rightTab} key="DOWNLOAD" label="Download" />
+      </Tabs>
+    </div>
+  )
+}

src/pages/files/PostUploadSummary.tsx

@@ -1,38 +0,0 @@
-import { Box, Typography } from '@material-ui/core'
-import { ReactElement } from 'react'
-import { CornerUpLeft } from 'react-feather'
-import ExpandableListItemActions from '../../components/ExpandableListItemActions'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-import ExpandableListItemLink from '../../components/ExpandableListItemLink'
-import { SwarmButton } from '../../components/SwarmButton'
-
-interface Props {
-  uploadReference: string
-  onUploadNewClick: () => void
-}
-
-export function PostUploadSummary({ uploadReference, onUploadNewClick }: Props): ReactElement {
-  return (
-    <>
-      <Box mb={4}>
-        <ExpandableListItemKey label="Swarm hash" value={uploadReference} />
-        <ExpandableListItemLink
-          label="Share on Swarm Gateway"
-          value={`https://gateway.ethswarm.org/access/${uploadReference}`}
-        />
-      </Box>
-      <Box mb={2}>
-        <ExpandableListItemActions>
-          <SwarmButton onClick={onUploadNewClick} iconType={CornerUpLeft}>
-            Back to Upload
-          </SwarmButton>
-        </ExpandableListItemActions>
-      </Box>
-      <Typography>
-        The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided
-        for testing purposes only. Learn more at{' '}
-        <a href="https://gateway.ethswarm.org/">https://gateway.ethswarm.org/</a>.
-      </Typography>
-    </>
-  )
-}

src/pages/files/Share.tsx

@@ -0,0 +1,149 @@
+import { ManifestJs } from '@ethersphere/manifest-js'
+import { Box, Typography } from '@material-ui/core'
+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 { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+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 {
+  const { apiUrl, beeApi } = useContext(SettingsContext)
+  const { status } = useContext(BeeContext)
+
+  const reference = props.match.params.hash
+
+  const history = useHistory()
+  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)
+
+  async function prepare() {
+    if (!beeApi || !status.all) {
+      return
+    }
+
+    const manifestJs = new ManifestJs(beeApi)
+    const isManifest = await manifestJs.isManifest(reference)
+
+    if (!isManifest) {
+      setNotFound(true)
+      enqueueSnackbar('The specified hash does not contain valid content.', { variant: 'error' })
+
+      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))
+    }
+  }
+
+  function onOpen() {
+    window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
+  }
+
+  function onClose() {
+    // POP means there is no history - nowhere to go back yet
+    if (history.action === 'POP') {
+      history.push(ROUTES.UPLOAD)
+    } else {
+      history.goBack()
+    }
+  }
+
+  function onUpdateFeed() {
+    history.push(ROUTES.FEEDS_UPDATE.replace(':hash', reference))
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    prepare().finally(() => {
+      setLoading(false)
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reference])
+
+  async function onDownload() {
+    if (!beeApi) {
+      return
+    }
+    putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, reference, determineHistoryName(reference, indexDocument))
+    setDownloading(true)
+
+    if (Object.keys(swarmEntries).length === 1) {
+      window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
+    } else {
+      const zip = new JSZip()
+      for (const [path, hash] of Object.entries(swarmEntries)) {
+        zip.file(path, await beeApi.downloadData(hash))
+      }
+      const content = await zip.generateAsync({ type: 'blob' })
+      saveAs(content, reference + '.zip')
+    }
+    setDownloading(false)
+  }
+
+  const assetName = shortenHash(reference)
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  if (loading) {
+    return <Loading />
+  }
+
+  if (notFound) {
+    return (
+      <>
+        <HistoryHeader>Not Found</HistoryHeader>
+        <Typography>The specified hash is not found.</Typography>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Box mb={4}>
+        <AssetPreview files={files} assetName={assetName} />
+      </Box>
+      <Box mb={4}>
+        <AssetSummary files={files} hash={reference} />
+      </Box>
+      <DownloadActionBar
+        onOpen={onOpen}
+        onCancel={onClose}
+        onDownload={onDownload}
+        onUpdateFeed={onUpdateFeed}
+        hasIndexDocument={Boolean(indexDocument && files.length > 1)}
+        loading={downloading}
+      />
+    </>
+  )
+}

src/pages/files/Upload.tsx

@@ -1,46 +1,71 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Box } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useHistory } 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 { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
-import { detectIndexHtml } from '../../utils/file'
-import { SwarmFile } from '../../utils/SwarmFile'
-import { CreatePostageStampModal } from '../stamps/CreatePostageStampModal'
-import { SelectPostageStampModal } from '../stamps/SelectPostageStampModal'
+import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
+import { ROUTES } from '../../routes'
+import { detectIndexHtml, getAssetNameFromFiles } from '../../utils/file'
+import { persistIdentity, updateFeed } from '../../utils/identity'
+import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { FeedPasswordDialog } from '../feeds/FeedPasswordDialog'
+import { PostageStampCreation } from '../stamps/PostageStampCreation'
+import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
-import { PostUploadSummary } from './PostUploadSummary'
 import { StampPreview } from './StampPreview'
 import { UploadActionBar } from './UploadActionBar'
-import { UploadArea } from './UploadArea'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    content: { marginTop: theme.spacing(2) },
-    loadingProgress: { textAlign: 'center', padding: '50px' },
-  }),
-)
-
-const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
-
-export default function Files(): ReactElement {
-  const classes = useStyles()
-  const [dropzoneKey, setDropzoneKey] = useState(0)
-  const [files, setFiles] = useState<SwarmFile[]>([])
-  const [uploadReference, setUploadReference] = useState('')
-  const [isBuyingStamp, setBuyingStamp] = useState(false)
-  const [isSelectingStamp, setSelectingStamp] = useState(false)
+export function Upload(): ReactElement {
+  const [step, setStep] = useState(0)
+  const [stampMode, setStampMode] = useState<'SELECT' | 'BUY'>('SELECT')
   const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
   const [isUploading, setUploading] = useState(false)
+  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
 
-  const { stamps, refresh } = useContext(Context)
+  const { refresh } = useContext(StampsContext)
   const { beeApi } = useContext(SettingsContext)
+  const { files, setFiles, uploadOrigin } = useContext(FileContext)
+  const { identities, setIdentities } = useContext(IdentityContext)
+  const { status } = useContext(BeeContext)
+
   const { enqueueSnackbar } = useSnackbar()
+  const history = useHistory()
 
   useEffect(() => {
     refresh()
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const uploadFiles = () => {
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  if (!files.length) {
+    setFiles([])
+    history.replace(ROUTES.UPLOAD)
+
+    return <></>
+  }
+
+  const identity = uploadOrigin.uuid ? identities.find(x => x.uuid === uploadOrigin.uuid) : null
+
+  const onUpload = () => {
+    if (uploadOrigin.origin === 'UPLOAD') {
+      uploadFiles()
+    } else {
+      if ((identity as Identity).type === 'PRIVATE_KEY') {
+        uploadFiles()
+      } else {
+        setShowPasswordPrompt(true)
+      }
+    }
+  }
+
+  const uploadFiles = (password?: string) => {
     if (!beeApi || !files.length || !stamp) {
       return
     }
@@ -51,58 +76,89 @@ export default function Files(): ReactElement {
 
     beeApi
       .uploadFiles(stamp.batchID, files as unknown as File[], { indexDocument })
-      .then(hash => setUploadReference(hash.reference))
-      .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
-      .finally(() => setUploading(false))
+      .then(hash => {
+        putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
+
+        if (uploadOrigin.origin === 'UPLOAD') {
+          history.replace(ROUTES.HASH.replace(':hash', hash.reference))
+        } 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))
+          })
+        }
+      })
+      .catch(e => {
+        enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
+        setUploading(false)
+      })
   }
 
   const reset = () => {
+    setStep(0)
     setFiles([])
     setStamp(null)
     setUploading(false)
   }
 
-  const uploadNew = () => {
-    setTimeout(() => {
-      reset()
-      setDropzoneKey(dropzoneKey + 1)
-      setUploadReference('')
-    }, 0)
+  const onFeedPasswordGiven = (password: string) => {
+    uploadFiles(password)
   }
 
   return (
     <>
-      {files.length ? (
-        <AssetPreview files={files} />
-      ) : (
-        <UploadArea maximumSizeInBytes={MAX_FILE_SIZE} setFiles={setFiles} />
+      {showPasswordPrompt && (
+        <FeedPasswordDialog
+          loading={isUploading}
+          feedName={(identity as Identity).name}
+          onCancel={() => setShowPasswordPrompt(false)}
+          onProceed={onFeedPasswordGiven}
+        />
       )}
-      {stamp !== null && !uploadReference ? <StampPreview stamp={stamp} /> : null}
-      {files.length && !uploadReference ? (
-        <UploadActionBar
-          canSelectStamp={stamps !== null && stamps.length > 0}
-          hasSelectedStamp={stamp !== null}
-          onCancel={reset}
-          onBuy={() => setBuyingStamp(true)}
-          onSelect={() => setSelectingStamp(true)}
-          onUpload={uploadFiles}
-          onClearStamp={() => setStamp(null)}
-          isUploading={isUploading}
-        />
-      ) : null}
-      <div className={classes.content}>
-        {uploadReference && (
-          <PostUploadSummary onUploadNewClick={() => uploadNew()} uploadReference={uploadReference} />
-        )}
-      </div>
-      {isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
-      {stamps && isSelectingStamp ? (
-        <SelectPostageStampModal
-          stamps={stamps}
-          onClose={() => setSelectingStamp(false)}
-          onSelect={stamp => setStamp(stamp)}
-        />
-      ) : null}
+      {identity && <HistoryHeader>{`Update "${identity.name}"`}</HistoryHeader>}
+      {!identity && <HistoryHeader>Upload</HistoryHeader>}
+      <Box mb={4}>
+        <ProgressIndicator steps={['Preview', 'Add postage stamp', 'Upload to node']} index={step} />
+      </Box>
+      {(step === 0 || step === 2) && <AssetPreview files={files} />}
+      {step === 1 && (
+        <>
+          <Box mb={2}>
+            {stampMode === 'SELECT' ? (
+              <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
+            ) : (
+              <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
+            )}
+          </Box>
+          <Box mb={4}>
+            <DocumentationText>
+              Please refer to the{' '}
+              <a
+                href="https://docs.ethswarm.org/debug-api/#tag/Postage-Stamps/paths/~1stamps~1{amount}~1{depth}/post"
+                target="_blank"
+                rel="noreferrer"
+              >
+                official Bee documentation
+              </a>{' '}
+              to understand these values.
+            </DocumentationText>
+          </Box>
+        </>
+      )}
+      {step === 2 && stamp && <StampPreview stamp={stamp} />}
+      <UploadActionBar
+        step={step}
+        onCancel={reset}
+        onGoBack={() => setStep(step => step - 1)}
+        onProceed={() => setStep(step => step + 1)}
+        onUpload={onUpload}
+        isUploading={isUploading}
+        hasStamp={Boolean(stamp)}
+        uploadLabel={identity ? 'Update Feed' : 'Upload To Your Node'}
+        stampMode={stampMode}
+        setStampMode={setStampMode}
+      />
     </>
   )
 }

src/pages/files/UploadActionBar.tsx

@@ -1,69 +1,88 @@
-import { Button, Typography } from '@material-ui/core'
-import { Clear } from '@material-ui/icons'
+import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Check, Layers, PlusSquare, RefreshCcw } from 'react-feather'
+import { ArrowLeft, Check, Layers, PlusSquare, X } from 'react-feather'
+import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 
 interface Props {
-  canSelectStamp: boolean
-  hasSelectedStamp: boolean
+  step: number
   onUpload: () => void
-  onBuy: () => void
-  onSelect: () => void
   onCancel: () => void
-  onClearStamp: () => void
+  onGoBack: () => void
+  onProceed: () => void
   isUploading: boolean
+  hasStamp: boolean
+  uploadLabel: string
+  stampMode: 'BUY' | 'SELECT'
+  setStampMode: (mode: 'BUY' | 'SELECT') => void
 }
 
 export function UploadActionBar({
-  canSelectStamp,
-  hasSelectedStamp,
+  step,
   onUpload,
-  onBuy,
-  onSelect,
   onCancel,
-  onClearStamp,
+  onGoBack,
+  onProceed,
   isUploading,
+  hasStamp,
+  uploadLabel,
+  stampMode,
+  setStampMode,
 }: Props): ReactElement {
-  const showBuy = !hasSelectedStamp
-  const showSelect = canSelectStamp && !hasSelectedStamp
-  const showUpload = hasSelectedStamp
-  const showChange = canSelectStamp && hasSelectedStamp
+  if (step === 0) {
+    return (
+      <>
+        <Box mb={1}>
+          <ExpandableListItemActions>
+            <SwarmButton onClick={onProceed} iconType={Layers}>
+              Add Postage Stamp
+            </SwarmButton>
+            <SwarmButton onClick={onCancel} iconType={X} cancel>
+              Cancel
+            </SwarmButton>
+          </ExpandableListItemActions>
+        </Box>
+        <DocumentationText>You need a postage stamp to upload.</DocumentationText>
+      </>
+    )
+  }
 
-  return (
-    <>
+  if (step === 1) {
+    return (
+      <Grid container direction="row" justifyContent="space-between">
+        <ExpandableListItemActions>
+          {stampMode === 'SELECT' && (
+            <SwarmButton onClick={onProceed} iconType={Check} disabled={!hasStamp}>
+              Proceed With Selected Stamp
+            </SwarmButton>
+          )}
+          <SwarmButton onClick={onGoBack} iconType={ArrowLeft} cancel>
+            Back To Preview
+          </SwarmButton>
+        </ExpandableListItemActions>
+        <SwarmButton
+          onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
+          iconType={stampMode === 'BUY' ? Layers : PlusSquare}
+        >
+          {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
+        </SwarmButton>
+      </Grid>
+    )
+  }
+
+  if (step === 2) {
+    return (
       <ExpandableListItemActions>
-        {showBuy ? (
-          <SwarmButton onClick={onBuy} iconType={PlusSquare}>
-            Buy New Postage Stamp
-          </SwarmButton>
-        ) : null}
-        {showSelect ? (
-          <SwarmButton onClick={onSelect} iconType={Layers}>
-            Use Existing Postage Stamp
-          </SwarmButton>
-        ) : null}
-        {showUpload ? (
-          <SwarmButton onClick={onUpload} iconType={Check} disabled={isUploading} loading={isUploading}>
-            Upload To Your Node
-          </SwarmButton>
-        ) : null}
-        {showChange ? (
-          <SwarmButton onClick={onClearStamp} iconType={RefreshCcw} disabled={isUploading}>
-            Change Postage Stamp
-          </SwarmButton>
-        ) : null}
-        <Button onClick={onCancel} variant="contained" startIcon={<Clear />}>
-          Cancel
-        </Button>
+        <SwarmButton onClick={onUpload} iconType={Check} disabled={isUploading} loading={isUploading}>
+          {uploadLabel}
+        </SwarmButton>
+        <SwarmButton onClick={onGoBack} iconType={ArrowLeft} disabled={isUploading} cancel>
+          Change Postage Stamp
+        </SwarmButton>
       </ExpandableListItemActions>
-      {showSelect ? (
-        <Typography>
-          You need a postage stamp to upload. Please refer to the official Bee documentation to understand how postage
-          stamps work.
-        </Typography>
-      ) : null}
-    </>
-  )
+    )
+  }
+
+  return <></>
 }

src/pages/files/UploadArea.tsx

@@ -1,17 +1,23 @@
-import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
 import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
-import { ReactElement } from 'react'
-import { FilePlus } from 'react-feather'
+import { ReactElement, useContext, useState } from 'react'
+import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
+import { useHistory } 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 {
-  setFiles: (files: SwarmFile[]) => void
-  maximumSizeInBytes: number
+  uploadOrigin: UploadOrigin
+  showHelp: boolean
 }
 
+const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     areaWrapper: { position: 'relative', marginBottom: theme.spacing(2) },
@@ -42,15 +48,17 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 )
 
-export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElement {
+export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
+  const { setFiles, setUploadOrigin } = useContext(Context)
   const classes = useStyles()
-
+  const history = useHistory()
   const { enqueueSnackbar } = useSnackbar()
+  const [strictWebsiteMode, setStrictWebsiteMode] = useState(false)
+  const [version, setVersion] = useState(0)
 
   const getDropzoneInputDomElement = () => document.querySelector('.MuiDropzoneArea-root input') as HTMLInputElement
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const onUploadFolderClick = () => {
+  const onUploadCollectionClick = () => {
     const element = getDropzoneInputDomElement()
 
     if (element) {
@@ -61,6 +69,16 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
     }
   }
 
+  const onUploadWebsiteClick = () => {
+    onUploadCollectionClick()
+    setStrictWebsiteMode(true)
+  }
+
+  const onUploadFolderClick = () => {
+    onUploadCollectionClick()
+    setStrictWebsiteMode(false)
+  }
+
   const onUploadFileClick = () => {
     const element = getDropzoneInputDomElement()
 
@@ -72,9 +90,9 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
     }
   }
 
-  const resetComponentOnAddingInvalidContent = (files: SwarmFile[]) => {
-    setFiles(files)
+  const resetComponentOnAddingInvalidContent = () => {
     setTimeout(() => {
+      setVersion(x => x + 1)
       setFiles([])
     }, 0)
   }
@@ -84,16 +102,21 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
       const swarmFiles = files.map(x => new SwarmFile(x))
       const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(swarmFiles) || undefined
 
-      if (files.length && !indexDocument) {
+      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.', {
           variant: 'error',
         })
-        resetComponentOnAddingInvalidContent(swarmFiles)
+        resetComponentOnAddingInvalidContent()
 
         return
       }
 
       setFiles(swarmFiles)
+
+      if (files.length) {
+        setUploadOrigin(uploadOrigin)
+        history.push(ROUTES.UPLOAD_IN_PROGRESS)
+      }
     }
   }
 
@@ -101,19 +124,31 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
     <>
       <div className={classes.areaWrapper}>
         <DropzoneArea
+          key={version}
           dropzoneClass={classes.dropzone}
           onChange={handleChange}
-          filesLimit={1}
-          maxFileSize={maximumSizeInBytes}
+          filesLimit={1e9}
+          maxFileSize={MAX_FILE_SIZE}
           showPreviews={false}
         />
         <div className={classes.buttonWrapper}>
           <SwarmButton className={classes.button} onClick={onUploadFileClick} iconType={FilePlus}>
             Add File
           </SwarmButton>
+          <SwarmButton className={classes.button} onClick={onUploadFolderClick} iconType={FolderPlus}>
+            Add Folder
+          </SwarmButton>
+          <SwarmButton className={classes.button} onClick={onUploadWebsiteClick} iconType={PlusCircle}>
+            Add Website
+          </SwarmButton>
         </div>
       </div>
-      <Typography>You can click the button above or simply drag and drop to add a file.</Typography>
+      {showHelp && (
+        <DocumentationText>
+          You can click the buttons above or simply drag and drop to add a file or folder. To upload a website to Swarm,
+          make sure that your folder contains an “index.html” file.
+        </DocumentationText>
+      )}
     </>
   )
 }

src/pages/files/UploadLander.tsx

@@ -0,0 +1,22 @@
+import { ReactElement, useContext } from 'react'
+import { History } from '../../components/History'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+import { defaultUploadOrigin } from '../../providers/File'
+import { HISTORY_KEYS } from '../../utils/local-storage'
+import { FileNavigation } from './FileNavigation'
+import { UploadArea } from './UploadArea'
+
+export function UploadLander(): ReactElement {
+  const { status } = useContext(BeeContext)
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <>
+      <FileNavigation active="UPLOAD" />
+      <UploadArea showHelp={true} uploadOrigin={defaultUploadOrigin} />
+      <History title="Upload History" localStorageKey={HISTORY_KEYS.UPLOAD_HISTORY} />
+    </>
+  )
+}

src/pages/files/index.tsx

@@ -1,28 +0,0 @@
-import { ReactElement, useContext } from 'react'
-
-import Download from './Download'
-import Upload from './Upload'
-import TabsContainer from '../../components/TabsContainer'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
-
-export default function Files(): ReactElement {
-  const { status } = useContext(BeeContext)
-
-  if (!status.all) return <TroubleshootConnectionCard />
-
-  return (
-    <TabsContainer
-      values={[
-        {
-          label: 'download',
-          component: <Download />,
-        },
-        {
-          label: 'upload',
-          component: <Upload />,
-        },
-      ]}
-    />
-  )
-}

src/pages/settings/index.tsx

@@ -1,15 +1,20 @@
 import { ReactElement, useContext } from 'react'
-import { Context as SettingsContext } from '../../providers/Settings'
 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 } = useContext(SettingsContext)
+  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl, lockedApiSettings } = useContext(SettingsContext)
 
   return (
     <ExpandableList label="API Settings" defaultOpen>
-      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
-      <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
+      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} locked={lockedApiSettings} />
+      <ExpandableListItemInput
+        label="Bee Debug API"
+        value={apiDebugUrl}
+        onConfirm={setDebugApiUrl}
+        locked={lockedApiSettings}
+      />
     </ExpandableList>
   )
 }

src/pages/stamps/CreatePostageStampModal.tsx

@@ -1,152 +0,0 @@
-import Button from '@material-ui/core/Button'
-import CircularProgress from '@material-ui/core/CircularProgress'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import BigNumber from 'bignumber.js'
-import { Field, Form, Formik, FormikHelpers } from 'formik'
-import { TextField } from 'formik-material-ui'
-import { useSnackbar } from 'notistack'
-import React, { ReactElement, useContext } from 'react'
-import { Context as SettingsContext } from '../../providers/Settings'
-import { Context } from '../../providers/Stamps'
-
-interface FormValues {
-  depth?: string
-  amount?: string
-  label?: string
-}
-type FormErrors = Partial<FormValues>
-const initialFormValues: FormValues = {
-  depth: '',
-  amount: '',
-  label: '',
-}
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    wrapper: {
-      margin: theme.spacing(1),
-      position: 'relative',
-    },
-    field: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
-    },
-    buttonProgress: {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      marginTop: -12,
-      marginBottom: -12,
-    },
-  }),
-)
-
-interface Props {
-  onClose: () => void
-}
-
-export function CreatePostageStampModal({ onClose }: Props): ReactElement {
-  const classes = useStyles()
-  const { refresh } = useContext(Context)
-  const { beeDebugApi } = useContext(SettingsContext)
-  const { enqueueSnackbar } = useSnackbar()
-
-  return (
-    <Formik
-      initialValues={initialFormValues}
-      onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
-        try {
-          // This is really just a typeguard, the validation pretty much guarantees these will have the right values
-          if (!values.depth || !values.amount) return
-
-          if (!beeDebugApi) return
-
-          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)
-          actions.resetForm()
-          await refresh()
-          onClose()
-        } catch (e) {
-          enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
-          actions.setSubmitting(false)
-        }
-      }}
-      validate={(values: FormValues) => {
-        const errors: FormErrors = {}
-
-        // Depth
-        if (!values.depth) errors.depth = 'Required field'
-        else {
-          const depth = new BigNumber(values.depth)
-
-          if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
-          else if (depth.isLessThan(16)) errors.depth = 'Minimal depth is 16'
-          else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
-        }
-
-        // Amount
-        if (!values.amount) errors.amount = 'Required field'
-        else {
-          const amount = new BigNumber(values.amount)
-
-          if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
-          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 }) => (
-        <Form>
-          <Dialog open={true} onClose={onClose} aria-labelledby="form-dialog-title">
-            <DialogTitle id="form-dialog-title">Buy new postage stamp</DialogTitle>
-            <DialogContent>
-              <Field
-                component={TextField}
-                required
-                name="depth"
-                autoFocus
-                label="Depth"
-                fullWidth
-                className={classes.field}
-              />
-              <Field component={TextField} required name="amount" label="Amount" fullWidth className={classes.field} />
-              <Field component={TextField} name="label" label="Label" fullWidth className={classes.field} />
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={onClose} variant="contained">
-                Cancel
-              </Button>
-              <div className={classes.wrapper}>
-                <Button
-                  disabled={isSubmitting || !isValid || !values.amount || !values.depth}
-                  type="submit"
-                  variant="contained"
-                  onClick={submitForm}
-                >
-                  Create
-                  {isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
-                </Button>
-              </div>
-            </DialogActions>
-            <DialogContent>
-              <DialogContentText>
-                Please refer to the official Bee documentation to understand these values.
-              </DialogContentText>
-            </DialogContent>
-          </Dialog>
-        </Form>
-      )}
-    </Formik>
-  )
-}

src/pages/stamps/CreatePostageStampPage.tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react'
+import { useHistory } from 'react-router'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { ROUTES } from '../../routes'
+import { PostageStampCreation } from './PostageStampCreation'
+
+export function CreatePostageStampPage(): ReactElement {
+  const history = useHistory()
+
+  function onFinished() {
+    history.push(ROUTES.STAMPS)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>Buy new postage stamp</HistoryHeader>
+      <PostageStampCreation onFinished={onFinished} />
+    </div>
+  )
+}

src/pages/stamps/PostageStampCreation.tsx

@@ -0,0 +1,157 @@
+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 { Check } from 'react-feather'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context } from '../../providers/Stamps'
+import {
+  calculateStampPrice,
+  convertAmountToSeconds,
+  convertDepthToBytes,
+  formatBzz,
+  secondsToTimeString,
+} from '../../utils'
+import { getHumanReadableFileSize } from '../../utils/file'
+
+interface FormValues {
+  depth?: string
+  amount?: string
+  label?: string
+}
+type FormErrors = Partial<FormValues>
+const initialFormValues: FormValues = {
+  depth: '',
+  amount: '',
+  label: '',
+}
+
+interface Props {
+  onFinished: () => void
+}
+
+export function PostageStampCreation({ onFinished }: Props): ReactElement {
+  const { refresh } = useContext(Context)
+  const { beeDebugApi } = useContext(SettingsContext)
+  const { enqueueSnackbar } = useSnackbar()
+
+  function getFileSize(depth: number): string {
+    if (isNaN(depth) || depth < 17 || depth > 255) {
+      return '-'
+    }
+
+    return `~${getHumanReadableFileSize(convertDepthToBytes(depth))}`
+  }
+
+  function getTtl(amount: number): string {
+    if (isNaN(amount) || amount <= 0) {
+      return '-'
+    }
+
+    return secondsToTimeString(convertAmountToSeconds(amount))
+  }
+
+  function getPrice(depth: number, amount: number): string {
+    if (isNaN(amount) || amount <= 0 || isNaN(depth) || depth < 17 || depth > 255) {
+      return '-'
+    }
+    const price = calculateStampPrice(depth, amount)
+
+    return `${formatBzz(price)} BZZ`
+  }
+
+  return (
+    <Formik
+      initialValues={initialFormValues}
+      onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
+        try {
+          // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+          if (!values.depth || !values.amount) return
+
+          if (!beeDebugApi) return
+
+          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)
+          actions.resetForm()
+          await refresh()
+          onFinished()
+        } catch (e) {
+          enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+          actions.setSubmitting(false)
+        }
+      }}
+      validate={(values: FormValues) => {
+        const errors: FormErrors = {}
+
+        // Depth
+        if (!values.depth) errors.depth = 'Required field'
+        else {
+          const depth = new BigNumber(values.depth)
+
+          if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
+          else if (depth.isLessThan(16)) errors.depth = 'Minimal depth is 16'
+          else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
+        }
+
+        // Amount
+        if (!values.amount) errors.amount = 'Required field'
+        else {
+          const amount = new BigNumber(values.amount)
+
+          if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
+          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 }) => (
+        <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>
+              </Grid>
+            </Box>
+          </Box>
+          <Box mb={2}>
+            <SwarmTextInput name="amount" label="Amount" formik />
+            <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>
+              </Grid>
+            </Box>
+          </Box>
+          <Box mb={2}>
+            <SwarmTextInput name="label" label="Label" optional formik />
+          </Box>
+          <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>
+            </Grid>
+          </Box>
+          <SwarmButton
+            disabled={isSubmitting || !isValid || !values.amount || !values.depth}
+            onClick={submitForm}
+            iconType={Check}
+            loading={isSubmitting}
+          >
+            Buy New Stamp
+          </SwarmButton>
+        </Form>
+      )}
+    </Formik>
+  )
+}

src/pages/stamps/PostageStampSelector.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement, useContext } from 'react'
+import { SwarmSelect } from '../../components/SwarmSelect'
+import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
+
+interface Props {
+  onSelect: (stamp: EnrichedPostageBatch) => void
+  defaultValue?: string
+}
+
+export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactElement {
+  const { stamps } = useContext(Context)
+
+  function onChange(stampId: string) {
+    if (!stamps) {
+      return
+    }
+    const stamp = stamps.find(x => x.batchID === stampId)
+
+    if (stamp) {
+      onSelect(stamp)
+    }
+  }
+
+  return (
+    <SwarmSelect
+      options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
+      onChange={event => onChange(event.target.value as string)}
+      defaultValue={defaultValue}
+    />
+  )
+}

src/pages/stamps/SelectPostageStampModal.tsx

@@ -1,4 +1,4 @@
-import { Box, createStyles, FormControl, makeStyles, MenuItem, Select, Theme, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import DialogContent from '@material-ui/core/DialogContent'
@@ -6,6 +6,7 @@ import DialogTitle from '@material-ui/core/DialogTitle'
 import { Check, Clear } from '@material-ui/icons'
 import React, { ReactElement, useState } from 'react'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmSelect } from '../../components/SwarmSelect'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 interface Props {
@@ -26,14 +27,6 @@ const useStyles = makeStyles((theme: Theme) =>
       color: '#606060',
       textAlign: 'center',
     },
-    select: {
-      background: theme.palette.background.paper,
-      borderRadius: 0,
-      border: 0,
-    },
-    option: {
-      height: '52px',
-    },
     hint: {
       marginBottom: '16px',
     },
@@ -72,46 +65,20 @@ export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): R
         Select postage stamp
       </DialogTitle>
       <DialogContent>
-        <FormControl fullWidth>
-          <Select
-            onChange={event => onChange(event.target.value as string)}
-            fullWidth
-            variant="outlined"
-            className={classes.select}
-            defaultValue=""
-          >
-            {stamps.map(x => (
-              <MenuItem key={x.batchID} value={x.batchID} className={classes.option}>
-                {x.batchID.slice(0, 8)}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        <SwarmSelect
+          options={stamps.map(x => ({ label: x.batchID, value: x.batchID }))}
+          onChange={event => onChange(event.target.value as string)}
+        />
       </DialogContent>
-      <Box mb={2}>
-        <DialogContent>
-          <ExpandableListItemActions>
-            <Button disabled={!selectedStamp} onClick={onFinish} variant="contained" startIcon={<Check />}>
-              Select
-            </Button>
-            <Button onClick={onClose} variant="contained" startIcon={<Clear />}>
-              Cancel
-            </Button>
-          </ExpandableListItemActions>
-        </DialogContent>
-      </Box>
       <DialogContent>
-        <Typography className={classes.hint}>
-          Please refer to the{' '}
-          <a
-            href="https://docs.ethswarm.org/docs/access-the-swarm/keep-your-data-alive#purchase-a-batch-of-stamps"
-            target="_blank"
-            rel="noreferrer"
-          >
-            official Bee documentation
-          </a>{' '}
-          to understand these values.
-        </Typography>
+        <ExpandableListItemActions>
+          <Button disabled={!selectedStamp} onClick={onFinish} variant="contained" startIcon={<Check />}>
+            Select
+          </Button>
+          <Button onClick={onClose} variant="contained" startIcon={<Clear />}>
+            Cancel
+          </Button>
+        </ExpandableListItemActions>
       </DialogContent>
     </Dialog>
   )

src/pages/stamps/StampsTable.tsx

@@ -1,8 +1,10 @@
 import type { ReactElement } from 'react'
 import ExpandableElement from '../../components/ExpandableElement'
 import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
+import { getHumanReadableFileSize } from '../../utils/file'
 import { PostageStamp } from './PostageStamp'
 
 interface Props {
@@ -17,7 +19,19 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
       {postageStamps.map(stamp => (
         <ExpandableElement
           key={stamp.batchID}
-          expandable={<ExpandableListItemKey label="Batch ID" value={stamp.batchID} />}
+          expandable={
+            <>
+              <ExpandableListItemKey label="Batch ID" value={stamp.batchID} />
+              <ExpandableListItem label="Depth" value={String(stamp.depth)} />
+              <ExpandableListItem
+                label="Capacity"
+                value={`${getHumanReadableFileSize(2 ** stamp.depth * 4096 * stamp.usage)} / ${getHumanReadableFileSize(
+                  2 ** stamp.depth * 4096,
+                )}`}
+              />
+              <ExpandableListItem label="Amount" value={parseInt(stamp.amount, 10).toLocaleString()} />
+            </>
+          }
         >
           <PostageStamp stamp={stamp} shorten={true} />
         </ExpandableElement>

src/pages/stamps/index.tsx

@@ -1,12 +1,13 @@
 import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { ReactElement, useContext, useEffect, useState } from 'react'
+import { ReactElement, useContext, useEffect } from 'react'
 import { PlusSquare } from 'react-feather'
+import { useHistory } from 'react-router'
 import { SwarmButton } from '../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as StampsContext } from '../../providers/Stamps'
-import { CreatePostageStampModal } from './CreatePostageStampModal'
+import { ROUTES } from '../../routes'
 import StampsTable from './StampsTable'
 
 const useStyles = makeStyles(() =>
@@ -28,7 +29,7 @@ const useStyles = makeStyles(() =>
 export default function Stamp(): ReactElement {
   const classes = useStyles()
 
-  const [isBuyingStamp, setBuyingStamp] = useState(false)
+  const history = useHistory()
 
   const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
   const { status } = useContext(BeeContext)
@@ -42,6 +43,10 @@ export default function Stamp(): ReactElement {
 
   if (!status.all) return <TroubleshootConnectionCard />
 
+  function navigateToNewStamp() {
+    history.push(ROUTES.STAMPS_NEW)
+  }
+
   return (
     <div className={classes.root}>
       {error && (
@@ -52,9 +57,7 @@ export default function Stamp(): ReactElement {
       {!error && (
         <>
           <div className={classes.actions}>
-            {isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
-
-            <SwarmButton onClick={() => setBuyingStamp(true)} iconType={PlusSquare}>
+            <SwarmButton onClick={navigateToNewStamp} iconType={PlusSquare}>
               Buy New Postage Stamp
             </SwarmButton>
             <div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>

src/providers/Bee.tsx

@@ -3,6 +3,7 @@ import type {
   Health,
   LastChequesResponse,
   NodeAddresses,
+  NodesInfo,
   Peer,
   Topology,
 } from '@ethersphere/bee-js'
@@ -35,6 +36,7 @@ interface ContextInterface {
   apiHealth: boolean
   debugApiHealth: Health | null
   nodeAddresses: NodeAddresses | null
+  nodeInfo: NodesInfo | null
   topology: Topology | null
   chequebookAddress: ChequebookAddressResponse | null
   peers: Peer[] | null
@@ -72,6 +74,7 @@ const initialValues: ContextInterface = {
   apiHealth: false,
   debugApiHealth: null,
   nodeAddresses: null,
+  nodeInfo: null,
   topology: null,
   chequebookAddress: null,
   peers: null,
@@ -98,6 +101,7 @@ interface Props {
 function getStatus(
   debugApiHealth: Health | null,
   nodeAddresses: NodeAddresses | null,
+  nodeInfo: NodesInfo | null,
   apiHealth: boolean,
   topology: Topology | null,
   chequebookAddress: ChequebookAddressResponse | null,
@@ -105,7 +109,7 @@ function getStatus(
   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)
+  const devMode = startedInDevMode || Boolean(process.env.REACT_APP_DEV_MODE) || nodeInfo?.beeMode === 'dev'
   const status = {
     version: Boolean(
       debugApiHealth &&
@@ -132,6 +136,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 [topology, setNodeTopology] = useState<Topology | null>(null)
   const [chequebookAddress, setChequebookAddress] = useState<ChequebookAddressResponse | null>(null)
   const [peers, setPeers] = useState<Peer[] | null>(null)
@@ -165,6 +170,7 @@ export function Provider({ children }: Props): ReactElement {
     setDebugApiHealth(null)
     setNodeAddresses(null)
     setNodeTopology(null)
+    setNodeInfo(null)
     setPeers(null)
     setChequebookAddress(null)
     setChequebookBalance(null)
@@ -241,6 +247,12 @@ export function Provider({ children }: Props): ReactElement {
           .then(setNodeAddresses)
           .catch(() => setNodeAddresses(null)),
 
+        // NodeInfo
+        beeDebugApi
+          .getNodeInfo()
+          .then(setNodeInfo)
+          .catch(() => setNodeInfo(null)),
+
         // Network Topology
         beeDebugApi
           .getTopology()
@@ -312,6 +324,7 @@ export function Provider({ children }: Props): ReactElement {
         status: getStatus(
           debugApiHealth,
           nodeAddresses,
+          nodeInfo,
           apiHealth,
           topology,
           chequebookAddress,
@@ -333,6 +346,7 @@ export function Provider({ children }: Props): ReactElement {
         apiHealth,
         debugApiHealth,
         nodeAddresses,
+        nodeInfo,
         topology,
         chequebookAddress,
         peers,

src/providers/Feeds.tsx

@@ -0,0 +1,43 @@
+import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
+
+export type IdentityType = 'V3' | 'PRIVATE_KEY'
+
+export interface Identity {
+  uuid: string
+  name: string
+  feedHash?: string
+  identity: string
+  address: string
+  type: IdentityType
+}
+
+interface ContextInterface {
+  identities: Identity[]
+  setIdentities: (identities: Identity[]) => void
+}
+
+const initialValues: ContextInterface = {
+  identities: [],
+  setIdentities: () => {}, // eslint-disable-line
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [identities, setIdentities] = useState<Identity[]>(initialValues.identities)
+
+  useEffect(() => {
+    try {
+      setIdentities(JSON.parse(localStorage.getItem('feeds') || '[]'))
+    } catch {
+      setIdentities([])
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return <Context.Provider value={{ identities, setIdentities }}>{children}</Context.Provider>
+}

src/providers/File.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+import { createContext, ReactChild, ReactElement, useState } from 'react'
+import { SwarmFile } from '../utils/SwarmFile'
+
+export type UploadOrigin = { origin: 'UPLOAD' | 'FEED'; uuid?: string }
+
+export const defaultUploadOrigin: UploadOrigin = { origin: 'UPLOAD' }
+
+interface ContextInterface {
+  files: SwarmFile[]
+  setFiles: (files: SwarmFile[]) => void
+  uploadOrigin: UploadOrigin
+  setUploadOrigin: (uploadOrigin: UploadOrigin) => void
+}
+
+const initialValues: ContextInterface = {
+  files: [],
+  setFiles: () => {},
+  uploadOrigin: defaultUploadOrigin,
+  setUploadOrigin: () => {},
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [files, setFiles] = useState<SwarmFile[]>(initialValues.files)
+  const [uploadOrigin, setUploadOrigin] = useState<UploadOrigin>(initialValues.uploadOrigin)
+
+  return <Context.Provider value={{ files, setFiles, uploadOrigin, setUploadOrigin }}>{children}</Context.Provider>
+}

src/providers/Settings.tsx

@@ -1,5 +1,6 @@
-import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
+import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
+import { config } from '../config'
 
 interface ContextInterface {
   apiUrl: string
@@ -8,16 +9,17 @@ interface ContextInterface {
   beeDebugApi: BeeDebug | null
   setApiUrl: (url: string) => void
   setDebugApiUrl: (url: string) => void
+  lockedApiSettings: boolean
 }
 
 const initialValues: ContextInterface = {
-  apiUrl: sessionStorage.getItem('api_host') || process.env.REACT_APP_BEE_HOST || 'http://localhost:1633',
-  apiDebugUrl:
-    sessionStorage.getItem('debug_api_host') || process.env.REACT_APP_BEE_DEBUG_HOST || 'http://localhost:1635',
+  apiUrl: config.BEE_API_HOST,
+  apiDebugUrl: config.BEE_DEBUG_API_HOST,
   beeApi: null,
   beeDebugApi: null,
   setApiUrl: () => {}, // eslint-disable-line
   setDebugApiUrl: () => {}, // eslint-disable-line
+  lockedApiSettings: false,
 }
 
 export const Context = createContext<ContextInterface>(initialValues)
@@ -25,13 +27,22 @@ export const Consumer = Context.Consumer
 
 interface Props {
   children: ReactChild
+  beeApiUrl?: string
+  beeDebugApiUrl?: string
+  lockedApiSettings?: boolean
 }
 
-export function Provider({ children }: Props): ReactElement {
+export function Provider({
+  children,
+  beeApiUrl,
+  beeDebugApiUrl,
+  lockedApiSettings: extLockedApiSettings,
+}: Props): ReactElement {
   const [apiUrl, setApiUrl] = useState<string>(initialValues.apiUrl)
   const [apiDebugUrl, setDebugApiUrl] = useState<string>(initialValues.apiDebugUrl)
   const [beeApi, setBeeApi] = useState<Bee | null>(null)
   const [beeDebugApi, setBeeDebugApi] = useState<BeeDebug | null>(null)
+  const [lockedApiSettings] = useState<boolean>(Boolean(extLockedApiSettings))
 
   useEffect(() => {
     try {
@@ -42,6 +53,14 @@ export function Provider({ children }: Props): ReactElement {
     }
   }, [apiUrl])
 
+  useEffect(() => {
+    if (beeApiUrl) setApiUrl(beeApiUrl)
+  }, [beeApiUrl])
+
+  useEffect(() => {
+    if (beeDebugApiUrl) setDebugApiUrl(beeDebugApiUrl)
+  }, [beeDebugApiUrl])
+
   useEffect(() => {
     try {
       setBeeDebugApi(new BeeDebug(apiDebugUrl))
@@ -52,7 +71,9 @@ export function Provider({ children }: Props): ReactElement {
   }, [apiDebugUrl])
 
   return (
-    <Context.Provider value={{ apiUrl, apiDebugUrl, beeApi, beeDebugApi, setApiUrl, setDebugApiUrl }}>
+    <Context.Provider
+      value={{ apiUrl, apiDebugUrl, beeApi, beeDebugApi, setApiUrl, setDebugApiUrl, lockedApiSettings }}
+    >
       {children}
     </Context.Provider>
   )

src/routes.tsx

@@ -1,31 +1,53 @@
 import type { ReactElement } from 'react'
-import { Switch } from 'react-router-dom'
-
-import { Route } from 'react-router-dom'
-
-import Info from './pages/info'
-import Status from './pages/status'
-import Files from './pages/files'
+import { Route, Switch } from 'react-router-dom'
 import Accounting from './pages/accounting'
+import Feeds from './pages/feeds'
+import CreateNewFeed from './pages/feeds/CreateNewFeed'
+import { FeedSubpage } from './pages/feeds/FeedSubpage'
+import UpdateFeed from './pages/feeds/UpdateFeed'
+import { Download } from './pages/files/Download'
+import { Share } from './pages/files/Share'
+import { Upload } from './pages/files/Upload'
+import { UploadLander } from './pages/files/UploadLander'
+import Info from './pages/info'
 import Settings from './pages/settings'
 import Stamps from './pages/stamps'
+import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
+import Status from './pages/status'
 
 export enum ROUTES {
   INFO = '/',
   FILES = '/files',
+  UPLOAD = '/files/upload',
+  UPLOAD_IN_PROGRESS = '/files/upload/workflow',
+  DOWNLOAD = '/files/download',
+  HASH = '/files/hash/:hash',
   ACCOUNTING = '/accounting',
   SETTINGS = '/settings',
   STAMPS = '/stamps',
+  STAMPS_NEW = '/stamps/new',
   STATUS = '/status',
+  FEEDS = '/feeds',
+  FEEDS_NEW = '/feeds/new',
+  FEEDS_UPDATE = '/feeds/update/:hash',
+  FEEDS_PAGE = '/feeds/:uuid',
 }
 
 const BaseRouter = (): ReactElement => (
   <Switch>
-    <Route exact path={ROUTES.FILES} component={Files} />
+    <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>
 )

src/utils/date.ts

@@ -0,0 +1,5 @@
+export function getPrettyDateString(date: Date): string {
+  const string = date.toString()
+
+  return string.split('GMT')[0].trim()
+}

src/utils/file.ts

@@ -30,6 +30,18 @@ export function detectIndexHtml(files: SwarmFile[]): string | false {
 }
 
 export function getHumanReadableFileSize(bytes: number): string {
+  if (bytes >= 1e15) {
+    return (bytes / 1e15).toFixed(2) + ' PB'
+  }
+
+  if (bytes >= 1e12) {
+    return (bytes / 1e12).toFixed(2) + ' TB'
+  }
+
+  if (bytes >= 1e9) {
+    return (bytes / 1e9).toFixed(2) + ' GB'
+  }
+
   if (bytes >= 1e6) {
     return (bytes / 1e6).toFixed(2) + ' MB'
   }
@@ -49,3 +61,29 @@ export function convertBeeFileToBrowserFile(file: FileData<ArrayBuffer>): Partia
     arrayBuffer: () => new Promise(resolve => resolve(file.data)),
   }
 }
+
+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]
+}

src/utils/hash.ts

@@ -0,0 +1,3 @@
+export function shortenHash(hash: string, sliceLength = 8): string {
+  return `${hash.slice(0, sliceLength)}[…]${hash.slice(-sliceLength)}`
+}

src/utils/identity.ts

@@ -0,0 +1,110 @@
+import { Bee, Reference } from '@ethersphere/bee-js'
+import Wallet from 'ethereumjs-wallet'
+import { uuidV4 } from '.'
+import { Identity, IdentityType } from '../providers/Feeds'
+
+export function generateWallet(): Wallet {
+  const buffer = new Uint8Array(32)
+  crypto.getRandomValues(buffer)
+  const wallet = new Wallet(Buffer.from(buffer))
+
+  return wallet
+}
+
+export function persistIdentity(identities: Identity[], identity: Identity): void {
+  const existingIndex = identities.findIndex(x => x.uuid === identity.uuid)
+
+  if (existingIndex !== -1) {
+    identities.splice(existingIndex, 1)
+  }
+  identities.unshift(identity)
+  localStorage.setItem('feeds', JSON.stringify(identities))
+}
+
+export function persistIdentitiesWithoutUpdate(identities: Identity[]): void {
+  localStorage.setItem('feeds', JSON.stringify(identities))
+}
+
+export async function convertWalletToIdentity(
+  identity: Wallet,
+  type: IdentityType,
+  name: string,
+  password?: string,
+): Promise<Identity> {
+  if (type === 'V3' && !password) {
+    throw Error('V3 passwords require password')
+  }
+
+  const identityString =
+    type === 'PRIVATE_KEY' ? identity.getPrivateKeyString() : await identity.toV3String(password as string)
+
+  return {
+    uuid: uuidV4(),
+    name,
+    type: password ? 'V3' : 'PRIVATE_KEY',
+    address: identity.getAddressString(),
+    identity: identityString,
+  }
+}
+
+export async function importIdentity(name: string, data: string): Promise<Identity | null> {
+  if (data.length === 64) {
+    const wallet = await getWallet('PRIVATE_KEY', data)
+
+    return {
+      uuid: uuidV4(),
+      name,
+      type: 'PRIVATE_KEY',
+      identity: data,
+      address: wallet.getAddressString(),
+    }
+  }
+
+  if (data.length === 66 && data.toLowerCase().startsWith('0x')) {
+    const wallet = await getWallet('PRIVATE_KEY', data.slice(2))
+
+    return { uuid: uuidV4(), name, type: 'PRIVATE_KEY', identity: data, address: wallet.getAddressString() }
+  }
+  try {
+    const { address } = JSON.parse(data)
+
+    return { uuid: uuidV4(), name, type: 'V3', identity: data, address }
+  } catch {
+    return null
+  }
+}
+
+function getWalletFromIdentity(identity: Identity, password?: string): Promise<Wallet> {
+  return getWallet(identity.type, identity.identity, password)
+}
+
+async function getWallet(type: IdentityType, data: string, password?: string): Promise<Wallet> {
+  return type === 'PRIVATE_KEY'
+    ? Wallet.fromPrivateKey(Buffer.from(trimHexString(data), 'hex'))
+    : await Wallet.fromV3(data, password as string)
+}
+
+export async function updateFeed(
+  beeApi: Bee,
+  identity: Identity,
+  hash: string,
+  stamp: string,
+  password?: string,
+): Promise<void> {
+  const wallet = await getWalletFromIdentity(identity, password)
+
+  if (!identity.feedHash) {
+    identity.feedHash = await beeApi.createFeedManifest(stamp, 'sequence', '00'.repeat(32), wallet.getAddressString())
+  }
+
+  const writer = beeApi.makeFeedWriter('sequence', '00'.repeat(32), wallet.getPrivateKeyString())
+  await writer.upload(stamp, hash as Reference)
+}
+
+function trimHexString(string: string): string {
+  if (string.toLowerCase().startsWith('0x')) {
+    return string.slice(2)
+  }
+
+  return string
+}

src/utils/index.ts

@@ -112,3 +112,80 @@ export function extractSwarmHash(string: string): string | null {
 
   return (matches && matches[0]) || null
 }
+
+export function uuidV4(): string {
+  const pattern = '10000000-1000-4000-8000-100000000000'
+
+  return pattern.replace(/[018]/g, (s: string) => {
+    const c = parseInt(s, 10)
+
+    return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+  })
+}
+
+export function formatEnum(string: string): string {
+  return (string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()).replaceAll('_', ' ')
+}
+
+export function secondsToTimeString(seconds: number): string {
+  let unit = seconds
+
+  if (unit < 120) {
+    return `${seconds} seconds`
+  }
+  unit /= 60
+
+  if (unit < 120) {
+    return `${Math.round(unit)} minutes`
+  }
+  unit /= 60
+
+  if (unit < 48) {
+    return `${Math.round(unit)} hours`
+  }
+  unit /= 24
+
+  if (unit < 14) {
+    return `${Math.round(unit)} days`
+  }
+  unit /= 7
+
+  if (unit < 52) {
+    return `${Math.round(unit)} weeks`
+  }
+  unit /= 52
+
+  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 calculateStampPrice(depth: number, amount: number): number {
+  return (amount * 2 ** (depth - 16) * 2) / 1e16
+}

src/utils/local-storage.ts

@@ -0,0 +1,70 @@
+import { shortenHash } from './hash'
+
+export enum HISTORY_KEYS {
+  UPLOAD_HISTORY = 'UPLOAD_HISTORY',
+  DOWNLOAD_HISTORY = 'DOWNLOAD_HISTORY',
+}
+
+export interface HistoryItem {
+  createdAt: number
+  name: string
+  hash: string
+}
+
+export function putHistory(key: string, hash: string, name: string): void {
+  const history = getHistorySafe(key)
+
+  const existingIndex = history.findIndex(x => x.hash === hash)
+
+  if (existingIndex !== -1) {
+    history.splice(existingIndex, 1)
+  }
+
+  history.unshift({
+    createdAt: Date.now(),
+    hash,
+    name,
+  })
+
+  if (history.length > 10) {
+    history.length = 10
+  }
+  localStorage.setItem(key, JSON.stringify(history))
+}
+
+export function getHistorySafe(key: string): HistoryItem[] {
+  const items = localStorage.getItem(key)
+
+  if (!items) {
+    return []
+  }
+  try {
+    const parsed = JSON.parse(items)
+
+    if (!Array.isArray(parsed) || !parsed.every(isHistoryItem)) {
+      return []
+    }
+
+    return parsed
+  } catch {
+    return []
+  }
+}
+
+function isHistoryItem(x: unknown): x is HistoryItem {
+  if (typeof x !== 'object' || x === null) {
+    return false
+  }
+
+  return 'createdAt' in x && 'hash' in x
+}
+
+export function determineHistoryName(hash: string, indexDocument?: string | null): string {
+  if (indexDocument === 'index.html') {
+    return `Website ${shortenHash(hash, 4)}`
+  } else if (indexDocument) {
+    return indexDocument
+  }
+
+  return `Folder ${shortenHash(hash, 4)}`
+}

src/utils/threshold.ts

@@ -1,5 +1,5 @@
 const OPTIMAL_CONNECTED_PEERS = 200
-const OPTIMAL_POPULATION = 100_000
+const OPTIMAL_POPULATION = 100000
 const OPTIMAL_DEPTH = 12
 
 interface Threshold {

tsconfig.lib.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "outDir": "lib",
+    "rootDirs": ["src"],
+    "typeRoots": ["./src/@types", "node_modules/@types"]
+  },
+  "include": [
+    "src"
+  ]
+}

webpack.config.ts

@@ -0,0 +1,61 @@
+import Path from 'path'
+import { Configuration } from 'webpack'
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default (): Configuration => {
+  const entry = Path.resolve(__dirname, 'src', 'App.tsx')
+
+  return {
+    mode: 'production',
+    entry,
+    output: {
+      path: Path.resolve(__dirname, 'lib'),
+      filename: 'App.js',
+      library: 'beeDashboard',
+      libraryTarget: 'umd',
+    },
+    resolve: {
+      extensions: ['.css', '.png', '.svg', '.ttf', '.ts', '.tsx', '.js'],
+    },
+    devtool: 'source-map',
+    externals: {
+      // Use external version of React
+      // react: 'root React',
+      react: 'react',
+      'react-dom': 'react-dom',
+    },
+    target: 'web',
+    optimization: {
+      minimize: false,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/i,
+          use: ['style-loader', 'css-loader'],
+        },
+        {
+          test: /\.(png|jp(e*)g|svg|gif)$/,
+          loader: 'file-loader',
+          options: {
+            name: 'assets/[name].[ext]',
+          },
+        },
+        {
+          test: /\.(ttf)$/,
+          loader: 'file-loader',
+          options: {
+            name: 'assets/fonts/[name].[ext]',
+          },
+        },
+        {
+          test: /\.(ts|js|tsx|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+          },
+        },
+      ],
+    },
+  }
+}