adding external links to labels in Send modal

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}

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}

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 LabelWithExternalIcon from 'components/base/LabelWithExternalIcon'
-import LabelInfoTooltip from 'components/base/LabelInfoTooltip'
 import { translate } from 'react-i18next'
+import { openURL } from 'helpers/linking'
+import { urls } from 'config/support'
 
-export default translate()(
+export default translate()(({ children, t }: { children: React$Node, t: * }) => (
-  ({ help, children, t }: { help: string, children: React$Node, t: * }) => (
+  <Box flow={1}>
-    <Box flow={1}>
+    <LabelWithExternalIcon
-      <Label>
+      onClick={() => openURL(urls.feesMoreInfo)}
-        <span>{t('app:send.steps.amount.fees')}</span>
+      label={t('app:send.steps.amount.fees')}
-        {help ? <LabelInfoTooltip ml={1} text={help} /> : null}
+    />
-      </Label>
+    <Box horizontal flow={5}>
-      <Box horizontal flow={5}>
+      {children}
-        {children}
-      </Box>
     </Box>
-  ),
+  </Box>
-)
+))

src/components/ManagerPage/index.js

@@ -33,7 +33,6 @@ class ManagerPage extends PureComponent<Props, State> {
   }
 
   handleHelpRequest = () => {
-    console.log('we are trying')
     openURL(urls.managerHelpRequest)
   }
 

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;
+  }
+`

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 LabelWithExternalIcon from 'components/base/LabelWithExternalIcon'
-import LabelInfoTooltip from 'components/base/LabelInfoTooltip'
 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>
+        <LabelWithExternalIcon
-          <span>{t('app:send.steps.amount.recipientAddress')}</span>
+          onClick={this.handleRecipientAddressHelp}
-          <LabelInfoTooltip ml={1} text={t('app:send.steps.amount.recipientAddress')} />
+          label={t('app:send.steps.amount.recipientAddress')}
-        </Label>
+        />
         <RecipientAddress
           autoFocus={autoFocus}
           withQrCode

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