Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-18 13:51:21 +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,
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',

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) => {
return (
@ -8,8 +8,8 @@ export const Spacer = ({ height, width, ...props }: any) => {
display: 'flex',
flexShrink: 0,
width: width ? width : '0px',
...(props || {})
...(props || {}),
}}
/>
);
};
};

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

@ -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,21 +84,20 @@ 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", {
window
.sendMessage('createGroup', {
groupName: name,
groupDescription: description,
groupType: +groupType,
@ -114,8 +108,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
.then((response) => {
if (!response?.error) {
setInfoSnack({
type: "success",
message: "Successfully created group. It may take a couple of minutes for the changes to propagate",
type: 'success',
message:
'Successfully created group. It may take a couple of minutes for the changes to propagate',
});
setOpenSnack(true);
setTxList((prev) => [
@ -134,13 +129,12 @@ export const AddGroup = ({ address, open, setOpen }) => {
rej({ message: response.error });
})
.catch((error) => {
rej({ message: error.message || "An error occurred" });
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,15 +209,15 @@ 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" }}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs
value={value}
onChange={handleChange}
@ -230,8 +226,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
scrollButtons="auto"
allowScrollButtonsMobile
sx={{
"& .MuiTabs-indicator": {
backgroundColor: "white",
'& .MuiTabs-indicator': {
backgroundColor: 'white',
},
}}
>
@ -239,8 +235,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
label="Create Group"
{...a11yProps(0)}
sx={{
"&.Mui-selected": {
color: "white",
'&.Mui-selected': {
color: 'white',
},
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}}
@ -249,8 +245,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
label="Find Group"
{...a11yProps(1)}
sx={{
"&.Mui-selected": {
color: "white",
'&.Mui-selected': {
color: 'white',
},
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}}
@ -259,8 +255,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
label="Group Invites"
{...a11yProps(2)}
sx={{
"&.Mui-selected": {
color: "white",
'&.Mui-selected': {
color: 'white',
},
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}}
@ -269,23 +265,25 @@ export const AddGroup = ({ address, open, setOpen }) => {
</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',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>Name of group</Label>
@ -297,9 +295,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "5px",
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>Description of group</Label>
@ -312,9 +310,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "5px",
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>Group type</Label>
@ -333,10 +331,10 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box>
<Box
sx={{
display: "flex",
gap: "15px",
alignItems: "center",
cursor: "pointer",
display: 'flex',
gap: '15px',
alignItems: 'center',
cursor: 'pointer',
}}
onClick={() => setOpenAdvance((prev) => !prev)}
>
@ -347,14 +345,14 @@ export const AddGroup = ({ address, open, setOpen }) => {
<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)
Group Approval Threshold (number / percentage of Admins
that must approve a transaction)
</Label>
<Select
labelId="demo-simple-select-label"
@ -375,9 +373,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "5px",
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>
@ -406,9 +404,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "5px",
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>
@ -437,9 +435,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Collapse>
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "center",
display: 'flex',
width: '100%',
justifyContent: 'center',
}}
>
<Button
@ -454,34 +452,46 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Box>
)}
{value === 1 && (
<Box sx={{
<Box
sx={{
width: '100%',
padding: '25px',
flexDirection: 'column',
flexGrow: 1,
display: 'flex'
}}>
<AddGroupList setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
display: 'flex',
}}
>
<AddGroupList
setOpenSnack={setOpenSnack}
setInfoSnack={setInfoSnack}
/>
</Box>
)}
{value === 2 && (
<Box sx={{
<Box
sx={{
width: '100%',
padding: '25px',
flexDirection: 'column',
flexGrow: 1,
display: 'flex'
}}>
<UserListOfInvites myAddress={address} setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
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>
);

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

@ -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>
);
}
};

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

@ -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': {