chore: release 0.5.0 (#163)

* fix: clear dropzone state after upload

* fix: avoid state update on unmounted component

.env.development

@@ -3,5 +3,5 @@ REACT_APP_BEE_HOST=http://localhost:1633
 REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
 REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
 REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_ETHERSCAN_HOST=etherscan.io
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
+REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
+REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee

.env.production

@@ -2,5 +2,5 @@ REACT_APP_BEE_HOST=http://localhost:1633
 REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
 REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
 REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_ETHERSCAN_HOST=etherscan.io
+REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
 REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [0.5.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.4.0...v0.5.0) (2021-08-09)
+
+
+### Features
+
+* updated troubleshooting instructions and links for mainnet ([#161](https://www.github.com/ethersphere/bee-dashboard/issues/161)) ([960ffb8](https://www.github.com/ethersphere/bee-dashboard/commit/960ffb8fdd6cbfe4928b758da6cac9ba94050c00))
+
+
+### Bug Fixes
+
+* amend readme ([#155](https://www.github.com/ethersphere/bee-dashboard/issues/155)) ([be8b885](https://www.github.com/ethersphere/bee-dashboard/commit/be8b88516b00d79a623798588d3d4dac3340e8b2))
+
+## [0.4.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.3.1...v0.4.0) (2021-06-29)
+
+
+### Features
+
+* display postage batch usage percentage ([#149](https://www.github.com/ethersphere/bee-dashboard/issues/149)) ([6f645dc](https://www.github.com/ethersphere/bee-dashboard/commit/6f645dc6c357cb9d86cec15e454b361bc871bec6))
+
+
+### Bug Fixes
+
+* clear dropzone state after upload ([#150](https://www.github.com/ethersphere/bee-dashboard/issues/150)) ([b190cac](https://www.github.com/ethersphere/bee-dashboard/commit/b190cac7064ad3dffb770c5a83d3db4a14d39607))
+
 ### [0.3.1](https://www.github.com/ethersphere/bee-dashboard/compare/v0.3.0...v0.3.1) (2021-06-03)
 
 

README.md

@@ -67,6 +67,8 @@ git clone git@github.com:ethersphere/bee-dashboard.git
 
 cd  bee-dashboard
 
+npm i
+
 npm start
 ```
 

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ethersphere/bee-dashboard",
-      "version": "0.3.1",
+      "version": "0.5.0",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@ethersphere/bee-js": "^0.10.0",
+        "@ethersphere/bee-js": "^1.0.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": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-1.0.0.tgz",
+      "integrity": "sha512-u+TnKf0loAQba7AfZ54kXIEWjNdqVMUR6NXwINhHa2IdoD2b52rcuP96eMImlUm4tEJkxi2yAS+lcIZ2U9/1Vw==",
       "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-2572fa48",
         "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": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-1.0.0.tgz",
+      "integrity": "sha512-u+TnKf0loAQba7AfZ54kXIEWjNdqVMUR6NXwINhHa2IdoD2b52rcuP96eMImlUm4tEJkxi2yAS+lcIZ2U9/1Vw==",
       "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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -24,7 +24,7 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^0.10.0",
+    "@ethersphere/bee-js": "^1.0.0",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",

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/components/CashoutModal.tsx

@@ -40,7 +40,7 @@ export default function DepositModal({ peerId, uncashedAmount }: Props): ReactEl
           enqueueSnackbar(
             <span>
               Successfully cashed out cheque. Transaction
-              <EthereumAddress hideBlockie transaction address={res} network={'goerli'} />
+              <EthereumAddress hideBlockie transaction address={res} />
             </span>,
             { variant: 'success' },
           )

src/components/EthereumAddress.tsx

@@ -7,7 +7,6 @@ import { ReactElement } from 'react'
 
 interface Props {
   address: string | undefined
-  network?: string
   hideBlockie?: boolean
   transaction?: boolean
   truncate?: boolean
@@ -37,9 +36,9 @@ export default function EthereumAddress(props: Props): ReactElement {
                     }
                   : { marginRight: '7px' }
               }
-              href={`https://${props.network}.${process.env.REACT_APP_ETHERSCAN_HOST}/${
-                props.transaction ? 'tx' : 'address'
-              }/${props.address}`}
+              href={`${process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${
+                props.address
+              }`}
               target="_blank"
               rel="noreferrer"
             >

src/components/EthereumAddressCard.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import { ReactElement } from 'react'
 
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { Card, CardContent, Typography } from '@material-ui/core/'
@@ -49,7 +49,7 @@ function EthereumAddressCard(props: Props): ReactElement {
             <Typography variant="subtitle1" gutterBottom>
               Ethereum Address
             </Typography>
-            <EthereumAddress address={props.nodeAddresses?.ethereum} network={'goerli'} />
+            <EthereumAddress address={props.nodeAddresses?.ethereum} />
           </CardContent>
         </div>
       )}
@@ -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} />
           </CardContent>
         </div>
       )}

src/components/NavBar.tsx

@@ -1,7 +1,7 @@
 import { useState, ReactElement } from 'react'
 
 import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Toolbar, Chip, IconButton } from '@material-ui/core/'
+import { Toolbar, IconButton } from '@material-ui/core/'
 
 import { Sun, Moon } from 'react-feather'
 
@@ -13,7 +13,6 @@ const useStyles = makeStyles(() =>
       width: `calc(100% - ${drawerWidth}px)`,
       marginLeft: drawerWidth,
     },
-    network: {},
   }),
 )
 interface Props {
@@ -42,16 +41,11 @@ export default function SideBar(props: Props): ReactElement {
     <div>
       <div style={{ display: 'fixed' }} className={classes.appBar}>
         <Toolbar style={{ display: 'flex' }}>
-          <Chip style={{ marginLeft: '7px' }} size="small" label="Goerli" className={classes.network} />
           <div style={{ width: '100%' }}>
             <div style={{ float: 'right' }}>
               <IconButton style={{ marginRight: '10px' }} aria-label="dark-mode" onClick={() => switchTheme()}>
                 {props.themeMode === 'dark' ? <Moon /> : <Sun />}
               </IconButton>
-              {/* <Chip 
-              label="Connect Wallet"
-              color="primary"
-              /> */}
             </div>
           </div>
         </Toolbar>

src/pages/files/SelectStamp.tsx

@@ -1,15 +1,15 @@
-import React, { ReactElement } from 'react'
 import Button from '@material-ui/core/Button'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
 import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import { PostageBatch } from '@ethersphere/bee-js'
+import React, { ReactElement } from 'react'
 import PeerDetailDrawer from '../../components/PeerDetail'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 interface Props {
-  stamps: PostageBatch[] | null
-  selectedStamp: PostageBatch | null
-  setSelected: (stamp: PostageBatch) => void
+  stamps: EnrichedPostageBatch[] | null
+  selectedStamp: EnrichedPostageBatch | null
+  setSelected: (stamp: EnrichedPostageBatch) => void
 }
 
 export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props): ReactElement | null {
@@ -38,7 +38,7 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
             }}
             selected={stamp.batchID === selectedStamp?.batchID}
           >
-            <ListItemIcon>{stamp.utilization}</ListItemIcon>
+            <ListItemIcon>{stamp.usageText}</ListItemIcon>
             <PeerDetailDrawer peerId={stamp.batchID} />
           </MenuItem>
         ))}

src/pages/files/Upload.tsx

@@ -1,33 +1,35 @@
-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, EnrichedPostageBatch } 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 [dropzoneKey, setDropzoneKey] = useState(0)
   const [file, setFile] = useState<File | null>(null)
   const [uploadReference, setUploadReference] = useState('')
   const [isUploadingFile, setIsUploadingFile] = useState(false)
 
-  const [selectedStamp, setSelectedStamp] = useState<PostageBatch | null>(null)
+  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
 
   const { isLoading, error, stamps } = useContext(Context)
   const { enqueueSnackbar } = useSnackbar()
 
-  // Choose a postage stamp that has the lowest utilization
+  // Choose a postage stamp that has the lowest usage
   useEffect(() => {
     if (!selectedStamp && stamps && stamps.length > 0) {
       const stamp = stamps.reduce((prev, curr) => {
-        if (curr.utilization < prev.utilization) return curr
+        if (curr.usage < prev.usage) return curr
 
         return prev
       }, stamps[0])
@@ -42,8 +44,11 @@ export default function Files(): ReactElement {
     beeApi.files
       .uploadFile(selectedStamp.batchID, file)
       .then(hash => {
-        setUploadReference(hash)
-        setFile(null)
+        window.setTimeout(() => {
+          setFile(null)
+          setUploadReference(hash)
+          setDropzoneKey(dropzoneKey + 1)
+        }, 0)
       })
       .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
       .finally(() => {
@@ -54,21 +59,25 @@ export default function Files(): ReactElement {
   const handleChange = (files?: File[]) => {
     if (files) {
       setFile(files[0])
-      setUploadReference('')
     }
   }
 
   return (
     <div>
       <div>
-        <DropzoneArea onChange={handleChange} filesLimit={1} />
+        <DropzoneArea
+          key={'dropzone-' + dropzoneKey}
+          onChange={handleChange}
+          filesLimit={1}
+          maxFileSize={MAX_FILE_SIZE}
+        />
         <div style={{ marginTop: '15px' }}>
           {selectedStamp && (
             <div style={{ display: 'flex' }}>
               <small>
                 with Postage Stamp{' '}
                 <Chip
-                  avatar={<Avatar>{selectedStamp.utilization}</Avatar>}
+                  avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
                   label={<PeerDetailDrawer peerId={selectedStamp.batchID} characterLength={6} />}
                   deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
                   onDelete={() => {} /* eslint-disable-line*/}
@@ -82,6 +91,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/pages/stamps/StampsTable.tsx

@@ -1,10 +1,9 @@
-import type { ReactElement } from 'react'
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Paper } from '@material-ui/core'
-
+import type { ReactElement } from 'react'
 import ClipboardCopy from '../../components/ClipboardCopy'
 import PeerDetailDrawer from '../../components/PeerDetail'
-import { PostageBatch } from '@ethersphere/bee-js'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 const useStyles = makeStyles({
   table: {
@@ -16,7 +15,7 @@ const useStyles = makeStyles({
   },
 })
 interface Props {
-  postageStamps: PostageBatch[] | null
+  postageStamps: EnrichedPostageBatch[] | null
 }
 
 function StampsTable({ postageStamps }: Props): ReactElement | null {
@@ -29,11 +28,11 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
         <TableHead>
           <TableRow>
             <TableCell>Batch ID</TableCell>
-            <TableCell align="right">Utilization</TableCell>
+            <TableCell align="right">Usage</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {postageStamps.map(({ batchID, utilization }) => (
+          {postageStamps.map(({ batchID, usageText }) => (
             <TableRow key={batchID}>
               <TableCell>
                 <div style={{ display: 'flex' }}>
@@ -43,7 +42,7 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
                   <ClipboardCopy value={batchID} />
                 </div>
               </TableCell>
-              <TableCell className={classes.values}>{utilization}</TableCell>
+              <TableCell className={classes.values}>{usageText}</TableCell>
             </TableRow>
           ))}
         </TableBody>

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -8,12 +8,7 @@ interface Props extends StatusChequebookHook {
   ethereumAddress?: string
 }
 
-const ChequebookDeployFund = ({
-  isLoading,
-  chequebookAddress,
-  chequebookBalance,
-  ethereumAddress,
-}: Props): ReactElement | null => {
+const ChequebookDeployFund = ({ isLoading, chequebookAddress, chequebookBalance }: Props): ReactElement | null => {
   if (isLoading) return null
 
   return (
@@ -25,10 +20,12 @@ const ChequebookDeployFund = ({
         {!(chequebookAddress?.chequebookAddress && chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)) && (
           <div>
             <span>
-              Your chequebook is either not deployed or funded. Join{' '}
-              <a href="https://discord.gg/ykCupZMuww">our discord channel</a>, get verified and send a message{' '}
-              <pre>sprinkle {ethereumAddress || '<YOUR BEE NODE ETH ADDRESS>'}</pre> in the <pre>#faucet-request</pre>{' '}
-              channel to get Goerli ETH and Goerli BZZ token.
+              Your chequebook is either not deployed or funded. To run the node you will need xDAI and xBZZ on the xDai
+              network. You may need to aquire BZZ through (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and
+              bridge it to the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To
+              pay the transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it
+              to xDai network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+              <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
             </span>
           </div>
         )}
@@ -36,7 +33,7 @@ const ChequebookDeployFund = ({
       <Typography variant="subtitle1" gutterBottom>
         Chequebook Address
       </Typography>
-      <EthereumAddress address={chequebookAddress?.chequebookAddress} network={'goerli'} />
+      <EthereumAddress address={chequebookAddress?.chequebookAddress} />
     </div>
   )
 }

src/pages/status/SetupSteps/EthereumConnectionCheck.tsx

@@ -13,28 +13,24 @@ export default function EthereumConnectionCheck({ isLoading, isOk, nodeAddresses
         <Typography variant="subtitle1" gutterBottom>
           Node Address
         </Typography>
-        <EthereumAddress address={nodeAddresses?.ethereum} network={'goerli'} />
+        <EthereumAddress address={nodeAddresses?.ethereum} />
       </div>
     )
   }
 
   return (
     <p>
-      Your Bee node must have access to the Ethereum blockchain, so that it can interact and deploy your chequebook
+      Your Bee node must have access to the xDai blockchain, so that it can interact and deploy your chequebook
       contract. You can run{' '}
-      <a href="https://github.com/goerli/testnet" rel="noreferrer" target="_blank">
-        your own Goerli node
+      <a href="https://www.xdaichain.com/" rel="noreferrer" target="_blank">
+        your own xDai node
       </a>
-      , or use a provider such as{' '}
-      <a href="https://rpc.slock.it/goerli" rel="noreferrer" target="_blank">
-        rpc.slock.it/goerli
-      </a>{' '}
-      or{' '}
-      <a href="https://infura.io/" rel="noreferrer" target="_blank">
-        Infura
+      , or use a provider instead - we recommend{' '}
+      <a href="https://getblock.io/" rel="noreferrer" target="_blank">
+        Getblock
       </a>
-      . By default, Bee expects a local Goerli node at http://localhost:8545. To use a provider instead, simply change
-      your <strong>--swap-endpoint</strong> in your configuration file.
+      . By default, Bee expects a local node at http://localhost:8545. To use a provider instead, simply change the{' '}
+      <strong>swap-endpoint</strong> in your configuration file.
     </p>
   )
 }

src/providers/Stamps.tsx

@@ -2,8 +2,13 @@ import { PostageBatch } from '@ethersphere/bee-js'
 import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
 import { beeApi } from '../services/bee'
 
+export interface EnrichedPostageBatch extends PostageBatch {
+  usage: number
+  usageText: string
+}
+
 interface ContextInterface {
-  stamps: PostageBatch[] | null
+  stamps: EnrichedPostageBatch[] | null
   error: Error | null
   isLoading: boolean
   lastUpdate: number | null
@@ -29,8 +34,21 @@ interface Props {
   children: ReactChild
 }
 
+function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
+  const { depth, bucketDepth, utilization } = postageBatch
+
+  const usage = utilization / Math.pow(2, depth - bucketDepth)
+  const usageText = `${Math.ceil(usage * 100)}%`
+
+  return {
+    ...postageBatch,
+    usage,
+    usageText,
+  }
+}
+
 export function Provider({ children }: Props): ReactElement {
-  const [stamps, setStamps] = useState<PostageBatch[] | null>(initialValues.stamps)
+  const [stamps, setStamps] = useState<EnrichedPostageBatch[] | null>(initialValues.stamps)
   const [error, setError] = useState<Error | null>(initialValues.error)
   const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
   const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
@@ -44,7 +62,7 @@ export function Provider({ children }: Props): ReactElement {
       setIsLoading(true)
       const stamps = await beeApi.stamps.getPostageStamps()
 
-      setStamps(stamps)
+      setStamps(stamps.map(enrichStamp))
       setLastUpdate(Date.now())
     } catch (e) {
       setError(e)

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