chore: release 0.11.0 (#263)

* fix(build): lib

* ci: build component check

* fix(ci): typeo npm run

* ci: add types build check

.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

@@ -0,0 +1,19 @@
+{
+  "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"
+  ]
+}

.eslintrc

@@ -8,7 +8,9 @@
     "plugin:@typescript-eslint/recommended",
     "prettier",
     "plugin:prettier/recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "react-app",
+    "react-app/jest"
   ],
   "env": {
     "browser": true,

.github/workflows/check.yaml

@@ -16,6 +16,11 @@ jobs:
       matrix:
         node-version: [14.x]
 
+    env:
+      REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
+      REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/
+      REACT_APP_DEV_MODE: 1
+
     steps:
       - uses: actions/checkout@v2
         with:
@@ -47,5 +52,33 @@ jobs:
         env:
           CI: true
 
+      - name: Types check
+        run: npm run check:types
+
+      - name: Types build
+        run: npm run compile:types
+
+      - name: Dependency check
+        run: npm run depcheck
+
+      - name: Update supported Bee action
+        uses: ethersphere/update-supported-bee-action@v1
+        if: github.ref == 'refs/heads/master'
+        with:
+          token: ${{ secrets.REPO_GHA_PAT }}
+
       - name: Build
         run: npm run build
+      
+      - name: Build Component
+        run: npm run build:component
+
+      - name: Create preview
+        uses: ethersphere/beeload-action@v1
+        with:
+          preview: 'true'
+
+      - name: Upload to testnet
+        uses: ethersphere/beeload-action@v1
+        with:
+          bee-url: https://api.gateway.testnet.ethswarm.org

.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 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,34 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* add dev mode flag ([#246](https://www.github.com/ethersphere/bee-dashboard/issues/246)) ([49350b0](https://www.github.com/ethersphere/bee-dashboard/commit/49350b05709053ecfbc4fc98f8b1df1aa0345e95))
+* enable setting devMode from queryParams ([#254](https://www.github.com/ethersphere/bee-dashboard/issues/254)) ([844383b](https://www.github.com/ethersphere/bee-dashboard/commit/844383bea7b2118232a74ac23c9e9a38fc47d3fd))
+* improve upload flow ([#240](https://www.github.com/ethersphere/bee-dashboard/issues/240)) ([635621b](https://www.github.com/ethersphere/bee-dashboard/commit/635621b04aea7124a99d00f9e31a86983063f5ce))
+* move postage stamp operations to bee debug api ([#256](https://www.github.com/ethersphere/bee-dashboard/issues/256)) ([3bb0077](https://www.github.com/ethersphere/bee-dashboard/commit/3bb00771d684ad93fd7acd921b648574013aec5c))
+
 ## [0.8.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.7.0...v0.8.0) (2021-10-20)
 
 In this version we are adding support for the bee release 1.2.0. The app also went through a graphical redesign. More to come soon!

README.md

@@ -3,6 +3,7 @@
 [![](https://img.shields.io/badge/made%20by-Swarm-blue.svg?style=flat-square)](https://swarm.ethereum.org/)
 [![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_shield)
 ![](https://img.shields.io/badge/npm-%3E%3D6.0.0-orange.svg?style=flat-square)
 ![](https://img.shields.io/badge/Node.js-%3E%3D10.0.0-orange.svg?style=flat-square)
 
@@ -12,9 +13,10 @@
 **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 the latest released version of Bee. Using it with older Bee versions is not
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.4.0-8fa696a8<!-- SUPPORTED_BEE_END -->**.
-recommended and may not work. Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by
+Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
-keeping an eye on the [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
+[official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
+[releases tab](https://github.com/ethersphere/bee-dashboard/releases).
 
 ![Status page](/ui_samples/info.png)
 
@@ -83,6 +85,8 @@ npm start
 
 The Bee Dashboard runs in development mode on [http://localhost:3031/](http://localhost:3031/)
 
+> Setting the `REACT_APP_DEV_MODE=1` environment variable, or opening Bee Dashboard with the query string `?devMode=1` loosens some checks. This makes it possible to develop Bee Dashboard without having connected peers and chequebook properly set up, effectively supporting the dev mode of Bee itself.
+
 ## Contribute
 
 There are some ways you can make this module better:
@@ -102,3 +106,6 @@ See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintaine
 ## License
 
 [BSD-3-Clause](./LICENSE)
+
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.8.0",
+  "version": "0.11.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,72 +26,100 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "2.1.0",
+    "@ethersphere/bee-js": "3.0.0",
+    "@ethersphere/manifest-js": "^1.0.0",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.57",
-    "@types/react-router": "5.1.13",
+    "axios": "0.24.0",
-    "@types/react-router-dom": "5.1.7",
-    "axios": "0.21.1",
     "bignumber.js": "9.0.1",
-    "feather-icons": "4.28.0",
+    "file-saver": "^2.0.5",
-    "formik": "2.2.8",
+    "formik": "2.2.9",
     "formik-material-ui": "3.0.1",
+    "jszip": "^3.7.1",
     "material-ui-dropzone": "3.5.0",
-    "notistack": "1.0.9",
+    "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.3",
+    "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.3",
+    "react-syntax-highlighter": "15.4.4",
-    "semver": "7.3.2",
+    "semver": "7.3.5",
     "serve-handler": "6.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.12.0",
+    "@babel/core": "7.16.0",
-    "@testing-library/react": "11.2.6",
+    "@babel/plugin-proposal-class-properties": "7.16.0",
-    "@testing-library/user-event": "13.1.5",
+    "@babel/plugin-transform-runtime": "7.16.4",
-    "@types/jest": "26.0.22",
+    "@babel/preset-env": "7.16.4",
-    "@types/node": "14.14.41",
+    "@babel/preset-react": "7.16.0",
-    "@types/qrcode.react": "1.0.1",
+    "@babel/preset-typescript": "7.16.0",
-    "@types/react": "17.0.3",
+    "@commitlint/config-conventional": "14.1.0",
-    "@types/react-copy-to-clipboard": "5.0.0",
+    "@testing-library/jest-dom": "5.15.0",
-    "@types/react-dom": "17.0.3",
+    "@testing-library/react": "12.1.2",
-    "@types/react-syntax-highlighter": "13.5.0",
+    "@types/file-saver": "2.0.4",
-    "@types/semver": "7.3.6",
+    "@types/jest": "27.0.2",
-    "eslint": "7.32.0",
+    "@types/qrcode.react": "1.0.2",
-    "eslint-config-prettier": "8.3.0",
+    "@types/react": "17.0.34",
-    "eslint-plugin-jest": "24.4.0",
+    "@types/react-copy-to-clipboard": "5.0.2",
-    "eslint-plugin-prettier": "3.4.1",
+    "@types/react-dom": "17.0.11",
-    "eslint-plugin-react": "7.24.0",
+    "@types/react-router": "5.1.17",
-    "prettier": "2.3.2",
+    "@types/react-router-dom": "5.3.2",
+    "@types/react-syntax-highlighter": "13.5.2",
+    "@types/semver": "7.3.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",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.10.0",
+    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.4.0",
+    "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",
-    "typescript": "4.2.4",
+    "ts-node": "^10.4.0",
-    "web-vitals": "1.1.1"
+    "typescript": "4.4.4",
+    "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": [
     "build",
     "serve.js"
   ],
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/App.tsx

@@ -1,37 +1,44 @@
-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 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>
+            <FileProvider>
-              <SnackbarProvider>
+              <PlatformProvider>
-                <Router>
+                <SnackbarProvider>
-                  <>
+                  <Router>
-                    <CssBaseline />
+                    <>
-                    <Dashboard>
+                      <CssBaseline />
-                      <BaseRouter />
+                      <Dashboard>
-                    </Dashboard>
+                        <BaseRouter />
-                  </>
+                      </Dashboard>
-                </Router>
+                    </>
-              </SnackbarProvider>
+                  </Router>
-            </PlatformProvider>
+                </SnackbarProvider>
+              </PlatformProvider>
+            </FileProvider>
           </StampsProvider>
         </BeeProvider>
       </SettingsProvider>

src/components/AlertUploadSize.tsx

@@ -3,10 +3,10 @@ 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 {
-  file: File
+  files: File[]
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -22,14 +22,16 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function UploadSizeAlert(props: Props): ReactElement | null {
   const classes = useStyles()
 
-  const aboveLimit = props.file.size >= LIMIT
+  const totalSize = props.files.reduce((previous, current) => previous + current.size, 0)
+
+  const aboveLimit = totalSize >= LIMIT
 
   return (
     <Collapse in={aboveLimit}>
       <div className={classes.root}>
         <Alert severity="warning">
           <AlertTitle>Warning</AlertTitle>
-          The file you are trying to upload is above the recommended size. The chunks may not be synchronised properly
+          The files you are trying to upload are above the recommended size. The chunks may not be synchronised properly
           over the network.
         </Alert>
       </div>

src/components/Capacity.tsx

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react'
+
+interface Props {
+  width: string
+  usage: number
+}
+
+export function Capacity({ width, usage }: Props): ReactElement {
+  const integerUsage = Math.round(usage * 100)
+  const used = integerUsage + '%'
+  const free = 100 - 2 - integerUsage + '%'
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', height: '100%', width }}>
+      <div style={{ display: 'flex', height: '4px', width: '100%' }}>
+        <div style={{ width: used, background: '#dd7200' }} />
+        <div style={{ width: '2%' }} />
+        <div style={{ width: free, background: '#c9c9c9' }} />
+      </div>
+    </div>
+  )
+}

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'}/${
+              href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
-                props.address
-              }`}
               target="_blank"
               rel="noreferrer"
             >

src/components/ExpandableElement.tsx

@@ -0,0 +1,59 @@
+import { Collapse, ListItem } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ReactElement, ReactNode, useState } from 'react'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      padding: 0,
+      margin: 0,
+      marginTop: theme.spacing(4),
+      '&:first-child': {
+        marginTop: 0,
+      },
+    },
+    rootLevel1: { marginTop: theme.spacing(1) },
+    rootLevel2: { marginTop: theme.spacing(0.5) },
+    header: {
+      backgroundColor: theme.palette.background.paper,
+    },
+    contentLevel0: {
+      marginTop: theme.spacing(1),
+    },
+    contentLevel12: {
+      marginTop: theme.spacing(0.25),
+    },
+    infoText: {
+      color: '#c9c9c9',
+    },
+  }),
+)
+
+interface Props {
+  children: ReactNode
+  expandable: ReactNode
+  defaultOpen?: boolean
+}
+
+export default function ExpandableElement({ children, expandable, defaultOpen }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <div className={`${classes.root} ${classes.rootLevel2}`}>
+      <ListItem button onClick={handleClick} className={classes.header}>
+        {children}
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={classes.contentLevel12}>{expandable}</div>
+      </Collapse>
+    </div>
+  )
+}

src/components/ExpandableListItemActions.tsx

@@ -1,6 +1,6 @@
-import { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Grid } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement, ReactNode } from 'react'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -22,11 +22,14 @@ export default function ExpandableListItemActions({ children }: Props): ReactEle
   if (Array.isArray(children)) {
     return (
       <Grid container direction="row">
-        {children.map((a, i) => (
+        {children
-          <Grid key={i} className={classes.action}>
+          // Exclude falsy values to allow conditional rendering
-            {a}
+          .filter(x => x)
-          </Grid>
+          .map((a, i) => (
-        ))}
+            <Grid key={i} className={classes.action}>
+              {a}
+            </Grid>
+          ))}
       </Grid>
     )
   }

src/components/ExpandableListItemInput.tsx

@@ -1,9 +1,8 @@
-import { ReactElement, ChangeEvent, useState } from 'react'
+import { Button, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import Collapse from '@material-ui/core/Collapse'
-import { ListItem, Typography, Grid, IconButton, InputBase, Button } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Edit, Minus, RotateCcw, Check } from 'react-feather'
+import { ChangeEvent, ReactElement, useState } from 'react'
-
+import { Check, Edit, Minus, RotateCcw } from 'react-feather'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 
@@ -55,6 +54,8 @@ interface Props {
   confirmLabelDisabled?: boolean
   onChange?: (value: string) => void
   onConfirm: (value: string) => void
+  mapperFn?: (value: string) => string
+  locked?: boolean
 }
 
 export default function ExpandableListItemKey({
@@ -67,12 +68,18 @@ export default function ExpandableListItemKey({
   expandedOnly,
   helperText,
   placeholder,
+  mapperFn,
+  locked,
 }: Props): ReactElement | null {
   const classes = useStyles()
   const [open, setOpen] = useState(Boolean(expandedOnly))
   const [inputValue, setInputValue] = useState<string>(value || '')
   const toggleOpen = () => setOpen(!open)
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    if (mapperFn) {
+      e.target.value = mapperFn(e.target.value)
+    }
+
     setInputValue(e.target.value)
 
     if (onChange) onChange(e.target.value)
@@ -91,7 +98,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} />
@@ -111,6 +118,7 @@ export default function ExpandableListItemKey({
               fullWidth
               className={classes.content}
               autoFocus
+              hidden={locked}
             />
           </Collapse>
         </Grid>

src/components/ExpandableListItemKey.tsx

@@ -1,9 +1,9 @@
-import { ReactElement, useState } from 'react'
+import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import Collapse from '@material-ui/core/Collapse'
-import { ListItem, Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Eye, Minus } from 'react-feather'
+import { ReactElement, useState } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { Eye, Minus } from 'react-feather'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -65,6 +65,9 @@ export default function ExpandableListItemKey({ label, value }: Props): ReactEle
 
   const splitValues = split(value)
   const hasPrefix = isPrefixedHexString(value)
+  const spanText = `${hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]}[…]${
+    splitValues[splitValues.length - 1]
+  }`
 
   return (
     <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
@@ -77,9 +80,7 @@ export default function ExpandableListItemKey({ label, value }: Props): ReactEle
                 <span className={classes.copyValue}>
                   <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
                     <CopyToClipboard text={value}>
-                      <span onClick={tooltipClickHandler}>{`${
+                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
-                        hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]
-                      }[…]${splitValues[splitValues.length - 1]}`}</span>
                     </CopyToClipboard>
                   </Tooltip>
                 </span>

src/components/ExpandableListItemLink.tsx

@@ -0,0 +1,106 @@
+import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
+import { ReactElement, useState } from 'react'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import { useHistory } from 'react-router'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    openLinkIcon: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+    content: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+    keyMargin: {
+      marginRight: theme.spacing(1),
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+  }),
+)
+
+interface Props {
+  label: string
+  value: string
+  link?: string
+  navigationType?: 'NEW_WINDOW' | 'HISTORY_PUSH'
+  allowClipboard?: boolean
+}
+
+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">
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          {label && <Typography variant="body1">{label}</Typography>}
+          <Typography variant="body2">
+            <div>
+              {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}>
+                {navigationType === 'NEW_WINDOW' && <OpenInNewSharp onClick={onNavigation} strokeWidth={1} />}
+                {navigationType === 'HISTORY_PUSH' && <ArrowForward onClick={onNavigation} strokeWidth={1} />}
+              </IconButton>
+            </div>
+          </Typography>
+        </Grid>
+      </Grid>
+    </ListItem>
+  )
+}

src/components/FitImage.tsx

@@ -0,0 +1,30 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    image: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+    },
+  }),
+)
+
+interface Props {
+  alt: string
+  src: string | undefined
+  maxHeight?: string
+  maxWidth?: string
+}
+
+export function FitImage(props: Props): ReactElement {
+  const classes = useStyles()
+
+  const inlineStyles: Record<string, string> = {}
+
+  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
+  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+
+  return <img className={classes.image} alt={props.alt} src={props.src} style={inlineStyles} />
+}

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/SideBar.tsx

@@ -1,16 +1,15 @@
-import type { ReactElement } from 'react'
+import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
-import { Link } from 'react-router-dom'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { OpenInNewSharp } from '@material-ui/icons'
-import { Divider, List, Drawer, Grid, Link as MUILink } from '@material-ui/core'
+import type { ReactElement } from 'react'
-import { Home, FileText, DollarSign, Settings, Layers, BookOpen } from 'react-feather'
+import { 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,7 +18,7 @@ const navBarItems = [
   },
   {
     label: 'Files',
-    path: ROUTES.FILES,
+    path: ROUTES.UPLOAD,
     icon: FileText,
   },
   {
@@ -113,7 +112,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/StripedWrapper.tsx

@@ -0,0 +1,31 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: ReactElement | ReactElement[]
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '175px',
+      height: '175px',
+      background: `repeating-linear-gradient(
+                        45deg,
+                        #efefef,
+                        #efefef 4px,
+                        #ffffff 4px,
+                        #ffffff 8px
+                    )`,
+    },
+  }),
+)
+
+export function StripedWrapper({ children }: Props): ReactElement {
+  const classes = useStyles()
+
+  return <div className={classes.wrapper}>{children}</div>
+}

src/components/SwarmButton.tsx

@@ -0,0 +1,66 @@
+import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import React, { ReactElement } from 'react'
+import { IconProps } from 'react-feather'
+
+interface Props {
+  onClick: () => void
+  iconType: React.ComponentType<IconProps>
+  children: string
+  className?: string
+  disabled?: boolean
+  loading?: boolean
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    button: {
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      '&:hover, &:focus': {
+        '& svg': {
+          stroke: '#fff',
+          transition: '0.1s',
+        },
+      },
+    },
+    spinnerWrapper: {
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      width: '40px',
+      height: '40px',
+      transform: 'translate(-50%, -50%)',
+    },
+  }),
+)
+
+export function SwarmButton({ children, onClick, iconType, className, disabled, loading }: Props): ReactElement {
+  const classes = useStyles()
+
+  const icon = React.createElement(iconType, {
+    size: '1.25rem',
+    color: disabled ? 'rgba(0, 0, 0, 0.26)' : '#dd7700',
+  })
+
+  const classNames = className ? [className, classes.button].join(' ') : classes.button
+
+  return (
+    <Button
+      className={classNames}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick()
+        event.currentTarget.blur()
+      }}
+      variant="contained"
+      startIcon={icon}
+      disabled={disabled}
+    >
+      {children}
+      {loading && (
+        <div className={classes.spinnerWrapper}>
+          <CircularProgress />
+        </div>
+      )}
+    </Button>
+  )
+}

src/components/TroubleshootConnectionCard.tsx

@@ -1,10 +1,10 @@
-import type { ReactElement } from 'react'
+import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
-import { Link } from 'react-router-dom'
-
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Button, Grid, Typography, Link as MuiLink } from '@material-ui/core/'
+import type { ReactElement } from 'react'
-import { ROUTES } from '../routes'
 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/components/WithdrawDepositModal.tsx

@@ -55,7 +55,7 @@ export default function WithdrawDepositModal({
       setOpen(false)
       enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
     } catch (e) {
-      enqueueSnackbar(`${errorMessage} Error: ${e.message}`, { variant: 'error' })
+      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
     }
   }
 
@@ -71,7 +71,7 @@ export default function WithdrawDepositModal({
 
       if (max && t.toDecimal.isGreaterThan(max)) setAmountError(new Error(`Needs to be less than ${max}`))
     } catch (e) {
-      setAmountError(e)
+      setAmountError(e as Error)
     }
   }
 

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/containers/WithdrawModal.tsx

@@ -1,16 +1,15 @@
+import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
 import { Upload } from 'react-feather'
-import { Context as SettingsContext } from '../providers/Settings'
-
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
-import { BigNumber } from 'bignumber.js'
+import { Context as SettingsContext } from '../providers/Settings'
 
 export default function WithdrawModal(): ReactElement {
   const { beeDebugApi } = useContext(SettingsContext)
 
   return (
     <WithdrawDepositModal
-      successMessage="Successful withdrawl."
+      successMessage="Successful withdrawal."
       errorMessage="Error with withdrawing."
       dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
       label="Withdraw"

src/hooks/accounting.ts

@@ -100,7 +100,7 @@ export const useAccounting = (
       setUncashedAmounts(results.fulfilled)
       setIsloadingUncashed(false)
     })
-  }, [settlements, isLoadingUncashed, uncashedAmounts])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
 
   const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
 

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/files/AssetIcon.tsx

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react'
+import { StripedWrapper } from '../../components/StripedWrapper'
+
+interface Props {
+  icon: ReactElement
+}
+
+export function AssetIcon({ icon }: Props): ReactElement {
+  return <StripedWrapper>{icon}</StripedWrapper>
+}

src/pages/files/AssetPreview.tsx

@@ -0,0 +1,102 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+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, getAssetNameFromFiles, getHumanReadableFileSize } from '../../utils/file'
+import { SwarmFile } from '../../utils/SwarmFile'
+import { AssetIcon } from './AssetIcon'
+
+interface Props {
+  assetName?: string
+  files: SwarmFile[]
+}
+
+// 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)
+
+  useEffect(() => {
+    if (files.length === 1) {
+      // single image
+      if (files[0].type.startsWith('image/')) {
+        files[0].arrayBuffer().then(value => {
+          const blob = new Blob([value])
+          setPreviewUri(URL.createObjectURL(blob))
+        })
+        // single non-image
+      } else {
+        setPreviewUri(undefined)
+        setPreviewComponent(<AssetIcon icon={<File />} />)
+      }
+      // collection
+    } else if (detectIndexHtml(files)) {
+      setPreviewUri(undefined)
+      setPreviewComponent(<AssetIcon icon={<Web />} />)
+    } else {
+      setPreviewUri(undefined)
+      setPreviewComponent(<AssetIcon icon={<Folder />} />)
+    }
+  }, [files])
+
+  const getPrimaryText = () => {
+    const name = getAssetNameFromFiles(files)
+
+    if (files.length === 1) {
+      return 'Filename: ' + (assetName || name)
+    }
+
+    return 'Folder name: ' + (assetName || name)
+  }
+
+  const getKind = () => {
+    if (files.length === 1) {
+      return files[0].type
+    }
+
+    if (detectIndexHtml(files)) {
+      return 'Website'
+    }
+
+    return 'Folder'
+  }
+
+  const isFolder = () => ['Folder', 'Website'].includes(getKind())
+
+  const getSize = () => {
+    const bytes = files.reduce((total, item) => total + item.size, 0)
+
+    return getHumanReadableFileSize(bytes)
+  }
+
+  const size = getSize()
+
+  return (
+    <Box mb={4}>
+      <Box bgcolor="background.paper">
+        <Grid container direction="row">
+          {previewComponent ? (
+            previewComponent
+          ) : (
+            <FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
+          )}
+          <Box p={2}>
+            <Typography>{getPrimaryText()}</Typography>
+            <Typography>Kind: {getKind()}</Typography>
+            {size !== '0 bytes' && <Typography>Size: {size}</Typography>}
+          </Box>
+        </Grid>
+      </Box>
+      {isFolder() && (
+        <Box mt={0.25} p={2} bgcolor="background.paper">
+          <Grid container justifyContent="space-between" alignItems="center" direction="row">
+            <Typography variant="subtitle2">Folder content</Typography>
+            <Typography variant="subtitle2">{files.length} items</Typography>
+          </Grid>
+        </Box>
+      )}
+    </Box>
+  )
+}

src/pages/files/AssetSummary.tsx

@@ -0,0 +1,24 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import ExpandableListItemLink from '../../components/ExpandableListItemLink'
+
+interface Props {
+  hash: string
+}
+
+export function AssetSummary({ 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}`} />
+      </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/Download.tsx

@@ -1,28 +1,92 @@
-import { ReactElement, useState, useContext } from 'react'
-import { Context as SettingsContext } from '../../providers/Settings'
-import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { Utils } from '@ethersphere/bee-js'
+import { ManifestJs } from '@ethersphere/manifest-js'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'
+import { History } from '../../components/History'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
+import { extractSwarmHash } from '../../utils'
+import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { FileNavigation } from './FileNavigation'
 
-export default function Files(): ReactElement {
+export function Download(): ReactElement {
-  const { apiUrl } = useContext(SettingsContext)
+  const [loading, setLoading] = useState(false)
-
+  const { beeApi } = useContext(SettingsContext)
   const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
 
+  const { enqueueSnackbar } = useSnackbar()
+  const history = useHistory()
+
   const validateChange = (value: string) => {
-    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128)) setReferenceError(undefined)
+    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) {
-    else setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+      setReferenceError(undefined)
+    } else {
+      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+    }
+  }
+
+  async function onSwarmIdentifier(identifier: string) {
+    if (!beeApi) {
+      return
+    }
+
+    try {
+      const manifestJs = new ManifestJs(beeApi)
+      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))
+      history.push(ROUTES.HASH.replace(':hash', identifier))
+    } catch (error: unknown) {
+      let message = typeof error === 'object' && error !== null && Reflect.get(error, 'message')
+
+      if (message.includes('path address not found')) {
+        message = 'The specified hash does not have an index document set.'
+      }
+
+      if (message.includes('Not Found: Not Found')) {
+        message = 'The specified hash was not found.'
+      }
+      enqueueSnackbar(<span>Error: {message || 'Unknown'}</span>, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function recognizeSwarmHash(value: string) {
+    if (value.length < 64) {
+      return value
+    }
+
+    const hash = extractSwarmHash(value)
+
+    if (hash) {
+      return hash
+    }
+
+    return value
   }
 
   return (
-    <ExpandableListItemInput
+    <>
-      label="Swarm Hash"
+      <FileNavigation active="DOWNLOAD" />
-      onConfirm={value => window.open(`${apiUrl}/bzz/${value}`, '_blank')}
+      <ExpandableListItemInput
-      onChange={validateChange}
+        label="Swarm Hash"
-      helperText={referenceError}
+        onConfirm={value => onSwarmIdentifier(value)}
-      confirmLabel={'Download'}
+        onChange={validateChange}
-      confirmLabelDisabled={Boolean(referenceError)}
+        helperText={referenceError}
-      placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
+        confirmLabel={'Search'}
-      expandedOnly
+        confirmLabelDisabled={Boolean(referenceError) || loading}
-    />
+        placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
+        expandedOnly
+        mapperFn={value => recognizeSwarmHash(value)}
+      />
+      <History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />
+    </>
   )
 }

src/pages/files/DownloadActionBar.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@material-ui/core'
+import { Clear } from '@material-ui/icons'
+import { ReactElement } from 'react'
+import { Download, Link } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+
+interface Props {
+  onOpen: () => void
+  onDownload: () => void
+  onCancel: () => void
+  hasIndexDocument: boolean
+  loading: boolean
+}
+
+export function DownloadActionBar({ onOpen, onDownload, onCancel, hasIndexDocument, loading }: Props): ReactElement {
+  return (
+    <ExpandableListItemActions>
+      {hasIndexDocument && (
+        <SwarmButton onClick={onOpen} iconType={Link} disabled={loading}>
+          View Website
+        </SwarmButton>
+      )}
+      <SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
+        Download
+      </SwarmButton>
+      <Button onClick={onCancel} variant="contained" startIcon={<Clear />} disabled={loading}>
+        Close
+      </Button>
+    </ExpandableListItemActions>
+  )
+}

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/Share.tsx

@@ -0,0 +1,121 @@
+import { ManifestJs } from '@ethersphere/manifest-js'
+import { Box } from '@material-ui/core'
+import { saveAs } from 'file-saver'
+import JSZip from 'jszip'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { RouteComponentProps, useHistory } from 'react-router-dom'
+import { Loading } from '../../components/Loading'
+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 reference = props.match.params.hash
+  const history = useHistory()
+
+  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)
+
+  async function prepare() {
+    if (!beeApi) {
+      return
+    }
+
+    const manifestJs = new ManifestJs(beeApi)
+    const isManifest = await manifestJs.isManifest(reference)
+
+    if (!isManifest) {
+      throw Error('The specified hash does not contain valid content.')
+    }
+    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()
+    }
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    prepare().then(() => {
+      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 (loading) {
+    return <Loading />
+  }
+
+  return (
+    <>
+      <Box mb={4}>
+        <AssetPreview files={files} assetName={assetName} />
+      </Box>
+      <Box mb={4}>
+        <AssetSummary hash={reference} />
+      </Box>
+      <DownloadActionBar
+        onOpen={onOpen}
+        onCancel={onClose}
+        onDownload={onDownload}
+        hasIndexDocument={Boolean(indexDocument && files.length > 1)}
+        loading={downloading}
+      />
+    </>
+  )
+}

src/pages/files/StampPreview.tsx

@@ -0,0 +1,21 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
+import { PostageStamp } from '../stamps/PostageStamp'
+
+interface Props {
+  stamp: EnrichedPostageBatch
+}
+
+export function StampPreview({ stamp }: Props): ReactElement {
+  return (
+    <Box mb={4}>
+      <Box mb={0.25} p={2} bgcolor="background.paper">
+        <Typography variant="subtitle2">Associated postage stamp:</Typography>
+      </Box>
+      <Box bgcolor="background.paper">
+        <PostageStamp stamp={stamp} shorten={true} />
+      </Box>
+    </Box>
+  )
+}

src/pages/files/Upload.tsx

@@ -1,163 +1,92 @@
-import { Button, CircularProgress, Container, Avatar, Chip, Typography } from '@material-ui/core'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
-import { RotateCcw, Check } from 'react-feather'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import UploadSizeAlert from '../../components/AlertUploadSize'
+import { useHistory } from 'react-router-dom'
-import ClipboardCopy from '../../components/ClipboardCopy'
+import { HistoryHeader } from '../../components/HistoryHeader'
-import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
+import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
-import CreatePostageStamp from '../stamps/CreatePostageStampModal'
+import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
-import SelectStamp from './SelectStamp'
+import { ROUTES } from '../../routes'
-import ExpandableListItem from '../../components/ExpandableListItem'
+import { detectIndexHtml, getAssetNameFromFiles } from '../../utils/file'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
-import ExpandableListItemNote from '../../components/ExpandableListItemNote'
+import { CreatePostageStampModal } from '../stamps/CreatePostageStampModal'
-import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SelectPostageStampModal } from '../stamps/SelectPostageStampModal'
+import { AssetPreview } from './AssetPreview'
+import { StampPreview } from './StampPreview'
+import { UploadActionBar } from './UploadActionBar'
 
-const useStyles = makeStyles((theme: Theme) =>
+export function Upload(): ReactElement {
-  createStyles({
+  const [isBuyingStamp, setBuyingStamp] = useState(false)
-    content: { marginTop: theme.spacing(2) },
+  const [isSelectingStamp, setSelectingStamp] = useState(false)
-    loadingProgress: { textAlign: 'center', padding: '50px' },
+  const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
-  }),
+  const [isUploading, setUploading] = useState(false)
-)
 
-const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
+  const { stamps, refresh } = useContext(Context)
-
-export default function Files(): ReactElement {
-  const classes = useStyles()
-  const [dropzoneKey, setDropzoneKey] = useState(0)
-  const [file, setFile] = useState<File | null>(null)
-  const [uploadReference, setUploadReference] = useState('')
-  const [isUploadingFile, setIsUploadingFile] = useState(false)
-
-  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
-
-  const { isLoading, error, stamps, refresh } = useContext(Context)
   const { beeApi } = useContext(SettingsContext)
+  const { files, setFiles } = useContext(FileContext)
   const { enqueueSnackbar } = useSnackbar()
+  const history = useHistory()
+
+  if (!files.length) {
+    setFiles([])
+    history.replace(ROUTES.UPLOAD)
+  }
 
   useEffect(() => {
     refresh()
-  }, [])
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Choose a postage stamp that has the lowest usage
+  const uploadFiles = () => {
-  useEffect(() => {
+    if (!beeApi || !files.length || !stamp) {
-    if (!selectedStamp && stamps && stamps.length > 0) {
+      return
-      const stamp = stamps.reduce((prev, curr) => {
-        if (curr.usage < prev.usage) return curr
-
-        return prev
-      }, stamps[0])
-
-      setSelectedStamp(stamp)
     }
-  }, [isLoading, error, stamps, selectedStamp])
 
-  const uploadFile = () => {
+    const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(files) || undefined
-    if (file === null || selectedStamp === null) return
 
-    if (!beeApi) return
+    setUploading(true)
 
-    setIsUploadingFile(true)
     beeApi
-      .uploadFile(selectedStamp.batchID, file)
+      .uploadFiles(stamp.batchID, files as unknown as File[], { indexDocument })
-      .then(hash => setUploadReference(hash.reference))
+      .then(hash => {
-      .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
+        putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
-      .finally(() => setIsUploadingFile(false))
+        history.replace(ROUTES.HASH.replace(':hash', hash.reference))
+      })
+      .catch(e => {
+        enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
+        setUploading(false)
+      })
   }
 
-  const uploadNew = () => {
+  const reset = () => {
-    setTimeout(() => {
+    setFiles([])
-      setFile(null)
+    setStamp(null)
-      setDropzoneKey(dropzoneKey + 1)
+    setUploading(false)
-      setUploadReference('')
-    }, 0)
-  }
-
-  const handleChange = (files?: File[]) => {
-    setUploadReference('')
-
-    if (files) {
-      setFile(files[0])
-    }
   }
 
   return (
     <>
-      <DropzoneArea
+      <HistoryHeader>Upload</HistoryHeader>
-        key={'dropzone-' + dropzoneKey}
+      {files.length && <AssetPreview files={files} />}
-        onChange={handleChange}
+      {stamp !== null ? <StampPreview stamp={stamp} /> : null}
-        filesLimit={1}
+      {files.length && (
-        maxFileSize={MAX_FILE_SIZE}
+        <UploadActionBar
-      />
+          canSelectStamp={stamps !== null && stamps.length > 0}
-      <div className={classes.content}>
+          hasSelectedStamp={stamp !== null}
-        {/* We have file and can upload display stamp selection */}
+          onCancel={reset}
-        {file && !isUploadingFile && !uploadReference && (
+          onBuy={() => setBuyingStamp(true)}
-          <>
+          onSelect={() => setSelectingStamp(true)}
-            <ExpandableListItemNote>
+          onUpload={uploadFiles}
-              To upload this file to your node, you need a postage stamp. You can buy a new one or you can use an
+          onClearStamp={() => setStamp(null)}
-              existing stamp (providing it’s sufficient for this file).
+          isUploading={isUploading}
-            </ExpandableListItemNote>
+        />
-            {selectedStamp && (
+      )}
-              <ExpandableListItem
+      {isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
-                label={
+      {stamps && isSelectingStamp ? (
-                  <>
+        <SelectPostageStampModal
-                    Upload with Postage Stamp{' '}
+          stamps={stamps}
-                    <Chip
+          onClose={() => setSelectingStamp(false)}
-                      avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
+          onSelect={stamp => setStamp(stamp)}
-                      label={<Typography variant="body2">{selectedStamp.batchID.substr(0, 8)}[…]</Typography>}
+        />
-                      deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
+      ) : null}
-                      onDelete={() => {} /* eslint-disable-line*/}
-                      variant="outlined"
-                    />
-                  </>
-                }
-                value={<SelectStamp stamps={stamps} selectedStamp={selectedStamp} setSelected={setSelectedStamp} />}
-              />
-            )}
-            {!selectedStamp && (
-              <ExpandableListItemActions>
-                <CreatePostageStamp />
-              </ExpandableListItemActions>
-            )}
-          </>
-        )}
-
-        {/* We have file and can upload display upload button */}
-        {file && !uploadReference && (
-          <>
-            <ExpandableListItemActions>
-              <Button
-                variant="contained"
-                disabled={!file && isUploadingFile && !selectedStamp}
-                onClick={() => uploadFile()}
-                startIcon={<Check size="1rem" />}
-              >
-                Upload
-              </Button>
-              {isUploadingFile && (
-                <Container className={classes.loadingProgress}>
-                  <CircularProgress />
-                </Container>
-              )}
-            </ExpandableListItemActions>
-            <UploadSizeAlert file={file} />
-          </>
-        )}
-
-        {/* File has already been uploaded */}
-        {uploadReference && (
-          <>
-            <ExpandableListItemKey label="Swarm Reference" value={uploadReference} />
-            <ExpandableListItemActions>
-              <Button variant="contained" onClick={uploadNew} startIcon={<RotateCcw size="1rem" />}>
-                Upload New File
-              </Button>
-            </ExpandableListItemActions>
-          </>
-        )}
-      </div>
     </>
   )
 }

src/pages/files/UploadActionBar.tsx

@@ -0,0 +1,69 @@
+import { Button, Typography } from '@material-ui/core'
+import { Clear } from '@material-ui/icons'
+import { ReactElement } from 'react'
+import { Check, Layers, PlusSquare, RefreshCcw } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+
+interface Props {
+  canSelectStamp: boolean
+  hasSelectedStamp: boolean
+  onUpload: () => void
+  onBuy: () => void
+  onSelect: () => void
+  onCancel: () => void
+  onClearStamp: () => void
+  isUploading: boolean
+}
+
+export function UploadActionBar({
+  canSelectStamp,
+  hasSelectedStamp,
+  onUpload,
+  onBuy,
+  onSelect,
+  onCancel,
+  onClearStamp,
+  isUploading,
+}: Props): ReactElement {
+  const showBuy = !hasSelectedStamp
+  const showSelect = canSelectStamp && !hasSelectedStamp
+  const showUpload = hasSelectedStamp
+  const showChange = canSelectStamp && hasSelectedStamp
+
+  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>
+      </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}
+    </>
+  )
+}

src/pages/files/UploadArea.tsx

@@ -0,0 +1,147 @@
+import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { DropzoneArea } from 'material-ui-dropzone'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
+import { useHistory } from 'react-router-dom'
+import { SwarmButton } from '../../components/SwarmButton'
+import { Context } from '../../providers/File'
+import { ROUTES } from '../../routes'
+import { detectIndexHtml } from '../../utils/file'
+import { SwarmFile } from '../../utils/SwarmFile'
+
+interface Props {
+  maximumSizeInBytes: number
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    areaWrapper: { position: 'relative', marginBottom: theme.spacing(2) },
+    dropzone: {
+      background: theme.palette.background.default,
+      outline: 'none',
+      color: 'transparent',
+      zIndex: 1,
+      '& svg': {
+        opacity: 0,
+      },
+    },
+    buttonWrapper: {
+      top: '0',
+      left: '0',
+      position: 'absolute',
+      display: 'flex',
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    button: {
+      marginLeft: theme.spacing(0.5),
+      marginRight: theme.spacing(0.5),
+      zIndex: 2,
+    },
+  }),
+)
+
+export function UploadArea({ maximumSizeInBytes }: Props): ReactElement {
+  const { setFiles } = 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
+
+  const onUploadCollectionClick = () => {
+    const element = getDropzoneInputDomElement()
+
+    if (element) {
+      element.setAttribute('directory', '')
+      element.setAttribute('webkitdirectory', '')
+      element.setAttribute('mozdirectory', '')
+      element.click()
+    }
+  }
+
+  const onUploadWebsiteClick = () => {
+    onUploadCollectionClick()
+    setStrictWebsiteMode(true)
+  }
+
+  const onUploadFolderClick = () => {
+    onUploadCollectionClick()
+    setStrictWebsiteMode(false)
+  }
+
+  const onUploadFileClick = () => {
+    const element = getDropzoneInputDomElement()
+
+    if (element) {
+      element.removeAttribute('directory')
+      element.removeAttribute('webkitdirectory')
+      element.removeAttribute('mozdirectory')
+      element.click()
+    }
+  }
+
+  const resetComponentOnAddingInvalidContent = () => {
+    setTimeout(() => {
+      setVersion(x => x + 1)
+      setFiles([])
+    }, 0)
+  }
+
+  const handleChange = (files?: File[]) => {
+    if (files) {
+      const swarmFiles = files.map(x => new SwarmFile(x))
+      const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(swarmFiles) || undefined
+
+      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()
+
+        return
+      }
+
+      setFiles(swarmFiles)
+
+      if (files.length) {
+        history.push(ROUTES.UPLOAD_IN_PROGRESS)
+      }
+    }
+  }
+
+  return (
+    <>
+      <div className={classes.areaWrapper}>
+        <DropzoneArea
+          key={version}
+          dropzoneClass={classes.dropzone}
+          onChange={handleChange}
+          filesLimit={1e9}
+          maxFileSize={maximumSizeInBytes}
+          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 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.
+      </Typography>
+    </>
+  )
+}

src/pages/files/UploadLander.tsx

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react'
+import { History } from '../../components/History'
+import { HISTORY_KEYS } from '../../utils/local-storage'
+import { FileNavigation } from './FileNavigation'
+import { UploadArea } from './UploadArea'
+
+const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
+
+export function UploadLander(): ReactElement {
+  return (
+    <>
+      <FileNavigation active="UPLOAD" />
+      <UploadArea maximumSizeInBytes={MAX_FILE_SIZE} />
+      <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 API" value={apiUrl} onConfirm={setApiUrl} locked={lockedApiSettings} />
-      <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
+      <ExpandableListItemInput
+        label="Bee Debug API"
+        value={apiDebugUrl}
+        onConfirm={setDebugApiUrl}
+        locked={lockedApiSettings}
+      />
     </ExpandableList>
   )
 }

src/pages/stamps/CreatePostageStampModal.tsx

@@ -1,18 +1,18 @@
-import React, { ReactElement, useContext } from 'react'
 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 CircularProgress from '@material-ui/core/CircularProgress'
 import DialogTitle from '@material-ui/core/DialogTitle'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
-import { FormikHelpers, Form, Field, Formik } from 'formik'
+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'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { useSnackbar } from 'notistack'
 
 interface FormValues {
   depth?: string
@@ -47,16 +47,13 @@ const useStyles = makeStyles((theme: Theme) =>
 )
 
 interface Props {
-  label?: string
+  onClose: () => void
 }
 
-export default function FormDialog({ label }: Props): ReactElement {
+export function CreatePostageStampModal({ onClose }: Props): ReactElement {
   const classes = useStyles()
-  const [open, setOpen] = React.useState(false)
   const { refresh } = useContext(Context)
-  const { beeApi } = useContext(SettingsContext)
+  const { beeDebugApi } = useContext(SettingsContext)
-  const handleClickOpen = () => setOpen(true)
-  const handleClose = () => setOpen(false)
   const { enqueueSnackbar } = useSnackbar()
 
   return (
@@ -67,17 +64,17 @@ export default function FormDialog({ label }: Props): ReactElement {
           // This is really just a typeguard, the validation pretty much guarantees these will have the right values
           if (!values.depth || !values.amount) return
 
-          if (!beeApi) return
+          if (!beeDebugApi) return
 
           const amount = BigInt(values.amount)
           const depth = Number.parseInt(values.depth)
           const options = values.label ? { label: values.label } : undefined
-          await beeApi.createPostageBatch(amount.toString(), depth, options)
+          await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
           actions.resetForm()
           await refresh()
-          handleClose()
+          onClose()
         } catch (e) {
-          enqueueSnackbar(`Error: ${e.message}`, { variant: 'error' })
+          enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
           actions.setSubmitting(false)
         }
       }}
@@ -111,20 +108,9 @@ export default function FormDialog({ label }: Props): ReactElement {
     >
       {({ submitForm, isValid, isSubmitting, values }) => (
         <Form>
-          <Button variant="contained" onClick={handleClickOpen}>
+          <Dialog open={true} onClose={onClose} aria-labelledby="form-dialog-title">
-            {label || 'Buy Postage Stamp'}
+            <DialogTitle id="form-dialog-title">Buy new postage stamp</DialogTitle>
-            {isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
-          </Button>
-          <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
-            <DialogTitle id="form-dialog-title">Purchase new postage stamp</DialogTitle>
             <DialogContent>
-              <DialogContentText>
-                Provide the depth, amount and optionally the label of the postage stamp. Please refer to the{' '}
-                <a href="https://docs.ethswarm.org/docs/access-the-swarm/keep-your-data-alive" target="blank">
-                  official bee docs
-                </a>{' '}
-                to understand these values.
-              </DialogContentText>
               <Field
                 component={TextField}
                 required
@@ -138,7 +124,7 @@ export default function FormDialog({ label }: Props): ReactElement {
               <Field component={TextField} name="label" label="Label" fullWidth className={classes.field} />
             </DialogContent>
             <DialogActions>
-              <Button onClick={handleClose} variant="contained">
+              <Button onClick={onClose} variant="contained">
                 Cancel
               </Button>
               <div className={classes.wrapper}>
@@ -153,6 +139,11 @@ export default function FormDialog({ label }: Props): ReactElement {
                 </Button>
               </div>
             </DialogActions>
+            <DialogContent>
+              <DialogContentText>
+                Please refer to the official Bee documentation to understand these values.
+              </DialogContentText>
+            </DialogContent>
           </Dialog>
         </Form>
       )}

src/pages/stamps/PostageStamp.tsx

@@ -0,0 +1,20 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { Capacity } from '../../components/Capacity'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
+
+interface Props {
+  stamp: EnrichedPostageBatch
+  shorten?: boolean
+}
+
+export function PostageStamp({ stamp, shorten }: Props): ReactElement {
+  return (
+    <Box p={2} width="100%">
+      <Grid container justifyContent="space-between" alignItems="center" direction="row">
+        <Typography variant="subtitle2">{shorten ? stamp.batchID.slice(0, 8) : stamp.batchID}</Typography>
+        <Capacity width="100px" usage={stamp.usage} />
+      </Grid>
+    </Box>
+  )
+}

src/pages/stamps/SelectPostageStampModal.tsx

@@ -0,0 +1,103 @@
+import { createStyles, FormControl, makeStyles, MenuItem, Select, 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'
+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 { EnrichedPostageBatch } from '../../providers/Stamps'
+
+interface Props {
+  stamps: EnrichedPostageBatch[]
+  onSelect: (stamp: EnrichedPostageBatch) => void
+  onClose: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    dialog: {
+      background: theme.palette.background.default,
+      borderRadius: 0,
+      width: '100%',
+      maxWidth: '890px',
+    },
+    title: {
+      color: '#606060',
+      textAlign: 'center',
+    },
+    select: {
+      background: theme.palette.background.paper,
+      borderRadius: 0,
+      border: 0,
+    },
+    option: {
+      height: '52px',
+    },
+    hint: {
+      marginBottom: '16px',
+    },
+  }),
+)
+
+export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): ReactElement {
+  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
+
+  const classes = useStyles()
+
+  function onChange(stampId: string) {
+    const stamp = stamps.find(x => x.batchID === stampId)
+
+    if (stamp) {
+      setSelectedStamp(stamp)
+    }
+  }
+
+  function onFinish() {
+    if (selectedStamp) {
+      onSelect(selectedStamp)
+      onClose()
+    }
+  }
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      aria-labelledby="form-dialog-title"
+      fullWidth
+      PaperProps={{ className: classes.dialog }}
+    >
+      <DialogTitle id="form-dialog-title" className={classes.title}>
+        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>
+      </DialogContent>
+      <DialogContent>
+        <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,9 @@
 import type { ReactElement } from 'react'
-import { EnrichedPostageBatch } from '../../providers/Stamps'
+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 { PostageStamp } from './PostageStamp'
 
 interface Props {
   postageStamps: EnrichedPostageBatch[] | null
@@ -13,11 +14,13 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
 
   return (
     <ExpandableList label="Postage Stamps" defaultOpen>
-      {postageStamps.map(({ batchID, usageText }) => (
+      {postageStamps.map(stamp => (
-        <ExpandableList key={batchID} label={`${batchID.substr(0, 8)}[…]`} level={1} info={`${usageText} used`}>
+        <ExpandableElement
-          <ExpandableListItemKey label="Batch ID" value={batchID} />
+          key={stamp.batchID}
-          <ExpandableListItem label="Usage" value={usageText} />
+          expandable={<ExpandableListItemKey label="Batch ID" value={stamp.batchID} />}
-        </ExpandableList>
+        >
+          <PostageStamp stamp={stamp} shorten={true} />
+        </ExpandableElement>
       ))}
     </ExpandableList>
   )

src/pages/stamps/index.tsx

@@ -1,13 +1,13 @@
-import { ReactElement, useContext, useEffect } from 'react'
+import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Container, CircularProgress } from '@material-ui/core'
+import { ReactElement, useContext, useEffect, useState } from 'react'
-
+import { PlusSquare } from 'react-feather'
-import StampsTable from './StampsTable'
+import { SwarmButton } from '../../components/SwarmButton'
-import CreatePostageStampModal from './CreatePostageStampModal'
-
-import { Context as StampsContext } from '../../providers/Stamps'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'
+import { Context as StampsContext } from '../../providers/Stamps'
+import { CreatePostageStampModal } from './CreatePostageStampModal'
+import StampsTable from './StampsTable'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -25,18 +25,22 @@ const useStyles = makeStyles(() =>
   }),
 )
 
-export default function Accounting(): ReactElement {
+export default function Stamp(): ReactElement {
   const classes = useStyles()
+
+  const [isBuyingStamp, setBuyingStamp] = useState(false)
+
   const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
   const { status } = useContext(BeeContext)
 
-  if (!status.all) return <TroubleshootConnectionCard />
-
   useEffect(() => {
+    if (!status.all) return
     start()
 
     return () => stop()
-  }, [])
+  }, [status]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!status.all) return <TroubleshootConnectionCard />
 
   return (
     <div className={classes.root}>
@@ -48,7 +52,11 @@ export default function Accounting(): ReactElement {
       {!error && (
         <>
           <div className={classes.actions}>
-            <CreatePostageStampModal />
+            {isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
+
+            <SwarmButton onClick={() => setBuyingStamp(true)} iconType={PlusSquare}>
+              Buy New Postage Stamp
+            </SwarmButton>
             <div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
           </div>
           <StampsTable postageStamps={stamps} />

src/pages/status/SetupSteps/DebugConnectionCheck.tsx

@@ -1,14 +1,13 @@
-import { ReactElement, useContext } from 'react'
 import MuiAlert from '@material-ui/lab/Alert'
-
+import { ReactElement, useContext } from 'react'
 import CodeBlockTabs from '../../../components/CodeBlockTabs'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context as SettingsContext } from '../../../providers/Settings'
 import { Context } from '../../../providers/Bee'
+import { Context as SettingsContext } from '../../../providers/Settings'
 
 export default function NodeConnectionCheck(): ReactElement | null {
   const { status, isLoading } = useContext(Context)
@@ -25,7 +24,7 @@ export default function NodeConnectionCheck(): ReactElement | null {
     >
       <ExpandableListItemNote>
         {isOk
-          ? 'The connection to the Bee nodes deug API has been successful'
+          ? 'The connection to the Bee nodes debug API has been successful'
           : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />

src/providers/Bee.tsx

@@ -1,19 +1,18 @@
-import type { ChequebookBalance, Balance, Settlements } from '../types'
-import { createContext, ReactChild, ReactElement, useEffect, useState, useContext } from 'react'
-import { Token } from '../models/Token'
-import semver from 'semver'
-import { engines } from '../../package.json'
-import { Context as SettingsContext } from './Settings'
-
 import type {
-  NodeAddresses,
   ChequebookAddressResponse,
-  LastChequesResponse,
   Health,
+  LastChequesResponse,
+  NodeAddresses,
   Peer,
   Topology,
 } from '@ethersphere/bee-js'
+import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
+import semver from 'semver'
+import { engines } from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
+import { Token } from '../models/Token'
+import type { Balance, ChequebookBalance, Settlements } from '../types'
+import { Context as SettingsContext } from './Settings'
 
 interface Status {
   all: boolean
@@ -52,6 +51,8 @@ interface ContextInterface {
   refresh: () => Promise<void>
 }
 
+const startedInDevMode = window.location.search.includes('devMode=1')
+
 const initialValues: ContextInterface = {
   status: {
     all: false,
@@ -103,6 +104,8 @@ function getStatus(
   chequebookBalance: ChequebookBalance | null,
   error: Error | null,
 ): Status {
+  // FIXME: `devMode` is a temporary workaround to be able to develop with only one node
+  const devMode = startedInDevMode || Boolean(process.env.REACT_APP_DEV_MODE)
   const status = {
     version: Boolean(
       debugApiHealth &&
@@ -113,11 +116,12 @@ function getStatus(
     blockchainConnection: Boolean(nodeAddresses?.ethereum),
     debugApiConnection: Boolean(debugApiHealth?.status === 'ok'),
     apiConnection: apiHealth,
-    topology: Boolean(topology?.connected && topology?.connected > 0),
+    topology: Boolean(topology?.connected && topology?.connected > 0) || devMode,
     chequebook:
-      Boolean(chequebookAddress?.chequebookAddress) &&
+      (Boolean(chequebookAddress?.chequebookAddress) &&
-      chequebookBalance !== null &&
+        chequebookBalance !== null &&
-      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0),
+        chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)) ||
+      devMode,
   }
 
   return { ...status, all: !error && Object.values(status).every(v => v) }
@@ -153,7 +157,7 @@ export function Provider({ children }: Props): ReactElement {
     setApiHealth(false)
 
     refresh()
-  }, [beeApi])
+  }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     setIsLoading(true)
@@ -169,7 +173,7 @@ export function Provider({ children }: Props): ReactElement {
     setSettlements(null)
 
     refresh()
-  }, [beeDebugApi])
+  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const refresh = async () => {
     // Don't want to refresh when already refreshing
@@ -279,7 +283,7 @@ export function Provider({ children }: Props): ReactElement {
 
       await Promise.allSettled(promises)
     } catch (e) {
-      setError(e)
+      setError(e as Error)
     } finally {
       setIsLoading(false)
       setIsRefreshing(false)
@@ -300,7 +304,7 @@ export function Provider({ children }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency, beeDebugApi, beeApi])
+  }, [frequency, beeDebugApi, beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider

src/providers/File.tsx

@@ -0,0 +1,25 @@
+import { createContext, ReactChild, ReactElement, useState } from 'react'
+import { SwarmFile } from '../utils/SwarmFile'
+
+interface ContextInterface {
+  files: SwarmFile[]
+  setFiles: (files: SwarmFile[]) => void
+}
+
+const initialValues: ContextInterface = {
+  files: [],
+  setFiles: () => {}, // 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 [files, setFiles] = useState<SwarmFile[]>(initialValues.files)
+
+  return <Context.Provider value={{ files, setFiles }}>{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',
+  apiUrl: config.BEE_API_HOST,
-  apiDebugUrl:
+  apiDebugUrl: config.BEE_DEBUG_API_HOST,
-    sessionStorage.getItem('debug_api_host') || process.env.REACT_APP_BEE_DEBUG_HOST || 'http://localhost:1635',
   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/providers/Stamps.tsx

@@ -1,5 +1,5 @@
 import { PostageBatch } from '@ethersphere/bee-js'
-import { createContext, ReactChild, ReactElement, useEffect, useState, useContext } from 'react'
+import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
 import { Context as SettingsContext } from './Settings'
 
 export interface EnrichedPostageBatch extends PostageBatch {
@@ -48,7 +48,7 @@ function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const { beeApi } = useContext(SettingsContext)
+  const { beeDebugApi } = useContext(SettingsContext)
   const [stamps, setStamps] = useState<EnrichedPostageBatch[] | null>(initialValues.stamps)
   const [error, setError] = useState<Error | null>(initialValues.error)
   const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
@@ -59,16 +59,16 @@ export function Provider({ children }: Props): ReactElement {
     // Don't want to refresh when already refreshing
     if (isLoading) return
 
-    if (!beeApi) return
+    if (!beeDebugApi) return
 
     try {
       setIsLoading(true)
-      const stamps = await beeApi.getAllPostageBatch()
+      const stamps = await beeDebugApi.getAllPostageBatch()
 
       setStamps(stamps.map(enrichStamp))
       setLastUpdate(Date.now())
     } catch (e) {
-      setError(e)
+      setError(e as Error)
     } finally {
       setIsLoading(false)
     }
@@ -87,7 +87,7 @@ export function Provider({ children }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency])
+  }, [frequency]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider value={{ stamps, error, isLoading, lastUpdate, start, stop, refresh }}>

src/routes.tsx

@@ -1,18 +1,22 @@
 import type { ReactElement } from 'react'
-import { Switch } from 'react-router-dom'
+import { Route, 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 Accounting from './pages/accounting'
+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 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',
@@ -21,7 +25,10 @@ export enum ROUTES {
 
 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} />

src/theme.tsx

@@ -1,4 +1,4 @@
-import { createMuiTheme, Theme } from '@material-ui/core/styles'
+import { createTheme, Theme } from '@material-ui/core/styles'
 import { orange } from '@material-ui/core/colors'
 
 declare module '@material-ui/core/styles/createPalette' {
@@ -170,7 +170,7 @@ const propsOverrides = {
   },
 }
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   palette: {
     type: 'light',
     background: {

src/utils/SwarmFile.ts

@@ -0,0 +1,24 @@
+export class SwarmFile {
+  public name: string
+  public path: string
+  public type: string
+  public size: number
+  public webkitRelativePath: string
+  public arrayBuffer: () => Promise<ArrayBuffer>
+  private data: Promise<ArrayBuffer>
+
+  constructor(file: File) {
+    const path = Reflect.get(file, 'path') || file.webkitRelativePath || file.name
+    this.path = path.startsWith('/') ? path.slice(1) : path
+    this.webkitRelativePath = this.path
+    this.name = file.name
+    this.type = file.type
+    this.size = file.size
+    this.data = file.arrayBuffer()
+    this.arrayBuffer = async () => {
+      const data = await this.data
+
+      return data
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+import { FileData } from '@ethersphere/bee-js'
+import { SwarmFile } from './SwarmFile'
+
+const indexHtmls = ['index.html', 'index.htm']
+
+export function detectIndexHtml(files: SwarmFile[]): string | false {
+  if (!files.length) {
+    return false
+  }
+
+  const exactMatch = files.find(x => indexHtmls.includes(x.path))
+
+  if (exactMatch) {
+    return exactMatch.name
+  }
+
+  const prefix = files[0].path.split('/')[0] + '/'
+
+  const allStartWithSamePrefix = files.every(x => x.path.startsWith(prefix))
+
+  if (allStartWithSamePrefix) {
+    const match = files.find(x => indexHtmls.map(y => prefix + y).includes(x.path))
+
+    if (match) {
+      return match.name
+    }
+  }
+
+  return false
+}
+
+export function getHumanReadableFileSize(bytes: number): string {
+  if (bytes >= 1e6) {
+    return (bytes / 1e6).toFixed(2) + ' MB'
+  }
+
+  if (bytes >= 1e3) {
+    return (bytes / 1e3).toFixed(2) + ' kB'
+  }
+
+  return bytes + ' bytes'
+}
+
+export function convertBeeFileToBrowserFile(file: FileData<ArrayBuffer>): Partial<File> {
+  return {
+    name: file.name,
+    size: file.data.byteLength,
+    type: file.contentType,
+    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 === 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/index.test.ts

@@ -1,60 +0,0 @@
-import BigNumber from 'bignumber.js'
-import { isInteger, makeBigNumber } from './index'
-
-describe('utils', () => {
-  describe('isInteger', () => {
-    const correctValues = [
-      BigInt(0),
-      BigInt(1),
-      BigInt(-1),
-      new BigNumber('1'),
-      new BigNumber('0'),
-      new BigNumber('-1'),
-    ]
-    const wrongValues = ['1', new BigNumber('-0.1'), new BigNumber(NaN), new BigNumber(Infinity)]
-
-    correctValues.forEach(v => {
-      test(`testing ${v}`, () => {
-        expect(isInteger(v)).toBe(true)
-      })
-    })
-
-    wrongValues.forEach(v => {
-      test(`testing ${v}`, () => {
-        expect(isInteger(v)).toBe(false)
-      })
-    })
-  })
-
-  describe('makeBigNumber', () => {
-    const correctValues = [
-      BigInt(0),
-      BigInt(1),
-      BigInt(-1),
-      '1',
-      '0',
-      '-1',
-      '0.1',
-      new BigNumber('1'),
-      new BigNumber('0'),
-      new BigNumber('-1'),
-      0,
-      1,
-      -1,
-    ]
-    const wrongValues = [new Function()]
-
-    correctValues.forEach(v => {
-      test(`testing ${v}`, () => {
-        expect(BigNumber.isBigNumber(makeBigNumber(v))).toBe(true)
-      })
-    })
-
-    wrongValues.forEach(v => {
-      test(`testing ${v}`, () => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        expect(() => makeBigNumber(v as unknown as any)).toThrow()
-      })
-    })
-  })
-})

src/utils/index.ts

@@ -106,3 +106,9 @@ export function makeRetriablePromise<T>(fn: () => Promise<T>, maxRetries = 3, de
     }
   })
 }
+
+export function extractSwarmHash(string: string): string | null {
+  const matches = string.match(/[a-fA-F0-9]{64,128}/)
+
+  return (matches && matches[0]) || null
+}

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 {

test/file.test.ts

@@ -0,0 +1,57 @@
+import { detectIndexHtml } from './file'
+
+describe('file utils', () => {
+  it('detectIndexHtml should find index.html', () => {
+    expect(
+      detectIndexHtml([
+        { name: 'swarm.png', path: 'swarm.png' },
+        { name: 'index.html', path: 'index.html' },
+      ]),
+    ).toBe('index.html')
+  })
+
+  it('detectIndexHtml should find index.htm', () => {
+    expect(
+      detectIndexHtml([
+        { name: 'index.htm', path: 'index.htm' },
+        { name: 'swarm.png', path: 'swarm.png' },
+      ]),
+    ).toBe('index.htm')
+  })
+
+  it('detectIndexHtml should find nested index.html', () => {
+    expect(
+      detectIndexHtml([
+        { name: 'swarm.png', path: 'sample-folder/swarm.png' },
+        { name: 'index.html', path: 'sample-folder/index.html' },
+      ]),
+    ).toBe('index.html')
+  })
+
+  it('detectIndexHtml should not find nested index.htm when ambigous', () => {
+    expect(
+      detectIndexHtml([
+        { name: 'index.htm', path: 'sample-folder/index.htm' },
+        { name: 'swarm.png', path: 'other-folder/swarm.png' },
+      ]),
+    ).toBe(false)
+  })
+
+  it('detectIndexHtml should not find deep index.html', () => {
+    expect(
+      detectIndexHtml([
+        { name: 'index.html', path: 'sample-folder/index.html' },
+        { name: 'swarm.png', path: 'swarm.png' },
+      ]),
+    ).toBe(false)
+  })
+
+  it('detectIndexHtml should return false when no matches appear', () => {
+    expect(
+      detectIndexHtml([
+        { name: 'swarm.png', path: 'swarm.png' },
+        { name: 'swarm.jpg', path: 'swarm.jpg' },
+      ]),
+    ).toBe(false)
+  })
+})

test/index.test.ts

@@ -0,0 +1,106 @@
+import BigNumber from 'bignumber.js'
+import { extractSwarmHash, isInteger, makeBigNumber } from './index'
+
+describe('utils', () => {
+  describe('isInteger', () => {
+    const correctValues = [
+      BigInt(0),
+      BigInt(1),
+      BigInt(-1),
+      new BigNumber('1'),
+      new BigNumber('0'),
+      new BigNumber('-1'),
+    ]
+    const wrongValues = ['1', new BigNumber('-0.1'), new BigNumber(NaN), new BigNumber(Infinity)]
+
+    correctValues.forEach(v => {
+      test(`testing ${v}`, () => {
+        expect(isInteger(v)).toBe(true)
+      })
+    })
+
+    wrongValues.forEach(v => {
+      test(`testing ${v}`, () => {
+        expect(isInteger(v)).toBe(false)
+      })
+    })
+  })
+
+  describe('makeBigNumber', () => {
+    const correctValues = [
+      BigInt(0),
+      BigInt(1),
+      BigInt(-1),
+      '1',
+      '0',
+      '-1',
+      '0.1',
+      new BigNumber('1'),
+      new BigNumber('0'),
+      new BigNumber('-1'),
+      0,
+      1,
+      -1,
+    ]
+    const wrongValues = [new Function()] // eslint-disable-line no-new-func
+
+    correctValues.forEach(v => {
+      test(`testing ${v}`, () => {
+        expect(BigNumber.isBigNumber(makeBigNumber(v))).toBe(true)
+      })
+    })
+
+    wrongValues.forEach(v => {
+      test(`testing ${v}`, () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        expect(() => makeBigNumber(v as unknown as any)).toThrow()
+      })
+    })
+  })
+
+  describe('extractSwarmHash', () => {
+    test('should return 64 hash', () => {
+      expect(extractSwarmHash('7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3')).toBe(
+        '7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3',
+      )
+    })
+
+    test('should return 128 hash', () => {
+      expect(
+        extractSwarmHash(
+          'd1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f',
+        ),
+      ).toBe(
+        'd1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f',
+      )
+    })
+
+    test('should return 64 hash from url', () => {
+      expect(
+        extractSwarmHash('http://localhost:1633/bzz/7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3/'),
+      ).toBe('7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3')
+    })
+
+    test('should return 128 hash from url', () => {
+      expect(
+        extractSwarmHash(
+          'http://localhost:1633/bzz/d1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f/',
+        ),
+      ).toBe(
+        'd1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f',
+      )
+    })
+
+    test('should return null when nothing is found', () => {
+      expect(extractSwarmHash('Bee Dashboard')).toBe(null)
+    })
+
+    test('should return null when length is incorrect', () => {
+      expect(extractSwarmHash('7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81a')).toBe(null)
+    })
+
+    test('should return null when alphanumeric', () => {
+      expect(extractSwarmHash('gkQ6duo5iHJ099g908P0t17ZWFf8Ke2klrywLP5BGtLkcaEC5W0kLEfbe4wUnDI6')).toBe(null)
+    })
+  })
+})

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',
+          },
+        },
+      ],
+    },
+  }
+}