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

84 lines
2.5 KiB
React
Raw Normal View History

// @flow
2020-06-01 19:03:19 +02:00
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import * as MODALS from 'constants/modal_types';
2019-06-17 22:32:38 +02:00
import React from 'react';
import { withRouter } from 'react-router';
2019-06-17 22:32:38 +02:00
import WalletBalance from 'component/walletBalance';
import TxoList from 'component/txoList';
2019-06-17 22:32:38 +02:00
import Page from 'component/page';
2020-06-01 19:03:19 +02:00
import Yrbl from 'component/yrbl';
import Button from 'component/button';
import Spinner from 'component/spinner';
2019-06-17 22:32:38 +02:00
type Props = {
history: { action: string, push: string => void, replace: string => void },
location: { search: string, pathname: string },
2020-06-01 19:03:19 +02:00
balance: number,
doOpenModal: string => void,
};
2019-06-17 22:32:38 +02:00
const WalletPage = (props: Props) => {
2020-06-01 19:03:19 +02:00
const { location, balance, doOpenModal } = props;
const { search } = location;
2020-06-01 19:03:19 +02:00
const showIntro = balance === 0;
const loading = balance === undefined;
return (
<Page>
2020-06-01 19:03:19 +02:00
{loading && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{!loading && (
<>
{showIntro ? (
<div className="main--empty">
<Yrbl
title={__('Your Wallet is Empty')}
subtitle={
<div>
<p>
2020-06-01 19:31:31 +02:00
{__(
'There are a lot of ways to get LBC! You can purchase your own, earn rewards, or have your friend send you a few.'
)}
2020-06-01 19:03:19 +02:00
</p>
<div className="section__actions">
<Button
2020-06-01 19:31:31 +02:00
button="primary"
icon={ICONS.BUY}
label={__('Buy Credits')}
navigate={`/$/${PAGES.BUY}`}
/>
<Button
button="secondary"
icon={ICONS.REWARDS}
label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`}
/>
<Button
icon={ICONS.RECEIVE}
2020-06-01 19:03:19 +02:00
button="secondary"
2020-06-01 19:31:31 +02:00
label={__('Your Address')}
2020-06-01 19:03:19 +02:00
onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
/>
</div>
</div>
}
/>
</div>
) : (
<>
<WalletBalance />
<TxoList search={search} />
</>
)}
</>
)}
</Page>
);
};
export default withRouter(WalletPage);