feat: bee-js revamp (#690)

* chore: initial commit

* refactor: remove unnecessary wrappers

* style: add missing newline

* chore: bump bee-js

* chore: ignore any cast in fdp

* fix: remove cid import

* fix: make TextEncoder and TextDecoder available in jest

* refactor: dedupe stamp ttl second conversion

* refactor: use convenience methods from bee-js

* feat: update to bee-js for restored ens support

* fix: bump bee-js to get download fix

* fix: resolve feed before downloading reference

* fix: fix token displays

* fix: fix token input modal error message

* refactor: remove wallet balance provider

* chore: remove dead code

* refactor: upcoming bee js 0.15.0 (#692)

* chore: initial commit

* fix: do not break page when duration seconds is 0

* ci: remove cache

* chore: upgrade bee-js

* feat: bee-js and bee v2.6 compatibility

* chore: switch upcoming/bee-js to ethersphere/bee-js
This commit is contained in:
Cafe137
2025-07-16 17:10:14 +02:00
committed by GitHub
parent 082a8f52ef
commit 1249c0df71
62 changed files with 675 additions and 16303 deletions
+1 -1
View File
@@ -9,7 +9,7 @@ interface Props {
}
export function PostageStamp({ stamp, shorten }: Props): ReactElement {
const batchId = shorten ? stamp.batchID.slice(0, 8) : stamp.batchID
const batchId = shorten ? stamp.batchID.toHex().slice(0, 8) : stamp.batchID
const label = `${batchId}${stamp.label ? ` - ${stamp.label}` : ''}`
return (
@@ -1,5 +1,5 @@
import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
import { Box, Grid, IconButton, Typography, createStyles, makeStyles } from '@material-ui/core'
import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
import BigNumber from 'bignumber.js'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useState } from 'react'
@@ -13,7 +13,7 @@ import { Context as BeeContext } from '../../providers/Bee'
import { Context as SettingsContext } from '../../providers/Settings'
import { Context as StampsContext } from '../../providers/Stamps'
import { ROUTES } from '../../routes'
import { calculateStampPrice, convertAmountToSeconds, secondsToTimeString, waitUntilStampExists } from '../../utils'
import { secondsToTimeString } from '../../utils'
import { getHumanReadableFileSize } from '../../utils/file'
interface Props {
@@ -61,18 +61,22 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
const { enqueueSnackbar } = useSnackbar()
function getTtl(amount: number): string {
function getTtl(amount: bigint): string {
const isCurrentPriceAvailable = chainState && chainState.currentPrice
if (amount <= 0 || !isCurrentPriceAvailable) {
return '-'
}
const pricePerBlock = Number.parseInt(chainState.currentPrice, 10)
const pricePerBlock = chainState.currentPrice
return `${secondsToTimeString(
convertAmountToSeconds(amount, pricePerBlock),
)} (with price of ${pricePerBlock.toFixed(0)} PLUR per block)`
try {
return `${secondsToTimeString(
Utils.getStampDuration(amount, pricePerBlock, 5).toSeconds(),
)} (with price of ${pricePerBlock} PLUR per block)`
} catch {
return `0 seconds (with price of ${pricePerBlock} PLUR per block)`
}
}
function getPrice(depth: number, amount: bigint): string {
@@ -82,9 +86,9 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
return '-'
}
const price = calculateStampPrice(depth, amount)
const price = Utils.getStampCost(depth, amount)
return `${price.toSignificantDigits()} xBZZ`
return `${price.toSignificantDigits(4)} xBZZ`
}
async function submit() {
@@ -107,8 +111,7 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
immutableFlag: immutable,
}
const batchId = await beeApi.createPostageBatch(amount.toString(), depth, options)
await waitUntilStampExists(batchId, beeApi)
await beeApi.createPostageBatch(amount.toString(), depth, options)
await refresh()
onFinished()
} catch (e) {
@@ -173,7 +176,7 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
return '-'
}
const theoreticalMaximumVolume = getHumanReadableFileSize(Utils.getStampMaximumCapacityBytes(depth))
const theoreticalMaximumVolume = getHumanReadableFileSize(Utils.getStampTheoreticalBytes(depth))
const effectiveVolume = getHumanReadableFileSize(Utils.getStampEffectiveBytes(depth))
return (
@@ -227,7 +230,7 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
<Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
<Grid container justifyContent="space-between">
<Typography>Corresponding TTL (Time to live)</Typography>
<Typography>{!amountError && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'}</Typography>
<Typography>{!amountError && amountInput ? getTtl(BigInt(amountInput)) : '-'}</Typography>
</Grid>
</Box>
{amountError && <Typography>{amountError}</Typography>}
+3 -3
View File
@@ -14,7 +14,7 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
if (!stamps) {
return
}
const stamp = stamps.find(x => x.batchID === stampId)
const stamp = stamps.find(x => x.batchID.toHex() === stampId)
if (stamp) {
onSelect(stamp)
@@ -24,8 +24,8 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
return (
<SwarmSelect
options={(stamps || []).map(x => ({
label: x.label ? x.batchID.slice(0, 8) + ' - ' + x.label : x.batchID.slice(0, 8),
value: x.batchID,
label: x.label ? x.batchID.toHex().slice(0, 8) + ' - ' + x.label : x.batchID.toHex().slice(0, 8),
value: x.batchID.toHex(),
}))}
onChange={event => onChange(event.target.value as string)}
defaultValue={defaultValue}
@@ -1,6 +1,6 @@
import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
import { Box, Button, Grid, Slider, Typography } from '@material-ui/core'
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
import { Duration, PostageBatchOptions, Size, Utils } from '@ethersphere/bee-js'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useState } from 'react'
import { Link } from 'react-router-dom'
@@ -10,7 +10,7 @@ import { SwarmTextInput } from '../../components/SwarmTextInput'
import { Context as SettingsContext } from '../../providers/Settings'
import { Context as StampsContext } from '../../providers/Stamps'
import { ROUTES } from '../../routes'
import { calculateStampPrice, convertAmountToSeconds, secondsToTimeString, waitUntilStampExists } from '../../utils'
import { secondsToTimeString } from '../../utils'
interface Props {
onFinished: () => void
@@ -46,8 +46,8 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
const { refresh } = useContext(StampsContext)
const { beeApi } = useContext(SettingsContext)
const [depthInput, setDepthInput] = useState<number>(Utils.getDepthForCapacity(4))
const [amountInput, setAmountInput] = useState<string>(Utils.getAmountForTtl(30))
const [depthInput, setDepthInput] = useState<number>(Utils.getDepthForSize(Size.fromGigabytes(4)))
const [amountInput, setAmountInput] = useState<bigint>(Utils.getAmountForDuration(Duration.fromDays(30), 26500, 5))
const [labelInput, setLabelInput] = useState('')
const [submitting, setSubmitting] = useState(false)
const [buttonValue, setButtonValue] = useState(4)
@@ -56,24 +56,24 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
if (typeof newValue !== 'number') {
return
}
const amountValue = Utils.getAmountForTtl(newValue)
const amountValue = Utils.getAmountForDuration(Duration.fromDays(newValue), 26500, 5)
setAmountInput(amountValue)
}
const { enqueueSnackbar } = useSnackbar()
function getTtl(amount: string): string {
function getTtl(amount: bigint): string {
const pricePerBlock = 24000
return `${secondsToTimeString(
convertAmountToSeconds(parseInt(amount, 10), pricePerBlock),
)} (with price of ${pricePerBlock.toFixed(0)} PLUR per block)`
Utils.getStampDuration(amount, pricePerBlock, 5).toSeconds(),
)} (with price of ${pricePerBlock} PLUR per block)`
}
function getPrice(depth: number, amount: bigint): string {
const price = calculateStampPrice(depth, amount)
const price = Utils.getStampCost(depth, amount)
return `${price.toSignificantDigits()} xBZZ`
return `${price.toSignificantDigits(4)} xBZZ`
}
async function submit() {
@@ -96,8 +96,7 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
immutableFlag: true,
}
const batchId = await beeApi.createPostageBatch(amount.toString(), depth, options)
await waitUntilStampExists(batchId, beeApi)
await beeApi.createPostageBatch(amount.toString(), depth, options)
await refresh()
onFinished()
} catch (e) {
@@ -109,7 +108,7 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
function handleBatchSize(gigabytes: number) {
setButtonValue(gigabytes)
const capacity = Utils.getDepthForCapacity(gigabytes)
const capacity = Utils.getDepthForSize(Size.fromGigabytes(gigabytes))
setDepthInput(capacity)
}
+3 -3
View File
@@ -4,7 +4,7 @@ import Dialog from '@material-ui/core/Dialog'
import DialogContent from '@material-ui/core/DialogContent'
import DialogTitle from '@material-ui/core/DialogTitle'
import { Check, Clear } from '@material-ui/icons'
import React, { ReactElement, useState } from 'react'
import { ReactElement, useState } from 'react'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import { SwarmSelect } from '../../components/SwarmSelect'
import { EnrichedPostageBatch } from '../../providers/Stamps'
@@ -39,7 +39,7 @@ export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): R
const classes = useStyles()
function onChange(stampId: string) {
const stamp = stamps.find(x => x.batchID === stampId)
const stamp = stamps.find(x => x.batchID.toHex() === stampId)
if (stamp) {
setSelectedStamp(stamp)
@@ -66,7 +66,7 @@ export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): R
</DialogTitle>
<DialogContent>
<SwarmSelect
options={stamps.map(x => ({ label: x.batchID, value: x.batchID }))}
options={stamps.map(x => ({ label: x.batchID.toHex(), value: x.batchID.toHex() }))}
onChange={event => onChange(event.target.value as string)}
/>
</DialogContent>
+3 -7
View File
@@ -28,10 +28,10 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
<ExpandableList label="Postage Stamps" defaultOpen>
{postageStamps.map(stamp => (
<ExpandableElement
key={stamp.batchID}
key={stamp.batchID.toHex()}
expandable={
<>
<ExpandableListItemKey label="Batch ID" value={stamp.batchID} />
<ExpandableListItemKey label="Batch ID" value={stamp.batchID.toHex()} />
<ExpandableListItem label="Depth" value={String(stamp.depth)} />
<ExpandableListItem
label="Capacity"
@@ -40,13 +40,9 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
)}`}
/>
<ExpandableListItem label="Amount" value={parseInt(stamp.amount, 10).toLocaleString()} />
<ExpandableListItem
label="Expires in"
value={stamp.batchTTL === -1 ? 'does not expire' : `${secondsToTimeString(stamp.batchTTL)}`}
/>
<ExpandableListItem label="Expires in" value={secondsToTimeString(stamp.duration.toSeconds())} />
<ExpandableListItem label="Label" value={stamp.label} />
<ExpandableListItem label="Usable" value={stamp.usable ? 'yes' : 'no'} />
<ExpandableListItem label="Exists" value={stamp.exists ? 'yes' : 'no'} />
<ExpandableListItem label="Immutable" value={stamp.immutableFlag ? 'yes' : 'no'} />
<ExpandableListItem label="Purchase Block Number" value={stamp.blockNumber} />
<ExpandableListItemActions>