Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Main Release 1.5.0 #1402

Closed
wants to merge 6 commits into from
Closed

Main Release 1.5.0 #1402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ec13651
fix: fixed font sizes and dark theme (#1376)
mishramonalisha76 Jul 9, 2024
6396697
Add erc1155 to token gating group conditions (#1382)
kalashshah Aug 7, 2024
cf8e91e
Merge branch 'main' of github.com:push-protocol/push-sdk into alpha
rohitmalhotra1420 Aug 8, 2024
64976c6
Replaced useResolveWeb3Name hook with resolveWeb3Name helper function…
mishramonalisha76 Sep 9, 2024
f972997
Notification Ui change (#1396)
mishramonalisha76 Oct 7, 2024
0ef40ee
Merge branch 'main' of github.com:push-protocol/push-sdk into alpha
rohitmalhotra1420 Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 42 additions & 70 deletions packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -52,39 +51,22 @@ export const UnreadChats = ({

export const MessageBoxHeader = () => {
const { activeTab, setActiveTab, setActiveSubTab, activeSubTab } =
useContext<ChatAndNotificationMainContextType>(
ChatAndNotificationMainContext
);
const {
selectedChatId,
chatsFeed,
requestsFeed,
web3NameList,
searchedChats,
setSearchedChats,
setSelectedChatId,
} = useContext<ChatMainStateContextType>(ChatMainStateContext);
useContext<ChatAndNotificationMainContextType>(ChatAndNotificationMainContext);
const { selectedChatId, chatsFeed, requestsFeed, searchedChats, setSearchedChats, setSelectedChatId } =
useContext<ChatMainStateContextType>(ChatMainStateContext);
const { env } = useContext<any>(ChatAndNotificationPropsContext);
const { spamNotifsFeed } = useContext<any>(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 {
Expand All @@ -96,8 +78,11 @@ export const MessageBoxHeader = () => {
setSearchedChats(null);
}
};

return selectedChat ? (
<Section gap="12px" padding='23px 2px'
<Section
gap="12px"
padding="23px 2px"
>
<Div
width="16px"
Expand All @@ -120,7 +105,11 @@ export const MessageBoxHeader = () => {
content={pCAIP10ToWallet(selectedChat?.did)}
direction="bottom-right"
>
<Span fontWeight="700" fontSize="16px" cursor="pointer">
<Span
fontWeight="700"
fontSize="16px"
cursor="pointer"
>
{' '}
{selectedChat?.name
? shortenText(selectedChat?.name, 30)
Expand All @@ -134,16 +123,14 @@ export const MessageBoxHeader = () => {

export const SubTabHeader = () => {
const { activeTab, setActiveTab, activeSubTab } =
useContext<ChatAndNotificationMainContextType>(
ChatAndNotificationMainContext
);
const { setSearchedChats, setSelectedChatId } =
useContext<ChatMainStateContextType>(ChatMainStateContext);
const { setSearchedNotifications } = useContext<any>(
NotificationMainStateContext
);
useContext<ChatAndNotificationMainContextType>(ChatAndNotificationMainContext);
const { setSearchedChats, setSelectedChatId } = useContext<ChatMainStateContextType>(ChatMainStateContext);
const { setSearchedNotifications } = useContext<any>(NotificationMainStateContext);
return (
<Section gap="12px" padding='23px 2px'>
<Section
gap="12px"
padding="23px 2px"
>
<Div
width="16px"
height="16px"
Expand All @@ -162,7 +149,10 @@ export const SubTabHeader = () => {
<BackIcon />
</Div>

<Span fontWeight="700" fontSize="16px">
<Span
fontWeight="700"
fontSize="16px"
>
{PushSubTabTitle[activeSubTab as PushSubTabs].title}
</Span>
</Section>
Expand All @@ -174,26 +164,16 @@ export const MinimisedModalHeader: React.FC<MinimisedModalHeaderPropType> = ({
modalOpen,
}) => {
const { newChat, setNewChat, setActiveTab, activeSubTab } =
useContext<ChatAndNotificationMainContextType>(
ChatAndNotificationMainContext
);
useContext<ChatAndNotificationMainContextType>(ChatAndNotificationMainContext);

const {
selectedChatId,
chatsFeed,
requestsFeed,
setSearchedChats,
setSelectedChatId,
searchedChats,
} = useContext<ChatMainStateContextType>(ChatMainStateContext);
const { selectedChatId, chatsFeed, requestsFeed, setSearchedChats, setSelectedChatId, searchedChats } =
useContext<ChatMainStateContextType>(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 (
<ChatSnap
chat={selectedChat}
Expand All @@ -203,20 +183,16 @@ export const MinimisedModalHeader: React.FC<MinimisedModalHeaderPropType> = ({
);
};

const condition =
(selectedChatId && modalOpen) ||
(!selectedChatId && modalOpen && activeSubTab);
const snapCondition =
(selectedChatId && !modalOpen);
const condition = (selectedChatId && modalOpen) || (!selectedChatId && modalOpen && activeSubTab);
const snapCondition = selectedChatId && !modalOpen;
return (
<Container
justifyContent="space-between"
alignItems="center"
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 &&
!!(
Expand All @@ -229,13 +205,12 @@ export const MinimisedModalHeader: React.FC<MinimisedModalHeaderPropType> = ({
{selectedChatId && !modalOpen && <SnapMessageHeader />}

{!selectedChatId && modalOpen && activeSubTab && <SubTabHeader />}
{((!selectedChatId && modalOpen && !activeSubTab) ||
(!modalOpen && !selectedChatId)) && (
{((!selectedChatId && modalOpen && !activeSubTab) || (!modalOpen && !selectedChatId)) && (
<Section gap="4px">
<Span
fontWeight="700"
fontSize="18px"
padding='24px 2px'
padding="24px 2px"
cursor={!modalOpen ? 'default' : 'pointer'}
onClick={() => {
setActiveTab(PUSH_TABS.CHATS);
Expand All @@ -251,8 +226,7 @@ export const MinimisedModalHeader: React.FC<MinimisedModalHeaderPropType> = ({
</Section>
)}
<Section gap="20px">
{((!selectedChatId && modalOpen && !activeSubTab && !newChat) ||
(!modalOpen && !selectedChatId)) && (
{((!selectedChatId && modalOpen && !activeSubTab && !newChat) || (!modalOpen && !selectedChatId)) && (
<Div
width="20px"
height="20px"
Expand All @@ -272,7 +246,7 @@ export const MinimisedModalHeader: React.FC<MinimisedModalHeaderPropType> = ({
cursor="pointer"
// alignSelf={selectedChatId && !modalOpen ? 'center' : 'baseline'}
margin="0 0 10px 0"
alignSelf='center'
alignSelf="center"
onClick={onMaximizeMinimizeToggle}
>
{modalOpen ? <MinimizeIcon /> : <MaximizeIcon />}
Expand All @@ -286,5 +260,3 @@ export const MinimisedModalHeader: React.FC<MinimisedModalHeaderPropType> = ({
const Container = styled(Section)`
box-sizing: border-box;
`;


Loading
Loading