diff --git a/src/Wallets.tsx b/src/Wallets.tsx index 8faf005..240ca40 100644 --- a/src/Wallets.tsx +++ b/src/Wallets.tsx @@ -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 }) => { > { } /> + { - return ( - - ); - }; \ No newline at end of file + return ( + + ); +}; diff --git a/src/components/Group/AddGroup.tsx b/src/components/Group/AddGroup.tsx index 1cf86fe..28ffa7b 100644 --- a/src/components/Group/AddGroup.tsx +++ b/src/components/Group/AddGroup.tsx @@ -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} > - + Group Mgmt @@ -213,275 +209,289 @@ export const AddGroup = ({ address, open, setOpen }) => { - - - - - - + + + + + + - + {value === 0 && ( - - - setName(e.target.value)} - /> - - - - - setDescription(e.target.value)} - /> - - - - - - setOpenAdvance((prev) => !prev)} - > - Advanced options - - {openAdvance ? : } - - - + + setName(e.target.value)} + /> + + + + + setDescription(e.target.value)} + /> + + + setOpenAdvance((prev) => !prev)} > - - + Advanced options + + {openAdvance ? : } + + + + + + + + + + + + + + - - + Create Group + - - - - )} {value === 1 && ( - - - + + - )} - - {value === 2 && ( - - - - )} - + {value === 2 && ( + + + + )} - + ); diff --git a/src/components/Snackbar/Snackbar.tsx b/src/components/Snackbar/Snackbar.tsx index 59fa295..d79677e 100644 --- a/src/components/Snackbar/Snackbar.tsx +++ b/src/components/Snackbar/Snackbar.tsx @@ -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 (
- +
); -} \ No newline at end of file +}; diff --git a/src/styles/App-styles.ts b/src/styles/App-styles.ts index 9774f06..da2b8c1 100644 --- a/src/styles/App-styles.ts +++ b/src/styles/App-styles.ts @@ -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': {