chore(master): release 0.25.0 (#637 )

refactor: clean up postage stamp screens (#642 )
* refactor: clean up postage stamp screens * fix: add immutable flag
2023-12-04 22:32:19 +01:00 · 2023-12-04 22:28:44 +01:00 · 2023-12-04 22:01:51 +01:00 · 2023-11-20 14:59:00 +01:00 · 2023-11-20 14:00:42 +01:00 · 2023-11-20 13:59:40 +01:00
35 changed files with 1029 additions and 619 deletions
@@ -1,5 +1,33 @@
 # Changelog

+## [0.25.0](https://github.com/ethersphere/bee-dashboard/compare/v0.24.1...v0.25.0) (2023-12-04)
+
+
+### Features
+
+* improve topup and dilute ux ([0c2ac0c](https://github.com/ethersphere/bee-dashboard/commit/0c2ac0c454ad02200a2762958c5bc5abbdfe8005))
+* update postage stamp creation screen ([#641](https://github.com/ethersphere/bee-dashboard/issues/641)) ([4f9abc6](https://github.com/ethersphere/bee-dashboard/commit/4f9abc614eedd5ce3a279a4686cc832c4d1e62c7))
+
+
+### Bug Fixes
+
+* add missing stamp labels and fix inputs ([#634](https://github.com/ethersphere/bee-dashboard/issues/634)) ([7fa1cb0](https://github.com/ethersphere/bee-dashboard/commit/7fa1cb0ccf9f2a32263e84aa76732ebd2fc7fb22))
+* put stamp input error handling in state ([#640](https://github.com/ethersphere/bee-dashboard/issues/640)) ([20a051b](https://github.com/ethersphere/bee-dashboard/commit/20a051b6589c22397a7305d722a56df0604ff7a4))
+
+## [0.24.1](https://github.com/ethersphere/bee-dashboard/compare/v0.24.0...v0.24.1) (2023-10-18)
+
+
+### Bug Fixes
+
+* update `swap-endpoint` to `blockchain-rpc-endpoint` ([#628](https://github.com/ethersphere/bee-dashboard/issues/628)) ([bce93ce](https://github.com/ethersphere/bee-dashboard/commit/bce93ce3cdc1ef4b1f50fcf274591ba00726be16))
+
+## [0.24.0](https://github.com/ethersphere/bee-dashboard/compare/v0.23.0...v0.24.0) (2023-08-11)
+
+
+### Features
+
+* add stamp dilute and topup ([#619](https://github.com/ethersphere/bee-dashboard/issues/619)) ([055a300](https://github.com/ethersphere/bee-dashboard/commit/055a3002b303df45c7010ef4d365e14b979e9084))
+
 ## [0.23.0](https://github.com/ethersphere/bee-dashboard/compare/v0.22.0...v0.23.0) (2023-02-21)


@@ -1,16 +1,15 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.23.0",
+  "version": "0.25.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ethersphere/bee-dashboard",
-      "version": "0.23.0",
+      "version": "0.25.0",
      "license": "BSD-3-Clause",
      "dependencies": {
-        "@ethersphere/bee-js": "^5.2.0",
-        "@ethersphere/manifest-js": "1.2.1",
+        "@ethersphere/bee-js": "^6.7.0",
        "@ethersphere/swarm-cid": "^0.1.0",
        "@material-ui/core": "4.12.3",
        "@material-ui/icons": "4.11.2",
@@ -27,6 +26,7 @@
        "formik": "2.2.9",
        "formik-material-ui": "3.0.1",
        "jszip": "^3.7.1",
+        "mantaray-js": "^1.0.3",
        "material-ui-dropzone": "3.5.0",
        "notistack": "1.0.10",
        "opener": "1.5.2",
@@ -105,7 +105,7 @@
        "webpack-cli": "^4.10.0"
      },
      "engines": {
-        "bee": "1.11.1-1992b846",
+        "bee": "1.16.1-8e269c8",
        "node": ">=14.0.0",
        "npm": ">=6.9.0"
      },
@@ -2440,33 +2440,53 @@
      }
    },
    "node_modules/@ethersphere/bee-js": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-5.2.0.tgz",
-      "integrity": "sha512-BM9lBiKC/tMbYNTEs3uyDyAwpED+v6u46DEXyFh7BLCUPg12LBWv0O12XmQj5ybzXnUT4ptHU9UXu3oGHph8Vw==",
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-6.7.0.tgz",
+      "integrity": "sha512-t1bsUj9BmICuRL6XENTVyZZCfkFuCjc6pQxOekuVFLBd0Qpmyf87iRpVizvZN5IKhVqqw9xCzkg8otJKQdAKNA==",
      "dependencies": {
        "@ethersphere/swarm-cid": "^0.1.0",
        "@types/readable-stream": "^2.3.13",
-        "bufferutil": "^4.0.6",
+        "axios": "^0.27.2",
+        "cafe-utility": "^10.8.1",
        "elliptic": "^6.5.4",
        "fetch-blob": "2.1.2",
        "isomorphic-ws": "^4.0.1",
        "js-sha3": "^0.8.0",
-        "ky": "^0.33.2",
-        "ky-universal": "^0.11.0",
        "semver": "^7.3.5",
        "tar-js": "^0.3.0",
-        "utf-8-validate": "^5.0.9",
        "web-streams-polyfill": "^4.0.0-beta.3",
        "ws": "^8.7.0"
      },
      "engines": {
-        "bee": "1.12.0-88c1d236",
+        "bee": "1.13.0-f1067884",
        "beeApiVersion": "4.0.0",
        "beeDebugApiVersion": "4.0.0",
        "node": ">=14.0.0",
        "npm": ">=6.0.0"
      }
    },
+    "node_modules/@ethersphere/bee-js/node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/@ethersphere/bee-js/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/@ethersphere/bee-js/node_modules/web-streams-polyfill": {
      "version": "4.0.0-beta.3",
      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
@@ -2495,22 +2515,6 @@
        }
      }
    },
-    "node_modules/@ethersphere/manifest-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@ethersphere/manifest-js/-/manifest-js-1.2.1.tgz",
-      "integrity": "sha512-HfeQ5h9KuH8xTxYY6bmSNwmpalrdDyOu4Sl6mrAN2W2iJlIjuG5DeirseSEFXElKPwEdv03PzZt2vARPna8sfw==",
-      "dependencies": {
-        "mantaray-js": "^1.0.3"
-      },
-      "engines": {
-        "bee": "1.6.0-6ceadd35",
-        "node": ">=12.0.0",
-        "npm": ">=6.0.0"
-      },
-      "peerDependencies": {
-        "@ethersphere/bee-js": ">=4.x"
-      }
-    },
    "node_modules/@ethersphere/swarm-cid": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/@ethersphere/swarm-cid/-/swarm-cid-0.1.0.tgz",
@@ -5656,17 +5660,6 @@
      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
      "dev": true
    },
-    "node_modules/abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "dependencies": {
-        "event-target-shim": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6.5"
-      }
-    },
    "node_modules/accepts": {
      "version": "1.3.8",
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -6058,8 +6051,7 @@
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "node_modules/at-least-node": {
      "version": "1.0.0",
@@ -6899,6 +6891,8 @@
      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.6.tgz",
      "integrity": "sha512-jduaYOYtnio4aIAyc6UbvPCVcgq7nYpVnucyxr6eCYg/Woad9Hf/oxxBRDnGGjPfjUm6j5O/uBWhIu4iLebFaw==",
      "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "node-gyp-build": "^4.3.0"
      },
@@ -6926,6 +6920,11 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/cafe-utility": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/cafe-utility/-/cafe-utility-10.9.1.tgz",
+      "integrity": "sha512-/gq+ANoYvMJKrXXI/2YAiB2KhNlRhxB5XcWbbMWFA39LLCxkPhG5A9Ehy4QGv28EvndZLbBV44lJyCG+JIoDuw=="
+    },
    "node_modules/call-bind": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -7337,7 +7336,6 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
      "dependencies": {
        "delayed-stream": "~1.0.0"
      },
@@ -8211,14 +8209,6 @@
      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
      "dev": true
    },
-    "node_modules/data-uri-to-buffer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
-      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
    "node_modules/data-urls": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -8331,7 +8321,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
      "engines": {
        "node": ">=0.4.0"
      }
@@ -9903,14 +9892,6 @@
        "ws": "7.4.6"
      }
    },
-    "node_modules/event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/eventemitter3": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -10512,9 +10493,9 @@
      "dev": true
    },
    "node_modules/follow-redirects": {
-      "version": "1.14.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
-      "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
      "funding": [
        {
          "type": "individual",
@@ -10664,39 +10645,6 @@
        "node": ">=0.4.x"
      }
    },
-    "node_modules/formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "dependencies": {
-        "fetch-blob": "^3.1.2"
-      },
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
-    "node_modules/formdata-polyfill/node_modules/fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "dependencies": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      },
-      "engines": {
-        "node": "^12.20 || >= 14.13"
-      }
-    },
    "node_modules/formik": {
      "version": "2.2.9",
      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
@@ -13726,41 +13674,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/ky": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/ky/-/ky-0.33.2.tgz",
-      "integrity": "sha512-f6oS2rKUcPu5FzdqCDbFpmzis/JlqFZw8uIHm/jf8Kc3vtnW+VDhuashOAKyBZv8bFiZFZUMNxTC0JtahEvujA==",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/ky?sponsor=1"
-      }
-    },
-    "node_modules/ky-universal": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/ky-universal/-/ky-universal-0.11.0.tgz",
-      "integrity": "sha512-65KyweaWvk+uKKkCrfAf+xqN2/epw1IJDtlyCPxYffFCMR8u1sp2U65NtWpnozYfZxQ6IUzIlvUcw+hQ82U2Xw==",
-      "dependencies": {
-        "abort-controller": "^3.0.0",
-        "node-fetch": "^3.2.10"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/ky-universal?sponsor=1"
-      },
-      "peerDependencies": {
-        "ky": ">=0.31.4",
-        "web-streams-polyfill": ">=3.2.1"
-      },
-      "peerDependenciesMeta": {
-        "web-streams-polyfill": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/language-subtag-registry": {
      "version": "0.3.21",
      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@@ -14145,7 +14058,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -14154,7 +14066,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@@ -14397,63 +14308,6 @@
      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
      "dev": true
    },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
-    "node_modules/node-fetch": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.0.tgz",
-      "integrity": "sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==",
-      "dependencies": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/node-fetch"
-      }
-    },
-    "node_modules/node-fetch/node_modules/fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "dependencies": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      },
-      "engines": {
-        "node": "^12.20 || >= 14.13"
-      }
-    },
    "node_modules/node-forge": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -14467,6 +14321,8 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz",
      "integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==",
+      "optional": true,
+      "peer": true,
      "bin": {
        "node-gyp-build": "bin.js",
        "node-gyp-build-optional": "optional.js",
@@ -19653,6 +19509,8 @@
      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.9.tgz",
      "integrity": "sha512-Yek7dAy0v3Kl0orwMlvi7TPtiCNrdfHNd7Gcc/pLq4BLXqfAmd0J7OWMizUQnTTJsyjKn02mU7anqwfmUP4J8Q==",
      "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "node-gyp-build": "^4.3.0"
      },
@@ -19808,14 +19666,6 @@
        "minimalistic-assert": "^1.0.0"
      }
    },
-    "node_modules/web-streams-polyfill": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
-      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
    "node_modules/web-vitals": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.2.tgz",
@@ -22455,26 +22305,43 @@
      }
    },
    "@ethersphere/bee-js": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-5.2.0.tgz",
-      "integrity": "sha512-BM9lBiKC/tMbYNTEs3uyDyAwpED+v6u46DEXyFh7BLCUPg12LBWv0O12XmQj5ybzXnUT4ptHU9UXu3oGHph8Vw==",
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-6.7.0.tgz",
+      "integrity": "sha512-t1bsUj9BmICuRL6XENTVyZZCfkFuCjc6pQxOekuVFLBd0Qpmyf87iRpVizvZN5IKhVqqw9xCzkg8otJKQdAKNA==",
      "requires": {
        "@ethersphere/swarm-cid": "^0.1.0",
        "@types/readable-stream": "^2.3.13",
-        "bufferutil": "^4.0.6",
+        "axios": "^0.27.2",
+        "cafe-utility": "^10.8.1",
        "elliptic": "^6.5.4",
        "fetch-blob": "2.1.2",
        "isomorphic-ws": "^4.0.1",
        "js-sha3": "^0.8.0",
-        "ky": "^0.33.2",
-        "ky-universal": "^0.11.0",
        "semver": "^7.3.5",
        "tar-js": "^0.3.0",
-        "utf-8-validate": "^5.0.9",
        "web-streams-polyfill": "^4.0.0-beta.3",
        "ws": "^8.7.0"
      },
      "dependencies": {
+        "axios": {
+          "version": "0.27.2",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+          "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+          "requires": {
+            "follow-redirects": "^1.14.9",
+            "form-data": "^4.0.0"
+          }
+        },
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        },
        "web-streams-polyfill": {
          "version": "4.0.0-beta.3",
          "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
@@ -22488,14 +22355,6 @@
        }
      }
    },
-    "@ethersphere/manifest-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@ethersphere/manifest-js/-/manifest-js-1.2.1.tgz",
-      "integrity": "sha512-HfeQ5h9KuH8xTxYY6bmSNwmpalrdDyOu4Sl6mrAN2W2iJlIjuG5DeirseSEFXElKPwEdv03PzZt2vARPna8sfw==",
-      "requires": {
-        "mantaray-js": "^1.0.3"
-      }
-    },
    "@ethersphere/swarm-cid": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/@ethersphere/swarm-cid/-/swarm-cid-0.1.0.tgz",
@@ -24752,14 +24611,6 @@
      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
      "dev": true
    },
-    "abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "requires": {
-        "event-target-shim": "^5.0.0"
-      }
-    },
    "accepts": {
      "version": "1.3.8",
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -25058,8 +24909,7 @@
    "asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "at-least-node": {
      "version": "1.0.0",
@@ -25698,6 +25548,8 @@
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.6.tgz",
      "integrity": "sha512-jduaYOYtnio4aIAyc6UbvPCVcgq7nYpVnucyxr6eCYg/Woad9Hf/oxxBRDnGGjPfjUm6j5O/uBWhIu4iLebFaw==",
+      "optional": true,
+      "peer": true,
      "requires": {
        "node-gyp-build": "^4.3.0"
      }
@@ -25713,6 +25565,11 @@
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
    },
+    "cafe-utility": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/cafe-utility/-/cafe-utility-10.9.1.tgz",
+      "integrity": "sha512-/gq+ANoYvMJKrXXI/2YAiB2KhNlRhxB5XcWbbMWFA39LLCxkPhG5A9Ehy4QGv28EvndZLbBV44lJyCG+JIoDuw=="
+    },
    "call-bind": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -26030,7 +25887,6 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
      "requires": {
        "delayed-stream": "~1.0.0"
      }
@@ -26696,11 +26552,6 @@
      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
      "dev": true
    },
-    "data-uri-to-buffer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
-      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="
-    },
    "data-urls": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -26783,8 +26634,7 @@
    "delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
    },
    "depcheck": {
      "version": "1.4.3",
@@ -27974,11 +27824,6 @@
        }
      }
    },
-    "event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
-    },
    "eventemitter3": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -28459,9 +28304,9 @@
      "dev": true
    },
    "follow-redirects": {
-      "version": "1.14.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
-      "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
    },
    "for-each": {
      "version": "0.3.3",
@@ -28557,25 +28402,6 @@
      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
    },
-    "formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "requires": {
-        "fetch-blob": "^3.1.2"
-      },
-      "dependencies": {
-        "fetch-blob": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-          "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-          "requires": {
-            "node-domexception": "^1.0.0",
-            "web-streams-polyfill": "^3.0.3"
-          }
-        }
-      }
-    },
    "formik": {
      "version": "2.2.9",
      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
@@ -30825,20 +30651,6 @@
      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
      "dev": true
    },
-    "ky": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/ky/-/ky-0.33.2.tgz",
-      "integrity": "sha512-f6oS2rKUcPu5FzdqCDbFpmzis/JlqFZw8uIHm/jf8Kc3vtnW+VDhuashOAKyBZv8bFiZFZUMNxTC0JtahEvujA=="
-    },
-    "ky-universal": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/ky-universal/-/ky-universal-0.11.0.tgz",
-      "integrity": "sha512-65KyweaWvk+uKKkCrfAf+xqN2/epw1IJDtlyCPxYffFCMR8u1sp2U65NtWpnozYfZxQ6IUzIlvUcw+hQ82U2Xw==",
-      "requires": {
-        "abort-controller": "^3.0.0",
-        "node-fetch": "^3.2.10"
-      }
-    },
    "language-subtag-registry": {
      "version": "0.3.21",
      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@@ -31154,14 +30966,12 @@
    "mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
    },
    "mime-types": {
      "version": "2.1.35",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
      "requires": {
        "mime-db": "1.52.0"
      }
@@ -31351,32 +31161,6 @@
        }
      }
    },
-    "node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ=="
-    },
-    "node-fetch": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.0.tgz",
-      "integrity": "sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==",
-      "requires": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
-      },
-      "dependencies": {
-        "fetch-blob": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-          "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-          "requires": {
-            "node-domexception": "^1.0.0",
-            "web-streams-polyfill": "^3.0.3"
-          }
-        }
-      }
-    },
    "node-forge": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -31386,7 +31170,9 @@
    "node-gyp-build": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz",
-      "integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q=="
+      "integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==",
+      "optional": true,
+      "peer": true
    },
    "node-int64": {
      "version": "0.4.0",
@@ -35138,6 +34924,8 @@
      "version": "5.0.9",
      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.9.tgz",
      "integrity": "sha512-Yek7dAy0v3Kl0orwMlvi7TPtiCNrdfHNd7Gcc/pLq4BLXqfAmd0J7OWMizUQnTTJsyjKn02mU7anqwfmUP4J8Q==",
+      "optional": true,
+      "peer": true,
      "requires": {
        "node-gyp-build": "^4.3.0"
      }
@@ -35271,11 +35059,6 @@
        "minimalistic-assert": "^1.0.0"
      }
    },
-    "web-streams-polyfill": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
-      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q=="
-    },
    "web-vitals": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.2.tgz",
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.23.0",
+  "version": "0.25.0",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -26,8 +26,7 @@
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
  "dependencies": {
-    "@ethersphere/bee-js": "^5.2.0",
-    "@ethersphere/manifest-js": "1.2.1",
+    "@ethersphere/bee-js": "^6.7.0",
    "@ethersphere/swarm-cid": "^0.1.0",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
@@ -44,6 +43,7 @@
    "formik": "2.2.9",
    "formik-material-ui": "3.0.1",
    "jszip": "^3.7.1",
+    "mantaray-js": "^1.0.3",
    "material-ui-dropzone": "3.5.0",
    "notistack": "1.0.10",
    "opener": "1.5.2",
@@ -137,7 +137,7 @@
    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
    "check:types": "tsc --project tsconfig.lib.json",
    "update-map-data": "node ./utils/update-map-data.js",
-    "bee": "bee-factory start"
+    "bee": "npx bee-factory start"
  },
  "files": [
    "lib",
@@ -159,6 +159,6 @@
  "engines": {
    "node": ">=14.0.0",
    "npm": ">=6.9.0",
-    "bee": "1.12.0-88c1d236"
+    "bee": "1.16.1-8e269c8"
  }
 }
@@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) =>
    },
    contentLevel12: {
      marginTop: theme.spacing(0.25),
+      '& > li:last-of-type': {
+        marginBottom: theme.spacing(2),
+      },
    },
    infoText: {
      color: '#c9c9c9',
@@ -1,8 +1,8 @@
-import { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import Info from 'remixicon-react/InformationLineIcon'
+import { Grid, IconButton, Tooltip, Typography } from '@material-ui/core'
 import ListItem from '@material-ui/core/ListItem'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { ReactElement, ReactNode } from 'react'
+import Info from 'remixicon-react/InformationLineIcon'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -1,4 +1,4 @@
-import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
+import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
@@ -134,6 +134,7 @@ export default function ExpandableListItemKey({
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
+        <Box mt={2}>
          <ExpandableListItemActions>
            <SwarmButton
              disabled={
@@ -159,6 +160,7 @@ export default function ExpandableListItemKey({
              Cancel
            </SwarmButton>
          </ExpandableListItemActions>
+        </Box>
      </Collapse>
    </>
  )
@@ -0,0 +1,88 @@
+import { BeeDebug } from '@ethersphere/bee-js'
+import { Box } from '@material-ui/core'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import Input from '@material-ui/core/Input'
+import { useSnackbar } from 'notistack'
+import { ReactElement, ReactNode, useState } from 'react'
+
+interface Props {
+  type: 'Topup' | 'Dilute'
+  icon: ReactNode
+  beeDebug: BeeDebug
+  stamp: string
+}
+
+export default function StampExtensionModal({ type, icon, beeDebug, stamp }: Props): ReactElement {
+  const [open, setOpen] = useState(false)
+  const [amount, setAmount] = useState('')
+  const { enqueueSnackbar } = useSnackbar()
+  const label = `${type} ${stamp.substring(0, 8)}`
+
+  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setOpen(true)
+    e.stopPropagation()
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleAction = async () => {
+    if (type === 'Topup') {
+      try {
+        await beeDebug.topUpBatch(stamp, amount)
+        enqueueSnackbar(`Successfully topped up stamp, your changes will appear soon`, { variant: 'success' })
+      } catch (error) {
+        enqueueSnackbar(`Failed to topup stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
+      }
+    }
+
+    if (type === 'Dilute') {
+      try {
+        await beeDebug.diluteBatch(stamp, parseInt(amount, 10))
+        enqueueSnackbar(`Successfully diluted stamp, your changes will appear soon`, { variant: 'success' })
+      } catch (error) {
+        enqueueSnackbar(`Failed to dilute stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
+      }
+    }
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    setAmount(event.target.value)
+  }
+
+  return (
+    <Box mb={2}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
+        {type}
+      </Button>
+      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">{label}</DialogTitle>
+        <DialogContent>
+          <Input
+            autoFocus
+            margin="dense"
+            id="name"
+            type="text"
+            placeholder={type === 'Topup' ? 'Amount to add' : 'New depth to dilute'}
+            fullWidth
+            value={amount}
+            onChange={handleChange}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button disabled={amount === ''} onClick={handleAction} color="primary">
+            {type}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  )
+}
@@ -30,6 +30,7 @@ interface Props {
  formik?: boolean
  defaultValue?: string
  placeholder?: string
+  disabled?: boolean
 }

 const useStyles = makeStyles((theme: Theme) =>
@@ -60,6 +61,7 @@ export function SwarmSelect({
  onChange,
  label,
  placeholder,
+  disabled = false,
 }: Props): ReactElement {
  const classes = useStyles()

@@ -69,6 +71,7 @@ export function SwarmSelect({
        {label && <FormHelperText>{label}</FormHelperText>}
        <Field
          required
+          disabled={disabled}
          component={Select}
          name={name}
          fullWidth
@@ -94,6 +97,7 @@ export function SwarmSelect({
      {label && <FormHelperText>{label}</FormHelperText>}
      <MuiSelect
        required
+        disabled={disabled}
        name={name}
        fullWidth
        variant="outlined"
@@ -12,6 +12,7 @@ import { Context as SettingsContext } from '../../../providers/Settings'
 import PeerBalances from '../../accounting/PeerBalances'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
+import { Box } from '@material-ui/core'

 export function AccountChequebook(): ReactElement {
  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
@@ -43,10 +44,12 @@ export function AccountChequebook(): ReactElement {
              label="Total Cheques Amount Sent"
              value={`${settlements?.totalSent.toFixedDecimal()} xBZZ`}
            />
+            <Box mb={2}>
              <ExpandableListItem
                label="Total Cheques Amount Received"
                value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
              />
+            </Box>
            <ExpandableListItemActions>
              <WithdrawModal />
              <DepositModal />
@@ -1,10 +1,11 @@
-import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
+import { CircularProgress, createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement, useContext, useEffect } from 'react'
-import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../../providers/Bee'
 import { Context as StampsContext } from '../../../providers/Stamps'
 import { ROUTES } from '../../../routes'
 import StampsTable from '../../stamps/StampsTable'
@@ -45,7 +46,7 @@ export function AccountStamps(): ReactElement {
  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />

  function navigateToNewStamp() {
-    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
+    navigate(ROUTES.ACCOUNT_STAMPS_NEW_STANDARD)
  }

  return (
@@ -53,11 +54,7 @@ export function AccountStamps(): ReactElement {
      <Header />
      <AccountNavigation active="STAMPS" />
      <div className={classes.root}>
-        {error && (
-          <Container style={{ textAlign: 'center', padding: '50px' }}>
-            Error loading postage stamps details: {error.message}
-          </Container>
-        )}
+        {error && <Loading />}
        {!error && (
          <>
            <div className={classes.actions}>
@@ -14,13 +14,15 @@ interface Props {
 }

 export default function PeerBalances({ accounting, isLoadingUncashed, totalUncashed }: Props): ReactElement | null {
+  const uncashedPeers = accounting?.filter(({ uncashedAmount }) => uncashedAmount.toBigNumber.isGreaterThan('0')) || []
+
  return (
    <ExpandableList
-      label={`Peers (${accounting?.length || 0})`}
+      label={`Peers (${uncashedPeers.length})`}
      info={`${totalUncashed.toFixedDecimal()} xBZZ (uncashed)`}
    >
      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} xBZZ`} />
-      {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
+      {uncashedPeers.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
        <ExpandableList
          key={peer}
          label={`Peer ${peer.slice(0, 8)}[…]`}
@@ -1,12 +1,10 @@
-import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate, useParams } from 'react-router-dom'
+import X from 'remixicon-react/CloseLineIcon'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-import ExpandableListItemLink from '../../components/ExpandableListItemLink'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { Context as BeeContext } from '../../providers/Bee'
@@ -55,14 +53,8 @@ export function FeedSubpage(): ReactElement {
      <UploadArea showHelp={false} uploadOrigin={{ origin: 'FEED', uuid }} />
      {available && identity.feedHash ? (
        <>
-          <Box mb={0.25}>
-            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
-          </Box>
          <Box mb={4}>
-            <ExpandableListItemLink
-              label="BZZ Link"
-              value={`https://${swarmCid.encodeFeedReference(identity.feedHash)}.bzz.link`}
-            />
+            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
          </Box>
        </>
      ) : (
@@ -1,7 +1,6 @@
-import * as swarmCid from '@ethersphere/swarm-cid'
+import { Utils } from '@ethersphere/bee-js'
 import { Box } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Utils } from '@ethersphere/bee-js'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import ExpandableListItemLink from '../../components/ExpandableListItemLink'
@@ -19,16 +18,6 @@ export function AssetSummary({ isWebsite, reference }: Props): ReactElement {
      <Box mb={4}>
        {isHash && <ExpandableListItemKey label="Swarm hash" value={reference} />}
        {!isHash && <ExpandableListItemLink label="ENS" value={reference} />}
-        <ExpandableListItemLink
-          label="Share on Swarm Gateway"
-          value={`https://gateway.ethswarm.org/access/${reference}`}
-        />
-        {isWebsite && isHash && (
-          <ExpandableListItemLink
-            label="BZZ Link"
-            value={`https://${swarmCid.encodeManifestReference(reference).toString()}.bzz.link`}
-          />
-        )}
      </Box>
      <DocumentationText>
        The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided
@@ -1,17 +1,17 @@
 import { BeeModes, Utils } from '@ethersphere/bee-js'
-import { ManifestJs } from '@ethersphere/manifest-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Search from 'remixicon-react/SearchLineIcon'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { History } from '../../components/History'
+import { Context as BeeContext } from '../../providers/Bee'
 import { Context as FileContext, defaultUploadOrigin } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context as BeeContext } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 import { recognizeEnsOrSwarmHash, regexpEns } from '../../utils'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { ManifestJs } from '../../utils/manifest'
 import { FileNavigation } from './FileNavigation'

 export function Download(): ReactElement {
@@ -34,9 +34,7 @@ export function Download(): ReactElement {
    ) {
      setReferenceError(undefined)
    } else {
-      setReferenceError(
-        'Incorrect format of swarm hash. Expected 64 or 128 hexstring characters, bzz.link url or ENS domain.',
-      )
+      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters or ENS domain.')
    }
  }

@@ -1,4 +1,3 @@
-import { ManifestJs } from '@ethersphere/manifest-js'
 import { Box, Typography } from '@material-ui/core'
 import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
@@ -13,6 +12,7 @@ import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { ManifestJs } from '../../utils/manifest'
 import { AssetPreview } from './AssetPreview'
 import { AssetSummary } from './AssetSummary'
 import { DownloadActionBar } from './DownloadActionBar'
@@ -7,18 +7,18 @@ import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
-import { CheckState, Context as BeeContext } from '../../providers/Bee'
-import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { Context as BeeContext, CheckState } from '../../providers/Bee'
+import { Identity, Context as IdentityContext } from '../../providers/Feeds'
 import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
+import { EnrichedPostageBatch, Context as StampsContext } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
 import { waitUntilStampUsable } from '../../utils'
 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'
-import { PostageStampCreation } from '../stamps/PostageStampCreation'
+import { PostageStampAdvancedCreation } from '../stamps/PostageStampAdvancedCreation'
 import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
 import { StampPreview } from './StampPreview'
@@ -130,7 +130,7 @@ export function Upload(): ReactElement {
    }

    beeApi
-      .uploadFiles(stamp.batchID, fls, { indexDocument })
+      .uploadFiles(stamp.batchID, fls, { indexDocument, deferred: true })
      .then(hash => {
        putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))

@@ -186,7 +186,7 @@ export function Upload(): ReactElement {
            {hasAnyStamps && stampMode === 'SELECT' ? (
              <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
            ) : (
-              <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
+              <PostageStampAdvancedCreation onFinished={() => setStampMode('SELECT')} />
            )}
          </Box>
          <Box mb={4}>
@@ -1,22 +1,22 @@
 import { Box, Tooltip, Typography } from '@material-ui/core'
+import { Wallet } from 'ethers'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router'
 import Check from 'remixicon-react/CheckLineIcon'
 import X from 'remixicon-react/CloseLineIcon'
-import { useNavigate } from 'react-router'
-import { Wallet } from 'ethers'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
-import { Context as BalanceProvider } from '../../providers/WalletBalance'
-import { Context as TopUpContext } from '../../providers/TopUp'
+import { Token } from '../../models/Token'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { createGiftWallet } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
-import { Token } from '../../models/Token'

 const GIFT_WALLET_FUND_DAI_AMOUNT = Token.fromDecimal('0.1', 18)
 const GIFT_WALLET_FUND_BZZ_AMOUNT = Token.fromDecimal('0.5', 16)
@@ -31,6 +31,9 @@ export default function Index(): ReactElement {

  useEffect(() => {
    async function mapGiftWallets() {
+      if (!rpcProvider) {
+        return
+      }
      const results = []
      for (const giftWallet of giftWallets) {
        results.push(await ResolvedWallet.make(giftWallet, rpcProvider))
@@ -30,7 +30,7 @@ export default function SettingsPage(): ReactElement {
    try {
      setAndPersistJsonRpcProvider(value)

-      const shouldUpdateDesktop = isDesktop && (await getDesktopConfiguration(desktopUrl))['swap-endpoint']
+      const shouldUpdateDesktop = isDesktop && (await getDesktopConfiguration(desktopUrl))['blockchain-rpc-endpoint']

      if (shouldUpdateDesktop) {
        await setJsonRpcInDesktop(desktopUrl, value)
@@ -2,7 +2,7 @@ import { ReactElement } from 'react'
 import { useNavigate } from 'react-router'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ROUTES } from '../../routes'
-import { PostageStampCreation } from './PostageStampCreation'
+import { PostageStampAdvancedCreation } from './PostageStampAdvancedCreation'

 export function CreatePostageStampPage(): ReactElement {
  const navigate = useNavigate()
@@ -13,8 +13,8 @@ export function CreatePostageStampPage(): ReactElement {

  return (
    <div>
-      <HistoryHeader>Buy new postage stamp</HistoryHeader>
-      <PostageStampCreation onFinished={onFinished} />
+      <HistoryHeader>Buy new postage stamp batch</HistoryHeader>
+      <PostageStampAdvancedCreation onFinished={onFinished} />
    </div>
  )
 }
@@ -0,0 +1,20 @@
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { ROUTES } from '../../routes'
+import { PostageStampStandardCreation } from './PostageStampStandardCreation'
+
+export function CreatePostageStampBasicPage(): ReactElement {
+  const navigate = useNavigate()
+
+  function onFinished() {
+    navigate(ROUTES.ACCOUNT_STAMPS)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>Buy new postage stamp batch</HistoryHeader>
+      <PostageStampStandardCreation onFinished={onFinished} />
+    </div>
+  )
+}
@@ -0,0 +1,270 @@
+import { PostageBatchOptions } from '@ethersphere/bee-js'
+import { Box, Grid, Typography, createStyles, makeStyles } from '@material-ui/core'
+import BigNumber from 'bignumber.js'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { Link } from 'react-router-dom'
+import Check from 'remixicon-react/CheckLineIcon'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmSelect } from '../../components/SwarmSelect'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as StampsContext } from '../../providers/Stamps'
+import { ROUTES } from '../../routes'
+import {
+  calculateStampPrice,
+  convertAmountToSeconds,
+  convertDepthToBytes,
+  secondsToTimeString,
+  waitUntilStampExists,
+} from '../../utils'
+import { getHumanReadableFileSize } from '../../utils/file'
+
+interface Props {
+  onFinished: () => void
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    link: {
+      color: '#dd7700',
+      textDecoration: 'underline',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+  }),
+)
+
+export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElement {
+  const classes = useStyles()
+  const { chainState } = useContext(BeeContext)
+  const { refresh } = useContext(StampsContext)
+  const { beeDebugApi } = useContext(SettingsContext)
+
+  const [depthInput, setDepthInput] = useState<string>('')
+  const [amountInput, setAmountInput] = useState<string>('')
+  const [labelInput, setLabelInput] = useState('')
+  const [immutable, setImmutable] = useState(false)
+  const [depthError, setDepthError] = useState<string>('')
+  const [amountError, setAmountError] = useState<string>('')
+  const [submitting, setSubmitting] = useState(false)
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  function getFileSize(depth: number): string {
+    if (isNaN(depth) || depth < 17 || depth > 255) {
+      return '-'
+    }
+
+    return `~${getHumanReadableFileSize(convertDepthToBytes(depth))}`
+  }
+
+  function getTtl(amount: number): string {
+    const isCurrentPriceAvailable = chainState && chainState.currentPrice
+
+    if (amount <= 0 || !isCurrentPriceAvailable) {
+      return '-'
+    }
+
+    const pricePerBlock = Number.parseInt(chainState.currentPrice, 10)
+
+    return `${secondsToTimeString(
+      convertAmountToSeconds(amount, pricePerBlock),
+    )} (with price of ${pricePerBlock.toFixed(0)} per block)`
+  }
+
+  function getPrice(depth: number, amount: bigint): string {
+    const hasInvalidInput = amount <= 0 || isNaN(depth) || depth < 17 || depth > 255
+
+    if (hasInvalidInput) {
+      return '-'
+    }
+
+    const price = calculateStampPrice(depth, amount)
+
+    return `${price.toSignificantDigits()} xBZZ`
+  }
+
+  async function submit() {
+    try {
+      // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+      if (!depthInput || !amountInput) {
+        return
+      }
+
+      if (!beeDebugApi) {
+        return
+      }
+
+      setSubmitting(true)
+      const amount = BigInt(amountInput)
+      const depth = Number.parseInt(depthInput)
+      const options: PostageBatchOptions = {
+        waitForUsable: false,
+        label: labelInput || undefined,
+        immutableFlag: immutable,
+      }
+
+      const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+      await waitUntilStampExists(batchId, beeDebugApi)
+      await refresh()
+      onFinished()
+    } catch (e) {
+      console.error(e) // eslint-disable-line
+      enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+    }
+    setSubmitting(false)
+  }
+
+  function validateAmountInput(amountInput: string) {
+    let validAmountInput = '0'
+
+    if (!amountInput) {
+      setAmountError('Required field')
+    } else {
+      if (amountInput.indexOf('.') > -1) {
+        setAmountError('Amount must be an integer')
+      } else {
+        const amount = new BigNumber(amountInput)
+
+        if (amount.isNaN()) {
+          setAmountError('Amount must contain only digits')
+        } else if (amount.isLessThanOrEqualTo(0)) {
+          setAmountError('Amount must be greater than 0')
+        } else {
+          setAmountError('')
+          validAmountInput = amountInput
+        }
+      }
+    }
+
+    setAmountInput(validAmountInput)
+  }
+
+  function validateDepthInput(depthInput: string) {
+    let validDepthInput = '0'
+
+    if (!depthInput) {
+      setDepthError('Required field')
+    } else {
+      const depth = new BigNumber(depthInput)
+
+      if (!depth.isInteger()) {
+        setDepthError('Depth must be an integer')
+      } else if (depth.isLessThan(17)) {
+        setDepthError('Minimal depth is 17')
+      } else if (depth.isGreaterThan(255)) {
+        setDepthError('Depth has to be at most 255')
+      } else {
+        setDepthError('')
+        validDepthInput = depthInput
+      }
+    }
+
+    setDepthInput(validDepthInput)
+  }
+
+  return (
+    <>
+      <Box mb={4}>
+        <Typography>
+          To upload data to Swarm network, you will need to purchase a postage stamp. If you&apos;re not familiar with
+          this, please read{' '}
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </Typography>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="depth" label="Depth" onChange={event => validateDepthInput(event.target.value)} />
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            <Typography>Corresponding file size</Typography>
+            <Typography>{!depthError && depthInput ? getFileSize(parseInt(depthInput, 10)) : '-'}</Typography>
+          </Grid>
+        </Box>
+        {depthError && <Typography>{depthError}</Typography>}
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="amount" label="Amount" onChange={event => validateAmountInput(event.target.value)} />
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            <Typography>Corresponding TTL (Time to live)</Typography>
+            <Typography>{!amountError && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'}</Typography>
+          </Grid>
+        </Box>
+        {amountError && <Typography>{amountError}</Typography>}
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="label" label="Label" optional onChange={event => setLabelInput(event.target.value)} />
+      </Box>
+      <Box mb={2}>
+        <SwarmSelect
+          label="Immutable"
+          defaultValue="No"
+          onChange={event => setImmutable(event.target.value === 'Yes')}
+          options={[
+            { value: 'Yes', label: 'Yes' },
+            { value: 'No', label: 'No' },
+          ]}
+        />
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            {immutable && (
+              <Typography>
+                Once an immutable stamp is maxed out, it disallows further content uploads, thereby safeguarding your
+                previously uploaded content from unintentional overwriting.
+              </Typography>
+            )}
+            {!immutable && (
+              <Typography>
+                When a mutable stamp reaches full capacity, it still permits new content uploads. However, this comes
+                with the caveat of overwriting previously uploaded content associated with the same stamp.
+              </Typography>
+            )}
+          </Grid>
+        </Box>
+      </Box>
+      <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+        <Grid container justifyContent="space-between">
+          <Typography>Indicative Price</Typography>
+          <Typography>
+            {!amountError && !depthError && amountInput && depthInput
+              ? getPrice(parseInt(depthInput, 10), BigInt(amountInput))
+              : '-'}
+          </Typography>
+        </Grid>
+      </Box>
+
+      <Grid container justifyContent="space-between" alignItems="center">
+        <Grid item>
+          <SwarmButton
+            disabled={submitting || Boolean(depthError) || Boolean(amountError) || !depthInput || !amountInput}
+            onClick={submit}
+            iconType={Check}
+            loading={submitting}
+          >
+            Buy New Stamp
+          </SwarmButton>
+        </Grid>
+        <Grid item>
+          <Link to={ROUTES.ACCOUNT_STAMPS_NEW_STANDARD} className={classes.link}>
+            Standard mode
+          </Link>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
@@ -1,193 +0,0 @@
-import { PostageBatchOptions } from '@ethersphere/bee-js'
-import { Box, Grid, Typography } from '@material-ui/core'
-import BigNumber from 'bignumber.js'
-import { Form, Formik, FormikHelpers } from 'formik'
-import { useSnackbar } from 'notistack'
-import { ReactElement, useContext } from 'react'
-import Check from 'remixicon-react/CheckLineIcon'
-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 as StampsContext } from '../../providers/Stamps'
-import {
-  calculateStampPrice,
-  convertAmountToSeconds,
-  convertDepthToBytes,
-  secondsToTimeString,
-  waitUntilStampExists,
-} from '../../utils'
-import { getHumanReadableFileSize } from '../../utils/file'
-
-interface FormValues {
-  depth?: string
-  amount?: string
-  label?: string
-}
-type FormErrors = Partial<FormValues>
-const initialFormValues: FormValues = {
-  depth: '',
-  amount: '',
-  label: '',
-}
-
-interface Props {
-  onFinished: () => void
-}
-
-export function PostageStampCreation({ onFinished }: Props): ReactElement {
-  const { chainState } = useContext(BeeContext)
-  const { refresh } = useContext(StampsContext)
-  const { beeDebugApi } = useContext(SettingsContext)
-
-  const { enqueueSnackbar } = useSnackbar()
-
-  function getFileSize(depth: number): string {
-    if (isNaN(depth) || depth < 17 || depth > 255) {
-      return '-'
-    }
-
-    return `~${getHumanReadableFileSize(convertDepthToBytes(depth))}`
-  }
-
-  function getTtl(amount: number): string {
-    const isCurrentPriceAvailable = chainState && chainState.currentPrice
-
-    if (amount <= 0 || !isCurrentPriceAvailable) {
-      return '-'
-    }
-
-    const pricePerBlock = Number.parseInt(chainState.currentPrice, 10)
-
-    return `${secondsToTimeString(
-      convertAmountToSeconds(amount, pricePerBlock),
-    )} (with price of ${pricePerBlock.toFixed(0)} per block)`
-  }
-
-  function getPrice(depth: number, amount: bigint): string {
-    const hasInvalidInput = amount <= 0 || isNaN(depth) || depth < 17 || depth > 255
-
-    if (hasInvalidInput) {
-      return '-'
-    }
-
-    const price = calculateStampPrice(depth, amount)
-
-    return `${price.toSignificantDigits()} xBZZ`
-  }
-
-  return (
-    <>
-      <Box mb={4}>
-        <Typography>
-          To upload data to Swarm network, you will need to purchase a postage stamp. If you&apos;re not familiar with
-          this, please read{' '}
-          <a
-            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
-            target="_blank"
-            rel="noreferrer"
-          >
-            this guide
-          </a>
-          .
-        </Typography>
-      </Box>
-      <Formik
-        initialValues={initialFormValues}
-        onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
-          try {
-            // This is really just a typeguard, the validation pretty much guarantees these will have the right values
-            if (!values.depth || !values.amount) return
-
-            if (!beeDebugApi) return
-
-            const amount = BigInt(values.amount)
-            const depth = Number.parseInt(values.depth)
-            const options: PostageBatchOptions = { waitForUsable: false, label: values.label || undefined }
-            const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
-            await waitUntilStampExists(batchId, beeDebugApi)
-            actions.resetForm()
-            await refresh()
-            onFinished()
-          } catch (e) {
-            console.error(e) // eslint-disable-line
-            enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
-            actions.setSubmitting(false)
-          }
-        }}
-        validate={(values: FormValues) => {
-          const errors: FormErrors = {}
-
-          // Depth
-          if (!values.depth) errors.depth = 'Required field'
-          else {
-            const depth = new BigNumber(values.depth)
-
-            if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
-            else if (depth.isLessThan(17)) errors.depth = 'Minimal depth is 17'
-            else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
-          }
-
-          // Amount
-          if (!values.amount) errors.amount = 'Required field'
-          else {
-            const amount = new BigNumber(values.amount)
-
-            if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
-            else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
-          }
-
-          return errors
-        }}
-      >
-        {({ submitForm, isValid, isSubmitting, values, errors }) => (
-          <Form>
-            <Box mb={2}>
-              <SwarmTextInput name="depth" label="Depth" formik />
-              <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
-                <Grid container justifyContent="space-between">
-                  <Typography>Corresponding file size</Typography>
-                  <Typography>
-                    {!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}
-                  </Typography>
-                </Grid>
-              </Box>
-            </Box>
-            <Box mb={2}>
-              <SwarmTextInput name="amount" label="Amount" formik />
-              <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
-                <Grid container justifyContent="space-between">
-                  <Typography>Corresponding TTL (Time to live)</Typography>
-                  <Typography>
-                    {!errors.amount && values.amount ? getTtl(Number.parseInt(values.amount, 10)) : '-'}
-                  </Typography>
-                </Grid>
-              </Box>
-            </Box>
-            <Box mb={2}>
-              <SwarmTextInput name="label" label="Label" optional formik />
-            </Box>
-            <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
-              <Grid container justifyContent="space-between">
-                <Typography>Indicative Price</Typography>
-                <Typography>
-                  {!errors.amount && !errors.depth && values.amount && values.depth
-                    ? getPrice(parseInt(values.depth, 10), BigInt(values.amount))
-                    : '-'}
-                </Typography>
-              </Grid>
-            </Box>
-            <SwarmButton
-              disabled={isSubmitting || !isValid || !values.amount || !values.depth}
-              onClick={submitForm}
-              iconType={Check}
-              loading={isSubmitting}
-            >
-              Buy New Stamp
-            </SwarmButton>
-          </Form>
-        )}
-      </Formik>
-    </>
-  )
-}
@@ -23,7 +23,10 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl

  return (
    <SwarmSelect
-      options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
+      options={(stamps || []).map(x => ({
+        label: x.label ? x.batchID.slice(0, 8) + ' - ' + x.label : x.batchID.slice(0, 8),
+        value: x.batchID,
+      }))}
      onChange={event => onChange(event.target.value as string)}
      defaultValue={defaultValue}
      placeholder="Please select a postage stamp..."
@@ -0,0 +1,228 @@
+import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
+import { Box, Button, Grid, Slider, Typography } from '@material-ui/core'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { Link } from 'react-router-dom'
+import Check from 'remixicon-react/CheckLineIcon'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as StampsContext } from '../../providers/Stamps'
+import { ROUTES } from '../../routes'
+import { calculateStampPrice, convertAmountToSeconds, secondsToTimeString, waitUntilStampExists } from '../../utils'
+
+interface Props {
+  onFinished: () => void
+}
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      color: '#dd7700',
+      textDecoration: 'underline',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+    buttonSelected: {
+      color: 'white',
+      backgroundColor: theme.palette.primary.main,
+    },
+  }),
+)
+
+const marks = [
+  { value: 1, label: '1 day' },
+  { value: 365, label: '365 days' },
+]
+
+export function PostageStampStandardCreation({ onFinished }: Props): ReactElement {
+  const classes = useStyles()
+  const { refresh } = useContext(StampsContext)
+  const { beeDebugApi } = useContext(SettingsContext)
+
+  const [depthInput, setDepthInput] = useState<number>(Utils.getDepthForCapacity(4))
+  const [amountInput, setAmountInput] = useState<string>(Utils.getAmountForTtl(30))
+  const [labelInput, setLabelInput] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [buttonValue, setButtonValue] = useState(4)
+
+  function sliderValueChange(_: unknown, newValue: number | number[]) {
+    if (typeof newValue !== 'number') {
+      return
+    }
+    const amountValue = Utils.getAmountForTtl(newValue)
+    setAmountInput(amountValue)
+  }
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  function getTtl(amount: string): string {
+    const pricePerBlock = 24000
+
+    return `${secondsToTimeString(
+      convertAmountToSeconds(parseInt(amount, 10), pricePerBlock),
+    )} (with price of ${pricePerBlock.toFixed(0)} per block)`
+  }
+
+  function getPrice(depth: number, amount: bigint): string {
+    const price = calculateStampPrice(depth, amount)
+
+    return `${price.toSignificantDigits()} xBZZ`
+  }
+
+  async function submit() {
+    try {
+      // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+      if (!depthInput || !amountInput) {
+        return
+      }
+
+      if (!beeDebugApi) {
+        return
+      }
+
+      setSubmitting(true)
+      const amount = BigInt(amountInput)
+      const depth = depthInput
+      const options: PostageBatchOptions = {
+        waitForUsable: false,
+        label: labelInput || undefined,
+        immutableFlag: true,
+      }
+
+      const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+      await waitUntilStampExists(batchId, beeDebugApi)
+      await refresh()
+      onFinished()
+    } catch (e) {
+      console.error(e) // eslint-disable-line
+      enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+    }
+    setSubmitting(false)
+  }
+
+  function handleBatchSize(gigabytes: number) {
+    setButtonValue(gigabytes)
+    const capacity = Utils.getDepthForCapacity(gigabytes)
+    setDepthInput(capacity)
+  }
+
+  return (
+    <>
+      <Box mb={4}>
+        <Typography>
+          A postage stamp batch containes postage stamps that will give you the right to upload data to the Swarm
+          network. If you&apos;re not familiar with this, please read&nbsp;
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </Typography>
+      </Box>
+      <Box mb={1}>
+        <Typography variant="h2">Batch name</Typography>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="depth" label="Label" onChange={e => setLabelInput(e.target.value)} />
+      </Box>
+      <Box mb={1}>
+        <Typography variant="h2">Batch size</Typography>
+      </Box>
+      <Box mb={2}>
+        <Grid container justifyContent="space-between" spacing={2}>
+          <Grid item xs={4}>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleBatchSize(4)}
+              className={buttonValue === 4 ? classes.buttonSelected : ''}
+            >
+              4 GB
+            </Button>
+          </Grid>
+          <Grid item xs={4}>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleBatchSize(32)}
+              className={buttonValue === 32 ? classes.buttonSelected : ''}
+            >
+              32 GB
+            </Button>
+          </Grid>
+          <Grid item xs={4}>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleBatchSize(256)}
+              className={buttonValue === 256 ? classes.buttonSelected : ''}
+            >
+              256 GB
+            </Button>
+          </Grid>
+        </Grid>
+      </Box>
+      <Box mb={1}>
+        <Typography variant="h2">Data persistence</Typography>
+      </Box>
+      <Box mb={2}>
+        <Slider
+          aria-label="Volume"
+          min={1}
+          max={365}
+          step={1}
+          marks={marks}
+          valueLabelDisplay="auto"
+          defaultValue={30}
+          onChange={sliderValueChange}
+        />
+      </Box>
+      <Box mb={2}>
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            <Typography>Corresponding TTL (Time to live)</Typography>
+            <Typography>{amountInput ? getTtl(amountInput) : '-'}</Typography>
+          </Grid>
+        </Box>
+        <Box display="flex" justifyContent={'right'} mt={0.5}>
+          <Typography style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.26)' }}>
+            Current price of 24000 per block
+          </Typography>
+        </Box>
+      </Box>
+      <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+        <Grid container justifyContent="space-between">
+          <Typography>Indicative Price</Typography>
+          <Typography>{getPrice(depthInput, BigInt(amountInput))}</Typography>
+        </Grid>
+      </Box>
+      <Grid container justifyContent="space-between" alignItems="center">
+        <Grid item>
+          <SwarmButton
+            disabled={submitting || !depthInput || !amountInput}
+            onClick={submit}
+            iconType={Check}
+            loading={submitting}
+          >
+            Buy New Stamp
+          </SwarmButton>
+        </Grid>
+        <Grid item>
+          <Link to={ROUTES.ACCOUNT_STAMPS_NEW_ADVANCED} className={classes.link}>
+            Advanced mode
+          </Link>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
@@ -1,8 +1,13 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
+import TimerFlashFill from 'remixicon-react/TimerFlashFillIcon'
+import TimerFlashLine from 'remixicon-react/TimerFlashLineIcon'
 import ExpandableElement from '../../components/ExpandableElement'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import StampExtensionModal from '../../components/StampExtensionModal'
+import { Context } from '../../providers/Settings'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
 import { secondsToTimeString } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
@@ -13,7 +18,11 @@ interface Props {
 }

 function StampsTable({ postageStamps }: Props): ReactElement | null {
-  if (postageStamps === null) return null
+  const { beeDebugApi } = useContext(Context)
+
+  if (!postageStamps || !beeDebugApi) {
+    return null
+  }

  return (
    <ExpandableList label="Postage Stamps" defaultOpen>
@@ -38,7 +47,22 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
              <ExpandableListItem label="Label" value={stamp.label} />
              <ExpandableListItem label="Usable" value={stamp.usable ? 'yes' : 'no'} />
              <ExpandableListItem label="Exists" value={stamp.exists ? 'yes' : 'no'} />
+              <ExpandableListItem label="Immutable" value={stamp.immutableFlag ? 'yes' : 'no'} />
              <ExpandableListItem label="Purchase Block Number" value={stamp.blockNumber} />
+              <ExpandableListItemActions>
+                <StampExtensionModal
+                  type="Topup"
+                  icon={<TimerFlashFill size="1rem" />}
+                  beeDebug={beeDebugApi}
+                  stamp={stamp.batchID}
+                />
+                <StampExtensionModal
+                  type="Dilute"
+                  icon={<TimerFlashLine size="1rem" />}
+                  beeDebug={beeDebugApi}
+                  stamp={stamp.batchID}
+                />
+              </ExpandableListItemActions>
            </>
          }
        >
@@ -44,7 +44,7 @@ export default function Stamp(): ReactElement {
  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />

  function navigateToNewStamp() {
-    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
+    navigate(ROUTES.ACCOUNT_STAMPS_NEW_STANDARD)
  }

  return (
@@ -34,7 +34,7 @@ export default function EthereumConnectionCheck(): ReactElement | null {
              Getblock
            </a>
            . By default, Bee expects a local node at http://localhost:8545. To use a provider instead, simply change
-            the <strong>swap-endpoint</strong> in your configuration file.
+            the <strong>blockchain-rpc-endpoint</strong> in your configuration file.
          </>
        )}
      </ExpandableListItemNote>
@@ -162,12 +162,12 @@ export function Swap({ header }: Props): ReactElement {
      )
    }

-    if (!desktopConfiguration['swap-endpoint']) {
-      throw new SwapError('Swap endpoint is not configured in Swarm Desktop')
+    if (!desktopConfiguration['blockchain-rpc-endpoint']) {
+      throw new SwapError('Blockchain RPC endpoint is not configured in Swarm Desktop')
    }
    await wrapWithSwapError(
-      Rpc.getNetworkChainId(desktopConfiguration['swap-endpoint']),
-      `Swap endpoint not reachable at ${desktopConfiguration['swap-endpoint']}`,
+      Rpc.getNetworkChainId(desktopConfiguration['blockchain-rpc-endpoint']),
+      `Blockchain RPC endpoint not reachable at ${desktopConfiguration['blockchain-rpc-endpoint']}`,
    )
    await wrapWithSwapError(sendSwapRequest(daiToSwap), GENERIC_SWAP_FAILED_ERROR_MESSAGE)
  }
@@ -9,7 +9,7 @@ import {
  Peer,
  Topology,
 } from '@ethersphere/bee-js'
-import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
+import { ReactChild, ReactElement, createContext, useContext, useEffect, useState } from 'react'
 import semver from 'semver'
 import PackageJson from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
@@ -1,8 +1,8 @@
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
 import { providers } from 'ethers'
-import { createContext, ReactNode, ReactElement, useEffect, useState } from 'react'
-import { useGetBeeConfig } from '../hooks/apiHooks'
+import { ReactElement, ReactNode, createContext, useEffect, useState } from 'react'
 import { DEFAULT_BEE_API_HOST, DEFAULT_BEE_DEBUG_API_HOST, DEFAULT_RPC_URL } from '../constants'
+import { useGetBeeConfig } from '../hooks/apiHooks'

 const LocalStorageKeys = {
  providerUrl: 'json-rpc-provider',
@@ -18,7 +18,7 @@ interface ContextInterface {
  isDesktop: boolean
  desktopUrl: string
  rpcProviderUrl: string
-  rpcProvider: providers.JsonRpcProvider
+  rpcProvider: providers.JsonRpcProvider | null
  cors: string | null
  dataDir: string | null
  ensResolver: string | null
@@ -42,7 +42,7 @@ const initialValues: ContextInterface = {
  desktopUrl: window.location.origin,
  setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
  rpcProviderUrl: '',
-  rpcProvider: new providers.JsonRpcProvider(''),
+  rpcProvider: null,
  cors: null,
  dataDir: null,
  ensResolver: null,
@@ -16,7 +16,7 @@ import GiftCards from './pages/gift-code'
 import Info from './pages/info'
 import LightModeRestart from './pages/restart/LightModeRestart'
 import Settings from './pages/settings'
-import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
+import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampAdvancedPage'
 import Status from './pages/status'
 import TopUp from './pages/top-up'
 import { BankCardTopUpIndex } from './pages/top-up/BankCardTopUpIndex'
@@ -25,6 +25,7 @@ import { GiftCardFund } from './pages/top-up/GiftCardFund'
 import { GiftCardTopUpIndex } from './pages/top-up/GiftCardTopUpIndex'
 import { Swap } from './pages/top-up/Swap'
 import { Context as SettingsContext } from './providers/Settings'
+import { CreatePostageStampBasicPage } from './pages/stamps/CreatePostageStampStandardPage'

 export enum ROUTES {
  INFO = '/',
@@ -46,7 +47,8 @@ export enum ROUTES {
  ACCOUNT_WALLET = '/account/wallet',
  ACCOUNT_CHEQUEBOOK = '/account/chequebook',
  ACCOUNT_STAMPS = '/account/stamps',
-  ACCOUNT_STAMPS_NEW = '/account/stamps/new',
+  ACCOUNT_STAMPS_NEW_STANDARD = '/account/stamps/new',
+  ACCOUNT_STAMPS_NEW_ADVANCED = '/account/stamps/new/advanced',
  ACCOUNT_FEEDS = '/account/feeds',
  ACCOUNT_FEEDS_NEW = '/account/feeds/new',
  ACCOUNT_FEEDS_UPDATE = '/account/feeds/update/:hash',
@@ -86,7 +88,8 @@ const BaseRouter = (): ReactElement => {
      <Route path={ROUTES.ACCOUNT_WALLET} element={<AccountWallet />} />
      <Route path={ROUTES.ACCOUNT_CHEQUEBOOK} element={<AccountChequebook />} />
      <Route path={ROUTES.ACCOUNT_STAMPS} element={<AccountStamps />} />
-      <Route path={ROUTES.ACCOUNT_STAMPS_NEW} element={<CreatePostageStampPage />} />
+      <Route path={ROUTES.ACCOUNT_STAMPS_NEW_STANDARD} element={<CreatePostageStampBasicPage />} />
+      <Route path={ROUTES.ACCOUNT_STAMPS_NEW_ADVANCED} element={<CreatePostageStampPage />} />
      <Route path={ROUTES.ACCOUNT_FEEDS} element={<AccountFeeds />} />
      <Route path={ROUTES.ACCOUNT_FEEDS_NEW} element={<CreateNewFeed />} />
      <Route path={ROUTES.ACCOUNT_FEEDS_UPDATE} element={<UpdateFeed />} />
@@ -159,6 +159,23 @@ const componentsOverrides = (theme: Theme) => ({
      backgroundColor: 'transparent',
    },
  },
+  MuiSlider: {
+    root: {
+      '& .MuiSlider-valueLabel': {
+        top: '-27px',
+        '& span': {
+          height: '20px',
+          borderRadius: '0px',
+          transform: 'none',
+          '& span': {
+            display: 'flex',
+            alignItems: 'center',
+            transform: 'none',
+          },
+        },
+      },
+    },
+  },
 })

 const propsOverrides = {
@@ -17,7 +17,7 @@ export interface BeeConfig {
  'resolver-options': string
  'use-postage-snapshot': boolean
  'data-dir': string
-  'swap-endpoint'?: string
+  'blockchain-rpc-endpoint'?: string
 }

 export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
@@ -29,13 +29,13 @@ export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
 export function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<BeeConfig> {
  return updateDesktopConfiguration(desktopUrl, {
    'swap-enable': true,
-    'swap-endpoint': rpcProvider,
+    'blockchain-rpc-endpoint': rpcProvider,
  })
 }

 export async function setJsonRpcInDesktop(desktopUrl: string, value: string): Promise<void> {
  await updateDesktopConfiguration(desktopUrl, {
-    'swap-endpoint': value,
+    'blockchain-rpc-endpoint': value,
  })
 }

@@ -1,4 +1,4 @@
-import { BatchId, BeeDebug, BeeResponseError, PostageBatch } from '@ethersphere/bee-js'
+import { BatchId, BeeDebug, PostageBatch } from '@ethersphere/bee-js'
 import { decodeCid } from '@ethersphere/swarm-cid'
 import { BigNumber } from 'bignumber.js'
 import { BZZ_LINK_DOMAIN } from '../constants'
@@ -258,11 +258,8 @@ async function waitForStamp(
      const stamp = await beeDebug.getPostageBatch(batchId)

      if (stamp[field]) return stamp
-    } catch (e) {
-      // TODO: Workaround for https://github.com/ethersphere/bee/issues/3300
-      if ((e as BeeResponseError).message !== 'Bad Request: cannot get batch') {
-        throw e
-      }
+    } catch {
+      // ignore
    }

    await sleepMs(pollingFrequency)
@@ -0,0 +1,149 @@
+import { Bee, Utils } from '@ethersphere/bee-js'
+import { loadAllNodes, MantarayNode, MetadataMapping, Reference } from 'mantaray-js'
+
+interface ValueNode extends MantarayNode {
+  getEntry: Reference
+}
+
+/**
+ * The ASCII code of the character `/`.
+ *
+ * This prefix of the root node holds metadata such as the index document.
+ */
+const INDEX_DOCUMENT_FORK_PREFIX = '47'
+
+export class ManifestJs {
+  private bee: Bee
+
+  constructor(bee: Bee) {
+    this.bee = bee
+  }
+
+  /**
+   * Tests whether a given Swarm hash is a valid mantaray manifest
+   */
+  public async isManifest(hash: string): Promise<boolean> {
+    try {
+      const data = await this.bee.downloadData(hash)
+      const node = new MantarayNode()
+      node.deserialize(data)
+
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  /**
+   * Retrieves `website-index-document` from a Swarm hash, or `null` if it is not present
+   */
+  public async getIndexDocumentPath(hash: string): Promise<string | null> {
+    const metadata = await this.getRootSlashMetadata(hash)
+
+    if (!metadata) {
+      return null
+    }
+
+    return metadata['website-index-document'] || null
+  }
+
+  /**
+   * Retrieves all paths with the associated hashes from a Swarm manifest
+   */
+  public async getHashes(hash: string): Promise<Record<string, string>> {
+    const data = await this.bee.downloadData(hash)
+    const node = new MantarayNode()
+    node.deserialize(data)
+    await loadAllNodes(this.load.bind(this), node)
+    const result = {}
+    this.extractHashes(result, node)
+
+    return result
+  }
+
+  /**
+   * Resolves an arbitrary Swarm feed manifest to its latest update reference.
+   * @returns `/bzz` root manifest hash, or `Promise<null>` if hash is not a feed manifest
+   * @throws in case of network errors or bad input
+   */
+  public async resolveFeedManifest(hash: string): Promise<string | null> {
+    const metadata = await this.getRootSlashMetadata(hash)
+
+    if (!metadata) {
+      return null
+    }
+
+    const owner = metadata['swarm-feed-owner']
+    const topic = metadata['swarm-feed-topic']
+
+    if (!owner || !topic) {
+      return null
+    }
+
+    const reader = this.bee.makeFeedReader('sequence', topic, owner)
+    const response = await reader.download()
+
+    return response.reference
+  }
+
+  private async getRootSlashMetadata(hash: string): Promise<MetadataMapping | null> {
+    const data = await this.bee.downloadData(hash)
+    const node = new MantarayNode()
+    node.deserialize(data)
+
+    if (!node.forks) {
+      return null
+    }
+    const fork = node.forks[INDEX_DOCUMENT_FORK_PREFIX]
+
+    if (!fork) {
+      return null
+    }
+    const metadataNode = fork.node
+
+    if (!metadataNode.IsWithMetadataType()) {
+      return null
+    }
+    const metadata = metadataNode.getMetadata
+
+    if (!metadata) {
+      return null
+    }
+
+    return metadata
+  }
+
+  private extractHashes(result: Record<string, string>, node: MantarayNode, prefix = ''): void {
+    if (!node.forks) {
+      return
+    }
+    for (const fork of Object.values(node.forks)) {
+      const path = prefix + this.bytesToUtf8(fork.prefix)
+      const childNode = fork.node
+
+      if (this.isValueNode(childNode, path)) {
+        result[path] = Utils.bytesToHex(childNode.getEntry)
+      }
+
+      if (childNode.isEdgeType()) {
+        this.extractHashes(result, childNode, path)
+      }
+    }
+  }
+
+  private load(reference: Uint8Array) {
+    return this.bee.downloadData(Utils.bytesToHex(reference))
+  }
+
+  private bytesToUtf8(bytes: Uint8Array): string {
+    return new TextDecoder('utf-8').decode(bytes)
+  }
+
+  private isValueNode(node: MantarayNode, path: string): node is ValueNode {
+    return !this.isRootSlash(node, path) && node.isValueType() && typeof node.getEntry !== 'undefined'
+  }
+
+  private isRootSlash(node: MantarayNode, path: string): boolean {
+    return path === '/' && node.IsWithMetadataType()
+  }
+}
Author	SHA1	Message	Date
bee-worker	16ffffb0c4	chore(master): release 0.25.0 (#637 )	2023-12-04 22:32:19 +01:00
Cafe137	080d9f2c2a	refactor: clean up postage stamp screens (#642 ) * refactor: clean up postage stamp screens * fix: add immutable flag	2023-12-04 22:28:44 +01:00
rolandlor	4f9abc614e	feat: update postage stamp creation screen (#641 ) * style: UI changes for postage stamp * feat: New postage stamp standard page --------- Co-authored-by: Seres Roland <seresroland@Seres-MBP.home>	2023-12-04 22:01:51 +01:00
Cafe137	20a051b658	fix: put stamp input error handling in state (#640 )	2023-11-20 14:59:00 +01:00
Ferenc Sárai	0c2ac0c454	feat: improve topup and dilute ux Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2023-11-20 14:00:42 +01:00
Ferenc Sárai	8802d20555	style: add padding to files download (#387 ) (#639 ) Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2023-11-20 13:59:40 +01:00
zol1981	7fa1cb0ccf	fix: add missing stamp labels and fix inputs (#634 ) * fix issue #630, #606 * fix: Stamp Labels #630, Entering * into amount #606 * #606 Entering * into amount * fix: inputs eliminating warnings --------- Co-authored-by: Zoltán Mihály <zolmac@Zoltans-MacBook-Pro.local>	2023-11-08 14:15:34 +01:00
Ferenc Sárai	bab08e1df2	style: add padding to account chequebook (#635 ) Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2023-11-07 12:33:28 +01:00
bee-worker	d91c334cf8	chore(master): release 0.24.1 (#629 )	2023-10-18 15:48:48 +02:00
rampall	bce93ce3cd	fix: update `swap-endpoint` to `blockchain-rpc-endpoint` (#628 )	2023-10-18 15:42:06 +02:00
bee-worker	8367f2b76a	chore(master): release 0.24.0 (#621 )	2023-08-12 00:47:34 +02:00
Cafe137	055a3002b3	feat: add stamp dilute and topup (#619 ) * feat: add stamp dilute and topup * fix: remove any * chore: bump bee-js * chore: remove obsolete workaround	2023-08-12 00:41:10 +02:00