src/components/RiskNotificationModal.tsx
'use client';
import { useState, useEffect } from 'react';
import {
Modal,
ModalContent,
ModalHeader,
ModalBody,
ModalFooter,
Button,
Checkbox,
} from '@nextui-org/react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
export default function RiskNotificationModal() {
const [isOpen, setIsOpen] = useState(false);
const [isChecked, setIsChecked] = useState(false);
const pathname = usePathname();
useEffect(() => {
const hasReadRisks = localStorage.getItem('hasReadRisks');
if (hasReadRisks !== 'true' && pathname !== '/info/risks') {
setIsOpen(true);
}
}, [pathname]);
const handleConfirm = () => {
if (isChecked) {
localStorage.setItem('hasReadRisks', 'true');
setIsOpen(false);
}
};
if (pathname === '/info/risks' || pathname === '/' || pathname === '/info') {
return null;
}
return (
<Modal isOpen={isOpen} onClose={() => {}} hideCloseButton size="3xl">
<ModalContent className="p-8 font-zen">
<ModalHeader className="flex flex-col gap-1 text-2xl">Welcome to Monarch</ModalHeader>
<ModalBody>
<p className="mb-4">
Monarch enables direct lending to the Morpho Blue protocol. Before proceeding, it's
important to understand the key aspects of this approach. For a comprehensive overview,
please visit our{' '}
<Link href="/info" target="_blank" className="text-monarch-primary underline">
introduction page
</Link>
.
</p>
<p className="mb-2">
Direct lending through Monarch requires more proactive management compared to using
vaults. You'll need to regularly rebalance your positions between markets to:
</p>
<ul className="mb-4 list-disc pl-6">
<li>Maintain sufficient liquidity for when you need to withdraw funds</li>
<li>Adjust your risk exposure in response to changing market conditions</li>
</ul>
<p className="mb-4">
While this approach offers more control, it also requires a deeper understanding of
market dynamics. For a detailed explanation of the risks and considerations, please read
our{' '}
<Link href="/info/risks" target="_blank" className="text-monarch-primary underline">
risk assessment page
</Link>
.
</p>
<Checkbox
isSelected={isChecked}
onValueChange={setIsChecked}
className="gap-2 text-sm text-secondary"
>
I understand that direct lending through Monarch requires active management and have
read about the associated risks.
</Checkbox>
</ModalBody>
<ModalFooter>
<Button
className="bg-monarch-orange text-white"
onPress={handleConfirm}
isDisabled={!isChecked}
>
Confirm and Proceed
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}