Account create options, sort by created (#2161)

packages/app-accounts/src/Account.tsx

@@ -63,14 +63,14 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
   useEffect((): void => {
     const account = keyring.getAccount(address);
 
-    setGenesisHash((account && account.meta.genesisHash) || null);
+    setGenesisHash(account?.meta.genesisHash || null);
     setFlags({
-      isDevelopment: (account && account.meta.isTesting) || false,
+      isDevelopment: account?.meta.isTesting || false,
       isEditable: (account && !(account.meta.isInjected || account.meta.isHardware)) || false,
-      isExternal: (account && account.meta.isExternal) || false
+      isExternal: account?.meta.isExternal || false
     });
-    _setTags(account?.meta?.tags || []);
-    setAccName(account?.meta?.name || '');
+    _setTags(account?.meta.tags || []);
+    setAccName(account?.meta.name || '');
   }, [address]);
 
   useEffect((): void => {

packages/app-accounts/src/Overview.tsx

@@ -2,6 +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 { KeyringAddress } from '@polkadot/ui-keyring/types';
 import { ComponentProps as Props } from './types';
 
 import React, { useEffect, useState } from 'react';
@@ -49,6 +50,12 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
     setSortedAccounts(
       allAccounts
         .map((address): SortedAccount => ({ address, isFavorite: favorites.includes(address) }))
+        .sort((a, b): number => {
+          const accA = keyring.getAccount(a.address) as KeyringAddress;
+          const accB = keyring.getAccount(b.address) as KeyringAddress;
+
+          return (accA.meta.whenCreated || 0) - (accB.meta.whenCreated || 0);
+        })
         .sort((a, b): number =>
           a.isFavorite === b.isFavorite
             ? 0

packages/app-accounts/src/modals/Create.tsx

@@ -39,6 +39,12 @@ interface AddressState {
   seedType: SeedType;
 }
 
+interface CreateOptions {
+  genesisHash?: string;
+  name: string;
+  tags?: string[];
+}
+
 const DEFAULT_PAIR_TYPE = 'sr25519';
 
 function deriveValidate (seed: string, derivePath: string, pairType: KeypairType): string | null {
@@ -129,12 +135,12 @@ export function downloadAccount ({ json, pair }: CreateResult): void {
   InputAddress.setLastValue('account', pair.address);
 }
 
-function createAccount (suri: string, pairType: KeypairType, name: string, password: string, success: string): ActionStatus {
+function createAccount (suri: string, pairType: KeypairType, { genesisHash, name, tags = [] }: CreateOptions, password: string, success: string): ActionStatus {
   // we will fill in all the details below
   const status = { action: 'create' } as ActionStatus;
 
   try {
-    const result = keyring.addUri(suri, password, { name: name.trim(), tags: [] }, pairType);
+    const result = keyring.addUri(suri, password, { genesisHash, name, tags }, pairType);
     const { address } = result.pair;
 
     status.account = address;
@@ -152,7 +158,7 @@ function createAccount (suri: string, pairType: KeypairType, name: string, passw
 
 function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: propsType }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { isDevelopment } = useApi();
+  const { api, isDevelopment } = useApi();
   const [{ address, deriveError, derivePath, isSeedValid, pairType, seed, seedType }, setAddress] = useState<AddressState>(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
   const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
   const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
@@ -180,7 +186,8 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
       return;
     }
 
-    const status = createAccount(`${seed}${derivePath}`, pairType, name, password, t('created account'));
+    const options = { genesisHash: isDevelopment ? undefined : api.genesisHash.toString(), name: name.trim() };
+    const status = createAccount(`${seed}${derivePath}`, pairType, options, password, t('created account'));
 
     _toggleConfirmation();
     onStatusChange(status);