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>
</ExpandableListItemActions>
</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"
rel="noreferrer"
>
this guide.
this guide
</a>
.
</Typography>
src/pages/stamps/PostageStampCreation.tsx
+97 -79
View File
@@ -70,97 +70,115 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
}
return (
<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
<>
<Box mb={4}>
<Typography>
To upload data to Swarm network, you will need to purchase a postage stamp. If you&apos;re not familiar with
this, please read{' '}
<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 depth = Number.parseInt(values.depth)
const options = values.label ? { label: values.label } : undefined
await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
actions.resetForm()
await refresh()
onFinished()
} catch (e) {
enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
actions.setSubmitting(false)
}
}}
validate={(values: FormValues) => {
const errors: FormErrors = {}
const amount = BigInt(values.amount)
const depth = Number.parseInt(values.depth)
const options = values.label ? { label: values.label } : undefined
await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
actions.resetForm()
await refresh()
onFinished()
} catch (e) {
enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
actions.setSubmitting(false)
}
}}
validate={(values: FormValues) => {
const errors: FormErrors = {}
// Depth
if (!values.depth) errors.depth = 'Required field'
else {
const depth = new BigNumber(values.depth)
// Depth
if (!values.depth) errors.depth = 'Required field'
else {
const depth = new BigNumber(values.depth)
if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
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'
}
if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
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'
}
// Amount
if (!values.amount) errors.amount = 'Required field'
else {
const amount = new BigNumber(values.amount)
// Amount
if (!values.amount) errors.amount = 'Required field'
else {
const amount = new BigNumber(values.amount)
if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
}
if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
}
return errors
}}
>
{({ submitForm, isValid, isSubmitting, values, errors }) => (
<Form>
<Box mb={2}>
<SwarmTextInput name="depth" label="Depth" formik />
<Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
<Grid container justifyContent="space-between">
<Typography>Corresponding file size</Typography>
<Typography>{!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}</Typography>
</Grid>
return errors
}}
>
{({ submitForm, isValid, isSubmitting, values, errors }) => (
<Form>
<Box mb={2}>
<SwarmTextInput name="depth" label="Depth" formik />
<Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
<Grid container justifyContent="space-between">
<Typography>Corresponding file size</Typography>
<Typography>
{!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}
</Typography>
</Grid>
</Box>
</Box>
</Box>
<Box mb={2}>
<SwarmTextInput name="amount" label="Amount" formik />
<Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
<Box mb={2}>
<SwarmTextInput name="amount" label="Amount" formik />
<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">
<Typography>Corresponding TTL (Time to live)</Typography>
<Typography>Indicative Price</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>
</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">
<Typography>Indicative Price</Typography>
<Typography>
{!errors.amount && !errors.depth && values.amount && values.depth
? getPrice(parseInt(values.depth, 10), BigInt(values.amount))
: '-'}
</Typography>
</Grid>
</Box>
<SwarmButton
disabled={isSubmitting || !isValid || !values.amount || !values.depth}
onClick={submitForm}
iconType={Check}
loading={isSubmitting}
>
Buy New Stamp
</SwarmButton>
</Form>
)}
</Formik>
<SwarmButton
disabled={isSubmitting || !isValid || !values.amount || !values.depth}
onClick={submitForm}
iconType={Check}
loading={isSubmitting}
>
Buy New Stamp
</SwarmButton>
</Form>
)}
</Formik>
</>
)
}