solution: moved some tx history component to react-app pkg (#1046)

* solution: moved some tx history component to react-app pkg

packages/desktop/electron/main.js

@@ -106,7 +106,10 @@ app.on('ready', () => {
 
   log.info('... start services');
   services.start();
+
+  // Run IPC listeners
   ipc({ settings });
+
   log.info('... services started');
 
   log.info('... subscribe for prices');

packages/desktop/electron/prices.js

@@ -1,3 +1,4 @@
+const { settings } = require('@emeraldwallet/store');
 const log = require('./logger');
 
 class Prices {
@@ -29,7 +30,7 @@ class Prices {
     log.info(`Request for prices, to ${this.to}`);
     const self = this;
     this.listener.request(this.froms, this.to, (result) => {
-      self.webContents.send('prices/rate', result);
+      self.webContents.send('store', settings.actions.setRatesAction(result));
     });
     setTimeout(this.fetch.bind(this), 60000);
   }

packages/desktop/src/components/welcome/welcome.js

@@ -5,6 +5,7 @@ import {Logo} from '@emeraldwallet/ui';
 import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import {withStyles} from '@material-ui/styles';
+import { launcher } from '@emeraldwallet/store';
 import InitialSetup from './initialSetup';
 import { TERMS_VERSION } from '../../store/config';
 
@@ -76,9 +77,9 @@ const StyledWelcome = withStyles(getStyles)(Welcome);
 
 export default connect(
   (state, ownProps) => {
+    const msg = launcher.selectors.getMessage(state);
     return ({
-      message: state.launcher.getIn(['message', 'text']),
-      level: state.launcher.getIn(['message', 'level']),
+      ...msg,
       needSetup: state.launcher.get('configured') && (state.launcher.get('terms') !== TERMS_VERSION),
     });
   },

packages/desktop/src/store/launcher/launcherActions.js

@@ -33,55 +33,25 @@ export function agreeOnTerms(v) {
   };
 }
 
-export function saveSettings(extraSettings) {
-  extraSettings = extraSettings || {};
-  return (dispatch, getState) => {
-    const geth = getState().launcher.get('geth').toJS();
-    const chain = getState().launcher.get('chain').toJS();
-
-    const settings = { geth, chain, ...extraSettings };
-
-    log.info('Save settings', settings);
-
-    ipcRenderer.send('settings', settings);
-
-    dispatch({
-      type: 'LAUNCHER/SETTINGS',
-      updated: false,
-    });
-  };
-}
-
-// TODO: depricated
-export function listenElectron() {
-  return (dispatch, getState) => {
-    log.debug('Running launcher listener');
-
-    ipcRenderer.on('launcher', (event, type, message) => {
-      log.debug('launcher listener: ', 'type', type, 'message', message);
-
-      dispatch({
-        type: `LAUNCHER/${type}`,
-        ...message,
-      });
-
-      if (type === 'CHAIN') {
-        if (getState().launcher.getIn(['chain', 'id']) !== message.chainId) {
-          // Launcher sent chain different from what user has chosen
-          // Alert !
-          dispatch(screen.actions.showError(
-            new Error(`Launcher connected to invalid chain: [${message.chain}, ${message.chainId}]`)
-          ));
-        } else {
-          dispatch({
-            type: 'NETWORK/SWITCH_CHAIN',
-            ...message,
-          });
-        }
-      }
-    });
-  };
-}
+// TODO: Depricated
+// export function saveSettings(extraSettings) {
+//   extraSettings = extraSettings || {};
+//   return (dispatch, getState) => {
+//     const geth = getState().launcher.get('geth').toJS();
+//     const chain = getState().launcher.get('chain').toJS();
+//
+//     const settings = { geth, chain, ...extraSettings };
+//
+//     log.info('Save settings', settings);
+//
+//     ipcRenderer.send('settings', settings);
+//
+//     dispatch({
+//       type: 'LAUNCHER/SETTINGS',
+//       updated: false,
+//     });
+//   };
+// }
 
 export function connecting(value) {
   return {

packages/desktop/src/store/store.js

@@ -17,7 +17,6 @@ import tokens from './vault/tokens';
 
 import {
   readConfig,
-  listenElectron,
   connecting
 } from './launcher/launcherActions';
 // import { showError } from './wallet/screen/screenActions';
@@ -42,7 +41,7 @@ global.api = api;
 function refreshAll() {
   const promises = [
     // store.dispatch(accounts.actions.loadPendingTransactions()), // TODO: Fix it
-    store.dispatch(addresses.actions.loadAccountsList()),
+    // store.dispatch(addresses.actions.loadAccountsList()),
   ];
 
   // Main loop that will refresh UI as needed
@@ -53,8 +52,6 @@ function refreshAll() {
 
 export function startSync() {
   log.info('Start synchronization');
-  store.dispatch(settings.actions.listenPrices());
-
   const promises = [];
 
   promises.push(
@@ -127,6 +124,9 @@ function newWalletVersionCheck() {
   });
 }
 
+/**
+ * Listen to IPC channel 'store' and dispatch action to redux store
+ */
 export function electronToStore() {
   return (dispatch) => {
     log.debug('Running launcher listener for Redux');
@@ -144,7 +144,6 @@ export const start = () => {
   } catch (e) {
     log.error(e);
   }
-  store.dispatch(listenElectron());
   store.dispatch(electronToStore());
   getInitialScreen();
   newWalletVersionCheck();

packages/react-app/src/ledger/ImportAccount/Container.tsx

@@ -56,7 +56,7 @@ export default connect(
           const acc = { id: address, blockchain };
           return dispatch(addresses.actions.loadAccountsList(() => {
             // go to account details only when accounts updated
-            dispatch(screen.actions.gotoScreen('account', acc));
+            dispatch(screen.actions.gotoScreen(screen.Pages.ACCOUNT, acc));
           }) as any);
         });
     },

packages/react-app/src/transaction/CreateTx/TokenField/TokenField.spec.tsx

@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { TokenField } from './TokenField';
 
-const reduceClasses = (prev: any, curr: any) => ({ ...prev,  [curr]: curr });
+const reduceClasses = (prev: any, curr: any) => ({ ...prev, [curr]: curr });
 const classes = Object.keys({ container: {} }).reduce(reduceClasses, {});
 
 describe('TokenField', () => {

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

@@ -1,13 +1,14 @@
 import {
-  Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
+  createStyles,
+  Table, TableBody, TableCell, TableHead, TableRow
+} from '@material-ui/core';
 import { withStyles, withTheme } from '@material-ui/styles';
-import { Styles } from '@material-ui/styles/withStyles';
 import cx from 'classnames';
 import { List } from 'immutable';
 import * as React from 'react';
 import Transaction from './Transaction';
 
-const styles = {
+const styles = createStyles({
   columnName: {
     textTransform: 'uppercase',
     fontSize: '11px !important',
@@ -33,7 +34,7 @@ const styles = {
     paddingRight: '0px !important',
     width: '24px'
   }
-} as Styles<any, any>;
+});
 
 interface IProps {
   transactions: List<any>;

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

@@ -1,10 +1,10 @@
 import { blockchainById, blockchainByName } from '@emeraldwallet/core';
-import { addresses, blockchains, screen, settings, txhistory, wallet } from '@emeraldwallet/store';
-import TxView from '@emeraldwallet/ui/lib/components/tx/TxHistory/TxList/TxItem';
+import { addresses, blockchains, screen, settings, wallet } from '@emeraldwallet/store';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import Balance from '../../common/Balance';
 import i18n from '../../i18n';
+import TxView from './TxItemView';
 
 function txValueRenderer (showFiat: boolean) {
   return function renderer (balance: any, ticker: string) {

packages/ui/src/components/tx/TxHistory/TxList/TxItem/Status.tsx → packages/react-app/src/transactions/List/TxItemView/Status.tsx

@@ -21,7 +21,7 @@ const styles = (theme: any) => ({
   }
 });
 
-interface Props {
+interface IStatusProps {
   currentBlockHeight: number;
   txBlockNumber: number | null;
   txTimestamp: any;
@@ -33,7 +33,7 @@ interface Props {
   onClick?: any;
 }
 
-const Status = (props: Props) => {
+export const Status = (props: IStatusProps) => {
   const { classes, onClick } = props;
   const tsFormatter = props.timeStampFormatter || defaultTimestampFormatter;
   const { currentBlockHeight, txBlockNumber, requiredConfirmations, txDiscarded } = props;
@@ -92,5 +92,4 @@ function defaultTimestampFormatter (timestamp: any): string {
   return timestamp;
 }
 
-const StyledStatus = withStyles(styles)(Status);
-export default StyledStatus;
+export default withStyles(styles)(Status);

packages/react-app/src/transactions/List/TxItemView/TxItem.spec.tsx

@@ -0,0 +1,39 @@
+import { Theme } from '@emeraldplatform/ui';
+import { ThemeProvider } from '@material-ui/styles';
+import { render } from '@testing-library/react';
+import BigNumber from 'bignumber.js';
+import * as React from 'react';
+import TxItem from './TxItem';
+
+const tx = {
+  blockNumber: 1,
+  from: '0x1',
+  to: '0x2',
+  value: new BigNumber(100000)
+};
+const from = {};
+const to = {};
+
+describe('TxItem', () => {
+  it('should renders without crash', () => {
+    const comp = render(
+      <ThemeProvider theme={Theme}>
+        <TxItem
+          openAccount={() => {}}
+          openTx={() => {}}
+          netParams={
+          {
+            currentBlockHeight: 100,
+            requiredConfirmations: 12
+          }
+          }
+          tx={tx}
+          fromAccount={from}
+          toAccount={to}
+        />
+      </ThemeProvider>
+    );
+    expect(comp).toBeDefined();
+  });
+
+});

packages/store/src/index.ts

@@ -1,5 +1,5 @@
 import * as addressBook from './address-book';
-import * as addresses from './addresses';
+import * as addresses from './accounts';
 import * as blockchains from './blockchains';
 import * as connection from './conn';
 import * as launcher from './launcher';

packages/store/src/ledger/actions.ts

@@ -6,7 +6,7 @@ import { Dispatched, GetState } from '../types';
 import {
   ActionTypes,
   AddressSelected,
-  Connected,
+  Connected, IGetAddressesAction,
   IUpdateAddressAction,
   SetBaseHD,
   SetHDOffset, SetListHDPath, Watch
@@ -44,11 +44,13 @@ export function setHdOffsetAction (offset: number): SetHDOffset {
   };
 }
 
-export function getAddressesAction (offset: number = 0, count: number = 5) {
+export function getAddressesAction (offset: number = 0, count: number = 5): IGetAddressesAction {
   return {
     type: ActionTypes.GET_ADDRESSES,
-    offset,
-    count
+    payload: {
+      offset,
+      count
+    }
   };
 }
 

packages/store/src/ledger/sagas.ts

@@ -11,7 +11,7 @@ function* fetchAddrInfo (api: IApi, action: LoadAddrInfoAction) {
 }
 
 function* getAddressesSaga (api: IApi, action: IGetAddressesAction) {
-  const { offset, count } = action;
+  const { offset, count } = action.payload;
   yield put(setHdOffsetAction(offset));
   yield put(selectAddressAction(undefined));
 
@@ -34,17 +34,9 @@ function* getAddressesSaga (api: IApi, action: IGetAddressesAction) {
   }
 }
 
-function* watchLoadInfo (api: IApi) {
-  yield takeEvery(ActionTypes.LOAD_ADDR_INFO, fetchAddrInfo, api);
-}
-
-function* watchGetAddresses (api: IApi) {
-  yield takeLatest(ActionTypes.GET_ADDRESSES, getAddressesSaga, api);
-}
-
 export function* root (api: IApi) {
   yield all([
-    watchLoadInfo(api),
-    watchGetAddresses(api)
+    takeEvery(ActionTypes.LOAD_ADDR_INFO, fetchAddrInfo, api),
+    takeLatest(ActionTypes.GET_ADDRESSES, getAddressesSaga, api)
   ]);
 }

packages/store/src/ledger/types.ts

@@ -70,8 +70,10 @@ export interface LoadAddrInfoAction {
 
 export interface IGetAddressesAction {
   type: ActionTypes.GET_ADDRESSES;
-  offset: number;
-  count: number;
+  payload: {
+    offset: number;
+    count: number;
+  };
 }
 
 export type LedgerAction =

packages/store/src/screen/index.ts

@@ -1,5 +1,6 @@
 import * as actions from './actions';
 import { reducer } from './reducer';
 import * as selectors from './selectors';
+import { Pages } from './types';
 
-export { actions, reducer, selectors };
+export { actions, reducer, selectors, Pages };

packages/store/src/screen/types.ts

@@ -9,6 +9,10 @@ export enum ActionTypes {
   NOTIFICATION_CLOSE = 'SCREEN/NOTIFICATION_CLOSE'
 }
 
+export enum Pages {
+  ACCOUNT = 'account'
+}
+
 export interface IScreenState {
   screen: any | null;
   item: any | null;