Link to privacy policy + GDPR (#645)

Resolves #587 

What has been done:
- Added privacy policy to the DApp
- Added reusable `Popup` component (used in privacy policy and
`Assistant`)

src/shared/components/Button.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react"
+import React, { CSSProperties, ReactNode } from "react"
 import classnames from "classnames"
 
 type ButtonProps = {
@@ -21,6 +21,7 @@ type ButtonProps = {
   iconSrc?: string
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
   onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  style?: CSSProperties
 }
 
 export default function Button({
@@ -34,6 +35,7 @@ export default function Button({
   iconSrc,
   onClick,
   onMouseDown,
+  style,
 }: ButtonProps) {
   return (
     <>
@@ -54,6 +56,7 @@ export default function Button({
           disabled: isDisabled,
           inactive: isInactive,
         })}
+        style={style}
       >
         {children}
         {iconSrc && (

src/shared/components/DApps/DesktopDApp.tsx

@@ -34,6 +34,7 @@ import LiquidityPool from "ui/LiquidityPool"
 import Footer from "ui/Footer"
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { usePostHog } from "posthog-js/react"
+import PrivacyPolicy from "../PrivacyPolicy"
 
 function TrackEvents({ children }: { children: ReactNode[] }) {
   const location = useLocation()
@@ -65,30 +66,33 @@ export default function DesktopDApp() {
 
   return (
     <Router>
-      {(!walletOnboarded || !isConnected) && <Onboarding />}
-      {walletOnboarded && isConnected && (
-        <TrackEvents>
-          <FullPageLoader
-            loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
-          />
-          <IslandComponent />
-          <TestingPanel />
-          {islandMode === "default" && <Nav />}
-          <Switch>
-            <Route path={ROUTES.CLAIM.HOME}>
-              <Claim />
-            </Route>
-            <Route path={ROUTES.REFERRALS}>
-              <Referrals />
-            </Route>
-            {/* TODO should be removed or defined later */}
-            <Route path={ROUTES.LP}>
-              <LiquidityPool />
-            </Route>
-          </Switch>
-          <Footer />
-        </TrackEvents>
-      )}
+      <TrackEvents>
+        {(!walletOnboarded || !isConnected) && <Onboarding />}
+        {walletOnboarded && isConnected && (
+          <>
+            <FullPageLoader
+              loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
+            />
+            <IslandComponent />
+            <TestingPanel />
+            {islandMode === "default" && <Nav />}
+            <Switch>
+              <Route path={ROUTES.CLAIM.HOME}>
+                <Claim />
+              </Route>
+              <Route path={ROUTES.REFERRALS}>
+                <Referrals />
+              </Route>
+              {/* TODO should be removed or defined later */}
+              <Route path={ROUTES.LP}>
+                <LiquidityPool />
+              </Route>
+            </Switch>
+            <Footer />
+          </>
+        )}
+        <PrivacyPolicy />
+      </TrackEvents>
     </Router>
   )
 }

src/shared/components/Popup.tsx

@@ -0,0 +1,88 @@
+import React, { ReactNode } from "react"
+import { animated } from "@react-spring/web"
+import { useVisibilityTransition } from "shared/hooks"
+import Icon from "shared/components/Icon"
+import closeIcon from "shared/assets/icons/s/close.svg"
+
+export type PopupProps = {
+  children: ReactNode
+  isVisible: boolean
+  close: () => void
+  leftPosition?: string | number
+  bottomPosition: string | number
+  rightPosition?: string | number
+  width: string | number
+  hasPointer?: boolean
+  style?: React.CSSProperties
+}
+
+type XAxisPsition = {
+  left?: string | number
+  right?: string | number
+}
+
+export default function Popup({
+  children,
+  isVisible,
+  close,
+  bottomPosition,
+  leftPosition,
+  rightPosition,
+  width,
+  hasPointer = true,
+  style,
+}: PopupProps) {
+  const transition = useVisibilityTransition(isVisible)
+  const xPosition: XAxisPsition = {}
+
+  if (leftPosition !== null) xPosition.left = leftPosition
+  if (rightPosition !== null) xPosition.right = rightPosition
+
+  return (
+    <>
+      <animated.div
+        style={{
+          position: "absolute",
+          bottom: bottomPosition,
+          background: "#043937",
+          borderRadius: 16,
+          padding: "24px 32px 32px",
+          width,
+          pointerEvents: isVisible ? "all" : "none",
+          ...transition,
+          ...xPosition,
+          ...style,
+        }}
+      >
+        <button
+          type="button"
+          className="close_button button_reset"
+          onClick={close}
+        >
+          <Icon src={closeIcon} width="16px" height="16px" />
+        </button>
+        <div className="content">{children}</div>
+      </animated.div>
+      <style jsx>{`
+        .close_button {
+          position: absolute;
+          top: 14px;
+          right: 16px;
+          padding: 0;
+        }
+        .content::after {
+          display: ${hasPointer ? "block" : "none"};
+          content: "";
+          background: #043937;
+          height: 12px;
+          width: 12px;
+          position: absolute;
+          bottom: -4px;
+          right: 26px;
+          border-radius: 2px;
+          rotate: 45deg;
+        }
+      `}</style>
+    </>
+  )
+}

src/shared/components/PrivacyPolicy.tsx

@@ -0,0 +1,73 @@
+import React from "react"
+import Popup from "shared/components/Popup"
+import cookiesIcon from "shared/assets/icons/cookies.svg"
+import newTabIcon from "shared/assets/icons/s/new-tab.svg"
+import { LINKS, LOCAL_STORAGE_COOKIES } from "shared/constants"
+import { useLocalStorageChange } from "shared/hooks"
+import Icon from "./Icon"
+import Button from "./Button"
+
+export default function PrivacyPolicy() {
+  const { value, updateStorage } = useLocalStorageChange<boolean>(
+    LOCAL_STORAGE_COOKIES
+  )
+
+  const closePopup = () => updateStorage(true)
+
+  return (
+    <>
+      <Popup
+        isVisible={value === null}
+        close={closePopup}
+        bottomPosition={16}
+        leftPosition={19}
+        width={419}
+        hasPointer={false}
+        style={{ zIndex: "var(--z-assistant-icon)" }}
+      >
+        <div className="header row_center">
+          <Icon src={cookiesIcon} type="image" height="29px" width="29px" />
+          <span>We respect your privacy</span>
+        </div>
+        <p className="content">
+          Continuing to use the website means you are accepting our cookie
+          policy.
+        </p>
+        <div className="row_center" style={{ gap: 38 }}>
+          <Button type="secondary" onClick={closePopup}>
+            OK
+          </Button>
+          <a
+            href={LINKS.PRIVACY_POLICY}
+            title="Privacy policy"
+            className="privacy_link row_center"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <span>Privacy policy</span>
+            <Icon src={newTabIcon} type="image" height="16px" width="16px" />
+          </a>
+        </div>
+      </Popup>
+      <style jsx>{`
+        .header {
+          margin-bottom: 16px;
+          gap: 8px;
+        }
+        .header span {
+          font-size: 20px;
+          color: var(--secondary-s1-90);
+        }
+        .content {
+          color: var(--secondary-s1-70);
+          margin-bottom: 16px;
+        }
+        .privacy_link {
+          font-weight: 600;
+          gap: 8px;
+          color: var(--primary-p2-100);
+        }
+      `}</style>
+    </>
+  )
+}

src/shared/constants/external-links.ts

@@ -8,4 +8,5 @@ export default {
   BRAVE_SUPPORT:
     "https://support.brave.com/hc/en-us/articles/360023646212-How-do-I-configure-global-and-site-specific-Shields-settings-",
   FEEDBACK: "https://tahowallet.typeform.com/subscapebeta",
+  PRIVACY_POLICY: "https://taho.xyz/privacy",
 }

src/shared/constants/local-storage.ts

@@ -2,3 +2,4 @@ export const LOCAL_STORAGE_ASSISTANT = "taho.assistant"
 export const LOCAL_STORAGE_WALLET = "onboarded_wallet"
 export const LOCAL_STORAGE_VISITED_REALM = "taho.visitedRealm"
 export const LOCAL_STORAGE_BRAVE = "taho.brave"
+export const LOCAL_STORAGE_COOKIES = "taho.cookies"

src/ui/Assistant/AssistantContent/AssistantWelcome.tsx

@@ -11,7 +11,7 @@ export default function AssistantWelcome() {
     <>
       <AssistantContent
         isVisible={assistantVisible("welcome")}
-        style={{width: 620}}
+        style={{ width: 620 }}
         close={() => updateAssistant({ visible: false, type: "default" })}
       >
         <div className="header">Welcome to Subscape, Nomad</div>
@@ -23,9 +23,7 @@ export default function AssistantWelcome() {
         <div className="hint row_center">
           <Icon src={realmPointer} type="image" height="37px" width="30px" />
           <p>
-            <strong>
-              Start exploring by hovering over our 5 Beta Realms
-            </strong>
+            <strong>Start exploring by hovering over our 5 Beta Realms</strong>
           </p>
         </div>
       </AssistantContent>

src/ui/Assistant/AssistantContent/index.tsx

@@ -1,67 +1,29 @@
-import React, { ReactNode } from "react"
-import { animated } from "@react-spring/web"
-import { useVisibilityTransition } from "shared/hooks"
-import Icon from "shared/components/Icon"
-import closeIcon from "shared/assets/icons/s/close.svg"
+import React, { CSSProperties, ReactNode } from "react"
+import Popup from "shared/components/Popup"
 
-export type AssistantContentProps = {
+type AssistantContentProps = {
+  children: ReactNode
   isVisible: boolean
   close: () => void
-  style?: React.CSSProperties
+  style?: CSSProperties
 }
 
 export default function AssistantContent({
   children,
   isVisible,
   close,
   style,
-}: AssistantContentProps & { children: ReactNode }) {
-  const transition = useVisibilityTransition(isVisible)
-
+}: AssistantContentProps) {
   return (
-    <>
-      <animated.div
-        style={{
-          ...transition,
-          position: "absolute",
-          bottom: "calc(100% + 16px)",
-          right: 0,
-          background: "#043937",
-          borderRadius: 16,
-          padding: "24px 32px 32px",
-          width: 375,
-          pointerEvents: isVisible ? "all" : "none",
-          ...style,
-        }}
-      >
-        <button
-          type="button"
-          className="close_button button_reset"
-          onClick={close}
-        >
-          <Icon src={closeIcon} width="16px" height="16px" />
-        </button>
-        <div className="content">{children}</div>
-      </animated.div>
-      <style jsx>{`
-        .close_button {
-          position: absolute;
-          top: 14px;
-          right: 16px;
-          padding: 0;
-        }
-        .content::after {
-          content: "";
-          background: #043937;
-          height: 12px;
-          width: 12px;
-          position: absolute;
-          bottom: -4px;
-          right: 26px;
-          border-radius: 2px;
-          rotate: 45deg;
-        }
-      `}</style>
-    </>
+    <Popup
+      isVisible={isVisible}
+      close={close}
+      style={style}
+      bottomPosition="calc(100% + 16px)"
+      rightPosition={0}
+      width={375}
+    >
+      {children}
+    </Popup>
   )
 }