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

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 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 } 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: {