Something went wrong. Error: {this.state.error.message}
\n }\n\n return this.props.children\n }\n}\n","import { Bee, BeeDebug } from '@ethersphere/bee-js'\nimport { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'\nimport { config } from '../config'\n\ninterface ContextInterface {\n apiUrl: string\n apiDebugUrl: string\n beeApi: Bee | null\n beeDebugApi: BeeDebug | null\n setApiUrl: (url: string) => void\n setDebugApiUrl: (url: string) => void\n lockedApiSettings: boolean\n}\n\nconst initialValues: ContextInterface = {\n apiUrl: config.BEE_API_HOST,\n apiDebugUrl: config.BEE_DEBUG_API_HOST,\n beeApi: null,\n beeDebugApi: null,\n setApiUrl: () => {}, // eslint-disable-line\n setDebugApiUrl: () => {}, // eslint-disable-line\n lockedApiSettings: false,\n}\n\nexport const Context = createContext\n {\n setOpen(false)\n }}\n >\n Warning \n Your Bee node version (
\n {latestUserVersionExact}) does not exactly match the Bee version we tested\n the Bee Dashboard against ({SUPPORTED_BEE_VERSION_EXACT}). Please note that some functionality\n may not work properly.\n \n \n \n {label}} />\n \n \n \n
\n )\n}\n","import { ReactElement, ReactNode } from 'react'\nimport { makeStyles, Theme, createStyles } from '@material-ui/core/styles'\nimport { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'\nimport { Info } from 'react-feather'\nimport ListItem from '@material-ui/core/ListItem'\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n header: {\n backgroundColor: theme.palette.background.paper,\n marginBottom: theme.spacing(0.25),\n wordBreak: 'break-word',\n },\n copyValue: {\n cursor: 'pointer',\n padding: theme.spacing(1),\n borderRadius: 0,\n '&:hover': {\n backgroundColor: '#fcf2e8',\n color: theme.palette.primary.main,\n },\n },\n }),\n)\n\ninterface Props {\n label?: ReactNode\n value?: ReactNode\n tooltip?: string\n}\n\nexport default function ExpandableListItem({ label, value, tooltip }: Props): ReactElement | null {\n const classes = useStyles()\n\n return (\n \n {!open && (\n \n {info}\n \n )}\n {open ?
\n {children}
\n \n {children\n // Exclude falsy values to allow conditional rendering\n .filter(x => x)\n .map((a, i) => (\n
\n )\n }\n\n return (\n \n {a}\n
\n ))}\n \n {!open && (\n \n \n \n {value ? spanText : ''}\n \n \n \n )}\n \n {open ? \n
\n \n \n \n {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}\n \n \n {splitValues.map((s, i) => (\n \n {s}\n \n ))}\n \n \n \n \n
\n \n \n \n \n \n
\n )\n}\n","import { ReactElement, useState } from 'react'\nimport QRCode from 'qrcode.react'\nimport { IconButton, Dialog, DialogTitle } from '@material-ui/core'\nimport { FilterCenterFocusSharp } from '@material-ui/icons'\n\ninterface Props {\n value: string\n label: string\n}\n\nexport default function QRCodeModal(props: Props): ReactElement {\n const [open, setOpen] = useState(false)\n\n const handleOpen = () => {\n setOpen(true)\n }\n\n const handleClose = () => {\n setOpen(false)\n }\n\n return (\n \n \n \n \n
\n )\n}\n","import { Typography } from '@material-ui/core/'\nimport { ReactElement } from 'react'\nimport Identicon from 'react-identicons'\nimport { config } from '../config'\nimport ClipboardCopy from './ClipboardCopy'\nimport QRCodeModal from './QRCodeModal'\n\ninterface Props {\n address: string | undefined\n hideBlockie?: boolean\n transaction?: boolean\n truncate?: boolean\n}\n\nexport default function EthereumAddress(props: Props): ReactElement {\n return (\n \n {props.hideBlockie ? null : (\n
\n ) : (\n '-'\n )}\n \n
\n )}\n \n \n {props.address}\n \n
\n \n }>\n Cash out peer {peerId.substr(0, 8)}[…]\n \n \n
\n )\n}\n","import type { ReactElement } from 'react'\n\nimport ExpandableList from '../../components/ExpandableList'\nimport ExpandableListItem from '../../components/ExpandableListItem'\nimport ExpandableListItemActions from '../../components/ExpandableListItemActions'\nimport ExpandableListItemKey from '../../components/ExpandableListItemKey'\n\nimport CashoutModal from '../../components/CashoutModal'\nimport { Accounting } from '../../hooks/accounting'\nimport type { Token } from '../../models/Token'\n\ninterface Props {\n isLoadingUncashed: boolean\n totalUncashed: Token\n accounting: Accounting[] | null\n}\n\nexport default function PeerBalances({ accounting, isLoadingUncashed, totalUncashed }: Props): ReactElement | null {\n return (\n \n \n \n
\n )\n}\n","import { BigNumber } from 'bignumber.js'\nimport { ReactElement, useContext } from 'react'\nimport { Upload } from 'react-feather'\nimport WithdrawDepositModal from '../components/WithdrawDepositModal'\nimport { Context as SettingsContext } from '../providers/Settings'\n\nexport default function WithdrawModal(): ReactElement {\n const { beeDebugApi } = useContext(SettingsContext)\n\n return (\n \n \n \n \n \n \n \n
\n )\n}\n","import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'\nimport React, { ReactElement } from 'react'\nimport { IconProps } from 'react-feather'\n\ninterface Props {\n onClick: () => void\n iconType: React.ComponentType\n
\n )}\n \n )\n}\n","import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'\n\nexport type IdentityType = 'V3' | 'PRIVATE_KEY'\n\nexport interface Identity {\n uuid: string\n name: string\n feedHash?: string\n identity: string\n address: string\n type: IdentityType\n}\n\ninterface ContextInterface {\n identities: Identity[]\n setIdentities: (identities: Identity[]) => void\n}\n\nconst initialValues: ContextInterface = {\n identities: [],\n setIdentities: () => {}, // eslint-disable-line\n}\n\nexport const Context = createContext\n
\n )\n}\n","import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'\nimport { ReactElement } from 'react'\nimport { CloseButton } from './CloseButton'\n\ninterface Props {\n children: string\n onClose: () => void\n}\n\nconst useStyles = makeStyles(() =>\n createStyles({\n text: {\n color: '#606060',\n fontWeight: 'bold',\n },\n }),\n)\n\nexport function TitleWithClose({ children, onClose }: Props): ReactElement {\n const classes = useStyles()\n\n return (\n \n
\n )\n}\n","import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'\nimport { saveAs } from 'file-saver'\nimport { useSnackbar } from 'notistack'\nimport { ReactElement } from 'react'\nimport { Clipboard, Download } from 'react-feather'\nimport { Code } from '../../components/Code'\nimport ExpandableListItemActions from '../../components/ExpandableListItemActions'\nimport { SwarmButton } from '../../components/SwarmButton'\nimport { SwarmDialog } from '../../components/SwarmDialog'\nimport { TitleWithClose } from '../../components/TitleWithClose'\nimport { Identity } from '../../providers/Feeds'\n\ninterface Props {\n identity: Identity\n onClose: () => void\n}\n\nconst useStyles = makeStyles(() =>\n createStyles({\n wrapper: {\n maxWidth: '100%',\n },\n }),\n)\n\nexport function ExportFeedDialog({ identity, onClose }: Props): ReactElement {\n const { enqueueSnackbar } = useSnackbar()\n\n const classes = useStyles()\n\n function onDownload() {\n saveAs(\n new Blob([identity.identity], {\n type: 'application/json',\n }),\n identity.name + '.json',\n )\n }\n\n function getExportText() {\n return identity.type === 'V3' ? 'JSON file' : 'the private key string'\n }\n\n function onCopy() {\n navigator.clipboard\n .writeText(identity.identity)\n .then(() => enqueueSnackbar('Copied to Clipboard', { variant: 'success' }))\n }\n\n return (\n {prettify ? prettifyString(children) : children}\n {identity.identity}\n \n {showImport && setShowImport(false)} />}\n {showExport && selectedIdentity && onDelete(identity)}\n />\n )}\n \n Feeds \n \n \n \n \n Create New Feed\n \n setShowImport(true)}>\n Import Feed\n \n \n \n {identities.map((x, i) => (\n \n \n \n \n \n \n \n viewFeed(x.uuid)} iconType={Info}>\n View Feed Page\n \n onShowExport(x)} iconType={Download}>\n Export...\n \n onShowDelete(x)} iconType={Trash}>\n Delete...\n \n \n \n \n ))}\n
\n )\n}\n","import { createStyles, makeStyles, Typography } from '@material-ui/core'\nimport { ReactElement } from 'react'\n\ninterface Props {\n children: (string | ReactElement)[] | (string | ReactElement)\n}\n\nconst useStyles = makeStyles(() =>\n createStyles({\n text: {\n color: '#606060',\n fontSize: '0.9rem',\n },\n }),\n)\n\nexport function DocumentationText({ children }: Props): ReactElement {\n const classes = useStyles()\n\n return \n
\n \n Create new feed \n \n \n To create a feed you will need to create an identity. Please refer to the{' '}\n \n official Bee documentation\n {' '}\n to understand how feeds work.\n \n \n \n {({ submitForm, values }) => (\n \n )}\n \n
\n )\n}\n","import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles'\nimport { ArrowForward, OpenInNewSharp } from '@material-ui/icons'\nimport { ReactElement, useState } from 'react'\nimport CopyToClipboard from 'react-copy-to-clipboard'\nimport { useNavigate } from 'react-router'\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n header: {\n backgroundColor: theme.palette.background.paper,\n marginBottom: theme.spacing(0.25),\n borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,\n wordBreak: 'break-word',\n },\n headerOpen: {\n borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,\n },\n openLinkIcon: {\n cursor: 'pointer',\n padding: theme.spacing(1),\n borderRadius: 0,\n '&:hover': {\n backgroundColor: '#fcf2e8',\n color: theme.palette.primary.main,\n },\n },\n content: {\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n },\n keyMargin: {\n marginRight: theme.spacing(1),\n },\n copyValue: {\n cursor: 'pointer',\n padding: theme.spacing(1),\n borderRadius: 0,\n '&:hover': {\n backgroundColor: '#fcf2e8',\n color: theme.palette.primary.main,\n },\n },\n }),\n)\n\ninterface Props {\n label: string\n value: string\n link?: string\n navigationType?: 'NEW_WINDOW' | 'HISTORY_PUSH'\n allowClipboard?: boolean\n}\n\nexport default function ExpandableListItemLink({\n label,\n value,\n link,\n navigationType = 'NEW_WINDOW',\n allowClipboard = true,\n}: Props): ReactElement | null {\n const classes = useStyles()\n const [copied, setCopied] = useState(false)\n const navigate = useNavigate()\n\n const tooltipClickHandler = () => setCopied(true)\n const tooltipCloseHandler = () => setCopied(false)\n\n const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value\n\n function onNavigation() {\n if (navigationType === 'NEW_WINDOW') {\n window.open(link || value)\n } else {\n navigate(link || value)\n }\n }\n\n return (\n \n {allowClipboard && (\n \n \n \n {displayValue}\n \n \n \n )}\n {!allowClipboard && {displayValue}}\n \n {navigationType === 'NEW_WINDOW' && \n
\n \n
\n {showHelp && (\n \n \n Add File\n \n \n Add Folder\n \n \n Add Website\n \n
\n \n {`${identity.name} Website`} \n \n \n \n \n \n ) : (\n \n \n This feed is curently not pointing anywhere, you can update the feed to fix this. Please refer to the{' '}\n \n official Bee documentation\n \n .\n \n \n )}\n \n \n Close\n \n \n
\n )\n}\n","import { PostageBatch } from '@ethersphere/bee-js'\nimport { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'\nimport { Context as SettingsContext } from './Settings'\n\nexport interface EnrichedPostageBatch extends PostageBatch {\n usage: number\n usageText: string\n}\n\ninterface ContextInterface {\n stamps: EnrichedPostageBatch[] | null\n error: Error | null\n isLoading: boolean\n lastUpdate: number | null\n start: (frequency?: number) => void\n stop: () => void\n refresh: () => Promise\n {showPasswordPrompt && selectedIdentity && (\n {\n setShowPasswordPrompt(false)\n }}\n onProceed={(password: string) => {\n onFeedUpdate(selectedIdentity, password)\n }}\n loading={loading}\n />\n )}\n Update feed \n \n \n ({ value: x.uuid, label: `${x.name} Website` }))}\n onChange={onFeedChange}\n label=\"Feed\"\n />\n \n \n\n \n \n {stamps ? (\n ({ value: x.batchID, label: x.batchID.slice(0, 8) }))}\n onChange={onStampChange}\n label=\"Stamp\"\n />\n ) : (\n You need to buy a stamp first to be able to update a feed. \n )}\n \n \n \n \n Update Selected Feed\n \n \n Close\n \n \n
\n )\n}\n","import { ReactElement, ReactNode } from 'react'\nimport { makeStyles, Theme, createStyles } from '@material-ui/core/styles'\nimport { Typography } from '@material-ui/core'\nimport ListItem from '@material-ui/core/ListItem'\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n header: {\n backgroundColor: '#F7F7F7',\n marginBottom: theme.spacing(0.25),\n },\n typography: {\n color: '#242424',\n },\n }),\n)\n\ninterface Props {\n children?: ReactNode | ReactNode[]\n}\n\nexport default function ExpandableListItemNote({ children }: Props): ReactElement | null {\n const classes = useStyles()\n\n return (\n \n {!open && value}\n {!expandedOnly && !locked && (\n \n {open ? (\n \n )}\n
\n \n \n \n
\n )\n}\n","import { Utils } from '@ethersphere/bee-js'\nimport { ManifestJs } from '@ethersphere/manifest-js'\nimport { useSnackbar } from 'notistack'\nimport { ReactElement, useContext, useState } from 'react'\nimport { useNavigate } from 'react-router-dom'\nimport ExpandableListItemInput from '../../components/ExpandableListItemInput'\nimport { History } from '../../components/History'\nimport { Context, defaultUploadOrigin } from '../../providers/File'\nimport { Context as SettingsContext } from '../../providers/Settings'\nimport { ROUTES } from '../../routes'\nimport { extractSwarmHash } from '../../utils'\nimport { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'\nimport { FileNavigation } from './FileNavigation'\n\nexport function Download(): ReactElement {\n const [loading, setLoading] = useState(false)\n const { beeApi } = useContext(SettingsContext)\n const [referenceError, setReferenceError] = useState{children}
\n}\n","import { ReactElement } from 'react'\nimport { StripedWrapper } from '../../components/StripedWrapper'\n\ninterface Props {\n icon: ReactElement\n}\n\nexport function AssetIcon({ icon }: Props): ReactElement {\n return \n {x} \n
\n ))}\n \n
\n )\n}\n","import { Box, Grid, Typography } from '@material-ui/core'\nimport { ReactElement } from 'react'\nimport { Capacity } from '../../components/Capacity'\nimport { EnrichedPostageBatch } from '../../providers/Stamps'\n\ninterface Props {\n stamp: EnrichedPostageBatch\n shorten?: boolean\n}\n\nexport function PostageStamp({ stamp, shorten }: Props): ReactElement {\n return (\n \n \n \n \n
\n \n \n \n \n Bee\n \n {` ${latestUserVersion || '-'} `}\n \n
\n }\n />\n \n \n {children}\n {open ? \n \n \n
\n )\n}\n","import type { ReactElement } from 'react'\nimport ExpandableElement from '../../components/ExpandableElement'\nimport ExpandableList from '../../components/ExpandableList'\nimport ExpandableListItem from '../../components/ExpandableListItem'\nimport ExpandableListItemKey from '../../components/ExpandableListItemKey'\nimport { EnrichedPostageBatch } from '../../providers/Stamps'\nimport { getHumanReadableFileSize } from '../../utils/file'\nimport { PostageStamp } from './PostageStamp'\n\ninterface Props {\n postageStamps: EnrichedPostageBatch[] | null\n}\n\nfunction StampsTable({ postageStamps }: Props): ReactElement | null {\n if (postageStamps === null) return null\n\n return (\n {expandable}
\n \n {error && (\n \n Error loading postage stamps details: {error.message}\n \n )}\n {!error && (\n <>\n
\n )\n}\n","import { ReactElement } from 'react'\nimport { useNavigate } from 'react-router'\nimport { HistoryHeader } from '../../components/HistoryHeader'\nimport { ROUTES } from '../../routes'\nimport { PostageStampCreation } from './PostageStampCreation'\n\nexport function CreatePostageStampPage(): ReactElement {\n const navigate = useNavigate()\n\n function onFinished() {\n navigate(ROUTES.STAMPS)\n }\n\n return (\n \n \n Buy New Postage Stamp\n \n
\n {isLoading &&
\n \n Buy new postage stamp \n
\n )\n}\n","import React, { ReactElement, ReactNode } from 'react'\nimport { makeStyles, Theme, createStyles } from '@material-ui/core/styles'\nimport { Tab, Tabs } from '@material-ui/core'\n\ninterface TabPanelProps {\n children?: ReactNode\n index: number\n value: number\n}\n\nfunction TabPanel(props: TabPanelProps) {\n const { children, value, index, ...other } = props\n\n return (\n \n {value === index && children}\n
\n )\n}\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n },\n content: {\n marginTop: theme.spacing(2),\n },\n }),\n)\n\ninterface TabsValues {\n component: ReactNode\n label: ReactNode\n}\n\ninterface Props {\n values: TabsValues[]\n index?: number\n indexChanged?: (index: number) => void\n}\n\nexport default function SimpleTabs({ values, index, indexChanged }: Props): ReactElement {\n const classes = useStyles()\n const [value, setValue] = React.useState\n \n {values.map(({ label }, idx) => (\n \n
\n )\n}\n","import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'\n\n// These need to be numeric values as they are used as indexes in the TabsContainer\nexport enum Platforms {\n macOS = 0,\n Linux,\n Windows,\n iOS,\n Android,\n}\n\nexport enum SupportedPlatforms {\n macOS = Platforms.macOS,\n Linux = Platforms.Linux,\n}\n\ninterface ContextInterface {\n platform: SupportedPlatforms\n setPlatform: (platform: SupportedPlatforms) => void\n}\n\nconst initialValues: ContextInterface = {\n platform: SupportedPlatforms.macOS,\n setPlatform: () => {}, // eslint-disable-line\n}\n\nexport const Context = createContext\n {values.map(({ component }, idx) => (\n \n {component}\n \n ))}\n
\n \n \n {props.code}\n \n
\n )\n}\n\nexport default CodeBlock\n","import { ReactElement, useContext } from 'react'\nimport TabsContainer from './TabsContainer'\nimport CodeBlock from './CodeBlock'\nimport { Context } from '../providers/Platform'\n\ninterface Props {\n linux: string\n mac: string\n showLineNumbers?: boolean\n}\n\nexport default function CodeBlockTabs(props: Props): ReactElement {\n const { platform, setPlatform } = useContext(Context)\n\n return (\n {\"cors-allowed-origins: ['*']\"}). If edits are made to the configuration run the\n restart command below for changes to take effect.\n \n
\n )\n}\n","import { Box, Typography } from '@material-ui/core'\nimport { ReactElement, useEffect, useState } from 'react'\nimport { Send } from 'react-feather'\nimport { Loading } from '../../components/Loading'\nimport { SwarmButton } from '../../components/SwarmButton'\nimport { SwarmTextInput } from '../../components/SwarmTextInput'\n\nexport default function UpgradePage(): ReactElement {\n const [node, setNode] = useState\n Already upgraded \n
\n )\n }\n\n return (\n \n \n \n Fund\n \n \n \n {\n setRpcProvider(event.target.value)\n }}\n />\n \n \n Upgrade to Light Node\n \n
\n )\n}\n","import type { ReactElement, ReactNode } from 'react'\nimport { useLocation, matchPath } from 'react-router-dom'\n\nimport { createStyles, Theme, makeStyles, withStyles } from '@material-ui/core/styles'\nimport { ListItemText, ListItemIcon, ListItem } from '@material-ui/core'\n\nconst StyledListItem = withStyles((theme: Theme) => ({\n root: {\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(4),\n borderLeft: '4px solid rgba(0,0,0,0)',\n '&.Mui-selected, &.Mui-selected:hover': {\n borderLeft: `4px solid ${theme.palette.primary.main}`,\n backgroundColor: '#2c2c2c',\n color: '#f9f9f9',\n },\n },\n button: {\n '&:hover': {\n backgroundColor: '#2c2c2c',\n color: '#f9f9f9',\n\n // https://github.com/mui-org/material-ui/issues/22543\n '@media (hover: none)': {\n backgroundColor: '#2c2c2c',\n color: '#f9f9f9',\n },\n },\n },\n}))(ListItem)\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n icon: {\n color: 'inherit',\n },\n activeIcon: {\n color: theme.palette.primary.main,\n },\n }),\n)\n\ninterface Props {\n iconStart?: ReactNode\n iconEnd?: ReactNode\n path?: string\n label: ReactNode\n}\n\nexport default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {\n const classes = useStyles()\n const location = useLocation()\n const isSelected = Boolean(path && matchPath(location.pathname, path))\n\n return (\n - \n {navBarItems.map(p => (\n \n
- \n
\n \n \n <>\n \n \n
\n )\n}\n\nexport default Dashboard\n","import { createTheme, Theme } from '@material-ui/core/styles'\nimport { orange } from '@material-ui/core/colors'\n\ndeclare module '@material-ui/core/styles/createPalette' {\n interface TypeBackground {\n appBar: string\n }\n}\n\n// Overwriting default components styles\nconst componentsOverrides = (theme: Theme) => ({\n MuiListItem: {\n button: {\n '&:hover': {\n backgroundColor: '#fcf2e8',\n color: theme.palette.primary.main,\n // https://github.com/mui-org/material-ui/issues/22543\n '@media (hover: none)': {\n backgroundColor: '#fcf2e8',\n color: theme.palette.primary.main,\n },\n },\n },\n },\n MuiContainer: {\n root: { padding: theme.spacing(8) },\n maxWidthXs: { padding: theme.spacing(8) },\n maxWidthSm: { padding: theme.spacing(8) },\n maxWidthMd: { padding: theme.spacing(8) },\n maxWidthLg: { padding: theme.spacing(8) },\n maxWidthXl: { padding: theme.spacing(8) },\n },\n MuiButton: {\n startIcon: { marginLeft: theme.spacing(1) },\n endIcon: { marginRight: theme.spacing(1) },\n outlined: {\n border: 'none',\n borderRadius: theme.spacing(10),\n color: theme.palette.primary.main,\n backgroundColor: '#fcf2e8',\n },\n outlinedSizeSmall: {\n padding: theme.spacing(1),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n boxShadow: 'none',\n '&:hover': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n // https://github.com/mui-org/material-ui/issues/22543\n '@media (hover: none)': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n },\n },\n },\n outlinedSizeLarge: {\n padding: theme.spacing(4),\n borderRadius: 0,\n boxShadow: 'none',\n '&:hover': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n // https://github.com/mui-org/material-ui/issues/22543\n '@media (hover: none)': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n },\n },\n },\n containedSizeLarge: {\n padding: theme.spacing(4),\n borderRadius: 0,\n boxShadow: 'none',\n '&:hover': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n // https://github.com/mui-org/material-ui/issues/22543\n '@media (hover: none)': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n },\n },\n },\n containedSizeSmall: {\n padding: theme.spacing(1),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n borderRadius: 0,\n boxShadow: 'none',\n '&:hover': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n // https://github.com/mui-org/material-ui/issues/22543\n '@media (hover: none)': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n },\n },\n },\n contained: {\n padding: theme.spacing(2),\n backgroundColor: 'white',\n boxShadow: 'none',\n borderRadius: 0,\n '&:hover': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n // https://github.com/mui-org/material-ui/issues/22543\n '@media (hover: none)': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n boxShadow: 'none',\n },\n },\n '&:focus': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n },\n '&:active': {\n backgroundColor: theme.palette.primary.main,\n color: 'white',\n },\n '&:disabled': {\n backgroundColor: 'white',\n },\n },\n },\n MuiTab: {\n root: {\n backgroundColor: theme.palette.background.paper,\n '&:hover': {\n backgroundColor: '#fcf2e8',\n color: theme.palette.primary.main,\n opacity: 1,\n },\n '&$selected': {\n fontWeight: theme.typography.fontWeightMedium,\n },\n },\n textColorInherit: {\n opacity: 0.5,\n },\n },\n MuiTabs: {\n root: {\n borderBottom: 'none',\n },\n indicator: {\n backgroundColor: 'transparent',\n },\n },\n})\n\nconst propsOverrides = {\n MuiTab: {\n disableRipple: true,\n },\n MuiButtonBase: {\n disableRipple: true,\n },\n}\n\nexport const theme = createTheme({\n palette: {\n type: 'light',\n background: {\n default: '#efefef',\n },\n primary: {\n light: '#fcf2e8',\n main: '#dd7700',\n dark: orange[800],\n },\n secondary: {\n main: '#333333',\n },\n },\n typography: {\n fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '\"Helvetica Neue\"', 'Arial', 'sans-serif'].join(','),\n h1: {\n fontSize: '1.3rem',\n fontWeight: 500,\n },\n h2: {\n fontSize: '1rem',\n fontWeight: 500,\n },\n h3: {\n fontSize: '0.8rem',\n fontWeight: 500,\n },\n body2: {\n fontFamily: '\"IBM Plex Mono\", monospace',\n fontWeight: 500,\n fontSize: '1rem',\n },\n },\n})\n\ntheme.overrides = componentsOverrides(theme)\ntheme.props = propsOverrides\n","import CssBaseline from '@material-ui/core/CssBaseline'\nimport { ThemeProvider } from '@material-ui/core/styles'\nimport { SnackbarProvider } from 'notistack'\nimport React, { ReactElement } from 'react'\nimport { HashRouter as Router } from 'react-router-dom'\nimport './App.css'\nimport Dashboard from './layout/Dashboard'\nimport { Provider as BeeProvider } from './providers/Bee'\nimport { Provider as FeedsProvider } from './providers/Feeds'\nimport { Provider as FileProvider } from './providers/File'\nimport { Provider as PlatformProvider } from './providers/Platform'\nimport { Provider as SettingsProvider } from './providers/Settings'\nimport { Provider as StampsProvider } from './providers/Stamps'\nimport BaseRouter from './routes'\nimport { theme } from './theme'\n\ninterface Props {\n beeApiUrl?: string\n beeDebugApiUrl?: string\n lockedApiSettings?: boolean\n}\n\nconst App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (\n \n
\n ) : (\n props.children\n )}\n \n \n \n \n \n \n \n \n \n \n \n <>\n \n \n \n \n \n \n \n \n \n \n \n \n
\n)\n\nexport default App\n","import { ReportHandler } from 'web-vitals'\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler): void => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry)\n getFID(onPerfEntry)\n getFCP(onPerfEntry)\n getLCP(onPerfEntry)\n getTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport './index.css'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n Something went wrong. Error: {this.state.error.message}
\n }\n\n return this.props.children\n }\n}\n","import { Bee, BeeDebug } from '@ethersphere/bee-js'\nimport { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'\nimport { config } from '../config'\n\ninterface ContextInterface {\n apiUrl: string\n apiDebugUrl: string\n beeApi: Bee | null\n beeDebugApi: BeeDebug | null\n setApiUrl: (url: string) => void\n setDebugApiUrl: (url: string) => void\n lockedApiSettings: boolean\n}\n\nconst initialValues: ContextInterface = {\n apiUrl: config.BEE_API_HOST,\n apiDebugUrl: config.BEE_DEBUG_API_HOST,\n beeApi: null,\n beeDebugApi: null,\n setApiUrl: () => {}, // eslint-disable-line\n setDebugApiUrl: () => {}, // eslint-disable-line\n lockedApiSettings: false,\n}\n\nexport const Context = createContext\n {\n setOpen(false)\n }}\n >\n Warning \n Your Bee node version (
\n {latestUserVersionExact}) does not exactly match the Bee version we tested\n the Bee Dashboard against ({SUPPORTED_BEE_VERSION_EXACT}). Please note that some functionality\n may not work properly.\n \n \n \n {label}} />\n \n \n \n
\n )\n}\n","import { ReactElement, ReactNode } from 'react'\nimport { makeStyles, Theme, createStyles } from '@material-ui/core/styles'\nimport { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'\nimport { Info } from 'react-feather'\nimport ListItem from '@material-ui/core/ListItem'\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n header: {\n backgroundColor: theme.palette.background.paper,\n marginBottom: theme.spacing(0.25),\n wordBreak: 'break-word',\n },\n copyValue: {\n cursor: 'pointer',\n padding: theme.spacing(1),\n borderRadius: 0,\n '&:hover': {\n backgroundColor: '#fcf2e8',\n color: theme.palette.primary.main,\n },\n },\n }),\n)\n\ninterface Props {\n label?: ReactNode\n value?: ReactNode\n tooltip?: string\n}\n\nexport default function ExpandableListItem({ label, value, tooltip }: Props): ReactElement | null {\n const classes = useStyles()\n\n return (\n \n {!open && (\n \n {info}\n \n )}\n {open ?
\n {children}
\n \n {children\n // Exclude falsy values to allow conditional rendering\n .filter(x => x)\n .map((a, i) => (\n
\n )\n }\n\n return (\n \n {a}\n
\n ))}\n \n {!open && (\n \n \n \n {value ? spanText : ''}\n \n \n \n )}\n \n {open ? \n
\n \n \n \n {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}\n \n \n {splitValues.map((s, i) => (\n \n {s}\n \n ))}\n \n \n \n \n
\n \n \n \n \n \n
\n )\n}\n","import { ReactElement, useState } from 'react'\nimport QRCode from 'qrcode.react'\nimport { IconButton, Dialog, DialogTitle } from '@material-ui/core'\nimport { FilterCenterFocusSharp } from '@material-ui/icons'\n\ninterface Props {\n value: string\n label: string\n}\n\nexport default function QRCodeModal(props: Props): ReactElement {\n const [open, setOpen] = useState(false)\n\n const handleOpen = () => {\n setOpen(true)\n }\n\n const handleClose = () => {\n setOpen(false)\n }\n\n return (\n \n \n \n \n
\n )\n}\n","import { Typography } from '@material-ui/core/'\nimport { ReactElement } from 'react'\nimport Identicon from 'react-identicons'\nimport { config } from '../config'\nimport ClipboardCopy from './ClipboardCopy'\nimport QRCodeModal from './QRCodeModal'\n\ninterface Props {\n address: string | undefined\n hideBlockie?: boolean\n transaction?: boolean\n truncate?: boolean\n}\n\nexport default function EthereumAddress(props: Props): ReactElement {\n return (\n \n {props.hideBlockie ? null : (\n
\n ) : (\n '-'\n )}\n \n
\n )}\n \n \n {props.address}\n \n
\n \n }>\n Cash out peer {peerId.substr(0, 8)}[…]\n \n \n
\n )\n}\n","import type { ReactElement } from 'react'\n\nimport ExpandableList from '../../components/ExpandableList'\nimport ExpandableListItem from '../../components/ExpandableListItem'\nimport ExpandableListItemActions from '../../components/ExpandableListItemActions'\nimport ExpandableListItemKey from '../../components/ExpandableListItemKey'\n\nimport CashoutModal from '../../components/CashoutModal'\nimport { Accounting } from '../../hooks/accounting'\nimport type { Token } from '../../models/Token'\n\ninterface Props {\n isLoadingUncashed: boolean\n totalUncashed: Token\n accounting: Accounting[] | null\n}\n\nexport default function PeerBalances({ accounting, isLoadingUncashed, totalUncashed }: Props): ReactElement | null {\n return (\n \n \n \n
\n )\n}\n","import { BigNumber } from 'bignumber.js'\nimport { ReactElement, useContext } from 'react'\nimport { Upload } from 'react-feather'\nimport WithdrawDepositModal from '../components/WithdrawDepositModal'\nimport { Context as SettingsContext } from '../providers/Settings'\n\nexport default function WithdrawModal(): ReactElement {\n const { beeDebugApi } = useContext(SettingsContext)\n\n return (\n \n \n \n \n \n \n \n
\n )\n}\n","import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'\nimport React, { ReactElement } from 'react'\nimport { IconProps } from 'react-feather'\n\ninterface Props {\n onClick: () => void\n iconType: React.ComponentType\n
\n )}\n \n )\n}\n","import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'\n\nexport type IdentityType = 'V3' | 'PRIVATE_KEY'\n\nexport interface Identity {\n uuid: string\n name: string\n feedHash?: string\n identity: string\n address: string\n type: IdentityType\n}\n\ninterface ContextInterface {\n identities: Identity[]\n setIdentities: (identities: Identity[]) => void\n}\n\nconst initialValues: ContextInterface = {\n identities: [],\n setIdentities: () => {}, // eslint-disable-line\n}\n\nexport const Context = createContext\n
\n )\n}\n","import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'\nimport { ReactElement } from 'react'\nimport { CloseButton } from './CloseButton'\n\ninterface Props {\n children: string\n onClose: () => void\n}\n\nconst useStyles = makeStyles(() =>\n createStyles({\n text: {\n color: '#606060',\n fontWeight: 'bold',\n },\n }),\n)\n\nexport function TitleWithClose({ children, onClose }: Props): ReactElement {\n const classes = useStyles()\n\n return (\n \n
\n )\n}\n","import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'\nimport { saveAs } from 'file-saver'\nimport { useSnackbar } from 'notistack'\nimport { ReactElement } from 'react'\nimport { Clipboard, Download } from 'react-feather'\nimport { Code } from '../../components/Code'\nimport ExpandableListItemActions from '../../components/ExpandableListItemActions'\nimport { SwarmButton } from '../../components/SwarmButton'\nimport { SwarmDialog } from '../../components/SwarmDialog'\nimport { TitleWithClose } from '../../components/TitleWithClose'\nimport { Identity } from '../../providers/Feeds'\n\ninterface Props {\n identity: Identity\n onClose: () => void\n}\n\nconst useStyles = makeStyles(() =>\n createStyles({\n wrapper: {\n maxWidth: '100%',\n },\n }),\n)\n\nexport function ExportFeedDialog({ identity, onClose }: Props): ReactElement {\n const { enqueueSnackbar } = useSnackbar()\n\n const classes = useStyles()\n\n function onDownload() {\n saveAs(\n new Blob([identity.identity], {\n type: 'application/json',\n }),\n identity.name + '.json',\n )\n }\n\n function getExportText() {\n return identity.type === 'V3' ? 'JSON file' : 'the private key string'\n }\n\n function onCopy() {\n navigator.clipboard\n .writeText(identity.identity)\n .then(() => enqueueSnackbar('Copied to Clipboard', { variant: 'success' }))\n }\n\n return (\n {prettify ? prettifyString(children) : children}\n {identity.identity}\n \n {showImport && setShowImport(false)} />}\n {showExport && selectedIdentity && onDelete(identity)}\n />\n )}\n \n Feeds \n \n \n \n \n Create New Feed\n \n setShowImport(true)}>\n Import Feed\n \n \n \n {identities.map((x, i) => (\n \n \n \n \n \n \n \n viewFeed(x.uuid)} iconType={Info}>\n View Feed Page\n \n onShowExport(x)} iconType={Download}>\n Export...\n \n onShowDelete(x)} iconType={Trash}>\n Delete...\n \n \n \n \n ))}\n
\n )\n}\n","import { createStyles, makeStyles, Typography } from '@material-ui/core'\nimport { ReactElement } from 'react'\n\ninterface Props {\n children: (string | ReactElement)[] | (string | ReactElement)\n}\n\nconst useStyles = makeStyles(() =>\n createStyles({\n text: {\n color: '#606060',\n fontSize: '0.9rem',\n },\n }),\n)\n\nexport function DocumentationText({ children }: Props): ReactElement {\n const classes = useStyles()\n\n return \n
\n \n Create new feed \n \n \n To create a feed you will need to create an identity. Please refer to the{' '}\n \n official Bee documentation\n {' '}\n to understand how feeds work.\n \n \n \n {({ submitForm, values }) => (\n \n )}\n \n
\n )\n}\n","import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles'\nimport { ArrowForward, OpenInNewSharp } from '@material-ui/icons'\nimport { ReactElement, useState } from 'react'\nimport CopyToClipboard from 'react-copy-to-clipboard'\nimport { useNavigate } from 'react-router'\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n header: {\n backgroundColor: theme.palette.background.paper,\n marginBottom: theme.spacing(0.25),\n borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,\n wordBreak: 'break-word',\n },\n headerOpen: {\n borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,\n },\n openLinkIcon: {\n cursor: 'pointer',\n padding: theme.spacing(1),\n borderRadius: 0,\n '&:hover': {\n backgroundColor: '#fcf2e8',\n color: theme.palette.primary.main,\n },\n },\n content: {\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n },\n keyMargin: {\n marginRight: theme.spacing(1),\n },\n copyValue: {\n cursor: 'pointer',\n padding: theme.spacing(1),\n borderRadius: 0,\n '&:hover': {\n backgroundColor: '#fcf2e8',\n color: theme.palette.primary.main,\n },\n },\n }),\n)\n\ninterface Props {\n label: string\n value: string\n link?: string\n navigationType?: 'NEW_WINDOW' | 'HISTORY_PUSH'\n allowClipboard?: boolean\n}\n\nexport default function ExpandableListItemLink({\n label,\n value,\n link,\n navigationType = 'NEW_WINDOW',\n allowClipboard = true,\n}: Props): ReactElement | null {\n const classes = useStyles()\n const [copied, setCopied] = useState(false)\n const navigate = useNavigate()\n\n const tooltipClickHandler = () => setCopied(true)\n const tooltipCloseHandler = () => setCopied(false)\n\n const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value\n\n function onNavigation() {\n if (navigationType === 'NEW_WINDOW') {\n window.open(link || value)\n } else {\n navigate(link || value)\n }\n }\n\n return (\n \n {allowClipboard && (\n \n \n \n {displayValue}\n \n \n \n )}\n {!allowClipboard && {displayValue}}\n \n {navigationType === 'NEW_WINDOW' && \n
\n \n
\n {showHelp && (\n \n \n Add File\n \n \n Add Folder\n \n \n Add Website\n \n
\n \n {`${identity.name} Website`} \n \n \n \n \n \n ) : (\n \n \n This feed is curently not pointing anywhere, you can update the feed to fix this. Please refer to the{' '}\n \n official Bee documentation\n \n .\n \n \n )}\n \n \n Close\n \n \n
\n )\n}\n","import { PostageBatch } from '@ethersphere/bee-js'\nimport { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'\nimport { Context as SettingsContext } from './Settings'\n\nexport interface EnrichedPostageBatch extends PostageBatch {\n usage: number\n usageText: string\n}\n\ninterface ContextInterface {\n stamps: EnrichedPostageBatch[] | null\n error: Error | null\n isLoading: boolean\n lastUpdate: number | null\n start: (frequency?: number) => void\n stop: () => void\n refresh: () => Promise\n {showPasswordPrompt && selectedIdentity && (\n {\n setShowPasswordPrompt(false)\n }}\n onProceed={(password: string) => {\n onFeedUpdate(selectedIdentity, password)\n }}\n loading={loading}\n />\n )}\n Update feed \n \n \n ({ value: x.uuid, label: `${x.name} Website` }))}\n onChange={onFeedChange}\n label=\"Feed\"\n />\n \n \n\n \n \n {stamps ? (\n ({ value: x.batchID, label: x.batchID.slice(0, 8) }))}\n onChange={onStampChange}\n label=\"Stamp\"\n />\n ) : (\n You need to buy a stamp first to be able to update a feed. \n )}\n \n \n \n \n Update Selected Feed\n \n \n Close\n \n \n
\n )\n}\n","import { ReactElement, ReactNode } from 'react'\nimport { makeStyles, Theme, createStyles } from '@material-ui/core/styles'\nimport { Typography } from '@material-ui/core'\nimport ListItem from '@material-ui/core/ListItem'\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n header: {\n backgroundColor: '#F7F7F7',\n marginBottom: theme.spacing(0.25),\n },\n typography: {\n color: '#242424',\n },\n }),\n)\n\ninterface Props {\n children?: ReactNode | ReactNode[]\n}\n\nexport default function ExpandableListItemNote({ children }: Props): ReactElement | null {\n const classes = useStyles()\n\n return (\n \n {!open && value}\n {!expandedOnly && !locked && (\n \n {open ? (\n \n )}\n
\n \n \n \n
\n )\n}\n","import { Utils } from '@ethersphere/bee-js'\nimport { ManifestJs } from '@ethersphere/manifest-js'\nimport { useSnackbar } from 'notistack'\nimport { ReactElement, useContext, useState } from 'react'\nimport { useNavigate } from 'react-router-dom'\nimport ExpandableListItemInput from '../../components/ExpandableListItemInput'\nimport { History } from '../../components/History'\nimport { Context, defaultUploadOrigin } from '../../providers/File'\nimport { Context as SettingsContext } from '../../providers/Settings'\nimport { ROUTES } from '../../routes'\nimport { extractSwarmHash } from '../../utils'\nimport { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'\nimport { FileNavigation } from './FileNavigation'\n\nexport function Download(): ReactElement {\n const [loading, setLoading] = useState(false)\n const { beeApi } = useContext(SettingsContext)\n const [referenceError, setReferenceError] = useState{children}
\n}\n","import { ReactElement } from 'react'\nimport { StripedWrapper } from '../../components/StripedWrapper'\n\ninterface Props {\n icon: ReactElement\n}\n\nexport function AssetIcon({ icon }: Props): ReactElement {\n return \n {x} \n
\n ))}\n \n
\n )\n}\n","import { Box, Grid, Typography } from '@material-ui/core'\nimport { ReactElement } from 'react'\nimport { Capacity } from '../../components/Capacity'\nimport { EnrichedPostageBatch } from '../../providers/Stamps'\n\ninterface Props {\n stamp: EnrichedPostageBatch\n shorten?: boolean\n}\n\nexport function PostageStamp({ stamp, shorten }: Props): ReactElement {\n return (\n \n \n \n \n
\n \n \n \n \n Bee\n \n {` ${latestUserVersion || '-'} `}\n \n
\n }\n />\n \n \n {children}\n {open ? \n \n \n
\n )\n}\n","import type { ReactElement } from 'react'\nimport ExpandableElement from '../../components/ExpandableElement'\nimport ExpandableList from '../../components/ExpandableList'\nimport ExpandableListItem from '../../components/ExpandableListItem'\nimport ExpandableListItemKey from '../../components/ExpandableListItemKey'\nimport { EnrichedPostageBatch } from '../../providers/Stamps'\nimport { getHumanReadableFileSize } from '../../utils/file'\nimport { PostageStamp } from './PostageStamp'\n\ninterface Props {\n postageStamps: EnrichedPostageBatch[] | null\n}\n\nfunction StampsTable({ postageStamps }: Props): ReactElement | null {\n if (postageStamps === null) return null\n\n return (\n {expandable}
\n \n {error && (\n \n Error loading postage stamps details: {error.message}\n \n )}\n {!error && (\n <>\n
\n )\n}\n","import { ReactElement } from 'react'\nimport { useNavigate } from 'react-router'\nimport { HistoryHeader } from '../../components/HistoryHeader'\nimport { ROUTES } from '../../routes'\nimport { PostageStampCreation } from './PostageStampCreation'\n\nexport function CreatePostageStampPage(): ReactElement {\n const navigate = useNavigate()\n\n function onFinished() {\n navigate(ROUTES.STAMPS)\n }\n\n return (\n \n \n Buy New Postage Stamp\n \n
\n {isLoading &&
\n \n Buy new postage stamp \n
\n )\n}\n","import React, { ReactElement, ReactNode } from 'react'\nimport { makeStyles, Theme, createStyles } from '@material-ui/core/styles'\nimport { Tab, Tabs } from '@material-ui/core'\n\ninterface TabPanelProps {\n children?: ReactNode\n index: number\n value: number\n}\n\nfunction TabPanel(props: TabPanelProps) {\n const { children, value, index, ...other } = props\n\n return (\n \n {value === index && children}\n
\n )\n}\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n },\n content: {\n marginTop: theme.spacing(2),\n },\n }),\n)\n\ninterface TabsValues {\n component: ReactNode\n label: ReactNode\n}\n\ninterface Props {\n values: TabsValues[]\n index?: number\n indexChanged?: (index: number) => void\n}\n\nexport default function SimpleTabs({ values, index, indexChanged }: Props): ReactElement {\n const classes = useStyles()\n const [value, setValue] = React.useState\n \n {values.map(({ label }, idx) => (\n \n
\n )\n}\n","import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'\n\n// These need to be numeric values as they are used as indexes in the TabsContainer\nexport enum Platforms {\n macOS = 0,\n Linux,\n Windows,\n iOS,\n Android,\n}\n\nexport enum SupportedPlatforms {\n macOS = Platforms.macOS,\n Linux = Platforms.Linux,\n}\n\ninterface ContextInterface {\n platform: SupportedPlatforms\n setPlatform: (platform: SupportedPlatforms) => void\n}\n\nconst initialValues: ContextInterface = {\n platform: SupportedPlatforms.macOS,\n setPlatform: () => {}, // eslint-disable-line\n}\n\nexport const Context = createContext\n {values.map(({ component }, idx) => (\n \n {component}\n \n ))}\n
\n \n