diff --git a/packages/extension-base/src/background/handlers/Extension.ts b/packages/extension-base/src/background/handlers/Extension.ts index 28b993bb..17a38692 100644 --- a/packages/extension-base/src/background/handlers/Extension.ts +++ b/packages/extension-base/src/background/handlers/Extension.ts @@ -504,6 +504,10 @@ export default class Extension { return { list: this.#state.toggleAuthorization(url) }; } + private removeAuthorization (url: string): ResponseAuthorizeList { + return { list: this.#state.removeAuthorization(url) }; + } + // Weird thought, the eslint override is not needed in Tabs // eslint-disable-next-line @typescript-eslint/require-await public async handle (id: string, type: TMessageType, request: RequestTypes[TMessageType], port: chrome.runtime.Port): Promise> { @@ -520,6 +524,9 @@ export default class Extension { case 'pri(authorize.toggle)': return this.toggleAuthorization(request as string); + case 'pri(authorize.remove)': + return this.removeAuthorization(request as string); + case 'pri(authorize.requests)': return this.authorizeSubscribe(id, port); diff --git a/packages/extension-base/src/background/handlers/State.ts b/packages/extension-base/src/background/handlers/State.ts index d90c117d..f81c030a 100644 --- a/packages/extension-base/src/background/handlers/State.ts +++ b/packages/extension-base/src/background/handlers/State.ts @@ -327,6 +327,17 @@ export default class State { return this.#authUrls; } + public removeAuthorization (url: string): AuthUrls { + const entry = this.#authUrls[url]; + + assert(entry, `The source ${url} is not known`); + + delete this.#authUrls[url]; + this.saveCurrentAuthList(); + + return this.#authUrls; + } + private updateIconAuth (shouldClose?: boolean): void { this.authSubject.next(this.allAuthRequests); this.updateIcon(shouldClose); diff --git a/packages/extension-base/src/background/types.ts b/packages/extension-base/src/background/types.ts index afbda756..d506077d 100644 --- a/packages/extension-base/src/background/types.ts +++ b/packages/extension-base/src/background/types.ts @@ -92,6 +92,7 @@ export interface RequestSignatures { 'pri(authorize.reject)': [RequestAuthorizeReject, boolean]; 'pri(authorize.requests)': [RequestAuthorizeSubscribe, boolean, AuthorizeRequest[]]; 'pri(authorize.toggle)': [string, ResponseAuthorizeList]; + 'pri(authorize.remove)': [string, ResponseAuthorizeList]; 'pri(derivation.create)': [RequestDeriveCreate, boolean]; 'pri(derivation.validate)': [RequestDeriveValidate, ResponseDeriveValidate]; 'pri(json.restore)': [RequestJsonRestore, void]; diff --git a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx index dcf1b536..fb1cb960 100644 --- a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx +++ b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx @@ -7,24 +7,29 @@ import React, { useCallback } from 'react'; import styled from 'styled-components'; import { AuthUrlInfo } from '@polkadot/extension-base/background/handlers/State'; -import { Switch } from '@polkadot/extension-ui/components'; +import { RemoveAuth, Switch } from '@polkadot/extension-ui/components'; import useTranslation from '../../hooks/useTranslation'; interface Props extends ThemeProps { className?: string; info: AuthUrlInfo; - toggleAuth: (url: string) => void + toggleAuth: (url: string) => void; + removeAuth: (url: string) => void; url: string; } -function WebsiteEntry ({ className = '', info, toggleAuth, url }: Props): React.ReactElement { +function WebsiteEntry ({ className = '', info, removeAuth, toggleAuth, url }: Props): React.ReactElement { const { t } = useTranslation(); const switchAccess = useCallback(() => { toggleAuth(url); }, [toggleAuth, url]); + const _removeAuth = useCallback(() => { + removeAuth(url); + }, [removeAuth, url]); + return (
@@ -37,6 +42,13 @@ function WebsiteEntry ({ className = '', info, toggleAuth, url }: Props): React. onChange={switchAccess} uncheckedLabel={t('denied')} /> + +
+ +
); } diff --git a/packages/extension-ui/src/Popup/AuthManagement/index.tsx b/packages/extension-ui/src/Popup/AuthManagement/index.tsx index bdf7b34b..256f27e5 100644 --- a/packages/extension-ui/src/Popup/AuthManagement/index.tsx +++ b/packages/extension-ui/src/Popup/AuthManagement/index.tsx @@ -10,7 +10,7 @@ import { AuthUrlInfo, AuthUrls } from '@polkadot/extension-base/background/handl import { InputFilter } from '@polkadot/extension-ui/components'; import useTranslation from '../../hooks/useTranslation'; -import { getAuthList, toggleAuthorization } from '../../messaging'; +import { getAuthList, removeAuthorization, toggleAuthorization } from '../../messaging'; import { Header } from '../../partials'; import WebsiteEntry from './WebsiteEntry'; @@ -39,6 +39,12 @@ function AuthManagement ({ className }: Props): React.ReactElement { .catch(console.error); }, []); + const removeAuth = useCallback((url: string) => { + removeAuthorization(url) + .then(({ list }) => setAuthList(list)) + .catch(console.error); + }, []); + return ( <>
{ diff --git a/packages/extension-ui/src/components/RemoveAuth.tsx b/packages/extension-ui/src/components/RemoveAuth.tsx new file mode 100644 index 00000000..fb2c958a --- /dev/null +++ b/packages/extension-ui/src/components/RemoveAuth.tsx @@ -0,0 +1,39 @@ +// Copyright 2019-2022 @polkadot/extension-ui authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { ThemeProps } from '../types'; + +import { faTrash } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React from 'react'; +import styled from 'styled-components'; + +function RemoveAuth (): React.ReactElement { + return ( + + ); +} + +export default styled(RemoveAuth)(({ theme }: ThemeProps) => ` + label { + position: relative; + display: inline-block; + width: 48px; + height: 24px; + margin: 8px; + } + + .trashIcon { + color: ${theme.iconNeutralColor}; + margin-left: 8px; + + &.selected { + color: ${theme.primaryColor}; + } + } + +`); diff --git a/packages/extension-ui/src/components/index.ts b/packages/extension-ui/src/components/index.ts index d685beb4..0aaa026c 100644 --- a/packages/extension-ui/src/components/index.ts +++ b/packages/extension-ui/src/components/index.ts @@ -28,6 +28,7 @@ export { default as MenuDivider } from './MenuDivider'; export { default as MenuItem } from './MenuItem'; export { default as MnemonicSeed } from './MnemonicSeed'; export { default as NextStepButton } from './NextStepButton'; +export { default as RemoveAuth } from './RemoveAuth'; export { default as Spinner } from './Spinner'; export { default as Svg } from './Svg'; export { default as Switch } from './Switch'; diff --git a/packages/extension-ui/src/messaging.ts b/packages/extension-ui/src/messaging.ts index b90a43a0..872cf99e 100644 --- a/packages/extension-ui/src/messaging.ts +++ b/packages/extension-ui/src/messaging.ts @@ -196,6 +196,10 @@ export async function toggleAuthorization (url: string): Promise { + return sendMessage('pri(authorize.remove)', url); +} + export async function subscribeMetadataRequests (cb: (accounts: MetadataRequest[]) => void): Promise { return sendMessage('pri(metadata.requests)', null, cb); }