feat(ux): Disconnect from extension (#2069)

Co-authored-by: Ting A Lin <[email protected]>
polkadot-cloud · Apr 8, 2024 · c5c2ecb · c5c2ecb
1 parent e146bfc
commit c5c2ecb
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 22 deletions.
diff --git a/src/locale/cn/modals.json b/src/locale/cn/modals.json
@@ -71,6 +71,7 @@
     "developerTools": "开发者工具",
     "differentNetworkAddress": "不同的网络地址",
     "disconnect": "断开",
+    "disconnectFromExtension": "请重新确认断开与此扩展的连接，这将重新加载该应用",
     "done": "完成",
     "ensureLedgerIsConnected": "提示:请确保您的Ledger设备已连接",
     "exitYourStakingPosition": "退出抵押",

diff --git a/src/locale/en/modals.json b/src/locale/en/modals.json
@@ -74,6 +74,7 @@
     "developerTools": "Developer Tools",
     "differentNetworkAddress": "Different Network Address",
     "disconnect": "Disconnect",
+    "disconnectFromExtension": "Are you sure you want to disconnect from this extension? This will reload the dashboard.",
     "done": "Done",
     "ensureLedgerIsConnected": "Tip: Ensure your Ledger device is connected before continuing.",
     "exitYourStakingPosition": "Exit your staking position.",

diff --git a/src/modals/Connect/Extension.tsx b/src/modals/Connect/Extension.tsx
@@ -1,7 +1,11 @@
 // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
+import {
+  faExternalLinkAlt,
+  faMinus,
+  faPlus,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +15,7 @@ import type { ExtensionProps } from './types';
 import { NotificationsController } from 'controllers/NotificationsController';
 import { ModalConnectItem } from 'kits/Overlay/structure/ModalConnectItem';
 import { useExtensionAccounts, useExtensions } from '@w3ux/react-connect-kit';
+import { localStorageOrDefault } from '@w3ux/utils';
 
 export const Extension = ({ meta, size, flag }: ExtensionProps) => {
   const { t } = useTranslation('modals');
@@ -24,18 +29,34 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
   // Force re-render on click.
   const [increment, setIncrement] = useState<number>(0);
 
-  // click to connect to extension
+  const connected = extensionsStatus[id] === 'connected';
+
+  // Click to connect to extension.
   const handleClick = async () => {
-    if (canConnect) {
-      const connected = await connectExtensionAccounts(id);
-      // force re-render to display error messages
-      setIncrement(increment + 1);
+    if (!connected) {
+      if (canConnect) {
+        const success = await connectExtensionAccounts(id);
+        // force re-render to display error messages
+        setIncrement(increment + 1);
+
+        if (success) {
+          NotificationsController.emit({
+            title: t('extensionConnected'),
+            subtitle: `${t('titleExtensionConnected', { title })}`,
+          });
+        }
+      }
+    } else {
+      if (confirm(t('disconnectFromExtension'))) {
+        const updatedAtiveExtensions = (
+          localStorageOrDefault('active_extensions', [], true) as string[]
+        ).filter((ext: string) => ext !== id);
 
-      if (connected) {
-        NotificationsController.emit({
-          title: t('extensionConnected'),
-          subtitle: `${t('titleExtensionConnected', { title })}`,
-        });
+        localStorage.setItem(
+          'active_extensions',
+          JSON.stringify(updatedAtiveExtensions)
+        );
+        location.reload();
       }
     }
   };
@@ -47,15 +68,22 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
       : id;
   const Icon = ExtensionIcons[iconId];
 
-  // determine message to be displayed based on extension status.
+  // Determine message to be displayed based on extension status.
   let statusJsx;
   switch (extensionsStatus[id]) {
     case 'connected':
-      statusJsx = <p className="success">{t('connected')}</p>;
+      statusJsx = (
+        <p className="active">
+          <FontAwesomeIcon icon={faMinus} className="plus" />
+          {t('disconnect')}
+        </p>
+      );
       break;
+
     case 'not_authenticated':
       statusJsx = <p>{t('notAuthenticated')}</p>;
       break;
+
     default:
       statusJsx = (
         <p className="active">
@@ -67,8 +95,7 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
 
   const websiteText = typeof website === 'string' ? website : website.text;
   const websiteUrl = typeof website === 'string' ? website : website.url;
-
-  const disabled = extensionsStatus[id] === 'connected' || !isInstalled;
+  const disabled = !isInstalled;
 
   return (
     <ModalConnectItem canConnect={canConnect}>
@@ -94,6 +121,7 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
             </div>
             <div className="row">
               <h3>{title}</h3>
+              {connected && <p className="active inline">{t('connected')}</p>}
             </div>
           </div>
           <div className="foot">

diff --git a/src/modals/Connect/Wrappers.ts b/src/modals/Connect/Wrappers.ts
@@ -26,19 +26,43 @@ export const ExtensionInner = styled.div`
 
   h3 {
     font-family: InterSemiBold, sans-serif;
-    margin: 1rem 0 0 0;
+    margin: 0;
+
     > svg {
       margin-right: 0.5rem;
     }
   }
+
   p {
     color: var(--text-color-secondary);
     padding: 0;
     margin: 0;
-    .plus {
+
+    &.success {
+      color: var(--status-success-color);
+    }
+
+    &.danger {
+      color: var(--status-danger-color);
+    }
+
+    &.active {
+      color: var(--accent-color-primary);
+    }
+
+    &.inline {
+      color: var(--status-success-color);
+      border: 0.75px solid var(--status-success-color);
+      border-radius: 0.4rem;
+      margin-left: 0.75rem;
+      padding: 0.1rem 0.4rem;
+    }
+
+    > .plus {
       margin-right: 0.4rem;
     }
   }
+
   .body {
     width: 100%;
     padding: 1.35rem 0.85rem 0.75rem 0.85rem;
@@ -60,24 +84,27 @@ export const ExtensionInner = styled.div`
   .row {
     width: 100%;
     display: flex;
+    align-items: center;
   }
   .foot {
     padding: 0.25rem 1rem 1rem 1rem;
   }
+
   .status {
     position: absolute;
     top: 0.9rem;
     right: 0.9rem;
-    .success {
-      color: var(--status-success-color);
-    }
-    .active {
-      color: var(--accent-color-primary);
+    display: flex;
+
+    > p {
+      margin-left: 1rem;
     }
   }
+
   .icon {
     color: var(--text-color-primary);
     width: 100%;
+    margin-bottom: 0.75rem;
 
     svg {
       max-width: 2.6rem;