From 7ae73d418e494b5bf27807b94e6fe3e4c152a41b Mon Sep 17 00:00:00 2001 From: nitegeist Date: Mon, 7 Aug 2023 13:40:16 -0500 Subject: [PATCH 1/3] Implement new overview drawer design --- src/components/chat/AppsSection.tsx | 27 +++ src/components/chat/AssetsSection.tsx | 29 +++ src/components/chat/ModalListContextMenu.tsx | 15 +- src/components/chat/OverviewDisplay.tsx | 25 +++ src/components/chat/OverviewDrawer.tsx | 225 +++++++++++++++++++ src/components/chat/OverviewSection.tsx | 96 ++++++++ src/components/chat/SafeList.tsx | 10 +- src/components/chat/chatOverview.tsx | 10 +- src/components/chat/chatSection.tsx | 32 +-- src/components/chat/chatTextField.tsx | 10 +- src/components/chat/modals/index.tsx | 19 +- src/components/tx/TxModal/index.tsx | 9 +- src/pages/chat.tsx | 66 +++--- src/pages/safe-list.tsx | 14 +- 14 files changed, 494 insertions(+), 93 deletions(-) create mode 100644 src/components/chat/AppsSection.tsx create mode 100644 src/components/chat/AssetsSection.tsx create mode 100644 src/components/chat/OverviewDisplay.tsx create mode 100644 src/components/chat/OverviewDrawer.tsx create mode 100644 src/components/chat/OverviewSection.tsx diff --git a/src/components/chat/AppsSection.tsx b/src/components/chat/AppsSection.tsx new file mode 100644 index 00000000000..3e4e9601a75 --- /dev/null +++ b/src/components/chat/AppsSection.tsx @@ -0,0 +1,27 @@ +import css from '@/components/chat/styles.module.css' +import { useAppDispatch } from "@/store" +import { openModal } from "@/store/modalServiceSlice" +import { Box, Button, Typography } from "@mui/material" +import { modalTypes } from "./modals" + +const AppsSection = () => { + const dispatch = useAppDispatch() + return ( + + + Apps + + + Explore the Safe Apps ecosystem — connect to your favourite web3 applications with your Safe wallet, + securely and efficiently + + {/* */} + + {/* */} + + ) +} + +export default AppsSection \ No newline at end of file diff --git a/src/components/chat/AssetsSection.tsx b/src/components/chat/AssetsSection.tsx new file mode 100644 index 00000000000..767c83f13f2 --- /dev/null +++ b/src/components/chat/AssetsSection.tsx @@ -0,0 +1,29 @@ +import css from '@/components/chat/styles.module.css'; +import { useAppDispatch } from '@/store'; +import { openModal } from '@/store/modalServiceSlice'; +import { Box, Button, Typography } from "@mui/material"; +import { modalTypes } from './modals'; + +const AssetsSection = () => { + const dispatch = useAppDispatch() + return ( + + + Assets + + View all tokens and NFTs the Safe holds. + {/* */} + + {/* */} + + ) +} + +export default AssetsSection \ No newline at end of file diff --git a/src/components/chat/ModalListContextMenu.tsx b/src/components/chat/ModalListContextMenu.tsx index b79ce78754a..0810a841188 100644 --- a/src/components/chat/ModalListContextMenu.tsx +++ b/src/components/chat/ModalListContextMenu.tsx @@ -1,6 +1,8 @@ import ContextMenu from '@/components/common/ContextMenu' -import AddIcon from '@/public/images/common/add.svg' import AddChatIcon from '@/public/images/chat/add-chat-icon.svg' +import AddIcon from '@/public/images/common/add.svg' +import { useAppDispatch } from '@/store' +import { openModal } from '@/store/modalServiceSlice' import { SvgIcon } from '@mui/material' import IconButton from '@mui/material/IconButton' import ListItemIcon from '@mui/material/ListItemIcon' @@ -8,16 +10,16 @@ import ListItemText from '@mui/material/ListItemText' import MenuItem from '@mui/material/MenuItem' import type { MouseEvent } from 'react' import { useState } from 'react' -import { AddFolderModal } from './modals/AddFolderModal' +import { modalTypes } from './modals' enum ModalType { ADDFOLDER = 'Add Folder', ADDSAFE = 'Add Safe', } -const ModalListContextMenu: React.FC<{ createSafe: boolean, setCreateSafe: any }> = ({ createSafe, setCreateSafe }) => { +const ModalListContextMenu = () => { const [anchorEl, setAnchorEl] = useState() - const [addFolder, setAddFolder] = useState(false) + const dispatch = useAppDispatch() const handleOpenContextMenu = (e: MouseEvent) => { setAnchorEl(e.currentTarget) @@ -29,7 +31,6 @@ const ModalListContextMenu: React.FC<{ createSafe: boolean, setCreateSafe: any } return ( <> - {addFolder && setAddFolder(!addFolder)} />} setAddFolder(!addFolder)} + onClick={() => dispatch(openModal({ modalName: modalTypes.addFolderModal, modalProps: '' }))} > @@ -47,7 +48,7 @@ const ModalListContextMenu: React.FC<{ createSafe: boolean, setCreateSafe: any } {ModalType.ADDFOLDER} setCreateSafe(!createSafe)} + onClick={() => dispatch(openModal({ modalName: modalTypes.createSafe, modalProps: '' }))} > diff --git a/src/components/chat/OverviewDisplay.tsx b/src/components/chat/OverviewDisplay.tsx new file mode 100644 index 00000000000..77ec0e8ce41 --- /dev/null +++ b/src/components/chat/OverviewDisplay.tsx @@ -0,0 +1,25 @@ +import useSafeInfo from "@/hooks/useSafeInfo"; +import { Box } from "@mui/material"; +import Members from "../common/Members"; +import TransactionHistory from "../common/TransactionHistory"; +import TransactionQueue from "../common/TransactionQueue"; +import AppsSection from "./AppsSection"; +import AssetsSection from "./AssetsSection"; +import type { Pages } from "./OverviewDrawer"; +import OverviewSection from "./OverviewSection"; + +const OverviewDisplay = ({ page, owners }: { page: Pages, owners: any[] }) => { + const { safe, safeAddress } = useSafeInfo() + const currentView = { + Overview: , + Members: , + TransactionQueue: , + TransactionHistory: , + Assets: , + Apps: + }[page] + + return {currentView} +} + +export default OverviewDisplay \ No newline at end of file diff --git a/src/components/chat/OverviewDrawer.tsx b/src/components/chat/OverviewDrawer.tsx new file mode 100644 index 00000000000..0605175f136 --- /dev/null +++ b/src/components/chat/OverviewDrawer.tsx @@ -0,0 +1,225 @@ +import css from '@/components/chat/styles.module.css'; +import AppsIcon from '@/public/images/apps/apps-icon.svg'; +import NftIcon from '@/public/images/common/nft.svg'; +import AssetsIcon from '@/public/images/sidebar/assets.svg'; +import { useAppDispatch } from '@/store'; +import { openModal } from '@/store/modalServiceSlice'; +import MoreAppsIcon from '@mui/icons-material/Apps'; +import HistoryIcon from '@mui/icons-material/History'; +import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'; +import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'; +import ListIcon from '@mui/icons-material/List'; +import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'; +import PeopleIcon from '@mui/icons-material/People'; +import { Box, Button, Divider, List, ListItem, ListItemButton, ListItemIcon, Stack, SvgIcon } from '@mui/material'; +import MuiDrawer from '@mui/material/Drawer'; +import IconButton from '@mui/material/IconButton'; +import type { CSSObject, Theme } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; +import * as React from 'react'; +import { modalTypes } from './modals'; +import OverviewDisplay from './OverviewDisplay'; + +const drawerWidth = 450; + +export enum Pages { + Overview = 'Overview', + Members = 'Members', + TransactionQueue = 'TransactionQueue', + TransactionHistory = 'TransactionHistory', + Assets = 'Assets', + Apps = 'Apps' +} + +const pages = [ + { + name: Pages.Overview, + icon: AppsIcon + }, + { + name: Pages.Members, + icon: PeopleIcon + }, + { + name: Pages.TransactionQueue, + icon: ListIcon + }, + { + name: Pages.TransactionHistory, + icon: HistoryIcon + }, + { + name: Pages.Assets, + icon: MonetizationOnIcon + }, + { + name: Pages.Apps, + icon: MoreAppsIcon + } +] + +const openedMixin = (theme: Theme): CSSObject => ({ + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + overflowX: 'hidden', +}) + +const closedMixin = (theme: Theme): CSSObject => ({ + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + overflowX: 'hidden', + overflowY: 'hidden', + width: `calc(${theme.spacing(7)} + 1px)`, + [theme.breakpoints.up('sm')]: { + width: `calc(${theme.spacing(8)} + 1px)`, + }, +}) + +const DrawerFooter = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + padding: theme.spacing(0, 1), + // necessary for content to be below app bar + ...theme.mixins.toolbar, +})) + +const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( + ({ theme, open }) => ({ + width: drawerWidth, + flexShrink: 0, + whiteSpace: 'nowrap', + boxSizing: 'border-box', + ...(open && { + ...openedMixin(theme), + '& .MuiDrawer-paper': openedMixin(theme), + }), + ...(!open && { + ...closedMixin(theme), + '& .MuiDrawer-paper': closedMixin(theme), + }), + }), +) + +const OverviewDrawer: React.FC<{ + owners: any[] +}> = ({ owners }) => { + const [open, setOpen] = React.useState(false) + const [selectedPage, setSelectedPage] = React.useState(Pages.Overview) + const dispatch = useAppDispatch() + const handleDrawerOpen = () => { + setOpen(true) + }; + + const handleSelectedPage = (name: Pages) => { + handleDrawerOpen() + setSelectedPage(name) + } + + const handleDrawerClose = () => { + setOpen(false) + }; + + return ( + + } + > + + + {pages.map((page, index) => ( + + handleSelectedPage(page.name)} + sx={{ + minHeight: 48, + justifyContent: open ? 'initial' : 'center', + px: 2, + borderRadius: 1.2 + }} + > + + + + + + ))} + + + + {open ? : } + + + + + + + {/* */} + + {/* */} + + + + + + ); +} + +export default OverviewDrawer \ No newline at end of file diff --git a/src/components/chat/OverviewSection.tsx b/src/components/chat/OverviewSection.tsx new file mode 100644 index 00000000000..4b160e3b35d --- /dev/null +++ b/src/components/chat/OverviewSection.tsx @@ -0,0 +1,96 @@ +import css from '@/components/chat/styles.module.css' +import { ThresholdOverview } from '@/components/chat/threshold' +import CopyButton from '@/components/common/CopyButton' +import QrCodeButton from '@/components/sidebar/QrCodeButton' +import { useCurrentChain } from '@/hooks/useChains' +import useSafeInfo from '@/hooks/useSafeInfo' +import AppsIcon from '@/public/images/apps/apps-icon.svg' +import CopyIcon from '@/public/images/common/copy.svg' +import LinkIcon from '@/public/images/common/link.svg' +import { useAppSelector } from '@/store' +import { selectSettings } from '@/store/settingsSlice' +import { getBlockExplorerLink } from '@/utils/chains' +import ellipsisAddress from '@/utils/ellipsisAddress' +import { Box, SvgIcon, Typography } from '@mui/material' +import { grey } from '@mui/material/colors' +import IconButton from '@mui/material/IconButton' +import Tooltip from '@mui/material/Tooltip' + +const OverviewSection = () => { + const { safe, safeAddress } = useSafeInfo() + const ownerLength = safe?.owners?.length || 0 + const threshold = safe.threshold + const settings = useAppSelector(selectSettings) + const chain = useCurrentChain() + const addressCopyText = settings.shortName.copy && chain ? `${chain.shortName}:${safeAddress}` : safeAddress + const blockExplorerLink = chain ? getBlockExplorerLink(chain, safeAddress) : undefined + return ( + + + Overview + + + + Address + + + + {ellipsisAddress(`${safeAddress}`)} + + {/* */} +
+ + + ({ color: palette.border.main })}> + + + + + + + + + + + ({ color: palette.border.main })} + > + + + +
+ + + + Network + + {safe?.chainId === '137' + ? 'Polygon' + : safe?.chainId === '1' + ? 'Ethereum' + : safe?.chainId === '10' + ? 'Optimism' + : safe?.chainId === '42161' + ? 'Arbitrum' + : safe?.chainId === '56' + ? 'BNB Smart Chain' + : safe?.chainId === '100' + ? 'Gnosis Chain' + : ''} + + + + + Threshold + + + + + ) +} + +export default OverviewSection \ No newline at end of file diff --git a/src/components/chat/SafeList.tsx b/src/components/chat/SafeList.tsx index cd9c4651dff..e1ea5104c90 100644 --- a/src/components/chat/SafeList.tsx +++ b/src/components/chat/SafeList.tsx @@ -1,6 +1,8 @@ import { useAllOwnedSafes } from "@/hooks/useAllOwnedSafes" import useSafeAddress from "@/hooks/useSafeAddress" import useWallet from "@/hooks/wallets/useWallet" +import { useAppDispatch } from "@/store" +import { openModal } from "@/store/modalServiceSlice" import { Box, Button, Tab, Tabs, Toolbar, Typography } from "@mui/material" import { useEffect, useState } from "react" import useConnectWallet from "../common/ConnectWallet/useConnectWallet" @@ -8,6 +10,7 @@ import FormattedName from "../common/FormattedName/FormattedName" import FolderList from "../folder-list" import FolderGroup from "../folder-list/folderGroups" import ModalListContextMenu from "./ModalListContextMenu" +import { modalTypes } from "./modals" import css from './styles.module.css' interface TabPanelProps { @@ -44,7 +47,7 @@ function a11yProps(index: number) { } } -export const SafeList: React.FC<{ createSafe: boolean, setCreateSafe: any }> = ({ createSafe, setCreateSafe }) => { +export const SafeList = () => { //user and safe const wallet = useWallet() const safeAddress = useSafeAddress() @@ -52,6 +55,7 @@ export const SafeList: React.FC<{ createSafe: boolean, setCreateSafe: any }> = ( const handleConnect = useConnectWallet() const allOwnedSafes = useAllOwnedSafes() const [folders, setFolders] = useState([]) + const dispatch = useAppDispatch() const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue) localStorage.setItem('tabIndex', newValue.toString()) @@ -93,7 +97,7 @@ export const SafeList: React.FC<{ createSafe: boolean, setCreateSafe: any }> = ( VIEW AS: {wallet?.address ? : Not connected} - + = ( <> : wallet?.address && areAllValuesEmptyArrays(allOwnedSafes) ? - : diff --git a/src/components/chat/chatOverview.tsx b/src/components/chat/chatOverview.tsx index 74d7300a7b4..81d303c12b2 100644 --- a/src/components/chat/chatOverview.tsx +++ b/src/components/chat/chatOverview.tsx @@ -19,14 +19,13 @@ import { useCurrentChain } from '@/hooks/useChains' import AppsIcon from '@/public/images/apps/apps-icon.svg' import CopyIcon from '@/public/images/common/copy.svg' import LinkIcon from '@/public/images/common/link.svg' -import { useAppSelector } from '@/store' +import { useAppDispatch, useAppSelector } from '@/store' +import { openModal } from '@/store/modalServiceSlice' import { selectSettings } from '@/store/settingsSlice' import { getBlockExplorerLink } from '@/utils/chains' import ellipsisAddress from '@/utils/ellipsisAddress' import IconButton from '@mui/material/IconButton' import Tooltip from '@mui/material/Tooltip' -import { useAppDispatch } from '@/store' -import { openModal } from '@/store/modalServiceSlice' export const ChatOverview: React.FC<{ owners: any[] @@ -42,12 +41,13 @@ export const ChatOverview: React.FC<{ const chain = useCurrentChain() const addressCopyText = settings.shortName.copy && chain ? `${chain.shortName}:${safeAddress}` : safeAddress const blockExplorerLink = chain ? getBlockExplorerLink(chain, safeAddress) : undefined - + return ( <> {tokenTransfer && ( toggleTokenTransfer(!tokenTransfer)} initialData={[{ disableSpendingLimit: false }]} /> @@ -146,7 +146,7 @@ export const ChatOverview: React.FC<{ Apps - + Explore the Safe Apps ecosystem — connect to your favourite web3 applications with your Safe wallet, securely and efficiently diff --git a/src/components/chat/chatSection.tsx b/src/components/chat/chatSection.tsx index df0de6091bb..b6bf8b95cb0 100644 --- a/src/components/chat/chatSection.tsx +++ b/src/components/chat/chatSection.tsx @@ -1,18 +1,18 @@ +import { getExistingAuth } from '@/components/auth-sign-in/helpers' import useSafeAddress from '@/hooks/useSafeAddress' import useTxHistory from '@/hooks/useTxHistory' import useTxQueue from '@/hooks/useTxQueue' +import useOnboard from '@/hooks/wallets/useOnboard' import useWallet from '@/hooks/wallets/useWallet' +import { createWeb3 } from '@/hooks/wallets/web3' import { useAppSelector } from '@/store' import { selectGroup, selectUserItem, setChat } from '@/store/chatServiceSlice' -import { Box, List, ListItem, useMediaQuery, ListItemAvatar } from '@mui/material' +import { Box, List, ListItem, ListItemAvatar, useMediaQuery } from '@mui/material' import React, { useCallback, useEffect, useRef, useState } from 'react' import { useDispatch } from 'react-redux' import { getMessages, listenForMessage } from '../../services/chat' import TxListItemChat from '../transactions/TxListItemChat' import ChatMessage from './chatMessage' -import useOnboard from '@/hooks/wallets/useOnboard' -import { createWeb3 } from '@/hooks/wallets/web3' -import { getExistingAuth } from '@/components/auth-sign-in/helpers' import ChatTextField from './chatTextField' export const ChatSection: React.FC<{ drawerWidth?: number, drawerOpen?: boolean }> = ({ drawerWidth, drawerOpen }) => { @@ -85,7 +85,7 @@ export const ChatSection: React.FC<{ drawerWidth?: number, drawerOpen?: boolean return 0 } }) - if (JSON.stringify(allData) !== JSON.stringify(chatData)) setChatData(allData) + if (JSON.stringify(allData) !== JSON.stringify(chatData)) setChatData(allData) }, [messages, txHistory?.page, txQueue?.page, safeAddress]) @@ -162,10 +162,10 @@ export const ChatSection: React.FC<{ drawerWidth?: number, drawerOpen?: boolean disableGutters > - + - + ) @@ -178,11 +178,11 @@ export const ChatSection: React.FC<{ drawerWidth?: number, drawerOpen?: boolean disableGutters > - + - - + + ) } @@ -194,12 +194,12 @@ export const ChatSection: React.FC<{ drawerWidth?: number, drawerOpen?: boolean alignItems="flex-start" disableGutters > - - - - - - + + + + + + ) } diff --git a/src/components/chat/chatTextField.tsx b/src/components/chat/chatTextField.tsx index b9d2a95adc6..1a69731e1e0 100644 --- a/src/components/chat/chatTextField.tsx +++ b/src/components/chat/chatTextField.tsx @@ -1,12 +1,12 @@ import useSafeAddress from "@/hooks/useSafeAddress"; import { sendMessage } from "@/services/chat"; +import { publish } from "@/services/events"; import SendOutlinedIcon from '@mui/icons-material/SendOutlined'; -import { Button, Divider, InputBase, Paper, Box, Typography } from "@mui/material"; +import { Box, Button, Divider, InputBase, Paper, Typography } from "@mui/material"; import { styled } from '@mui/material/styles'; import React, { useState } from "react"; -import AddNewTxLightningIconButton from "./AddNewTxLightningIconButton"; import SignInLink from "../auth-sign-in/auth-link"; -import { publish } from "@/services/events"; +import AddNewTxLightningIconButton from "./AddNewTxLightningIconButton"; const CustomInput = styled(InputBase)(({ theme }) => ({ '& .MuiInputBase-input': { @@ -48,7 +48,7 @@ const ChatTextField: React.FC<{ onSubmit={handleSubmit} > - + { @@ -67,7 +67,7 @@ const ChatTextField: React.FC<{ ) : ( - To view and send messages you need to authenticate your account: + To view and send messages you need to authenticate your account: ) } diff --git a/src/components/chat/modals/index.tsx b/src/components/chat/modals/index.tsx index c0a89c67661..55bb6108849 100644 --- a/src/components/chat/modals/index.tsx +++ b/src/components/chat/modals/index.tsx @@ -1,15 +1,14 @@ +import TokenTransferModal from "@/components/tx/modals/TokenTransferModal"; import { useAppDispatch, useAppSelector } from "@/store"; -import { selectModalState } from "@/store/modalServiceSlice"; -import { closeModal } from "@/store/modalServiceSlice"; -import { ViewSingleTransactionModal } from "./ViewSingleTransaction"; -import ViewTransactionsModal from "./ViewTransactionsModal"; -import React from 'react' -import ViewCreateSafe from "./CreateSafe"; +import { closeModal, selectModalState } from "@/store/modalServiceSlice"; import { AddFolderModal } from "./AddFolderModal"; +import ViewCreateSafe from "./CreateSafe"; import ViewAppModal from "./ViewAppModal"; import ViewAppsModal from "./ViewAppsModal"; import ViewAssetsModal from "./ViewAssetsModal"; import ViewSettings from "./ViewSettingsModal"; +import { ViewSingleTransactionModal } from "./ViewSingleTransaction"; +import ViewTransactionsModal from "./ViewTransactionsModal"; export const modalTypes = { viewSingleTransaction: 'viewSingleTransaction', @@ -20,6 +19,7 @@ export const modalTypes = { appsModal: 'appsModal', assetsModals: 'assetsModals', settingsModal: 'settingsModal', + tokenTransferModal: 'tokenTransferModal' } export const Modals = () => { @@ -77,6 +77,13 @@ export const Modals = () => { onClose={() => dispatch(closeModal())} /> )} + {activeModalState?.activeModal === modalTypes.tokenTransferModal && ( + dispatch(closeModal())} + initialData={[{ disableSpendingLimit: false }]} + /> + )} ) } diff --git a/src/components/tx/TxModal/index.tsx b/src/components/tx/TxModal/index.tsx index 9a114ec35ae..8263327bae9 100644 --- a/src/components/tx/TxModal/index.tsx +++ b/src/components/tx/TxModal/index.tsx @@ -1,18 +1,19 @@ +import ModalDialog from '@/components/common/ModalDialog' +import type { TxStepperProps } from '@/components/tx/TxStepper/useTxStepper' import type { ReactElement } from 'react' import TxStepper from '../TxStepper' -import type { TxStepperProps } from '@/components/tx/TxStepper/useTxStepper' -import ModalDialog from '@/components/common/ModalDialog' export type TxModalProps = { + open: boolean onClose: () => void steps: TxStepperProps['steps'] wide?: boolean initialData?: TxStepperProps['initialData'] } -const TxModal = ({ onClose, steps, wide = false, initialData }: TxModalProps): ReactElement => { +const TxModal = ({ open, onClose, steps, wide = false, initialData }: TxModalProps): ReactElement => { return ( - + ) diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index 0629a92c534..a573156b59d 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -1,6 +1,5 @@ -import { ChatOverview } from '@/components/chat/chatOverview' -import ViewCreateSafe from '@/components/chat/modals/CreateSafe' -import ViewAppModal from '@/components/chat/modals/ViewAppModal' +import { modalTypes } from '@/components/chat/modals' +import OverviewDrawer from '@/components/chat/OverviewDrawer' import { SafeList } from '@/components/chat/SafeList' import FormattedName from '@/components/common/FormattedName/FormattedName' import Identicon from '@/components/common/Identicon' @@ -8,9 +7,9 @@ import { AppRoutes } from '@/config/routes' import useSafeInfo from '@/hooks/useSafeInfo' import useWallet from '@/hooks/wallets/useWallet' import SettingsIcon from '@/public/images/chat/settings-svgrepo-com.svg' -import ViewSidebarIcon from '@/public/images/chat/sidebar-right-svgrepo-com.svg' -import { ArrowBackIos } from '@mui/icons-material' import { useAppDispatch } from '@/store' +import { openModal } from '@/store/modalServiceSlice' +import { ArrowBackIos } from '@mui/icons-material' import { Box, Container, Drawer, @@ -24,12 +23,10 @@ import Head from 'next/head' import Link from 'next/link' import { useRouter } from 'next/router' import React, { useEffect, useState } from 'react' -import { openModal } from '@/store/modalServiceSlice' -import { modalTypes } from '@/components/chat/modals' const ChatWrapper = dynamic(() => import('@/components/chat/ChatWrapper'), { ssr: false }) -const drawerWidth = 360 +const drawerWidth = 450 const Main = styled('div', { shouldForwardProp: (prop) => prop !== 'open' })<{ open?: boolean @@ -97,8 +94,6 @@ const Chat = () => { return ( <> - {app && handleToggleApp()} />} - {createSafe && setCreateSafe(!createSafe)} />} Decentra — Chat @@ -121,7 +116,7 @@ const Chat = () => { variant="permanent" anchor="left" > - + }
@@ -162,11 +157,11 @@ const Chat = () => { onClick={() => dispatch(openModal({ modalName: modalTypes.settingsModal, modalProps: '' }))}> - {matchesDesktop && + {/* {matchesDesktop && {open ? : } - } + } */} } @@ -212,28 +207,29 @@ const Chat = () => {
{matchesDesktop && - - - + + // + // + // } diff --git a/src/pages/safe-list.tsx b/src/pages/safe-list.tsx index b0b2e35be69..2935e967812 100644 --- a/src/pages/safe-list.tsx +++ b/src/pages/safe-list.tsx @@ -1,21 +1,11 @@ import MobileChatFooter from "@/components/chat/mobileChatFooter" -import ViewCreateSafe from "@/components/chat/modals/CreateSafe" import { SafeList } from "@/components/chat/SafeList" -import { useRouter } from "next/router" -import React, { useEffect, useState } from "react" +import React from "react" const SafePage: React.FC = () => { - const router = useRouter() - const [createSafe, setCreateSafe] = useState(false) - useEffect(() => { - if (router.asPath.includes('chain')) { - setCreateSafe(true) - } - }, [router.asPath]) return ( <> - {createSafe && setCreateSafe(!createSafe)} />} - + ) From 0d1559bdb2deda48d3ab88867dc1576c0a519cf0 Mon Sep 17 00:00:00 2001 From: nitegeist Date: Mon, 7 Aug 2023 13:42:27 -0500 Subject: [PATCH 2/3] Minor fix --- src/components/chat/chatOverview.tsx | 1 - src/components/chat/modals/index.tsx | 1 - src/components/tx/TxModal/index.tsx | 5 ++--- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/chat/chatOverview.tsx b/src/components/chat/chatOverview.tsx index 81d303c12b2..3dcbdb57100 100644 --- a/src/components/chat/chatOverview.tsx +++ b/src/components/chat/chatOverview.tsx @@ -47,7 +47,6 @@ export const ChatOverview: React.FC<{ <> {tokenTransfer && ( toggleTokenTransfer(!tokenTransfer)} initialData={[{ disableSpendingLimit: false }]} /> diff --git a/src/components/chat/modals/index.tsx b/src/components/chat/modals/index.tsx index 55bb6108849..9c27a6f1780 100644 --- a/src/components/chat/modals/index.tsx +++ b/src/components/chat/modals/index.tsx @@ -79,7 +79,6 @@ export const Modals = () => { )} {activeModalState?.activeModal === modalTypes.tokenTransferModal && ( dispatch(closeModal())} initialData={[{ disableSpendingLimit: false }]} /> diff --git a/src/components/tx/TxModal/index.tsx b/src/components/tx/TxModal/index.tsx index 8263327bae9..1077fc98c45 100644 --- a/src/components/tx/TxModal/index.tsx +++ b/src/components/tx/TxModal/index.tsx @@ -4,16 +4,15 @@ import type { ReactElement } from 'react' import TxStepper from '../TxStepper' export type TxModalProps = { - open: boolean onClose: () => void steps: TxStepperProps['steps'] wide?: boolean initialData?: TxStepperProps['initialData'] } -const TxModal = ({ open, onClose, steps, wide = false, initialData }: TxModalProps): ReactElement => { +const TxModal = ({ onClose, steps, wide = false, initialData }: TxModalProps): ReactElement => { return ( - + ) From 167bfd51749b6102d2627ed87b7f67f00dc0d0a5 Mon Sep 17 00:00:00 2001 From: nitegeist Date: Thu, 10 Aug 2023 18:39:21 -0500 Subject: [PATCH 3/3] Working on mobile drawer pushing over content --- src/components/chat/OverviewDrawer.tsx | 5 +++-- src/pages/chat.tsx | 8 +++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/chat/OverviewDrawer.tsx b/src/components/chat/OverviewDrawer.tsx index 0605175f136..2015f42cf6d 100644 --- a/src/components/chat/OverviewDrawer.tsx +++ b/src/components/chat/OverviewDrawer.tsx @@ -11,7 +11,7 @@ import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArro import ListIcon from '@mui/icons-material/List'; import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'; import PeopleIcon from '@mui/icons-material/People'; -import { Box, Button, Divider, List, ListItem, ListItemButton, ListItemIcon, Stack, SvgIcon } from '@mui/material'; +import { Box, Button, Divider, List, ListItem, ListItemButton, ListItemIcon, Stack, SvgIcon, useMediaQuery } from '@mui/material'; import MuiDrawer from '@mui/material/Drawer'; import IconButton from '@mui/material/IconButton'; import type { CSSObject, Theme } from '@mui/material/styles'; @@ -109,6 +109,7 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' const OverviewDrawer: React.FC<{ owners: any[] }> = ({ owners }) => { + const matches = useMediaQuery('(max-width: 900px)') const [open, setOpen] = React.useState(false) const [selectedPage, setSelectedPage] = React.useState(Pages.Overview) const dispatch = useAppDispatch() @@ -127,7 +128,7 @@ const OverviewDrawer: React.FC<{ return ( { - {matchesDesktop && - - // + {/* // { // open={open} // > // - // - } + // */} )