lbry-desktop/ui/page/publish/view.jsx

77 lines
2.1 KiB
React
Raw Normal View History

// @flow
import React, { Fragment } from 'react';
import PublishForm from 'component/publishForm';
2018-03-26 23:32:43 +02:00
import Page from 'component/page';
import Yrbl from 'component/yrbl';
import LbcSymbol from 'component/common/lbc-symbol';
2019-11-13 19:14:19 +01:00
import RewardAuthIntro from 'component/rewardAuthIntro';
import usePersistedState from 'effects/use-persisted-state';
2016-11-22 21:19:08 +01:00
type Props = {
balance: number,
totalRewardValue: number,
};
function PublishPage(props: Props) {
2019-11-13 19:14:19 +01:00
const { balance } = props;
const [channel, setChannel] = usePersistedState('publish-channel', '');
function scrollToTop() {
const mainContent = document.querySelector('main');
2018-03-26 23:32:43 +02:00
if (mainContent) {
mainContent.scrollTop = 0; // It would be nice to animate this
}
}
function handleChannelChange(channel) {
setChannel(channel);
}
return (
<Page>
{balance === 0 ? (
<Fragment>
<div className="section">
<Yrbl
2020-07-23 19:02:07 +02:00
title={__("You can't upload things quite yet")}
subtitle={
<Fragment>
<p>
{__(
'LBRY uses a blockchain, which is a fancy way of saying that users (you) are in control of your data.'
)}
</p>
<p>
{__('Because of the blockchain, some actions require LBRY credits')} (
<LbcSymbol />
).
</p>
<p>
<LbcSymbol />{' '}
{__(
'allows you to do some neat things, like paying your favorite creators for their content. And no company can stop you.'
)}
</p>
</Fragment>
}
/>
</div>
<div className="section">
<RewardAuthIntro />
</div>
</Fragment>
) : (
<PublishForm
scrollToTop={scrollToTop}
disabled={balance === 0}
channel={channel}
onChannelChange={handleChannelChange}
/>
)}
</Page>
);
2018-03-26 23:32:43 +02:00
}
2017-06-17 19:59:18 +02:00
2016-11-22 21:19:08 +01:00
export default PublishPage;