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>
2021-05-20 18:45:35 +02:00
parent edd4a2fc11
commit 7f5fbd3fb6
11 changed files with 70 additions and 123 deletions
@@ -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",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.8.1.tgz",
-      "integrity": "sha512-fbxdvAh19hObRrWoim86a+AY8XJOFwE+mla2xvUWewodi8ZfPcZKgTf0YuNftk0M9Z/Q6IfZakEcBaTl1mXj0g==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.9.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.8.1.tgz",
-      "integrity": "sha512-fbxdvAh19hObRrWoim86a+AY8XJOFwE+mla2xvUWewodi8ZfPcZKgTf0YuNftk0M9Z/Q6IfZakEcBaTl1mXj0g==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-0.9.0.tgz",
+      "integrity": "sha512-C8lam7l+M5lLBOBKXyzIeSI2eE6R3jjBmP9bOJPZF8I42U5myNKp3t7QkIrdXZetrkAptVDISAZR0x0CZS2crQ==",
      "requires": {
        "axios": "^0.21.1",
        "elliptic": "^6.5.4",
@@ -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",
@@ -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>
      )}
@@ -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'),
  }
 }
@@ -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)
@@ -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,
@@ -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>
  )
 }
@@ -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"
@@ -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>
  )
 }
@@ -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>
@@ -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)