blocksense-network · kalinsky-dev · Jul 31, 2025 · Jul 31, 2025 · Jul 31, 2025 · Jul 31, 2025
diff --git a/apps/nft.blocksense.network/app/layout.tsx b/apps/nft.blocksense.network/app/layout.tsx
@@ -4,8 +4,10 @@ import { ThirdwebProvider } from 'thirdweb/react';
 
 import { Navbar } from '../components/Navbar';
 import { ConsentManager } from '../components/ConsentManager';
+import { PrivacyPreferencesModal } from '../components/PrivacyPreferencesModal';
 import { Footer } from '../components/Footer';
 import { geist, geistMono } from '../src/geist';
+import { ConsentProvider } from '../components/ConsentProvider';
 import './globals.css';
 
 export const metadata: Metadata = {
@@ -84,12 +86,16 @@ const RootLayout = ({ children }: { children: ReactNode }) => {
       suppressHydrationWarning
     >
       <body className="nft-drop-layout__body">
-        <ThirdwebProvider>
-          <Navbar />
-          <main className="nft-drop-layout__main pt-[3.85rem]">{children}</main>
-          <Footer />
-          <ConsentManager />
-        </ThirdwebProvider>
+        <ConsentProvider>
+          <ThirdwebProvider>
+            <Navbar />
+            <main className="nft-drop-layout__main pt-[3.85rem]">
+              {children}
+            </main>
+            <Footer />
+            {/* <ConsentManager /> */}
+          </ThirdwebProvider>
+        </ConsentProvider>
       </body>
     </html>
   );

diff --git a/apps/nft.blocksense.network/components/ConsentManager.tsx b/apps/nft.blocksense.network/components/ConsentManager.tsx
@@ -38,6 +38,13 @@ export const ConsentManager = () => {
           </p>
         </section>
         <section className="flex md:gap-2.5 gap-2">
+          <button
+            // onClick={handleAccept}
+            onClick={handleAccept}
+            className="bg-[var(--white)] text-[#2B2929] px-6 py-3.5 rounded-full"
+          >
+            Manage Preferences
+          </button>
           <button
             onClick={handleAccept}
             className="bg-[var(--white)] text-[#2B2929] px-6 py-3.5 rounded-full"

diff --git a/apps/nft.blocksense.network/components/ConsentProvider.tsx b/apps/nft.blocksense.network/components/ConsentProvider.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ConsentProvider as Provider } from '../hooks/use-consent';
+import CookieConsentBanner from './CookieConsentBanner';
+import { PrivacyPreferencesModal } from './PrivacyPreferencesModal';
+
+interface ConsentProviderProps {
+  children: ReactNode;
+}
+
+export const ConsentProvider = ({ children }: ConsentProviderProps) => {
+  return (
+    <Provider>
+      {children}
+      <CookieConsentBanner />
+      <PrivacyPreferencesModal />
+    </Provider>
+  );
+};
diff --git a/apps/nft.blocksense.network/components/CookieConsentBanner.tsx b/apps/nft.blocksense.network/components/CookieConsentBanner.tsx
@@ -0,0 +1,69 @@
+'use client';
+import { useConsent } from '../hooks/use-consent';
+import { Button } from '../radixUiComponents/button';
+import { Cookie, ExternalLink } from 'lucide-react';
+
+export default function CookieConsentBanner() {
+  const { bannerVisible, acceptAll, rejectAll, showPreferencesModal } =
+    useConsent();
+
+  if (!bannerVisible) return null;
+
+  return (
+    <div
+      className="fixed bottom-0 left-0 right-0 bg-white dark:bg-background border-t border-border shadow-lg z-50 transition-transform duration-300"
+      role="dialog"
+      aria-labelledby="cookie-banner-title"
+      aria-describedby="cookie-banner-description"
+    >
+      <div className="max-w-7xl mx-auto p-4 sm:p-6">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div className="flex-1">
+            <h3
+              id="cookie-banner-title"
+              className="text-lg font-semibold text-foreground mb-2 flex items-center"
+            >
+              <Cookie className="mr-2 h-5 w-5 text-warning" />
+              Cookie Consent
+            </h3>
+            <p
+              id="cookie-banner-description"
+              className="text-sm text-muted-foreground"
+            >
+              We use cookies to analyze site usage and improve your experience.
+              You can manage your preferences or accept all cookies.
+              <a
+                href="/privacy-policy"
+                className="text-primary hover:text-primary/80 underline ml-1 inline-flex items-center"
+              >
+                Learn more
+                <ExternalLink className="ml-1 h-3 w-3" />
+              </a>
+            </p>
+          </div>
+          <div className="flex flex-col sm:flex-row gap-3 sm:ml-6">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={showPreferencesModal}
+              className="text-sm"
+            >
+              Manage Preferences
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={rejectAll}
+              className="text-sm"
+            >
+              Reject All
+            </Button>
+            <Button size="sm" onClick={acceptAll} className="text-sm">
+              Accept All
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/nft.blocksense.network/components/PrivacyPreferencesModal.tsx b/apps/nft.blocksense.network/components/PrivacyPreferencesModal.tsx
@@ -0,0 +1,181 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { useConsent } from '../hooks/use-consent';
+import { Button } from '../radixUiComponents/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '../radixUiComponents/dialog';
+import { Switch } from '../radixUiComponents/switch';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../radixUiComponents/card';
+import { Settings, Shield, BarChart3, Megaphone, Info } from 'lucide-react';
+
+export const PrivacyPreferencesModal = () => {
+  const {
+    preferencesModalVisible,
+    hidePreferencesModal,
+    preferences,
+    savePreferences,
+  } = useConsent();
+
+  const [analytics, setAnalytics] = useState(preferences.analytics);
+  const [marketing, setMarketing] = useState(preferences.marketing);
+
+  useEffect(() => {
+    setAnalytics(preferences.analytics);
+    setMarketing(preferences.marketing);
+  }, [preferences]);
+
+  const handleSave = () => {
+    savePreferences({ analytics, marketing });
+  };
+
+  const handleCancel = () => {
+    setAnalytics(preferences.analytics);
+    setMarketing(preferences.marketing);
+    hidePreferencesModal();
+  };
+
+  return (
+    <Dialog open={preferencesModalVisible} onOpenChange={hidePreferencesModal}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center text-xl">
+            <Settings className="mr-2 h-5 w-5 text-primary" />
+            Privacy Preferences
+          </DialogTitle>
+          <DialogDescription>
+            Manage your cookie preferences and control how we collect and use
+            your data.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 mt-6">
+          {/* Essential Cookies */}
+          <Card className="bg-muted/30">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center text-md">
+                <Shield className="mr-2 h-4 w-4 text-success" />
+                Essential Cookies
+              </CardTitle>
+              <CardDescription>
+                Required for basic site functionality. Cannot be disabled.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">
+                  Always active
+                </span>
+                <Switch checked={true} disabled className="opacity-50" />
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Analytics Cookies */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center text-md">
+                <BarChart3 className="mr-2 h-4 w-4 text-primary" />
+                Analytics Cookies
+              </CardTitle>
+              <CardDescription>
+                Help us understand how visitors interact with our website.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">
+                    Enable analytics tracking
+                  </span>
+                  <Switch checked={analytics} onCheckedChange={setAnalytics} />
+                </div>
+                <div className="text-xs text-muted-foreground bg-muted/50 p-3 rounded">
+                  <div>
+                    <strong>Data collected:</strong> Page views, user
+                    interactions, performance metrics
+                  </div>
+                  <div>
+                    <strong>Third parties:</strong> Google Analytics 4
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Marketing Cookies */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center text-md">
+                <Megaphone className="mr-2 h-4 w-4 text-warning" />
+                Marketing Cookies
+              </CardTitle>
+              <CardDescription>
+                Used to deliver targeted advertisements and measure campaign
+                effectiveness.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">
+                    Enable marketing tracking
+                  </span>
+                  <Switch checked={marketing} onCheckedChange={setMarketing} />
+                </div>
+                <div className="text-xs text-muted-foreground bg-muted/50 p-3 rounded">
+                  <div>
+                    <strong>Data collected:</strong> Ad interactions, conversion
+                    tracking, audience insights
+                  </div>
+                  <div>
+                    <strong>Third parties:</strong> Google Ads, Facebook Pixel
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Privacy Rights Information */}
+          <Card className="border-primary/20 bg-primary/5">
+            <CardContent className="pt-6">
+              <div className="flex">
+                <Info className="h-4 w-4 text-primary mt-0.5 mr-3 flex-shrink-0" />
+                <div>
+                  <h4 className="text-sm font-medium text-primary mb-2">
+                    Your Privacy Rights
+                  </h4>
+                  <ul className="text-sm text-primary/80 space-y-1">
+                    <li>• You can change these preferences at any time</li>
+                    <li>• Withdrawing consent may limit some features</li>
+                    <li>• We comply with GDPR and other privacy regulations</li>
+                  </ul>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Modal Footer */}
+        <div className="flex flex-col sm:flex-row gap-3 pt-6 border-t">
+          <Button onClick={handleSave} className="flex-1">
+            Save Preferences
+          </Button>
+          <Button variant="outline" onClick={handleCancel} className="flex-1">
+            Cancel
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};