Merge pull request #492 from trezor/feature/Bitcoin

Refactor & prepare pages for bitcoin like coins

.gitlab-ci.yml

@@ -160,23 +160,23 @@ delete review:
   tags:
     - deploy
 
-integration tests:
-  image: docker:latest
-  services:
-    - docker:dind
-  stage: integration tests
-  script:
-    - 'export SHARED_PATH="$(dirname ${CI_PROJECT_DIR})/shared"'
-    - rm -r ${SHARED_PATH} || true
-    - docker build -f Dockerfile.test -t wallet-emulator-bridge-tests .
-    - mkdir -p ${SHARED_PATH}/trezor-wallet/screenshots
-    - mkdir -p ${SHARED_PATH}/trezor-wallet/videos
-    - docker run --volume ${SHARED_PATH}/trezor-wallet/screenshots:/trezor-wallet/test/screenshots --volume ${SHARED_PATH}/trezor-wallet/videos:/trezor-wallet/test/videos --rm wallet-emulator-bridge-tests
-    - find ${SHARED_PATH}
-    - mkdir trezor-wallet
-    - cp -r ${SHARED_PATH}/ trezor-wallet/
-  artifacts:
-    when: always
-    expire_in: 1 week
-    paths:
-      - trezor-wallet/
+# integration tests:
+#   image: docker:latest
+#   services:
+#     - docker:dind
+#   stage: integration tests
+#   script:
+#     - 'export SHARED_PATH="$(dirname ${CI_PROJECT_DIR})/shared"'
+#     - rm -r ${SHARED_PATH} || true
+#     - docker build -f Dockerfile.test -t wallet-emulator-bridge-tests .
+#     - mkdir -p ${SHARED_PATH}/trezor-wallet/screenshots
+#     - mkdir -p ${SHARED_PATH}/trezor-wallet/videos
+#     - docker run --volume ${SHARED_PATH}/trezor-wallet/screenshots:/trezor-wallet/test/screenshots --volume ${SHARED_PATH}/trezor-wallet/videos:/trezor-wallet/test/videos --rm wallet-emulator-bridge-tests
+#     - find ${SHARED_PATH}
+#     - mkdir trezor-wallet
+#     - cp -r ${SHARED_PATH}/ trezor-wallet/
+#   artifacts:
+#     when: always
+#     expire_in: 1 week
+#     paths:
+#       - trezor-wallet/

public/data/appConfig.json

@@ -1,5 +1,14 @@
 {
     "networks": [
+        {
+            "order": 1,
+            "isHidden": true,
+            "type": "bitcoin",
+            "name": "Bitcoin",
+            "symbol": "BTC",
+            "shortcut": "btc",
+            "hasSignVerify": true
+        },
         {
             "order": 2,
             "type": "ethereum",
@@ -19,7 +28,8 @@
             "explorer": {
                 "tx": "https://etherscan.io/tx/",
                 "address": "https://etherscan.io/address/"
-            }
+            },
+            "hasSignVerify": true
         },
         {
             "order": 18,
@@ -40,7 +50,8 @@
             "explorer": {
                 "tx": "https://gastracker.io/tx/",
                 "address": "https://gastracker.io/addr/"
-            }
+            },
+            "hasSignVerify": true
         },
         {
             "order": 2,
@@ -74,7 +85,8 @@
             "explorer": {
                 "tx": "https://ropsten.etherscan.io/tx/",
                 "address": "https://ropsten.etherscan.io/address/"
-            }
+            },
+            "hasSignVerify": true
         },
         {
             "order": 3,
@@ -95,7 +107,8 @@
             "explorer": {
                 "tx": "https://xrpscan.com/tx/",
                 "address": "https://xrpscan.com/account/"
-            }
+            },
+            "hasSignVerify": false
         },
         {
             "order": 3,
@@ -117,7 +130,8 @@
             "explorer": {
                 "tx": "https://sisyfos.trezor.io/ripple-testnet-explorer/tx/",
                 "address": "https://sisyfos.trezor.io/ripple-testnet-explorer/address/"
-            }
+            },
+            "hasSignVerify": false
         }
     ],
 

src/actions/ripple/BlockchainActions.js

@@ -138,6 +138,7 @@ export const onNotification = (
         },
         coin: account.network,
     });
+
     if (!updatedAccount.success) return;
 
     dispatch(

src/reducers/LocalStorageReducer.js

@@ -14,6 +14,7 @@ type NetworkFeeLevel = {
 
 export type Network = {
     order: number,
+    isHidden: ?boolean,
     type: string,
     name: string,
     testnet?: boolean,

src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js

@@ -80,6 +80,7 @@ class CoinMenu extends PureComponent<Props> {
         return (
             <Wrapper data-test="Main__page__coin__menu">
                 {config.networks
+                    .filter(item => !item.isHidden)
                     .sort((a, b) => a.order - b.order)
                     .map(item => (
                         <NavLink

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

@@ -17,6 +17,7 @@ type OwnProps = {||};
 type StateProps = {|
     router: $ElementType<State, 'router'>,
     selectedAccount: $ElementType<State, 'selectedAccount'>,
+    localStorage: $ElementType<State, 'localStorage'>,
 |};
 
 type Props = {| ...OwnProps, ...StateProps |};
@@ -93,12 +94,13 @@ class TopNavigationAccount extends React.PureComponent<Props, LocalState> {
     wrapper: ?HTMLElement;
 
     render() {
+        const { config } = this.props.localStorage;
         const { state, pathname } = this.props.router.location;
         if (!state) return null;
-        const { network, account } = this.props.selectedAccount;
+        const { network } = this.props.selectedAccount;
         if (!network) return null;
-
-        const isAccountImported = account && account.imported;
+        const networkConfig = config.networks.find(c => c.shortcut === network.shortcut);
+        if (!networkConfig) return null;
 
         const basePath = `/device/${state.device}/network/${state.network}/account/${
             state.account
@@ -115,7 +117,7 @@ class TopNavigationAccount extends React.PureComponent<Props, LocalState> {
                 <StyledNavLink to={`${basePath}/send`}>
                     <FormattedMessage {...l10nMessages.TR_NAV_SEND} />
                 </StyledNavLink>
-                {network.type === 'ethereum' && !isAccountImported && (
+                {networkConfig.hasSignVerify && (
                     <StyledNavLink to={`${basePath}/signverify`}>
                         <FormattedMessage {...l10nMessages.TR_NAV_SIGN_AND_VERIFY} />
                     </StyledNavLink>
@@ -130,5 +132,7 @@ export default connect<Props, OwnProps, StateProps, _, State, _>(
     (state: State): StateProps => ({
         router: state.router,
         selectedAccount: state.selectedAccount,
-    })
+        localStorage: state.localStorage,
+    }),
+    null
 )(TopNavigationAccount);

src/views/Wallet/views/Account/Receive/bitcoin/Container.js

@@ -0,0 +1,43 @@
+/* @flow */
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
+
+import { showAddress } from 'actions/ReceiveActions';
+import type { State, Dispatch } from 'flowtype';
+import Receive from './index';
+
+type OwnProps = {|
+    intl: any,
+|};
+
+type StateProps = {|
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
+    receive: $ElementType<State, 'receive'>,
+    modal: $ElementType<State, 'modal'>,
+    wallet: $ElementType<State, 'wallet'>,
+|};
+
+type DispatchProps = {|
+    showAddress: typeof showAddress,
+|};
+
+export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |};
+
+const mapStateToProps = (state: State): StateProps => ({
+    selectedAccount: state.selectedAccount,
+    receive: state.receive,
+    modal: state.modal,
+    wallet: state.wallet,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    showAddress: bindActionCreators(showAddress, dispatch),
+});
+
+export default injectIntl(
+    connect(
+        mapStateToProps,
+        mapDispatchToProps
+    )(Receive)
+);

src/views/Wallet/views/Account/Receive/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 BitcoinReceive = () => {
+    return (
+        <Content>
+            <Title>Receive bitcoin</Title>
+        </Content>
+    );
+};
+
+export default BitcoinReceive;

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

@@ -3,8 +3,10 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import type { State } from 'flowtype';
+
 import EthereumTypeReceiveForm from './ethereum/Container';
 import RippleTypeReceiveForm from './ripple/Container';
+import BitcoinTypeReceiveForm from './bitcoin/Container';
 
 export type BaseProps = {|
     selectedAccount: $ElementType<State, 'selectedAccount'>,
@@ -25,6 +27,8 @@ export default connect<BaseProps, any, _, _, _, _>(
             return <EthereumTypeReceiveForm />;
         case 'ripple':
             return <RippleTypeReceiveForm />;
+        case 'bitcoin':
+            return <BitcoinTypeReceiveForm />;
         default:
             return null;
     }

src/views/Wallet/views/Account/Send/bitcoin/Container.js

@@ -0,0 +1,49 @@
+/* @flow */
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
+
+import SendFormActions from 'actions/ripple/SendFormActions';
+import { openQrModal } from 'actions/ModalActions';
+import type { State, Dispatch } from 'flowtype';
+import AccountSend from './index';
+
+type OwnProps = {|
+    intl: any,
+|};
+
+export type StateProps = {|
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
+    sendForm: $ElementType<State, 'sendFormRipple'>,
+    wallet: $ElementType<State, 'wallet'>,
+    fiat: $ElementType<State, 'fiat'>,
+    localStorage: $ElementType<State, 'localStorage'>,
+|};
+
+export type DispatchProps = {|
+    sendFormActions: typeof SendFormActions,
+    openQrModal: typeof openQrModal,
+|};
+
+export type Props = OwnProps & StateProps & DispatchProps;
+
+const mapStateToProps = (state: State): StateProps => ({
+    selectedAccount: state.selectedAccount,
+    sendForm: state.sendFormRipple,
+    wallet: state.wallet,
+    fiat: state.fiat,
+    localStorage: state.localStorage,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    sendFormActions: bindActionCreators(SendFormActions, dispatch),
+    openQrModal: bindActionCreators(openQrModal, dispatch),
+});
+
+export default injectIntl(
+    connect(
+        mapStateToProps,
+        mapDispatchToProps
+    )(AccountSend)
+);

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

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

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

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import type { State } from 'flowtype';
 import EthereumTypeSendForm from './ethereum/Container';
 import RippleTypeSendForm from './ripple/Container';
+import BitcoinTypeSendForm from './bitcoin/Container';
 
 export type BaseProps = {|
     selectedAccount: $ElementType<State, 'selectedAccount'>,
@@ -25,6 +26,8 @@ export default connect<BaseProps, any, _, _, _, _>(
             return <EthereumTypeSendForm />;
         case 'ripple':
             return <RippleTypeSendForm />;
+        case 'bitcoin':
+            return <BitcoinTypeSendForm />;
         default:
             return null;
     }

src/views/Wallet/views/Account/Summary/bitcoin/Container.js

@@ -0,0 +1,50 @@
+/* @flow */
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
+import * as TokenActions from 'actions/TokenActions';
+import type { State, Dispatch } from 'flowtype';
+import Summary from './index';
+
+type OwnProps = {|
+    intl: any,
+|};
+
+type StateProps = {|
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
+    summary: $ElementType<State, 'summary'>,
+    wallet: $ElementType<State, 'wallet'>,
+    tokens: $ElementType<State, 'tokens'>,
+    fiat: $ElementType<State, 'fiat'>,
+    localStorage: $ElementType<State, 'localStorage'>,
+|};
+
+type DispatchProps = {|
+    addToken: typeof TokenActions.add,
+    loadTokens: typeof TokenActions.load,
+    removeToken: typeof TokenActions.remove,
+|};
+
+export type Props = OwnProps & StateProps & DispatchProps;
+
+const mapStateToProps = (state: State): StateProps => ({
+    selectedAccount: state.selectedAccount,
+    summary: state.summary,
+    wallet: state.wallet,
+    tokens: state.tokens,
+    fiat: state.fiat,
+    localStorage: state.localStorage,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    addToken: bindActionCreators(TokenActions.add, dispatch),
+    loadTokens: bindActionCreators(TokenActions.load, dispatch),
+    removeToken: bindActionCreators(TokenActions.remove, dispatch),
+});
+
+export default injectIntl(
+    connect(
+        mapStateToProps,
+        mapDispatchToProps
+    )(Summary)
+);

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

@@ -0,0 +1,14 @@
+/* @flow */
+import React from 'react';
+import Content from 'views/Wallet/components/Content';
+import Title from 'views/Wallet/components/Title';
+
+const BitcoinSummary = () => {
+    return (
+        <Content>
+            <Title>Summary Bitcoin</Title>
+        </Content>
+    );
+};
+
+export default BitcoinSummary;

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

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import type { State } from 'flowtype';
 import EthereumTypeSummary from './ethereum/Container';
 import RippleTypeSummary from './ripple/Container';
+import BitcoinTypeSummary from './bitcoin/Container';
 
 type WrapperProps = {|
     selectedAccount: $ElementType<State, 'selectedAccount'>,
@@ -24,6 +25,8 @@ export default connect<WrapperProps, any, _, _, _, _>(
             return <EthereumTypeSummary />;
         case 'ripple':
             return <RippleTypeSummary />;
+        case 'bitcoin':
+            return <BitcoinTypeSummary />;
         default:
             return null;
     }

src/views/Wallet/views/Dashboard/index.js

@@ -74,16 +74,18 @@ const Dashboard = (props: Props) => (
                     <FormattedMessage {...l10nMessages.TR_YOU_WILL_GAIN_ACCESS} />
                 </StyledP>
                 <Coins>
-                    {props.localStorage.config.networks.map(network => (
-                        <StyledNavLink
-                            key={network.shortcut}
-                            to={`${getBaseUrl(props.wallet.selectedDevice)}/network/${
-                                network.shortcut
-                            }/account/0`}
-                        >
-                            <StyledCoinLogo network={network.shortcut} height={32} />
-                        </StyledNavLink>
-                    ))}
+                    {props.localStorage.config.networks
+                        .filter(item => !item.isHidden)
+                        .map(network => (
+                            <StyledNavLink
+                                key={network.shortcut}
+                                to={`${getBaseUrl(props.wallet.selectedDevice)}/network/${
+                                    network.shortcut
+                                }/account/0`}
+                            >
+                                <StyledCoinLogo network={network.shortcut} height={32} />
+                            </StyledNavLink>
+                        ))}
                 </Coins>
             </Row>
         </Wrapper>