From 8c25cb3e391c3102603cb7cc5382d71be3a4b1e1 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 20 May 2019 18:02:20 +0200 Subject: [PATCH] Swap to using context for accounts & requests (#6) * Swap to using context for accounts & requests * Move event handlers --- .../src/Popup/Accounts/Account.tsx | 80 ++++++++------- .../extension-ui/src/Popup/Accounts/index.tsx | 60 ++++++------ packages/extension-ui/src/Popup/Create.tsx | 97 ++++++++++--------- packages/extension-ui/src/Popup/Forget.tsx | 56 +++++------ packages/extension-ui/src/Popup/Import.tsx | 86 ++++++++-------- .../src/Popup/Signing/Request.tsx | 58 ++++++----- .../extension-ui/src/Popup/Signing/Unlock.tsx | 57 ++++++----- .../extension-ui/src/Popup/Signing/index.tsx | 42 ++++---- packages/extension-ui/src/Popup/index.tsx | 36 +++---- .../extension-ui/src/components/Address.tsx | 35 ++++--- .../extension-ui/src/components/Button.tsx | 18 ++-- .../extension-ui/src/components/contexts.ts | 22 +++++ packages/extension-ui/src/partials/Name.tsx | 40 +++++--- 13 files changed, 363 insertions(+), 324 deletions(-) create mode 100644 packages/extension-ui/src/components/contexts.ts diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx index c7d4c0da..308ac8dc 100644 --- a/packages/extension-ui/src/Popup/Accounts/Account.tsx +++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx @@ -6,55 +6,61 @@ import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import { ActionBar, Address } from '../../components'; +import { ActionContext } from '../../components/contexts'; import { editAccount } from '../../messaging'; import { Name } from '../../partials'; type Props = { className?: string, - address: string, - name?: string | null, - onAction: () => void + address: string }; -export default function Account ({ address, className, name, onAction }: Props) { +export default function Account ({ address, className }: Props) { const [isEditing, setEditing] = useState(false); - const [editedname, setName] = useState(name); + const [editedname, setName] = useState(null as string | null); - const _toggleEdit = (): void => { + const toggleEdit = (): void => { setEditing(!isEditing); }; - const _saveChanges = (): void => { - if (editedname && editedname !== name) { - editAccount(address, editedname) - .then(onAction) - .catch(console.error); - } - - _toggleEdit(); - }; return ( -
- ) - : name - } - > - - Edit - Forget - -
+ + {(onAction) => { + const saveChanges = (): void => { + if (editedname && editedname !== name) { + editAccount(address, editedname) + .then(() => onAction()) + .catch(console.error); + } + + toggleEdit(); + }; + + return ( +
+ ) + : undefined + } + > + + Edit + Forget + +
+ ); + }} + ); } diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx index 9efb277b..9787e0dc 100644 --- a/packages/extension-ui/src/Popup/Accounts/index.tsx +++ b/packages/extension-ui/src/Popup/Accounts/index.tsx @@ -2,44 +2,40 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { KeyringJson } from '@polkadot/ui-keyring/types'; - import React from 'react'; import { Button, Header, Tip } from '../../components'; +import { AccountContext } from '../../components/contexts'; import Account from './Account'; -type Props = { - accounts: Array, - onAction: () => void -}; +type Props = {}; -export default function Accounts ({ accounts, onAction }: Props) { +export default function Accounts (props: Props) { return ( -
-
- { - (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 } }) => ( - - )) - } -
+ + {(accounts) => ( +
+
+ { + (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 }) => ( + + )) + } +
+ )} + ); } diff --git a/packages/extension-ui/src/Popup/Create.tsx b/packages/extension-ui/src/Popup/Create.tsx index 6b1968df..b63935d1 100644 --- a/packages/extension-ui/src/Popup/Create.tsx +++ b/packages/extension-ui/src/Popup/Create.tsx @@ -5,14 +5,13 @@ import React, { useState, useEffect } from 'react'; import { Address, Button, Header, Loading, TextArea } from '../components'; +import { ActionContext } from '../components/contexts'; import { createAccount, createSeed } from '../messaging'; import { Back, Name, Password } from '../partials'; -type Props = { - onAction: () => void -}; +type Props = {}; -export default function Create ({ onAction }: Props) { +export default function Create (props: 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); @@ -23,50 +22,52 @@ export default function Create ({ onAction }: Props) { .catch(console.error); }, []); - // FIXME Duplicated between here and Import.tsx - const _onCreate = (): void => { - // this should always be the case - if (name && password && account) { - createAccount(name, password, account.seed) - .then(() => { - onAction(); - window.location.hash = '/'; - }) - .catch(console.error); - } - }; - return ( -
-
- - {account && ( - <> -