feat: update postage stamp creation screen (#641)

* style: UI changes for postage stamp * feat: New postage stamp standard page --------- Co-authored-by: Seres Roland <[email protected]>
ethersphere · Dec 4, 2023 · 4f9abc6 · 4f9abc6
1 parent 20a051b
commit 4f9abc6
Show file tree

Hide file tree

Showing 12 changed files with 392 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^6.2.0",
+    "@ethersphere/bee-js": "^6.6.0",
     "@ethersphere/swarm-cid": "^0.1.0",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",

diff --git a/src/pages/account/stamps/AccountStamps.tsx b/src/pages/account/stamps/AccountStamps.tsx
@@ -46,7 +46,7 @@ export function AccountStamps(): ReactElement {
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   function navigateToNewStamp() {
-    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
+    navigate(ROUTES.ACCOUNT_STAMPS_NEW_STANDARD)
   }
 
   return (

diff --git a/src/pages/files/Upload.tsx b/src/pages/files/Upload.tsx
@@ -18,7 +18,7 @@ import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils
 import { persistIdentity, updateFeed } from '../../utils/identity'
 import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { FeedPasswordDialog } from '../feeds/FeedPasswordDialog'
-import { PostageStampCreation } from '../stamps/PostageStampCreation'
+import { PostageStampAdvancedCreation } from '../stamps/PostageStampAdvancedCreation'
 import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
 import { StampPreview } from './StampPreview'
@@ -186,7 +186,7 @@ export function Upload(): ReactElement {
             {hasAnyStamps && stampMode === 'SELECT' ? (
               <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
             ) : (
-              <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
+              <PostageStampAdvancedCreation onFinished={() => setStampMode('SELECT')} />
             )}
           </Box>
           <Box mb={4}>

diff --git a/src/pages/stamps/CreatePostageStampPage.tsx → ...stamps/CreatePostageStampAdvancedPage.tsx b/src/pages/stamps/CreatePostageStampPage.tsx → ...stamps/CreatePostageStampAdvancedPage.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from 'react'
 import { useNavigate } from 'react-router'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ROUTES } from '../../routes'
-import { PostageStampCreation } from './PostageStampCreation'
+import { PostageStampAdvancedCreation } from './PostageStampAdvancedCreation'
 
 export function CreatePostageStampPage(): ReactElement {
   const navigate = useNavigate()
@@ -13,8 +13,8 @@ export function CreatePostageStampPage(): ReactElement {
 
   return (
     <div>
-      <HistoryHeader>Buy new postage stamp</HistoryHeader>
-      <PostageStampCreation onFinished={onFinished} />
+      <HistoryHeader>Buy new postage stamp batch</HistoryHeader>
+      <PostageStampAdvancedCreation onFinished={onFinished} />
     </div>
   )
 }
diff --git a/src/pages/stamps/CreatePostageStampStandardPage.tsx b/src/pages/stamps/CreatePostageStampStandardPage.tsx
@@ -0,0 +1,20 @@
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { ROUTES } from '../../routes'
+import { PostageStampStandardCreation } from './PostageStampStandardCreation'
+
+export function CreatePostageStampBasicPage(): ReactElement {
+  const navigate = useNavigate()
+
+  function onFinished() {
+    navigate(ROUTES.ACCOUNT_STAMPS)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>Buy new postage stamp batch</HistoryHeader>
+      <PostageStampStandardCreation onFinished={onFinished} />
+    </div>
+  )
+}
diff --git a/src/pages/stamps/PostageStampCreation.tsx → ...s/stamps/PostageStampAdvancedCreation.tsx b/src/pages/stamps/PostageStampCreation.tsx → ...s/stamps/PostageStampAdvancedCreation.tsx
@@ -1,5 +1,6 @@
 import { PostageBatchOptions } from '@ethersphere/bee-js'
 import { Box, Grid, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
@@ -18,12 +19,32 @@ import {
   waitUntilStampExists,
 } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
+import { Link } from 'react-router-dom'
+import { ROUTES } from '../../routes'
 
 interface Props {
   onFinished: () => void
 }
 
-export function PostageStampCreation({ onFinished }: Props): ReactElement {
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      color: '#dd7700',
+      textDecoration: 'underline',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+  }),
+)
+
+export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElement {
+  const classes = useStyles()
   const { chainState } = useContext(BeeContext)
   const { refresh } = useContext(StampsContext)
   const { beeDebugApi } = useContext(SettingsContext)
@@ -153,22 +174,25 @@ 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 mb={1}>
+        <Typography variant="h2">Batch name</Typography>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="label" label="Label" optional onChange={event => setLabelInput(event.target.value)} />
+      </Box>
+      <Box mb={2}>
+        <SwarmSelect
+          label="Immutable"
+          defaultValue="No"
+          onChange={event => setImmutable(event.target.value === 'Yes')}
+          options={[
+            { value: 'Yes', label: 'Yes' },
+            { value: 'No', label: 'No' },
+          ]}
+        />
       </Box>
       <Box mb={2}>
-        <SwarmTextInput name="depth" label="Depth" onChange={event => validateDepthInput(event.target.value)} />
+        <SwarmTextInput name="depth" label="Batch depth" onChange={event => validateDepthInput(event.target.value)} />
         <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
           <Grid container justifyContent="space-between">
             <Typography>Corresponding file size</Typography>
@@ -185,38 +209,14 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
             <Typography>{!amountError && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'}</Typography>
           </Grid>
         </Box>
-        {amountError && <Typography>{amountError}</Typography>}
-      </Box>
-      <Box mb={2}>
-        <SwarmTextInput name="label" label="Label" optional onChange={event => setLabelInput(event.target.value)} />
-      </Box>
-      <Box mb={2}>
-        <SwarmSelect
-          label="Immutable"
-          defaultValue="No"
-          onChange={event => setImmutable(event.target.value === 'Yes')}
-          options={[
-            { value: 'Yes', label: 'Yes' },
-            { value: 'No', label: 'No' },
-          ]}
-        />
-        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
-          <Grid container justifyContent="space-between">
-            {immutable && (
-              <Typography>
-                Once an immutable stamp is maxed out, it disallows further content uploads, thereby safeguarding your
-                previously uploaded content from unintentional overwriting.
-              </Typography>
-            )}
-            {!immutable && (
-              <Typography>
-                When a mutable stamp reaches full capacity, it still permits new content uploads. However, this comes
-                with the caveat of overwriting previously uploaded content associated with the same stamp.
-              </Typography>
-            )}
-          </Grid>
+        <Box display="flex" justifyContent={'right'} mt={0.5}>
+          <Typography style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.26)' }}>
+            Current price of 24000 per block
+          </Typography>
         </Box>
+        {amountError && <Typography>{amountError}</Typography>}
       </Box>
+
       <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
         <Grid container justifyContent="space-between">
           <Typography>Indicative Price</Typography>
@@ -227,14 +227,24 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
           </Typography>
         </Grid>
       </Box>
-      <SwarmButton
-        disabled={submitting || Boolean(depthError) || Boolean(amountError) || !depthInput || !amountInput}
-        onClick={submit}
-        iconType={Check}
-        loading={submitting}
-      >
-        Buy New Stamp
-      </SwarmButton>
+
+      <Grid container justifyContent="space-between" alignItems="center">
+        <Grid item>
+          <SwarmButton
+            disabled={submitting || Boolean(depthError) || Boolean(amountError) || !depthInput || !amountInput}
+            onClick={submit}
+            iconType={Check}
+            loading={submitting}
+          >
+            Buy New Stamp
+          </SwarmButton>
+        </Grid>
+        <Grid item>
+          <Link to={ROUTES.ACCOUNT_STAMPS_NEW_STANDARD} className={classes.link}>
+            Standard mode
+          </Link>
+        </Grid>
+      </Grid>
     </>
   )
 }