Add contacts to Accounts, all-in-one (#2453)

* Add contacts to Accounts, all-in-one

* Vanity generator i18n

* yarn

packages/apps-routing/src/addressbook.ts

@@ -1,21 +0,0 @@
-// Copyright 2017-2020 @polkadot/apps-routing 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 { Routes } from './types';
-
-import AddressBook from '@polkadot/app-address-book';
-
-export default ([
-  {
-    Component: AddressBook,
-    display: {
-      needsApi: []
-    },
-    i18n: {
-      defaultValue: 'Address book'
-    },
-    icon: 'address book',
-    name: 'addressbook'
-  }
-] as Routes);

packages/apps-routing/src/index.ts

@@ -8,7 +8,6 @@ import appSettings from '@polkadot/ui-settings';
 
 import template from './123code';
 import accounts from './accounts';
-import addressbook from './addressbook';
 import claims from './claims';
 import contracts from './contracts';
 import council from './council';
@@ -34,7 +33,6 @@ const routes: Routes = appSettings.uiMode === 'light'
     // dashboard,
     explorer,
     accounts,
-    addressbook,
     claims,
     transfer,
     genericAsset,
@@ -50,7 +48,6 @@ const routes: Routes = appSettings.uiMode === 'light'
     // dashboard,
     explorer,
     accounts,
-    addressbook,
     claims,
     transfer,
     genericAsset,

packages/apps-routing/src/transfer.ts

@@ -5,7 +5,7 @@
 import { Routes } from './types';
 
 import Transfer from '@polkadot/app-transfer';
-import TransferModal from '@polkadot/app-accounts/modals/Transfer';
+import TransferModal from '@polkadot/app-accounts/Accounts/modals/Transfer';
 
 export default ([
   {

packages/apps/public/locales/en/app-accounts.json

@@ -9,7 +9,7 @@
   "Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.": "Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.",
   "Learn more...": "Learn more...",
   "My accounts": "My accounts",
-  "Vanity address": "Vanity address",
+  "Vanity generator": "Vanity generator",
   "account backed up": "account backed up",
   "Backup account": "Backup account",
   "Cancel": "Cancel",
@@ -131,12 +131,26 @@
   "The addresses that are able to help in recovery. You can select up to {{maxHelpers}} trusted helpers.": "The addresses that are able to help in recovery. You can select up to {{maxHelpers}} trusted helpers.",
   "trusted social recovery helpers": "trusted social recovery helpers",
   "The threshold of vouches that is to be reached for the account to be recovered.": "The threshold of vouches that is to be reached for the account to be recovered.",
-  "recoverey threshold": "recoverey threshold",
   "The delay between vouching and the availability of the recovered account.": "The delay between vouching and the availability of the recovered account.",
-  "recoverey block delay": "recoverey block delay",
   "recovery threshold": "recovery threshold",
   "recovery block delay": "recovery block delay",
   "available social recovery helpers": "available social recovery helpers",
   "Verify the password entered above.": "Verify the password entered above.",
-  "password (repeat)": "password (repeat)"
+  "password (repeat)": "password (repeat)",
+  "address forgotten": "address forgotten",
+  "Forget this address": "Forget this address",
+  "Send funds to this address": "Send funds to this address",
+  "My contacts": "My contacts",
+  "address edited": "address edited",
+  "address created": "address created",
+  "Add an address": "Add an address",
+  "Paste here the address of the contact you want to add to your address book.": "Paste here the address of the contact you want to add to your address book.",
+  "address": "address",
+  "Type the name of your contact. This name will be used across all the apps. It can be edited later on.": "Type the name of your contact. This name will be used across all the apps. It can be edited later on.",
+  "Add contact": "Add contact",
+  "No contacts found.": "No contacts found.",
+  "new address": "new address",
+  "no addresses yet add and existring contact": "no addresses yet add and existring contact",
+  "no contracts yet, add an existing contact": "no contracts yet, add an existing contact",
+  "no addresses saved yet, add any existing address": "no addresses saved yet, add any existing address"
 }

packages/apps/public/locales/en/app-address-book.json

@@ -1,25 +0,0 @@
-{
-  "address forgotten": "address forgotten",
-  "Forget this address": "Forget this address",
-  "deposit": "deposit",
-  "Send funds to this address": "Send funds to this address",
-  "My contacts": "My contacts",
-  "address edited": "address edited",
-  "address created": "address created",
-  "Add an address": "Add an address",
-  "Paste here the address of the contact you want to add to your address book.": "Paste here the address of the contact you want to add to your address book.",
-  "address": "address",
-  "Type the name of your contact. This name will be used across all the apps. It can be edited later on.": "Type the name of your contact. This name will be used across all the apps. It can be edited later on.",
-  "name": "name",
-  "Cancel": "Cancel",
-  "Save": "Save",
-  "Add contact": "Add contact",
-  "No contacts found.": "No contacts found.",
-  "new address": "new address",
-  "no tags": "no tags",
-  "filter by tags": "filter by tags",
-  "no addresses yet add and existring contact": "no addresses yet add and existring contact",
-  "no contracts yet, add an existing contact": "no contracts yet, add an existing contact",
-  "filter by name or tags": "filter by name or tags",
-  "no addresses saved yet, add any existing address": "no addresses saved yet, add any existing address"
-}

packages/apps/public/locales/zh/app-accounts.json

@@ -9,7 +9,7 @@
   "Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.": "从这些扩展程序中的任何一个注入的帐户都将出现在此应用程序中并可供使用。 随着更多具有外部签名功能的扩展可用，上面列表将会自动更新.",
   "Learn more...": "了解更多...",
   "My accounts": "我的账户",
-  "Vanity address": "地址美化",
+  "Vanity generator": "地址美化",
   "account backed up": "账号已备份",
   "Backup account": "备份账户",
   "Cancel": "取消",
@@ -95,5 +95,21 @@
   "no tags": "没有标签",
   "filter by tags": "根据标签过滤",
   "no accounts yet, create or import and existing": "还没有账户, 创建或者导入存在的",
-  "no accounts yet, create or import an existing": "还没有账户, 创建或者导入一个已经存在的账户"
+  "no accounts yet, create or import an existing": "还没有账户, 创建或者导入一个已经存在的账户",
+  "address forgotten": "地址忘记了",
+  "Forget this address": "忘记这个地址",
+  "deposit": "存入",
+  "Send funds to this address": "发送资金到这个地址",
+  "My contacts": "我的账户",
+  "address edited": "地址被编辑了",
+  "address created": "地址被创建了",
+  "Add an address": "添加一个地址",
+  "Paste here the address of the contact you want to add to your address book.": "把你想要添加到地址簿的联系人地址粘贴到这里.",
+  "address": "地址",
+  "Type the name of your contact. This name will be used across all the apps. It can be edited later on.": "输入联系人的名字. 这个名字在整个app内可用. 稍后课编辑.",
+  "Add contact": "添加联系人",
+  "No contacts found.": "没有联系人被找到.",
+  "new address": "新建地址",
+  "no addresses yet add and existring contact": "没有地址被添加并且存在联系人",
+  "no contracts yet, add an existing contact": "没有地址，添加一个存在的联系人"
 }

packages/apps/public/locales/zh/app-address-book.json

@@ -1,23 +0,0 @@
-{
-  "address forgotten": "地址忘记了",
-  "Forget this address": "忘记这个地址",
-  "deposit": "存入",
-  "Send funds to this address": "发送资金到这个地址",
-  "My contacts": "我的账户",
-  "address edited": "地址被编辑了",
-  "address created": "地址被创建了",
-  "Add an address": "添加一个地址",
-  "Paste here the address of the contact you want to add to your address book.": "把你想要添加到地址簿的联系人地址粘贴到这里.",
-  "address": "地址",
-  "Type the name of your contact. This name will be used across all the apps. It can be edited later on.": "输入联系人的名字. 这个名字在整个app内可用. 稍后课编辑.",
-  "name": "名称",
-  "Cancel": "取消",
-  "Save": "保存",
-  "Add contact": "添加联系人",
-  "No contacts found.": "没有联系人被找到.",
-  "new address": "新建地址",
-  "no tags": "没有标签",
-  "filter by tags": "使用标签过滤",
-  "no addresses yet add and existring contact": "没有地址被添加并且存在联系人",
-  "no contracts yet, add an existing contact": "没有地址，添加一个存在的联系人"
-}

packages/page-accounts/src/Account.tsx → packages/page-accounts/src/Accounts/Account.tsx

@@ -14,6 +14,7 @@ import { Option } from '@polkadot/types';
 import keyring from '@polkadot/ui-keyring';
 import { formatBalance, formatNumber } from '@polkadot/util';
 
+import { useTranslation } from '../translate';
 import Backup from './modals/Backup';
 import ChangePass from './modals/ChangePass';
 import Derive from './modals/Derive';
@@ -21,7 +22,6 @@ import Identity from './modals/Identity';
 import RecoverAccount from './modals/RecoverAccount';
 import RecoverSetup from './modals/RecoverSetup';
 import Transfer from './modals/Transfer';
-import { useTranslation } from './translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/Banner.tsx → packages/page-accounts/src/Accounts/Banner.tsx

@@ -9,7 +9,7 @@ import { availableExtensions } from '@polkadot/apps-config/extensions';
 import { isWeb3Injected } from '@polkadot/extension-dapp';
 import { stringUpperFirst } from '@polkadot/util';
 
-import { useTranslation } from './translate';
+import { useTranslation } from '../translate';
 
 // it would have been really good to import this from detect, however... not exported
 type Browser = 'chrome' | 'firefox';

packages/page-accounts/src/Overview.tsx → packages/page-accounts/src/Accounts/index.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { KeyringAddress } from '@polkadot/ui-keyring/types';
-import { ComponentProps as Props } from './types';
+import { ComponentProps as Props } from '../types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -12,12 +12,12 @@ import { getLedger, isLedger } from '@polkadot/react-api';
 import { useAccounts, useFavorites, useToggle } from '@polkadot/react-hooks';
 import { Button, Input, Table } from '@polkadot/react-components';
 
+import { useTranslation } from '../translate';
 import CreateModal from './modals/Create';
 import ImportModal from './modals/Import';
 import QrModal from './modals/Qr';
 import Account from './Account';
 import Banner from './Banner';
-import { useTranslation } from './translate';
 
 type SortedAccount = { address: string; isFavorite: boolean };
 

packages/page-accounts/src/modals/Backup.tsx → packages/page-accounts/src/Accounts/modals/Backup.tsx

@@ -9,7 +9,7 @@ import React, { useState, useMemo } from 'react';
 import { AddressRow, Button, Modal, Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 
 interface Props extends BareProps {
   onClose: () => void;

packages/page-accounts/src/modals/ChangePass.tsx → packages/page-accounts/src/Accounts/modals/ChangePass.tsx

@@ -9,7 +9,7 @@ import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/reac
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import keyring from '@polkadot/ui-keyring';
 
-import translate from '../translate';
+import translate from '../../translate';
 
 interface Props extends I18nProps {
   address: string;

packages/page-accounts/src/modals/Create.tsx → packages/page-accounts/src/Accounts/modals/Create.tsx

@@ -5,7 +5,7 @@
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { CreateResult } from '@polkadot/ui-keyring/types';
 import { KeypairType } from '@polkadot/util-crypto/types';
-import { ModalProps } from '../types';
+import { ModalProps } from '../../types';
 
 import FileSaver from 'file-saver';
 import React, { useMemo, useState } from 'react';
@@ -18,7 +18,7 @@ import uiSettings from '@polkadot/ui-settings';
 import { isHex, u8aToHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicGenerate, mnemonicValidate, randomAsU8a } from '@polkadot/util-crypto';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 import CreateConfirmation from './CreateConfirmation';
 
 interface Props extends ModalProps {

packages/page-accounts/src/modals/CreateConfirmation.tsx → packages/page-accounts/src/Accounts/modals/CreateConfirmation.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import { AddressRow, Button, Modal } from '@polkadot/react-components';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/Derive.tsx → packages/page-accounts/src/Accounts/modals/Derive.tsx

@@ -12,7 +12,7 @@ import { useDebounce } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import { keyExtractPath } from '@polkadot/util-crypto';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 import { downloadAccount } from './Create';
 import CreateConfirmation from './CreateConfirmation';
 

packages/page-accounts/src/modals/Identity.tsx → packages/page-accounts/src/Accounts/modals/Identity.tsx

@@ -12,7 +12,7 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { Data, Option } from '@polkadot/types';
 import { u8aToString } from '@polkadot/util';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/Import.tsx → packages/page-accounts/src/Accounts/modals/Import.tsx

@@ -5,14 +5,14 @@
 import { KeyringPair$Json } from '@polkadot/keyring/types';
 import { I18nProps } from '@polkadot/react-components/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ModalProps } from '../types';
+import { ModalProps } from '../../types';
 
 import React from 'react';
 import { AddressRow, Button, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
 import { isHex, isObject, u8aToString } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
 
-import translate from '../translate';
+import translate from '../../translate';
 
 interface Props extends ModalProps, I18nProps {}
 

packages/page-accounts/src/modals/Qr.tsx → packages/page-accounts/src/Accounts/modals/Qr.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ModalProps } from '../types';
+import { ModalProps } from '../../types';
 
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -10,7 +10,7 @@ import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-
 import { QrScanAddress } from '@polkadot/react-qr';
 import keyring from '@polkadot/ui-keyring';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 
 interface Scanned {
   address: string;

packages/page-accounts/src/modals/RecoverAccount.tsx → packages/page-accounts/src/Accounts/modals/RecoverAccount.tsx

@@ -5,7 +5,7 @@
 import React, { useState } from 'react';
 import { InputAddress, Modal, TxButton } from '@polkadot/react-components';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/RecoverSetup.tsx → packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { InputAddressMulti, InputAddress, InputNumber, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts, useAddresses } from '@polkadot/react-hooks';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/Transfer.tsx → packages/page-accounts/src/Accounts/modals/Transfer.tsx

@@ -10,9 +10,8 @@ import styled from 'styled-components';
 import { InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
-// import Checks from '@polkadot/react-signer/Checks';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 
 interface Props {
   className?: string;
@@ -23,43 +22,6 @@ interface Props {
 
 const ZERO = new BN(0);
 
-// TODO Re-enable when we have proper fee calculation (incl. weights)
-// async function calcMax (api: ApiPromise, balances_fees: DerivedFees | undefined, senderId: string, recipientId: string): Promise<BN> {
-//   let maxBalance = new BN(1);
-
-//   if (!balances_fees) {
-//     return maxBalance;
-//   }
-
-//   const { transferFee, transactionBaseFee, transactionByteFee, creationFee } = balances_fees;
-
-//   const [senderNonce, senderBalances, recipientBalances] = await Promise.all([
-//     api.query.system.accountNonce<Index>(senderId),
-//     api.derive.balances.all(senderId),
-//     api.derive.balances.all(recipientId)
-//   ]);
-
-//   let prevMax = new BN(0);
-
-//   // something goes screwy here when we move this out of the component :(
-//   let extrinsic: any;
-
-//   while (!prevMax.eq(maxBalance)) {
-//     prevMax = maxBalance;
-//     extrinsic = api.tx.balances.transfer(senderNonce, prevMax);
-
-//     const txLength = calcTxLength(extrinsic, senderNonce);
-//     const fees = transactionBaseFee
-//       .add(transactionByteFee.mul(txLength))
-//       .add(transferFee)
-//       .add(recipientBalances.availableBalance.isZero() ? creationFee : ZERO);
-
-//     maxBalance = bnMax(senderBalances.availableBalance.sub(fees), ZERO);
-//   }
-
-//   return maxBalance;
-// }
-
 function Transfer ({ className, onClose, recipientId: propRecipientId, senderId: propSenderId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
@@ -71,12 +33,9 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
   const [senderId, setSenderId] = useState<string | null>(propSenderId || null);
 
   useEffect((): void => {
-    senderId && recipientId && setExtrinsic(api.tx.balances.transfer(recipientId, amount || ZERO));
-
-    // We currently have not enabled the max functionality - we don't take care of weights
-    // calcMax(api, balances_fees, senderId, recipientId)
-    //   .then(([maxBalance]): void => setMaxBalance(maxBalance))
-    //   .catch((error: Error): void => console.error(error));
+    senderId && recipientId && setExtrinsic(
+      () => api.tx.balances.transfer(recipientId, amount || ZERO)
+    );
   }, [amount, recipientId, senderId]);
 
   const transferrable = <span className='label'>{t('transferrable')}</span>;
@@ -116,12 +75,6 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
             onChange={setAmount}
             withMax
           />
-          {/* <Checks
-            accountId={senderId}
-            extrinsic={extrinsic}
-            isSendable
-            onChange={setHasAvailable}
-          /> */}
         </div>
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>

packages/page-address-book/src/Address.tsx → packages/page-accounts/src/Contacts/Address.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
@@ -11,9 +11,9 @@ import styled from 'styled-components';
 import { AddressSmall, AddressInfo, Button, ChainLock, Icon, InputTags, Input, LinkExternal, Forget, Menu, Popup, Tag } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
-import Transfer from '@polkadot/app-accounts/modals/Transfer';
 
-import { useTranslation } from './translate';
+import Transfer from '../Accounts/modals/Transfer';
+import { useTranslation } from '../translate';
 
 interface Props {
   address: string;

packages/page-address-book/src/Overview.tsx → packages/page-accounts/src/Contacts/index.tsx

@@ -1,17 +1,17 @@
-// Copyright 2017-2020 @polkadot/app-address-book authors & contributors
+// Copyright 2017-2020 @polkadot/app-accounts 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 { ComponentProps as Props } from './types';
+import { ComponentProps as Props } from '../types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Input, Table } from '@polkadot/react-components';
-import { useAddresses, useFavorites } from '@polkadot/react-hooks';
+import { useAddresses, useFavorites, useToggle } from '@polkadot/react-hooks';
 
 import CreateModal from './modals/Create';
 import Address from './Address';
-import { useTranslation } from './translate';
+import { useTranslation } from '../translate';
 
 type SortedAddress = { address: string; isFavorite: boolean };
 
@@ -20,7 +20,7 @@ const STORE_FAVS = 'accounts:favorites';
 function Overview ({ className, onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { hasAddresses, allAddresses } = useAddresses();
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [isCreateOpen, toggleCreate] = useToggle(false);
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS);
   const [sortedAddresses, setSortedAddresses] = useState<SortedAddress[]>([]);
   const [filter, setFilter] = useState<string>('');
@@ -39,20 +39,18 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
     );
   }, [allAddresses, favorites]);
 
-  const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
-
   return (
     <div className={className}>
       <Button.Group>
         <Button
           icon='add'
           label={t('Add contact')}
-          onClick={_toggleCreate}
+          onClick={toggleCreate}
         />
       </Button.Group>
       {isCreateOpen && (
         <CreateModal
-          onClose={_toggleCreate}
+          onClose={toggleCreate}
           onStatusChange={onStatusChange}
         />
       )}

packages/page-address-book/src/modals/Create.tsx → packages/page-accounts/src/Contacts/modals/Create.tsx

@@ -1,18 +1,18 @@
-// Copyright 2017-2020 @polkadot/app-address-book authors & contributors
+// Copyright 2017-2020 @polkadot/app-accounts 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 { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ModalProps as Props } from '../types';
+import { ModalProps as Props } from '../../types';
 
 import React, { useState } from 'react';
 
 import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
-import { useTranslation } from '../translate';
+import { useTranslation } from '../../translate';
 
-export default function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props> {
+function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ isNameValid, name }, setName] = useState<{ isNameValid: boolean; name: string }>({ isNameValid: false, name: '' });
   const [{ address, isAddressExisting, isAddressValid }, setAddress] = useState<{ address: string; isAddressExisting: boolean; isAddressValid: boolean }>({ address: '', isAddressExisting: false, isAddressValid: false });
@@ -116,3 +116,5 @@ export default function Create ({ onClose, onStatusChange }: Props): React.React
     </Modal>
   );
 }
+
+export default React.memo(Create);

packages/page-accounts/src/Vanity/index.tsx

@@ -15,7 +15,7 @@ import generator from '@polkadot/vanitygen/generator';
 import matchRegex from '@polkadot/vanitygen/regex';
 import generatorSort from '@polkadot/vanitygen/sort';
 
-import CreateModal from '../modals/Create';
+import CreateModal from '../Accounts/modals/Create';
 import translate from '../translate';
 import Match from './Match';
 

packages/page-accounts/src/index.tsx

@@ -3,47 +3,39 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AppProps as Props } from '@polkadot/react-components/types';
-import { ComponentProps } from './types';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 import { useAccounts } from '@polkadot/react-hooks';
 import { HelpOverlay, Tabs } from '@polkadot/react-components';
 
 import basicMd from './md/basic.md';
-import Overview from './Overview';
 import { useTranslation } from './translate';
+import Accounts from './Accounts';
+import Contacts from './Contacts';
 import Vanity from './Vanity';
 
-export default function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
+function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
-  const [hidden, setHidden] = useState<string[]>(['vanity']);
   const items = useMemo(() => [
     {
       isRoot: true,
       name: 'overview',
       text: t('My accounts')
     },
+    {
+      name: 'contacts',
+      text: t('My contacts')
+    },
     {
       name: 'vanity',
-      text: t('Vanity address')
+      text: t('Vanity generator')
     }
   ], [t]);
-
-  useEffect((): void => {
-    setHidden(
-      hasAccounts
-        ? []
-        : ['vanity']
-    );
-  }, [hasAccounts]);
-
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): React.ReactNode => (
-    <Component
-      basePath={basePath}
-      onStatusChange={onStatusChange}
-    />
+  const hidden = useMemo(
+    () => hasAccounts ? [] : ['vanity'],
+    [hasAccounts]
   );
 
   return (
@@ -57,9 +49,27 @@ export default function AccountsApp ({ basePath, onStatusChange }: Props): React
         />
       </header>
       <Switch>
-        <Route path={`${basePath}/vanity`}>{_renderComponent(Vanity)}</Route>
-        <Route>{_renderComponent(Overview)}</Route>
+        <Route path={`${basePath}/contacts`}>
+          <Contacts
+            basePath={basePath}
+            onStatusChange={onStatusChange}
+          />
+        </Route>
+        <Route path={`${basePath}/vanity`}>
+          <Vanity
+            basePath={basePath}
+            onStatusChange={onStatusChange}
+          />
+        </Route>
+        <Route>
+          <Accounts
+            basePath={basePath}
+            onStatusChange={onStatusChange}
+          />
+        </Route>
       </Switch>
     </main>
   );
 }
+
+export default React.memo(AccountsApp);

packages/page-accounts/src/md/basic.md

@@ -42,3 +42,10 @@ Substrate and Polkadot use Schnorrkel/Ristretto x25519 ("sr25519") as its key de
 Sr25519 is based on the same underlying Curve25519 as its EdDSA counterpart, Ed25519. However, it uses Schnorr signatures instead of the EdDSA scheme. Schnorr signatures bring some noticeable benefits over the ECDSA/EdDSA schemes. For one, it is more efficient and still retains the same feature set and security assumptions. Additionally, it allows for native multisignature through signature aggregation.
 
 If you wish to validate, the `session` account needs to use "ed25519" cryptography.
+
+# Contacts
+
+You can store and get quick access to the most commonly used address, such as a friends' account.
+Any contact you create in this interface will be reflected in the application.
+
+You can edit the name of a contact by clicking on it. To remove a contact from the list, click on the trash icon to "Forget" it.

packages/page-address-book/LICENSE

@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.

packages/page-address-book/README.md

@@ -1 +0,0 @@
-# @polkadot/app-address-book

packages/page-address-book/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@polkadot/app-address-book",
-  "private": true,
-  "version": "0.40.0-beta.181",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.9.2",
-    "@polkadot/react-components": "0.40.0-beta.181"
-  }
-}

packages/page-address-book/src/index.tsx

@@ -1,52 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-address-book 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 { AppProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
-import { HelpOverlay } from '@polkadot/react-components';
-import Tabs from '@polkadot/react-components/Tabs';
-
-import basicMd from './md/basic.md';
-import Overview from './Overview';
-import { useTranslation } from './translate';
-
-interface Props extends AppProps {
-  allAddresses?: SubjectInfo;
-  location: any;
-}
-
-export default function AddressBookApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const items = useMemo(() => [
-    {
-      isRoot: true,
-      name: 'overview',
-      text: t('My contacts')
-    }
-  ], [t]);
-
-  return (
-    <main className='address-book--App'>
-      <HelpOverlay md={basicMd} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={items}
-        />
-      </header>
-      <Switch>
-        <Route>
-          <Overview
-            basePath={basePath}
-            location={location}
-            onStatusChange={onStatusChange}
-          />
-        </Route>
-      </Switch>
-    </main>
-  );
-}

packages/page-address-book/src/md/basic.md

@@ -1,6 +0,0 @@
-# Address book
-
-You can store and get quick access to the most commonly used address, such as a friends' account.
-Any contact you create in this interface will be reflected in the application.
-
-You can edit the name of a contact by clicking on it. To remove a contact from the list, click on the trash icon to "Forget" it.

packages/page-address-book/src/translate.ts

@@ -1,11 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-address-book 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 { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
-
-export function useTranslation (): UseTranslationResponse {
-  return useTranslationBase('app-address-book');
-}
-
-export default withTranslation(['app-address-book']);

packages/page-address-book/src/types.ts

@@ -1,15 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-address-book 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 { AppProps } from '@polkadot/react-components/types';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-
-export interface ComponentProps extends AppProps {
-  location: any;
-}
-
-export interface ModalProps {
-  onClose: () => void;
-  onStatusChange: (status: ActionStatus) => void;
-}

packages/react-components/src/i18n.ts

@@ -41,7 +41,6 @@ i18n
     ns: [
       'app-123code',
       'app-accounts',
-      'app-address-book',
       'app-claims',
       'app-contracts',
       'app-council',

tsconfig.json

@@ -14,8 +14,6 @@
       "@polkadot/app-123code/*": [ "packages/page-123code/src/*" ],
       "@polkadot/app-accounts": [ "packages/page-accounts/src" ],
       "@polkadot/app-accounts/*": [ "packages/page-accounts/src/*" ],
-      "@polkadot/app-address-book": [ "packages/page-address-book/src" ],
-      "@polkadot/app-address-book/*": [ "packages/page-address-book/src/*" ],
       "@polkadot/app-claims": [ "packages/page-claims/src" ],
       "@polkadot/app-claims/*": [ "packages/page-claims/src/*" ],
       "@polkadot/app-contracts": [ "packages/page-contracts/src" ],

yarn.lock

@@ -2901,15 +2901,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/app-address-book@workspace:packages/page-address-book":
-  version: 0.0.0-use.local
-  resolution: "@polkadot/app-address-book@workspace:packages/page-address-book"
-  dependencies:
-    "@babel/runtime": ^7.9.2
-    "@polkadot/react-components": 0.40.0-beta.181
-  languageName: unknown
-  linkType: soft
-
 "@polkadot/app-claims@workspace:packages/page-claims":
   version: 0.0.0-use.local
   resolution: "@polkadot/app-claims@workspace:packages/page-claims"