diff --git a/src/components/ExpandableElement.tsx b/src/components/ExpandableElement.tsx index f742362..3c5029b 100644 --- a/src/components/ExpandableElement.tsx +++ b/src/components/ExpandableElement.tsx @@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) => }, contentLevel12: { marginTop: theme.spacing(0.25), + '& > li:last-of-type': { + marginBottom: theme.spacing(2), + }, }, infoText: { color: '#c9c9c9', diff --git a/src/components/StampExtensionModal.tsx b/src/components/StampExtensionModal.tsx index 59a1cd4..d86a087 100644 --- a/src/components/StampExtensionModal.tsx +++ b/src/components/StampExtensionModal.tsx @@ -1,4 +1,5 @@ import { BeeDebug } from '@ethersphere/bee-js' +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' @@ -7,20 +8,19 @@ import DialogTitle from '@material-ui/core/DialogTitle' import Input from '@material-ui/core/Input' import { useSnackbar } from 'notistack' import { ReactElement, ReactNode, useState } from 'react' -import { SwarmSelect } from './SwarmSelect' interface Props { - label: string + type: 'Topup' | 'Dilute' icon: ReactNode beeDebug: BeeDebug stamp: string } -export default function StampExtensionModal({ label, icon, beeDebug, stamp }: Props): ReactElement { +export default function StampExtensionModal({ type, icon, beeDebug, stamp }: Props): ReactElement { const [open, setOpen] = useState(false) const [amount, setAmount] = useState('') - const [type, setType] = useState<'Topup' | 'Dilute'>('Topup') const { enqueueSnackbar } = useSnackbar() + const label = `${type} ${stamp.substring(0, 8)}` const handleClickOpen = (e: React.MouseEvent) => { setOpen(true) @@ -56,22 +56,13 @@ export default function StampExtensionModal({ label, icon, beeDebug, stamp }: Pr } return ( -
+ {label} - setType(event.target.value as 'Topup' | 'Dilute')} - options={[ - { value: 'Topup', label: 'Topup' }, - { value: 'Dilute', label: 'Dilute' }, - ]} - /> Cancel - -
+ ) } diff --git a/src/pages/stamps/StampsTable.tsx b/src/pages/stamps/StampsTable.tsx index 1837268..8d7070a 100644 --- a/src/pages/stamps/StampsTable.tsx +++ b/src/pages/stamps/StampsTable.tsx @@ -1,5 +1,6 @@ import { ReactElement, useContext } from 'react' -import TimerFlash from 'remixicon-react/TimerFlashFillIcon' +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' @@ -50,8 +51,14 @@ function StampsTable({ postageStamps }: Props): ReactElement | null { } + type="Topup" + icon={} + beeDebug={beeDebugApi} + stamp={stamp.batchID} + /> + } beeDebug={beeDebugApi} stamp={stamp.batchID} />