From af88027ba92a5a54f16d5ae7ee92de436038053c Mon Sep 17 00:00:00 2001 From: Cafe137 <77121044+Cafe137@users.noreply.github.com> Date: Fri, 18 Jun 2021 12:37:09 +0200 Subject: [PATCH] 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 | 34 +++++++------------------- package.json | 2 +- src/components/AlertUploadSize.tsx | 38 ++++++++++++++++++++++++++++++ src/pages/files/Upload.tsx | 27 +++++++++++---------- src/services/bee.tsx | 6 ++--- 5 files changed, 65 insertions(+), 42 deletions(-) create mode 100644 src/components/AlertUploadSize.tsx diff --git a/package-lock.json b/package-lock.json index 19da378..2ea7833 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.10.0.tgz", - "integrity": "sha512-j5HcrtN+LMmaqDNqdI5jUmU4YM039rV/vvOM2xsUX3+sFZBP00KVrpUsEMBzqQspU6U7//0y3BKx634V1hvpCA==", + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.12.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.10.0.tgz", - "integrity": "sha512-j5HcrtN+LMmaqDNqdI5jUmU4YM039rV/vvOM2xsUX3+sFZBP00KVrpUsEMBzqQspU6U7//0y3BKx634V1hvpCA==", + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.12.0.tgz", + "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", diff --git a/package.json b/package.json index 997641d..1b0c85c 100644 --- a/package.json +++ b/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", diff --git a/src/components/AlertUploadSize.tsx b/src/components/AlertUploadSize.tsx new file mode 100644 index 0000000..e854e25 --- /dev/null +++ b/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 ( + +
+ + Warning + The file you are trying to upload is above the recommended size. The chunks may not be synchronised properly + over the network. + +
+ + ) +} diff --git a/src/pages/files/Upload.tsx b/src/pages/files/Upload.tsx index 2355ac6..9f6a2c3 100644 --- a/src/pages/files/Upload.tsx +++ b/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(null) @@ -61,7 +63,7 @@ export default function Files(): ReactElement { return (
- +
{selectedStamp && (
@@ -82,6 +84,7 @@ export default function Files(): ReactElement { + {file && } {isUploadingFile && ( diff --git a/src/services/bee.tsx b/src/services/bee.tsx index 137be2e..0fa87fc 100644 --- a/src/services/bee.tsx +++ b/src/services/bee.tsx @@ -45,7 +45,7 @@ export const beeApi = { return beeJSClient().getAllPostageBatch() }, buyPostageStamp(amount: bigint, depth: number, options: PostageBatchOptions = {}): Promise
{ - 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 { - return beeJSDebugClient().withdrawTokens(amount) + return beeJSDebugClient().withdrawTokens(amount.toString()) }, deposit(amount: bigint): Promise { - return beeJSDebugClient().depositTokens(amount) + return beeJSDebugClient().depositTokens(amount.toString()) }, }, settlements: {