feat: add sunset popup

src/components/simulation/SimulationSubComponents/SunsetNotice.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import styles from '../simulation.module.css';
+
+export interface WalletGuardSunsetNoticeProps {
+  closeCb: () => void;
+}
+
+export function WalletGuardSunsetNoticeModal({ closeCb }: WalletGuardSunsetNoticeProps) {
+  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']}
+          >
+            Wallet Guard Sunset Notice
+          </p>
+
+          <p
+            className={styles['softLockedWarningSubtitle']}
+            style={{ marginBottom: '0px', fontSize: '14px' }}
+          >
+            The Wallet Guard extension will be discontinued on <strong>March 31st, 2025</strong>. Please install MetaMask to continue using Wallet Guard's security features.
+            Please read our{' '}
+            <a
+              className={styles.links}
+              href="https://www.walletguard.app/blog/wallet-guard-sunset-notice"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Sunset Notice
+            </a>{' '}
+            for more information.
+          </p>
+
+          <button
+            className={styles.buttonOutline}
+            style={{
+              marginTop: '10px',
+              textAlign: 'left',
+              width: 'fit-content',
+              padding: '5px 10px',
+            }}
+            onClick={closeCb}
+          >
+            Acknowledge
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/lib/helpers/chrome/localStorageKeys.ts

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

src/pages/popup.tsx

@@ -23,7 +23,7 @@ import { TrySkipTransactions } from '../components/simulation/SimulationSubCompo
 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';
+import { WalletGuardSunsetNoticeModal } from '../components/simulation/SimulationSubComponents/SunsetNotice';
 
 export interface SimulationBaseProps {
   currentSimulation: CompletedSuccessfulSimulation;
@@ -32,7 +32,7 @@ export interface SimulationBaseProps {
 const Popup = () => {
   const [showChatWeb3, setShowChatWeb3] = useState<boolean>(false);
   const { currentSimulation, loading } = useSimulation();
-  const [viewedAcquisitionNotice, setViewedAcquisitionNotice] = useState(true);
+  const [viewedWalletGuardSunsetNotice, setViewedWalletGuardSunsetNotice] = useState(true);
 
   posthog.init('phc_rb7Dd9nqkBMJYCCh7MQWpXtkNqIGUFdCZbUThgipNQD', {
     api_host: 'https://app.posthog.com',
@@ -43,16 +43,16 @@ const Popup = () => {
   });
 
   useEffect(() => {
-    const viewedAcquisitionNotice = localStorage.getItem(WgKeys.ViewedAcquisitionNotice);
+    const viewedWalletGuardSunsetNotice = localStorage.getItem(WgKeys.ViewedWalletGuardSunsetNotice);
 
-    if (!viewedAcquisitionNotice) {
-      setViewedAcquisitionNotice(false);
+    if (!viewedWalletGuardSunsetNotice) {
+      setViewedWalletGuardSunsetNotice(false);
     }
   }, []);
 
-  function closeAcquisitionPopup() {
-    localStorage.setItem(WgKeys.ViewedAcquisitionNotice, 'true');
-    setViewedAcquisitionNotice(true);
+  function closeWalletGuardSunsetPopup() {
+    localStorage.setItem(WgKeys.ViewedWalletGuardSunsetNotice, 'true');
+    setViewedWalletGuardSunsetNotice(true);
   }
 
   Sentry.init({
@@ -126,7 +126,7 @@ const Popup = () => {
           <TransactionContent currentSimulation={successfulSimulation} />
           <div style={{ height: popup !== PopupManagerType.None ? '200px' : '140px' }} />
 
-          {!viewedAcquisitionNotice && <AcquisitionNoticeModal closeCb={closeAcquisitionPopup} />}
+          {!viewedWalletGuardSunsetNotice && <WalletGuardSunsetNoticeModal closeCb={closeWalletGuardSunsetPopup} />}
 
           {popup === PopupManagerType.ShowUnresolvableSignature ? (
             <UnresolvableSignatureModal message={currentSimulation.simulation.extraInfo!.message} />