Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 34x 34x 34x 34x 34x 34x 34x 1x 21x | import ConversationsButton from "features/Minibuilders/Conversations/ConversationsButton";
import ChangelogButton from "./ChangelogButton";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import { useAppDispatch, useAppSelector } from "@redux/hooks";
import {
resetConversationsState,
selectConversation,
setModalOpenConversation,
} from "@redux/slices/conversations";
import { useChangelogModal } from "./hooks/useChanglelogModal";
import { checkPortals } from "@utils/routing";
import { Stack, styled } from "@mui/material";
interface Props {
isLoadingConversation: boolean;
isLoadingChangelog?: boolean;
totalUnread: number;
shouldShowChangelog?: boolean;
}
export default function DragModalHeader({
isLoadingChangelog,
isLoadingConversation,
totalUnread,
shouldShowChangelog,
}: Props) {
const { isMobileView } = useCustomTheme();
const { isAcquirerPortal } = checkPortals();
const {
modal: { isOpen: isConverstionsModalOpen },
} = useAppSelector(selectConversation);
const { isOpen: isOpenChangelog, handleOpenChangelogModal } =
useChangelogModal();
const dispatch = useAppDispatch();
const handleOpenConversationsModal = (open?: boolean) => {
dispatch(setModalOpenConversation(!!open));
if (!open) {
dispatch(resetConversationsState());
} else {
//we use timeout to make the transition smoother
setTimeout(() => handleOpenChangelogModal(false), 300);
}
};
//TODO: add logic to hide changelog button based on permission
if (!isMobileView) return null;
return (
<Container direction="row" spacing="12px">
{isAcquirerPortal && (
<ConversationsButton
isLoading={isLoadingConversation}
isOpen={isConverstionsModalOpen}
totalUnread={totalUnread}
handleOpenConversationsModal={handleOpenConversationsModal}
isOpenChangeLog={isOpenChangelog}
/>
)}
{shouldShowChangelog && (
<ChangelogButton
isLoading={Boolean(isLoadingChangelog)}
handleOpenChangelogModal={(open) => {
handleOpenChangelogModal(open);
if (open)
//we use timeout to make the transition smoother
setTimeout(() => handleOpenConversationsModal(false), 300);
}}
isOpen={isOpenChangelog || isConverstionsModalOpen}
/>
)}
</Container>
);
}
const Container = styled(Stack)(() => ({
gap: "4px",
position: "fixed",
top: "calc(96px - 56px - 2px)",
left: "10px",
width: "200px",
}));
|