mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-18 13:51:21 +00:00
Refactor button style in wallets
This commit is contained in:
Nicola Benaglia
parent
ae078095b8
commit
6621527e82
@ -16,6 +16,7 @@ import {
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Input,
|
||||
useTheme,
|
||||
} from '@mui/material';
|
||||
import { CustomButton } from './styles/App-styles';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
@ -266,6 +267,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
|
||||
onClick={handleSetSeedValue}
|
||||
sx={{
|
||||
padding: '10px',
|
||||
display: 'inline',
|
||||
}}
|
||||
>
|
||||
Add seed-phrase
|
||||
@ -401,6 +403,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
|
||||
const [name, setName] = useState('');
|
||||
const [note, setNote] = useState('');
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
const theme = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
if (wallet?.name) {
|
||||
@ -423,10 +426,10 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
|
||||
>
|
||||
<ListItem
|
||||
sx={{
|
||||
bgcolor: 'background.paper', // TODO: set background color
|
||||
bgcolor: theme.palette.background.default,
|
||||
flexGrow: 1,
|
||||
'&:hover': {
|
||||
backgroundColor: 'secondary.main',
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
transform: 'scale(1.01)',
|
||||
},
|
||||
transition: 'all 0.1s ease-in-out',
|
||||
@ -471,6 +474,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<IconButton
|
||||
sx={{
|
||||
alignSelf: 'flex-start',
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { Box } from "@mui/material";
|
||||
import { Box } from '@mui/material';
|
||||
|
||||
export const Spacer = ({ height, width, ...props }: any) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: height ? height : '0px',
|
||||
display: 'flex',
|
||||
flexShrink: 0,
|
||||
width: width ? width : '0px',
|
||||
...(props || {})
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: height ? height : '0px',
|
||||
display: 'flex',
|
||||
flexShrink: 0,
|
||||
width: width ? width : '0px',
|
||||
...(props || {}),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
import * as React from "react";
|
||||
import Button from "@mui/material/Button";
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import ListItemButton from "@mui/material/ListItemButton";
|
||||
import List from "@mui/material/List";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import AppBar from "@mui/material/AppBar";
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import ExpandLess from "@mui/icons-material/ExpandLess";
|
||||
import ExpandMore from "@mui/icons-material/ExpandMore";
|
||||
import Slide from "@mui/material/Slide";
|
||||
import { TransitionProps } from "@mui/material/transitions";
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import ExpandLess from '@mui/icons-material/ExpandLess';
|
||||
import ExpandMore from '@mui/icons-material/ExpandMore';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import { TransitionProps } from '@mui/material/transitions';
|
||||
import {
|
||||
Box,
|
||||
Collapse,
|
||||
@ -24,15 +20,15 @@ import {
|
||||
Tab,
|
||||
Tabs,
|
||||
styled,
|
||||
} from "@mui/material";
|
||||
import { AddGroupList } from "./AddGroupList";
|
||||
import { UserListOfInvites } from "./UserListOfInvites";
|
||||
import { CustomizedSnackbars } from "../Snackbar/Snackbar";
|
||||
import { getFee } from "../../background";
|
||||
import { MyContext, isMobile } from "../../App";
|
||||
import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
|
||||
} from '@mui/material';
|
||||
import { AddGroupList } from './AddGroupList';
|
||||
import { UserListOfInvites } from './UserListOfInvites';
|
||||
import { CustomizedSnackbars } from '../Snackbar/Snackbar';
|
||||
import { getFee } from '../../background';
|
||||
import { MyContext, isMobile } from '../../App';
|
||||
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
|
||||
|
||||
export const Label = styled("label")(
|
||||
export const Label = styled('label')(
|
||||
({ theme }) => `
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
@ -51,17 +47,15 @@ const Transition = React.forwardRef(function Transition(
|
||||
});
|
||||
|
||||
export const AddGroup = ({ address, open, setOpen }) => {
|
||||
const {show, setTxList} = React.useContext(MyContext)
|
||||
|
||||
const [tab, setTab] = React.useState("create");
|
||||
const { show, setTxList } = React.useContext(MyContext);
|
||||
const [tab, setTab] = React.useState('create');
|
||||
const [openAdvance, setOpenAdvance] = React.useState(false);
|
||||
|
||||
const [name, setName] = React.useState("");
|
||||
const [description, setDescription] = React.useState("");
|
||||
const [groupType, setGroupType] = React.useState("1");
|
||||
const [approvalThreshold, setApprovalThreshold] = React.useState("40");
|
||||
const [minBlock, setMinBlock] = React.useState("5");
|
||||
const [maxBlock, setMaxBlock] = React.useState("21600");
|
||||
const [name, setName] = React.useState('');
|
||||
const [description, setDescription] = React.useState('');
|
||||
const [groupType, setGroupType] = React.useState('1');
|
||||
const [approvalThreshold, setApprovalThreshold] = React.useState('40');
|
||||
const [minBlock, setMinBlock] = React.useState('5');
|
||||
const [maxBlock, setMaxBlock] = React.useState('21600');
|
||||
const [value, setValue] = React.useState(0);
|
||||
const [openSnack, setOpenSnack] = React.useState(false);
|
||||
const [infoSnack, setInfoSnack] = React.useState(null);
|
||||
@ -69,6 +63,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
|
||||
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
@ -89,58 +84,57 @@ export const AddGroup = ({ address, open, setOpen }) => {
|
||||
setMaxBlock(event.target.value as string);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleCreateGroup = async () => {
|
||||
try {
|
||||
if(!name) throw new Error('Please provide a name')
|
||||
if(!description) throw new Error('Please provide a description')
|
||||
if (!name) throw new Error('Please provide a name');
|
||||
if (!description) throw new Error('Please provide a description');
|
||||
|
||||
const fee = await getFee('CREATE_GROUP')
|
||||
const fee = await getFee('CREATE_GROUP');
|
||||
await show({
|
||||
message: "Would you like to perform an CREATE_GROUP transaction?" ,
|
||||
publishFee: fee.fee + ' QORT'
|
||||
})
|
||||
message: 'Would you like to perform an CREATE_GROUP transaction?',
|
||||
publishFee: fee.fee + ' QORT',
|
||||
});
|
||||
|
||||
await new Promise((res, rej) => {
|
||||
window.sendMessage("createGroup", {
|
||||
groupName: name,
|
||||
groupDescription: description,
|
||||
groupType: +groupType,
|
||||
groupApprovalThreshold: +approvalThreshold,
|
||||
minBlock: +minBlock,
|
||||
maxBlock: +maxBlock,
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response?.error) {
|
||||
setInfoSnack({
|
||||
type: "success",
|
||||
message: "Successfully created group. It may take a couple of minutes for the changes to propagate",
|
||||
});
|
||||
setOpenSnack(true);
|
||||
setTxList((prev) => [
|
||||
{
|
||||
...response,
|
||||
type: 'created-group',
|
||||
label: `Created group ${name}: awaiting confirmation`,
|
||||
labelDone: `Created group ${name}: success!`,
|
||||
done: false,
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
res(response);
|
||||
return;
|
||||
}
|
||||
rej({ message: response.error });
|
||||
})
|
||||
.catch((error) => {
|
||||
rej({ message: error.message || "An error occurred" });
|
||||
});
|
||||
|
||||
await new Promise((res, rej) => {
|
||||
window
|
||||
.sendMessage('createGroup', {
|
||||
groupName: name,
|
||||
groupDescription: description,
|
||||
groupType: +groupType,
|
||||
groupApprovalThreshold: +approvalThreshold,
|
||||
minBlock: +minBlock,
|
||||
maxBlock: +maxBlock,
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response?.error) {
|
||||
setInfoSnack({
|
||||
type: 'success',
|
||||
message:
|
||||
'Successfully created group. It may take a couple of minutes for the changes to propagate',
|
||||
});
|
||||
setOpenSnack(true);
|
||||
setTxList((prev) => [
|
||||
{
|
||||
...response,
|
||||
type: 'created-group',
|
||||
label: `Created group ${name}: awaiting confirmation`,
|
||||
labelDone: `Created group ${name}: success!`,
|
||||
done: false,
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
res(response);
|
||||
return;
|
||||
}
|
||||
rej({ message: response.error });
|
||||
})
|
||||
.catch((error) => {
|
||||
rej({ message: error.message || 'An error occurred' });
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
setInfoSnack({
|
||||
type: "error",
|
||||
type: 'error',
|
||||
message: error?.message,
|
||||
});
|
||||
setOpenSnack(true);
|
||||
@ -166,20 +160,22 @@ export const AddGroup = ({ address, open, setOpen }) => {
|
||||
function a11yProps(index: number) {
|
||||
return {
|
||||
id: `simple-tab-${index}`,
|
||||
"aria-controls": `simple-tabpanel-${index}`,
|
||||
'aria-controls': `simple-tabpanel-${index}`,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const openGroupInvitesRequestFunc = ()=> {
|
||||
setValue(2)
|
||||
}
|
||||
const openGroupInvitesRequestFunc = () => {
|
||||
setValue(2);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
subscribeToEvent("openGroupInvitesRequest", openGroupInvitesRequestFunc);
|
||||
subscribeToEvent('openGroupInvitesRequest', openGroupInvitesRequestFunc);
|
||||
|
||||
return () => {
|
||||
unsubscribeFromEvent("openGroupInvitesRequest", openGroupInvitesRequestFunc);
|
||||
unsubscribeFromEvent(
|
||||
'openGroupInvitesRequest',
|
||||
openGroupInvitesRequestFunc
|
||||
);
|
||||
};
|
||||
}, []);
|
||||
|
||||
@ -191,7 +187,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
|
||||
onClose={handleClose}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<AppBar sx={{ position: "relative", bgcolor: "#232428" }}>
|
||||
<AppBar sx={{ position: 'relative', bgcolor: '#232428' }}>
|
||||
<Toolbar>
|
||||
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
||||
Group Mgmt
|
||||
@ -213,275 +209,289 @@ export const AddGroup = ({ address, open, setOpen }) => {
|
||||
</AppBar>
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: "#27282c",
|
||||
bgcolor: '#27282c',
|
||||
flexGrow: 1,
|
||||
overflowY: "auto",
|
||||
color: "white",
|
||||
overflowY: 'auto',
|
||||
color: 'white',
|
||||
flexDirection: 'column',
|
||||
display: 'flex'
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
|
||||
<Tabs
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
aria-label="basic tabs example"
|
||||
variant={isMobile ? 'scrollable' : 'fullWidth'} // Scrollable on mobile, full width on desktop
|
||||
scrollButtons="auto"
|
||||
allowScrollButtonsMobile
|
||||
sx={{
|
||||
"& .MuiTabs-indicator": {
|
||||
backgroundColor: "white",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab
|
||||
label="Create Group"
|
||||
{...a11yProps(0)}
|
||||
sx={{
|
||||
"&.Mui-selected": {
|
||||
color: "white",
|
||||
},
|
||||
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
|
||||
}}
|
||||
/>
|
||||
<Tab
|
||||
label="Find Group"
|
||||
{...a11yProps(1)}
|
||||
sx={{
|
||||
"&.Mui-selected": {
|
||||
color: "white",
|
||||
},
|
||||
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
|
||||
}}
|
||||
/>
|
||||
<Tab
|
||||
label="Group Invites"
|
||||
{...a11yProps(2)}
|
||||
sx={{
|
||||
"&.Mui-selected": {
|
||||
color: "white",
|
||||
},
|
||||
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
aria-label="basic tabs example"
|
||||
variant={isMobile ? 'scrollable' : 'fullWidth'} // Scrollable on mobile, full width on desktop
|
||||
scrollButtons="auto"
|
||||
allowScrollButtonsMobile
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab
|
||||
label="Create Group"
|
||||
{...a11yProps(0)}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
color: 'white',
|
||||
},
|
||||
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
|
||||
}}
|
||||
/>
|
||||
<Tab
|
||||
label="Find Group"
|
||||
{...a11yProps(1)}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
color: 'white',
|
||||
},
|
||||
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
|
||||
}}
|
||||
/>
|
||||
<Tab
|
||||
label="Group Invites"
|
||||
{...a11yProps(2)}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
color: 'white',
|
||||
},
|
||||
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
|
||||
{value === 0 && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
padding: '25px'
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
maxWidth: "500px",
|
||||
width: '100%',
|
||||
padding: '25px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '20px',
|
||||
maxWidth: '500px',
|
||||
}}
|
||||
>
|
||||
<Label>Name of group</Label>
|
||||
<Input
|
||||
placeholder="Name of group"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
}}
|
||||
>
|
||||
<Label>Description of group</Label>
|
||||
|
||||
<Input
|
||||
placeholder="Description of group"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
}}
|
||||
>
|
||||
<Label>Group type</Label>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={groupType}
|
||||
label="Group Type"
|
||||
onChange={handleChangeGroupType}
|
||||
>
|
||||
<MenuItem value={1}>Open (public)</MenuItem>
|
||||
<MenuItem value={0}>
|
||||
Closed (private) - users need permission to join
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "15px",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => setOpenAdvance((prev) => !prev)}
|
||||
>
|
||||
<Typography>Advanced options</Typography>
|
||||
|
||||
{openAdvance ? <ExpandLess /> : <ExpandMore />}
|
||||
</Box>
|
||||
<Collapse in={openAdvance} timeout="auto" unmountOnExit>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
}}
|
||||
>
|
||||
<Label>
|
||||
Group Approval Threshold (number / percentage of Admins that
|
||||
must approve a transaction)
|
||||
</Label>
|
||||
<Label>Name of group</Label>
|
||||
<Input
|
||||
placeholder="Name of group"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
}}
|
||||
>
|
||||
<Label>Description of group</Label>
|
||||
|
||||
<Input
|
||||
placeholder="Description of group"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
}}
|
||||
>
|
||||
<Label>Group type</Label>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={approvalThreshold}
|
||||
label="Group Approval Threshold"
|
||||
onChange={handleChangeApprovalThreshold}
|
||||
value={groupType}
|
||||
label="Group Type"
|
||||
onChange={handleChangeGroupType}
|
||||
>
|
||||
<MenuItem value={0}>NONE</MenuItem>
|
||||
<MenuItem value={1}>ONE </MenuItem>
|
||||
|
||||
<MenuItem value={20}>20% </MenuItem>
|
||||
<MenuItem value={40}>40% </MenuItem>
|
||||
<MenuItem value={60}>60% </MenuItem>
|
||||
<MenuItem value={80}>80% </MenuItem>
|
||||
<MenuItem value={100}>100% </MenuItem>
|
||||
<MenuItem value={1}>Open (public)</MenuItem>
|
||||
<MenuItem value={0}>
|
||||
Closed (private) - users need permission to join
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
display: 'flex',
|
||||
gap: '15px',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => setOpenAdvance((prev) => !prev)}
|
||||
>
|
||||
<Label>
|
||||
Minimum Block delay for Group Transaction Approvals
|
||||
</Label>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={minBlock}
|
||||
label="Minimum Block delay"
|
||||
onChange={handleChangeMinBlock}
|
||||
>
|
||||
<MenuItem value={5}>5 minutes</MenuItem>
|
||||
<MenuItem value={10}>10 minutes</MenuItem>
|
||||
<MenuItem value={30}>30 minutes</MenuItem>
|
||||
<MenuItem value={60}>1 hour</MenuItem>
|
||||
<MenuItem value={180}>3 hours</MenuItem>
|
||||
<MenuItem value={300}>5 hours</MenuItem>
|
||||
<MenuItem value={420}>7 hours</MenuItem>
|
||||
<MenuItem value={720}>12 hours</MenuItem>
|
||||
<MenuItem value={1440}>1 day</MenuItem>
|
||||
<MenuItem value={4320}>3 days</MenuItem>
|
||||
<MenuItem value={7200}>5 days</MenuItem>
|
||||
<MenuItem value={10080}>7 days</MenuItem>
|
||||
</Select>
|
||||
<Typography>Advanced options</Typography>
|
||||
|
||||
{openAdvance ? <ExpandLess /> : <ExpandMore />}
|
||||
</Box>
|
||||
<Collapse in={openAdvance} timeout="auto" unmountOnExit>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
}}
|
||||
>
|
||||
<Label>
|
||||
Group Approval Threshold (number / percentage of Admins
|
||||
that must approve a transaction)
|
||||
</Label>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={approvalThreshold}
|
||||
label="Group Approval Threshold"
|
||||
onChange={handleChangeApprovalThreshold}
|
||||
>
|
||||
<MenuItem value={0}>NONE</MenuItem>
|
||||
<MenuItem value={1}>ONE </MenuItem>
|
||||
|
||||
<MenuItem value={20}>20% </MenuItem>
|
||||
<MenuItem value={40}>40% </MenuItem>
|
||||
<MenuItem value={60}>60% </MenuItem>
|
||||
<MenuItem value={80}>80% </MenuItem>
|
||||
<MenuItem value={100}>100% </MenuItem>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
}}
|
||||
>
|
||||
<Label>
|
||||
Minimum Block delay for Group Transaction Approvals
|
||||
</Label>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={minBlock}
|
||||
label="Minimum Block delay"
|
||||
onChange={handleChangeMinBlock}
|
||||
>
|
||||
<MenuItem value={5}>5 minutes</MenuItem>
|
||||
<MenuItem value={10}>10 minutes</MenuItem>
|
||||
<MenuItem value={30}>30 minutes</MenuItem>
|
||||
<MenuItem value={60}>1 hour</MenuItem>
|
||||
<MenuItem value={180}>3 hours</MenuItem>
|
||||
<MenuItem value={300}>5 hours</MenuItem>
|
||||
<MenuItem value={420}>7 hours</MenuItem>
|
||||
<MenuItem value={720}>12 hours</MenuItem>
|
||||
<MenuItem value={1440}>1 day</MenuItem>
|
||||
<MenuItem value={4320}>3 days</MenuItem>
|
||||
<MenuItem value={7200}>5 days</MenuItem>
|
||||
<MenuItem value={10080}>7 days</MenuItem>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
}}
|
||||
>
|
||||
<Label>
|
||||
Maximum Block delay for Group Transaction Approvals
|
||||
</Label>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={maxBlock}
|
||||
label="Maximum Block delay"
|
||||
onChange={handleChangeMaxBlock}
|
||||
>
|
||||
<MenuItem value={60}>1 hour</MenuItem>
|
||||
<MenuItem value={180}>3 hours</MenuItem>
|
||||
<MenuItem value={300}>5 hours</MenuItem>
|
||||
<MenuItem value={420}>7 hours</MenuItem>
|
||||
<MenuItem value={720}>12 hours</MenuItem>
|
||||
<MenuItem value={1440}>1 day</MenuItem>
|
||||
<MenuItem value={4320}>3 days</MenuItem>
|
||||
<MenuItem value={7200}>5 days</MenuItem>
|
||||
<MenuItem value={10080}>7 days</MenuItem>
|
||||
<MenuItem value={14400}>10 days</MenuItem>
|
||||
<MenuItem value={21600}>15 days</MenuItem>
|
||||
</Select>
|
||||
</Box>
|
||||
</Collapse>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Label>
|
||||
Maximum Block delay for Group Transaction Approvals
|
||||
</Label>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={maxBlock}
|
||||
label="Maximum Block delay"
|
||||
onChange={handleChangeMaxBlock}
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleCreateGroup}
|
||||
>
|
||||
<MenuItem value={60}>1 hour</MenuItem>
|
||||
<MenuItem value={180}>3 hours</MenuItem>
|
||||
<MenuItem value={300}>5 hours</MenuItem>
|
||||
<MenuItem value={420}>7 hours</MenuItem>
|
||||
<MenuItem value={720}>12 hours</MenuItem>
|
||||
<MenuItem value={1440}>1 day</MenuItem>
|
||||
<MenuItem value={4320}>3 days</MenuItem>
|
||||
<MenuItem value={7200}>5 days</MenuItem>
|
||||
<MenuItem value={10080}>7 days</MenuItem>
|
||||
<MenuItem value={14400}>10 days</MenuItem>
|
||||
<MenuItem value={21600}>15 days</MenuItem>
|
||||
</Select>
|
||||
Create Group
|
||||
</Button>
|
||||
</Box>
|
||||
</Collapse>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleCreateGroup}
|
||||
>
|
||||
Create Group
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
{value === 1 && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
padding: '25px',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
display: 'flex'
|
||||
}}>
|
||||
<AddGroupList setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
padding: '25px',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<AddGroupList
|
||||
setOpenSnack={setOpenSnack}
|
||||
setInfoSnack={setInfoSnack}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
)}
|
||||
|
||||
{value === 2 && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
padding: '25px',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
display: 'flex'
|
||||
}}>
|
||||
<UserListOfInvites myAddress={address} setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
|
||||
{value === 2 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
padding: '25px',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<UserListOfInvites
|
||||
myAddress={address}
|
||||
setOpenSnack={setOpenSnack}
|
||||
setInfoSnack={setInfoSnack}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<CustomizedSnackbars open={openSnack} setOpen={setOpenSnack} info={infoSnack} setInfo={setInfoSnack} />
|
||||
<CustomizedSnackbars
|
||||
open={openSnack}
|
||||
setOpen={setOpenSnack}
|
||||
info={infoSnack}
|
||||
setInfo={setInfoSnack}
|
||||
/>
|
||||
</Dialog>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
@ -1,31 +1,36 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
|
||||
import Alert from '@mui/material/Alert';
|
||||
|
||||
export const CustomizedSnackbars = ({open, setOpen, info, setInfo, duration}) => {
|
||||
|
||||
|
||||
|
||||
export const CustomizedSnackbars = ({
|
||||
open,
|
||||
setOpen,
|
||||
info,
|
||||
setInfo,
|
||||
duration,
|
||||
}) => {
|
||||
const handleClose = (
|
||||
event?: React.SyntheticEvent | Event,
|
||||
reason?: SnackbarCloseReason,
|
||||
reason?: SnackbarCloseReason
|
||||
) => {
|
||||
if (reason === 'clickaway') {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpen(false);
|
||||
setInfo(null)
|
||||
setInfo(null);
|
||||
};
|
||||
|
||||
if(!open) return null
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} open={open} autoHideDuration={info?.duration === null ? null : (duration || 6000)} onClose={handleClose}>
|
||||
<Snackbar
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
||||
open={open}
|
||||
autoHideDuration={info?.duration === null ? null : duration || 6000}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Alert
|
||||
|
||||
|
||||
onClose={handleClose}
|
||||
severity={info?.type}
|
||||
variant="filled"
|
||||
@ -36,4 +41,4 @@ export const CustomizedSnackbars = ({open, setOpen, info, setInfo, duration}) =
|
||||
</Snackbar>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -146,8 +146,8 @@ export const CustomButton = styled(Box)(({ theme }) => ({
|
||||
'&:hover': {
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(41, 41, 43, 1)'
|
||||
: 'rgba(230, 230, 230, 1)',
|
||||
? 'rgb(136, 130, 130)'
|
||||
: 'rgb(173, 173, 180)',
|
||||
color: '#fff',
|
||||
|
||||
'svg path': {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user