[DDW-131] Connecting a hardware wallet (#2016)

* [DDW-131] - Connecting a hardware wallet

* [DDW-131] - Connecting a hardware wallet - fixing lint/flow issues

* [DDW-131] - Connecting a hardware wallet - adding translations + scss color variables

* [DDW-131] - Connecting a hardware wallet

* [DDW-131] - Connecting a hardware wallet

* [DDW-131] - Connecting a hardware wallet

* [DDW-131] - Connecting a hardware wallet

* [DDW-131] - Connecting a hardware wallet

* [DDW-131] - Connecting a hardware wallet - adding storybook items

* [DDW-131] - Connecting a hardware wallet - adding storybook items

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - fixing issues

* [DDW-131] - Connecting a hardware wallet - flow issues

* [DDW-131] - Connecting a hardware wallet - flow issues

* [DDW-131] - Connecting a hardware wallet - flow issues

* [DDW-131] - Connecting a hardware wallet - flow issues

* [DDW-131] - Connecting a hardware wallet - flow issues

* [DDW-131] - Connecting a hardware wallet - flow issues

* [DDW-131] - Connecting a hardware wallet - flow issues

* [DDW-131] - Connecting a hardware wallet - flow issues

* [DDW-131] - Connecting a hardware wallet - flow issues

* [DDW-131] - Connecting a hardware wallet - flow issues

Co-authored-by: Nikola Glumac <niglumac@gmail.com>

CHANGELOG.md

@@ -3,9 +3,13 @@ Changelog
 
 ## vNext
 
+### Features
+
+- Implemented Hardware wallets connection screens ([PR 2016](https://github.com/input-output-hk/daedalus/pull/2016))
+
 ### Fixes
 
-- Eenabled the Recovery Phrase Verification feature of Shelley wallets on ITN ([PR 2008](https://github.com/input-output-hk/daedalus/pull/2008))
+- Enabled the Recovery Phrase Verification feature of Shelley wallets on ITN ([PR 2008](https://github.com/input-output-hk/daedalus/pull/2008))
 - Disabled button on forms when there is nothing to submit ([PR 1998](https://github.com/input-output-hk/daedalus/pull/1998), [PR 2010](https://github.com/input-output-hk/daedalus/pull/2010))
 - Fixed system locale detection ([PR 2009](https://github.com/input-output-hk/daedalus/pull/2009))
 

source/renderer/app/Routes.js

@@ -21,6 +21,7 @@ import StakingInfoPage from './containers/staking/StakingInfoPage';
 import StakingRewardsPage from './containers/staking/StakingRewardsPage';
 import StakePoolsListPage from './containers/staking/StakePoolsListPage';
 import StakingCountdownPage from './containers/staking/StakingCountdownPage';
+import HardwareWallet from './containers/hardware-wallet/HardwareWallet';
 import Wallet from './containers/wallet/Wallet';
 import WalletAddPage from './containers/wallet/WalletAddPage';
 import WalletSummaryPage from './containers/wallet/WalletSummaryPage';
@@ -54,6 +55,12 @@ export const Routes = (
       <Route path={ROUTES.WALLETS.SETTINGS} component={WalletSettingsPage} />
       <Route path={ROUTES.WALLETS.UTXO} component={WalletUtxoPage} />
     </Route>
+    <Route path={ROUTES.HARDWARE_WALLETS.ROOT} component={HardwareWallet}>
+      <Route
+        path={ROUTES.HARDWARE_WALLETS.SUMMARY}
+        component={WalletSummaryPage}
+      />
+    </Route>
     <Route path={ROUTES.SETTINGS.ROOT} component={Settings}>
       <IndexRedirect to={ROUTES.SETTINGS.GENERAL} />
       <Route path={ROUTES.SETTINGS.GENERAL} component={GeneralSettingsPage} />

source/renderer/app/actions/sidebar-actions.js

@@ -11,4 +11,5 @@ export default class SidebarActions {
     showSubMenu?: boolean,
   }> = new Action();
   walletSelected: Action<{ walletId: string }> = new Action();
+  hardwareWalletSelected: Action<{ walletId: string }> = new Action();
 }

source/renderer/app/components/hardware-wallet/layouts/HardwareWalletWithNavigation.js

@@ -0,0 +1,71 @@
+// @flow
+import React, { Component } from 'react';
+import type { Node } from 'react';
+import { observer } from 'mobx-react';
+import HardwareWalletNavigation from '../navigation/HardwareWalletNavigation';
+import styles from './HardwareWalletWithNavigation.scss';
+import ConnectHardwareWallet from '../settings/ConnectHardwareWallet';
+
+type Props = {
+  children?: Node,
+  activeItem: string,
+  hasNotification?: boolean,
+  walletNotConnected: boolean,
+  isActiveScreen: Function,
+  onOpenExternalLink: Function,
+  onWalletNavItemClick: Function,
+  isLedger: boolean,
+  isTrezor: boolean,
+  isDeviceConnected: boolean,
+  fetchingDevice: boolean,
+  exportingExtendedPublicKey: boolean,
+  isExportingPublicKeyAborted: boolean,
+};
+
+@observer
+export default class HardwareWalletWithNavigation extends Component<Props> {
+  render() {
+    const {
+      children,
+      activeItem,
+      hasNotification,
+      walletNotConnected,
+      isActiveScreen,
+      onWalletNavItemClick,
+      onOpenExternalLink,
+      isLedger,
+      isTrezor,
+      isDeviceConnected,
+      fetchingDevice,
+      exportingExtendedPublicKey,
+      isExportingPublicKeyAborted,
+    } = this.props;
+
+    return (
+      <div className={styles.component}>
+        {walletNotConnected ? (
+          <ConnectHardwareWallet
+            onOpenExternalLink={onOpenExternalLink}
+            isLedger={isLedger}
+            isTrezor={isTrezor}
+            isDeviceConnected={isDeviceConnected}
+            fetchingDevice={fetchingDevice}
+            exportingExtendedPublicKey={exportingExtendedPublicKey}
+            isExportingPublicKeyAborted={isExportingPublicKeyAborted}
+          />
+        ) : (
+          <div className={styles.navigation}>
+            <HardwareWalletNavigation
+              isActiveNavItem={isActiveScreen}
+              onNavItemClick={onWalletNavItemClick}
+              activeItem={activeItem}
+              hasNotification={hasNotification}
+            />
+          </div>
+        )}
+
+        <div className={styles.page}>{children}</div>
+      </div>
+    );
+  }
+}

source/renderer/app/components/hardware-wallet/layouts/HardwareWalletWithNavigation.scss

@@ -0,0 +1,29 @@
+.component {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: overlay;
+}
+
+.navigation {
+  flex-shrink: 0;
+  height: 50px;
+  position: relative;
+}
+
+.page {
+  align-items: center;
+  display: flex;
+  height: calc(100% - 50px);
+  justify-content: center;
+  overflow: overlay;
+  position: relative;
+
+  > div {
+    width: 100%;
+  }
+}
+
+.settingsTabPage {
+  overflow: hidden;
+}

source/renderer/app/components/hardware-wallet/navigation/HardwareWalletNavigation.js

@@ -0,0 +1,67 @@
+// @flow
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { includes } from 'lodash';
+import { defineMessages, intlShape } from 'react-intl';
+import {
+  WALLET_NAV_IDS,
+  ITN_LEGACY_WALLET_EXCLUDED_NAV_ITEMS,
+} from '../../../config/walletNavigationConfig';
+import Navigation from '../../navigation/Navigation';
+import summaryIcon from '../../../assets/images/wallet-nav/summary-ic.inline.svg';
+import type {
+  NavButtonProps,
+  NavDropdownProps,
+} from '../../navigation/Navigation';
+
+const messages = defineMessages({
+  summary: {
+    id: 'wallet.navigation.summary',
+    defaultMessage: '!!!Summary',
+    description: 'Label for the "Summary" nav button in the wallet navigation.',
+  },
+});
+
+type Props = {
+  activeItem: string,
+  isActiveNavItem: Function,
+  onNavItemClick: Function,
+};
+
+@observer
+export default class WalletNavigation extends Component<Props> {
+  static contextTypes = {
+    intl: intlShape.isRequired,
+  };
+
+  render() {
+    const { isActiveNavItem, onNavItemClick, activeItem } = this.props;
+    const { intl } = this.context;
+    const { isIncentivizedTestnet } = global;
+    const items: Array<NavButtonProps | NavDropdownProps> = [
+      {
+        id: WALLET_NAV_IDS.SUMMARY,
+        label: intl.formatMessage(messages.summary),
+        icon: summaryIcon,
+      },
+    ].filter(
+      item =>
+        !(
+          isIncentivizedTestnet &&
+          includes(ITN_LEGACY_WALLET_EXCLUDED_NAV_ITEMS, item.id)
+        )
+    );
+    return (
+      <>
+        {activeItem ? (
+          <Navigation
+            activeItem={activeItem}
+            isActiveNavItem={isActiveNavItem}
+            onNavItemClick={onNavItemClick}
+            items={items}
+          />
+        ) : null}
+      </>
+    );
+  }
+}