diff --git a/src/components/Code.tsx b/src/components/Code.tsx
index f48ee11..3b96d1e 100644
--- a/src/components/Code.tsx
+++ b/src/components/Code.tsx
@@ -1,23 +1,21 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core'
import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
interface Props {
children: string
prettify?: boolean
}
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- wrapper: {
- overflow: 'scroll',
- background: '#ffffff',
- },
- pre: {
- maxHeight: '6em',
- padding: theme.spacing(2),
- },
- }),
-)
+const useStyles = makeStyles()(theme => ({
+ wrapper: {
+ overflow: 'scroll',
+ background: '#ffffff',
+ },
+ pre: {
+ maxHeight: '6em',
+ padding: theme.spacing(2),
+ },
+}))
function prettifyString(string: string): string {
try {
@@ -28,7 +26,7 @@ function prettifyString(string: string): string {
}
export function Code({ children, prettify }: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
return (
diff --git a/src/components/CodeBlockTabs.tsx b/src/components/CodeBlockTabs.tsx
index 583768d..2da0343 100644
--- a/src/components/CodeBlockTabs.tsx
+++ b/src/components/CodeBlockTabs.tsx
@@ -1,8 +1,10 @@
import { ReactElement, useContext } from 'react'
-import TabsContainer from './TabsContainer'
-import CodeBlock from './CodeBlock'
+
import { Context } from '../providers/Platform'
+import CodeBlock from './CodeBlock'
+import TabsContainer from './TabsContainer'
+
interface Props {
linux: string
mac: string
diff --git a/src/components/DocumentationText.tsx b/src/components/DocumentationText.tsx
index 0158956..e2351ea 100644
--- a/src/components/DocumentationText.tsx
+++ b/src/components/DocumentationText.tsx
@@ -1,21 +1,20 @@
-import { createStyles, makeStyles, Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
interface Props {
children: (string | ReactElement)[] | (string | ReactElement)
}
-const useStyles = makeStyles(() =>
- createStyles({
- text: {
- color: '#606060',
- fontSize: '0.9rem',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ text: {
+ color: '#606060',
+ fontSize: '0.9rem',
+ },
+}))
export function DocumentationText({ children }: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
return {children}
}
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 6dc2179..c36beb5 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -28,7 +28,8 @@ export default class ErrorBoundary extends Component {
this.errorReporting(error)
}
- console.error({ error, errorInfo }) // eslint-disable-line
+ // eslint-disable-next-line no-console
+ console.error({ error, errorInfo })
}
render(): ReactElement {
diff --git a/src/components/EthereumAddress.tsx b/src/components/EthereumAddress.tsx
deleted file mode 100644
index e911389..0000000
--- a/src/components/EthereumAddress.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Typography } from '@material-ui/core/'
-import { EthAddress } from '@ethersphere/bee-js'
-import { ReactElement } from 'react'
-import Identicon from 'react-identicons'
-import { BLOCKCHAIN_EXPLORER_URL } from '../constants'
-import ClipboardCopy from './ClipboardCopy'
-import { Flex } from './Flex'
-import QRCodeModal from './QRCodeModal'
-
-interface Props {
- address: EthAddress | undefined
- hideBlockie?: boolean
- transaction?: boolean
- truncate?: boolean
-}
-
-export default function EthereumAddress(props: Props): ReactElement {
- return (
-
- {props.address ? (
-
- {props.hideBlockie ? null : (
-
- ) : (
- '-'
- )}
-
- )
-}
diff --git a/src/components/ExpandableElement.tsx b/src/components/ExpandableElement.tsx
index 3c5029b..a60ac4e 100644
--- a/src/components/ExpandableElement.tsx
+++ b/src/components/ExpandableElement.tsx
@@ -1,38 +1,36 @@
-import { Collapse, ListItem } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ExpandLess, ExpandMore } from '@mui/icons-material'
+import { Collapse, ListItemButton } from '@mui/material'
import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- width: '100%',
- padding: 0,
- margin: 0,
- marginTop: theme.spacing(4),
- '&:first-child': {
- marginTop: 0,
- },
+const useStyles = makeStyles()(theme => ({
+ root: {
+ width: '100%',
+ padding: 0,
+ margin: 0,
+ marginTop: theme.spacing(4),
+ '&:first-of-type': {
+ marginTop: 0,
},
- rootLevel1: { marginTop: theme.spacing(1) },
- rootLevel2: { marginTop: theme.spacing(0.5) },
- header: {
- backgroundColor: theme.palette.background.paper,
+ },
+ rootLevel1: { marginTop: theme.spacing(1) },
+ rootLevel2: { marginTop: theme.spacing(0.5) },
+ header: {
+ backgroundColor: theme.palette.background.paper,
+ },
+ contentLevel0: {
+ marginTop: theme.spacing(1),
+ },
+ contentLevel12: {
+ marginTop: theme.spacing(0.25),
+ '& > li:last-of-type': {
+ marginBottom: theme.spacing(2),
},
- contentLevel0: {
- marginTop: theme.spacing(1),
- },
- contentLevel12: {
- marginTop: theme.spacing(0.25),
- '& > li:last-of-type': {
- marginBottom: theme.spacing(2),
- },
- },
- infoText: {
- color: '#c9c9c9',
- },
- }),
-)
+ },
+ infoText: {
+ color: '#c9c9c9',
+ },
+}))
interface Props {
children: ReactNode
@@ -41,7 +39,7 @@ interface Props {
}
export default function ExpandableElement({ children, expandable, defaultOpen }: Props): ReactElement | null {
- const classes = useStyles()
+ const { classes } = useStyles()
const [open, setOpen] = useState(Boolean(defaultOpen))
const handleClick = () => {
@@ -50,10 +48,10 @@ export default function ExpandableElement({ children, expandable, defaultOpen }:
return (
-
- )}
-
-
-
+
{children}
{open ?
+
diff --git a/src/components/ExpandableList.tsx b/src/components/ExpandableList.tsx
index 4bce182..973164f 100644
--- a/src/components/ExpandableList.tsx
+++ b/src/components/ExpandableList.tsx
@@ -1,36 +1,35 @@
-import { Collapse, ListItem, ListItemText, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ExpandLess, ExpandMore } from '@mui/icons-material'
+import { Collapse, ListItemButton, ListItemText, Typography } from '@mui/material'
import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
import { Flex } from './Flex'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- width: '100%',
- padding: 0,
- margin: 0,
- marginTop: theme.spacing(4),
- '&:first-child': {
- marginTop: 0,
- },
+const useStyles = makeStyles()(theme => ({
+ root: {
+ width: '100%',
+ padding: 0,
+ margin: 0,
+ marginTop: theme.spacing(4),
+ '&:first-of-type': {
+ marginTop: 0,
},
- rootLevel1: { marginTop: theme.spacing(1) },
- rootLevel2: { marginTop: theme.spacing(0.5) },
- header: {
- backgroundColor: theme.palette.background.paper,
- },
- contentLevel0: {
- marginTop: theme.spacing(1),
- },
- contentLevel12: {
- marginTop: theme.spacing(0.25),
- },
- infoText: {
- color: '#c9c9c9',
- },
- }),
-)
+ },
+ rootLevel1: { marginTop: theme.spacing(1) },
+ rootLevel2: { marginTop: theme.spacing(0.5) },
+ header: {
+ backgroundColor: theme.palette.background.paper,
+ },
+ contentLevel0: {
+ marginTop: theme.spacing(1),
+ },
+ contentLevel12: {
+ marginTop: theme.spacing(0.25),
+ },
+ infoText: {
+ color: '#c9c9c9',
+ },
+}))
interface Props {
children?: ReactNode
@@ -41,7 +40,7 @@ interface Props {
}
export default function ExpandableList({ children, label, level, defaultOpen, info }: Props): ReactElement | null {
- const classes = useStyles()
+ const { classes } = useStyles()
const [open, setOpen] = useState(Boolean(defaultOpen))
const handleClick = () => {
@@ -64,7 +63,7 @@ export default function ExpandableList({ children, label, level, defaultOpen, in
return (
+
{iconStart}
{iconEnd}
-
+
)
}
diff --git a/src/components/SideBarStatus.tsx b/src/components/SideBarStatus.tsx
index 951bc65..1c47a43 100644
--- a/src/components/SideBarStatus.tsx
+++ b/src/components/SideBarStatus.tsx
@@ -1,53 +1,52 @@
+import { ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'
import { ReactElement, useContext } from 'react'
import { matchPath, useLocation } from 'react-router-dom'
import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
+import { makeStyles } from 'tss-react/mui'
-import { ListItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import { Context } from '../providers/Bee'
+
import StatusIcon from './StatusIcon'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- icon: {
- color: 'inherit',
- },
- iconSmall: {
- height: theme.spacing(2),
- },
+const useStyles = makeStyles()(theme => ({
+ icon: {
+ color: 'inherit',
+ },
+ iconSmall: {
+ height: theme.spacing(2),
+ },
- root: {
- height: theme.spacing(4),
- paddingLeft: theme.spacing(1),
- paddingRight: theme.spacing(4),
- color: '#f9f9f9',
- borderLeft: '0px solid rgba(0,0,0,0)',
- '&.Mui-selected, &.Mui-selected:hover': {
- borderLeft: `0px solid ${theme.palette.primary.main}`,
- backgroundColor: '#2c2c2c',
- },
+ root: {
+ height: theme.spacing(4),
+ paddingLeft: theme.spacing(1),
+ paddingRight: theme.spacing(4),
+ color: '#f9f9f9',
+ borderLeft: '0px solid rgba(0,0,0,0)',
+ '&.Mui-selected, &.Mui-selected:hover': {
+ borderLeft: `0px solid ${theme.palette.primary.main}`,
+ backgroundColor: '#2c2c2c',
},
- rootError: {
- backgroundColor: 'rgba(255, 58, 82, 0.25)',
- },
- button: {
- '&:hover': {
+ },
+ rootError: {
+ backgroundColor: 'rgba(255, 58, 82, 0.25)',
+ },
+ button: {
+ '&:hover': {
+ backgroundColor: '#2c2c2c',
+ color: 'white',
+
+ // https://github.com/mui-org/material-ui/issues/22543
+ '@media (hover: none)': {
backgroundColor: '#2c2c2c',
color: 'white',
-
- // https://github.com/mui-org/material-ui/issues/22543
- '@media (hover: none)': {
- backgroundColor: '#2c2c2c',
- color: 'white',
- },
},
},
- smallerText: {
- fontSize: '0.9rem',
- whiteSpace: 'nowrap',
- },
- }),
-)
+ },
+ smallerText: {
+ fontSize: '0.9rem',
+ whiteSpace: 'nowrap',
+ },
+}))
interface Props {
path?: string
@@ -55,14 +54,13 @@ interface Props {
export default function SideBarItem({ path }: Props): ReactElement {
const { status, isLoading } = useContext(Context)
- const classes = useStyles()
+ const { classes } = useStyles()
const location = useLocation()
const isSelected = Boolean(path && matchPath(location.pathname, path))
return (
-
@@ -73,6 +71,6 @@ export default function SideBarItem({ path }: Props): ReactElement {
{status.all ? null :
-
+
)
}
diff --git a/src/components/StampExtensionModal.tsx b/src/components/StampExtensionModal.tsx
index 423882a..7c7981c 100644
--- a/src/components/StampExtensionModal.tsx
+++ b/src/components/StampExtensionModal.tsx
@@ -1,13 +1,13 @@
-import { Box } from '@material-ui/core'
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import Input from '@material-ui/core/Input'
import { BatchId, Bee } from '@ethersphere/bee-js'
+import { Box } from '@mui/material'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import Input from '@mui/material/Input'
import { useSnackbar } from 'notistack'
-import { ReactElement, ReactNode, useState } from 'react'
+import React, { ReactElement, ReactNode, useState } from 'react'
interface Props {
type: 'Topup' | 'Dilute'
diff --git a/src/components/StatusIcon.tsx b/src/components/StatusIcon.tsx
index 810e6ac..bacbce0 100644
--- a/src/components/StatusIcon.tsx
+++ b/src/components/StatusIcon.tsx
@@ -1,5 +1,6 @@
-import { CircularProgress } from '@material-ui/core'
+import { CircularProgress } from '@mui/material'
import type { ReactElement } from 'react'
+
import { CheckState } from '../providers/Bee'
interface Props {
diff --git a/src/components/StripedWrapper.tsx b/src/components/StripedWrapper.tsx
index 30dbbf8..69e1d5b 100644
--- a/src/components/StripedWrapper.tsx
+++ b/src/components/StripedWrapper.tsx
@@ -1,31 +1,29 @@
-import { createStyles, makeStyles } from '@material-ui/core'
import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
interface Props {
children: ReactElement | ReactElement[]
}
-const useStyles = makeStyles(() =>
- createStyles({
- wrapper: {
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- width: '175px',
- height: '175px',
- background: `repeating-linear-gradient(
+const useStyles = makeStyles()(() => ({
+ wrapper: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: '175px',
+ height: '175px',
+ background: `repeating-linear-gradient(
45deg,
#efefef,
#efefef 4px,
#ffffff 4px,
#ffffff 8px
)`,
- },
- }),
-)
+ },
+}))
export function StripedWrapper({ children }: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
return
@@ -9,34 +10,32 @@ export interface SwarmButtonProps extends ButtonProps {
variant?: 'text' | 'contained' | 'outlined'
}
-const useStyles = makeStyles(() =>
- createStyles({
- button: {
- height: '42px',
- position: 'relative',
- whiteSpace: 'nowrap',
- color: '#242424',
- '&:hover, &:focus': {
- '& svg': {
- fill: '#fff',
- transition: '0.1s',
- },
+const useStyles = makeStyles()(() => ({
+ button: {
+ height: '42px',
+ position: 'relative',
+ whiteSpace: 'nowrap',
+ color: '#242424',
+ '&:hover, &:focus': {
+ '& svg': {
+ fill: '#fff',
+ transition: '0.1s',
},
},
- cancelButton: {
- background: '#f7f7f7',
- color: '#606060',
- },
- spinnerWrapper: {
- position: 'absolute',
- left: '50%',
- top: '50%',
- width: '40px',
- height: '40px',
- transform: 'translate(-50%, -50%)',
- },
- }),
-)
+ },
+ cancelButton: {
+ background: '#f7f7f7',
+ color: '#606060',
+ },
+ spinnerWrapper: {
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ width: '40px',
+ height: '40px',
+ transform: 'translate(-50%, -50%)',
+ },
+}))
export function SwarmButton({
children,
@@ -50,7 +49,7 @@ export function SwarmButton({
style,
...other
}: SwarmButtonProps): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
function getIconColor() {
if (loading || disabled) {
diff --git a/src/components/SwarmDialog.tsx b/src/components/SwarmDialog.tsx
index 43219bb..1403379 100644
--- a/src/components/SwarmDialog.tsx
+++ b/src/components/SwarmDialog.tsx
@@ -1,4 +1,4 @@
-import { Box, Dialog, Grid } from '@material-ui/core'
+import { Box, Dialog, Grid } from '@mui/material'
import { ReactElement } from 'react'
interface Props {
diff --git a/src/components/SwarmDivider.tsx b/src/components/SwarmDivider.tsx
index 5875a8d..6e1536b 100644
--- a/src/components/SwarmDivider.tsx
+++ b/src/components/SwarmDivider.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider } from '@material-ui/core'
+import { Box, Divider } from '@mui/material'
import { ReactElement } from 'react'
interface Props {
diff --git a/src/components/SwarmSelect.tsx b/src/components/SwarmSelect.tsx
index b9671b7..04243e6 100644
--- a/src/components/SwarmSelect.tsx
+++ b/src/components/SwarmSelect.tsx
@@ -1,12 +1,10 @@
-import { createStyles, FormHelperText, makeStyles, MenuItem, Select as MuiSelect, Theme } from '@material-ui/core'
+import { FormHelperText, MenuItem, Select as MuiSelect, SelectChangeEvent } from '@mui/material'
import { Field } from 'formik'
-import { Select } from 'formik-material-ui'
+import { Select } from 'formik-mui'
import { ReactElement, ReactNode } from 'react'
+import { makeStyles } from 'tss-react/mui'
-export type SelectEvent = React.ChangeEvent<{
- name?: string | undefined
- value: unknown
-}>
+export type SelectEvent = SelectChangeEvent
function renderValue(value: unknown): ReactNode {
if (typeof value === 'string') {
@@ -28,33 +26,31 @@ interface Props {
options: { value: string; label: string }[]
onChange?: (event: SelectEvent) => void
formik?: boolean
- defaultValue?: string
+ value?: string
placeholder?: string
disabled?: boolean
}
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- select: {
- borderRadius: 0,
- background: theme.palette.background.paper,
- '& fieldset': {
- border: 0,
- },
- '& .MuiSelect-select': {
- '&:focus': {
- background: theme.palette.background.paper,
- },
+const useStyles = makeStyles()(theme => ({
+ select: {
+ borderRadius: 0,
+ background: theme.palette.background.paper,
+ '& fieldset': {
+ border: 0,
+ },
+ '& .MuiSelect-select': {
+ '&:focus': {
+ background: theme.palette.background.paper,
},
},
- option: {
- height: '52px',
- },
- }),
-)
+ },
+ option: {
+ height: '52px',
+ },
+}))
export function SwarmSelect({
- defaultValue,
+ value,
formik,
name,
options,
@@ -63,7 +59,7 @@ export function SwarmSelect({
placeholder,
disabled = false,
}: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
if (formik) {
return (
@@ -76,7 +72,7 @@ export function SwarmSelect({
name={name}
fullWidth
variant="outlined"
- defaultValue={defaultValue}
+ value={value}
className={classes.select}
displayEmpty
renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
@@ -102,7 +98,7 @@ export function SwarmSelect({
fullWidth
variant="outlined"
className={classes.select}
- defaultValue={defaultValue}
+ value={value}
onChange={onChange}
displayEmpty
renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
diff --git a/src/components/SwarmTextInput.tsx b/src/components/SwarmTextInput.tsx
index a4def78..3d6e6a7 100644
--- a/src/components/SwarmTextInput.tsx
+++ b/src/components/SwarmTextInput.tsx
@@ -1,7 +1,8 @@
-import { createStyles, makeStyles, TextField as SimpleTextField, Theme } from '@material-ui/core'
+import { TextField as SimpleTextField } from '@mui/material'
import { Field } from 'formik'
-import { TextField } from 'formik-material-ui'
+import { TextField } from 'formik-mui'
import { ChangeEvent, ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
interface Props {
name: string
@@ -14,25 +15,23 @@ interface Props {
onChange?: (event: ChangeEvent) => void
}
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- field: {
- background: theme.palette.background.paper,
- '& fieldset': {
- border: 0,
- },
- '& .Mui-focused': {
- background: theme.palette.background.paper,
- },
- '& .MuiInputBase-root': {
- background: theme.palette.background.paper,
- },
- '& .MuiFilledInput-root': {
- borderRadius: 0,
- },
+const useStyles = makeStyles()(theme => ({
+ field: {
+ background: theme.palette.background.paper,
+ '& fieldset': {
+ border: 0,
},
- }),
-)
+ '& .Mui-focused': {
+ background: theme.palette.background.paper,
+ },
+ '& .MuiInputBase-root': {
+ background: theme.palette.background.paper,
+ },
+ '& .MuiFilledInput-root': {
+ borderRadius: 0,
+ },
+ },
+}))
export function SwarmTextInput({
name,
@@ -44,7 +43,7 @@ export function SwarmTextInput({
defaultValue,
placeholder,
}: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
if (formik) {
return (
diff --git a/src/components/TabsContainer.tsx b/src/components/TabsContainer.tsx
index ab618ba..db6e265 100644
--- a/src/components/TabsContainer.tsx
+++ b/src/components/TabsContainer.tsx
@@ -1,6 +1,6 @@
+import { Tab, Tabs } from '@mui/material'
import React, { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Tab, Tabs } from '@material-ui/core'
+import { makeStyles } from 'tss-react/mui'
interface TabPanelProps {
children?: ReactNode
@@ -18,16 +18,14 @@ function TabPanel(props: TabPanelProps) {
)
}
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- flexGrow: 1,
- },
- content: {
- marginTop: theme.spacing(2),
- },
- }),
-)
+const useStyles = makeStyles()(theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ content: {
+ marginTop: theme.spacing(2),
+ },
+}))
interface TabsValues {
component: ReactNode
@@ -41,10 +39,10 @@ interface Props {
}
export default function SimpleTabs({ values, index, indexChanged }: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
const [value, setValue] = React.useState(index || 0)
- const handleChange = (event: React.ChangeEvent>, newValue: number) => {
+ const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
if (indexChanged) indexChanged(newValue)
else setValue(newValue)
}
diff --git a/src/components/TitleWithClose.tsx b/src/components/TitleWithClose.tsx
index 5e63ebc..06bef8f 100644
--- a/src/components/TitleWithClose.tsx
+++ b/src/components/TitleWithClose.tsx
@@ -1,5 +1,7 @@
-import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { Grid, Typography } from '@mui/material'
import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
import { CloseButton } from './CloseButton'
interface Props {
@@ -7,17 +9,15 @@ interface Props {
onClose: () => void
}
-const useStyles = makeStyles(() =>
- createStyles({
- text: {
- color: '#606060',
- fontWeight: 'bold',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ text: {
+ color: '#606060',
+ fontWeight: 'bold',
+ },
+}))
export function TitleWithClose({ children, onClose }: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
return (
diff --git a/src/components/TopologyStats.tsx b/src/components/TopologyStats.tsx
index 5fe14f1..4eb41ee 100644
--- a/src/components/TopologyStats.tsx
+++ b/src/components/TopologyStats.tsx
@@ -1,6 +1,8 @@
import type { Topology } from '@ethersphere/bee-js'
import type { ReactElement } from 'react'
+
import { pickThreshold, ThresholdValues } from '../utils/threshold'
+
import ExpandableListItem from './ExpandableListItem'
interface Props {
diff --git a/src/components/TroubleshootConnectionCard.tsx b/src/components/TroubleshootConnectionCard.tsx
index ec5ca36..2d7a69b 100644
--- a/src/components/TroubleshootConnectionCard.tsx
+++ b/src/components/TroubleshootConnectionCard.tsx
@@ -1,40 +1,39 @@
-import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Button, Grid, Link as MuiLink, Typography } from '@mui/material'
import type { ReactElement } from 'react'
-import Activity from 'remixicon-react/PulseLineIcon'
import { Link } from 'react-router-dom'
-import { ROUTES } from '../routes'
-import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'
+import Activity from 'remixicon-react/PulseLineIcon'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- height: '100%',
+import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'
+import { ROUTES } from '../routes'
+
+const useStyles = makeStyles()(theme => ({
+ root: {
+ height: '100%',
+ },
+ content: {
+ maxWidth: 500,
+ marginBottom: theme.spacing(4),
+ '&:last-child': {
+ marginBottom: 0,
},
- content: {
- maxWidth: 500,
- marginBottom: theme.spacing(4),
- '&:last-child': {
- marginBottom: 0,
- },
- },
- icon: {
- height: '1rem',
- },
- }),
-)
+ },
+ icon: {
+ height: '1rem',
+ },
+}))
export default function TroubleshootConnectionCard(): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
return (
-
+
Uh oh, it looks like your node is not connected.
-
+
Please check your node status to fix the problem. You can also check out the{' '}
@@ -47,7 +46,7 @@ export default function TroubleshootConnectionCard(): ReactElement {
.
-
+
{expandable}
-
+
{label}} />
{!open && (
@@ -74,7 +73,7 @@ export default function ExpandableList({ children, label, level, defaultOpen, in
)}
{open ?
-
+
diff --git a/src/components/ExpandableListItem.tsx b/src/components/ExpandableListItem.tsx
index 38a9bf5..ff051de 100644
--- a/src/components/ExpandableListItem.tsx
+++ b/src/components/ExpandableListItem.tsx
@@ -1,27 +1,25 @@
-import { Grid, IconButton, Tooltip, Typography } from '@material-ui/core'
-import ListItem from '@material-ui/core/ListItem'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { Box, IconButton, Tooltip, Typography } from '@mui/material'
+import ListItemButton from '@mui/material/ListItemButton'
import { ReactElement, ReactNode } from 'react'
import Info from 'remixicon-react/InformationLineIcon'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- header: {
- backgroundColor: theme.palette.background.paper,
- marginBottom: theme.spacing(0.25),
- wordBreak: 'break-word',
+const useStyles = makeStyles()(theme => ({
+ header: {
+ backgroundColor: theme.palette.background.paper,
+ marginBottom: theme.spacing(0.25),
+ wordBreak: 'break-word',
+ },
+ copyValue: {
+ cursor: 'pointer',
+ padding: theme.spacing(1),
+ borderRadius: 0,
+ '&:hover': {
+ backgroundColor: '#fcf2e8',
+ color: theme.palette.primary.main,
},
- copyValue: {
- cursor: 'pointer',
- padding: theme.spacing(1),
- borderRadius: 0,
- '&:hover': {
- backgroundColor: '#fcf2e8',
- color: theme.palette.primary.main,
- },
- },
- }),
-)
+ },
+}))
interface Props {
label?: ReactNode
@@ -30,25 +28,31 @@ interface Props {
}
export default function ExpandableListItem({ label, value, tooltip }: Props): ReactElement | null {
- const classes = useStyles()
+ const { classes } = useStyles()
return (
-
-
- {label && {label} }
- {value && (
-
- {value}
- {tooltip && (
-
-
-
-
- )}
-
+
+
+ {label && (
+
+ {label}
+
)}
-
-
+ {value && (
+
+
+ {value}
+ {tooltip && (
+
+
+
+
+ )}
+
+
+ )}
+
+
)
}
diff --git a/src/components/ExpandableListItemActions.tsx b/src/components/ExpandableListItemActions.tsx
index 529dcde..02088d7 100644
--- a/src/components/ExpandableListItemActions.tsx
+++ b/src/components/ExpandableListItemActions.tsx
@@ -1,27 +1,25 @@
-import { Grid } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Grid } from '@mui/material'
import { ReactElement, ReactNode } from 'react'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- wrapper: {
- display: 'flex',
- flexDirection: 'row',
- flexWrap: 'wrap',
- },
- action: {
- marginBottom: theme.spacing(1),
- marginRight: theme.spacing(1),
- },
- }),
-)
+const useStyles = makeStyles()(theme => ({
+ wrapper: {
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ },
+ action: {
+ marginBottom: theme.spacing(1),
+ marginRight: theme.spacing(1),
+ },
+}))
interface Props {
children: ReactNode | ReactNode[]
}
export default function ExpandableListItemActions({ children }: Props): ReactElement | null {
- const classes = useStyles()
+ const { classes } = useStyles()
if (Array.isArray(children)) {
return (
diff --git a/src/components/ExpandableListItemInput.tsx b/src/components/ExpandableListItemInput.tsx
index b059b6e..2c3a4c4 100644
--- a/src/components/ExpandableListItemInput.tsx
+++ b/src/components/ExpandableListItemInput.tsx
@@ -1,53 +1,52 @@
-import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
-import Collapse from '@material-ui/core/Collapse'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ChangeEvent, ReactElement, useState } from 'react'
+import { Box, IconButton, InputBase, ListItemButton, Typography } from '@mui/material'
+import Collapse from '@mui/material/Collapse'
+import React, { ChangeEvent, ReactElement, useState } from 'react'
import type { RemixiconReactIconProps } from 'remixicon-react'
import Check from 'remixicon-react/CheckLineIcon'
import X from 'remixicon-react/CloseLineIcon'
import Edit from 'remixicon-react/PencilLineIcon'
import Minus from 'remixicon-react/SubtractLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
import ExpandableListItemActions from './ExpandableListItemActions'
import ExpandableListItemNote from './ExpandableListItemNote'
import { SwarmButton } from './SwarmButton'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- header: {
- backgroundColor: theme.palette.background.paper,
- marginBottom: theme.spacing(0.25),
- borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
- wordBreak: 'break-word',
+const useStyles = makeStyles()(theme => ({
+ header: {
+ backgroundColor: theme.palette.background.paper,
+ marginBottom: theme.spacing(0.25),
+ borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+ wordBreak: 'break-word',
+ },
+ headerOpen: {
+ borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+ },
+ copyValue: {
+ cursor: 'pointer',
+ padding: theme.spacing(1),
+ borderRadius: 0,
+ '&:hover': {
+ backgroundColor: '#fcf2e8',
+ color: theme.palette.primary.main,
},
- headerOpen: {
- borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
- },
- copyValue: {
- cursor: 'pointer',
- padding: theme.spacing(1),
- borderRadius: 0,
- '&:hover': {
- backgroundColor: '#fcf2e8',
- color: theme.palette.primary.main,
- },
- },
- content: {
- marginTop: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
- keyMargin: {
- marginRight: theme.spacing(1),
- },
- unselectableLabel: {
- cursor: 'default',
- userSelect: 'none',
- // Many browsers don't support yet the general user-select css property
- WebkitUserSelect: 'none',
- MozUserSelect: 'none',
- msUserSelect: 'none',
- },
- }),
-)
+ },
+ content: {
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ },
+ keyMargin: {
+ marginRight: theme.spacing(1),
+ },
+ unselectableLabel: {
+ cursor: 'default',
+ userSelect: 'none',
+ // Many browsers don't support yet the general user-select css property
+ WebkitUserSelect: 'none',
+ MozUserSelect: 'none',
+ msUserSelect: 'none',
+ },
+}))
interface Props {
label: string
@@ -65,99 +64,118 @@ interface Props {
locked?: boolean
}
-export default function ExpandableListItemKey({
+export default function ExpandableListItemInput({
label,
- value,
- onConfirm,
- onChange,
+ value = '',
+ placeholder,
+ helperText,
+ expandedOnly,
confirmLabel,
confirmLabelDisabled,
confirmIcon,
- expandedOnly,
- helperText,
- placeholder,
loading,
+ onChange,
+ onConfirm,
mapperFn,
locked,
}: Props): ReactElement | null {
- const classes = useStyles()
+ const { classes } = useStyles()
const [open, setOpen] = useState(Boolean(expandedOnly))
const [inputValue, setInputValue] = useState(value || '')
const toggleOpen = () => setOpen(!open)
- const handleChange = (e: ChangeEvent) => {
+ const handleChange = (e: ChangeEvent) => {
+ let newValue = e.target.value
+
if (mapperFn) {
- e.target.value = mapperFn(e.target.value)
+ newValue = mapperFn(newValue)
}
+ setInputValue(newValue)
- setInputValue(e.target.value.trim())
-
- if (onChange) onChange(e.target.value.trim())
+ if (onChange) onChange(newValue)
}
return (
- <>
-
-
-
- {label && (
-
+
+
+
+ {label && (
+
+
{label}
+
+ )}
+
+ {!open && value && (
+
+ {value}
+
)}
-
-
-
-
-
-
-
-
- {helperText && {helperText} }
-
-
- {
- if (onConfirm) onConfirm(inputValue)
- }}
- >
- {confirmLabel || 'Save'}
-
- setInputValue(value || '')}
- cancel
- >
- Cancel
-
-
+ {!expandedOnly && !locked && (
+
+ {open ?
+ )}
+
-
-
+
+
+
+
+ {helperText && {helperText} }
+
+
+ {
+ onConfirm?.(inputValue.trim())
+ }}
+ >
+ {confirmLabel || 'Save'}
+
+ setInputValue(value || '')}
+ cancel
+ >
+ Cancel
+
+
+
+
+
+
+
)
}
diff --git a/src/components/ExpandableListItemKey.tsx b/src/components/ExpandableListItemKey.tsx
index 530b0aa..feeba05 100644
--- a/src/components/ExpandableListItemKey.tsx
+++ b/src/components/ExpandableListItemKey.tsx
@@ -1,40 +1,38 @@
-import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
-import Collapse from '@material-ui/core/Collapse'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Collapse, Grid, IconButton, ListItemButton, Tooltip, Typography } from '@mui/material'
import { ReactElement, useState } from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
import Eye from 'remixicon-react/EyeLineIcon'
import Minus from 'remixicon-react/SubtractLineIcon'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- header: {
- backgroundColor: theme.palette.background.paper,
- marginBottom: theme.spacing(0.25),
- borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
- wordBreak: 'break-word',
+import { useClipboardCopy } from '../hooks/useClipboardCopy'
+
+const useStyles = makeStyles()(theme => ({
+ header: {
+ backgroundColor: theme.palette.background.paper,
+ marginBottom: theme.spacing(0.25),
+ borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+ wordBreak: 'break-word',
+ },
+ headerOpen: {
+ borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+ },
+ copyValue: {
+ cursor: 'pointer',
+ padding: theme.spacing(1),
+ borderRadius: 0,
+ '&:hover': {
+ backgroundColor: '#fcf2e8',
+ color: theme.palette.primary.main,
},
- headerOpen: {
- borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
- },
- copyValue: {
- cursor: 'pointer',
- padding: theme.spacing(1),
- borderRadius: 0,
- '&:hover': {
- backgroundColor: '#fcf2e8',
- color: theme.palette.primary.main,
- },
- },
- content: {
- marginTop: theme.spacing(2),
- marginBottom: theme.spacing(2),
- },
- keyMargin: {
- marginRight: theme.spacing(1),
- },
- }),
-)
+ },
+ content: {
+ marginTop: theme.spacing(2),
+ marginBottom: theme.spacing(2),
+ },
+ keyMargin: {
+ marginRight: theme.spacing(1),
+ },
+}))
interface Props {
label: string
@@ -57,13 +55,11 @@ const split = (s: string): string[] => {
}
export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
- const classes = useStyles()
- const [open, setOpen] = useState(expanded || false)
- const [copied, setCopied] = useState(false)
- const toggleOpen = () => setOpen(!open)
+ const { classes } = useStyles()
- const tooltipClickHandler = () => setCopied(true)
- const tooltipCloseHandler = () => setCopied(false)
+ const [open, setOpen] = useState(expanded || false)
+ const { copied, handleCopy, tooltipCloseHandler } = useClipboardCopy(value)
+ const toggleOpen = () => setOpen(!open)
const splitValues = split(value)
const hasPrefix = isPrefixedHexString(value)
@@ -72,17 +68,19 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
}`
return (
-
+
- {label && {label} }
-
+ {label && (
+
+ {label}
+
+ )}
+
{!open && (
-
- {value ? spanText : ''}
-
+ {value ? spanText : ''}
)}
@@ -94,22 +92,20 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
-
- {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
-
-
- {splitValues.map((s, i) => (
-
- {s}
-
- ))}
-
+ {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
+
+
+ {splitValues.map((s, i) => (
+
+ {s}
+
+ ))}
-
+
-
+
)
}
diff --git a/src/components/ExpandableListItemLink.tsx b/src/components/ExpandableListItemLink.tsx
index da1be20..0ec78d6 100644
--- a/src/components/ExpandableListItemLink.tsx
+++ b/src/components/ExpandableListItemLink.tsx
@@ -1,48 +1,47 @@
-import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
-import { ReactElement, useState } from 'react'
-import CopyToClipboard from 'react-copy-to-clipboard'
+import { ArrowForward, OpenInNewSharp } from '@mui/icons-material'
+import { Grid, IconButton, ListItemButton, Tooltip, Typography } from '@mui/material'
+import { ReactElement } from 'react'
import { useNavigate } from 'react-router'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- header: {
- backgroundColor: theme.palette.background.paper,
- marginBottom: theme.spacing(0.25),
- borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
- wordBreak: 'break-word',
+import { useClipboardCopy } from '../hooks/useClipboardCopy'
+
+const useStyles = makeStyles()(theme => ({
+ header: {
+ backgroundColor: theme.palette.background.paper,
+ marginBottom: theme.spacing(0.25),
+ borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+ wordBreak: 'break-word',
+ },
+ headerOpen: {
+ borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+ },
+ openLinkIcon: {
+ cursor: 'pointer',
+ padding: theme.spacing(1),
+ borderRadius: 0,
+ '&:hover': {
+ backgroundColor: '#fcf2e8',
+ color: theme.palette.primary.main,
},
- headerOpen: {
- borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+ },
+ content: {
+ marginTop: theme.spacing(2),
+ marginBottom: theme.spacing(2),
+ },
+ keyMargin: {
+ marginRight: theme.spacing(1),
+ },
+ copyValue: {
+ cursor: 'pointer',
+ padding: theme.spacing(1),
+ borderRadius: 0,
+ '&:hover': {
+ backgroundColor: '#fcf2e8',
+ color: theme.palette.primary.main,
},
- openLinkIcon: {
- cursor: 'pointer',
- padding: theme.spacing(1),
- borderRadius: 0,
- '&:hover': {
- backgroundColor: '#fcf2e8',
- color: theme.palette.primary.main,
- },
- },
- content: {
- marginTop: theme.spacing(2),
- marginBottom: theme.spacing(2),
- },
- keyMargin: {
- marginRight: theme.spacing(1),
- },
- copyValue: {
- cursor: 'pointer',
- padding: theme.spacing(1),
- borderRadius: 0,
- '&:hover': {
- backgroundColor: '#fcf2e8',
- color: theme.palette.primary.main,
- },
- },
- }),
-)
+ },
+}))
interface Props {
label: string
@@ -59,12 +58,9 @@ export default function ExpandableListItemLink({
navigationType = 'NEW_WINDOW',
allowClipboard = true,
}: Props): ReactElement | null {
- const classes = useStyles()
- const [copied, setCopied] = useState(false)
+ const { classes } = useStyles()
const navigate = useNavigate()
-
- const tooltipClickHandler = () => setCopied(true)
- const tooltipCloseHandler = () => setCopied(false)
+ const { copied, handleCopy, tooltipCloseHandler } = useClipboardCopy(value)
const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value
@@ -77,7 +73,7 @@ export default function ExpandableListItemLink({
}
return (
-
+
{label && {label} }
@@ -85,9 +81,7 @@ export default function ExpandableListItemLink({
{allowClipboard && (
-
- {displayValue}
-
+ {displayValue}
)}
@@ -99,6 +93,6 @@ export default function ExpandableListItemLink({
-
+
)
}
diff --git a/src/components/ExpandableListItemNote.tsx b/src/components/ExpandableListItemNote.tsx
index ee2168e..a74749e 100644
--- a/src/components/ExpandableListItemNote.tsx
+++ b/src/components/ExpandableListItemNote.tsx
@@ -1,32 +1,30 @@
+import { Typography } from '@mui/material'
+import ListItemButton from '@mui/material/ListItemButton'
import { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Typography } from '@material-ui/core'
-import ListItem from '@material-ui/core/ListItem'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- header: {
- backgroundColor: '#F7F7F7',
- marginBottom: theme.spacing(0.25),
- },
- typography: {
- color: '#242424',
- },
- }),
-)
+const useStyles = makeStyles()(theme => ({
+ header: {
+ backgroundColor: '#F7F7F7',
+ marginBottom: theme.spacing(0.25),
+ },
+ typography: {
+ color: '#242424',
+ },
+}))
interface Props {
children?: ReactNode | ReactNode[]
}
export default function ExpandableListItemNote({ children }: Props): ReactElement | null {
- const classes = useStyles()
+ const { classes } = useStyles()
return (
-
+
{children}
-
+
)
}
diff --git a/src/components/FitAudio.tsx b/src/components/FitAudio.tsx
index 8153c44..a8babdc 100644
--- a/src/components/FitAudio.tsx
+++ b/src/components/FitAudio.tsx
@@ -1,14 +1,12 @@
-import { createStyles, makeStyles } from '@material-ui/core'
import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles(() =>
- createStyles({
- audio: {
- width: '100%',
- maxWidth: '250px',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ audio: {
+ width: '100%',
+ maxWidth: '250px',
+ },
+}))
interface AudioProps {
src: string | undefined
@@ -17,12 +15,17 @@ interface AudioProps {
}
export function FitAudio(props: AudioProps): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
const inlineStyles: Record = {}
- props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
- props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+ if (props.maxHeight) {
+ inlineStyles.maxHeight = props.maxHeight
+ }
+
+ if (props.maxWidth) {
+ inlineStyles.maxWidth = props.maxWidth
+ }
return
}
diff --git a/src/components/FitImage.tsx b/src/components/FitImage.tsx
index 460fcdd..010e1be 100644
--- a/src/components/FitImage.tsx
+++ b/src/components/FitImage.tsx
@@ -1,15 +1,13 @@
-import { createStyles, makeStyles } from '@material-ui/core'
import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles(() =>
- createStyles({
- image: {
- width: '100%',
- height: '100%',
- objectFit: 'cover',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ image: {
+ width: '100%',
+ height: '100%',
+ objectFit: 'cover',
+ },
+}))
interface Props {
alt: string
@@ -19,12 +17,17 @@ interface Props {
}
export function FitImage(props: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
const inlineStyles: Record = {}
- props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
- props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+ if (props.maxHeight) {
+ inlineStyles.maxHeight = props.maxHeight
+ }
+
+ if (props.maxWidth) {
+ inlineStyles.maxWidth = props.maxWidth
+ }
return 
}
diff --git a/src/components/FitVideo.tsx b/src/components/FitVideo.tsx
index 1c55fcc..1a95a81 100644
--- a/src/components/FitVideo.tsx
+++ b/src/components/FitVideo.tsx
@@ -1,15 +1,13 @@
-import { createStyles, makeStyles } from '@material-ui/core'
import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles(() =>
- createStyles({
- video: {
- width: '100%',
- height: '100%',
- objectFit: 'cover',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ video: {
+ width: '100%',
+ height: '100%',
+ objectFit: 'cover',
+ },
+}))
interface VideoProps {
src: string | undefined
@@ -18,12 +16,17 @@ interface VideoProps {
}
export function FitVideo(props: VideoProps): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
const inlineStyles: Record = {}
- props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
- props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+ if (props.maxHeight) {
+ inlineStyles.maxHeight = props.maxHeight
+ }
+
+ if (props.maxWidth) {
+ inlineStyles.maxWidth = props.maxWidth
+ }
return
}
diff --git a/src/components/History.tsx b/src/components/History.tsx
index e1236c2..e1d037b 100644
--- a/src/components/History.tsx
+++ b/src/components/History.tsx
@@ -1,6 +1,8 @@
import { ReactElement, useEffect, useState } from 'react'
+
import { getPrettyDateString } from '../utils/date'
-import { getHistorySafe, HistoryItem, HISTORY_KEYS } from '../utils/local-storage'
+import { getHistorySafe, HISTORY_KEYS, HistoryItem } from '../utils/localStorage'
+
import ExpandableList from './ExpandableList'
import ExpandableListItemLink from './ExpandableListItemLink'
diff --git a/src/components/HistoryHeader.tsx b/src/components/HistoryHeader.tsx
index 333a7fc..5b194a1 100644
--- a/src/components/HistoryHeader.tsx
+++ b/src/components/HistoryHeader.tsx
@@ -1,25 +1,24 @@
-import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
-import { ArrowBack } from '@material-ui/icons'
+import { ArrowBack } from '@mui/icons-material'
+import { Box, Grid, Typography } from '@mui/material'
import { ReactElement } from 'react'
import { useNavigate } from 'react-router-dom'
+import { makeStyles } from 'tss-react/mui'
interface Props {
children: string
}
-const useStyles = makeStyles(() =>
- createStyles({
- pressable: {
- cursor: 'pointer',
- },
- icon: {
- color: '#242424',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ pressable: {
+ cursor: 'pointer',
+ },
+ icon: {
+ color: '#242424',
+ },
+}))
export function HistoryHeader({ children }: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
const navigate = useNavigate()
function goBack() {
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index e940da0..f05bb49 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,4 +1,4 @@
-import { CircularProgress, Grid } from '@material-ui/core'
+import { CircularProgress, Grid } from '@mui/material'
import { ReactElement } from 'react'
export function Loading(): ReactElement {
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 43f2323..6828b59 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -1,6 +1,7 @@
import type { Peer } from '@ethersphere/bee-js'
import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
import { CSSProperties, ReactElement, useContext, useEffect, useState } from 'react'
+
import mapData from '../assets/data/map-data.json'
import nodesDb from '../assets/data/nodes-db.json'
import { Context } from '../providers/Bee'
@@ -18,17 +19,10 @@ interface MapRecord {
type MapDB = Record
const fullMapDb = nodesDb as unknown as MapDB
-const deduplicatedRecords = deduplicate(fullMapDb)
-function deduplicate(db: MapDB): MapRecord[] {
- const noDuplicates: Record = {}
-
- Object.entries(fullMapDb).forEach(([key, record]) => {
- noDuplicates[`${record.lat} ${record.lng}`] = record
- })
-
- return Object.values(noDuplicates)
-}
+const deduplicatedRecords = Object.values(
+ Object.fromEntries(Object.values(fullMapDb).map(r => [`${r.lat} ${r.lng}`, r])),
+)
function findIntersection(db: MapDB, peers: Peer[]): MapRecord[] {
const noDuplicates: Record = {}
@@ -47,27 +41,45 @@ function addPins(map: DottedMap, pins: MapRecord[], color: string) {
})
}
+enum PeerColors {
+ Black = '#303030',
+ Green = '#09CA6C',
+ LightGrey = '#dadada',
+ White = '#eaeaea',
+}
+
const mapPrecomputed = new DottedMap({ map: JSON.parse(mapData) })
const mapNoPins = new DottedMap({ map: JSON.parse(mapData) })
-addPins(mapPrecomputed, deduplicatedRecords, '#303030')
+addPins(mapPrecomputed, deduplicatedRecords, PeerColors.Black)
-const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = { shape: 'hexagon', radius: 0.21, color: '#dadada' }
+const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = {
+ shape: 'hexagon',
+ radius: 0.21,
+ color: PeerColors.LightGrey,
+}
export default function Card({ style, error }: Props): ReactElement {
const { peers } = useContext(Context)
const [map, setMap] = useState(mapPrecomputed.getSVG(mapSvgOptions))
useEffect(() => {
- // Display error map
- if (error) setMap(mapNoPins.getSVG({ ...mapSvgOptions, color: '#eaeaea' }))
+ let newSvg: string
- // Display just the base map without any connections
- if (!peers) return
+ if (error) {
+ newSvg = mapNoPins.getSVG({ ...mapSvgOptions, color: PeerColors.White })
+ } else if (peers) {
+ const points = findIntersection(fullMapDb, peers)
+ const mapNew = Object.create(mapPrecomputed)
+ addPins(mapNew, points, PeerColors.Green)
+ newSvg = mapNew.getSVG(mapSvgOptions)
+ } else {
+ return
+ }
- const points = findIntersection(fullMapDb, peers)
- const mapNew = Object.create(mapPrecomputed)
- addPins(mapNew, points, '#09CA6C')
- setMap(mapNew.getSVG(mapSvgOptions))
+ if (newSvg !== map) {
+ setMap(newSvg)
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [peers, error])
return (
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 78426a6..bb3aee8 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -1,7 +1,7 @@
+import Box from '@mui/material/Box'
+import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress'
+import Typography from '@mui/material/Typography'
import React, { ReactElement } from 'react'
-import LinearProgress, { LinearProgressProps } from '@material-ui/core/LinearProgress'
-import Typography from '@material-ui/core/Typography'
-import Box from '@material-ui/core/Box'
interface Props {
linearProgressProps?: LinearProgressProps
diff --git a/src/components/ProgressIndicator.tsx b/src/components/ProgressIndicator.tsx
index f0b8fbb..4a03223 100644
--- a/src/components/ProgressIndicator.tsx
+++ b/src/components/ProgressIndicator.tsx
@@ -1,39 +1,38 @@
-import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { Grid, Typography } from '@mui/material'
import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
interface Props {
steps: string[]
index: number
}
-const useStyles = makeStyles(() =>
- createStyles({
- wrapper: {
- height: '52px',
- display: 'flex',
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- todo: {
- background: '#f7f7f7',
- color: '#c9c9c9',
- },
- inProgress: {
- background: '#ffffff',
- color: '#242424',
- height: '52px',
- },
- done: {
- background: '#f7f7f7',
- color: '#606060',
- height: '52px',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ wrapper: {
+ height: '52px',
+ display: 'flex',
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ todo: {
+ background: '#f7f7f7',
+ color: '#c9c9c9',
+ },
+ inProgress: {
+ background: '#ffffff',
+ color: '#242424',
+ height: '52px',
+ },
+ done: {
+ background: '#f7f7f7',
+ color: '#606060',
+ height: '52px',
+ },
+}))
export function ProgressIndicator({ steps, index }: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
function pickClass(i: number): string {
if (i === index) {
diff --git a/src/components/QRCodeModal.tsx b/src/components/QRCodeModal.tsx
index 8acb322..4d97716 100644
--- a/src/components/QRCodeModal.tsx
+++ b/src/components/QRCodeModal.tsx
@@ -1,7 +1,7 @@
+import { FilterCenterFocusSharp } from '@mui/icons-material'
+import { Dialog, DialogTitle, IconButton } from '@mui/material'
import { ReactElement, useState } from 'react'
-import QRCode from 'qrcode.react'
-import { IconButton, Dialog, DialogTitle } from '@material-ui/core'
-import { FilterCenterFocusSharp } from '@material-ui/icons'
+import QRCode from 'react-qr-code'
interface Props {
value: string
@@ -27,15 +27,7 @@ export default function QRCodeModal(props: Props): ReactElement {
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 027e165..5826e47 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -1,73 +1,73 @@
-import { Box, Divider, Drawer, Grid, List, Link as MUILink, Typography } from '@material-ui/core'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
import { BeeModes } from '@ethersphere/bee-js'
+import { Box, Divider, Drawer, Grid, Link as MUILink, List, Typography } from '@mui/material'
import { ReactElement, useContext } from 'react'
import { Link } from 'react-router-dom'
import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
-import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
import DocsIcon from 'remixicon-react/BookOpenLineIcon'
import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
import GithubIcon from 'remixicon-react/GithubFillIcon'
import HomeIcon from 'remixicon-react/Home3LineIcon'
import SettingsIcon from 'remixicon-react/Settings2LineIcon'
import AccountIcon from 'remixicon-react/Wallet3LineIcon'
+import { makeStyles } from 'tss-react/mui'
+
import DashboardLogo from '../assets/dashboard-logo.svg'
import DesktopLogo from '../assets/desktop-logo.svg'
import { BEE_DOCS_HOST, GITHUB_BEE_DASHBOARD_URL } from '../constants'
import { Context as BeeContext } from '../providers/Bee'
import { Context as SettingsContext } from '../providers/Settings'
import { ROUTES } from '../routes'
+
import SideBarItem from './SideBarItem'
import SideBarStatus from './SideBarStatus'
const drawerWidth = 300
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- flexWrap: 'nowrap',
- minHeight: '100vh',
- paddingTop: theme.spacing(8),
- paddingBottom: theme.spacing(8),
- },
- drawer: {
- width: drawerWidth,
- flexShrink: 0,
- },
- drawerPaper: {
- width: drawerWidth,
- backgroundColor: '#212121',
- zIndex: 988,
- },
- logo: {
- marginLeft: theme.spacing(8),
- marginRight: theme.spacing(8),
- },
- icon: {
- height: theme.spacing(4),
- },
- divider: {
- backgroundColor: '#2c2c2c',
- marginLeft: theme.spacing(4),
- marginRight: theme.spacing(4),
- },
- link: {
- color: '#9f9f9f',
+const useStyles = makeStyles()(theme => ({
+ root: {
+ flexWrap: 'nowrap',
+ minHeight: '100vh',
+ paddingTop: theme.spacing(8),
+ paddingBottom: theme.spacing(8),
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ backgroundColor: '#212121',
+ zIndex: 988,
+ },
+ logo: {
+ marginLeft: theme.spacing(8),
+ marginRight: theme.spacing(8),
+ },
+ icon: {
+ height: theme.spacing(4),
+ },
+ divider: {
+ backgroundColor: '#2c2c2c',
+ marginLeft: theme.spacing(4),
+ marginRight: theme.spacing(4),
+ },
+ link: {
+ color: '#9f9f9f',
+ textDecoration: 'none',
+ '&:hover': {
textDecoration: 'none',
- '&:hover': {
- textDecoration: 'none',
- // https://github.com/mui-org/material-ui/issues/22543
- '@media (hover: none)': {
- textDecoration: 'none',
- },
+ // https://github.com/mui-org/material-ui/issues/22543
+ '@media (hover: none)': {
+ textDecoration: 'none',
},
},
- }),
-)
+ },
+}))
export default function SideBar(): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
const { isDesktop } = useContext(SettingsContext)
const { nodeInfo } = useContext(BeeContext)
diff --git a/src/components/SideBarItem.tsx b/src/components/SideBarItem.tsx
index f4d6f88..cb32217 100644
--- a/src/components/SideBarItem.tsx
+++ b/src/components/SideBarItem.tsx
@@ -1,9 +1,9 @@
-import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
-import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
import type { ReactElement, ReactNode } from 'react'
import { matchPath, useLocation } from 'react-router-dom'
+import { makeStyles } from 'tss-react/mui'
-const StyledListItem = withStyles((theme: Theme) => ({
+const useItemStyles = makeStyles()(theme => ({
root: {
paddingLeft: theme.spacing(4),
paddingRight: theme.spacing(4),
@@ -13,8 +13,6 @@ const StyledListItem = withStyles((theme: Theme) => ({
backgroundColor: '#2c2c2c',
color: '#f9f9f9',
},
- },
- button: {
'&:hover': {
backgroundColor: '#2c2c2c',
color: '#f9f9f9',
@@ -26,18 +24,16 @@ const StyledListItem = withStyles((theme: Theme) => ({
},
},
},
-}))(ListItem)
+}))
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- icon: {
- color: 'inherit',
- },
- activeIcon: {
- color: theme.palette.primary.main,
- },
- }),
-)
+const useStyles = makeStyles()(theme => ({
+ icon: {
+ color: 'inherit',
+ },
+ activeIcon: {
+ color: theme.palette.primary.main,
+ },
+}))
interface Props {
iconStart?: ReactNode
@@ -48,17 +44,18 @@ interface Props {
}
export default function SideBarItem({ iconStart, iconEnd, path, label, pathMatcherSubstring }: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
+ const { classes: itemClasses } = useItemStyles()
const location = useLocation()
const isSelected = pathMatcherSubstring
? location.pathname.startsWith(pathMatcherSubstring)
: Boolean(path && matchPath(location.pathname, path))
return (
- {children}
- {!open && value}
- {!expandedOnly && !locked && (
-
- {open ?
- )}
-
- {children}
}
diff --git a/src/components/SwarmButton.tsx b/src/components/SwarmButton.tsx
index a1593e0..a45fafc 100644
--- a/src/components/SwarmButton.tsx
+++ b/src/components/SwarmButton.tsx
@@ -1,6 +1,7 @@
-import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import { Button, ButtonProps, CircularProgress } from '@mui/material'
import React, { ReactElement } from 'react'
import type { RemixiconReactIconProps } from 'remixicon-react'
+import { makeStyles } from 'tss-react/mui'
export interface SwarmButtonProps extends ButtonProps {
iconType: React.ComponentType
@@ -556,7 +644,7 @@ export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps)
type={FileTransferType.Download}
open={isDownloading}
items={downloadItems}
- onRowClose={name => cancelOrDismissDownload(name)}
+ onRowClose={(name: string) => cancelOrDismissDownload(name)}
onCloseAll={() => dismissAllDownloads()}
/>
) => {
- if (e.shiftKey) return
- handleContextMenu(e)
- }
-
- // TODO: handleOpen shall only be available for images, videos etc... -> do not download 10GB into memory
const handleDownload = useCallback(
async (isNewWindow?: boolean) => {
if (!fm || !beeApi) return
@@ -241,7 +264,7 @@ export function FileItem({
)
refreshStamp(driveStamp.batchID.toString())
- } catch (e: unknown) {
+ } catch {
setErrorMessage?.(`Error renaming file ${latestFileInfo.name}`)
setShowError(true)
}
@@ -250,41 +273,16 @@ export function FileItem({
[fm, driveStamp, currentDrive, latestFileInfo, takenNames, refreshStamp, setErrorMessage, setShowError],
)
- const MenuItem = ({
- disabled,
- danger,
- onClick,
- children,
- }: {
- disabled?: boolean
- danger?: boolean
- onClick?: () => void
- children: React.ReactNode
- }) => (
-
+ {children}
+
+)
interface FileItemProps {
fileInfo: FileInfo
@@ -131,12 +160,6 @@ export function FileItem({
return out
}, [files, currentDrive, fileInfo.topic])
- const handleItemContextMenu = (e: React.MouseEvent
- {children}
-
- )
-
- const isBulk = (bulkSelectedCount ?? 0) > 1
-
const renderContextMenuItems = useCallback(() => {
+ const isBulk = (bulkSelectedCount ?? 0) > 1
+
const viewItem = (
)
- const downloadItem = isBulk ? (
-
- ) : (
-
- )
+ const downloadItem =
const getInfoItem = (
)
}, [
- isBulk,
view,
+ currentDrive,
+ drives,
+ bulkSelectedCount,
+ onBulk,
+ fileInfo.driveId,
handleDownload,
handleCloseContext,
openGetInfo,
- onBulk,
- currentDrive,
- drives,
- fileInfo.driveId,
setErrorMessage,
setShowError,
])
@@ -463,11 +461,15 @@ export function FileItem({
return Error
}
- const { mime } = guessMime(fileInfo.name, fileInfo.customMetadata)
- const mimeType = mime.split('/')[0]?.toLowerCase() || 'file'
-
return (
-
+
) => {
+ if (e.shiftKey) return
+ handleContextMenu(e)
+ }}
+ onClick={handleCloseContext}
+ >
handleDownload(true)}>
-
diff --git a/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.tsx b/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.tsx
index 3bcad5e..c87d37a 100644
--- a/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.tsx
+++ b/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.tsx
@@ -1,9 +1,11 @@
import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
-import './FileProgressNotification.scss'
-import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
import DownIcon from 'remixicon-react/ArrowDownSLineIcon'
+import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
+
+import { FileTransferType, ProgressItem, TransferStatus } from '../../constants/transfers'
import { FileProgressWindow } from '../FileProgressWindow/FileProgressWindow'
-import { FileTransferType, TransferStatus, ProgressItem } from '../../constants/transfers'
+
+import './FileProgressNotification.scss'
interface FileProgressNotificationProps {
label?: string
@@ -14,6 +16,8 @@ interface FileProgressNotificationProps {
onCloseAll?: () => void
}
+const HIDER_TIMEOUT_MS = 3000
+
export function FileProgressNotification({
label,
type,
@@ -49,7 +53,7 @@ export function FileProgressNotification({
autoHideTimer.current = window.setTimeout(() => {
setShowFileProgressWindow(false)
autoHideTimer.current = null
- }, 3000) as unknown as number
+ }, HIDER_TIMEOUT_MS) as unknown as number
}
return () => {
diff --git a/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.tsx b/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.tsx
index 7496cf3..bbf92ec 100644
--- a/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.tsx
+++ b/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.tsx
@@ -1,12 +1,13 @@
import { ReactElement, useLayoutEffect, useRef } from 'react'
-import CloseIcon from 'remixicon-react/CloseLineIcon'
import ArrowDownIcon from 'remixicon-react/ArrowDownSLineIcon'
-import './FileProgressWindow.scss'
+import CloseIcon from 'remixicon-react/CloseLineIcon'
+
+import { FileTransferType, ProgressItem, TransferBarColor, TransferStatus } from '../../constants/transfers'
+import { capitalizeFirstLetter, truncateNameMiddle } from '../../utils/common'
import { GetIconElement } from '../../utils/GetIconElement'
import { ProgressBar } from '../ProgressBar/ProgressBar'
-import { FileTransferType, TransferBarColor, TransferStatus, ProgressItem } from '../../constants/transfers'
-import { capitalizeFirstLetter, truncateNameMiddle } from '../../utils/common'
-import { guessMime } from '../../utils/view'
+
+import './FileProgressWindow.scss'
interface FileProgressWindowProps {
items?: ProgressItem[]
@@ -138,9 +139,6 @@ export function FileProgressWindow({
const centerDisplay = getCenterText() || '\u00A0'
- const { mime } = guessMime(item.name)
- const mimeType = mime.split('/')[0].toLowerCase() || 'file'
-
return (
-
diff --git a/src/modules/filemanager/components/FormbricksIntegration/FormbricksIntegration.tsx b/src/modules/filemanager/components/FormbricksIntegration/FormbricksIntegration.tsx
index 95fe71e..fd57380 100644
--- a/src/modules/filemanager/components/FormbricksIntegration/FormbricksIntegration.tsx
+++ b/src/modules/filemanager/components/FormbricksIntegration/FormbricksIntegration.tsx
@@ -1,10 +1,12 @@
-import { useEffect, useRef, useCallback } from 'react'
-import { useLocation } from 'react-router-dom'
import formbricks from '@formbricks/js'
+import { useCallback, useEffect, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import { LocalStorageKeys } from '../../../../utils/localStorage'
-const FM_CLICK_STORAGE_KEY = 'fm_click_count_v1'
-const FM_SURVEY_TRIGGERED_KEY = 'fm_survey_triggered_v1'
const FM_CLICK_THRESHOLD = 25
+const FM_FORMBRICKS_TRACK_CODE = 'file_manager_engagement_25_clicks'
+const FORMBRICKS_INIT_TIMEOUT_MS = 1000
interface FormbricksIntegrationProps {
isActive: boolean
@@ -16,14 +18,14 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
const formbricksReadyRef = useRef(false)
const pendingEventRef = useRef(false)
- const environmentId = process.env.REACT_APP_FORMBRICKS_ENV_ID
- const appUrl = process.env.REACT_APP_FORMBRICKS_APP_URL
+ const environmentId = import.meta.env.VITE_FORMBRICKS_ENV_ID
+ const appUrl = import.meta.env.VITE_FORMBRICKS_APP_URL
const flushPendingEvent = useCallback(() => {
- if (pendingEventRef.current && localStorage.getItem(FM_SURVEY_TRIGGERED_KEY) !== 'true') {
+ if (pendingEventRef.current && localStorage.getItem(LocalStorageKeys.fmSurveyTriggered) !== 'true') {
try {
- formbricks.track('file_manager_engagement_25_clicks')
- localStorage.setItem(FM_SURVEY_TRIGGERED_KEY, 'true')
+ formbricks.track(FM_FORMBRICKS_TRACK_CODE)
+ localStorage.setItem(LocalStorageKeys.fmSurveyTriggered, 'true')
pendingEventRef.current = false
} catch {
// no-op
@@ -45,7 +47,7 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
appUrl,
})
- await new Promise(resolve => setTimeout(resolve, 1000))
+ await new Promise(resolve => setTimeout(resolve, FORMBRICKS_INIT_TIMEOUT_MS))
if (!cancelled) {
formbricksReadyRef.current = true
@@ -79,11 +81,11 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
if (!isActive) return
const handleClick = async () => {
- if (localStorage.getItem(FM_SURVEY_TRIGGERED_KEY) === 'true') return
+ if (localStorage.getItem(LocalStorageKeys.fmSurveyTriggered) === 'true') return
let count = 0
try {
- const stored = localStorage.getItem(FM_CLICK_STORAGE_KEY)
+ const stored = localStorage.getItem(LocalStorageKeys.fmClickStorage)
if (stored) count = parseInt(stored, 10) || 0
} catch {
@@ -92,7 +94,7 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
count += 1
try {
- localStorage.setItem(FM_CLICK_STORAGE_KEY, String(count))
+ localStorage.setItem(LocalStorageKeys.fmClickStorage, String(count))
} catch {
// no-op
}
@@ -111,8 +113,8 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
}
try {
- await formbricks.track('file_manager_engagement_25_clicks')
- localStorage.setItem(FM_SURVEY_TRIGGERED_KEY, 'true')
+ await formbricks.track(FM_FORMBRICKS_TRACK_CODE)
+ localStorage.setItem(LocalStorageKeys.fmSurveyTriggered, 'true')
} catch {
// no-op
}
diff --git a/src/modules/filemanager/components/GetInfoModal/GetInfoModal.tsx b/src/modules/filemanager/components/GetInfoModal/GetInfoModal.tsx
index c7a1cbc..1e376d1 100644
--- a/src/modules/filemanager/components/GetInfoModal/GetInfoModal.tsx
+++ b/src/modules/filemanager/components/GetInfoModal/GetInfoModal.tsx
@@ -1,11 +1,12 @@
-import { ReactElement, useState, useEffect } from 'react'
-import './GetInfoModal.scss'
-import { Button } from '../Button/Button'
+import { ReactElement, useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
-import InfoIcon from 'remixicon-react/InformationLineIcon'
import ClipboardIcon from 'remixicon-react/FileCopyLineIcon'
+import InfoIcon from 'remixicon-react/InformationLineIcon'
import type { FileProperty, FilePropertyGroup } from '../../utils/infoGroups'
+import { Button } from '../Button/Button'
+
+import './GetInfoModal.scss'
interface GetInfoModalProps {
name: string
@@ -13,31 +14,35 @@ interface GetInfoModalProps {
onCancelClick: () => void
}
+const COPY_TIMEOUT_MS = 2000
+
export function GetInfoModal({ name, onCancelClick, properties }: GetInfoModalProps): ReactElement {
const modalRoot = document.querySelector('.fm-main') || document.body
const [copiedKey, setCopiedKey] = useState(null)
- const timeoutRef = useState<{ [key: string]: NodeJS.Timeout }>({})[0]
+
+ const timeoutRef = useRef>({})
useEffect(() => {
return () => {
- Object.values(timeoutRef).forEach(timeout => clearTimeout(timeout))
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ Object.values(timeoutRef.current).forEach(clearTimeout)
}
- }, [timeoutRef])
+ }, [])
const handleCopy = async (prop: FileProperty) => {
try {
await navigator.clipboard.writeText(prop.raw ?? prop.value)
- if (timeoutRef[prop.key]) {
- clearTimeout(timeoutRef[prop.key])
+ if (timeoutRef.current[prop.key]) {
+ clearTimeout(timeoutRef.current[prop.key])
}
setCopiedKey(prop.key)
- timeoutRef[prop.key] = setTimeout(() => {
+ timeoutRef.current[prop.key] = setTimeout(() => {
setCopiedKey(prev => (prev === prop.key ? null : prev))
- delete timeoutRef[prop.key]
- }, 2000)
+ delete timeoutRef.current[prop.key]
+ }, COPY_TIMEOUT_MS)
} catch {
/* noop */
}
diff --git a/src/modules/filemanager/components/Header/Header.scss b/src/modules/filemanager/components/Header/Header.scss
index bc248ce..1022387 100644
--- a/src/modules/filemanager/components/Header/Header.scss
+++ b/src/modules/filemanager/components/Header/Header.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
$bg-900: #212121;
$bg-800: #262626;
$bg-700: #3e3e3e;
@@ -13,7 +15,7 @@ $accent: #ed8131;
height: 60px;
padding: 10px 16px;
background: $bg-900;
- border-bottom: 1px solid rgba(255,255,255,0.04);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fm-header-left {
@@ -22,51 +24,73 @@ $accent: #ed8131;
gap: 12px;
}
.fm-header-logo {
- width: 40px; height: 40px;
+ width: 40px;
+ height: 40px;
border-radius: 6px;
background: $accent;
color: $text-100;
- display: grid; place-items: center;
+ display: grid;
+ place-items: center;
font-weight: 700;
- svg { width: 18px; height: 18px; }
+ svg {
+ width: 18px;
+ height: 18px;
+ }
}
.fm-header-title {
color: $text-100;
font-weight: 600;
- letter-spacing: .2px;
+ letter-spacing: 0.2px;
}
.fm-header-search {
flex: 1 1 auto;
max-width: 900px;
- display: flex; align-items: center; gap: 8px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
background: $bg-700;
border: 1px solid $border-400;
color: $text-300;
- height: 36px; padding: 0 10px;
+ height: 36px;
+ padding: 0 10px;
border-radius: 8px;
&:focus-within {
border-color: $accent;
- box-shadow: 0 0 0 2px rgba(237,129,49,0.25);
+ box-shadow: 0 0 0 2px rgba(237, 129, 49, 0.25);
}
- .fm-header-search-icon { flex: 0 0 auto; }
+ .fm-header-search-icon {
+ flex: 0 0 auto;
+ }
input {
flex: 1 1 auto;
- background: transparent; border: none; outline: none;
+ background: transparent;
+ border: none;
+ outline: none;
height: 100%;
- color: $text-100; font-size: 14px;
+ color: $text-100;
+ font-size: 14px;
- &::placeholder { color: $text-300; }
+ &::placeholder {
+ color: $text-300;
+ }
}
.fm-header-search-clear {
- appearance: none; border: none; background: transparent;
- color: $text-300; font-size: 18px; line-height: 1;
- padding: 0 2px; cursor: pointer;
- &:hover { color: $text-100; }
+ appearance: none;
+ border: none;
+ background: transparent;
+ color: $text-300;
+ font-size: 18px;
+ line-height: 1;
+ padding: 0 2px;
+ cursor: pointer;
+ &:hover {
+ color: $text-100;
+ }
}
}
@@ -76,7 +100,9 @@ $accent: #ed8131;
}
.fm-filter-btn {
- display: inline-flex; align-items: center; gap: 6px;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid $border-400;
@@ -85,59 +111,83 @@ $accent: #ed8131;
font-size: 13px;
cursor: pointer;
- &:hover { background: mix($bg-800, #fff, 92%); }
- &:focus-visible { outline: 2px solid rgba(237,129,49,0.4); outline-offset: 2px; }
+ &:hover {
+ background: color.mix($bg-800, #fff, 92%);
+ }
+ &:focus-visible {
+ outline: 2px solid rgba(237, 129, 49, 0.4);
+ outline-offset: 2px;
+ }
- &[aria-expanded="true"] {
+ &[aria-expanded='true'] {
border-color: $accent;
- box-shadow: 0 0 0 2px rgba(237,129,49,0.25);
+ box-shadow: 0 0 0 2px rgba(237, 129, 49, 0.25);
}
}
.fm-filter-menu {
position: absolute;
- right: 0; top: calc(100% + 6px);
+ right: 0;
+ top: calc(100% + 6px);
min-width: 260px;
background: $bg-800;
border: 1px solid $border-400;
border-radius: 10px;
- box-shadow: 0 10px 24px rgba(0,0,0,0.25);
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
padding: 10px;
z-index: 2000;
color: $text-100;
}
-.fm-filter-group + .fm-filter-group { margin-top: 10px; }
+.fm-filter-group + .fm-filter-group {
+ margin-top: 10px;
+}
.fm-filter-group-title {
font-size: 12px;
color: $text-300;
margin-bottom: 6px;
text-transform: uppercase;
- letter-spacing: .04em;
+ letter-spacing: 0.04em;
}
.fm-filter-row {
- display: flex; align-items: center; gap: 8px;
- padding: 6px 4px; border-radius: 6px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 4px;
+ border-radius: 6px;
cursor: default;
color: $text-100;
- input[type="checkbox"], input[type="radio"] {
- width: 14px; height: 14px; margin: 0;
+ input[type='checkbox'],
+ input[type='radio'] {
+ width: 14px;
+ height: 14px;
+ margin: 0;
accent-color: $accent;
}
- &:hover { background: rgba(255,255,255,0.05); }
+ &:hover {
+ background: rgba(255, 255, 255, 0.05);
+ }
}
.fm-filter-sep {
height: 1px;
- background: rgba(255,255,255,0.08);
+ background: rgba(255, 255, 255, 0.08);
margin: 8px 0;
}
-.fm-header-filters { display: none; }
-.fm-header-filters-label { display: none; }
-.fm-header-chip-group { display: none; }
-.fm-chip { display: none; }
+.fm-header-filters {
+ display: none;
+}
+.fm-header-filters-label {
+ display: none;
+}
+.fm-header-chip-group {
+ display: none;
+}
+.fm-chip {
+ display: none;
+}
diff --git a/src/modules/filemanager/components/Header/Header.tsx b/src/modules/filemanager/components/Header/Header.tsx
index d53fa8d..cc508bf 100644
--- a/src/modules/filemanager/components/Header/Header.tsx
+++ b/src/modules/filemanager/components/Header/Header.tsx
@@ -1,11 +1,13 @@
-import { ReactElement, useMemo, useState, useEffect, useRef, useContext } from 'react'
-import SearchIcon from 'remixicon-react/SearchLineIcon'
+import { ReactElement, useContext, useEffect, useMemo, useRef, useState } from 'react'
import FileIcon from 'remixicon-react/File2LineIcon'
import FilterIcon from 'remixicon-react/FilterLineIcon'
-import './Header.scss'
+import SearchIcon from 'remixicon-react/SearchLineIcon'
+
import { useSearch } from '../../../../pages/filemanager/SearchContext'
import { Context as FMContext } from '../../../../providers/FileManager'
+import './Header.scss'
+
// Defaults used to determine “active filters”
const DEFAULT_FILTERS = {
scope: 'selected' as 'selected' | 'all',
diff --git a/src/modules/filemanager/components/InitialModal/InitialModal.tsx b/src/modules/filemanager/components/InitialModal/InitialModal.tsx
index 082ead6..238f5b3 100644
--- a/src/modules/filemanager/components/InitialModal/InitialModal.tsx
+++ b/src/modules/filemanager/components/InitialModal/InitialModal.tsx
@@ -1,22 +1,22 @@
+import { BeeModes, BZZ, DAI, Duration, PostageBatch, RedundancyLevel, Size, Utils } from '@ethersphere/bee-js'
+import { ADMIN_STAMP_LABEL } from '@solarpunkltd/file-manager-lib'
import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { BeeModes, BZZ, DAI, Duration, PostageBatch, RedundancyLevel, Size, Utils } from '@ethersphere/bee-js'
-import './InitialModal.scss'
-import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
-import { Button } from '../Button/Button'
-import { calculateStampCapacityMetrics, fmFetchCost, getUsableStamps, handleCreateDrive } from '../../utils/bee'
-import { getExpiryDateByLifetime, safeSetState } from '../../utils/common'
+import { Context as BeeContext } from '../../../../providers/Bee'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { Context as SettingsContext } from '../../../../providers/Settings'
import { erasureCodeMarks } from '../../constants/common'
import { desiredLifetimeOptions } from '../../constants/stamps'
-import { Context as SettingsContext } from '../../../../providers/Settings'
-import { Context as BeeContext } from '../../../../providers/Bee'
-
-import { FMSlider } from '../Slider/Slider'
-import { Context as FMContext } from '../../../../providers/FileManager'
-import { ADMIN_STAMP_LABEL } from '@solarpunkltd/file-manager-lib'
-import { ProgressBar } from '../ProgressBar/ProgressBar'
-import { Tooltip } from '../Tooltip/Tooltip'
import { TOOLTIPS } from '../../constants/tooltips'
+import { calculateStampCapacityMetrics, fmFetchCost, getUsableStamps, handleCreateDrive } from '../../utils/bee'
+import { getExpiryDateByLifetime, safeSetState } from '../../utils/common'
+import { Button } from '../Button/Button'
+import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
+import { ProgressBar } from '../ProgressBar/ProgressBar'
+import { FMSlider } from '../Slider/Slider'
+import { Tooltip } from '../Tooltip/Tooltip'
+
+import './InitialModal.scss'
interface InitialModalProps {
resetState: boolean
diff --git a/src/modules/filemanager/components/NotificationBar/NotificationBar.tsx b/src/modules/filemanager/components/NotificationBar/NotificationBar.tsx
index ff39241..0fc2c66 100644
--- a/src/modules/filemanager/components/NotificationBar/NotificationBar.tsx
+++ b/src/modules/filemanager/components/NotificationBar/NotificationBar.tsx
@@ -1,13 +1,15 @@
-import { ReactElement, useContext, useEffect, useState } from 'react'
-import './NotificationBar.scss'
-import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
-import { ExpiringNotificationModal } from '../ExpiringNotificationModal/ExpiringNotificationModal'
-import { getUsableStamps } from '../../utils/bee'
-import { Context as SettingsContext } from '../../../../providers/Settings'
import { PostageBatch } from '@ethersphere/bee-js'
-import { Context as FMContext } from '../../../../providers/FileManager'
import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
+
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { Context as SettingsContext } from '../../../../providers/Settings'
import { FILE_MANAGER_EVENTS } from '../../constants/common'
+import { getUsableStamps } from '../../utils/bee'
+import { ExpiringNotificationModal } from '../ExpiringNotificationModal/ExpiringNotificationModal'
+
+import './NotificationBar.scss'
const NUMBER_OF_DAYS_WARNING = 7
const DAYS_TO_MILLISECONDS_MULTIPLIER = 24 * 60 * 60 * 1000
diff --git a/src/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal.tsx b/src/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal.tsx
index 8e00b91..a57d82b 100644
--- a/src/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal.tsx
+++ b/src/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal.tsx
@@ -1,26 +1,32 @@
-import { useState, ReactElement, useEffect } from 'react'
-import './PrivateKeyModal.scss'
-import { Button } from '../Button/Button'
-import { setSignerPk, getSigner } from '../../utils/common'
-import { uuidV4 } from '../../../../utils'
import { PrivateKey } from '@ethersphere/bee-js'
-import ClipboardIcon from 'remixicon-react/FileCopyLineIcon'
+import { ReactElement, useState } from 'react'
import CheckDoubleLineIcon from 'remixicon-react/CheckDoubleLineIcon'
-import { Tooltip } from '../Tooltip/Tooltip'
+import ClipboardIcon from 'remixicon-react/FileCopyLineIcon'
+
import { TOOLTIPS } from '../../constants/tooltips'
+import { getSigner, setSignerPk } from '../../utils/common'
+import { Button } from '../Button/Button'
+import { Tooltip } from '../Tooltip/Tooltip'
+
+import './PrivateKeyModal.scss'
+
+import { uuidV4 } from '@/utils'
type Props = { onSaved: () => void }
+const generateNewPrivateKey = (): string => {
+ const id = uuidV4()
+ const signer = getSigner(id)
+
+ return signer.toHex()
+}
+
export function PrivateKeyModal({ onSaved }: Props): ReactElement {
- const [value, setValue] = useState('')
+ const [value, setValue] = useState(generateNewPrivateKey())
const [confirmValue, setConfirmValue] = useState('')
const [showError, setShowError] = useState(false)
const [copied, setCopied] = useState(false)
- useEffect(() => {
- handleGenerateNew()
- }, [])
-
const handleCopyPrivateKey = async () => {
try {
await navigator.clipboard.writeText(value)
@@ -32,11 +38,7 @@ export function PrivateKeyModal({ onSaved }: Props): ReactElement {
}
const handleGenerateNew = () => {
- const id = uuidV4()
- const signer = getSigner(id)
- const privKey = signer.toHex()
-
- setValue(privKey)
+ setValue(generateNewPrivateKey())
setConfirmValue('')
setCopied(false)
setShowError(false)
diff --git a/src/modules/filemanager/components/RenameFileModal/RenameFileModal.tsx b/src/modules/filemanager/components/RenameFileModal/RenameFileModal.tsx
index 3f15009..ca2fb69 100644
--- a/src/modules/filemanager/components/RenameFileModal/RenameFileModal.tsx
+++ b/src/modules/filemanager/components/RenameFileModal/RenameFileModal.tsx
@@ -1,12 +1,13 @@
-import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+import React, { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import EditIcon from 'remixicon-react/EditLineIcon'
+
+import { safeSetState } from '../../utils/common'
+import { Button } from '../Button/Button'
+
import '../../styles/global.scss'
import './RenameFileModal.scss'
-import { Button } from '../Button/Button'
-import EditIcon from 'remixicon-react/EditLineIcon'
-import { createPortal } from 'react-dom'
-import { safeSetState } from '../../utils/common'
-
const maxFileNameLength = 60
interface RenameFileModalProps {
diff --git a/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.tsx b/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.tsx
index 79cf0c4..4f1d53c 100644
--- a/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.tsx
+++ b/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.tsx
@@ -1,28 +1,30 @@
-import { ReactElement, useState, useContext, useEffect, useMemo, useCallback, useRef, memo } from 'react'
-import { createPortal } from 'react-dom'
-import Drive from 'remixicon-react/HardDrive2LineIcon'
-import DriveFill from 'remixicon-react/HardDrive2FillIcon'
-import MoreFill from 'remixicon-react/MoreFillIcon'
-import './DriveItem.scss'
-import { ProgressBar } from '../../ProgressBar/ProgressBar'
-import { ContextMenu } from '../../ContextMenu/ContextMenu'
-import { useContextMenu } from '../../../hooks/useContextMenu'
-import { Button } from '../../Button/Button'
-import { DestroyDriveModal, ProgressDestroyModal } from '../../DestroyDriveModal/DestroyDriveModal'
-import { UpgradeDriveModal } from '../../UpgradeDriveModal/UpgradeDriveModal'
-import { UpgradeTimeoutModal } from '../../UpgradeTimeoutModal/UpgradeTimeoutModal'
-import { ViewType } from '../../../constants/transfers'
-import { useView } from '../../../../../pages/filemanager/ViewContext'
-import { Context as FMContext } from '../../../../../providers/FileManager'
import { PostageBatch } from '@ethersphere/bee-js'
import { DriveInfo } from '@solarpunkltd/file-manager-lib'
-import { calculateStampCapacityMetrics, handleDestroyAndForgetDrive } from '../../../utils/bee'
+import React, { memo, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import DriveFill from 'remixicon-react/HardDrive2FillIcon'
+import Drive from 'remixicon-react/HardDrive2LineIcon'
+import MoreFill from 'remixicon-react/MoreFillIcon'
+
+import { useView } from '../../../../../pages/filemanager/ViewContext'
+import { Context as FMContext } from '../../../../../providers/FileManager'
import { Context as SettingsContext } from '../../../../../providers/Settings'
-import { truncateNameMiddle } from '../../../utils/common'
-import { Tooltip } from '../../Tooltip/Tooltip'
-import { TOOLTIPS } from '../../../constants/tooltips'
import { FILE_MANAGER_EVENTS, UPLOAD_POLLING_TIMEOUT_MS } from '../../../constants/common'
+import { TOOLTIPS } from '../../../constants/tooltips'
+import { ViewType } from '../../../constants/transfers'
+import { useContextMenu } from '../../../hooks/useContextMenu'
import { useStampPolling } from '../../../hooks/useStampPolling'
+import { calculateStampCapacityMetrics, handleDestroyAndForgetDrive } from '../../../utils/bee'
+import { truncateNameMiddle } from '../../../utils/common'
+import { Button } from '../../Button/Button'
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
+import { DestroyDriveModal, ProgressDestroyModal } from '../../DestroyDriveModal/DestroyDriveModal'
+import { ProgressBar } from '../../ProgressBar/ProgressBar'
+import { Tooltip } from '../../Tooltip/Tooltip'
+import { UpgradeDriveModal } from '../../UpgradeDriveModal/UpgradeDriveModal'
+import { UpgradeTimeoutModal } from '../../UpgradeTimeoutModal/UpgradeTimeoutModal'
+
+import './DriveItem.scss'
function useDriveEventListeners(
driveId: string,
diff --git a/src/modules/filemanager/components/Sidebar/DriveItem/ExpiredDriveItem.tsx b/src/modules/filemanager/components/Sidebar/DriveItem/ExpiredDriveItem.tsx
index ec3e19d..8bd479e 100644
--- a/src/modules/filemanager/components/Sidebar/DriveItem/ExpiredDriveItem.tsx
+++ b/src/modules/filemanager/components/Sidebar/DriveItem/ExpiredDriveItem.tsx
@@ -1,16 +1,18 @@
-import { ReactElement, useState, useContext } from 'react'
-import { createPortal } from 'react-dom'
-import Drive from 'remixicon-react/HardDrive2LineIcon'
-import DriveFill from 'remixicon-react/HardDrive2FillIcon'
-import MoreFill from 'remixicon-react/MoreFillIcon'
-import { ContextMenu } from '../../ContextMenu/ContextMenu'
-import { useContextMenu } from '../../../hooks/useContextMenu'
import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import React, { ReactElement, useContext, useState } from 'react'
+import { createPortal } from 'react-dom'
+import DriveFill from 'remixicon-react/HardDrive2FillIcon'
+import Drive from 'remixicon-react/HardDrive2LineIcon'
+import MoreFill from 'remixicon-react/MoreFillIcon'
+
import { Context as FMContext } from '../../../../../providers/FileManager'
+import { useContextMenu } from '../../../hooks/useContextMenu'
import { handleDestroyAndForgetDrive } from '../../../utils/bee'
-import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
-import './DriveItem.scss'
import { truncateNameMiddle } from '../../../utils/common'
+import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
+
+import './DriveItem.scss'
interface Props {
drive: DriveInfo
diff --git a/src/modules/filemanager/components/Sidebar/Sidebar.tsx b/src/modules/filemanager/components/Sidebar/Sidebar.tsx
index 947f67a..e0e423b 100644
--- a/src/modules/filemanager/components/Sidebar/Sidebar.tsx
+++ b/src/modules/filemanager/components/Sidebar/Sidebar.tsx
@@ -1,27 +1,29 @@
-import { ReactElement, useContext, useEffect, useState } from 'react'
-
-import './Sidebar.scss'
-import Add from 'remixicon-react/AddLineIcon'
-import Folder from 'remixicon-react/Folder3LineIcon'
-import FolderFill from 'remixicon-react/Folder3FillIcon'
-import ArrowRight from 'remixicon-react/ArrowRightSLineIcon'
-import ArrowDown from 'remixicon-react/ArrowDownSLineIcon'
-import Delete from 'remixicon-react/DeleteBin6LineIcon'
-import DeleteFill from 'remixicon-react/DeleteBin6FillIcon'
-import History from 'remixicon-react/HistoryLineIcon'
-import HistoryFill from 'remixicon-react/HistoryFillIcon'
-import { DriveItem } from './DriveItem/DriveItem'
-import { ExpiredDriveItem } from './DriveItem/ExpiredDriveItem'
-import { CreateDriveModal } from '../CreateDriveModal/CreateDriveModal'
-import { ViewType } from '../../constants/transfers'
import { PostageBatch } from '@ethersphere/bee-js'
-import { Context as SettingsContext } from '../../../../providers/Settings'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import Add from 'remixicon-react/AddLineIcon'
+import ArrowDown from 'remixicon-react/ArrowDownSLineIcon'
+import ArrowRight from 'remixicon-react/ArrowRightSLineIcon'
+import DeleteFill from 'remixicon-react/DeleteBin6FillIcon'
+import Delete from 'remixicon-react/DeleteBin6LineIcon'
+import FolderFill from 'remixicon-react/Folder3FillIcon'
+import Folder from 'remixicon-react/Folder3LineIcon'
+import HistoryFill from 'remixicon-react/HistoryFillIcon'
+import History from 'remixicon-react/HistoryLineIcon'
+
import { useView } from '../../../../pages/filemanager/ViewContext'
import { Context as FMContext } from '../../../../providers/FileManager'
-import { getUsableStamps } from '../../utils/bee'
-import { DriveInfo } from '@solarpunkltd/file-manager-lib'
-import { truncateNameMiddle } from '../../utils/common'
+import { Context as SettingsContext } from '../../../../providers/Settings'
import { FILE_MANAGER_EVENTS } from '../../constants/common'
+import { ViewType } from '../../constants/transfers'
+import { getUsableStamps } from '../../utils/bee'
+import { truncateNameMiddle } from '../../utils/common'
+import { CreateDriveModal } from '../CreateDriveModal/CreateDriveModal'
+
+import { DriveItem } from './DriveItem/DriveItem'
+import { ExpiredDriveItem } from './DriveItem/ExpiredDriveItem'
+
+import './Sidebar.scss'
interface SidebarProps {
loading: boolean
diff --git a/src/modules/filemanager/components/Slider/Slider.tsx b/src/modules/filemanager/components/Slider/Slider.tsx
index 7a6dd7e..b27531d 100644
--- a/src/modules/filemanager/components/Slider/Slider.tsx
+++ b/src/modules/filemanager/components/Slider/Slider.tsx
@@ -1,9 +1,10 @@
+import Slider from '@mui/material/Slider'
import { ReactElement, useState } from 'react'
-import './Slider.scss'
-import Slider from '@material-ui/core/Slider'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from 'tss-react/mui'
-const useStyles = makeStyles({
+import './Slider.scss'
+
+const useStyles = makeStyles()({
root: {
width: '98%',
marginLeft: '-3px',
@@ -50,7 +51,7 @@ export function FMSlider({
step,
}: FMSliderProps): ReactElement {
const [value, setValue] = useState(defaultValue || 0)
- const classes = useStyles()
+ const { classes } = useStyles()
return (
<>
diff --git a/src/modules/filemanager/components/Tooltip/Tooltip.tsx b/src/modules/filemanager/components/Tooltip/Tooltip.tsx
index 9ea5827..7c62dab 100644
--- a/src/modules/filemanager/components/Tooltip/Tooltip.tsx
+++ b/src/modules/filemanager/components/Tooltip/Tooltip.tsx
@@ -1,5 +1,6 @@
-import { ReactElement, useState, useRef, useCallback } from 'react'
+import React, { ReactElement, useCallback, useRef, useState } from 'react'
import InfoIcon from 'remixicon-react/InformationLineIcon'
+
import './Tooltip.scss'
interface TooltipProps {
@@ -82,7 +83,7 @@ export function Tooltip({
}
: undefined
}
- // eslint-disable-next-line react/no-danger
+ // Safe: label is always from static TOOLTIPS constant or hardcoded strings, never user input
dangerouslySetInnerHTML={{ __html: label }}
/>
diff --git a/src/modules/filemanager/components/UpgradeDriveModal/UpgradeDriveModal.tsx b/src/modules/filemanager/components/UpgradeDriveModal/UpgradeDriveModal.tsx
index edbb2cd..d95c69e 100644
--- a/src/modules/filemanager/components/UpgradeDriveModal/UpgradeDriveModal.tsx
+++ b/src/modules/filemanager/components/UpgradeDriveModal/UpgradeDriveModal.tsx
@@ -1,13 +1,3 @@
-import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react'
-import './UpgradeDriveModal.scss'
-import '../../styles/global.scss'
-import { Warning } from '@material-ui/icons'
-import { createPortal } from 'react-dom'
-import DriveIcon from 'remixicon-react/HardDrive2LineIcon'
-import DatabaseIcon from 'remixicon-react/Database2LineIcon'
-import WalletIcon from 'remixicon-react/Wallet3LineIcon'
-import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
-import CalendarIcon from 'remixicon-react/CalendarLineIcon'
import {
BatchId,
BeeRequestOptions,
@@ -19,18 +9,29 @@ import {
Size,
Utils,
} from '@ethersphere/bee-js'
+import { Warning } from '@mui/icons-material'
import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import CalendarIcon from 'remixicon-react/CalendarLineIcon'
+import DatabaseIcon from 'remixicon-react/Database2LineIcon'
+import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import DriveIcon from 'remixicon-react/HardDrive2LineIcon'
+import WalletIcon from 'remixicon-react/Wallet3LineIcon'
-import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
-import { Button } from '../Button/Button'
-import { desiredLifetimeOptions } from '../../constants/stamps'
import { Context as BeeContext } from '../../../../providers/Bee'
-import { fromBytesConversion, getExpiryDateByLifetime, truncateNameMiddle } from '../../utils/common'
-import { Context as SettingsContext } from '../../../../providers/Settings'
import { Context as FMContext } from '../../../../providers/FileManager'
+import { Context as SettingsContext } from '../../../../providers/Settings'
import { getHumanReadableFileSize } from '../../../../utils/file'
-import { useStampPolling } from '../../hooks/useStampPolling'
import { FILE_MANAGER_EVENTS, POLLING_TIMEOUT_MS } from '../../constants/common'
+import { desiredLifetimeOptions } from '../../constants/stamps'
+import { useStampPolling } from '../../hooks/useStampPolling'
+import { fromBytesConversion, getExpiryDateByLifetime, truncateNameMiddle } from '../../utils/common'
+import { Button } from '../Button/Button'
+import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
+
+import './UpgradeDriveModal.scss'
+import '../../styles/global.scss'
interface UpgradeDriveModalProps {
stamp: PostageBatch
@@ -117,7 +118,7 @@ export function UpgradeDriveModal({
try {
cost = await beeApi?.getExtensionCost(batchId, capacity, duration, options, encryption, erasureCodeLevel)
- } catch (e) {
+ } catch {
setErrorMessage?.('Failed to calculate extension cost')
setShowError(true)
@@ -281,7 +282,7 @@ export function UpgradeDriveModal({
icon={(ref: React.RefObject, onClickOutside: () => void, active = true) {
+export function useClickOutside(
+ ref: React.RefObject,
+ onClickOutside: () => void,
+ active = true,
+) {
useEffect(() => {
if (!active) return
function handleDocumentClick(e: MouseEvent) {
- if (ref.current && !ref.current.contains(e.target as Node)) {
+ if (ref?.current && !ref.current.contains(e.target as Node)) {
onClickOutside()
}
}
diff --git a/src/modules/filemanager/hooks/useContextMenu.tsx b/src/modules/filemanager/hooks/useContextMenu.tsx
index 4b2a8ec..f2064d8 100644
--- a/src/modules/filemanager/hooks/useContextMenu.tsx
+++ b/src/modules/filemanager/hooks/useContextMenu.tsx
@@ -1,11 +1,13 @@
-import { useState, useRef } from 'react'
-import { useClickOutside } from './useClickOutside'
+import React, { useRef, useState } from 'react'
+
import { Point } from '../utils/common'
+import { useClickOutside } from './useClickOutside'
+
export function useContextMenu() {
const [showContext, setShowContext] = useState(false)
const [pos, setPos] = useState({ x: 0, y: 0 })
- const contextRef = useRef(null)
+ const contextRef = useRef(null)
function handleContextMenu(e: React.MouseEvent | MouseEvent) {
e.preventDefault()
diff --git a/src/modules/filemanager/hooks/useDragAndDrop.ts b/src/modules/filemanager/hooks/useDragAndDrop.ts
index 91d8963..f17e5fc 100644
--- a/src/modules/filemanager/hooks/useDragAndDrop.ts
+++ b/src/modules/filemanager/hooks/useDragAndDrop.ts
@@ -1,5 +1,5 @@
-import { useCallback, useRef, useState } from 'react'
import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import React, { useCallback, useRef, useState } from 'react'
interface UseDragAndDropProps {
onFilesDropped: (files: FileList) => void
diff --git a/src/modules/filemanager/hooks/useFileFiltering.ts b/src/modules/filemanager/hooks/useFileFiltering.ts
index 46c4985..8fb92b3 100644
--- a/src/modules/filemanager/hooks/useFileFiltering.ts
+++ b/src/modules/filemanager/hooks/useFileFiltering.ts
@@ -1,5 +1,6 @@
-import { useMemo, useCallback } from 'react'
-import { FileInfo, DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
+import { useCallback, useMemo } from 'react'
+
import { ViewType } from '../constants/transfers'
import { indexStrToBigint, isTrashed } from '../utils/common'
diff --git a/src/modules/filemanager/hooks/useSorting.ts b/src/modules/filemanager/hooks/useSorting.ts
index 90e4945..d94a4ce 100644
--- a/src/modules/filemanager/hooks/useSorting.ts
+++ b/src/modules/filemanager/hooks/useSorting.ts
@@ -1,5 +1,7 @@
-import { useEffect, useMemo, useState } from 'react'
import type { FileInfo } from '@solarpunkltd/file-manager-lib'
+import { useEffect, useMemo, useState } from 'react'
+
+import { LocalStorageKeys } from '../../../utils/localStorage'
export enum SortKey {
Name = 'name',
@@ -19,10 +21,9 @@ type Options = {
persist?: boolean
defaultState?: SortState
storageKey?: string
- getDriveName?: (fi: FileInfo) => string
+ getDriveName?: (driveId: string) => string
}
-const STORAGE_KEY = 'fm.sort.v1'
const DEFAULT_STATE: SortState = { key: SortKey.Timestamp, dir: SortDir.Desc }
const coerceNumber = (v: unknown): number => {
@@ -61,7 +62,7 @@ export function useSorting(
toggle: (key: SortKey) => void
reset: () => void
} {
- const { persist = true, defaultState = DEFAULT_STATE, storageKey = STORAGE_KEY, getDriveName } = opts
+ const { persist = true, defaultState = DEFAULT_STATE, storageKey = LocalStorageKeys.fmSortKey, getDriveName } = opts
const [sort, setSort] = useState(() => {
if (!persist) return defaultState
@@ -127,8 +128,8 @@ export function useSorting(
}
if (sort.key === SortKey.Drive) {
- const ad = (getDriveName?.(a) ?? '').toLocaleLowerCase()
- const bd = (getDriveName?.(b) ?? '').toLocaleLowerCase()
+ const ad = (getDriveName?.(a.driveId.toString()) ?? '').toLocaleLowerCase()
+ const bd = (getDriveName?.(b.driveId.toString()) ?? '').toLocaleLowerCase()
if (ad < bd) return -1 * mul
diff --git a/src/modules/filemanager/hooks/useStampPolling.ts b/src/modules/filemanager/hooks/useStampPolling.ts
index 9cabb7a..ae2a140 100644
--- a/src/modules/filemanager/hooks/useStampPolling.ts
+++ b/src/modules/filemanager/hooks/useStampPolling.ts
@@ -1,5 +1,6 @@
-import { useRef, useCallback } from 'react'
import { PostageBatch } from '@ethersphere/bee-js'
+import { useCallback, useRef } from 'react'
+
import { POLLING_INTERVAL_MS } from '../constants/common'
interface UseStampPollingOptions {
diff --git a/src/modules/filemanager/hooks/useTransfers.ts b/src/modules/filemanager/hooks/useTransfers.ts
index 3192ca3..d73ebf5 100644
--- a/src/modules/filemanager/hooks/useTransfers.ts
+++ b/src/modules/filemanager/hooks/useTransfers.ts
@@ -1,9 +1,10 @@
-import { useCallback, useState, useContext, useRef, useEffect } from 'react'
+import type { FileInfo, FileInfoOptions, UploadProgress } from '@solarpunkltd/file-manager-lib'
+import { useCallback, useContext, useEffect, useRef, useState } from 'react'
+
import { Context as FMContext } from '../../../providers/FileManager'
import { Context as SettingsContext } from '../../../providers/Settings'
-import type { FileInfo, FileInfoOptions, UploadProgress } from '@solarpunkltd/file-manager-lib'
-import { ConflictAction, useUploadConflictDialog } from './useUploadConflictDialog'
-import { formatBytes, safeSetState, truncateNameMiddle } from '../utils/common'
+import { uuidV4 } from '../../../utils'
+import { FILE_MANAGER_EVENTS } from '../constants/common'
import {
DownloadProgress,
DownloadState,
@@ -11,12 +12,12 @@ import {
TrackDownloadProps,
TransferStatus,
} from '../constants/transfers'
-import { validateStampStillExists, verifyDriveSpace } from '../utils/bee'
-import { isTrashed } from '../utils/common'
-import { abortDownload } from '../utils/download'
import { AbortManager } from '../utils/abortManager'
-import { uuidV4 } from '../../../utils'
-import { FILE_MANAGER_EVENTS } from '../constants/common'
+import { validateStampStillExists, verifyDriveSpace } from '../utils/bee'
+import { formatBytes, isTrashed, safeSetState, truncateNameMiddle } from '../utils/common'
+import { abortDownload } from '../utils/download'
+
+import { ConflictAction, useUploadConflictDialog } from './useUploadConflictDialog'
const SAMPLE_WINDOW_MS = 500
const ETA_SMOOTHING = 0.3
diff --git a/src/modules/filemanager/hooks/useUploadConflictDialog.tsx b/src/modules/filemanager/hooks/useUploadConflictDialog.tsx
index 95475d1..0584474 100644
--- a/src/modules/filemanager/hooks/useUploadConflictDialog.tsx
+++ b/src/modules/filemanager/hooks/useUploadConflictDialog.tsx
@@ -1,5 +1,6 @@
import { ReactPortal, useCallback, useMemo, useState } from 'react'
import { createPortal } from 'react-dom'
+
import { UploadConflictModal } from '../components/UploadConflictModal/UploadConflictModal'
export enum ConflictAction {
diff --git a/src/modules/filemanager/utils/GetIconElement.tsx b/src/modules/filemanager/utils/GetIconElement.tsx
index 57a7d99..3e93fe7 100644
--- a/src/modules/filemanager/utils/GetIconElement.tsx
+++ b/src/modules/filemanager/utils/GetIconElement.tsx
@@ -1,15 +1,22 @@
import { ReactElement } from 'react'
-import ImageIcon from 'remixicon-react/Image2LineIcon'
import FileIcon from 'remixicon-react/FileTextLineIcon'
+import ImageIcon from 'remixicon-react/Image2LineIcon'
+
+import { guessMime } from './view'
interface ContextMenuProps {
- icon: string
+ name: string
+ metadata?: Record
size?: string
color?: string
}
-export function GetIconElement({ icon, size = '21px', color = '#ed8131' }: ContextMenuProps): ReactElement {
- switch (icon) {
+export function GetIconElement({ name, metadata, size = '21px', color = '#ed8131' }: ContextMenuProps): ReactElement {
+ const { mime } = guessMime(name, metadata)
+
+ const iconType = mime.split('/')[0]?.toLowerCase() || 'file'
+
+ switch (iconType) {
case 'image':
return str.charAt(0).toUpperCase() + str.slice(1)
export const safeSetState =
- (ref: React.MutableRefObject, setter: React.Dispatch>) =>
+ (ref: React.RefObject, setter: React.Dispatch>) =>
(value: React.SetStateAction) => {
if (ref.current) setter(value)
}
diff --git a/src/modules/filemanager/utils/download.ts b/src/modules/filemanager/utils/download.ts
index 3ef8050..e2c5ba0 100644
--- a/src/modules/filemanager/utils/download.ts
+++ b/src/modules/filemanager/utils/download.ts
@@ -1,8 +1,10 @@
import { FileInfo, FileManager } from '@solarpunkltd/file-manager-lib'
-import { guessMime, VIEWERS } from './view'
-import { AbortManager } from './abortManager'
+
import { DownloadProgress, DownloadState } from '../constants/transfers'
+import { AbortManager } from './abortManager'
+import { guessMime, VIEWERS } from './view'
+
const downloadAborts = new AbortManager()
enum Errors {
@@ -54,6 +56,7 @@ const processStream = async (
onDownloadProgress?.({ progress, isDownloading: false, state: DownloadState.Cancelled })
} else {
onDownloadProgress?.({ progress, isDownloading: false, state: DownloadState.Error })
+
// eslint-disable-next-line no-console
console.error('Failed to process stream: ', e)
}
@@ -70,6 +73,7 @@ const processStream = async (
}
} catch (e: unknown) {
/* no-op */
+
// eslint-disable-next-line no-console
console.error('filehandle close/abort error: ', e)
}
@@ -106,6 +110,7 @@ const streamToBlob = async (
onDownloadProgress?.({ progress, isDownloading: false, state: DownloadState.Cancelled })
} else {
onDownloadProgress?.({ progress, isDownloading: false, state: DownloadState.Error })
+
// eslint-disable-next-line no-console
console.error('Error during stream processing: ', error)
}
@@ -133,6 +138,7 @@ interface FileInfoWithHandle {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const isPickerSupported = (): boolean => typeof (window as any).showSaveFilePicker === 'function'
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const isDirectoryPickerSupported = (): boolean => typeof (window as any).showDirectoryPicker === 'function'
@@ -384,6 +390,7 @@ export const startDownloadingQueue = async (
if (!isAbortError) {
tracker?.({ progress: 0, isDownloading: false, state: DownloadState.Error })
+
// eslint-disable-next-line no-console
console.error('download queue error: ', error)
} else {
diff --git a/src/modules/filemanager/utils/fileOperations.ts b/src/modules/filemanager/utils/fileOperations.ts
index 5729a4a..b9ba689 100644
--- a/src/modules/filemanager/utils/fileOperations.ts
+++ b/src/modules/filemanager/utils/fileOperations.ts
@@ -1,9 +1,10 @@
-import type { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
-import type { FileManagerBase } from '@solarpunkltd/file-manager-lib'
import type { PostageBatch, RedundancyLevel } from '@ethersphere/bee-js'
+import type { DriveInfo, FileInfo, FileManagerBase } from '@solarpunkltd/file-manager-lib'
+
+import { ActionTag } from '../constants/transfers'
+
import { verifyDriveSpace } from './bee'
import { capitalizeFirstLetter } from './common'
-import { ActionTag } from '../constants/transfers'
export enum FileOperation {
Trash = 'trash',
diff --git a/src/modules/filemanager/utils/infoGroups.tsx b/src/modules/filemanager/utils/infoGroups.tsx
index 84016f6..0cdba02 100644
--- a/src/modules/filemanager/utils/infoGroups.tsx
+++ b/src/modules/filemanager/utils/infoGroups.tsx
@@ -1,13 +1,14 @@
-import type { ReactElement } from 'react'
-import { FileStatus, FileInfo, FileManagerBase } from '@solarpunkltd/file-manager-lib'
import { GetGranteesResult, PostageBatch } from '@ethersphere/bee-js'
-
-import GeneralIcon from 'remixicon-react/FileTextLineIcon'
+import { FileInfo, FileManagerBase, FileStatus } from '@solarpunkltd/file-manager-lib'
+import type { ReactElement } from 'react'
import CalendarIcon from 'remixicon-react/CalendarLineIcon'
-import AccessIcon from 'remixicon-react/ShieldKeyholeLineIcon'
+import GeneralIcon from 'remixicon-react/FileTextLineIcon'
import HardDriveIcon from 'remixicon-react/HardDrive2LineIcon'
+import AccessIcon from 'remixicon-react/ShieldKeyholeLineIcon'
+
+import { erasureCodeMarks, FEED_INDEX_ZERO } from '../constants/common'
+
import { indexStrToBigint, truncateNameMiddle } from './common'
-import { FEED_INDEX_ZERO, erasureCodeMarks } from '../constants/common'
export type FileProperty = { key: string; label: string; value: string; raw?: string }
export type FilePropertyGroup = { title: string; icon?: ReactElement; properties: FileProperty[] }
@@ -98,7 +99,7 @@ function buildGeneralGroup(
icon: >, newValue: number) {
+ function onChange(_event: React.SyntheticEvent, newValue: number) {
navigate(ACCOUNT_TABS[newValue])
}
diff --git a/src/pages/account/Header.tsx b/src/pages/account/Header.tsx
index afa7263..c72df45 100644
--- a/src/pages/account/Header.tsx
+++ b/src/pages/account/Header.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from '@material-ui/core'
+import { Box, Typography } from '@mui/material'
import { ReactElement } from 'react'
export function Header(): ReactElement {
diff --git a/src/pages/account/chequebook/AccountChequebook.tsx b/src/pages/account/chequebook/AccountChequebook.tsx
index c448526..28991fd 100644
--- a/src/pages/account/chequebook/AccountChequebook.tsx
+++ b/src/pages/account/chequebook/AccountChequebook.tsx
@@ -1,5 +1,6 @@
-import { Box } from '@material-ui/core'
+import { Box } from '@mui/material'
import { ReactElement, useContext } from 'react'
+
import ExpandableList from '../../../components/ExpandableList'
import ExpandableListItem from '../../../components/ExpandableListItem'
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
@@ -8,7 +9,7 @@ import TroubleshootConnectionCard from '../../../components/TroubleshootConnecti
import DepositModal from '../../../containers/DepositModal'
import WithdrawModal from '../../../containers/WithdrawModal'
import { useAccounting } from '../../../hooks/accounting'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
import { Context as SettingsContext } from '../../../providers/Settings'
import PeerBalances from '../../accounting/PeerBalances'
import { AccountNavigation } from '../AccountNavigation'
diff --git a/src/pages/account/feeds/AccountFeeds.tsx b/src/pages/account/feeds/AccountFeeds.tsx
index 4ed6c94..6a98f38 100644
--- a/src/pages/account/feeds/AccountFeeds.tsx
+++ b/src/pages/account/feeds/AccountFeeds.tsx
@@ -1,19 +1,20 @@
-import { Box } from '@material-ui/core'
import { NULL_TOPIC } from '@ethersphere/bee-js'
+import { Box } from '@mui/material'
import { ReactElement, useContext, useState } from 'react'
import { useNavigate } from 'react-router'
import PlusSquare from 'remixicon-react/AddBoxLineIcon'
import Trash from 'remixicon-react/DeleteBin7LineIcon'
import Download from 'remixicon-react/Download2LineIcon'
import Info from 'remixicon-react/InformationLineIcon'
+
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 TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
-import { Identity, Context as IdentityContext } from '../../../providers/Feeds'
+import { CheckState, 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'
diff --git a/src/pages/account/staking/AccountStaking.tsx b/src/pages/account/staking/AccountStaking.tsx
index 45c0c22..c20631c 100644
--- a/src/pages/account/staking/AccountStaking.tsx
+++ b/src/pages/account/staking/AccountStaking.tsx
@@ -1,11 +1,12 @@
import { ReactElement, useContext, useState } from 'react'
+
import ExpandableList from '../../../components/ExpandableList'
import ExpandableListItem from '../../../components/ExpandableListItem'
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
import { Loading } from '../../../components/Loading'
import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
import StakeModal from '../../../containers/StakeModal'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
import { AccountNavigation } from '../AccountNavigation'
import { Header } from '../Header'
diff --git a/src/pages/account/stamps/AccountStamps.tsx b/src/pages/account/stamps/AccountStamps.tsx
index 1e74c9f..834f7a4 100644
--- a/src/pages/account/stamps/AccountStamps.tsx
+++ b/src/pages/account/stamps/AccountStamps.tsx
@@ -1,36 +1,36 @@
-import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
+import { CircularProgress, Container } from '@mui/material'
import { ReactElement, useContext, useEffect } from 'react'
import { useNavigate } from 'react-router'
import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
import { ChainSync } from '../../../components/ChainSync'
import { Loading } from '../../../components/Loading'
import { SwarmButton } from '../../../components/SwarmButton'
import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
import { Context as StampsContext } from '../../../providers/Stamps'
import { ROUTES } from '../../../routes'
import StampsTable from '../../stamps/StampsTable'
import { AccountNavigation } from '../AccountNavigation'
import { Header } from '../Header'
-const useStyles = makeStyles(() =>
- createStyles({
- root: {
- width: '100%',
- display: 'grid',
- },
- actions: {
- display: 'flex',
- width: '100%',
- flex: '0 1 auto',
- flexWrap: 'wrap',
- alignItems: 'center',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ root: {
+ width: '100%',
+ display: 'grid',
+ },
+ actions: {
+ display: 'flex',
+ width: '100%',
+ flex: '0 1 auto',
+ flexWrap: 'wrap',
+ alignItems: 'center',
+ },
+}))
export function AccountStamps(): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
const navigate = useNavigate()
diff --git a/src/pages/account/wallet/AccountWallet.tsx b/src/pages/account/wallet/AccountWallet.tsx
index 48c1e61..11e8456 100644
--- a/src/pages/account/wallet/AccountWallet.tsx
+++ b/src/pages/account/wallet/AccountWallet.tsx
@@ -1,21 +1,22 @@
-import { Box, Grid, Typography } from '@material-ui/core'
import { BeeModes } from '@ethersphere/bee-js'
+import { Box, Grid, Typography } from '@mui/material'
import { ReactElement, useContext } from 'react'
import { useNavigate } from 'react-router'
import Download from 'remixicon-react/DownloadLineIcon'
import Gift from 'remixicon-react/GiftLineIcon'
import Link from 'remixicon-react/LinkIcon'
+
import ExpandableListItem from '../../../components/ExpandableListItem'
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
import { SwarmButton } from '../../../components/SwarmButton'
import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
+import { WalletInfoCard } from '../../../pages/info/WalletInfoCard'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
import { Context as SettingsContext } from '../../../providers/Settings'
import { ROUTES } from '../../../routes'
import { AccountNavigation } from '../AccountNavigation'
import { Header } from '../Header'
-import { WalletInfoCard } from '../../../pages/info/WalletInfoCard'
export function AccountWallet(): ReactElement {
const { nodeAddresses, nodeInfo, status, walletBalance } = useContext(BeeContext)
diff --git a/src/pages/accounting/PeerBalances.tsx b/src/pages/accounting/PeerBalances.tsx
index 62ae659..5d8a540 100644
--- a/src/pages/accounting/PeerBalances.tsx
+++ b/src/pages/accounting/PeerBalances.tsx
@@ -1,5 +1,6 @@
import { BZZ } from '@ethersphere/bee-js'
import type { ReactElement } from 'react'
+
import CashoutModal from '../../components/CashoutModal'
import ExpandableList from '../../components/ExpandableList'
import ExpandableListItem from '../../components/ExpandableListItem'
diff --git a/src/pages/fdp/FdpLogin.tsx b/src/pages/fdp/FdpLogin.tsx
deleted file mode 100644
index 11da2f0..0000000
--- a/src/pages/fdp/FdpLogin.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { FdpStorage } from '@fairdatasociety/fdp-storage'
-import { Checkbox, InputBase, Typography } from '@material-ui/core'
-import { useSnackbar } from 'notistack'
-import { useEffect, useState } from 'react'
-import RegisterIcon from 'remixicon-react/AddBoxLineIcon'
-import LoginIcon from 'remixicon-react/LoginBoxLineIcon'
-import { SwarmButton } from '../../components/SwarmButton'
-import { Horizontal } from './Horizontal'
-import { Vertical } from './Vertical'
-
-interface Props {
- fdp: FdpStorage
- onSuccessfulLogin: () => void
-}
-
-export function FdpLogin({ fdp, onSuccessfulLogin }: Props) {
- const [username, setUsername] = useState('')
- const [password, setPassword] = useState('')
- const [remember, setRemember] = useState(false)
- const [sepolia, setSepolia] = useState('https://sepolia.drpc.org')
- const { enqueueSnackbar } = useSnackbar()
-
- const inputStyle = { background: 'white', padding: '2px 8px', width: '100%' }
-
- useEffect(() => {
- const storedSepolia = localStorage.getItem('sepolia')
-
- if (storedSepolia) {
- setSepolia(storedSepolia)
- }
- const fdpCredentials = localStorage.getItem('fdpCredentials')
-
- if (fdpCredentials) {
- const { username, password } = JSON.parse(fdpCredentials)
- setUsername(username)
- setPassword(password)
- setRemember(true)
- }
- }, [])
-
- async function onLogin() {
- localStorage.setItem('sepolia', sepolia)
-
- if (remember) {
- localStorage.setItem('fdpCredentials', JSON.stringify({ username, password }))
- } else {
- localStorage.removeItem('fdpCredentials')
- }
- enqueueSnackbar('Logging in...', { variant: 'info' })
- try {
- await fdp.account.login(username, password)
- enqueueSnackbar('Logged in successfully', { variant: 'success' })
- onSuccessfulLogin()
- } catch {
- enqueueSnackbar('Login failed', { variant: 'error' })
- } finally {
- setUsername('')
- setPassword('')
- setRemember(false)
- }
- }
-
- function onRegister() {
- window.open('https://create.fairdatasociety.org/', '_blank')
- }
-
- return (
- {
- await fdp.file.delete(name, path)
- reload()
- }}
- onDeleteDirectory={async (path: string) => {
- await fdp.directory.delete(name, path)
- reload()
- }}
- onUpload={(path: string) => {
- const input = document.createElement('input')
- input.type = 'file'
- input.multiple = true
- input.click()
-
- return new Promise(resolve => {
- input.onchange = async () => {
- if (!input.files || !input.files.length) {
- resolve()
-
- return
- }
- for (const file of Array.from(input.files)) {
- const data = await file.arrayBuffer()
- await fdp.file.uploadData(name, joinUrl(path, file.name), new Uint8Array(data))
- }
- reload()
- resolve()
- }
- })
- }}
- onCreateDirectory={async (path: string) => {
- // eslint-disable-next-line no-alert
- const newDirectoryName = prompt('Directory name')
-
- if (!newDirectoryName) {
- return
- }
- await fdp.directory.create(name, joinUrl(path, newDirectoryName))
- reload()
- }}
- // eslint-disable-next-line require-await
- onSync={async () => {
- setReloader(reloader + 1)
- }}
- download={async (path: string) => {
- const data = await fdp.file.downloadData(name, path)
- const url = URL.createObjectURL(new Blob([data]))
- const a = document.createElement('a')
- a.href = url
- a.download = path.split('/').pop() || 'Untitled'
- a.click()
- }}
- list={async (path: string) => {
- const fdpResponse = await fdp.directory.read(name, path)
- const items: FsItem[] = []
- for (const directory of fdpResponse.directories) {
- items.push({
- name: directory.name,
- $type: FsItemType.DIRECTORY,
- id: directory.name,
- })
- }
- for (const file of fdpResponse.files) {
- items.push({
- name: file.name,
- $type: FsItemType.FILE,
- id: file.name,
- })
- }
-
- return items
- }}
- />
- )
-}
diff --git a/src/pages/fdp/FdpPods.tsx b/src/pages/fdp/FdpPods.tsx
deleted file mode 100644
index f93dc54..0000000
--- a/src/pages/fdp/FdpPods.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { FdpStorage } from '@fairdatasociety/fdp-storage'
-import { Pod } from '@fairdatasociety/fdp-storage/dist/pod/types'
-import { CircularProgress, Typography } from '@material-ui/core'
-import { FdpPod } from './FdpPod'
-import { Vertical } from './Vertical'
-
-interface Props {
- fdp: FdpStorage
- pods: Pod[]
- loadingPods: boolean
-}
-
-export function FdpPods({ fdp, pods, loadingPods }: Props) {
- if (loadingPods) {
- return (
-
- Loading your pods...
-
- )
- }
-
- return (
-
- {pods.map(pod => (
-
- )
-}
diff --git a/src/pages/fdp/Horizontal.tsx b/src/pages/fdp/Horizontal.tsx
deleted file mode 100644
index 44562f4..0000000
--- a/src/pages/fdp/Horizontal.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-interface Props {
- children: React.ReactNode
- p?: string
- gap?: number
- between?: boolean
- background?: string
-}
-
-export function Horizontal({ children, p = '0', gap = 8, between, background }: Props) {
- const style = {
- display: 'flex',
- flexDirection: 'row' as 'row', //eslint-disable-line
- alignItems: 'center',
- justifyContent: between ? 'space-between' : 'flex-start',
- gap: `${gap}px`,
- padding: p,
- background,
- width: between ? '100%' : 'auto',
- }
-
- return {
- const bee = new Bee('http://localhost:1633')
- const sepolia = localStorage.getItem('sepolia') ?? 'https://sepolia.drpc.org'
- const postageBatches = await bee.getAllPostageBatch()
- const usableBatches = postageBatches.filter(batch => batch.usable)
- const highestCapacityBatch = usableBatches.length ? usableBatches.reduce((a, b) => (a.depth > b.depth ? a : b)) : null
-
- if (!highestCapacityBatch) {
- return null
- }
-
- // TODO: FDS has bad types
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- return new FdpStorage('http://localhost:1633', highestCapacityBatch.batchID.toHex() as any, {
- ensOptions: {
- rpcUrl: sepolia,
- contractAddresses: {
- ensRegistry: '0x42a96D45d787685ac4b36292d218B106Fb39be7F',
- fdsRegistrar: '0xFBF00389140C00384d88d458239833E3231a7414',
- nameResolver: '0xE20ECe6Ea93c4edE41e4d3B973f6679F1E89986A',
- publicResolver: '0xC904989B579c2B216A75723688C784038AA99B56',
- reverseResolver: '0xbDC8D98d3cbFd68EA9c165E1f15Df6e77A2ae0C5',
- },
- gasEstimation: 1,
- performChecks: true,
- },
- providerOptions: {
- url: sepolia,
- },
- ensDomain: 'fds',
- })
-}
-
-export default function FDP(): ReactElement {
- const [fdp, setFdp] = useState(null)
- const [pods, setPods] = useState([])
- const [loggedIn, setLoggedIn] = useState(false)
- const [loadingPods, setLoadingPods] = useState(false)
- const [creatingPod, setCreatingPod] = useState(false)
- const { enqueueSnackbar } = useSnackbar()
-
- useEffect(() => {
- makeFdp().then(fdp => {
- if (!fdp) {
- enqueueSnackbar('FDP could not be initialized. Do you have a postage batch?', { variant: 'error' })
- }
- setFdp(fdp)
- })
- }, [enqueueSnackbar])
-
- useEffect(() => {
- if (fdp && loggedIn) {
- setLoadingPods(true)
- fdp.personalStorage.list().then(pods => {
- setPods(pods.pods)
- setLoadingPods(false)
- })
- }
- }, [fdp, loggedIn])
-
- function onSuccessfulLogin() {
- setLoggedIn(true)
- }
-
- function onCreatePod() {
- if (!fdp) {
- return
- }
-
- if (loadingPods || creatingPod) {
- enqueueSnackbar('Please wait until the pods are loaded', { variant: 'info' })
-
- return
- }
- // eslint-disable-next-line no-alert
- const name = prompt('Enter a name for the new pod')
-
- if (name) {
- setCreatingPod(true)
- fdp.personalStorage.create(name).then(() => {
- fdp.personalStorage.list().then(pods => {
- setPods(pods.pods)
- setCreatingPod(false)
- })
- })
- }
- }
-
- async function onImportPod() {
- if (!fdp) {
- return
- }
-
- if (loadingPods || creatingPod) {
- enqueueSnackbar('Please wait until the pods are loaded', { variant: 'info' })
-
- return
- }
- // eslint-disable-next-line no-alert
- const name = prompt('Enter a name for the new pod')
- // eslint-disable-next-line no-alert
- const importHash = prompt('Enter the Swarm reference')
-
- if (!name || !importHash) {
- return
- }
- setCreatingPod(true)
- const bee = new Bee('http://localhost:1633')
- const manifest = await MantarayNode.unmarshal(bee, importHash)
- await manifest.loadRecursively(bee)
- const nodes = manifest.collect()
- await fdp.personalStorage.create(name)
- for (const node of nodes) {
- await fdp.file.uploadData(
- name,
- joinUrl('/', node.fullPathString),
- (await bee.downloadData(node.targetAddress)).toUint8Array(),
- )
- }
- const pods = await fdp.personalStorage.list()
- setPods(pods.pods)
- setCreatingPod(false)
- }
-
- if (!fdp) {
- return
-
- Files
- {loggedIn && (
-
-
- Create
-
-
- Import
-
-
- )}
-
- {!loggedIn &&
- You do not have any pods yet. Get started by clicking the Create or Import button on the top
- right.
-
- )}
-
- )
-}
diff --git a/src/pages/feeds/CreateNewFeed.tsx b/src/pages/feeds/CreateNewFeed.tsx
index ecf36fc..7321bbc 100644
--- a/src/pages/feeds/CreateNewFeed.tsx
+++ b/src/pages/feeds/CreateNewFeed.tsx
@@ -1,11 +1,12 @@
-import { Box, Grid, Typography } from '@material-ui/core'
import { NULL_TOPIC } from '@ethersphere/bee-js'
+import { Box, Grid, Typography } from '@mui/material'
import { Form, Formik } from 'formik'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useState } from 'react'
import { useNavigate } from 'react-router'
import Check from 'remixicon-react/CheckLineIcon'
import X from 'remixicon-react/CloseLineIcon'
+
import { DocumentationText } from '../../components/DocumentationText'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -26,7 +27,7 @@ interface FormValues {
const initialValues: FormValues = {
identityName: '',
- type: 'PRIVATE_KEY',
+ type: IdentityType.PrivateKey,
password: '',
}
@@ -102,12 +103,12 @@ export default function CreateNewFeed(): ReactElement {
formik
name="type"
options={[
- { label: 'Keypair Only', value: 'PRIVATE_KEY' },
- { label: 'Password Protected', value: 'V3' },
+ { label: 'Keypair Only', value: IdentityType.PrivateKey },
+ { label: 'Password Protected', value: IdentityType.V3 },
]}
/>
- {values.type === 'V3' &&
diff --git a/src/pages/feeds/DeleteFeedDialog.tsx b/src/pages/feeds/DeleteFeedDialog.tsx
index 5b882f6..9b5a3f2 100644
--- a/src/pages/feeds/DeleteFeedDialog.tsx
+++ b/src/pages/feeds/DeleteFeedDialog.tsx
@@ -1,7 +1,8 @@
-import { Box, Typography } from '@material-ui/core'
+import { Box, Typography } from '@mui/material'
import { ReactElement } from 'react'
import X from 'remixicon-react/CloseLineIcon'
import Trash from 'remixicon-react/DeleteBin7LineIcon'
+
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import { SwarmButton } from '../../components/SwarmButton'
import { SwarmDialog } from '../../components/SwarmDialog'
diff --git a/src/pages/feeds/ExportFeedDialog.tsx b/src/pages/feeds/ExportFeedDialog.tsx
index e23bf27..67004c5 100644
--- a/src/pages/feeds/ExportFeedDialog.tsx
+++ b/src/pages/feeds/ExportFeedDialog.tsx
@@ -1,33 +1,33 @@
-import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
+import { Box, Typography } from '@mui/material'
import { saveAs } from 'file-saver'
import { useSnackbar } from 'notistack'
import { ReactElement } from 'react'
-import Download from 'remixicon-react/DownloadLineIcon'
import Clipboard from 'remixicon-react/ClipboardLineIcon'
+import Download from 'remixicon-react/DownloadLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
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'
+import { Identity, IdentityType } from '../../providers/Feeds'
interface Props {
identity: Identity
onClose: () => void
}
-const useStyles = makeStyles(() =>
- createStyles({
- wrapper: {
- maxWidth: '100%',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ wrapper: {
+ maxWidth: '100%',
+ },
+}))
export function ExportFeedDialog({ identity, onClose }: Props): ReactElement {
const { enqueueSnackbar } = useSnackbar()
- const classes = useStyles()
+ const { classes } = useStyles()
function onDownload() {
saveAs(
@@ -39,7 +39,7 @@ export function ExportFeedDialog({ identity, onClose }: Props): ReactElement {
}
function getExportText() {
- return identity.type === 'V3' ? 'JSON file' : 'the private key string'
+ return identity.type === IdentityType.V3 ? 'JSON file' : 'the private key string'
}
function onCopy() {
diff --git a/src/pages/feeds/FeedPasswordDialog.tsx b/src/pages/feeds/FeedPasswordDialog.tsx
index 454d3d4..1aa0f26 100644
--- a/src/pages/feeds/FeedPasswordDialog.tsx
+++ b/src/pages/feeds/FeedPasswordDialog.tsx
@@ -1,7 +1,8 @@
-import { Box, Typography } from '@material-ui/core'
+import { Box, Typography } from '@mui/material'
import { ReactElement, useState } from 'react'
import Check from 'remixicon-react/CheckLineIcon'
import X from 'remixicon-react/CloseLineIcon'
+
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import { SwarmButton } from '../../components/SwarmButton'
import { SwarmDialog } from '../../components/SwarmDialog'
diff --git a/src/pages/feeds/FeedSubpage.tsx b/src/pages/feeds/FeedSubpage.tsx
index 85f6388..18c4660 100644
--- a/src/pages/feeds/FeedSubpage.tsx
+++ b/src/pages/feeds/FeedSubpage.tsx
@@ -1,7 +1,8 @@
-import { Box } from '@material-ui/core'
+import { Box } from '@mui/material'
import { ReactElement, useContext, useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import X from 'remixicon-react/CloseLineIcon'
+
import { DocumentationText } from '../../components/DocumentationText'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -11,6 +12,7 @@ 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 { FileOrigin } from '../files/FileNavigation'
import { UploadArea } from '../files/UploadArea'
export function FeedSubpage(): ReactElement {
@@ -32,11 +34,10 @@ export function FeedSubpage(): ReactElement {
return
}
- try {
- beeApi?.downloadData(identity.feedHash).then(() => setAvailable(true))
- } catch {
- setAvailable(false)
- }
+ beeApi
+ ?.downloadData(identity.feedHash)
+ .then(() => setAvailable(true))
+ .catch(() => setAvailable(false))
}, [beeApi, uuid, identity, navigate])
if (!identity || !status.all) {
@@ -50,7 +51,7 @@ export function FeedSubpage(): ReactElement {
return (
{`${identity.name} Website`}
-
diff --git a/src/pages/feeds/ImportFeedDialog.tsx b/src/pages/feeds/ImportFeedDialog.tsx
index 62ffc10..d42ef3b 100644
--- a/src/pages/feeds/ImportFeedDialog.tsx
+++ b/src/pages/feeds/ImportFeedDialog.tsx
@@ -1,8 +1,10 @@
-import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
+import { Box, TextareaAutosize } from '@mui/material'
import { useSnackbar } from 'notistack'
import React, { ReactElement, useContext, useRef, useState } from 'react'
import Check from 'remixicon-react/CheckLineIcon'
import Upload from 'remixicon-react/UploadLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import { SwarmButton } from '../../components/SwarmButton'
import { SwarmDialog } from '../../components/SwarmDialog'
@@ -15,18 +17,16 @@ interface Props {
onClose: () => void
}
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- textarea: {
- width: '100%',
- border: 0,
- padding: theme.spacing(1),
- },
- displayNone: {
- display: 'none',
- },
- }),
-)
+const useStyles = makeStyles()(theme => ({
+ textarea: {
+ width: '100%',
+ border: 0,
+ padding: theme.spacing(1),
+ },
+ displayNone: {
+ display: 'none',
+ },
+}))
export function ImportFeedDialog({ onClose }: Props): ReactElement {
const [textareaValue, setTextareaValue] = useState('')
@@ -37,7 +37,7 @@ export function ImportFeedDialog({ onClose }: Props): ReactElement {
const { enqueueSnackbar } = useSnackbar()
- const classes = useStyles()
+ const { classes } = useStyles()
async function onImport() {
const feed = await importIdentity(name, textareaValue)
diff --git a/src/pages/feeds/UpdateFeed.tsx b/src/pages/feeds/UpdateFeed.tsx
index bfc3330..dd9a97a 100644
--- a/src/pages/feeds/UpdateFeed.tsx
+++ b/src/pages/feeds/UpdateFeed.tsx
@@ -1,20 +1,22 @@
-import { Box, Grid, Typography } from '@material-ui/core'
+import { Box, Grid, Typography } from '@mui/material'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router'
import Bookmark from 'remixicon-react/BookmarkLineIcon'
import X from 'remixicon-react/CloseLineIcon'
+
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 { Identity, Context as IdentityContext } from '../../providers/Feeds'
+import { Context as IdentityContext, Identity, IdentityType } 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'
export default function UpdateFeed(): ReactElement {
@@ -56,7 +58,7 @@ export default function UpdateFeed(): ReactElement {
return
}
- if (selectedIdentity.type === 'V3') {
+ if (selectedIdentity.type === IdentityType.V3) {
setShowPasswordPrompt(true)
} else {
onFeedUpdate(selectedIdentity)
@@ -73,8 +75,15 @@ export default function UpdateFeed(): ReactElement {
return
}
+ if (!hash) {
+ enqueueSnackbar(Hash is invalid, { variant: 'error' })
+ setLoading(false)
+
+ return
+ }
+
try {
- await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
+ await updateFeed(beeApi, identity, hash, selectedStamp, password as string)
persistIdentity(identities, identity)
setIdentities([...identities])
navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', identity.uuid))
diff --git a/src/pages/feeds/index.tsx b/src/pages/feeds/index.tsx
index b19eb98..bb6d548 100644
--- a/src/pages/feeds/index.tsx
+++ b/src/pages/feeds/index.tsx
@@ -1,22 +1,24 @@
-import { Box, Typography } from '@material-ui/core'
import { NULL_TOPIC } from '@ethersphere/bee-js'
+import { Box, Typography } from '@mui/material'
import { ReactElement, useContext, useState } from 'react'
import { useNavigate } from 'react-router'
import PlusSquare from 'remixicon-react/AddBoxLineIcon'
import Trash from 'remixicon-react/DeleteBin7LineIcon'
import Download from 'remixicon-react/DownloadLineIcon'
import Info from 'remixicon-react/InformationLineIcon'
+
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 TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext, CheckState } from '../../providers/Bee'
-import { Identity, Context as IdentityContext } from '../../providers/Feeds'
+import { CheckState, 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'
diff --git a/src/pages/filemanager/SearchContext.tsx b/src/pages/filemanager/SearchContext.tsx
index c635200..54a06c8 100644
--- a/src/pages/filemanager/SearchContext.tsx
+++ b/src/pages/filemanager/SearchContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useRef, useState, ReactNode, useCallback } from 'react'
+import { createContext, ReactNode, useCallback, useContext, useMemo, useRef, useState } from 'react'
type Scope = 'selected' | 'all'
diff --git a/src/pages/filemanager/ViewContext.tsx b/src/pages/filemanager/ViewContext.tsx
index 9302db5..c0e2bfe 100644
--- a/src/pages/filemanager/ViewContext.tsx
+++ b/src/pages/filemanager/ViewContext.tsx
@@ -1,4 +1,5 @@
-import { createContext, useContext, useState, ReactNode } from 'react'
+import { createContext, ReactNode, useContext, useState } from 'react'
+
import { ViewType } from '../../modules/filemanager/constants/transfers'
interface ViewContextProps {
diff --git a/src/pages/filemanager/index.tsx b/src/pages/filemanager/index.tsx
index d1f1b40..a88215d 100644
--- a/src/pages/filemanager/index.tsx
+++ b/src/pages/filemanager/index.tsx
@@ -1,22 +1,157 @@
-import { ReactElement, useContext, useEffect, useState, useRef, useCallback, useMemo } from 'react'
-import './FileManager.scss'
+import { DriveInfo, FileManagerBase } from '@solarpunkltd/file-manager-lib'
+import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+
import { SearchProvider } from './SearchContext'
import { ViewProvider } from './ViewContext'
-import { Header } from '../../modules/filemanager/components/Header/Header'
-import { Sidebar } from '../../modules/filemanager/components/Sidebar/Sidebar'
-import { AdminStatusBar } from '../../modules/filemanager/components/AdminStatusBar/AdminStatusBar'
-import { FileBrowser } from '../../modules/filemanager/components/FileBrowser/FileBrowser'
-import { InitialModal } from '../../modules/filemanager/components/InitialModal/InitialModal'
-import { Context as FMContext } from '../../providers/FileManager'
-import { BrowserPlatform, cacheClearUrls, detectBrowser } from '../../providers/Platform'
-import { Context as SettingsContext } from '../../providers/Settings'
-import { Context as BeeContext, CheckState } from '../../providers/Bee'
-import { PrivateKeyModal } from '../../modules/filemanager/components/PrivateKeyModal/PrivateKeyModal'
-import { getSignerPk, removeSignerPk } from '../../../src/modules/filemanager/utils/common'
-import { ErrorModal } from '../../../src/modules/filemanager/components/ErrorModal/ErrorModal'
-import { ConfirmModal } from '../../modules/filemanager/components/ConfirmModal/ConfirmModal'
-import { Button } from '../../modules/filemanager/components/Button/Button'
-import { FormbricksIntegration } from '../../modules/filemanager/components/FormbricksIntegration/FormbricksIntegration'
+
+import './FileManager.scss'
+
+import { AdminStatusBar } from '@/modules/filemanager/components/AdminStatusBar/AdminStatusBar'
+import { Button } from '@/modules/filemanager/components/Button/Button'
+import { ConfirmModal } from '@/modules/filemanager/components/ConfirmModal/ConfirmModal'
+import { ErrorModal } from '@/modules/filemanager/components/ErrorModal/ErrorModal'
+import { FileBrowser } from '@/modules/filemanager/components/FileBrowser/FileBrowser'
+import { FormbricksIntegration } from '@/modules/filemanager/components/FormbricksIntegration/FormbricksIntegration'
+import { Header } from '@/modules/filemanager/components/Header/Header'
+import { InitialModal } from '@/modules/filemanager/components/InitialModal/InitialModal'
+import { PrivateKeyModal } from '@/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal'
+import { Sidebar } from '@/modules/filemanager/components/Sidebar/Sidebar'
+import { getSignerPk, removeSignerPk } from '@/modules/filemanager/utils/common'
+import { CheckState, Context as BeeContext } from '@/providers/Bee'
+import { Context as FMContext } from '@/providers/FileManager'
+import { BrowserPlatform, cacheClearUrls, detectBrowser } from '@/providers/Platform'
+import { Context as SettingsContext } from '@/providers/Settings'
+
+function PrivateKeyModalBlock({ onSaved }: { onSaved: () => void }) {
+ return (
+
+
+
+
+ )
+}
export function FileManagerPage(): ReactElement {
const isMountedRef = useRef(true)
@@ -136,99 +271,46 @@ export function FileManagerPage(): ReactElement {
const isFormbricksActive = Boolean(fm && fm.adminStamp && adminDrive && !showInitialModal && !loading)
if (!hasPk) {
- return (
- {
+ removeSignerPk()
+ setHasPk(false)
+ }}
+ />
)
}
if (showResetModal) {
- return (
- setShowResetModal(false)} />
}
if (!showErrorModal && (isEmptyState || isInvalidState)) {
return (
-
-
-
-
+ setShowConnectionError(false)}
+ isFormbricksActive={isFormbricksActive}
+ errorMessage={errorMessage}
+ setErrorMessage={setErrorMessage}
+ loading={loading}
+ adminDrive={adminDrive}
+ isCreationInProgress={isCreationInProgress}
+ />
)
}
diff --git a/src/pages/files/AssetIcon.tsx b/src/pages/files/AssetIcon.tsx
index 134b9d1..ee82571 100644
--- a/src/pages/files/AssetIcon.tsx
+++ b/src/pages/files/AssetIcon.tsx
@@ -1,4 +1,5 @@
import { ReactElement } from 'react'
+
import { StripedWrapper } from '../../components/StripedWrapper'
interface Props {
diff --git a/src/pages/files/AssetPreview.tsx b/src/pages/files/AssetPreview.tsx
index 015d5eb..797556d 100644
--- a/src/pages/files/AssetPreview.tsx
+++ b/src/pages/files/AssetPreview.tsx
@@ -1,44 +1,45 @@
-import { Box, Grid, Typography } from '@material-ui/core'
-import { Web } from '@material-ui/icons'
+import { Web } from '@mui/icons-material'
+import { Box, Grid, Typography } from '@mui/material'
import { ReactElement, useMemo } from 'react'
import File from 'remixicon-react/FileLineIcon'
import Folder from 'remixicon-react/FolderLineIcon'
+
+import { FitAudio } from '../../components/FitAudio'
import { FitImage } from '../../components/FitImage'
+import { FitVideo } from '../../components/FitVideo'
import { shortenText } from '../../utils'
import { getHumanReadableFileSize } from '../../utils/file'
import { shortenHash } from '../../utils/hash'
+
import { AssetIcon } from './AssetIcon'
-import { FitVideo } from '../../components/FitVideo'
-import { FitAudio } from '../../components/FitAudio'
interface Props {
previewUri?: string
metadata?: Metadata
}
-/* eslint-disable react/display-name */
-const getPreviewComponent = (previewUri?: string, metadata?: Metadata) => {
+const getPreviewElement = (previewUri?: string, metadata?: Metadata) => {
if (metadata?.isVideo) {
- return () =>
-
{metadata?.hash && Swarm Hash: {shortenHash(metadata.hash)} }
{metadata?.name && metadata?.name !== metadata?.hash && (
diff --git a/src/pages/files/AssetSummary.tsx b/src/pages/files/AssetSummary.tsx
index ce842ab..fac3444 100644
--- a/src/pages/files/AssetSummary.tsx
+++ b/src/pages/files/AssetSummary.tsx
@@ -1,23 +1,24 @@
-import { Box } from '@material-ui/core'
import { Reference } from '@ethersphere/bee-js'
+import { Box } from '@mui/material'
import { ReactElement } from 'react'
+
import { DocumentationText } from '../../components/DocumentationText'
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
import ExpandableListItemLink from '../../components/ExpandableListItemLink'
interface Props {
isWebsite?: boolean
- reference: string
+ reference?: string
}
-export function AssetSummary({ isWebsite, reference }: Props): ReactElement {
- const isHash = Reference.isValid(reference)
+export function AssetSummary({ reference }: Props): ReactElement {
+ const isHash = reference ? Reference.isValid(reference) : false
return (
<>
- {isHash &&
The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided
diff --git a/src/pages/files/AssetSyncing.tsx b/src/pages/files/AssetSyncing.tsx
index 44c39df..fd77c74 100644
--- a/src/pages/files/AssetSyncing.tsx
+++ b/src/pages/files/AssetSyncing.tsx
@@ -1,14 +1,17 @@
-import { Box } from '@material-ui/core'
import { Tag } from '@ethersphere/bee-js'
-import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
+import { Box } from '@mui/material'
+import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react'
+
import { DocumentationText } from '../../components/DocumentationText'
import { LinearProgressWithLabel } from '../../components/ProgressBar'
import { Context as SettingsContext } from '../../providers/Settings'
interface Props {
- reference: string
+ reference?: string
}
+const SYNC_CHECK_INTERVAL_MS = 2000
+
export function AssetSyncing({ reference }: Props): ReactElement {
const { beeApi } = useContext(SettingsContext)
@@ -16,8 +19,8 @@ export function AssetSyncing({ reference }: Props): ReactElement {
const [isRetrieveChecking, setIsRetrieveChecking] = useState(false)
const [syncProgress, setSyncProgress] = useState(0)
- const syncCheck = async () => {
- if (!beeApi) return
+ const syncCheck = useCallback(async () => {
+ if (!beeApi || !reference) return
let allTags: Tag[] = []
let offset = 0
@@ -36,10 +39,10 @@ export function AssetSyncing({ reference }: Props): ReactElement {
const progress = ((tag.seen + tag.synced) / tag.split) * 100
setSyncProgress(progress)
}
- }
+ }, [beeApi, reference])
useEffect(() => {
- syncTimer.current = setInterval(syncCheck, 2000)
+ syncTimer.current = setInterval(syncCheck, SYNC_CHECK_INTERVAL_MS)
return () => {
if (syncTimer.current) {
@@ -47,8 +50,7 @@ export function AssetSyncing({ reference }: Props): ReactElement {
syncTimer.current = null
}
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [reference])
+ }, [reference, syncCheck])
useEffect(() => {
if (syncProgress === 100 && syncTimer.current) {
@@ -63,7 +65,7 @@ export function AssetSyncing({ reference }: Props): ReactElement {
To ensure it's not due to invalid synchronization data,
verify availability from at least 70% using one of the stewardship endpoints.
*/
- if (beeApi && !isRetrieveChecking && syncProgress > 10 && syncProgress < 100) {
+ if (beeApi && reference && !isRetrieveChecking && syncProgress > 10 && syncProgress < 100) {
// It's a long running task make sure only one run occurs at a time.
setIsRetrieveChecking(true)
diff --git a/src/pages/files/Download.tsx b/src/pages/files/Download.tsx
index 9300c6a..286e178 100644
--- a/src/pages/files/Download.tsx
+++ b/src/pages/files/Download.tsx
@@ -1,8 +1,9 @@
-import { BeeModes, MantarayNode, NULL_ADDRESS, Reference } from '@ethersphere/bee-js'
+import { BeeModes, Reference } from '@ethersphere/bee-js'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Search from 'remixicon-react/SearchLineIcon'
+
import ExpandableListItemInput from '../../components/ExpandableListItemInput'
import { History } from '../../components/History'
import { Context as BeeContext } from '../../providers/Bee'
@@ -10,8 +11,10 @@ import { Context as FileContext, defaultUploadOrigin } from '../../providers/Fil
import { Context as SettingsContext } from '../../providers/Settings'
import { ROUTES } from '../../routes'
import { recognizeEnsOrSwarmHash, regexpEns } from '../../utils'
-import { HISTORY_KEYS, determineHistoryName, putHistory } from '../../utils/local-storage'
-import { FileNavigation } from './FileNavigation'
+import { determineHistoryName, LocalStorageKeys, putHistory } from '../../utils/localStorage'
+import { loadManifest } from '../../utils/manifest'
+
+import { FileNavigation, FileOrigin } from './FileNavigation'
export function Download(): ReactElement {
const [loading, setLoading] = useState(false)
@@ -43,22 +46,11 @@ export function Download(): ReactElement {
setLoading(true)
try {
- let manifest = await MantarayNode.unmarshal(beeApi, identifier)
- await manifest.loadRecursively(beeApi)
-
- // If the manifest is a feed, resolve it and overwrite the manifest
- await manifest.resolveFeed(beeApi).then(
- async feed =>
- await feed.ifPresentAsync(async feedUpdate => {
- manifest = MantarayNode.unmarshalFromData(feedUpdate.payload.toUint8Array(), NULL_ADDRESS)
- await manifest.loadRecursively(beeApi)
- }),
- )
-
+ const manifest = await loadManifest(beeApi, identifier)
const rootMetadata = manifest.getDocsMetadata()
putHistory(
- HISTORY_KEYS.DOWNLOAD_HISTORY,
+ LocalStorageKeys.downloadHistory,
identifier,
determineHistoryName(identifier, rootMetadata.indexDocument),
)
@@ -74,7 +66,8 @@ export function Download(): ReactElement {
if (message.includes('Not Found: Not Found')) {
message = 'The specified hash was not found.'
}
- console.error(error) // eslint-disable-line
+ // eslint-disable-next-line no-console
+ console.error(error)
enqueueSnackbar(Error: {message || 'Unknown'}, { variant: 'error' })
} finally {
setLoading(false)
@@ -83,7 +76,7 @@ export function Download(): ReactElement {
return (
<>
- {nodeInfo?.beeMode !== BeeModes.ULTRA_LIGHT && onSwarmIdentifier(value)}
@@ -97,7 +90,7 @@ export function Download(): ReactElement {
mapperFn={value => recognizeEnsOrSwarmHash(value)}
loading={loading}
/>
- >, newValue: number) {
+ function onChange(_event: React.SyntheticEvent, newValue: number) {
navigate(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD)
}
return (
-
-
('SELECT')
+ const [stampMode, setStampMode] = useState(StampMode.Select)
const [stamp, setStamp] = useState(null)
const [isUploading, setUploading] = useState(false)
const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
@@ -44,7 +47,7 @@ export function Upload(): ReactElement {
useEffect(() => {
refresh()
- }, []) // eslint-disable-line react-hooks/exhaustive-deps
+ }, [refresh])
if (status.all === CheckState.ERROR) return
- {hasAnyStamps && stampMode === 'SELECT' ? (
+ {hasAnyStamps && stampMode === StampMode.Select ? (
setStamp(stamp)} defaultValue={stamp?.batchID.toHex()} />
) : (
- setStampMode('SELECT')} />
+ setStampMode(StampMode.Select)} />
)}
diff --git a/src/pages/files/UploadActionBar.tsx b/src/pages/files/UploadActionBar.tsx
index 689937b..6ee9266 100644
--- a/src/pages/files/UploadActionBar.tsx
+++ b/src/pages/files/UploadActionBar.tsx
@@ -1,14 +1,20 @@
-import { Box, Grid } from '@material-ui/core'
+import { Box, Grid } from '@mui/material'
import { ReactElement } from 'react'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import ArrowLeft from 'remixicon-react/ArrowLeftLineIcon'
import Check from 'remixicon-react/CheckLineIcon'
import X from 'remixicon-react/CloseLineIcon'
-import ArrowLeft from 'remixicon-react/ArrowLeftLineIcon'
-import PlusSquare from 'remixicon-react/AddBoxLineIcon'
import Layers from 'remixicon-react/StackLineIcon'
+
import { DocumentationText } from '../../components/DocumentationText'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import { SwarmButton } from '../../components/SwarmButton'
+export enum StampMode {
+ Buy = 'BUY',
+ Select = 'SELECT',
+}
+
interface Props {
step: number
onUpload: () => void
@@ -19,8 +25,8 @@ interface Props {
hasStamp: boolean
hasAnyStamps: boolean
uploadLabel: string
- stampMode: 'BUY' | 'SELECT'
- setStampMode: (mode: 'BUY' | 'SELECT') => void
+ stampMode: StampMode
+ setStampMode: (mode: StampMode) => void
}
export function UploadActionBar({
@@ -68,7 +74,7 @@ export function UploadActionBar({
return (
- {stampMode === 'SELECT' && (
+ {stampMode === StampMode.Select && (
Proceed With Selected Stamp
@@ -79,11 +85,11 @@ export function UploadActionBar({
{hasAnyStamps && (
setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
- iconType={stampMode === 'BUY' ? Layers : PlusSquare}
+ disabled={stampMode === StampMode.Buy && !hasAnyStamps}
+ onClick={() => setStampMode(stampMode === StampMode.Buy ? StampMode.Select : StampMode.Buy)}
+ iconType={stampMode === StampMode.Buy ? Layers : PlusSquare}
>
- {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
+ {stampMode === StampMode.Buy ? 'Use Existing Stamp' : 'Buy New Stamp'}
)}
diff --git a/src/pages/files/UploadArea.tsx b/src/pages/files/UploadArea.tsx
index 20c93f8..89fa1ec 100644
--- a/src/pages/files/UploadArea.tsx
+++ b/src/pages/files/UploadArea.tsx
@@ -1,75 +1,83 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core'
-import { DropzoneArea } from 'material-ui-dropzone'
+import { BeeModes } from '@ethersphere/bee-js'
+import { Box } from '@mui/material'
import { useSnackbar } from 'notistack'
-import { ReactElement, useContext, useState } from 'react'
+import { ReactElement, useContext, useRef, useState } from 'react'
+import { useDropzone } from 'react-dropzone'
+import { useNavigate } from 'react-router-dom'
import PlusCircle from 'remixicon-react/AddCircleLineIcon'
import FilePlus from 'remixicon-react/FileAddLineIcon'
import FolderPlus from 'remixicon-react/FolderAddLineIcon'
-import { useNavigate } from 'react-router-dom'
+import { makeStyles } from 'tss-react/mui'
+
import { DocumentationText } from '../../components/DocumentationText'
import { SwarmButton } from '../../components/SwarmButton'
-import { Context, UploadOrigin } from '../../providers/File'
import { Context as BeeContext } from '../../providers/Bee'
+import { Context, UploadOrigin } from '../../providers/File'
import { ROUTES } from '../../routes'
import { detectIndexHtml } from '../../utils/file'
-import { BeeModes } from '@ethersphere/bee-js'
interface Props {
uploadOrigin: UploadOrigin
showHelp: boolean
}
-const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
+const MAX_FILE_SIZE = 1_000_000_000 // 1 GB
-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,
- },
+const useStyles = makeStyles()(theme => ({
+ areaWrapper: { position: 'relative', marginBottom: theme.spacing(2) },
+ dropzone: {
+ background: theme.palette.background.default,
+ outline: 'none',
+ border: '2px dashed #ccc',
+ borderRadius: 4,
+ padding: theme.spacing(4),
+ textAlign: 'center',
+ cursor: 'pointer',
+ minHeight: 200,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ '&:hover': {
+ borderColor: theme.palette.primary.main,
},
- 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,
- },
- }),
-)
+ },
+ buttonWrapper: {
+ display: 'flex',
+ width: '100%',
+ justifyContent: 'center',
+ alignItems: 'center',
+ gap: theme.spacing(1),
+ },
+ button: {
+ zIndex: 2,
+ },
+}))
export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
const { setFiles, setUploadOrigin } = useContext(Context)
const { nodeInfo } = useContext(BeeContext)
- const classes = useStyles()
+ const { classes } = useStyles()
const navigate = useNavigate()
const { enqueueSnackbar } = useSnackbar()
const [strictWebsiteMode, setStrictWebsiteMode] = useState(false)
- const [version, setVersion] = useState(0)
+ const inputRef = useRef(null)
- const getDropzoneInputDomElement = () => document.querySelector('.MuiDropzoneArea-root input') as HTMLInputElement
+ const onDrop = (acceptedFiles: File[]) => {
+ handleChange(acceptedFiles)
+ }
+
+ const { getRootProps, getInputProps } = useDropzone({
+ onDrop,
+ maxSize: MAX_FILE_SIZE,
+ noClick: true,
+ })
const onUploadCollectionClick = () => {
- const element = getDropzoneInputDomElement()
-
- if (element) {
- element.setAttribute('directory', '')
- element.setAttribute('webkitdirectory', '')
- element.setAttribute('mozdirectory', '')
- element.click()
+ if (inputRef.current) {
+ inputRef.current.setAttribute('directory', '')
+ inputRef.current.setAttribute('webkitdirectory', '')
+ inputRef.current.setAttribute('mozdirectory', '')
+ inputRef.current.click()
}
}
@@ -84,23 +92,14 @@ export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
}
const onUploadFileClick = () => {
- const element = getDropzoneInputDomElement()
-
- if (element) {
- element.removeAttribute('directory')
- element.removeAttribute('webkitdirectory')
- element.removeAttribute('mozdirectory')
- element.click()
+ if (inputRef.current) {
+ inputRef.current.removeAttribute('directory')
+ inputRef.current.removeAttribute('webkitdirectory')
+ inputRef.current.removeAttribute('mozdirectory')
+ inputRef.current.click()
}
}
- const resetComponentOnAddingInvalidContent = () => {
- setTimeout(() => {
- setVersion(x => x + 1)
- setFiles([])
- }, 0)
- }
-
const handleChange = (files?: File[]) => {
if (files) {
const FilePaths = files as FilePath[]
@@ -110,7 +109,8 @@ export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
enqueueSnackbar('To upload a website, there must be an index.html or index.htm in the root of the folder.', {
variant: 'error',
})
- resetComponentOnAddingInvalidContent()
+ setFiles([])
+ setStrictWebsiteMode(false)
return
}
@@ -129,27 +129,22 @@ export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
return (
<>
{isUploadEnabled && (
-
+
+
+
+
+ Add File
+
+
+ Add Folder
+
+
+ Add Website
+
+
+
+
)}
{isUploadEnabled && showHelp && (
diff --git a/src/pages/files/UploadLander.tsx b/src/pages/files/UploadLander.tsx
index dcf4473..1759a5e 100644
--- a/src/pages/files/UploadLander.tsx
+++ b/src/pages/files/UploadLander.tsx
@@ -1,10 +1,12 @@
import { ReactElement, useContext } from 'react'
+
import { History } from '../../components/History'
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
import { CheckState, Context as BeeContext } from '../../providers/Bee'
import { defaultUploadOrigin } from '../../providers/File'
-import { HISTORY_KEYS } from '../../utils/local-storage'
-import { FileNavigation } from './FileNavigation'
+import { LocalStorageKeys } from '../../utils/localStorage'
+
+import { FileNavigation, FileOrigin } from './FileNavigation'
import { UploadArea } from './UploadArea'
export function UploadLander(): ReactElement {
@@ -14,9 +16,9 @@ export function UploadLander(): ReactElement {
return (
<>
-
+
Theoretical: ~{theoreticalMaximumVolume} / Effective: ~{effectiveVolume}
@@ -241,7 +242,7 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
setImmutable(event.target.value === 'Yes')}
options={[
{ value: 'Yes', label: 'Yes' },
@@ -277,7 +278,7 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
-
+
-
+
Standard mode
diff --git a/src/pages/stamps/PostageStampSelector.tsx b/src/pages/stamps/PostageStampSelector.tsx
index 9b3c64e..f61ed6f 100644
--- a/src/pages/stamps/PostageStampSelector.tsx
+++ b/src/pages/stamps/PostageStampSelector.tsx
@@ -1,4 +1,5 @@
-import { ReactElement, useContext } from 'react'
+import { ReactElement, useContext, useState } from 'react'
+
import { SwarmSelect } from '../../components/SwarmSelect'
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
@@ -9,11 +10,15 @@ interface Props {
export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactElement {
const { stamps } = useContext(Context)
+ const [selected, setSelected] = useState(defaultValue ?? '')
function onChange(stampId: string) {
+ setSelected(stampId)
+
if (!stamps) {
return
}
+
const stamp = stamps.find(x => x.batchID.toHex() === stampId)
if (stamp) {
@@ -28,7 +33,7 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
value: x.batchID.toHex(),
}))}
onChange={event => onChange(event.target.value as string)}
- defaultValue={defaultValue}
+ value={selected}
placeholder="Please select a postage stamp..."
/>
)
diff --git a/src/pages/stamps/PostageStampStandardCreation.tsx b/src/pages/stamps/PostageStampStandardCreation.tsx
index b352669..09523ff 100644
--- a/src/pages/stamps/PostageStampStandardCreation.tsx
+++ b/src/pages/stamps/PostageStampStandardCreation.tsx
@@ -1,10 +1,11 @@
-import { Box, Button, Grid, Slider, Typography } from '@material-ui/core'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
import { Duration, PostageBatchOptions, Size, Utils } from '@ethersphere/bee-js'
+import { Box, Button, Grid, Slider, Typography } from '@mui/material'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useState } from 'react'
import { Link } from 'react-router-dom'
import Check from 'remixicon-react/CheckLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
import { SwarmButton } from '../../components/SwarmButton'
import { SwarmTextInput } from '../../components/SwarmTextInput'
import { Context as SettingsContext } from '../../providers/Settings'
@@ -15,26 +16,24 @@ import { secondsToTimeString } from '../../utils'
interface Props {
onFinished: () => void
}
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- link: {
- color: '#dd7700',
- textDecoration: 'underline',
- '&:hover': {
- textDecoration: 'none',
+const useStyles = makeStyles()(theme => ({
+ link: {
+ color: '#dd7700',
+ textDecoration: 'underline',
+ '&:hover': {
+ textDecoration: 'none',
- // https://github.com/mui-org/material-ui/issues/22543
- '@media (hover: none)': {
- textDecoration: 'none',
- },
+ // https://github.com/mui-org/material-ui/issues/22543
+ '@media (hover: none)': {
+ textDecoration: 'none',
},
},
- buttonSelected: {
- color: 'white',
- backgroundColor: theme.palette.primary.main,
- },
- }),
-)
+ },
+ buttonSelected: {
+ color: 'white',
+ backgroundColor: theme.palette.primary.main,
+ },
+}))
const marks = [
{ value: 1, label: '1 day' },
@@ -42,7 +41,7 @@ const marks = [
]
export function PostageStampStandardCreation({ onFinished }: Props): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
const { refresh } = useContext(StampsContext)
const { beeApi } = useContext(SettingsContext)
@@ -100,7 +99,8 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
await refresh()
onFinished()
} catch (e) {
- console.error(e) // eslint-disable-line
+ // eslint-disable-next-line no-console
+ console.error(e)
enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
}
setSubmitting(false)
@@ -139,7 +139,7 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
-
+
-
+
-
+
-
+
-
+
Advanced mode
diff --git a/src/pages/stamps/SelectPostageStampModal.tsx b/src/pages/stamps/SelectPostageStampModal.tsx
index bdb377d..1ddad2e 100644
--- a/src/pages/stamps/SelectPostageStampModal.tsx
+++ b/src/pages/stamps/SelectPostageStampModal.tsx
@@ -1,10 +1,11 @@
-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'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import { Check, Clear } from '@material-ui/icons'
+import { Check, Clear } from '@mui/icons-material'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
import { ReactElement, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import { SwarmSelect } from '../../components/SwarmSelect'
import { EnrichedPostageBatch } from '../../providers/Stamps'
@@ -15,28 +16,26 @@ interface Props {
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',
- },
- hint: {
- marginBottom: '16px',
- },
- }),
-)
+const useStyles = makeStyles()(theme => ({
+ dialog: {
+ background: theme.palette.background.default,
+ borderRadius: 0,
+ width: '100%',
+ maxWidth: '890px',
+ },
+ title: {
+ color: '#606060',
+ textAlign: 'center',
+ },
+ hint: {
+ marginBottom: '16px',
+ },
+}))
export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): ReactElement {
const [selectedStamp, setSelectedStamp] = useState(null)
- const classes = useStyles()
+ const { classes } = useStyles()
function onChange(stampId: string) {
const stamp = stamps.find(x => x.batchID.toHex() === stampId)
diff --git a/src/pages/stamps/StampsTable.tsx b/src/pages/stamps/StampsTable.tsx
index 6304459..f4f7ecf 100644
--- a/src/pages/stamps/StampsTable.tsx
+++ b/src/pages/stamps/StampsTable.tsx
@@ -1,6 +1,7 @@
import { ReactElement, useContext } from 'react'
import TimerFlashFill from 'remixicon-react/TimerFlashFillIcon'
import TimerFlashLine from 'remixicon-react/TimerFlashLineIcon'
+
import ExpandableElement from '../../components/ExpandableElement'
import ExpandableList from '../../components/ExpandableList'
import ExpandableListItem from '../../components/ExpandableListItem'
@@ -11,6 +12,7 @@ import { Context } from '../../providers/Settings'
import { EnrichedPostageBatch } from '../../providers/Stamps'
import { secondsToTimeString } from '../../utils'
import { getHumanReadableFileSize } from '../../utils/file'
+
import { PostageStamp } from './PostageStamp'
interface Props {
diff --git a/src/pages/stamps/index.tsx b/src/pages/stamps/index.tsx
index 79e7796..f2321b0 100644
--- a/src/pages/stamps/index.tsx
+++ b/src/pages/stamps/index.tsx
@@ -1,33 +1,33 @@
-import { CircularProgress, Container } from '@material-ui/core'
-import { createStyles, makeStyles } from '@material-ui/core/styles'
+import { CircularProgress, Container } from '@mui/material'
import { ReactElement, useContext, useEffect } from 'react'
-import PlusSquare from 'remixicon-react/AddBoxLineIcon'
import { useNavigate } from 'react-router'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
import { SwarmButton } from '../../components/SwarmButton'
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
import { CheckState, Context as BeeContext } from '../../providers/Bee'
import { Context as StampsContext } from '../../providers/Stamps'
import { ROUTES } from '../../routes'
+
import StampsTable from './StampsTable'
-const useStyles = makeStyles(() =>
- createStyles({
- root: {
- width: '100%',
- display: 'grid',
- },
- actions: {
- display: 'flex',
- width: '100%',
- flex: '0 1 auto',
- flexWrap: 'wrap',
- alignItems: 'center',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ root: {
+ width: '100%',
+ display: 'grid',
+ },
+ actions: {
+ display: 'flex',
+ width: '100%',
+ flex: '0 1 auto',
+ flexWrap: 'wrap',
+ alignItems: 'center',
+ },
+}))
export default function Stamp(): ReactElement {
- const classes = useStyles()
+ const { classes } = useStyles()
const navigate = useNavigate()
diff --git a/src/pages/status/SetupSteps/ChequebookDeployFund.tsx b/src/pages/status/SetupSteps/ChequebookDeployFund.tsx
index 6ef3176..895ec6b 100644
--- a/src/pages/status/SetupSteps/ChequebookDeployFund.tsx
+++ b/src/pages/status/SetupSteps/ChequebookDeployFund.tsx
@@ -1,5 +1,6 @@
import type { ReactElement, ReactNode } from 'react'
import { useContext } from 'react'
+
import ExpandableList from '../../../components/ExpandableList'
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
diff --git a/src/pages/status/SetupSteps/NodeConnectionCheck.tsx b/src/pages/status/SetupSteps/NodeConnectionCheck.tsx
index 6e47037..46afbde 100644
--- a/src/pages/status/SetupSteps/NodeConnectionCheck.tsx
+++ b/src/pages/status/SetupSteps/NodeConnectionCheck.tsx
@@ -1,13 +1,13 @@
import { ReactElement, useContext } from 'react'
import CodeBlockTabs from '../../../components/CodeBlockTabs'
-import { Context as SettingsContext } from '../../../providers/Settings'
import ExpandableList from '../../../components/ExpandableList'
import ExpandableListItem from '../../../components/ExpandableListItem'
-import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
import StatusIcon from '../../../components/StatusIcon'
import { CheckState, Context } from '../../../providers/Bee'
+import { Context as SettingsContext } from '../../../providers/Settings'
export default function NodeConnectionCheck(): ReactElement | null {
const { setApiUrl, apiUrl, isDesktop } = useContext(SettingsContext)
diff --git a/src/pages/status/SetupSteps/PeerConnection.tsx b/src/pages/status/SetupSteps/PeerConnection.tsx
index 2a903fa..dfe5492 100644
--- a/src/pages/status/SetupSteps/PeerConnection.tsx
+++ b/src/pages/status/SetupSteps/PeerConnection.tsx
@@ -1,4 +1,5 @@
import { ReactElement, ReactNode, useContext } from 'react'
+
import ExpandableList from '../../../components/ExpandableList'
import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
import StatusIcon from '../../../components/StatusIcon'
diff --git a/src/pages/status/index.tsx b/src/pages/status/index.tsx
index bc6ddcc..9deb733 100644
--- a/src/pages/status/index.tsx
+++ b/src/pages/status/index.tsx
@@ -1,5 +1,7 @@
import { ReactElement, useContext } from 'react'
+
import { Context } from '../../providers/Settings'
+
import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
import DesktopConnection from './SetupSteps/DesktopConnectionCheck'
import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
diff --git a/src/pages/top-up/Balance.tsx b/src/pages/topUp/Balance.tsx
similarity index 97%
rename from src/pages/top-up/Balance.tsx
rename to src/pages/topUp/Balance.tsx
index e2ec2e1..8e0ba60 100644
--- a/src/pages/top-up/Balance.tsx
+++ b/src/pages/topUp/Balance.tsx
@@ -1,8 +1,9 @@
import { DAI } from '@ethersphere/bee-js'
-import { Box, Grid, Typography } from '@material-ui/core'
+import { Box, Grid, Typography } from '@mui/material'
import { ReactElement, useContext } from 'react'
import { useNavigate } from 'react-router'
import Check from 'remixicon-react/CheckLineIcon'
+
import ExpandableListItem from '../../components/ExpandableListItem'
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
import { HistoryHeader } from '../../components/HistoryHeader'
@@ -11,6 +12,7 @@ import { SwarmButton } from '../../components/SwarmButton'
import { SwarmDivider } from '../../components/SwarmDivider'
import { Context } from '../../providers/Bee'
import { Context as BalanceProvider } from '../../providers/WalletBalance'
+
import { TopUpProgressIndicator } from './TopUpProgressIndicator'
const MINIMUM_XDAI = DAI.fromDecimalString('0.5')
diff --git a/src/pages/top-up/BankCardTopUpIndex.tsx b/src/pages/topUp/BankCardTopUpIndex.tsx
similarity index 94%
rename from src/pages/top-up/BankCardTopUpIndex.tsx
rename to src/pages/topUp/BankCardTopUpIndex.tsx
index 1488839..0ac0172 100644
--- a/src/pages/top-up/BankCardTopUpIndex.tsx
+++ b/src/pages/topUp/BankCardTopUpIndex.tsx
@@ -1,8 +1,10 @@
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
import { ReactElement } from 'react'
-import Balance from './Balance'
+
import { ROUTES } from '../../routes'
+import Balance from './Balance'
+
export function BankCardTopUpIndex(): ReactElement {
return (
- createStyles({
- checkWrapper: {
- background: 'rgba(0, 230, 118, 0.25)',
- borderRadius: 99999,
- width: '180px',
- height: '180px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- },
- }),
-)
+const useStyles = makeStyles()(() => ({
+ checkWrapper: {
+ background: 'rgba(0, 230, 118, 0.25)',
+ borderRadius: 99999,
+ width: '180px',
+ height: '180px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+}))
const MINIMUM_XDAI = DAI.fromDecimalString('0.05')
const MINIMUM_XBZZ = BZZ.fromDecimalString('0.1')
export default function TopUp(): ReactElement {
const navigate = useNavigate()
- const styles = useStyles()
+ const { classes } = useStyles()
const { isDesktop, desktopUrl } = useContext(SettingsContext)
const { nodeInfo, status } = useContext(BeeContext)
const { balance } = useContext(BalanceProvider)
@@ -59,7 +59,8 @@ export default function TopUp(): ReactElement {
await restartBeeNode(desktopUrl)
navigate(ROUTES.RESTART_LIGHT)
} catch (error) {
- console.error(error) // eslint-disable-line
+ // eslint-disable-next-line no-console
+ console.error(error)
enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
}
setLoading(false)
@@ -76,7 +77,7 @@ export default function TopUp(): ReactElement {
Account
-
-
-
- Sepolia JSON RPC
- setSepolia(e.target.value)} style={inputStyle} />
-
-
- Username
- setUsername(e.target.value)} style={inputStyle} />
-
-
- Password
- setPassword(e.target.value)} style={inputStyle} type="password" />
-
-
-
- setRemember(e.target.checked)} />
- Remember me
-
-
-
-
-
- Login
-
-
- Registration
-
-
-
-
-
- )
-}
diff --git a/src/pages/fdp/FdpPod.tsx b/src/pages/fdp/FdpPod.tsx
deleted file mode 100644
index b47797e..0000000
--- a/src/pages/fdp/FdpPod.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { FdpStorage } from '@fairdatasociety/fdp-storage'
-import { useState } from 'react'
-import { CafeReactFs } from '../../react-fs/CafeReactFs'
-import { FsItem, FsItemType } from '../../react-fs/CafeReactType'
-import { joinUrl } from '../../react-fs/Utility'
-
-interface Props {
- fdp: FdpStorage
- name: string
-}
-
-export function FdpPod({ fdp, name }: Props) {
- const [reloader, setReloader] = useState(0)
-
- function reload() {
- setReloader(reloader + 1)
- }
-
- return (
- {children}
-}
diff --git a/src/pages/fdp/Vertical.tsx b/src/pages/fdp/Vertical.tsx
deleted file mode 100644
index 19a7bb6..0000000
--- a/src/pages/fdp/Vertical.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-interface Props {
- children: React.ReactNode
- p?: number
- gap?: number
- left?: boolean
- full?: boolean
-}
-
-export function Vertical({ children, p = 0, gap = 0, left = false, full = false }: Props) {
- const style = {
- display: 'flex',
- flexDirection: 'column' as 'column', //eslint-disable-line
- alignItems: left ? 'flex-start' : 'center',
- gap: `${gap}px`,
- width: full ? '100%' : 'auto',
- padding: `${p}px`,
- }
-
- return {children}
-}
diff --git a/src/pages/fdp/index.tsx b/src/pages/fdp/index.tsx
deleted file mode 100644
index cac4b4c..0000000
--- a/src/pages/fdp/index.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { FdpStorage } from '@fairdatasociety/fdp-storage'
-import { Pod } from '@fairdatasociety/fdp-storage/dist/pod/types'
-import { CircularProgress, Typography } from '@material-ui/core'
-import { Bee, MantarayNode } from '@ethersphere/bee-js'
-import { useSnackbar } from 'notistack'
-import { ReactElement, useEffect, useState } from 'react'
-import ImportIcon from 'remixicon-react/AddBoxLineIcon'
-import PlusCircle from 'remixicon-react/AddCircleLineIcon'
-import { SwarmButton } from '../../components/SwarmButton'
-import { joinUrl } from '../../react-fs/Utility'
-import { FdpLogin } from './FdpLogin'
-import { FdpPods } from './FdpPods'
-import { Horizontal } from './Horizontal'
-import { Vertical } from './Vertical'
-
-async function makeFdp(): Promise
+
+ )
+}
+
+function InitializationErrorBlock({ onOk }: { onOk: () => void }) {
+ return (
+
+
+ )
+}
+
+function ResetModalBlock({ cacheHelpUrl, onConfirm }: { cacheHelpUrl: string; onConfirm: () => void }) {
+ return (
+
+
+ Failed to initialize File Manager, reload and try again
+
+
+
+
+
+
+
+ Your File Manager state appears invalid. Please{' '}
+
+ clear the browser cache
+ {' '}
+ and reload the page. Then you can reset the File Manager to continue.
+
+ }
+ confirmLabel="Continue"
+ onConfirm={onConfirm}
+ background={false}
+ />
+
+ )
+}
+
+function InitialModalBlock(props: {
+ resetState: boolean
+ handleVisibility: (isVisible: boolean) => void
+ handleShowError: (flag: boolean, error?: string) => void
+ setIsCreationInProgress: (isCreating: boolean) => void
+}) {
+ return (
+
+
+ )
+}
+
+function LoadingBlock() {
+ return (
+
+
+ )
+}
+
+function ErrorModalBlock({ onClick, label }: { onClick: () => void; label: string }) {
+ return
+
+
+ File manager loading…
+ Please wait a few seconds
+
+ {showConnectionError && fm && (
+ setShowConnectionError(false)}
+ />
+ )}
+
+
+
+
-
- )
+ return
-
+
-
- Failed to initialize File Manager, reload and try again
-
-
-
-
-
-
- Your File Manager state appears invalid. Please{' '}
-
- clear the browser cache
- {' '}
- and reload the page. Then you can reset the File Manager to continue.
-
- }
- confirmLabel="Continue"
- onConfirm={() => {
- setShowResetModal(false)
- }}
- background={false}
- />
-
- )
+ return
- setShowInitialModal(isVisible)}
- handleShowError={(flag: boolean, error?: string) => {
- setShowErrorModal(flag)
+ setShowInitialModal(isVisible)}
+ handleShowError={(flag: boolean, error?: string) => {
+ setShowErrorModal(flag)
- if (error) {
- setErrorMessage(error)
- }
- }}
- setIsCreationInProgress={(isCreating: boolean) => setIsCreationInProgress(isCreating)}
- />
-
+ if (error) setErrorMessage(error)
+ }}
+ setIsCreationInProgress={(isCreating: boolean) => setIsCreationInProgress(isCreating)}
+ />
)
}
if (!fm) {
- return (
-
-
- )
+ return
-
-
- File manager loading…
- Please wait a few seconds
-
- {showConnectionError && fm && (
- setShowConnectionError(false)}
- />
- )}
-
-
-
-
-
-
+
)
diff --git a/src/pages/files/SelectStamp.tsx b/src/pages/files/SelectStamp.tsx
index 0692747..ba2980a 100644
--- a/src/pages/files/SelectStamp.tsx
+++ b/src/pages/files/SelectStamp.tsx
@@ -1,5 +1,6 @@
-import { Button, ListItemIcon, Menu, MenuItem, Typography } from '@material-ui/core'
+import { Button, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material'
import React, { ReactElement } from 'react'
+
import { EnrichedPostageBatch } from '../../providers/Stamps'
interface Props {
diff --git a/src/pages/files/Share.tsx b/src/pages/files/Share.tsx
index a262983..0adb44a 100644
--- a/src/pages/files/Share.tsx
+++ b/src/pages/files/Share.tsx
@@ -1,10 +1,11 @@
-import { Box, Typography } from '@material-ui/core'
-import { Bytes, MantarayNode, NULL_ADDRESS } from '@ethersphere/bee-js'
+import { Bytes } from '@ethersphere/bee-js'
+import { Box, Typography } from '@mui/material'
import { saveAs } from 'file-saver'
import JSZip from 'jszip'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
+
import { HistoryHeader } from '../../components/HistoryHeader'
import { Loading } from '../../components/Loading'
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
@@ -12,7 +13,9 @@ import { META_FILE_NAME } from '../../constants'
import { Context as BeeContext } from '../../providers/Bee'
import { Context as SettingsContext } from '../../providers/Settings'
import { ROUTES } from '../../routes'
-import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { determineHistoryName, LocalStorageKeys, putHistory } from '../../utils/localStorage'
+import { loadManifest } from '../../utils/manifest'
+
import { AssetPreview } from './AssetPreview'
import { AssetSummary } from './AssetSummary'
import { AssetSyncing } from './AssetSyncing'
@@ -23,7 +26,6 @@ export function Share(): ReactElement {
const { status } = useContext(BeeContext)
const { hash } = useParams()
- const reference = hash! // eslint-disable-line
const navigate = useNavigate()
const { enqueueSnackbar } = useSnackbar()
@@ -39,23 +41,12 @@ export function Share(): ReactElement {
const isMountedRef = useRef(true)
async function prepare() {
- if (!beeApi || !status.all) {
+ if (!beeApi || !status.all || !hash) {
return
}
try {
- let manifest = await MantarayNode.unmarshal(beeApi, reference)
- await manifest.loadRecursively(beeApi)
-
- // If the manifest is a feed, resolve it and overwrite the manifest
- await manifest.resolveFeed(beeApi).then(
- async feed =>
- await feed.ifPresentAsync(async feedUpdate => {
- manifest = MantarayNode.unmarshalFromData(feedUpdate.payload.toUint8Array(), NULL_ADDRESS)
- await manifest.loadRecursively(beeApi)
- }),
- )
-
+ const manifest = await loadManifest(beeApi, hash)
const entries = manifest.collectAndMap()
delete entries[META_FILE_NAME]
@@ -73,18 +64,18 @@ export function Share(): ReactElement {
setIndexDocument(indexDocument)
try {
- const remoteMetadata = await beeApi.downloadFile(reference, META_FILE_NAME)
+ const remoteMetadata = await beeApi.downloadFile(hash, META_FILE_NAME)
const formattedMetadata = remoteMetadata.data.toJSON() as Metadata
if (formattedMetadata.isVideo || formattedMetadata.isAudio || formattedMetadata.isImage) {
if (!isMountedRef.current) return
- setPreview(`${apiUrl}/bzz/${reference}`)
+ setPreview(`${apiUrl}/bzz/${hash}`)
}
if (!isMountedRef.current) return
setMetadata({ ...formattedMetadata, hash })
- } catch (e) {
+ } catch {
// if metadata is not available or invalid go with the default one
const count = Object.keys(entries).length
@@ -93,7 +84,7 @@ export function Share(): ReactElement {
setMetadata({
hash,
type: count > 1 ? 'folder' : 'unknown',
- name: reference,
+ name: hash,
count,
isWebsite: Boolean(indexDocument && /.*\.html?$/i.test(indexDocument)),
isVideo: Boolean(indexDocument && /.*\.(mp4|webm|ogv)$/i.test(indexDocument)),
@@ -113,7 +104,7 @@ export function Share(): ReactElement {
}
function onOpen() {
- window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
+ window.open(`${apiUrl}/bzz/${hash}/`, '_blank')
}
function onClose() {
@@ -127,10 +118,19 @@ export function Share(): ReactElement {
}
function onUpdateFeed() {
- navigate(ROUTES.ACCOUNT_FEEDS_UPDATE.replace(':hash', reference))
+ if (!hash) {
+ // eslint-disable-next-line no-console
+ console.error('hash is invalid')
+
+ return
+ }
+
+ navigate(ROUTES.ACCOUNT_FEEDS_UPDATE.replace(':hash', hash))
}
useEffect(() => {
+ isMountedRef.current = true
+
return () => {
isMountedRef.current = false
}
@@ -143,14 +143,17 @@ export function Share(): ReactElement {
setLoading(false)
})
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [reference])
+ }, [hash])
async function onDownload() {
- if (!beeApi) {
+ if (!beeApi || !hash) {
+ // eslint-disable-next-line no-console
+ console.error('hash is invalid')
+
return
}
- putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, reference, determineHistoryName(reference, indexDocument))
+ putHistory(LocalStorageKeys.downloadHistory, hash, determineHistoryName(hash, indexDocument))
setDownloading(true)
if (Object.keys(swarmEntries).length === 1) {
@@ -172,7 +175,7 @@ export function Share(): ReactElement {
const view = new Uint8Array(arrayBuffer)
view.set(dataArray)
const blob = new Blob([arrayBuffer], { type: metadata?.type || 'application/octet-stream' })
- saveAs(blob, metadata?.name || singleFileName || reference)
+ saveAs(blob, metadata?.name || singleFileName || hash)
} else {
const zip = new JSZip()
for (const [path, hash] of Object.entries(swarmEntries)) {
@@ -196,7 +199,7 @@ export function Share(): ReactElement {
return
}
- saveAs(content, reference + '.zip')
+ saveAs(content, hash + '.zip')
}
if (!isMountedRef.current) return
@@ -225,10 +228,10 @@ export function Share(): ReactElement {
-
+
-
- Add File
-
-
- Add Folder
-
-
- Add Website
-
-
-
+
(initialValues)
export const Consumer = Context.Consumer
interface Props {
- children: ReactChild
+ children: ReactNode
}
function getStatus(
@@ -162,12 +174,9 @@ function determineOverallStatus(status: Status, startedAt: number): CheckState {
// This does not need to be exposed and works much better as variable than state variable which may trigger some unnecessary re-renders
let isRefreshing = false
-interface Props {
- children: ReactChild
-}
-
export function Provider({ children }: Props): ReactElement {
const { beeApi } = useContext(SettingsContext)
+
const [beeVersion, setBeeVersion] = useState(null)
const [apiHealth, setApiHealth] = useState(false)
const [nodeAddresses, setNodeAddresses] = useState(null)
@@ -182,42 +191,18 @@ export function Provider({ children }: Props): ReactElement {
const [settlements, setSettlements] = useState(null)
const [chainState, setChainState] = useState(null)
const [walletBalance, setWalletBalance] = useState(null)
- const [startedAt] = useState(Date.now())
+ const [startedAt] = useState(() => Date.now())
const { latestBeeRelease } = useLatestBeeRelease()
const [error, setError] = useState(initialValues.error)
const [isLoading, setIsLoading] = useState(initialValues.isLoading)
const [lastUpdate, setLastUpdate] = useState(initialValues.lastUpdate)
- const [frequency, setFrequency] = useState(30000)
+ const [frequency, setFrequency] = useState(REFRESH_WHEN_OK)
- useEffect(() => {
- setIsLoading(true)
+ const frequencyRef = useRef(frequency)
- setApiHealth(false)
-
- if (beeApi !== null) refresh()
- }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
-
- useEffect(() => {
- setIsLoading(true)
- setNodeAddresses(null)
- setNodeTopology(null)
- setNodeInfo(null)
- setPeers(null)
- setChequebookAddress(null)
- setChequebookBalance(null)
- setPeerBalances(null)
- setPeerCheques(null)
- setSettlements(null)
- setChainState(null)
-
- if (beeApi !== null) {
- refresh()
- }
- }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
-
- const refresh = async () => {
+ const refresh = useCallback(async () => {
// Don't want to refresh when already refreshing
if (isRefreshing) {
return
@@ -325,23 +310,59 @@ export function Provider({ children }: Props): ReactElement {
setIsLoading(false)
isRefreshing = false
setLastUpdate(Date.now())
- }
+ }, [beeApi])
- const start = (freq = REFRESH_WHEN_OK) => {
- refresh()
- setFrequency(freq)
- }
- const stop = () => setFrequency(null)
+ const start = useCallback(
+ (freq = REFRESH_WHEN_OK) => {
+ refresh()
+ setFrequency(freq)
+ },
+ [refresh],
+ )
+ const stop = useCallback(() => setFrequency(null), [])
- const status = getStatus(nodeInfo, apiHealth, topology, chequebookAddress, chequebookBalance, error, startedAt)
+ const status = useMemo(
+ () => getStatus(nodeInfo, apiHealth, topology, chequebookAddress, chequebookBalance, error, startedAt),
+ [nodeInfo, apiHealth, topology, chequebookAddress, chequebookBalance, error, startedAt],
+ )
useEffect(() => {
- let newFrequency = REFRESH_WHEN_OK
+ const setStates = () => {
+ setIsLoading(true)
+ setApiHealth(false)
+ setNodeAddresses(null)
+ setNodeTopology(null)
+ setNodeInfo(null)
+ setPeers(null)
+ setChequebookAddress(null)
+ setChequebookBalance(null)
+ setPeerBalances(null)
+ setPeerCheques(null)
+ setSettlements(null)
+ setChainState(null)
- if (status.all !== 'OK') newFrequency = REFRESH_WHEN_ERROR
+ if (beeApi !== null) {
+ refresh()
+ }
+ }
- if (newFrequency !== frequency) setFrequency(newFrequency)
- }, [status.all, frequency])
+ setStates()
+ }, [beeApi, refresh])
+
+ useEffect(() => {
+ frequencyRef.current = frequency
+ }, [frequency])
+
+ useEffect(() => {
+ const newFrequency = status.all !== CheckState.OK ? REFRESH_WHEN_ERROR : REFRESH_WHEN_OK
+ const setFrequencyState = () => {
+ if (newFrequency !== frequencyRef.current) {
+ setFrequency(newFrequency)
+ }
+ }
+
+ setFrequencyState()
+ }, [status.all])
// Start the update loop
useEffect(() => {
@@ -351,36 +372,58 @@ export function Provider({ children }: Props): ReactElement {
return () => clearInterval(interval)
}
- }, [frequency, beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
+ }, [frequency, beeApi, refresh])
- return (
-
- {children}
-
+ const contextValue = useMemo(
+ () => ({
+ beeVersion,
+ status,
+ error,
+ apiHealth,
+ nodeAddresses,
+ nodeInfo,
+ topology,
+ chequebookAddress,
+ peers,
+ chequebookBalance,
+ stake,
+ peerBalances,
+ peerCheques,
+ settlements,
+ chainState,
+ walletBalance,
+ latestBeeRelease,
+ isLoading,
+ lastUpdate,
+ start,
+ stop,
+ refresh,
+ }),
+ [
+ beeVersion,
+ status,
+ error,
+ apiHealth,
+ nodeAddresses,
+ nodeInfo,
+ topology,
+ chequebookAddress,
+ peers,
+ chequebookBalance,
+ stake,
+ peerBalances,
+ peerCheques,
+ settlements,
+ chainState,
+ walletBalance,
+ latestBeeRelease,
+ isLoading,
+ lastUpdate,
+ start,
+ stop,
+ refresh,
+ ],
)
+
+ return {children}
}
diff --git a/src/providers/Feeds.tsx b/src/providers/Feeds.tsx
index d0e5e71..1da0120 100644
--- a/src/providers/Feeds.tsx
+++ b/src/providers/Feeds.tsx
@@ -1,6 +1,11 @@
-import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
+import { createContext, ReactElement, ReactNode, useEffect, useState } from 'react'
-export type IdentityType = 'V3' | 'PRIVATE_KEY'
+import { LocalStorageKeys } from '../utils/localStorage'
+
+export enum IdentityType {
+ V3 = 'V3',
+ PrivateKey = 'PRIVATE_KEY',
+}
export interface Identity {
uuid: string
@@ -18,14 +23,14 @@ interface ContextInterface {
const initialValues: ContextInterface = {
identities: [],
- setIdentities: () => {}, // eslint-disable-line
+ setIdentities: () => {},
}
export const Context = createContext(initialValues)
export const Consumer = Context.Consumer
interface Props {
- children: ReactChild
+ children: ReactNode
}
export function Provider({ children }: Props): ReactElement {
@@ -33,11 +38,11 @@ export function Provider({ children }: Props): ReactElement {
useEffect(() => {
try {
- setIdentities(JSON.parse(localStorage.getItem('feeds') || '[]'))
+ setIdentities(JSON.parse(localStorage.getItem(LocalStorageKeys.feeds) || '[]'))
} catch {
setIdentities([])
}
- }, []) // eslint-disable-line react-hooks/exhaustive-deps
+ }, [setIdentities])
return {children}
}
diff --git a/src/providers/File.tsx b/src/providers/File.tsx
index 513a91b..d0617e9 100644
--- a/src/providers/File.tsx
+++ b/src/providers/File.tsx
@@ -1,13 +1,14 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
+import { createContext, ReactElement, ReactNode, useEffect, useState } from 'react'
-import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'
+import { PREVIEW_DIMENSIONS } from '../constants'
import { getMetadata } from '../utils/file'
import { resize } from '../utils/image'
-import { PREVIEW_DIMENSIONS } from '../constants'
-export type UploadOrigin = { origin: 'UPLOAD' | 'FEED'; uuid?: string }
+import { FileOrigin } from '@/pages/files/FileNavigation'
-export const defaultUploadOrigin: UploadOrigin = { origin: 'UPLOAD' }
+export type UploadOrigin = { origin: FileOrigin.Upload | FileOrigin.Feed; uuid?: string }
+
+export const defaultUploadOrigin: UploadOrigin = { origin: FileOrigin.Upload }
interface ContextInterface {
files: FilePath[]
@@ -30,7 +31,7 @@ export const Context = createContext(initialValues)
export const Consumer = Context.Consumer
interface Props {
- children: ReactChild
+ children: ReactNode
}
export function Provider({ children }: Props): ReactElement {
diff --git a/src/providers/FileManager.tsx b/src/providers/FileManager.tsx
index 0d026e4..fb7df02 100644
--- a/src/providers/FileManager.tsx
+++ b/src/providers/FileManager.tsx
@@ -1,12 +1,13 @@
-import { createContext, useCallback, useContext, useState, ReactNode, useEffect } from 'react'
import { Bee, PostageBatch } from '@ethersphere/bee-js'
import type { FileInfo } from '@solarpunkltd/file-manager-lib'
-import { FileManagerBase, FileManagerEvents } from '@solarpunkltd/file-manager-lib'
-import { Context as SettingsContext } from './Settings'
-import { DriveInfo } from '@solarpunkltd/file-manager-lib'
-import { getSignerPk } from '../modules/filemanager/utils/common'
+import { DriveInfo, FileManagerBase, FileManagerEvents } from '@solarpunkltd/file-manager-lib'
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+
import { FILE_MANAGER_EVENTS } from '../modules/filemanager/constants/common'
import { getUsableStamps } from '../modules/filemanager/utils/bee'
+import { getSignerPk } from '../modules/filemanager/utils/common'
+
+import { Context as SettingsContext } from './Settings'
interface ContextInterface {
fm: FileManagerBase | null
@@ -39,13 +40,15 @@ const initialValues: ContextInterface = {
initializationError: false,
showError: false,
shallReset: false,
- setCurrentDrive: () => {}, // eslint-disable-line
- setCurrentStamp: () => {}, // eslint-disable-line
- resync: async () => {}, // eslint-disable-line
- init: async () => null, // eslint-disable-line
- setShowError: () => {}, // eslint-disable-line
- syncDrives: async () => {}, // eslint-disable-line
- refreshStamp: async () => undefined, // eslint-disable-line
+ setCurrentDrive: () => {},
+ setCurrentStamp: () => {},
+ resync: async () => {},
+ // eslint-disable-next-line require-await
+ init: async () => null,
+ setShowError: () => {},
+ syncDrives: async () => {},
+ // eslint-disable-next-line require-await
+ refreshStamp: async () => undefined,
}
export const Context = createContext(initialValues)
@@ -82,6 +85,8 @@ const findDrives = (
}
export function Provider({ children }: Props) {
+ const initInProgressRef = useRef(false)
+
const { apiUrl, beeApi } = useContext(SettingsContext)
const [fm, setFm] = useState(null)
@@ -193,22 +198,30 @@ export function Provider({ children }: Props) {
}
}, [fm, syncDrives])
- // no useCallback is needed because it caches the stamp
- const refreshStamp = async (batchId: string): Promise => {
- const usableStamps = await getUsableStamps(beeApi)
- const refreshedStamp = usableStamps.find(s => s.batchID.toString() === batchId)
+ const refreshStamp = useCallback(
+ async (batchId: string): Promise => {
+ const usableStamps = await getUsableStamps(beeApi)
+ const refreshedStamp = usableStamps.find(s => s.batchID.toString() === batchId)
- if (currentStamp && currentStamp.batchID.toString() === batchId && refreshedStamp) {
- setCurrentStamp(refreshedStamp)
- }
+ setCurrentStamp(prev => {
+ if (prev && prev.batchID.toString() === batchId && refreshedStamp) {
+ return refreshedStamp
+ }
- return refreshedStamp
- }
+ return prev
+ })
+
+ return refreshedStamp
+ },
+ [beeApi],
+ )
const init = useCallback(async (): Promise => {
const pk = getSignerPk()
- if (!apiUrl || !pk) return null
+ if (!apiUrl || !pk || initInProgressRef.current) return null
+
+ initInProgressRef.current = true
setFm(null)
setFiles([])
@@ -235,7 +248,6 @@ export function Provider({ children }: Props) {
}
setFm(manager)
- syncDrives(manager)
syncFiles(manager)
}
}
@@ -290,8 +302,10 @@ export function Provider({ children }: Props) {
await manager.initialize()
return manager
- } catch (error) {
+ } catch {
return null
+ } finally {
+ initInProgressRef.current = false
}
}, [apiUrl, syncDrives, syncFiles])
@@ -305,18 +319,17 @@ export function Provider({ children }: Props) {
const refreshedDrive = manager.driveList.find(d => d.id.toString() === prevDriveId)
setCurrentDrive(refreshedDrive)
- const isValidCurrentStamp = (await getUsableStamps(beeApi)).find(
- s => s.batchID.toString() === prevStamp?.batchID.toString(),
- )
+ const uStamps: PostageBatch[] = await getUsableStamps(beeApi)
+ const isValidCurrentStamp = uStamps.find(s => s.batchID.toString() === prevStamp?.batchID.toString())
setCurrentStamp(isValidCurrentStamp)
}
- }, [currentDrive?.id, currentStamp, init, setCurrentDrive, setCurrentStamp, beeApi])
+ }, [currentDrive?.id, currentStamp, init, beeApi])
useEffect(() => {
const pk = getSignerPk()
- if (!pk || fm) return
+ if (!pk || fm || initInProgressRef.current) return
const initFromLocalState = async () => {
await init()
@@ -325,29 +338,52 @@ export function Provider({ children }: Props) {
initFromLocalState()
}, [fm, init])
- return (
-
- {children}
-
+ useEffect(() => {
+ if (fm && drives.length === 0 && !adminDrive) {
+ syncDrives(fm)
+ }
+ }, [fm, drives.length, adminDrive, syncDrives])
+
+ const contextValue = useMemo(
+ () => ({
+ fm,
+ files,
+ currentDrive,
+ currentStamp,
+ drives,
+ expiredDrives,
+ adminDrive,
+ initializationError,
+ showError,
+ shallReset,
+ setCurrentDrive,
+ setCurrentStamp,
+ resync,
+ init,
+ setShowError,
+ syncDrives: syncDrivesPublic,
+ refreshStamp,
+ }),
+ [
+ fm,
+ files,
+ currentDrive,
+ currentStamp,
+ drives,
+ expiredDrives,
+ adminDrive,
+ initializationError,
+ showError,
+ shallReset,
+ setCurrentDrive,
+ setCurrentStamp,
+ resync,
+ init,
+ setShowError,
+ syncDrivesPublic,
+ refreshStamp,
+ ],
)
+
+ return {children}
}
diff --git a/src/providers/Platform.tsx b/src/providers/Platform.tsx
index c4e310d..b9eff42 100644
--- a/src/providers/Platform.tsx
+++ b/src/providers/Platform.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'
+import { createContext, ReactElement, ReactNode, useState } from 'react'
// These need to be numeric values as they are used as indexes in the TabsContainer
export enum Platforms {
@@ -21,14 +21,14 @@ interface ContextInterface {
const initialValues: ContextInterface = {
platform: SupportedPlatforms.macOS,
- setPlatform: () => {}, // eslint-disable-line
+ setPlatform: () => {},
}
export const Context = createContext(initialValues)
export const Consumer = Context.Consumer
interface Props {
- children: ReactChild
+ children: ReactNode
}
function isSupportedPlatform(platform: unknown): platform is SupportedPlatforms {
@@ -37,20 +37,16 @@ function isSupportedPlatform(platform: unknown): platform is SupportedPlatforms
function getOS(): Platforms | null {
const userAgent = window.navigator.userAgent
- const platform = window.navigator.platform
- const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']
- const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
- const iosPlatforms = ['iPhone', 'iPad', 'iPod']
- if (macosPlatforms.includes(platform)) return Platforms.macOS
+ if (/Macintosh|MacIntel|MacPPC|Mac68K/.test(userAgent)) return Platforms.macOS
- if (iosPlatforms.includes(platform)) return Platforms.iOS
+ if (/iPhone|iPad|iPod/.test(userAgent)) return Platforms.iOS
- if (windowsPlatforms.includes(platform)) return Platforms.Windows
+ if (/Win32|Win64|Windows|WinCE/.test(userAgent)) return Platforms.Windows
if (/Android/.test(userAgent)) return Platforms.Android
- if (/Linux/.test(platform)) return Platforms.Linux
+ if (/Linux/.test(userAgent)) return Platforms.Linux
return null
}
@@ -92,14 +88,11 @@ export const cacheClearUrls = {
}
export function Provider({ children }: Props): ReactElement {
- const [platform, setPlatform] = useState(SupportedPlatforms.Linux)
-
- // This is in useEffect as it really just needs to run once and not on each re-render
- useEffect(() => {
+ const [platform, setPlatform] = useState(() => {
const os = getOS()
- setPlatform(isSupportedPlatform(os) ? os : SupportedPlatforms.Linux)
- }, [])
+ return isSupportedPlatform(os) ? os : SupportedPlatforms.Linux
+ })
return {children}
}
diff --git a/src/providers/Settings.tsx b/src/providers/Settings.tsx
index 6d51302..5f6aa0f 100644
--- a/src/providers/Settings.tsx
+++ b/src/providers/Settings.tsx
@@ -1,12 +1,11 @@
import { Bee } from '@ethersphere/bee-js'
-import { providers } from 'ethers'
-import { ReactElement, ReactNode, createContext, useEffect, useState } from 'react'
+import { JsonRpcProvider } from 'ethers'
+import { createContext, ReactElement, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+
import { DEFAULT_BEE_API_HOST, DEFAULT_RPC_URL } from '../constants'
import { useGetBeeConfig } from '../hooks/apiHooks'
-
-const LocalStorageKeys = {
- providerUrl: 'json-rpc-provider',
-}
+import { newGnosisProvider } from '../utils/chain'
+import { LocalStorageKeys } from '../utils/localStorage'
interface ContextInterface {
apiUrl: string
@@ -16,7 +15,7 @@ interface ContextInterface {
isDesktop: boolean
desktopUrl: string
rpcProviderUrl: string
- rpcProvider: providers.JsonRpcProvider | null
+ rpcProvider: JsonRpcProvider | null
cors: string | null
dataDir: string | null
ensResolver: string | null
@@ -29,12 +28,12 @@ interface ContextInterface {
const initialValues: ContextInterface = {
beeApi: null,
apiUrl: DEFAULT_BEE_API_HOST,
- setApiUrl: () => {}, // eslint-disable-line
+ setApiUrl: () => {},
lockedApiSettings: false,
isDesktop: false,
desktopApiKey: '',
desktopUrl: window.location.origin,
- setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
+ setAndPersistJsonRpcProvider: async () => {},
rpcProviderUrl: '',
rpcProvider: null,
cors: null,
@@ -66,12 +65,13 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
localStorage.getItem(LocalStorageKeys.providerUrl) || propsSettings.defaultRpcUrl || DEFAULT_RPC_URL
const [apiUrl, setApiUrl] = useState(
- localStorage.getItem('api_host') ?? propsSettings.beeApiUrl ?? initialValues.apiUrl,
+ localStorage.getItem(LocalStorageKeys.apiHost) ?? propsSettings.beeApiUrl ?? initialValues.apiUrl,
)
const [beeApi, setBeeApi] = useState(null)
const [desktopApiKey, setDesktopApiKey] = useState(initialValues.desktopApiKey)
const [rpcProviderUrl, setRpcProviderUrl] = useState(propsProviderUrl)
- const [rpcProvider, setRpcProvider] = useState(new providers.JsonRpcProvider(propsProviderUrl))
+ const [rpcProvider, setRpcProvider] = useState(newGnosisProvider(propsProviderUrl))
+
const { config, isLoading, error } = useGetBeeConfig(desktopUrl)
useEffect(() => {
@@ -79,56 +79,80 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
const newApiKey = urlSearchParams.get('v')
if (newApiKey) {
- localStorage.setItem('apiKey', newApiKey)
+ localStorage.setItem(LocalStorageKeys.apiKey, newApiKey)
window.location.search = ''
setDesktopApiKey(newApiKey)
}
}, [])
useEffect(() => {
- const url = makeHttpUrl(localStorage.getItem('api_host') ?? config?.['api-addr'] ?? apiUrl)
- try {
- setBeeApi(new Bee(url))
- } catch (e) {
- setBeeApi(null)
+ const url = makeHttpUrl(localStorage.getItem(LocalStorageKeys.apiHost) ?? config?.['api-addr'] ?? apiUrl)
+
+ const setBeeApiState = () => {
+ try {
+ setBeeApi(new Bee(url))
+ } catch {
+ setBeeApi(null)
+ }
}
+
+ setBeeApiState()
}, [config, apiUrl])
- const updateApiUrl = (url: string) => {
+ const updateApiUrl = useCallback((url: string) => {
const userProvidedUrl = makeHttpUrl(url)
try {
setBeeApi(new Bee(userProvidedUrl))
- localStorage.setItem('api_host', userProvidedUrl)
+ localStorage.setItem(LocalStorageKeys.apiHost, userProvidedUrl)
setApiUrl(userProvidedUrl)
- } catch (e) {
+ } catch (_) {
setBeeApi(null)
}
- }
+ }, [])
- return (
-
- {children}
-
+ const setAndPersistJsonRpcProvider = useCallback((providerUrl: string) => {
+ localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
+ setRpcProviderUrl(providerUrl)
+ setRpcProvider(newGnosisProvider(providerUrl))
+ }, [])
+
+ const contextValue = useMemo(
+ () => ({
+ apiUrl,
+ beeApi,
+ setApiUrl: updateApiUrl,
+ lockedApiSettings: Boolean(propsSettings.lockedApiSettings),
+ desktopApiKey,
+ isDesktop,
+ desktopUrl,
+ rpcProvider,
+ rpcProviderUrl,
+ cors: config?.['cors-allowed-origins'] ?? null,
+ dataDir: config?.['data-dir'] ?? null,
+ ensResolver: config?.['resolver-options'] ?? null,
+ setAndPersistJsonRpcProvider,
+ isLoading,
+ error,
+ }),
+ [
+ apiUrl,
+ beeApi,
+ updateApiUrl,
+ propsSettings.lockedApiSettings,
+ desktopApiKey,
+ isDesktop,
+ desktopUrl,
+ rpcProvider,
+ rpcProviderUrl,
+ config,
+ setAndPersistJsonRpcProvider,
+ isLoading,
+ error,
+ ],
)
+
+ return {children}
}
function makeHttpUrl(string: string): string {
@@ -138,14 +162,3 @@ function makeHttpUrl(string: string): string {
return string
}
-
-function setAndPersistJsonRpcProviderClosure(
- setProviderUrl: (url: string) => void,
- setProvider: (prov: providers.JsonRpcProvider) => void,
-) {
- return (providerUrl: string) => {
- localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
- setProviderUrl(providerUrl)
- setProvider(new providers.JsonRpcProvider(providerUrl))
- }
-}
diff --git a/src/providers/Stamps.tsx b/src/providers/Stamps.tsx
index cc8fd69..4c3e742 100644
--- a/src/providers/Stamps.tsx
+++ b/src/providers/Stamps.tsx
@@ -1,7 +1,10 @@
import { PostageBatch } from '@ethersphere/bee-js'
-import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
+import { createContext, ReactElement, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
+
import { Context as SettingsContext } from './Settings'
+const DEFAULT_REFRESH_REQUENCY_MS = 30_000
+
export interface EnrichedPostageBatch extends PostageBatch {
usage: number
usageText: string
@@ -22,8 +25,8 @@ const initialValues: ContextInterface = {
error: null,
isLoading: false,
lastUpdate: null,
- start: () => {}, // eslint-disable-line
- stop: () => {}, // eslint-disable-line
+ start: () => {},
+ stop: () => {},
refresh: () => Promise.reject(),
}
@@ -31,7 +34,7 @@ export const Context = createContext(initialValues)
export const Consumer = Context.Consumer
interface Props {
- children: ReactChild
+ children: ReactNode
}
export function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
@@ -55,18 +58,20 @@ export function Provider({ children }: Props): ReactElement {
const [lastUpdate, setLastUpdate] = useState(initialValues.lastUpdate)
const [frequency, setFrequency] = useState(null)
- const refresh = async () => {
- if (isLoading) {
- return
- }
+ const isLoadingRef = useRef(isLoading)
- if (!beeApi) {
+ useEffect(() => {
+ isLoadingRef.current = isLoading
+ }, [isLoading])
+
+ const refresh = useCallback(async () => {
+ if (isLoadingRef.current || !beeApi) {
return
}
try {
setIsLoading(true)
- const stamps = await beeApi.getAllPostageBatch()
+ const stamps = await beeApi.getPostageBatches()
setStamps(stamps.map(enrichStamp))
setLastUpdate(Date.now())
@@ -76,22 +81,24 @@ export function Provider({ children }: Props): ReactElement {
} finally {
setIsLoading(false)
}
- }
+ }, [beeApi])
- const start = (freq = 30000) => setFrequency(freq)
+ const start = (freq = DEFAULT_REFRESH_REQUENCY_MS) => setFrequency(freq)
const stop = () => setFrequency(null)
- // Start the update loop
useEffect(() => {
- refresh()
+ if (beeApi) {
+ refresh()
+ }
+ }, [beeApi, refresh])
- // Start autorefresh only if the frequency is set
+ useEffect(() => {
if (frequency) {
const interval = setInterval(refresh, frequency)
return () => clearInterval(interval)
}
- }, [frequency]) // eslint-disable-line react-hooks/exhaustive-deps
+ }, [frequency, refresh])
return (
diff --git a/src/providers/TopUp.tsx b/src/providers/TopUp.tsx
index 1d8a340..4b1ed41 100644
--- a/src/providers/TopUp.tsx
+++ b/src/providers/TopUp.tsx
@@ -1,12 +1,9 @@
import { Wallet } from 'ethers'
-import { createContext, ReactElement, useContext, useEffect, useState } from 'react'
-import { Context as SettingsContext } from './Settings'
+import { createContext, ReactElement, useCallback, useContext, useEffect, useState } from 'react'
-const LocalStorageKeys = {
- depositWallet: 'deposit-wallet',
- giftWallets: 'gift-wallets',
- invitation: 'invitation',
-}
+import { LocalStorageKeys } from '../utils/localStorage'
+
+import { Context as SettingsContext } from './Settings'
interface ContextInterface {
giftWallets: Wallet[]
@@ -15,7 +12,7 @@ interface ContextInterface {
const initialValues: ContextInterface = {
giftWallets: [],
- addGiftWallet: () => {}, // eslint-disable-line
+ addGiftWallet: () => {},
}
export const Context = createContext(initialValues)
@@ -39,11 +36,14 @@ export function Provider({ children }: Props): ReactElement {
}
}, [rpcProvider])
- function addGiftWallet(wallet: Wallet) {
- const newArray = [...giftWallets, wallet]
- localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.privateKey)))
- setGiftWallets(newArray)
- }
+ const addGiftWallet = useCallback((wallet: Wallet) => {
+ setGiftWallets(prev => {
+ const newArray = [...prev, wallet]
+ localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.privateKey)))
+
+ return newArray
+ })
+ }, [])
return (
{}, // eslint-disable-line
- stop: () => {}, // eslint-disable-line
+ start: () => {},
+ stop: () => {},
refresh: () => Promise.reject(),
}
@@ -27,18 +39,31 @@ export const Context = createContext(initialValues)
export const Consumer = Context.Consumer
interface Props {
- children: ReactChild
+ children: ReactNode
}
+const DEFAULT_REFRESH_REQUENCY_MS = 30_000
+
export function Provider({ children }: Props): ReactElement {
const { rpcProvider } = useContext(SettingsContext)
const { nodeAddresses } = useContext(BeeContext)
const [balance, setBalance] = useState(initialValues.balance)
const [error, setError] = useState(initialValues.error)
const [isLoading, setIsLoading] = useState(initialValues.isLoading)
+
+ const balanceRef = useRef(balance)
+ const isLoadingRef = useRef(isLoading)
const [lastUpdate, setLastUpdate] = useState(initialValues.lastUpdate)
const [frequency, setFrequency] = useState(null)
+ useEffect(() => {
+ balanceRef.current = balance
+ }, [balance])
+
+ useEffect(() => {
+ isLoadingRef.current = isLoading
+ }, [isLoading])
+
useEffect(() => {
if (nodeAddresses?.ethereum && rpcProvider) {
WalletAddress.make(nodeAddresses.ethereum.toHex(), rpcProvider).then(setBalance)
@@ -47,26 +72,26 @@ export function Provider({ children }: Props): ReactElement {
}
}, [nodeAddresses, rpcProvider])
- const refresh = async () => {
+ const refresh = useCallback(async () => {
// Don't want to refresh when already refreshing
- if (isLoading) return
+ if (isLoadingRef.current) return
- if (!balance) return
+ if (!balanceRef.current) return
try {
setIsLoading(true)
- setBalance(await balance.refresh())
+ setBalance(await balanceRef.current.refresh())
setLastUpdate(Date.now())
} catch (e) {
setError(e as Error)
} finally {
setIsLoading(false)
}
- }
+ }, [])
- const start = (freq = 30000) => setFrequency(freq)
- const stop = () => setFrequency(null)
+ const start = useCallback((freq = DEFAULT_REFRESH_REQUENCY_MS) => setFrequency(freq), [])
+ const stop = useCallback(() => setFrequency(null), [])
// Start the update loop
useEffect(() => {
@@ -78,11 +103,20 @@ export function Provider({ children }: Props): ReactElement {
return () => clearInterval(interval)
}
- }, [frequency]) // eslint-disable-line react-hooks/exhaustive-deps
+ }, [frequency, refresh])
- return (
-
- {children}
-
+ const contextValue = useMemo(
+ () => ({
+ balance,
+ error,
+ isLoading,
+ lastUpdate,
+ start,
+ stop,
+ refresh,
+ }),
+ [balance, error, isLoading, lastUpdate, start, stop, refresh],
)
+
+ return {children}
}
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index c570ec5..238744b 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1,4 +1,19 @@
-///
- list: (path: string) => Promise
- onUpload: (path: string) => Promise
- onCreateDirectory: (path: string) => Promise
- onDeleteFile: (path: string) => Promise
- onDeleteDirectory: (path: string) => Promise
- onSync: () => Promise
- reloader: number
- backgroundColor?: string
- rootAlias?: string
-}
-
-export function CafeReactFs({
- download,
- list,
- onUpload,
- onCreateDirectory,
- onDeleteFile,
- onDeleteDirectory,
- onSync,
- reloader,
- backgroundColor,
- rootAlias,
-}: Props) {
- const [path, setPath] = useState('/')
- const [items, setItems] = useState([])
- const [loading, setLoading] = useState(false)
-
- function setItemsSorted(items: FsItem[]) {
- // directories first, all alphabetically
- const sortedItems = items.slice().sort((a, b) => {
- if (a.$type === b.$type) {
- return a.name.localeCompare(b.name)
- }
-
- return a.$type === 'directory' ? -1 : 1
- })
- setItems(sortedItems)
- }
-
- useEffect(() => {
- setLoading(true)
- list(path)
- .then(setItemsSorted)
- .finally(() => setLoading(false))
- }, [reloader, list, path])
-
- const pathParts = ['/', ...path.split('/').filter(x => x)]
-
- function jumpToDirectory(fullPath: string) {
- setPath(fullPath)
- setLoading(true)
- list(fullPath)
- .then(setItemsSorted)
- .finally(() => setLoading(false))
- }
-
- function enterDirectory(name: string) {
- const newPath = path.endsWith('/') ? `${path}${name}` : `${path}/${name}`
- setPath(newPath)
- setLoading(true)
- list(newPath)
- .then(setItemsSorted)
- .finally(() => setLoading(false))
- }
-
- return (
-
-}
-
-export function CafeReactFsCreate({ backgroundColor, onCreateDirectory }: Props) {
- const [loading, setLoading] = useState(false)
-
- function proxyUpload() {
- setLoading(true)
- onCreateDirectory().finally(() => setLoading(false))
- }
-
- if (loading) {
- return
-}
-
-export function CafeReactFsDelete({ onDelete }: Props) {
- return (
- 
{
- onDelete()
- event.stopPropagation()
- }}
- />
- )
-}
diff --git a/src/react-fs/CafeReactFsDirectory.tsx b/src/react-fs/CafeReactFsDirectory.tsx
deleted file mode 100644
index 4b573be..0000000
--- a/src/react-fs/CafeReactFsDirectory.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useState } from 'react'
-import { CafeReactFsDelete } from './CafeReactFsDelete'
-import { CafeReactFsLoading } from './CafeReactFsLoading'
-import { CafeReactFsName } from './CafeReactFsName'
-import { VirtualDirectory } from './CafeReactType'
-
-interface Props {
- directory: VirtualDirectory
- enterDirectory: (name: string) => void
- deleteDirectory: (name: string) => Promise
- backgroundColor: string
-}
-
-export function CafeReactFsDirectory({ directory, enterDirectory, deleteDirectory, backgroundColor }: Props) {
- const [hovered, setHovered] = useState(false)
- const [loading, setLoading] = useState(false)
-
- function proxyDelete() {
- setLoading(true)
-
- return deleteDirectory(directory.name).finally(() => setLoading(false))
- }
-
- if (loading) {
- return
- deleteFile: (path: string) => Promise
- backgroundColor: string
-}
-
-export function CafeReactFsFile({ path, file, download, deleteFile, backgroundColor }: Props) {
- const [hovered, setHovered] = useState(false)
- const [loading, setLoading] = useState(false)
-
- if (loading) {
- return
- enterDirectory: (name: string) => void
- onDeleteFile: (path: string) => Promise
- onDeleteDirectory: (path: string) => Promise
- backgroundColor: string
-}
-
-export function CafeReactFsItem({
- path,
- item,
- download,
- enterDirectory,
- onDeleteFile,
- onDeleteDirectory,
- backgroundColor,
-}: Props) {
- if (isVirtualFile(item)) {
- return (
-
-}
-
-export function CafeReactFsSync({ backgroundColor, onSync }: Props) {
- return (
-
- backgroundColor: string
-}
-
-export function CafeReactFsUpload({ onUpload, backgroundColor }: Props) {
- const [uploading, setUploading] = useState(false)
-
- function proxyUpload() {
- setUploading(true)
- onUpload().finally(() => setUploading(false))
- }
-
- if (uploading) {
- return {
- if (type === 'V3' && !password) {
+ if (type === IdentityType.V3 && !password) {
throw Error('V3 passwords require password')
}
- const identityString = type === 'PRIVATE_KEY' ? identity.privateKey : await identity.encrypt(password as string)
+ const identityString =
+ type === IdentityType.PrivateKey ? identity.privateKey : await identity.encrypt(password as string)
return {
uuid: uuidV4(),
name,
- type: password ? 'V3' : 'PRIVATE_KEY',
+ type: password ? IdentityType.V3 : IdentityType.PrivateKey,
address: identity.address,
identity: identityString,
}
@@ -44,26 +50,26 @@ export async function convertWalletToIdentity(
export async function importIdentity(name: string, data: string): Promise {
if (data.length === 64) {
- const wallet = await getWallet('PRIVATE_KEY', data)
+ const wallet = await getWallet(IdentityType.PrivateKey, data)
return {
uuid: uuidV4(),
name,
- type: 'PRIVATE_KEY',
+ type: IdentityType.PrivateKey,
identity: data,
address: wallet.address,
}
}
if (data.length === 66 && data.toLowerCase().startsWith('0x')) {
- const wallet = await getWallet('PRIVATE_KEY', data.slice(2))
+ const wallet = await getWallet(IdentityType.PrivateKey, data.slice(2))
- return { uuid: uuidV4(), name, type: 'PRIVATE_KEY', identity: data, address: wallet.address }
+ return { uuid: uuidV4(), name, type: IdentityType.PrivateKey, identity: data, address: wallet.address }
}
try {
const { address } = JSON.parse(data)
- return { uuid: uuidV4(), name, type: 'V3', identity: data, address }
+ return { uuid: uuidV4(), name, type: IdentityType.V3, identity: data, address }
} catch {
return null
}
@@ -74,7 +80,17 @@ function getWalletFromIdentity(identity: Identity, password?: string): Promise {
- return type === 'PRIVATE_KEY' ? new Wallet(data) : await Wallet.fromEncryptedJson(data, password as string)
+ if (type === IdentityType.PrivateKey) {
+ return new Wallet(data)
+ }
+
+ if (!password) {
+ throw new Error('password is required for wallet')
+ }
+
+ const w = await Wallet.fromEncryptedJson(data, password)
+
+ return new Wallet(w.privateKey)
}
export async function updateFeed(
@@ -93,5 +109,5 @@ export async function updateFeed(
const writer = beeApi.makeFeedWriter(NULL_TOPIC, wallet.privateKey)
await waitUntilStampUsable(stamp, beeApi)
- await writer.upload(stamp, hash)
+ await writer.uploadReference(stamp, hash)
}
diff --git a/src/utils/index.test.ts b/src/utils/index.test.ts
deleted file mode 100644
index 9eb68fa..0000000
--- a/src/utils/index.test.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import { extractSwarmHash, extractSwarmCid, extractEns, recognizeEnsOrSwarmHash } from './index'
-
-interface TestObject {
- input: string
- expectedOutput: string | undefined
-}
-
-const correctHashes: TestObject[] = [
- // non-encrypted
- {
- input: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
- {
- input: 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
- {
- input: 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
- {
- input: 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
- expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
- {
- input: 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
- expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
- // encrypted
- {
- input:
- 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- expectedOutput:
- 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
- {
- input:
- 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- expectedOutput:
- 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
- {
- input:
- 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- expectedOutput:
- 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
- {
- input:
- 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
- expectedOutput:
- 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
- {
- input:
- 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
- expectedOutput:
- 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
- },
-]
-
-const wrongHashes: string[] = [
- // one character too long
- 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa',
- 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa',
- 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa',
- 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa/',
- 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa/',
-
- // a bit shorter
- 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d',
-]
-
-describe('extractSwarmHash', () => {
- test('should correctly extract hash', () => {
- correctHashes.forEach(({ input, expectedOutput }) => {
- const hash = extractSwarmHash(input)
- expect(hash).toBe(expectedOutput)
- })
- })
- test('should not extract hash from incorrect inputs', () => {
- wrongHashes.forEach(input => {
- const hash = extractSwarmHash(input)
- expect(hash).toBe(undefined)
- })
- })
-})
-
-const correctCids: TestObject[] = [
- {
- input: 'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.bzz.link',
- expectedOutput: 'e80a3df165abbf275ae5480e9e51241d2e6368c4ed379771424af29ca35b29d4',
- },
- {
- input: 'https://bah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vookq.bzz.link',
- expectedOutput: 'd2f269c0b99d5bbbcdb93d7f0a85815ad23f851dd2fa94509124c401f7b57395',
- },
-]
-const wrongCids: string[] = [
- 'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.another.domain',
- 'http://bah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vookq.bzz.link',
- 'https://not_cid.bzz.link',
- 'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.subdomain.bzz.link',
- 'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.subdomain.bzz.link',
- 'https://bah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vook.bzz.link',
- 'https://aah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vookq.bzz.link',
-]
-
-describe('extractSwarmCid', () => {
- test('should correctly extract hash', () => {
- correctCids.forEach(({ input, expectedOutput }) => {
- const hash = extractSwarmCid(input)
- expect(hash).toBe(expectedOutput)
- })
- })
- test('should not extract cid from incorrect urls', () => {
- wrongCids.forEach(url => {
- const hash = extractSwarmCid(url)
- expect(hash).toBe(undefined)
- })
- })
-})
-
-const correctEns: TestObject[] = [
- {
- input: 'test.eth',
- expectedOutput: 'test.eth',
- },
- {
- input: 't-est.eth',
- expectedOutput: 't-est.eth',
- },
- {
- input: 'http://test.eth/whatever',
- expectedOutput: 'test.eth',
- },
- {
- input: 'https://alice.test.eth?whatever',
- expectedOutput: 'alice.test.eth',
- },
- {
- input: 'swarm.example.eth/?id=1&page=2',
- expectedOutput: 'swarm.example.eth',
- },
- {
- input: 'http://swarm.example.eth#up',
- expectedOutput: 'swarm.example.eth',
- },
- {
- input: 'http://site.eth:8008',
- expectedOutput: 'site.eth',
- },
-]
-
-const wrongEns: string[] = ['http://test.ethereum/whatever']
-
-describe('extractEns', () => {
- test('should correctly extract ens domain', () => {
- correctEns.forEach(({ input, expectedOutput }) => {
- const hash = extractEns(input)
- expect(hash).toBe(expectedOutput)
- })
- })
- test('should not extract ens from incorrect inputs', () => {
- wrongEns.forEach(url => {
- const hash = extractEns(url)
- expect(hash).toBe(undefined)
- })
- })
-})
-
-describe('recognizeEnsOrSwarmHash', () => {
- test('should correctly extract hash or ens', () => {
- ;[...correctHashes, ...correctCids, ...correctEns].forEach(({ input, expectedOutput }) => {
- const hash = recognizeEnsOrSwarmHash(input)
- expect(hash).toBe(expectedOutput)
- })
- })
- test('should not extract hash or ens from incorrect inputs but instead return them', () => {
- ;[...wrongHashes, ...wrongCids, ...wrongEns].forEach(url => {
- const hash = recognizeEnsOrSwarmHash(url)
- expect(hash).toBe(url)
- })
- })
-})
diff --git a/src/utils/index.ts b/src/utils/index.ts
index bca7e79..5d1a8bf 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,6 @@
import { BatchId, Bee, PostageBatch, Reference } from '@ethersphere/bee-js'
import { BigNumber } from 'bignumber.js'
+
import { BZZ_LINK_DOMAIN } from '../constants'
/**
@@ -90,21 +91,25 @@ export function unwrapPromiseSettlements(
* If all attempts fail, then this `Promise` also rejects.
*/
export function makeRetriablePromise(fn: () => Promise, maxRetries = 3, delayMs = 1000): Promise {
- return new Promise(async (resolve, reject) => {
- for (let tries = 0; tries < maxRetries; tries++) {
- try {
- const results = await fn()
- resolve(results)
+ return new Promise((resolve, reject) => {
+ const attempt = async () => {
+ for (let tries = 0; tries < maxRetries; tries++) {
+ try {
+ const results = await fn()
+ resolve(results)
- return
- } catch (error) {
- if (tries < maxRetries - 1) {
- await sleepMs(delayMs)
- } else {
- reject(error)
+ return
+ } catch (error) {
+ if (tries < maxRetries - 1) {
+ await sleepMs(delayMs)
+ } else {
+ reject(error)
+ }
}
}
}
+
+ attempt()
})
}
@@ -130,7 +135,7 @@ export function extractSwarmCid(s: string): string | undefined {
const cid = matches[1]
try {
return new Reference(cid).toHex()
- } catch (e) {
+ } catch {
return
}
}
@@ -211,7 +216,6 @@ interface Options {
timeout?: number
}
-// TODO: merge this with FM component getUsableStamps()
export function waitUntilStampUsable(batchId: BatchId | string, bee: Bee, options?: Options): Promise {
return waitForStamp(batchId, bee, options)
}
diff --git a/src/utils/local-storage.ts b/src/utils/localStorage.ts
similarity index 62%
rename from src/utils/local-storage.ts
rename to src/utils/localStorage.ts
index 0c5dded..421a56d 100644
--- a/src/utils/local-storage.ts
+++ b/src/utils/localStorage.ts
@@ -1,9 +1,22 @@
import { shortenHash } from './hash'
-export enum HISTORY_KEYS {
- UPLOAD_HISTORY = 'UPLOAD_HISTORY',
- DOWNLOAD_HISTORY = 'DOWNLOAD_HISTORY',
-}
+export const LocalStorageKeys = {
+ providerUrl: 'json-rpc-provider',
+ apiHost: 'api_host',
+ apiKey: 'apiKey',
+ fmClickStorage: 'fm_click_count_v1',
+ fmSurveyTriggered: 'fm_survey_triggered_v1',
+ fmSortKey: 'fm.sort.v1',
+ fmPrivateKey: 'privateKey',
+ feeds: 'feeds',
+ depositWallet: 'deposit-wallet',
+ giftWallets: 'gift-wallets',
+ invitation: 'invitation',
+ uploadHistory: 'UPLOAD_HISTORY',
+ downloadHistory: 'DOWNLOAD_HISTORY',
+} as const
+
+export type HISTORY_KEYS = typeof LocalStorageKeys.uploadHistory | typeof LocalStorageKeys.downloadHistory
export interface HistoryItem {
createdAt: number
@@ -11,7 +24,7 @@ export interface HistoryItem {
hash: string
}
-export function putHistory(key: string, hash: string, name: string): void {
+export function putHistory(key: HISTORY_KEYS, hash: string, name: string): void {
const history = getHistorySafe(key)
const existingIndex = history.findIndex(x => x.hash === hash)
@@ -32,7 +45,7 @@ export function putHistory(key: string, hash: string, name: string): void {
localStorage.setItem(key, JSON.stringify(history))
}
-export function getHistorySafe(key: string): HistoryItem[] {
+export function getHistorySafe(key: HISTORY_KEYS): HistoryItem[] {
const items = localStorage.getItem(key)
if (!items) {
diff --git a/src/utils/manifest.ts b/src/utils/manifest.ts
new file mode 100644
index 0000000..42f6d86
--- /dev/null
+++ b/src/utils/manifest.ts
@@ -0,0 +1,21 @@
+import type { Bee, DownloadOptions } from '@ethersphere/bee-js'
+import { BeeRequestOptions, MantarayNode, NULL_ADDRESS } from '@ethersphere/bee-js'
+
+export async function loadManifest(
+ beeApi: Bee,
+ hash: string,
+ options?: DownloadOptions,
+ requestOptions?: BeeRequestOptions,
+): Promise {
+ let manifest = await MantarayNode.unmarshal(beeApi, hash, options, requestOptions)
+ await manifest.loadRecursively(beeApi, options, requestOptions)
+
+ // If the manifest is a feed, resolve it and overwrite the manifest
+ const feed = await manifest.resolveFeed(beeApi, requestOptions)
+ await feed.ifPresentAsync(async feedUpdate => {
+ manifest = MantarayNode.unmarshalFromData(feedUpdate.payload.toUint8Array(), NULL_ADDRESS)
+ await manifest.loadRecursively(beeApi, options, requestOptions)
+ })
+
+ return manifest
+}
diff --git a/src/utils/net.ts b/src/utils/net.ts
index 3e4c939..c819344 100644
--- a/src/utils/net.ts
+++ b/src/utils/net.ts
@@ -1,12 +1,14 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
import axios from 'axios'
-import { AuthError } from './AuthError'
+import { AuthError } from './errors'
+import { LocalStorageKeys } from './localStorage'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function getJson>(url: string): Promise {
return sendRequest(url, 'GET') as Promise
}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function postJson>(url: string, data?: Record): Promise {
return sendRequest(url, 'POST', data) as Promise
}
@@ -15,8 +17,9 @@ export async function sendRequest(
url: string,
method: 'GET' | 'POST',
data?: Record,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
): Promise> {
- const authorization = localStorage.getItem('apiKey')
+ const authorization = localStorage.getItem(LocalStorageKeys.apiKey)
if (!authorization) {
throw Error('API key not found in local storage. Please reopen via Swarm Desktop > Open Web UI.')
diff --git a/src/utils/rpc.ts b/src/utils/rpc.ts
index 8402668..8afdff6 100644
--- a/src/utils/rpc.ts
+++ b/src/utils/rpc.ts
@@ -1,27 +1,25 @@
-import { debounce } from '@material-ui/core'
import { BZZ, DAI, EthAddress, PrivateKey } from '@ethersphere/bee-js'
-import { BigNumber as BN, Contract, providers, Wallet } from 'ethers'
-import { BZZ_TOKEN_ADDRESS, bzzABI } from './bzz-abi'
+import { debounce } from '@mui/material'
+import { Contract, JsonRpcProvider, TransactionReceipt, TransactionResponse, Wallet } from 'ethers'
-const NETWORK_ID = 100
+import { BZZ_TOKEN_ADDRESS, bzzABI } from './bzzAbi'
+import { ethAddressString, newGnosisProvider } from './chain'
-async function getNetworkChainId(url: string): Promise {
- const provider = new providers.JsonRpcProvider(url, NETWORK_ID)
- await provider.ready
+async function getNetworkChainId(url: string): Promise {
+ const provider = newGnosisProvider(url)
const network = await provider.getNetwork()
return network.chainId
}
-async function eth_getBalance(address: EthAddress | string, provider: providers.JsonRpcProvider): Promise {
- address = new EthAddress(address)
-
- const balance = await provider.getBalance(address.toHex())
+async function eth_getBalance(address: EthAddress | string, provider: JsonRpcProvider): Promise {
+ const addressString = ethAddressString(address)
+ const balance = await provider.getBalance(addressString)
return DAI.fromWei(balance.toString())
}
-async function eth_getBlockByNumber(provider: providers.JsonRpcProvider): Promise {
+async function eth_getBlockByNumber(provider: JsonRpcProvider): Promise {
const blockNumber = await provider.getBlockNumber()
return blockNumber.toString()
@@ -29,56 +27,75 @@ async function eth_getBlockByNumber(provider: providers.JsonRpcProvider): Promis
async function eth_getBalanceERC20(
address: EthAddress | string,
- provider: providers.JsonRpcProvider,
+ provider: JsonRpcProvider,
tokenAddress = BZZ_TOKEN_ADDRESS,
): Promise {
- address = new EthAddress(address)
-
+ const addressString = ethAddressString(address)
const contract = new Contract(tokenAddress, bzzABI, provider)
- const balance = await contract.balanceOf(address.toHex())
+ // Use staticCall directly to bypass argument resolution
+ const balance = await contract.balanceOf.staticCall(addressString)
return BZZ.fromPLUR(balance.toString())
}
interface TransferResponse {
- transaction: providers.TransactionResponse
- receipt: providers.TransactionReceipt
+ transaction: TransactionResponse
+ receipt: TransactionReceipt
}
export async function estimateNativeTransferTransactionCost(
privateKey: PrivateKey | string,
- jsonRpcProvider: string,
+ jsonRpcProviderUrl: string,
): Promise<{ gasPrice: DAI; totalCost: DAI }> {
privateKey = new PrivateKey(privateKey)
- const signer = await makeReadySigner(privateKey, jsonRpcProvider)
- const gasLimit = '21000'
- const gasPrice = await signer.getGasPrice()
+ const signer = await makeReadySigner(privateKey, jsonRpcProviderUrl)
- return { gasPrice: DAI.fromWei(gasPrice.toString()), totalCost: DAI.fromWei(gasPrice.mul(gasLimit).toString()) }
+ if (!signer.provider) {
+ throw new Error('Signer provider is invalid!')
+ }
+
+ const gasLimit = BigInt(21000)
+ const feeData = await signer.provider.getFeeData()
+ const gasPrice = feeData.gasPrice || BigInt(0)
+
+ return {
+ gasPrice: DAI.fromWei(gasPrice.toString()),
+ totalCost: DAI.fromWei((gasPrice * gasLimit).toString()),
+ }
}
export async function sendNativeTransaction(
privateKey: PrivateKey | string,
to: EthAddress | string,
value: DAI,
- jsonRpcProvider: string,
+ jsonRpcProviderUrl: string,
externalGasPrice?: DAI,
): Promise {
privateKey = new PrivateKey(privateKey)
to = new EthAddress(to)
- const signer = await makeReadySigner(privateKey, jsonRpcProvider)
- const gasPrice = externalGasPrice ?? DAI.fromWei((await signer.getGasPrice()).toString())
+ const signer = await makeReadySigner(privateKey, jsonRpcProviderUrl)
+
+ if (!signer.provider) {
+ throw new Error('Signer provider is invalid!')
+ }
+
+ const feedData = await signer.provider.getFeeData()
+ const gasPrice = externalGasPrice ?? DAI.fromWei(feedData.gasPrice?.toString() || '0')
const transaction = await signer.sendTransaction({
to: to.toHex(),
- value: BN.from(value.toWeiString()),
- gasPrice: BN.from(gasPrice.toWeiString()),
- gasLimit: BN.from(21000),
+ value: BigInt(value.toWeiString()),
+ gasPrice: BigInt(gasPrice.toWeiString()),
+ gasLimit: BigInt(21000),
type: 0,
})
const receipt = await transaction.wait(1)
+ if (!receipt) {
+ throw new Error('Invalid receipt!')
+ }
+
return { transaction, receipt }
}
@@ -86,29 +103,61 @@ export async function sendBzzTransaction(
privateKey: PrivateKey | string,
to: EthAddress | string,
value: BZZ,
- jsonRpcProvider: string,
+ jsonRpcProviderUrl: string,
): Promise {
privateKey = new PrivateKey(privateKey)
to = new EthAddress(to)
- const signer = await makeReadySigner(privateKey, jsonRpcProvider)
- const gasPrice = await signer.getGasPrice()
+ const signer = await makeReadySigner(privateKey, jsonRpcProviderUrl)
+
+ if (!signer.provider) {
+ throw new Error('Signer provider is invalid!')
+ }
+
+ const feeData = await signer.provider.getFeeData()
+ const gasPrice = feeData.gasPrice || BigInt(0)
const bzz = new Contract(BZZ_TOKEN_ADDRESS, bzzABI, signer)
const transaction = await bzz.transfer(to, value, { gasPrice })
const receipt = await transaction.wait(1)
+ if (!receipt) {
+ throw new Error('Invalid receipt!')
+ }
+
return { transaction, receipt }
}
-async function makeReadySigner(privateKey: PrivateKey, jsonRpcProvider: string) {
- const provider = new providers.JsonRpcProvider(jsonRpcProvider, NETWORK_ID)
- await provider.ready
- const signer = new Wallet(privateKey.toUint8Array(), provider)
+async function makeReadySigner(privateKey: PrivateKey, jsonRpcProviderUrl: string) {
+ const provider = newGnosisProvider(jsonRpcProviderUrl)
+ await provider.getNetwork()
+ const signer = new Wallet(privateKey.toString(), provider)
return signer
}
-export const Rpc = {
+export interface Rpc {
+ getNetworkChainId: (url: string) => Promise
+ sendNativeTransaction: (
+ privateKey: PrivateKey | string,
+ to: EthAddress | string,
+ value: DAI,
+ jsonRpcProviderUrl: string,
+ externalGasPrice?: DAI,
+ ) => Promise
+ sendBzzTransaction: (
+ privateKey: PrivateKey | string,
+ to: EthAddress | string,
+ value: BZZ,
+ jsonRpcProviderUrl: string,
+ ) => Promise
+ _eth_getBalance: (address: EthAddress | string, provider: JsonRpcProvider) => Promise
+ _eth_getBalanceERC20: (address: EthAddress | string, provider: JsonRpcProvider, tokenAddress?: string) => Promise
+ eth_getBalance: (address: EthAddress | string, provider: JsonRpcProvider) => Promise
+ eth_getBalanceERC20: (address: EthAddress | string, provider: JsonRpcProvider, tokenAddress: string) => Promise
+ eth_getBlockByNumber: (provider: JsonRpcProvider) => Promise
+}
+
+export const RPC: Rpc = {
getNetworkChainId,
sendNativeTransaction,
sendBzzTransaction,
diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts
index fd7ecc4..c0302a9 100644
--- a/src/utils/wallet.ts
+++ b/src/utils/wallet.ts
@@ -1,25 +1,26 @@
import { BZZ, DAI, EthAddress } from '@ethersphere/bee-js'
-import { providers, Wallet } from 'ethers'
-import { estimateNativeTransferTransactionCost, Rpc } from './rpc'
+import { JsonRpcProvider, Wallet } from 'ethers'
+
+import { estimateNativeTransferTransactionCost, RPC } from './rpc'
export class WalletAddress {
private constructor(
public address: string,
public bzz: BZZ,
public dai: DAI,
- public provider: providers.JsonRpcProvider,
+ public provider: JsonRpcProvider,
) {}
- static async make(address: string, provider: providers.JsonRpcProvider): Promise {
- const bzz = await Rpc._eth_getBalanceERC20(address, provider)
- const dai = await Rpc._eth_getBalance(address, provider)
+ static async make(address: string, provider: JsonRpcProvider): Promise {
+ const bzz = await RPC._eth_getBalanceERC20(address, provider)
+ const dai = await RPC._eth_getBalance(address, provider)
return new WalletAddress(address, bzz, dai, provider)
}
public async refresh(): Promise {
- this.bzz = await Rpc._eth_getBalanceERC20(this.address, this.provider)
- this.dai = await Rpc._eth_getBalance(this.address, this.provider)
+ this.bzz = await RPC._eth_getBalanceERC20(this.address, this.provider)
+ this.dai = await RPC._eth_getBalance(this.address, this.provider)
return this
}
@@ -33,43 +34,43 @@ export class ResolvedWallet {
public wallet: Wallet,
public bzz: BZZ,
public dai: DAI,
- public provider: providers.JsonRpcProvider,
+ public provider: JsonRpcProvider,
) {
this.address = wallet.address
this.privateKey = wallet.privateKey
}
- static async make(privateKeyOrWallet: string | Wallet, provider: providers.JsonRpcProvider): Promise {
+ static async make(privateKeyOrWallet: string | Wallet, provider: JsonRpcProvider): Promise {
const wallet =
typeof privateKeyOrWallet === 'string' ? new Wallet(privateKeyOrWallet, provider) : privateKeyOrWallet
const address = wallet.address
- const bzz = await Rpc._eth_getBalanceERC20(address, provider)
- const dai = await Rpc._eth_getBalance(address, provider)
+ const bzz = await RPC._eth_getBalanceERC20(address, provider)
+ const dai = await RPC._eth_getBalance(address, provider)
return new ResolvedWallet(wallet, bzz, dai, provider)
}
public async refresh(): Promise {
- this.bzz = await Rpc._eth_getBalanceERC20(this.address, this.provider)
- this.dai = await Rpc._eth_getBalance(this.address, this.provider)
+ this.bzz = await RPC._eth_getBalanceERC20(this.address, this.provider)
+ this.dai = await RPC._eth_getBalance(this.address, this.provider)
return this
}
- public async transfer(destination: EthAddress | string, jsonRpcProvider: string): Promise {
+ public async transfer(destination: EthAddress | string, jsonRpcProviderUrl: string): Promise {
if (this.bzz.gt(BZZ.fromDecimalString('0.05'))) {
- await Rpc.sendBzzTransaction(this.privateKey, destination, this.bzz, jsonRpcProvider)
+ await RPC.sendBzzTransaction(this.privateKey, destination, this.bzz, jsonRpcProviderUrl)
await this.refresh()
}
- const { gasPrice, totalCost } = await estimateNativeTransferTransactionCost(this.privateKey, jsonRpcProvider)
+ const { gasPrice, totalCost } = await estimateNativeTransferTransactionCost(this.privateKey, jsonRpcProviderUrl)
if (this.dai.gt(totalCost)) {
- await Rpc.sendNativeTransaction(
+ await RPC.sendNativeTransaction(
this.privateKey,
destination,
this.dai.minus(totalCost),
- jsonRpcProvider,
+ jsonRpcProviderUrl,
gasPrice,
)
await this.refresh()
diff --git a/test/file.test.ts b/test/file.test.ts
deleted file mode 100644
index 12335ae..0000000
--- a/test/file.test.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { detectIndexHtml } from './file'
-
-describe('file utils', () => {
- it('detectIndexHtml should find index.html with multiple files', () => {
- expect(
- detectIndexHtml([
- { name: 'swarm.png', path: 'swarm.png' },
- { name: 'index.html', path: 'index.html' },
- ]),
- ).toEqual({ indexPath: 'index.html' })
- })
-
- it('detectIndexHtml should find index.htm with multiple files', () => {
- expect(
- detectIndexHtml([
- { name: 'index.htm', path: 'index.htm' },
- { name: 'swarm.png', path: 'swarm.png' },
- ]),
- ).toEqual({ indexPath: 'index.htm' })
- })
-
- it('detectIndexHtml should NOT detect single index.html file as website', () => {
- expect(
- detectIndexHtml([
- { name: 'index.html', path: 'index.html' },
- ]),
- ).toBe(false)
- })
-
- it('detectIndexHtml should NOT detect single index.htm file as website', () => {
- expect(
- detectIndexHtml([
- { name: 'index.htm', path: 'index.htm' },
- ]),
- ).toBe(false)
- })
-
- it('detectIndexHtml should find nested index.html', () => {
- expect(
- detectIndexHtml([
- { name: 'swarm.png', path: 'sample-folder/swarm.png' },
- { name: 'index.html', path: 'sample-folder/index.html' },
- ]),
- ).toEqual({ indexPath: 'sample-folder/index.html', commonPrefix: 'sample-folder/' })
- })
-
- it('detectIndexHtml should not find nested index.htm when ambigous', () => {
- expect(
- detectIndexHtml([
- { name: 'index.htm', path: 'sample-folder/index.htm' },
- { name: 'swarm.png', path: 'other-folder/swarm.png' },
- ]),
- ).toBe(false)
- })
-
- it('detectIndexHtml should not find deep index.html', () => {
- expect(
- detectIndexHtml([
- { name: 'index.html', path: 'sample-folder/index.html' },
- { name: 'swarm.png', path: 'swarm.png' },
- ]),
- ).toBe(false)
- })
-
- it('detectIndexHtml should return false when no matches appear', () => {
- expect(
- detectIndexHtml([
- { name: 'swarm.png', path: 'swarm.png' },
- { name: 'swarm.jpg', path: 'swarm.jpg' },
- ]),
- ).toBe(false)
- })
-})
diff --git a/test/index.test.ts b/test/index.test.ts
deleted file mode 100644
index 49a5cfd..0000000
--- a/test/index.test.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import BigNumber from 'bignumber.js'
-import { extractSwarmHash, isInteger, makeBigNumber } from './index'
-
-describe('utils', () => {
- describe('isInteger', () => {
- const correctValues = [
- BigInt(0),
- BigInt(1),
- BigInt(-1),
- new BigNumber('1'),
- new BigNumber('0'),
- new BigNumber('-1'),
- ]
- const wrongValues = ['1', new BigNumber('-0.1'), new BigNumber(NaN), new BigNumber(Infinity)]
-
- correctValues.forEach(v => {
- test(`testing ${v}`, () => {
- expect(isInteger(v)).toBe(true)
- })
- })
-
- wrongValues.forEach(v => {
- test(`testing ${v}`, () => {
- expect(isInteger(v)).toBe(false)
- })
- })
- })
-
- describe('makeBigNumber', () => {
- const correctValues = [
- BigInt(0),
- BigInt(1),
- BigInt(-1),
- '1',
- '0',
- '-1',
- '0.1',
- new BigNumber('1'),
- new BigNumber('0'),
- new BigNumber('-1'),
- 0,
- 1,
- -1,
- ]
- const wrongValues = [new Function()] // eslint-disable-line no-new-func
-
- correctValues.forEach(v => {
- test(`testing ${v}`, () => {
- expect(BigNumber.isBigNumber(makeBigNumber(v))).toBe(true)
- })
- })
-
- wrongValues.forEach(v => {
- test(`testing ${v}`, () => {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- expect(() => makeBigNumber(v as unknown as any)).toThrow()
- })
- })
- })
-
- describe('extractSwarmHash', () => {
- test('should return 64 hash', () => {
- expect(extractSwarmHash('7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3')).toBe(
- '7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3',
- )
- })
-
- test('should return 128 hash', () => {
- expect(
- extractSwarmHash(
- 'd1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f',
- ),
- ).toBe(
- 'd1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f',
- )
- })
-
- test('should return 64 hash from url', () => {
- expect(
- extractSwarmHash('http://localhost:1633/bzz/7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3/'),
- ).toBe('7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3')
- })
-
- test('should return 128 hash from url', () => {
- expect(
- extractSwarmHash(
- 'http://localhost:1633/bzz/d1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f/',
- ),
- ).toBe(
- 'd1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f',
- )
- })
-
- test('should return null when nothing is found', () => {
- expect(extractSwarmHash('Bee Dashboard')).toBe(null)
- })
-
- test('should return null when length is incorrect', () => {
- expect(extractSwarmHash('7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81a')).toBe(null)
- })
-
- test('should return null when alphanumeric', () => {
- expect(extractSwarmHash('gkQ6duo5iHJ099g908P0t17ZWFf8Ke2klrywLP5BGtLkcaEC5W0kLEfbe4wUnDI6')).toBe(null)
- })
- })
-})
diff --git a/ui-test/helpers.js b/tests/ui/helpers.js
similarity index 79%
rename from ui-test/helpers.js
rename to tests/ui/helpers.js
index 9f788b3..37ec457 100644
--- a/ui-test/helpers.js
+++ b/tests/ui/helpers.js
@@ -1,6 +1,5 @@
const axios = require('axios')
-const puppeteer = require('puppeteer')
-const { Assert, Click, sleep, Wait } = require('./library')
+const { Assert, Click, Wait } = require('./library')
/**
* @param {puppeteer.Page} page Puppeteer Page object returned by `browser.newPage()`
@@ -9,13 +8,13 @@ const { Assert, Click, sleep, Wait } = require('./library')
async function selectStampAndUpload(page) {
await Click.elementWithText(page, 'button', 'Add Postage Stamp')
// select the first available stamp
- await Click.elementWithClass(page, 'div', '.MuiSelect-select')
- await Click.elementWithClass(page, 'li', '.MuiListItem-button')
+ await page.click('[role="combobox"]') // Click the select trigger
+ await page.click('[role="option"]') // Click first option in the dropdown
await Wait.forEnabledStateXPath(page, 'button', 'Proceed With Selected Stamp')
- // seems necessary, even though button is enabled by the previous step, it is only highlighted and not clicked
- await sleep(500)
await Click.elementWithText(page, 'button', 'Proceed With Selected Stamp')
+ await Wait.forElementXPath(page, "//button[contains(., 'Upload To Your Node')]")
await Click.elementWithText(page, 'button', 'Upload To Your Node')
+ await Wait.forElementXPath(page, "//button[contains(., 'Download')]")
// check if the upload was successful
await Assert.elementWithTextExists(page, 'button', 'Download')
await Assert.elementWithTextExists(page, 'button', 'Update Feed')
diff --git a/ui-test/index.js b/tests/ui/index.js
similarity index 94%
rename from ui-test/index.js
rename to tests/ui/index.js
index c1c6ca5..48b771f 100644
--- a/ui-test/index.js
+++ b/tests/ui/index.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
const handler = require('serve-handler')
const http = require('http')
const puppeteer = require('puppeteer')
@@ -44,13 +43,14 @@ async function main() {
* @returns {Promise<{ browser: puppeteer.Browser, page: puppeteer.Page }>}
*/
async function preparePage() {
+ // TODO: run in CI, headless mode
const browser = await puppeteer.launch({
defaultViewport: null,
headless: false,
args: [`--window-size=${VIEWPORT.width},${VIEWPORT.height}`],
})
const page = await browser.newPage()
- await page.goto('http://localhost:8080' || process.env.PORT, { waitUntil: 'networkidle0' })
+ await page.goto(`http://localhost:${process.env.PORT ?? 8080}`, { waitUntil: 'networkidle0' })
return { browser, page }
}
diff --git a/ui-test/library.js b/tests/ui/library.js
similarity index 93%
rename from ui-test/library.js
rename to tests/ui/library.js
index 578f0c6..947c93c 100644
--- a/ui-test/library.js
+++ b/tests/ui/library.js
@@ -1,5 +1,3 @@
-const puppeteer = require('puppeteer')
-
const SLEEP_MS = 500
const SLEEP_ITERATIONS = 20
@@ -11,11 +9,18 @@ const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
*/
async function waitForElementXPath(page, selector) {
for (let i = 0; i < SLEEP_ITERATIONS; i++) {
- const [element] = await page.$x(selector)
+ const element = await page.evaluateHandle(selector => {
+ const result = document.evaluate(selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
- if (element) {
+ return result.singleNodeValue
+ }, selector)
+
+ const isNull = await page.evaluate(el => el === null, element)
+
+ if (!isNull) {
return element
}
+
await sleep(SLEEP_MS)
}
diff --git a/ui-test/test-case/FolderUpload.js b/tests/ui/test-case/FolderUpload.js
similarity index 77%
rename from ui-test/test-case/FolderUpload.js
rename to tests/ui/test-case/FolderUpload.js
index a42e7be..22d4800 100644
--- a/ui-test/test-case/FolderUpload.js
+++ b/tests/ui/test-case/FolderUpload.js
@@ -1,4 +1,4 @@
-const puppeteer = require('puppeteer')
+const path = require('path')
const { selectStampAndUpload } = require('../helpers')
const { Assert, Click } = require('../library')
@@ -7,7 +7,12 @@ const { Assert, Click } = require('../library')
*/
async function testFolderUpload(page) {
await Click.elementWithText(page, 'a', 'Files')
- await Click.elementWithTextAndUpload(page, 'button', 'Add Folder', 'test-data/test-folder')
+ await Click.elementWithTextAndUpload(
+ page,
+ 'button',
+ 'Add Folder',
+ path.resolve(__dirname, '../test-data/test-folder'),
+ )
await assertUploadPreview(page)
await selectStampAndUpload(page)
await assertDownloadPreview(page)
@@ -18,7 +23,7 @@ async function testFolderUpload(page) {
*/
async function assertDownloadPreview(page) {
await assertUploadPreview(page)
- await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: 89ef8f3e[…]504e5d1c')
+ await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: f3cace09[…]6a30aff5')
await Assert.elementWithTextExists(page, 'p', 'Folder Name: test-folder')
await Assert.elementWithTextExists(page, 'p', 'Kind: Folder')
await Assert.elementWithTextExists(page, 'h6', '4 items')
@@ -30,7 +35,7 @@ async function assertDownloadPreview(page) {
async function assertUploadPreview(page) {
await Assert.elementWithTextExists(page, 'p', 'Folder Name: test-folder')
await Assert.elementWithTextExists(page, 'p', 'Kind: Folder')
- await Assert.elementWithTextExists(page, 'p', 'Size: 6.56 kB')
+ await Assert.elementWithTextExists(page, 'p', 'Size: 6.56 KB')
}
module.exports = { testFolderUpload }
diff --git a/ui-test/test-case/ImageFileUpload.js b/tests/ui/test-case/ImageFileUpload.js
similarity index 73%
rename from ui-test/test-case/ImageFileUpload.js
rename to tests/ui/test-case/ImageFileUpload.js
index 8e4218f..101c329 100644
--- a/ui-test/test-case/ImageFileUpload.js
+++ b/tests/ui/test-case/ImageFileUpload.js
@@ -1,4 +1,4 @@
-const puppeteer = require('puppeteer')
+const path = require('path')
const { Assert, Click } = require('../library')
const { selectStampAndUpload } = require('../helpers')
@@ -7,7 +7,12 @@ const { selectStampAndUpload } = require('../helpers')
*/
async function testImageFileUpload(page) {
await Click.elementWithText(page, 'a', 'Files')
- await Click.elementWithTextAndUpload(page, 'button', 'Add File', 'test-data/1337x1337.jpg')
+ await Click.elementWithTextAndUpload(
+ page,
+ 'button',
+ 'Add File',
+ path.resolve(__dirname, '../test-data/1337x1337.jpg'),
+ )
await assertUploadPreview(page)
await selectStampAndUpload(page)
await assertDownloadPreview(page)
@@ -19,7 +24,7 @@ async function testImageFileUpload(page) {
async function assertUploadPreview(page) {
await Assert.elementWithTextExists(page, 'p', 'Filename: 1337x1337.jpg')
await Assert.elementWithTextExists(page, 'p', 'Kind: image/jpeg')
- await Assert.elementWithTextExists(page, 'p', 'Size: 116.88 kB')
+ await Assert.elementWithTextExists(page, 'p', 'Size: 116.88 KB')
}
/**
@@ -27,7 +32,7 @@ async function assertUploadPreview(page) {
*/
async function assertDownloadPreview(page) {
await assertUploadPreview(page)
- await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: 5de1d879[…]3427432d')
+ await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: 91a70e81[…]758fbbde')
}
module.exports = { testImageFileUpload }
diff --git a/ui-test/test-case/ReactWebsiteUpload.js b/tests/ui/test-case/ReactWebsiteUpload.js
similarity index 82%
rename from ui-test/test-case/ReactWebsiteUpload.js
rename to tests/ui/test-case/ReactWebsiteUpload.js
index ef0ba71..0a4ec17 100644
--- a/ui-test/test-case/ReactWebsiteUpload.js
+++ b/tests/ui/test-case/ReactWebsiteUpload.js
@@ -1,4 +1,4 @@
-const puppeteer = require('puppeteer')
+const path = require('path')
const { selectStampAndUpload, assertUploadedContentAtPath } = require('../helpers')
const { Click } = require('../library')
@@ -7,13 +7,18 @@ const { Click } = require('../library')
*/
async function testReactWebsiteUpload(page) {
await Click.elementWithText(page, 'a', 'Files')
- await Click.elementWithTextAndUpload(page, 'button', 'Add Website', 'test-data/test-react-website')
+ await Click.elementWithTextAndUpload(
+ page,
+ 'button',
+ 'Add Website',
+ path.resolve(__dirname, '../test-data/test-react-website'),
+ )
const swarmHash = await selectStampAndUpload(page)
await assertUploadedContentAtPath(swarmHash, 'index.html', 'text/html; charset=utf-8')
await assertUploadedContentAtPath(swarmHash, 'asset-manifest.json', 'application/json')
await assertUploadedContentAtPath(swarmHash, 'static/css/main.073c9b0a.css', 'text/css; charset=utf-8')
await assertUploadedContentAtPath(swarmHash, 'static/css/main.073c9b0a.css.map', '')
- await assertUploadedContentAtPath(swarmHash, 'static/js/787.28cb0dcd.chunk.js', 'application/javascript')
+ await assertUploadedContentAtPath(swarmHash, 'static/js/787.28cb0dcd.chunk.js', 'text/javascript; charset=utf-8')
await assertUploadedContentAtPath(swarmHash, 'static/js/787.28cb0dcd.chunk.js.map', '')
await assertUploadedContentAtPath(
swarmHash,
diff --git a/ui-test/test-case/TextFileUpload.js b/tests/ui/test-case/TextFileUpload.js
similarity index 80%
rename from ui-test/test-case/TextFileUpload.js
rename to tests/ui/test-case/TextFileUpload.js
index 716c190..d32045f 100644
--- a/ui-test/test-case/TextFileUpload.js
+++ b/tests/ui/test-case/TextFileUpload.js
@@ -1,4 +1,4 @@
-const puppeteer = require('puppeteer')
+const path = require('path')
const { selectStampAndUpload } = require('../helpers')
const { Assert, Click } = require('../library')
@@ -7,7 +7,7 @@ const { Assert, Click } = require('../library')
*/
async function testTextFileUpload(page) {
await Click.elementWithText(page, 'a', 'Files')
- await Click.elementWithTextAndUpload(page, 'button', 'Add File', 'test-data/text.txt')
+ await Click.elementWithTextAndUpload(page, 'button', 'Add File', path.resolve(__dirname, '../test-data/text.txt'))
await assertUploadPreview(page)
await selectStampAndUpload(page)
await assertDownloadPreview(page)
@@ -19,7 +19,7 @@ async function testTextFileUpload(page) {
async function assertUploadPreview(page) {
await Assert.elementWithTextExists(page, 'p', 'Filename: text.txt')
await Assert.elementWithTextExists(page, 'p', 'Kind: text/plain')
- await Assert.elementWithTextExists(page, 'p', 'Size: 1.64 kB')
+ await Assert.elementWithTextExists(page, 'p', 'Size: 1.64 KB')
}
/**
@@ -27,7 +27,7 @@ async function assertUploadPreview(page) {
*/
async function assertDownloadPreview(page) {
assertUploadPreview(page)
- await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: da0773a9[…]5f7a1b54')
+ await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: c6e8a03e[…]327a88c4')
}
module.exports = { testTextFileUpload }
diff --git a/ui-test/test-case/UnicodeFileUpload.js b/tests/ui/test-case/UnicodeFileUpload.js
similarity index 73%
rename from ui-test/test-case/UnicodeFileUpload.js
rename to tests/ui/test-case/UnicodeFileUpload.js
index 805314c..612b375 100644
--- a/ui-test/test-case/UnicodeFileUpload.js
+++ b/tests/ui/test-case/UnicodeFileUpload.js
@@ -1,4 +1,4 @@
-const puppeteer = require('puppeteer')
+const path = require('path')
const { selectStampAndUpload } = require('../helpers')
const { Assert, Click } = require('../library')
@@ -7,7 +7,12 @@ const { Assert, Click } = require('../library')
*/
async function testUnicodeFileUpload(page) {
await Click.elementWithText(page, 'a', 'Files')
- await Click.elementWithTextAndUpload(page, 'button', 'Add File', 'test-data/—𝖆𝖆🙇\\𝖈𝖈.txt')
+ await Click.elementWithTextAndUpload(
+ page,
+ 'button',
+ 'Add File',
+ path.resolve(__dirname, '../test-data/—𝖆𝖆🙇\\𝖈𝖈.txt'),
+ )
await assertUploadPreview(page)
await selectStampAndUpload(page)
await assertDownloadPreview(page)
@@ -19,7 +24,7 @@ async function testUnicodeFileUpload(page) {
async function assertUploadPreview(page) {
await Assert.elementWithTextExists(page, 'p', 'Filename: —𝖆𝖆🙇\\𝖈𝖈.txt')
await Assert.elementWithTextExists(page, 'p', 'Kind: text/plain')
- await Assert.elementWithTextExists(page, 'p', 'Size: 5.51 kB')
+ await Assert.elementWithTextExists(page, 'p', 'Size: 5.51 KB')
}
/**
@@ -27,7 +32,7 @@ async function assertUploadPreview(page) {
*/
async function assertDownloadPreview(page) {
assertUploadPreview(page)
- await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: 30fbf1d2[…]ba400e86')
+ await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: 2a3f5bfc[…]77e2a4c1')
}
module.exports = { testUnicodeFileUpload }
diff --git a/ui-test/test-case/UnicodeWebsiteUpload.js b/tests/ui/test-case/UnicodeWebsiteUpload.js
similarity index 74%
rename from ui-test/test-case/UnicodeWebsiteUpload.js
rename to tests/ui/test-case/UnicodeWebsiteUpload.js
index 7130476..0ec4597 100644
--- a/ui-test/test-case/UnicodeWebsiteUpload.js
+++ b/tests/ui/test-case/UnicodeWebsiteUpload.js
@@ -1,4 +1,4 @@
-const puppeteer = require('puppeteer')
+const path = require('path')
const { selectStampAndUpload, assertUploadedContentAtPath } = require('../helpers')
const { Click } = require('../library')
@@ -7,7 +7,12 @@ const { Click } = require('../library')
*/
async function testUnicodeWebsiteUpload(page) {
await Click.elementWithText(page, 'a', 'Files')
- await Click.elementWithTextAndUpload(page, 'button', 'Add Website', 'test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈')
+ await Click.elementWithTextAndUpload(
+ page,
+ 'button',
+ 'Add Website',
+ path.resolve(__dirname, '../test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈'),
+ )
const swarmHash = await selectStampAndUpload(page)
await assertUploadedContentAtPath(swarmHash, 'index.html', 'text/html; charset=utf-8')
await assertUploadedContentAtPath(swarmHash, '—𝖆𝖆🙇/𝖈𝖈.txt', 'text/plain; charset=utf-8')
diff --git a/ui-test/test-case/WebsiteUpload.js b/tests/ui/test-case/WebsiteUpload.js
similarity index 77%
rename from ui-test/test-case/WebsiteUpload.js
rename to tests/ui/test-case/WebsiteUpload.js
index b2ff4e2..647d6ee 100644
--- a/ui-test/test-case/WebsiteUpload.js
+++ b/tests/ui/test-case/WebsiteUpload.js
@@ -1,4 +1,4 @@
-const puppeteer = require('puppeteer')
+const path = require('path')
const { selectStampAndUpload } = require('../helpers')
const { Assert, Click } = require('../library')
@@ -7,7 +7,12 @@ const { Assert, Click } = require('../library')
*/
async function testWebsiteUpload(page) {
await Click.elementWithText(page, 'a', 'Files')
- await Click.elementWithTextAndUpload(page, 'button', 'Add Website', 'test-data/test-website')
+ await Click.elementWithTextAndUpload(
+ page,
+ 'button',
+ 'Add Website',
+ path.resolve(__dirname, '../test-data/test-website'),
+ )
await assertUploadPreview(page)
await selectStampAndUpload(page)
await assertDownloadPreview(page)
@@ -19,7 +24,7 @@ async function testWebsiteUpload(page) {
async function assertUploadPreview(page) {
await Assert.elementWithTextExists(page, 'p', 'Folder Name: test-website')
await Assert.elementWithTextExists(page, 'p', 'Kind: Website')
- await Assert.elementWithTextExists(page, 'p', 'Size: 390.10 kB')
+ await Assert.elementWithTextExists(page, 'p', 'Size: 390.10 KB')
}
/**
@@ -27,7 +32,7 @@ async function assertUploadPreview(page) {
*/
async function assertDownloadPreview(page) {
await assertUploadPreview(page)
- await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: b9a6d15d[…]d0d48b81')
+ await Assert.elementWithTextExists(page, 'p', 'Swarm Hash: d7fc1259[…]ac11e6f7')
await Assert.elementWithTextExists(page, 'p', 'Folder Name: test-website')
await Assert.elementWithTextExists(page, 'p', 'Kind: Website')
await Assert.elementWithTextExists(page, 'h6', '3 items')
diff --git a/test-data/1337x1337.jpg b/tests/ui/test-data/1337x1337.jpg
similarity index 100%
rename from test-data/1337x1337.jpg
rename to tests/ui/test-data/1337x1337.jpg
diff --git a/test-data/test-folder/1.txt b/tests/ui/test-data/test-folder/1.txt
similarity index 100%
rename from test-data/test-folder/1.txt
rename to tests/ui/test-data/test-folder/1.txt
diff --git a/test-data/test-folder/2.txt b/tests/ui/test-data/test-folder/2.txt
similarity index 100%
rename from test-data/test-folder/2.txt
rename to tests/ui/test-data/test-folder/2.txt
diff --git a/test-data/test-folder/3.txt b/tests/ui/test-data/test-folder/3.txt
similarity index 100%
rename from test-data/test-folder/3.txt
rename to tests/ui/test-data/test-folder/3.txt
diff --git a/test-data/test-folder/4.txt b/tests/ui/test-data/test-folder/4.txt
similarity index 100%
rename from test-data/test-folder/4.txt
rename to tests/ui/test-data/test-folder/4.txt
diff --git a/test-data/test-react-website/asset-manifest.json b/tests/ui/test-data/test-react-website/asset-manifest.json
similarity index 100%
rename from test-data/test-react-website/asset-manifest.json
rename to tests/ui/test-data/test-react-website/asset-manifest.json
diff --git a/test-data/test-react-website/favicon.ico b/tests/ui/test-data/test-react-website/favicon.ico
similarity index 100%
rename from test-data/test-react-website/favicon.ico
rename to tests/ui/test-data/test-react-website/favicon.ico
diff --git a/test-data/test-react-website/index.html b/tests/ui/test-data/test-react-website/index.html
similarity index 100%
rename from test-data/test-react-website/index.html
rename to tests/ui/test-data/test-react-website/index.html
diff --git a/test-data/test-react-website/logo192.png b/tests/ui/test-data/test-react-website/logo192.png
similarity index 100%
rename from test-data/test-react-website/logo192.png
rename to tests/ui/test-data/test-react-website/logo192.png
diff --git a/test-data/test-react-website/logo512.png b/tests/ui/test-data/test-react-website/logo512.png
similarity index 100%
rename from test-data/test-react-website/logo512.png
rename to tests/ui/test-data/test-react-website/logo512.png
diff --git a/test-data/test-react-website/manifest.json b/tests/ui/test-data/test-react-website/manifest.json
similarity index 100%
rename from test-data/test-react-website/manifest.json
rename to tests/ui/test-data/test-react-website/manifest.json
diff --git a/test-data/test-react-website/robots.txt b/tests/ui/test-data/test-react-website/robots.txt
similarity index 100%
rename from test-data/test-react-website/robots.txt
rename to tests/ui/test-data/test-react-website/robots.txt
diff --git a/test-data/test-react-website/static/css/main.073c9b0a.css b/tests/ui/test-data/test-react-website/static/css/main.073c9b0a.css
similarity index 100%
rename from test-data/test-react-website/static/css/main.073c9b0a.css
rename to tests/ui/test-data/test-react-website/static/css/main.073c9b0a.css
diff --git a/test-data/test-react-website/static/css/main.073c9b0a.css.map b/tests/ui/test-data/test-react-website/static/css/main.073c9b0a.css.map
similarity index 100%
rename from test-data/test-react-website/static/css/main.073c9b0a.css.map
rename to tests/ui/test-data/test-react-website/static/css/main.073c9b0a.css.map
diff --git a/test-data/test-react-website/static/js/787.28cb0dcd.chunk.js b/tests/ui/test-data/test-react-website/static/js/787.28cb0dcd.chunk.js
similarity index 100%
rename from test-data/test-react-website/static/js/787.28cb0dcd.chunk.js
rename to tests/ui/test-data/test-react-website/static/js/787.28cb0dcd.chunk.js
diff --git a/test-data/test-react-website/static/js/787.28cb0dcd.chunk.js.map b/tests/ui/test-data/test-react-website/static/js/787.28cb0dcd.chunk.js.map
similarity index 100%
rename from test-data/test-react-website/static/js/787.28cb0dcd.chunk.js.map
rename to tests/ui/test-data/test-react-website/static/js/787.28cb0dcd.chunk.js.map
diff --git a/test-data/test-react-website/static/js/main.0215976b.js b/tests/ui/test-data/test-react-website/static/js/main.0215976b.js
similarity index 100%
rename from test-data/test-react-website/static/js/main.0215976b.js
rename to tests/ui/test-data/test-react-website/static/js/main.0215976b.js
diff --git a/test-data/test-react-website/static/js/main.0215976b.js.LICENSE.txt b/tests/ui/test-data/test-react-website/static/js/main.0215976b.js.LICENSE.txt
similarity index 100%
rename from test-data/test-react-website/static/js/main.0215976b.js.LICENSE.txt
rename to tests/ui/test-data/test-react-website/static/js/main.0215976b.js.LICENSE.txt
diff --git a/test-data/test-react-website/static/js/main.0215976b.js.map b/tests/ui/test-data/test-react-website/static/js/main.0215976b.js.map
similarity index 100%
rename from test-data/test-react-website/static/js/main.0215976b.js.map
rename to tests/ui/test-data/test-react-website/static/js/main.0215976b.js.map
diff --git a/test-data/test-react-website/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg b/tests/ui/test-data/test-react-website/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
similarity index 100%
rename from test-data/test-react-website/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
rename to tests/ui/test-data/test-react-website/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
diff --git "a/test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈/index.html" "b/tests/ui/test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈/index.html"
similarity index 100%
rename from "test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈/index.html"
rename to "tests/ui/test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈/index.html"
diff --git "a/test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈/—𝖆𝖆🙇\\𝖈𝖈.txt" "b/tests/ui/test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈/—𝖆𝖆🙇\\𝖈𝖈.txt"
similarity index 100%
rename from "test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈/—𝖆𝖆🙇\\𝖈𝖈.txt"
rename to "tests/ui/test-data/test-unicode-website—𝖆𝖆🙇\\𝖈𝖈/—𝖆𝖆🙇\\𝖈𝖈.txt"
diff --git a/test-data/test-website/index.html b/tests/ui/test-data/test-website/index.html
similarity index 100%
rename from test-data/test-website/index.html
rename to tests/ui/test-data/test-website/index.html
diff --git a/test-data/test-website/reset.css b/tests/ui/test-data/test-website/reset.css
similarity index 100%
rename from test-data/test-website/reset.css
rename to tests/ui/test-data/test-website/reset.css
diff --git a/test-data/test-website/static/2000x2000.jpg b/tests/ui/test-data/test-website/static/2000x2000.jpg
similarity index 100%
rename from test-data/test-website/static/2000x2000.jpg
rename to tests/ui/test-data/test-website/static/2000x2000.jpg
diff --git a/test-data/text.txt b/tests/ui/test-data/text.txt
similarity index 100%
rename from test-data/text.txt
rename to tests/ui/test-data/text.txt
diff --git "a/test-data/—𝖆𝖆🙇\\𝖈𝖈.txt" "b/tests/ui/test-data/—𝖆𝖆🙇\\𝖈𝖈.txt"
similarity index 100%
rename from "test-data/—𝖆𝖆🙇\\𝖈𝖈.txt"
rename to "tests/ui/test-data/—𝖆𝖆🙇\\𝖈𝖈.txt"
diff --git a/src/hooks/apiHooks.test.ts b/tests/unit/apiHooks.spec.ts
similarity index 86%
rename from src/hooks/apiHooks.test.ts
rename to tests/unit/apiHooks.spec.ts
index 65dfc0f..4228526 100644
--- a/src/hooks/apiHooks.test.ts
+++ b/tests/unit/apiHooks.spec.ts
@@ -1,8 +1,9 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook, waitFor } from '@testing-library/react'
import cors from 'cors'
import express from 'express'
import type { Server } from 'http'
-import { useBeeDesktop } from './apiHooks'
+
+import { useBeeDesktop } from '@/hooks/apiHooks'
interface AddressInfo {
address: string
@@ -41,7 +42,7 @@ afterAll(async () => {
describe('useBeeDesktop', () => {
it('should not have error when connected to bee-desktop', async () => {
- const { result, waitFor } = renderHook(() => useBeeDesktop(true, serverCorrectURL))
+ const { result } = renderHook(() => useBeeDesktop(true, serverCorrectURL))
await waitFor(() => {
expect(result.current.isLoading).toBe(false)
diff --git a/tests/unit/file.spec.ts b/tests/unit/file.spec.ts
new file mode 100644
index 0000000..3359d9a
--- /dev/null
+++ b/tests/unit/file.spec.ts
@@ -0,0 +1,77 @@
+const { detectIndexHtml } = require('@/utils/file')
+
+const mockFileParams = {
+ lastModified: 0,
+ webkitRelativePath: '',
+ size: 0,
+ type: '',
+ arrayBuffer: async () => new ArrayBuffer(0), // eslint-disable-line require-await
+ bytes: async () => new Uint8Array(0), // eslint-disable-line require-await
+ slice: () => new Blob(),
+ stream: () => new ReadableStream(),
+ text: async () => '', // eslint-disable-line require-await
+}
+
+describe('file utils', () => {
+ it('detectIndexHtml should find index.html with multiple files', () => {
+ expect(
+ detectIndexHtml([
+ { name: 'swarm.png', path: 'swarm.png', ...mockFileParams },
+ { name: 'index.html', path: 'index.html', ...mockFileParams },
+ ]),
+ ).toEqual({ indexPath: 'index.html' })
+ })
+
+ it('detectIndexHtml should find index.htm with multiple files', () => {
+ expect(
+ detectIndexHtml([
+ { name: 'index.htm', path: 'index.htm', ...mockFileParams },
+ { name: 'swarm.png', path: 'swarm.png', ...mockFileParams },
+ ]),
+ ).toEqual({ indexPath: 'index.htm' })
+ })
+
+ it('detectIndexHtml should NOT detect single index.html file as website', () => {
+ expect(detectIndexHtml([{ name: 'index.html', path: 'index.html', ...mockFileParams }])).toBe(false)
+ })
+
+ it('detectIndexHtml should NOT detect single index.htm file as website', () => {
+ expect(detectIndexHtml([{ name: 'index.htm', path: 'index.htm', ...mockFileParams }])).toBe(false)
+ })
+
+ it('detectIndexHtml should find nested index.html', () => {
+ expect(
+ detectIndexHtml([
+ { name: 'swarm.png', path: 'sample-folder/swarm.png', ...mockFileParams },
+ { name: 'index.html', path: 'sample-folder/index.html', ...mockFileParams },
+ ]),
+ ).toEqual({ indexPath: 'sample-folder/index.html', commonPrefix: 'sample-folder/' })
+ })
+
+ it('detectIndexHtml should not find nested index.htm when ambigous', () => {
+ expect(
+ detectIndexHtml([
+ { name: 'index.htm', path: 'sample-folder/index.htm', ...mockFileParams },
+ { name: 'swarm.png', path: 'other-folder/swarm.png', ...mockFileParams },
+ ]),
+ ).toBe(false)
+ })
+
+ it('detectIndexHtml should not find deep index.html', () => {
+ expect(
+ detectIndexHtml([
+ { name: 'index.html', path: 'sample-folder/index.html', ...mockFileParams },
+ { name: 'swarm.png', path: 'swarm.png', ...mockFileParams },
+ ]),
+ ).toBe(false)
+ })
+
+ it('detectIndexHtml should return false when no matches appear', () => {
+ expect(
+ detectIndexHtml([
+ { name: 'swarm.png', path: 'swarm.png', ...mockFileParams },
+ { name: 'swarm.jpg', path: 'swarm.jpg', ...mockFileParams },
+ ]),
+ ).toBe(false)
+ })
+})
diff --git a/tests/unit/utils.spec.ts b/tests/unit/utils.spec.ts
new file mode 100644
index 0000000..81cca63
--- /dev/null
+++ b/tests/unit/utils.spec.ts
@@ -0,0 +1,298 @@
+import {
+ extractEns,
+ extractSwarmCid,
+ extractSwarmHash,
+ isInteger,
+ makeBigNumber,
+ recognizeEnsOrSwarmHash,
+} from '@/utils'
+
+const { BigNumber } = require('bignumber.js')
+
+interface TestObject {
+ input: string
+ expectedOutput: string | undefined
+}
+
+const correctHashes: TestObject[] = [
+ // non-encrypted
+ {
+ input: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+ {
+ input: 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+ {
+ input: 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+ {
+ input: 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
+ expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+ {
+ input: 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
+ expectedOutput: 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+ // encrypted
+ {
+ input:
+ 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ expectedOutput:
+ 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+ {
+ input:
+ 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ expectedOutput:
+ 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+ {
+ input:
+ 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ expectedOutput:
+ 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+ {
+ input:
+ 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
+ expectedOutput:
+ 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+ {
+ input:
+ 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f/',
+ expectedOutput:
+ 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fb7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3f',
+ },
+]
+
+const wrongHashes: string[] = [
+ // one character too long
+ 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa',
+ 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa',
+ 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa',
+ 'http://gateway.org/bzz/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa/',
+ 'https://gateway.org/b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d3fa/',
+
+ // a bit shorter
+ 'b7e53783114e4555384d7fd7154eb8c2e3f7c749c176dcb8f4015b08161b3d',
+]
+
+const correctCids: TestObject[] = [
+ {
+ input: 'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.bzz.link',
+ expectedOutput: 'e80a3df165abbf275ae5480e9e51241d2e6368c4ed379771424af29ca35b29d4',
+ },
+ {
+ input: 'https://bah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vookq.bzz.link',
+ expectedOutput: 'd2f269c0b99d5bbbcdb93d7f0a85815ad23f851dd2fa94509124c401f7b57395',
+ },
+]
+
+const wrongCids: string[] = [
+ 'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.another.domain',
+ 'http://bah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vookq.bzz.link',
+ 'https://not_cid.bzz.link',
+ 'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.subdomain.bzz.link',
+ 'https://bah5acgza5afd34lfvo7sowxfjahj4ujeduxgg2ge5u3zo4kcjlzjzi23fhka.subdomain.bzz.link',
+ 'https://bah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vook.bzz.link',
+ 'https://aah5acgza2lzgtqfztvn3xtnzhv7qvbmblljd7bi52l5jiueretcad55vookq.bzz.link',
+]
+
+const correctEns: TestObject[] = [
+ {
+ input: 'test.eth',
+ expectedOutput: 'test.eth',
+ },
+ {
+ input: 't-est.eth',
+ expectedOutput: 't-est.eth',
+ },
+ {
+ input: 'http://test.eth/whatever',
+ expectedOutput: 'test.eth',
+ },
+ {
+ input: 'https://alice.test.eth?whatever',
+ expectedOutput: 'alice.test.eth',
+ },
+ {
+ input: 'swarm.example.eth/?id=1&page=2',
+ expectedOutput: 'swarm.example.eth',
+ },
+ {
+ input: 'http://swarm.example.eth#up',
+ expectedOutput: 'swarm.example.eth',
+ },
+ {
+ input: 'http://site.eth:8008',
+ expectedOutput: 'site.eth',
+ },
+]
+
+const wrongEns: string[] = ['http://test.ethereum/whatever']
+
+describe('utils', () => {
+ describe('extractSwarmCid', () => {
+ test('should correctly extract hash', () => {
+ correctCids.forEach(({ input, expectedOutput }) => {
+ const hash = extractSwarmCid(input)
+ expect(hash).toBe(expectedOutput)
+ })
+ })
+ test('should not extract cid from incorrect urls', () => {
+ wrongCids.forEach(url => {
+ const hash = extractSwarmCid(url)
+ expect(hash).toBe(undefined)
+ })
+ })
+ })
+
+ describe('extractEns', () => {
+ test('should correctly extract ens domain', () => {
+ correctEns.forEach(({ input, expectedOutput }) => {
+ const hash = extractEns(input)
+ expect(hash).toBe(expectedOutput)
+ })
+ })
+ test('should not extract ens from incorrect inputs', () => {
+ wrongEns.forEach(url => {
+ const hash = extractEns(url)
+ expect(hash).toBe(undefined)
+ })
+ })
+ })
+
+ describe('recognizeEnsOrSwarmHash', () => {
+ test('should correctly extract hash or ens', () => {
+ ;[...correctHashes, ...correctCids, ...correctEns].forEach(({ input, expectedOutput }) => {
+ const hash = recognizeEnsOrSwarmHash(input)
+ expect(hash).toBe(expectedOutput)
+ })
+ })
+ test('should not extract hash or ens from incorrect inputs but instead return them', () => {
+ ;[...wrongHashes, ...wrongCids, ...wrongEns].forEach(url => {
+ const hash = recognizeEnsOrSwarmHash(url)
+ expect(hash).toBe(url)
+ })
+ })
+ })
+
+ describe('isInteger', () => {
+ const correctValues = [
+ BigInt(0),
+ BigInt(1),
+ BigInt(-1),
+ new BigNumber('1'),
+ new BigNumber('0'),
+ new BigNumber('-1'),
+ ]
+ const wrongValues = ['1', new BigNumber('-0.1'), new BigNumber(NaN), new BigNumber(Infinity)]
+
+ correctValues.forEach(v => {
+ test(`testing ${v}`, () => {
+ expect(isInteger(v)).toBe(true)
+ })
+ })
+
+ wrongValues.forEach(v => {
+ test(`testing ${v}`, () => {
+ expect(isInteger(v)).toBe(false)
+ })
+ })
+ })
+
+ describe('makeBigNumber', () => {
+ const correctValues = [
+ BigInt(0),
+ BigInt(1),
+ BigInt(-1),
+ '1',
+ '0',
+ '-1',
+ '0.1',
+ new BigNumber('1'),
+ new BigNumber('0'),
+ new BigNumber('-1'),
+ 0,
+ 1,
+ -1,
+ ]
+ const wrongValues = [new Function()]
+
+ correctValues.forEach(v => {
+ test(`testing ${v}`, () => {
+ expect(BigNumber.isBigNumber(makeBigNumber(v))).toBe(true)
+ })
+ })
+
+ wrongValues.forEach(v => {
+ test(`testing ${v}`, () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ expect(() => makeBigNumber(v as unknown as any)).toThrow()
+ })
+ })
+ })
+
+ describe('extractSwarmHash', () => {
+ test('should return 64 hash', () => {
+ expect(extractSwarmHash('7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3')).toBe(
+ '7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3',
+ )
+ })
+
+ test('should return 128 hash', () => {
+ expect(
+ extractSwarmHash(
+ 'd1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f',
+ ),
+ ).toBe(
+ 'd1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f',
+ )
+ })
+
+ test('should return 64 hash from url', () => {
+ expect(
+ extractSwarmHash('http://localhost:1633/bzz/7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3/'),
+ ).toBe('7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81ac3')
+ })
+
+ test('should return 128 hash from url', () => {
+ expect(
+ extractSwarmHash(
+ 'http://localhost:1633/bzz/d1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f/',
+ ),
+ ).toBe(
+ 'd1829242c4d08e9f914fedfb1f68aacd62826d75370a9a57a80c9e6e6a49983c767c013be9aa4319e34fd8323ef0f2a57426b30e66c87e219f6f6359e2595e7f',
+ )
+ })
+
+ test('should return undefined when nothing is found', () => {
+ expect(extractSwarmHash('Bee Dashboard')).toBe(undefined)
+ })
+
+ test('should return undefined when length is incorrect', () => {
+ expect(extractSwarmHash('7f0fe712cdd78bdea52d040369eb32b6af5ecd01fa5ae49b7506412abdd81a')).toBe(undefined)
+ })
+
+ test('should return undefined when alphanumeric', () => {
+ expect(extractSwarmHash('gkQ6duo5iHJ099g908P0t17ZWFf8Ke2klrywLP5BGtLkcaEC5W0kLEfbe4wUnDI6')).toBe(undefined)
+ })
+
+ test('should correctly extract hash', () => {
+ correctHashes.forEach(({ input, expectedOutput }) => {
+ const hash = extractSwarmHash(input)
+ expect(hash).toBe(expectedOutput)
+ })
+ })
+ test('should not extract hash from incorrect inputs', () => {
+ wrongHashes.forEach(input => {
+ const hash = extractSwarmHash(input)
+ expect(hash).toBe(undefined)
+ })
+ })
+ })
+})
diff --git a/tsconfig.json b/tsconfig.json
index 271a52d..8a26162 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,8 @@
{
"compilerOptions": {
"baseUrl": ".",
- "target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
+ "target": "ES2022",
+ "lib": ["dom", "dom.iterable", "ES2022"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@@ -10,12 +10,16 @@
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
- "module": "esnext",
- "moduleResolution": "node",
+ "module": "ESNext",
+ "moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "paths": {
+ "@/*": ["src/*"]
+ }
},
- "include": ["src"]
+ "include": ["src", "tests"],
+ "exclude": ["node_modules", "dist"]
}
diff --git a/tsconfig.lib.json b/tsconfig.lib.json
index cf537f1..fa7eb50 100644
--- a/tsconfig.lib.json
+++ b/tsconfig.lib.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
- "target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "target": "ES2022",
+ "lib": ["dom", "dom.iterable", "ES2022"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@@ -13,16 +9,17 @@
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
- "module": "esnext",
+ "module": "ESNext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"outDir": "lib",
- "rootDirs": ["src"],
- "typeRoots": ["./src/@types", "node_modules/@types"]
+ "baseUrl": ".",
+ "typeRoots": ["./src/@types", "node_modules/@types"],
+ "paths": {
+ "@/*": ["src/*"]
+ }
},
- "include": [
- "src"
- ]
+ "include": ["src"]
}
diff --git a/utils/update-map-data.js b/utils/update-map-data.js
index 3900db9..c3800ff 100755
--- a/utils/update-map-data.js
+++ b/utils/update-map-data.js
@@ -1,4 +1,6 @@
#!/usr/bin/env node
+/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable no-console */
const axios = require('axios')
const fs = require('fs')
diff --git a/vite.config.mts b/vite.config.mts
new file mode 100644
index 0000000..86a479e
--- /dev/null
+++ b/vite.config.mts
@@ -0,0 +1,108 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import dts from 'vite-plugin-dts'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+
+const DEFAULT_VITE_DEV_PORT = 3002
+
+export default defineConfig(({ mode }) => {
+ const isProd = mode === 'production'
+ const isComponentBuild = process.env.BUILD_MODE === 'component'
+
+ if (isComponentBuild) {
+ return {
+ build: {
+ lib: {
+ entry: path.resolve(__dirname, 'src/App.tsx'),
+ name: 'beeDashboard',
+ fileName: format => `App.${format === 'es' ? 'js' : 'cjs.js'}`,
+ formats: ['es', 'cjs'],
+ },
+ sourcemap: !isProd,
+ minify: false,
+ outDir: 'lib',
+ rollupOptions: {
+ external: ['react', 'react-dom'],
+ output: {
+ globals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ },
+ assetFileNames: (assetInfo: any) => {
+ if (assetInfo.originalFileNames?.includes('style.css') || assetInfo.names?.includes('bee-dashboard.css'))
+ return 'App.css'
+ return assetInfo.names?.[0] || 'asset'
+ },
+ },
+ },
+ },
+ plugins: [
+ react(),
+ dts({
+ exclude: ['**/tests/**', 'src/index.tsx'],
+ outDir: 'lib',
+ entryRoot: 'src',
+ tsconfigPath: './tsconfig.lib.json',
+ }),
+ ],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, 'src'),
+ },
+ extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss'],
+ },
+ }
+ }
+
+ return {
+ plugins: [
+ react(),
+ nodePolyfills({
+ include: ['util', 'buffer'],
+ globals: {
+ Buffer: true,
+ global: true,
+ process: true,
+ },
+ }),
+ ],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, 'src'),
+ },
+ extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss'],
+ },
+ optimizeDeps: {
+ // exclude: [], // add libs for local development, if needed, e.g.: @solarpunkltd/file-manager-lib
+ },
+ build: {
+ outDir: 'build',
+ sourcemap: !isProd,
+ commonjsOptions: {
+ transformMixedEsModules: true,
+ },
+ rollupOptions: {
+ output: {
+ manualChunks(id) {
+ if (id.includes('node_modules')) {
+ if (id.includes('react') || id.includes('react-dom') || id.includes('@mui') || id.includes('@emotion'))
+ return 'vendor-react-mui'
+ if (id.includes('ethers') || id.includes('@ethersproject')) return 'vendor-ethers'
+ if (id.includes('@ethersphere/bee-js')) return 'vendor-bee-js'
+ if (id.includes('notistack')) return 'vendor-notistack'
+
+ // let Vite handle the rest
+ }
+ },
+ },
+ },
+ },
+ server: {
+ port: DEFAULT_VITE_DEV_PORT,
+ open: true,
+ },
+ publicDir: 'public',
+ assetsInclude: ['**/*.svg'],
+ }
+})
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index 03ad8d8..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Path = require('path')
-
-// eslint-disable-next-line import/no-anonymous-default-export
-module.exports = () => {
- const entry = Path.resolve(__dirname, 'src', 'App.tsx')
-
- return {
- mode: 'production',
- entry,
- output: {
- path: Path.resolve(__dirname, 'lib'),
- filename: 'App.js',
- library: 'beeDashboard',
- libraryTarget: 'umd',
- },
- resolve: {
- extensions: ['.css', '.png', '.svg', '.ttf', '.ts', '.tsx', '.js'],
- },
- devtool: 'source-map',
- externals: {
- // Use external version of React
- // react: 'root React',
- react: 'react',
- 'react-dom': 'react-dom',
- },
- target: 'web',
- optimization: {
- minimize: false,
- },
- module: {
- rules: [
- {
- test: /\.css$/i,
- use: ['style-loader', 'css-loader'],
- },
- {
- test: /\.scss$/i,
- use: ['style-loader', 'css-loader', 'sass-loader'],
- },
- {
- test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
- use: ['base64-inline-loader'],
- type: 'javascript/auto',
- },
- {
- test: /\.(ts|js|tsx|jsx)$/,
- exclude: /node_modules/,
- use: {
- loader: 'babel-loader',
- },
- },
- ],
- },
- }
-}
-
- )
-}
diff --git a/src/react-fs/CafeReactFsCreate.tsx b/src/react-fs/CafeReactFsCreate.tsx
deleted file mode 100644
index 33a395d..0000000
--- a/src/react-fs/CafeReactFsCreate.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useState } from 'react'
-import { CafeReactFsLoading } from './CafeReactFsLoading'
-
-interface Props {
- backgroundColor: string
- onCreateDirectory: () => Promise
- {loading && onUpload(path)}
- backgroundColor={backgroundColor ?? DEFAULT_BACKGROUND_COLOR}
- />
- onCreateDirectory(path)}
- backgroundColor={backgroundColor ?? DEFAULT_BACKGROUND_COLOR}
- />
-
-
- 
-
- )
-}
diff --git a/src/react-fs/CafeReactFsDelete.tsx b/src/react-fs/CafeReactFsDelete.tsx
deleted file mode 100644
index 281e11e..0000000
--- a/src/react-fs/CafeReactFsDelete.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-interface Props {
- onDelete: () => Promise
- - New Folder -
- {
- onDelete()
- event.stopPropagation()
- }}
- />
- )
-}
diff --git a/src/react-fs/CafeReactFsDirectory.tsx b/src/react-fs/CafeReactFsDirectory.tsx
deleted file mode 100644
index 4b573be..0000000
--- a/src/react-fs/CafeReactFsDirectory.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useState } from 'react'
-import { CafeReactFsDelete } from './CafeReactFsDelete'
-import { CafeReactFsLoading } from './CafeReactFsLoading'
-import { CafeReactFsName } from './CafeReactFsName'
-import { VirtualDirectory } from './CafeReactType'
-
-interface Props {
- directory: VirtualDirectory
- enterDirectory: (name: string) => void
- deleteDirectory: (name: string) => Promise enterDirectory(directory.name)}
- onMouseEnter={() => setHovered(true)}
- onMouseLeave={() => setHovered(false)}
- >
- {hovered && 
-
- )
-}
diff --git a/src/react-fs/CafeReactFsFile.tsx b/src/react-fs/CafeReactFsFile.tsx
deleted file mode 100644
index 212033a..0000000
--- a/src/react-fs/CafeReactFsFile.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useState } from 'react'
-import { CafeReactFsDelete } from './CafeReactFsDelete'
-import { CafeReactFsLoading } from './CafeReactFsLoading'
-import { CafeReactFsName } from './CafeReactFsName'
-import { VirtualFile } from './CafeReactType'
-import { joinUrl } from './Utility'
-
-interface Props {
- path: string
- file: VirtualFile
- download: (path: string) => Promise
- download(joinUrl(path, file.name))}
- onMouseEnter={() => setHovered(true)}
- onMouseLeave={() => setHovered(false)}
- style={{
- width: '80px',
- height: '80px',
- position: 'relative',
- background: backgroundColor,
- borderRadius: '2px',
- cursor: 'pointer',
- }}
- >
- {hovered && 
-
- )
-}
diff --git a/src/react-fs/CafeReactFsItem.tsx b/src/react-fs/CafeReactFsItem.tsx
deleted file mode 100644
index 9081e83..0000000
--- a/src/react-fs/CafeReactFsItem.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { CafeReactFsDirectory } from './CafeReactFsDirectory'
-import { CafeReactFsFile } from './CafeReactFsFile'
-import { FsItem, isVirtualDirectory, isVirtualFile } from './CafeReactType'
-
-interface Props {
- path: string
- item: FsItem
- download: (path: string) => Promise
-
-
-
-
-
- )
-}
diff --git a/src/react-fs/CafeReactFsName.tsx b/src/react-fs/CafeReactFsName.tsx
deleted file mode 100644
index 6aa5579..0000000
--- a/src/react-fs/CafeReactFsName.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-interface Props {
- name: string
-}
-
-export function CafeReactFsName({ name }: Props) {
- const shortName = name.length > 10 ? name.slice(0, 10) + '...' : name
-
- return (
- - {shortName} -
- ) -} diff --git a/src/react-fs/CafeReactFsPath.tsx b/src/react-fs/CafeReactFsPath.tsx deleted file mode 100644 index eef7a81..0000000 --- a/src/react-fs/CafeReactFsPath.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { joinUrl } from './Utility' - -interface Props { - pathParts: string[] - jumpToDirectory: (fullPath: string) => void - backgroundColor: string - rootAlias?: string -} - -export function CafeReactFsPath({ pathParts, jumpToDirectory, backgroundColor, rootAlias }: Props) { - const absolutePaths: string[] = [] - - for (const pathPart of pathParts) { - if (absolutePaths.length === 0) { - absolutePaths.push(pathPart) - } else { - absolutePaths.push(joinUrl(absolutePaths[absolutePaths.length - 1], pathPart)) - } - } - - return ( -
- {pathParts.map((part, index) => (
-
- ))}
-
- )
-}
diff --git a/src/react-fs/CafeReactFsSync.tsx b/src/react-fs/CafeReactFsSync.tsx
deleted file mode 100644
index 2e15d9f..0000000
--- a/src/react-fs/CafeReactFsSync.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-interface Props {
- backgroundColor: string
- onSync: () => Promise
- 
-
- )
-}
diff --git a/src/react-fs/CafeReactFsUpload.tsx b/src/react-fs/CafeReactFsUpload.tsx
deleted file mode 100644
index 63cedd8..0000000
--- a/src/react-fs/CafeReactFsUpload.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useState } from 'react'
-import { CafeReactFsLoading } from './CafeReactFsLoading'
-
-interface Props {
- onUpload: () => Promise
- - Sync -
-
- 
-
- )
-}
diff --git a/src/react-fs/CafeReactType.ts b/src/react-fs/CafeReactType.ts
deleted file mode 100644
index 87c57a6..0000000
--- a/src/react-fs/CafeReactType.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export enum FsItemType {
- FILE = 'file',
- DIRECTORY = 'directory',
-}
-
-export interface VirtualFile {
- id: string | number
- name: string
- $type: FsItemType.FILE
-}
-
-export interface VirtualDirectory {
- id: string | number
- name: string
- $type: FsItemType.DIRECTORY
-}
-
-export type FsItem = VirtualFile | VirtualDirectory
-
-export function isVirtualFile(item: FsItem): item is VirtualFile {
- return item.$type === FsItemType.FILE
-}
-
-export function isVirtualDirectory(item: FsItem): item is VirtualDirectory {
- return item.$type === FsItemType.DIRECTORY
-}
diff --git a/src/react-fs/Utility.ts b/src/react-fs/Utility.ts
deleted file mode 100644
index 6d0fd4b..0000000
--- a/src/react-fs/Utility.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export function joinUrl(...parts: unknown[]): string {
- return parts
- .filter(x => x)
- .join('/')
- .replace(/(? {
+const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void): void => {
if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry)
- getFID(onPerfEntry)
- getFCP(onPerfEntry)
- getLCP(onPerfEntry)
- getTTFB(onPerfEntry)
+ import('web-vitals').then(({ onCLS, onFCP, onLCP, onTTFB }) => {
+ onCLS(onPerfEntry)
+ onFCP(onPerfEntry)
+ onLCP(onPerfEntry)
+ onTTFB(onPerfEntry)
})
}
}
diff --git a/src/routes.tsx b/src/routes.tsx
index 2ebc23b..3cc74f9 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,34 +1,34 @@
import { ReactElement, useContext } from 'react'
import { Route, Routes } from 'react-router-dom'
+
import { AccountChequebook } from './pages/account/chequebook/AccountChequebook'
import { AccountFeeds } from './pages/account/feeds/AccountFeeds'
import { AccountStaking } from './pages/account/staking/AccountStaking'
import { AccountStamps } from './pages/account/stamps/AccountStamps'
import { AccountWallet } from './pages/account/wallet/AccountWallet'
-import FDP from './pages/fdp'
import CreateNewFeed from './pages/feeds/CreateNewFeed'
import { FeedSubpage } from './pages/feeds/FeedSubpage'
import UpdateFeed from './pages/feeds/UpdateFeed'
+import { FileManagerPage } from './pages/filemanager'
import { Download } from './pages/files/Download'
import { Share } from './pages/files/Share'
import { Upload } from './pages/files/Upload'
import { UploadLander } from './pages/files/UploadLander'
-import GiftCards from './pages/gift-code'
+import GiftCards from './pages/giftCode'
import Info from './pages/info'
+import PageNotFound from './pages/notFound/PageNotFound'
import LightModeRestart from './pages/restart/LightModeRestart'
import Settings from './pages/settings'
import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampAdvancedPage'
import { CreatePostageStampBasicPage } from './pages/stamps/CreatePostageStampStandardPage'
import Status from './pages/status'
-import TopUp from './pages/top-up'
-import { BankCardTopUpIndex } from './pages/top-up/BankCardTopUpIndex'
-import { CryptoTopUpIndex } from './pages/top-up/CryptoTopUpIndex'
-import { GiftCardFund } from './pages/top-up/GiftCardFund'
-import { GiftCardTopUpIndex } from './pages/top-up/GiftCardTopUpIndex'
-import { Swap } from './pages/top-up/Swap'
+import TopUp from './pages/topUp'
+import { BankCardTopUpIndex } from './pages/topUp/BankCardTopUpIndex'
+import { CryptoTopUpIndex } from './pages/topUp/CryptoTopUpIndex'
+import { GiftCardFund } from './pages/topUp/GiftCardFund'
+import { GiftCardTopUpIndex } from './pages/topUp/GiftCardTopUpIndex'
+import { Swap } from './pages/topUp/Swap'
import { Context as SettingsContext } from './providers/Settings'
-import { FileManagerPage } from './pages/filemanager'
-import PageNotFound from './pages/not-found/PageNotFound'
export enum ROUTES {
INFO = '/',
@@ -59,7 +59,6 @@ export enum ROUTES {
ACCOUNT_FEEDS_VIEW = '/account/feeds/view/:uuid',
ACCOUNT_INVITATIONS = '/account/invitations',
ACCOUNT_STAKING = '/account/staking',
- FDP = '/fdp',
}
export const ACCOUNT_TABS = [
@@ -101,7 +100,6 @@ const BaseRouter = (): ReactElement => {
- - Upload -
-