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 <[email protected]> * chore: update to bee-js 0.9.0 Co-authored-by: Attila Gazso <[email protected]>
ethersphere · May 20, 2021 · 7f5fbd3 · 7f5fbd3
1 parent edd4a2f
commit 7f5fbd3
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 123 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/components/EthereumAddressCard.tsx b/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>
       )}

diff --git a/src/hooks/accounting.ts b/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 }) => {
-    accounting[peer].uncashedAmount = new Token(
-      accounting[peer].received.toBigNumber.minus(cumulativePayout.toString()),
-    )
+  uncashedAmounts?.forEach(({ peer, uncashedAmount }) => {
+    accounting[peer].uncashedAmount = new Token(uncashedAmount)
   })
 
   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 }) =>
-      beeDebugApi.chequebook.getPeerLastCashout(peer),
-    )
+    const promises = settlements.settlements.settlements
+      .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'),
-    totalreceived: settlements.settlements?.totalreceived || new Token('0'),
+    totalsent: settlements.settlements?.totalSent || new Token('0'),
+    totalreceived: settlements.settlements?.totalReceived || new Token('0'),
   }
 }
diff --git a/src/hooks/apiHooks.tsx b/src/hooks/apiHooks.tsx
@@ -325,8 +325,8 @@ export interface Settlement {
 }
 
 export interface Settlements {
-  totalreceived: Token
-  totalsent: Token
+  totalReceived: 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),
-          totalsent: new Token(totalsent),
+          totalReceived: new Token(totalReceived),
+          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 }) => {
-        setPeerCashout({ peer, cumulativePayout: new Token(cumulativePayout) })
+      .then(({ peer, uncashedAmount }) => {
+        setPeerCashout({ peer, uncashedAmount: new Token(uncashedAmount.toString()) })
       })
       .catch(error => {
         setError(error)

diff --git a/src/hooks/status.ts b/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,

diff --git a/src/pages/files/index.tsx b/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>
-        <Button color="primary" onClick={() => setInputMode('upload')}>
-          Upload
-        </Button>
+        </Typography>
       </div>
-      {inputMode === 'download' && (
-        <>
-          <Paper className={classes.root}>
-            <InputBase
-              className={classes.input}
-              placeholder="Enter swarm reference e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
-              inputProps={{ 'aria-label': 'retriefe file from swarm' }}
-              value={referenceInput}
-              onChange={handleReferenceChange}
-            />
-            <IconButton
-              href={`${apiHost}/files/${referenceInput}`}
-              target="_blank"
-              disabled={referenceError !== null || !referenceInput}
-              className={classes.iconButton}
-              aria-label="download"
-            >
-              <Search />
-            </IconButton>
-          </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>
-      )}
+      <Paper className={classes.root}>
+        <InputBase
+          className={classes.input}
+          placeholder="Enter swarm reference e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
+          inputProps={{ 'aria-label': 'retrieve file from swarm' }}
+          value={referenceInput}
+          onChange={handleReferenceChange}
+        />
+        <IconButton
+          href={`${apiHost}/files/${referenceInput}`}
+          target="_blank"
+          disabled={referenceError !== null || !referenceInput}
+          className={classes.iconButton}
+          aria-label="download"
+        >
+          <Search />
+        </IconButton>
+      </Paper>
+      {referenceError && <FormHelperText error>{referenceError.message}</FormHelperText>}
     </Container>
   )
 }
diff --git a/src/pages/settings/index.tsx b/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"

diff --git a/src/pages/status/SetupSteps/ChequebookDeployFund.tsx b/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>
   )
 }

diff --git a/src/pages/status/StatusCard.tsx b/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>

diff --git a/src/services/bee.tsx b/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> {
-      return beeJSClient().uploadFile(file)
+    uploadFile(postageBatchId: Address, file: File): Promise<Reference> {
+      return beeJSClient().uploadFile(postageBatchId, file)
     },
     downloadFile(hash: string | Reference): Promise<FileData<Data>> {
       return beeJSClient().downloadFile(hash)