feat(evm-bridge): add cookies disclaimer (#9040)

Closes #9021

Depends on
[#9041](#9041), as
it includes updates to the docs and the
@boxfish-studio/react-cookie-manager package version required for
manypkg consistency

Author: panteleymonchuk

apps/evm-bridge/package.json

@@ -25,6 +25,7 @@
     },
     "dependencies": {
         "@amplitude/analytics-browser": "^1.10.3",
+        "@boxfish-studio/react-cookie-manager": "^1.0.5",
         "@growthbook/growthbook": "^1.0.0",
         "@growthbook/growthbook-react": "^1.0.0",
         "@hookform/resolvers": "^3.9.0",

apps/evm-bridge/src/App.tsx

@@ -6,6 +6,7 @@ import { DirectionalArrowsSvg } from './components/svgs/DirectionalArrows';
 import { FaucetButton } from './components/FaucetButton';
 import { useEffect } from 'react';
 import { initAmplitude } from './shared/analytics';
+import { CookiePolicy } from './components/disclaimer/CookiePolicy';
 
 const TITLE = 'Seamlessly transfer funds between IOTA & IOTA EVM';
 
@@ -14,29 +15,36 @@ export default function App() {
         initAmplitude();
     }, []);
 
+    const isCookiePolicyPage =
+        typeof window !== 'undefined' && window.location.pathname === '/cookie-policy';
+
     return (
         <>
             <div className="relative overflow-x-hidden" id="app">
                 <Header />
 
                 <main className="flex flex-col min-h-screen container justify-center pt-24 flex-1">
-                    <div className="flex flex-col items-center md:flex-row gap-lg h-full py-20">
-                        <div className="flex-1 pb-2xl flex flex-col items-center md:items-start justify-center">
-                            <div className="flex flex-col max-md:items-center max-md:text-center md:flex-col gap-10 pb-[72px] ">
-                                <DirectionalArrowsSvg />
-                                <h1 className="text-display-md text-balance text-iota-neutral-10 dark:text-iota-neutral-92 max-w-lg">
-                                    {TITLE}
-                                </h1>
-                            </div>
-                            <div>
-                                <FaucetButton />
+                    {isCookiePolicyPage ? (
+                        <CookiePolicy />
+                    ) : (
+                        <div className="flex flex-col items-center md:flex-row gap-lg h-full py-20">
+                            <div className="flex-1 pb-2xl flex flex-col items-center md:items-start justify-center">
+                                <div className="flex flex-col max-md:items-center max-md:text-center md:flex-col gap-10 pb-[72px] ">
+                                    <DirectionalArrowsSvg />
+                                    <h1 className="text-display-md text-balance text-iota-neutral-10 dark:text-iota-neutral-92 max-w-lg">
+                                        {TITLE}
+                                    </h1>
+                                </div>
+                                <div>
+                                    <FaucetButton />
+                                </div>
                             </div>
-                        </div>
 
-                        <div className="w-full max-w-[500px] md:w-2/5">
-                            <Bridge />
+                            <div className="w-full max-w-[500px] md:w-2/5">
+                                <Bridge />
+                            </div>
                         </div>
-                    </div>
+                    )}
                 </main>
             </div>
 

apps/evm-bridge/src/components/disclaimer/CookieDisclaimer.css

@@ -0,0 +1,81 @@
+#skcm-cookie-disclaimer#skcm-cookie-disclaimer {
+    @apply dark:bg-iota-neutral-0;
+    @apply bg-iota-neutral-100;
+    @apply max-w-none w-full;
+    @apply flex flex-col;
+    @apply py-6 px-8;
+    @apply max-md:space-y-4;
+    @apply bottom-0 right-0;
+    @apply rounded-none;
+    @apply shadow-2xl;
+    @apply max-md:px-0;
+    @apply md:flex-row md:space-x-4 md:py-4 md:px-6 md:bottom-6 md:right-6 md:rounded-md md:max-w-lg;
+    border: 1px solid transparent;
+
+    #skcm-policy-link__button {
+        @apply text-iota-primary-40;
+    }
+
+    #skcm-cookie-disclaimer__body {
+        @apply max-md:container;
+        @apply flex flex-col;
+        @apply items-center justify-center md:items-start;
+
+        #skcm-body {
+            @apply m-0;
+            @apply dark:text-iota-neutral-92;
+            @apply text-iota-neutral-10;
+
+            a {
+                @apply text-iota-primary-40;
+            }
+        }
+    }
+
+    #skcm-cookie-disclaimer__buttons {
+        @apply max-md:container;
+        @apply flex flex-col;
+        @apply space-y-0;
+
+        button {
+            @apply rounded-full;
+            @apply bg-iota-primary-30;
+            @apply text-iota-neutral-92;
+            @apply py-3 px-[20px];
+            @apply text-label-lg normal-case;
+            @apply transition-colors;
+            @apply w-full;
+            @apply min-w-[120px];
+        }
+    }
+}
+
+.cookie-policy-page {
+    #skcm-cookie-library {
+        h4,
+        p,
+        td,
+        label {
+            @apply text-iota-neutral-10;
+        }
+    }
+    #skcm-cookie-library__preferences__button {
+        @apply bg-iota-primary-30;
+    }
+}
+
+.dark-theme.dark {
+    .cookie-policy-page {
+        #skcm-cookie-library {
+            h4,
+            p,
+            td,
+            label {
+                @apply text-iota-neutral-92;
+            }
+        }
+        #skcm-cookie-library__preferences__button {
+            @apply bg-iota-primary-30;
+        }
+    }
+}

apps/evm-bridge/src/components/disclaimer/CookieDisclaimer.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { CookieManager, type SKCMConfiguration } from '@boxfish-studio/react-cookie-manager';
+import { useCookiesManager } from './useCookiesManager';
+
+const COOKIES_KEY = 'AMP_COOKIES_ACCEPTED';
+
+export function CookieDisclaimer() {
+    const { onAcceptCookies, onDeclineCookies } = useCookiesManager();
+    const configuration: SKCMConfiguration = {
+        disclaimer: {
+            title: undefined,
+            body: 'We use cookies and analytics tools to help us improve your experience. ',
+            policyText: 'Read our Cookie Policy',
+            policyUrl: '/cookie-policy',
+        },
+        services: {
+            customNecessaryCookies: [
+                {
+                    name: COOKIES_KEY,
+                    purpose:
+                        'Flag indicating that Amplitude analytics cookies may be created after consent',
+                    expiry: '1 year',
+                    type: 'http',
+                    showDisclaimerIfMissing: true,
+                },
+            ],
+        },
+        onAcceptCookies,
+        onDeclineCookies,
+    };
+    return (
+        <>
+            <CookieManager configuration={configuration} />
+        </>
+    );
+}

apps/evm-bridge/src/components/disclaimer/CookiePolicy.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { CookieLibrary } from '@boxfish-studio/react-cookie-manager';
+import { useCookiesManager } from './useCookiesManager';
+
+export function CookiePolicy(): React.JSX.Element {
+    const { onAcceptCookies, onDeclineCookies } = useCookiesManager();
+    return (
+        <section className="py-16 max-w-3xl mx-auto cookie-policy-page">
+            <CookieLibrary
+                configuration={{
+                    onAcceptCookies,
+                    onDeclineCookies,
+                }}
+            />
+        </section>
+    );
+}

apps/evm-bridge/src/components/disclaimer/useCookiesManager.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export function useCookiesManager() {
+    const onAcceptCookies = () => {
+        document.cookie = `AMP_COOKIES_ACCEPTED=true; max-age=31536000`;
+    };
+    const onDeclineCookies = () => {
+        document.cookie = `AMP_COOKIES_ACCEPTED=false; max-age=31536000`;
+    };
+    return { onAcceptCookies, onDeclineCookies };
+}

apps/evm-bridge/src/globals.css

@@ -1,4 +1,5 @@
 @import '@iota/apps-ui-kit/styles';
+@import './components/disclaimer/CookieDisclaimer.css';
 
 @tailwind base;
 @tailwind components;

apps/evm-bridge/src/main.tsx

@@ -4,6 +4,7 @@ import './globals.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { CookieManagerProvider } from '@boxfish-studio/react-cookie-manager';
 import {
     getDefaultConfig,
     darkTheme as rainbowDarkTheme,
@@ -13,6 +14,7 @@ import {
 } from '@rainbow-me/rainbowkit';
 import { darkTheme, IotaClientProvider, lightTheme, WalletProvider } from '@iota/dapp-kit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { CookieDisclaimer } from './components/disclaimer/CookieDisclaimer';
 import App from './App.tsx';
 import { ThemeProvider } from './providers/ThemeProvider.tsx';
 import { WagmiProvider } from 'wagmi';
@@ -77,8 +79,11 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
                                 >
                                     <ThemeProvider appId="IOTA-evm-bridge">
                                         <RainbowKit>
-                                            <App />
-                                            <Toaster />
+                                            <CookieManagerProvider>
+                                                <App />
+                                                <Toaster />
+                                                <CookieDisclaimer />
+                                            </CookieManagerProvider>
                                         </RainbowKit>
                                     </ThemeProvider>
                                 </WalletProvider>