refactor: call toString on numerical values to be bee-js compatible (#148)

* refactor: call toString on numerical values to be bee-js compatible

* feat: add upload size check

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.3.1",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@ethersphere/bee-js": "^0.10.0",
+        "@ethersphere/bee-js": "^0.12.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",
+      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.12.0.tgz",
-      "integrity": "sha512-j5HcrtN+LMmaqDNqdI5jUmU4YM039rV/vvOM2xsUX3+sFZBP00KVrpUsEMBzqQspU6U7//0y3BKx634V1hvpCA==",
+      "integrity": "sha512-fpZjbjIU5pxuGGo6nvVyAkEvCNSYIuoUb5fyaaIyZ+czswEkVm5oPeEfNvF703EWnar6kcAjCpAOs+dLWwLKAg==",
       "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-3a92ef5-dirty",
         "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",
+      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.12.0.tgz",
-      "integrity": "sha512-j5HcrtN+LMmaqDNqdI5jUmU4YM039rV/vvOM2xsUX3+sFZBP00KVrpUsEMBzqQspU6U7//0y3BKx634V1hvpCA==",
+      "integrity": "sha512-fpZjbjIU5pxuGGo6nvVyAkEvCNSYIuoUb5fyaaIyZ+czswEkVm5oPeEfNvF703EWnar6kcAjCpAOs+dLWwLKAg==",
       "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

@@ -24,7 +24,7 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^0.10.0",
+    "@ethersphere/bee-js": "^0.12.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/pages/files/Upload.tsx

@@ -1,17 +1,19 @@
-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 { Button, CircularProgress, Container } from '@material-ui/core'
-import PeerDetailDrawer from '../../components/PeerDetail'
-import Chip from '@material-ui/core/Chip'
 import Avatar from '@material-ui/core/Avatar'
-import SelectStamp from './SelectStamp'
+import Chip from '@material-ui/core/Chip'
-import CreatePostageStamp from '../stamps/CreatePostageStampModal'
+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 } 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 [file, setFile] = useState<File | null>(null)
@@ -61,7 +63,7 @@ export default function Files(): ReactElement {
   return (
     <div>
       <div>
-        <DropzoneArea onChange={handleChange} filesLimit={1} />
+        <DropzoneArea onChange={handleChange} filesLimit={1} maxFileSize={MAX_FILE_SIZE} />
         <div style={{ marginTop: '15px' }}>
           {selectedStamp && (
             <div style={{ display: 'flex' }}>
@@ -82,6 +84,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/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: {