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