Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content Script disconnect #75

Merged
merged 7 commits into from
Aug 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions src/components/ConnectionDetailsModal/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useActiveTab, useActiveTabUrl } from '../../reducers/requests';

Check warning on line 2 in src/components/ConnectionDetailsModal/index.tsx

View workflow job for this annotation

GitHub Actions / build

'useActiveTab' is defined but never used
import Modal, {
ModalHeader,
ModalContent,
ModalFooter,

Check warning on line 6 in src/components/ConnectionDetailsModal/index.tsx

View workflow job for this annotation

GitHub Actions / build

'ModalFooter' is defined but never used
} from '../../components/Modal/Modal';
import { deleteConnection, getConnection } from '../../entries/Background/db';
import { urlify } from '../../utils/misc';

Check warning on line 9 in src/components/ConnectionDetailsModal/index.tsx

View workflow job for this annotation

GitHub Actions / build

'urlify' is defined but never used
import Icon from '../Icon';

Check warning on line 10 in src/components/ConnectionDetailsModal/index.tsx

View workflow job for this annotation

GitHub Actions / build

'Icon' is defined but never used

const ConnectionDetailsModal = (props: {
showConnectionDetails: boolean;
setShowConnectionDetails: any;

Check warning on line 14 in src/components/ConnectionDetailsModal/index.tsx

View workflow job for this annotation

GitHub Actions / build

Unexpected any. Specify a different type
}) => {
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;
71 changes: 60 additions & 11 deletions src/entries/Popup/Popup.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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({
Expand Down Expand Up @@ -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 />} />
Expand Down Expand Up @@ -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>
);
}
Loading