From fb8775d0a7a2bb3525467cec98584009c167700f Mon Sep 17 00:00:00 2001
From: Vojtech Simetka <vojtech@simetka.cz>
Date: Tue, 28 Jun 2022 17:29:46 +0200
Subject: [PATCH] feat: add postage stamp guide (#455)

* feat: add postage stamp guide to create new postage stamp

* feat: add the docs to the upload page as well
---
 src/pages/files/UploadActionBar.tsx       |  12 +-
 src/pages/rpc/index.tsx                   |   2 +-
 src/pages/stamps/PostageStampCreation.tsx | 176 ++++++++++++----------
 3 files changed, 109 insertions(+), 81 deletions(-)

diff --git a/src/pages/files/UploadActionBar.tsx b/src/pages/files/UploadActionBar.tsx
index 1825f27..689937b 100644
--- a/src/pages/files/UploadActionBar.tsx
+++ b/src/pages/files/UploadActionBar.tsx
@@ -49,7 +49,17 @@ export function UploadActionBar({
             </SwarmButton>
           </ExpandableListItemActions>
         </Box>
-        <DocumentationText>You need a postage stamp to upload.</DocumentationText>
+        <DocumentationText>
+          You need a postage stamp to upload. Find out more in{' '}
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </DocumentationText>
       </>
     )
   }
diff --git a/src/pages/rpc/index.tsx b/src/pages/rpc/index.tsx
index 3800e2d..87d51f4 100644
--- a/src/pages/rpc/index.tsx
+++ b/src/pages/rpc/index.tsx
@@ -46,7 +46,7 @@ export default function Index(): ReactElement {
             target="_blank"
             rel="noreferrer"
           >
-            this guide.
+            this guide
           </a>
           .
         </Typography>
diff --git a/src/pages/stamps/PostageStampCreation.tsx b/src/pages/stamps/PostageStampCreation.tsx
index 9caf2de..dc8210d 100644
--- a/src/pages/stamps/PostageStampCreation.tsx
+++ b/src/pages/stamps/PostageStampCreation.tsx
@@ -70,97 +70,115 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
   }
 
   return (
-    <Formik
-      initialValues={initialFormValues}
-      onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
-        try {
-          // This is really just a typeguard, the validation pretty much guarantees these will have the right values
-          if (!values.depth || !values.amount) return
+    <>
+      <Box mb={4}>
+        <Typography>
+          To upload data to Swarm network, you will need to purchase a postage stamp. If you&apos;re not familiar with
+          this, please read{' '}
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </Typography>
+      </Box>
+      <Formik
+        initialValues={initialFormValues}
+        onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
+          try {
+            // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+            if (!values.depth || !values.amount) return
 
-          if (!beeDebugApi) return
+            if (!beeDebugApi) return
 
-          const amount = BigInt(values.amount)
-          const depth = Number.parseInt(values.depth)
-          const options = values.label ? { label: values.label } : undefined
-          await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
-          actions.resetForm()
-          await refresh()
-          onFinished()
-        } catch (e) {
-          enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
-          actions.setSubmitting(false)
-        }
-      }}
-      validate={(values: FormValues) => {
-        const errors: FormErrors = {}
+            const amount = BigInt(values.amount)
+            const depth = Number.parseInt(values.depth)
+            const options = values.label ? { label: values.label } : undefined
+            await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+            actions.resetForm()
+            await refresh()
+            onFinished()
+          } catch (e) {
+            enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+            actions.setSubmitting(false)
+          }
+        }}
+        validate={(values: FormValues) => {
+          const errors: FormErrors = {}
 
-        // Depth
-        if (!values.depth) errors.depth = 'Required field'
-        else {
-          const depth = new BigNumber(values.depth)
+          // Depth
+          if (!values.depth) errors.depth = 'Required field'
+          else {
+            const depth = new BigNumber(values.depth)
 
-          if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
-          else if (depth.isLessThan(17)) errors.depth = 'Minimal depth is 17'
-          else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
-        }
+            if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
+            else if (depth.isLessThan(17)) errors.depth = 'Minimal depth is 17'
+            else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
+          }
 
-        // Amount
-        if (!values.amount) errors.amount = 'Required field'
-        else {
-          const amount = new BigNumber(values.amount)
+          // Amount
+          if (!values.amount) errors.amount = 'Required field'
+          else {
+            const amount = new BigNumber(values.amount)
 
-          if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
-          else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
-        }
+            if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
+            else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
+          }
 
-        return errors
-      }}
-    >
-      {({ submitForm, isValid, isSubmitting, values, errors }) => (
-        <Form>
-          <Box mb={2}>
-            <SwarmTextInput name="depth" label="Depth" formik />
-            <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
-              <Grid container justifyContent="space-between">
-                <Typography>Corresponding file size</Typography>
-                <Typography>{!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}</Typography>
-              </Grid>
+          return errors
+        }}
+      >
+        {({ submitForm, isValid, isSubmitting, values, errors }) => (
+          <Form>
+            <Box mb={2}>
+              <SwarmTextInput name="depth" label="Depth" formik />
+              <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+                <Grid container justifyContent="space-between">
+                  <Typography>Corresponding file size</Typography>
+                  <Typography>
+                    {!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}
+                  </Typography>
+                </Grid>
+              </Box>
             </Box>
-          </Box>
-          <Box mb={2}>
-            <SwarmTextInput name="amount" label="Amount" formik />
-            <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+            <Box mb={2}>
+              <SwarmTextInput name="amount" label="Amount" formik />
+              <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+                <Grid container justifyContent="space-between">
+                  <Typography>Corresponding TTL (Time to live)</Typography>
+                  <Typography>
+                    {!errors.amount && values.amount ? getTtl(Number.parseInt(values.amount, 10)) : '-'}
+                  </Typography>
+                </Grid>
+              </Box>
+            </Box>
+            <Box mb={2}>
+              <SwarmTextInput name="label" label="Label" optional formik />
+            </Box>
+            <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
               <Grid container justifyContent="space-between">
-                <Typography>Corresponding TTL (Time to live)</Typography>
+                <Typography>Indicative Price</Typography>
                 <Typography>
-                  {!errors.amount && values.amount ? getTtl(Number.parseInt(values.amount, 10)) : '-'}
+                  {!errors.amount && !errors.depth && values.amount && values.depth
+                    ? getPrice(parseInt(values.depth, 10), BigInt(values.amount))
+                    : '-'}
                 </Typography>
               </Grid>
             </Box>
-          </Box>
-          <Box mb={2}>
-            <SwarmTextInput name="label" label="Label" optional formik />
-          </Box>
-          <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
-            <Grid container justifyContent="space-between">
-              <Typography>Indicative Price</Typography>
-              <Typography>
-                {!errors.amount && !errors.depth && values.amount && values.depth
-                  ? getPrice(parseInt(values.depth, 10), BigInt(values.amount))
-                  : '-'}
-              </Typography>
-            </Grid>
-          </Box>
-          <SwarmButton
-            disabled={isSubmitting || !isValid || !values.amount || !values.depth}
-            onClick={submitForm}
-            iconType={Check}
-            loading={isSubmitting}
-          >
-            Buy New Stamp
-          </SwarmButton>
-        </Form>
-      )}
-    </Formik>
+            <SwarmButton
+              disabled={isSubmitting || !isValid || !values.amount || !values.depth}
+              onClick={submitForm}
+              iconType={Check}
+              loading={isSubmitting}
+            >
+              Buy New Stamp
+            </SwarmButton>
+          </Form>
+        )}
+      </Formik>
+    </>
   )
 }