Content Script disconnect (#75)

* feat: Modal to disconnect from origin

* refactor: styling

* chore: linting

* refactor: styling connections modal

* feat: moved ConnectionDetailsModal to its own component

* chore: linting

* fix: styling update

---------

Co-authored-by: tsukino <[email protected]>

src/components/ConnectionDetailsModal/index.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback, 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';
+import { urlify } from '../../utils/misc';
+import Icon from '../Icon';
+
+const ConnectionDetailsModal = (props: {
+  showConnectionDetails: boolean;
+  setShowConnectionDetails: any;
+}) => {
+  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 = useCallback(async () => {
+    await deleteConnection(activeTabOrigin?.origin as string);
+    props.setShowConnectionDetails(false);
+    setConnected(false);
+  }, [props.setShowConnectionDetails]);
+
+  return (
+    <Modal
+      onClose={() => props.setShowConnectionDetails(false)}
+      className="flex flex-col gap-2 items-center text-base cursor-default justify-center mx-4 min-h-24"
+    >
+      <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 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>
+        {connected && (
+          <button
+            className="button disabled:opacity-50 self-end"
+            disabled={!connected}
+            onClick={() => handleDisconnect()}
+          >
+            Disconnect
+          </button>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConnectionDetailsModal;

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 {
@@ -21,20 +21,26 @@ 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';
 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();
   const activeTab = useActiveTab();
   const url = useActiveTabUrl();
   const navigate = useNavigate();
 
+  const [showConnectionDetails, setShowConnectionDetails] = useState(false);
+
   useEffect(() => {
     (async () => {
       const [tab] = await browser.tabs.query({
@@ -89,16 +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">
-          {!!activeTab?.favIconUrl && (
-            <img
-              src={activeTab?.favIconUrl}
-              className="h-5 rounded-full"
-              alt="logo"
-            />
-          )}
-          <div className="text-xs">{url?.hostname}</div>
-        </div>
+        <AppConnectionLogo />
       </div>
       <Routes>
         <Route path="/requests/:requestId/*" element={<Request />} />
@@ -128,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>
+  );
+}