From 75a362e5948276f08a89a2f9d16d779c04b885d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Jur=C4=8Do?=
 <62913177+peterjurco@users.noreply.github.com>
Date: Mon, 2 Dec 2024 18:17:33 +0100
Subject: [PATCH 1/3] Rebrand History page (#501)

* Rebrand Proposals table

* Add testing capabilities

* Self review (fixing some colors)

* Update Tag cursor

* Rebrand History page

* Rename Tag to ProposalTag
---
 src/pages/history/history.module.scss | 63 ++++++++++++++++-----------
 src/pages/history/history.tsx         | 38 +++++++---------
 2 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/src/pages/history/history.module.scss b/src/pages/history/history.module.scss
index 36a658c9..8a31b277 100644
--- a/src/pages/history/history.module.scss
+++ b/src/pages/history/history.module.scss
@@ -1,53 +1,64 @@
 @import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
 
-.filterButton {
-  button {
-    padding: $space-sm !important;
-    text-decoration: none !important;
+h5 {
+  @include font-heading-9;
+  color: $color-dark-blue-100;
+
+  @media (min-width: $sm) {
+    @include font-heading-8;
   }
-}
 
-.active {
-  text-underline-offset: $space-xs;
-  text-decoration: underline;
+  @media (min-width: $md) {
+    @include font-heading-7;
+  }
 }
 
 .header {
-  margin-bottom: 80px;
+  margin-bottom: 32px;
 
   @media (min-width: $min-md) {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 64px;
   }
 }
 
-.treasury {
-  margin-top: -30px;
-}
-
-.borderBoxHeader {
+.proposalsHeader {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  transform: translateY(-50%);
+  flex-direction: column;
+  gap: 16px;
+
+  @media (min-width: $sm) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 
 .radioButtons {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
   flex-wrap: wrap;
-  margin-left: $space-md;
+  gap: 16px;
 
-  & > * {
-    margin-right: $space-lg;
+  svg {
+    width: 16px;
+    height: 16px;
+  }
 
-    @media (max-width: $max-md) {
-      margin-right: $space-md;
-    }
+  label {
+    @include font-body-12;
   }
 
-  & > *:last-child {
-    margin-right: 0;
+  @media (min-width: $md) {
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    label {
+      @include font-body-9;
+    }
   }
 }
diff --git a/src/pages/history/history.tsx b/src/pages/history/history.tsx
index b3868e9f..3581633a 100644
--- a/src/pages/history/history.tsx
+++ b/src/pages/history/history.tsx
@@ -5,7 +5,6 @@ import { useQueryParams } from '../../utils';
 import { ProposalType } from '../../chain-data/state';
 import { historyProposalsSelector, OptionalProposalType } from '../../logic/proposals/selectors';
 import { useChainData } from '../../chain-data';
-import BorderedBox from '../../components/bordered-box/bordered-box';
 import RadioButton from '../../components/radio-button/radio-button';
 import ProposalList from '../proposal-commons/proposal-list';
 import styles from './history.module.scss';
@@ -50,27 +49,22 @@ const History = () => {
         <Header title="History"></Header>
       </div>
 
-      <BorderedBox
-        header={
-          <div className={styles.borderBoxHeader}>
-            <h5>Past Proposals</h5>
-            <div className={styles.radioButtons}>
-              <RadioButton type="checkbox" checked={checkedPrimary} onChange={() => setCheckedPrimary(!checkedPrimary)}>
-                Primary
-              </RadioButton>
-              <RadioButton
-                type="checkbox"
-                checked={checkedSecondary}
-                onChange={() => setCheckedSecondary(!checkedSecondary)}
-              >
-                Secondary
-              </RadioButton>
-            </div>
-          </div>
-        }
-        content={<ProposalList proposals={proposalsToShow} type="past" />}
-        noMobileBorders
-      />
+      <div className={styles.proposalsHeader}>
+        <h5>Past Proposals</h5>
+        <div className={styles.radioButtons}>
+          <RadioButton type="checkbox" checked={checkedPrimary} onChange={() => setCheckedPrimary(!checkedPrimary)}>
+            Primary
+          </RadioButton>
+          <RadioButton
+            type="checkbox"
+            checked={checkedSecondary}
+            onChange={() => setCheckedSecondary(!checkedSecondary)}
+          >
+            Secondary
+          </RadioButton>
+        </div>
+      </div>
+      <ProposalList proposals={proposalsToShow} type="past" />
     </BaseLayout>
   );
 };

From 3017fe3319f8652ad93254b6a596862ced6e79f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Jur=C4=8Do?=
 <62913177+peterjurco@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:22:33 +0100
Subject: [PATCH 2/3] Rebrand Unstake banner (#507)

* Rebrand unstake banner

* Move two line design to lower breakpoint
---
 public/api-icon.svg                           |  5 --
 src/components/button/button.module.scss      |  5 ++
 src/components/button/button.tsx              |  3 +-
 .../button/variants/link-gray.module.scss     | 36 +++++++++++++
 src/components/icons/check-circle-fill.tsx    | 10 ++--
 .../unstake-banner/unstake-banner.module.scss | 50 +++++++++++--------
 .../unstake-banner/unstake-banner.tsx         | 19 ++++---
 src/utils/image-list.ts                       |  1 -
 8 files changed, 86 insertions(+), 43 deletions(-)
 delete mode 100644 public/api-icon.svg
 create mode 100644 src/components/button/variants/link-gray.module.scss

diff --git a/public/api-icon.svg b/public/api-icon.svg
deleted file mode 100644
index ffe969c9..00000000
--- a/public/api-icon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="67" height="66" viewBox="0 0 67 66" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M33.2996 50.6C42.7989 50.6 50.4996 42.8993 50.4996 33.4C50.4996 23.9007 42.7989 16.2 33.2996 16.2C23.8003 16.2 16.0996 23.9007 16.0996 33.4C16.0996 42.8993 23.8003 50.6 33.2996 50.6Z" stroke="#94DFCB" stroke-miterlimit="10"/>
-<path d="M61.3 37.8L65.4 37.2C65.6 35.9 65.6 34.6 65.6 33.4C65.6 32.4 65.5 31.4 65.5 30.4L61.3 29.7C61 27.5 60.4 25.4 59.6 23.4L63 20.7C62.1 18.6 61 16.6 59.7 14.8L55.6 16.4C54.2 14.7 52.7 13.1 51 11.8L52.7 7.5C50.9 6.2 49 5 47 4.1L44 7.7C42 6.9 39.8 6.3 37.7 6L37 1.2C35.8 1.1 34.5 1 33.3 1C32.3 1 31.3 1.1 30.4 1.1L29.6 6.1C27.4 6.4 25.3 7 23.3 7.8L20.2 3.8C18.2 4.7 16.3 5.8 14.5 7.1L16.3 11.8C14.6 13.2 13 14.7 11.7 16.4L7 14.6C5.7 16.4 4.6 18.3 3.7 20.3L7.6 23.4C6.8 25.4 6.2 27.6 5.9 29.7L1.1 30.4C1 31.4 1 32.4 1 33.3C1 34.5 1.1 35.8 1.2 37L5.9 37.7C6.2 39.9 6.8 42 7.6 44L3.9 46.9C4.9 49 6 50.9 7.4 52.7L11.6 51.1C13 52.8 14.5 54.4 16.2 55.7L14.6 59.7C16.5 61 18.4 62.1 20.5 63L23.2 59.6C25.2 60.4 27.4 61 29.5 61.3L30.1 65.4C31.1 65.5 32.1 65.5 33.2 65.5C34.5 65.5 35.7 65.4 37 65.3L37.6 61.2C39.8 60.9 41.9 60.3 43.9 59.5L46.4 62.7C48.5 61.8 50.5 60.6 52.4 59.2L51 55.6C52.7 54.2 54.3 52.7 55.6 51L59.3 52.4C60.7 50.5 61.8 48.6 62.8 46.5L59.6 44.1C60.4 42.1 61 40 61.3 37.8Z" stroke="#94DFCB"/>
-<path d="M34.9371 24.2696H31.7709L32.0327 36.0999H34.6671L34.9371 24.2696ZM33.3499 41.2051C34.3153 41.2051 35.1417 40.4034 35.1499 39.4052C35.1417 38.4235 34.3153 37.6217 33.3499 37.6217C32.3518 37.6217 31.5418 38.4235 31.55 39.4052C31.5418 40.4034 32.3518 41.2051 33.3499 41.2051Z" fill="#94DFCB"/>
-</svg>
diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss
index d9a8cd08..10b1648a 100644
--- a/src/components/button/button.module.scss
+++ b/src/components/button/button.module.scss
@@ -5,6 +5,7 @@
 @import './variants/secondary-neutral.module.scss';
 @import './variants/tertiary-color.module.scss';
 @import './variants/link-blue.module.scss';
+@import './variants/link-gray.module.scss';
 @import './variants/menu-link-secondary.module.scss';
 @import './variants/text-blue.module.scss';
 
@@ -43,6 +44,10 @@
     @include link-blue;
   }
 
+  &.link-gray {
+    @include link-gray;
+  }
+
   &.menu-link-secondary {
     @include menu-link-secondary;
   }
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 1d4d5883..6855e725 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -19,7 +19,8 @@ export interface Props extends BreakpointsProps {
     | 'text'
     | 'text-blue'
     | 'menu-link-secondary'
-    | 'link-blue';
+    | 'link-blue'
+    | 'link-gray';
   size?: Size;
   disabled?: boolean;
   href?: string;
diff --git a/src/components/button/variants/link-gray.module.scss b/src/components/button/variants/link-gray.module.scss
new file mode 100644
index 00000000..929fad52
--- /dev/null
+++ b/src/components/button/variants/link-gray.module.scss
@@ -0,0 +1,36 @@
+@import '../../../styles/fonts.module.scss';
+
+@mixin link-gray {
+  color: $color-gray-700;
+  height: 20px;
+  border: none;
+
+  &.xs {
+    @include font-overline-2;
+  }
+
+  &.sm {
+    @include font-link-3;
+  }
+
+  &.md {
+    @include font-link-2;
+  }
+
+  &.lg {
+    height: 24px;
+    @include font-link-1;
+  }
+
+  &:hover {
+    color: $color-green-800;
+  }
+
+  &:active {
+    color: $color-green-700;
+  }
+
+  &:disabled {
+    color: $color-gray-400;
+  }
+}
diff --git a/src/components/icons/check-circle-fill.tsx b/src/components/icons/check-circle-fill.tsx
index fd65eafa..2688070d 100644
--- a/src/components/icons/check-circle-fill.tsx
+++ b/src/components/icons/check-circle-fill.tsx
@@ -1,10 +1,6 @@
 import { ComponentProps } from 'react';
 
-interface Props extends ComponentProps<'svg'> {
-  theme?: 'dark' | 'light';
-}
-
-export const CheckCircleFillIcon = ({ theme = 'light', ...props }: Props) => {
+export const CheckCircleFillIcon = ({ ...props }: ComponentProps<'svg'>) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
       <mask id="path-1-inside-1_10049_29682" fill="white">
@@ -18,11 +14,11 @@ export const CheckCircleFillIcon = ({ theme = 'light', ...props }: Props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.00033 17.3327C13.6027 17.3327 17.3337 13.6017 17.3337 8.99935C17.3337 4.39698 13.6027 0.666016 9.00033 0.666016C4.39795 0.666016 0.666992 4.39698 0.666992 8.99935C0.666992 13.6017 4.39795 17.3327 9.00033 17.3327ZM13.8415 6.82514C14.2077 6.45903 14.2077 5.86544 13.8415 5.49932C13.4754 5.1332 12.8818 5.1332 12.5157 5.49932L7.50675 10.5083L5.91303 8.91457C5.54692 8.54845 4.95333 8.54845 4.58721 8.91457C4.22109 9.28068 4.22109 9.87427 4.58721 10.2404L6.84384 12.497C7.20995 12.8631 7.80355 12.8631 8.16966 12.497L13.8415 6.82514Z"
-        fill={theme === 'light' ? '#4049A8' : '#FAFAFA'}
+        fill="currentColor"
       />
       <path
         d="M13.8415 6.82514L13.2523 6.23589L13.8415 6.82514ZM7.50675 10.5083L6.91749 11.0975L7.50675 11.6868L8.09601 11.0975L7.50675 10.5083ZM5.91303 8.91457L6.50229 8.32531L6.50229 8.32531L5.91303 8.91457ZM4.58721 8.91457L3.99795 8.32531L3.99795 8.32531L4.58721 8.91457ZM4.58721 10.2404L3.99795 10.8296L4.58721 10.2404ZM6.84384 12.497L7.43309 11.9078L6.84384 12.497ZM8.16966 12.497L8.75892 13.0863L8.16966 12.497ZM16.5003 8.99935C16.5003 13.1415 13.1425 16.4993 9.00033 16.4993V18.166C14.0629 18.166 18.167 14.062 18.167 8.99935H16.5003ZM9.00033 1.49935C13.1425 1.49935 16.5003 4.85721 16.5003 8.99935H18.167C18.167 3.93674 14.0629 -0.167318 9.00033 -0.167318V1.49935ZM1.50033 8.99935C1.50033 4.85721 4.85819 1.49935 9.00033 1.49935V-0.167318C3.93772 -0.167318 -0.166341 3.93674 -0.166341 8.99935H1.50033ZM9.00033 16.4993C4.85819 16.4993 1.50033 13.1415 1.50033 8.99935H-0.166341C-0.166341 14.062 3.93772 18.166 9.00033 18.166V16.4993ZM13.2523 6.08857C13.293 6.12925 13.293 6.19521 13.2523 6.23589L14.4308 7.4144C15.1223 6.72285 15.1223 5.60162 14.4308 4.91006L13.2523 6.08857ZM13.105 6.08857C13.1456 6.04789 13.2116 6.04789 13.2523 6.08857L14.4308 4.91006C13.7392 4.21851 12.618 4.21851 11.9265 4.91006L13.105 6.08857ZM8.09601 11.0975L13.105 6.08857L11.9265 4.91006L6.91749 9.91903L8.09601 11.0975ZM5.32378 9.50382L6.91749 11.0975L8.09601 9.91903L6.50229 8.32531L5.32378 9.50382ZM5.17646 9.50382C5.21714 9.46314 5.2831 9.46314 5.32378 9.50382L6.50229 8.32531C5.81074 7.63376 4.68951 7.63376 3.99795 8.32531L5.17646 9.50382ZM5.17647 9.65114C5.13579 9.61046 5.13579 9.5445 5.17647 9.50382L3.99795 8.32531C3.3064 9.01686 3.3064 10.1381 3.99795 10.8296L5.17647 9.65114ZM7.43309 11.9078L5.17647 9.65114L3.99795 10.8296L6.25458 13.0863L7.43309 11.9078ZM7.58041 11.9078C7.53973 11.9484 7.47377 11.9484 7.43309 11.9078L6.25458 13.0863C6.94614 13.7778 8.06737 13.7778 8.75892 13.0863L7.58041 11.9078ZM13.2523 6.23589L7.58041 11.9078L8.75892 13.0863L14.4308 7.4144L13.2523 6.23589Z"
-        fill={theme === 'light' ? '#4049A8' : '#FAFAFA'}
+        fill="currentColor"
         mask="url(#path-1-inside-1_10049_29682)"
       />
     </svg>
diff --git a/src/pages/dashboard/unstake-banner/unstake-banner.module.scss b/src/pages/dashboard/unstake-banner/unstake-banner.module.scss
index 123ea9d6..6d3fd227 100644
--- a/src/pages/dashboard/unstake-banner/unstake-banner.module.scss
+++ b/src/pages/dashboard/unstake-banner/unstake-banner.module.scss
@@ -1,44 +1,52 @@
 @import '../../../styles/variables.module.scss';
+@import '../../../styles/fonts.module.scss';
 
 .unstakeBanner {
   width: 100%;
   display: flex;
+  flex-direction: column;
+  gap: 16px;
   align-items: center;
   justify-content: space-between;
-  padding: $space-lg 0;
-  border-top: 1px solid rgba(124, 227, 203, 0.4);
-  border-bottom: 1px solid rgba(124, 227, 203, 0.4);
-  margin-bottom: 2 * $space-xl;
-
-  @media (max-width: $max-md) {
-    flex-direction: column;
-
-    & > *:not(:last-child) {
-      margin-bottom: $space-lg;
-    }
+  background: linear-gradient(180deg, #fafafa 0%, #f0f4ff 100%);
+  border-top: 1px solid $color-dark-blue-10;
+  border-bottom: 1px solid $color-dark-blue-10;
+  margin: 32px 0;
+  padding: 24px 16px;
+
+  @media (min-width: $sm) {
+    margin: 40px 0 72px 0;
+    padding: 24px;
+    flex-direction: row;
   }
 }
 
 .unstakeBannerWrap {
   display: flex;
   align-items: center;
-  margin-right: $space-lg;
 
-  @media (max-width: $max-sm) {
-    margin-right: 0;
-    margin-bottom: $space-md;
+  gap: 16px;
+  @include font-body-10;
+
+  & > svg {
+    color: $color-action-success-600;
+    width: 28px;
+    height: 28px;
   }
 
-  & > img {
-    margin-right: $space-lg;
+  @media (min-width: $md) {
+    @include font-body-4;
+    gap: 24px;
+
+    & > svg {
+      width: 36px;
+      height: 36px;
+    }
   }
 }
 
 .buttonPanel {
   display: flex;
   align-items: center;
-
-  & > *:not(:last-child) {
-    margin-right: $space-xxl;
-  }
+  gap: 32px;
 }
diff --git a/src/pages/dashboard/unstake-banner/unstake-banner.tsx b/src/pages/dashboard/unstake-banner/unstake-banner.tsx
index cb4be57b..1cb8efcc 100644
--- a/src/pages/dashboard/unstake-banner/unstake-banner.tsx
+++ b/src/pages/dashboard/unstake-banner/unstake-banner.tsx
@@ -1,10 +1,9 @@
 import { useApi3Pool } from '../../../contracts';
 import { useChainData } from '../../../chain-data';
-import { images } from '../../../utils';
 import Button from '../../../components/button';
-import globalStyles from '../../../styles/global-styles.module.scss';
 import styles from './unstake-banner.module.scss';
 import { handleTransactionError } from '../../../utils';
+import { CheckCircleFillIcon } from '../../../components/icons';
 
 interface Props {
   canUnstakeAndWithdraw: boolean;
@@ -36,16 +35,20 @@ const UnstakeBanner = (props: Props) => {
   return (
     <div className={styles.unstakeBanner}>
       <div className={styles.unstakeBannerWrap}>
-        <img src={images.apiIcon} alt="API icon" />
-        <div>
-          <p className={globalStyles.bold}>Your tokens are ready to be unstaked.</p>
-        </div>
+        <CheckCircleFillIcon />
+        <div>Your tokens are ready to be unstaked.</div>
       </div>
       <div className={styles.buttonPanel}>
-        <Button type="link" onClick={handleUnstake}>
+        <Button type="link-gray" size="sm" md={{ size: 'md' }} onClick={handleUnstake}>
           Unstake
         </Button>
-        <Button onClick={handleUnstakeAndWithdraw} disabled={!canUnstakeAndWithdraw}>
+        <Button
+          type="link-blue"
+          size="sm"
+          md={{ size: 'md' }}
+          onClick={handleUnstakeAndWithdraw}
+          disabled={!canUnstakeAndWithdraw}
+        >
           Unstake and Withdraw
         </Button>
       </div>
diff --git a/src/utils/image-list.ts b/src/utils/image-list.ts
index d8b599f8..0eb9aa60 100644
--- a/src/utils/image-list.ts
+++ b/src/utils/image-list.ts
@@ -2,7 +2,6 @@
 export const images = {
   api3DaoLogoDarkTheme: '/api3-dao-logo-dark-theme.svg',
   api3DaoLogoLightTheme: '/api3-dao-logo-light-theme.svg',
-  apiIcon: '/api-icon.svg',
   arrowDropdown: '/arrow-dropdown.svg',
   arrowLeft: '/arrow-left.svg',
   arrowRight: '/arrow-right.svg',

From 887c6bfd448dab1db8ca1dc3d7287dad857a2d7c Mon Sep 17 00:00:00 2001
From: Bogdan Iasinovschi <biasinovschi@gmail.com>
Date: Wed, 4 Dec 2024 10:07:06 +0200
Subject: [PATCH 3/3] Add cookie consent logic (#508)

* Add Checkbox component

* Update Notice banner and align logic with Market

* Add Privacy Settings modal

* Fix Cypress tests

* Initialize analytics and sentry

* Add additional check for sentry init

* Prevent default on external link click

* Revert "Prevent default on external link click"

This reverts commit 7c2f4a6b1365eaa95fc288b3f871ae6345c2dd63.

* Stop propagation of external link in privacy modal

* Omit target and rel props

* Update banner text
---
 cypress/e2e/footer.cy.ts                      |  31 +++--
 cypress/support/common.ts                     |   6 +-
 src/components/checkbox/checkbox.module.scss  | 123 ++++++++++++++++++
 src/components/checkbox/checkbox.tsx          |  44 +++++++
 src/components/checkbox/index.ts              |   2 +
 .../external-link/external-link.tsx           |  31 +++--
 src/components/icons/check.tsx                |  15 +++
 src/components/icons/index.ts                 |   5 +-
 .../error-reporting-notice.module.scss        | 103 ++++++---------
 .../error-reporting-notice.tsx                |  90 +++++++------
 src/components/layout/layout.tsx              |  12 +-
 .../layout/privacy-settings-modal/index.ts    |   1 +
 .../privacy-settings-modal.module.scss        |  80 ++++++++++++
 .../privacy-settings-modal.tsx                |  84 ++++++++++++
 .../storage-full-notification.tsx             |  10 +-
 src/index.tsx                                 |  32 ++---
 src/utils/analytics.ts                        |  24 ++++
 src/utils/error-reporting.ts                  |  25 ++++
 src/utils/generic.test.ts                     |  10 +-
 src/utils/generic.ts                          |   6 -
 src/utils/links.ts                            |   4 +
 21 files changed, 564 insertions(+), 174 deletions(-)
 create mode 100644 src/components/checkbox/checkbox.module.scss
 create mode 100644 src/components/checkbox/checkbox.tsx
 create mode 100644 src/components/checkbox/index.ts
 create mode 100644 src/components/icons/check.tsx
 create mode 100644 src/components/layout/privacy-settings-modal/index.ts
 create mode 100644 src/components/layout/privacy-settings-modal/privacy-settings-modal.module.scss
 create mode 100644 src/components/layout/privacy-settings-modal/privacy-settings-modal.tsx
 create mode 100644 src/utils/analytics.ts
 create mode 100644 src/utils/error-reporting.ts
 create mode 100644 src/utils/links.ts

diff --git a/cypress/e2e/footer.cy.ts b/cypress/e2e/footer.cy.ts
index cd2c1b40..2034d986 100644
--- a/cypress/e2e/footer.cy.ts
+++ b/cypress/e2e/footer.cy.ts
@@ -3,20 +3,35 @@ import { HOME_PAGE } from '../support/common';
 it('renders footer and error reporting', () => {
   cy.visit(HOME_PAGE).dataCy('error-reporting').should('exist');
 
-  // Disallow error reporting
-  cy.dataCy('error-reporting').find('input').click();
-  cy.findByText('Done').click();
+  // Enable error report and analytics
+  cy.dataCy('error-reporting')
+    .findByRole('button', { name: /accept all/i })
+    .click();
   cy.dataCy('error-reporting')
     .should('not.exist')
-    .should(() => {
-      expect(localStorage.getItem('reportErrors')).to.equal('false');
+    .then(() => {
+      expect(localStorage.getItem('allow-error-reporting')).to.equal('true');
+      expect(localStorage.getItem('allow-analytics')).to.equal('true');
     });
 
-  // On subsequent page visit there is no notice
-  cy.reload().should(() => {
-    expect(localStorage.getItem('reportErrors')).to.equal('false');
+  // On subsequent page visit the error reporting notice should not be shown
+  cy.reload().then(() => {
+    expect(cy.dataCy('error-reporting').should('not.exist'));
   });
 
+  // Open the privacy settings modal from the footer and disable error reporting and analytics
+  cy.findByRole('button', { name: /error reporting/i }).click();
+  cy.findByRole('button', { name: /manage settings/i }).click();
+  cy.findByRole('checkbox', { name: /allow error reporting/i }).click();
+  cy.findByRole('checkbox', { name: /allow analytics cookies/i }).click();
+  cy.findByRole('button', { name: /save settings/i }).click();
+  cy.dataCy('error-reporting')
+    .should('not.exist')
+    .then(() => {
+      expect(localStorage.getItem('allow-error-reporting')).to.equal('false');
+      expect(localStorage.getItem('allow-analytics')).to.equal('false');
+    });
+
   // Footer links should open the pages they link to in a new tab
   cy.findByText('Github').should('have.attr', 'target', '_blank');
 });
diff --git a/cypress/support/common.ts b/cypress/support/common.ts
index de3970c9..290a939a 100644
--- a/cypress/support/common.ts
+++ b/cypress/support/common.ts
@@ -33,8 +33,10 @@ export const abbrStr = (str: string) => {
 export const EPOCH_LENGTH = 7 * 60 * 60 * 24; // in seconds
 
 export const closeErrorReportingNotice = () => {
-  cy.dataCy('error-reporting').findByText('Done').click();
-  cy.findByText('Done').should('not.exist');
+  cy.dataCy('error-reporting')
+    .findByRole('button', { name: /accept all/i })
+    .click();
+  cy.dataCy('error-reporting').should('not.exist');
 };
 
 export const HOME_PAGE = 'http://localhost:3000/#/';
diff --git a/src/components/checkbox/checkbox.module.scss b/src/components/checkbox/checkbox.module.scss
new file mode 100644
index 00000000..fc8ebaf2
--- /dev/null
+++ b/src/components/checkbox/checkbox.module.scss
@@ -0,0 +1,123 @@
+@import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
+
+.checkbox {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+
+  &,
+  * {
+    cursor: pointer;
+    transition: all 0.1s;
+  }
+
+  .checkmark {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 16px;
+    min-width: 16px;
+    height: 16px;
+    width: 16px;
+    background-color: $color-gray-50;
+    border: 1px solid $color-dark-blue-50;
+    border-radius: 2px;
+    margin-top: 2px;
+
+    svg {
+      margin: auto;
+      width: 12px;
+      height: 12px;
+      color: $color-gray-50;
+    }
+  }
+
+  .checkboxTextBlock {
+    display: flex;
+    flex-direction: column;
+    @include font-body-12;
+
+    label {
+      color: $color-dark-blue-800;
+    }
+
+    .description {
+      color: $color-gray-500;
+    }
+  }
+
+  &[aria-checked='true'] {
+    .checkmark {
+      background-color: $color-dark-blue-400;
+      border-color: $color-gray-50;
+    }
+  }
+
+  &:hover:not([aria-disabled='true']) {
+    .checkmark {
+      background-color: $color-base-light;
+      border-color: $color-dark-blue-400;
+
+      svg {
+        color: $color-dark-blue-400;
+      }
+    }
+
+    .checkboxTextBlock {
+      label {
+        color: $color-gray-900;
+      }
+
+      .description {
+        color: $color-gray-600;
+      }
+    }
+  }
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+
+    .checkmark {
+      background-color: transparent;
+      border-color: $color-gray-200;
+
+      svg {
+        color: $color-gray-200;
+      }
+    }
+
+    .checkboxTextBlock {
+      label {
+        color: $color-gray-400;
+      }
+
+      .description {
+        color: $color-gray-200;
+      }
+    }
+  }
+}
+
+@media (min-width: $sm) {
+  .checkbox {
+    gap: 12px;
+
+    .checkmark {
+      min-height: 20px;
+      min-width: 20px;
+      height: 20px;
+      width: 20px;
+      margin-top: 2px;
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .checkboxTextBlock {
+      @include font-body-9;
+    }
+  }
+}
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
new file mode 100644
index 00000000..eaa2e309
--- /dev/null
+++ b/src/components/checkbox/checkbox.tsx
@@ -0,0 +1,44 @@
+import { KeyboardEvent, ReactNode } from 'react';
+import { CheckIcon } from '../icons';
+import styles from './checkbox.module.scss';
+
+interface Props {
+  label?: string;
+  checked: boolean;
+  children?: ReactNode;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+const CheckBox = ({ label, checked, children, disabled, onChange }: Props) => {
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onChange(!checked);
+    }
+  };
+
+  return (
+    <div
+      id={label}
+      className={styles.checkbox}
+      tabIndex={0}
+      role="checkbox"
+      aria-checked={checked}
+      aria-disabled={disabled}
+      onClick={() => {
+        onChange(!checked);
+      }}
+      onKeyDown={handleKeyDown}
+    >
+      <span className={styles.checkmark}>{checked && <CheckIcon />}</span>
+
+      <div className={styles.checkboxTextBlock}>
+        <label htmlFor={label}>{label}</label>
+        {children && <div className={styles.description}>{children}</div>}
+      </div>
+    </div>
+  );
+};
+
+export default CheckBox;
diff --git a/src/components/checkbox/index.ts b/src/components/checkbox/index.ts
new file mode 100644
index 00000000..3f0e0071
--- /dev/null
+++ b/src/components/checkbox/index.ts
@@ -0,0 +1,2 @@
+export { default } from './checkbox';
+export * from './checkbox';
diff --git a/src/components/external-link/external-link.tsx b/src/components/external-link/external-link.tsx
index 73b27ade..f9e7b281 100644
--- a/src/components/external-link/external-link.tsx
+++ b/src/components/external-link/external-link.tsx
@@ -1,32 +1,37 @@
-import { ReactNode, useEffect } from 'react';
+import { ComponentPropsWithoutRef, useEffect } from 'react';
 
-interface Props {
-  className?: string;
+interface Props extends Omit<ComponentPropsWithoutRef<'a'>, 'target' | 'rel'> {
   href: string;
-  children: ReactNode;
 }
 
 const ExternalLink = (props: Props) => {
-  const { className, children } = props;
+  const { children, href: incomingHref, ...rest } = props;
 
-  let href = props.href.trim();
-  const urlRegex = /^https?:\/\//i; // Starts with https:// or http:// (case insensitive)
-  if (!urlRegex.test(href)) {
-    href = 'about:blank';
-  }
+  const href = cleanHref(incomingHref);
 
   useEffect(() => {
     if (process.env.NODE_ENV === 'development' && href === 'about:blank') {
       // eslint-disable-next-line no-console
-      console.warn(`An invalid URL has been provided: "${props.href}". Only https:// or http:// URLs are allowed.`);
+      console.warn(`An invalid URL has been provided: "${incomingHref}". Only https:// or http:// URLs are allowed.`);
     }
-  }, [href, props.href]);
+  }, [href, incomingHref]);
 
   return (
-    <a href={href} className={className} target="_blank" rel="noopener noreferrer">
+    <a target="_blank" rel="noopener noreferrer" href={href} {...rest}>
       {children}
     </a>
   );
 };
 
+const cleanHref = (href: string) => {
+  const urlRegex = /^https?:\/\//i; // Starts with https:// or http:// (case insensitive)
+  const trimmedHref = href.trim();
+
+  if (!urlRegex.test(trimmedHref)) {
+    return 'about:blank';
+  }
+
+  return trimmedHref;
+};
+
 export default ExternalLink;
diff --git a/src/components/icons/check.tsx b/src/components/icons/check.tsx
new file mode 100644
index 00000000..8e66fe51
--- /dev/null
+++ b/src/components/icons/check.tsx
@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export const CheckIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M13 4.25L6.125 11.125L3 8"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index c5e7cd12..8ae524e9 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1,8 +1,9 @@
-import { CheckCircleFillIcon } from './check-circle-fill';
 import { CheckboxRadioIcon } from './checkbox-radio';
+import { CheckCircleFillIcon } from './check-circle-fill';
+import { CheckIcon } from './check';
 import { CloseIcon } from './close';
 import { CrossIcon } from './cross';
 import { HelpOutlineIcon } from './help-outline';
 import { InfoCircleIcon } from './info-circle';
 
-export { CheckCircleFillIcon, CheckboxRadioIcon, CloseIcon, CrossIcon, HelpOutlineIcon, InfoCircleIcon };
+export { CheckCircleFillIcon, CheckboxRadioIcon, CheckIcon, CloseIcon, CrossIcon, HelpOutlineIcon, InfoCircleIcon };
diff --git a/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss b/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss
index 8fe8b2d9..88dec47f 100644
--- a/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss
+++ b/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss
@@ -10,14 +10,9 @@
   position: fixed;
   width: 100%;
   bottom: 0;
-  height: 221px;
   background: $color-dark-blue-700;
   align-items: center;
 
-  @media (min-width: $md) {
-    height: 92px;
-  }
-
   &::before {
     content: '';
     position: absolute;
@@ -29,25 +24,12 @@
   }
 }
 
-.closeButton {
-  z-index: 1;
-  height: 24px;
-  align-self: flex-end;
-  margin: 20px 24px;
-  position: absolute;
-  color: $color-base-light;
-  cursor: pointer;
-
-  &:hover {
-    color: $color-blue-25;
-  }
-}
-
 .content {
   padding: 64px 24px 32px 24px;
   display: flex;
   align-items: center;
   justify-content: space-around;
+  gap: 24px;
   flex: 1;
   flex-direction: column;
   @include font-body-15;
@@ -62,62 +44,59 @@
   }
 }
 
-.buttons {
-  display: flex;
+.externalLinkIcon {
+  margin-left: 4px;
 }
 
-.checkboxWrapper {
-  min-width: 160px; // Make sure the checkbox and its label are on a single line
-  display: flex;
-  align-items: center;
+.notice {
+  max-width: 550px;
 
-  label {
-    cursor: pointer;
+  a {
+    text-decoration: none;
+    @include link-blue;
   }
+}
 
-  input {
-    $size: 16px;
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 
-    width: $size;
-    height: $size;
-    margin-right: $space-xs;
-    appearance: none;
-    border: none;
-    border-radius: 4px;
-    outline: none;
-    transition-duration: 0.3s;
-    background-color: $secondary-black-color;
-    cursor: pointer;
+  .manageSettingsButton {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
   }
 
-  input:checked {
-    background-color: $green-color;
+  @media (min-width: $md) {
+    width: auto;
+    gap: 32px;
   }
+}
 
-  input:checked::before {
-    content: '\2713';
-    text-align: center;
-    color: $secondary-black-color;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-  }
+.closeButton {
+  z-index: 1;
+  align-self: flex-end;
+  margin: 20px 24px;
+  position: absolute;
+  color: $color-base-light;
+  cursor: pointer;
+  padding: 0;
+  border: none;
+  background: none;
 
-  input:active {
-    border: 2px solid $secondary-black-color;
+  svg {
+    width: 24px;
+    height: 24px;
   }
-}
 
-.notice {
-  max-width: 550px;
-
-  a {
-    text-decoration: none;
-    @include link-blue;
+  &:hover {
+    color: $color-blue-25;
   }
-}
 
-.externalLinkIcon {
-  margin-left: 4px;
+  @media (min-width: $md) {
+    svg {
+      width: 28px;
+      height: 28px;
+    }
+  }
 }
diff --git a/src/components/layout/error-reporting-notice/error-reporting-notice.tsx b/src/components/layout/error-reporting-notice/error-reporting-notice.tsx
index 756e53d8..b4065c25 100644
--- a/src/components/layout/error-reporting-notice/error-reporting-notice.tsx
+++ b/src/components/layout/error-reporting-notice/error-reporting-notice.tsx
@@ -1,66 +1,74 @@
-import { useRef, useState } from 'react';
-import { ERROR_REPORTING_CONSENT_KEY_NAME, images, isErrorReportingAllowed } from '../../../utils';
+import { useState } from 'react';
+import { images } from '../../../utils';
 import Button from '../../button';
-import { triggerOnEnter } from '../../modal';
 import styles from './error-reporting-notice.module.scss';
 import ExternalLink from '../../external-link';
+import { links } from '../../../utils/links';
+import { ALLOW_ANALYTICS, ALLOW_ERROR_REPORTING, initAnalytics } from '../../../utils/analytics';
+import PrivacySettingsModal from '../privacy-settings-modal';
+import { CrossIcon } from '../../icons';
+import { initSentry } from '../../../utils/error-reporting';
 
 interface WelcomeModalContentProps {
-  onClose: () => void;
+  onShowNotice: (showNotice: boolean) => void;
 }
 
 const ErrorReportingNotice = (props: WelcomeModalContentProps) => {
-  const { onClose } = props;
-  const defaultReportingValue = localStorage.getItem(ERROR_REPORTING_CONSENT_KEY_NAME);
-  const [errorReportingEnabled, setErrorReportingEnabled] = useState(
-    defaultReportingValue === null || isErrorReportingAllowed(defaultReportingValue)
-  );
-  const onErrorReportingNoticeConfirm = () => {
-    localStorage.setItem(ERROR_REPORTING_CONSENT_KEY_NAME, errorReportingEnabled.toString());
-    onClose();
+  const { onShowNotice } = props;
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleSubmit = (allowAnalytics: boolean, allowReporting: boolean) => {
+    localStorage.setItem(ALLOW_ERROR_REPORTING, allowReporting.toString());
+    localStorage.setItem(ALLOW_ANALYTICS, allowAnalytics.toString());
+
+    if (allowAnalytics) {
+      initAnalytics();
+      (window as any).clarity?.('consent');
+    }
+
+    if (allowReporting) {
+      initSentry();
+    }
+
+    onShowNotice(false);
+    setIsModalOpen(false);
   };
-  const errorReportingRef = useRef<HTMLInputElement>(null);
-  const toggleCheckbox = () => setErrorReportingEnabled((checked) => !checked);
 
   return (
-    // NOTE: Not using focus lock, because that would prevent user from signing in
     <>
-      <div data-cy="error-reporting" className={styles.wrapper} ref={errorReportingRef}>
+      <PrivacySettingsModal open={isModalOpen} onCancel={() => setIsModalOpen(false)} onSubmit={handleSubmit} />
+
+      <div data-cy="error-reporting" className={styles.wrapper}>
         <div className={styles.content}>
           <div className={styles.notice}>
             In order to provide the best services for you, we collect anonymized error data through{' '}
-            <ExternalLink className={styles.dark} href="https://sentry.io/">
+            <ExternalLink className={styles.dark} href={links.SENTRY}>
               Sentry
             </ExternalLink>
-            <img src={images.externalLink} alt="" className={styles.externalLinkIcon} />. We do not gather IP address or
-            user agent information.
+            <img src={images.externalLink} alt="" className={styles.externalLinkIcon} /> and use analytics cookies to
+            improve our products.
           </div>
           <div className={styles.buttons}>
-            <div className={styles.checkboxWrapper} tabIndex={0} onKeyPress={triggerOnEnter(toggleCheckbox)}>
-              <input
-                type="checkbox"
-                id="errorReporting"
-                name="errorReporting"
-                checked={errorReportingEnabled}
-                onChange={toggleCheckbox}
-                tabIndex={-1}
-              />
-              <label htmlFor="errorReporting">Allow error reporting</label>
-            </div>
-            <Button type="primary" theme="dark" onClick={onErrorReportingNoticeConfirm}>
-              Done
+            <Button
+              className={styles.manageSettingsButton}
+              type="text-blue"
+              size="sm"
+              theme="dark"
+              onClick={() => setIsModalOpen(true)}
+            >
+              Manage Settings
+            </Button>
+            <Button type="primary" size="sm" theme="dark" onClick={() => handleSubmit(true, true)}>
+              Accept All
             </Button>
           </div>
         </div>
-        <img
-          className={styles.closeButton}
-          onClick={onErrorReportingNoticeConfirm}
-          src={images.close}
-          alt="confirm and close icon"
-          tabIndex={0}
-          // This is not a regular "modal" and shouldn't be closed with ESC
-          onKeyPress={triggerOnEnter(onErrorReportingNoticeConfirm)}
-        />
+
+        <button className={styles.closeButton} onClick={() => onShowNotice(false)}>
+          <CrossIcon />
+          <span className="sr-only">Close</span>
+        </button>
       </div>
     </>
   );
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index 103b9763..c9710295 100644
--- a/src/components/layout/layout.tsx
+++ b/src/components/layout/layout.tsx
@@ -2,12 +2,12 @@ import { ReactNode, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import Navigation from '../navigation';
 import Header from '../header';
-import { ERROR_REPORTING_CONSENT_KEY_NAME } from '../../utils';
 import styles from './layout.module.scss';
 import Button from '../button';
 import ErrorReportingNotice from './error-reporting-notice';
 import { DesktopMenu } from '../menu';
 import ExternalLink from '../external-link';
+import { ALLOW_ANALYTICS, ALLOW_ERROR_REPORTING } from '../../utils/analytics';
 
 type Props = {
   children: ReactNode;
@@ -30,13 +30,13 @@ interface BaseLayoutProps {
 }
 
 export const BaseLayout = ({ children, subtitle }: BaseLayoutProps) => {
-  const [errorReportingNoticeOpen, setErrorReportingNoticeOpen] = useState(
-    localStorage.getItem(ERROR_REPORTING_CONSENT_KEY_NAME) === null
+  const [showNotice, setShowNotice] = useState(
+    () => localStorage.getItem(ALLOW_ERROR_REPORTING) === null || localStorage.getItem(ALLOW_ANALYTICS) === null
   );
 
   const footerLinks = [
     { text: 'About API3', href: 'https://api3.org/' },
-    { text: 'Error Reporting', onClick: () => setErrorReportingNoticeOpen(true) },
+    { text: 'Error Reporting', onClick: () => setShowNotice(true) },
     { text: 'Github', href: 'https://github.com/api3dao/api3-dao-dashboard' },
   ];
 
@@ -53,8 +53,8 @@ export const BaseLayout = ({ children, subtitle }: BaseLayoutProps) => {
           <main className={styles.main}>{children}</main>
         </div>
         <footer className={styles.footer}>
-          {errorReportingNoticeOpen ? (
-            <ErrorReportingNotice onClose={() => setErrorReportingNoticeOpen(false)} />
+          {showNotice ? (
+            <ErrorReportingNotice onShowNotice={setShowNotice} />
           ) : (
             <div className={styles.footerContent}>
               {footerLinks.map((link) =>
diff --git a/src/components/layout/privacy-settings-modal/index.ts b/src/components/layout/privacy-settings-modal/index.ts
new file mode 100644
index 00000000..bc687e6c
--- /dev/null
+++ b/src/components/layout/privacy-settings-modal/index.ts
@@ -0,0 +1 @@
+export { default } from './privacy-settings-modal';
diff --git a/src/components/layout/privacy-settings-modal/privacy-settings-modal.module.scss b/src/components/layout/privacy-settings-modal/privacy-settings-modal.module.scss
new file mode 100644
index 00000000..086fbf98
--- /dev/null
+++ b/src/components/layout/privacy-settings-modal/privacy-settings-modal.module.scss
@@ -0,0 +1,80 @@
+@import '../../../styles/variables.module.scss';
+@import '../../../styles/fonts.module.scss';
+@import '../../button/variants/link-blue.module.scss';
+
+.privacySettingsModalContent {
+  display: flex;
+  flex-direction: column;
+
+  .privacyDescription {
+    margin-bottom: 40px;
+
+    > span {
+      @include font-body-9;
+      color: $color-dark-blue-400;
+      margin: 0;
+    }
+
+    .privacyPolicyButton {
+      @include link-blue;
+      white-space: nowrap;
+      text-decoration: none;
+    }
+
+    .externalLinkIcon {
+      margin-left: 0.5ch;
+    }
+  }
+
+  .checkboxes {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .checkboxContainer {
+      .checkboxTextBlock {
+        gap: 8px;
+      }
+
+      .sentryButton {
+        display: inline-block;
+        margin-right: 0.5ch;
+
+        a {
+          @include link-blue;
+          @include font-link-3;
+          white-space: nowrap;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  @media (min-width: $sm) {
+    .privacyDescription {
+      margin-bottom: 40px;
+
+      > span {
+        @include font-body-6;
+      }
+    }
+
+    .checkboxes {
+      .checkboxContainer {
+        .sentryButton {
+          a {
+            @include font-link-2;
+          }
+        }
+      }
+    }
+  }
+}
+
+.saveSettingsButton {
+  width: 100%;
+
+  @media (min-width: $sm) {
+    width: auto;
+  }
+}
diff --git a/src/components/layout/privacy-settings-modal/privacy-settings-modal.tsx b/src/components/layout/privacy-settings-modal/privacy-settings-modal.tsx
new file mode 100644
index 00000000..8b3b859f
--- /dev/null
+++ b/src/components/layout/privacy-settings-modal/privacy-settings-modal.tsx
@@ -0,0 +1,84 @@
+import { KeyboardEvent, MouseEvent, useState } from 'react';
+import { ALLOW_ANALYTICS, ALLOW_ERROR_REPORTING } from '../../../utils/analytics';
+import { Modal, ModalFooter, ModalHeader } from '../../modal';
+import styles from './privacy-settings-modal.module.scss';
+import Button from '../../button';
+import CheckBox from '../../checkbox';
+import { links } from '../../../utils/links';
+import classNames from 'classnames';
+import ExternalLink from '../../external-link';
+import { images } from '../../../utils';
+
+interface Props {
+  open: boolean;
+  onCancel: () => void;
+  onSubmit: (allowAnalytics: boolean, allowReporting: boolean) => void;
+}
+
+const PrivacySettingsModal = (props: Props) => {
+  const { open, onCancel, onSubmit } = props;
+
+  const storedErrorReportingFlag = localStorage.getItem(ALLOW_ERROR_REPORTING);
+  const storedAnalyticsFlag = localStorage.getItem(ALLOW_ANALYTICS);
+
+  const [allowReporting, setAllowReporting] = useState(() => storedErrorReportingFlag === 'true');
+  const [allowAnalytics, setAllowAnalytics] = useState(() => storedAnalyticsFlag === 'true');
+
+  const handleEvent = (event: KeyboardEvent<HTMLAnchorElement> | MouseEvent<HTMLAnchorElement>) => {
+    event.stopPropagation();
+  };
+
+  return (
+    <Modal open={open} onClose={onCancel}>
+      <ModalHeader>Privacy Settings</ModalHeader>
+
+      <div className={styles.privacySettingsModalContent}>
+        <div className={styles.privacyDescription}>
+          <span>
+            In order to provide the best services for you, we collect anonymized error data through Sentry and use
+            analytics cookies to improve our products. We do not gather IP address or user agent information.{' '}
+          </span>
+          <ExternalLink className={styles.privacyPolicyButton} href={links.PRIVACY_POLICY}>
+            Visit our Privacy Policy
+          </ExternalLink>
+          <img src={images.externalLink} alt="" className={styles.externalLinkIcon} />
+        </div>
+
+        <div className={styles.checkboxes}>
+          <div className={classNames(styles.checkboxContainer, { selected: allowReporting })}>
+            <CheckBox checked={allowReporting} onChange={setAllowReporting} label="Allow error reporting">
+              <div className={styles.sentryButton}>
+                <ExternalLink href={links.SENTRY} onClick={handleEvent} onKeyDown={handleEvent}>
+                  Sentry
+                </ExternalLink>{' '}
+                <img src={images.externalLink} alt="" className={styles.externalLinkIcon} />
+              </div>
+              collects error data to improve the performance and reliability of our services, and helps us identify and
+              fix issues quickly, ensuring a smoother experience for you.
+            </CheckBox>
+          </div>
+
+          <div className={classNames(styles.checkboxContainer, { selected: allowAnalytics })}>
+            <CheckBox checked={allowAnalytics} onChange={setAllowAnalytics} label="Allow analytics cookies">
+              Analytics cookies help us to improve our website by collecting and reporting information on how you use
+              it.
+            </CheckBox>
+          </div>
+        </div>
+      </div>
+
+      <ModalFooter>
+        <Button
+          className={styles.saveSettingsButton}
+          type="primary"
+          sm={{ size: 'lg' }}
+          onClick={() => onSubmit(allowAnalytics, allowReporting)}
+        >
+          Save Settings
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default PrivacySettingsModal;
diff --git a/src/components/notifications/storage-full-notification.tsx b/src/components/notifications/storage-full-notification.tsx
index baa53970..0677eead 100644
--- a/src/components/notifications/storage-full-notification.tsx
+++ b/src/components/notifications/storage-full-notification.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { closeAll } from './notifications';
-import { ERROR_REPORTING_CONSENT_KEY_NAME } from '../../utils';
 import styles from './storage-full-notification.module.scss';
+import { ALLOW_ANALYTICS, ALLOW_ERROR_REPORTING } from '../../utils/analytics';
 
 export default function StorageFullNotification() {
   const [busy, setBusy] = useState(false);
@@ -18,10 +18,14 @@ export default function StorageFullNotification() {
           disabled={busy}
           onClick={() => {
             setBusy(true);
-            const errorReportingValue = window.localStorage.getItem(ERROR_REPORTING_CONSENT_KEY_NAME);
+            const errorReportingValue = window.localStorage.getItem(ALLOW_ERROR_REPORTING);
+            const analyticsValue = window.localStorage.getItem(ALLOW_ANALYTICS);
             window.localStorage.clear();
             if (errorReportingValue) {
-              window.localStorage.setItem(ERROR_REPORTING_CONSENT_KEY_NAME, errorReportingValue);
+              window.localStorage.setItem(ALLOW_ERROR_REPORTING, errorReportingValue);
+            }
+            if (analyticsValue) {
+              window.localStorage.setItem(ALLOW_ANALYTICS, analyticsValue);
             }
             window.location.reload();
           }}
diff --git a/src/index.tsx b/src/index.tsx
index 66a77574..c40b4961 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,29 +1,9 @@
 import { createRoot } from 'react-dom/client';
-import * as Sentry from '@sentry/react';
 import './index.scss';
 import App from './app';
 import { mockLocalhostWeb3Provider } from './chain-data';
-import { ERROR_REPORTING_CONSENT_KEY_NAME, isErrorReportingAllowed } from './utils';
-
-const errorReportingValue = localStorage.getItem(ERROR_REPORTING_CONSENT_KEY_NAME);
-if (isErrorReportingAllowed(errorReportingValue) && process.env.REACT_APP_SENTRY_DSN) {
-  Sentry.init({
-    dsn: process.env.REACT_APP_SENTRY_DSN,
-    environment: process.env.REACT_APP_NODE_ENV,
-    integrations(integrations) {
-      return integrations.filter((integration) => {
-        // Integrations can be filtered out here
-        // See: https://docs.sentry.io/platforms/javascript/configuration/integrations/default/
-        return !['UserAgent'].includes(integration.name);
-      });
-    },
-    beforeSend(event) {
-      // Do not collect the user's IP address
-      event.user = { ip_address: '0.0.0.0' };
-      return event;
-    },
-  });
-}
+import { canReportErrors, canUseAnalytics, initAnalytics } from './utils/analytics';
+import { initSentry } from './utils/error-reporting';
 
 if (process.env.REACT_APP_NODE_ENV === 'development' && (window as any).ethereum === undefined) {
   mockLocalhostWeb3Provider(window);
@@ -35,3 +15,11 @@ const root = createRoot(document.getElementById('root')!);
 // in our data hooks triggering 3 times on mount (the third trigger is caused by the memoized smart contracts
 // which are included in the useEffect dependency arrays). Because of this, we have decided to turn off strict mode.
 root.render(<App />);
+
+if (canReportErrors()) {
+  initSentry();
+}
+
+if (canUseAnalytics()) {
+  initAnalytics();
+}
diff --git a/src/utils/analytics.ts b/src/utils/analytics.ts
new file mode 100644
index 00000000..3608bc34
--- /dev/null
+++ b/src/utils/analytics.ts
@@ -0,0 +1,24 @@
+// import TagManager from 'react-gtm-module';
+
+export const ALLOW_ERROR_REPORTING = 'allow-error-reporting';
+export const ALLOW_ANALYTICS = 'allow-analytics';
+
+export const canReportErrors = () => localStorage.getItem(ALLOW_ERROR_REPORTING) === 'true';
+export const canUseAnalytics = () => localStorage.getItem(ALLOW_ANALYTICS) === 'true';
+
+const gtmId = process.env.VITE_APP_GTM_ID || '';
+
+// const tagManagerArgs = {
+//   gtmId,
+// };
+
+let initialised = false;
+export const initAnalytics = () => {
+  if (initialised) return;
+
+  if (gtmId) {
+    // TagManager.initialize(tagManagerArgs); // TBD later
+  }
+
+  initialised = true;
+};
diff --git a/src/utils/error-reporting.ts b/src/utils/error-reporting.ts
new file mode 100644
index 00000000..3be0ccff
--- /dev/null
+++ b/src/utils/error-reporting.ts
@@ -0,0 +1,25 @@
+import * as Sentry from '@sentry/react';
+
+let initialised = false;
+export const initSentry = () => {
+  if (initialised || !process.env.REACT_APP_SENTRY_DSN) return;
+
+  Sentry.init({
+    dsn: process.env.REACT_APP_SENTRY_DSN,
+    environment: process.env.REACT_APP_NODE_ENV,
+    integrations(integrations) {
+      return integrations.filter((integration) => {
+        // Integrations can be filtered out here
+        // See: https://docs.sentry.io/platforms/javascript/configuration/integrations/default/
+        return !['UserAgent'].includes(integration.name);
+      });
+    },
+    beforeSend(event) {
+      // Do not collect the user's IP address
+      event.user = { ip_address: '0.0.0.0' };
+      return event;
+    },
+  });
+
+  initialised = true;
+};
diff --git a/src/utils/generic.test.ts b/src/utils/generic.test.ts
index c3cc37f7..cdf4eae4 100644
--- a/src/utils/generic.test.ts
+++ b/src/utils/generic.test.ts
@@ -1,4 +1,4 @@
-import { filterAlphanumerical, getDays, getHours, getMinutes, getSeconds, isErrorReportingAllowed } from './generic';
+import { filterAlphanumerical, getDays, getHours, getMinutes, getSeconds } from './generic';
 
 test('getDays', () => {
   const twelveDays = 1000 * 60 * 60 * 24 * 12;
@@ -37,11 +37,3 @@ test('filterAlphanumerical', () => {
   expect(filterAlphanumerical('')).toEqual('');
   expect(filterAlphanumerical(' \t\n')).toEqual('');
 });
-
-test('isErrorReportingAllowed', () => {
-  expect(isErrorReportingAllowed(null)).toBe(false);
-  expect(isErrorReportingAllowed('random-value')).toBe(false);
-  expect(isErrorReportingAllowed('false')).toBe(false);
-
-  expect(isErrorReportingAllowed('true')).toBe(true);
-});
diff --git a/src/utils/generic.ts b/src/utils/generic.ts
index ac8b6a65..eaf22d23 100644
--- a/src/utils/generic.ts
+++ b/src/utils/generic.ts
@@ -34,9 +34,3 @@ export const getSeconds = (distance: number) => {
 export const UNKNOWN_NUMBER = '-';
 
 export const filterAlphanumerical = (value: string) => value.replace(/[^0-9a-zA-Z]/g, '');
-
-// Name of the localstorage key that will be used to remember whether the user allowed us to gather error reports
-export const ERROR_REPORTING_CONSENT_KEY_NAME = 'reportErrors';
-export const isErrorReportingAllowed = (localStorageValue: string | null) => {
-  return localStorageValue === Boolean(true).toString();
-};
diff --git a/src/utils/links.ts b/src/utils/links.ts
new file mode 100644
index 00000000..2199c848
--- /dev/null
+++ b/src/utils/links.ts
@@ -0,0 +1,4 @@
+export const links = {
+  SENTRY: 'https://sentry.io/',
+  PRIVACY_POLICY: 'https://api3.org/privacy-policy/',
+};