diff --git a/src/shared/assets/icons/cookies.svg b/src/shared/assets/icons/cookies.svg new file mode 100644 index 000000000..c6f3e5faf --- /dev/null +++ b/src/shared/assets/icons/cookies.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/assets/icons/s/new-tab.svg b/src/shared/assets/icons/s/new-tab.svg new file mode 100644 index 000000000..0f1c69799 --- /dev/null +++ b/src/shared/assets/icons/s/new-tab.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/components/Button.tsx b/src/shared/components/Button.tsx index 579220662..5b090897c 100644 --- a/src/shared/components/Button.tsx +++ b/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) => void onMouseDown?: (event: React.MouseEvent) => 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 && ( diff --git a/src/shared/components/DApps/DesktopDApp.tsx b/src/shared/components/DApps/DesktopDApp.tsx index 581c233e0..59f619d11 100644 --- a/src/shared/components/DApps/DesktopDApp.tsx +++ b/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 ( - {(!walletOnboarded || !isConnected) && } - {walletOnboarded && isConnected && ( - - - - - {islandMode === "default" && } - - - - - - - - {/* TODO should be removed or defined later */} - - - - - - - )} + + {(!walletOnboarded || !isConnected) && } + {walletOnboarded && isConnected && ( + <> + + + + {islandMode === "default" && } + + + + + + + + {/* TODO should be removed or defined later */} + + + + + + > + )} + + ) } diff --git a/src/shared/components/Popup.tsx b/src/shared/components/Popup.tsx new file mode 100644 index 000000000..b527b3a9d --- /dev/null +++ b/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 ( + <> + + + + + {children} + + + > + ) +} diff --git a/src/shared/components/PrivacyPolicy.tsx b/src/shared/components/PrivacyPolicy.tsx new file mode 100644 index 000000000..bc926df69 --- /dev/null +++ b/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( + LOCAL_STORAGE_COOKIES + ) + + const closePopup = () => updateStorage(true) + + return ( + <> + + + + We respect your privacy + + + Continuing to use the website means you are accepting our cookie + policy. + + + + OK + + + Privacy policy + + + + + + > + ) +} diff --git a/src/shared/constants/external-links.ts b/src/shared/constants/external-links.ts index f217e1c17..86fcec8d9 100644 --- a/src/shared/constants/external-links.ts +++ b/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", } diff --git a/src/shared/constants/local-storage.ts b/src/shared/constants/local-storage.ts index 35db0a817..4f38b5705 100644 --- a/src/shared/constants/local-storage.ts +++ b/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" diff --git a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx index a0d63f1af..45b68542c 100644 --- a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx +++ b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx @@ -11,7 +11,7 @@ export default function AssistantWelcome() { <> updateAssistant({ visible: false, type: "default" })} > Welcome to Subscape, Nomad @@ -23,9 +23,7 @@ export default function AssistantWelcome() { - - Start exploring by hovering over our 5 Beta Realms - + Start exploring by hovering over our 5 Beta Realms diff --git a/src/ui/Assistant/AssistantContent/index.tsx b/src/ui/Assistant/AssistantContent/index.tsx index e749b31fe..da70315bf 100644 --- a/src/ui/Assistant/AssistantContent/index.tsx +++ b/src/ui/Assistant/AssistantContent/index.tsx @@ -1,13 +1,11 @@ -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({ @@ -15,53 +13,17 @@ export default function AssistantContent({ isVisible, close, style, -}: AssistantContentProps & { children: ReactNode }) { - const transition = useVisibilityTransition(isVisible) - +}: AssistantContentProps) { return ( - <> - - - - - {children} - - - > + + {children} + ) }
+ Continuing to use the website means you are accepting our cookie + policy. +
- - Start exploring by hovering over our 5 Beta Realms - + Start exploring by hovering over our 5 Beta Realms