Merge pull request #308 from G7DAO/fix-spy-mode

Fix spy mode
G7DAO · Jan 22, 2025 · 256e247 · 256e247
2 parents a2bfaaf + 9939da8
commit 256e247
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx
@@ -102,7 +102,7 @@ const HistoryDesktop: React.FC<HistoryDesktopProps> = () => {
       )
 
       localStorage.setItem(
-        `bridge-${connectedAccount}-transactions-${selectedNetworkType}`,
+        `bridge-${isSpyMode ? spyAddress : connectedAccount}-transactions-${selectedNetworkType}`,
         JSON.stringify([...localTransactions, ...newTransactions])
       )
     }
@@ -148,7 +148,7 @@ const HistoryDesktop: React.FC<HistoryDesktopProps> = () => {
 
   return (
     <div className={styles.container}>
-      <SpyMode isSpyMode={isSpyMode} setIsSpyMode={setIsSpyMode} onSpyAddress={setSpyAddress} />
+      <SpyMode isSpyMode={isSpyMode} setIsSpyMode={setIsSpyMode} onSpyAddress={setSpyAddress} networkType={selectedNetworkType}/>
       <div className={styles.content}>
         {visibleTransactions && (
           <div className={styles.transactions}>

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/SpyMode.module.css b/webapps/world-builder-dashboard/src/components/bridge/history/SpyMode.module.css
@@ -39,3 +39,24 @@
     outline: none;
     box-shadow: none;
 }
+
+.button {
+    background: transparent;
+    border: 1px solid #919191; /* Optional: subtle border */
+    border-radius: 4px;
+    color: #c0bfbf; /* Text color */
+    padding: 3px 10px;
+    font-size: 15px;
+    cursor: pointer;
+    transition: background 0.3s ease, color 0.3s ease;
+}
+
+.button:hover {
+    background: rgba(0, 0, 0, 0.05); /* Slight background on hover */
+    color: #ecebeb;
+}
+
+.button:focus {
+    outline: none;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); /* Focus style */
+}
diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/SpyMode.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/SpyMode.tsx
@@ -1,13 +1,15 @@
 import React, {ChangeEvent, useEffect, useState} from 'react';
 import {ethers} from "ethers";
 import styles from "./SpyMode.module.css";
+import {NetworkType} from "@/contexts/BlockchainContext";
 
 interface SpyModeProps {
     isSpyMode: boolean;
     setIsSpyMode: (arg0: boolean) => void;
     onSpyAddress: (address: string) => void;
+    networkType: NetworkType;
 }
-const SpyMode: React.FC<SpyModeProps> = ({isSpyMode, setIsSpyMode, onSpyAddress}) => {
+const SpyMode: React.FC<SpyModeProps> = ({isSpyMode, setIsSpyMode, onSpyAddress, networkType}) => {
     const [cheatCode, setCheatCode] = useState('')
     const [address, setAddress] = useState('')
     const [isValid, setIsValid] = useState(false)
@@ -39,15 +41,24 @@ const SpyMode: React.FC<SpyModeProps> = ({isSpyMode, setIsSpyMode, onSpyAddress}
         }
     }, [cheatCode]);
 
+    const handleClick = () => {
+        localStorage.setItem(
+            `bridge-${address}-transactions-${networkType}`,
+            JSON.stringify([])
+        )
+    }
+
     if (!isSpyMode) {
         return <></>
     }
 
 
   return (
   <div className={styles.container}>
-    <input value={address} onChange={handleChange} className={styles.address} spellCheck={'false'}/>
+      <input value={address} onChange={handleChange} className={styles.address} spellCheck={'false'} />
       {!isValid && <div className={styles.error}>Address is not valid</div> }
+      {isValid && <button className={styles.button} onClick={handleClick}>clear local storage</button> }
+
   </div>
   );
 };