chore: release 0.4.0 (#151)

* fix: clear dropzone state after upload

* fix: avoid state update on unmounted component

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [0.4.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.3.1...v0.4.0) (2021-06-29)
+
+
+### Features
+
+* display postage batch usage percentage ([#149](https://www.github.com/ethersphere/bee-dashboard/issues/149)) ([6f645dc](https://www.github.com/ethersphere/bee-dashboard/commit/6f645dc6c357cb9d86cec15e454b361bc871bec6))
+
+
+### Bug Fixes
+
+* clear dropzone state after upload ([#150](https://www.github.com/ethersphere/bee-dashboard/issues/150)) ([b190cac](https://www.github.com/ethersphere/bee-dashboard/commit/b190cac7064ad3dffb770c5a83d3db4a14d39607))
+
+### [0.3.1](https://www.github.com/ethersphere/bee-dashboard/compare/v0.3.0...v0.3.1) (2021-06-03)
+
+
+### Bug Fixes
+
+* don't display version alert when unable to retrieve version from bee node ([#138](https://www.github.com/ethersphere/bee-dashboard/issues/138)) ([5ace762](https://www.github.com/ethersphere/bee-dashboard/commit/5ace7629f2479499fe975dec8be4187ece6221ed))
+* typeerror in the postage stamps form ([#137](https://www.github.com/ethersphere/bee-dashboard/issues/137)) ([465df17](https://www.github.com/ethersphere/bee-dashboard/commit/465df177413afba5376682bd23a712066bd0385c))
+
 ## [0.3.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.2.0...v0.3.0) (2021-06-02)
 
 

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ethersphere/bee-dashboard",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@ethersphere/bee-js": "^0.10.0",
+        "@ethersphere/bee-js": "^1.0.0",
         "@material-ui/core": "^4.11.4",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.57",
@@ -1460,20 +1460,19 @@
       }
     },
     "node_modules/@ethersphere/bee-js": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.10.0.tgz",
-      "integrity": "sha512-j5HcrtN+LMmaqDNqdI5jUmU4YM039rV/vvOM2xsUX3+sFZBP00KVrpUsEMBzqQspU6U7//0y3BKx634V1hvpCA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-1.0.0.tgz",
+      "integrity": "sha512-u+TnKf0loAQba7AfZ54kXIEWjNdqVMUR6NXwINhHa2IdoD2b52rcuP96eMImlUm4tEJkxi2yAS+lcIZ2U9/1Vw==",
       "dependencies": {
         "axios": "^0.21.1",
         "elliptic": "^6.5.4",
         "isomorphic-ws": "^4.0.1",
         "js-sha3": "^0.8.0",
-        "json-bigint": "^1.0.0",
         "tar-js": "^0.3.0",
         "ws": "^7.4.4"
       },
       "engines": {
-        "bee": "0.6.2-984dca0a",
+        "bee": "1.0.0-2572fa48",
         "node": ">=12.0.0",
         "npm": ">=6.0.0"
       }
@@ -11760,14 +11759,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/json-bigint": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
-      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
-      "dependencies": {
-        "bignumber.js": "^9.0.0"
-      }
-    },
     "node_modules/json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -22904,15 +22895,14 @@
       }
     },
     "@ethersphere/bee-js": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.10.0.tgz",
-      "integrity": "sha512-j5HcrtN+LMmaqDNqdI5jUmU4YM039rV/vvOM2xsUX3+sFZBP00KVrpUsEMBzqQspU6U7//0y3BKx634V1hvpCA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-1.0.0.tgz",
+      "integrity": "sha512-u+TnKf0loAQba7AfZ54kXIEWjNdqVMUR6NXwINhHa2IdoD2b52rcuP96eMImlUm4tEJkxi2yAS+lcIZ2U9/1Vw==",
       "requires": {
         "axios": "^0.21.1",
         "elliptic": "^6.5.4",
         "isomorphic-ws": "^4.0.1",
         "js-sha3": "^0.8.0",
-        "json-bigint": "^1.0.0",
         "tar-js": "^0.3.0",
         "ws": "^7.4.4"
       }
@@ -31634,14 +31624,6 @@
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true
     },
-    "json-bigint": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
-      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
-      "requires": {
-        "bignumber.js": "^9.0.0"
-      }
-    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -24,7 +24,7 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^0.10.0",
+    "@ethersphere/bee-js": "^1.0.0",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",

src/components/AlertUploadSize.tsx

@@ -0,0 +1,38 @@
+import Collapse from '@material-ui/core/Collapse'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Alert, AlertTitle } from '@material-ui/lab'
+import { ReactElement } from 'react'
+
+const LIMIT = 100_000_000 // 100 megabytes
+
+interface Props {
+  file: File
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+  }),
+)
+
+export default function UploadSizeAlert(props: Props): ReactElement | null {
+  const classes = useStyles()
+
+  const aboveLimit = props.file.size >= LIMIT
+
+  return (
+    <Collapse in={aboveLimit}>
+      <div className={classes.root}>
+        <Alert severity="warning">
+          <AlertTitle>Warning</AlertTitle>
+          The file you are trying to upload is above the recommended size. The chunks may not be synchronised properly
+          over the network.
+        </Alert>
+      </div>
+    </Collapse>
+  )
+}

src/components/AlertVersion.tsx

@@ -23,7 +23,7 @@ export default function VersionAlert(): ReactElement | null {
 
   const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === userVersion
 
-  if (isLoading) return null
+  if (isLoading || !userVersion) return null
 
   return (
     <Collapse in={!isExactlySupportedBeeVersion && open}>

src/pages/files/SelectStamp.tsx

@@ -1,15 +1,15 @@
-import React, { ReactElement } from 'react'
 import Button from '@material-ui/core/Button'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
 import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import { PostageBatch } from '@ethersphere/bee-js'
+import React, { ReactElement } from 'react'
 import PeerDetailDrawer from '../../components/PeerDetail'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 interface Props {
-  stamps: PostageBatch[] | null
-  selectedStamp: PostageBatch | null
-  setSelected: (stamp: PostageBatch) => void
+  stamps: EnrichedPostageBatch[] | null
+  selectedStamp: EnrichedPostageBatch | null
+  setSelected: (stamp: EnrichedPostageBatch) => void
 }
 
 export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props): ReactElement | null {
@@ -38,7 +38,7 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
             }}
             selected={stamp.batchID === selectedStamp?.batchID}
           >
-            <ListItemIcon>{stamp.utilization}</ListItemIcon>
+            <ListItemIcon>{stamp.usageText}</ListItemIcon>
             <PeerDetailDrawer peerId={stamp.batchID} />
           </MenuItem>
         ))}

src/pages/files/Upload.tsx

@@ -1,33 +1,35 @@
-import { ReactElement, useContext, useEffect, useState } from 'react'
-import { beeApi } from '../../services/bee'
-
-import { Button, Container, CircularProgress } from '@material-ui/core'
-import { DropzoneArea } from 'material-ui-dropzone'
-import ClipboardCopy from '../../components/ClipboardCopy'
-import { PostageBatch } from '@ethersphere/bee-js'
-import { Context } from '../../providers/Stamps'
-import PeerDetailDrawer from '../../components/PeerDetail'
-import Chip from '@material-ui/core/Chip'
+import { Button, CircularProgress, Container } from '@material-ui/core'
 import Avatar from '@material-ui/core/Avatar'
-import SelectStamp from './SelectStamp'
-import CreatePostageStamp from '../stamps/CreatePostageStampModal'
+import Chip from '@material-ui/core/Chip'
+import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import UploadSizeAlert from '../../components/AlertUploadSize'
+import ClipboardCopy from '../../components/ClipboardCopy'
+import PeerDetailDrawer from '../../components/PeerDetail'
+import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
+import { beeApi } from '../../services/bee'
+import CreatePostageStamp from '../stamps/CreatePostageStampModal'
+import SelectStamp from './SelectStamp'
+
+const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
 
 export default function Files(): ReactElement {
+  const [dropzoneKey, setDropzoneKey] = useState(0)
   const [file, setFile] = useState<File | null>(null)
   const [uploadReference, setUploadReference] = useState('')
   const [isUploadingFile, setIsUploadingFile] = useState(false)
 
-  const [selectedStamp, setSelectedStamp] = useState<PostageBatch | null>(null)
+  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
 
   const { isLoading, error, stamps } = useContext(Context)
   const { enqueueSnackbar } = useSnackbar()
 
-  // Choose a postage stamp that has the lowest utilization
+  // Choose a postage stamp that has the lowest usage
   useEffect(() => {
     if (!selectedStamp && stamps && stamps.length > 0) {
       const stamp = stamps.reduce((prev, curr) => {
-        if (curr.utilization < prev.utilization) return curr
+        if (curr.usage < prev.usage) return curr
 
         return prev
       }, stamps[0])
@@ -42,8 +44,11 @@ export default function Files(): ReactElement {
     beeApi.files
       .uploadFile(selectedStamp.batchID, file)
       .then(hash => {
-        setUploadReference(hash)
-        setFile(null)
+        window.setTimeout(() => {
+          setFile(null)
+          setUploadReference(hash)
+          setDropzoneKey(dropzoneKey + 1)
+        }, 0)
       })
       .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
       .finally(() => {
@@ -54,21 +59,25 @@ export default function Files(): ReactElement {
   const handleChange = (files?: File[]) => {
     if (files) {
       setFile(files[0])
-      setUploadReference('')
     }
   }
 
   return (
     <div>
       <div>
-        <DropzoneArea onChange={handleChange} filesLimit={1} />
+        <DropzoneArea
+          key={'dropzone-' + dropzoneKey}
+          onChange={handleChange}
+          filesLimit={1}
+          maxFileSize={MAX_FILE_SIZE}
+        />
         <div style={{ marginTop: '15px' }}>
           {selectedStamp && (
             <div style={{ display: 'flex' }}>
               <small>
                 with Postage Stamp{' '}
                 <Chip
-                  avatar={<Avatar>{selectedStamp.utilization}</Avatar>}
+                  avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
                   label={<PeerDetailDrawer peerId={selectedStamp.batchID} characterLength={6} />}
                   deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
                   onDelete={() => {} /* eslint-disable-line*/}
@@ -82,6 +91,7 @@ export default function Files(): ReactElement {
           <Button disabled={!file && isUploadingFile && !selectedStamp} onClick={() => uploadFile()}>
             Upload
           </Button>
+          {file && <UploadSizeAlert file={file} />}
           {isUploadingFile && (
             <Container style={{ textAlign: 'center', padding: '50px' }}>
               <CircularProgress />

src/pages/stamps/CreatePostageStampModal.tsx

@@ -63,7 +63,8 @@ export default function FormDialog({ label }: Props): ReactElement {
       initialValues={initialFormValues}
       onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
         try {
-          if (!values.depth) return
+          // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+          if (!values.depth || !values.amount) return
 
           const amount = BigInt(values.amount)
           const depth = Number.parseInt(values.depth)
@@ -105,7 +106,7 @@ export default function FormDialog({ label }: Props): ReactElement {
         return errors
       }}
     >
-      {({ submitForm, isValid, isSubmitting }) => (
+      {({ submitForm, isValid, isSubmitting, values }) => (
         <Form>
           <Button variant="outlined" color="primary" onClick={handleClickOpen}>
             {label || 'Buy Postage Stamp'}
@@ -140,7 +141,7 @@ export default function FormDialog({ label }: Props): ReactElement {
               <div className={classes.wrapper}>
                 <Button
                   color="primary"
-                  disabled={isSubmitting || !isValid}
+                  disabled={isSubmitting || !isValid || !values.amount || !values.depth}
                   type="submit"
                   variant="contained"
                   onClick={submitForm}

src/pages/stamps/StampsTable.tsx

@@ -1,10 +1,9 @@
-import type { ReactElement } from 'react'
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Paper } from '@material-ui/core'
-
+import type { ReactElement } from 'react'
 import ClipboardCopy from '../../components/ClipboardCopy'
 import PeerDetailDrawer from '../../components/PeerDetail'
-import { PostageBatch } from '@ethersphere/bee-js'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 const useStyles = makeStyles({
   table: {
@@ -16,7 +15,7 @@ const useStyles = makeStyles({
   },
 })
 interface Props {
-  postageStamps: PostageBatch[] | null
+  postageStamps: EnrichedPostageBatch[] | null
 }
 
 function StampsTable({ postageStamps }: Props): ReactElement | null {
@@ -29,11 +28,11 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
         <TableHead>
           <TableRow>
             <TableCell>Batch ID</TableCell>
-            <TableCell align="right">Utilization</TableCell>
+            <TableCell align="right">Usage</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {postageStamps.map(({ batchID, utilization }) => (
+          {postageStamps.map(({ batchID, usageText }) => (
             <TableRow key={batchID}>
               <TableCell>
                 <div style={{ display: 'flex' }}>
@@ -43,7 +42,7 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
                   <ClipboardCopy value={batchID} />
                 </div>
               </TableCell>
-              <TableCell className={classes.values}>{utilization}</TableCell>
+              <TableCell className={classes.values}>{usageText}</TableCell>
             </TableRow>
           ))}
         </TableBody>

src/providers/Stamps.tsx

@@ -2,8 +2,13 @@ import { PostageBatch } from '@ethersphere/bee-js'
 import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
 import { beeApi } from '../services/bee'
 
+export interface EnrichedPostageBatch extends PostageBatch {
+  usage: number
+  usageText: string
+}
+
 interface ContextInterface {
-  stamps: PostageBatch[] | null
+  stamps: EnrichedPostageBatch[] | null
   error: Error | null
   isLoading: boolean
   lastUpdate: number | null
@@ -29,8 +34,21 @@ interface Props {
   children: ReactChild
 }
 
+function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
+  const { depth, bucketDepth, utilization } = postageBatch
+
+  const usage = utilization / Math.pow(2, depth - bucketDepth)
+  const usageText = `${Math.ceil(usage * 100)}%`
+
+  return {
+    ...postageBatch,
+    usage,
+    usageText,
+  }
+}
+
 export function Provider({ children }: Props): ReactElement {
-  const [stamps, setStamps] = useState<PostageBatch[] | null>(initialValues.stamps)
+  const [stamps, setStamps] = useState<EnrichedPostageBatch[] | null>(initialValues.stamps)
   const [error, setError] = useState<Error | null>(initialValues.error)
   const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
   const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
@@ -44,7 +62,7 @@ export function Provider({ children }: Props): ReactElement {
       setIsLoading(true)
       const stamps = await beeApi.stamps.getPostageStamps()
 
-      setStamps(stamps)
+      setStamps(stamps.map(enrichStamp))
       setLastUpdate(Date.now())
     } catch (e) {
       setError(e)

src/services/bee.tsx

@@ -45,7 +45,7 @@ export const beeApi = {
       return beeJSClient().getAllPostageBatch()
     },
     buyPostageStamp(amount: bigint, depth: number, options: PostageBatchOptions = {}): Promise<Address> {
-      return beeJSClient().createPostageBatch(amount, depth, options)
+      return beeJSClient().createPostageBatch(amount.toString(), depth, options)
     },
   },
 }
@@ -95,10 +95,10 @@ export const beeDebugApi = {
       return beeJSDebugClient().getLastChequesForPeer(peerId)
     },
     withdraw(amount: bigint): Promise<string> {
-      return beeJSDebugClient().withdrawTokens(amount)
+      return beeJSDebugClient().withdrawTokens(amount.toString())
     },
     deposit(amount: bigint): Promise<string> {
-      return beeJSDebugClient().depositTokens(amount)
+      return beeJSDebugClient().depositTokens(amount.toString())
     },
   },
   settlements: {