diff --git a/package-lock.json b/package-lock.json
index 44f1a35f..b3c2989a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
"version": "0.24.1",
"license": "BSD-3-Clause",
"dependencies": {
- "@ethersphere/bee-js": "^6.6.0",
+ "@ethersphere/bee-js": "^6.7.0",
"@ethersphere/swarm-cid": "^0.1.0",
"@material-ui/core": "4.12.3",
"@material-ui/icons": "4.11.2",
@@ -2440,9 +2440,9 @@
}
},
"node_modules/@ethersphere/bee-js": {
- "version": "6.6.0",
- "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-6.6.0.tgz",
- "integrity": "sha512-f39yEbkCX7mnKSn0x9cV2TAlnMiemiJCiTVLhS6+g7nMbud1r269gzEHopElDaP5VJIsJy1uwD0VN4+HxIp3bg==",
+ "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",
@@ -22305,9 +22305,9 @@
}
},
"@ethersphere/bee-js": {
- "version": "6.6.0",
- "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-6.6.0.tgz",
- "integrity": "sha512-f39yEbkCX7mnKSn0x9cV2TAlnMiemiJCiTVLhS6+g7nMbud1r269gzEHopElDaP5VJIsJy1uwD0VN4+HxIp3bg==",
+ "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",
diff --git a/package.json b/package.json
index 2e1cdd2a..134b5f4c 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
"url": "https://github.com/ethersphere/bee-dashboard.git"
},
"dependencies": {
- "@ethersphere/bee-js": "^6.6.0",
+ "@ethersphere/bee-js": "^6.7.0",
"@ethersphere/swarm-cid": "^0.1.0",
"@material-ui/core": "4.12.3",
"@material-ui/icons": "4.11.2",
diff --git a/src/pages/stamps/PostageStampAdvancedCreation.tsx b/src/pages/stamps/PostageStampAdvancedCreation.tsx
index 971ed150..3ac52de6 100644
--- a/src/pages/stamps/PostageStampAdvancedCreation.tsx
+++ b/src/pages/stamps/PostageStampAdvancedCreation.tsx
@@ -1,9 +1,9 @@
import { PostageBatchOptions } from '@ethersphere/bee-js'
-import { Box, Grid, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+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'
@@ -11,6 +11,7 @@ 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,
@@ -19,14 +20,12 @@ import {
waitUntilStampExists,
} from '../../utils'
import { getHumanReadableFileSize } from '../../utils/file'
-import { Link } from 'react-router-dom'
-import { ROUTES } from '../../routes'
interface Props {
onFinished: () => void
}
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
createStyles({
link: {
color: '#dd7700',
@@ -174,25 +173,22 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
return (
<>
-
- Batch name
-
-
- setLabelInput(event.target.value)} />
-
-
- setImmutable(event.target.value === 'Yes')}
- options={[
- { value: 'Yes', label: 'Yes' },
- { value: 'No', label: 'No' },
- ]}
- />
+
+
+ To upload data to Swarm network, you will need to purchase a postage stamp. If you're not familiar with
+ this, please read{' '}
+
+ this guide
+
+ .
+
- validateDepthInput(event.target.value)} />
+ validateDepthInput(event.target.value)} />
Corresponding file size
@@ -209,14 +205,38 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
{!amountError && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'}
-
-
- Current price of 24000 per block
-
-
{amountError && {amountError}}
-
+
+ setLabelInput(event.target.value)} />
+
+
+ setImmutable(event.target.value === 'Yes')}
+ options={[
+ { value: 'Yes', label: 'Yes' },
+ { value: 'No', label: 'No' },
+ ]}
+ />
+
+
+ {immutable && (
+
+ Once an immutable stamp is maxed out, it disallows further content uploads, thereby safeguarding your
+ previously uploaded content from unintentional overwriting.
+
+ )}
+ {!immutable && (
+
+ 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.
+
+ )}
+
+
+
Indicative Price
diff --git a/src/pages/stamps/PostageStampStandardCreation.tsx b/src/pages/stamps/PostageStampStandardCreation.tsx
index ed68333f..e3c2d431 100644
--- a/src/pages/stamps/PostageStampStandardCreation.tsx
+++ b/src/pages/stamps/PostageStampStandardCreation.tsx
@@ -1,15 +1,14 @@
-import { PostageBatchOptions } from '@ethersphere/bee-js'
-import { Utils } from '@ethersphere/bee-js'
+import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
import { Box, Button, Grid, Slider, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+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 { Link } from 'react-router-dom'
import { ROUTES } from '../../routes'
import { calculateStampPrice, convertAmountToSeconds, secondsToTimeString, waitUntilStampExists } from '../../utils'
@@ -43,30 +42,31 @@ const marks = [
]
export function PostageStampStandardCreation({ onFinished }: Props): ReactElement {
- const getDepthForCapacity = Utils.getDepthForCapacity
- const getAmountForTtl = Utils.getAmountForTtl
const classes = useStyles()
const { refresh } = useContext(StampsContext)
const { beeDebugApi } = useContext(SettingsContext)
- const [depthInput, setDepthInput] = useState(getDepthForCapacity(4))
- const [amountInput, setAmountInput] = useState(Number.parseInt(getAmountForTtl(30)))
+ const [depthInput, setDepthInput] = useState(Utils.getDepthForCapacity(4))
+ const [amountInput, setAmountInput] = useState(Utils.getAmountForTtl(30))
const [labelInput, setLabelInput] = useState('')
const [submitting, setSubmitting] = useState(false)
const [buttonValue, setButtonValue] = useState(4)
- function sliderValueChange(event: any, newValue: any) {
- const amountValue = Number.parseInt(getAmountForTtl(newValue))
+ function sliderValueChange(_: unknown, newValue: number | number[]) {
+ if (typeof newValue !== 'number') {
+ return
+ }
+ const amountValue = Utils.getAmountForTtl(newValue)
setAmountInput(amountValue)
}
const { enqueueSnackbar } = useSnackbar()
- function getTtl(amount: number): string {
+ function getTtl(amount: string): string {
const pricePerBlock = 24000
return `${secondsToTimeString(
- convertAmountToSeconds(amount, pricePerBlock),
+ convertAmountToSeconds(parseInt(amount, 10), pricePerBlock),
)} (with price of ${pricePerBlock.toFixed(0)} per block)`
}
@@ -93,7 +93,7 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
const options: PostageBatchOptions = {
waitForUsable: false,
label: labelInput || undefined,
- immutableFlag: false,
+ immutableFlag: true,
}
const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
@@ -107,11 +107,9 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
setSubmitting(false)
}
- function handleBatchSize(event: any) {
- let value = event.target.innerText
- value = Number(value.substring(0, value.length - 3))
- setButtonValue(value)
- const capacity = getDepthForCapacity(value)
+ function handleBatchSize(gigabytes: number) {
+ setButtonValue(gigabytes)
+ const capacity = Utils.getDepthForCapacity(gigabytes)
setDepthInput(capacity)
}
@@ -146,7 +144,7 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen