Merge pull request #536 from ergolabs/feature/cookie-policy

add cookie policy notification

src/App.tsx

@@ -25,6 +25,7 @@ import { RemoveLiquidity } from './pages/Pool/RemoveLiquidity/RemoveLiquidity';
 import { WithdrawalLiquidity } from './pages/Pool/WithdrawalLiquidity/WithdrawalLiquidity';
 import { PoolOverview } from './pages/PoolOverview/PoolOverview';
 import { Swap } from './pages/Swap/Swap';
+import { openCookiePolicy } from './services/notifications/CookiePolicy/CookiePolicy';
 import {
   NOTIFICATION_KEY,
   openCardanoFaucetNotification,
@@ -119,6 +120,10 @@ export const ApplicationInitializer: React.FC = () => {
     }
   }, [selectedNetwork]);
 
+  useEffect(() => {
+    openCookiePolicy();
+  }, []);
+
   useEffect(() => {
     if (networksInitialized) {
       initializeApp();

src/services/notifications/CookiePolicy/CookiePolicy.less

@@ -0,0 +1,37 @@
+@keyframes cookie-policy-out-bottom {
+  80% {
+    transform: translate(-50%, -5%);
+  }
+
+  to {
+    transform: translate(-50%, 110%);
+  }
+}
+
+.ant-notification-notice.cookie-policy {
+  position:   fixed;
+  bottom:     8px;
+  left:       50%;
+  width:      calc(100% - 48px);
+  max-width:  996px;
+  min-height:     80px;
+  padding:    1rem;
+  border:     1px solid var(--ergo-box-border-color);
+  background: var(--ergo-box-bg);
+  box-shadow: none;
+  transform:  translateX(-50%);
+
+  &.ant-notification-fade-leave {
+    animation-duration: .3s !important;
+    animation-name:     cookie-policy-out-bottom !important;
+  }
+
+  .ant-notification-notice-message {
+    padding-right: 0;
+    margin:        0;
+  }
+
+  .ant-notification-notice-btn {
+    display: none;
+  }
+}

src/services/notifications/CookiePolicy/CookiePolicy.tsx

@@ -0,0 +1,56 @@
+import './CookiePolicy.less';
+
+import { t } from '@lingui/macro';
+import React from 'react';
+
+import { localStorageManager } from '../../../common/utils/localStorageManager';
+import { Button, Flex, notification, Typography } from '../../../ergodex-cdk';
+
+const COOKIE_POLICY_NOTIFICATION_KEY = 'cookie-policy';
+
+export const openCookiePolicy = (): void => {
+  if (localStorageManager.get(COOKIE_POLICY_NOTIFICATION_KEY)) {
+    return;
+  }
+
+  const reject = () => {
+    localStorageManager.set(COOKIE_POLICY_NOTIFICATION_KEY, 'reject');
+    notification.close(COOKIE_POLICY_NOTIFICATION_KEY);
+  };
+
+  const accept = () => {
+    localStorageManager.set(COOKIE_POLICY_NOTIFICATION_KEY, 'accept');
+    notification.close(COOKIE_POLICY_NOTIFICATION_KEY);
+  };
+
+  const message = (
+    <Flex align="center">
+      <Flex.Item flex={1} marginRight={4}>
+        <Typography.Title level={5}>
+          {t`By clicking “Accept All Cookies”, you  agree to the storing of cookies
+          on your device to enhance site navigation, analyse site usage, and
+          assist in our marketing efforts.`}
+        </Typography.Title>
+      </Flex.Item>
+      <Flex.Item marginRight={4}>
+        <Button size="large" onClick={reject}>{t`Reject`}</Button>
+      </Flex.Item>
+      <Flex.Item>
+        <Button
+          size="large"
+          type="primary"
+          onClick={accept}
+        >{t`Accept all cookies`}</Button>
+      </Flex.Item>
+    </Flex>
+  );
+
+  notification.open({
+    key: COOKIE_POLICY_NOTIFICATION_KEY,
+    message,
+    className: 'cookie-policy',
+    duration: 0,
+    btn: <></>,
+    closeIcon: <></>,
+  });
+};