feat: add identity and feed management (#272)
* feat(wip): add basic feed operations * ci: bump checks * ci: bump checks * feat: rework stamps and add feed functionalities * refactor: polish and fixes * feat(wip): add formulas * feat: show bzz.link for websites * feat: add stamp empty states and formatBzz * feat: add feed download * chore: update manifest-js version * feat: dev mode support with bee-js 3.1.0 (#273) * feat: dev mode support with bee-js 3.1.0 * fix: added missing package-lock.json file * build: remove PR preview * style: work on design * feat: add TroubleshootConnectionCard * build: remove depcheck Co-authored-by: Attila Gazso <agazso@gmail.com>
This commit is contained in:
Cafe137
GitHub
@@ -0,0 +1,133 @@
|
||||
import { Box, Grid, Typography } from '@material-ui/core'
|
||||
import { Form, Formik } from 'formik'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useState } from 'react'
|
||||
import { Check, X } from 'react-feather'
|
||||
import { useHistory } from 'react-router'
|
||||
import { DocumentationText } from '../../components/DocumentationText'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmSelect } from '../../components/SwarmSelect'
|
||||
import { SwarmTextInput } from '../../components/SwarmTextInput'
|
||||
import { Context as FeedsContext, IdentityType } from '../../providers/Feeds'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { convertWalletToIdentity, generateWallet, persistIdentity } from '../../utils/identity'
|
||||
|
||||
interface FormValues {
|
||||
identityName?: string
|
||||
type?: IdentityType
|
||||
password?: string
|
||||
}
|
||||
|
||||
const initialValues: FormValues = {
|
||||
identityName: '',
|
||||
type: 'PRIVATE_KEY',
|
||||
password: '',
|
||||
}
|
||||
|
||||
export default function CreateNewFeed(): ReactElement {
|
||||
const { beeApi, beeDebugApi } = useContext(SettingsContext)
|
||||
const { identities, setIdentities } = useContext(FeedsContext)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
const history = useHistory()
|
||||
|
||||
async function onSubmit(values: FormValues) {
|
||||
setLoading(true)
|
||||
|
||||
if (!beeApi) {
|
||||
enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
|
||||
setLoading(false)
|
||||
|
||||
return
|
||||
}
|
||||
const wallet = generateWallet()
|
||||
const stamps = await beeDebugApi?.getAllPostageBatch()
|
||||
|
||||
if (!stamps || !stamps.length) {
|
||||
enqueueSnackbar(<span>No stamp available</span>, { variant: 'error' })
|
||||
setLoading(false)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (!values.identityName || !values.type) {
|
||||
enqueueSnackbar(<span>Form is unfinished</span>, { variant: 'error' })
|
||||
setLoading(false)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const identity = await convertWalletToIdentity(wallet, values.type, values.identityName, values.password)
|
||||
persistIdentity(identities, identity)
|
||||
setIdentities(identities)
|
||||
history.push(ROUTES.FEEDS)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
history.goBack()
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HistoryHeader>Create new feed</HistoryHeader>
|
||||
<Box mb={4}>
|
||||
<DocumentationText>
|
||||
To create a feed you will need to create an identity. Please refer to the{' '}
|
||||
<a
|
||||
href="https://docs.ethswarm.org/api/#tag/Feed/paths/~1feeds~1{owner}~1{topic}/post"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
official Bee documentation
|
||||
</a>{' '}
|
||||
to understand how feeds work.
|
||||
</DocumentationText>
|
||||
</Box>
|
||||
<Formik initialValues={initialValues} onSubmit={onSubmit}>
|
||||
{({ submitForm, values }) => (
|
||||
<Form>
|
||||
<Box mb={0.25}>
|
||||
<SwarmTextInput name="identityName" label="Identity name" formik />
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<SwarmSelect
|
||||
formik
|
||||
name="type"
|
||||
options={[
|
||||
{ label: 'Keypair Only', value: 'PRIVATE_KEY' },
|
||||
{ label: 'Password Protected', value: 'V3' },
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
{values.type === 'V3' && <SwarmTextInput name="password" label="Password" password formik />}
|
||||
<Box mt={2}>
|
||||
<ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
|
||||
</Box>
|
||||
<Box mt={2} sx={{ bgcolor: '#fcf2e8' }} p={2}>
|
||||
<Grid container justifyContent="space-between">
|
||||
<Typography>Feeds name</Typography>
|
||||
<Typography>{values.identityName} Website</Typography>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box mt={1.25}>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton onClick={submitForm} iconType={Check} disabled={loading} loading={loading}>
|
||||
Create Feed
|
||||
</SwarmButton>
|
||||
<SwarmButton onClick={cancel} iconType={X} disabled={loading} cancel>
|
||||
Cancel
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</Box>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { Trash, X } from 'react-feather'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmDialog } from '../../components/SwarmDialog'
|
||||
import { TitleWithClose } from '../../components/TitleWithClose'
|
||||
import { Identity } from '../../providers/Feeds'
|
||||
|
||||
interface Props {
|
||||
identity: Identity
|
||||
onConfirm: (identity: Identity) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function DeleteFeedDialog({ identity, onConfirm, onClose }: Props): ReactElement {
|
||||
return (
|
||||
<SwarmDialog>
|
||||
<Box mb={4}>
|
||||
<TitleWithClose onClose={onClose}>Delete</TitleWithClose>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<Typography align="center">{`You are about to delete feed ${identity.name} Website. It is strongly advised to export this feed first.`}</Typography>
|
||||
</Box>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton iconType={Trash} onClick={() => onConfirm(identity)}>
|
||||
Delete
|
||||
</SwarmButton>
|
||||
<SwarmButton iconType={X} onClick={onClose} cancel>
|
||||
Cancel
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</SwarmDialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement } from 'react'
|
||||
import { Clipboard, Download } from 'react-feather'
|
||||
import { Code } from '../../components/Code'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmDialog } from '../../components/SwarmDialog'
|
||||
import { TitleWithClose } from '../../components/TitleWithClose'
|
||||
import { Identity } from '../../providers/Feeds'
|
||||
|
||||
interface Props {
|
||||
identity: Identity
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
wrapper: {
|
||||
maxWidth: '100%',
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export function ExportFeedDialog({ identity, onClose }: Props): ReactElement {
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
function onDownload() {
|
||||
saveAs(
|
||||
new Blob([identity.identity], {
|
||||
type: 'application/json',
|
||||
}),
|
||||
identity.name + '.json',
|
||||
)
|
||||
}
|
||||
|
||||
function getExportText() {
|
||||
return identity.type === 'V3' ? 'JSON file' : 'the private key string'
|
||||
}
|
||||
|
||||
function onCopy() {
|
||||
navigator.clipboard
|
||||
.writeText(identity.identity)
|
||||
.then(() => enqueueSnackbar('Copied to Clipboard', { variant: 'success' }))
|
||||
}
|
||||
|
||||
return (
|
||||
<SwarmDialog>
|
||||
<Box mb={4}>
|
||||
<TitleWithClose onClose={onClose}>Export</TitleWithClose>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<Typography align="center">{`We exported the identity associated with this feed as ${getExportText()}.`}</Typography>
|
||||
</Box>
|
||||
<Box mb={4} className={classes.wrapper}>
|
||||
<Code prettify>{identity.identity}</Code>
|
||||
</Box>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton iconType={Download} onClick={onDownload}>
|
||||
Download JSON File
|
||||
</SwarmButton>
|
||||
<SwarmButton iconType={Clipboard} onClick={onCopy}>
|
||||
Copy To Clipboard
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</SwarmDialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { ReactElement, useState } from 'react'
|
||||
import { Check, X } from 'react-feather'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmDialog } from '../../components/SwarmDialog'
|
||||
import { SwarmTextInput } from '../../components/SwarmTextInput'
|
||||
import { TitleWithClose } from '../../components/TitleWithClose'
|
||||
|
||||
interface Props {
|
||||
feedName: string
|
||||
onProceed: (password: string) => void
|
||||
onCancel: () => void
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
export function FeedPasswordDialog({ feedName, onProceed, onCancel, loading }: Props): ReactElement {
|
||||
const [password, setPassword] = useState('')
|
||||
|
||||
function onProceedClick() {
|
||||
return onProceed(password)
|
||||
}
|
||||
|
||||
return (
|
||||
<SwarmDialog>
|
||||
<Box mb={4}>
|
||||
<TitleWithClose onClose={onCancel}>Update Feed</TitleWithClose>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<Typography>Please enter the password for “{feedName}”:</Typography>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<SwarmTextInput
|
||||
label="Password"
|
||||
name="password"
|
||||
onChange={event => {
|
||||
setPassword(event.target.value)
|
||||
}}
|
||||
password
|
||||
/>
|
||||
</Box>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton iconType={Check} onClick={onProceedClick} disabled={loading} loading={loading}>
|
||||
Proceed
|
||||
</SwarmButton>
|
||||
<SwarmButton iconType={X} onClick={onCancel} cancel disabled={loading}>
|
||||
Cancel
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</SwarmDialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import * as swarmCid from '@ethersphere/swarm-cid'
|
||||
import { Box } from '@material-ui/core'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { X } from 'react-feather'
|
||||
import { RouteComponentProps, useHistory } from 'react-router-dom'
|
||||
import { DocumentationText } from '../../components/DocumentationText'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import ExpandableListItemLink from '../../components/ExpandableListItemLink'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as IdentityContext } from '../../providers/Feeds'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { UploadArea } from '../files/UploadArea'
|
||||
|
||||
interface MatchParams {
|
||||
uuid: string
|
||||
}
|
||||
|
||||
export function FeedSubpage(props: RouteComponentProps<MatchParams>): ReactElement {
|
||||
const { identities } = useContext(IdentityContext)
|
||||
const { beeApi } = useContext(SettingsContext)
|
||||
const { status } = useContext(BeeContext)
|
||||
|
||||
const history = useHistory()
|
||||
|
||||
const [available, setAvailable] = useState(false)
|
||||
|
||||
const uuid = props.match.params.uuid
|
||||
const identity = identities.find(x => x.uuid === uuid)
|
||||
|
||||
useEffect(() => {
|
||||
if (!identity || !identity.feedHash) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
beeApi?.downloadData(identity.feedHash).then(() => setAvailable(true))
|
||||
} catch {
|
||||
setAvailable(false)
|
||||
}
|
||||
}, [beeApi, uuid, identity])
|
||||
|
||||
if (!identity || !status.all) {
|
||||
history.replace(ROUTES.FEEDS)
|
||||
|
||||
return <></>
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
history.push(ROUTES.FEEDS)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HistoryHeader>{`${identity.name} Website`}</HistoryHeader>
|
||||
<UploadArea showHelp={false} uploadOrigin={{ origin: 'FEED', uuid }} />
|
||||
{available && identity.feedHash ? (
|
||||
<>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<ExpandableListItemLink
|
||||
label="BZZ Link"
|
||||
value={`https://${swarmCid.encodeFeedReference(identity.feedHash)}.bzz.link`}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<Box mb={4}>
|
||||
<DocumentationText>
|
||||
This feed is curently not pointing anywhere, you can update the feed to fix this. Please refer to the{' '}
|
||||
<a
|
||||
href="https://docs.ethswarm.org/api/#tag/Feed/paths/~1feeds~1{owner}~1{topic}/post"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
official Bee documentation
|
||||
</a>
|
||||
.
|
||||
</DocumentationText>
|
||||
</Box>
|
||||
)}
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton iconType={X} onClick={onClose} cancel>
|
||||
Close
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import React, { ReactElement, useContext, useRef, useState } from 'react'
|
||||
import { Check, Upload } from 'react-feather'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmDialog } from '../../components/SwarmDialog'
|
||||
import { SwarmTextInput } from '../../components/SwarmTextInput'
|
||||
import { TitleWithClose } from '../../components/TitleWithClose'
|
||||
import { Context, Identity } from '../../providers/Feeds'
|
||||
import { importIdentity, persistIdentity } from '../../utils/identity'
|
||||
|
||||
interface Props {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
textarea: {
|
||||
width: '100%',
|
||||
border: 0,
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
displayNone: {
|
||||
display: 'none',
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export function ImportFeedDialog({ onClose }: Props): ReactElement {
|
||||
const [textareaValue, setTextareaValue] = useState('')
|
||||
const [name, setName] = useState('')
|
||||
const fileInputRef = useRef(null)
|
||||
|
||||
const { identities, setIdentities } = useContext(Context)
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
async function onImport() {
|
||||
const feed = await importIdentity(name, textareaValue)
|
||||
|
||||
if (feed) {
|
||||
onFeedReady(feed)
|
||||
} else {
|
||||
enqueueSnackbar('Feed is not valid', { variant: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
function onUploadIdentityFile() {
|
||||
if (fileInputRef.current) {
|
||||
const input = fileInputRef.current as HTMLInputElement
|
||||
input.click()
|
||||
}
|
||||
}
|
||||
|
||||
function onIdentityFileSelected(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const fileReader = new FileReader()
|
||||
const file = event.target?.files?.[0]
|
||||
fileReader.onload = async event => {
|
||||
const string = event.target?.result
|
||||
|
||||
if (string) {
|
||||
const feed = await importIdentity(name, string as string)
|
||||
|
||||
if (feed) {
|
||||
onFeedReady(feed)
|
||||
} else {
|
||||
enqueueSnackbar('Feed is not valid', { variant: 'error' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (file) {
|
||||
fileReader.readAsText(file)
|
||||
}
|
||||
}
|
||||
|
||||
function onFeedReady(identity: Identity) {
|
||||
persistIdentity(identities, identity)
|
||||
setIdentities(identities)
|
||||
enqueueSnackbar('Feed imported successfully', { variant: 'success' })
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<SwarmDialog>
|
||||
<input onChange={onIdentityFileSelected} ref={fileInputRef} className={classes.displayNone} type="file" />
|
||||
<Box mb={4}>
|
||||
<TitleWithClose onClose={onClose}>Import</TitleWithClose>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<SwarmTextInput label="Identity Name" name="name" onChange={event => setName(event.target.value)} />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<TextareaAutosize
|
||||
className={classes.textarea}
|
||||
minRows={5}
|
||||
onChange={event => setTextareaValue(event.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton iconType={Upload} onClick={onUploadIdentityFile}>
|
||||
Upload Json File
|
||||
</SwarmButton>
|
||||
<SwarmButton iconType={Check} onClick={onImport}>
|
||||
Use Pasted Text
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</SwarmDialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { Box, Grid, Typography } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { Bookmark, X } from 'react-feather'
|
||||
import { RouteComponentProps, useHistory } from 'react-router'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SelectEvent, SwarmSelect } from '../../components/SwarmSelect'
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as IdentityContext, Identity } from '../../providers/Feeds'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { Context as StampContext } from '../../providers/Stamps'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { persistIdentity, updateFeed } from '../../utils/identity'
|
||||
import { FeedPasswordDialog } from './FeedPasswordDialog'
|
||||
|
||||
interface MatchParams {
|
||||
hash: string
|
||||
}
|
||||
|
||||
export default function UpdateFeed(props: RouteComponentProps<MatchParams>): ReactElement {
|
||||
const { identities, setIdentities } = useContext(IdentityContext)
|
||||
const { beeApi, beeDebugApi } = useContext(SettingsContext)
|
||||
const { stamps, refresh } = useContext(StampContext)
|
||||
const { status } = useContext(BeeContext)
|
||||
|
||||
const [selectedStamp, setSelectedStamp] = useState<string | null>(null)
|
||||
const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
|
||||
|
||||
const history = useHistory()
|
||||
|
||||
useEffect(() => {
|
||||
refresh()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
function onFeedChange(event: SelectEvent) {
|
||||
const uuid = event.target.value
|
||||
setSelectedIdentity(identities.find(x => x.uuid === uuid) || null)
|
||||
}
|
||||
|
||||
function onStampChange(event: SelectEvent) {
|
||||
const batchId = event.target.value as string
|
||||
setSelectedStamp(batchId)
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
history.goBack()
|
||||
}
|
||||
|
||||
function onBeginUpdatingFeed() {
|
||||
if (!selectedIdentity) {
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedIdentity.type === 'V3') {
|
||||
setShowPasswordPrompt(true)
|
||||
} else {
|
||||
onFeedUpdate(selectedIdentity)
|
||||
}
|
||||
}
|
||||
|
||||
async function onFeedUpdate(identity: Identity, password?: string) {
|
||||
setLoading(true)
|
||||
|
||||
if (!beeApi || !beeDebugApi || !selectedStamp) {
|
||||
enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
|
||||
setLoading(false)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await updateFeed(beeApi, identity, props.match.params.hash, selectedStamp, password as string)
|
||||
persistIdentity(identities, identity)
|
||||
setIdentities([...identities])
|
||||
history.push(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
|
||||
} catch (error: unknown) {
|
||||
setLoading(false)
|
||||
|
||||
const message = (typeof error === 'object' && error !== null && Reflect.get(error, 'message')) || ''
|
||||
|
||||
if (message.includes('possibly wrong passphrase')) {
|
||||
enqueueSnackbar('Wrong password, please try again', { variant: 'error' })
|
||||
} else {
|
||||
enqueueSnackbar('Could not update feed at this time, please try again later', { variant: 'error' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!status.all) return <TroubleshootConnectionCard />
|
||||
|
||||
return (
|
||||
<div>
|
||||
{showPasswordPrompt && selectedIdentity && (
|
||||
<FeedPasswordDialog
|
||||
feedName={selectedIdentity.name + ' Website'}
|
||||
onCancel={() => {
|
||||
setShowPasswordPrompt(false)
|
||||
}}
|
||||
onProceed={(password: string) => {
|
||||
onFeedUpdate(selectedIdentity, password)
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
<HistoryHeader>Update feed</HistoryHeader>
|
||||
<Box mb={2}>
|
||||
<Grid container>
|
||||
<SwarmSelect
|
||||
options={identities.map(x => ({ value: x.uuid, label: `${x.name} Website` }))}
|
||||
onChange={onFeedChange}
|
||||
label="Feed"
|
||||
/>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Box mb={4}>
|
||||
<Grid container>
|
||||
{stamps ? (
|
||||
<SwarmSelect
|
||||
options={stamps.map(x => ({ value: x.batchID, label: x.batchID.slice(0, 8) }))}
|
||||
onChange={onStampChange}
|
||||
label="Stamp"
|
||||
/>
|
||||
) : (
|
||||
<Typography>You need to buy a stamp first to be able to update a feed.</Typography>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton
|
||||
onClick={onBeginUpdatingFeed}
|
||||
iconType={Bookmark}
|
||||
loading={!showPasswordPrompt && loading}
|
||||
disabled={loading || !selectedStamp || !selectedIdentity}
|
||||
>
|
||||
Update Selected Feed
|
||||
</SwarmButton>
|
||||
<SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
|
||||
Close
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { ReactElement, useContext, useState } from 'react'
|
||||
import { Download, Info, PlusSquare, Trash } from 'react-feather'
|
||||
import { useHistory } from 'react-router'
|
||||
import ExpandableList from '../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as IdentityContext, Identity } from '../../providers/Feeds'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { formatEnum } from '../../utils'
|
||||
import { persistIdentitiesWithoutUpdate } from '../../utils/identity'
|
||||
import { DeleteFeedDialog } from './DeleteFeedDialog'
|
||||
import { ExportFeedDialog } from './ExportFeedDialog'
|
||||
import { ImportFeedDialog } from './ImportFeedDialog'
|
||||
|
||||
export default function Feeds(): ReactElement {
|
||||
const { identities, setIdentities } = useContext(IdentityContext)
|
||||
const { status } = useContext(BeeContext)
|
||||
|
||||
const history = useHistory()
|
||||
|
||||
const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
|
||||
const [showImport, setShowImport] = useState(false)
|
||||
const [showExport, setShowExport] = useState(false)
|
||||
const [showDelete, setShowDelete] = useState(false)
|
||||
|
||||
function createNewFeed() {
|
||||
return history.push(ROUTES.FEEDS_NEW)
|
||||
}
|
||||
|
||||
function viewFeed(uuid: string) {
|
||||
history.push(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
|
||||
}
|
||||
|
||||
function onDialogClose() {
|
||||
setShowDelete(false)
|
||||
setShowExport(false)
|
||||
setShowImport(false)
|
||||
setSelectedIdentity(null)
|
||||
}
|
||||
|
||||
function onDelete(identity: Identity) {
|
||||
onDialogClose()
|
||||
const updatedFeeds = identities.filter(x => x.uuid !== identity.uuid)
|
||||
setIdentities(updatedFeeds)
|
||||
persistIdentitiesWithoutUpdate(updatedFeeds)
|
||||
}
|
||||
|
||||
function onShowExport(identity: Identity) {
|
||||
setSelectedIdentity(identity)
|
||||
setShowExport(true)
|
||||
}
|
||||
|
||||
function onShowDelete(identity: Identity) {
|
||||
setSelectedIdentity(identity)
|
||||
setShowDelete(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
|
||||
{showExport && selectedIdentity && <ExportFeedDialog identity={selectedIdentity} onClose={onDialogClose} />}
|
||||
{showDelete && selectedIdentity && (
|
||||
<DeleteFeedDialog
|
||||
identity={selectedIdentity}
|
||||
onClose={onDialogClose}
|
||||
onConfirm={(identity: Identity) => onDelete(identity)}
|
||||
/>
|
||||
)}
|
||||
<Box mb={4}>
|
||||
<Typography variant="h1">Feeds</Typography>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton iconType={PlusSquare} onClick={createNewFeed}>
|
||||
Create New Feed
|
||||
</SwarmButton>
|
||||
<SwarmButton iconType={PlusSquare} onClick={() => setShowImport(true)}>
|
||||
Import Feed
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</Box>
|
||||
{identities.map((x, i) => (
|
||||
<ExpandableList key={i} label={`${x.name} Website`} defaultOpen>
|
||||
<Box mb={0.5}>
|
||||
<ExpandableList label={x.name} level={1}>
|
||||
<ExpandableListItemKey label="Identity address" value={x.address} />
|
||||
<ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
|
||||
</ExpandableList>
|
||||
</Box>
|
||||
<ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
|
||||
{x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
|
||||
<Box mt={0.75}>
|
||||
<ExpandableListItemActions>
|
||||
{status.all && (
|
||||
<SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
|
||||
View Feed Page
|
||||
</SwarmButton>
|
||||
)}
|
||||
<SwarmButton onClick={() => onShowExport(x)} iconType={Download}>
|
||||
Export...
|
||||
</SwarmButton>
|
||||
<SwarmButton onClick={() => onShowDelete(x)} iconType={Trash}>
|
||||
Delete...
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</Box>
|
||||
</ExpandableList>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,24 +1,35 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import * as swarmCid from '@ethersphere/swarm-cid'
|
||||
import { Box } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { DocumentationText } from '../../components/DocumentationText'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import ExpandableListItemLink from '../../components/ExpandableListItemLink'
|
||||
import { detectIndexHtml } from '../../utils/file'
|
||||
import { SwarmFile } from '../../utils/SwarmFile'
|
||||
|
||||
interface Props {
|
||||
files: SwarmFile[]
|
||||
hash: string
|
||||
}
|
||||
|
||||
export function AssetSummary({ hash }: Props): ReactElement {
|
||||
export function AssetSummary({ files, hash }: Props): ReactElement {
|
||||
return (
|
||||
<>
|
||||
<Box mb={4}>
|
||||
<ExpandableListItemKey label="Swarm hash" value={hash} />
|
||||
<ExpandableListItemLink label="Share on Swarm Gateway" value={`https://gateway.ethswarm.org/access/${hash}`} />
|
||||
{detectIndexHtml(files) && (
|
||||
<ExpandableListItemLink
|
||||
label="BZZ Link"
|
||||
value={`https://${swarmCid.encodeManifestReference(hash).toString()}.bzz.link`}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Typography>
|
||||
<DocumentationText>
|
||||
The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided
|
||||
for testing purposes only. Learn more at{' '}
|
||||
<a href="https://gateway.ethswarm.org/">https://gateway.ethswarm.org/</a>.
|
||||
</Typography>
|
||||
</DocumentationText>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { ReactElement, useContext, useState } from 'react'
|
||||
import { useHistory } from 'react-router-dom'
|
||||
import ExpandableListItemInput from '../../components/ExpandableListItemInput'
|
||||
import { History } from '../../components/History'
|
||||
import { Context, defaultUploadOrigin } from '../../providers/File'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { extractSwarmHash } from '../../utils'
|
||||
@@ -16,6 +17,8 @@ export function Download(): ReactElement {
|
||||
const { beeApi } = useContext(SettingsContext)
|
||||
const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
|
||||
|
||||
const { setUploadOrigin } = useContext(Context)
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const history = useHistory()
|
||||
|
||||
@@ -28,12 +31,21 @@ export function Download(): ReactElement {
|
||||
}
|
||||
|
||||
async function onSwarmIdentifier(identifier: string) {
|
||||
setLoading(true)
|
||||
|
||||
if (!beeApi) {
|
||||
setLoading(false)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const manifestJs = new ManifestJs(beeApi)
|
||||
const feedIdentifier = await manifestJs.resolveFeedManifest(identifier)
|
||||
|
||||
if (feedIdentifier) {
|
||||
identifier = feedIdentifier
|
||||
}
|
||||
const isManifest = await manifestJs.isManifest(identifier)
|
||||
|
||||
if (!isManifest) {
|
||||
@@ -41,6 +53,7 @@ export function Download(): ReactElement {
|
||||
}
|
||||
const indexDocument = await manifestJs.getIndexDocumentPath(identifier)
|
||||
putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, identifier, determineHistoryName(identifier, indexDocument))
|
||||
setUploadOrigin(defaultUploadOrigin)
|
||||
history.push(ROUTES.HASH.replace(':hash', identifier))
|
||||
} catch (error: unknown) {
|
||||
let message = typeof error === 'object' && error !== null && Reflect.get(error, 'message')
|
||||
@@ -80,11 +93,12 @@ export function Download(): ReactElement {
|
||||
onConfirm={value => onSwarmIdentifier(value)}
|
||||
onChange={validateChange}
|
||||
helperText={referenceError}
|
||||
confirmLabel={'Search'}
|
||||
confirmLabel={'Find'}
|
||||
confirmLabelDisabled={Boolean(referenceError) || loading}
|
||||
placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
|
||||
expandedOnly
|
||||
mapperFn={value => recognizeSwarmHash(value)}
|
||||
loading={loading}
|
||||
/>
|
||||
<History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />
|
||||
</>
|
||||
|
||||
@@ -1,32 +1,46 @@
|
||||
import { Button } from '@material-ui/core'
|
||||
import { Clear } from '@material-ui/icons'
|
||||
import { Box, Grid } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { Download, Link } from 'react-feather'
|
||||
import { Bookmark, Download, Link, X } from 'react-feather'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
|
||||
interface Props {
|
||||
onOpen: () => void
|
||||
onDownload: () => void
|
||||
onCancel: () => void
|
||||
onDownload: () => void
|
||||
onUpdateFeed: () => void
|
||||
hasIndexDocument: boolean
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
export function DownloadActionBar({ onOpen, onDownload, onCancel, hasIndexDocument, loading }: Props): ReactElement {
|
||||
export function DownloadActionBar({
|
||||
onOpen,
|
||||
onCancel,
|
||||
onDownload,
|
||||
onUpdateFeed,
|
||||
hasIndexDocument,
|
||||
loading,
|
||||
}: Props): ReactElement {
|
||||
return (
|
||||
<ExpandableListItemActions>
|
||||
{hasIndexDocument && (
|
||||
<SwarmButton onClick={onOpen} iconType={Link} disabled={loading}>
|
||||
View Website
|
||||
<Grid container justifyContent="space-between">
|
||||
<ExpandableListItemActions>
|
||||
{hasIndexDocument && (
|
||||
<SwarmButton onClick={onOpen} iconType={Link} disabled={loading}>
|
||||
View Website
|
||||
</SwarmButton>
|
||||
)}
|
||||
<SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
|
||||
Download
|
||||
</SwarmButton>
|
||||
)}
|
||||
<SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
|
||||
Download
|
||||
</SwarmButton>
|
||||
<Button onClick={onCancel} variant="contained" startIcon={<Clear />} disabled={loading}>
|
||||
Close
|
||||
</Button>
|
||||
</ExpandableListItemActions>
|
||||
<SwarmButton onClick={onCancel} iconType={X} disabled={loading} loading={loading} cancel>
|
||||
Close
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
<Box mb={1} mr={1}>
|
||||
<SwarmButton onClick={onUpdateFeed} iconType={Bookmark}>
|
||||
Update Feed
|
||||
</SwarmButton>
|
||||
</Box>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import { ManifestJs } from '@ethersphere/manifest-js'
|
||||
import { Box } from '@material-ui/core'
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { saveAs } from 'file-saver'
|
||||
import JSZip from 'jszip'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { RouteComponentProps, useHistory } from 'react-router-dom'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { Loading } from '../../components/Loading'
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { convertBeeFileToBrowserFile, convertManifestToFiles } from '../../utils/file'
|
||||
@@ -21,17 +25,22 @@ interface MatchParams {
|
||||
|
||||
export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
|
||||
const { apiUrl, beeApi } = useContext(SettingsContext)
|
||||
const { status } = useContext(BeeContext)
|
||||
|
||||
const reference = props.match.params.hash
|
||||
|
||||
const history = useHistory()
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [downloading, setDownloading] = useState(false)
|
||||
const [files, setFiles] = useState<SwarmFile[]>([])
|
||||
const [swarmEntries, setSwarmEntries] = useState<Record<string, string>>({})
|
||||
const [indexDocument, setIndexDocument] = useState<string | null>(null)
|
||||
const [notFound, setNotFound] = useState(false)
|
||||
|
||||
async function prepare() {
|
||||
if (!beeApi) {
|
||||
if (!beeApi || !status.all) {
|
||||
return
|
||||
}
|
||||
|
||||
@@ -39,7 +48,10 @@ export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
|
||||
const isManifest = await manifestJs.isManifest(reference)
|
||||
|
||||
if (!isManifest) {
|
||||
throw Error('The specified hash does not contain valid content.')
|
||||
setNotFound(true)
|
||||
enqueueSnackbar('The specified hash does not contain valid content.', { variant: 'error' })
|
||||
|
||||
return
|
||||
}
|
||||
const entries = await manifestJs.getHashes(reference)
|
||||
setSwarmEntries(entries)
|
||||
@@ -67,9 +79,13 @@ export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
|
||||
}
|
||||
}
|
||||
|
||||
function onUpdateFeed() {
|
||||
history.push(ROUTES.FEEDS_UPDATE.replace(':hash', reference))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
prepare().then(() => {
|
||||
prepare().finally(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@@ -97,22 +113,34 @@ export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
|
||||
|
||||
const assetName = shortenHash(reference)
|
||||
|
||||
if (!status.all) return <TroubleshootConnectionCard />
|
||||
|
||||
if (loading) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
if (notFound) {
|
||||
return (
|
||||
<>
|
||||
<HistoryHeader>Not Found</HistoryHeader>
|
||||
<Typography>The specified hash is not found.</Typography>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box mb={4}>
|
||||
<AssetPreview files={files} assetName={assetName} />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<AssetSummary hash={reference} />
|
||||
<AssetSummary files={files} hash={reference} />
|
||||
</Box>
|
||||
<DownloadActionBar
|
||||
onOpen={onOpen}
|
||||
onCancel={onClose}
|
||||
onDownload={onDownload}
|
||||
onUpdateFeed={onUpdateFeed}
|
||||
hasIndexDocument={Boolean(indexDocument && files.length > 1)}
|
||||
loading={downloading}
|
||||
/>
|
||||
|
||||
+107
-35
@@ -1,41 +1,71 @@
|
||||
import { Box } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { useHistory } from 'react-router-dom'
|
||||
import { DocumentationText } from '../../components/DocumentationText'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { ProgressIndicator } from '../../components/ProgressIndicator'
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as IdentityContext, Identity } from '../../providers/Feeds'
|
||||
import { Context as FileContext } from '../../providers/File'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { detectIndexHtml, getAssetNameFromFiles } from '../../utils/file'
|
||||
import { persistIdentity, updateFeed } from '../../utils/identity'
|
||||
import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
|
||||
import { CreatePostageStampModal } from '../stamps/CreatePostageStampModal'
|
||||
import { SelectPostageStampModal } from '../stamps/SelectPostageStampModal'
|
||||
import { FeedPasswordDialog } from '../feeds/FeedPasswordDialog'
|
||||
import { PostageStampCreation } from '../stamps/PostageStampCreation'
|
||||
import { PostageStampSelector } from '../stamps/PostageStampSelector'
|
||||
import { AssetPreview } from './AssetPreview'
|
||||
import { StampPreview } from './StampPreview'
|
||||
import { UploadActionBar } from './UploadActionBar'
|
||||
|
||||
export function Upload(): ReactElement {
|
||||
const [isBuyingStamp, setBuyingStamp] = useState(false)
|
||||
const [isSelectingStamp, setSelectingStamp] = useState(false)
|
||||
const [step, setStep] = useState(0)
|
||||
const [stampMode, setStampMode] = useState<'SELECT' | 'BUY'>('SELECT')
|
||||
const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
|
||||
const [isUploading, setUploading] = useState(false)
|
||||
const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
|
||||
|
||||
const { stamps, refresh } = useContext(Context)
|
||||
const { refresh } = useContext(StampsContext)
|
||||
const { beeApi } = useContext(SettingsContext)
|
||||
const { files, setFiles } = useContext(FileContext)
|
||||
const { files, setFiles, uploadOrigin } = useContext(FileContext)
|
||||
const { identities, setIdentities } = useContext(IdentityContext)
|
||||
const { status } = useContext(BeeContext)
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const history = useHistory()
|
||||
|
||||
if (!files.length) {
|
||||
setFiles([])
|
||||
history.replace(ROUTES.UPLOAD)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
refresh()
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const uploadFiles = () => {
|
||||
if (!status.all) return <TroubleshootConnectionCard />
|
||||
|
||||
if (!files.length) {
|
||||
setFiles([])
|
||||
history.replace(ROUTES.UPLOAD)
|
||||
|
||||
return <></>
|
||||
}
|
||||
|
||||
const identity = uploadOrigin.uuid ? identities.find(x => x.uuid === uploadOrigin.uuid) : null
|
||||
|
||||
const onUpload = () => {
|
||||
if (uploadOrigin.origin === 'UPLOAD') {
|
||||
uploadFiles()
|
||||
} else {
|
||||
if ((identity as Identity).type === 'PRIVATE_KEY') {
|
||||
uploadFiles()
|
||||
} else {
|
||||
setShowPasswordPrompt(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const uploadFiles = (password?: string) => {
|
||||
if (!beeApi || !files.length || !stamp) {
|
||||
return
|
||||
}
|
||||
@@ -48,7 +78,16 @@ export function Upload(): ReactElement {
|
||||
.uploadFiles(stamp.batchID, files as unknown as File[], { indexDocument })
|
||||
.then(hash => {
|
||||
putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
|
||||
history.replace(ROUTES.HASH.replace(':hash', hash.reference))
|
||||
|
||||
if (uploadOrigin.origin === 'UPLOAD') {
|
||||
history.replace(ROUTES.HASH.replace(':hash', hash.reference))
|
||||
} else {
|
||||
updateFeed(beeApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(() => {
|
||||
persistIdentity(identities, identity as Identity)
|
||||
setIdentities([...identities])
|
||||
history.replace(ROUTES.FEEDS_PAGE.replace(':uuid', uploadOrigin.uuid as string))
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
|
||||
@@ -57,36 +96,69 @@ export function Upload(): ReactElement {
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
setStep(0)
|
||||
setFiles([])
|
||||
setStamp(null)
|
||||
setUploading(false)
|
||||
}
|
||||
|
||||
const onFeedPasswordGiven = (password: string) => {
|
||||
uploadFiles(password)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HistoryHeader>Upload</HistoryHeader>
|
||||
{files.length && <AssetPreview files={files} />}
|
||||
{stamp !== null ? <StampPreview stamp={stamp} /> : null}
|
||||
{files.length && (
|
||||
<UploadActionBar
|
||||
canSelectStamp={stamps !== null && stamps.length > 0}
|
||||
hasSelectedStamp={stamp !== null}
|
||||
onCancel={reset}
|
||||
onBuy={() => setBuyingStamp(true)}
|
||||
onSelect={() => setSelectingStamp(true)}
|
||||
onUpload={uploadFiles}
|
||||
onClearStamp={() => setStamp(null)}
|
||||
isUploading={isUploading}
|
||||
{showPasswordPrompt && (
|
||||
<FeedPasswordDialog
|
||||
loading={isUploading}
|
||||
feedName={(identity as Identity).name}
|
||||
onCancel={() => setShowPasswordPrompt(false)}
|
||||
onProceed={onFeedPasswordGiven}
|
||||
/>
|
||||
)}
|
||||
{isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
|
||||
{stamps && isSelectingStamp ? (
|
||||
<SelectPostageStampModal
|
||||
stamps={stamps}
|
||||
onClose={() => setSelectingStamp(false)}
|
||||
onSelect={stamp => setStamp(stamp)}
|
||||
/>
|
||||
) : null}
|
||||
{identity && <HistoryHeader>{`Update "${identity.name}"`}</HistoryHeader>}
|
||||
{!identity && <HistoryHeader>Upload</HistoryHeader>}
|
||||
<Box mb={4}>
|
||||
<ProgressIndicator steps={['Preview', 'Add postage stamp', 'Upload to node']} index={step} />
|
||||
</Box>
|
||||
{(step === 0 || step === 2) && <AssetPreview files={files} />}
|
||||
{step === 1 && (
|
||||
<>
|
||||
<Box mb={2}>
|
||||
{stampMode === 'SELECT' ? (
|
||||
<PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
|
||||
) : (
|
||||
<PostageStampCreation onFinished={() => setStampMode('SELECT')} />
|
||||
)}
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<DocumentationText>
|
||||
Please refer to the{' '}
|
||||
<a
|
||||
href="https://docs.ethswarm.org/debug-api/#tag/Postage-Stamps/paths/~1stamps~1{amount}~1{depth}/post"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
official Bee documentation
|
||||
</a>{' '}
|
||||
to understand these values.
|
||||
</DocumentationText>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{step === 2 && stamp && <StampPreview stamp={stamp} />}
|
||||
<UploadActionBar
|
||||
step={step}
|
||||
onCancel={reset}
|
||||
onGoBack={() => setStep(step => step - 1)}
|
||||
onProceed={() => setStep(step => step + 1)}
|
||||
onUpload={onUpload}
|
||||
isUploading={isUploading}
|
||||
hasStamp={Boolean(stamp)}
|
||||
uploadLabel={identity ? 'Update Feed' : 'Upload To Your Node'}
|
||||
stampMode={stampMode}
|
||||
setStampMode={setStampMode}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,69 +1,88 @@
|
||||
import { Button, Typography } from '@material-ui/core'
|
||||
import { Clear } from '@material-ui/icons'
|
||||
import { Box, Grid } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { Check, Layers, PlusSquare, RefreshCcw } from 'react-feather'
|
||||
import { ArrowLeft, Check, Layers, PlusSquare, X } from 'react-feather'
|
||||
import { DocumentationText } from '../../components/DocumentationText'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
|
||||
interface Props {
|
||||
canSelectStamp: boolean
|
||||
hasSelectedStamp: boolean
|
||||
step: number
|
||||
onUpload: () => void
|
||||
onBuy: () => void
|
||||
onSelect: () => void
|
||||
onCancel: () => void
|
||||
onClearStamp: () => void
|
||||
onGoBack: () => void
|
||||
onProceed: () => void
|
||||
isUploading: boolean
|
||||
hasStamp: boolean
|
||||
uploadLabel: string
|
||||
stampMode: 'BUY' | 'SELECT'
|
||||
setStampMode: (mode: 'BUY' | 'SELECT') => void
|
||||
}
|
||||
|
||||
export function UploadActionBar({
|
||||
canSelectStamp,
|
||||
hasSelectedStamp,
|
||||
step,
|
||||
onUpload,
|
||||
onBuy,
|
||||
onSelect,
|
||||
onCancel,
|
||||
onClearStamp,
|
||||
onGoBack,
|
||||
onProceed,
|
||||
isUploading,
|
||||
hasStamp,
|
||||
uploadLabel,
|
||||
stampMode,
|
||||
setStampMode,
|
||||
}: Props): ReactElement {
|
||||
const showBuy = !hasSelectedStamp
|
||||
const showSelect = canSelectStamp && !hasSelectedStamp
|
||||
const showUpload = hasSelectedStamp
|
||||
const showChange = canSelectStamp && hasSelectedStamp
|
||||
if (step === 0) {
|
||||
return (
|
||||
<>
|
||||
<Box mb={1}>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton onClick={onProceed} iconType={Layers}>
|
||||
Add Postage Stamp
|
||||
</SwarmButton>
|
||||
<SwarmButton onClick={onCancel} iconType={X} cancel>
|
||||
Cancel
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</Box>
|
||||
<DocumentationText>You need a postage stamp to upload.</DocumentationText>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
if (step === 1) {
|
||||
return (
|
||||
<Grid container direction="row" justifyContent="space-between">
|
||||
<ExpandableListItemActions>
|
||||
{stampMode === 'SELECT' && (
|
||||
<SwarmButton onClick={onProceed} iconType={Check} disabled={!hasStamp}>
|
||||
Proceed With Selected Stamp
|
||||
</SwarmButton>
|
||||
)}
|
||||
<SwarmButton onClick={onGoBack} iconType={ArrowLeft} cancel>
|
||||
Back To Preview
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
<SwarmButton
|
||||
onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
|
||||
iconType={stampMode === 'BUY' ? Layers : PlusSquare}
|
||||
>
|
||||
{stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
|
||||
</SwarmButton>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
if (step === 2) {
|
||||
return (
|
||||
<ExpandableListItemActions>
|
||||
{showBuy ? (
|
||||
<SwarmButton onClick={onBuy} iconType={PlusSquare}>
|
||||
Buy New Postage Stamp
|
||||
</SwarmButton>
|
||||
) : null}
|
||||
{showSelect ? (
|
||||
<SwarmButton onClick={onSelect} iconType={Layers}>
|
||||
Use Existing Postage Stamp
|
||||
</SwarmButton>
|
||||
) : null}
|
||||
{showUpload ? (
|
||||
<SwarmButton onClick={onUpload} iconType={Check} disabled={isUploading} loading={isUploading}>
|
||||
Upload To Your Node
|
||||
</SwarmButton>
|
||||
) : null}
|
||||
{showChange ? (
|
||||
<SwarmButton onClick={onClearStamp} iconType={RefreshCcw} disabled={isUploading}>
|
||||
Change Postage Stamp
|
||||
</SwarmButton>
|
||||
) : null}
|
||||
<Button onClick={onCancel} variant="contained" startIcon={<Clear />}>
|
||||
Cancel
|
||||
</Button>
|
||||
<SwarmButton onClick={onUpload} iconType={Check} disabled={isUploading} loading={isUploading}>
|
||||
{uploadLabel}
|
||||
</SwarmButton>
|
||||
<SwarmButton onClick={onGoBack} iconType={ArrowLeft} disabled={isUploading} cancel>
|
||||
Change Postage Stamp
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
{showSelect ? (
|
||||
<Typography>
|
||||
You need a postage stamp to upload. Please refer to the official Bee documentation to understand how postage
|
||||
stamps work.
|
||||
</Typography>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
return <></>
|
||||
}
|
||||
|
||||
@@ -1,19 +1,23 @@
|
||||
import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core'
|
||||
import { DropzoneArea } from 'material-ui-dropzone'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useState } from 'react'
|
||||
import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
|
||||
import { useHistory } from 'react-router-dom'
|
||||
import { DocumentationText } from '../../components/DocumentationText'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { Context } from '../../providers/File'
|
||||
import { Context, UploadOrigin } from '../../providers/File'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { detectIndexHtml } from '../../utils/file'
|
||||
import { SwarmFile } from '../../utils/SwarmFile'
|
||||
|
||||
interface Props {
|
||||
maximumSizeInBytes: number
|
||||
uploadOrigin: UploadOrigin
|
||||
showHelp: boolean
|
||||
}
|
||||
|
||||
const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
areaWrapper: { position: 'relative', marginBottom: theme.spacing(2) },
|
||||
@@ -44,8 +48,8 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
}),
|
||||
)
|
||||
|
||||
export function UploadArea({ maximumSizeInBytes }: Props): ReactElement {
|
||||
const { setFiles } = useContext(Context)
|
||||
export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
|
||||
const { setFiles, setUploadOrigin } = useContext(Context)
|
||||
const classes = useStyles()
|
||||
const history = useHistory()
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
@@ -110,6 +114,7 @@ export function UploadArea({ maximumSizeInBytes }: Props): ReactElement {
|
||||
setFiles(swarmFiles)
|
||||
|
||||
if (files.length) {
|
||||
setUploadOrigin(uploadOrigin)
|
||||
history.push(ROUTES.UPLOAD_IN_PROGRESS)
|
||||
}
|
||||
}
|
||||
@@ -123,7 +128,7 @@ export function UploadArea({ maximumSizeInBytes }: Props): ReactElement {
|
||||
dropzoneClass={classes.dropzone}
|
||||
onChange={handleChange}
|
||||
filesLimit={1e9}
|
||||
maxFileSize={maximumSizeInBytes}
|
||||
maxFileSize={MAX_FILE_SIZE}
|
||||
showPreviews={false}
|
||||
/>
|
||||
<div className={classes.buttonWrapper}>
|
||||
@@ -138,10 +143,12 @@ export function UploadArea({ maximumSizeInBytes }: Props): ReactElement {
|
||||
</SwarmButton>
|
||||
</div>
|
||||
</div>
|
||||
<Typography>
|
||||
You can click the buttons above or simply drag and drop to add a file or folder. To upload a website to Swarm,
|
||||
make sure that your folder contains an “index.html” file.
|
||||
</Typography>
|
||||
{showHelp && (
|
||||
<DocumentationText>
|
||||
You can click the buttons above or simply drag and drop to add a file or folder. To upload a website to Swarm,
|
||||
make sure that your folder contains an “index.html” file.
|
||||
</DocumentationText>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,16 +1,21 @@
|
||||
import { ReactElement } from 'react'
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import { History } from '../../components/History'
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { defaultUploadOrigin } from '../../providers/File'
|
||||
import { HISTORY_KEYS } from '../../utils/local-storage'
|
||||
import { FileNavigation } from './FileNavigation'
|
||||
import { UploadArea } from './UploadArea'
|
||||
|
||||
const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
|
||||
|
||||
export function UploadLander(): ReactElement {
|
||||
const { status } = useContext(BeeContext)
|
||||
|
||||
if (!status.all) return <TroubleshootConnectionCard />
|
||||
|
||||
return (
|
||||
<>
|
||||
<FileNavigation active="UPLOAD" />
|
||||
<UploadArea maximumSizeInBytes={MAX_FILE_SIZE} />
|
||||
<UploadArea showHelp={true} uploadOrigin={defaultUploadOrigin} />
|
||||
<History title="Upload History" localStorageKey={HISTORY_KEYS.UPLOAD_HISTORY} />
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -1,152 +0,0 @@
|
||||
import Button from '@material-ui/core/Button'
|
||||
import CircularProgress from '@material-ui/core/CircularProgress'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import DialogContentText from '@material-ui/core/DialogContentText'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import { Field, Form, Formik, FormikHelpers } from 'formik'
|
||||
import { TextField } from 'formik-material-ui'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import React, { ReactElement, useContext } from 'react'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { Context } from '../../providers/Stamps'
|
||||
|
||||
interface FormValues {
|
||||
depth?: string
|
||||
amount?: string
|
||||
label?: string
|
||||
}
|
||||
type FormErrors = Partial<FormValues>
|
||||
const initialFormValues: FormValues = {
|
||||
depth: '',
|
||||
amount: '',
|
||||
label: '',
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
wrapper: {
|
||||
margin: theme.spacing(1),
|
||||
position: 'relative',
|
||||
},
|
||||
field: {
|
||||
marginTop: theme.spacing(1),
|
||||
marginBottom: theme.spacing(1),
|
||||
},
|
||||
buttonProgress: {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
marginTop: -12,
|
||||
marginBottom: -12,
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
interface Props {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function CreatePostageStampModal({ onClose }: Props): ReactElement {
|
||||
const classes = useStyles()
|
||||
const { refresh } = useContext(Context)
|
||||
const { beeDebugApi } = useContext(SettingsContext)
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
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
|
||||
|
||||
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()
|
||||
onClose()
|
||||
} 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)
|
||||
|
||||
if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
|
||||
else if (depth.isLessThan(16)) errors.depth = 'Minimal depth is 16'
|
||||
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)
|
||||
|
||||
if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
|
||||
else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
|
||||
}
|
||||
|
||||
// Label
|
||||
if (values.label && !/^[0-9a-z]*$/i.test(values.label)) errors.label = 'Label must be an alphanumeric string'
|
||||
|
||||
return errors
|
||||
}}
|
||||
>
|
||||
{({ submitForm, isValid, isSubmitting, values }) => (
|
||||
<Form>
|
||||
<Dialog open={true} onClose={onClose} aria-labelledby="form-dialog-title">
|
||||
<DialogTitle id="form-dialog-title">Buy new postage stamp</DialogTitle>
|
||||
<DialogContent>
|
||||
<Field
|
||||
component={TextField}
|
||||
required
|
||||
name="depth"
|
||||
autoFocus
|
||||
label="Depth"
|
||||
fullWidth
|
||||
className={classes.field}
|
||||
/>
|
||||
<Field component={TextField} required name="amount" label="Amount" fullWidth className={classes.field} />
|
||||
<Field component={TextField} name="label" label="Label" fullWidth className={classes.field} />
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} variant="contained">
|
||||
Cancel
|
||||
</Button>
|
||||
<div className={classes.wrapper}>
|
||||
<Button
|
||||
disabled={isSubmitting || !isValid || !values.amount || !values.depth}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
onClick={submitForm}
|
||||
>
|
||||
Create
|
||||
{isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogActions>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Please refer to the official Bee documentation to understand these values.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { ReactElement } from 'react'
|
||||
import { useHistory } from 'react-router'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { PostageStampCreation } from './PostageStampCreation'
|
||||
|
||||
export function CreatePostageStampPage(): ReactElement {
|
||||
const history = useHistory()
|
||||
|
||||
function onFinished() {
|
||||
history.push(ROUTES.STAMPS)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HistoryHeader>Buy new postage stamp</HistoryHeader>
|
||||
<PostageStampCreation onFinished={onFinished} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
import { Box, Grid, Typography } from '@material-ui/core'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import { Form, Formik, FormikHelpers } from 'formik'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import React, { ReactElement, useContext } from 'react'
|
||||
import { Check } from 'react-feather'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmTextInput } from '../../components/SwarmTextInput'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { Context } from '../../providers/Stamps'
|
||||
import {
|
||||
calculateStampPrice,
|
||||
convertAmountToSeconds,
|
||||
convertDepthToBytes,
|
||||
formatBzz,
|
||||
secondsToTimeString,
|
||||
} from '../../utils'
|
||||
import { getHumanReadableFileSize } from '../../utils/file'
|
||||
|
||||
interface FormValues {
|
||||
depth?: string
|
||||
amount?: string
|
||||
label?: string
|
||||
}
|
||||
type FormErrors = Partial<FormValues>
|
||||
const initialFormValues: FormValues = {
|
||||
depth: '',
|
||||
amount: '',
|
||||
label: '',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
onFinished: () => void
|
||||
}
|
||||
|
||||
export function PostageStampCreation({ onFinished }: Props): ReactElement {
|
||||
const { refresh } = useContext(Context)
|
||||
const { beeDebugApi } = useContext(SettingsContext)
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
function getFileSize(depth: number): string {
|
||||
if (isNaN(depth) || depth < 17 || depth > 255) {
|
||||
return '-'
|
||||
}
|
||||
|
||||
return `~${getHumanReadableFileSize(convertDepthToBytes(depth))}`
|
||||
}
|
||||
|
||||
function getTtl(amount: number): string {
|
||||
if (isNaN(amount) || amount <= 0) {
|
||||
return '-'
|
||||
}
|
||||
|
||||
return secondsToTimeString(convertAmountToSeconds(amount))
|
||||
}
|
||||
|
||||
function getPrice(depth: number, amount: number): string {
|
||||
if (isNaN(amount) || amount <= 0 || isNaN(depth) || depth < 17 || depth > 255) {
|
||||
return '-'
|
||||
}
|
||||
const price = calculateStampPrice(depth, amount)
|
||||
|
||||
return `${formatBzz(price)} BZZ`
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
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 = {}
|
||||
|
||||
// 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(16)) errors.depth = 'Minimal depth is 16'
|
||||
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)
|
||||
|
||||
if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
|
||||
else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
|
||||
}
|
||||
|
||||
// Label
|
||||
if (values.label && !/^[0-9a-z]*$/i.test(values.label)) errors.label = 'Label must be an alphanumeric string'
|
||||
|
||||
return errors
|
||||
}}
|
||||
>
|
||||
{({ submitForm, isValid, isSubmitting, values }) => (
|
||||
<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>{getFileSize(parseInt(values.depth || '0', 10))}</Typography>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
<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>{getTtl(parseInt(values.amount || '0', 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>Indicative Price</Typography>
|
||||
<Typography>{getPrice(parseInt(values.depth || '0', 10), parseInt(values.amount || '0', 10))}</Typography>
|
||||
</Grid>
|
||||
</Box>
|
||||
<SwarmButton
|
||||
disabled={isSubmitting || !isValid || !values.amount || !values.depth}
|
||||
onClick={submitForm}
|
||||
iconType={Check}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
Buy New Stamp
|
||||
</SwarmButton>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import React, { ReactElement, useContext } from 'react'
|
||||
import { SwarmSelect } from '../../components/SwarmSelect'
|
||||
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
|
||||
interface Props {
|
||||
onSelect: (stamp: EnrichedPostageBatch) => void
|
||||
defaultValue?: string
|
||||
}
|
||||
|
||||
export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactElement {
|
||||
const { stamps } = useContext(Context)
|
||||
|
||||
function onChange(stampId: string) {
|
||||
if (!stamps) {
|
||||
return
|
||||
}
|
||||
const stamp = stamps.find(x => x.batchID === stampId)
|
||||
|
||||
if (stamp) {
|
||||
onSelect(stamp)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SwarmSelect
|
||||
options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
|
||||
onChange={event => onChange(event.target.value as string)}
|
||||
defaultValue={defaultValue}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { createStyles, FormControl, makeStyles, MenuItem, Select, Theme } from '@material-ui/core'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
@@ -6,6 +6,7 @@ import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import { Check, Clear } from '@material-ui/icons'
|
||||
import React, { ReactElement, useState } from 'react'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { SwarmSelect } from '../../components/SwarmSelect'
|
||||
import { EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
|
||||
interface Props {
|
||||
@@ -26,14 +27,6 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
color: '#606060',
|
||||
textAlign: 'center',
|
||||
},
|
||||
select: {
|
||||
background: theme.palette.background.paper,
|
||||
borderRadius: 0,
|
||||
border: 0,
|
||||
},
|
||||
option: {
|
||||
height: '52px',
|
||||
},
|
||||
hint: {
|
||||
marginBottom: '16px',
|
||||
},
|
||||
@@ -72,21 +65,10 @@ export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): R
|
||||
Select postage stamp
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<FormControl fullWidth>
|
||||
<Select
|
||||
onChange={event => onChange(event.target.value as string)}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
className={classes.select}
|
||||
defaultValue=""
|
||||
>
|
||||
{stamps.map(x => (
|
||||
<MenuItem key={x.batchID} value={x.batchID} className={classes.option}>
|
||||
{x.batchID.slice(0, 8)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<SwarmSelect
|
||||
options={stamps.map(x => ({ label: x.batchID, value: x.batchID }))}
|
||||
onChange={event => onChange(event.target.value as string)}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogContent>
|
||||
<ExpandableListItemActions>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import type { ReactElement } from 'react'
|
||||
import ExpandableElement from '../../components/ExpandableElement'
|
||||
import ExpandableList from '../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import { EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
import { getHumanReadableFileSize } from '../../utils/file'
|
||||
import { PostageStamp } from './PostageStamp'
|
||||
|
||||
interface Props {
|
||||
@@ -17,7 +19,19 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
|
||||
{postageStamps.map(stamp => (
|
||||
<ExpandableElement
|
||||
key={stamp.batchID}
|
||||
expandable={<ExpandableListItemKey label="Batch ID" value={stamp.batchID} />}
|
||||
expandable={
|
||||
<>
|
||||
<ExpandableListItemKey label="Batch ID" value={stamp.batchID} />
|
||||
<ExpandableListItem label="Depth" value={String(stamp.depth)} />
|
||||
<ExpandableListItem
|
||||
label="Capacity"
|
||||
value={`${getHumanReadableFileSize(2 ** stamp.depth * 4096 * stamp.usage)} / ${getHumanReadableFileSize(
|
||||
2 ** stamp.depth * 4096,
|
||||
)}`}
|
||||
/>
|
||||
<ExpandableListItem label="Amount" value={parseInt(stamp.amount, 10).toLocaleString()} />
|
||||
</>
|
||||
}
|
||||
>
|
||||
<PostageStamp stamp={stamp} shorten={true} />
|
||||
</ExpandableElement>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { CircularProgress, Container } from '@material-ui/core'
|
||||
import { createStyles, makeStyles } from '@material-ui/core/styles'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { ReactElement, useContext, useEffect } from 'react'
|
||||
import { PlusSquare } from 'react-feather'
|
||||
import { useHistory } from 'react-router'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as StampsContext } from '../../providers/Stamps'
|
||||
import { CreatePostageStampModal } from './CreatePostageStampModal'
|
||||
import { ROUTES } from '../../routes'
|
||||
import StampsTable from './StampsTable'
|
||||
|
||||
const useStyles = makeStyles(() =>
|
||||
@@ -28,7 +29,7 @@ const useStyles = makeStyles(() =>
|
||||
export default function Stamp(): ReactElement {
|
||||
const classes = useStyles()
|
||||
|
||||
const [isBuyingStamp, setBuyingStamp] = useState(false)
|
||||
const history = useHistory()
|
||||
|
||||
const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
|
||||
const { status } = useContext(BeeContext)
|
||||
@@ -42,6 +43,10 @@ export default function Stamp(): ReactElement {
|
||||
|
||||
if (!status.all) return <TroubleshootConnectionCard />
|
||||
|
||||
function navigateToNewStamp() {
|
||||
history.push(ROUTES.STAMPS_NEW)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
{error && (
|
||||
@@ -52,9 +57,7 @@ export default function Stamp(): ReactElement {
|
||||
{!error && (
|
||||
<>
|
||||
<div className={classes.actions}>
|
||||
{isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
|
||||
|
||||
<SwarmButton onClick={() => setBuyingStamp(true)} iconType={PlusSquare}>
|
||||
<SwarmButton onClick={navigateToNewStamp} iconType={PlusSquare}>
|
||||
Buy New Postage Stamp
|
||||
</SwarmButton>
|
||||
<div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
|
||||
|
||||
Reference in New Issue
Block a user