Merge pull request #1271 from emeraldpay/sort-history-txs

solution: sort transaction history correctly

Author: splix

.eslintignore

@@ -3,6 +3,6 @@
 # Always ignore node_modules.
 **/node_modules/
 
-packages/*/lib
-packages/*/coverage
-packages/desktop/app
+packages/*/coverage/
+packages/*/lib/
+packages/desktop/app/

package.json

@@ -28,8 +28,8 @@
     "packages/*"
   ],
   "resolutions": {
-    "@emeraldpay/api": "https://artifacts.emerald.cash/builds/emerald-api-js/4da5396f/emeraldpay-api-v0.3.1.tgz",
-    "@emeraldpay/api-node": "https://artifacts.emerald.cash/builds/emerald-api-js/4da5396f/emeraldpay-api-node-v0.3.1.tgz",
+    "@emeraldpay/api": "https://artifacts.emerald.cash/builds/emerald-api-js/e089d955/emeraldpay-api-v0.3.2.tgz",
+    "@emeraldpay/api-node": "https://artifacts.emerald.cash/builds/emerald-api-js/e089d955/emeraldpay-api-node-v0.3.2.tgz",
     "@emeraldpay/emerald-vault-core": "https://artifacts.emerald.cash/builds/vault-node/350c3905/emeraldpay-emerald-vault-core-v0.11.0-dev.tgz",
     "@emeraldpay/emerald-vault-native": "https://artifacts.emerald.cash/builds/vault-node/350c3905/emeraldpay-emerald-vault-native-v0.11.0-dev.tgz"
   }

packages/core/src/persistentState.ts

@@ -103,16 +103,11 @@ export interface Change {
 }
 
 export interface UnconfirmedTransaction {
-
   blockchain: number;
-  txId: string;
-  version?: number;
-
   /**
    * Changes and references to the user wallets
    */
   changes: Change[];
-
   /**
    * Application state of the transaction. In general, it's PREPARED->SUBMITTED->CONFIRMED, but have other states
    */
@@ -127,6 +122,8 @@ export interface UnconfirmedTransaction {
    * It may be OK or FAILED. Before the inclusion it's UNKNOWN
    */
   status: Status;
+  txId: string;
+  version?: number;
 }
 
 export interface TransactionConfirmation {
@@ -152,10 +149,9 @@ export type ConfirmedTransaction = UnconfirmedTransaction & TransactionConfirmat
 export type Transaction = UnconfirmedTransaction | ConfirmedTransaction;
 
 export function isConfirmed(tx: Transaction): tx is ConfirmedTransaction {
-  return typeof tx == "object" && Object.keys(tx).indexOf("block") >= 0;
+  return typeof tx === 'object' && Object.keys(tx).indexOf('block') >= 0;
 }
 
-
 /**
  * Criteria to select transactions when queried
  */
@@ -342,7 +338,6 @@ export interface Balance {
    * Timestamp when it was cached. Set automatically when added to the persistent state.
    */
   timestamp?: Date | undefined;
-
   /**
    * Individual components of the balance for the current address.
    * Must contain only _unspent_ transactions and the total amount MUST equal the main `amount` field of the `Balance` object.
@@ -357,9 +352,9 @@ export interface Balance {
  * Bitcoin UTXO details
  */
 export interface Utxo {
+  amount: string;
   txid: string;
   vout: number;
-  amount: string;
 }
 
 /**
@@ -390,14 +385,12 @@ export interface Cache {
    * @param ttl_seconds (optionally) a Time To Live for that value. Note that the cache purges the data only occasionally and data may live longer in the cache
    */
   put(id: string, value: string, ttl_seconds?: number | undefined): Promise<void>;
-
   /**
    * Get known value. Return null if cache has no `value` for the specified `id`
    *
    * @param id id for the data
    */
   get(id: string): Promise<string | null>;
-
   /**
    * Remove a value for the specified `id` from the cache
    *
@@ -415,6 +408,10 @@ export interface PersistentState {
    * Manage current balance cache
    */
   balances: Balances;
+  /**
+   * Generic cache
+   */
+  cache: Cache;
   /**
    * Manage Transaction History
    */
@@ -427,9 +424,4 @@ export interface PersistentState {
    * Manage XPub position
    */
   xpubpos: XPubPosition;
-
-  /**
-   * Generic cache
-   */
-  cache: Cache;
 }

packages/electron-app/src/application/ipc/application.ts

@@ -112,7 +112,9 @@ export function setupApiIpc(app: Application, apiAccess: EmeraldApiAccess): void
   ipcMain.handle(IpcCommands.BROADCAST_TX, (event, blockchain: BlockchainCode, tx: string) => {
     if (isEthereum(blockchain)) {
       return app.rpc.chain(blockchain).eth.sendRawTransaction(tx);
-    } else if (isBitcoin(blockchain)) {
+    }
+
+    if (isBitcoin(blockchain)) {
       return new Promise((resolve, reject) => {
         apiAccess.blockchainClient
           .nativeCall(blockchainCodeToId(blockchain), [
@@ -122,24 +124,24 @@ export function setupApiIpc(app: Application, apiAccess: EmeraldApiAccess): void
               payload: [tx],
             },
           ])
-          .onData((resp) => {
-            if (isNativeCallResponse(resp)) {
-              const hash = resp.payload as string;
+          .onData((response) => {
+            if (isNativeCallResponse(response)) {
+              const hash = response.payload as string;
 
               log.info(`Broadcast transaction: ${hash}`);
 
               resolve(hash);
-            } else if (isNativeCallError(resp)) {
-              reject(resp.message);
+            } else if (isNativeCallError(response)) {
+              reject(response.message);
             } else {
               reject('Invalid response from API');
             }
           })
           .onError((err) => reject(err.message));
       });
-    } else {
-      log.error('Invalid blockchain: ' + blockchain);
     }
+
+    log.error(`Invalid blockchain: ${blockchain}`);
   });
 
   ipcMain.handle(IpcCommands.GET_BALANCE, (event, blockchain: BlockchainCode, address: string, tokens: string[]) => {

packages/react-app/src/create-account/UnlockSeed.tsx

@@ -1,11 +1,19 @@
 import { Uuid } from '@emeraldpay/emerald-vault-core';
 import { accounts } from '@emeraldwallet/store';
 import { Button, PasswordInput } from '@emeraldwallet/ui';
-import { Box, Grid, Typography } from '@material-ui/core';
+import { Box, Grid, Typography, createStyles, makeStyles } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import * as React from 'react';
 import { connect } from 'react-redux';
 
+const useStyles = makeStyles(
+  createStyles({
+    alert: {
+      marginTop: 20,
+    },
+  }),
+);
+
 interface OwnProps {
   seedId: Uuid;
   onUnlock(password: string): void;
@@ -16,6 +24,8 @@ interface DispatchProps {
 }
 
 const Component: React.FC<OwnProps & DispatchProps> = ({ seedId, onUnlock, verifyPassword }) => {
+  const styles = useStyles();
+
   const [password, setPassword] = React.useState('');
 
   const [invalid, setInvalid] = React.useState(false);
@@ -60,7 +70,9 @@ const Component: React.FC<OwnProps & DispatchProps> = ({ seedId, onUnlock, verif
       </Grid>
       {invalid && (
         <Grid item xs={12}>
-          <Alert severity="error">Invalid password</Alert>
+          <Alert className={styles.alert} severity="error">
+            Invalid password
+          </Alert>
         </Grid>
       )}
     </Grid>

packages/react-app/src/transaction/CreateBitcoinTransaction/Confirm.tsx

@@ -21,6 +21,7 @@ const useStyles = makeStyles(
 
 interface OwnProps {
   blockchain: BlockchainCode;
+  disabled?: boolean;
   entryId: EntryId;
   rawTx: string;
   onConfirm(): void;
@@ -30,7 +31,14 @@ interface DispatchProps {
   onCancel(): void;
 }
 
-const Confirm: React.FC<OwnProps & DispatchProps> = ({ entryId, blockchain, rawTx, onCancel, onConfirm }) => {
+const Confirm: React.FC<OwnProps & DispatchProps> = ({
+  entryId,
+  blockchain,
+  rawTx,
+  onCancel,
+  onConfirm,
+  disabled = false,
+}) => {
   const styles = useStyles();
 
   const [showRaw, setShowRaw] = React.useState(false);
@@ -58,7 +66,7 @@ const Confirm: React.FC<OwnProps & DispatchProps> = ({ entryId, blockchain, rawT
       <FormRow last>
         <ButtonGroup classes={{ container: styles.buttons }}>
           <Button label="Cancel" onClick={onCancel} />
-          <Button label="Send" primary onClick={onConfirm} />
+          <Button label="Send" primary disabled={disabled} onClick={onConfirm} />
         </ButtonGroup>
       </FormRow>
     </>

packages/react-app/src/transaction/CreateBitcoinTransaction/CreateBitcoinTransaction.tsx

@@ -154,7 +154,7 @@ const CreateBitcoinTransaction: React.FC<OwnProps & StateProps & DispatchProps>
   }
 
   return (
-    <Page title={'Create Bitcoin Transaction'} leftIcon={<Back onClick={onCancel} />}>
+    <Page title="Create Bitcoin Transaction" leftIcon={<Back onClick={onCancel} />}>
       {content}
     </Page>
   );

packages/react-app/src/transaction/ModifyBitcoinTransaction/ModifyBitcoinTransaction.tsx

@@ -154,6 +154,10 @@ const ModifyBitcoinTransaction: React.FC<OwnProps & DispatchProps> = ({
   const onSignTransaction = async (): Promise<void> => {
     setPasswordError(undefined);
 
+    if (tx.state > State.SUBMITTED) {
+      return;
+    }
+
     if (restoredTx != null) {
       if (isHardware) {
         signTransaction(restoredTx.create(), (txId, signed) => {
@@ -306,7 +310,7 @@ const ModifyBitcoinTransaction: React.FC<OwnProps & DispatchProps> = ({
               <Button label="Cancel" onClick={goBack} />
               <Button
                 primary
-                disabled={initializing && tx.state > State.SUBMITTED}
+                disabled={initializing || tx.state > State.SUBMITTED}
                 label="Create Transaction"
                 onClick={() => setStage(Stages.SIGN)}
               />
@@ -334,7 +338,7 @@ const ModifyBitcoinTransaction: React.FC<OwnProps & DispatchProps> = ({
                   {!isHardware && (
                     <Button
                       primary
-                      disabled={password.length === 0}
+                      disabled={password.length === 0 || tx.state > State.SUBMITTED}
                       label="Sign Transaction"
                       onClick={onSignTransaction}
                     />
@@ -346,6 +350,7 @@ const ModifyBitcoinTransaction: React.FC<OwnProps & DispatchProps> = ({
           {stage === Stages.CONFIRM && entryId != null && signedRawTx != null && signedTxId != null && (
             <Confirm
               blockchain={blockchainCode}
+              disabled={tx.state > State.SUBMITTED}
               entryId={entryId}
               rawTx={signedRawTx}
               onConfirm={() =>

packages/react-app/src/transactions/TxHistory/List/List.tsx

@@ -72,15 +72,17 @@ const TransactionsList: React.FC<OwnProps> = ({
   };
 
   React.useEffect(() => {
-    if (transactions.length > initialTxCount.current) {
-      setTxIndex(undefined);
-    }
-
     const { current: list } = listElement;
 
     if (list != null) {
       Array.from({ length: transactions.length }).forEach((item, index) => list.recomputeRowHeights(index));
     }
+  }, [transactions]);
+
+  React.useEffect(() => {
+    if (transactions.length > initialTxCount.current) {
+      setTxIndex(undefined);
+    }
   }, [transactions.length]);
 
   return transactions.length > 0 ? (

packages/services/src/services/transactions/TxService.ts

@@ -185,22 +185,18 @@ export class TxService implements IService {
                     log.error(`Error while removing transaction for address ${identifier} from state:`, error),
                   );
               } else {
-
                 let confirmation: PersistentState.TransactionConfirmation | null = null;
+
                 const now = new Date();
 
                 if (tx.block != null) {
                   const { height, timestamp, hash: blockId } = tx.block;
 
                   confirmation = {
-                    block: {
-                      blockId,
-                      height,
-                      timestamp,
-                    },
-                    blockPos: 0, //TODO get transaction index inside the block
+                    block: { blockId, height, timestamp },
+                    blockPos: 0, // TODO Get transaction index inside the block
                     confirmTimestamp: tx.block.timestamp ?? now,
-                  }
+                  };
                 }
 
                 const blockchainCode = blockchainIdToCode(blockchain);
@@ -211,7 +207,7 @@ export class TxService implements IService {
                     .catch((error) => log.error(`Error while set xPub position for address ${identifier}:`, error));
                 }
 
-                let baseTransaction: PersistentState.UnconfirmedTransaction = {
+                const transaction: PersistentState.UnconfirmedTransaction = {
                   blockchain,
                   changes: tx.changes.map<PersistentState.Change>((change) => {
                     const asset =
@@ -232,10 +228,10 @@ export class TxService implements IService {
                   state: tx.mempool ? State.SUBMITTED : State.CONFIRMED,
                   status: tx.failed ? Status.FAILED : Status.OK,
                   txId: tx.txId,
-                }
+                };
 
                 this.persistentState.txhistory
-                  .submit({...baseTransaction, ...confirmation})
+                  .submit({ ...confirmation, ...transaction })
                   .then((merged) => {
                     if (tx.cursor != null && tx.cursor.length > 0) {
                       this.persistentState.txhistory