feat: display effective capacity (#643)

* feat: add stamp effective volume display (#636)

* refactor: make it cleaner (#636)

---------

Co-authored-by: Levente Kiss <levente.kiss@solarpunk.bzz>

Author: LevilkTheReal

src/pages/stamps/PostageStampAdvancedCreation.tsx

@@ -1,24 +1,19 @@
-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'
 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 (
+      <Grid item container alignItems="center" className={classes.stampVolumeWrapper}>
+        <Typography>
+          Theoretical: ~{theoreticalMaximumVolume} / Effective: ~{effectiveVolume}
+        </Typography>
+        <IconButton
+          onClick={() =>
+            window.open(
+              'https://docs.ethswarm.org/docs/learn/technology/contracts/postage-stamp/#effective-utilisation-table',
+              '_blank',
+              'noopener,noreferrer',
+            )
+          }
+        >
+          <Info />
+        </IconButton>
+      </Grid>
+    )
+  }
+
   return (
     <>
       <Box mb={4}>
@@ -190,9 +215,9 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
       <Box mb={2}>
         <SwarmTextInput name="depth" label="Depth" onChange={event => validateDepthInput(event.target.value)} />
         <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
-          <Grid container justifyContent="space-between">
+          <Grid container justifyContent="space-between" alignItems="center">
             <Typography>Corresponding file size</Typography>
-            <Typography>{!depthError && depthInput ? getFileSize(parseInt(depthInput, 10)) : '-'}</Typography>
+            {renderStampVolumesInfo()}
           </Grid>
         </Box>
         {depthError && <Typography>{depthError}</Typography>}

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