ui: display tooltip for "In Fee %" header

Author: jamaljsr

app/src/components/common/Tip.tsx

@@ -68,11 +68,11 @@ const TooltipWrapper: React.FC<Props> = ({
  * prop. So we basically proxy the className using the TooltipWrapper
  * above, then export this styled component for the rest of the app to use
  */
-const Tip = styled(TooltipWrapper)`
+const Tip = styled(TooltipWrapper)<{ capitalize?: boolean }>`
   color: ${props => props.theme.colors.blue};
   font-family: ${props => props.theme.fonts.open.semiBold};
   font-size: ${props => props.theme.sizes.xs};
-  text-transform: uppercase;
+  text-transform: ${props => (props.capitalize === false ? 'none' : 'uppercase')};
   opacity: 0.95;
 
   &.rc-tooltip-placement-bottom .rc-tooltip-arrow,

app/src/components/loop/ChannelRow.tsx

@@ -73,7 +73,9 @@ export const ChannelRowHeader: React.FC = () => {
         <HeaderFour>{l('canSend')}</HeaderFour>
       </Column>
       <Column cols={1}>
-        <HeaderFour>{l('feeRate')}</HeaderFour>
+        <Tip overlay={l('feeRateTip')} capitalize={false}>
+          <HeaderFour>{l('feeRate')}</HeaderFour>
+        </Tip>
       </Column>
       <Column cols={1}>
         <HeaderFour>{l('upTime')}</HeaderFour>
@@ -145,7 +147,7 @@ const ChannelRow: React.FC<Props> = ({ channel, style }) => {
       <Column cols={1}>{channel.remoteFeeRate}</Column>
       <Column cols={1}>{channel.uptimePercent}</Column>
       <Column cols={2}>
-        <Tip overlay={channel.remotePubkey} placement="left">
+        <Tip overlay={channel.remotePubkey} placement="left" capitalize={false}>
           <span>{channel.aliasLabel}</span>
         </Tip>
       </Column>

app/src/i18n/locales/en-US.json

@@ -22,6 +22,7 @@
   "cmps.loop.ChannelRowHeader.canReceive": "Can Receive",
   "cmps.loop.ChannelRowHeader.canSend": "Can Send",
   "cmps.loop.ChannelRowHeader.feeRate": "In Fee %",
+  "cmps.loop.ChannelRowHeader.feeRateTip": "The fee charged by the peer to route inbound payments through the channel",
   "cmps.loop.ChannelRowHeader.upTime": "Up Time %",
   "cmps.loop.ChannelRowHeader.peer": "Peer/Alias",
   "cmps.loop.ChannelRowHeader.capacity": "Capacity",