feature: Terms and Privacy modals

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.37",
+  "version": "0.2.38",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/components/Header/Header.tsx

@@ -2,11 +2,10 @@ import { shouldDisplayTestingMsg } from "@/config";
 
 import { ConnectSmall } from "../Connect/ConnectSmall";
 import { ConnectedSmall } from "../Connect/ConnectedSmall";
+import { Logo } from "../Logo/Logo";
 import { TestingInfo } from "../TestingInfo/TestingInfo";
 import { ThemeToggle } from "../ThemeToggle/ThemeToggle";
 
-import { Logo } from "./Logo";
-
 interface HeaderProps {
   onConnect: () => void;
   address: string;

src/app/components/Logo/Icon.tsx

@@ -0,0 +1,36 @@
+import { useTheme } from "next-themes";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+import darkIcon from "@/app/assets/icon-black.svg";
+import lightIcon from "@/app/assets/icon-white.svg";
+
+interface IconProps {}
+
+export const Icon: React.FC<IconProps> = () => {
+  const [mounted, setMounted] = useState(false);
+  const { resolvedTheme } = useTheme();
+  const lightSelected = resolvedTheme === "light";
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // uses placeholder of babylon logo with primary color
+  // since before theme is resolved, we don't know which logo to show
+  if (!mounted) {
+    return <span className="h-[24px] w-[24px]" />;
+  }
+
+  return (
+    <span className="inline-block mx-2">
+      <Image
+        src={lightSelected ? darkIcon : lightIcon}
+        alt="Babylon"
+        width={24}
+        height={24}
+      />
+    </span>
+  );
+};

src/app/components/Header/Logo.tsx → src/app/components/Logo/Logo.tsx

@@ -17,7 +17,7 @@ export const Logo: React.FC<LogoProps> = () => {
     setMounted(true);
   }, []);
 
-  // uses skeleton of babylon logo with primary color
+  // uses placeholder of babylon logo with primary color
   // since before theme is resolved, we don't know which logo to show
   if (!mounted) {
     return <div className="h-[40px] w-[159px]" />;

src/app/components/Modals/ConnectModal.tsx

@@ -6,6 +6,7 @@ import { IoMdClose } from "react-icons/io";
 import { PiWalletBold } from "react-icons/pi";
 import { Tooltip } from "react-tooltip";
 
+import { usePrivacy } from "@/app/context/Privacy/PrivacyContext";
 import { useTerms } from "@/app/context/Terms/TermsContext";
 import { getNetworkConfig } from "@/config/network.config";
 import { BROWSER_INJECTED_WALLET_NAME, walletList } from "@/utils/wallet/list";
@@ -42,6 +43,7 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
   const BROWSER = "btcwallet";
 
   const { openTerms } = useTerms();
+  const { openPrivacy } = usePrivacy();
 
   useEffect(() => {
     const fetchWalletProviderDetails = async () => {
@@ -156,10 +158,17 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
               I certify that I have read and accept the updated{" "}
               <button
                 onClick={openTerms}
-                className="transition-colors hover:text-primary cursor-pointer btn btn-link no-underline text-base-content px-0 h-auto min-h-0"
+                className="cursor-pointer btn btn-link px-0 h-auto min-h-0"
               >
                 Terms of Use
               </button>
+              {" and "}
+              <button
+                onClick={openPrivacy}
+                className="cursor-pointer btn btn-link px-0 h-auto min-h-0"
+              >
+                Privacy Policy
+              </button>
               .
             </span>
           </label>

src/app/components/Modals/Privacy/PrivacyModal.tsx

@@ -0,0 +1,30 @@
+import { IoMdClose } from "react-icons/io";
+
+import { GeneralModal } from "../GeneralModal";
+
+import { Privacy } from "./data/privacy";
+
+interface PrivacyModalProps {
+  open: boolean;
+  onClose: (value: boolean) => void;
+}
+
+export const PrivacyModal: React.FC<PrivacyModalProps> = ({
+  open,
+  onClose,
+}) => {
+  return (
+    <GeneralModal open={open} onClose={onClose}>
+      <div className="mb-4 flex items-center justify-between">
+        <h4 className="font-bold">Privacy Policy</h4>
+        <button
+          className="btn btn-circle btn-ghost btn-sm"
+          onClick={() => onClose(false)}
+        >
+          <IoMdClose size={24} />
+        </button>
+      </div>
+      <Privacy />
+    </GeneralModal>
+  );
+};