feat: add pulsing effect to logo on connection

Author: xendarboh

src/App.css

@@ -49,6 +49,18 @@
   will-change: filter;
 }
 
-.logo.ZKN:hover {
-  filter: drop-shadow(0 0 2em #00d400);
+@keyframes pulse-shadow {
+  0% {
+    filter: drop-shadow(0 0 0.25em #00d400);
+  }
+  50% {
+    filter: drop-shadow(0 0 1.75em #00d400);
+  }
+  100% {
+    filter: drop-shadow(0 0 0.25em #00d400);
+  }
+}
+
+.pulsing {
+  animation: pulse-shadow 2s infinite ease-in-out;
 }

src/App.tsx

@@ -45,6 +45,7 @@ function App() {
   const [platformArch, setPlatformArch] = useState("");
   const [platformSupported, setPlatformSupported] = useState(false);
   const [networks, setNetworks] = useState<string[]>([]);
+  const [isConnected, setIsConnected] = useState(false);
 
   // run once on startup (twice in dev mode)
   useEffect(() => {
@@ -69,6 +70,7 @@ function App() {
       setClientPid(pid);
       setMsgType("info");
       setMsg("");
+      setIsConnected(true);
       setNetworks(await getNetworks());
     } catch (error: any) {
       log.error(`${error}`);
@@ -83,6 +85,7 @@ function App() {
       setClientPid(0);
       setMsgType("info");
       setMsg("Disconnected from Network");
+      setIsConnected(false);
     } catch (error: any) {
       log.error(`${error}`);
       setMsgType("error");
@@ -203,7 +206,12 @@ function App() {
     <main className="flex flex-col items-center justify-center min-h-screen gap-5">
       <h1 className="text-3xl font-extrabold">Zero Knowledge Network</h1>
 
-      <img src="/zkn.svg" className="logo ZKN" alt="ZKN logo" />
+      <img
+        src="/zkn.svg"
+        alt="ZKN"
+        onClick={() => isConnected && disconnect()}
+        className={`logo ${isConnected ? "pulsing" : ""}`}
+      />
 
       {platformSupported &&
         (clientPid === 0 ? (