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] 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',
 }