lbry-desktop/ui/component/rewardLink/view.jsx

49 lines
1.2 KiB
JavaScript

// @flow
import React from 'react';
import Button from 'component/button';
import LbcMessage from 'component/common/lbc-message';
type Reward = {
reward_amount: number,
reward_range: string,
};
type Props = {
isPending: boolean,
label: ?string,
reward: Reward,
button: ?boolean,
disabled: boolean,
claimReward: (Reward) => void,
};
const RewardLink = (props: Props) => {
const { reward, claimReward, label, isPending, button, disabled = false } = props;
let displayLabel = label;
if (isPending) {
displayLabel = __('Claiming...');
} else if (label) {
displayLabel = label;
} else if (reward && reward.reward_range && reward.reward_range.includes('-')) {
displayLabel = __('Claim %range% LBC', { range: reward.reward_range });
} else if (reward && reward.reward_amount > 0) {
displayLabel = __('Claim %amount% LBC', { amount: reward.reward_amount });
} else {
displayLabel = __('Claim ??? LBC');
}
return !reward ? null : (
<Button
button={button ? 'primary' : 'link'}
disabled={disabled || isPending}
label={<LbcMessage>{displayLabel}</LbcMessage>}
aria-label={displayLabel}
onClick={() => {
claimReward(reward);
}}
/>
);
};
export default RewardLink;