@ethersphere/bee-dashboard 0.34.0 → 0.35.1

package/lib/{App-DJxgFkgf.js → App-BsgbFuqW.js}

@@ -48875,6 +48875,8 @@ const BEE_DESKTOP_LATEST_RELEASE_PAGE = "https://github.com/ethersphere/bee-desk
 const BEE_DESKTOP_LATEST_RELEASE_PAGE_API = "https://api.github.com/repos/ethersphere/bee-desktop/releases/latest";
 const DEFAULT_BEE_API_HOST = "http://localhost:1633";
 const DEFAULT_RPC_URL = "https://xdai.fairdatasociety.org";
+const MIN_STAMP_DEPTH = 17;
+const MAX_STAMP_DEPTH = 255;
 class AuthError extends Error {
   constructor() {
     super("Bad API key");
@@ -68469,8 +68471,18 @@ function chainIdToName(chainId) {
 function ethAddressString(address) {
   return typeof address === "string" ? getAddress(address) : getAddress(address.toHex());
 }
+class FixedIdJsonRpcProvider extends JsonRpcProvider {
+  async _send(payload) {
+    const results = await super._send(payload);
+    const payloads = Array.isArray(payload) ? payload : [payload];
+    return results.map((result, i2) => ({ ...result, id: payloads[i2]?.id ?? result.id }));
+  }
+}
 function newGnosisProvider(url) {
-  return new JsonRpcProvider(url, GnosisNetwork, { staticNetwork: true });
+  return new FixedIdJsonRpcProvider(url, GnosisNetwork, { staticNetwork: true, batchMaxCount: 1 });
+}
+function newGnosisProviderForValidation(url) {
+  return new FixedIdJsonRpcProvider(url, void 0, { batchMaxCount: 1 });
 }
 const initialValues$9 = {
   beeApi: null,
@@ -68912,7 +68924,7 @@ const Warning = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
 const Web = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m-5 14H4v-4h11zm0-5H4V9h11zm5 5h-4V9h4z"
 }), "Web");
-const useStyles$C = makeStyles()((theme2) => ({
+const useStyles$D = makeStyles()((theme2) => ({
   root: {
     width: "100%",
     padding: 0,
@@ -68938,7 +68950,7 @@ const useStyles$C = makeStyles()((theme2) => ({
   }
 }));
 function ExpandableList({ children, label, level, defaultOpen, info }) {
-  const { classes: classes2 } = useStyles$C();
+  const { classes: classes2 } = useStyles$D();
   const [open2, setOpen] = React.useState(Boolean(defaultOpen));
   const handleClick = () => {
     setOpen(!open2);
@@ -69013,7 +69025,7 @@ function requireInformationLineIcon() {
 }
 var InformationLineIconExports = requireInformationLineIcon();
 const Info = /* @__PURE__ */ getDefaultExportFromCjs(InformationLineIconExports);
-const useStyles$B = makeStyles()((theme2) => ({
+const useStyles$C = makeStyles()((theme2) => ({
   header: {
     backgroundColor: theme2.palette.background.paper,
     marginBottom: theme2.spacing(0.25),
@@ -69030,16 +69042,16 @@ const useStyles$B = makeStyles()((theme2) => ({
   }
 }));
 function ExpandableListItem({ label, value, tooltip }) {
-  const { classes: classes2 } = useStyles$B();
+  const { classes: classes2 } = useStyles$C();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemButton, { className: classes2.header, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", width: "100%", children: [
     label && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: label }) }),
-    value && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", children: [
+    value && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", component: "div", children: [
       value,
       tooltip && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: tooltip, placement: "top", arrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { size: "small", className: classes2.copyValue, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Info, { strokeWidth: 1 }) }) })
     ] }) })
   ] }) });
 }
-const useStyles$A = makeStyles()((theme2) => ({
+const useStyles$B = makeStyles()((theme2) => ({
   wrapper: {
     display: "flex",
     flexDirection: "row",
@@ -69051,7 +69063,7 @@ const useStyles$A = makeStyles()((theme2) => ({
   }
 }));
 function ExpandableListItemActions({ children }) {
-  const { classes: classes2 } = useStyles$A();
+  const { classes: classes2 } = useStyles$B();
   if (Array.isArray(children)) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes2.wrapper, children: children.filter((x) => x).map((a2, i2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes2.action, children: a2 }, i2)) });
   }
@@ -69219,15 +69231,21 @@ function useClipboardCopy(value) {
     tooltipCloseHandler
   };
 }
-const useStyles$z = makeStyles()((theme2) => ({
+const useStyles$A = makeStyles()((theme2) => ({
   header: {
     backgroundColor: theme2.palette.background.paper,
     marginBottom: theme2.spacing(0.25),
-    borderLeft: `${theme2.spacing(0.25)}px solid rgba(0,0,0,0)`,
-    wordBreak: "break-word"
+    borderLeft: `${theme2.spacing(0.25)} solid rgba(0,0,0,0)`,
+    wordBreak: "break-word",
+    "&:hover": {
+      backgroundColor: theme2.palette.background.paper
+    },
+    "&:focus-within": {
+      backgroundColor: theme2.palette.background.paper
+    }
   },
   headerOpen: {
-    borderLeft: `${theme2.spacing(0.25)}px solid ${theme2.palette.primary.main}`
+    borderLeft: `${theme2.spacing(0.25)} solid ${theme2.palette.primary.main}`
   },
   copyValue: {
     cursor: "pointer",
@@ -69256,14 +69274,14 @@ const split = (s2) => {
   return s2.match(/(0x|.{1,8})/gi) || [];
 };
 function ExpandableListItemKey({ label, value, expanded }) {
-  const { classes: classes2 } = useStyles$z();
+  const { classes: classes2 } = useStyles$A();
   const [open2, setOpen] = React.useState(expanded || false);
   const { copied, handleCopy, tooltipCloseHandler } = useClipboardCopy(value);
   const toggleOpen = () => setOpen(!open2);
   const splitValues = split(value);
   const hasPrefix = isPrefixedHexString(value);
   const spanText = `${hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]}[…]${splitValues[splitValues.length - 1]}`;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemButton, { className: `${classes2.header} ${open2 ? classes2.headerOpen : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, direction: "column", justifyContent: "space-between", alignItems: "stretch", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemButton, { className: `${classes2.header} ${open2 ? classes2.headerOpen : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, direction: "column", justifyContent: "space-between", alignItems: "stretch", style: { width: "100%" }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, direction: "row", justifyContent: "space-between", alignItems: "center", children: [
       label && /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", component: "span", children: label }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", component: "span", children: [
@@ -69321,7 +69339,7 @@ function requirePulseLineIcon() {
 }
 var PulseLineIconExports = requirePulseLineIcon();
 const Activity = /* @__PURE__ */ getDefaultExportFromCjs(PulseLineIconExports);
-const useStyles$y = makeStyles()((theme2) => ({
+const useStyles$z = makeStyles()((theme2) => ({
   root: {
     height: "100%"
   },
@@ -69337,7 +69355,7 @@ const useStyles$y = makeStyles()((theme2) => ({
   }
 }));
 function TroubleshootConnectionCard() {
-  const { classes: classes2 } = useStyles$y();
+  const { classes: classes2 } = useStyles$z();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, direction: "column", justifyContent: "center", alignItems: "center", className: classes2.root, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { className: classes2.content, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h1", align: "center", children: "Uh oh, it looks like your node is not connected." }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { className: classes2.content, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { align: "center", children: [
@@ -69409,7 +69427,7 @@ function requireDownloadLineIcon() {
 }
 var DownloadLineIconExports = requireDownloadLineIcon();
 const Download$1 = /* @__PURE__ */ getDefaultExportFromCjs(DownloadLineIconExports);
-const useStyles$x = makeStyles()((theme2) => ({
+const useStyles$y = makeStyles()((theme2) => ({
   link: {
     color: "#dd7700",
     textDecoration: "underline",
@@ -69421,14 +69439,14 @@ const useStyles$x = makeStyles()((theme2) => ({
     }
   },
   buttonSelected: {
-    color: "white",
-    backgroundColor: theme2.palette.primary.main,
+    color: theme2.palette.secondary.main,
+    backgroundColor: "white",
     "&:hover": {
-      color: theme2.palette.secondary.main,
-      backgroundColor: "white",
+      color: "white",
+      backgroundColor: theme2.palette.primary.main,
       "@media (hover: none)": {
-        color: "white",
-        backgroundColor: theme2.palette.primary.main
+        color: theme2.palette.secondary.main,
+        backgroundColor: "white"
       }
     }
   },
@@ -69447,7 +69465,7 @@ function WithdrawDepositModal({
   action,
   icon
 }) {
-  const { classes: classes2 } = useStyles$x();
+  const { classes: classes2 } = useStyles$y();
   const [open2, setOpen] = React.useState(false);
   const [amount, setAmount] = React.useState("");
   const [amountToken, setAmountToken] = React.useState(null);
@@ -71044,26 +71062,6 @@ function shortenText(text, length2 = 20, separator = "[…]") {
   }
   return `${text.slice(0, length2)}${separator}${text.slice(-length2)}`;
 }
-const DEFAULT_POLLING_FREQUENCY = 1e3;
-const DEFAULT_STAMP_USABLE_TIMEOUT = 5 * 6e4;
-function waitUntilStampUsable(batchId, bee, options) {
-  return waitForStamp(batchId, bee);
-}
-async function waitForStamp(batchId, bee, options) {
-  const timeout3 = DEFAULT_STAMP_USABLE_TIMEOUT;
-  const pollingFrequency = DEFAULT_POLLING_FREQUENCY;
-  for (let i2 = 0; i2 < timeout3; i2 += pollingFrequency) {
-    try {
-      const stamp = await bee.getPostageBatch(batchId);
-      if (stamp.usable) {
-        return stamp;
-      }
-    } catch {
-    }
-    await sleepMs(pollingFrequency);
-  }
-  throw new Error("Wait until stamp usable timeout has been reached");
-}
 function mergeAccounting(balances, settlements, uncashedAmounts) {
   if (!balances || !settlements) return null;
   const accounting = {};
@@ -71289,7 +71287,7 @@ const tabMap = {
   FEEDS: 3,
   STAKING: 4
 };
-const useStyles$w = makeStyles()((theme2) => ({
+const useStyles$x = makeStyles()((theme2) => ({
   root: {
     flexGrow: 1,
     marginBottom: theme2.spacing(4),
@@ -71303,7 +71301,7 @@ const useStyles$w = makeStyles()((theme2) => ({
   }
 }));
 function AccountNavigation({ active }) {
-  const { classes: classes2 } = useStyles$w();
+  const { classes: classes2 } = useStyles$x();
   const navigate = useNavigate();
   const { nodeInfo } = React.useContext(Context$7);
   function onChange(_event, newValue) {
@@ -71525,7 +71523,7 @@ function requireDownload2LineIcon() {
 }
 var Download2LineIconExports = requireDownload2LineIcon();
 const DownloadIcon = /* @__PURE__ */ getDefaultExportFromCjs(Download2LineIconExports);
-const useStyles$v = makeStyles()(() => ({
+const useStyles$w = makeStyles()(() => ({
   button: {
     height: "42px",
     position: "relative",
@@ -71563,7 +71561,7 @@ function SwarmButton({
   style: style2,
   ...other
 }) {
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   function getIconColor() {
     if (loading || disabled) {
       return "rgba(0, 0, 0, 0.26)";
@@ -71622,8 +71620,47 @@ function Provider$6({ children }) {
   }, [setIdentities]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Context$6.Provider, { value: { identities, setIdentities }, children });
 }
+function validateDepthInput(depthInput, onError, onSuccess) {
+  let validDepthInput = "0";
+  if (!depthInput) {
+    onError("Required field");
+  } else {
+    const depth = new BigNumber(depthInput);
+    if (!depth.isInteger()) {
+      onError("Depth must be an integer");
+    } else if (depth.isLessThan(MIN_STAMP_DEPTH)) {
+      onError(`Minimal depth is ${MIN_STAMP_DEPTH}`);
+    } else if (depth.isGreaterThan(MAX_STAMP_DEPTH)) {
+      onError(`Depth has to be at most ${MAX_STAMP_DEPTH}`);
+    } else {
+      onError("");
+      validDepthInput = depthInput;
+    }
+  }
+  onSuccess(validDepthInput);
+}
+const DEFAULT_POLLING_FREQUENCY = 1e3;
+const DEFAULT_STAMP_USABLE_TIMEOUT = 5 * 6e4;
+function waitUntilStampUsable(batchId, bee, options) {
+  return waitForStamp(batchId, bee);
+}
+async function waitForStamp(batchId, bee, options) {
+  const timeout3 = DEFAULT_STAMP_USABLE_TIMEOUT;
+  const pollingFrequency = DEFAULT_POLLING_FREQUENCY;
+  for (let i2 = 0; i2 < timeout3; i2 += pollingFrequency) {
+    try {
+      const stamp = await bee.getPostageBatch(batchId);
+      if (stamp.usable) {
+        return stamp;
+      }
+    } catch {
+    }
+    await sleepMs(pollingFrequency);
+  }
+  throw new Error("Wait until stamp usable timeout has been reached");
+}
 function generateWallet() {
-  const privateKey = randomBytes(PrivateKey.LENGTH).toString();
+  const privateKey = new Bytes(randomBytes(PrivateKey.LENGTH)).toString();
   return new Wallet(privateKey);
 }
 function persistIdentity(identities, identity2) {
@@ -71706,24 +71743,24 @@ function SwarmDialog({ children }) {
     }
   );
 }
-const useStyles$u = makeStyles()((theme2) => ({
+const useStyles$v = makeStyles()((theme2) => ({
   wrapper: {
     padding: theme2.spacing(1),
     cursor: "pointer"
   }
 }));
 function CloseButton({ onClose }) {
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes2.wrapper, onClick: onClose, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Close, {}) });
 }
-const useStyles$t = makeStyles()(() => ({
+const useStyles$u = makeStyles()(() => ({
   text: {
     color: "#606060",
     fontWeight: "bold"
   }
 }));
 function TitleWithClose({ children, onClose }) {
-  const { classes: classes2 } = useStyles$t();
+  const { classes: classes2 } = useStyles$u();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, justifyContent: "space-between", alignItems: "center", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: " " }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { className: classes2.text, align: "center", children }),
@@ -71864,7 +71901,7 @@ function requireClipboardLineIcon() {
 }
 var ClipboardLineIconExports = requireClipboardLineIcon();
 const Clipboard = /* @__PURE__ */ getDefaultExportFromCjs(ClipboardLineIconExports);
-const useStyles$s = makeStyles()((theme2) => ({
+const useStyles$t = makeStyles()((theme2) => ({
   wrapper: {
     overflow: "scroll",
     background: "#ffffff"
@@ -71882,17 +71919,17 @@ function prettifyString(string) {
   }
 }
 function Code({ children, prettify }) {
-  const { classes: classes2 } = useStyles$s();
+  const { classes: classes2 } = useStyles$t();
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes2.wrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: classes2.pre, children: prettify ? prettifyString(children) : children }) });
 }
-const useStyles$r = makeStyles()(() => ({
+const useStyles$s = makeStyles()(() => ({
   wrapper: {
     maxWidth: "100%"
   }
 }));
 function ExportFeedDialog({ identity: identity2, onClose }) {
   const { enqueueSnackbar } = useSnackbar();
-  const { classes: classes2 } = useStyles$r();
+  const { classes: classes2 } = useStyles$s();
   function onDownload() {
     FileSaver_minExports.saveAs(
       new Blob([identity2.identity], {
@@ -74053,7 +74090,7 @@ function TextField2({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TextField$1, { ...fieldToTextField(props), children });
 }
 TextField2.displayName = "FormikMaterialUITextField";
-const useStyles$q = makeStyles()((theme2) => ({
+const useStyles$r = makeStyles()((theme2) => ({
   field: {
     background: theme2.palette.background.paper,
     "& fieldset": {
@@ -74080,7 +74117,7 @@ function SwarmTextInput({
   defaultValue,
   placeholder
 }) {
-  const { classes: classes2 } = useStyles$q();
+  const { classes: classes2 } = useStyles$r();
   if (formik) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Field,
@@ -74094,7 +74131,7 @@ function SwarmTextInput({
         variant: "filled",
         className: classes2.field,
         defaultValue: defaultValue || "",
-        InputProps: { disableUnderline: true },
+        slotProps: { input: { disableUnderline: true } },
         placeholder
       }
     );
@@ -74110,12 +74147,12 @@ function SwarmTextInput({
       className: classes2.field,
       defaultValue: defaultValue || "",
       onChange,
-      InputProps: { disableUnderline: true },
+      slotProps: { input: { disableUnderline: true } },
       placeholder
     }
   );
 }
-const useStyles$p = makeStyles()((theme2) => ({
+const useStyles$q = makeStyles()((theme2) => ({
   textarea: {
     width: "100%",
     border: 0,
@@ -74131,7 +74168,7 @@ function ImportFeedDialog({ onClose }) {
   const fileInputRef = React.useRef(null);
   const { identities, setIdentities } = React.useContext(Context$6);
   const { enqueueSnackbar } = useSnackbar();
-  const { classes: classes2 } = useStyles$p();
+  const { classes: classes2 } = useStyles$q();
   async function onImport() {
     const feed = await importIdentity(name, textareaValue);
     if (feed) {
@@ -74248,7 +74285,7 @@ function AccountFeeds() {
       /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandableListItemKey, { label: "Topic", value: NULL_TOPIC.toHex() }),
       x.feedHash && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandableListItemKey, { label: "Feed hash", value: x.feedHash }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mt: 0.75, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandableListItemActions, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SwarmButton, { onClick: () => viewFeed(x.uuid), iconType: Info, children: "View Feed Page" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SwarmButton, { onClick: () => viewFeed(x.uuid), iconType: Info, disabled: Boolean(!x.feedHash), children: "View Feed Page" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(SwarmButton, { onClick: () => onShowExport(x), iconType: DownloadIcon, children: "Export..." }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(SwarmButton, { onClick: () => onShowDelete(x), iconType: Trash, children: "Delete..." })
       ] }) })
@@ -74487,7 +74524,7 @@ function requireTimerFlashLineIcon() {
 }
 var TimerFlashLineIconExports = requireTimerFlashLineIcon();
 const TimerFlashLine = /* @__PURE__ */ getDefaultExportFromCjs(TimerFlashLineIconExports);
-const useStyles$o = makeStyles()((theme2) => ({
+const useStyles$p = makeStyles()((theme2) => ({
   root: {
     width: "100%",
     padding: 0,
@@ -74516,7 +74553,7 @@ const useStyles$o = makeStyles()((theme2) => ({
   }
 }));
 function ExpandableElement({ children, expandable, defaultOpen }) {
-  const { classes: classes2 } = useStyles$o();
+  const { classes: classes2 } = useStyles$p();
   const [open2, setOpen] = React.useState(Boolean(defaultOpen));
   const handleClick = () => {
     setOpen(!open2);
@@ -74529,11 +74566,35 @@ function ExpandableElement({ children, expandable, defaultOpen }) {
     /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: open2, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes2.contentLevel12, children: expandable }) })
   ] });
 }
-function StampExtensionModal({ type, icon, bee, stamp }) {
+const useStyles$o = makeStyles()((theme2) => ({
+  buttonSelected: {
+    color: "white",
+    backgroundColor: theme2.palette.primary.main,
+    "&:hover": {
+      color: theme2.palette.secondary.main,
+      backgroundColor: "white",
+      "@media (hover: none)": {
+        color: "white",
+        backgroundColor: theme2.palette.primary.main
+      }
+    }
+  },
+  buttonUnselected: {
+    color: "#dd7700",
+    backgroundColor: "white"
+  }
+}));
+var StampExtensionType = /* @__PURE__ */ ((StampExtensionType2) => {
+  StampExtensionType2["Topup"] = "Topup";
+  StampExtensionType2["Dilute"] = "Dilute";
+  return StampExtensionType2;
+})(StampExtensionType || {});
+function StampExtensionModal({ type, icon, bee, stamp, status }) {
+  const { classes: classes2 } = useStyles$o();
   const [open2, setOpen] = React.useState(false);
   const [amount, setAmount] = React.useState("");
   const { enqueueSnackbar } = useSnackbar();
-  const label = `${type} ${stamp.toHex().substring(0, 8)}`;
+  const label = `${type} ${stamp.batchID.toHex().substring(0, 8)}`;
   const handleClickOpen = (e2) => {
     setOpen(true);
     e2.stopPropagation();
@@ -74542,28 +74603,57 @@ function StampExtensionModal({ type, icon, bee, stamp }) {
     setOpen(false);
   };
   const handleAction = async () => {
+    if (status !== CheckState.OK) {
+      enqueueSnackbar(`Node connection status is not ${CheckState.OK}: ${status}`, { variant: "error" });
+      return;
+    }
     if (type === "Topup") {
+      const isAmountInvalid = BigInt(amount) <= BigInt(0);
+      if (isAmountInvalid) {
+        enqueueSnackbar(`Invalid amount: ${amount}, it must be greate than 0`, { variant: "error" });
+        return;
+      }
       try {
-        await bee.topUpBatch(stamp, amount);
+        await bee.topUpBatch(stamp.batchID, 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" });
       }
+      return;
     }
     if (type === "Dilute") {
+      const newDepth = parseInt(amount, 10);
+      const ttlDays = stamp.duration.toDays();
+      const currentDepth = stamp.depth;
+      const maxHalvings = Math.floor(Math.log2(ttlDays)) + currentDepth;
+      const isDepthInvalid = newDepth > maxHalvings || newDepth <= currentDepth;
+      if (isDepthInvalid) {
+        enqueueSnackbar(`Invalid depth: ${newDepth} (${currentDepth} < new depth < ${maxHalvings})`, {
+          variant: "error"
+        });
+        return;
+      }
+      if (ttlDays <= 2) {
+        enqueueSnackbar(`TTL: ${ttlDays} <= 2 days, cannot dilute stamp (min. TTL is 1 day)`, {
+          variant: "warning"
+        });
+        return;
+      }
       try {
-        await bee.diluteBatch(stamp, parseInt(amount, 10));
+        await bee.diluteBatch(stamp.batchID, newDepth);
         enqueueSnackbar(`Successfully diluted stamp, your changes will appear soon`, { variant: "success" });
       } catch (error) {
         enqueueSnackbar(`Failed to dilute stamp: ${error || "Unknown reason"}`, { variant: "error" });
       }
+      return;
     }
+    enqueueSnackbar(`Failed to extend stamp, unknown operation: ${type}`, { variant: "error" });
   };
   const handleChange = (event) => {
     setAmount(event.target.value);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { mb: 2, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { variant: "contained", onClick: handleClickOpen, startIcon: icon, children: type }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { className: classes2.buttonSelected, variant: "contained", onClick: handleClickOpen, startIcon: icon, children: type }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Dialog, { open: open2, onClose: handleClose, "aria-labelledby": "form-dialog-title", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { id: "form-dialog-title", children: label }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -74581,7 +74671,18 @@ function StampExtensionModal({ type, icon, bee, stamp }) {
       ) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogActions, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick: handleClose, color: "primary", children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { disabled: amount === "", onClick: handleAction, color: "primary", children: type })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button$1,
+          {
+            disabled: amount === "",
+            onClick: async () => {
+              await handleAction();
+              handleClose();
+            },
+            color: "primary",
+            children: type
+          }
+        )
       ] })
     ] })
   ] });
@@ -74769,6 +74870,102 @@ function packageFile(file, pathOverwrite) {
     bytes: file.bytes
   };
 }
+function getExtensionFromName(name) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  const hasExtension = name.includes(".") && ext && ext !== name;
+  return hasExtension ? ext : "";
+}
+const EXT_TO_MIME = {
+  mp4: "video/mp4",
+  webm: "video/webm",
+  ogv: "video/ogg",
+  mp3: "audio/mpeg",
+  m4a: "audio/mp4",
+  aac: "audio/aac",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  avif: "image/avif",
+  svg: "image/svg+xml",
+  pdf: "application/pdf",
+  txt: "text/plain",
+  md: "text/markdown",
+  json: "application/json",
+  csv: "text/csv",
+  html: "text/html",
+  htm: "text/html",
+  ico: "image/vnd.microsoft.icon"
+};
+function guessMime(name, mtdt) {
+  const md = mtdt?.mimeType || mtdt?.mime || mtdt?.["content-type"];
+  const ext = getExtensionFromName(name);
+  if (md) return { mime: md, ext };
+  const mime = EXT_TO_MIME[ext] || "application/octet-stream";
+  return { mime, ext };
+}
+const VIDEO_HTML = (u2, title) => `<html><head><meta charset="utf-8"/><title>${title}</title></head><body style="margin:0;background:#000">
+    <video controls autoplay style="width:100%;height:100%" src="${u2}"></video>
+  </body></html>`;
+const AUDIO_HTML = (u2, title) => `<html><head><meta charset="utf-8"/><title>${title}</title></head><body>
+    <audio controls autoplay style="width:100%" src="${u2}"></audio>
+  </body></html>`;
+const IMAGE_HTML = (u2, title) => `<html><head><meta charset="utf-8"/><title>${title}</title></head><body style="margin:0;background:#111;display:grid;place-items:center;min-height:100vh">
+    <img style="max-width:100%;max-height:100vh" src="${u2}" />
+  </body></html>`;
+const VIEWERS = [
+  {
+    name: "video",
+    test: (m) => m.startsWith("video/"),
+    render: (w, url, mime, name) => {
+      w.document.write(VIDEO_HTML(url, name));
+      w.document.title = name;
+    }
+  },
+  {
+    name: "audio",
+    test: (m) => m.startsWith("audio/"),
+    render: (w, url, mime, name) => {
+      w.document.write(AUDIO_HTML(url, name));
+      w.document.title = name;
+    }
+  },
+  {
+    name: "image",
+    test: (m) => m.startsWith("image/"),
+    render: (w, url, mime, name) => {
+      w.document.write(IMAGE_HTML(url, name));
+      w.document.title = name;
+    }
+  },
+  {
+    name: "pdf",
+    test: (m) => m === "application/pdf",
+    render: (w, url, mime, name) => {
+      w.document.title = name;
+      w.location.href = url;
+    }
+  },
+  {
+    name: "html",
+    test: (m) => m === "text/html",
+    render: (w, url, mime, name) => {
+      w.document.title = name;
+      w.location.href = url;
+    }
+  },
+  {
+    name: "text-like",
+    test: (m) => m.startsWith("text/") || m === "application/json" || m === "text/markdown",
+    render: (w, url, mime, name) => {
+      w.document.title = name;
+      w.location.href = url;
+    }
+  }
+];
 function Capacity({ width: width2, usage }) {
   const integerUsage = Math.round(usage * 100);
   const used = integerUsage + "%";
@@ -74789,6 +74986,7 @@ function PostageStamp({ stamp, shorten }) {
 }
 function StampsTable({ postageStamps }) {
   const { beeApi } = React.useContext(Context$8);
+  const { status } = React.useContext(Context$7);
   if (!postageStamps || !beeApi) {
     return null;
   }
@@ -74802,8 +75000,8 @@ function StampsTable({ postageStamps }) {
           ExpandableListItem,
           {
             label: "Capacity",
-            value: `${getHumanReadableFileSize(2 ** stamp.depth * 4096 * stamp.usage)} / ${getHumanReadableFileSize(
-              2 ** stamp.depth * 4096
+            value: `${getHumanReadableFileSize(stamp.size.toBytes() - stamp.remainingSize.toBytes())} / ${getHumanReadableFileSize(
+              stamp.size.toBytes()
             )}`
           }
         ),
@@ -74817,19 +75015,21 @@ function StampsTable({ postageStamps }) {
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             StampExtensionModal,
             {
-              type: "Topup",
+              type: StampExtensionType.Topup,
               icon: /* @__PURE__ */ jsxRuntimeExports.jsx(TimerFlashFill, { size: "1rem" }),
               bee: beeApi,
-              stamp: stamp.batchID
+              stamp,
+              status: status.all
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             StampExtensionModal,
             {
-              type: "Dilute",
+              type: StampExtensionType.Dilute,
               icon: /* @__PURE__ */ jsxRuntimeExports.jsx(TimerFlashLine, { size: "1rem" }),
               bee: beeApi,
-              stamp: stamp.batchID
+              stamp,
+              status: status.all
             }
           )
         ] })
@@ -75192,7 +75392,7 @@ function WalletInfoCard() {
       4
     )} xBZZ | ${walletBalance.nativeTokenBalance.toSignificantDigits(4)} xDAI`;
   }
-  if (nodeInfo?.beeMode && ["light", "full", "dev"].includes(nodeInfo.beeMode)) {
+  if (nodeInfo?.beeMode && [BeeModes.LIGHT, BeeModes.FULL, BeeModes.DEV].includes(nodeInfo.beeMode)) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Card$1,
       {
@@ -75349,6 +75549,7 @@ function SwarmSelect({
           value,
           className: classes2.select,
           displayEmpty: true,
+          onChange,
           renderValue: (value2) => value2 ? renderValue(value2) : placeholder,
           MenuProps: { MenuListProps: { disablePadding: true }, PaperProps: { square: true } },
           children: options.map((x, i2) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem$1, { value: x.value, className: classes2.option, children: x.label }, i2))
@@ -75385,6 +75586,7 @@ const initialValues$5 = {
 function CreateNewFeed() {
   const { beeApi } = React.useContext(Context$8);
   const { identities, setIdentities } = React.useContext(Context$6);
+  const [identityType, setIdentityType] = React.useState(IdentityType.PrivateKey);
   const [loading, setLoading] = React.useState(false);
   const { enqueueSnackbar } = useSnackbar();
   const navigate = useNavigate();
@@ -75395,10 +75597,19 @@ function CreateNewFeed() {
       setLoading(false);
       return;
     }
-    const wallet = generateWallet();
-    const stamps = await beeApi.getPostageBatches();
+    let stamps = [];
+    let wallet;
+    try {
+      wallet = generateWallet();
+      stamps = (await beeApi.getPostageBatches()).filter((s2) => s2.usable);
+    } catch (err) {
+      console.log(err);
+      enqueueSnackbar(/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Error during wallet generation or postage stamp retrieval!" }), { variant: "error" });
+      setLoading(false);
+      return;
+    }
     if (!stamps || !stamps.length) {
-      enqueueSnackbar(/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "No stamp available" }), { variant: "error" });
+      enqueueSnackbar(/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "No usable stamp available" }), { variant: "error" });
       setLoading(false);
       return;
     }
@@ -75407,15 +75618,25 @@ function CreateNewFeed() {
       setLoading(false);
       return;
     }
-    const identity2 = await convertWalletToIdentity(wallet, values2.type, values2.identityName, values2.password);
-    persistIdentity(identities, identity2);
-    setIdentities(identities);
-    navigate(ROUTES.ACCOUNT_FEEDS);
-    setLoading(false);
+    try {
+      const identity2 = await convertWalletToIdentity(wallet, values2.type, values2.identityName, values2.password);
+      persistIdentity(identities, identity2);
+      setIdentities(identities);
+      navigate(ROUTES.ACCOUNT_FEEDS);
+    } catch (err) {
+      console.log(err);
+      enqueueSnackbar(/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Error identity creation!" }), { variant: "error" });
+    } finally {
+      setLoading(false);
+    }
   }
   function cancel() {
     navigate(-1);
   }
+  function onIdentityTypeChange(event) {
+    const type = event.target.value;
+    setIdentityType(type);
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(HistoryHeader, { children: "Create new feed" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DocumentationText, { children: [
@@ -75440,10 +75661,13 @@ function CreateNewFeed() {
         {
           formik: true,
           name: "type",
+          label: "type",
+          value: identityType,
           options: [
             { label: "Keypair Only", value: IdentityType.PrivateKey },
             { label: "Password Protected", value: IdentityType.V3 }
-          ]
+          ],
+          onChange: onIdentityTypeChange
         }
       ) }),
       values2.type === IdentityType.V3 && /* @__PURE__ */ jsxRuntimeExports.jsx(SwarmTextInput, { name: "password", label: "Password", password: true, formik: true }),
@@ -78404,8 +78628,8 @@ function UpdateFeed() {
   const { stamps, refresh } = React.useContext(Context$5);
   const { status } = React.useContext(Context$7);
   const { hash: hash2 } = useParams();
-  const [selectedStamp, setSelectedStamp] = React.useState(null);
-  const [selectedIdentity, setSelectedIdentity] = React.useState(null);
+  const [selectedStamp, setSelectedStamp] = React.useState(stamps ? stamps[0]?.batchID.toHex() : null);
+  const [selectedIdentity, setSelectedIdentity] = React.useState(identities[0] ?? null);
   const [loading, setLoading] = React.useState(false);
   const { enqueueSnackbar } = useSnackbar();
   const [showPasswordPrompt, setShowPasswordPrompt] = React.useState(false);
@@ -78477,18 +78701,23 @@ function UpdateFeed() {
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(HistoryHeader, { children: "Update feed" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { container: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { container: true, children: identities && identities.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       SwarmSelect,
       {
+        value: selectedIdentity?.uuid ?? "",
         options: identities.map((x) => ({ value: x.uuid, label: `${x.name} Website` })),
         onChange: onFeedChange,
         label: "Feed"
       }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { container: true, children: stamps ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { children: "You need to create an identiy first to be able to update its feed." }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { container: true, children: stamps && stamps.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       SwarmSelect,
       {
-        options: stamps.map((x) => ({ value: x.batchID.toHex(), label: x.batchID.toHex().slice(0, 8) })),
+        value: selectedStamp ?? "",
+        options: stamps.map((x) => ({
+          value: x.batchID.toHex(),
+          label: x.label ? x.batchID.toHex().slice(0, 8) + ` (${x.label})` : x.batchID.toHex().slice(0, 8)
+        })),
         onChange: onStampChange,
         label: "Stamp"
       }
@@ -78508,128 +78737,6 @@ function UpdateFeed() {
     ] })
   ] });
 }
-const Ctx = React.createContext(void 0);
-function SearchProvider({ children }) {
-  const [query, _setQuery] = React.useState("");
-  const [scope, setScope] = React.useState("all");
-  const [includeActive, setIncludeActive] = React.useState(true);
-  const [includeTrashed, setIncludeTrashed] = React.useState(true);
-  const preSearchState = React.useRef(null);
-  const inSearch = React.useRef(false);
-  const setQuery = React.useCallback(
-    (q) => {
-      const trimmed = q.trim();
-      if (!inSearch.current && trimmed.length > 0) {
-        preSearchState.current = { scope, includeActive, includeTrashed };
-        inSearch.current = true;
-      }
-      if (inSearch.current && trimmed.length === 0) {
-        const prev2 = preSearchState.current;
-        if (prev2) {
-          setScope(prev2.scope);
-          setIncludeActive(prev2.includeActive);
-          setIncludeTrashed(prev2.includeTrashed);
-        }
-        preSearchState.current = null;
-        inSearch.current = false;
-      }
-      _setQuery(q);
-    },
-    [scope, includeActive, includeTrashed]
-  );
-  const clear = React.useCallback(() => {
-    setQuery("");
-  }, [setQuery]);
-  const value = React.useMemo(
-    () => ({
-      query,
-      scope,
-      includeActive,
-      includeTrashed,
-      setQuery,
-      clear,
-      setScope,
-      setIncludeActive,
-      setIncludeTrashed
-    }),
-    [query, scope, includeActive, includeTrashed, clear, setQuery]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Ctx.Provider, { value, children });
-}
-function useSearch() {
-  const v = React.useContext(Ctx);
-  if (!v) throw new Error("useFMSearch must be used within SearchProvider");
-  return v;
-}
-var FileTransferType = /* @__PURE__ */ ((FileTransferType2) => {
-  FileTransferType2["Upload"] = "upload";
-  FileTransferType2["Download"] = "download";
-  FileTransferType2["Update"] = "update";
-  return FileTransferType2;
-})(FileTransferType || {});
-var TransferStatus = /* @__PURE__ */ ((TransferStatus2) => {
-  TransferStatus2["Uploading"] = "uploading";
-  TransferStatus2["Downloading"] = "downloading";
-  TransferStatus2["Done"] = "done";
-  TransferStatus2["Error"] = "error";
-  TransferStatus2["Queued"] = "queued";
-  TransferStatus2["Cancelled"] = "cancelled";
-  return TransferStatus2;
-})(TransferStatus || {});
-var TransferBarColor = /* @__PURE__ */ ((TransferBarColor2) => {
-  TransferBarColor2["Upload"] = "#22c55e";
-  TransferBarColor2["Update"] = "#f59e0b";
-  TransferBarColor2["Download"] = "#3b82f6";
-  return TransferBarColor2;
-})(TransferBarColor || {});
-var ViewType = /* @__PURE__ */ ((ViewType2) => {
-  ViewType2["File"] = "file";
-  ViewType2["Trash"] = "trash";
-  ViewType2["Expired"] = "expired";
-  return ViewType2;
-})(ViewType || {});
-var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
-  ActionTag2["Trashed"] = "trashed";
-  ActionTag2["Recovered"] = "recovered";
-  ActionTag2["Restored"] = "restored";
-  return ActionTag2;
-})(ActionTag || {});
-var FileAction = /* @__PURE__ */ ((FileAction2) => {
-  FileAction2["Trash"] = "trash";
-  FileAction2["Forget"] = "forget";
-  FileAction2["Destroy"] = "destroy";
-  return FileAction2;
-})(FileAction || {});
-var DownloadState = /* @__PURE__ */ ((DownloadState2) => {
-  DownloadState2["InProgress"] = "in-progress";
-  DownloadState2["Cancelled"] = "cancelled";
-  DownloadState2["Error"] = "error";
-  return DownloadState2;
-})(DownloadState || {});
-const ViewContext = React.createContext(void 0);
-function ViewProvider({ children }) {
-  const [view, setView] = React.useState(ViewType.File);
-  const [actualItemView, setActualItemView] = React.useState(void 0);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    ViewContext.Provider,
-    {
-      value: {
-        view,
-        setView,
-        actualItemView,
-        setActualItemView
-      },
-      children
-    }
-  );
-}
-function useView() {
-  const context = React.useContext(ViewContext);
-  if (!context) {
-    throw new Error("useView must be used within a ViewProvider");
-  }
-  return context;
-}
 function isRecord(value) {
   return Types.isStrictlyObject(value) && Object.values(value).every((v) => typeof v === "string");
 }
@@ -78900,10 +79007,10 @@ P?.name || "";
 const bytesEndpoint = "bytes";
 async function processDownload(bee, resources, options, requestOptions) {
   if (O$1) {
-    const { downloadNode } = await Promise.resolve().then(() => require("./download.node-C_IiKmHA.js"));
+    const { downloadNode } = await Promise.resolve().then(() => require("./download.node-CzhxALxQ.js"));
     return await downloadNode(bee, Object.values(resources), options, requestOptions);
   }
-  const { downloadBrowser } = await Promise.resolve().then(() => require("./download.browser-Bp7NWws0.js"));
+  const { downloadBrowser } = await Promise.resolve().then(() => require("./download.browser-BhXh2eCY.js"));
   return await downloadBrowser(Object.values(resources), bee.url, bytesEndpoint, options, requestOptions);
 }
 class EventEmitterBase {
@@ -78960,7 +79067,7 @@ async function processUpload(bee, driveInfo, fileOptions, uploadOptions, request
     return processedOptions.file;
   }
   if (O$1) {
-    const { processUploadNode } = await Promise.resolve().then(() => require("./upload.node-DUSvlJwc.js"));
+    const { processUploadNode } = await Promise.resolve().then(() => require("./upload.node-DRiLZjhW.js"));
     const nodeOptions = processedOptions.options;
     return processUploadNode(bee, driveInfo, nodeOptions, uploadOptions, requestOptions);
   }
@@ -79744,6 +79851,51 @@ const FILE_MANAGER_EVENTS = {
 const POLLING_TIMEOUT_MS = 9e4;
 const UPLOAD_POLLING_TIMEOUT_MS = 1e4;
 const POLLING_INTERVAL_MS = 2e3;
+var FileTransferType = /* @__PURE__ */ ((FileTransferType2) => {
+  FileTransferType2["Upload"] = "upload";
+  FileTransferType2["Download"] = "download";
+  FileTransferType2["Update"] = "update";
+  return FileTransferType2;
+})(FileTransferType || {});
+var TransferStatus = /* @__PURE__ */ ((TransferStatus2) => {
+  TransferStatus2["Uploading"] = "uploading";
+  TransferStatus2["Downloading"] = "downloading";
+  TransferStatus2["Done"] = "done";
+  TransferStatus2["Error"] = "error";
+  TransferStatus2["Queued"] = "queued";
+  TransferStatus2["Cancelled"] = "cancelled";
+  return TransferStatus2;
+})(TransferStatus || {});
+var TransferBarColor = /* @__PURE__ */ ((TransferBarColor2) => {
+  TransferBarColor2["Upload"] = "#22c55e";
+  TransferBarColor2["Update"] = "#f59e0b";
+  TransferBarColor2["Download"] = "#3b82f6";
+  return TransferBarColor2;
+})(TransferBarColor || {});
+var ViewType = /* @__PURE__ */ ((ViewType2) => {
+  ViewType2["File"] = "file";
+  ViewType2["Trash"] = "trash";
+  ViewType2["Expired"] = "expired";
+  return ViewType2;
+})(ViewType || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["Trashed"] = "trashed";
+  ActionTag2["Recovered"] = "recovered";
+  ActionTag2["Restored"] = "restored";
+  return ActionTag2;
+})(ActionTag || {});
+var FileAction = /* @__PURE__ */ ((FileAction2) => {
+  FileAction2["Trash"] = "trash";
+  FileAction2["Forget"] = "forget";
+  FileAction2["Destroy"] = "destroy";
+  return FileAction2;
+})(FileAction || {});
+var DownloadState = /* @__PURE__ */ ((DownloadState2) => {
+  DownloadState2["InProgress"] = "in-progress";
+  DownloadState2["Cancelled"] = "cancelled";
+  DownloadState2["Error"] = "error";
+  return DownloadState2;
+})(DownloadState || {});
 const getUsableStamps = async (bee) => {
   try {
     return (await bee.getPostageBatches()).filter((s2) => s2.usable).sort((a2, b2) => (a2.label || "").localeCompare(b2.label || ""));
@@ -81362,7 +81514,12 @@ function AdminStatusBar({
   const isBusy = loading || isUpgrading || isCreationInProgress;
   const blurCls = isBusy ? " is-loading" : "";
   const statusVerb = isCreationInProgress ? "Creating" : "Loading";
-  const statusText = statusVerb + "  admin drive, please do not reload";
+  const statusText = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    statusVerb,
+    " admin drive — please do not reload the page.",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    "This may take a few minutes."
+  ] });
   const renderModalsAndOverlays = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       isUpgradeDriveModalOpen && actualStamp && adminDrive && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -81446,6 +81603,83 @@ function ErrorModal({ label, onClick }) {
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-error-modal-button-container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button2, { variant: "primary", label: "OK", width: 100, onClick }) })
   ] }) });
 }
+const Ctx = React.createContext(void 0);
+function SearchProvider({ children }) {
+  const [query, _setQuery] = React.useState("");
+  const [scope, setScope] = React.useState("all");
+  const [includeActive, setIncludeActive] = React.useState(true);
+  const [includeTrashed, setIncludeTrashed] = React.useState(true);
+  const preSearchState = React.useRef(null);
+  const inSearch = React.useRef(false);
+  const setQuery = React.useCallback(
+    (q) => {
+      const trimmed = q.trim();
+      if (!inSearch.current && trimmed.length > 0) {
+        preSearchState.current = { scope, includeActive, includeTrashed };
+        inSearch.current = true;
+      }
+      if (inSearch.current && trimmed.length === 0) {
+        const prev2 = preSearchState.current;
+        if (prev2) {
+          setScope(prev2.scope);
+          setIncludeActive(prev2.includeActive);
+          setIncludeTrashed(prev2.includeTrashed);
+        }
+        preSearchState.current = null;
+        inSearch.current = false;
+      }
+      _setQuery(q);
+    },
+    [scope, includeActive, includeTrashed]
+  );
+  const clear = React.useCallback(() => {
+    setQuery("");
+  }, [setQuery]);
+  const value = React.useMemo(
+    () => ({
+      query,
+      scope,
+      includeActive,
+      includeTrashed,
+      setQuery,
+      clear,
+      setScope,
+      setIncludeActive,
+      setIncludeTrashed
+    }),
+    [query, scope, includeActive, includeTrashed, clear, setQuery]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Ctx.Provider, { value, children });
+}
+function useSearch() {
+  const v = React.useContext(Ctx);
+  if (!v) throw new Error("useFMSearch must be used within SearchProvider");
+  return v;
+}
+const ViewContext = React.createContext(void 0);
+function ViewProvider({ children }) {
+  const [view, setView] = React.useState(ViewType.File);
+  const [actualItemView, setActualItemView] = React.useState(void 0);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ViewContext.Provider,
+    {
+      value: {
+        view,
+        setView,
+        actualItemView,
+        setActualItemView
+      },
+      children
+    }
+  );
+}
+function useView() {
+  const context = React.useContext(ViewContext);
+  if (!context) {
+    throw new Error("useView must be used within a ViewProvider");
+  }
+  return context;
+}
 class AbortManager {
   controllers = /* @__PURE__ */ new Map();
   create(key) {
@@ -81579,101 +81813,6 @@ async function performBulkFileOperation({
 const isPickerSupported = () => typeof window.showSaveFilePicker === "function";
 const isDirectoryPickerSupported = () => typeof window.showDirectoryPicker === "function";
 const isElementPickerSupported = (el) => typeof el.showPicker === "function";
-const EXT_TO_MIME = {
-  mp4: "video/mp4",
-  webm: "video/webm",
-  ogv: "video/ogg",
-  mp3: "audio/mpeg",
-  m4a: "audio/mp4",
-  aac: "audio/aac",
-  wav: "audio/wav",
-  ogg: "audio/ogg",
-  png: "image/png",
-  jpg: "image/jpeg",
-  jpeg: "image/jpeg",
-  gif: "image/gif",
-  webp: "image/webp",
-  avif: "image/avif",
-  svg: "image/svg+xml",
-  pdf: "application/pdf",
-  txt: "text/plain",
-  md: "text/markdown",
-  json: "application/json",
-  csv: "text/csv",
-  html: "text/html",
-  htm: "text/html"
-};
-function getExtensionFromName(name) {
-  const ext = name.split(".").pop()?.toLowerCase() || "";
-  const hasExtension = name.includes(".") && ext && ext !== name;
-  return hasExtension ? ext : "";
-}
-function guessMime(name, mtdt) {
-  const md = mtdt?.mimeType || mtdt?.mime || mtdt?.["content-type"];
-  const ext = getExtensionFromName(name);
-  if (md) return { mime: md, ext };
-  const mime = EXT_TO_MIME[ext] || "application/octet-stream";
-  return { mime, ext };
-}
-const VIDEO_HTML = (u2, title) => `<html><head><meta charset="utf-8"/><title>${title}</title></head><body style="margin:0;background:#000">
-    <video controls autoplay style="width:100%;height:100%" src="${u2}"></video>
-  </body></html>`;
-const AUDIO_HTML = (u2, title) => `<html><head><meta charset="utf-8"/><title>${title}</title></head><body>
-    <audio controls autoplay style="width:100%" src="${u2}"></audio>
-  </body></html>`;
-const IMAGE_HTML = (u2, title) => `<html><head><meta charset="utf-8"/><title>${title}</title></head><body style="margin:0;background:#111;display:grid;place-items:center;min-height:100vh">
-    <img style="max-width:100%;max-height:100vh" src="${u2}" />
-  </body></html>`;
-const VIEWERS = [
-  {
-    name: "video",
-    test: (m) => m.startsWith("video/"),
-    render: (w, url, mime, name) => {
-      w.document.write(VIDEO_HTML(url, name));
-      w.document.title = name;
-    }
-  },
-  {
-    name: "audio",
-    test: (m) => m.startsWith("audio/"),
-    render: (w, url, mime, name) => {
-      w.document.write(AUDIO_HTML(url, name));
-      w.document.title = name;
-    }
-  },
-  {
-    name: "image",
-    test: (m) => m.startsWith("image/"),
-    render: (w, url, mime, name) => {
-      w.document.write(IMAGE_HTML(url, name));
-      w.document.title = name;
-    }
-  },
-  {
-    name: "pdf",
-    test: (m) => m === "application/pdf",
-    render: (w, url, mime, name) => {
-      w.document.title = name;
-      w.location.href = url;
-    }
-  },
-  {
-    name: "html",
-    test: (m) => m === "text/html",
-    render: (w, url, mime, name) => {
-      w.document.title = name;
-      w.location.href = url;
-    }
-  },
-  {
-    name: "text-like",
-    test: (m) => m.startsWith("text/") || m === "application/json" || m === "text/markdown",
-    render: (w, url, mime, name) => {
-      w.document.title = name;
-      w.location.href = url;
-    }
-  }
-];
 const DefaultDownloadFolder = "downloads";
 const downloadAborts = new AbortManager();
 function createDownloadAbort(id2) {
@@ -82254,7 +82393,7 @@ function useDragAndDrop({ onFilesDropped }) {
 }
 function useFileFiltering(props) {
   const { files, currentDrive, view, isSearchMode, query, scope, includeActive, includeTrashed } = props;
-  const q = query.trim().toLowerCase();
+  const q = query.trim().toLowerCase().normalize("NFC");
   const statusIncluded = React.useCallback(
     (fi) => {
       const trashed = isTrashed(fi);
@@ -82267,9 +82406,9 @@ function useFileFiltering(props) {
   const matchesQuery = React.useCallback(
     (fi) => {
       if (!q) return true;
-      const name = fi.name.toLowerCase();
-      const mime = (fi.customMetadata?.mime || "").toLowerCase();
-      const topic = String(fi.topic ?? "").toLowerCase();
+      const name = fi.name.toLowerCase().normalize("NFC");
+      const mime = (fi.customMetadata?.mime || "").toLowerCase().normalize("NFC");
+      const topic = String(fi.topic ?? "").toLowerCase().normalize("NFC");
       return name.includes(q) || mime.includes(q) || topic.includes(q);
     },
     [q]
@@ -83884,11 +84023,13 @@ function ExpiringNotificationModalItem({
 }
 const EXPIRING_ITEMS_PAGE_SIZE = 3;
 function ExpiringNotificationModal({
+  bee,
   stamps,
   drives,
   files,
   onCancelClick,
-  setErrorMessage
+  setErrorMessage,
+  setShowError
 }) {
   const [showUpgradeDriveModal, setShowUpgradeDriveModal] = React.useState(false);
   const [actualStamp, setActualStamp] = React.useState(void 0);
@@ -83927,7 +84068,15 @@ function ExpiringNotificationModal({
             files,
             currentPage,
             index,
-            onUpgradeClick: (stamp2, drive) => {
+            onUpgradeClick: async (stamp2, drive) => {
+              const isStampValid = await validateStampStillExists(bee, stamp2.batchID);
+              if (!isStampValid) {
+                setErrorMessage?.(
+                  `Drive ${drive.name} has expired. Please clear the browser cache and reload the page.`
+                );
+                setShowError(true);
+                return;
+              }
               setActualStamp(stamp2);
               setActualDrive(drive);
               setShowUpgradeDriveModal(true);
@@ -83975,7 +84124,7 @@ function NotificationBar({ setErrorMessage }) {
   const [stampsToExpire, setStampsToExpire] = React.useState([]);
   const [drivesToExpire, setDrivesToExpire] = React.useState([]);
   const { beeApi } = React.useContext(Context$8);
-  const { drives, files, adminDrive } = React.useContext(Context$3);
+  const { drives, files, adminDrive, setShowError } = React.useContext(Context$3);
   const showExpiration = stampsToExpire.length > 0;
   React.useEffect(() => {
     let isMounted = true;
@@ -84037,16 +84186,18 @@ function NotificationBar({ setErrorMessage }) {
       " expiring soon ",
       /* @__PURE__ */ jsxRuntimeExports.jsx(UpIcon, { size: "16px" })
     ] }),
-    showExpiringModal && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    showExpiringModal && beeApi && /* @__PURE__ */ jsxRuntimeExports.jsx(
       ExpiringNotificationModal,
       {
+        bee: beeApi,
         stamps: stampsToExpire,
         drives: drivesToExpire,
         files,
         onCancelClick: () => {
           setShowExpiringModal(false);
         },
-        setErrorMessage
+        setErrorMessage,
+        setShowError
       }
     )
   ] });
@@ -86366,7 +86517,8 @@ function ErrorModalBlock$1({
   if (!showError) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorModal, { label, onClick: onOk });
+  const modalRoot = document.querySelector(".fm-main") || document.body;
+  return ReactDOM.createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(ErrorModal, { label, onClick: onOk }), modalRoot);
 }
 const extractFilesFromClipboardEvent = (e2) => {
   const out = [];
@@ -86633,8 +86785,9 @@ function FileBrowser({ errorMessage, setErrorMessage }) {
       if (rafIdRef.current) {
         cancelAnimationFrame(rafIdRef.current);
       }
+      setShowError(false);
     };
-  }, []);
+  }, [setShowError]);
   React.useEffect(() => {
     let title = currentDrive?.name || "";
     if (isSearchMode) {
@@ -89200,7 +89353,11 @@ function Sidebar({ setErrorMessage, loading }) {
         );
       }) })
     ] }),
-    isDriveCreationInProgress && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-sidebar-drive-creation", children: "Creating drive, please do not reload" })
+    isDriveCreationInProgress && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fm-sidebar-drive-creation", children: [
+      "Creating drive — please do not reload the page.",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+      "This may take a few minutes."
+    ] })
   ] });
 }
 var SupportedPlatforms = /* @__PURE__ */ ((SupportedPlatforms2) => {
@@ -89275,6 +89432,9 @@ function InitializationErrorBlock({ onOk }) {
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "flex", justifyContent: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { minWidth: "120px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button2, { label: "OK", variant: "primary", disabled: false, onClick: onOk }) }) })
   ] }) });
 }
+function UltraLightNodeErrorBlock() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-main", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-loading", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-loading-title", children: "File Manager is not available with an Ultra-light node. Please upgrade to a Light node to continue." }) }) });
+}
 function ResetModalBlock({ cacheHelpUrl, onConfirm }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-main", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     ConfirmModal,
@@ -89312,6 +89472,17 @@ function LoadingBlock() {
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-loading-subtitle", children: "Please wait a few seconds" })
   ] }) });
 }
+function ChainSyncingBlock() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-main", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fm-loading", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-spinner", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fm-loading-title", children: "Bee node is syncing…" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fm-loading-subtitle", children: [
+      "Your Bee node is still syncing the postage batch state from the chain.",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+      "File Manager will be available once the sync is complete."
+    ] })
+  ] }) });
+}
 function ErrorModalBlock({ onClick, label }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorModal, { label, onClick });
 }
@@ -89362,7 +89533,7 @@ function FileManagerPage() {
   const [isCreationInProgress, setIsCreationInProgress] = React.useState(false);
   const [connectionErrorDismissed, setConnectionErrorDismissed] = React.useState(false);
   const [cacheHelpUrl, setCacheHelpUrl] = React.useState(cacheClearUrls[BrowserPlatform.Chrome]);
-  const { status } = React.useContext(Context$7);
+  const { status, chainState, nodeInfo } = React.useContext(Context$7);
   const { fm, initDone, shallReset, adminDrive, initializationError, notifyPkSaved } = React.useContext(Context$3);
   React.useEffect(() => {
     isMountedRef.current = true;
@@ -89389,15 +89560,19 @@ function FileManagerPage() {
     }
   }, [isConnectionError]);
   const pageState = React.useMemo(() => {
+    const isChainSyncing = chainState === null;
     if (!isBeeReady && !initDone) return "connecting";
+    if (nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT) return "ultra-light-node";
     if (!hasPk) return "no-pk";
     if (!initDone) return "loading";
     if (shallReset && !resetAcknowledged) return "reset";
     if (initializationError && !shallReset) return "init-error";
-    if (showAdminErrorModal) return "admin-error";
     const hasAdminStamp = Boolean(fm?.adminStamp);
     const hasAdminDrive = Boolean(adminDrive);
-    if (!hasAdminStamp && !hasAdminDrive && !isCreationInProgress) return "initial";
+    const setupIncomplete = !hasAdminStamp && !hasAdminDrive;
+    if (setupIncomplete && isChainSyncing) return "chain-syncing";
+    if (showAdminErrorModal) return "admin-error";
+    if (setupIncomplete && !isCreationInProgress) return "initial";
     return "ready";
   }, [
     isBeeReady,
@@ -89409,7 +89584,9 @@ function FileManagerPage() {
     showAdminErrorModal,
     fm,
     adminDrive,
-    isCreationInProgress
+    isCreationInProgress,
+    chainState,
+    nodeInfo?.beeMode
   ]);
   const handlePrivateKeySaved = React.useCallback(() => {
     if (!isMountedRef.current) return;
@@ -89419,9 +89596,15 @@ function FileManagerPage() {
   }, [fm, notifyPkSaved]);
   const loading = !fm?.adminStamp || !adminDrive;
   const isFormbricksActive = Boolean(fm && fm.adminStamp && adminDrive && !loading);
+  if (pageState === "ultra-light-node") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(UltraLightNodeErrorBlock, {});
+  }
   if (pageState === "connecting" || pageState === "loading") {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingBlock, {});
   }
+  if (pageState === "chain-syncing") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ChainSyncingBlock, {});
+  }
   if (pageState === "no-pk") {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(PrivateKeyModalBlock, { onSaved: handlePrivateKeySaved });
   }
@@ -89453,10 +89636,11 @@ function FileManagerPage() {
     );
   }
   if (pageState === "admin-error") {
+    const adminErrorLabel = chainState === null ? "Your Bee node is still syncing the postage batch state from the chain. Please wait for the sync to complete and try again." : errorMessage || "Error creating Admin Drive. Please try again. Possible causes include insufficient xDAI balance or a lost connection to the RPC.";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       ErrorModalBlock,
       {
-        label: errorMessage || "Error creating Admin Drive. Please try again. Possible causes include insufficient xDAI balance or a lost connection to the RPC.",
+        label: adminErrorLabel,
         onClick: () => {
           setAdminShowErrorModal(false);
           setErrorMessage("");
@@ -89543,11 +89727,17 @@ const useStyles$e = makeStyles()((theme2) => ({
   header: {
     backgroundColor: theme2.palette.background.paper,
     marginBottom: theme2.spacing(0.25),
-    borderLeft: `${theme2.spacing(0.25)}px solid rgba(0,0,0,0)`,
-    wordBreak: "break-word"
+    borderLeft: `${theme2.spacing(0.25)} solid rgba(0,0,0,0)`,
+    wordBreak: "break-word",
+    "&:hover": {
+      backgroundColor: theme2.palette.background.paper
+    },
+    "&:focus-within": {
+      backgroundColor: theme2.palette.background.paper
+    }
   },
   headerOpen: {
-    borderLeft: `${theme2.spacing(0.25)}px solid ${theme2.palette.primary.main}`
+    borderLeft: `${theme2.spacing(0.25)} solid ${theme2.palette.primary.main}`
   },
   copyValue: {
     cursor: "pointer",
@@ -89601,72 +89791,74 @@ function ExpandableListItemInput({
     setInputValue(newValue);
     if (onChange) onChange(newValue);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemButton, { className: `${classes2.header} ${open2 ? classes2.headerOpen : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { display: "flex", flexDirection: "column", width: "100%", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", width: "100%", children: [
-      label && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", className: classes2.unselectableLabel, component: "span", children: label }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { flex: 3, display: "flex", alignItems: "center", justifyContent: "flex-end", minWidth: 0, gap: 1, children: [
-        !open2 && value && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Typography,
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemButton, { className: `${classes2.header} ${open2 ? classes2.headerOpen : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { display: "flex", flexDirection: "column", width: "100%", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", width: "100%", children: [
+        label && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", className: classes2.unselectableLabel, component: "span", children: label }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { flex: 3, display: "flex", alignItems: "center", justifyContent: "flex-end", minWidth: 0, gap: 1, children: [
+          !open2 && value && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              variant: "body2",
+              component: "span",
+              sx: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+              children: value
+            }
+          ),
+          !expandedOnly && !locked2 && /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { size: "small", className: classes2.copyValue, onClick: toggleOpen, children: open2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { strokeWidth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Edit, { strokeWidth: 1 }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Collapse, { in: open2, timeout: "auto", unmountOnExit: true, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { display: "flex", alignItems: "center", width: "100%", minWidth: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          InputBase,
           {
-            variant: "body2",
-            component: "span",
-            sx: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-            children: value
+            value: inputValue,
+            placeholder,
+            onChange: handleChange,
+            fullWidth: true,
+            className: classes2.content,
+            autoFocus: true,
+            hidden: locked2,
+            inputProps: {
+              style: {
+                width: "100%",
+                minWidth: 220,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              maxLength: 512
+            }
           }
-        ),
-        !expandedOnly && !locked2 && /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { size: "small", className: classes2.copyValue, onClick: toggleOpen, children: open2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { strokeWidth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Edit, { strokeWidth: 1 }) })
+        ) }),
+        helperText && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandableListItemNote, { children: helperText })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: open2, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { display: "flex", flexDirection: "column", width: "100%", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { display: "flex", alignItems: "center", width: "100%", minWidth: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        InputBase,
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: open2, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mt: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandableListItemActions, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SwarmButton,
         {
-          value: inputValue,
-          placeholder,
-          onChange: handleChange,
-          fullWidth: true,
-          className: classes2.content,
-          autoFocus: true,
-          hidden: locked2,
-          inputProps: {
-            style: {
-              width: "100%",
-              minWidth: 220,
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            },
-            maxLength: 512
-          }
+          disabled: loading || inputValue === value || Boolean(confirmLabelDisabled) || inputValue === "" && value === void 0,
+          loading,
+          iconType: confirmIcon ?? Check,
+          onClick: () => {
+            onConfirm?.(inputValue.trim());
+          },
+          children: confirmLabel || "Save"
         }
-      ) }),
-      helperText && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandableListItemNote, { children: helperText }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mt: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandableListItemActions, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          SwarmButton,
-          {
-            disabled: loading || inputValue === value || Boolean(confirmLabelDisabled) || inputValue === "" && value === void 0,
-            loading,
-            iconType: confirmIcon ?? Check,
-            onClick: () => {
-              onConfirm?.(inputValue.trim());
-            },
-            children: confirmLabel || "Save"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          SwarmButton,
-          {
-            disabled: loading || inputValue === value || inputValue === "",
-            iconType: X,
-            onClick: () => setInputValue(value || ""),
-            cancel: true,
-            children: "Cancel"
-          }
-        )
-      ] }) })
-    ] }) })
-  ] }) });
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SwarmButton,
+        {
+          disabled: loading || inputValue === value || inputValue === "",
+          iconType: X,
+          onClick: () => setInputValue(value || ""),
+          cancel: true,
+          children: "Cancel"
+        }
+      )
+    ] }) }) })
+  ] });
 }
 function getPrettyDateString(date) {
   const string = date.toString();
@@ -89676,11 +89868,17 @@ const useStyles$d = makeStyles()((theme2) => ({
   header: {
     backgroundColor: theme2.palette.background.paper,
     marginBottom: theme2.spacing(0.25),
-    borderLeft: `${theme2.spacing(0.25)}px solid rgba(0,0,0,0)`,
-    wordBreak: "break-word"
+    borderLeft: `${theme2.spacing(0.25)} solid rgba(0,0,0,0)`,
+    wordBreak: "break-word",
+    "&:hover": {
+      backgroundColor: theme2.palette.background.paper
+    },
+    "&:focus-within": {
+      backgroundColor: theme2.palette.background.paper
+    }
   },
   headerOpen: {
-    borderLeft: `${theme2.spacing(0.25)}px solid ${theme2.palette.primary.main}`
+    borderLeft: `${theme2.spacing(0.25)} solid ${theme2.palette.primary.main}`
   },
   openLinkIcon: {
     cursor: "pointer",
@@ -92330,14 +92528,17 @@ function StripedWrapper({ children }) {
 function AssetIcon({ icon }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(StripedWrapper, { children: icon });
 }
-const getPreviewElement = (previewUri, metadata) => {
-  if (metadata?.isVideo) {
+const getPreviewElement = (previewUri, metadata, type) => {
+  const isVideoType = Boolean(type && /.*\.(mp4|webm|ogv)$/i.test(type));
+  const isAudioType = Boolean(type && /.*\.(mp3|ogg|oga|wav|webm|m4a|aac|flac)$/i.test(type));
+  const isImageType = Boolean(type && /.*\.(jpg|jpeg|png|gif|webp|svg|ico)$/i.test(type));
+  if (metadata?.isVideo || isVideoType) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(FitVideo, { src: previewUri, maxWidth: "250px", maxHeight: "175px" });
   }
-  if (metadata?.isAudio) {
+  if (metadata?.isAudio || isAudioType) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(FitAudio, { src: previewUri, maxWidth: "250px" });
   }
-  if (metadata?.isImage) {
+  if (metadata?.isImage || isImageType) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(FitImage, { maxWidth: "250px", maxHeight: "175px", alt: "Upload Preview", src: previewUri });
   }
   if (metadata?.isWebsite) {
@@ -92351,11 +92552,17 @@ const getPreviewElement = (previewUri, metadata) => {
 const getType = (metadata) => {
   if (metadata?.isWebsite) return "Website";
   if (metadata?.type === "folder") return "Folder";
-  return metadata?.type;
+  let metadataType = metadata?.type || "unknown";
+  let typeFromExtension;
+  if (metadataType === "unknown" && metadata?.name) {
+    const { mime } = guessMime(metadata.name);
+    typeFromExtension = mime === "application/octet-stream" ? "file" : mime;
+  }
+  return typeFromExtension || metadataType;
 };
 function AssetPreview({ metadata, previewUri }) {
-  const previewElement = React.useMemo(() => getPreviewElement(previewUri, metadata), [metadata, previewUri]);
   const type = React.useMemo(() => getType(metadata), [metadata]);
+  const previewElement = React.useMemo(() => getPreviewElement(previewUri, metadata, type), [metadata, type, previewUri]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { mb: 4, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { bgcolor: "background.paper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, direction: "row", children: [
       previewElement,
@@ -92500,13 +92707,13 @@ function Share() {
     const count = Object.keys(entries).length;
     const isVideo = Boolean(indexDocument2 && /.*\.(mp4|webm|ogv)$/i.test(indexDocument2));
     const isAudio = Boolean(indexDocument2 && /.*\.(mp3|ogg|oga|wav|webm|m4a|aac|flac)$/i.test(indexDocument2));
-    const isImage = Boolean(indexDocument2 && /.*\.(jpg|jpeg|png|gif|webp|svg)$/i.test(indexDocument2));
+    const isImage = Boolean(indexDocument2 && /.*\.(jpg|jpeg|png|gif|webp|svg|ico)$/i.test(indexDocument2));
     if (isImage || isVideo || isAudio) {
       setPreview(`${apiUrl}/bzz/${hash2}`);
     }
     setMetadata({
       hash: hash2,
-      type: count > 1 ? "folder" : "unknown",
+      type: count > 1 ? "folder" : getType(),
       name: indexDocument2 || hash2 || "",
       count,
       isWebsite: Boolean(indexDocument2 && /.*\.html?$/i.test(indexDocument2)),
@@ -92754,7 +92961,7 @@ function PostageStampAdvancedCreation({ onFinished }) {
     }
   }
   function getPrice(depth, amount) {
-    const hasInvalidInput = amount <= 0 || isNaN(depth) || depth < 17 || depth > 255;
+    const hasInvalidInput = amount <= 0 || isNaN(depth) || depth < MIN_STAMP_DEPTH || depth > MAX_STAMP_DEPTH;
     if (hasInvalidInput) {
       return "-";
     }
@@ -92807,32 +93014,13 @@ function PostageStampAdvancedCreation({ onFinished }) {
     }
     setAmountInput(validAmountInput);
   }
-  function validateDepthInput(depthInput2) {
-    let validDepthInput = "0";
-    if (!depthInput2) {
-      setDepthError("Required field");
-    } else {
-      const depth = new BigNumber(depthInput2);
-      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 = depthInput2;
-      }
-    }
-    setDepthInput(validDepthInput);
-  }
   function renderStampVolumesInfo() {
     const depth = parseInt(depthInput, 10);
-    if (depthError || isNaN(depth) || depth < 17 || depth > 255) {
+    if (depthError || isNaN(depth) || depth < MIN_STAMP_DEPTH || depth > MAX_STAMP_DEPTH) {
       return "-";
     }
     const theoreticalMaximumVolume = getHumanReadableFileSize(getStampTheoreticalBytes(depth));
-    const effectiveVolume = getHumanReadableFileSize(getStampEffectiveBytes(depth));
+    const effectiveVolume = getHumanReadableFileSize(getStampEffectiveBytes(depth, false, RedundancyLevel.OFF));
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, alignItems: "center", className: classes2.stampVolumeWrapper, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { children: [
         "Theoretical: ~",
@@ -92869,7 +93057,14 @@ function PostageStampAdvancedCreation({ onFinished }) {
       "."
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { mb: 2, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SwarmTextInput, { name: "depth", label: "Depth", onChange: (event) => validateDepthInput(event.target.value) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SwarmTextInput,
+        {
+          name: "depth",
+          label: "Depth",
+          onChange: (event) => validateDepthInput(event.target.value, setDepthError, setDepthInput)
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mt: 0.25, sx: { bgcolor: "#f6f6f6" }, p: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, justifyContent: "space-between", alignItems: "center", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { children: "Corresponding file size" }),
         renderStampVolumesInfo()
@@ -92890,7 +93085,7 @@ function PostageStampAdvancedCreation({ onFinished }) {
         SwarmSelect,
         {
           label: "Immutable",
-          value: "No",
+          value: immutable ? "Yes" : "No",
           onChange: (event) => setImmutable(event.target.value === "Yes"),
           options: [
             { value: "Yes", label: "Yes" },
@@ -93353,7 +93548,7 @@ const bzzABI = [
   }
 ];
 async function getNetworkChainId(url) {
-  const provider = newGnosisProvider(url);
+  const provider = newGnosisProviderForValidation(url);
   const network = await provider.getNetwork();
   return network.chainId;
 }
@@ -93396,7 +93591,7 @@ async function sendNativeTransaction(privateKey, to, value, jsonRpcProviderUrl,
   const feedData = await signer.provider.getFeeData();
   const gasPrice = externalGasPrice ?? DAI.fromWei(feedData.gasPrice?.toString() || "0");
   const transaction = await signer.sendTransaction({
-    to: to.toHex(),
+    to: to.toChecksum(),
     value: BigInt(value.toWeiString()),
     gasPrice: BigInt(gasPrice.toWeiString()),
     gasLimit: BigInt(21e3),
@@ -93418,7 +93613,7 @@ async function sendBzzTransaction(privateKey, to, value, jsonRpcProviderUrl) {
   const feeData = await signer.provider.getFeeData();
   const gasPrice = feeData.gasPrice || BigInt(0);
   const bzz = new Contract(BZZ_TOKEN_ADDRESS, bzzABI, signer);
-  const transaction = await bzz.transfer(to.toChecksum(), value, { gasPrice });
+  const transaction = await bzz.transfer(to.toChecksum(), value.toPLURBigInt(), { gasPrice });
   const receipt = await transaction.wait(1);
   if (!receipt) {
     throw new Error("Invalid receipt!");
@@ -121948,11 +122143,16 @@ function PostageStampStandardCreation({ onFinished }) {
   const { classes: classes2 } = useStyles$6();
   const { refresh } = React.useContext(Context$5);
   const { beeApi } = React.useContext(Context$8);
+  const { chainState } = React.useContext(Context$7);
   const [depthInput, setDepthInput] = React.useState(getDepthForSize(Size.fromGigabytes(4)));
   const [amountInput, setAmountInput] = React.useState(getAmountForDuration(Duration.fromDays(30), 26500, 5));
   const [labelInput, setLabelInput] = React.useState("");
   const [submitting, setSubmitting] = React.useState(false);
   const [buttonValue, setButtonValue] = React.useState(4);
+  const [depthError, setDepthError] = React.useState("");
+  const [sliderValue, setSliderValue] = React.useState(30);
+  const pricePerBlockDefault = 24e3;
+  const currentPrice = chainState?.currentPrice ?? pricePerBlockDefault;
   const getBatchValue = (value) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Button$1,
@@ -121972,15 +122172,15 @@ function PostageStampStandardCreation({ onFinished }) {
     if (typeof newValue !== "number") {
       return;
     }
-    const amountValue = getAmountForDuration(Duration.fromDays(newValue), 26500, 5);
+    const amountValue = getAmountForDuration(Duration.fromDays(newValue), currentPrice, 5);
     setAmountInput(amountValue);
+    setSliderValue(newValue);
   }
   const { enqueueSnackbar } = useSnackbar();
   function getTtl(amount) {
-    const pricePerBlock = 24e3;
     return `${secondsToTimeString(
-      getStampDuration(amount, pricePerBlock, 5).toSeconds()
-    )} (with price of ${pricePerBlock} PLUR per block)`;
+      getStampDuration(amount, currentPrice, 5).toSeconds()
+    )} (with price of ${currentPrice} PLUR per block)`;
   }
   function getPrice(depth, amount) {
     const price = getStampCost(depth, amount);
@@ -121995,14 +122195,14 @@ function PostageStampStandardCreation({ onFinished }) {
         return;
       }
       setSubmitting(true);
-      const amount = BigInt(amountInput);
-      const depth = depthInput;
-      const options = {
-        waitForUsable: false,
-        label: labelInput || void 0,
-        immutableFlag: true
-      };
-      await beeApi.createPostageBatch(amount.toString(), depth, options);
+      await beeApi.buyStorage(
+        Size.fromGigabytes(buttonValue),
+        Duration.fromDays(sliderValue),
+        { label: labelInput, immutableFlag: true },
+        void 0,
+        false,
+        RedundancyLevel.OFF
+      );
       await refresh();
       onFinished();
     } catch (e2) {
@@ -122013,8 +122213,8 @@ function PostageStampStandardCreation({ onFinished }) {
   }
   function handleBatchSize(gigabytes) {
     setButtonValue(gigabytes);
-    const capacity = getDepthForSize(Size.fromGigabytes(gigabytes));
-    setDepthInput(capacity);
+    const capacity = getDepthForSize(Size.fromGigabytes(gigabytes), false, RedundancyLevel.OFF);
+    validateDepthInput(String(capacity), setDepthError, (v) => setDepthInput(Number(v)));
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { children: [
@@ -122033,11 +122233,14 @@ function PostageStampStandardCreation({ onFinished }) {
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 1, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h2", children: "Batch name" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwarmTextInput, { name: "depth", label: "Label", onChange: (e2) => setLabelInput(e2.target.value) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 1, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h2", children: "Batch size" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
-      getBatchValue(4),
-      getBatchValue(32),
-      getBatchValue(256)
-    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { mb: 2, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+        getBatchValue(4),
+        getBatchValue(32),
+        getBatchValue(256)
+      ] }),
+      depthError && /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { children: depthError })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 1, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h2", children: "Data persistence" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Slider,
@@ -122057,7 +122260,11 @@ function PostageStampStandardCreation({ onFinished }) {
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { children: "Corresponding TTL (Time to live)" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { children: amountInput ? getTtl(amountInput) : "-" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { display: "flex", justifyContent: "right", mt: 0.5, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { style: { fontSize: "10px", color: "rgba(0, 0, 0, 0.26)" }, children: "Current price of 24000 PLUR per block" }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { display: "flex", justifyContent: "right", mt: 0.5, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { style: { fontSize: "10px", color: "rgba(0, 0, 0, 0.26)" }, children: [
+        "Current price of ",
+        currentPrice,
+        " PLUR per block"
+      ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { mb: 4, sx: { bgcolor: "#fcf2e8" }, p: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, justifyContent: "space-between", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { children: "Indicative Price" }),
@@ -122067,7 +122274,7 @@ function PostageStampStandardCreation({ onFinished }) {
       /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         SwarmButton,
         {
-          disabled: submitting || !depthInput || !amountInput,
+          disabled: submitting || !depthInput || Boolean(depthError) || !amountInput,
           onClick: submit,
           iconType: Check,
           loading: submitting,
@@ -159484,7 +159691,7 @@ function SideBar() {
       label: "File Manager",
       path: ROUTES.FILEMANAGER,
       icon: FileManagerIcon,
-      pathMatcherSubstring: "/filemanager/"
+      pathMatcherSubstring: "/filemanager"
     },
     {
       label: "Account",