feat: improve upload flow (#240)
* feat: separate flow for folder and file uploads * feat: add basic index document detection * feat(wip): separate preview step * fix: fix kb and mb units * feat: add post upload summary, add some styling * feat: upload flow * fix: change element order and add conditional rendering * refactor: remove unused variables for now * fix: put back stamp creation to stamp page * refactor: rework postage stamps and grid * feat: add website and folder icons * feat: add asset preview to download flow, add file icon * feat: add basic design to postage stamp selection dialog * feat: add web icon, shorten stamp in preview * feat: extract swarm hash in download flow * fix: extract swarmbutton and solve icon hover and focus color * fix: always show buy button on stamp page * refactor: downgrade * refactor: speed up icon transition * style: improve download buttons * style: change [back to upload] icon * style: add spacing before swarm gateway text * style: post upload summary spacing * refactor: drop verticalspacing and use box * refactor: merge icons to one component * refactor: use conditions instead of weird assignment * docs: explain filter(x => x) * refactor: generalize capacity * refactor: avoid passing arrow functions * refactor: get rid of PaperGridContainer and Container * fix: fix hover color for postage stamps * feat: add disabled and loading state to buttons * fix: make drag and drop work for websites * feat: handle folders and non existing hashes * fix: provide empty default value to select to avoid console warning * style: remove body2 font variants * fix: remove typo * feat: disable folder upload, add website upload * fix: disable showPreviews to avoid flickering * feat(temp): remove folder upload * fix: remove stuck focus on buttons even after rendering different buttons * style: merge hover and focus styles, fix safari text wrap issue * style: remove dropbox outline in safari
This commit is contained in:
Cafe137
GitHub
@@ -0,0 +1,10 @@
|
||||
import { ReactElement } from 'react'
|
||||
import { StripedWrapper } from '../../components/StripedWrapper'
|
||||
|
||||
interface Props {
|
||||
icon: ReactElement
|
||||
}
|
||||
|
||||
export function AssetIcon({ icon }: Props): ReactElement {
|
||||
return <StripedWrapper>{icon}</StripedWrapper>
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import { Box, Grid, Typography } from '@material-ui/core'
|
||||
import { Web } from '@material-ui/icons'
|
||||
import { ReactElement, useEffect, useState } from 'react'
|
||||
import { File, Folder } from 'react-feather'
|
||||
import { FitImage } from '../../components/FitImage'
|
||||
import { detectIndexHtml, getHumanReadableFileSize } from '../../utils/file'
|
||||
import { SwarmFile } from '../../utils/SwarmFile'
|
||||
import { AssetIcon } from './AssetIcon'
|
||||
|
||||
interface Props {
|
||||
files: SwarmFile[]
|
||||
}
|
||||
|
||||
export function AssetPreview({ files }: Props): ReactElement {
|
||||
const [previewComponent, setPreviewComponent] = useState<ReactElement | undefined>(undefined)
|
||||
const [previewUri, setPreviewUri] = useState<string | undefined>(undefined)
|
||||
|
||||
useEffect(() => {
|
||||
if (files.length === 1) {
|
||||
// single image
|
||||
if (files[0].type.startsWith('image/')) {
|
||||
files[0].arrayBuffer().then(value => {
|
||||
const blob = new Blob([value])
|
||||
setPreviewUri(URL.createObjectURL(blob))
|
||||
})
|
||||
// single non-image
|
||||
} else {
|
||||
setPreviewUri(undefined)
|
||||
setPreviewComponent(<AssetIcon icon={<File />} />)
|
||||
}
|
||||
// collection
|
||||
} else if (detectIndexHtml(files)) {
|
||||
setPreviewUri(undefined)
|
||||
setPreviewComponent(<AssetIcon icon={<Web />} />)
|
||||
} else {
|
||||
setPreviewUri(undefined)
|
||||
setPreviewComponent(<AssetIcon icon={<Folder />} />)
|
||||
}
|
||||
}, [files])
|
||||
|
||||
const getPrimaryText = () => {
|
||||
if (files.length === 1) {
|
||||
return 'Filename: ' + files[0].name
|
||||
}
|
||||
|
||||
return 'Folder name: ' + files[0].path.split('/')[0]
|
||||
}
|
||||
|
||||
const getKind = () => {
|
||||
if (files.length === 1) {
|
||||
return files[0].type
|
||||
}
|
||||
|
||||
if (detectIndexHtml(files)) {
|
||||
return 'Website'
|
||||
}
|
||||
|
||||
return 'Folder'
|
||||
}
|
||||
|
||||
const isFolder = () => ['Folder', 'Website'].includes(getKind())
|
||||
|
||||
const getSize = () => {
|
||||
const bytes = files.reduce((total, item) => total + item.size, 0)
|
||||
|
||||
return getHumanReadableFileSize(bytes)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box mb={4}>
|
||||
<Box bgcolor="background.paper">
|
||||
<Grid container direction="row">
|
||||
{previewComponent ? (
|
||||
previewComponent
|
||||
) : (
|
||||
<FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
|
||||
)}
|
||||
<Box p={2}>
|
||||
<Typography>{getPrimaryText()}</Typography>
|
||||
<Typography>Kind: {getKind()}</Typography>
|
||||
<Typography>Size: {getSize()}</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
{isFolder() && (
|
||||
<Box mt={0.25} p={2} bgcolor="background.paper">
|
||||
<Grid container justifyContent="space-between" alignItems="center" direction="row">
|
||||
<Typography variant="subtitle2">Folder content</Typography>
|
||||
<Typography variant="subtitle2">{files.length} items</Typography>
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,28 +1,91 @@
|
||||
import { ReactElement, useState, useContext } from 'react'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import ExpandableListItemInput from '../../components/ExpandableListItemInput'
|
||||
import { Utils } from '@ethersphere/bee-js'
|
||||
import { Box } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useState } from 'react'
|
||||
import ExpandableListItemInput from '../../components/ExpandableListItemInput'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { extractSwarmHash } from '../../utils'
|
||||
import { convertBeeFileToBrowserFile } from '../../utils/file'
|
||||
import { SwarmFile } from '../../utils/SwarmFile'
|
||||
import { AssetPreview } from './AssetPreview'
|
||||
import { DownloadActionBar } from './DownloadActionBar'
|
||||
|
||||
export default function Files(): ReactElement {
|
||||
const { apiUrl } = useContext(SettingsContext)
|
||||
const { apiUrl, beeApi } = useContext(SettingsContext)
|
||||
|
||||
const [reference, setReference] = useState('')
|
||||
const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
|
||||
const [downloadedFile, setDownloadedFile] = useState<Partial<File> | null>(null)
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
const validateChange = (value: string) => {
|
||||
if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128)) setReferenceError(undefined)
|
||||
else setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
|
||||
}
|
||||
|
||||
function onDownload() {
|
||||
window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
|
||||
}
|
||||
|
||||
async function onSwarmIdentifier(identifier: string) {
|
||||
if (!beeApi) {
|
||||
return
|
||||
}
|
||||
setReference(identifier)
|
||||
try {
|
||||
const response = await beeApi.downloadFile(identifier)
|
||||
setDownloadedFile(convertBeeFileToBrowserFile(response))
|
||||
} catch (error: unknown) {
|
||||
let message = typeof error === 'object' && error !== null && Reflect.get(error, 'message')
|
||||
|
||||
if (message.includes('path address not found')) {
|
||||
message = 'The specified hash does not have an index document set.'
|
||||
}
|
||||
|
||||
if (message.includes('Not Found: Not Found')) {
|
||||
message = 'The specified hash was not found.'
|
||||
}
|
||||
enqueueSnackbar(<span>Error: {message || 'Unknown'}</span>, { variant: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
if (downloadedFile) {
|
||||
return (
|
||||
<>
|
||||
<Box mb={4}>
|
||||
<AssetPreview files={[new SwarmFile(downloadedFile as File)]} />
|
||||
</Box>
|
||||
<DownloadActionBar onCancel={() => setDownloadedFile(null)} onDownload={onDownload} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function recognizeSwarmHash(value: string) {
|
||||
if (value.length < 64) {
|
||||
return value
|
||||
}
|
||||
|
||||
const hash = extractSwarmHash(value)
|
||||
|
||||
if (hash) {
|
||||
return hash
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
return (
|
||||
<ExpandableListItemInput
|
||||
label="Swarm Hash"
|
||||
onConfirm={value => window.open(`${apiUrl}/bzz/${value}`, '_blank')}
|
||||
onConfirm={value => onSwarmIdentifier(value)}
|
||||
onChange={validateChange}
|
||||
helperText={referenceError}
|
||||
confirmLabel={'Download'}
|
||||
confirmLabel={'Search'}
|
||||
confirmLabelDisabled={Boolean(referenceError)}
|
||||
placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
|
||||
expandedOnly
|
||||
mapperFn={value => recognizeSwarmHash(value)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Button } from '@material-ui/core'
|
||||
import { Clear } from '@material-ui/icons'
|
||||
import { ReactElement } from 'react'
|
||||
import { Download } from 'react-feather'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
|
||||
interface Props {
|
||||
onDownload: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export function DownloadActionBar({ onDownload, onCancel }: Props): ReactElement {
|
||||
return (
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton onClick={onDownload} iconType={Download}>
|
||||
Download This File
|
||||
</SwarmButton>
|
||||
<Button onClick={onCancel} variant="contained" startIcon={<Clear />}>
|
||||
Cancel
|
||||
</Button>
|
||||
</ExpandableListItemActions>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { CornerUpLeft } from 'react-feather'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import ExpandableListItemLink from '../../components/ExpandableListItemLink'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
|
||||
interface Props {
|
||||
uploadReference: string
|
||||
onUploadNewClick: () => void
|
||||
}
|
||||
|
||||
export function PostUploadSummary({ uploadReference, onUploadNewClick }: Props): ReactElement {
|
||||
return (
|
||||
<>
|
||||
<Box mb={4}>
|
||||
<ExpandableListItemKey label="Swarm hash" value={uploadReference} />
|
||||
<ExpandableListItemLink
|
||||
label="Share on Swarm Gateway"
|
||||
value={`https://gateway.ethswarm.org/access/${uploadReference}`}
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton onClick={onUploadNewClick} iconType={CornerUpLeft}>
|
||||
Back to Upload
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</Box>
|
||||
<Typography>
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
import { PostageStamp } from '../stamps/PostageStamp'
|
||||
|
||||
interface Props {
|
||||
stamp: EnrichedPostageBatch
|
||||
}
|
||||
|
||||
export function StampPreview({ stamp }: Props): ReactElement {
|
||||
return (
|
||||
<Box mb={4}>
|
||||
<Box mb={0.25} p={2} bgcolor="background.paper">
|
||||
<Typography variant="subtitle2">Associated postage stamp:</Typography>
|
||||
</Box>
|
||||
<Box bgcolor="background.paper">
|
||||
<PostageStamp stamp={stamp} shorten={true} />
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
+58
-113
@@ -1,19 +1,17 @@
|
||||
import { Button, CircularProgress, Container, Avatar, Chip, Typography } from '@material-ui/core'
|
||||
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
|
||||
import { DropzoneArea } from 'material-ui-dropzone'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { RotateCcw, Check } from 'react-feather'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import UploadSizeAlert from '../../components/AlertUploadSize'
|
||||
import ClipboardCopy from '../../components/ClipboardCopy'
|
||||
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import CreatePostageStamp from '../stamps/CreatePostageStampModal'
|
||||
import SelectStamp from './SelectStamp'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import ExpandableListItemNote from '../../components/ExpandableListItemNote'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
import { detectIndexHtml } from '../../utils/file'
|
||||
import { SwarmFile } from '../../utils/SwarmFile'
|
||||
import { CreatePostageStampModal } from '../stamps/CreatePostageStampModal'
|
||||
import { SelectPostageStampModal } from '../stamps/SelectPostageStampModal'
|
||||
import { AssetPreview } from './AssetPreview'
|
||||
import { PostUploadSummary } from './PostUploadSummary'
|
||||
import { StampPreview } from './StampPreview'
|
||||
import { UploadActionBar } from './UploadActionBar'
|
||||
import { UploadArea } from './UploadArea'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
@@ -27,13 +25,14 @@ const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
|
||||
export default function Files(): ReactElement {
|
||||
const classes = useStyles()
|
||||
const [dropzoneKey, setDropzoneKey] = useState(0)
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [files, setFiles] = useState<SwarmFile[]>([])
|
||||
const [uploadReference, setUploadReference] = useState('')
|
||||
const [isUploadingFile, setIsUploadingFile] = useState(false)
|
||||
const [isBuyingStamp, setBuyingStamp] = useState(false)
|
||||
const [isSelectingStamp, setSelectingStamp] = useState(false)
|
||||
const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
|
||||
const [isUploading, setUploading] = useState(false)
|
||||
|
||||
const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
|
||||
|
||||
const { isLoading, error, stamps, refresh } = useContext(Context)
|
||||
const { stamps, refresh } = useContext(Context)
|
||||
const { beeApi } = useContext(SettingsContext)
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
@@ -41,123 +40,69 @@ export default function Files(): ReactElement {
|
||||
refresh()
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Choose a postage stamp that has the lowest usage
|
||||
useEffect(() => {
|
||||
if (!selectedStamp && stamps && stamps.length > 0) {
|
||||
const stamp = stamps.reduce((prev, curr) => {
|
||||
if (curr.usage < prev.usage) return curr
|
||||
|
||||
return prev
|
||||
}, stamps[0])
|
||||
|
||||
setSelectedStamp(stamp)
|
||||
const uploadFiles = () => {
|
||||
if (!beeApi || !files.length || !stamp) {
|
||||
return
|
||||
}
|
||||
}, [isLoading, error, stamps, selectedStamp])
|
||||
|
||||
const uploadFile = () => {
|
||||
if (file === null || selectedStamp === null) return
|
||||
const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(files) || undefined
|
||||
|
||||
if (!beeApi) return
|
||||
setUploading(true)
|
||||
|
||||
setIsUploadingFile(true)
|
||||
beeApi
|
||||
.uploadFile(selectedStamp.batchID, file)
|
||||
.uploadFiles(stamp.batchID, files as unknown as File[], { indexDocument })
|
||||
.then(hash => setUploadReference(hash.reference))
|
||||
.catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
|
||||
.finally(() => setIsUploadingFile(false))
|
||||
.finally(() => setUploading(false))
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
setFiles([])
|
||||
setStamp(null)
|
||||
setUploading(false)
|
||||
}
|
||||
|
||||
const uploadNew = () => {
|
||||
setTimeout(() => {
|
||||
setFile(null)
|
||||
reset()
|
||||
setDropzoneKey(dropzoneKey + 1)
|
||||
setUploadReference('')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleChange = (files?: File[]) => {
|
||||
setUploadReference('')
|
||||
|
||||
if (files) {
|
||||
setFile(files[0])
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropzoneArea
|
||||
key={'dropzone-' + dropzoneKey}
|
||||
onChange={handleChange}
|
||||
filesLimit={1}
|
||||
maxFileSize={MAX_FILE_SIZE}
|
||||
/>
|
||||
{files.length ? (
|
||||
<AssetPreview files={files} />
|
||||
) : (
|
||||
<UploadArea maximumSizeInBytes={MAX_FILE_SIZE} setFiles={setFiles} />
|
||||
)}
|
||||
{stamp !== null && !uploadReference ? <StampPreview stamp={stamp} /> : null}
|
||||
{files.length && !uploadReference ? (
|
||||
<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}
|
||||
/>
|
||||
) : null}
|
||||
<div className={classes.content}>
|
||||
{/* We have file and can upload display stamp selection */}
|
||||
{file && !isUploadingFile && !uploadReference && (
|
||||
<>
|
||||
<ExpandableListItemNote>
|
||||
To upload this file to your node, you need a postage stamp. You can buy a new one or you can use an
|
||||
existing stamp (providing it’s sufficient for this file).
|
||||
</ExpandableListItemNote>
|
||||
{selectedStamp && (
|
||||
<ExpandableListItem
|
||||
label={
|
||||
<>
|
||||
Upload with Postage Stamp{' '}
|
||||
<Chip
|
||||
avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
|
||||
label={<Typography variant="body2">{selectedStamp.batchID.substr(0, 8)}[…]</Typography>}
|
||||
deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
|
||||
onDelete={() => {} /* eslint-disable-line*/}
|
||||
variant="outlined"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
value={<SelectStamp stamps={stamps} selectedStamp={selectedStamp} setSelected={setSelectedStamp} />}
|
||||
/>
|
||||
)}
|
||||
{!selectedStamp && (
|
||||
<ExpandableListItemActions>
|
||||
<CreatePostageStamp />
|
||||
</ExpandableListItemActions>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* We have file and can upload display upload button */}
|
||||
{file && !uploadReference && (
|
||||
<>
|
||||
<ExpandableListItemActions>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={!file && isUploadingFile && !selectedStamp}
|
||||
onClick={() => uploadFile()}
|
||||
startIcon={<Check size="1rem" />}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
{isUploadingFile && (
|
||||
<Container className={classes.loadingProgress}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
)}
|
||||
</ExpandableListItemActions>
|
||||
<UploadSizeAlert file={file} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* File has already been uploaded */}
|
||||
{uploadReference && (
|
||||
<>
|
||||
<ExpandableListItemKey label="Swarm Reference" value={uploadReference} />
|
||||
<ExpandableListItemActions>
|
||||
<Button variant="contained" onClick={uploadNew} startIcon={<RotateCcw size="1rem" />}>
|
||||
Upload New File
|
||||
</Button>
|
||||
</ExpandableListItemActions>
|
||||
</>
|
||||
<PostUploadSummary onUploadNewClick={() => uploadNew()} uploadReference={uploadReference} />
|
||||
)}
|
||||
</div>
|
||||
{isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
|
||||
{stamps && isSelectingStamp ? (
|
||||
<SelectPostageStampModal
|
||||
stamps={stamps}
|
||||
onClose={() => setSelectingStamp(false)}
|
||||
onSelect={stamp => setStamp(stamp)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
import { Button, Typography } from '@material-ui/core'
|
||||
import { Clear } from '@material-ui/icons'
|
||||
import { ReactElement } from 'react'
|
||||
import { Check, Layers, PlusSquare, RefreshCcw } from 'react-feather'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
|
||||
interface Props {
|
||||
canSelectStamp: boolean
|
||||
hasSelectedStamp: boolean
|
||||
onUpload: () => void
|
||||
onBuy: () => void
|
||||
onSelect: () => void
|
||||
onCancel: () => void
|
||||
onClearStamp: () => void
|
||||
isUploading: boolean
|
||||
}
|
||||
|
||||
export function UploadActionBar({
|
||||
canSelectStamp,
|
||||
hasSelectedStamp,
|
||||
onUpload,
|
||||
onBuy,
|
||||
onSelect,
|
||||
onCancel,
|
||||
onClearStamp,
|
||||
isUploading,
|
||||
}: Props): ReactElement {
|
||||
const showBuy = !hasSelectedStamp
|
||||
const showSelect = canSelectStamp && !hasSelectedStamp
|
||||
const showUpload = hasSelectedStamp
|
||||
const showChange = canSelectStamp && hasSelectedStamp
|
||||
|
||||
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>
|
||||
</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}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
|
||||
import { DropzoneArea } from 'material-ui-dropzone'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement } from 'react'
|
||||
import { FilePlus } from 'react-feather'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { detectIndexHtml } from '../../utils/file'
|
||||
import { SwarmFile } from '../../utils/SwarmFile'
|
||||
|
||||
interface Props {
|
||||
setFiles: (files: SwarmFile[]) => void
|
||||
maximumSizeInBytes: number
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
areaWrapper: { position: 'relative', marginBottom: theme.spacing(2) },
|
||||
dropzone: {
|
||||
background: theme.palette.background.default,
|
||||
outline: 'none',
|
||||
color: 'transparent',
|
||||
zIndex: 1,
|
||||
'& svg': {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
buttonWrapper: {
|
||||
top: '0',
|
||||
left: '0',
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
button: {
|
||||
marginLeft: theme.spacing(0.5),
|
||||
marginRight: theme.spacing(0.5),
|
||||
zIndex: 2,
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElement {
|
||||
const classes = useStyles()
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
const getDropzoneInputDomElement = () => document.querySelector('.MuiDropzoneArea-root input') as HTMLInputElement
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const onUploadFolderClick = () => {
|
||||
const element = getDropzoneInputDomElement()
|
||||
|
||||
if (element) {
|
||||
element.setAttribute('directory', '')
|
||||
element.setAttribute('webkitdirectory', '')
|
||||
element.setAttribute('mozdirectory', '')
|
||||
element.click()
|
||||
}
|
||||
}
|
||||
|
||||
const onUploadFileClick = () => {
|
||||
const element = getDropzoneInputDomElement()
|
||||
|
||||
if (element) {
|
||||
element.removeAttribute('directory')
|
||||
element.removeAttribute('webkitdirectory')
|
||||
element.removeAttribute('mozdirectory')
|
||||
element.click()
|
||||
}
|
||||
}
|
||||
|
||||
const resetComponentOnAddingInvalidContent = (files: SwarmFile[]) => {
|
||||
setFiles(files)
|
||||
setTimeout(() => {
|
||||
setFiles([])
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleChange = (files?: File[]) => {
|
||||
if (files) {
|
||||
const swarmFiles = files.map(x => new SwarmFile(x))
|
||||
const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(swarmFiles) || undefined
|
||||
|
||||
if (files.length && !indexDocument) {
|
||||
enqueueSnackbar('To upload a website, there must be an index.html or index.htm in the root of the folder.', {
|
||||
variant: 'error',
|
||||
})
|
||||
resetComponentOnAddingInvalidContent(swarmFiles)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
setFiles(swarmFiles)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={classes.areaWrapper}>
|
||||
<DropzoneArea
|
||||
dropzoneClass={classes.dropzone}
|
||||
onChange={handleChange}
|
||||
filesLimit={1}
|
||||
maxFileSize={maximumSizeInBytes}
|
||||
showPreviews={false}
|
||||
/>
|
||||
<div className={classes.buttonWrapper}>
|
||||
<SwarmButton className={classes.button} onClick={onUploadFileClick} iconType={FilePlus}>
|
||||
Add File
|
||||
</SwarmButton>
|
||||
</div>
|
||||
</div>
|
||||
<Typography>You can click the button above or simply drag and drop to add a file.</Typography>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -47,16 +47,13 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
)
|
||||
|
||||
interface Props {
|
||||
label?: string
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default function FormDialog({ label }: Props): ReactElement {
|
||||
export function CreatePostageStampModal({ onClose }: Props): ReactElement {
|
||||
const classes = useStyles()
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const { refresh } = useContext(Context)
|
||||
const { beeDebugApi } = useContext(SettingsContext)
|
||||
const handleClickOpen = () => setOpen(true)
|
||||
const handleClose = () => setOpen(false)
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
return (
|
||||
@@ -75,7 +72,7 @@ export default function FormDialog({ label }: Props): ReactElement {
|
||||
await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
|
||||
actions.resetForm()
|
||||
await refresh()
|
||||
handleClose()
|
||||
onClose()
|
||||
} catch (e) {
|
||||
enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
|
||||
actions.setSubmitting(false)
|
||||
@@ -111,20 +108,9 @@ export default function FormDialog({ label }: Props): ReactElement {
|
||||
>
|
||||
{({ submitForm, isValid, isSubmitting, values }) => (
|
||||
<Form>
|
||||
<Button variant="contained" onClick={handleClickOpen}>
|
||||
{label || 'Buy Postage Stamp'}
|
||||
{isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
|
||||
</Button>
|
||||
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
|
||||
<DialogTitle id="form-dialog-title">Purchase new postage stamp</DialogTitle>
|
||||
<Dialog open={true} onClose={onClose} aria-labelledby="form-dialog-title">
|
||||
<DialogTitle id="form-dialog-title">Buy new postage stamp</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Provide the depth, amount and optionally the label of the postage stamp. Please refer to the{' '}
|
||||
<a href="https://docs.ethswarm.org/docs/access-the-swarm/keep-your-data-alive" target="blank">
|
||||
official bee docs
|
||||
</a>{' '}
|
||||
to understand these values.
|
||||
</DialogContentText>
|
||||
<Field
|
||||
component={TextField}
|
||||
required
|
||||
@@ -138,7 +124,7 @@ export default function FormDialog({ label }: Props): ReactElement {
|
||||
<Field component={TextField} name="label" label="Label" fullWidth className={classes.field} />
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} variant="contained">
|
||||
<Button onClick={onClose} variant="contained">
|
||||
Cancel
|
||||
</Button>
|
||||
<div className={classes.wrapper}>
|
||||
@@ -153,6 +139,11 @@ export default function FormDialog({ label }: Props): ReactElement {
|
||||
</Button>
|
||||
</div>
|
||||
</DialogActions>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Please refer to the official Bee documentation to understand these values.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Box, Grid, Typography } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { Capacity } from '../../components/Capacity'
|
||||
import { EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
|
||||
interface Props {
|
||||
stamp: EnrichedPostageBatch
|
||||
shorten?: boolean
|
||||
}
|
||||
|
||||
export function PostageStamp({ stamp, shorten }: Props): ReactElement {
|
||||
return (
|
||||
<Box p={2} width="100%">
|
||||
<Grid container justifyContent="space-between" alignItems="center" direction="row">
|
||||
<Typography variant="subtitle2">{shorten ? stamp.batchID.slice(0, 8) : stamp.batchID}</Typography>
|
||||
<Capacity width="100px" usage={stamp.usage} />
|
||||
</Grid>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
import { Box, createStyles, FormControl, makeStyles, MenuItem, Select, Theme, Typography } 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'
|
||||
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 { EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
|
||||
interface Props {
|
||||
stamps: EnrichedPostageBatch[]
|
||||
onSelect: (stamp: EnrichedPostageBatch) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
dialog: {
|
||||
background: theme.palette.background.default,
|
||||
borderRadius: 0,
|
||||
width: '100%',
|
||||
maxWidth: '890px',
|
||||
},
|
||||
title: {
|
||||
color: '#606060',
|
||||
textAlign: 'center',
|
||||
},
|
||||
select: {
|
||||
background: theme.palette.background.paper,
|
||||
borderRadius: 0,
|
||||
border: 0,
|
||||
},
|
||||
option: {
|
||||
height: '52px',
|
||||
},
|
||||
hint: {
|
||||
marginBottom: '16px',
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): ReactElement {
|
||||
const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
function onChange(stampId: string) {
|
||||
const stamp = stamps.find(x => x.batchID === stampId)
|
||||
|
||||
if (stamp) {
|
||||
setSelectedStamp(stamp)
|
||||
}
|
||||
}
|
||||
|
||||
function onFinish() {
|
||||
if (selectedStamp) {
|
||||
onSelect(selectedStamp)
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
aria-labelledby="form-dialog-title"
|
||||
fullWidth
|
||||
PaperProps={{ className: classes.dialog }}
|
||||
>
|
||||
<DialogTitle id="form-dialog-title" className={classes.title}>
|
||||
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>
|
||||
</DialogContent>
|
||||
<Box mb={2}>
|
||||
<DialogContent>
|
||||
<ExpandableListItemActions>
|
||||
<Button disabled={!selectedStamp} onClick={onFinish} variant="contained" startIcon={<Check />}>
|
||||
Select
|
||||
</Button>
|
||||
<Button onClick={onClose} variant="contained" startIcon={<Clear />}>
|
||||
Cancel
|
||||
</Button>
|
||||
</ExpandableListItemActions>
|
||||
</DialogContent>
|
||||
</Box>
|
||||
<DialogContent>
|
||||
<Typography className={classes.hint}>
|
||||
Please refer to the{' '}
|
||||
<a
|
||||
href="https://docs.ethswarm.org/docs/access-the-swarm/keep-your-data-alive#purchase-a-batch-of-stamps"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
official Bee documentation
|
||||
</a>{' '}
|
||||
to understand these values.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
import type { ReactElement } from 'react'
|
||||
import { EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
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 { PostageStamp } from './PostageStamp'
|
||||
|
||||
interface Props {
|
||||
postageStamps: EnrichedPostageBatch[] | null
|
||||
@@ -13,11 +14,13 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
|
||||
|
||||
return (
|
||||
<ExpandableList label="Postage Stamps" defaultOpen>
|
||||
{postageStamps.map(({ batchID, usageText }) => (
|
||||
<ExpandableList key={batchID} label={`${batchID.substr(0, 8)}[…]`} level={1} info={`${usageText} used`}>
|
||||
<ExpandableListItemKey label="Batch ID" value={batchID} />
|
||||
<ExpandableListItem label="Usage" value={usageText} />
|
||||
</ExpandableList>
|
||||
{postageStamps.map(stamp => (
|
||||
<ExpandableElement
|
||||
key={stamp.batchID}
|
||||
expandable={<ExpandableListItemKey label="Batch ID" value={stamp.batchID} />}
|
||||
>
|
||||
<PostageStamp stamp={stamp} shorten={true} />
|
||||
</ExpandableElement>
|
||||
))}
|
||||
</ExpandableList>
|
||||
)
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { ReactElement, useContext, useEffect } from 'react'
|
||||
import { CircularProgress, Container } from '@material-ui/core'
|
||||
import { createStyles, makeStyles } from '@material-ui/core/styles'
|
||||
import { Container, CircularProgress } from '@material-ui/core'
|
||||
|
||||
import StampsTable from './StampsTable'
|
||||
import CreatePostageStampModal from './CreatePostageStampModal'
|
||||
|
||||
import { Context as StampsContext } from '../../providers/Stamps'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { PlusSquare } from 'react-feather'
|
||||
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 StampsTable from './StampsTable'
|
||||
|
||||
const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
@@ -25,8 +25,11 @@ const useStyles = makeStyles(() =>
|
||||
}),
|
||||
)
|
||||
|
||||
export default function Accounting(): ReactElement {
|
||||
export default function Stamp(): ReactElement {
|
||||
const classes = useStyles()
|
||||
|
||||
const [isBuyingStamp, setBuyingStamp] = useState(false)
|
||||
|
||||
const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
|
||||
const { status } = useContext(BeeContext)
|
||||
|
||||
@@ -49,7 +52,11 @@ export default function Accounting(): ReactElement {
|
||||
{!error && (
|
||||
<>
|
||||
<div className={classes.actions}>
|
||||
<CreatePostageStampModal />
|
||||
{isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
|
||||
|
||||
<SwarmButton onClick={() => setBuyingStamp(true)} iconType={PlusSquare}>
|
||||
Buy New Postage Stamp
|
||||
</SwarmButton>
|
||||
<div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
|
||||
</div>
|
||||
<StampsTable postageStamps={stamps} />
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import MuiAlert from '@material-ui/lab/Alert'
|
||||
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs'
|
||||
import ExpandableList from '../../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../../components/ExpandableListItem'
|
||||
import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
|
||||
import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
|
||||
import StatusIcon from '../../../components/StatusIcon'
|
||||
import { Context as SettingsContext } from '../../../providers/Settings'
|
||||
import { Context } from '../../../providers/Bee'
|
||||
import { Context as SettingsContext } from '../../../providers/Settings'
|
||||
|
||||
export default function NodeConnectionCheck(): ReactElement | null {
|
||||
const { status, isLoading } = useContext(Context)
|
||||
@@ -25,7 +24,7 @@ export default function NodeConnectionCheck(): ReactElement | null {
|
||||
>
|
||||
<ExpandableListItemNote>
|
||||
{isOk
|
||||
? 'The connection to the Bee nodes deug API has been successful'
|
||||
? 'The connection to the Bee nodes debug API has been successful'
|
||||
: 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
|
||||
</ExpandableListItemNote>
|
||||
<ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
|
||||
|
||||
Reference in New Issue
Block a user