From f5a00988b068dfc99f0c1c4c1927c0fade4cb469 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 20 May 2019 13:23:28 +0200 Subject: [PATCH] Refresh accounts on create/import, add forget --- .../src/Popup/Accounts/Account.tsx | 33 +++++++++++++++++++ .../{Accounts.tsx => Accounts/index.tsx} | 11 ++++--- packages/extension-ui/src/Popup/Create.tsx | 7 ++-- packages/extension-ui/src/Popup/Import.tsx | 7 ++-- packages/extension-ui/src/Popup/index.tsx | 33 +++++++++++-------- packages/extension-ui/src/messaging.ts | 4 +++ .../src/background/handlers/Extension.ts | 11 ++++++- packages/extension/src/background/types.ts | 6 +++- 8 files changed, 88 insertions(+), 24 deletions(-) create mode 100644 packages/extension-ui/src/Popup/Accounts/Account.tsx rename packages/extension-ui/src/Popup/{Accounts.tsx => Accounts/index.tsx} (79%) diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx new file mode 100644 index 00000000..cb37634a --- /dev/null +++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx @@ -0,0 +1,33 @@ +// Copyright 2019 @polkadot/extension-ui authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import React from 'react'; + +import { ActionBar, Address } from '../../components'; +import { forgetAccount } from '../../messaging'; + +type Props = { + address: string, + name?: string, + onAction: () => void +}; + +export default function Account ({ address, name, onAction }: Props) { + const _onForget = (): void => { + forgetAccount(address) + .then(onAction) + .catch(console.error); + }; + + return ( +
+ + Forget + +
+ ); +} diff --git a/packages/extension-ui/src/Popup/Accounts.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx similarity index 79% rename from packages/extension-ui/src/Popup/Accounts.tsx rename to packages/extension-ui/src/Popup/Accounts/index.tsx index 3b3142f8..9efb277b 100644 --- a/packages/extension-ui/src/Popup/Accounts.tsx +++ b/packages/extension-ui/src/Popup/Accounts/index.tsx @@ -6,13 +6,15 @@ import { KeyringJson } from '@polkadot/ui-keyring/types'; import React from 'react'; -import { Address, Button, Header, Tip } from '../components'; +import { Button, Header, Tip } from '../../components'; +import Account from './Account'; type Props = { - accounts: Array + accounts: Array, + onAction: () => void }; -export default function Accounts ({ accounts }: Props) { +export default function Accounts ({ accounts, onAction }: Props) { return (
@@ -20,10 +22,11 @@ export default function Accounts ({ accounts }: Props) { (accounts.length === 0) ? You currently don't have any accounts. Either create a new account or if you have an existing account you wish to use, import it with the seed phrase : accounts.map(({ address, meta: { name } }) => ( -
)) } diff --git a/packages/extension-ui/src/Popup/Create.tsx b/packages/extension-ui/src/Popup/Create.tsx index 2db92240..6b1968df 100644 --- a/packages/extension-ui/src/Popup/Create.tsx +++ b/packages/extension-ui/src/Popup/Create.tsx @@ -8,9 +8,11 @@ import { Address, Button, Header, Loading, TextArea } from '../components'; import { createAccount, createSeed } from '../messaging'; import { Back, Name, Password } from '../partials'; -type Props = {}; +type Props = { + onAction: () => void +}; -export default function Create (props: Props) { +export default function Create ({ onAction }: Props) { const [account, setAccount] = useState(null as null | { address: string, seed: string }); const [name, setName] = useState(null as string | null); const [password, setPassword] = useState(null as string | null); @@ -27,6 +29,7 @@ export default function Create (props: Props) { if (name && password && account) { createAccount(name, password, account.seed) .then(() => { + onAction(); window.location.hash = '/'; }) .catch(console.error); diff --git a/packages/extension-ui/src/Popup/Import.tsx b/packages/extension-ui/src/Popup/Import.tsx index 307307a4..148d150c 100644 --- a/packages/extension-ui/src/Popup/Import.tsx +++ b/packages/extension-ui/src/Popup/Import.tsx @@ -8,9 +8,11 @@ import { Address, Button, Header, TextArea } from '../components'; import { createAccount, validateSeed } from '../messaging'; import { Back, Name, Password } from '../partials'; -type Props = {}; +type Props = { + onAction: () => void +}; -export default function Import (props: Props) { +export default function Import ({ onAction }: Props) { const [account, setAccount] = useState(null as null | { address: string, seed: string }); const [name, setName] = useState(null as string | null); const [password, setPassword] = useState(null as string | null); @@ -31,6 +33,7 @@ export default function Import (props: Props) { if (name && password && account) { createAccount(name, password, account.seed) .then(() => { + onAction(); window.location.hash = '/'; }) .catch(console.error); diff --git a/packages/extension-ui/src/Popup/index.tsx b/packages/extension-ui/src/Popup/index.tsx index 76be3d24..3a61589f 100644 --- a/packages/extension-ui/src/Popup/index.tsx +++ b/packages/extension-ui/src/Popup/index.tsx @@ -21,13 +21,8 @@ export default function Popup (props: Props) { const [accounts, setAccounts] = useState(null as null | Array); const [requests, setRequests] = useState(null as null | Array<[number, MessageExtrinsicSign, string]>); - const _onAction = (): void => { - getRequests() - .then(setRequests) - .catch(console.error); - }; - - useEffect((): void => { + const onAction = (): void => { + // loads all accounts & requests (this is passed through to children to trigger changes) Promise .all([getAccounts(), getRequests()]) .then(([accounts, requests]) => { @@ -35,18 +30,28 @@ export default function Popup (props: Props) { setRequests(requests); }) .catch(console.error); + }; + + useEffect((): void => { + // with an empty state, load the accounts & requests + onAction(); }, []); return ( {accounts && requests && ( - - - { - return requests.length - ? - : ; - }} /> + + + } /> + + + } /> + + requests.length + ? + : + } /> )} ); diff --git a/packages/extension-ui/src/messaging.ts b/packages/extension-ui/src/messaging.ts index 73177032..36d8077b 100644 --- a/packages/extension-ui/src/messaging.ts +++ b/packages/extension-ui/src/messaging.ts @@ -22,6 +22,10 @@ function sendMessage (message: MessageTypes, request: any = {}): Promise { }); } +export async function forgetAccount (address: string): Promise { + return sendMessage('accounts.forget', { address }); +} + export async function getAccounts (): Promise> { return sendMessage('accounts.list'); } diff --git a/packages/extension/src/background/handlers/Extension.ts b/packages/extension/src/background/handlers/Extension.ts index 9fcae6fb..db2e40a1 100644 --- a/packages/extension/src/background/handlers/Extension.ts +++ b/packages/extension/src/background/handlers/Extension.ts @@ -3,7 +3,7 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { KeyringJson } from '@polkadot/ui-keyring/types'; -import { MessageTypes, MessageAccountCreate, MessageExtrinsicSign, MessageExtrinsicSignApprove, MessageExtrinsicSignCancel, MessageSeedCreate, MessageSeedCreate$Response, MessageSeedValidate, MessageSeedValidate$Response } from '../types'; +import { MessageTypes, MessageAccountCreate, MessageExtrinsicSign, MessageExtrinsicSignApprove, MessageExtrinsicSignCancel, MessageSeedCreate, MessageSeedCreate$Response, MessageSeedValidate, MessageSeedValidate$Response, MessageAccountForget } from '../types'; import keyring from '@polkadot/ui-keyring'; import accountsObservable from '@polkadot/ui-keyring/observable/accounts'; @@ -29,6 +29,12 @@ export default class Extension { return true; } + private accountsForget ({ address }: MessageAccountForget): boolean { + keyring.forgetAccount(address); + + return true; + } + private accountsList (): Array { return Object .values(accountsObservable.subject.getValue()) @@ -104,6 +110,9 @@ export default class Extension { case 'accounts.create': return this.accountsCreate(request); + case 'accounts.forget': + return this.accountsForget(request); + case 'accounts.list': return this.accountsList(); diff --git a/packages/extension/src/background/types.ts b/packages/extension/src/background/types.ts index 6547da54..4c9f3c19 100644 --- a/packages/extension/src/background/types.ts +++ b/packages/extension/src/background/types.ts @@ -4,7 +4,7 @@ import { KeypairType } from '@polkadot/util-crypto/types'; -export type MessageTypes = 'accounts.create' | 'accounts.list' | 'extrinsic.sign' | 'seed.create' | 'seed.validate' | 'signing.approve' | 'signing.cancel' | 'signing.requests'; +export type MessageTypes = 'accounts.create' | 'accounts.forget' | 'accounts.list' | 'extrinsic.sign' | 'seed.create' | 'seed.validate' | 'signing.approve' | 'signing.cancel' | 'signing.requests'; export type MessageRequest = { id: number, @@ -25,6 +25,10 @@ export type MessageAccountCreate = { type?: KeypairType }; +export type MessageAccountForget = { + address: string +}; + export type MessageExtrinsicSignApprove = { id: number, password: string