lbry-desktop/ui/component/claimInsufficientCredits/view.jsx
2020-09-29 17:12:32 -04:00

38 lines
1.1 KiB
JavaScript

// @flow
import * as React from 'react';
import Button from 'component/button';
import I18nMessage from 'component/i18nMessage';
import LbcSymbol from 'component/common/lbc-symbol';
type Props = {
uri: string,
fileInfo: FileListItem,
isInsufficientCredits: boolean,
claimWasPurchased: boolean,
};
function ClaimInsufficientCredits(props: Props) {
const { isInsufficientCredits, fileInfo, claimWasPurchased } = props;
if (fileInfo || !isInsufficientCredits || claimWasPurchased) {
return null;
}
return (
<div className="media__insufficient-credits help--warning">
<I18nMessage
tokens={{
reward_link: <Button button="link" navigate="/$/rewards" label={__('Rewards')} />,
buy_link: <Button button="link" navigate="/$/buy" label={__('buy')} />,
lbc: <LbcSymbol />,
}}
>
The publisher has chosen to charge %lbc% to view this content. Your balance is currently too low to view it.
Check out %reward_link% for free %lbc% or send more %lbc% to your wallet. You can also %buy_link% more %lbc%.
</I18nMessage>
</div>
);
}
export default ClaimInsufficientCredits;