Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-18 22:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor button style in wallets

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-16 20:45:24 +02:00
parent ae078095b8
commit 6621527e82
5 changed files with 361 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Wallets.tsx
View File

@ -16,6 +16,7 @@ import {
DialogTitle, DialogTitle,
IconButton, IconButton,
Input, Input,
useTheme,
} from '@mui/material'; } from '@mui/material';
import { CustomButton } from './styles/App-styles'; import { CustomButton } from './styles/App-styles';
import { useDropzone } from 'react-dropzone'; import { useDropzone } from 'react-dropzone';
@ -266,6 +267,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
onClick={handleSetSeedValue} onClick={handleSetSeedValue}
sx={{ sx={{
padding: '10px', padding: '10px',
display: 'inline',
}} }}
> >
Add seed-phrase Add seed-phrase
@ -401,6 +403,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
const [name, setName] = useState(''); const [name, setName] = useState('');
const [note, setNote] = useState(''); const [note, setNote] = useState('');
const [isEdit, setIsEdit] = useState(false); const [isEdit, setIsEdit] = useState(false);
const theme = useTheme();
useEffect(() => { useEffect(() => {
if (wallet?.name) { if (wallet?.name) {
@ -423,10 +426,10 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
> >
<ListItem <ListItem
sx={{ sx={{
bgcolor: 'background.paper', // TODO: set background color bgcolor: theme.palette.background.default,
flexGrow: 1, flexGrow: 1,
'&:hover': { '&:hover': {
backgroundColor: 'secondary.main', backgroundColor: theme.palette.background.paper,
transform: 'scale(1.01)', transform: 'scale(1.01)',
}, },
transition: 'all 0.1s ease-in-out', transition: 'all 0.1s ease-in-out',
@ -471,6 +474,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
} }
/> />
</ListItem> </ListItem>
<IconButton <IconButton
sx={{ sx={{
alignSelf: 'flex-start', alignSelf: 'flex-start',

6
src/common/Spacer.tsx
View File

@ -1,4 +1,4 @@
import { Box } from "@mui/material"; import { Box } from '@mui/material';
export const Spacer = ({ height, width, ...props }: any) => { export const Spacer = ({ height, width, ...props }: any) => {
return ( return (
@ -8,8 +8,8 @@ export const Spacer = ({ height, width, ...props }: any) => {
display: 'flex', display: 'flex',
flexShrink: 0, flexShrink: 0,
width: width ? width : '0px', width: width ? width : '0px',
...(props || {}) ...(props || {}),
}} }}
/> />
); );
}; };

244
src/components/Group/AddGroup.tsx
View File

@ -1,19 +1,15 @@
import * as React from "react"; import * as React from 'react';
import Button from "@mui/material/Button"; import Button from '@mui/material/Button';
import Dialog from "@mui/material/Dialog"; import Dialog from '@mui/material/Dialog';
import ListItemText from "@mui/material/ListItemText"; import AppBar from '@mui/material/AppBar';
import ListItemButton from "@mui/material/ListItemButton"; import Toolbar from '@mui/material/Toolbar';
import List from "@mui/material/List"; import IconButton from '@mui/material/IconButton';
import Divider from "@mui/material/Divider"; import Typography from '@mui/material/Typography';
import AppBar from "@mui/material/AppBar"; import CloseIcon from '@mui/icons-material/Close';
import Toolbar from "@mui/material/Toolbar"; import ExpandLess from '@mui/icons-material/ExpandLess';
import IconButton from "@mui/material/IconButton"; import ExpandMore from '@mui/icons-material/ExpandMore';
import Typography from "@mui/material/Typography"; import Slide from '@mui/material/Slide';
import CloseIcon from "@mui/icons-material/Close"; import { TransitionProps } from '@mui/material/transitions';
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 { import {
Box, Box,
Collapse, Collapse,
@ -24,15 +20,15 @@ import {
Tab, Tab,
Tabs, Tabs,
styled, styled,
} from "@mui/material"; } from '@mui/material';
import { AddGroupList } from "./AddGroupList"; import { AddGroupList } from './AddGroupList';
import { UserListOfInvites } from "./UserListOfInvites"; import { UserListOfInvites } from './UserListOfInvites';
import { CustomizedSnackbars } from "../Snackbar/Snackbar"; import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { getFee } from "../../background"; import { getFee } from '../../background';
import { MyContext, isMobile } from "../../App"; import { MyContext, isMobile } from '../../App';
import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events"; import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
export const Label = styled("label")( export const Label = styled('label')(
({ theme }) => ` ({ theme }) => `
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px; font-size: 14px;
@ -51,17 +47,15 @@ const Transition = React.forwardRef(function Transition(
}); });
export const AddGroup = ({ address, open, setOpen }) => { export const AddGroup = ({ address, open, setOpen }) => {
const {show, setTxList} = React.useContext(MyContext) const { show, setTxList } = React.useContext(MyContext);
const [tab, setTab] = React.useState('create');
const [tab, setTab] = React.useState("create");
const [openAdvance, setOpenAdvance] = React.useState(false); const [openAdvance, setOpenAdvance] = React.useState(false);
const [name, setName] = React.useState('');
const [name, setName] = React.useState(""); const [description, setDescription] = React.useState('');
const [description, setDescription] = React.useState(""); const [groupType, setGroupType] = React.useState('1');
const [groupType, setGroupType] = React.useState("1"); const [approvalThreshold, setApprovalThreshold] = React.useState('40');
const [approvalThreshold, setApprovalThreshold] = React.useState("40"); const [minBlock, setMinBlock] = React.useState('5');
const [minBlock, setMinBlock] = React.useState("5"); const [maxBlock, setMaxBlock] = React.useState('21600');
const [maxBlock, setMaxBlock] = React.useState("21600");
const [value, setValue] = React.useState(0); const [value, setValue] = React.useState(0);
const [openSnack, setOpenSnack] = React.useState(false); const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null); const [infoSnack, setInfoSnack] = React.useState(null);
@ -69,6 +63,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
const handleChange = (event: React.SyntheticEvent, newValue: number) => { const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue); setValue(newValue);
}; };
const handleClose = () => { const handleClose = () => {
setOpen(false); setOpen(false);
}; };
@ -89,21 +84,20 @@ export const AddGroup = ({ address, open, setOpen }) => {
setMaxBlock(event.target.value as string); setMaxBlock(event.target.value as string);
}; };
const handleCreateGroup = async () => { const handleCreateGroup = async () => {
try { try {
if(!name) throw new Error('Please provide a name') if (!name) throw new Error('Please provide a name');
if(!description) throw new Error('Please provide a description') if (!description) throw new Error('Please provide a description');
const fee = await getFee('CREATE_GROUP') const fee = await getFee('CREATE_GROUP');
await show({ await show({
message: "Would you like to perform an CREATE_GROUP transaction?" , message: 'Would you like to perform an CREATE_GROUP transaction?',
publishFee: fee.fee + ' QORT' publishFee: fee.fee + ' QORT',
}) });
await new Promise((res, rej) => { await new Promise((res, rej) => {
window.sendMessage("createGroup", { window
.sendMessage('createGroup', {
groupName: name, groupName: name,
groupDescription: description, groupDescription: description,
groupType: +groupType, groupType: +groupType,
@ -114,8 +108,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
.then((response) => { .then((response) => {
if (!response?.error) { if (!response?.error) {
setInfoSnack({ setInfoSnack({
type: "success", type: 'success',
message: "Successfully created group. It may take a couple of minutes for the changes to propagate", message:
'Successfully created group. It may take a couple of minutes for the changes to propagate',
}); });
setOpenSnack(true); setOpenSnack(true);
setTxList((prev) => [ setTxList((prev) => [
@ -134,13 +129,12 @@ export const AddGroup = ({ address, open, setOpen }) => {
rej({ message: response.error }); rej({ message: response.error });
}) })
.catch((error) => { .catch((error) => {
rej({ message: error.message || "An error occurred" }); rej({ message: error.message || 'An error occurred' });
}); });
}); });
} catch (error) { } catch (error) {
setInfoSnack({ setInfoSnack({
type: "error", type: 'error',
message: error?.message, message: error?.message,
}); });
setOpenSnack(true); setOpenSnack(true);
@ -166,20 +160,22 @@ export const AddGroup = ({ address, open, setOpen }) => {
function a11yProps(index: number) { function a11yProps(index: number) {
return { return {
id: `simple-tab-${index}`, id: `simple-tab-${index}`,
"aria-controls": `simple-tabpanel-${index}`, 'aria-controls': `simple-tabpanel-${index}`,
}; };
} }
const openGroupInvitesRequestFunc = () => {
const openGroupInvitesRequestFunc = ()=> { setValue(2);
setValue(2) };
}
React.useEffect(() => { React.useEffect(() => {
subscribeToEvent("openGroupInvitesRequest", openGroupInvitesRequestFunc); subscribeToEvent('openGroupInvitesRequest', openGroupInvitesRequestFunc);
return () => { return () => {
unsubscribeFromEvent("openGroupInvitesRequest", openGroupInvitesRequestFunc); unsubscribeFromEvent(
'openGroupInvitesRequest',
openGroupInvitesRequestFunc
);
}; };
}, []); }, []);
@ -191,7 +187,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
onClose={handleClose} onClose={handleClose}
TransitionComponent={Transition} TransitionComponent={Transition}
> >
<AppBar sx={{ position: "relative", bgcolor: "#232428" }}> <AppBar sx={{ position: 'relative', bgcolor: '#232428' }}>
<Toolbar> <Toolbar>
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div"> <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
Group Mgmt Group Mgmt
@ -213,15 +209,15 @@ export const AddGroup = ({ address, open, setOpen }) => {
</AppBar> </AppBar>
<Box <Box
sx={{ sx={{
bgcolor: "#27282c", bgcolor: '#27282c',
flexGrow: 1, flexGrow: 1,
overflowY: "auto", overflowY: 'auto',
color: "white", color: 'white',
flexDirection: 'column', flexDirection: 'column',
display: 'flex' display: 'flex',
}} }}
> >
<Box sx={{ borderBottom: 1, borderColor: "divider" }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs <Tabs
value={value} value={value}
onChange={handleChange} onChange={handleChange}
@ -230,8 +226,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
scrollButtons="auto" scrollButtons="auto"
allowScrollButtonsMobile allowScrollButtonsMobile
sx={{ sx={{
"& .MuiTabs-indicator": { '& .MuiTabs-indicator': {
backgroundColor: "white", backgroundColor: 'white',
}, },
}} }}
> >
@ -239,8 +235,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
label="Create Group" label="Create Group"
{...a11yProps(0)} {...a11yProps(0)}
sx={{ sx={{
"&.Mui-selected": { '&.Mui-selected': {
color: "white", color: 'white',
}, },
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}} }}
@ -249,8 +245,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
label="Find Group" label="Find Group"
{...a11yProps(1)} {...a11yProps(1)}
sx={{ sx={{
"&.Mui-selected": { '&.Mui-selected': {
color: "white", color: 'white',
}, },
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}} }}
@ -259,8 +255,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
label="Group Invites" label="Group Invites"
{...a11yProps(2)} {...a11yProps(2)}
sx={{ sx={{
"&.Mui-selected": { '&.Mui-selected': {
color: "white", color: 'white',
}, },
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}} }}
@ -269,23 +265,25 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box> </Box>
{value === 0 && ( {value === 0 && (
<Box sx={{
width: '100%',
padding: '25px'
}}>
<Box <Box
sx={{ sx={{
display: "flex", width: '100%',
flexDirection: "column", padding: '25px',
gap: "20px",
maxWidth: "500px",
}} }}
> >
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '20px',
maxWidth: '500px',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '5px',
}} }}
> >
<Label>Name of group</Label> <Label>Name of group</Label>
@ -297,9 +295,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '5px',
}} }}
> >
<Label>Description of group</Label> <Label>Description of group</Label>
@ -312,9 +310,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '5px',
}} }}
> >
<Label>Group type</Label> <Label>Group type</Label>
@ -333,10 +331,10 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
gap: "15px", gap: '15px',
alignItems: "center", alignItems: 'center',
cursor: "pointer", cursor: 'pointer',
}} }}
onClick={() => setOpenAdvance((prev) => !prev)} onClick={() => setOpenAdvance((prev) => !prev)}
> >
@ -347,14 +345,14 @@ export const AddGroup = ({ address, open, setOpen }) => {
<Collapse in={openAdvance} timeout="auto" unmountOnExit> <Collapse in={openAdvance} timeout="auto" unmountOnExit>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '5px',
}} }}
> >
<Label> <Label>
Group Approval Threshold (number / percentage of Admins that Group Approval Threshold (number / percentage of Admins
must approve a transaction) that must approve a transaction)
</Label> </Label>
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
@ -375,9 +373,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '5px',
}} }}
> >
<Label> <Label>
@ -406,9 +404,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '5px',
}} }}
> >
<Label> <Label>
@ -437,9 +435,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Collapse> </Collapse>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
width: "100%", width: '100%',
justifyContent: "center", justifyContent: 'center',
}} }}
> >
<Button <Button
@ -454,34 +452,46 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box> </Box>
)} )}
{value === 1 && ( {value === 1 && (
<Box sx={{ <Box
sx={{
width: '100%', width: '100%',
padding: '25px', padding: '25px',
flexDirection: 'column', flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
display: 'flex' display: 'flex',
}}> }}
<AddGroupList setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} /> >
<AddGroupList
setOpenSnack={setOpenSnack}
setInfoSnack={setInfoSnack}
/>
</Box> </Box>
)} )}
{value === 2 && ( {value === 2 && (
<Box sx={{ <Box
sx={{
width: '100%', width: '100%',
padding: '25px', padding: '25px',
flexDirection: 'column', flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
display: 'flex' display: 'flex',
}}> }}
<UserListOfInvites myAddress={address} setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} /> >
<UserListOfInvites
myAddress={address}
setOpenSnack={setOpenSnack}
setInfoSnack={setInfoSnack}
/>
</Box> </Box>
)} )}
</Box> </Box>
<CustomizedSnackbars open={openSnack} setOpen={setOpenSnack} info={infoSnack} setInfo={setInfoSnack} /> <CustomizedSnackbars
open={openSnack}
setOpen={setOpenSnack}
info={infoSnack}
setInfo={setInfoSnack}
/>
</Dialog> </Dialog>
</React.Fragment> </React.Fragment>
); );

31
src/components/Snackbar/Snackbar.tsx
View File

@ -1,31 +1,36 @@
import * as React from 'react'; import * as React from 'react';
import Button from '@mui/material/Button';
import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar'; import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert'; import Alert from '@mui/material/Alert';
export const CustomizedSnackbars = ({open, setOpen, info, setInfo, duration}) => { export const CustomizedSnackbars = ({
open,
setOpen,
info,
setInfo,
duration,
}) => {
const handleClose = ( const handleClose = (
event?: React.SyntheticEvent | Event, event?: React.SyntheticEvent | Event,
reason?: SnackbarCloseReason, reason?: SnackbarCloseReason
) => { ) => {
if (reason === 'clickaway') { if (reason === 'clickaway') {
return; return;
} }
setOpen(false); setOpen(false);
setInfo(null) setInfo(null);
}; };
if(!open) return null if (!open) return null;
return ( return (
<div> <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 <Alert
onClose={handleClose} onClose={handleClose}
severity={info?.type} severity={info?.type}
variant="filled" variant="filled"
@ -36,4 +41,4 @@ export const CustomizedSnackbars = ({open, setOpen, info, setInfo, duration}) =
</Snackbar> </Snackbar>
</div> </div>
); );
} };

4
src/styles/App-styles.ts
View File

@ -146,8 +146,8 @@ export const CustomButton = styled(Box)(({ theme }) => ({
'&:hover': { '&:hover': {
backgroundColor: backgroundColor:
theme.palette.mode === 'dark' theme.palette.mode === 'dark'
? 'rgba(41, 41, 43, 1)' ? 'rgb(136, 130, 130)'
: 'rgba(230, 230, 230, 1)', : 'rgb(173, 173, 180)',
color: '#fff', color: '#fff',
'svg path': { 'svg path': {