add updated privacy notice (#164)

* add updated privacy notice

* add press release link

Author: mindofmar

src/components/simulation/SimulationSubComponents/AcquisitionNotice.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import styles from '../simulation.module.css'
+
+export interface AcquiredNoticeProps {
+  closeCb: () => void;
+}
+
+export function AcquisitionNoticeModal({ closeCb }: AcquiredNoticeProps) {
+  return (
+    <div className='container' style={{ position: 'fixed', bottom: '100px', zIndex: 10 }}>
+      <div style={{ width: '100%', borderRadius: '10px', display: 'flex', flexDirection: 'row', alignItems: 'center', background: '#2B2B2B', padding: '15px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '20px' }}>
+          <p style={{ fontSize: '20px', marginBottom: '5px' }} className={styles['font-archivo-semibold']}>Terms & Privacy Update</p>
+          <p className={styles['softLockedWarningSubtitle']} style={{ marginBottom: '0px', fontSize: '14px' }}>
+            Our <a className={styles.links} href='https://consensys.io/terms-of-use' target='_blank'>Terms of Service</a> and <a className={styles.links} href='https://consensys.io/privacy-notice' target='_blank'>Privacy Policy</a> have recently changed, please read and acknowledge <a className={styles.links} href='https://www.walletguard.app/blog/weve-been-acquired-what-this-means-for-your-data' target='_blank'>the full privacy notice.</a>
+          </p>
+
+          <p className={styles['softLockedWarningSubtitle']} style={{ marginBottom: '0px', marginTop: '10px', fontSize: '14px' }}>
+            <a className={styles.links} style={{ marginBottom: '0px', fontSize: '14px' }} target='_blank' href='https://consensys.io/blog/consensys-acquires-wallet-guard-to-enhance-metamask-security'>
+              Read the Full Press Release
+            </a>
+            {' '}
+            to learn more about our recent acquisition.
+          </p>
+
+          <button className={styles.buttonOutline} style={{ marginTop: '10px', textAlign: 'left', width: 'fit-content', paddingTop: '5px', paddingBottom: '5px', paddingLeft: '10px', paddingRight: '10px' }} onClick={closeCb}>Acknowledge</button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/simulation/simulation.module.css

@@ -142,7 +142,12 @@
   font-family: "ArchivoBold";
 }
 
+.links {
+  color: #e6e6e6;
+}
+
 .links:hover {
+  color: #ffffff;
   text-decoration: underline solid #ffffff;
 }
 
@@ -216,6 +221,17 @@
   margin-bottom: 0;
 }
 
+.buttonOutline {
+  color: white;
+  font-family: 'ArchivoSemiBold';
+  border-radius: 100px;
+  cursor: pointer;
+}
+
+.buttonOutline:hover {
+  background: rgb(20, 20, 20);
+}
+
 .transactionDetailsCard {
   background: linear-gradient(to right, #141414, #0d0d0d00);
   border-top: 1px solid #303030;

src/lib/helpers/chrome/localStorageKeys.ts

@@ -11,4 +11,5 @@ export enum WgKeys {
   RequestsBlocklist = 'requestsBlocklist',
   SimulationSettings = 'simulationSettings',
   SimulationSkipModal = 'simulationSkipModal', // This key is only accessible via the popup page context
+  ViewedAcquisitionNotice = 'viewedAcquisitionNotice',
 }

src/pages/popup.tsx

@@ -1,5 +1,5 @@
 import posthog from 'posthog-js';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ConfirmSimulationButton } from '../components/simulation/SimulationButton';
 import { NoSimulation } from '../components/simulation/NoSimulation';
@@ -22,6 +22,8 @@ import { UnresolvableSignatureModal } from '../components/simulation/SimulationS
 import { TrySkipTransactions } from '../components/simulation/SimulationSubComponents/TrySkipTransactions';
 import { getDomainNameFromURL } from '../lib/helpers/phishing/parseDomainHelper';
 import { PopupManagerType, getAdditionalDataPopup } from '../lib/simulation/popupManager';
+import { WgKeys } from '../lib/helpers/chrome/localStorageKeys';
+import { AcquisitionNoticeModal } from '../components/simulation/SimulationSubComponents/AcquisitionNotice';
 
 export interface SimulationBaseProps {
   currentSimulation: CompletedSuccessfulSimulation;
@@ -30,6 +32,7 @@ export interface SimulationBaseProps {
 const Popup = () => {
   const [showChatWeb3, setShowChatWeb3] = useState<boolean>(false);
   const { currentSimulation, loading } = useSimulation();
+  const [viewedAcquisitionNotice, setViewedAcquisitionNotice] = useState(true);
 
   posthog.init('phc_rb7Dd9nqkBMJYCCh7MQWpXtkNqIGUFdCZbUThgipNQD', {
     api_host: 'https://app.posthog.com',
@@ -39,6 +42,19 @@ const Popup = () => {
     disable_session_recording: true,
   });
 
+  useEffect(() => {
+    const viewedAcquisitionNotice = localStorage.getItem(WgKeys.ViewedAcquisitionNotice);
+
+    if (!viewedAcquisitionNotice) {
+      setViewedAcquisitionNotice(false);
+    }
+  }, []);
+
+  function closeAcquisitionPopup() {
+    localStorage.setItem(WgKeys.ViewedAcquisitionNotice, 'true');
+    setViewedAcquisitionNotice(true);
+  }
+
   Sentry.init({
     dsn: 'https://d6ac9c557b4c4eee8b1d4224528f52b3@o4504402373640192.ingest.sentry.io/4504402378293248',
     integrations: [new Sentry.BrowserTracing()],
@@ -110,6 +126,8 @@ const Popup = () => {
           <TransactionContent currentSimulation={successfulSimulation} />
           <div style={{ height: popup !== PopupManagerType.None ? '200px' : '140px' }} />
 
+          {!viewedAcquisitionNotice && <AcquisitionNoticeModal closeCb={closeAcquisitionPopup} />}
+
           {popup === PopupManagerType.ShowUnresolvableSignature ? (
             <UnresolvableSignatureModal message={currentSimulation.simulation.extraInfo!.message} />
           ) : popup === PopupManagerType.ShowLockedAsset ? (