feat: update to bee 0.6.0 and bee-js 0.9.0 (#99)

* chore: update the interfaces to latest bee-js

* chore: update to latest bee-js

* chore: removed upload page, updated to latest bee-js

* chore: typo in src/pages/files/index.tsx

Co-authored-by: Attila Gazso <agazso@gmail.com>

* chore: update to bee-js 0.9.0

Co-authored-by: Attila Gazso <agazso@gmail.com>

package-lock.json

@@ -1,14 +1,15 @@
 {
-  "name": "bee-dashboard",
+  "name": "@ethersphere/bee-dashboard",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
+      "name": "@ethersphere/bee-dashboard",
       "version": "0.1.0",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@ethersphere/bee-js": "^0.8.1",
+        "@ethersphere/bee-js": "^0.9.0",
         "@material-ui/core": "^4.11.3",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.57",
@@ -28,6 +29,9 @@
         "react-router-dom": "^5.2.0",
         "react-syntax-highlighter": "^15.4.3"
       },
+      "bin": {
+        "bee-dashboard": "serve.js"
+      },
       "devDependencies": {
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.6",
@@ -1445,9 +1449,9 @@
       }
     },
     "node_modules/@ethersphere/bee-js": {
-      "version": "0.8.1",
+      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.9.0.tgz",
-      "integrity": "sha512-fbxdvAh19hObRrWoim86a+AY8XJOFwE+mla2xvUWewodi8ZfPcZKgTf0YuNftk0M9Z/Q6IfZakEcBaTl1mXj0g==",
+      "integrity": "sha512-C8lam7l+M5lLBOBKXyzIeSI2eE6R3jjBmP9bOJPZF8I42U5myNKp3t7QkIrdXZetrkAptVDISAZR0x0CZS2crQ==",
       "dependencies": {
         "axios": "^0.21.1",
         "elliptic": "^6.5.4",
@@ -1458,7 +1462,7 @@
         "ws": "^7.4.4"
       },
       "engines": {
-        "bee": "0.5.3-acbd0e2",
+        "bee": "0.6.0-67cc8f24",
         "node": ">=12.0.0",
         "npm": ">=6.0.0"
       }
@@ -22816,9 +22820,9 @@
       }
     },
     "@ethersphere/bee-js": {
-      "version": "0.8.1",
+      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.9.0.tgz",
-      "integrity": "sha512-fbxdvAh19hObRrWoim86a+AY8XJOFwE+mla2xvUWewodi8ZfPcZKgTf0YuNftk0M9Z/Q6IfZakEcBaTl1mXj0g==",
+      "integrity": "sha512-C8lam7l+M5lLBOBKXyzIeSI2eE6R3jjBmP9bOJPZF8I42U5myNKp3t7QkIrdXZetrkAptVDISAZR0x0CZS2crQ==",
       "requires": {
         "axios": "^0.21.1",
         "elliptic": "^6.5.4",

package.json

@@ -24,7 +24,7 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^0.8.1",
+    "@ethersphere/bee-js": "^0.9.0",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",

src/components/EthereumAddressCard.tsx

@@ -64,7 +64,7 @@ function EthereumAddressCard(props: Props): ReactElement {
             <Typography variant="subtitle1" gutterBottom>
               Chequebook Contract Address
             </Typography>
-            <EthereumAddress address={props.chequebookAddress?.chequebookaddress} network={'goerli'} />
+            <EthereumAddress address={props.chequebookAddress?.chequebookAddress} network={'goerli'} />
           </CardContent>
         </div>
       )}

src/hooks/accounting.ts

@@ -67,10 +67,8 @@ function mergeAccounting(
   // If there are no cheques (and hence last cashout actions), we don't need to sort and can return values right away
   if (!uncashedAmounts) return Object.values(accounting)
 
-  uncashedAmounts?.forEach(({ peer, cumulativePayout }) => {
+  uncashedAmounts?.forEach(({ peer, uncashedAmount }) => {
-    accounting[peer].uncashedAmount = new Token(
+    accounting[peer].uncashedAmount = new Token(uncashedAmount)
-      accounting[peer].received.toBigNumber.minus(cumulativePayout.toString()),
-    )
   })
 
   return Object.values(accounting).sort((a, b) =>
@@ -93,9 +91,10 @@ export const useAccounting = (): UseAccountingHook => {
     if (isLoadingUncashed || !settlements.settlements || uncashedAmounts || error) return
 
     setIsloadingUncashed(true)
-    const promises = settlements.settlements.settlements.map(({ peer }) =>
+    const promises = settlements.settlements.settlements
-      beeDebugApi.chequebook.getPeerLastCashout(peer),
+      .filter(({ received }) => received.toBigNumber.gt('0'))
-    )
+      .map(({ peer }) => beeDebugApi.chequebook.getPeerLastCashout(peer))
+
     Promise.all(promises)
       .then(setUncashedAmounts)
       .catch(setErr)
@@ -109,7 +108,7 @@ export const useAccounting = (): UseAccountingHook => {
     isLoadingUncashed,
     error,
     accounting,
-    totalsent: settlements.settlements?.totalsent || new Token('0'),
+    totalsent: settlements.settlements?.totalSent || new Token('0'),
-    totalreceived: settlements.settlements?.totalreceived || new Token('0'),
+    totalreceived: settlements.settlements?.totalReceived || new Token('0'),
   }
 }

src/hooks/apiHooks.tsx

@@ -325,8 +325,8 @@ export interface Settlement {
 }
 
 export interface Settlements {
-  totalreceived: Token
+  totalReceived: Token
-  totalsent: Token
+  totalSent: Token
   settlements: Settlement[]
 }
 
@@ -345,10 +345,10 @@ export const useApiSettlements = (): SettlementsHook => {
     setLoading(true)
     beeDebugApi.settlements
       .getSettlements()
-      .then(({ totalreceived, settlements, totalsent }) => {
+      .then(({ totalReceived, settlements, totalSent }) => {
         const set = {
-          totalreceived: new Token(totalreceived),
+          totalReceived: new Token(totalReceived),
-          totalsent: new Token(totalsent),
+          totalSent: new Token(totalSent),
           settlements: settlements.map(({ peer, received, sent }) => ({
             peer,
             received: new Token(received),
@@ -370,7 +370,7 @@ export const useApiSettlements = (): SettlementsHook => {
 
 export interface LastCashout {
   peer: string
-  cumulativePayout: Token
+  uncashedAmount: Token
 }
 
 export interface PeerLastCashoutHook {
@@ -388,8 +388,8 @@ export const useApiPeerLastCashout = (peerId: string): PeerLastCashoutHook => {
     setLoading(true)
     beeDebugApi.chequebook
       .getPeerLastCashout(peerId)
-      .then(({ peer, cumulativePayout }) => {
+      .then(({ peer, uncashedAmount }) => {
-        setPeerCashout({ peer, cumulativePayout: new Token(cumulativePayout) })
+        setPeerCashout({ peer, uncashedAmount: new Token(uncashedAmount.toString()) })
       })
       .catch(error => {
         setError(error)

src/hooks/status.ts

@@ -73,7 +73,7 @@ export const useStatusChequebook = (): StatusChequebookHook => {
   return {
     isLoading: isLoadingChequebookAddress || isLoadingChequebookBalance,
     isOk:
-      Boolean(chequebookAddress?.chequebookaddress) &&
+      Boolean(chequebookAddress?.chequebookAddress) &&
       chequebookBalance !== null &&
       chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0),
     chequebookBalance,

src/pages/files/index.tsx

@@ -1,11 +1,16 @@
 import { ReactElement, useState } from 'react'
-import { beeApi } from '../../services/bee'
 
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Paper, InputBase, IconButton, Button, Container, CircularProgress, FormHelperText } from '@material-ui/core'
+import {
+  Paper,
+  InputBase,
+  IconButton,
+  Typography,
+  Container,
+  CircularProgress,
+  FormHelperText,
+} from '@material-ui/core'
 import { Search } from '@material-ui/icons'
-import { DropzoneArea } from 'material-ui-dropzone'
-import ClipboardCopy from '../../components/ClipboardCopy'
 
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { useApiHealth, useDebugApiHealth } from '../../hooks/apiHooks'
@@ -36,40 +41,11 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function Files(): ReactElement {
   const classes = useStyles()
 
-  const [inputMode, setInputMode] = useState<'download' | 'upload'>('download')
   const [referenceInput, setReferenceInput] = useState('')
   const [referenceError, setReferenceError] = useState<Error | null>(null)
   const { health, isLoadingHealth } = useApiHealth()
   const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
 
-  const [file, setFile] = useState<File | null>(null)
-  const [uploadReference, setUploadReference] = useState('')
-  const [uploadError, setUploadError] = useState<Error | null>(null)
-  const [isUploadingFile, setIsUploadingFile] = useState(false)
-
-  const uploadFile = () => {
-    if (file === null) return
-    setIsUploadingFile(true)
-    setUploadError(null)
-    beeApi.files
-      .uploadFile(file)
-      .then(hash => {
-        setUploadReference(hash)
-        setFile(null)
-      })
-      .catch(setUploadError)
-      .finally(() => {
-        setIsUploadingFile(false)
-      })
-  }
-
-  const handleChange = (files?: File[]) => {
-    if (files) {
-      setFile(files[0])
-      setUploadReference('')
-    }
-  }
-
   const handleReferenceChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setReferenceInput(e.target.value)
 
@@ -90,60 +66,29 @@ export default function Files(): ReactElement {
   return (
     <Container maxWidth="sm">
       <div style={{ marginBottom: '7px' }}>
-        <Button color="primary" style={{ marginRight: '7px' }} onClick={() => setInputMode('download')}>
+        <Typography variant="button" color="primary" style={{ marginRight: '7px' }}>
           Download
-        </Button>
+        </Typography>
-        <Button color="primary" onClick={() => setInputMode('upload')}>
-          Upload
-        </Button>
       </div>
-      {inputMode === 'download' && (
+      <Paper className={classes.root}>
-        <>
+        <InputBase
-          <Paper className={classes.root}>
+          className={classes.input}
-            <InputBase
+          placeholder="Enter swarm reference e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
-              className={classes.input}
+          inputProps={{ 'aria-label': 'retrieve file from swarm' }}
-              placeholder="Enter swarm reference e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
+          value={referenceInput}
-              inputProps={{ 'aria-label': 'retriefe file from swarm' }}
+          onChange={handleReferenceChange}
-              value={referenceInput}
+        />
-              onChange={handleReferenceChange}
+        <IconButton
-            />
+          href={`${apiHost}/files/${referenceInput}`}
-            <IconButton
+          target="_blank"
-              href={`${apiHost}/files/${referenceInput}`}
+          disabled={referenceError !== null || !referenceInput}
-              target="_blank"
+          className={classes.iconButton}
-              disabled={referenceError !== null || !referenceInput}
+          aria-label="download"
-              className={classes.iconButton}
+        >
-              aria-label="download"
+          <Search />
-            >
+        </IconButton>
-              <Search />
+      </Paper>
-            </IconButton>
+      {referenceError && <FormHelperText error>{referenceError.message}</FormHelperText>}
-          </Paper>
-          {referenceError && <FormHelperText error>{referenceError.message}</FormHelperText>}
-        </>
-      )}
-      {inputMode === 'upload' && (
-        <div>
-          <div>
-            <DropzoneArea onChange={handleChange} filesLimit={1} />
-            <div style={{ marginTop: '15px' }}>
-              <Button disabled={!file && isUploadingFile} onClick={() => uploadFile()} className={classes.iconButton}>
-                Upload
-              </Button>
-              {isUploadingFile && (
-                <Container style={{ textAlign: 'center', padding: '50px' }}>
-                  <CircularProgress />
-                </Container>
-              )}
-              {uploadReference && (
-                <div style={{ marginBottom: '15px', display: 'flex' }}>
-                  <span>{uploadReference}</span>
-                  <ClipboardCopy value={uploadReference} />
-                </div>
-              )}
-              {uploadError && <FormHelperText error>{uploadError.message}</FormHelperText>}
-            </div>
-          </div>
-        </div>
-      )}
     </Container>
   )
 }

src/pages/settings/index.tsx

@@ -29,7 +29,6 @@ export default function Settings(): ReactElement {
         </Typography>
         <Paper>
           <TextField
-            id="filled-full-width"
             label="API Endpoint"
             style={{ margin: 0 }}
             placeholder="ex: 127.0.0.0.1:1633"
@@ -51,7 +50,6 @@ export default function Settings(): ReactElement {
         </Paper>
         <Paper style={{ marginTop: '20px' }}>
           <TextField
-            id="filled-full-width"
             label="Debug API Endpoint"
             style={{ margin: 0 }}
             placeholder="ex: 127.0.0.0.1:1635"

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -19,10 +19,10 @@ const ChequebookDeployFund = ({
   return (
     <div>
       <p style={{ marginBottom: '20px', display: 'flex' }}>
-        {chequebookAddress?.chequebookaddress && <DepositModal />}
+        {chequebookAddress?.chequebookAddress && <DepositModal />}
       </p>
       <div style={{ marginBottom: '10px' }}>
-        {!(chequebookAddress?.chequebookaddress && chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)) && (
+        {!(chequebookAddress?.chequebookAddress && chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)) && (
           <div>
             <span>
               Your chequebook is either not deployed or funded. Join{' '}
@@ -36,7 +36,7 @@ const ChequebookDeployFund = ({
       <Typography variant="subtitle1" gutterBottom>
         Chequebook Address
       </Typography>
-      <EthereumAddress address={chequebookAddress?.chequebookaddress} network={'goerli'} />
+      <EthereumAddress address={chequebookAddress?.chequebookAddress} network={'goerli'} />
     </div>
   )
 }

src/pages/status/StatusCard.tsx

@@ -85,11 +85,11 @@ function StatusCard({
               </Typography>
               <Typography component="div" variant="subtitle2" gutterBottom>
                 <span>PUBLIC KEY: </span>
-                <span>{nodeAddresses?.public_key ? nodeAddresses.public_key : '-'}</span>
+                <span>{nodeAddresses?.publicKey ? nodeAddresses.publicKey : '-'}</span>
               </Typography>
               <Typography component="div" variant="subtitle2" gutterBottom>
                 <span>PSS PUBLIC KEY: </span>
-                <span>{nodeAddresses?.pss_public_key ? nodeAddresses.pss_public_key : '-'}</span>
+                <span>{nodeAddresses?.pssPublicKey ? nodeAddresses.pssPublicKey : '-'}</span>
               </Typography>
               <Typography component="div" variant="subtitle2" gutterBottom>
                 <span>OVERLAY ADDRESS (PEER ID): </span>

src/services/bee.tsx

@@ -1,4 +1,5 @@
 import {
+  Address,
   AllSettlements,
   BalanceResponse,
   Bee,
@@ -33,8 +34,8 @@ export const beeApi = {
     },
   },
   files: {
-    uploadFile(file: File): Promise<Reference> {
+    uploadFile(postageBatchId: Address, file: File): Promise<Reference> {
-      return beeJSClient().uploadFile(file)
+      return beeJSClient().uploadFile(postageBatchId, file)
     },
     downloadFile(hash: string | Reference): Promise<FileData<Data>> {
       return beeJSClient().downloadFile(hash)