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:
@@ -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>}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user