feat: implemented cookies policy as modal

src/components/cookie-banner.tsx

@@ -7,13 +7,15 @@ import {
 import { Trans, useTranslation } from 'react-i18next';
 import { useAcceptedCookies } from 'src/hooks/useAcceptedCookies';
 import { useCookieBanner } from 'src/hooks/useCookieBanner';
+import { useModal } from './modal';
 
 const isCookieAccepted = (cookies: CookieInput[], id: string) => {
     return cookies.some(cookie => cookie.id === id && cookie.value);
 };
 
 export const CookieBanner = () => {
     const { t } = useTranslation();
+    const { showModal } = useModal();
     const [showBanner, setShowBanner] = useCookieBanner();
     const [, setAcceptedCookies] = useAcceptedCookies();
 
@@ -68,10 +70,10 @@ export const CookieBanner = () => {
                             components={{
                                 a: (
                                     <a
-                                        href="https://expenses.makerdao.network/cookies-policy"
-                                        target="_blank"
-                                        rel="noreferrer"
-                                        className="text-gray-900 hover:underline"
+                                        onClick={() =>
+                                            showModal('cookiesPolicy', {})
+                                        }
+                                        className="cursor-pointer text-gray-900 hover:underline"
                                     />
                                 ),
                             }}

src/components/modal/modals/CookiesPolicyModal.tsx

@@ -0,0 +1,36 @@
+import { ReadRequiredModal } from '@powerhousedao/design-system';
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+export interface DisclaimerModalProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+export const CookiesPolicyModal: React.FC<DisclaimerModalProps> = props => {
+    const { open, onClose } = props;
+
+    const { t } = useTranslation();
+
+    return (
+        <ReadRequiredModal
+            open={open}
+            header={t('modals.cookiesPolicy.title')}
+            body={
+                <Trans
+                    i18nKey="modals.cookiesPolicy.body"
+                    components={{
+                        subtitle: <h2 className="mb-4 text-lg font-bold" />,
+                        p: <p className="mb-2" />,
+                        list: <ul className="mb-4 list-disc pl-6" />,
+                        bullet: <li />,
+                    }}
+                />
+            }
+            bodyProps={{ className: 'text-left' }}
+            closeLabel="Close"
+            onContinue={() => onClose()}
+            overlayProps={{ style: { zIndex: 10000 } }}
+        />
+    );
+};

src/components/modal/modals/index.ts

@@ -1,6 +1,7 @@
 import { AddLocalDriveModal } from './AddLocalDriveModal';
 import { AddRemoteDriveModal } from './AddRemoteDriveModal';
 import { ConfirmationModal } from './ConfirmationModal';
+import { CookiesPolicyModal } from './CookiesPolicyModal';
 import { CreateDocumentModal } from './CreateDocumentModal';
 import { DebugSettingsModal } from './DebugSettingsModal';
 import { DeleteDriveModal } from './DeleteDriveModal';
@@ -22,6 +23,7 @@ export const modals = {
     deleteDriveModal: DeleteDriveModal,
     debugSettingsModal: DebugSettingsModal,
     disclaimerModal: DisclaimerModal,
+    cookiesPolicy: CookiesPolicyModal,
 } as const;
 
 export type Modals = typeof modals;

src/i18n/locales/en.json

@@ -80,6 +80,10 @@
         "disclaimer": {
             "title": "Disclaimer",
             "body": "All content provided herein our website, hyperlinked sites, associated applications, forums, blogs, social media accounts and other platforms (“Site”) is for your general information only, procured from third party sources. We make no warranties of any kind in relation to our content, including but not limited to accuracy and updatedness. No part of the content that we provide constitutes financial advice, legal advice or any other form of advice meant for your specific reliance for any purpose. Any use or reliance on our content is solely at your own risk and discretion. You should conduct your own research, review, analyse and verify our content before relying on them. Trading is a highly risky activity that can lead to major losses, please therefore consult your financial advisor before making any decision. No content on our Site is meant to be a solicitation or offer."
+        },
+        "cookiesPolicy": {
+            "title": "Cookies Policy",
+            "body": "<subtitle>Use of Cookies and Similar Technologies</subtitle><p>The Site is using cookies. Cookies are small text files that are placed on your computer by websites that you visit. They are widely used in order to make websites work, or work more efficiently, as well as to provide information to the owners of the site. Cookies are typically stored on your computer´s hard drive.Information collected from cookies is used by us to evaluate the effectiveness of our Site and analyze trends. The information collected from cookies allows us to determine such things as which parts of the Site are most visited and difficulties our visitors may experience in accessing the SIte. With this knowledge, we can improve the quality of your experience on the Site by recognizing and delivering more of the most desired features and information, as well as by resolving access difficulties.</p><p>We use third party service providers, to assist us in better understanding the use of our Site. Our service providers will place cookies on the hard drive of your computer (or use similar technologies) and will receive information that we select that will educate us on such things as how visitors navigate around our Site. This information is aggregated to provide statistical data about our users browsing actions and patterns, and does not personally identify individuals. This information may include:</p><p>Computer or mobile device information, Website usage information, such as:<list></p><bullet>Page views,</bullet><bullet>Button clicks,</bullet><bullet>Input form changes (without the values being entered),</bullet><bullet>Errors.</bullet></list><p>Our service providers analyses this information and provides us with aggregate reports. The information and analysis provided by our service providers will be used to assist us in better understanding our visitors interests in our Site and how to better serve those interests. If you want to avoid using cookies altogether, you can disable cookies in your browser. However, disabling cookies might make it impossible for you to use certain features of the Site. Your use of the Site with a browser that is configure to accept cookies constitutes an acceptance of our and third-party cookies.</p>"
         }
     },
     "notifications": {