Skip to content

Commit

Permalink
Replaced useResolveWeb3Name hook with resolveWeb3Name helper function (…
Browse files Browse the repository at this point in the history 
…#1390)

* fix: added common resolveweb3 for domain name

* fix: fixed review comments
  • Loading branch information
@mishramonalisha76
mishramonalisha76 authored Sep 9, 2024
1 parent cf8e91e commit 64976c6
Show file tree
Hide file tree
Showing 6 changed files with 17,126 additions and 23,185 deletions.
112 changes: 42 additions & 70 deletions packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx
View file
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

0 comments on commit 64976c6

Please sign in to comment.