Merge pull request #495 from trezor/feature/support-import-tool

Feature/support import tool

CHANGELOG.md

@@ -5,6 +5,7 @@ __added__
 - Fiat currency switcher
 - Application settings
 - Button to copy log to clipboard
+- Import tool (for support)
 - Prettier
 
 __updated__

src/actions/DiscoveryActions.js

@@ -16,6 +16,7 @@ import type {
     Account,
 } from 'flowtype';
 import type { Discovery, State } from 'reducers/DiscoveryReducer';
+import * as LocalStorageActions from 'actions/LocalStorageActions';
 import * as BlockchainActions from './BlockchainActions';
 import * as EthereumDiscoveryActions from './ethereum/DiscoveryActions';
 import * as RippleDiscoveryActions from './ripple/DiscoveryActions';
@@ -120,6 +121,7 @@ const start = (device: TrezorDevice, network: string, ignoreCompleted?: boolean)
     }
 
     if (!discoveryProcess) {
+        dispatch(addImportedAccounts());
         dispatch(begin(device, network));
     } else if (discoveryProcess.completed && !ignoreCompleted) {
         dispatch({
@@ -380,3 +382,17 @@ export const addAccount = (): ThunkAction => (dispatch: Dispatch, getState: GetS
     if (!selected) return;
     dispatch(start(selected, getState().router.location.state.network, true));
 };
+
+export const addImportedAccounts = (): ThunkAction => (dispatch: Dispatch): void => {
+    // get imported accounts from local storage
+    const importedAccounts = LocalStorageActions.getImportedAccounts();
+    if (importedAccounts) {
+        // create each account
+        importedAccounts.forEach(account => {
+            dispatch({
+                type: ACCOUNT.CREATE,
+                payload: account,
+            });
+        });
+    }
+};

src/actions/ImportAccountActions.js

@@ -0,0 +1,153 @@
+/* @flow */
+
+import * as ACCOUNT from 'actions/constants/account';
+import * as IMPORT from 'actions/constants/importAccount';
+import * as NOTIFICATION from 'actions/constants/notification';
+import type { AsyncAction, TrezorDevice, Network, Dispatch, GetState } from 'flowtype';
+import * as BlockchainActions from 'actions/ethereum/BlockchainActions';
+import * as LocalStorageActions from 'actions/LocalStorageActions';
+import TrezorConnect from 'trezor-connect';
+import { toDecimalAmount } from 'utils/formatUtils';
+
+export type ImportAccountAction =
+    | {
+          type: typeof IMPORT.START,
+      }
+    | {
+          type: typeof IMPORT.SUCCESS,
+      }
+    | {
+          type: typeof IMPORT.FAIL,
+          error: ?string,
+      };
+
+export const importAddress = (
+    address: string,
+    network: Network,
+    device: ?TrezorDevice
+): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
+    if (!device) return;
+
+    dispatch({
+        type: IMPORT.START,
+    });
+
+    let payload;
+    const index = getState().accounts.filter(
+        a =>
+            a.imported === true &&
+            a.network === network.shortcut &&
+            device &&
+            a.deviceState === device.state
+    ).length;
+
+    try {
+        if (network.type === 'ethereum') {
+            const account = await dispatch(
+                BlockchainActions.discoverAccount(device, address, network.shortcut)
+            );
+
+            const empty = account.nonce <= 0 && account.balance === '0';
+            payload = {
+                imported: true,
+                index,
+                network: network.shortcut,
+                deviceID: device.features ? device.features.device_id : '0',
+                deviceState: device.state || '0',
+                accountPath: account.path || [],
+                descriptor: account.descriptor,
+
+                balance: account.balance,
+                availableBalance: account.balance,
+                block: account.block,
+                transactions: account.transactions,
+                empty,
+
+                networkType: 'ethereum',
+                nonce: account.nonce,
+            };
+            dispatch({
+                type: ACCOUNT.CREATE,
+                payload,
+            });
+            dispatch({
+                type: IMPORT.SUCCESS,
+            });
+            dispatch(LocalStorageActions.setImportedAccount(payload));
+            dispatch({
+                type: NOTIFICATION.ADD,
+                payload: {
+                    type: 'success',
+                    title: 'The account has been successfully imported',
+                    cancelable: true,
+                },
+            });
+        } else if (network.type === 'ripple') {
+            const response = await TrezorConnect.rippleGetAccountInfo({
+                account: {
+                    descriptor: address,
+                },
+                coin: network.shortcut,
+            });
+
+            // handle TREZOR response error
+            if (!response.success) {
+                throw new Error(response.payload.error);
+            }
+
+            const account = response.payload;
+            const empty = account.sequence <= 0 && account.balance === '0';
+
+            payload = {
+                imported: true,
+                index,
+                network: network.shortcut,
+                deviceID: device.features ? device.features.device_id : '0',
+                deviceState: device.state || '0',
+                accountPath: account.path || [],
+                descriptor: account.descriptor,
+
+                balance: toDecimalAmount(account.balance, network.decimals),
+                availableBalance: toDecimalAmount(account.availableBalance, network.decimals),
+                block: account.block,
+                transactions: account.transactions,
+                empty,
+
+                networkType: 'ripple',
+                sequence: account.sequence,
+                reserve: toDecimalAmount(account.reserve, network.decimals),
+            };
+            dispatch({
+                type: ACCOUNT.CREATE,
+                payload,
+            });
+            dispatch({
+                type: IMPORT.SUCCESS,
+            });
+            dispatch(LocalStorageActions.setImportedAccount(payload));
+            dispatch({
+                type: NOTIFICATION.ADD,
+                payload: {
+                    type: 'success',
+                    title: 'The account has been successfully imported',
+                    cancelable: true,
+                },
+            });
+        }
+    } catch (error) {
+        dispatch({
+            type: IMPORT.FAIL,
+            error: error.message,
+        });
+
+        dispatch({
+            type: NOTIFICATION.ADD,
+            payload: {
+                type: 'error',
+                title: 'Import account error',
+                message: error.message,
+                cancelable: true,
+            },
+        });
+    }
+};

src/actions/LocalStorageActions.js

@@ -52,6 +52,7 @@ const { STORAGE_PATH } = storageUtils;
 const KEY_VERSION: string = `${STORAGE_PATH}version`;
 const KEY_DEVICES: string = `${STORAGE_PATH}devices`;
 const KEY_ACCOUNTS: string = `${STORAGE_PATH}accounts`;
+const KEY_IMPORTED_ACCOUNTS: string = `${STORAGE_PATH}importedAccounts`;
 const KEY_DISCOVERY: string = `${STORAGE_PATH}discovery`;
 const KEY_TOKENS: string = `${STORAGE_PATH}tokens`;
 const KEY_PENDING: string = `${STORAGE_PATH}pending`;
@@ -321,3 +322,36 @@ export const setLocalCurrency = (): ThunkAction => (
     const { localCurrency } = getState().wallet;
     storageUtils.set(TYPE, KEY_LOCAL_CURRENCY, JSON.stringify(localCurrency));
 };
+
+export const setImportedAccount = (account: Account): ThunkAction => (): void => {
+    const prevImportedAccounts: ?Array<Account> = getImportedAccounts();
+    let importedAccounts = [account];
+    if (prevImportedAccounts) {
+        importedAccounts = importedAccounts.concat(prevImportedAccounts);
+    }
+    storageUtils.set(TYPE, KEY_IMPORTED_ACCOUNTS, JSON.stringify(importedAccounts));
+};
+
+export const getImportedAccounts = (): ?Array<Account> => {
+    const importedAccounts: ?string = storageUtils.get(TYPE, KEY_IMPORTED_ACCOUNTS);
+    if (importedAccounts) {
+        return JSON.parse(importedAccounts);
+    }
+    return null;
+};
+
+export const removeImportedAccounts = (device: TrezorDevice): ThunkAction => (
+    dispatch: Dispatch
+): void => {
+    const importedAccounts: ?Array<Account> = getImportedAccounts();
+    if (!importedAccounts) return;
+
+    const deviceId = device.features ? device.features.device_id : null;
+    const filteredImportedAccounts = importedAccounts.filter(
+        account => account.deviceID !== deviceId
+    );
+    storageUtils.remove(TYPE, KEY_IMPORTED_ACCOUNTS);
+    filteredImportedAccounts.forEach(account => {
+        dispatch(setImportedAccount(account));
+    });
+};

src/actions/constants/importAccount.js

@@ -0,0 +1,5 @@
+/* @flow */
+
+export const START: 'import__account__start' = 'import__account__start';
+export const SUCCESS: 'import__account__success' = 'import__account__success';
+export const FAIL: 'import__account__fail' = 'import__account__fail';

src/components/Transaction/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-
+import { SCREEN_SIZE } from 'config/variables';
 import { Link, colors } from 'trezor-ui-components';
 
 import type { Transaction, Network } from 'flowtype';
@@ -17,14 +17,19 @@ const Wrapper = styled.div`
     padding: 14px 0;
     display: flex;
     flex-direction: row;
+    word-break: break-all;
 
     &:last-child {
         border-bottom: 0px;
     }
+
+    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
+        flex-direction: column;
+    }
 `;
 
 const Addresses = styled.div`
-    flex: 1;
+    flex: 1 1 auto;
 `;
 
 const Address = styled.div`
@@ -43,9 +48,16 @@ const Date = styled(Link)`
     line-height: 18px;
     padding-right: 8px;
     border-bottom: 0px;
+    flex: 0 1 auto;
+    word-break: normal;
+`;
+
+const TransactionHash = styled(Date)`
+    word-break: break-all;
 `;
 
 const Value = styled.div`
+    flex: 1 1 auto;
     padding-left: 8px;
     white-space: nowrap;
     text-align: right;
@@ -100,9 +112,9 @@ const TransactionItem = ({ tx, network }: Props) => {
                     <Address key={addr}>{addr}</Address>
                 ))}
                 {!tx.blockHeight && (
-                    <Date href={url} isGray>
+                    <TransactionHash href={url} isGray>
                         Transaction hash: {tx.hash}
-                    </Date>
+                    </TransactionHash>
                 )}
             </Addresses>
             <Value className={tx.type}>

src/components/notifications/Context/components/Static/index.js

@@ -4,20 +4,25 @@ import * as React from 'react';
 import { Notification, Link } from 'trezor-ui-components';
 import Bignumber from 'bignumber.js';
 import { FormattedMessage } from 'react-intl';
+import { withRouter } from 'react-router-dom';
+import type { ContextRouter } from 'react-router';
+
 import l10nCommonMessages from 'views/common.messages';
+import { matchPath } from 'react-router';
+import { getPattern } from 'support/routes';
 import l10nMessages from './index.messages';
 import type { Props } from '../../index';
 
-export default (props: Props) => {
+export default withRouter<Props>((props: {| ...Props, ...ContextRouter |}) => {
     const { selectedAccount } = props;
     const { account } = selectedAccount;
     const { location } = props.router;
     const notifications = [];
 
-    if (!location || !selectedAccount || !account) return null;
+    if (!location) return null;
 
     // Ripple minimum reserve notification
-    if (account.networkType === 'ripple') {
+    if (selectedAccount && account && account.networkType === 'ripple') {
         const { reserve, balance } = account;
         const bigBalance = new Bignumber(balance);
         const bigReserve = new Bignumber(reserve);
@@ -51,5 +56,28 @@ export default (props: Props) => {
         }
     }
 
+    // Import tool notification
+    if (matchPath(location.pathname, { path: getPattern('wallet-import') })) {
+        notifications.push(
+            <Notification
+                key="import-warning"
+                type="warning"
+                title="Use at your own risk"
+                message="This is an advanced interface intended for developer use only. Never use this process unless you really know what you are doing."
+            />
+        );
+    }
+
+    if (account && account.imported) {
+        notifications.push(
+            <Notification
+                key="watch-only-info"
+                type="info"
+                title="The account is watch-only"
+                message="A watch-only account is a public address you’ve imported into your wallet, allowing the wallet to watch for outputs but not spend them."
+            />
+        );
+    }
+
     return <React.Fragment>{notifications}</React.Fragment>;
-};
+});

src/config/variables.js

@@ -39,6 +39,7 @@ export const FONT_SIZE = {
     H3: '1rem',
     H4: '0.8571rem',
     COUNTER: '0.7857rem',
+    BADGE: '0.7857rem',
 };
 
 export const FONT_WEIGHT = {

src/flowtype/index.js

@@ -32,6 +32,7 @@ import type { TokenAction } from 'actions/TokenActions';
 import type { TrezorConnectAction } from 'actions/TrezorConnectActions';
 import type { WalletAction } from 'actions/WalletActions';
 import type { Web3Action } from 'actions/Web3Actions';
+import type { ImportAccountAction } from 'actions/ImportAccountActions';
 import type { FiatRateAction } from 'services/CoingeckoService'; // this service has no action file, all is written inside one file
 
 import type {
@@ -142,7 +143,8 @@ export type Action =
     | TrezorConnectAction
     | WalletAction
     | Web3Action
-    | FiatRateAction;
+    | FiatRateAction
+    | ImportAccountAction;
 
 export type State = ReducersState;
 

src/reducers/AccountsReducer.js

@@ -75,6 +75,11 @@ const createAccount = (state: State, account: Account): State => {
     }
     const newState: State = [...state];
     newState.push(account);
+
+    // sort the accounts array so the imported accounts always come before discovered accounts
+    if (account.imported) {
+        newState.sort((a, b) => Number(b.imported) - Number(a.imported) || a.index - b.index);
+    }
     return newState;
 };
 

src/reducers/DiscoveryReducer.js

@@ -95,7 +95,11 @@ const complete = (state: State, action: DiscoveryCompleteAction): State => {
 const accountCreate = (state: State, account: Account): State => {
     const index: number = findIndex(state, account.network, account.deviceState);
     const newState: State = [...state];
-    newState[index].accountIndex++;
+    // do not increment index when adding imported account
+    // imported accounts should not interfere with the index used in discovery proccess.
+    if (!account.imported) {
+        newState[index].accountIndex++;
+    }
     return newState;
 };
 

src/reducers/ImportAccountReducer.js

@@ -0,0 +1,43 @@
+/* @flow */
+
+import * as IMPORT from 'actions/constants/importAccount';
+
+import type { Action } from 'flowtype';
+
+export type ImportState = {
+    loading: boolean,
+    error: ?string,
+};
+
+export const initialState: ImportState = {
+    loading: false,
+    error: null,
+};
+
+export default (state: ImportState = initialState, action: Action): ImportState => {
+    switch (action.type) {
+        case IMPORT.START:
+            return {
+                ...state,
+                loading: true,
+                error: null,
+            };
+
+        case IMPORT.SUCCESS:
+            return {
+                ...state,
+                loading: false,
+                error: null,
+            };
+
+        case IMPORT.FAIL:
+            return {
+                ...state,
+                loading: false,
+                error: action.error,
+            };
+
+        default:
+            return state;
+    }
+};

src/reducers/index.js

@@ -11,6 +11,7 @@ import notifications from 'reducers/NotificationReducer';
 import modal from 'reducers/ModalReducer';
 import web3 from 'reducers/Web3Reducer';
 import accounts from 'reducers/AccountsReducer';
+import importAccount from 'reducers/ImportAccountReducer';
 import selectedAccount from 'reducers/SelectedAccountReducer';
 import sendFormEthereum from 'reducers/SendFormEthereumReducer';
 import sendFormRipple from 'reducers/SendFormRippleReducer';
@@ -32,6 +33,7 @@ const reducers = {
     notifications,
     modal,
     web3,
+    importAccount,
     accounts,
     selectedAccount,
     sendFormEthereum,

src/reducers/utils/index.js

@@ -83,10 +83,15 @@ export const getSelectedAccount = (state: State): ?Account => {
     const locationState = state.router.location.state;
     if (!device || !locationState.network || !locationState.account) return null;
 
-    const index: number = parseInt(locationState.account, 10);
+    // imported account index has 'i' prefix
+    const isImported = /^i\d+$/i.test(locationState.account);
+    const index: number = isImported
+        ? parseInt(locationState.account.substr(1), 10)
+        : parseInt(locationState.account, 10);
 
     return state.accounts.find(
         a =>
+            a.imported === isImported &&
             a.deviceState === device.state &&
             a.index === index &&
             a.network === locationState.network

src/services/LocalStorageService.js

@@ -58,6 +58,10 @@ const LocalStorageService: Middleware = (api: MiddlewareAPI) => (next: Middlewar
         case CONNECT.FORGET:
         case CONNECT.FORGET_SINGLE:
         case CONNECT.FORGET_SILENT:
+            api.dispatch(LocalStorageActions.save());
+            api.dispatch(LocalStorageActions.removeImportedAccounts(action.device));
+            break;
+
         case CONNECT.RECEIVE_WALLET_TYPE:
         case DEVICE.CHANGED:
         case DEVICE.DISCONNECT:

src/services/LogService.js

@@ -2,6 +2,7 @@
 import * as LogActions from 'actions/LogActions';
 import { TRANSPORT, DEVICE } from 'trezor-connect';
 import * as DISCOVERY from 'actions/constants/discovery';
+import * as ACCOUNT from 'actions/constants/account';
 
 import type { Middleware, MiddlewareAPI, MiddlewareDispatch, Action } from 'flowtype';
 
@@ -10,6 +11,7 @@ const actions: Array<string> = [
     DEVICE.CONNECT,
     DEVICE.DISCONNECT,
     DISCOVERY.START,
+    ACCOUNT.CREATE,
 ];
 
 /**
@@ -40,6 +42,9 @@ const LogService: Middleware = (api: MiddlewareAPI) => (next: MiddlewareDispatch
         case DISCOVERY.START:
             api.dispatch(LogActions.add('Discovery started', action));
             break;
+        case ACCOUNT.CREATE:
+            api.dispatch(LogActions.add('Account created', action));
+            break;
         default:
             break;
     }

src/support/routes.js

@@ -23,9 +23,9 @@ export const routes: Array<Route> = [
         fields: ['bridge'],
     },
     {
-        name: 'landing-import',
+        name: 'wallet-import',
-        pattern: '/import',
+        pattern: '/device/:device/import',
-        fields: ['import'],
+        fields: ['device', 'import'],
     },
     {
         name: 'wallet-settings',

src/views/Landing/views/Import/index.js

@@ -1,28 +0,0 @@
-/* @flow */
-
-import React from 'react';
-import styled from 'styled-components';
-import { Button, Link, Icon, H5, icons, colors } from 'trezor-ui-components';
-import LandingWrapper from 'views/Landing/components/LandingWrapper';
-
-const Wrapper = styled.div`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`;
-
-const Import = () => (
-    <LandingWrapper>
-        <Wrapper>
-            <Icon size={60} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
-            <H5>Import tool is under construction</H5>
-            <Link to="/">
-                <Button>Take me back</Button>
-            </Link>
-        </Wrapper>
-    </LandingWrapper>
-);
-
-export default Import;

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

@@ -40,11 +40,14 @@ const Loading = styled.div`
     flex-direction: column;
 `;
 
+const LoaderWrapper = styled.div`
+    margin-right: 10px;
+`;
+
 const Title = styled(H4)`
     font-size: ${FONT_SIZE.BIGGER};
     font-weight: ${FONT_WEIGHT.NORMAL};
     color: ${props => (props.type === 'progress' ? colors.TEXT_SECONDARY : '')};
-    margin-left: 10px;
     text-align: center;
     padding: 0;
 `;
@@ -80,7 +83,11 @@ const Content = ({ className, children, isLoading = false, loader, exceptionPage
         {isLoading && loader && (
             <Loading>
                 <Row>
-                    {loader.type === 'progress' && <Loader size={30} />}
+                    {loader.type === 'progress' && (
+                        <LoaderWrapper>
+                            <Loader size={30} />
+                        </LoaderWrapper>
+                    )}
                     <Title type={loader.type}>
                         {loader.title || (
                             <FormattedMessage {...l10nMessages.TR_INITIALIZING_ACCOUNTS} />

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

@@ -28,8 +28,6 @@ const Text = styled.span`
 const RowAccountWrapper = styled.div`
     width: 100%;
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
     padding: ${LEFT_NAVIGATION_ROW.PADDING};
     font-size: ${FONT_SIZE.BASE};
     color: ${colors.TEXT_PRIMARY};
@@ -86,6 +84,25 @@ const DiscoveryLoadingText = styled.span`
     margin-left: 14px;
 `;
 
+const Col = styled.div`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+`;
+
+const RightCol = styled(Col)`
+    justify-content: center;
+`;
+
+const Badge = styled.div`
+    padding: 4px 8px;
+    background: lightslategray;
+    color: white;
+    font-size: ${FONT_SIZE.BADGE};
+    border-radius: 3px;
+    align-self: flex-end;
+`;
+
 // TODO: Refactorize deviceStatus & selectedAccounts
 const AccountMenu = (props: Props) => {
     const selected = props.wallet.selectedDevice;
@@ -102,10 +119,18 @@ const AccountMenu = (props: Props) => {
     if (!selected || !network) return null;
 
     const deviceAccounts: Accounts = findDeviceAccounts(accounts, selected, location.state.network);
+    const discoveryAccounts: Accounts = deviceAccounts.filter(
+        account => account.imported === false
+    );
 
     const selectedAccounts = deviceAccounts.map((account, i) => {
         // const url: string = `${baseUrl}/network/${location.state.network}/account/${i}`;
-        const url: string = location.pathname.replace(/account+\/([0-9]*)/, `account/${i}`);
+        let url: string;
+        if (account.imported) {
+            url = location.pathname.replace(/account+\/(i?[0-9]*)/, `account/i${account.index}`);
+        } else {
+            url = location.pathname.replace(/account+\/(i?[0-9]*)/, `account/${account.index}`);
+        }
 
         let balance: ?string = null;
         const fiatRates = props.fiat.find(f => f.network === network.shortcut);
@@ -125,36 +150,41 @@ const AccountMenu = (props: Props) => {
             }
         }
 
-        const urlAccountIndex = parseInt(props.router.location.state.account, 10);
         return (
-            <NavLink to={url} key={account.index}>
+            <NavLink to={url} key={url}>
                 <Row column>
-                    <RowAccountWrapper
+                    <RowAccountWrapper isSelected={location.pathname === url} borderTop={i === 0}>
-                        isSelected={urlAccountIndex === account.index}
+                        <Col>
-                        borderTop={account.index === 0}
+                            <FormattedMessage
-                    >
+                                {...(account.imported
-                        <FormattedMessage
+                                    ? l10nCommonMessages.TR_IMPORTED_ACCOUNT_HASH
-                            {...l10nCommonMessages.TR_ACCOUNT_HASH}
+                                    : l10nCommonMessages.TR_ACCOUNT_HASH)}
-                            values={{ number: account.index + 1 }}
+                                values={{ number: account.index + 1 }}
-                        />
+                            />
-                        {balance && !props.wallet.hideBalance && (
+                            {balance && !props.wallet.hideBalance && (
-                            <Text>
+                                <Text>
-                                {balance}
+                                    {balance}
-                                {fiatRates && (
+                                    {fiatRates && (
-                                    <FormattedNumber
+                                        <FormattedNumber
-                                        currency={localCurrency}
+                                            currency={localCurrency}
-                                        value={fiat}
+                                            value={fiat}
-                                        minimumFractionDigits={2}
+                                            minimumFractionDigits={2}
-                                        // eslint-disable-next-line react/style-prop-object
+                                            // eslint-disable-next-line react/style-prop-object
-                                        style="currency"
+                                            style="currency"
-                                    />
+                                        />
-                                )}
+                                    )}
-                            </Text>
+                                </Text>
-                        )}
+                            )}
-                        {!balance && (
+                            {!balance && (
-                            <Text>
+                                <Text>
-                                <FormattedMessage {...l10nMessages.TR_LOADING_DOT_DOT_DOT} />
+                                    <FormattedMessage {...l10nMessages.TR_LOADING_DOT_DOT_DOT} />
-                            </Text>
+                                </Text>
+                            )}
+                        </Col>
+                        {account.imported && (
+                            <RightCol>
+                                <Badge>watch-only</Badge>
+                            </RightCol>
                         )}
                     </RowAccountWrapper>
                 </Row>
@@ -168,7 +198,7 @@ const AccountMenu = (props: Props) => {
     );
 
     if (discovery && discovery.completed) {
-        const lastAccount = deviceAccounts[deviceAccounts.length - 1];
+        const lastAccount = discoveryAccounts[discoveryAccounts.length - 1];
         if (!selected.connected) {
             discoveryStatus = (
                 <Tooltip

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

@@ -95,9 +95,11 @@ class TopNavigationAccount extends React.PureComponent<Props, LocalState> {
     render() {
         const { state, pathname } = this.props.router.location;
         if (!state) return null;
-        const { network } = this.props.selectedAccount;
+        const { network, account } = this.props.selectedAccount;
         if (!network) return null;
 
+        const isAccountImported = account && account.imported;
+
         const basePath = `/device/${state.device}/network/${state.network}/account/${
             state.account
         }`;
@@ -113,7 +115,7 @@ class TopNavigationAccount extends React.PureComponent<Props, LocalState> {
                 <StyledNavLink to={`${basePath}/send`}>
                     <FormattedMessage {...l10nMessages.TR_NAV_SEND} />
                 </StyledNavLink>
-                {network.type === 'ethereum' && (
+                {network.type === 'ethereum' && !isAccountImported && (
                     <StyledNavLink to={`${basePath}/signverify`}>
                         <FormattedMessage {...l10nMessages.TR_NAV_SIGN_AND_VERIFY} />
                     </StyledNavLink>

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

@@ -95,10 +95,11 @@ const AccountReceive = (props: Props) => {
     const isAddressVerifying =
         props.modal.context === CONTEXT_DEVICE &&
         props.modal.windowType === 'ButtonRequest_Address';
-    const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
+    const isAddressHidden =
+        !isAddressVerifying && !addressVerified && !addressUnverified && !account.imported;
 
     let address = `${account.descriptor.substring(0, 20)}...`;
-    if (addressVerified || addressUnverified || isAddressVerifying) {
+    if (addressVerified || addressUnverified || isAddressVerifying || account.imported) {
         address = account.descriptor;
     }
 
@@ -166,7 +167,7 @@ const AccountReceive = (props: Props) => {
                                 )
                             }
                         />
-                        {!(addressVerified || addressUnverified) && (
+                        {!(addressVerified || addressUnverified) && !account.imported && (
                             <ShowAddressButton
                                 icon={ICONS.EYE}
                                 onClick={() => props.showAddress(account.accountPath)}
@@ -176,20 +177,21 @@ const AccountReceive = (props: Props) => {
                             </ShowAddressButton>
                         )}
                     </Row>
-                    {(addressVerified || addressUnverified) && !isAddressVerifying && (
+                    {((addressVerified || addressUnverified) && !isAddressVerifying) ||
-                        <QrWrapper>
+                        (account.imported && (
-                            <Label>
+                            <QrWrapper>
-                                <FormattedMessage {...l10nReceiveMessages.TR_QR_CODE} />
+                                <Label>
-                            </Label>
+                                    <FormattedMessage {...l10nReceiveMessages.TR_QR_CODE} />
-                            <StyledQRCode
+                                </Label>
-                                bgColor="#FFFFFF"
+                                <StyledQRCode
-                                fgColor="#000000"
+                                    bgColor="#FFFFFF"
-                                level="Q"
+                                    fgColor="#000000"
-                                style={{ width: 150 }}
+                                    level="Q"
-                                value={account.descriptor}
+                                    style={{ width: 150 }}
-                            />
+                                    value={account.descriptor}
-                        </QrWrapper>
+                                />
-                    )}
+                            </QrWrapper>
+                        ))}
                 </AddressWrapper>
             </React.Fragment>
         </Content>

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

@@ -101,10 +101,11 @@ const AccountReceive = (props: Props) => {
     const isAddressVerifying =
         props.modal.context === CONTEXT_DEVICE &&
         props.modal.windowType === 'ButtonRequest_Address';
-    const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
+    const isAddressHidden =
+        !isAddressVerifying && !addressVerified && !addressUnverified && !account.imported;
 
     let address = `${account.descriptor.substring(0, 20)}...`;
-    if (addressVerified || addressUnverified || isAddressVerifying) {
+    if (addressVerified || addressUnverified || isAddressVerifying || account.imported) {
         address = account.descriptor;
     }
 
@@ -172,7 +173,7 @@ const AccountReceive = (props: Props) => {
                                 )
                             }
                         />
-                        {!(addressVerified || addressUnverified) && (
+                        {!(addressVerified || addressUnverified) && !account.imported && (
                             <ShowAddressButton
                                 onClick={() => props.showAddress(account.accountPath)}
                                 isDisabled={device.connected && !discovery.completed}
@@ -182,20 +183,21 @@ const AccountReceive = (props: Props) => {
                             </ShowAddressButton>
                         )}
                     </Row>
-                    {(addressVerified || addressUnverified) && !isAddressVerifying && (
+                    {((addressVerified || addressUnverified) && !isAddressVerifying) ||
-                        <QrWrapper>
+                        (account.imported && (
-                            <Label>
+                            <QrWrapper>
-                                <FormattedMessage {...l10nReceiveMessages.TR_QR_CODE} />
+                                <Label>
-                            </Label>
+                                    <FormattedMessage {...l10nReceiveMessages.TR_QR_CODE} />
-                            <StyledQRCode
+                                </Label>
-                                bgColor="#FFFFFF"
+                                <StyledQRCode
-                                fgColor="#000000"
+                                    bgColor="#FFFFFF"
-                                level="Q"
+                                    fgColor="#000000"
-                                style={{ width: 150 }}
+                                    level="Q"
-                                value={account.descriptor}
+                                    style={{ width: 150 }}
-                            />
+                                    value={account.descriptor}
-                        </QrWrapper>
+                                />
-                    )}
+                            </QrWrapper>
+                        ))}
                 </AddressWrapper>
             </React.Fragment>
         </Content>

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

@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react';
 import styled from 'styled-components';
-import { colors, H5 } from 'trezor-ui-components';
+import { colors, H5, P } from 'trezor-ui-components';
 import Transaction from 'components/Transaction';
 
 import type { Network } from 'reducers/LocalStorageReducer';
@@ -18,6 +18,8 @@ const Wrapper = styled.div`
     border-top: 1px solid ${colors.DIVIDER};
 `;
 
+const NoTransactions = styled(P)``;
+
 const PendingTransactions = (props: Props) => {
     // const pending = props.pending.filter(tx => !tx.rejected).concat(testData);
     const pending = props.pending.filter(tx => !tx.rejected);
@@ -25,6 +27,9 @@ const PendingTransactions = (props: Props) => {
     return (
         <Wrapper>
             <H5>Pending transactions</H5>
+            {pending.length === 0 && (
+                <NoTransactions>There are no pending transactions</NoTransactions>
+            )}
             {pending.map(tx => (
                 <Transaction key={tx.hash} network={props.network} tx={tx} />
             ))}

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

@@ -312,7 +312,9 @@ const AccountSend = (props: Props) => {
         total === '0' ||
         amount.length === 0 ||
         address.length === 0 ||
-        sending;
+        sending ||
+        account.imported;
+
     let amountText = '';
     if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
         amountText = `${amount} ${currency.toUpperCase()}`;
@@ -516,13 +518,14 @@ const AccountSend = (props: Props) => {
                 </AdvancedForm>
             )}
 
-            {props.selectedAccount.pending.length > 0 && (
+            {props.selectedAccount.pending.length > 0 ||
-                <PendingTransactions
+                (account.imported && (
-                    pending={props.selectedAccount.pending}
+                    <PendingTransactions
-                    tokens={props.selectedAccount.tokens}
+                        pending={props.selectedAccount.pending}
-                    network={network}
+                        tokens={props.selectedAccount.tokens}
-                />
+                        network={network}
-            )}
+                    />
+                ))}
         </Content>
     );
 };

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

@@ -279,7 +279,9 @@ const AccountSend = (props: Props) => {
         total === '0' ||
         amount.length === 0 ||
         address.length === 0 ||
-        sending;
+        sending ||
+        account.imported;
+
     let sendButtonText = <FormattedMessage {...l10nSendMessages.TR_SEND} values={{ amount: '' }} />;
     if (total !== '0') {
         sendButtonText = (
@@ -481,13 +483,14 @@ const AccountSend = (props: Props) => {
                 </AdvancedForm>
             )}
 
-            {props.selectedAccount.pending.length > 0 && (
+            {props.selectedAccount.pending.length > 0 ||
-                <PendingTransactions
+                (account.imported && (
-                    pending={props.selectedAccount.pending}
+                    <PendingTransactions
-                    tokens={props.selectedAccount.tokens}
+                        pending={props.selectedAccount.pending}
-                    network={network}
+                        tokens={props.selectedAccount.tokens}
-                />
+                        network={network}
-            )}
+                    />
+                ))}
         </Content>
     );
 };

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

@@ -94,7 +94,9 @@ const AccountSummary = (props: Props) => {
                         <StyledCoinLogo height={23} network={account.network} />
                         <AccountTitle>
                             <FormattedMessage
-                                {...l10nCommonMessages.TR_ACCOUNT_HASH}
+                                {...(account.imported
+                                    ? l10nCommonMessages.TR_IMPORTED_ACCOUNT_HASH
+                                    : l10nCommonMessages.TR_ACCOUNT_HASH)}
                                 values={{ number: parseInt(account.index, 10) + 1 }}
                             />
                         </AccountTitle>

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

@@ -44,6 +44,10 @@ const StyledCoinLogo = styled(CoinLogo)`
     margin-right: 10px;
 `;
 
+const StyledLink = styled(Link)`
+    font-size: ${FONT_SIZE.SMALL};
+`;
+
 const AccountSummary = (props: Props) => {
     const device = props.wallet.selectedDevice;
     const { account, network, pending, shouldRender } = props.selectedAccount;
@@ -69,17 +73,19 @@ const AccountSummary = (props: Props) => {
                         <StyledCoinLogo height={23} network={account.network} />
                         <AccountTitle>
                             <FormattedMessage
-                                {...l10nCommonMessages.TR_ACCOUNT_HASH}
+                                {...(account.imported
+                                    ? l10nCommonMessages.TR_IMPORTED_ACCOUNT_HASH
+                                    : l10nCommonMessages.TR_ACCOUNT_HASH)}
                                 values={{ number: parseInt(account.index, 10) + 1 }}
                             />
                         </AccountTitle>
                     </AccountName>
                     {!account.empty && (
-                        <Link href={explorerLink} isGray>
+                        <StyledLink href={explorerLink} isGray>
                             <FormattedMessage
                                 {...l10nSummaryMessages.TR_SEE_FULL_TRANSACTION_HISTORY}
                             />
-                        </Link>
+                        </StyledLink>
                     )}
                 </AccountHeading>
                 <AccountBalance

src/views/Wallet/views/Import/Container.js

@@ -2,33 +2,33 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import * as RouterActions from 'actions/RouterActions';
+import * as ImportAccountActions from 'actions/ImportAccountActions';
-
+import type { State, Dispatch, TrezorDevice, Config } from 'flowtype';
-import type { State, Dispatch } from 'flowtype';
 import ImportView from './index';
 
 type OwnProps = {|
     children?: React.Node,
 |};
 export type StateProps = {|
-    transport: $ElementType<$ElementType<State, 'connect'>, 'transport'>,
+    device: ?TrezorDevice,
+    config: Config,
+    importAccount: $ElementType<State, 'importAccount'>,
 |};
 
 type DispatchProps = {|
-    selectFirstAvailableDevice: typeof RouterActions.selectFirstAvailableDevice,
+    importAddress: typeof ImportAccountActions.importAddress,
 |};
 
 export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |};
 
 const mapStateToProps = (state: State): StateProps => ({
-    transport: state.connect.transport,
+    config: state.localStorage.config,
+    device: state.wallet.selectedDevice,
+    importAccount: state.importAccount,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
-    selectFirstAvailableDevice: bindActionCreators(
+    importAddress: bindActionCreators(ImportAccountActions.importAddress, dispatch),
-        RouterActions.selectFirstAvailableDevice,
-        dispatch
-    ),
 });
 
 export default connect<Props, OwnProps, StateProps, DispatchProps, State, Dispatch>(

src/views/Wallet/views/Import/index.js

@@ -0,0 +1,105 @@
+/* @flow */
+
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+import { Select, Button, Input, Link, colors } from 'trezor-ui-components';
+import l10nCommonMessages from 'views/common.messages';
+import type { Props } from './Container';
+
+const Wrapper = styled.div`
+    text-align: left;
+    flex-direction: column;
+    display: flex;
+    padding: 24px;
+    min-width: 300px;
+`;
+
+const StyledSelect = styled(Select)`
+    min-width: 100px;
+`;
+
+const InputRow = styled.div`
+    margin-bottom: 16px;
+`;
+
+const Label = styled.div`
+    color: ${colors.TEXT_SECONDARY};
+    padding-bottom: 10px;
+`;
+
+const ButtonActions = styled.div`
+    display: flex;
+    flex-direction: row;
+
+    justify-content: flex-end;
+`;
+
+const ButtonWrapper = styled.div`
+    & + & {
+        margin-left: 10px;
+    }
+`;
+
+const Import = (props: Props) => {
+    const [selectedNetwork, setSelectedNetwork] = useState(null);
+    const [address, setAddress] = useState('');
+
+    const { networks } = props.config;
+    return (
+        // <LandingWrapper>
+        <Wrapper>
+            <InputRow>
+                <Label>Select network</Label>
+                <StyledSelect
+                    value={selectedNetwork}
+                    options={networks
+                        .sort((a, b) => a.shortcut.localeCompare(b.shortcut))
+                        .map(net => ({
+                            label: net.shortcut,
+                            value: net,
+                        }))}
+                    onChange={option => setSelectedNetwork(option)}
+                />
+            </InputRow>
+
+            <InputRow>
+                <Input
+                    topLabel="Address"
+                    name="cryptoAddress"
+                    value={address}
+                    onChange={e => setAddress(e.target.value)}
+                    type="text"
+                />
+            </InputRow>
+            <ButtonActions>
+                <ButtonWrapper>
+                    <Link to="/">
+                        <Button isWhite>
+                            <FormattedMessage {...l10nCommonMessages.TR_CLOSE} />
+                        </Button>
+                    </Link>
+                </ButtonWrapper>
+
+                <ButtonWrapper>
+                    <Button
+                        isDisabled={
+                            !selectedNetwork || address === '' || props.importAccount.loading
+                        }
+                        onClick={() =>
+                            props.importAddress(
+                                address,
+                                (selectedNetwork || {}).value,
+                                props.device
+                            )
+                        }
+                    >
+                        Import
+                    </Button>
+                </ButtonWrapper>
+            </ButtonActions>
+        </Wrapper>
+        // </LandingWrapper>
+    );
+};
+export default Import;

src/views/common.messages.js

@@ -16,6 +16,11 @@ const definedMessages: Messages = defineMessages({
         defaultMessage: 'Account #{number}',
         description: 'Used in auto-generated account label',
     },
+    TR_IMPORTED_ACCOUNT_HASH: {
+        id: 'TR_IMPORTED_ACCOUNT_HASH',
+        defaultMessage: 'Imported account #{number}',
+        description: 'Used in auto-generated label for imported accounts',
+    },
     TR_CLEAR: {
         id: 'TR_CLEAR',
         defaultMessage: 'Clear',

src/views/index.js

@@ -14,7 +14,6 @@ import { getPattern } from 'support/routes';
 // landing views
 import RootView from 'views/Landing/views/Root/Container';
 import InstallBridge from 'views/Landing/views/InstallBridge/Container';
-import ImportView from 'views/Landing/views/Import/Container';
 
 // wallet views
 import WalletContainer from 'views/Wallet';
@@ -23,6 +22,7 @@ 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';
 
+import WalletImport from 'views/Wallet/views/Import/Container';
 import WalletDashboard from 'views/Wallet/views/Dashboard/Container';
 import WalletDeviceSettings from 'views/Wallet/views/DeviceSettings';
 import WalletSettings from 'views/Wallet/views/WalletSettings/Container';
@@ -44,11 +44,16 @@ const App = () => (
                     <Route exact path={getPattern('landing-home')} component={RootView} />
                     <Route exact path={getPattern('landing-version')} component={Version} />
                     <Route exact path={getPattern('landing-bridge')} component={InstallBridge} />
-                    <Route exact path={getPattern('landing-import')} component={ImportView} />
                     <Route>
                         <ErrorBoundary>
                             <ImagesPreloader />
                             <WalletContainer>
+                                <Route
+                                    exact
+                                    path={getPattern('wallet-import')}
+                                    component={WalletImport}
+                                />
+
                                 <Route
                                     exact
                                     path={getPattern('wallet-settings')}