From e3d4d47a131c09b9bc2b11bdca667cd45901b102 Mon Sep 17 00:00:00 2001
From: Codetrauma <jtannershaw@gmail.com>
Date: Mon, 22 Jul 2024 16:12:12 -0700
Subject: [PATCH 1/7] feat: Modal to disconnect from origin

---
 src/entries/Popup/Popup.tsx | 89 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 87 insertions(+), 2 deletions(-)

diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index addd94a4..35ae25a4 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Navigate, Route, Routes, useNavigate } from 'react-router';
 import { useDispatch } from 'react-redux';
 import {
@@ -28,6 +28,12 @@ import { NotarizeApproval } from '../../pages/NotarizeApproval';
 import { InstallPluginApproval } from '../../pages/InstallPluginApproval';
 import { GetPluginsApproval } from '../../pages/GetPluginsApproval';
 import { RunPluginApproval } from '../../pages/RunPluginApproval';
+import Modal, {
+  ModalHeader,
+  ModalContent,
+  ModalFooter,
+} from '../../components/Modal/Modal';
+import { deleteConnection, getConnection } from '../Background/db';
 
 const Popup = () => {
   const dispatch = useDispatch();
@@ -35,6 +41,8 @@ const Popup = () => {
   const url = useActiveTabUrl();
   const navigate = useNavigate();
 
+  const [showConnectionDetails, setShowConnectionDetails] = useState(false);
+
   useEffect(() => {
     (async () => {
       const [tab] = await browser.tabs.query({
@@ -89,7 +97,10 @@ const Popup = () => {
           alt="logo"
           onClick={() => navigate('/')}
         />
-        <div className="absolute right-2 flex flex-nowrap flex-row items-center gap-1 justify-center w-fit">
+        <div
+          className="absolute right-2 flex flex-nowrap flex-row items-center gap-1 justify-center w-fit"
+          onClick={() => setShowConnectionDetails(true)}
+        >
           {!!activeTab?.favIconUrl && (
             <img
               src={activeTab?.favIconUrl}
@@ -99,6 +110,12 @@ const Popup = () => {
           )}
           <div className="text-xs">{url?.hostname}</div>
         </div>
+        {showConnectionDetails && (
+          <ConnectionDetails
+            showConnectionDetails={showConnectionDetails}
+            setShowConnectionDetails={setShowConnectionDetails}
+          />
+        )}
       </div>
       <Routes>
         <Route path="/requests/:requestId/*" element={<Request />} />
@@ -127,4 +144,72 @@ const Popup = () => {
   );
 };
 
+const ConnectionDetails = (props: {
+  showConnectionDetails: boolean;
+  setShowConnectionDetails: any;
+}) => {
+  const activeTab = useActiveTab();
+  const activeTabOrigin = useActiveTabUrl();
+
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      if (activeTabOrigin) {
+        console.log(activeTabOrigin);
+        const isConnected: boolean | null = await getConnection(
+          activeTabOrigin?.origin,
+        );
+        isConnected ? setConnected(true) : setConnected(false);
+      }
+    })();
+  }, []);
+
+  const handleDisconnect = async () => {
+    await deleteConnection(activeTabOrigin?.origin as string);
+    setConnected(false);
+  };
+
+  return (
+    <Modal
+      onClose={() => props.setShowConnectionDetails(false)}
+      className="w-full h-[50%]"
+    >
+      <ModalHeader className="w-full">
+        <div className="flex flex-row items-center justify-center gap-2">
+          {!!activeTab?.favIconUrl && (
+            <img
+              src={activeTab?.favIconUrl}
+              className="h-5 rounded-full"
+              alt="logo"
+            />
+          )}
+          <span>{activeTabOrigin?.host}</span>
+        </div>
+      </ModalHeader>
+      <ModalContent className="w-full flex flex-row">
+        <div className="flex flex-row gap-2 p-4">
+          {!!activeTab?.favIconUrl && (
+            <img
+              src={activeTab?.favIconUrl}
+              className="h-5 rounded-full"
+              alt="logo"
+            />
+          )}
+          <span>{activeTabOrigin?.host}</span>
+        </div>
+        <div className="w-full flex justify-end p-4">
+          <button className="button" disabled={!connected} onClick={() => handleDisconnect()}>
+            Disconnect
+          </button>
+        </div>
+      </ModalContent>
+      <ModalFooter className="flex justify-end gap-2 p-4">
+        <button className="button" onClick={() => props.setShowConnectionDetails(false)}>
+          Exit
+        </button>
+      </ModalFooter>
+    </Modal>
+  );
+};
 export default Popup;

From 01899b35a759738ac86612e293c1eec6e227f9b4 Mon Sep 17 00:00:00 2001
From: Codetrauma <jtannershaw@gmail.com>
Date: Mon, 22 Jul 2024 16:28:32 -0700
Subject: [PATCH 2/7] refactor: styling

---
 src/entries/Popup/Popup.tsx | 81 ++++++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index 35ae25a4..dfd806b9 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -172,44 +172,51 @@ const ConnectionDetails = (props: {
 
   return (
     <Modal
-      onClose={() => props.setShowConnectionDetails(false)}
-      className="w-full h-[50%]"
+  onClose={() => props.setShowConnectionDetails(false)}
+  className="w-full max-w-lg mx-auto rounded-lg shadow-lg"
+>
+  <ModalHeader className="w-full p-4 rounded-t-lg">
+    <div className="flex flex-row items-center justify-center gap-2">
+      {!!activeTab?.favIconUrl && (
+        <img
+          src={activeTab?.favIconUrl}
+          className="h-5 rounded-full"
+          alt="logo"
+        />
+      )}
+      <span className="text-lg font-semibold">{activeTabOrigin?.host}</span>
+    </div>
+  </ModalHeader>
+  <ModalContent className="w-full flex flex-row p-4">
+    <div className="flex flex-row gap-2 items-center">
+      {!!activeTab?.favIconUrl && (
+        <img
+          src={activeTab?.favIconUrl}
+          className="h-5 rounded-full"
+          alt="logo"
+        />
+      )}
+      <span className="text-gray-700">{activeTabOrigin?.host}</span>
+    </div>
+    <div className="w-full flex justify-end mt-4">
+      <button
+        className="px-2 py-2 bg-red-500 text-white font-bold rounded-lg disabled:opacity-50"
+        disabled={!connected}
+        onClick={() => handleDisconnect()}
+      >
+        Disconnect
+      </button>
+    </div>
+  </ModalContent>
+  <ModalFooter className="flex justify-end gap-2 p-4 rounded-b-lg">
+    <button
+      className="button"
+      onClick={() => props.setShowConnectionDetails(false)}
     >
-      <ModalHeader className="w-full">
-        <div className="flex flex-row items-center justify-center gap-2">
-          {!!activeTab?.favIconUrl && (
-            <img
-              src={activeTab?.favIconUrl}
-              className="h-5 rounded-full"
-              alt="logo"
-            />
-          )}
-          <span>{activeTabOrigin?.host}</span>
-        </div>
-      </ModalHeader>
-      <ModalContent className="w-full flex flex-row">
-        <div className="flex flex-row gap-2 p-4">
-          {!!activeTab?.favIconUrl && (
-            <img
-              src={activeTab?.favIconUrl}
-              className="h-5 rounded-full"
-              alt="logo"
-            />
-          )}
-          <span>{activeTabOrigin?.host}</span>
-        </div>
-        <div className="w-full flex justify-end p-4">
-          <button className="button" disabled={!connected} onClick={() => handleDisconnect()}>
-            Disconnect
-          </button>
-        </div>
-      </ModalContent>
-      <ModalFooter className="flex justify-end gap-2 p-4">
-        <button className="button" onClick={() => props.setShowConnectionDetails(false)}>
-          Exit
-        </button>
-      </ModalFooter>
-    </Modal>
+      Exit
+    </button>
+  </ModalFooter>
+</Modal>
   );
 };
 export default Popup;

From 054ff86fdf7d0c483655f5cbe9f431cae68ca04b Mon Sep 17 00:00:00 2001
From: Codetrauma <jtannershaw@gmail.com>
Date: Mon, 22 Jul 2024 16:33:18 -0700
Subject: [PATCH 3/7] chore: linting

---
 src/entries/Popup/Popup.tsx | 88 ++++++++++++++++++-------------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index dfd806b9..a72e649c 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -172,51 +172,51 @@ const ConnectionDetails = (props: {
 
   return (
     <Modal
-  onClose={() => props.setShowConnectionDetails(false)}
-  className="w-full max-w-lg mx-auto rounded-lg shadow-lg"
->
-  <ModalHeader className="w-full p-4 rounded-t-lg">
-    <div className="flex flex-row items-center justify-center gap-2">
-      {!!activeTab?.favIconUrl && (
-        <img
-          src={activeTab?.favIconUrl}
-          className="h-5 rounded-full"
-          alt="logo"
-        />
-      )}
-      <span className="text-lg font-semibold">{activeTabOrigin?.host}</span>
-    </div>
-  </ModalHeader>
-  <ModalContent className="w-full flex flex-row p-4">
-    <div className="flex flex-row gap-2 items-center">
-      {!!activeTab?.favIconUrl && (
-        <img
-          src={activeTab?.favIconUrl}
-          className="h-5 rounded-full"
-          alt="logo"
-        />
-      )}
-      <span className="text-gray-700">{activeTabOrigin?.host}</span>
-    </div>
-    <div className="w-full flex justify-end mt-4">
-      <button
-        className="px-2 py-2 bg-red-500 text-white font-bold rounded-lg disabled:opacity-50"
-        disabled={!connected}
-        onClick={() => handleDisconnect()}
-      >
-        Disconnect
-      </button>
-    </div>
-  </ModalContent>
-  <ModalFooter className="flex justify-end gap-2 p-4 rounded-b-lg">
-    <button
-      className="button"
-      onClick={() => props.setShowConnectionDetails(false)}
+      onClose={() => props.setShowConnectionDetails(false)}
+      className="w-full max-w-lg mx-auto rounded-lg shadow-lg"
     >
-      Exit
-    </button>
-  </ModalFooter>
-</Modal>
+      <ModalHeader className="w-full p-4 rounded-t-lg">
+        <div className="flex flex-row items-center justify-center gap-2">
+          {!!activeTab?.favIconUrl && (
+            <img
+              src={activeTab?.favIconUrl}
+              className="h-5 rounded-full"
+              alt="logo"
+            />
+          )}
+          <span className="text-lg font-semibold">{activeTabOrigin?.host}</span>
+        </div>
+      </ModalHeader>
+      <ModalContent className="w-full flex flex-row p-4">
+        <div className="flex flex-row gap-2 items-center">
+          {!!activeTab?.favIconUrl && (
+            <img
+              src={activeTab?.favIconUrl}
+              className="h-5 rounded-full"
+              alt="logo"
+            />
+          )}
+          <span className="text-gray-700">{activeTabOrigin?.host}</span>
+        </div>
+        <div className="w-full flex justify-end mt-4">
+          <button
+            className="px-2 py-2 bg-red-500 text-white font-bold rounded-lg disabled:opacity-50"
+            disabled={!connected}
+            onClick={() => handleDisconnect()}
+          >
+            Disconnect
+          </button>
+        </div>
+      </ModalContent>
+      <ModalFooter className="flex justify-end gap-2 p-4 rounded-b-lg">
+        <button
+          className="button"
+          onClick={() => props.setShowConnectionDetails(false)}
+        >
+          Exit
+        </button>
+      </ModalFooter>
+    </Modal>
   );
 };
 export default Popup;

From bab41ca7a469fe59b092119bd156444dfced6bd8 Mon Sep 17 00:00:00 2001
From: Codetrauma <jtannershaw@gmail.com>
Date: Wed, 24 Jul 2024 14:01:18 -0700
Subject: [PATCH 4/7] refactor: styling connections modal

---
 src/entries/Popup/Popup.tsx | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index a72e649c..8c8ccfa8 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -156,7 +156,6 @@ const ConnectionDetails = (props: {
   useEffect(() => {
     (async () => {
       if (activeTabOrigin) {
-        console.log(activeTabOrigin);
         const isConnected: boolean | null = await getConnection(
           activeTabOrigin?.origin,
         );
@@ -173,21 +172,14 @@ const ConnectionDetails = (props: {
   return (
     <Modal
       onClose={() => props.setShowConnectionDetails(false)}
-      className="w-full max-w-lg mx-auto rounded-lg shadow-lg"
+      className="w-full h-[40%] max-w-lg mx-auto rounded-lg shadow-lg flex flex-col"
     >
       <ModalHeader className="w-full p-4 rounded-t-lg">
         <div className="flex flex-row items-center justify-center gap-2">
-          {!!activeTab?.favIconUrl && (
-            <img
-              src={activeTab?.favIconUrl}
-              className="h-5 rounded-full"
-              alt="logo"
-            />
-          )}
-          <span className="text-lg font-semibold">{activeTabOrigin?.host}</span>
+          <span className="text-lg font-semibold">Connections</span>
         </div>
       </ModalHeader>
-      <ModalContent className="w-full flex flex-row p-4">
+      <ModalContent className="w-full flex-grow p-4 flex flex-row items-center justify-between">
         <div className="flex flex-row gap-2 items-center">
           {!!activeTab?.favIconUrl && (
             <img
@@ -198,9 +190,9 @@ const ConnectionDetails = (props: {
           )}
           <span className="text-gray-700">{activeTabOrigin?.host}</span>
         </div>
-        <div className="w-full flex justify-end mt-4">
+        <div className="flex justify-end">
           <button
-            className="px-2 py-2 bg-red-500 text-white font-bold rounded-lg disabled:opacity-50"
+            className="button px-2 py-2 disabled:opacity-50"
             disabled={!connected}
             onClick={() => handleDisconnect()}
           >

From f380800c5f15e6880086de14e7cfc62523e06426 Mon Sep 17 00:00:00 2001
From: Codetrauma <jtannershaw@gmail.com>
Date: Wed, 24 Jul 2024 20:18:40 -0700
Subject: [PATCH 5/7] feat: moved ConnectionDetailsModal to its own component

---
 .../ConnectionDetailsModal/index.tsx          | 83 +++++++++++++++++++
 src/entries/Popup/Popup.tsx                   | 75 +----------------
 2 files changed, 85 insertions(+), 73 deletions(-)
 create mode 100644 src/components/ConnectionDetailsModal/index.tsx

diff --git a/src/components/ConnectionDetailsModal/index.tsx b/src/components/ConnectionDetailsModal/index.tsx
new file mode 100644
index 00000000..43cf4040
--- /dev/null
+++ b/src/components/ConnectionDetailsModal/index.tsx
@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import {
+  useActiveTab,
+  useActiveTabUrl,
+} from '../../reducers/requests';
+import Modal, {
+  ModalHeader,
+  ModalContent,
+  ModalFooter,
+} from '../../components/Modal/Modal';
+import { deleteConnection, getConnection } from '../../entries/Background/db';
+
+
+
+const ConnectionDetailsModal = (props: {
+  showConnectionDetails: boolean;
+  setShowConnectionDetails: any;
+}) => {
+  const activeTab = useActiveTab();
+  const activeTabOrigin = useActiveTabUrl();
+
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      if (activeTabOrigin) {
+        const isConnected: boolean | null = await getConnection(
+          activeTabOrigin?.origin,
+        );
+        isConnected ? setConnected(true) : setConnected(false);
+      }
+    })();
+  }, []);
+
+  const handleDisconnect = async () => {
+    await deleteConnection(activeTabOrigin?.origin as string);
+    setConnected(false);
+  };
+
+  return (
+    <Modal
+      onClose={() => props.setShowConnectionDetails(false)}
+      className="w-full h-[40%] max-w-lg mx-auto rounded-lg shadow-lg flex flex-col"
+    >
+      <ModalHeader className="w-full p-4 rounded-t-lg">
+        <div className="flex flex-row items-center justify-center gap-2">
+          <span className="text-lg font-semibold">Connections</span>
+        </div>
+      </ModalHeader>
+      <ModalContent className="w-full flex-grow p-4 flex flex-row items-center justify-between">
+        <div className="flex flex-row gap-2 items-center">
+          {!!activeTab?.favIconUrl && (
+            <img
+              src={activeTab?.favIconUrl}
+              className="h-5 rounded-full"
+              alt="logo"
+            />
+          )}
+          <span className="text-gray-700">{activeTabOrigin?.host}</span>
+        </div>
+        <div className="flex justify-end">
+          <button
+            className="button px-2 py-2 disabled:opacity-50"
+            disabled={!connected}
+            onClick={() => handleDisconnect()}
+          >
+            Disconnect
+          </button>
+        </div>
+      </ModalContent>
+      <ModalFooter className="flex justify-end gap-2 p-4 rounded-b-lg">
+        <button
+          className="button"
+          onClick={() => props.setShowConnectionDetails(false)}
+        >
+          Exit
+        </button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default ConnectionDetailsModal;
diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index 8c8ccfa8..e80884ea 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -21,6 +21,7 @@ import ProofUploader from '../../pages/ProofUploader';
 import browser from 'webextension-polyfill';
 import store from '../../utils/store';
 import PluginUploadInfo from '../../components/PluginInfo';
+import ConnectionDetailsModal from '../../components/ConnectionDetailsModal';
 import { ConnectionApproval } from '../../pages/ConnectionApproval';
 import { GetHistoryApproval } from '../../pages/GetHistoryApproval';
 import { GetProofApproval } from '../../pages/GetProofApproval';
@@ -28,12 +29,6 @@ import { NotarizeApproval } from '../../pages/NotarizeApproval';
 import { InstallPluginApproval } from '../../pages/InstallPluginApproval';
 import { GetPluginsApproval } from '../../pages/GetPluginsApproval';
 import { RunPluginApproval } from '../../pages/RunPluginApproval';
-import Modal, {
-  ModalHeader,
-  ModalContent,
-  ModalFooter,
-} from '../../components/Modal/Modal';
-import { deleteConnection, getConnection } from '../Background/db';
 
 const Popup = () => {
   const dispatch = useDispatch();
@@ -111,7 +106,7 @@ const Popup = () => {
           <div className="text-xs">{url?.hostname}</div>
         </div>
         {showConnectionDetails && (
-          <ConnectionDetails
+          <ConnectionDetailsModal
             showConnectionDetails={showConnectionDetails}
             setShowConnectionDetails={setShowConnectionDetails}
           />
@@ -144,71 +139,5 @@ const Popup = () => {
   );
 };
 
-const ConnectionDetails = (props: {
-  showConnectionDetails: boolean;
-  setShowConnectionDetails: any;
-}) => {
-  const activeTab = useActiveTab();
-  const activeTabOrigin = useActiveTabUrl();
-
-  const [connected, setConnected] = useState(false);
-
-  useEffect(() => {
-    (async () => {
-      if (activeTabOrigin) {
-        const isConnected: boolean | null = await getConnection(
-          activeTabOrigin?.origin,
-        );
-        isConnected ? setConnected(true) : setConnected(false);
-      }
-    })();
-  }, []);
-
-  const handleDisconnect = async () => {
-    await deleteConnection(activeTabOrigin?.origin as string);
-    setConnected(false);
-  };
 
-  return (
-    <Modal
-      onClose={() => props.setShowConnectionDetails(false)}
-      className="w-full h-[40%] max-w-lg mx-auto rounded-lg shadow-lg flex flex-col"
-    >
-      <ModalHeader className="w-full p-4 rounded-t-lg">
-        <div className="flex flex-row items-center justify-center gap-2">
-          <span className="text-lg font-semibold">Connections</span>
-        </div>
-      </ModalHeader>
-      <ModalContent className="w-full flex-grow p-4 flex flex-row items-center justify-between">
-        <div className="flex flex-row gap-2 items-center">
-          {!!activeTab?.favIconUrl && (
-            <img
-              src={activeTab?.favIconUrl}
-              className="h-5 rounded-full"
-              alt="logo"
-            />
-          )}
-          <span className="text-gray-700">{activeTabOrigin?.host}</span>
-        </div>
-        <div className="flex justify-end">
-          <button
-            className="button px-2 py-2 disabled:opacity-50"
-            disabled={!connected}
-            onClick={() => handleDisconnect()}
-          >
-            Disconnect
-          </button>
-        </div>
-      </ModalContent>
-      <ModalFooter className="flex justify-end gap-2 p-4 rounded-b-lg">
-        <button
-          className="button"
-          onClick={() => props.setShowConnectionDetails(false)}
-        >
-          Exit
-        </button>
-      </ModalFooter>
-    </Modal>
-  );
-};
 export default Popup;

From 8775fc7f625446c12f20e1a6ae6ab9ec1fc27abc Mon Sep 17 00:00:00 2001
From: Codetrauma <jtannershaw@gmail.com>
Date: Wed, 24 Jul 2024 20:19:48 -0700
Subject: [PATCH 6/7] chore: linting

---
 src/components/ConnectionDetailsModal/index.tsx | 7 +------
 src/entries/Popup/Popup.tsx                     | 1 -
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/ConnectionDetailsModal/index.tsx b/src/components/ConnectionDetailsModal/index.tsx
index 43cf4040..5b1ccee2 100644
--- a/src/components/ConnectionDetailsModal/index.tsx
+++ b/src/components/ConnectionDetailsModal/index.tsx
@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import {
-  useActiveTab,
-  useActiveTabUrl,
-} from '../../reducers/requests';
+import { useActiveTab, useActiveTabUrl } from '../../reducers/requests';
 import Modal, {
   ModalHeader,
   ModalContent,
@@ -10,8 +7,6 @@ import Modal, {
 } from '../../components/Modal/Modal';
 import { deleteConnection, getConnection } from '../../entries/Background/db';
 
-
-
 const ConnectionDetailsModal = (props: {
   showConnectionDetails: boolean;
   setShowConnectionDetails: any;
diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index e80884ea..2f3d08e2 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -139,5 +139,4 @@ const Popup = () => {
   );
 };
 
-
 export default Popup;

From d5342a19047cafbfa59489aa51d015df5563f496 Mon Sep 17 00:00:00 2001
From: tsukino <0xtsukino@gmail.com>
Date: Wed, 14 Aug 2024 00:38:59 +0800
Subject: [PATCH 7/7] fix: styling update

---
 .../ConnectionDetailsModal/index.tsx          | 52 ++++++-------
 src/entries/Popup/Popup.tsx                   | 75 ++++++++++++++-----
 2 files changed, 78 insertions(+), 49 deletions(-)

diff --git a/src/components/ConnectionDetailsModal/index.tsx b/src/components/ConnectionDetailsModal/index.tsx
index 5b1ccee2..2580aa7a 100644
--- a/src/components/ConnectionDetailsModal/index.tsx
+++ b/src/components/ConnectionDetailsModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useActiveTab, useActiveTabUrl } from '../../reducers/requests';
 import Modal, {
   ModalHeader,
@@ -6,12 +6,13 @@ import Modal, {
   ModalFooter,
 } from '../../components/Modal/Modal';
 import { deleteConnection, getConnection } from '../../entries/Background/db';
+import { urlify } from '../../utils/misc';
+import Icon from '../Icon';
 
 const ConnectionDetailsModal = (props: {
   showConnectionDetails: boolean;
   setShowConnectionDetails: any;
 }) => {
-  const activeTab = useActiveTab();
   const activeTabOrigin = useActiveTabUrl();
 
   const [connected, setConnected] = useState(false);
@@ -27,50 +28,41 @@ const ConnectionDetailsModal = (props: {
     })();
   }, []);
 
-  const handleDisconnect = async () => {
+  const handleDisconnect = useCallback(async () => {
     await deleteConnection(activeTabOrigin?.origin as string);
+    props.setShowConnectionDetails(false);
     setConnected(false);
-  };
+  }, [props.setShowConnectionDetails]);
 
   return (
     <Modal
       onClose={() => props.setShowConnectionDetails(false)}
-      className="w-full h-[40%] max-w-lg mx-auto rounded-lg shadow-lg flex flex-col"
+      className="flex flex-col gap-2 items-center text-base cursor-default justify-center mx-4 min-h-24"
     >
-      <ModalHeader className="w-full p-4 rounded-t-lg">
-        <div className="flex flex-row items-center justify-center gap-2">
-          <span className="text-lg font-semibold">Connections</span>
-        </div>
+      <ModalHeader
+        className="w-full rounded-t-lg pb-0 border-b-0"
+        onClose={() => props.setShowConnectionDetails(false)}
+      >
+        <span className="text-lg font-semibold">
+          {activeTabOrigin?.hostname || 'Connections'}
+        </span>
       </ModalHeader>
-      <ModalContent className="w-full flex-grow p-4 flex flex-row items-center justify-between">
-        <div className="flex flex-row gap-2 items-center">
-          {!!activeTab?.favIconUrl && (
-            <img
-              src={activeTab?.favIconUrl}
-              className="h-5 rounded-full"
-              alt="logo"
-            />
-          )}
-          <span className="text-gray-700">{activeTabOrigin?.host}</span>
+      <ModalContent className="w-full gap-2 flex-grow flex flex-col items-center justify-between px-4 pt-0 pb-4">
+        <div className="flex flex-row gap-2 items-start w-full text-xs font-semibold text-slate-800">
+          {connected
+            ? 'TLSN Extension is connected to this site.'
+            : 'TLSN Extension is not connected to this site. To connect to this site, find and click the connect button.'}
         </div>
-        <div className="flex justify-end">
+        {connected && (
           <button
-            className="button px-2 py-2 disabled:opacity-50"
+            className="button disabled:opacity-50 self-end"
             disabled={!connected}
             onClick={() => handleDisconnect()}
           >
             Disconnect
           </button>
-        </div>
+        )}
       </ModalContent>
-      <ModalFooter className="flex justify-end gap-2 p-4 rounded-b-lg">
-        <button
-          className="button"
-          onClick={() => props.setShowConnectionDetails(false)}
-        >
-          Exit
-        </button>
-      </ModalFooter>
     </Modal>
   );
 };
diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index 2f3d08e2..cb8a425a 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -29,6 +29,9 @@ import { NotarizeApproval } from '../../pages/NotarizeApproval';
 import { InstallPluginApproval } from '../../pages/InstallPluginApproval';
 import { GetPluginsApproval } from '../../pages/GetPluginsApproval';
 import { RunPluginApproval } from '../../pages/RunPluginApproval';
+import Icon from '../../components/Icon';
+import classNames from 'classnames';
+import { getConnection } from '../Background/db';
 
 const Popup = () => {
   const dispatch = useDispatch();
@@ -92,25 +95,7 @@ const Popup = () => {
           alt="logo"
           onClick={() => navigate('/')}
         />
-        <div
-          className="absolute right-2 flex flex-nowrap flex-row items-center gap-1 justify-center w-fit"
-          onClick={() => setShowConnectionDetails(true)}
-        >
-          {!!activeTab?.favIconUrl && (
-            <img
-              src={activeTab?.favIconUrl}
-              className="h-5 rounded-full"
-              alt="logo"
-            />
-          )}
-          <div className="text-xs">{url?.hostname}</div>
-        </div>
-        {showConnectionDetails && (
-          <ConnectionDetailsModal
-            showConnectionDetails={showConnectionDetails}
-            setShowConnectionDetails={setShowConnectionDetails}
-          />
-        )}
+        <AppConnectionLogo />
       </div>
       <Routes>
         <Route path="/requests/:requestId/*" element={<Request />} />
@@ -140,3 +125,55 @@ const Popup = () => {
 };
 
 export default Popup;
+
+function AppConnectionLogo() {
+  const activeTab = useActiveTab();
+  const url = useActiveTabUrl();
+  const [showConnectionDetails, setShowConnectionDetails] = useState(false);
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      if (url) {
+        const isConnected: boolean | null = await getConnection(url?.origin);
+        isConnected ? setConnected(true) : setConnected(false);
+      }
+    })();
+  }, [url]);
+
+  return (
+    <div
+      className="absolute right-2 flex flex-nowrap flex-row items-center gap-1 justify-center w-fit cursor-pointer"
+      onClick={() => setShowConnectionDetails(true)}
+    >
+      <div className="flex flex-row relative bg-slate-500 border-[1px] border-black rounded-full">
+        {!!activeTab?.favIconUrl ? (
+          <img
+            src={activeTab?.favIconUrl}
+            className="h-5 rounded-full"
+            alt="logo"
+          />
+        ) : (
+          <Icon fa="fa-solid fa-globe" size={1.25} />
+        )}
+        <div
+          className={classNames(
+            'absolute right-[-2px] bottom-[-2px] rounded-full',
+            {
+              'bg-green-500 h-[10px] w-[10px] border-[2px]':
+                activeTab?.favIconUrl,
+              'bg-green-500': connected,
+              'bg-slate-500': !connected,
+            },
+          )}
+        />
+      </div>
+      {showConnectionDetails && (
+        <ConnectionDetailsModal
+          showConnectionDetails={showConnectionDetails}
+          setShowConnectionDetails={setShowConnectionDetails}
+        />
+      )}
+    </div>
+  );
+}