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

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

.github/workflows/check.yaml

@@ -52,6 +52,12 @@ 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
 
@@ -64,7 +70,15 @@ jobs:
       - 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,24 @@
 # 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)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.9.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/"
   },
@@ -25,31 +27,42 @@
   },
   "dependencies": {
     "@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",
     "axios": "0.24.0",
     "bignumber.js": "9.0.1",
+    "file-saver": "^2.0.5",
     "formik": "2.2.9",
     "formik-material-ui": "3.0.1",
+    "jszip": "^3.7.1",
     "material-ui-dropzone": "3.5.0",
     "notistack": "1.0.10",
     "opener": "1.5.2",
     "qrcode.react": "1.0.1",
-    "react": "17.0.2",
+    "react": ">= 17.0.2",
     "react-copy-to-clipboard": "5.0.4",
-    "react-dom": "17.0.2",
+    "react-dom": ">= 17.0.2",
     "react-feather": "2.0.9",
     "react-identicons": "1.2.5",
+    "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-syntax-highlighter": "15.4.4",
     "semver": "7.3.5",
     "serve-handler": "6.1.3"
   },
   "devDependencies": {
+    "@babel/core": "7.16.0",
+    "@babel/plugin-proposal-class-properties": "7.16.0",
+    "@babel/plugin-transform-runtime": "7.16.4",
+    "@babel/preset-env": "7.16.4",
+    "@babel/preset-react": "7.16.0",
+    "@babel/preset-typescript": "7.16.0",
     "@commitlint/config-conventional": "14.1.0",
     "@testing-library/jest-dom": "5.15.0",
     "@testing-library/react": "12.1.2",
+    "@types/file-saver": "2.0.4",
     "@types/jest": "27.0.2",
     "@types/qrcode.react": "1.0.2",
     "@types/react": "17.0.34",
@@ -62,6 +75,9 @@
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "babel-eslint": "10.1.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-syntax-dynamic-import": "6.18.0",
+    "babel-plugin-tsconfig-paths": "1.0.2",
     "depcheck": "1.4.2",
     "eslint": "7.24.0",
     "eslint-config-prettier": "8.2.0",
@@ -74,20 +90,31 @@
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-testing-library": "3.10.2",
+    "file-loader": "6.2.0",
     "prettier": "2.4.1",
     "react-scripts": "4.0.3",
+    "ts-node": "^10.4.0",
     "typescript": "4.4.4",
-    "web-vitals": "2.1.2"
+    "web-vitals": "2.1.2",
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.9.1"
+  },
+  "peerDependencies": {
+    "react": ">= 17.0.2",
+    "react-dom": ">= 17.0.2"
   },
   "scripts": {
     "prepare": "npm run build",
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "build:component": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --mode=production",
+    "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
     "test": "react-scripts test",
     "serve": "node ./serve.js",
     "depcheck": "depcheck .",
     "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\""
+    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "check:types": "tsc --project tsconfig.lib.json"
   },
   "files": [
     "build",

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

src/components/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/ExpandableListItemInput.tsx

@@ -55,6 +55,7 @@ interface Props {
   onChange?: (value: string) => void
   onConfirm: (value: string) => void
   mapperFn?: (value: string) => string
+  locked?: boolean
 }
 
 export default function ExpandableListItemKey({
@@ -68,6 +69,7 @@ export default function ExpandableListItemKey({
   helperText,
   placeholder,
   mapperFn,
+  locked,
 }: Props): ReactElement | null {
   const classes = useStyles()
   const [open, setOpen] = useState(Boolean(expandedOnly))
@@ -96,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} />
@@ -116,6 +118,7 @@ export default function ExpandableListItemKey({
               fullWidth
               className={classes.content}
               autoFocus
+              hidden={locked}
             />
           </Collapse>
         </Grid>

src/components/ExpandableListItemLink.tsx

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

src/components/History.tsx

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

src/components/HistoryHeader.tsx

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

src/components/Loading.tsx

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

src/components/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/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/config.ts

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

src/hooks/apiHooks.tsx

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

src/pages/files/AssetPreview.tsx

@@ -3,15 +3,18 @@ import { Web } from '@material-ui/icons'
 import { ReactElement, useEffect, useState } from 'react'
 import { File, Folder } from 'react-feather'
 import { FitImage } from '../../components/FitImage'
-import { detectIndexHtml, getHumanReadableFileSize } from '../../utils/file'
+import { detectIndexHtml, getAssetNameFromFiles, getHumanReadableFileSize } from '../../utils/file'
 import { SwarmFile } from '../../utils/SwarmFile'
 import { AssetIcon } from './AssetIcon'
 
 interface Props {
+  assetName?: string
   files: SwarmFile[]
 }
 
-export function AssetPreview({ files }: Props): ReactElement {
+// TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)
+
+export function AssetPreview({ assetName, files }: Props): ReactElement {
   const [previewComponent, setPreviewComponent] = useState<ReactElement | undefined>(undefined)
   const [previewUri, setPreviewUri] = useState<string | undefined>(undefined)
 
@@ -39,11 +42,13 @@ export function AssetPreview({ files }: Props): ReactElement {
   }, [files])
 
   const getPrimaryText = () => {
+    const name = getAssetNameFromFiles(files)
+
     if (files.length === 1) {
-      return 'Filename: ' + files[0].name
+      return 'Filename: ' + (assetName || name)
     }
 
-    return 'Folder name: ' + files[0].path.split('/')[0]
+    return 'Folder name: ' + (assetName || name)
   }
 
   const getKind = () => {
@@ -66,6 +71,8 @@ export function AssetPreview({ files }: Props): ReactElement {
     return getHumanReadableFileSize(bytes)
   }
 
+  const size = getSize()
+
   return (
     <Box mb={4}>
       <Box bgcolor="background.paper">
@@ -78,7 +85,7 @@ export function AssetPreview({ files }: Props): ReactElement {
           <Box p={2}>
             <Typography>{getPrimaryText()}</Typography>
             <Typography>Kind: {getKind()}</Typography>
-            <Typography>Size: {getSize()}</Typography>
+            {size !== '0 bytes' && <Typography>Size: {size}</Typography>}
           </Box>
         </Grid>
       </Box>

src/pages/files/AssetSummary.tsx

@@ -0,0 +1,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,41 +1,47 @@
 import { Utils } from '@ethersphere/bee-js'
-import { Box } from '@material-ui/core'
+import { ManifestJs } from '@ethersphere/manifest-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
+import { useHistory } from 'react-router-dom'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
+import { History } from '../../components/History'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
 import { extractSwarmHash } from '../../utils'
-import { convertBeeFileToBrowserFile } from '../../utils/file'
+import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
-import { SwarmFile } from '../../utils/SwarmFile'
+import { FileNavigation } from './FileNavigation'
-import { AssetPreview } from './AssetPreview'
-import { DownloadActionBar } from './DownloadActionBar'
 
-export default function Files(): ReactElement {
+export function Download(): ReactElement {
-  const { apiUrl, beeApi } = useContext(SettingsContext)
+  const [loading, setLoading] = useState(false)
-
+  const { beeApi } = useContext(SettingsContext)
-  const [reference, setReference] = useState('')
   const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
-  const [downloadedFile, setDownloadedFile] = useState<Partial<File> | null>(null)
 
   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.')
-  function onDownload() {
+    }
-    window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
   }
 
   async function onSwarmIdentifier(identifier: string) {
     if (!beeApi) {
       return
     }
-    setReference(identifier)
+
     try {
-      const response = await beeApi.downloadFile(identifier)
+      const manifestJs = new ManifestJs(beeApi)
-      setDownloadedFile(convertBeeFileToBrowserFile(response))
+      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')
 
@@ -47,20 +53,11 @@ export default function Files(): ReactElement {
         message = 'The specified hash was not found.'
       }
       enqueueSnackbar(<span>Error: {message || 'Unknown'}</span>, { variant: 'error' })
+    } finally {
+      setLoading(false)
     }
   }
 
-  if (downloadedFile) {
-    return (
-      <>
-        <Box mb={4}>
-          <AssetPreview files={[new SwarmFile(downloadedFile as File)]} />
-        </Box>
-        <DownloadActionBar onCancel={() => setDownloadedFile(null)} onDownload={onDownload} />
-      </>
-    )
-  }
-
   function recognizeSwarmHash(value: string) {
     if (value.length < 64) {
       return value
@@ -76,16 +73,20 @@ export default function Files(): ReactElement {
   }
 
   return (
-    <ExpandableListItemInput
+    <>
-      label="Swarm Hash"
+      <FileNavigation active="DOWNLOAD" />
-      onConfirm={value => onSwarmIdentifier(value)}
+      <ExpandableListItemInput
-      onChange={validateChange}
+        label="Swarm Hash"
-      helperText={referenceError}
+        onConfirm={value => onSwarmIdentifier(value)}
-      confirmLabel={'Search'}
+        onChange={validateChange}
-      confirmLabelDisabled={Boolean(referenceError)}
+        helperText={referenceError}
-      placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
+        confirmLabel={'Search'}
-      expandedOnly
+        confirmLabelDisabled={Boolean(referenceError) || loading}
-      mapperFn={value => recognizeSwarmHash(value)}
+        placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
-    />
+        expandedOnly
+        mapperFn={value => recognizeSwarmHash(value)}
+      />
+      <History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />
+    </>
   )
 }

src/pages/files/DownloadActionBar.tsx

@@ -1,23 +1,31 @@
 import { Button } from '@material-ui/core'
 import { Clear } from '@material-ui/icons'
 import { ReactElement } from 'react'
-import { Download } from 'react-feather'
+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({ onDownload, onCancel }: Props): ReactElement {
+export function DownloadActionBar({ onOpen, onDownload, onCancel, hasIndexDocument, loading }: Props): ReactElement {
   return (
     <ExpandableListItemActions>
-      <SwarmButton onClick={onDownload} iconType={Download}>
+      {hasIndexDocument && (
-        Download This File
+        <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 />}>
+      <Button onClick={onCancel} variant="contained" startIcon={<Clear />} disabled={loading}>
-        Cancel
+        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/PostUploadSummary.tsx

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

src/pages/files/Share.tsx

@@ -0,0 +1,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/Upload.tsx

@@ -1,32 +1,20 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
-import { detectIndexHtml } from '../../utils/file'
+import { ROUTES } from '../../routes'
-import { SwarmFile } from '../../utils/SwarmFile'
+import { detectIndexHtml, getAssetNameFromFiles } from '../../utils/file'
+import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { CreatePostageStampModal } from '../stamps/CreatePostageStampModal'
 import { SelectPostageStampModal } from '../stamps/SelectPostageStampModal'
 import { AssetPreview } from './AssetPreview'
-import { PostUploadSummary } from './PostUploadSummary'
 import { StampPreview } from './StampPreview'
 import { UploadActionBar } from './UploadActionBar'
-import { UploadArea } from './UploadArea'
 
-const useStyles = makeStyles((theme: Theme) =>
+export function Upload(): ReactElement {
-  createStyles({
-    content: { marginTop: theme.spacing(2) },
-    loadingProgress: { textAlign: 'center', padding: '50px' },
-  }),
-)
-
-const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
-
-export default function Files(): ReactElement {
-  const classes = useStyles()
-  const [dropzoneKey, setDropzoneKey] = useState(0)
-  const [files, setFiles] = useState<SwarmFile[]>([])
-  const [uploadReference, setUploadReference] = useState('')
   const [isBuyingStamp, setBuyingStamp] = useState(false)
   const [isSelectingStamp, setSelectingStamp] = useState(false)
   const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
@@ -34,7 +22,14 @@ export default function Files(): ReactElement {
 
   const { 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()
@@ -51,9 +46,14 @@ export default function Files(): ReactElement {
 
     beeApi
       .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(() => setUploading(false))
+        history.replace(ROUTES.HASH.replace(':hash', hash.reference))
+      })
+      .catch(e => {
+        enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
+        setUploading(false)
+      })
   }
 
   const reset = () => {
@@ -62,23 +62,12 @@ export default function Files(): ReactElement {
     setUploading(false)
   }
 
-  const uploadNew = () => {
-    setTimeout(() => {
-      reset()
-      setDropzoneKey(dropzoneKey + 1)
-      setUploadReference('')
-    }, 0)
-  }
-
   return (
     <>
-      {files.length ? (
+      <HistoryHeader>Upload</HistoryHeader>
-        <AssetPreview files={files} />
+      {files.length && <AssetPreview files={files} />}
-      ) : (
+      {stamp !== null ? <StampPreview stamp={stamp} /> : null}
-        <UploadArea maximumSizeInBytes={MAX_FILE_SIZE} setFiles={setFiles} />
+      {files.length && (
-      )}
-      {stamp !== null && !uploadReference ? <StampPreview stamp={stamp} /> : null}
-      {files.length && !uploadReference ? (
         <UploadActionBar
           canSelectStamp={stamps !== null && stamps.length > 0}
           hasSelectedStamp={stamp !== null}
@@ -89,12 +78,7 @@ export default function Files(): ReactElement {
           onClearStamp={() => setStamp(null)}
           isUploading={isUploading}
         />
-      ) : null}
+      )}
-      <div className={classes.content}>
-        {uploadReference && (
-          <PostUploadSummary onUploadNewClick={() => uploadNew()} uploadReference={uploadReference} />
-        )}
-      </div>
       {isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
       {stamps && isSelectingStamp ? (
         <SelectPostageStampModal

src/pages/files/UploadArea.tsx

@@ -1,14 +1,16 @@
 import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
 import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
-import { ReactElement } from 'react'
+import { ReactElement, useContext, useState } from 'react'
-import { FilePlus } from 'react-feather'
+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 {
-  setFiles: (files: SwarmFile[]) => void
   maximumSizeInBytes: number
 }
 
@@ -42,15 +44,17 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 )
 
-export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElement {
+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
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const onUploadCollectionClick = () => {
-  const onUploadFolderClick = () => {
     const element = getDropzoneInputDomElement()
 
     if (element) {
@@ -61,6 +65,16 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
     }
   }
 
+  const onUploadWebsiteClick = () => {
+    onUploadCollectionClick()
+    setStrictWebsiteMode(true)
+  }
+
+  const onUploadFolderClick = () => {
+    onUploadCollectionClick()
+    setStrictWebsiteMode(false)
+  }
+
   const onUploadFileClick = () => {
     const element = getDropzoneInputDomElement()
 
@@ -72,9 +86,9 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
     }
   }
 
-  const resetComponentOnAddingInvalidContent = (files: SwarmFile[]) => {
+  const resetComponentOnAddingInvalidContent = () => {
-    setFiles(files)
     setTimeout(() => {
+      setVersion(x => x + 1)
       setFiles([])
     }, 0)
   }
@@ -84,16 +98,20 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
       const swarmFiles = files.map(x => new SwarmFile(x))
       const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(swarmFiles) || undefined
 
-      if (files.length && !indexDocument) {
+      if (files.length && strictWebsiteMode && !indexDocument) {
         enqueueSnackbar('To upload a website, there must be an index.html or index.htm in the root of the folder.', {
           variant: 'error',
         })
-        resetComponentOnAddingInvalidContent(swarmFiles)
+        resetComponentOnAddingInvalidContent()
 
         return
       }
 
       setFiles(swarmFiles)
+
+      if (files.length) {
+        history.push(ROUTES.UPLOAD_IN_PROGRESS)
+      }
     }
   }
 
@@ -101,9 +119,10 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
     <>
       <div className={classes.areaWrapper}>
         <DropzoneArea
+          key={version}
           dropzoneClass={classes.dropzone}
           onChange={handleChange}
-          filesLimit={1}
+          filesLimit={1e9}
           maxFileSize={maximumSizeInBytes}
           showPreviews={false}
         />
@@ -111,9 +130,18 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
           <SwarmButton className={classes.button} onClick={onUploadFileClick} iconType={FilePlus}>
             Add File
           </SwarmButton>
+          <SwarmButton className={classes.button} onClick={onUploadFolderClick} iconType={FolderPlus}>
+            Add Folder
+          </SwarmButton>
+          <SwarmButton className={classes.button} onClick={onUploadWebsiteClick} iconType={PlusCircle}>
+            Add Website
+          </SwarmButton>
         </div>
       </div>
-      <Typography>You can click the button above or simply drag and drop to add a file.</Typography>
+      <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/SelectPostageStampModal.tsx

@@ -1,4 +1,4 @@
-import { Box, createStyles, FormControl, makeStyles, MenuItem, Select, Theme, Typography } from '@material-ui/core'
+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'
@@ -88,30 +88,15 @@ export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): R
           </Select>
         </FormControl>
       </DialogContent>
-      <Box mb={2}>
-        <DialogContent>
-          <ExpandableListItemActions>
-            <Button disabled={!selectedStamp} onClick={onFinish} variant="contained" startIcon={<Check />}>
-              Select
-            </Button>
-            <Button onClick={onClose} variant="contained" startIcon={<Clear />}>
-              Cancel
-            </Button>
-          </ExpandableListItemActions>
-        </DialogContent>
-      </Box>
       <DialogContent>
-        <Typography className={classes.hint}>
+        <ExpandableListItemActions>
-          Please refer to the{' '}
+          <Button disabled={!selectedStamp} onClick={onFinish} variant="contained" startIcon={<Check />}>
-          <a
+            Select
-            href="https://docs.ethswarm.org/docs/access-the-swarm/keep-your-data-alive#purchase-a-batch-of-stamps"
+          </Button>
-            target="_blank"
+          <Button onClick={onClose} variant="contained" startIcon={<Clear />}>
-            rel="noreferrer"
+            Cancel
-          >
+          </Button>
-            official Bee documentation
+        </ExpandableListItemActions>
-          </a>{' '}
-          to understand these values.
-        </Typography>
       </DialogContent>
     </Dialog>
   )

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/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/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

@@ -49,3 +49,25 @@ export function convertBeeFileToBrowserFile(file: FileData<ArrayBuffer>): Partia
     arrayBuffer: () => new Promise(resolve => resolve(file.data)),
   }
 }
+
+export function convertManifestToFiles(files: Record<string, string>): SwarmFile[] {
+  return Object.entries(files).map(
+    x =>
+      ({
+        name: x[0],
+        path: x[0],
+        type: 'n/a',
+        size: 0,
+        webkitRelativePath: x[0],
+        arrayBuffer: () => new Promise(resolve => resolve(new ArrayBuffer(0))),
+      } as SwarmFile),
+  )
+}
+
+export function getAssetNameFromFiles(files: SwarmFile[]): string {
+  if (files.length === 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/local-storage.ts

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

src/utils/threshold.ts

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

tsconfig.lib.json

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

webpack.config.ts

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