solution: common class for new tx ui

packages/react-app/src/transaction/SetupTransaction/flow/blockchain/ethereum/erc20/approve.tsx

@@ -1,25 +1,23 @@
 import { EthereumEntry, isEthereumEntry } from '@emeraldpay/emerald-vault-core';
 import { Blockchains, blockchainIdToCode, workflow } from '@emeraldwallet/core';
-import { CreateTxStage } from '@emeraldwallet/store';
 import { FormLabel, FormRow } from '@emeraldwallet/ui';
 import * as React from 'react';
 import { SelectAsset } from '../../../../../../common/SelectAsset';
 import { SelectEntry } from '../../../../../../common/SelectEntry';
 import { ToField } from '../../../../../../common/ToField';
-import { Actions, ApproveAmount, EthereumFee } from '../../../components';
-import { CommonFlow, Data, DataProvider, Handler } from '../../../types';
+import { EthereumCommonFlow } from '../../../common';
+import { ApproveAmount } from '../../../components';
+import { Data, DataProvider, Handler } from '../../../types';
 
 type EthereumData = Data<workflow.CreateErc20ApproveTx, EthereumEntry>;
 
-export class Erc20ApproveFlow implements CommonFlow {
+export class Erc20ApproveFlow extends EthereumCommonFlow {
   readonly data: EthereumData;
-  readonly dataProvider: DataProvider;
-  readonly handler: Handler;
 
   constructor(data: EthereumData, dataProvider: DataProvider, handler: Handler) {
+    super(data, dataProvider, handler);
+
     this.data = data;
-    this.dataProvider = dataProvider;
-    this.handler = handler;
   }
 
   private renderFrom(): React.ReactNode {
@@ -102,35 +100,6 @@ export class Erc20ApproveFlow implements CommonFlow {
     return <ApproveAmount createTx={createTx} setTransaction={setTransaction} />;
   }
 
-  private renderFee(): React.ReactElement {
-    const {
-      createTx,
-      fee: { loading, range },
-    } = this.data;
-
-    if (!workflow.isEthereumFeeRange(range)) {
-      throw new Error('Bitcoin transaction or fee provided for Ethereum transaction');
-    }
-
-    const { setTransaction } = this.handler;
-
-    return <EthereumFee createTx={createTx} feeRange={range} initializing={loading} setTransaction={setTransaction} />;
-  }
-
-  private renderActions(): React.ReactElement {
-    const { createTx, entry, fee } = this.data;
-    const { onCancel, setEntry, setStage, setTransaction } = this.handler;
-
-    const handleCreateTx = (): void => {
-      setEntry(entry);
-      setTransaction(createTx.dump());
-
-      setStage(CreateTxStage.SIGN);
-    };
-
-    return <Actions createTx={createTx} initializing={fee.loading} onCancel={onCancel} onCreate={handleCreateTx} />;
-  }
-
   render(): React.ReactElement {
     return (
       <>

packages/react-app/src/transaction/SetupTransaction/flow/blockchain/ethereum/erc20/convert.tsx

@@ -1,24 +1,22 @@
 import { EthereumEntry, isEthereumEntry } from '@emeraldpay/emerald-vault-core';
 import { Blockchains, blockchainIdToCode, workflow } from '@emeraldwallet/core';
-import { CreateTxStage } from '@emeraldwallet/store';
 import { FormLabel, FormRow } from '@emeraldwallet/ui';
 import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import * as React from 'react';
 import { SelectEntry } from '../../../../../../common/SelectEntry';
-import { Actions, Amount, EthereumFee } from '../../../components';
-import { CommonFlow, Data, DataProvider, Handler } from '../../../types';
+import { EthereumCommonFlow } from '../../../common';
+import { Amount } from '../../../components';
+import { Data, DataProvider, Handler } from '../../../types';
 
 type EthereumData = Data<workflow.CreateErc20ConvertTx, EthereumEntry>;
 
-export class Erc20ConvertFlow implements CommonFlow {
+export class Erc20ConvertFlow extends EthereumCommonFlow {
   readonly data: EthereumData;
-  readonly dataProvider: DataProvider;
-  readonly handler: Handler;
 
   constructor(data: EthereumData, dataProvider: DataProvider, handler: Handler) {
+    super(data, dataProvider, handler);
+
     this.data = data;
-    this.dataProvider = dataProvider;
-    this.handler = handler;
   }
 
   private renderDirection(): React.ReactElement {
@@ -80,35 +78,6 @@ export class Erc20ConvertFlow implements CommonFlow {
     return <Amount createTx={createTx} maxDisabled={fee.loading} setTransaction={setTransaction} />;
   }
 
-  private renderFee(): React.ReactElement {
-    const {
-      createTx,
-      fee: { loading, range },
-    } = this.data;
-
-    if (!workflow.isEthereumFeeRange(range)) {
-      throw new Error('Bitcoin transaction or fee provided for Ethereum transaction');
-    }
-
-    const { setTransaction } = this.handler;
-
-    return <EthereumFee createTx={createTx} feeRange={range} initializing={loading} setTransaction={setTransaction} />;
-  }
-
-  private renderActions(): React.ReactElement {
-    const { createTx, entry, fee } = this.data;
-    const { onCancel, setEntry, setStage, setTransaction } = this.handler;
-
-    const handleCreateTx = (): void => {
-      setEntry(entry);
-      setTransaction(createTx.dump());
-
-      setStage(CreateTxStage.SIGN);
-    };
-
-    return <Actions createTx={createTx} initializing={fee.loading} onCancel={onCancel} onCreate={handleCreateTx} />;
-  }
-
   render(): React.ReactElement {
     return (
       <>

packages/react-app/src/transaction/SetupTransaction/flow/blockchain/ethereum/recovery.tsx

@@ -1,26 +1,23 @@
 import { EthereumEntry, WalletEntry, isEthereumEntry } from '@emeraldpay/emerald-vault-core';
 import { Blockchains, blockchainIdToCode, formatAmount, workflow } from '@emeraldwallet/core';
-import { CreateTxStage } from '@emeraldwallet/store';
 import { FormLabel, FormRow } from '@emeraldwallet/ui';
 import { Typography } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import * as React from 'react';
 import { SelectAsset } from '../../../../../common/SelectAsset';
 import { SelectEntry } from '../../../../../common/SelectEntry';
-import { Actions, EthereumFee } from '../../components';
-import { CommonFlow, Data, DataProvider, Handler } from '../../types';
+import { EthereumCommonFlow } from '../../common';
+import { Data, DataProvider, Handler } from '../../types';
 
 type EthereumData = Data<workflow.CreateEtherRecoveryTx | workflow.CreateErc20RecoveryTx, EthereumEntry>;
 
-export class EthereumRecoveryFlow implements CommonFlow {
+export class EthereumRecoveryFlow extends EthereumCommonFlow {
   readonly data: EthereumData;
-  readonly dataProvider: DataProvider;
-  readonly handler: Handler;
 
   constructor(data: EthereumData, dataProvider: DataProvider, handler: Handler) {
+    super(data, dataProvider, handler);
+
     this.data = data;
-    this.dataProvider = dataProvider;
-    this.handler = handler;
   }
 
   private getToEntries(): EthereumEntry[] {
@@ -110,35 +107,6 @@ export class EthereumRecoveryFlow implements CommonFlow {
     );
   }
 
-  private renderFee(): React.ReactElement {
-    const {
-      createTx,
-      fee: { loading, range },
-    } = this.data;
-
-    if (!workflow.isEthereumFeeRange(range)) {
-      throw new Error('Bitcoin transaction or fee provided for Ethereum transaction');
-    }
-
-    const { setTransaction } = this.handler;
-
-    return <EthereumFee createTx={createTx} feeRange={range} initializing={loading} setTransaction={setTransaction} />;
-  }
-
-  private renderActions(): React.ReactElement {
-    const { createTx, entry, fee } = this.data;
-    const { onCancel, setEntry, setStage, setTransaction } = this.handler;
-
-    const handleCreateTx = (): void => {
-      setEntry(entry);
-      setTransaction(createTx.dump());
-
-      setStage(CreateTxStage.SIGN);
-    };
-
-    return <Actions createTx={createTx} initializing={fee.loading} onCancel={onCancel} onCreate={handleCreateTx} />;
-  }
-
   render(): React.ReactElement {
     const { entry } = this.data;
 

packages/react-app/src/transaction/SetupTransaction/flow/common/common.tsx

@@ -0,0 +1,62 @@
+import { EthereumEntry, WalletEntry } from '@emeraldpay/emerald-vault-core';
+import { workflow } from '@emeraldwallet/core';
+import { AnyCreateTx } from '@emeraldwallet/core/src/transaction/workflow';
+import { CreateTxStage } from '@emeraldwallet/store';
+import * as React from 'react';
+import { Actions, EthereumFee } from '../components';
+import { BaseFlow, Data, DataProvider, Handler } from '../types';
+
+export abstract class CommonFlow implements BaseFlow {
+  readonly data: Data<AnyCreateTx, WalletEntry>;
+  readonly dataProvider: DataProvider;
+  readonly handler: Handler;
+
+  constructor(data: Data<AnyCreateTx, WalletEntry>, dataProvider: DataProvider, handler: Handler) {
+    this.data = data;
+    this.dataProvider = dataProvider;
+    this.handler = handler;
+  }
+
+  abstract render(): React.ReactElement;
+
+  renderActions(): React.ReactElement {
+    const { createTx, entry, fee } = this.data;
+    const { onCancel, setEntry, setStage, setTransaction } = this.handler;
+
+    const handleCreateTx = (): void => {
+      setEntry(entry);
+      setTransaction(createTx.dump());
+
+      setStage(CreateTxStage.SIGN);
+    };
+
+    return <Actions createTx={createTx} initializing={fee.loading} onCancel={onCancel} onCreate={handleCreateTx} />;
+  }
+}
+
+type EthereumData = Data<workflow.AnyEthereumCreateTx, EthereumEntry>;
+
+export abstract class EthereumCommonFlow extends CommonFlow {
+  readonly data: EthereumData;
+
+  constructor(data: EthereumData, dataProvider: DataProvider, handler: Handler) {
+    super(data, dataProvider, handler);
+
+    this.data = data;
+  }
+
+  renderFee(): React.ReactElement {
+    const {
+      createTx,
+      fee: { loading, range },
+    } = this.data;
+
+    if (!workflow.isEthereumFeeRange(range)) {
+      throw new Error('Bitcoin transaction or fee provided for Ethereum transaction');
+    }
+
+    const { setTransaction } = this.handler;
+
+    return <EthereumFee createTx={createTx} feeRange={range} initializing={loading} setTransaction={setTransaction} />;
+  }
+}

packages/react-app/src/transaction/SetupTransaction/flow/common/index.ts

@@ -1,4 +1,5 @@
 /* eslint sort-exports/sort-exports: error */
 
+export { CommonFlow, EthereumCommonFlow } from './common';
 export { ModifyFlow } from './modify';
 export { TransferFlow } from './transfer';

packages/react-app/src/transaction/SetupTransaction/flow/common/modify.tsx

@@ -3,11 +3,11 @@ import { PersistentState, workflow } from '@emeraldwallet/core';
 import { CreateTxStage } from '@emeraldwallet/store';
 import * as React from 'react';
 import { Actions } from '../components';
-import { CommonFlow, Data, DataProvider, Handler } from '../types';
+import { BaseFlow, Data, DataProvider, Handler } from '../types';
 
 type CommonData = Data<workflow.AnyCreateTx, WalletEntry>;
 
-export abstract class ModifyFlow implements CommonFlow {
+export abstract class ModifyFlow implements BaseFlow {
   readonly data: CommonData;
   readonly dataProvider: DataProvider;
   readonly handler: Handler;

packages/react-app/src/transaction/SetupTransaction/flow/common/transfer.tsx

@@ -1,23 +1,21 @@
 import { WalletEntry } from '@emeraldpay/emerald-vault-core';
 import { workflow } from '@emeraldwallet/core';
-import { CreateTxStage } from '@emeraldwallet/store';
 import { FormLabel, FormRow } from '@emeraldwallet/ui';
 import * as React from 'react';
 import { SelectEntry } from '../../../../common/SelectEntry';
-import { Actions, Amount, To } from '../components';
-import { CommonFlow, Data, DataProvider, Handler } from '../types';
+import { Amount, To } from '../components';
+import { Data, DataProvider, Handler } from '../types';
+import { CommonFlow } from './common';
 
 type CommonData = Data<workflow.AnyBitcoinCreateTx | workflow.CreateEtherTx | workflow.CreateErc20Tx, WalletEntry>;
 
-export abstract class TransferFlow implements CommonFlow {
+export abstract class TransferFlow extends CommonFlow {
   readonly data: CommonData;
-  readonly dataProvider: DataProvider;
-  readonly handler: Handler;
 
   constructor(data: CommonData, dataProvider: DataProvider, handler: Handler) {
+    super(data, dataProvider, handler);
+
     this.data = data;
-    this.dataProvider = dataProvider;
-    this.handler = handler;
   }
 
   abstract render(): React.ReactElement;
@@ -53,18 +51,4 @@ export abstract class TransferFlow implements CommonFlow {
 
     return <Amount createTx={createTx} maxDisabled={fee.loading} setTransaction={setTransaction} />;
   }
-
-  renderActions(): React.ReactElement {
-    const { createTx, entry, fee } = this.data;
-    const { onCancel, setEntry, setStage, setTransaction } = this.handler;
-
-    const handleCreateTx = (): void => {
-      setEntry(entry);
-      setTransaction(createTx.dump());
-
-      setStage(CreateTxStage.SIGN);
-    };
-
-    return <Actions createTx={createTx} initializing={fee.loading} onCancel={onCancel} onCreate={handleCreateTx} />;
-  }
 }

packages/react-app/src/transaction/SetupTransaction/flow/types.ts

@@ -54,7 +54,7 @@ export interface Handler {
   setTransaction(transaction: workflow.AnyPlainTx): void;
 }
 
-export abstract class CommonFlow {
+export abstract class BaseFlow {
   abstract readonly data: Data<workflow.AnyCreateTx, WalletEntry>;
   abstract readonly dataProvider: DataProvider;
   abstract readonly handler: Handler;