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