Merge pull request #541 from trezor/feature/transactions

Add transaction history - skeleton

public/data/appConfig.json

@@ -149,7 +149,7 @@
             "url": "https://api.coingecko.com/api/v3/coins/ripple"
         }
     ],
-
+    "transactions": false,
     "supportedBrowsers": {
         "chrome": {
             "version": 59,

src/actions/TrezorConnectActions.js

@@ -159,10 +159,12 @@ export const init = (): AsyncAction => async (
 
     if (buildUtils.isDev()) {
         // eslint-disable-next-line
-        window.__TREZOR_CONNECT_SRC =
-            typeof LOCAL === 'string' ? LOCAL : 'https://sisyfos.trezor.io/connect/'; // eslint-disable-line no-underscore-dangle
-        // window.__TREZOR_CONNECT_SRC = typeof LOCAL === 'string' ? LOCAL : 'https://localhost:8088/'; // eslint-disable-line no-underscore-dangle
+        window.__TREZOR_CONNECT_SRC = typeof LOCAL === 'string'
+                ? LOCAL
+                : 'https://connect.sldev.cz/feature/eth-ripple-get-account-info/'; // eslint-disable-line no-underscore-dangle
         window.TrezorConnect = TrezorConnect;
+        // typeof LOCAL === 'string' ? LOCAL : 'https://sisyfos.trezor.io/connect/'; // eslint-disable-line no-underscore-dangle
+        // window.__TREZOR_CONNECT_SRC = typeof LOCAL === 'string' ? LOCAL : 'https://localhost:8088/'; // eslint-disable-line no-underscore-dangle
     }
 
     try {

src/support/routes.js

@@ -77,6 +77,11 @@ export const routes: Array<Route> = [
         pattern: '/device/:device',
         fields: ['device'],
     },
+    {
+        name: 'wallet-account-transactions',
+        pattern: '/device/:device/network/:network/account/:account/transactions',
+        fields: ['device', 'network', 'account', 'transactions'],
+    },
     {
         name: 'wallet-account-summary',
         pattern: '/device/:device/network/:network/account/:account',

src/views/Wallet/components/TopNavigationAccount/index.js

@@ -109,6 +109,16 @@ class TopNavigationAccount extends React.PureComponent<Props, LocalState> {
                         <FormattedMessage {...l10nMessages.TR_NAV_SUMMARY} />
                     </LinkContent>
                 </StyledNavLink>
+                {config.transactions && (
+                    <StyledNavLink
+                        activeClassName="has-bottom-border"
+                        to={`${basePath}/transactions`}
+                    >
+                        <LinkContent>
+                            <FormattedMessage {...l10nMessages.TR_NAV_TRANSACTIONS} />
+                        </LinkContent>
+                    </StyledNavLink>
+                )}
                 <StyledNavLink activeClassName="has-bottom-border" to={`${basePath}/receive`}>
                     <LinkContent>
                         <FormattedMessage {...l10nMessages.TR_NAV_RECEIVE} />

src/views/Wallet/components/TopNavigationAccount/index.messages.js

@@ -3,6 +3,11 @@ import { defineMessages } from 'react-intl';
 import type { Messages } from 'flowtype';
 
 const definedMessages: Messages = defineMessages({
+    TR_NAV_TRANSACTIONS: {
+        id: 'TR_NAV_TRANSACTIONS',
+        defaultMessage: 'Transactions',
+        description: 'Title of the navigation tab that contains tx history.',
+    },
     TR_NAV_SUMMARY: {
         id: 'TR_NAV_SUMMARY',
         defaultMessage: 'Summary',

src/views/Wallet/views/Account/Transactions/bitcoin/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Title from 'views/Wallet/components/Title';
+import Content from 'views/Wallet/components/Content';
+
+const BitcoinTransactions = () => {
+    return (
+        <Content>
+            <Title>Bitcoin Transactions</Title>
+        </Content>
+    );
+};
+
+export default BitcoinTransactions;

src/views/Wallet/views/Account/Transactions/ethereum/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Title from 'views/Wallet/components/Title';
+import Content from 'views/Wallet/components/Content';
+
+const EthereumTransactions = () => {
+    return (
+        <Content>
+            <Title>Ethereum Transactions</Title>
+        </Content>
+    );
+};
+
+export default EthereumTransactions;

src/views/Wallet/views/Account/Transactions/index.js

@@ -0,0 +1,38 @@
+/* @flow */
+import React from 'react';
+import { connect } from 'react-redux';
+
+import type { State } from 'flowtype';
+
+import EthereumTransactions from './ethereum';
+import RippleTransactions from './ripple';
+import BitcoinTransactions from './bitcoin';
+
+export type BaseProps = {|
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
+    localStorage: $ElementType<State, 'localStorage'>,
+|};
+
+export default connect<BaseProps, any, _, _, _, _>(
+    (state: State): BaseProps => ({
+        selectedAccount: state.selectedAccount,
+        localStorage: state.localStorage,
+    }),
+    null
+)((props: BaseProps) => {
+    const { config } = props.localStorage;
+    if (!config.transactions) return null; // turn off by feature tag
+    const { network } = props.selectedAccount;
+    if (!network || !config) return null;
+
+    switch (network.type) {
+        case 'ethereum':
+            return <EthereumTransactions />;
+        case 'ripple':
+            return <RippleTransactions />;
+        case 'bitcoin':
+            return <BitcoinTransactions />;
+        default:
+            return null;
+    }
+});

src/views/Wallet/views/Account/Transactions/ripple/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Title from 'views/Wallet/components/Title';
+import Content from 'views/Wallet/components/Content';
+
+const RippleTransactions = () => {
+    return (
+        <Content>
+            <Title>Ripple Transactions</Title>
+        </Content>
+    );
+};
+
+export default RippleTransactions;

src/views/index.js

@@ -18,6 +18,7 @@ import InstallBridge from 'views/Landing/views/InstallBridge/Container';
 // wallet views
 import WalletContainer from 'views/Wallet';
 import AccountSummary from 'views/Wallet/views/Account/Summary';
+import AccountTransactions from 'views/Wallet/views/Account/Transactions';
 import AccountSend from 'views/Wallet/views/Account/Send';
 import AccountReceive from 'views/Wallet/views/Account/Receive';
 import AccountSignVerify from 'views/Wallet/views/Account/SignVerify/Container';
@@ -109,6 +110,10 @@ const App = () => (
                                     path={getPattern('wallet-account-summary')}
                                     component={AccountSummary}
                                 />
+                                <Route
+                                    path={getPattern('wallet-account-transactions')}
+                                    component={AccountTransactions}
+                                />
                                 <Route
                                     path={getPattern('wallet-account-send')}
                                     component={AccountSend}