Hook up Account connected sites page

packages/browser-wallet/src/popup/popupX/constants/routes.ts

@@ -104,7 +104,7 @@ export const relativeRoutes = {
         accounts: {
             path: 'accounts',
             connectedSites: {
-                path: 'connectedSites',
+                path: 'connected-sites/:account',
                 config: {
                     backTitle: 'to Accounts list',
                 },

packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx

@@ -12,7 +12,7 @@ import Button from '@popup/popupX/shared/Button';
 import { useTranslation } from 'react-i18next';
 import Card from '@popup/popupX/shared/Card';
 import Text from '@popup/popupX/shared/Text';
-import { useNavigate } from 'react-router-dom';
+import { generatePath, useNavigate } from 'react-router-dom';
 import { absoluteRoutes } from '@popup/popupX/constants/routes';
 import { copyToClipboard } from '@popup/popupX/shared/utils/helpers';
 import { useAtomValue } from 'jotai';
@@ -95,7 +95,8 @@ function AccountListItem({ credential }: AccountListItemProps) {
     const { t } = useTranslation('x', { keyPrefix: 'accounts' });
     const nav = useNavigate();
     const navToPrivateKey = () => nav(absoluteRoutes.settings.accounts.privateKey.path);
-    const navToConnectedSites = () => nav(absoluteRoutes.settings.accounts.connectedSites.path);
+    const navToConnectedSites = () =>
+        nav(generatePath(absoluteRoutes.settings.accounts.connectedSites.path, { account: credential.address }));
     const navToIdCards = () => nav(absoluteRoutes.settings.idCards.path);
     const identityName = useIdentityName(credential);
     const accountInfo = useAccountInfo(credential);

packages/browser-wallet/src/popup/popupX/pages/ConnectedSites/ConnectedSites.scss

@@ -2,5 +2,9 @@
     .card-x .row {
         justify-content: space-between;
         align-items: center;
+
+        .text__main_regular {
+            overflow-wrap: anywhere;
+        }
     }
 }

packages/browser-wallet/src/popup/popupX/pages/ConnectedSites/ConnectedSites.tsx

@@ -1,33 +1,70 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import Page from '@popup/popupX/shared/Page';
 import { useTranslation } from 'react-i18next';
 import Text from '@popup/popupX/shared/Text';
 import Card from '@popup/popupX/shared/Card';
 import Button from '@popup/popupX/shared/Button';
+import { Navigate, useParams } from 'react-router-dom';
+import { useAtom } from 'jotai';
+import { storedAllowlistAtom } from '@popup/store/account';
+import { displayNameAndSplitAddress, useCredential } from '@popup/shared/utils/account-helpers';
+import { popupMessageHandler } from '@popup/shared/message-handler';
+import { EventType } from '@concordium/browser-wallet-api-helpers';
 
-export default function ConnectedSites() {
+type ConnectedSitesProps = {
+    address: string;
+};
+
+function ConnectedSites({ address }: ConnectedSitesProps) {
     const { t } = useTranslation('x', { keyPrefix: 'connectedSites' });
+    const [allowlistWithLoading, setAllowList] = useAtom(storedAllowlistAtom);
+    const credential = useCredential(address);
+    const allowlist = allowlistWithLoading.value ?? {};
+    const connectedAccountSites = useMemo(
+        () =>
+            Object.entries(allowlist).flatMap(([url, accounts]) => {
+                const accountIndex = accounts.findIndex((a) => a === address);
+                return accountIndex === -1 ? [] : [{ url, accountIndex }];
+            }),
+        [allowlist, address]
+    );
+    const onDisconnect = (url: string, accountIndex: number) => async () => {
+        const updatedAllowlist = { ...allowlist, [url]: allowlist[url].toSpliced(accountIndex, 1) };
+        await setAllowList(updatedAllowlist);
+        popupMessageHandler.broadcastToUrl(EventType.AccountDisconnected, url, address);
+    };
+    const loadedSiteView =
+        connectedAccountSites.length === 0 ? (
+            <Text.MainRegular>No sites connected to this account</Text.MainRegular>
+        ) : (
+            <Card>
+                {connectedAccountSites.map((site) => (
+                    <Card.Row key={site.url}>
+                        <Text.MainRegular>{site.url + site.url}</Text.MainRegular>
+                        <Button.Secondary
+                            className="dark"
+                            label={t('disconnect')}
+                            onClick={onDisconnect(site.url, site.accountIndex)}
+                        />
+                    </Card.Row>
+                ))}
+            </Card>
+        );
     return (
         <Page className="connected-sites-x">
             <Page.Top heading={t('connectedSites')}>
-                <Text.Capture>Accout 1 / 6gk...Fk7o</Text.Capture>
+                <Text.Capture>{displayNameAndSplitAddress(credential)}</Text.Capture>
             </Page.Top>
-            <Page.Main>
-                <Card>
-                    <Card.Row>
-                        <Text.MainRegular>concordium.com</Text.MainRegular>
-                        <Button.Secondary className="dark" label={t('disconnect')} />
-                    </Card.Row>
-                    <Card.Row>
-                        <Text.MainRegular>app.uniswap.org</Text.MainRegular>
-                        <Button.Secondary className="dark" label={t('disconnect')} />
-                    </Card.Row>
-                    <Card.Row>
-                        <Text.MainRegular>binance.com</Text.MainRegular>
-                        <Button.Secondary className="dark" label={t('disconnect')} />
-                    </Card.Row>
-                </Card>
-            </Page.Main>
+            <Page.Main>{allowlistWithLoading.loading ? null : loadedSiteView}</Page.Main>
         </Page>
     );
 }
+
+export default function Loader() {
+    const params = useParams();
+    if (params.account === undefined) {
+        // No account address passed in the url.
+        return <Navigate to="../" />;
+    }
+    return <ConnectedSites address={params.account} />;
+}