woggioni-opencode-agent/bee-dashboard
1
0
Fork 0
Code Actions Packages Releases Activity

feat: add postage stamp guide (#455)

Browse Source 
* feat: add postage stamp guide to create new postage stamp

* feat: add the docs to the upload page as well
This commit is contained in:
Vojtech Simetka
2022-06-28 17:29:46 +02:00
committed by GitHub
parent a3c02dbf8a
commit fb8775d0a7
3 changed files with 109 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/files/UploadActionBar.tsx
+11 -1
View File
@@ -49,7 +49,17 @@ export function UploadActionBar({
</SwarmButton> </SwarmButton>
</ExpandableListItemActions> </ExpandableListItemActions>
</Box> </Box>
<DocumentationText>You need a postage stamp to upload.</DocumentationText> <DocumentationText>
You need a postage stamp to upload. Find out more in{' '}
<a
href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
target="_blank"
rel="noreferrer"
>
this guide
</a>
.
</DocumentationText>
</> </>
) )
} }
src/pages/rpc/index.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export default function Index(): ReactElement {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
this guide. this guide
</a> </a>
. .
</Typography> </Typography>
src/pages/stamps/PostageStampCreation.tsx
+97 -79
View File
@@ -70,97 +70,115 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
} }
return ( return (
<Formik <>
initialValues={initialFormValues} <Box mb={4}>
onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => { <Typography>
try { To upload data to Swarm network, you will need to purchase a postage stamp. If you&apos;re not familiar with
// This is really just a typeguard, the validation pretty much guarantees these will have the right values this, please read{' '}
if (!values.depth || !values.amount) return <a
href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
target="_blank"
rel="noreferrer"
>
this guide
</a>
.
</Typography>
</Box>
<Formik
initialValues={initialFormValues}
onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
try {
// This is really just a typeguard, the validation pretty much guarantees these will have the right values
if (!values.depth || !values.amount) return
if (!beeDebugApi) return if (!beeDebugApi) return
const amount = BigInt(values.amount) const amount = BigInt(values.amount)
const depth = Number.parseInt(values.depth) const depth = Number.parseInt(values.depth)
const options = values.label ? { label: values.label } : undefined const options = values.label ? { label: values.label } : undefined
await beeDebugApi.createPostageBatch(amount.toString(), depth, options) await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
actions.resetForm() actions.resetForm()
await refresh() await refresh()
onFinished() onFinished()
} catch (e) { } catch (e) {
enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' }) enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
actions.setSubmitting(false) actions.setSubmitting(false)
} }
}} }}
validate={(values: FormValues) => { validate={(values: FormValues) => {
const errors: FormErrors = {} const errors: FormErrors = {}
// Depth // Depth
if (!values.depth) errors.depth = 'Required field' if (!values.depth) errors.depth = 'Required field'
else { else {
const depth = new BigNumber(values.depth) const depth = new BigNumber(values.depth)
if (!depth.isInteger()) errors.depth = 'Depth must be an integer' if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
else if (depth.isLessThan(17)) errors.depth = 'Minimal depth is 17' else if (depth.isLessThan(17)) errors.depth = 'Minimal depth is 17'
else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255' else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
} }
// Amount // Amount
if (!values.amount) errors.amount = 'Required field' if (!values.amount) errors.amount = 'Required field'
else { else {
const amount = new BigNumber(values.amount) const amount = new BigNumber(values.amount)
if (!amount.isInteger()) errors.amount = 'Amount must be an integer' if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0' else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
} }
return errors return errors
}} }}
> >
{({ submitForm, isValid, isSubmitting, values, errors }) => ( {({ submitForm, isValid, isSubmitting, values, errors }) => (
<Form> <Form>
<Box mb={2}> <Box mb={2}>
<SwarmTextInput name="depth" label="Depth" formik /> <SwarmTextInput name="depth" label="Depth" formik />
<Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}> <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
<Grid container justifyContent="space-between"> <Grid container justifyContent="space-between">
<Typography>Corresponding file size</Typography> <Typography>Corresponding file size</Typography>
<Typography>{!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}</Typography> <Typography>
</Grid> {!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}
</Typography>
</Grid>
</Box>
</Box> </Box>
</Box> <Box mb={2}>
<Box mb={2}> <SwarmTextInput name="amount" label="Amount" formik />
<SwarmTextInput name="amount" label="Amount" formik /> <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
<Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}> <Grid container justifyContent="space-between">
<Typography>Corresponding TTL (Time to live)</Typography>
<Typography>
{!errors.amount && values.amount ? getTtl(Number.parseInt(values.amount, 10)) : '-'}
</Typography>
</Grid>
</Box>
</Box>
<Box mb={2}>
<SwarmTextInput name="label" label="Label" optional formik />
</Box>
<Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
<Grid container justifyContent="space-between"> <Grid container justifyContent="space-between">
<Typography>Corresponding TTL (Time to live)</Typography> <Typography>Indicative Price</Typography>
<Typography> <Typography>
{!errors.amount && values.amount ? getTtl(Number.parseInt(values.amount, 10)) : '-'} {!errors.amount && !errors.depth && values.amount && values.depth
? getPrice(parseInt(values.depth, 10), BigInt(values.amount))
: '-'}
</Typography> </Typography>
</Grid> </Grid>
</Box> </Box>
</Box> <SwarmButton
<Box mb={2}> disabled={isSubmitting || !isValid || !values.amount || !values.depth}
<SwarmTextInput name="label" label="Label" optional formik /> onClick={submitForm}
</Box> iconType={Check}
<Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}> loading={isSubmitting}
<Grid container justifyContent="space-between"> >
<Typography>Indicative Price</Typography> Buy New Stamp
<Typography> </SwarmButton>
{!errors.amount && !errors.depth && values.amount && values.depth </Form>
? getPrice(parseInt(values.depth, 10), BigInt(values.amount)) )}
: '-'} </Formik>
</Typography> </>
</Grid>
</Box>
<SwarmButton
disabled={isSubmitting || !isValid || !values.amount || !values.depth}
onClick={submitForm}
iconType={Check}
loading={isSubmitting}
>
Buy New Stamp
</SwarmButton>
</Form>
)}
</Formik>
) )
} }