MP-2046: Created CookieConsent component (#84)

src/components/CookieConsent.tsx

@@ -0,0 +1,60 @@
+import classNames from 'classnames'
+import { useEffect, useState } from 'react'
+
+import { DocURL } from 'types/enums/docURL'
+
+import { Button } from './Button'
+
+export const CookieConsent = () => {
+  const [cookieConsent, setCookieConsent] = useState<boolean>(true)
+
+  const createCookie = () => {
+    setCookieConsent(true)
+    document.cookie = 'viewed_cookie_policy=yes; path=/'
+  }
+
+  useEffect(() => {
+    setCookieConsent(!!document.cookie.match(new RegExp('(^| )viewed_cookie_policy=([^;]+)')))
+  }, [])
+
+  return cookieConsent ? null : (
+    <section
+      className={classNames(
+        'fixed bottom-0 left-0 z-50 flex w-full  bg-black/90 p-4',
+        'md:bg-black/70',
+      )}
+    >
+      <div
+        className={classNames(
+          'mx-auto my-0  flex max-w-screen-xl flex-wrap items-center justify-center gap-4',
+          'md:flex-nowrap',
+        )}
+      >
+        <p className='basis-full text-sm'>
+          This website uses cookies to improve its functionality and optimize content delivery. By
+          using this website, you agree to the use of cookies for these purposes. Learn more,
+          including how to modify your cookie settings, in Marsprotocol.io&apos;s{' '}
+          <a
+            href={DocURL.PRIVACY_POLICY_URL}
+            target='_blank'
+            rel='nofollow noreferrer'
+            title='Privacy Policy'
+          >
+            privacy
+          </a>{' '}
+          and{' '}
+          <a
+            href={DocURL.COOKIE_POLICY_URL}
+            target='_blank'
+            rel='nofollow noreferrer'
+            title='Cookie Policy'
+          >
+            cookie
+          </a>{' '}
+          policies.
+        </p>
+        <Button onClick={createCookie} text='Understood' />
+      </div>
+    </section>
+  )
+}

src/components/Gauge.tsx

@@ -24,7 +24,7 @@ export const Gauge = ({
 
   const percentage = value * 100
   const percentageValue = percentage > 100 ? 100 : percentage < 0 ? 0 : percentage
-  const semiCirclePercentage = Math.abs(percentageValue / 2 - 50)
+  const semiCirclePercentage = percentageValue == -50 ? 0 : Math.abs(percentageValue / 2 - 50)
 
   return (
     <Tooltip content={tooltip}>

src/components/Layout.tsx

@@ -7,6 +7,8 @@ import { DesktopNavigation } from 'components/Navigation'
 import { useCreditAccounts } from 'hooks/queries'
 import { useSettingsStore, useWalletStore } from 'stores'
 
+import { CookieConsent } from './CookieConsent'
+
 const filter = {
   day: 'brightness-100 hue-rotate-0',
   night: '-hue-rotate-82 brightness-30',
@@ -41,6 +43,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
         <div className='flex flex-grow flex-wrap p-6'>{children}</div>
         {hasCreditAccounts && <AccountDetails />}
       </main>
+      <CookieConsent />
     </div>
   )
 }

src/components/index.ts

@@ -5,6 +5,7 @@ export { Button } from './Button'
 export { Card } from './Card'
 export { CircularProgress } from './CircularProgress'
 export { ContainerSecondary } from './ContainerSecondary'
+export { CookieConsent } from './CookieConsent'
 export { FormattedNumber } from './FormattedNumber'
 export { Gauge } from './Gauge'
 export { LabelValuePair } from './LabelValuePair'

src/types/enums/docURL.ts

@@ -0,0 +1,4 @@
+export enum DocURL {
+  COOKIE_POLICY_URL = 'https://docs.marsprotocol.io/mars-protocol/terms-of-service/mars-cookie-policy',
+  PRIVACY_POLICY_URL = 'https://docs.marsprotocol.io/mars-protocol/terms-of-service/mars-privacy-policy',
+}

src/utils/risk.ts

@@ -11,7 +11,7 @@ export const createRiskData = (risk: number) => {
       .format('YYYY-MM-DD')
     data.push({
       date: date,
-      risk: risk === 0 ? 0 : i === days ? risk * 100 : Math.floor(Math.random() * 100),
+      risk: i === days ? risk * 100 : Math.floor(Math.random() * 100),
     })
   }