create <LbcMessage /> to inject lbc symbols in text from IAPIS
This commit is contained in:
parent
c1e6e90896
commit
6ed57822d6
8 changed files with 67 additions and 14 deletions
|
@ -14,6 +14,7 @@ type Props = {
|
||||||
showLBC?: boolean,
|
showLBC?: boolean,
|
||||||
fee?: boolean,
|
fee?: boolean,
|
||||||
className?: string,
|
className?: string,
|
||||||
|
noFormat?: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
class CreditAmount extends React.PureComponent<Props> {
|
class CreditAmount extends React.PureComponent<Props> {
|
||||||
|
@ -23,10 +24,22 @@ class CreditAmount extends React.PureComponent<Props> {
|
||||||
showFullPrice: false,
|
showFullPrice: false,
|
||||||
showPlus: false,
|
showPlus: false,
|
||||||
showLBC: true,
|
showLBC: true,
|
||||||
|
noFormat: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
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 minimumRenderableAmount = 10 ** (-1 * precision);
|
||||||
const fullPrice = formatFullPrice(amount, 2);
|
const fullPrice = formatFullPrice(amount, 2);
|
||||||
|
@ -46,7 +59,7 @@ class CreditAmount extends React.PureComponent<Props> {
|
||||||
if (showFree && isFree) {
|
if (showFree && isFree) {
|
||||||
amountText = __('Free');
|
amountText = __('Free');
|
||||||
} else {
|
} else {
|
||||||
amountText = formattedAmount;
|
amountText = noFormat ? amount : formattedAmount;
|
||||||
|
|
||||||
if (showPlus && amount > 0) {
|
if (showPlus && amount > 0) {
|
||||||
amountText = `+${amountText}`;
|
amountText = `+${amountText}`;
|
||||||
|
|
23
ui/component/common/lbc-message.jsx
Normal file
23
ui/component/common/lbc-message.jsx
Normal file
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -4,6 +4,7 @@ import RewardLink from 'component/rewardLink';
|
||||||
import Icon from 'component/common/icon';
|
import Icon from 'component/common/icon';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import Card from 'component/common/card';
|
import Card from 'component/common/card';
|
||||||
|
import LbcMessage from 'component/common/lbc-message';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
invitees: ?Array<{
|
invitees: ?Array<{
|
||||||
|
@ -31,14 +32,18 @@ class InviteList extends React.PureComponent<Props> {
|
||||||
|
|
||||||
if (referralReward) {
|
if (referralReward) {
|
||||||
rewardAmount = referralReward.reward_amount;
|
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);
|
const showClaimable = invitees.some(invite => invite.invite_reward_claimable && !invite.invite_reward_claimed);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
title={<div className="table__header-text">{__('Invite History')}</div>}
|
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={
|
titleActions={
|
||||||
referralReward &&
|
referralReward &&
|
||||||
showClaimable && (
|
showClaimable && (
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as ICONS from 'constants/icons';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
|
import LbcMessage from 'component/common/lbc-message';
|
||||||
|
|
||||||
type Reward = {
|
type Reward = {
|
||||||
reward_amount: number,
|
reward_amount: number,
|
||||||
|
@ -24,19 +24,18 @@ const RewardLink = (props: Props) => {
|
||||||
} else if (label) {
|
} else if (label) {
|
||||||
displayLabel = label;
|
displayLabel = label;
|
||||||
} else if (reward && reward.reward_range && reward.reward_range.includes('-')) {
|
} 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) {
|
} else if (reward && reward.reward_amount > 0) {
|
||||||
displayLabel = __('Claim %amount%', { amount: reward.reward_amount });
|
displayLabel = __('Claim %amount% LBC', { amount: reward.reward_amount });
|
||||||
} else {
|
} else {
|
||||||
displayLabel = __('Claim ???');
|
displayLabel = __('Claim ??? LBC');
|
||||||
}
|
}
|
||||||
|
|
||||||
return !reward ? null : (
|
return !reward ? null : (
|
||||||
<Button
|
<Button
|
||||||
button={button ? 'primary' : 'link'}
|
button={button ? 'primary' : 'link'}
|
||||||
disabled={isPending}
|
disabled={isPending}
|
||||||
label={displayLabel}
|
label={<LbcMessage test>{displayLabel}</LbcMessage>}
|
||||||
iconRight={ICONS.LBC}
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
claimReward(reward);
|
claimReward(reward);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -6,6 +6,7 @@ import RewardLink from 'component/rewardLink';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import Card from 'component/common/card';
|
import Card from 'component/common/card';
|
||||||
import rewards from 'rewards';
|
import rewards from 'rewards';
|
||||||
|
import LbcMessage from 'component/common/lbc-message';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
openRewardCodeModal: () => void,
|
openRewardCodeModal: () => void,
|
||||||
|
@ -33,7 +34,7 @@ const RewardTile = (props: Props) => {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
title={reward.reward_title}
|
title={reward.reward_title}
|
||||||
subtitle={reward.reward_description.replace('LBC', 'LBRY Credits')}
|
subtitle={<LbcMessage>{reward.reward_description}</LbcMessage>}
|
||||||
actions={
|
actions={
|
||||||
<div className="section__actions">
|
<div className="section__actions">
|
||||||
{reward.reward_type === rewards.TYPE_GENERATED_CODE && (
|
{reward.reward_type === rewards.TYPE_GENERATED_CODE && (
|
||||||
|
|
|
@ -40,6 +40,15 @@
|
||||||
color: var(--color-button-primary-hover-text);
|
color: var(--color-button-primary-hover-text);
|
||||||
background-color: var(--color-button-primary-bg-hover);
|
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 {
|
.button--secondary {
|
||||||
|
|
|
@ -49,11 +49,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon__lbc--before-text {
|
.icon__lbc--before-text {
|
||||||
margin-left: 5px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon__lbc--after-text {
|
.icon__lbc--after-text {
|
||||||
margin-right: 5px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon__lbc--title {
|
.icon__lbc--title {
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
.credit-amount {
|
.credit-amount {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-text);
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue