diff --git a/src/pages/stamps/PostageStampAdvancedCreation.tsx b/src/pages/stamps/PostageStampAdvancedCreation.tsx
index 3ac52de..3ef654d 100644
--- a/src/pages/stamps/PostageStampAdvancedCreation.tsx
+++ b/src/pages/stamps/PostageStampAdvancedCreation.tsx
@@ -1,10 +1,11 @@
-import { PostageBatchOptions } from '@ethersphere/bee-js'
-import { Box, Grid, Typography, createStyles, makeStyles } from '@material-ui/core'
+import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
+import { Box, Grid, IconButton, 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 Info from 'remixicon-react/InformationLineIcon'
import { SwarmButton } from '../../components/SwarmButton'
import { SwarmSelect } from '../../components/SwarmSelect'
import { SwarmTextInput } from '../../components/SwarmTextInput'
@@ -12,13 +13,7 @@ import { Context as BeeContext } from '../../providers/Bee'
import { Context as SettingsContext } from '../../providers/Settings'
import { Context as StampsContext } from '../../providers/Stamps'
import { ROUTES } from '../../routes'
-import {
- calculateStampPrice,
- convertAmountToSeconds,
- convertDepthToBytes,
- secondsToTimeString,
- waitUntilStampExists,
-} from '../../utils'
+import { calculateStampPrice, convertAmountToSeconds, secondsToTimeString, waitUntilStampExists } from '../../utils'
import { getHumanReadableFileSize } from '../../utils/file'
interface Props {
@@ -39,6 +34,14 @@ const useStyles = makeStyles(() =>
},
},
},
+ stampVolumeWrapper: {
+ width: 'fit-content',
+ '& button': {
+ marginLeft: 4,
+ width: 24,
+ padding: 2,
+ },
+ },
}),
)
@@ -58,14 +61,6 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
const { enqueueSnackbar } = useSnackbar()
- function getFileSize(depth: number): string {
- if (isNaN(depth) || depth < 17 || depth > 255) {
- return '-'
- }
-
- return `~${getHumanReadableFileSize(convertDepthToBytes(depth))}`
- }
-
function getTtl(amount: number): string {
const isCurrentPriceAvailable = chainState && chainState.currentPrice
@@ -171,6 +166,36 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
setDepthInput(validDepthInput)
}
+ function renderStampVolumesInfo() {
+ const depth = parseInt(depthInput, 10)
+
+ if (depthError || isNaN(depth) || depth < 17 || depth > 255) {
+ return '-'
+ }
+
+ const theoreticalMaximumVolume = getHumanReadableFileSize(Utils.getStampMaximumCapacityBytes(depth))
+ const effectiveVolume = getHumanReadableFileSize(Utils.getStampEffectiveBytes(depth))
+
+ return (
+
+
+ Theoretical: ~{theoreticalMaximumVolume} / Effective: ~{effectiveVolume}
+
+
+ window.open(
+ 'https://docs.ethswarm.org/docs/learn/technology/contracts/postage-stamp/#effective-utilisation-table',
+ '_blank',
+ 'noopener,noreferrer',
+ )
+ }
+ >
+
+
+
+ )
+ }
+
return (
<>
@@ -190,9 +215,9 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
validateDepthInput(event.target.value)} />
-
+
Corresponding file size
- {!depthError && depthInput ? getFileSize(parseInt(depthInput, 10)) : '-'}
+ {renderStampVolumesInfo()}
{depthError && {depthError}}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index b97da58..ab86d67 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -203,10 +203,6 @@ export function secondsToTimeString(seconds: number): string {
return `${unit.toFixed(1)} years`
}
-export function convertDepthToBytes(depth: number): number {
- return 2 ** depth * 4096
-}
-
export function convertAmountToSeconds(amount: number, pricePerBlock: number): number {
// TODO: blocktime should come directly from the blockchain as it may differ between different networks
const blockTime = 5 // On mainnet there is 5 seconds between blocks