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

// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import Button from 'component/button';

type Reward = {
  reward_amount: number,
  reward_range: string,
};

type Props = {
  isPending: boolean,
  label: ?string,
  reward: Reward,
  button: ?boolean,
  claimReward: Reward => void,
};

const RewardLink = (props: Props) => {
  const { reward, claimReward, label, isPending, button } = 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%', { range: reward.reward_range });
  } else if (reward && reward.reward_amount > 0) {
    displayLabel = __('Claim %amount%', { amount: reward.reward_amount });
  } else {
    displayLabel = __('Claim ???');
  }

  return !reward ? null : (
    <Button
      button={button ? 'primary' : 'link'}
      disabled={isPending}
      label={displayLabel}
      iconRight={ICONS.LBC}
      onClick={() => {
        claimReward(reward);
      }}
    />
  );
};

export default RewardLink;