From 0f547304d432ead7571853dd20f9067d4ff2e79c Mon Sep 17 00:00:00 2001 From: Rohit Malhotra Date: Mon, 7 Oct 2024 15:44:15 +0530 Subject: [PATCH] Main Release 1.5.0 (#1403) * fix: fixed font sizes and dark theme (#1376) * fix: fixed font sizes and dark theme * fix: fixed line height * Add erc1155 to token gating group conditions (#1382) * feat: add erc1155 to token gating group conditions * fix: add tokenId to fetchContractInfo function * lock file updated --------- Co-authored-by: rohitmalhotra1420 * Replaced useResolveWeb3Name hook with resolveWeb3Name helper function (#1390) * fix: added common resolveweb3 for domain name * fix: fixed review comments * Notification Ui change (#1396) * feat: new notification ui * fix: fixed review comments * lock file changed * fix: fixed color and cta hover * fix: fixed the review comments * fix: fixed link icon --------- Co-authored-by: rohitmalhotra1420 --------- Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Co-authored-by: Kalash Shah <81062983+kalashshah@users.noreply.github.com> --- .../MinimisedModalHeader.tsx | 112 +- .../modal/sidebar/chatSidebar/ChatSnap.tsx | 126 +- .../src/lib/components/notification/index.tsx | 410 ++- .../components/notification/theme/index.ts | 81 +- packages/uiweb/src/lib/hooks/index.ts | 5 +- packages/uiweb/src/lib/hooks/useDomainName.ts | 20 + .../uiweb/src/lib/hooks/useResolveWeb3Name.ts | 39 - packages/uiweb/src/lib/icons/Link.tsx | 18 +- packages/uiweb/src/lib/utilities/time.ts | 59 +- packages/uiweb/yarn.lock | 659 +++-- yarn.lock | 2496 +++++++++-------- 11 files changed, 1993 insertions(+), 2032 deletions(-) create mode 100644 packages/uiweb/src/lib/hooks/useDomainName.ts delete mode 100644 packages/uiweb/src/lib/hooks/useResolveWeb3Name.ts diff --git a/packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx b/packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx index abb71f61c..627a4b56b 100644 --- a/packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx +++ b/packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx @@ -13,14 +13,13 @@ import { } from '../../context'; import type { PushSubTabs, PushTabs } from '../../types'; import { PUSH_SUB_TABS, PUSH_TABS } from '../../types'; -import { useResolveWeb3Name } from '../../hooks'; import { pCAIP10ToWallet, shortenText } from '../../helpers'; -import { ethers } from 'ethers'; import { PushSubTabTitle } from '../../config'; import { Tooltip } from '../reusables'; import type { ChatAndNotificationMainContextType } from '../../context/chatAndNotification/chatAndNotificationMainContext'; import type { ChatMainStateContextType } from '../../context/chatAndNotification/chat/chatMainStateContext'; import { ChatSnap } from './modal/sidebar/chatSidebar/ChatSnap'; +import { useDomianName } from '../../hooks'; type MinimisedModalHeaderPropType = { onMaximizeMinimizeToggle: () => void; @@ -52,39 +51,22 @@ export const UnreadChats = ({ export const MessageBoxHeader = () => { const { activeTab, setActiveTab, setActiveSubTab, activeSubTab } = - useContext( - ChatAndNotificationMainContext - ); - const { - selectedChatId, - chatsFeed, - requestsFeed, - web3NameList, - searchedChats, - setSearchedChats, - setSelectedChatId, - } = useContext(ChatMainStateContext); + useContext(ChatAndNotificationMainContext); + const { selectedChatId, chatsFeed, requestsFeed, searchedChats, setSearchedChats, setSelectedChatId } = + useContext(ChatMainStateContext); const { env } = useContext(ChatAndNotificationPropsContext); const { spamNotifsFeed } = useContext(NotificationMainStateContext); const selectedChat = chatsFeed[selectedChatId as string] || requestsFeed[selectedChatId as string] || - (Object.keys(searchedChats || {}).length - ? searchedChats![selectedChatId as string] - : null); - useResolveWeb3Name(selectedChat?.did, env); - const walletLowercase = pCAIP10ToWallet(selectedChat?.did)?.toLowerCase(); - const checksumWallet = walletLowercase - ? ethers.utils.getAddress(walletLowercase) - : null; - const web3Name = checksumWallet ? web3NameList[checksumWallet.toLowerCase()] : null; + (Object.keys(searchedChats || {}).length ? searchedChats![selectedChatId as string] : null); + const web3Name = useDomianName(selectedChat?.did, env); + const handleBack = () => { if ( activeSubTab && - ((activeSubTab === PUSH_SUB_TABS.REQUESTS && - Object.keys(requestsFeed || {}).length) || - (activeSubTab === PUSH_SUB_TABS.SPAM && - Object.keys(spamNotifsFeed || {}).length)) + ((activeSubTab === PUSH_SUB_TABS.REQUESTS && Object.keys(requestsFeed || {}).length) || + (activeSubTab === PUSH_SUB_TABS.SPAM && Object.keys(spamNotifsFeed || {}).length)) ) { setActiveSubTab(PUSH_SUB_TABS[activeSubTab as PushSubTabs]); } else { @@ -96,8 +78,11 @@ export const MessageBoxHeader = () => { setSearchedChats(null); } }; + return selectedChat ? ( -
{ content={pCAIP10ToWallet(selectedChat?.did)} direction="bottom-right" > - + {' '} {selectedChat?.name ? shortenText(selectedChat?.name, 30) @@ -134,16 +123,14 @@ export const MessageBoxHeader = () => { export const SubTabHeader = () => { const { activeTab, setActiveTab, activeSubTab } = - useContext( - ChatAndNotificationMainContext - ); - const { setSearchedChats, setSelectedChatId } = - useContext(ChatMainStateContext); - const { setSearchedNotifications } = useContext( - NotificationMainStateContext - ); + useContext(ChatAndNotificationMainContext); + const { setSearchedChats, setSelectedChatId } = useContext(ChatMainStateContext); + const { setSearchedNotifications } = useContext(NotificationMainStateContext); return ( -
+
{
- + {PushSubTabTitle[activeSubTab as PushSubTabs].title}
@@ -174,26 +164,16 @@ export const MinimisedModalHeader: React.FC = ({ modalOpen, }) => { const { newChat, setNewChat, setActiveTab, activeSubTab } = - useContext( - ChatAndNotificationMainContext - ); + useContext(ChatAndNotificationMainContext); - const { - selectedChatId, - chatsFeed, - requestsFeed, - setSearchedChats, - setSelectedChatId, - searchedChats, - } = useContext(ChatMainStateContext); + const { selectedChatId, chatsFeed, requestsFeed, setSearchedChats, setSelectedChatId, searchedChats } = + useContext(ChatMainStateContext); const SnapMessageHeader = () => { const selectedChat = - chatsFeed[selectedChatId as string] || - requestsFeed[selectedChatId as string] || - (Object.keys(searchedChats || {}).length - ? searchedChats![selectedChatId as string] - : null); + chatsFeed[selectedChatId as string] || + requestsFeed[selectedChatId as string] || + (Object.keys(searchedChats || {}).length ? searchedChats![selectedChatId as string] : null); return ( = ({ ); }; - const condition = - (selectedChatId && modalOpen) || - (!selectedChatId && modalOpen && activeSubTab); - const snapCondition = - (selectedChatId && !modalOpen); + const condition = (selectedChatId && modalOpen) || (!selectedChatId && modalOpen && activeSubTab); + const snapCondition = selectedChatId && !modalOpen; return ( = ({ padding={`${snapCondition ? '12px' : '0'} 0 `} borderWidth={`0 0 ${condition ? '1px' : '0'} 0 `} borderStyle={`none none ${condition ? 'dashed' : 'none'} none `} - borderColor={`transparent transparent ${condition ? '#ededee' : 'transparent' - } transparent`} + borderColor={`transparent transparent ${condition ? '#ededee' : 'transparent'} transparent`} > {selectedChatId && !!( @@ -229,13 +205,12 @@ export const MinimisedModalHeader: React.FC = ({ {selectedChatId && !modalOpen && } {!selectedChatId && modalOpen && activeSubTab && } - {((!selectedChatId && modalOpen && !activeSubTab) || - (!modalOpen && !selectedChatId)) && ( + {((!selectedChatId && modalOpen && !activeSubTab) || (!modalOpen && !selectedChatId)) && (
{ setActiveTab(PUSH_TABS.CHATS); @@ -251,8 +226,7 @@ export const MinimisedModalHeader: React.FC = ({
)}
- {((!selectedChatId && modalOpen && !activeSubTab && !newChat) || - (!modalOpen && !selectedChatId)) && ( + {((!selectedChatId && modalOpen && !activeSubTab && !newChat) || (!modalOpen && !selectedChatId)) && (
= ({ cursor="pointer" // alignSelf={selectedChatId && !modalOpen ? 'center' : 'baseline'} margin="0 0 10px 0" - alignSelf='center' + alignSelf="center" onClick={onMaximizeMinimizeToggle} > {modalOpen ? : } @@ -286,5 +260,3 @@ export const MinimisedModalHeader: React.FC = ({ const Container = styled(Section)` box-sizing: border-box; `; - - diff --git a/packages/uiweb/src/lib/components/chatAndNotification/modal/sidebar/chatSidebar/ChatSnap.tsx b/packages/uiweb/src/lib/components/chatAndNotification/modal/sidebar/chatSidebar/ChatSnap.tsx index a5b285906..9b7a115bd 100644 --- a/packages/uiweb/src/lib/components/chatAndNotification/modal/sidebar/chatSidebar/ChatSnap.tsx +++ b/packages/uiweb/src/lib/components/chatAndNotification/modal/sidebar/chatSidebar/ChatSnap.tsx @@ -1,24 +1,13 @@ import type { IFeeds } from '@pushprotocol/restapi'; -import { - ChatMainStateContext, - ChatAndNotificationPropsContext, -} from '../../../../../context'; -import { - checkIfUnread, - dateToFromNowDaily, - setData, - shortenText, -} from '../../../../../helpers'; +import { ChatMainStateContext, ChatAndNotificationPropsContext } from '../../../../../context'; +import { checkIfUnread, dateToFromNowDaily, setData, shortenText } from '../../../../../helpers'; import React, { useContext } from 'react'; import styled, { css } from 'styled-components'; import { Section, Span, Image } from '../../../../reusables/sharedStyling'; import { UnreadChats } from '../../../MinimisedModalHeader'; -import { pCAIP10ToWallet } from '../../../../../helpers'; -import { ethers } from 'ethers'; -import { useResolveWeb3Name } from '../../../../../hooks'; import { device } from '../../../../../config'; import type { ChatMainStateContextType } from '../../../../../context/chatAndNotification/chat/chatMainStateContext'; -import { useDeviceWidthCheck } from '../../../../../hooks'; +import { useDeviceWidthCheck, useDomianName } from '../../../../../hooks'; type ChatSnapPropType = { chat: IFeeds; @@ -27,13 +16,7 @@ type ChatSnapPropType = { }; //fix messageType type -const Message = ({ - messageContent, - messageType, -}: { - messageContent: string; - messageType: string; -}) => { +const Message = ({ messageContent, messageType }: { messageContent: string; messageType: string }) => { const isMobile = useDeviceWidthCheck(425); const digitsToDisplay = isMobile ? 27 : 48; return messageType === 'Text' ? ( @@ -54,7 +37,11 @@ const Message = ({ color="#62626A" cursor="pointer" > - Image + {' '} + Image ) : messageType === 'File' ? ( - File + {' '} + File ) : messageType === 'GIF' || messageType === 'MediaEmbed' ? ( - Media + {' '} + Media ) : null; }; -export const ChatSnap: React.FC = ({ - chat, - id, - modalOpen, -}) => { - const { setSelectedChatId, web3NameList } = - useContext(ChatMainStateContext); +export const ChatSnap: React.FC = ({ chat, id, modalOpen }) => { + const { setSelectedChatId } = useContext(ChatMainStateContext); const { env } = useContext(ChatAndNotificationPropsContext); - + const web3Name = useDomianName(chat?.did, env); const isMobile = useDeviceWidthCheck(425); const digitsToDisplay = chat?.name ? (isMobile ? 15 : 30) : isMobile ? 6 : 8; - useResolveWeb3Name(chat?.did, env); - //shift to helper - const walletLowercase = pCAIP10ToWallet(chat?.did)?.toLowerCase(); - const checksumWallet = walletLowercase - ? ethers.utils.getAddress(walletLowercase) - : null; - const web3Name = checksumWallet - ? web3NameList[checksumWallet.toLowerCase()] - : null; const handleOnClick = () => { setSelectedChatId(id); setData({ chatId: id, value: chat }); }; const open = modalOpen === undefined ? true : modalOpen; + return ( = ({ borderRadius="100%" cursor="pointer" /> -
+
- + {chat?.name ? shortenText(chat?.name, digitsToDisplay, false) - : web3Name ?? - shortenText(chat?.did?.split(':')[1], digitsToDisplay, true)} + : web3Name ?? shortenText(chat?.did?.split(':')[1], digitsToDisplay, true)} - {open && - {chat?.msg?.timestamp - ? dateToFromNowDaily(chat?.msg?.timestamp as number) - : ''} - } + {open && ( + + {chat?.msg?.timestamp ? dateToFromNowDaily(chat?.msg?.timestamp as number) : ''} + + )}
- -
- +
+ - {open && checkIfUnread(id, chat) && ( - - )} -
- + {open && checkIfUnread(id, chat) && ( + + )} +
); diff --git a/packages/uiweb/src/lib/components/notification/index.tsx b/packages/uiweb/src/lib/components/notification/index.tsx index 02a010ef0..a8751c65e 100644 --- a/packages/uiweb/src/lib/components/notification/index.tsx +++ b/packages/uiweb/src/lib/components/notification/index.tsx @@ -3,19 +3,19 @@ import * as React from 'react'; import styled, { css } from 'styled-components'; import { MediaHelper, convertTimeStamp, extractTimeStamp } from '../../utilities'; -import IPFSIcon from '../ipfsicon'; import Loader from '../loader/loader'; import ImageOverlayComponent from '../overlay'; import { ParseMarkdownText } from '../parsetext'; import chainDetails from './chainDetails'; import { DecryptButton, useDecrypt } from './decrypt'; -import ActionButton from './styled/ActionButton'; import { useDivOffsetWidth } from '../../hooks'; import { LinkIcon } from '../../icons/Link'; import type { INotificationItemTheme } from './theme'; import { getCustomTheme } from './theme'; +import { Button } from '../reusables'; +import { CloseIcon } from '../../icons/Close'; export { baseTheme as notificationBaseTheme, darkTheme as notificationDarkTheme, @@ -54,10 +54,12 @@ export type NotificationItemProps = { notificationBody: string | undefined; cta: string | undefined; app: string | undefined; + isToast?: boolean; icon: string | undefined; image: string | undefined; url: string | undefined; isSpam?: boolean; + onClose?: () => void; subscribeFn?: () => Promise; isSubscribedFn?: () => Promise; theme?: string | undefined; @@ -79,6 +81,10 @@ type OffsetWidthType = { offsetWidth: number; }; +type FontSizeType = { + fontSize: string; +}; + type CustomThemeProps = { themeObject: INotificationItemTheme; }; @@ -100,6 +106,7 @@ export const NotificationItem: React.FC = ({ app, icon, image, + isToast = false, url, isSpam, //for rendering the spam conterpart of the notification component isSubscribedFn, //A function for getting if a user is subscribed to the channel in question @@ -109,6 +116,7 @@ export const NotificationItem: React.FC = ({ customTheme, isSecret, decryptFn, + onClose, }) => { const { notificationBody: parsedBody, timeStamp } = extractTimeStamp(notificationBody || ''); const themeObject = getCustomTheme(theme, customTheme!); @@ -118,7 +126,7 @@ export const NotificationItem: React.FC = ({ isSecret ); - const isCtaURLValid = MediaHelper.validURL(notifCta); + const isCtaURLValid = MediaHelper.validURL(notifCta) && !isToast; const isChannelURLValid = MediaHelper.validURL(url); // store the image to be displayed in this state variable @@ -127,12 +135,6 @@ export const NotificationItem: React.FC = ({ const [isSubscribed, setIsSubscribed] = React.useState(true); //use this to confirm if this is s const [divRef, offsetWidth] = useDivOffsetWidth(); - const showMetaInfo = isSecret || timeStamp; - // console.log({ - // chainName, - // rightIcon, - // ai: ChainImages['CHAIN_ICONS'] - // }) const gotToCTA = (e: React.SyntheticEvent) => { e.stopPropagation(); if (!isCtaURLValid) return; @@ -192,9 +194,9 @@ export const NotificationItem: React.FC = ({ timestamp={timeStamp} offsetWidth={offsetWidth} ref={divRef} + cta={isCtaURLValid} themeObject={themeObject!} > - {/* header that only pops up on small devices */} = ({ alt="" /> - {app} + + {app} + + + {timeStamp ? {convertTimeStamp(timeStamp)} : null} - {chainName && chainDetails[chainName] ? ( - - {chainDetails[chainName].icon} - - ) : null} + + {chainName && chainDetails[chainName] ? ( + + {chainDetails[chainName].icon} + + ) : null} + {isToast && onClose && ( + + + + )} + - {/* header that only pops up on small devices */} {/* content of the component */} {/* section for media content */} {notifImage && @@ -231,6 +246,7 @@ export const NotificationItem: React.FC = ({ (!MediaHelper.isMediaSupportedVideo(notifImage) ? ( setImageOverlay(notifImage || '')} @@ -242,7 +258,10 @@ export const NotificationItem: React.FC = ({ ) : // if its a youtube url, RENDER THIS MediaHelper.isMediaYoutube(notifImage) ? ( - +