chore: release 0.13.0 (#289 )

ci: add swarm-cli extra flags (#299 )
* ci: add swarm-cli extra flags * ci: rename SWARM_CLI_EXTRA_FLAGS to GATEWAY_AUTHORIZATION_HEADER * ci: change bee-url
2022-01-31 13:04:20 +01:00 · 2022-01-28 14:02:15 +01:00 · 2022-01-27 16:22:27 +01:00 · 2022-01-26 18:29:09 +01:00 · 2022-01-25 18:03:40 +01:00 · 2022-01-25 18:02:57 +01:00
42 changed files with 595 additions and 467 deletions
@@ -69,3 +69,17 @@ jobs:

      - name: Build Component
        run: npm run build:component
+
+      - name: Create preview
+        uses: ethersphere/beeload-action@v1
+        with:
+          bee-url: https://unlimited.gateway.ethswarm.org
+          preview: 'true'
+          token: ${{ secrets.REPO_GHA_PAT }}
+          extra-params: '-H "${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}"'
+
+      - name: Upload to testnet
+        continue-on-error: true
+        uses: ethersphere/beeload-action@v1
+        with:
+          bee-url: https://api.gateway.testnet.ethswarm.org
@@ -1,5 +1,22 @@
 # Changelog

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


@@ -1,12 +1,12 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.12.0",
+  "version": "0.13.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ethersphere/bee-dashboard",
-      "version": "0.12.0",
+      "version": "0.13.0",
      "license": "BSD-3-Clause",
      "dependencies": {
        "@ethersphere/bee-js": "3.1.0",
@@ -31,8 +31,8 @@
        "react-dom": ">= 17.0.2",
        "react-feather": "2.0.9",
        "react-identicons": "1.2.5",
-        "react-router": "5.2.0",
-        "react-router-dom": "5.2.0",
+        "react-router": "6.2.1",
+        "react-router-dom": "6.2.1",
        "react-syntax-highlighter": "15.4.4",
        "semver": "7.3.5",
        "serve-handler": "6.1.3"
@@ -11867,16 +11867,11 @@
      }
    },
    "node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
+        "@babel/runtime": "^7.7.6"
      }
    },
    "node_modules/hmac-drbg": {
@@ -13220,11 +13215,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-    },
    "node_modules/isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -16287,19 +16277,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
    "node_modules/mini-css-extract-plugin": {
      "version": "0.11.3",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -17523,14 +17500,6 @@
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
      "dev": true
    },
-    "node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
    "node_modules/path-type": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -21899,47 +21868,29 @@
      }
    },
    "node_modules/react-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "history": "^5.2.0"
      },
      "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
      }
    },
    "node_modules/react-router-dom": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
-      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
      },
      "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
      }
    },
-    "node_modules/react-router/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
    "node_modules/react-scripts": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
@@ -22636,11 +22587,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
    "node_modules/resolve-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -25523,11 +25469,6 @@
      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
      "dev": true
    },
-    "node_modules/tiny-invariant": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
-      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
-    },
    "node_modules/tiny-warning": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -26326,11 +26267,6 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -37639,16 +37575,11 @@
      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
    },
    "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
+        "@babel/runtime": "^7.7.6"
      }
    },
    "hmac-drbg": {
@@ -38664,11 +38595,6 @@
        "is-docker": "^2.0.0"
      }
    },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-    },
    "isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -41131,15 +41057,6 @@
      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
      "dev": true
    },
-    "mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      }
-    },
    "mini-css-extract-plugin": {
      "version": "0.11.3",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -42109,14 +42026,6 @@
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
      "dev": true
    },
-    "path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "requires": {
-        "isarray": "0.0.1"
-      }
-    },
    "path-type": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -45497,41 +45406,20 @@
      "dev": true
    },
    "react-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
+        "history": "^5.2.0"
      }
    },
    "react-router-dom": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
-      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
      }
    },
    "react-scripts": {
@@ -46074,11 +45962,6 @@
      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
      "dev": true
    },
-    "resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
    "resolve-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -48406,11 +48289,6 @@
      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
      "dev": true
    },
-    "tiny-invariant": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
-      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
-    },
    "tiny-warning": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -49034,11 +48912,6 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
-    "value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
    "vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.12.0",
+  "version": "0.13.0",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -48,8 +48,8 @@
    "react-dom": ">= 17.0.2",
    "react-feather": "2.0.9",
    "react-identicons": "1.2.5",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "6.2.1",
+    "react-router-dom": "6.2.1",
    "react-syntax-highlighter": "15.4.4",
    "semver": "7.3.5",
    "serve-handler": "6.1.3"
@@ -6,13 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

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

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

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

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

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

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

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

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

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

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

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

  return (
    <ListItem
@@ -25,6 +25,11 @@ const useStyles = makeStyles((theme: Theme) =>
      '& fieldset': {
        border: 0,
      },
+      '& .MuiSelect-select': {
+        '&:focus': {
+          background: theme.palette.background.paper,
+        },
+      },
    },
    option: {
      height: '52px',
@@ -48,6 +53,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
          defaultValue={defaultValue || ''}
          className={classes.select}
          placeholder={label}
+          MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
        >
          {options.map((x, i) => (
            <MenuItem key={i} value={x.value} className={classes.option}>
@@ -71,6 +77,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
        defaultValue={defaultValue || ''}
        onChange={onChange}
        placeholder={label}
+        MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
      >
        {options.map((x, i) => (
          <MenuItem key={i} value={x.value} className={classes.option}>
@@ -16,10 +16,18 @@ const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    field: {
      background: theme.palette.background.paper,
-      height: '52px',
      '& fieldset': {
        border: 0,
      },
+      '& .Mui-focused': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiInputBase-root': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiFilledInput-root': {
+        borderRadius: 0,
+      },
    },
  }),
 )
@@ -36,9 +44,10 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
        name={name}
        label={label}
        fullWidth
-        variant="outlined"
+        variant="filled"
        className={classes.field}
        defaultValue=""
+        InputProps={{ disableUnderline: true }}
      />
    )
  }
@@ -49,10 +58,11 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
      required
      label={label}
      fullWidth
-      variant="outlined"
+      variant="filled"
      className={classes.field}
      defaultValue=""
      onChange={onChange}
+      InputProps={{ disableUnderline: true }}
    />
  )
 }
@@ -0,0 +1,3 @@
+export const META_FILE_NAME = '.swarmgatewaymeta.json'
+export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
+export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
@@ -3,7 +3,7 @@ import { Form, Formik } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { Check, X } from 'react-feather'
-import { useHistory } from 'react-router'
+import { useNavigate } from 'react-router'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -34,7 +34,7 @@ export default function CreateNewFeed(): ReactElement {
  const [loading, setLoading] = useState(false)
  const { enqueueSnackbar } = useSnackbar()

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

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

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

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

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

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

  const [available, setAvailable] = useState(false)

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

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

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

    return <></>
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-export function AssetSummary({ files, hash }: Props): ReactElement {
+export function AssetSummary({ isWebsite, hash }: Props): ReactElement {
  return (
    <>
      <Box mb={4}>
        <ExpandableListItemKey label="Swarm hash" value={hash} />
        <ExpandableListItemLink label="Share on Swarm Gateway" value={`https://gateway.ethswarm.org/access/${hash}`} />
-        {detectIndexHtml(files) && (
+        {isWebsite && (
          <ExpandableListItemLink
            label="BZZ Link"
            value={`https://${swarmCid.encodeManifestReference(hash).toString()}.bzz.link`}
@@ -2,7 +2,7 @@ import { Utils } from '@ethersphere/bee-js'
 import { ManifestJs } from '@ethersphere/manifest-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { History } from '../../components/History'
 import { Context, defaultUploadOrigin } from '../../providers/File'
@@ -20,7 +20,7 @@ export function Download(): ReactElement {
  const { setUploadOrigin } = useContext(Context)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  if (loading) {
@@ -131,17 +148,17 @@ export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
  return (
    <>
      <Box mb={4}>
-        <AssetPreview files={files} assetName={assetName} />
+        <AssetPreview metadata={metadata} previewUri={preview} />
      </Box>
      <Box mb={4}>
-        <AssetSummary files={files} hash={reference} />
+        <AssetSummary isWebsite={metadata?.isWebsite} hash={reference} />
      </Box>
      <DownloadActionBar
        onOpen={onOpen}
        onCancel={onClose}
        onDownload={onDownload}
        onUpdateFeed={onUpdateFeed}
-        hasIndexDocument={Boolean(indexDocument && files.length > 1)}
+        hasIndexDocument={Boolean(metadata?.isWebsite)}
        loading={downloading}
      />
    </>
@@ -1,7 +1,7 @@
 import { Box } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
@@ -12,7 +12,7 @@ import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
-import { detectIndexHtml, getAssetNameFromFiles } from '../../utils/file'
+import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils/file'
 import { persistIdentity, updateFeed } from '../../utils/identity'
 import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { FeedPasswordDialog } from '../feeds/FeedPasswordDialog'
@@ -21,6 +21,7 @@ import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
 import { StampPreview } from './StampPreview'
 import { UploadActionBar } from './UploadActionBar'
+import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'

 export function Upload(): ReactElement {
  const [step, setStep] = useState(0)
@@ -31,12 +32,12 @@ export function Upload(): ReactElement {

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

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

  useEffect(() => {
    refresh()
@@ -46,7 +47,7 @@ export function Upload(): ReactElement {

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

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

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

-    const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(files) || undefined
+    let fls = files.map(packageFile) // Apart from packaging, this is needed to not modify the original files array as it can trigger effects
+    let indexDocument: string | undefined = undefined // This means we assume it's folder
+
+    if (files.length === 1) indexDocument = files[0].name
+    else if (files.length > 1) {
+      const idx = detectIndexHtml(files)
+
+      // This is a website
+      if (idx) {
+        // The website is in some directory, remove it
+        if (idx.commonPrefix) {
+          const substrStart = idx.commonPrefix.length
+          indexDocument = idx.indexPath.substr(substrStart)
+          fls = fls.map(f => {
+            const path = (f.path as string).substr(substrStart)
+
+            return { ...f, path, webkitRelativePath: path, fullPath: path }
+          })
+        } else {
+          // The website is not packed in a directory
+          indexDocument = idx.indexPath
+        }
+      }
+    }
+    const lastModified = files[0].lastModified
+
+    // We want to store only some metadata
+    const mtd: SwarmMetadata = {
+      name: metadata.name,
+      size: metadata.size,
+    }
+
+    // Type of the file only makes sense for a single file
+    if (files.length === 1) mtd.type = metadata.type
+
+    const metafile = new File([JSON.stringify(mtd)], META_FILE_NAME, {
+      type: 'application/json',
+      lastModified,
+    })
+    fls.push(packageFile(metafile))
+
+    if (previewBlob) {
+      const previewFile = new File([previewBlob], PREVIEW_FILE_NAME, {
+        type: 'image/jpeg',
+        lastModified,
+      })
+      fls.push(packageFile(previewFile))
+    }

    setUploading(true)

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

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

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

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

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

-      setFiles(swarmFiles)
+      setFiles(FilePaths)

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

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

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

  return (
@@ -6,8 +6,9 @@ import React, { ReactElement, useContext } from 'react'
 import { Check } from 'react-feather'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context } from '../../providers/Stamps'
+import { Context as StampsContext } from '../../providers/Stamps'
 import {
  calculateStampPrice,
  convertAmountToSeconds,
@@ -34,8 +35,10 @@ interface Props {
 }

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

  function getFileSize(depth: number): string {
@@ -55,10 +58,14 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
  }

  function getPrice(depth: number, amount: number): string {
-    if (isNaN(amount) || amount <= 0 || isNaN(depth) || depth < 17 || depth > 255) {
+    const hasInvalidInput = isNaN(amount) || amount <= 0 || isNaN(depth) || depth < 17 || depth > 255
+    const isCurrentPriceAvailable = chainState && chainState.currentPrice
+
+    if (hasInvalidInput || !isCurrentPriceAvailable) {
      return '-'
    }
-    const price = calculateStampPrice(depth, amount)
+
+    const price = calculateStampPrice(depth, amount, chainState.currentPrice)

    return `${formatBzz(price)} BZZ`
  }
@@ -2,7 +2,7 @@ import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { ReactElement, useContext, useEffect } from 'react'
 import { PlusSquare } from 'react-feather'
-import { useHistory } from 'react-router'
+import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'
@@ -29,7 +29,7 @@ const useStyles = makeStyles(() =>
 export default function Stamp(): ReactElement {
  const classes = useStyles()

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

  const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
  const { status } = useContext(BeeContext)
@@ -44,7 +44,7 @@ export default function Stamp(): ReactElement {
  if (!status.all) return <TroubleshootConnectionCard />

  function navigateToNewStamp() {
-    history.push(ROUTES.STAMPS_NEW)
+    navigate(ROUTES.STAMPS_NEW)
  }

  return (
@@ -1,4 +1,5 @@
 import type {
+  ChainState,
  ChequebookAddressResponse,
  Health,
  LastChequesResponse,
@@ -44,6 +45,7 @@ interface ContextInterface {
  peerBalances: Balance[] | null
  peerCheques: LastChequesResponse | null
  settlements: Settlements | null
+  chainState: ChainState | null
  latestBeeRelease: LatestBeeRelease | null
  isLoading: boolean
  isRefreshing: boolean
@@ -82,6 +84,7 @@ const initialValues: ContextInterface = {
  peerBalances: null,
  peerCheques: null,
  settlements: null,
+  chainState: null,
  latestBeeRelease: null,
  isLoading: true,
  isRefreshing: false,
@@ -144,6 +147,8 @@ export function Provider({ children }: Props): ReactElement {
  const [peerBalances, setPeerBalances] = useState<Balance[] | null>(null)
  const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
  const [settlements, setSettlements] = useState<Settlements | null>(null)
+  const [chainState, setChainState] = useState<ChainState | null>(null)
+
  const { latestBeeRelease } = useLatestBeeRelease()

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

    refresh()
  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -277,6 +283,12 @@ export function Provider({ children }: Props): ReactElement {
          .then(setPeerCheques)
          .catch(() => setPeerCheques(null)),

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

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

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

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

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

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

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

-  return <Context.Provider value={{ files, setFiles, uploadOrigin, setUploadOrigin }}>{children}</Context.Provider>
+  useEffect(() => {
+    setMetadata(getMetadata(files))
+
+    if (previewUri) {
+      URL.revokeObjectURL(previewUri) // Clear the preview from memory
+      setPreviewUri(undefined)
+      setPreviewBlob(undefined)
+    }
+
+    if (files.length !== 1 || !files[0].type.startsWith('image')) return
+
+    resize(files[0], PREVIEW_DIMENSIONS.maxWidth, PREVIEW_DIMENSIONS.maxHeight).then(blob => {
+      setPreviewUri(URL.createObjectURL(blob)) // NOTE: Until it is cleared with URL.revokeObjectURL, the file stays allocated in memory
+      setPreviewBlob(blob)
+    })
+
+    return () => {
+      if (previewUri) {
+        URL.revokeObjectURL(previewUri)
+      }
+    }
+  }, [files]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <Context.Provider value={{ files, setFiles, uploadOrigin, setUploadOrigin, metadata, previewUri, previewBlob }}>
+      {children}
+    </Context.Provider>
+  )
 }
@@ -44,35 +44,38 @@ export function Provider({
  const [beeDebugApi, setBeeDebugApi] = useState<BeeDebug | null>(null)
  const [lockedApiSettings] = useState<boolean>(Boolean(extLockedApiSettings))

+  const url = beeApiUrl || apiUrl
+  const debugUrl = beeDebugApiUrl || apiDebugUrl
+
  useEffect(() => {
    try {
-      setBeeApi(new Bee(apiUrl))
-      sessionStorage.setItem('api_host', apiUrl)
+      setBeeApi(new Bee(url))
+      sessionStorage.setItem('api_host', url)
    } catch (e) {
      setBeeApi(null)
    }
-  }, [apiUrl])
-
-  useEffect(() => {
-    if (beeApiUrl) setApiUrl(beeApiUrl)
-  }, [beeApiUrl])
-
-  useEffect(() => {
-    if (beeDebugApiUrl) setDebugApiUrl(beeDebugApiUrl)
-  }, [beeDebugApiUrl])
+  }, [url])

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

  return (
    <Context.Provider
-      value={{ apiUrl, apiDebugUrl, beeApi, beeDebugApi, setApiUrl, setDebugApiUrl, lockedApiSettings }}
+      value={{
+        apiUrl: url,
+        apiDebugUrl: debugUrl,
+        beeApi,
+        beeDebugApi,
+        setApiUrl,
+        setDebugApiUrl,
+        lockedApiSettings,
+      }}
    >
      {children}
    </Context.Provider>
@@ -21,3 +21,18 @@ interface StatusEthereumConnectionHook extends StatusHookCommon {
 interface StatusTopologyHook extends StatusHookCommon {
  topology: Topology | null
 }
+
+interface SwarmMetadata {
+  size: number
+  name: string
+  type?: string
+}
+
+interface Metadata extends SwarmMetadata {
+  type: string
+  isWebsite: boolean
+  count?: number
+  hash?: string
+}
+
+type FilePath = File & { path?: string; fullPath?: string }
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react'
-import { Route, Switch } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
 import Accounting from './pages/accounting'
 import Feeds from './pages/feeds'
 import CreateNewFeed from './pages/feeds/CreateNewFeed'
@@ -34,22 +34,22 @@ export enum ROUTES {
 }

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

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

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

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

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

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

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

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

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

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

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

 /**
@@ -186,6 +187,16 @@ export function convertAmountToSeconds(amount: number): number {
  return amount / 10 / 1
 }

-export function calculateStampPrice(depth: number, amount: number): number {
-  return (amount * 2 ** (depth - 16) * 2) / 1e16
+export function calculateStampPrice(depth: number, amount: number, currentPrice: NumberString): number {
+  const price = parseInt(currentPrice, 10)
+
+  return (amount * 2 ** (depth - 16) * price) / 1e16
+}
+
+export function shortenText(text: string, length = 20, separator = '[…]'): string {
+  if (text.length <= length * 2 + separator.length) {
+    return text
+  }
+
+  return `${text.slice(0, length)}${separator}${text.slice(-length)}`
 }
Author	SHA1	Message	Date
bee-worker	d9e7560117	chore: release 0.13.0 (#289 )	2022-01-31 13:04:20 +01:00
Cafe137	3a30ee59d4	ci: add swarm-cli extra flags (#299 ) * ci: add swarm-cli extra flags * ci: rename SWARM_CLI_EXTRA_FLAGS to GATEWAY_AUTHORIZATION_HEADER * ci: change bee-url	2022-01-28 14:02:15 +01:00
Cafe137	7880c802ae	fix: do not print size and name when meta is unknown (#297 ) * fix: do not print zero when size is unknown * fix: do not print name if it is the same as the hash * feat: shorten asset name	2022-01-27 16:22:27 +01:00
Vojtech Simetka	f4013142af	feat: add metadata and preview (#292 ) * chore: upload flow uses metadata object and has preview * chore: remove SwarmFile * feat: upload metadata and file preview * feat: add metadata and preview on download * fix: package the meta and preview files * fix: upload websites that are inside a folder (#296) * fix: upload websites that are inside a folder * docs: few comments to clarify what is going on * refactor: decrease local variables and fix state order to detect websites properly Co-authored-by: Cafe137 <aron@aronsoos.com>	2022-01-26 18:29:09 +01:00
Cafe137	57bff96c99	style: make select and text input style consistent (#295 )	2022-01-25 18:03:40 +01:00
Cafe137	a406e0fc01	fix: clean up spinner and disabled state on download page (#294 )	2022-01-25 18:02:57 +01:00
Cafe137	1310deb17a	fix: disable feeds page when disconnected (#293 )	2022-01-25 18:02:20 +01:00
Vojtech Simetka	d8787476ac	fix: correct folder name when uploading multiple files or mix of files & directories (#291 )	2022-01-24 18:03:06 +01:00
Cafe137	bc82e67561	fix: get current price from chain state (#286 ) * fix: get current price from chain state * refactor: do not allow optional currentPrice	2022-01-20 15:49:41 +01:00
Cafe137	63e79ae2aa	ci: enable beeload action (#290 ) * ci: enable beeload action * ci: remove testnet * ci: add continue-on-error to testnet beeload-action	2022-01-20 15:49:30 +01:00
Cafe137	48ce9ba659	refactor: remove google fonts dependency (#285 ) * refactor: remove google fonts dependency * fix: change montserrat to work sans * refactor: omit unicode ranges	2022-01-20 14:51:46 +01:00
Cafe137	9ee1c9107b	feat: add hash based routing (#287 )	2022-01-20 14:51:27 +01:00
Vojtech Simetka	a90b4c439b	chore(deps): update react router from v5 to v6 (#280 ) * chore(deps): update react router from v5 to v6 * fix: correctly choose navigate target if there is no history	2022-01-17 14:47:26 +01:00
Vojtech Simetka	2187b9001c	refactor: settings to use less useEffects (and therefore less re-renders) (#277 )	2022-01-17 12:31:07 +01:00