create <LbcMessage /> to inject lbc symbols in text from IAPIS

ui/component/common/credit-amount.jsx

@@ -14,6 +14,7 @@ type Props = {
   showLBC?: boolean,
   fee?: boolean,
   className?: string,
+  noFormat?: boolean,
 };
 
 class CreditAmount extends React.PureComponent<Props> {
@@ -23,10 +24,22 @@ class CreditAmount extends React.PureComponent<Props> {
     showFullPrice: false,
     showPlus: false,
     showLBC: true,
+    noFormat: false,
   };
 
   render() {
-    const { amount, precision, showFullPrice, showFree, showPlus, isEstimate, fee, showLBC, className } = this.props;
+    const {
+      amount,
+      precision,
+      showFullPrice,
+      showFree,
+      showPlus,
+      isEstimate,
+      fee,
+      showLBC,
+      className,
+      noFormat,
+    } = this.props;
 
     const minimumRenderableAmount = 10 ** (-1 * precision);
     const fullPrice = formatFullPrice(amount, 2);
@@ -46,7 +59,7 @@ class CreditAmount extends React.PureComponent<Props> {
     if (showFree && isFree) {
       amountText = __('Free');
     } else {
-      amountText = formattedAmount;
+      amountText = noFormat ? amount : formattedAmount;
 
       if (showPlus && amount > 0) {
         amountText = `+${amountText}`;

ui/component/common/lbc-message.jsx

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+import I18nMessage from 'component/i18nMessage';
+import CreditAmount from 'component/common/credit-amount';
+
+type Props = {
+  children: string,
+};
+
+export default function LbcMessage(props: Props) {
+  let amount;
+  const tokenizedMessage = props.children.replace(/(\d?\.?-?\d+?\.?-?\d+?)\s(LBC)/g, (originalString, lbcAmount) => {
+    amount = lbcAmount;
+    return `%lbc%`;
+  });
+
+  return (
+    <I18nMessage tokens={{ lbc: amount ? <CreditAmount badge noFormat amount={amount} /> : undefined }}>
+      {/* Catch any rogue LBC's left */}
+      {tokenizedMessage.replace(/LBC/g, 'LBRY Credits')}
+    </I18nMessage>
+  );
+}

ui/component/inviteList/view.jsx

@@ -4,6 +4,7 @@ import RewardLink from 'component/rewardLink';
 import Icon from 'component/common/icon';
 import * as ICONS from 'constants/icons';
 import Card from 'component/common/card';
+import LbcMessage from 'component/common/lbc-message';
 
 type Props = {
   invitees: ?Array<{
@@ -31,14 +32,18 @@ class InviteList extends React.PureComponent<Props> {
 
     if (referralReward) {
       rewardAmount = referralReward.reward_amount;
-      rewardHelp = referralReward.reward_description.replace('LBC', 'LBRY Credits');
+      rewardHelp = referralReward.reward_description;
     }
     const showClaimable = invitees.some(invite => invite.invite_reward_claimable && !invite.invite_reward_claimed);
 
     return (
       <Card
         title={<div className="table__header-text">{__('Invite History')}</div>}
-        subtitle={<div className="table__header-text">{rewardHelp}</div>}
+        subtitle={
+          <div className="table__header-text">
+            <LbcMessage>{rewardHelp}</LbcMessage>
+          </div>
+        }
         titleActions={
           referralReward &&
           showClaimable && (

ui/component/rewardLink/view.jsx

@@ -1,7 +1,7 @@
 // @flow
-import * as ICONS from 'constants/icons';
 import React from 'react';
 import Button from 'component/button';
+import LbcMessage from 'component/common/lbc-message';
 
 type Reward = {
   reward_amount: number,
@@ -24,19 +24,18 @@ const RewardLink = (props: Props) => {
   } else if (label) {
     displayLabel = label;
   } else if (reward && reward.reward_range && reward.reward_range.includes('-')) {
-    displayLabel = __('Claim %range%', { range: reward.reward_range });
+    displayLabel = __('Claim %range% LBC', { range: reward.reward_range });
   } else if (reward && reward.reward_amount > 0) {
-    displayLabel = __('Claim %amount%', { amount: reward.reward_amount });
+    displayLabel = __('Claim %amount% LBC', { amount: reward.reward_amount });
   } else {
-    displayLabel = __('Claim ???');
+    displayLabel = __('Claim ??? LBC');
   }
 
   return !reward ? null : (
     <Button
       button={button ? 'primary' : 'link'}
       disabled={isPending}
-      label={displayLabel}
+      label={<LbcMessage test>{displayLabel}</LbcMessage>}
-      iconRight={ICONS.LBC}
       onClick={() => {
         claimReward(reward);
       }}

ui/component/rewardTile/view.jsx

@@ -6,6 +6,7 @@ import RewardLink from 'component/rewardLink';
 import Button from 'component/button';
 import Card from 'component/common/card';
 import rewards from 'rewards';
+import LbcMessage from 'component/common/lbc-message';
 
 type Props = {
   openRewardCodeModal: () => void,
@@ -33,7 +34,7 @@ const RewardTile = (props: Props) => {
   return (
     <Card
       title={reward.reward_title}
-      subtitle={reward.reward_description.replace('LBC', 'LBRY Credits')}
+      subtitle={<LbcMessage>{reward.reward_description}</LbcMessage>}
       actions={
         <div className="section__actions">
           {reward.reward_type === rewards.TYPE_GENERATED_CODE && (

ui/scss/component/_button.scss

@@ -40,6 +40,15 @@
     color: var(--color-button-primary-hover-text);
     background-color: var(--color-button-primary-bg-hover);
   }
+
+  .credit-amount {
+    color: var(--color-button-primary-text);
+
+    .icon {
+      margin-left: 3px;
+      margin-right: 2px;
+    }
+  }
 }
 
 .button--secondary {

ui/scss/component/_icon.scss

@@ -49,11 +49,11 @@
 }
 
 .icon__lbc--before-text {
-  margin-left: 5px;
+  margin-left: 4px;
 }
 
 .icon__lbc--after-text {
-  margin-right: 5px;
+  margin-right: 2px;
 }
 
 .icon__lbc--title {

ui/scss/component/_purchase.scss

@@ -1,6 +1,9 @@
 .credit-amount {
+  font-weight: bold;
+  color: var(--color-text);
+
   .icon {
-    margin-bottom: 4px;
+    margin-bottom: 2px;
   }
 }