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

@@ -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>
       </>
     )
   }

src/pages/rpc/index.tsx

@@ -46,7 +46,7 @@ export default function Index(): ReactElement {
             target="_blank"
             rel="noreferrer"
           >
-            this guide.
+            this guide
           </a>
           .
         </Typography>

src/pages/stamps/PostageStampCreation.tsx

@@ -70,6 +70,21 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
   }
 
   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>) => {
@@ -123,7 +138,9 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
               <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>
+                  <Typography>
+                    {!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}
+                  </Typography>
                 </Grid>
               </Box>
             </Box>
@@ -162,5 +179,6 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
           </Form>
         )}
       </Formik>
+    </>
   )
 }