From 02d5f0a90a18baf92f8203fced80134922a0bb4a Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Mon, 16 Jan 2023 15:02:35 -0500 Subject: [PATCH 01/45] added cometchat, configured, added route, added nav item --- package.json | 1 + public/images/chat/chat-icon.svg | 4 + .../sidebar/SidebarNavigation/config.tsx | 6 + src/config/routes.ts | 1 + src/pages/chat.tsx | 16 ++ src/services/chat/chat.ts | 137 ++++++++++++++++++ yarn.lock | 5 + 7 files changed, 170 insertions(+) create mode 100644 public/images/chat/chat-icon.svg create mode 100644 src/pages/chat.tsx create mode 100644 src/services/chat/chat.ts diff --git a/package.json b/package.json index ec428a81563..94f09d13475 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "lint" ], "dependencies": { + "@cometchat-pro/chat": "3.0.10", "@date-io/date-fns": "^2.15.0", "@emotion/cache": "^11.10.1", "@emotion/react": "^11.10.0", diff --git a/public/images/chat/chat-icon.svg b/public/images/chat/chat-icon.svg new file mode 100644 index 00000000000..4ecb7322f3a --- /dev/null +++ b/public/images/chat/chat-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/sidebar/SidebarNavigation/config.tsx b/src/components/sidebar/SidebarNavigation/config.tsx index 43205ee2e22..4a4160a3c3a 100644 --- a/src/components/sidebar/SidebarNavigation/config.tsx +++ b/src/components/sidebar/SidebarNavigation/config.tsx @@ -5,6 +5,7 @@ import HomeIcon from '@/public/images/sidebar/home.svg' import AssetsIcon from '@/public/images/sidebar/assets.svg' import TransactionIcon from '@/public/images/sidebar/transactions.svg' import ABIcon from '@/public/images/sidebar/address-book.svg' +import ChatIcon from '@/public/images/chat/chat-icon.svg' import AppsIcon from '@/public/images/apps/apps-icon.svg' import SettingsIcon from '@/public/images/sidebar/settings.svg' import { SvgIcon } from '@mui/material' @@ -22,6 +23,11 @@ export const navItems: NavItem[] = [ icon: , href: AppRoutes.home, }, + { + label: 'Chat', + icon: , + href: AppRoutes.chat, + }, { label: 'Assets', icon: , diff --git a/src/config/routes.ts b/src/config/routes.ts index 6fd0bfd99d9..15088f4f8cb 100644 --- a/src/config/routes.ts +++ b/src/config/routes.ts @@ -4,6 +4,7 @@ export const AppRoutes = { index: '/', import: '/import', home: '/home', + chat: '/chat', apps: '/apps', addressBook: '/address-book', balances: { diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx new file mode 100644 index 00000000000..434fbdfbf3a --- /dev/null +++ b/src/pages/chat.tsx @@ -0,0 +1,16 @@ +import type { NextPage } from 'next' +import Head from 'next/head' + +const Home: NextPage = () => { + return ( + <> + + Safe – Chat + + +
Chat
+ + ) +} + +export default Home diff --git a/src/services/chat/chat.ts b/src/services/chat/chat.ts new file mode 100644 index 00000000000..ca82a430bde --- /dev/null +++ b/src/services/chat/chat.ts @@ -0,0 +1,137 @@ +import { CometChat } from '@cometchat-pro/chat' +import { getGlobalState } from '../store' + +const CONSTANTS = { + APP_ID: process.env.REACT_APP_COMET_CHAT_APP_ID, + REGION: process.env.REACT_APP_COMET_CHAT_REGION, + Auth_Key: process.env.REACT_APP_COMET_CHAT_AUTH_KEY, +} + +const initCometChat = async () => { + const appID = CONSTANTS.APP_ID + const region = CONSTANTS.REGION + + const appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build() + + await CometChat.init(appID, appSetting) + .then(() => console.log('Initialization completed successfully')) + .catch((error) => console.log(error)) +} + +const loginWithCometChat = async () => { + const authKey = CONSTANTS.Auth_Key + const UID = getGlobalState('connectedAccount') + + return new Promise(async (resolve, reject) => { + await CometChat.login(UID, authKey) + .then((user) => resolve(user)) + .catch((error) => reject(error)) + }) +} + +const signUpWithCometChat = async () => { + const authKey = CONSTANTS.Auth_Key + const UID = getGlobalState('connectedAccount') + const user = new CometChat.User(UID) + + user.setName(UID) + return new Promise(async (resolve, reject) => { + await CometChat.createUser(user, authKey!) + .then((user) => resolve(user)) + .catch((error) => reject(error)) + }) +} + +const logOutWithCometChat = async () => { + return new Promise(async (resolve, reject) => { + await CometChat.logout() + .then(() => resolve()) + .catch(() => reject()) + }) +} + +const checkAuthState = async () => { + return new Promise(async (resolve, reject) => { + await CometChat.getLoggedinUser() + .then((user) => resolve(user)) + .catch((error) => reject(error)) + }) +} + +const createNewGroup = async (GUID: any, groupName: any) => { + const groupType = CometChat.GROUP_TYPE.PUBLIC + const password = '' + const group = new CometChat.Group(GUID, groupName, groupType, password) + + return new Promise(async (resolve, reject) => { + await CometChat.createGroup(group) + .then((group) => resolve(group)) + .catch((error) => reject(error)) + }) +} + +const getGroup = async (GUID: any) => { + return new Promise(async (resolve, reject) => { + await CometChat.getGroup(GUID) + .then((group) => resolve(group)) + .catch((error) => reject(error)) + }) +} + +const joinGroup = async (GUID: any) => { + const groupType = CometChat.GROUP_TYPE.PUBLIC + const password = '' + + return new Promise(async (resolve, reject) => { + await CometChat.joinGroup(GUID, groupType, password) + .then((group) => resolve(group)) + .catch((error) => reject(error)) + }) +} + +const getMessages = async (UID: any) => { + const limit = 30 + const messagesRequest = new CometChat.MessagesRequestBuilder().setGUID(UID).setLimit(limit).build() + + return new Promise(async (resolve, reject) => { + await messagesRequest + .fetchPrevious() + .then((messages) => resolve(messages.filter((msg) => msg.type == 'text'))) + .catch((error) => reject(error)) + }) +} + +const sendMessage = async (receiverID: any, messageText: any) => { + const receiverType = CometChat.RECEIVER_TYPE.GROUP + const textMessage = new CometChat.TextMessage(receiverID, messageText, receiverType) + return new Promise(async (resolve, reject) => { + await CometChat.sendMessage(textMessage) + .then((message) => resolve(message)) + .catch((error) => reject(error)) + }) +} + +const listenForMessage = async (listenerID: any) => { + return new Promise(async (resolve, reject) => { + CometChat.addMessageListener( + listenerID, + new CometChat.MessageListener({ + onTextMessageReceived: (message: any) => resolve(message), + }), + ) + }) +} + +export { + initCometChat, + loginWithCometChat, + signUpWithCometChat, + logOutWithCometChat, + getMessages, + sendMessage, + checkAuthState, + createNewGroup, + getGroup, + joinGroup, + listenForMessage, +} diff --git a/yarn.lock b/yarn.lock index d354fcbec41..8eaeadaa40f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1077,6 +1077,11 @@ resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9" integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== +"@cometchat-pro/chat@3.0.10": + version "3.0.10" + resolved "https://registry.yarnpkg.com/@cometchat-pro/chat/-/chat-3.0.10.tgz#409f85b03d4de29a1ed7623aaba493e135ecbf72" + integrity sha512-krbu27SPRKQXMGoamy9tOJMkRAtlJqIpsoZIy5//F6p4tON6XUVDzk8X8UhFXAqTMqEXzCnUPFKS9kyQBH80pg== + "@cspotcode/source-map-support@^0.8.0": version "0.8.1" resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1" From a6bf1d3ca5ccb2d63fb0d50c921e7bd885306054 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Mon, 16 Jan 2023 15:55:20 -0500 Subject: [PATCH 02/45] no ssr --- src/components/chat/index.tsx | 101 ++++++++++++++++++++++++ src/pages/chat.tsx | 5 +- src/services/chat/{chat.ts => index.ts} | 17 ++-- 3 files changed, 115 insertions(+), 8 deletions(-) create mode 100644 src/components/chat/index.tsx rename src/services/chat/{chat.ts => index.ts} (87%) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx new file mode 100644 index 00000000000..0c545dc5f4d --- /dev/null +++ b/src/components/chat/index.tsx @@ -0,0 +1,101 @@ +import { useEffect, useState } from 'react' +import { getMessages, listenForMessage, sendMessage } from '../../services/chat' + +//@ts-ignore +const Chat = ({ id, group }) => { + const [message, setMessage] = useState('') + const [messages, setMessages] = useState([]) + const connectedAccount = '0xc0163E58648b247c143023CFB26C2BAA42C9d9A9' + const handleSubmit = async (e: any) => { + e.preventDefault() + + if (!message) return + await sendMessage(`pid_${connectedAccount}`, message) + .then(async (msg: any) => { + //@ts-ignore + setMessages((prevState) => [...prevState, msg]) + setMessage('') + scrollToEnd() + }) + .catch((error: any) => { + console.log(error) + }) + } + + useEffect(() => { + async function getM() { + await getMessages(`pid_${connectedAccount}`) + .then((msgs) => { + //@ts-ignore + setMessages(msgs) + scrollToEnd() + }) + .catch((error) => console.log(error)) + + await listenForMessage(`pid_${connectedAccount}`) + .then((msg) => { + //@ts-ignore + setMessages((prevState) => [...prevState, msg]) + scrollToEnd() + }) + .catch((error) => console.log(error)) + } + getM() + }, []) + + const scrollToEnd = () => { + const elmnt = document.getElementById('messages-container') + //@ts-ignore + elmnt.scrollTop = elmnt.scrollHeight + } + + return ( +
+

Safe Chat

+

Join the Live Chat

+
+
+ {messages.map((msg, i) => ( + //@ts-ignore + + ))} +
+ +
+ setMessage(e.target.value)} + required + /> + +
+
+
+ ) +} + +//@ts-ignore +const Message = ({ msg, owner, isOwner }) => ( +
+
+
+ {isOwner ? '@You' : owner} + {msg} +
+
+
+) + +export default Chat diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index 434fbdfbf3a..13fbeb6eabc 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -1,5 +1,6 @@ import type { NextPage } from 'next' import Head from 'next/head' +import Chat from '../components/chat' const Home: NextPage = () => { return ( @@ -8,7 +9,9 @@ const Home: NextPage = () => { Safe – Chat -
Chat
+
+ +
) } diff --git a/src/services/chat/chat.ts b/src/services/chat/index.ts similarity index 87% rename from src/services/chat/chat.ts rename to src/services/chat/index.ts index ca82a430bde..2465ebc3517 100644 --- a/src/services/chat/chat.ts +++ b/src/services/chat/index.ts @@ -1,5 +1,4 @@ import { CometChat } from '@cometchat-pro/chat' -import { getGlobalState } from '../store' const CONSTANTS = { APP_ID: process.env.REACT_APP_COMET_CHAT_APP_ID, @@ -11,16 +10,17 @@ const initCometChat = async () => { const appID = CONSTANTS.APP_ID const region = CONSTANTS.REGION - const appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build() + const appSetting = new CometChat.AppSettingsBuilder()?.subscribePresenceForAllUsers()?.setRegion(region)?.build() - await CometChat.init(appID, appSetting) - .then(() => console.log('Initialization completed successfully')) - .catch((error) => console.log(error)) + window !== undefined && + (await CometChat.init(appID, appSetting) + .then(() => console.log('Initialization completed successfully')) + .catch((error) => console.log(error))) } const loginWithCometChat = async () => { const authKey = CONSTANTS.Auth_Key - const UID = getGlobalState('connectedAccount') + const UID = `0xc0163E58648b247c143023CFB26C2BAA42C9d9A9` return new Promise(async (resolve, reject) => { await CometChat.login(UID, authKey) @@ -31,7 +31,7 @@ const loginWithCometChat = async () => { const signUpWithCometChat = async () => { const authKey = CONSTANTS.Auth_Key - const UID = getGlobalState('connectedAccount') + const UID = `0xc0163E58648b247c143023CFB26C2BAA42C9d9A9` const user = new CometChat.User(UID) user.setName(UID) @@ -45,6 +45,7 @@ const signUpWithCometChat = async () => { const logOutWithCometChat = async () => { return new Promise(async (resolve, reject) => { await CometChat.logout() + //@ts-ignore .then(() => resolve()) .catch(() => reject()) }) @@ -83,6 +84,7 @@ const joinGroup = async (GUID: any) => { const password = '' return new Promise(async (resolve, reject) => { + //@ts-ignore await CometChat.joinGroup(GUID, groupType, password) .then((group) => resolve(group)) .catch((error) => reject(error)) @@ -96,6 +98,7 @@ const getMessages = async (UID: any) => { return new Promise(async (resolve, reject) => { await messagesRequest .fetchPrevious() + //@ts-ignore .then((messages) => resolve(messages.filter((msg) => msg.type == 'text'))) .catch((error) => reject(error)) }) From c657ca718db6306cc4a2944ab0e19ff5597c98f1 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Tue, 17 Jan 2023 16:02:27 -0500 Subject: [PATCH 03/45] fix ssr bs --- src/components/chat/index.tsx | 4 +++- src/pages/apps.tsx | 1 - src/pages/chat.tsx | 12 ++++++++++-- src/services/chat/index.ts | 7 +++---- 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 0c545dc5f4d..abfd658d4e2 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react' -import { getMessages, listenForMessage, sendMessage } from '../../services/chat' + +import { getMessages, initCometChat, listenForMessage, sendMessage } from '../../services/chat' //@ts-ignore const Chat = ({ id, group }) => { @@ -23,6 +24,7 @@ const Chat = ({ id, group }) => { } useEffect(() => { + initCometChat() async function getM() { await getMessages(`pid_${connectedAccount}`) .then((msgs) => { diff --git a/src/pages/apps.tsx b/src/pages/apps.tsx index 545a6195dab..4e659777928 100644 --- a/src/pages/apps.tsx +++ b/src/pages/apps.tsx @@ -77,7 +77,6 @@ const Apps: NextPage = () => { Safe Apps - ) diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index 13fbeb6eabc..560276a7bea 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -1,8 +1,16 @@ import type { NextPage } from 'next' +import { useEffect } from 'react' import Head from 'next/head' -import Chat from '../components/chat' +import dynamic from 'next/dynamic' + +const CometChatNoSSR = dynamic(() => import('../components/chat/index'), { ssr: false }) const Home: NextPage = () => { + useEffect(() => { + //@ts-ignore + window.CometChat = require('@cometchat-pro/chat').CometChat + }) + return ( <> @@ -10,7 +18,7 @@ const Home: NextPage = () => {
- +
) diff --git a/src/services/chat/index.ts b/src/services/chat/index.ts index 2465ebc3517..5390e1f1c59 100644 --- a/src/services/chat/index.ts +++ b/src/services/chat/index.ts @@ -12,10 +12,9 @@ const initCometChat = async () => { const appSetting = new CometChat.AppSettingsBuilder()?.subscribePresenceForAllUsers()?.setRegion(region)?.build() - window !== undefined && - (await CometChat.init(appID, appSetting) - .then(() => console.log('Initialization completed successfully')) - .catch((error) => console.log(error))) + await CometChat.init(appID, appSetting) + .then(() => console.log('Initialization completed successfully')) + .catch((error) => console.log(error)) } const loginWithCometChat = async () => { From 81b889dc1d47b0ece572fc4af2a3a51b6c4c648b Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Wed, 18 Jan 2023 13:06:49 -0500 Subject: [PATCH 04/45] group chat set up properly, all data hardcoded todo: use Safe's data pipeline --- package.json | 1 + src/components/chat/index.tsx | 74 ++++++++++++++++++++++++----------- src/components/chat/login.tsx | 56 ++++++++++++++++++++++++++ src/pages/chat.tsx | 11 +++++- yarn.lock | 9 ++++- 5 files changed, 126 insertions(+), 25 deletions(-) create mode 100644 src/components/chat/login.tsx diff --git a/package.json b/package.json index 94f09d13475..ab97f4552aa 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "react-papaparse": "^4.0.2", "react-qr-reader": "2.2.1", "react-redux": "^8.0.2", + "react-toastify": "^9.1.1", "semver": "^7.3.7" }, "devDependencies": { diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index abfd658d4e2..afd266ad089 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -1,17 +1,20 @@ import { useEffect, useState } from 'react' - -import { getMessages, initCometChat, listenForMessage, sendMessage } from '../../services/chat' +import { toast } from 'react-toastify' +import { getMessages, initCometChat, listenForMessage, sendMessage, createNewGroup } from '../../services/chat' //@ts-ignore -const Chat = ({ id, group }) => { +const Chat = ({ user }) => { + console.log('loaded') const [message, setMessage] = useState('') const [messages, setMessages] = useState([]) + const [group, setGroup] = useState() const connectedAccount = '0xc0163E58648b247c143023CFB26C2BAA42C9d9A9' + const handleSubmit = async (e: any) => { e.preventDefault() if (!message) return - await sendMessage(`pid_${connectedAccount}`, message) + await sendMessage(`pid_${'safe'}`, message) .then(async (msg: any) => { //@ts-ignore setMessages((prevState) => [...prevState, msg]) @@ -51,26 +54,43 @@ const Chat = ({ id, group }) => { elmnt.scrollTop = elmnt.scrollHeight } + const handleCreateGroup = async () => { + if (!user) { + toast.warning('You need to login or sign up first.') + return + } + + await toast.promise( + new Promise(async (resolve, reject) => { + await createNewGroup(`pid_${'safe'}`, 'safe') + .then((gp) => { + setGroup(gp) + resolve(gp) + }) + .catch((error) => reject(new Error(error))) + }), + { + pending: 'Creating...', + success: 'Group created 👌', + error: 'Encountered error 🤯', + }, + ) + } + return (
-

Safe Chat

-

Join the Live Chat

-
-
+

Safe Chat

+

Join the Live Chat

+
+
{messages.map((msg, i) => ( //@ts-ignore ))}
-
+ { onChange={(e) => setMessage(e.target.value)} required /> - +
+ + {!group ? ( + + ) : null}
) @@ -91,10 +121,10 @@ const Chat = ({ id, group }) => { //@ts-ignore const Message = ({ msg, owner, isOwner }) => (
-
-
- {isOwner ? '@You' : owner} - {msg} +
+
+ {isOwner ? '@You' : owner} + {msg}
diff --git a/src/components/chat/login.tsx b/src/components/chat/login.tsx new file mode 100644 index 00000000000..2211b87c565 --- /dev/null +++ b/src/components/chat/login.tsx @@ -0,0 +1,56 @@ +import { toast } from 'react-toastify' +import { loginWithCometChat, signUpWithCometChat } from '../../services/chat' + +//@ts-ignore +const Login = ({ setCurrentUser }) => { + const handleLogin = async () => { + await toast.promise( + new Promise(async (resolve, reject) => { + await loginWithCometChat() + .then((user) => { + setCurrentUser(user) + console.log(user) + }) + .catch((err) => { + console.log(err) + reject() + }) + }), + { + pending: 'Signing in...', + success: 'Logged in successful 👌', + error: 'Error, are you signed up? 🤯', + }, + ) + } + + const handleSignup = async () => { + await toast.promise( + new Promise(async (resolve, reject) => { + await signUpWithCometChat() + .then((user) => { + console.log(user) + resolve(user) + }) + .catch((err) => { + console.log(err) + reject(err) + }) + }), + { + pending: 'Signing up...', + success: 'Signned up successful 👌', + error: 'Error, maybe you should login instead? 🤯', + }, + ) + } + + return ( +
+ + +
+ ) +} + +export default Login diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index 560276a7bea..110ec525675 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -1,16 +1,22 @@ import type { NextPage } from 'next' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import Head from 'next/head' import dynamic from 'next/dynamic' const CometChatNoSSR = dynamic(() => import('../components/chat/index'), { ssr: false }) +//@ts-ignore +const CometChatLoginNoSSR = dynamic(() => import('../components/chat/login'), { ssr: false }) + const Home: NextPage = () => { useEffect(() => { //@ts-ignore window.CometChat = require('@cometchat-pro/chat').CometChat }) + const [currentUser, setCurrentUser] = useState() + const currentUserAddress = '0x1d9f081BdA444671A1212cE5Be88eD06bdf6b9e9' + return ( <> @@ -18,7 +24,8 @@ const Home: NextPage = () => {
- + {!currentUser ? :
} +
) diff --git a/yarn.lock b/yarn.lock index 8eaeadaa40f..b0033c83f1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5360,7 +5360,7 @@ clone@^2.0.0, clone@^2.1.1: resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w== -clsx@^1.1.0, clsx@^1.2.1: +clsx@^1.1.0, clsx@^1.1.1, clsx@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== @@ -10940,6 +10940,13 @@ react-redux@^8.0.2: react-is "^18.0.0" use-sync-external-store "^1.0.0" +react-toastify@^9.1.1: + version "9.1.1" + resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.1.tgz#9280caea4a13dc1739c350d90660a630807bf10b" + integrity sha512-pkFCla1z3ve045qvjEmn2xOJOy4ZciwRXm1oMPULVkELi5aJdHCN/FHnuqXq8IwGDLB7PPk2/J6uP9D8ejuiRw== + dependencies: + clsx "^1.1.1" + react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" From dea038dee4aeda0b8b250ebd1c1998056f391570 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Fri, 20 Jan 2023 17:25:44 -0500 Subject: [PATCH 05/45] add wallet hooks to chat service --- src/components/chat/index.tsx | 7 ++++--- src/components/chat/login.tsx | 7 +++++-- src/pages/chat.tsx | 1 - src/services/chat/index.ts | 8 ++++---- 4 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index afd266ad089..e72e42df412 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react' import { toast } from 'react-toastify' +import useWallet from '@/hooks/wallets/useWallet' import { getMessages, initCometChat, listenForMessage, sendMessage, createNewGroup } from '../../services/chat' //@ts-ignore @@ -8,7 +9,7 @@ const Chat = ({ user }) => { const [message, setMessage] = useState('') const [messages, setMessages] = useState([]) const [group, setGroup] = useState() - const connectedAccount = '0xc0163E58648b247c143023CFB26C2BAA42C9d9A9' + const wallet = useWallet() const handleSubmit = async (e: any) => { e.preventDefault() @@ -29,7 +30,7 @@ const Chat = ({ user }) => { useEffect(() => { initCometChat() async function getM() { - await getMessages(`pid_${connectedAccount}`) + await getMessages(`pid_${wallet?.address!}`) .then((msgs) => { //@ts-ignore setMessages(msgs) @@ -37,7 +38,7 @@ const Chat = ({ user }) => { }) .catch((error) => console.log(error)) - await listenForMessage(`pid_${connectedAccount}`) + await listenForMessage(`pid_${wallet?.address!}`) .then((msg) => { //@ts-ignore setMessages((prevState) => [...prevState, msg]) diff --git a/src/components/chat/login.tsx b/src/components/chat/login.tsx index 2211b87c565..3b05417469a 100644 --- a/src/components/chat/login.tsx +++ b/src/components/chat/login.tsx @@ -1,12 +1,15 @@ import { toast } from 'react-toastify' +import useWallet from '@/hooks/wallets/useWallet' import { loginWithCometChat, signUpWithCometChat } from '../../services/chat' //@ts-ignore const Login = ({ setCurrentUser }) => { + const wallet = useWallet() + const handleLogin = async () => { await toast.promise( new Promise(async (resolve, reject) => { - await loginWithCometChat() + await loginWithCometChat(wallet?.address!) .then((user) => { setCurrentUser(user) console.log(user) @@ -27,7 +30,7 @@ const Login = ({ setCurrentUser }) => { const handleSignup = async () => { await toast.promise( new Promise(async (resolve, reject) => { - await signUpWithCometChat() + await signUpWithCometChat(wallet?.address!) .then((user) => { console.log(user) resolve(user) diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index 110ec525675..8efbe967b65 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -15,7 +15,6 @@ const Home: NextPage = () => { }) const [currentUser, setCurrentUser] = useState() - const currentUserAddress = '0x1d9f081BdA444671A1212cE5Be88eD06bdf6b9e9' return ( <> diff --git a/src/services/chat/index.ts b/src/services/chat/index.ts index 5390e1f1c59..a8e1a69f43d 100644 --- a/src/services/chat/index.ts +++ b/src/services/chat/index.ts @@ -17,9 +17,9 @@ const initCometChat = async () => { .catch((error) => console.log(error)) } -const loginWithCometChat = async () => { +const loginWithCometChat = async (wallet: string) => { const authKey = CONSTANTS.Auth_Key - const UID = `0xc0163E58648b247c143023CFB26C2BAA42C9d9A9` + const UID = wallet return new Promise(async (resolve, reject) => { await CometChat.login(UID, authKey) @@ -28,9 +28,9 @@ const loginWithCometChat = async () => { }) } -const signUpWithCometChat = async () => { +const signUpWithCometChat = async (wallet: string) => { const authKey = CONSTANTS.Auth_Key - const UID = `0xc0163E58648b247c143023CFB26C2BAA42C9d9A9` + const UID = wallet const user = new CometChat.User(UID) user.setName(UID) From 5adef77b2416585055208033e83b88b537807501 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Mon, 23 Jan 2023 16:26:23 -0500 Subject: [PATCH 06/45] add safe data, connect groups to correct UID --- src/components/chat/index.tsx | 72 +++++++++++++++++++++++++++-------- src/pages/chat.tsx | 4 ++ 2 files changed, 60 insertions(+), 16 deletions(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index e72e42df412..41447a5d0a0 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -1,21 +1,32 @@ import { useEffect, useState } from 'react' import { toast } from 'react-toastify' import useWallet from '@/hooks/wallets/useWallet' -import { getMessages, initCometChat, listenForMessage, sendMessage, createNewGroup } from '../../services/chat' +import { + getMessages, + initCometChat, + listenForMessage, + sendMessage, + createNewGroup, + getGroup, +} from '../../services/chat' +import useSafeInfo from '@/hooks/useSafeInfo' //@ts-ignore const Chat = ({ user }) => { + const { safe, safeAddress } = useSafeInfo() console.log('loaded') const [message, setMessage] = useState('') const [messages, setMessages] = useState([]) const [group, setGroup] = useState() const wallet = useWallet() + console.log(safe, safeAddress) + const handleSubmit = async (e: any) => { e.preventDefault() if (!message) return - await sendMessage(`pid_${'safe'}`, message) + await sendMessage(`pid_${safeAddress}`, message) .then(async (msg: any) => { //@ts-ignore setMessages((prevState) => [...prevState, msg]) @@ -30,7 +41,7 @@ const Chat = ({ user }) => { useEffect(() => { initCometChat() async function getM() { - await getMessages(`pid_${wallet?.address!}`) + await getMessages(`pid_${safeAddress!}`) .then((msgs) => { //@ts-ignore setMessages(msgs) @@ -38,7 +49,7 @@ const Chat = ({ user }) => { }) .catch((error) => console.log(error)) - await listenForMessage(`pid_${wallet?.address!}`) + await listenForMessage(`pid_${safeAddress!}`) .then((msg) => { //@ts-ignore setMessages((prevState) => [...prevState, msg]) @@ -47,7 +58,7 @@ const Chat = ({ user }) => { .catch((error) => console.log(error)) } getM() - }, []) + }, [group]) const scrollToEnd = () => { const elmnt = document.getElementById('messages-container') @@ -63,7 +74,33 @@ const Chat = ({ user }) => { await toast.promise( new Promise(async (resolve, reject) => { - await createNewGroup(`pid_${'safe'}`, 'safe') + await createNewGroup(`pid_${safeAddress}`, 'safe') + .then((gp) => { + setGroup(gp) + resolve(gp) + }) + .catch((error) => { + reject(new Error(error)) + console.log(error) + }) + }), + { + pending: 'Creating...', + success: 'Group created 👌', + error: 'Encountered error 🤯', + }, + ) + } + + const handleGetGroup = async () => { + if (!user) { + toast.warning('You need to login or sign up first.') + return + } + + await toast.promise( + new Promise(async (resolve, reject) => { + await getGroup(`pid_${safeAddress}`) .then((gp) => { setGroup(gp) resolve(gp) @@ -86,7 +123,7 @@ const Chat = ({ user }) => {
{messages.map((msg, i) => ( //@ts-ignore - + ))}
@@ -104,15 +141,18 @@ const Chat = ({ user }) => { {!group ? ( - + <> + + + ) : null}
diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index 8efbe967b65..97381aae53a 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -1,5 +1,6 @@ import type { NextPage } from 'next' import { useEffect, useState } from 'react' +import useOwnedSafes from '@/hooks/useOwnedSafes' import Head from 'next/head' import dynamic from 'next/dynamic' @@ -15,6 +16,9 @@ const Home: NextPage = () => { }) const [currentUser, setCurrentUser] = useState() + const allOwnedSafes = useOwnedSafes() + + console.log(allOwnedSafes) return ( <> From e9cf60ce7ac69d798d979d256a90766c0b9e9ff5 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Tue, 24 Jan 2023 10:27:21 -0500 Subject: [PATCH 07/45] login, privacy, auto, join, group users --- src/components/chat/index.tsx | 25 ++++++++++++++++++------- src/components/chat/login.tsx | 32 +++++++++++++++++++++++++++++++- src/pages/chat.tsx | 35 +++++++++++++++++++++++++++++++++-- src/services/chat/index.ts | 6 +++--- 4 files changed, 85 insertions(+), 13 deletions(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 41447a5d0a0..4922915e3f7 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -14,13 +14,12 @@ import useSafeInfo from '@/hooks/useSafeInfo' //@ts-ignore const Chat = ({ user }) => { const { safe, safeAddress } = useSafeInfo() - console.log('loaded') const [message, setMessage] = useState('') const [messages, setMessages] = useState([]) const [group, setGroup] = useState() const wallet = useWallet() - console.log(safe, safeAddress) + console.log(safe.owners) const handleSubmit = async (e: any) => { e.preventDefault() @@ -115,15 +114,27 @@ const Chat = ({ user }) => { ) } + useEffect(() => { + if (user) { + handleGetGroup() + } + }, [user]) + return (

Safe Chat

Join the Live Chat

- {messages.map((msg, i) => ( + {messages.map((msg: any, i) => ( //@ts-ignore - + ))}
@@ -160,12 +171,12 @@ const Chat = ({ user }) => { } //@ts-ignore -const Message = ({ msg, owner, isOwner }) => ( +const Message = ({ msg, owner, isOwner, data }) => (
- {isOwner ? '@You' : owner} - {msg} + {isOwner ? '@You' : owner}: + {msg}
diff --git a/src/components/chat/login.tsx b/src/components/chat/login.tsx index 3b05417469a..e277242d896 100644 --- a/src/components/chat/login.tsx +++ b/src/components/chat/login.tsx @@ -1,10 +1,14 @@ import { toast } from 'react-toastify' import useWallet from '@/hooks/wallets/useWallet' -import { loginWithCometChat, signUpWithCometChat } from '../../services/chat' +import { loginWithCometChat, signUpWithCometChat, joinGroup } from '../../services/chat' +import { useEffect } from 'react' +import useSafeAddress from '@/hooks/useSafeAddress' //@ts-ignore const Login = ({ setCurrentUser }) => { const wallet = useWallet() + const safeAddress = useSafeAddress() + console.log('safe', safeAddress) const handleLogin = async () => { await toast.promise( @@ -48,10 +52,36 @@ const Login = ({ setCurrentUser }) => { ) } + const handleJoin = async () => { + await toast.promise( + new Promise(async (resolve, reject) => { + await joinGroup(safeAddress!) + .then((user) => { + console.log(user) + resolve(user) + }) + .catch((err) => { + console.log(err) + reject(err) + }) + }), + { + pending: 'Signing up...', + success: 'Signned up successful 👌', + error: 'Error, maybe you should login instead? 🤯', + }, + ) + } + + useEffect(() => { + handleLogin() + }, [wallet]) + return (
+
) } diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index 97381aae53a..f3d1b3523b7 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -1,6 +1,8 @@ import type { NextPage } from 'next' import { useEffect, useState } from 'react' import useOwnedSafes from '@/hooks/useOwnedSafes' +import useSafeInfo from '@/hooks/useSafeInfo' +import useWallet from '@/hooks/wallets/useWallet' import Head from 'next/head' import dynamic from 'next/dynamic' @@ -16,10 +18,27 @@ const Home: NextPage = () => { }) const [currentUser, setCurrentUser] = useState() + const [ownerStatus, setOwnerStatus] = useState() + const allOwnedSafes = useOwnedSafes() + const { safe } = useSafeInfo() + const wallet = useWallet() + const owners = safe?.owners! console.log(allOwnedSafes) + useEffect(() => { + let isOwnerArr: any[] = [] + if (owners && wallet?.address) { + owners.map((owner) => { + if (owner.value == wallet.address) { + isOwnerArr.push(wallet.address) + } + }) + isOwnerArr.length > 0 ? setOwnerStatus(true) : setOwnerStatus(false) + } + }, [owners, wallet]) + return ( <> @@ -27,8 +46,20 @@ const Home: NextPage = () => {
- {!currentUser ? :
} - + {ownerStatus ? ( + <> + {!currentUser ? :
} + +
+ Group Members: + {owners?.map((owner) => ( +
{owner.value}
+ ))} +
+ + ) : ( +
You are not an owner on this safe.
+ )}
) diff --git a/src/services/chat/index.ts b/src/services/chat/index.ts index a8e1a69f43d..95857b3c924 100644 --- a/src/services/chat/index.ts +++ b/src/services/chat/index.ts @@ -1,9 +1,9 @@ import { CometChat } from '@cometchat-pro/chat' const CONSTANTS = { - APP_ID: process.env.REACT_APP_COMET_CHAT_APP_ID, - REGION: process.env.REACT_APP_COMET_CHAT_REGION, - Auth_Key: process.env.REACT_APP_COMET_CHAT_AUTH_KEY, + APP_ID: '2305753c92f334da', + REGION: 'US', + Auth_Key: '5f9d917c6a21f386ea12e8a3b76561d094fee732', } const initCometChat = async () => { From dc5290b47bc23ead13b70d4e2fbc9fcb6abfc913 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Tue, 24 Jan 2023 10:59:38 -0500 Subject: [PATCH 08/45] fix some stuff --- src/components/chat/index.tsx | 2 +- src/components/chat/join.tsx | 32 ++++++++++++++++++++++++++++++++ src/components/chat/login.tsx | 29 +---------------------------- src/pages/chat.tsx | 5 +++++ 4 files changed, 39 insertions(+), 29 deletions(-) create mode 100644 src/components/chat/join.tsx diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 4922915e3f7..a9aed6b60bb 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -57,7 +57,7 @@ const Chat = ({ user }) => { .catch((error) => console.log(error)) } getM() - }, [group]) + }, [group, wallet, user]) const scrollToEnd = () => { const elmnt = document.getElementById('messages-container') diff --git a/src/components/chat/join.tsx b/src/components/chat/join.tsx new file mode 100644 index 00000000000..2354d6be223 --- /dev/null +++ b/src/components/chat/join.tsx @@ -0,0 +1,32 @@ +import { toast } from 'react-toastify' +import useSafeAddress from '@/hooks/useSafeAddress' +import { joinGroup } from '../../services/chat' + +const Join: any = ({}) => { + const safeAddress = useSafeAddress() + + const handleJoin = async () => { + await toast.promise( + new Promise(async (resolve, reject) => { + await joinGroup(safeAddress!) + .then((user) => { + console.log(user) + resolve(user) + }) + .catch((err) => { + console.log(err) + reject(err) + }) + }), + { + pending: 'Signing up...', + success: 'Signned up successful 👌', + error: 'Error, maybe you should login instead? 🤯', + }, + ) + } + + return +} + +export default Join diff --git a/src/components/chat/login.tsx b/src/components/chat/login.tsx index e277242d896..6ad05f81dd8 100644 --- a/src/components/chat/login.tsx +++ b/src/components/chat/login.tsx @@ -1,7 +1,6 @@ import { toast } from 'react-toastify' import useWallet from '@/hooks/wallets/useWallet' -import { loginWithCometChat, signUpWithCometChat, joinGroup } from '../../services/chat' -import { useEffect } from 'react' +import { loginWithCometChat, signUpWithCometChat } from '../../services/chat' import useSafeAddress from '@/hooks/useSafeAddress' //@ts-ignore @@ -52,36 +51,10 @@ const Login = ({ setCurrentUser }) => { ) } - const handleJoin = async () => { - await toast.promise( - new Promise(async (resolve, reject) => { - await joinGroup(safeAddress!) - .then((user) => { - console.log(user) - resolve(user) - }) - .catch((err) => { - console.log(err) - reject(err) - }) - }), - { - pending: 'Signing up...', - success: 'Signned up successful 👌', - error: 'Error, maybe you should login instead? 🤯', - }, - ) - } - - useEffect(() => { - handleLogin() - }, [wallet]) - return (
-
) } diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index f3d1b3523b7..36d8cb9ce01 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -3,9 +3,12 @@ import { useEffect, useState } from 'react' import useOwnedSafes from '@/hooks/useOwnedSafes' import useSafeInfo from '@/hooks/useSafeInfo' import useWallet from '@/hooks/wallets/useWallet' +import useSafeAddress from '@/hooks/useSafeAddress' import Head from 'next/head' import dynamic from 'next/dynamic' +const JoinNoSSR = dynamic(() => import('../components/chat/join'), { ssr: false }) + const CometChatNoSSR = dynamic(() => import('../components/chat/index'), { ssr: false }) //@ts-ignore @@ -20,6 +23,7 @@ const Home: NextPage = () => { const [currentUser, setCurrentUser] = useState() const [ownerStatus, setOwnerStatus] = useState() + const safeAddress = useSafeAddress const allOwnedSafes = useOwnedSafes() const { safe } = useSafeInfo() const wallet = useWallet() @@ -55,6 +59,7 @@ const Home: NextPage = () => { {owners?.map((owner) => (
{owner.value}
))} +
) : ( From e76c269aa102ace8834bb125e5c1f415f7782aa2 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Tue, 24 Jan 2023 11:07:46 -0500 Subject: [PATCH 09/45] fix the no message was problem with p_id --- src/components/chat/join.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chat/join.tsx b/src/components/chat/join.tsx index 2354d6be223..ea0c133aa23 100644 --- a/src/components/chat/join.tsx +++ b/src/components/chat/join.tsx @@ -8,7 +8,7 @@ const Join: any = ({}) => { const handleJoin = async () => { await toast.promise( new Promise(async (resolve, reject) => { - await joinGroup(safeAddress!) + await joinGroup(`pid_${safeAddress}`) .then((user) => { console.log(user) resolve(user) From dee15a814267ec9417355a68517100ce81c8b0c3 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Tue, 24 Jan 2023 11:22:47 -0500 Subject: [PATCH 10/45] chat stuff --- src/hooks/useTxHistory.ts | 2 +- src/pages/chat.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/hooks/useTxHistory.ts b/src/hooks/useTxHistory.ts index a41713600f8..d240df47ba0 100644 --- a/src/hooks/useTxHistory.ts +++ b/src/hooks/useTxHistory.ts @@ -32,7 +32,7 @@ const useTxHistory = ( // The latest page of the history is always in the store const historyState = useAppSelector(selectTxHistory) - + console.log(historyState) // Return the new page or the stored page return filter || pageUrl ? { diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index 36d8cb9ce01..c00cdb28e62 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -3,7 +3,6 @@ import { useEffect, useState } from 'react' import useOwnedSafes from '@/hooks/useOwnedSafes' import useSafeInfo from '@/hooks/useSafeInfo' import useWallet from '@/hooks/wallets/useWallet' -import useSafeAddress from '@/hooks/useSafeAddress' import Head from 'next/head' import dynamic from 'next/dynamic' @@ -23,7 +22,6 @@ const Home: NextPage = () => { const [currentUser, setCurrentUser] = useState() const [ownerStatus, setOwnerStatus] = useState() - const safeAddress = useSafeAddress const allOwnedSafes = useOwnedSafes() const { safe } = useSafeInfo() const wallet = useWallet() From a62274e850e2b835bf31af3964841843321468b8 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Wed, 25 Jan 2023 12:58:30 -0500 Subject: [PATCH 11/45] tx history --- src/components/chat/index.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index a9aed6b60bb..ce387c0baed 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react' import { toast } from 'react-toastify' +import useTxHistory from '@/hooks/useTxHistory' import useWallet from '@/hooks/wallets/useWallet' import { getMessages, @@ -18,8 +19,9 @@ const Chat = ({ user }) => { const [messages, setMessages] = useState([]) const [group, setGroup] = useState() const wallet = useWallet() + const txHistory = useTxHistory() - console.log(safe.owners) + console.log(safe.owners, txHistory) const handleSubmit = async (e: any) => { e.preventDefault() @@ -134,6 +136,7 @@ const Chat = ({ user }) => { msg={msg.text} key={i} data={msg} + timeStamp={msg.sentAt} /> ))}
@@ -171,10 +174,15 @@ const Chat = ({ user }) => { } //@ts-ignore -const Message = ({ msg, owner, isOwner, data }) => ( +const Message = ({ msg, owner, isOwner, data, timeStamp }) => (
-
+
{ + console.log(data) + }} + >
+ {timeStamp}: {isOwner ? '@You' : owner}: {msg}
From 17ee4f99a70703c9d28e10163bf8ae681af94918 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Fri, 27 Jan 2023 13:29:47 -0500 Subject: [PATCH 12/45] add tx history to chat --- src/components/chat/index.tsx | 64 ++++++++++++++++++++++++++++------- 1 file changed, 51 insertions(+), 13 deletions(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index ce387c0baed..ce57f97bd21 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react' import { toast } from 'react-toastify' import useTxHistory from '@/hooks/useTxHistory' import useWallet from '@/hooks/wallets/useWallet' +import TxListItem from '../transactions/TxListItem' import { getMessages, initCometChat, @@ -17,12 +18,11 @@ const Chat = ({ user }) => { const { safe, safeAddress } = useSafeInfo() const [message, setMessage] = useState('') const [messages, setMessages] = useState([]) + const [chatData, setChatData] = useState([]) const [group, setGroup] = useState() const wallet = useWallet() const txHistory = useTxHistory() - console.log(safe.owners, txHistory) - const handleSubmit = async (e: any) => { e.preventDefault() @@ -61,6 +61,41 @@ const Chat = ({ user }) => { getM() }, [group, wallet, user]) + useEffect(() => { + if (messages.length == 0) { + return + } + let allData: any[] = [] + messages.forEach((message: any) => { + allData.push({ + data: message, + timestamp: +message.sentAt * 1000, + type: 'message', + }) + }) + txHistory.page?.results.forEach((tx: any) => { + if (tx.type === 'DATE_LABEL') { + return + } + allData.push({ + data: tx, + timestamp: tx.transaction.timestamp, + type: 'tx', + }) + }) + allData.sort(function (a, b) { + if (a['timestamp'] > b['timestamp']) { + return 1 + } else if (a['timestamp'] < b['timestamp']) { + return -1 + } else { + return 0 + } + }) + console.log(allData) + setChatData(allData) + }, [messages]) + const scrollToEnd = () => { const elmnt = document.getElementById('messages-container') //@ts-ignore @@ -128,17 +163,20 @@ const Chat = ({ user }) => {

Join the Live Chat

- {messages.map((msg: any, i) => ( - //@ts-ignore - - ))} + {chatData.map((item: any, i) => + item.type === 'message' ? ( + + ) : ( + + ), + )}
From 4a5b72328521f24c2d3a91409bcb6d5d2ebfcfc3 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Mon, 30 Jan 2023 16:51:54 -0500 Subject: [PATCH 13/45] smthbng --- src/components/chat/index.tsx | 14 +++++++++++++- src/services/chat/index.ts | 2 +- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index ce57f97bd21..097f7ee7783 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -11,6 +11,7 @@ import { createNewGroup, getGroup, } from '../../services/chat' +import useTxQueue from '@/hooks/useTxQueue' import useSafeInfo from '@/hooks/useSafeInfo' //@ts-ignore @@ -22,6 +23,7 @@ const Chat = ({ user }) => { const [group, setGroup] = useState() const wallet = useWallet() const txHistory = useTxHistory() + const txQueue = useTxQueue() const handleSubmit = async (e: any) => { e.preventDefault() @@ -83,6 +85,17 @@ const Chat = ({ user }) => { type: 'tx', }) }) + txQueue.page?.results.forEach((tx: any) => { + if (tx.type === 'DATE_LABEL') { + return + } + allData.push({ + data: tx, + timestamp: tx.transaction.timestamp, + type: 'tx', + }) + }) + console.log(txQueue, txHistory, 'tx') allData.sort(function (a, b) { if (a['timestamp'] > b['timestamp']) { return 1 @@ -92,7 +105,6 @@ const Chat = ({ user }) => { return 0 } }) - console.log(allData) setChatData(allData) }, [messages]) diff --git a/src/services/chat/index.ts b/src/services/chat/index.ts index 95857b3c924..c0054d9642a 100644 --- a/src/services/chat/index.ts +++ b/src/services/chat/index.ts @@ -3,7 +3,7 @@ import { CometChat } from '@cometchat-pro/chat' const CONSTANTS = { APP_ID: '2305753c92f334da', REGION: 'US', - Auth_Key: '5f9d917c6a21f386ea12e8a3b76561d094fee732', + Auth_Key: '09034805f1b3f569305b5cb221f32f270977444b', } const initCometChat = async () => { From e77fb1e698e79c0802eea5b4096fa80218968077 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Wed, 1 Feb 2023 09:36:37 -0500 Subject: [PATCH 14/45] fixed a bunch of shit related to queues and api keys --- src/components/chat/index.tsx | 10 ++++------ src/services/chat/index.ts | 6 +++--- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 097f7ee7783..58c84b7e3e7 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -18,7 +18,7 @@ import useSafeInfo from '@/hooks/useSafeInfo' const Chat = ({ user }) => { const { safe, safeAddress } = useSafeInfo() const [message, setMessage] = useState('') - const [messages, setMessages] = useState([]) + const [messages, setMessages] = useState([]) const [chatData, setChatData] = useState([]) const [group, setGroup] = useState() const wallet = useWallet() @@ -45,16 +45,14 @@ const Chat = ({ user }) => { initCometChat() async function getM() { await getMessages(`pid_${safeAddress!}`) - .then((msgs) => { - //@ts-ignore + .then((msgs: any) => { setMessages(msgs) scrollToEnd() }) .catch((error) => console.log(error)) await listenForMessage(`pid_${safeAddress!}`) - .then((msg) => { - //@ts-ignore + .then((msg: any) => { setMessages((prevState) => [...prevState, msg]) scrollToEnd() }) @@ -86,7 +84,7 @@ const Chat = ({ user }) => { }) }) txQueue.page?.results.forEach((tx: any) => { - if (tx.type === 'DATE_LABEL') { + if (tx.type === 'LABEL') { return } allData.push({ diff --git a/src/services/chat/index.ts b/src/services/chat/index.ts index c0054d9642a..85c0fac1573 100644 --- a/src/services/chat/index.ts +++ b/src/services/chat/index.ts @@ -1,9 +1,9 @@ import { CometChat } from '@cometchat-pro/chat' const CONSTANTS = { - APP_ID: '2305753c92f334da', - REGION: 'US', - Auth_Key: '09034805f1b3f569305b5cb221f32f270977444b', + APP_ID: process.env.NEXT_PUBLIC_COMET_CHAT_APP_ID, + REGION: process.env.NEXT_PUBLIC_COMET_CHAT_REGION, + Auth_Key: process.env.NEXT_PUBLIC_COMET_CHAT_AUTH_KEY, } const initCometChat = async () => { From a5d4b01f2c6580eec94f3d6411f97f197387b1f5 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Wed, 1 Feb 2023 10:00:12 -0500 Subject: [PATCH 15/45] console --- src/services/chat/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/services/chat/index.ts b/src/services/chat/index.ts index 85c0fac1573..0937a848a56 100644 --- a/src/services/chat/index.ts +++ b/src/services/chat/index.ts @@ -7,6 +7,7 @@ const CONSTANTS = { } const initCometChat = async () => { + console.log('init') const appID = CONSTANTS.APP_ID const region = CONSTANTS.REGION From ff48c2f1bde9a4eead32af74942c42aa26d315ee Mon Sep 17 00:00:00 2001 From: danielfetz <118893474+danielfetz@users.noreply.github.com> Date: Thu, 2 Feb 2023 17:13:55 +0100 Subject: [PATCH 16/45] Rename src/pages/chat.tsx to src/pages/chat/chat.tsx --- src/pages/{ => chat}/chat.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/pages/{ => chat}/chat.tsx (100%) diff --git a/src/pages/chat.tsx b/src/pages/chat/chat.tsx similarity index 100% rename from src/pages/chat.tsx rename to src/pages/chat/chat.tsx From 3bd4942df22e751e15fdd40083c4e6a526e9bda0 Mon Sep 17 00:00:00 2001 From: danielfetz <118893474+danielfetz@users.noreply.github.com> Date: Mon, 6 Feb 2023 15:30:07 +0100 Subject: [PATCH 17/45] Styling - Complete rehaul of web app - work in progress (#2) * Update index.tsx * Update Overview.tsx * Update Overview.tsx * Update Overview.tsx * Update .eslintrc.json * Update styles.module.css * Create chat.tsx * Update chat.tsx * Update chat.tsx * Create activity.tsx * Update config.tsx * Create index.tsx * Update routes.ts * Update index.tsx * Update config.tsx * Rename src/pages/home.tsx to src/pages/home/chat.tsx * Update routes.ts * Update config.tsx * Update routes.ts * Delete src/pages/chatactivity directory * Delete src/components/chatactivity directory * Update chat.tsx * Update routes.ts * Update config.tsx * Update index.tsx * Update index.tsx * Update and rename chat.tsx to home.tsx * Create index.tsx * Update index.tsx * Update home.tsx * Update index.ts * Update index.tsx * Update index.tsx * Update index.tsx * Delete index.tsx * Update index.tsx * Update index.ts * Update index.tsx * Update index.tsx * Update config.tsx * Update routes.ts * Update home.tsx * Rename src/pages/home/home.tsx to src/pages/home.tsx * Update index.tsx * Delete src/components/common/SafeTokenWidget directory * Delete src/components/dashboard/GovernanceSection directory * Create index.tsx * Create SafeTokenWidget.test.tsx * Create safe_token.svg * Create styles.module.css * Update index.tsx * Update index.tsx * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update index.tsx * Update styles.module.css * Update index.tsx * Update index.tsx * Update styles.module.css * Update index.tsx * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update index.tsx * Update index.tsx * Update index.tsx * Update styles.module.css * Update index.tsx * Update colors.ts * Update colors-dark.ts * Update colors-dark.ts * Update colors-dark.ts * Update colors-dark.ts * Update colors-dark.ts * Update styles.module.css * Update styles.module.css * Update routes.ts * Create ownerlist.tsx * Update ownerlist.tsx * Update index.tsx * Update ownerlist.tsx * Update index.tsx * Update index.tsx * Update ownerlist.tsx * Update colors-dark.ts * Update colors-dark.ts * Update colors-dark.ts * Update colors.ts * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update globals.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Create index.tsx * Create styles.module.css * Update Overview.tsx * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update Overview.tsx * Update Overview.tsx * Update Overview.tsx * Update styles.module.css * Update styles.module.css * Update ConnectionCenter.tsx * Update styles.module.css * Update ConnectionCenter.tsx * Update ConnectionCenter.tsx * Update index.tsx * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update index.tsx * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update index.tsx * Update index.tsx * Update index.tsx * Update index.tsx * Update index.tsx * Update index.tsx * Update styles.module.css * Update index.tsx * Update styles.module.css * Update index.tsx * Update index.tsx * Update styles.module.css * Update index.tsx * Update styles.module.css * Update index.tsx * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update ownerlist.tsx * Update index.tsx * Update styles.module.css * Update index.tsx * Update SideDrawer.tsx * Update SideDrawer.tsx * Update styles.module.css * Update SideDrawer.tsx * Update index.tsx * Update styles.module.css * Update index.tsx * Update index.tsx * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update styles.module.css * Update index.tsx (#3) * Update index.tsx * Update chat.tsx * Update chat.tsx * Rename src/pages/chat.tsx to src/pages/chat/chat.tsx * Create styles.module.css * Update index.tsx * Update chat.tsx * Update styles.module.css * Update Overview.tsx (#4) * Update Overview.tsx * Update index.tsx * Update index.tsx * Update index.tsx * Update styles.module.css * Update index.tsx * Update Overview.tsx * Update NewSafe.tsx * Update chat.tsx * Update styles.module.css * Delete src/components/common/Footer directory * Update index.tsx * Update index.tsx * Update NewSafe.tsx * Update styles.module.css * Update NewSafe.tsx * Update styles.module.css * Update index.tsx * Update FeaturedApps.tsx * Update index.tsx * Update index.tsx * Update index.tsx * Delete chat-icon.svg * Update config.tsx * Update routes.ts * Update styles.module.css * Update index.tsx (#5) * Update index.tsx * Update index.tsx * Create styles.module.css * Update index.tsx * Update index.tsx * Update styles.module.css * Update NewSafe.tsx --- .eslintrc.json | 12 +- public/images/chat/chat-icon.svg | 4 - src/components/chat/index.tsx | 20 +-- src/components/chat/styles.module.css | 10 ++ src/components/common/ChainSwitcher/index.tsx | 6 +- .../common/ChainSwitcher/styles.module.css | 9 +- .../common/ConnectWallet/ConnectionCenter.tsx | 8 +- .../common/ConnectWallet/styles.module.css | 4 + src/components/common/Footer/index.tsx | 75 --------- .../common/Footer/styles.module.css | 32 ---- src/components/common/Header/index.tsx | 11 +- .../common/Header/styles.module.css | 15 +- src/components/common/MainNavTabs/index.tsx | 36 +++++ .../common/MainNavTabs/styles.module.css | 33 ++++ .../common/NetworkSelector/index.tsx | 2 +- .../common/NetworkSelector/styles.module.css | 11 +- .../common/PageLayout/SideDrawer.tsx | 2 + src/components/common/PageLayout/index.tsx | 24 ++- .../common/PageLayout/styles.module.css | 38 ++++- .../dashboard/FeaturedApps/FeaturedApps.tsx | 3 - .../GovernanceSection/GovernanceSection.tsx | 147 ------------------ .../GovernanceSection/styles.module.css | 66 -------- .../dashboard/HomeSidebar/ownerlist.tsx | 20 +++ .../dashboard/Overview/Overview.tsx | 86 +++------- src/components/dashboard/index.tsx | 34 ++-- .../NotificationCenter/styles.module.css | 4 +- src/components/sidebar/SafeList/index.tsx | 45 +----- .../sidebar/SafeList/styles.module.css | 26 ++-- .../sidebar/SafeListItem/styles.module.css | 21 ++- .../styles.module.css | 4 +- src/components/sidebar/Sidebar/index.tsx | 34 +--- .../sidebar/Sidebar/styles.module.css | 9 +- .../sidebar/SidebarNavigation/config.tsx | 5 - src/components/welcome/NewSafe.tsx | 14 +- src/components/welcome/styles.module.css | 24 ++- src/config/routes.ts | 1 - src/pages/chat/chat.tsx | 9 +- src/pages/chat/styles.module.css | 5 + src/styles/colors-dark.ts | 18 ++- src/styles/colors.ts | 3 +- src/styles/globals.css | 2 +- 41 files changed, 327 insertions(+), 605 deletions(-) delete mode 100644 public/images/chat/chat-icon.svg create mode 100644 src/components/chat/styles.module.css delete mode 100644 src/components/common/Footer/index.tsx delete mode 100644 src/components/common/Footer/styles.module.css create mode 100644 src/components/common/MainNavTabs/index.tsx create mode 100644 src/components/common/MainNavTabs/styles.module.css delete mode 100644 src/components/dashboard/GovernanceSection/GovernanceSection.tsx delete mode 100644 src/components/dashboard/GovernanceSection/styles.module.css create mode 100644 src/components/dashboard/HomeSidebar/ownerlist.tsx create mode 100644 src/pages/chat/styles.module.css diff --git a/.eslintrc.json b/.eslintrc.json index 310d9826c95..8b137891791 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,11 +1 @@ -{ - "extends": ["next", "prettier", "plugin:prettier/recommended"], - "rules": { - "@next/next/no-img-element": "off", - "unused-imports/no-unused-imports-ts": "error", - "@typescript-eslint/consistent-type-imports": "error", - "no-constant-condition": "warn" - }, - "ignorePatterns": ["node_modules/", ".next/", ".github/"], - "plugins": ["unused-imports", "@typescript-eslint"] -} + diff --git a/public/images/chat/chat-icon.svg b/public/images/chat/chat-icon.svg deleted file mode 100644 index 4ecb7322f3a..00000000000 --- a/public/images/chat/chat-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 58c84b7e3e7..0bc184d19a8 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -1,5 +1,8 @@ import { useEffect, useState } from 'react' import { toast } from 'react-toastify' + +import css from './styles.module.css' + import useTxHistory from '@/hooks/useTxHistory' import useWallet from '@/hooks/wallets/useWallet' import TxListItem from '../transactions/TxListItem' @@ -168,9 +171,7 @@ const Chat = ({ user }) => { }, [user]) return ( -
-

Safe Chat

-

Join the Live Chat

+
{chatData.map((item: any, i) => @@ -188,8 +189,8 @@ const Chat = ({ user }) => { ), )}
- - +
+ { required /> - - + +
+ {!group ? ( <>
diff --git a/src/components/chat/styles.module.css b/src/components/chat/styles.module.css new file mode 100644 index 00000000000..4f05a9409ea --- /dev/null +++ b/src/components/chat/styles.module.css @@ -0,0 +1,10 @@ +.chatfullheight { + height: 100%; + overflow: hidden; + overflow-y: scroll; +} + +.chatsendbuttons { + position: sticky; + bottom: 0; +} diff --git a/src/components/common/ChainSwitcher/index.tsx b/src/components/common/ChainSwitcher/index.tsx index cfe0ff09fd7..f054127e33b 100644 --- a/src/components/common/ChainSwitcher/index.tsx +++ b/src/components/common/ChainSwitcher/index.tsx @@ -32,10 +32,8 @@ const ChainSwitcher = ({ fullWidth }: { fullWidth?: boolean }): ReactElement | n if (!isWrongChain) return null return ( - ) } diff --git a/src/components/common/ChainSwitcher/styles.module.css b/src/components/common/ChainSwitcher/styles.module.css index 54f510d4fb4..38000faaba8 100644 --- a/src/components/common/ChainSwitcher/styles.module.css +++ b/src/components/common/ChainSwitcher/styles.module.css @@ -1,6 +1,5 @@ -.circle { - width: 0.8em; - height: 0.8em; - border-radius: 50%; - margin-left: 0.2em; +.chainswitchbutton { + background-color: rgb(47, 37, 39); + color: rgb(255, 95, 114); + border-color: transparent; } diff --git a/src/components/common/ConnectWallet/ConnectionCenter.tsx b/src/components/common/ConnectWallet/ConnectionCenter.tsx index 21c53bd88dd..e8fb606ec87 100644 --- a/src/components/common/ConnectWallet/ConnectionCenter.tsx +++ b/src/components/common/ConnectWallet/ConnectionCenter.tsx @@ -32,15 +32,9 @@ const ConnectionCenter = (): ReactElement => { return ( <> - - - - Not connected -
- palette.error.main }}> + Connect wallet - diff --git a/src/components/common/ConnectWallet/styles.module.css b/src/components/common/ConnectWallet/styles.module.css index 592eb7841f3..e640c775ac5 100644 --- a/src/components/common/ConnectWallet/styles.module.css +++ b/src/components/common/ConnectWallet/styles.module.css @@ -8,6 +8,10 @@ align-items: center; text-align: left; gap: var(--space-1); + padding: 4px 11px; + height: 38px; + background: var(--color-background-paper); + border-radius: 6px; } .popoverContainer { diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx deleted file mode 100644 index e6227fb676e..00000000000 --- a/src/components/common/Footer/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import type { SyntheticEvent, ReactElement } from 'react' -import { Link, Typography } from '@mui/material' -import { useRouter } from 'next/router' -import css from './styles.module.css' -import { useAppDispatch } from '@/store' -import { openCookieBanner } from '@/store/popupSlice' -import { AppRoutes } from '@/config/routes' -import packageJson from '../../../../package.json' -import AppstoreButton from '../AppStoreButton' -import ExternalLink from '../ExternalLink' - -const footerPages = [AppRoutes.welcome, AppRoutes.settings.index] - -const Footer = (): ReactElement | null => { - const router = useRouter() - const dispatch = useAppDispatch() - - if (!footerPages.some((path) => router.pathname.startsWith(path))) { - return null - } - - const onCookieClick = (e: SyntheticEvent) => { - e.preventDefault() - dispatch(openCookieBanner({})) - } - - return ( -
-
    -
  • - ©2022–{new Date().getFullYear()} Safe Ecosystem Foundation -
    • -
  • - - Terms - -
    • -
  • - - Privacy - -
    • -
  • - - Licenses - -
    • -
  • - - Imprint - -
    • -
  • - - Cookie Policy - -  —  - - Preferences - -
    • -
  • - - v{packageJson.version} - -
    • -
  • - -
    • -
-
- ) -} - -export default Footer diff --git a/src/components/common/Footer/styles.module.css b/src/components/common/Footer/styles.module.css deleted file mode 100644 index 9df4569424f..00000000000 --- a/src/components/common/Footer/styles.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.container { - padding: var(--space-2); - font-size: 13px; -} - -.container ul { - display: flex; - flex-wrap: wrap; - list-style: none; - margin: 0; - padding: 0; - justify-content: center; - row-gap: 0.2em; - column-gap: var(--space-2); - align-items: center; -} - -.container li { - padding: 0; - margin: 0; -} - -.container li:not(:last-of-type):after { - content: '|'; - margin-left: var(--space-2); -} - -@media (max-width: 600px) { - .container li:not(:last-of-type):after { - visibility: hidden; - } -} diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index ba890cb1739..946d9e80505 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -8,11 +8,9 @@ import css from './styles.module.css' import ChainSwitcher from '@/components/common/ChainSwitcher' import ConnectWallet from '@/components/common/ConnectWallet' import NetworkSelector from '@/components/common/NetworkSelector' -import SafeTokenWidget, { getSafeTokenAddress } from '@/components/common/SafeTokenWidget' import NotificationCenter from '@/components/notification-center/NotificationCenter' import { AppRoutes } from '@/config/routes' import useChainId from '@/hooks/useChainId' -import SafeLogo from '@/public/images/logo.svg' import Link from 'next/link' import useSafeAddress from '@/hooks/useSafeAddress' @@ -23,7 +21,6 @@ type HeaderProps = { const Header = ({ onMenuToggle }: HeaderProps): ReactElement => { const chainId = useChainId() const safeAddress = useSafeAddress() - const showSafeToken = safeAddress && !!getSafeTokenAddress(chainId) const router = useRouter() // Logo link: if on Dashboard, link to Welcome, otherwise to the root (which redirects to either Dashboard or Welcome) @@ -44,7 +41,7 @@ const Header = ({ onMenuToggle }: HeaderProps): ReactElement => { @@ -53,12 +50,6 @@ const Header = ({ onMenuToggle }: HeaderProps): ReactElement => {
- {showSafeToken && ( -
- -
- )} -
diff --git a/src/components/common/Header/styles.module.css b/src/components/common/Header/styles.module.css index 3dc91216613..a36b70b3049 100644 --- a/src/components/common/Header/styles.module.css +++ b/src/components/common/Header/styles.module.css @@ -6,14 +6,13 @@ align-items: center; position: relative; border-radius: 0 !important; - background-color: var(--color-background-paper); + background-color: var(--color-background-header); border-bottom: 1px solid var(--color-border-light); } .element { - padding: 0 var(--space-2); + padding: 0 6px; height: 100%; - border-right: 1px solid var(--color-border-light); display: flex; flex-direction: column; justify-content: center; @@ -24,6 +23,7 @@ flex: 1; border: none; align-items: flex-start; + padding-left: var(--space-3); } .logo svg { @@ -38,7 +38,6 @@ .networkSelector { padding-right: 0; - padding-left: 0; border-right: none; } @@ -53,18 +52,10 @@ } @media (max-width: 600px) { - .element { - padding: 0 var(--space-1); - } - .menuButton { padding-left: var(--space-2); } - .networkSelector { - padding-right: 0; - } - .hideMobile { display: none; } diff --git a/src/components/common/MainNavTabs/index.tsx b/src/components/common/MainNavTabs/index.tsx new file mode 100644 index 00000000000..da6b22c9dc8 --- /dev/null +++ b/src/components/common/MainNavTabs/index.tsx @@ -0,0 +1,36 @@ +import Link from 'next/link' +import { Tab, Tabs, Typography } from '@mui/material' +import { useRouter } from 'next/router' +import type { NavItem } from '@/components/sidebar/SidebarNavigation/config' + +import css from './styles.module.css' + +const MainNavTabs = ({ tabs }: { tabs: NavItem[] }) => { + const router = useRouter() + const activeTab = tabs.map((tab) => tab.href).indexOf(router.pathname) + + return ( + + {tabs.map((tab, idx) => { + return ( + + + {tab.label} + + } + /> + + ) + })} + + ) +} + +export default MainNavTabs diff --git a/src/components/common/MainNavTabs/styles.module.css b/src/components/common/MainNavTabs/styles.module.css new file mode 100644 index 00000000000..927288f9064 --- /dev/null +++ b/src/components/common/MainNavTabs/styles.module.css @@ -0,0 +1,33 @@ +.tabs { + overflow: initial; + width: 100%; +} + +.tabs :global .MuiTabs-scroller { + margin: auto; + width: 100% +} + +.tabs :global .MuiTabs-scroller .MuiTabs-indicator { + background-color: #bbb; +} + +.tab { + opacity: 1; + padding: 0; + min-width: 0; + margin-right: 24px; + position: relative; + z-index: 2; +} + +.label { + text-transform: none; + padding-bottom: 20px; + font-size: 16px; + color: #999; +} + +.tabs:active .label { + color: #bbb; +} diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx index 15d527a5bde..677ad5600b4 100644 --- a/src/components/common/NetworkSelector/index.tsx +++ b/src/components/common/NetworkSelector/index.tsx @@ -70,7 +70,7 @@ const NetworkSelector = (): ReactElement => { {configs.map((chain) => { return ( - + ) })} diff --git a/src/components/common/NetworkSelector/styles.module.css b/src/components/common/NetworkSelector/styles.module.css index 76f06608f7c..46cbd1b3799 100644 --- a/src/components/common/NetworkSelector/styles.module.css +++ b/src/components/common/NetworkSelector/styles.module.css @@ -14,12 +14,21 @@ .select :global .MuiSelect-select { padding-right: 40px !important; - padding-left: 16px; height: 100%; display: flex; align-items: center; } +.ChainIndicator { + height: 38px; + font-size: 14px; + justify-content: center; + align-items: center; + display: flex; + padding: 8px 16px; + border-radius: 6px; +} + .select :global .MuiSvgIcon-root { margin-right: var(--space-2); } diff --git a/src/components/common/PageLayout/SideDrawer.tsx b/src/components/common/PageLayout/SideDrawer.tsx index fb91ae2d776..4434b72a16d 100644 --- a/src/components/common/PageLayout/SideDrawer.tsx +++ b/src/components/common/PageLayout/SideDrawer.tsx @@ -27,6 +27,7 @@ export const isNoSidebarRoute = (pathname: string): boolean => { AppRoutes.newSafe.load, AppRoutes.welcome, AppRoutes.index, + ].includes(pathname) } @@ -46,6 +47,7 @@ const SideDrawer = ({ isOpen, onToggle }: SideDrawerProps): ReactElement => { <> onToggle(false)} diff --git a/src/components/common/PageLayout/index.tsx b/src/components/common/PageLayout/index.tsx index 0193e500918..26942d7deb4 100644 --- a/src/components/common/PageLayout/index.tsx +++ b/src/components/common/PageLayout/index.tsx @@ -1,13 +1,19 @@ import { useState, type ReactElement } from 'react' import classnames from 'classnames' +import { + Grid, +} from '@mui/material' +import SafeList from '@/components/sidebar/SafeList' + import Header from '@/components/common//Header' import css from './styles.module.css' import SafeLoadingError from '../SafeLoadingError' -import Footer from '../Footer' import SideDrawer, { isNoSidebarRoute } from './SideDrawer' import PsaBanner from '../PsaBanner' +import StickyNav from '@/components/dashboard/Overview/Overview' + const PageLayout = ({ pathname, children }: { pathname: string; children: ReactElement }): ReactElement => { const [isSidebarOpen, setSidebarOpen] = useState(!isNoSidebarRoute(pathname)) @@ -17,16 +23,24 @@ const PageLayout = ({ pathname, children }: { pathname: string; children: ReactE
+ + - - + + + + +
+
+ +
{children}
- -
+ + ) } diff --git a/src/components/common/PageLayout/styles.module.css b/src/components/common/PageLayout/styles.module.css index 030a6f910a8..49025e9e99d 100644 --- a/src/components/common/PageLayout/styles.module.css +++ b/src/components/common/PageLayout/styles.module.css @@ -6,9 +6,13 @@ z-index: 1201; } +.stickynav { + padding: 24px 24px 0 24px; + width: 100%; +} + .main { background-color: var(--color-background-main); - padding-left: 230px; padding-top: var(--header-height); min-height: 100vh; display: flex; @@ -16,6 +20,22 @@ transition: padding 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; } +.gridsidecontainer { + padding: 0; + background-color: var(--color-background-main); +} + +.sidebar { + margin-left: 48px; + margin-top: 108px; + height: calc(100vh - 84px - 24px); + background: var(--color-background-paper); + padding: 0!important; + border-radius: 6px; + position: sticky; + top: 84px; +} + .mainNoSidebar { padding-left: 0; } @@ -69,7 +89,23 @@ background-color: var(--color-background-light); } +@media (min-width: 901px) { + .mainview { + width: calc(100vw - 364px); + padding-left: 0!important; + } + .drawermo { + display:none; + } +} + @media (max-width: 900px) { + .mainview { + width: 100%; + } + .sidebar { + display: none; + } .main { padding-left: 0; } diff --git a/src/components/dashboard/FeaturedApps/FeaturedApps.tsx b/src/components/dashboard/FeaturedApps/FeaturedApps.tsx index 4f93a150c6e..9a4db55bc86 100644 --- a/src/components/dashboard/FeaturedApps/FeaturedApps.tsx +++ b/src/components/dashboard/FeaturedApps/FeaturedApps.tsx @@ -26,9 +26,6 @@ export const FeaturedApps = (): ReactElement | null => { return ( - - Connect & transact - {featuredApps?.map((app) => ( diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx deleted file mode 100644 index b8606366e08..00000000000 --- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { useRef } from 'react' -import { Typography, Card, Box, Alert, IconButton, Link, SvgIcon } from '@mui/material' -import { WidgetBody } from '@/components/dashboard/styled' -import ExpandMoreIcon from '@mui/icons-material/ExpandMore' -import Accordion from '@mui/material/Accordion' -import AccordionSummary from '@mui/material/AccordionSummary' -import AccordionDetails from '@mui/material/AccordionDetails' -import css from './styles.module.css' -import { useBrowserPermissions } from '@/hooks/safe-apps/permissions' -import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps' -import { SafeAppsTag, SAFE_APPS_SUPPORT_CHAT_URL } from '@/config/constants' -import { useDarkMode } from '@/hooks/useDarkMode' -import { OpenInNew } from '@mui/icons-material' -import NetworkError from '@/public/images/common/network-error.svg' -import useChainId from '@/hooks/useChainId' -import { getSafeTokenAddress } from '@/components/common/SafeTokenWidget' -import SafeAppIframe from '@/components/safe-apps/AppFrame/SafeAppIframe' -import type { UseAppCommunicatorHandlers } from '@/components/safe-apps/AppFrame/useAppCommunicator' -import useAppCommunicator from '@/components/safe-apps/AppFrame/useAppCommunicator' -import { useCurrentChain } from '@/hooks/useChains' -import useGetSafeInfo from '@/components/safe-apps/AppFrame/useGetSafeInfo' -import type { SafeAppData } from '@gnosis.pm/safe-react-gateway-sdk' -import useSafeInfo from '@/hooks/useSafeInfo' -import { fetchSafeAppFromManifest } from '@/services/safe-apps/manifest' -import useAsync from '@/hooks/useAsync' -import { getOrigin } from '@/components/safe-apps/utils' - -// A fallback component when the Safe App fails to load -const WidgetLoadErrorFallback = () => ( - - - - - Couldn't load governance widgets - - - - You can try to reload the page and in case the problem persists, please reach out to us via{' '} - - Discord - - - - - - -) - -// A mini Safe App frame with a minimal set of communication handlers -const MiniAppFrame = ({ app, title }: { app: SafeAppData; title: string }) => { - const chain = useCurrentChain() - const isDarkMode = useDarkMode() - const theme = isDarkMode ? 'dark' : 'light' - const { getAllowedFeaturesList } = useBrowserPermissions() - const iframeRef = useRef(null) - - const [, error] = useAsync(() => { - if (!chain?.chainId) return - return fetchSafeAppFromManifest(app.url, chain.chainId) - }, [app.url, chain?.chainId]) - - // Initialize the app communicator - useAppCommunicator(iframeRef, app, chain, { - onGetSafeInfo: useGetSafeInfo(), - } as Partial as UseAppCommunicatorHandlers) - - return error ? ( - - ) : ( - - ) -} - -// Entire section for the governance widgets -const GovernanceSection = () => { - const [matchingApps, errorFetchingClaimingSafeApp] = useRemoteSafeApps(SafeAppsTag.SAFE_CLAIMING_APP) - const claimingApp = matchingApps?.[0] - const fetchingSafeClaimingApp = !claimingApp && !errorFetchingClaimingSafeApp - const { safeLoading } = useSafeInfo() - - return ( - - - - - } - > -
- - Governance - - - Use your SAFE tokens to vote on important proposals or participate in forum discussions. - -
- - - ({ padding: `0 ${spacing(3)}` })}> - {claimingApp || fetchingSafeClaimingApp ? ( - - - {claimingApp && !safeLoading ? ( - - ) : ( - - - Loading section... - - - )} - - - ) : ( - - There was an error fetching the Governance section. Please reload the page. - - )} - - - ) -} - -// Prevent `GovernanceSection` hooks from needlessly being called -const GovernanceSectionWrapper = () => { - const chainId = useChainId() - if (!getSafeTokenAddress(chainId)) { - return null - } - - return -} - -export default GovernanceSectionWrapper diff --git a/src/components/dashboard/GovernanceSection/styles.module.css b/src/components/dashboard/GovernanceSection/styles.module.css deleted file mode 100644 index 5ea0cd9502a..00000000000 --- a/src/components/dashboard/GovernanceSection/styles.module.css +++ /dev/null @@ -1,66 +0,0 @@ -.accordion { - box-shadow: none; - border: none; - background: transparent; -} - -.accordion :global .MuiAccordionSummary-root, -.accordion :global .MuiAccordionDetails-root { - padding: 0; -} - -.accordion:hover :global .MuiAccordionSummary-root, -.accordion :global .MuiAccordionSummary-root:hover, -.accordion :global .Mui-expanded.MuiAccordionSummary-root { - background: inherit; -} - -.accordion :global .MuiAccordionSummary-root { - pointer-events: none; -} - -.accordion :global .MuiAccordionSummary-expandIconWrapper { - pointer-events: auto; -} - -.widgetWrapper { - border: none; - height: 300px; -} - -/* iframe sm breakpoint + paddings */ -@media (max-width: 662px) { - .widgetWrapper { - height: 624px; - } -} - -.loadErrorCard { - display: flex; - justify-content: center; - align-items: center; - padding: var(--space-2); - text-align: center; - flex-grow: 1; -} - -.loadErrorCard:last-of-type { - min-width: 300px; -} - -.loadErrorMsgContainer { - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: var(--space-2); - max-width: 80%; -} - -.loadErroricon { - font-size: 54px; - position: relative; - left: 3px; - top: 3px; -} diff --git a/src/components/dashboard/HomeSidebar/ownerlist.tsx b/src/components/dashboard/HomeSidebar/ownerlist.tsx new file mode 100644 index 00000000000..9e26c18be88 --- /dev/null +++ b/src/components/dashboard/HomeSidebar/ownerlist.tsx @@ -0,0 +1,20 @@ +import type { NextPage } from 'next' +import { Grid, Paper, SvgIcon, Tooltip, Typography } from '@mui/material' +import { OwnerList } from '@/components/settings/owner/OwnerList' +import useSafeInfo from '@/hooks/useSafeInfo' +import useIsGranted from '@/hooks/useIsGranted' + +const Owner: NextPage = () => { + const { safe } = useSafeInfo() + const isGranted = useIsGranted() + + return ( + <> + + + + + ) +} + +export default Owner diff --git a/src/components/dashboard/Overview/Overview.tsx b/src/components/dashboard/Overview/Overview.tsx index 59a77c1babd..59a22d541dd 100644 --- a/src/components/dashboard/Overview/Overview.tsx +++ b/src/components/dashboard/Overview/Overview.tsx @@ -1,5 +1,4 @@ import type { ReactElement } from 'react' -import { useMemo } from 'react' import { useRouter } from 'next/router' import Link from 'next/link' import styled from '@emotion/styled' @@ -10,17 +9,22 @@ import { useCurrentChain } from '@/hooks/useChains' import SafeIcon from '@/components/common/SafeIcon' import ChainIndicator from '@/components/common/ChainIndicator' import EthHashInfo from '@/components/common/EthHashInfo' -import { AppRoutes } from '@/config/routes' import useSafeAddress from '@/hooks/useSafeAddress' -import useCollectibles from '@/hooks/useCollectibles' -import type { UrlObject } from 'url' -import { useVisibleBalances } from '@/hooks/useVisibleBalances' + +import { AppRoutes } from '@/config/routes' + +import { navItems } from '@/components/sidebar/SidebarNavigation/config' +import MainNavTabs from '@/components/common/MainNavTabs' const IdenticonContainer = styled.div` position: relative; margin-bottom: var(--space-2); ` +const StyledCard = styled(Card)` + padding-bottom: 0; +` + const StyledText = styled(Typography)` margin-top: 8px; font-size: 24px; @@ -36,7 +40,7 @@ const NetworkLabelContainer = styled.div` bottom: auto; } ` - + const ValueSkeleton = () => const SkeletonOverview = ( @@ -78,93 +82,43 @@ const SkeletonOverview = ( ) +const footerPages = [AppRoutes.home, AppRoutes.balances.index, AppRoutes.addressBook, AppRoutes.apps, AppRoutes.settings.index, AppRoutes.transactions.index] -const Overview = (): ReactElement => { +const StickyNav = (): ReactElement | null => { const router = useRouter() const safeAddress = useSafeAddress() const { safe, safeLoading } = useSafeInfo() - const { balances } = useVisibleBalances() - const [nfts] = useCollectibles() const chain = useCurrentChain() const { chainId } = chain || {} - const assetsLink: UrlObject = { - pathname: AppRoutes.balances.index, - query: { safe: router.query.safe }, - } - const nftsLink: UrlObject = { - pathname: AppRoutes.balances.nfts, - query: { safe: router.query.safe }, + if (!footerPages.some((path) => router.pathname.startsWith(path))) { + return null } - // Native token is always returned even when its balance is 0 - const tokenCount = useMemo(() => balances.items.filter((token) => token.balance !== '0').length, [balances]) - const nftsCount = useMemo(() => (nfts ? `${nfts.next ? '>' : ''}${nfts.results.length}` : ''), [nfts]) - return ( - - Overview - - {safeLoading ? ( SkeletonOverview ) : ( - + - - - - - - - - - - - - - - Tokens - - {tokenCount} - - - - - - - - - NFTs - - {nftsCount || } - - - - - + - - - - - + - + + )} ) } -export default Overview +export default StickyNav diff --git a/src/components/dashboard/index.tsx b/src/components/dashboard/index.tsx index 626499d1fd1..1335433630a 100644 --- a/src/components/dashboard/index.tsx +++ b/src/components/dashboard/index.tsx @@ -1,12 +1,17 @@ import type { ReactElement } from 'react' import { Grid } from '@mui/material' -import PendingTxsList from '@/components/dashboard/PendingTxs/PendingTxsList' -import Overview from '@/components/dashboard/Overview/Overview' +import styled from '@emotion/styled' import { FeaturedApps } from '@/components/dashboard/FeaturedApps/FeaturedApps' -import SafeAppsDashboardSection from '@/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection' -import GovernanceSection from '@/components/dashboard/GovernanceSection/GovernanceSection' import CreationDialog from '@/components/dashboard/CreationDialog' import { useRouter } from 'next/router' +import Owner from '@/components/dashboard/HomeSidebar/ownerlist' +import Home from '@/pages/chat/chat' + +const StyledGrid = styled(Grid)` + display: flex; + flex-flow: column; + gap: 24px; +` const Dashboard = (): ReactElement => { const router = useRouter() @@ -15,25 +20,14 @@ const Dashboard = (): ReactElement => { return ( <> - - - - - - + + - + + - - - - - - - - - + {showCreationModal ? : null} diff --git a/src/components/notification-center/NotificationCenter/styles.module.css b/src/components/notification-center/NotificationCenter/styles.module.css index 82d3f956272..782deba0474 100644 --- a/src/components/notification-center/NotificationCenter/styles.module.css +++ b/src/components/notification-center/NotificationCenter/styles.module.css @@ -1,7 +1,9 @@ .bell { display: flex; justify-content: center; - padding: 4px; + background: var(--color-background-paper); + padding: 11px; + border-radius: 6px; } .bell svg path { diff --git a/src/components/sidebar/SafeList/index.tsx b/src/components/sidebar/SafeList/index.tsx index 571cef06bc4..d102de10130 100644 --- a/src/components/sidebar/SafeList/index.tsx +++ b/src/components/sidebar/SafeList/index.tsx @@ -41,7 +41,7 @@ export const _shouldExpandSafeList = ({ ownedSafesOnChain: string[] addedSafesOnChain: AddedSafesOnChain }): boolean => { - let shouldExpand = false + let shouldExpand = false const addedAddressesOnChain = Object.keys(addedSafesOnChain) @@ -56,7 +56,7 @@ export const _shouldExpandSafeList = ({ return shouldExpand } -const MAX_EXPANDED_SAFES = 3 +const MAX_EXPANDED_SAFES = 99 const NO_SAFE_MESSAGE = 'Create a new safe or add' const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement => { @@ -78,14 +78,15 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement = return (
- +

My Safes - +

{!isWelcomePage && ( +
From e8dfe944cbba096dcc5ea772e451853e1d8860c9 Mon Sep 17 00:00:00 2001 From: danielfetz <118893474+danielfetz@users.noreply.github.com> Date: Fri, 17 Feb 2023 12:53:16 +0100 Subject: [PATCH 36/45] Update styles.module.css --- src/components/chat/styles.module.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/chat/styles.module.css b/src/components/chat/styles.module.css index acb6d17e6ab..c8c5da60042 100644 --- a/src/components/chat/styles.module.css +++ b/src/components/chat/styles.module.css @@ -32,6 +32,12 @@ padding-top: 4px; } +.formchatbuttonswrapper { + display: flex; + flex-flow: row; + gap: 8px; +} + .inputmessage { background: transparent; border: 1px solid var(--color-border-light); @@ -43,3 +49,12 @@ font-size: 16px; width: 100%; } + +.submitbuttonchat { + padding: 9px 14px; + border-radius: 14px; + border: 0; + background: #2f92f5; + color: #fff; + font-size: 25px; +} From 0af68868db650c07ba9b802629019f43c20289b2 Mon Sep 17 00:00:00 2001 From: danielfetz <118893474+danielfetz@users.noreply.github.com> Date: Fri, 17 Feb 2023 12:56:01 +0100 Subject: [PATCH 37/45] Update index.tsx --- src/components/chat/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 80d3505a1f2..e6e77e34529 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -194,14 +194,14 @@ const Chat = ({ user }) => { setMessage(e.target.value)} required /> - +
From 334c0e69961cd8371ed3e3ba5e29f747236e4ddf Mon Sep 17 00:00:00 2001 From: danielfetz <118893474+danielfetz@users.noreply.github.com> Date: Fri, 17 Feb 2023 12:56:57 +0100 Subject: [PATCH 38/45] Update index.tsx --- src/components/chat/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index e6e77e34529..52cb443ff60 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -201,7 +201,7 @@ const Chat = ({ user }) => { onChange={(e) => setMessage(e.target.value)} required /> - +
From 536abc177f168a8be4ed1158b09084899aa65cab Mon Sep 17 00:00:00 2001 From: danielfetz <118893474+danielfetz@users.noreply.github.com> Date: Fri, 17 Feb 2023 12:57:19 +0100 Subject: [PATCH 39/45] Update index.tsx --- src/components/chat/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 52cb443ff60..e8658f03457 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -201,7 +201,7 @@ const Chat = ({ user }) => { onChange={(e) => setMessage(e.target.value)} required /> - +
From ba1d73a02762dbb1237f29494b1e799527cc57ec Mon Sep 17 00:00:00 2001 From: danielfetz <118893474+danielfetz@users.noreply.github.com> Date: Fri, 17 Feb 2023 12:59:11 +0100 Subject: [PATCH 40/45] Update index.tsx --- src/components/chat/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index e8658f03457..093126e9626 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -201,7 +201,7 @@ const Chat = ({ user }) => { onChange={(e) => setMessage(e.target.value)} required /> - +
From fac3da7b3b88f2fe9f45d37ad59931cf807f981a Mon Sep 17 00:00:00 2001 From: danielfetz <118893474+danielfetz@users.noreply.github.com> Date: Fri, 17 Feb 2023 13:03:08 +0100 Subject: [PATCH 41/45] Update styles.module.css --- src/components/chat/styles.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chat/styles.module.css b/src/components/chat/styles.module.css index c8c5da60042..72b52968c2b 100644 --- a/src/components/chat/styles.module.css +++ b/src/components/chat/styles.module.css @@ -29,7 +29,7 @@ position: sticky; bottom: 0; background: var(--color-background-paper); - padding-top: 4px; + padding-top: 6px; } .formchatbuttonswrapper { From 11c9f783b526dbbf17c38a0ad7c4b168d3728623 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Fri, 3 Mar 2023 10:29:52 -0500 Subject: [PATCH 42/45] create storage key for groups --- src/components/chat/index.tsx | 2 +- src/components/common/PageLayout/index.tsx | 7 +- src/components/sidebar/GroupList/index.tsx | 83 +++++++++++++++++++ .../sidebar/GroupList/styles.module.css | 46 ++++++++++ src/components/sidebar/SafeList/index.tsx | 1 - src/components/sidebar/Sidebar/index.tsx | 11 +-- src/services/analytics/events/overview.ts | 4 + 7 files changed, 141 insertions(+), 13 deletions(-) create mode 100644 src/components/sidebar/GroupList/index.tsx create mode 100644 src/components/sidebar/GroupList/styles.module.css diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 093126e9626..015c5107de8 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -241,4 +241,4 @@ const Message = ({ msg, owner, isOwner, data, timeStamp }) => (
) -export default Chat +export default Chat \ No newline at end of file diff --git a/src/components/common/PageLayout/index.tsx b/src/components/common/PageLayout/index.tsx index 26942d7deb4..61b4d16bd58 100644 --- a/src/components/common/PageLayout/index.tsx +++ b/src/components/common/PageLayout/index.tsx @@ -10,6 +10,7 @@ import Header from '@/components/common//Header' import css from './styles.module.css' import SafeLoadingError from '../SafeLoadingError' import SideDrawer, { isNoSidebarRoute } from './SideDrawer' +import GroupList from '@/components/sidebar/GroupList' import PsaBanner from '../PsaBanner' import StickyNav from '@/components/dashboard/Overview/Overview' @@ -27,8 +28,10 @@ const PageLayout = ({ pathname, children }: { pathname: string; children: ReactE - - + + + {/* Tod do, clean this up */} +
diff --git a/src/components/sidebar/GroupList/index.tsx b/src/components/sidebar/GroupList/index.tsx new file mode 100644 index 00000000000..aba9ce4b8b9 --- /dev/null +++ b/src/components/sidebar/GroupList/index.tsx @@ -0,0 +1,83 @@ +import { useEffect, useState, type ReactElement } from 'react' +import { useRouter } from 'next/router' +import Track from '@/components/common/Track' +import Link from 'next/link' +import SafeListItem from '../SafeListItem' +import Button from '@mui/material/Button' +import SvgIcon from '@mui/material/SvgIcon' +import AddIcon from '@/public/images/common/add.svg' +import css from './styles.module.css' +import useOwnedSafes from '@/hooks/useOwnedSafes' +import { OVERVIEW_EVENTS } from '@/services/analytics' + +const GroupList = (): ReactElement => { + const router = useRouter() + const [groups, setGroups] = useState([]); + + const ownedSafes = useOwnedSafes() + console.log(ownedSafes); + const [groupName, setGroupName] = useState(); + + useEffect(() => { + const activeGroups = async () =>{ + const items = JSON.parse(localStorage.getItem('ricochet')!); + console.log(items, 'items') + if (items) { + setGroups([...groups, items]); + } + } + activeGroups() + window.addEventListener('storage', activeGroups) + console.log(groups, 'groups') + return () => { + window.removeEventListener('storage', activeGroups) + } + }, []); + + const createGroup = async () => { + console.log('groupname', groupName) + localStorage.setItem(groupName!, JSON.stringify(ownedSafes)); + console.log(localStorage) + } + + const nameGroup = (name: string) => { + setGroupName(name) + } + + return ( +
+
+

+ My Groups +

+ +
+ nameGroup(e.target.value)}/> + +
+ +
+
Ricochet
+ {groups?.map((group) => { + return {}} + shouldScrollToSafe={false} + /> + })} +
+ ) +} + +export default GroupList diff --git a/src/components/sidebar/GroupList/styles.module.css b/src/components/sidebar/GroupList/styles.module.css new file mode 100644 index 00000000000..fdcfc1b5df5 --- /dev/null +++ b/src/components/sidebar/GroupList/styles.module.css @@ -0,0 +1,46 @@ +.container { + overflow-y: auto; + height: 100%; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 5px var(--space-3); + border-bottom: 1px solid var(--color-border-light); +} + +.addbutton { + background: rgba(171, 164, 99, 0.08); + color: rgb(171, 164, 99); + border: 2px solid transparent; +} + +.ownedLabelWrapper { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid var(--color-border-light); + padding: 0 24px; + height: 60px; +} + +.iconExpandButton { + padding: 0px; +} + +.ownedLabel { + cursor: pointer; + color: #bbb; + margin-top: var(--space-1); + margin-bottom: var(--space-1); + font-size: 12px; + text-transform: uppercase; +} + +.list { + overflow-x: hidden; + overflow-y: hidden; + padding: 0 0; +} diff --git a/src/components/sidebar/SafeList/index.tsx b/src/components/sidebar/SafeList/index.tsx index d102de10130..f3b3a786f73 100644 --- a/src/components/sidebar/SafeList/index.tsx +++ b/src/components/sidebar/SafeList/index.tsx @@ -24,7 +24,6 @@ import SafeListItem from '@/components/sidebar/SafeListItem' import { AppRoutes } from '@/config/routes' import css from './styles.module.css' import { sameAddress } from '@/utils/addresses' -import ChainIndicator from '@/components/common/ChainIndicator' import useSafeInfo from '@/hooks/useSafeInfo' import Track from '@/components/common/Track' import { OVERVIEW_EVENTS } from '@/services/analytics/events/overview' diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx index 46bf55181b4..709b7dcc88a 100644 --- a/src/components/sidebar/Sidebar/index.tsx +++ b/src/components/sidebar/Sidebar/index.tsx @@ -1,18 +1,11 @@ import { useState, type ReactElement } from 'react' -import { Divider, Drawer, IconButton } from '@mui/material' -import ChevronRight from '@mui/icons-material/ChevronRight' import { useRouter } from 'next/router' -import ChainIndicator from '@/components/common/ChainIndicator' -import SidebarHeader from '@/components/sidebar/SidebarHeader' import SafeList from '@/components/sidebar/SafeList' -import SidebarNavigation from '@/components/sidebar/SidebarNavigation' -import SidebarFooter from '@/components/sidebar/SidebarFooter' import css from './styles.module.css' import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics' -import KeyholeIcon from '@/components/common/icons/KeyholeIcon' -import OwnedSafes from '../OwnedSafes' +import GroupList from '../GroupList' const Sidebar = (): ReactElement => { const router = useRouter() @@ -27,7 +20,7 @@ const Sidebar = (): ReactElement => { return (
- +
) diff --git a/src/services/analytics/events/overview.ts b/src/services/analytics/events/overview.ts index 668d1d10e52..89f273a3327 100644 --- a/src/services/analytics/events/overview.ts +++ b/src/services/analytics/events/overview.ts @@ -27,6 +27,10 @@ export const OVERVIEW_EVENTS = { action: 'Add Safe', category: OVERVIEW_CATEGORY, }, + ADD_GROUP: { + action: 'Add Group', + category: OVERVIEW_CATEGORY, + }, SIDEBAR: { action: 'Sidebar', category: OVERVIEW_CATEGORY, From 9bf317ea7213c3e7039d78077acb62e4a3d3ef71 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Tue, 7 Mar 2023 10:40:14 -0500 Subject: [PATCH 43/45] create folders and allow for adding safes to folders: todo: clean up UI, add optionality to delete safes, debug some stuff and test --- src/components/chat/folder.tsx | 77 +++++++++++++++++++ .../GroupList/index.tsx => chat/groups.tsx} | 51 ++++++------ src/components/chat/index.tsx | 21 ++--- src/components/chat/login.tsx | 6 +- src/components/chat/styles.module.css | 14 ++++ src/components/common/PageLayout/index.tsx | 33 ++++---- .../sidebar/GroupList/styles.module.css | 46 ----------- src/components/sidebar/Sidebar/index.tsx | 1 - src/pages/chat/chat.tsx | 4 +- 9 files changed, 146 insertions(+), 107 deletions(-) create mode 100644 src/components/chat/folder.tsx rename src/components/{sidebar/GroupList/index.tsx => chat/groups.tsx} (56%) delete mode 100644 src/components/sidebar/GroupList/styles.module.css diff --git a/src/components/chat/folder.tsx b/src/components/chat/folder.tsx new file mode 100644 index 00000000000..ab1303262aa --- /dev/null +++ b/src/components/chat/folder.tsx @@ -0,0 +1,77 @@ +import { useEffect, useState, type ReactElement } from 'react' +import Button from '@mui/material/Button' +import AddIcon from '@/public/images/common/add.svg' +import SafeListItem from '../sidebar/SafeListItem' +import SvgIcon from '@mui/material/SvgIcon' +import css from './styles.module.css' + +//@ts-ignore +const Folder = ({group}): ReactElement => { + + const [safeAddress, setSafeAddress] = useState(''); + const [safes, setSafes] = useState(['']); + + useEffect(() => { + const activeGroups = async () =>{ + const items = JSON.parse(localStorage.getItem(group)!); + // const myArray = items.split(","); + if (items) { + setSafes(items); + } + } + activeGroups() + window.addEventListener('storage', activeGroups) + return () => { + window.removeEventListener('storage', activeGroups) + } + }, []); + + const addSafeToFolder = async () => { + const safes = JSON.parse(localStorage.getItem(group)!); + if (safes) { + localStorage.setItem(group, JSON.stringify([...safes, safeAddress])); + } else { + localStorage.setItem(group, JSON.stringify([safeAddress])); + } + } + + const handleSetSafeAddress = (address: string) => { + setSafeAddress(address) + } + + return ( +
+

{group}

+
+ + handleSetSafeAddress(e.target.value)} placeholder={'Safe address'}/> + +
+ + <> + { + safes.map((safe) => { + return {}} + shouldScrollToSafe={true} + /> + }) + } + +
+ ) +} + +export default Folder diff --git a/src/components/sidebar/GroupList/index.tsx b/src/components/chat/groups.tsx similarity index 56% rename from src/components/sidebar/GroupList/index.tsx rename to src/components/chat/groups.tsx index aba9ce4b8b9..349b734055b 100644 --- a/src/components/sidebar/GroupList/index.tsx +++ b/src/components/chat/groups.tsx @@ -1,64 +1,62 @@ import { useEffect, useState, type ReactElement } from 'react' import { useRouter } from 'next/router' import Track from '@/components/common/Track' -import Link from 'next/link' -import SafeListItem from '../SafeListItem' +import SafeListItem from '../sidebar/SafeListItem' import Button from '@mui/material/Button' import SvgIcon from '@mui/material/SvgIcon' +import Folder from './folder' import AddIcon from '@/public/images/common/add.svg' import css from './styles.module.css' import useOwnedSafes from '@/hooks/useOwnedSafes' +import useSafeInfo from '@/hooks/useSafeInfo' import { OVERVIEW_EVENTS } from '@/services/analytics' const GroupList = (): ReactElement => { const router = useRouter() - const [groups, setGroups] = useState([]); - + const [groups, setGroups] = useState([]); + const { safeAddress, safe } = useSafeInfo() const ownedSafes = useOwnedSafes() - console.log(ownedSafes); - const [groupName, setGroupName] = useState(); + const [folderName, setFolderName] = useState(); useEffect(() => { const activeGroups = async () =>{ - const items = JSON.parse(localStorage.getItem('ricochet')!); - console.log(items, 'items') + const items = JSON.parse(localStorage.getItem('folders')!); + // const myArray = items.split(","); if (items) { - setGroups([...groups, items]); + setGroups(items); } } activeGroups() window.addEventListener('storage', activeGroups) - console.log(groups, 'groups') return () => { window.removeEventListener('storage', activeGroups) } }, []); - const createGroup = async () => { - console.log('groupname', groupName) - localStorage.setItem(groupName!, JSON.stringify(ownedSafes)); - console.log(localStorage) + const createFolder = async () => { + const folders = JSON.parse(localStorage.getItem('folders')!); + localStorage.setItem('folders', JSON.stringify(folders ? [...folders, `${folderName!},`] : [folderName!])); } - const nameGroup = (name: string) => { - setGroupName(name) + const nameFolder = (name: string) => { + setFolderName(name) } return (

- My Groups + My Folders

- nameGroup(e.target.value)}/> + nameFolder(e.target.value)}/>
-
Ricochet
- {groups?.map((group) => { - return {}} - shouldScrollToSafe={false} - /> - })} + <> + {groups?.map((group: string) => { + return
+ })} +
) } diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 015c5107de8..b30192ee731 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -1,8 +1,6 @@ -import { useEffect, useState } from 'react' +import { useEffect, useState, useRef } from 'react' import { toast } from 'react-toastify' - import css from './styles.module.css' - import useTxHistory from '@/hooks/useTxHistory' import useWallet from '@/hooks/wallets/useWallet' import TxListItem from '../transactions/TxListItem' @@ -37,7 +35,6 @@ const Chat = ({ user }) => { //@ts-ignore setMessages((prevState) => [...prevState, msg]) setMessage('') - scrollToEnd() }) .catch((error: any) => { console.log(error) @@ -50,14 +47,12 @@ const Chat = ({ user }) => { await getMessages(`pid_${safeAddress!}`) .then((msgs: any) => { setMessages(msgs) - scrollToEnd() }) .catch((error) => console.log(error)) await listenForMessage(`pid_${safeAddress!}`) .then((msg: any) => { setMessages((prevState) => [...prevState, msg]) - scrollToEnd() }) .catch((error) => console.log(error)) } @@ -109,12 +104,17 @@ const Chat = ({ user }) => { setChatData(allData) }, [messages]) - const scrollToEnd = () => { - const elmnt = document.getElementById('messages-container') + const bottom = useRef(null) + + const scrollToBottom = () => { //@ts-ignore - elmnt.scrollTop = elmnt.scrollHeight + bottom.current.scrollIntoView({ behavior: "smooth" }) } + useEffect(() => { + scrollToBottom() + }, [messages]); + const handleCreateGroup = async () => { if (!user) { toast.warning('You need to login or sign up first.') @@ -188,6 +188,7 @@ const Chat = ({ user }) => { ), )} +
@@ -225,7 +226,7 @@ const Chat = ({ user }) => { } //@ts-ignore -const Message = ({ msg, owner, isOwner, data, timeStamp }) => ( +const Message: any = ({ msg, owner, isOwner, data, timeStamp }) => (
{ diff --git a/src/components/chat/login.tsx b/src/components/chat/login.tsx index 6ad05f81dd8..18547d8efc0 100644 --- a/src/components/chat/login.tsx +++ b/src/components/chat/login.tsx @@ -2,12 +2,16 @@ import { toast } from 'react-toastify' import useWallet from '@/hooks/wallets/useWallet' import { loginWithCometChat, signUpWithCometChat } from '../../services/chat' import useSafeAddress from '@/hooks/useSafeAddress' +import { useEffect } from 'react' //@ts-ignore const Login = ({ setCurrentUser }) => { const wallet = useWallet() const safeAddress = useSafeAddress() - console.log('safe', safeAddress) + + useEffect(() => { + handleLogin(); + }, [wallet, safeAddress]) const handleLogin = async () => { await toast.promise( diff --git a/src/components/chat/styles.module.css b/src/components/chat/styles.module.css index 72b52968c2b..5a6b2dd4d8d 100644 --- a/src/components/chat/styles.module.css +++ b/src/components/chat/styles.module.css @@ -58,3 +58,17 @@ color: #fff; font-size: 25px; } + + +/* for groupslist*/ +.container{ + border: 1px solid white; + padding: 1em; + margin-top: 1em; +} + +.group{ + border: 1px solid white; + padding: 1em; + margin-top: 1em; +} \ No newline at end of file diff --git a/src/components/common/PageLayout/index.tsx b/src/components/common/PageLayout/index.tsx index 61b4d16bd58..8d209048b2e 100644 --- a/src/components/common/PageLayout/index.tsx +++ b/src/components/common/PageLayout/index.tsx @@ -10,7 +10,6 @@ import Header from '@/components/common//Header' import css from './styles.module.css' import SafeLoadingError from '../SafeLoadingError' import SideDrawer, { isNoSidebarRoute } from './SideDrawer' -import GroupList from '@/components/sidebar/GroupList' import PsaBanner from '../PsaBanner' import StickyNav from '@/components/dashboard/Overview/Overview' @@ -25,25 +24,23 @@ const PageLayout = ({ pathname, children }: { pathname: string; children: ReactE
- + - - - - {/* Tod do, clean this up */} - - - -
-
-
- + + + + + +
+
+
+ +
+ {children} +
- {children} -
-
- - + + ) } diff --git a/src/components/sidebar/GroupList/styles.module.css b/src/components/sidebar/GroupList/styles.module.css deleted file mode 100644 index fdcfc1b5df5..00000000000 --- a/src/components/sidebar/GroupList/styles.module.css +++ /dev/null @@ -1,46 +0,0 @@ -.container { - overflow-y: auto; - height: 100%; -} - -.header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 5px var(--space-3); - border-bottom: 1px solid var(--color-border-light); -} - -.addbutton { - background: rgba(171, 164, 99, 0.08); - color: rgb(171, 164, 99); - border: 2px solid transparent; -} - -.ownedLabelWrapper { - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid var(--color-border-light); - padding: 0 24px; - height: 60px; -} - -.iconExpandButton { - padding: 0px; -} - -.ownedLabel { - cursor: pointer; - color: #bbb; - margin-top: var(--space-1); - margin-bottom: var(--space-1); - font-size: 12px; - text-transform: uppercase; -} - -.list { - overflow-x: hidden; - overflow-y: hidden; - padding: 0 0; -} diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx index 709b7dcc88a..c325b01656b 100644 --- a/src/components/sidebar/Sidebar/index.tsx +++ b/src/components/sidebar/Sidebar/index.tsx @@ -5,7 +5,6 @@ import SafeList from '@/components/sidebar/SafeList' import css from './styles.module.css' import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics' -import GroupList from '../GroupList' const Sidebar = (): ReactElement => { const router = useRouter() diff --git a/src/pages/chat/chat.tsx b/src/pages/chat/chat.tsx index 11ef046cda5..1e437178b15 100644 --- a/src/pages/chat/chat.tsx +++ b/src/pages/chat/chat.tsx @@ -4,6 +4,7 @@ import css from './styles.module.css' import useOwnedSafes from '@/hooks/useOwnedSafes' import useSafeInfo from '@/hooks/useSafeInfo' import useWallet from '@/hooks/wallets/useWallet' +import GroupList from '@/components/chat/groups' import Head from 'next/head' import dynamic from 'next/dynamic' @@ -28,8 +29,6 @@ const Home: NextPage = () => { const wallet = useWallet() const owners = safe?.owners! - console.log(allOwnedSafes) - useEffect(() => { let isOwnerArr: any[] = [] if (owners && wallet?.address) { @@ -64,6 +63,7 @@ const Home: NextPage = () => { ) : (
You are not an owner on this safe.
)} + ) From 32076778b64faba3d803770a23a6ff1b13178e34 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Thu, 16 Mar 2023 11:22:11 -0400 Subject: [PATCH 44/45] folder system with delete, and add --- src/components/chat/folder.tsx | 40 ++++++++++++++++++++++++++++++++-- src/components/chat/groups.tsx | 16 ++++++++------ src/components/chat/index.tsx | 4 ++-- 3 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/components/chat/folder.tsx b/src/components/chat/folder.tsx index ab1303262aa..077085eba46 100644 --- a/src/components/chat/folder.tsx +++ b/src/components/chat/folder.tsx @@ -7,10 +7,17 @@ import css from './styles.module.css' //@ts-ignore const Folder = ({group}): ReactElement => { - const [safeAddress, setSafeAddress] = useState(''); const [safes, setSafes] = useState(['']); + window.addEventListener('storage', () => { + const items = JSON.parse(localStorage.getItem(group)!); + // const myArray = items.split(","); + if (items) { + setSafes(items); + } + }) + useEffect(() => { const activeGroups = async () =>{ const items = JSON.parse(localStorage.getItem(group)!); @@ -24,7 +31,7 @@ const Folder = ({group}): ReactElement => { return () => { window.removeEventListener('storage', activeGroups) } - }, []); + }, [localStorage.getItem(group)]); const addSafeToFolder = async () => { const safes = JSON.parse(localStorage.getItem(group)!); @@ -33,15 +40,34 @@ const Folder = ({group}): ReactElement => { } else { localStorage.setItem(group, JSON.stringify([safeAddress])); } + window.dispatchEvent(new Event("storage")); + } + + const deleteSafeFromFolder = async () => { + const safes = JSON.parse(localStorage.getItem(group)!); + const updated = safes.filter((address: string) => address !== safeAddress) + if (updated) { + localStorage.setItem(group, JSON.stringify(updated)); + } else { + localStorage.setItem(group, JSON.stringify([safeAddress])); + } + window.dispatchEvent(new Event("storage")); } const handleSetSafeAddress = (address: string) => { setSafeAddress(address) } + const deleteFolder = async () => { + console.log(group) + localStorage.removeItem(group); + window.dispatchEvent(new Event("storage")); + } + return (

{group}

+
handleSetSafeAddress(e.target.value)} placeholder={'Safe address'}/> @@ -55,6 +81,16 @@ const Folder = ({group}): ReactElement => { > Add +
<> diff --git a/src/components/chat/groups.tsx b/src/components/chat/groups.tsx index 349b734055b..c8da7521918 100644 --- a/src/components/chat/groups.tsx +++ b/src/components/chat/groups.tsx @@ -1,23 +1,24 @@ import { useEffect, useState, type ReactElement } from 'react' -import { useRouter } from 'next/router' import Track from '@/components/common/Track' -import SafeListItem from '../sidebar/SafeListItem' import Button from '@mui/material/Button' import SvgIcon from '@mui/material/SvgIcon' import Folder from './folder' import AddIcon from '@/public/images/common/add.svg' import css from './styles.module.css' -import useOwnedSafes from '@/hooks/useOwnedSafes' -import useSafeInfo from '@/hooks/useSafeInfo' import { OVERVIEW_EVENTS } from '@/services/analytics' const GroupList = (): ReactElement => { - const router = useRouter() const [groups, setGroups] = useState([]); - const { safeAddress, safe } = useSafeInfo() - const ownedSafes = useOwnedSafes() const [folderName, setFolderName] = useState(); + window.addEventListener('storage', () => { + const items = JSON.parse(localStorage.getItem('folders')!); + // const myArray = items.split(","); + if (items) { + setGroups(items); + } + }) + useEffect(() => { const activeGroups = async () =>{ const items = JSON.parse(localStorage.getItem('folders')!); @@ -36,6 +37,7 @@ const GroupList = (): ReactElement => { const createFolder = async () => { const folders = JSON.parse(localStorage.getItem('folders')!); localStorage.setItem('folders', JSON.stringify(folders ? [...folders, `${folderName!},`] : [folderName!])); + window.dispatchEvent(new Event("storage")); } const nameFolder = (name: string) => { diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index b30192ee731..050dc6c1558 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -17,7 +17,7 @@ import useSafeInfo from '@/hooks/useSafeInfo' //@ts-ignore const Chat = ({ user }) => { - const { safe, safeAddress } = useSafeInfo() + const { safeAddress } = useSafeInfo() const [message, setMessage] = useState('') const [messages, setMessages] = useState([]) const [chatData, setChatData] = useState([]) @@ -154,7 +154,7 @@ const Chat = ({ user }) => { setGroup(gp) resolve(gp) }) - .catch((error) => reject(new Error(error))) + .catch((error) => console.log(error)) }), { pending: 'Creating...', From 17d0a6f6b2078e086efd84fd0c49b3c05894fb40 Mon Sep 17 00:00:00 2001 From: sky cherfa Date: Thu, 16 Mar 2023 13:32:13 -0400 Subject: [PATCH 45/45] s --- src/components/chat/folder.tsx | 4 ++-- src/components/chat/groups.tsx | 8 -------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/chat/folder.tsx b/src/components/chat/folder.tsx index 077085eba46..01474939f7c 100644 --- a/src/components/chat/folder.tsx +++ b/src/components/chat/folder.tsx @@ -10,7 +10,7 @@ const Folder = ({group}): ReactElement => { const [safeAddress, setSafeAddress] = useState(''); const [safes, setSafes] = useState(['']); - window.addEventListener('storage', () => { + window?.addEventListener('storage', () => { const items = JSON.parse(localStorage.getItem(group)!); // const myArray = items.split(","); if (items) { @@ -60,7 +60,7 @@ const Folder = ({group}): ReactElement => { const deleteFolder = async () => { console.log(group) - localStorage.removeItem(group); + await localStorage.removeItem(group); window.dispatchEvent(new Event("storage")); } diff --git a/src/components/chat/groups.tsx b/src/components/chat/groups.tsx index c8da7521918..0438c7a8ee1 100644 --- a/src/components/chat/groups.tsx +++ b/src/components/chat/groups.tsx @@ -11,14 +11,6 @@ const GroupList = (): ReactElement => { const [groups, setGroups] = useState([]); const [folderName, setFolderName] = useState(); - window.addEventListener('storage', () => { - const items = JSON.parse(localStorage.getItem('folders')!); - // const myArray = items.split(","); - if (items) { - setGroups(items); - } - }) - useEffect(() => { const activeGroups = async () =>{ const items = JSON.parse(localStorage.getItem('folders')!);