diff --git a/src/components/CookieConsent.tsx b/src/components/CookieConsent.tsx new file mode 100644 index 00000000..92925af3 --- /dev/null +++ b/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(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 : ( +
+
+

+ 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's{' '} + + privacy + {' '} + and{' '} + + cookie + {' '} + policies. +

+
+
+ ) +} diff --git a/src/components/Gauge.tsx b/src/components/Gauge.tsx index 794ee7fd..1e0669b4 100644 --- a/src/components/Gauge.tsx +++ b/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 ( diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 1e823a00..5730540c 100644 --- a/src/components/Layout.tsx +++ b/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 }) => {
{children}
{hasCreditAccounts && } + ) } diff --git a/src/components/index.ts b/src/components/index.ts index ce497440..6cfdd217 100644 --- a/src/components/index.ts +++ b/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' diff --git a/src/types/enums/docURL.ts b/src/types/enums/docURL.ts new file mode 100644 index 00000000..c900a7ad --- /dev/null +++ b/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', +} diff --git a/src/utils/risk.ts b/src/utils/risk.ts index 74393827..8bae4595 100644 --- a/src/utils/risk.ts +++ b/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), }) }