From 7387fea8ec2611c6faebd0572802d5d31ddac545 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Wed, 4 Jul 2018 16:03:01 +0200
Subject: [PATCH 1/4] manager need help link

---
 src/components/ManagerPage/Dashboard.js | 37 ++++++++++++++++++++++---
 src/components/ManagerPage/index.js     | 15 +++++++++-
 src/config/support.js                   |  1 +
 static/i18n/en/app.yml                  |  1 +
 4 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/components/ManagerPage/Dashboard.js b/src/components/ManagerPage/Dashboard.js
index 701062a0..06fdaa6a 100644
--- a/src/components/ManagerPage/Dashboard.js
+++ b/src/components/ManagerPage/Dashboard.js
@@ -1,13 +1,16 @@
 // @flow
 import React from 'react'
 import { translate } from 'react-i18next'
+import styled from 'styled-components'
 
 import type { T, Device } from 'types/common'
 import type { DeviceInfo } from 'helpers/devices/getDeviceInfo'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
+import IconExternalLink from 'icons/ExternalLink'
 import TrackPage from 'analytics/TrackPage'
+import FakeLink from '../base/FakeLink'
 
 import AppsList from './AppsList'
 import FirmwareUpdate from './FirmwareUpdate'
@@ -16,18 +19,34 @@ type Props = {
   t: T,
   device: Device,
   deviceInfo: DeviceInfo,
+  handleHelpRequest: () => void,
 }
 
-const Dashboard = ({ device, deviceInfo, t }: Props) => (
+const Dashboard = ({ device, deviceInfo, t, handleHelpRequest }: Props) => (
   <Box flow={4} pb={8}>
     <TrackPage category="Manager" name="Dashboard" />
     <Box>
       <Text ff="Museo Sans|Regular" fontSize={7} color="dark">
         {t('app:manager.title')}
       </Text>
-      <Text ff="Museo Sans|Light" fontSize={5}>
-        {t('app:manager.subtitle')}
-      </Text>
+      <Box horizontal>
+        <Text ff="Museo Sans|Light" fontSize={5}>
+          {t('app:manager.subtitle')}
+        </Text>
+        <ContainerToHover>
+          <FakeLink
+            mr={1}
+            underline
+            color="grey"
+            ff="Museo Sans|Light"
+            fontSize={4}
+            onClick={handleHelpRequest}
+          >
+            {t('app:common.needHelp')}
+          </FakeLink>
+          <IconExternalLink size={14} />
+        </ContainerToHover>
+      </Box>
     </Box>
     <Box mt={5}>
       <FirmwareUpdate deviceInfo={deviceInfo} device={device} />
@@ -41,3 +60,13 @@ const Dashboard = ({ device, deviceInfo, t }: Props) => (
 )
 
 export default translate()(Dashboard)
+
+const ContainerToHover = styled(Box).attrs({
+  align: 'center',
+  ml: 'auto',
+  horizontal: true,
+})`
+  ${FakeLink}:hover, &:hover {
+    color: ${p => p.theme.colors.wallet};
+  }
+`
diff --git a/src/components/ManagerPage/index.js b/src/components/ManagerPage/index.js
index 9eba78a4..6df4083b 100644
--- a/src/components/ManagerPage/index.js
+++ b/src/components/ManagerPage/index.js
@@ -2,6 +2,8 @@
 
 import React, { PureComponent } from 'react'
 import invariant from 'invariant'
+import { openURL } from 'helpers/linking'
+import { urls } from 'config/support'
 
 import type { Device } from 'types/common'
 import type { DeviceInfo } from 'helpers/devices/getDeviceInfo'
@@ -30,6 +32,11 @@ class ManagerPage extends PureComponent<Props, State> {
     this.setState({ isGenuine: true, device, deviceInfo })
   }
 
+  handleHelpRequest = () => {
+    console.log('we are trying')
+    openURL(urls.managerHelpRequest)
+  }
+
   render() {
     const { isGenuine, device, deviceInfo } = this.state
 
@@ -40,7 +47,13 @@ class ManagerPage extends PureComponent<Props, State> {
     invariant(device, 'Inexistant device considered genuine')
     invariant(deviceInfo, 'Inexistant device infos for genuine device')
 
-    return <Dashboard device={device} deviceInfo={deviceInfo} />
+    return (
+      <Dashboard
+        device={device}
+        deviceInfo={deviceInfo}
+        handleHelpRequest={this.handleHelpRequest}
+      />
+    )
   }
 }
 
diff --git a/src/config/support.js b/src/config/support.js
index 19e9232a..cfe9a2f6 100644
--- a/src/config/support.js
+++ b/src/config/support.js
@@ -9,6 +9,7 @@ export const urls = {
   noDeviceBuyNew: 'https://www.ledgerwallet.com/',
   noDeviceTrackOrder: 'https://order.ledgerwallet.com/',
   noDeviceLearnMore: 'https://www.ledgerwallet.com/',
+  managerHelpRequest: 'https://support.ledgerwallet.com/hc/en-us/articles/360006523674 ',
   genuineCheckContactSupport:
     'https://support.ledgerwallet.com/hc/en-us/requests/new?ticket_form_id=248165',
   // feesMoreInfo: 'https://www.ledgerwallet.com/',
diff --git a/static/i18n/en/app.yml b/static/i18n/en/app.yml
index 2edb6b3c..b7e0ead2 100644
--- a/static/i18n/en/app.yml
+++ b/static/i18n/en/app.yml
@@ -9,6 +9,7 @@ common:
   continue: Continue
   learnMore: Learn More
   skipThisStep: Skip this step
+  needHelp: Need help?
   chooseWalletPlaceholder: Choose a wallet...
   currency: Currency
   selectAccount: Select an account

From 79a5b2e77cdcbe5c7692a31e090657258c35c838 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Wed, 4 Jul 2018 17:01:02 +0200
Subject: [PATCH 2/4] adding external links to labels in Send modal

---
 src/components/FeesField/BitcoinKind.js       |  2 +-
 src/components/FeesField/EthereumKind.js      |  2 +-
 src/components/FeesField/GenericContainer.js  | 27 +++++++++--------
 src/components/ManagerPage/index.js           |  1 -
 src/components/base/LabelWithExternalIcon.js  | 29 +++++++++++++++++++
 .../modals/Send/fields/RecipientField.js      | 16 ++++++----
 src/config/support.js                         |  3 +-
 7 files changed, 56 insertions(+), 24 deletions(-)
 create mode 100644 src/components/base/LabelWithExternalIcon.js

diff --git a/src/components/FeesField/BitcoinKind.js b/src/components/FeesField/BitcoinKind.js
index 0410eae4..8e027847 100644
--- a/src/components/FeesField/BitcoinKind.js
+++ b/src/components/FeesField/BitcoinKind.js
@@ -125,7 +125,7 @@ class FeesField extends Component<Props & { fees?: Fees, error?: Error }, State>
     const satoshi = units[units.length - 1]
 
     return (
-      <GenericContainer error={error} help={t('app:send.steps.amount.unitPerByte')}>
+      <GenericContainer error={error}>
         <Select width={156} options={items} value={selectedItem} onChange={this.onSelectChange} />
         <InputCurrency
           ref={this.input}
diff --git a/src/components/FeesField/EthereumKind.js b/src/components/FeesField/EthereumKind.js
index 82313ad2..0dc8bf42 100644
--- a/src/components/FeesField/EthereumKind.js
+++ b/src/components/FeesField/EthereumKind.js
@@ -32,7 +32,7 @@ class FeesField extends Component<Props & { fees?: Fees, error?: Error }, *> {
     const { account, gasPrice, error, onChange } = this.props
     const { units } = account.currency
     return (
-      <GenericContainer error={error} help="Gas">
+      <GenericContainer error={error}>
         <InputCurrency
           defaultUnit={units.length > 1 ? units[1] : units[0]}
           units={units}
diff --git a/src/components/FeesField/GenericContainer.js b/src/components/FeesField/GenericContainer.js
index 7ee48b13..164888c5 100644
--- a/src/components/FeesField/GenericContainer.js
+++ b/src/components/FeesField/GenericContainer.js
@@ -3,20 +3,19 @@
 import React from 'react'
 
 import Box from 'components/base/Box'
-import Label from 'components/base/Label'
-import LabelInfoTooltip from 'components/base/LabelInfoTooltip'
+import LabelWithExternalIcon from 'components/base/LabelWithExternalIcon'
 import { translate } from 'react-i18next'
+import { openURL } from 'helpers/linking'
+import { urls } from 'config/support'
 
-export default translate()(
-  ({ help, children, t }: { help: string, children: React$Node, t: * }) => (
-    <Box flow={1}>
-      <Label>
-        <span>{t('app:send.steps.amount.fees')}</span>
-        {help ? <LabelInfoTooltip ml={1} text={help} /> : null}
-      </Label>
-      <Box horizontal flow={5}>
-        {children}
-      </Box>
+export default translate()(({ children, t }: { children: React$Node, t: * }) => (
+  <Box flow={1}>
+    <LabelWithExternalIcon
+      onClick={() => openURL(urls.feesMoreInfo)}
+      label={t('app:send.steps.amount.fees')}
+    />
+    <Box horizontal flow={5}>
+      {children}
     </Box>
-  ),
-)
+  </Box>
+))
diff --git a/src/components/ManagerPage/index.js b/src/components/ManagerPage/index.js
index 6df4083b..3e07cbc7 100644
--- a/src/components/ManagerPage/index.js
+++ b/src/components/ManagerPage/index.js
@@ -33,7 +33,6 @@ class ManagerPage extends PureComponent<Props, State> {
   }
 
   handleHelpRequest = () => {
-    console.log('we are trying')
     openURL(urls.managerHelpRequest)
   }
 
diff --git a/src/components/base/LabelWithExternalIcon.js b/src/components/base/LabelWithExternalIcon.js
new file mode 100644
index 00000000..68d83a4d
--- /dev/null
+++ b/src/components/base/LabelWithExternalIcon.js
@@ -0,0 +1,29 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Label from 'components/base/Label'
+import Box from 'components/base/Box'
+import IconExternalLink from 'icons/ExternalLink'
+
+// can add more dynamic options if needed
+export function LabelWithExternalIcon({ onClick, label }: { onClick: () => void, label: string }) {
+  return (
+    <LabelWrapper onClick={onClick}>
+      <span>{label}</span>
+      <Box ml={1}>
+        <IconExternalLink size={12} />
+      </Box>
+    </LabelWrapper>
+  )
+}
+
+export default LabelWithExternalIcon
+
+const LabelWrapper = styled(Label).attrs({})`
+  &:hover {
+    color: ${p => p.theme.colors.wallet};
+    cursor: pointer;
+  }
+`
diff --git a/src/components/modals/Send/fields/RecipientField.js b/src/components/modals/Send/fields/RecipientField.js
index f7974c54..c7df23ba 100644
--- a/src/components/modals/Send/fields/RecipientField.js
+++ b/src/components/modals/Send/fields/RecipientField.js
@@ -3,9 +3,10 @@ import React, { Component } from 'react'
 import type { Account } from '@ledgerhq/live-common/lib/types'
 import type { T } from 'types/common'
 import type { WalletBridge } from 'bridge/types'
+import { openURL } from 'helpers/linking'
+import { urls } from 'config/support'
 import Box from 'components/base/Box'
-import Label from 'components/base/Label'
-import LabelInfoTooltip from 'components/base/LabelInfoTooltip'
+import LabelWithExternalIcon from 'components/base/LabelWithExternalIcon'
 import RecipientAddress from 'components/RecipientAddress'
 
 type Props<Transaction> = {
@@ -60,16 +61,19 @@ class RecipientField<Transaction> extends Component<Props<Transaction>, { isVali
     return true
   }
 
+  handleRecipientAddressHelp = () => {
+    openURL(urls.recipientAddressInfo)
+  }
   render() {
     const { bridge, account, transaction, t, autoFocus } = this.props
     const { isValid } = this.state
     const value = bridge.getTransactionRecipient(account, transaction)
     return (
       <Box flow={1}>
-        <Label>
-          <span>{t('app:send.steps.amount.recipientAddress')}</span>
-          <LabelInfoTooltip ml={1} text={t('app:send.steps.amount.recipientAddress')} />
-        </Label>
+        <LabelWithExternalIcon
+          onClick={this.handleRecipientAddressHelp}
+          label={t('app:send.steps.amount.recipientAddress')}
+        />
         <RecipientAddress
           autoFocus={autoFocus}
           withQrCode
diff --git a/src/config/support.js b/src/config/support.js
index cfe9a2f6..bd93d169 100644
--- a/src/config/support.js
+++ b/src/config/support.js
@@ -12,5 +12,6 @@ export const urls = {
   managerHelpRequest: 'https://support.ledgerwallet.com/hc/en-us/articles/360006523674 ',
   genuineCheckContactSupport:
     'https://support.ledgerwallet.com/hc/en-us/requests/new?ticket_form_id=248165',
-  // feesMoreInfo: 'https://www.ledgerwallet.com/',
+  feesMoreInfo: 'https://support.ledgerwallet.com/hc/en-us/articles/360006535873',
+  recipientAddressInfo: 'https://support.ledgerwallet.com/hc/en-us/articles/360006433934',
 }

From 734bfb8e2487fbf9187621ad652b45d67f764bd6 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Wed, 4 Jul 2018 17:04:59 +0200
Subject: [PATCH 3/4] fix import inconsistency

---
 src/components/ManagerPage/Dashboard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ManagerPage/Dashboard.js b/src/components/ManagerPage/Dashboard.js
index 06fdaa6a..28c200da 100644
--- a/src/components/ManagerPage/Dashboard.js
+++ b/src/components/ManagerPage/Dashboard.js
@@ -10,7 +10,7 @@ import Box from 'components/base/Box'
 import Text from 'components/base/Text'
 import IconExternalLink from 'icons/ExternalLink'
 import TrackPage from 'analytics/TrackPage'
-import FakeLink from '../base/FakeLink'
+import FakeLink from 'components/base/FakeLink'
 
 import AppsList from './AppsList'
 import FirmwareUpdate from './FirmwareUpdate'

From af0763d22fbb7e62d6eebb655121be22fff269b0 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Wed, 4 Jul 2018 17:06:26 +0200
Subject: [PATCH 4/4] font family adjust

---
 src/components/ManagerPage/Dashboard.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/ManagerPage/Dashboard.js b/src/components/ManagerPage/Dashboard.js
index 28c200da..ee17b825 100644
--- a/src/components/ManagerPage/Dashboard.js
+++ b/src/components/ManagerPage/Dashboard.js
@@ -34,14 +34,7 @@ const Dashboard = ({ device, deviceInfo, t, handleHelpRequest }: Props) => (
           {t('app:manager.subtitle')}
         </Text>
         <ContainerToHover>
-          <FakeLink
-            mr={1}
-            underline
-            color="grey"
-            ff="Museo Sans|Light"
-            fontSize={4}
-            onClick={handleHelpRequest}
-          >
+          <FakeLink mr={1} underline color="grey" fontSize={4} onClick={handleHelpRequest}>
             {t('app:common.needHelp')}
           </FakeLink>
           <IconExternalLink size={14} />