LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

create YrblWalletEmpty for generic yrbl with empty wallet message

Browse source
This commit is contained in:
Sean Yesmunt 2020-08-26 13:19:03 -04:00
parent 391cc76bd8
commit 7f6ab894d1
10 changed files with 90 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/component/yrblWalletEmpty/index.js Normal file
View file

@ -0,0 +1,12 @@
import { connect } from 'react-redux';
import { selectBalance } from 'lbry-redux';
import { doOpenModal } from 'redux/actions/app';
import Wallet from './view';
const select = state => ({
balance: selectBalance(state),
});
export default connect(select, {
doOpenModal,
})(Wallet);

54
ui/component/yrblWalletEmpty/view.jsx Normal file
View file

@ -0,0 +1,54 @@
// @flow
import type { Node } from 'react';
import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React from 'react';
import Button from 'component/button';
import Yrbl from 'component/yrbl';
type Props = {
includeWalletLink: boolean,
type?: string,
actions?: Node,
doOpenModal: string => void,
};
export default function YrblHelp(props: Props) {
const { includeWalletLink = false, type = 'sad', doOpenModal } = props;
return (
<div className="main--empty">
<Yrbl
type={type}
title={__('Your wallet is empty')}
subtitle={
<div>
<p>{__('You need LBC to create a channel and upload content.')}</p>
<p>
{__(
'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
)}
</p>
<div className="section__actions">
<Button
button="primary"
icon={ICONS.REWARDS}
label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`}
/>
<Button button="secondary" icon={ICONS.BUY} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
{includeWalletLink && (
<Button
icon={ICONS.RECEIVE}
button="secondary"
label={__('Your Address')}
onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
/>
)}
</div>
</div>
}
/>
</div>
);
}

32
ui/page/channelNew/view.jsx
View file

@ -1,12 +1,10 @@
// @flow
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import React from 'react';
import ChannelEdit from 'component/channelEdit';
import Page from 'component/page';
import Button from 'component/button';
import { useHistory } from 'react-router';
import Yrbl from 'component/yrbl';
import YrblWalletEmpty from 'component/yrblWalletEmpty';
type Props = {
balance: number,
@ -21,33 +19,7 @@ function ChannelNew(props: Props) {
return (
<Page noSideNavigation noFooter backout={{ title: __('Create a channel'), backLabel: __('Cancel') }}>
{emptyBalance && (
<div className="main--empty">
<Yrbl
type="sad"
title={__('Your wallet is empty')}
subtitle={
<div>
<p>{__('You need LBC to create a channel and upload content.')}</p>
<p>
{__(
'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
)}
</p>
<div className="section__actions">
<Button
button="primary"
icon={ICONS.REWARDS}
label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`}
/>
<Button button="secondary" icon={ICONS.BUY} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
</div>
</div>
}
/>
</div>
)}
{emptyBalance && <YrblWalletEmpty />}
<ChannelEdit disabled={emptyBalance} onDone={() => push(redirectUrl || `/$/${PAGES.CHANNELS}`)} />
</Page>

8
ui/page/creatorDashboard/index.js
View file

@ -1,7 +1,5 @@
import * as MODALS from 'constants/modal_types';
import { connect } from 'react-redux';
import { selectMyChannelClaims, selectFetchingMyChannels } from 'lbry-redux';
import { doOpenModal } from 'redux/actions/app';
import CreatorDashboardPage from './view';
const select = state => ({
@ -9,8 +7,4 @@ const select = state => ({
fetchingChannels: selectFetchingMyChannels(state),
});
const perform = dispatch => ({
openChannelCreateModal: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)),
});
export default connect(select, perform)(CreatorDashboardPage);
export default connect(select)(CreatorDashboardPage);

22
ui/page/creatorDashboard/view.jsx
View file

@ -1,4 +1,5 @@
// @flow
import * as PAGES from 'constants/pages';
import React from 'react';
import Page from 'component/page';
import Spinner from 'component/spinner';
@ -6,15 +7,15 @@ import Button from 'component/button';
import CreatorAnalytics from 'component/creatorAnalytics';
import ChannelSelector from 'component/channelSelector';
import usePersistedState from 'effects/use-persisted-state';
import Yrbl from 'component/yrbl';
type Props = {
channels: Array<ChannelClaim>,
fetchingChannels: boolean,
openChannelCreateModal: () => void,
};
export default function CreatorDashboardPage(props: Props) {
const { channels, fetchingChannels, openChannelCreateModal } = props;
const { channels, fetchingChannels } = props;
const [selectedChannelUrl, setSelectedChannelUrl] = usePersistedState('analytics-selected-channel');
const hasChannels = channels && channels.length > 0;
const firstChannel = hasChannels && channels[0];
@ -41,14 +42,17 @@ export default function CreatorDashboardPage(props: Props) {
)}
{!fetchingChannels && (!channels || !channels.length) && (
<section className="main--empty">
<div className=" section--small">
<h2 className="section__title--large">{__("You haven't created a channel yet, let's fix that!")}</h2>
<div className="section__actions">
<Button button="primary" onClick={openChannelCreateModal} label={__('Create A Channel')} />
<Yrbl
type="happy"
title={__("You haven't created a channel yet, let's fix that!")}
subtitle={
<div>
<div className="section__actions">
<Button button="primary" navigate={`/$/${PAGES.CHANNEL_NEW}`} label={__('Create A Channel')} />
</div>
</div>
</div>
</section>
}
/>
)}
{!fetchingChannels && channels && channels.length && (

33
ui/page/publish/view.jsx
View file

@ -1,11 +1,8 @@
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React from 'react';
import PublishForm from 'component/publishForm';
import Page from 'component/page';
import Yrbl from 'component/yrbl';
import Button from 'component/button';
import YrblWalletEmpty from 'component/yrblWalletEmpty';
type Props = {
balance: number,
@ -24,33 +21,7 @@ function PublishPage(props: Props) {
return (
<Page>
{balance === 0 && (
<div className="main--empty">
<Yrbl
type="sad"
title={__('Your wallet is empty')}
subtitle={
<div>
<p>{__('You need LBC to create a channel and upload content.')}</p>
<p>
{__(
'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
)}
</p>
<div className="section__actions">
<Button
button="primary"
icon={ICONS.REWARDS}
label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`}
/>
<Button button="secondary" icon={ICONS.BUY} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
</div>
</div>
}
/>
</div>
)}
{balance === 0 && <YrblWalletEmpty />}
<PublishForm scrollToTop={scrollToTop} disabled={balance === 0} />
</Page>
);

46
ui/page/wallet/view.jsx
View file

@ -1,25 +1,20 @@
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import * as MODALS from 'constants/modal_types';
import React from 'react';
import { withRouter } from 'react-router';
import WalletBalance from 'component/walletBalance';
import TxoList from 'component/txoList';
import Page from 'component/page';
import Yrbl from 'component/yrbl';
import Button from 'component/button';
import Spinner from 'component/spinner';
import YrblWalletEmpty from 'component/yrblWalletEmpty';
type Props = {
history: { action: string, push: string => void, replace: string => void },
location: { search: string, pathname: string },
balance: number,
doOpenModal: string => void,
};
const WalletPage = (props: Props) => {
const { location, balance, doOpenModal } = props;
const { location, balance } = props;
const { search } = location;
const showIntro = balance === 0;
const loading = balance === undefined;
@ -34,42 +29,7 @@ const WalletPage = (props: Props) => {
{!loading && (
<>
{showIntro ? (
<div className="main--empty">
<Yrbl
type="sad"
title={__('Your wallet is empty')}
subtitle={
<div>
<p>{__('You need LBC to create a channel and upload content.')}</p>
<p>
{__(
'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
)}
</p>
<div className="section__actions">
<Button
button="primary"
icon={ICONS.REWARDS}
label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`}
/>
<Button
button="secondary"
icon={ICONS.BUY}
label={__('Buy Credits')}
navigate={`/$/${PAGES.BUY}`}
/>
<Button
icon={ICONS.RECEIVE}
button="secondary"
label={__('Your Address')}
onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
/>
</div>
</div>
}
/>
</div>
<YrblWalletEmpty includeWalletLink />
) : (
<>
<WalletBalance />

1
ui/scss/component/_button.scss
View file

@ -44,6 +44,7 @@
.button--secondary {
background-color: var(--color-button-secondary-bg);
border: 1px solid var(--color-button-secondary-border);
color: var(--color-button-secondary-text);
&:hover {

1
ui/scss/init/_color.scss
View file

@ -36,6 +36,7 @@
--color-button-primary-bg-hover: var(--color-primary-alt-2);
--color-button-primary-hover-text: var(--color-primary-alt);
--color-button-secondary-bg: var(--color-secondary-alt);
--color-button-secondary-border: #c5d7ed;
--color-button-secondary-text: var(--color-secondary);
--color-button-secondary-bg-hover: #b9d0e9;
--color-button-alt-bg: var(--color-gray-1);

1
ui/scss/themes/dark.scss
View file

@ -25,6 +25,7 @@
--color-button-primary-text: var(--color-primary);
--color-button-primary-hover-text: var(--color-text);
--color-button-secondary-bg: #395877;
--color-button-secondary-border: #395877;
--color-button-secondary-bg-hover: #4b6d8f;
--color-button-secondary-text: #a3c1e0;
--color-button-alt-bg: #4d5660;