mostly done with doing the iteration

This commit is contained in:
Anthony 2021-08-17 22:51:39 +02:00
parent 4688b4bf58
commit b3d3a1a454
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
3 changed files with 30 additions and 52 deletions

View file

@ -10,6 +10,8 @@ import Card from 'component/common/card';
import LbcSymbol from 'component/common/lbc-symbol';
import I18nMessage from 'component/i18nMessage';
import { formatNumberWithCommas } from 'util/number';
import Icon from 'component/common/icon';
type Props = {
balance: number,
@ -63,6 +65,7 @@ const WalletBalance = (props: Props) => {
}, [doFetchUtxoCounts, balance, detailsExpanded]);
return (
<div className={'columns'}>
<Card
title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
subtitle={
@ -181,6 +184,32 @@ const WalletBalance = (props: Props) => {
</>
}
/>
<Card
title={<><Icon size={18} icon={ICONS.FINANCE} />32 USD</>}
subtitle={32 &&
<I18nMessage>
This is your pending balance that will be automatically sent to your bank account
</I18nMessage>
}
actions={
<>
<h2 className="section__title--small">
$32 Total Received Tips
</h2>
<h2 className="section__title--small">
$0 Withdrawn
</h2>
<div className="section__actions">
<Button button="secondary" label={__('Manage Accounts')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
<Button button="secondary" label={__('Manage Cards')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} />
</div>
</>
}
/>
</div>
);
};

View file

@ -32,57 +32,9 @@ const WalletBalance = (props: Props) => {
<h2 className="section__title--small">
${(accountDetails && (accountDetails.total_paid_out / 100)) || 0} Withdrawn
{/* <Button */}
{/* button="link" */}
{/* label={detailsExpanded ? __('View less') : __('View more')} */}
{/* iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN} */}
{/* onClick={() => setDetailsExpanded(!detailsExpanded)} */}
{/* /> */}
</h2>
{/* view more section */}
{/* commenting out because not implemented, but could be used in the future */}
{/* {detailsExpanded && ( */}
{/* <div className="section__subtitle"> */}
{/* <dl> */}
{/* <dt> */}
{/* <span className="dt__text">{__('Earned from uploads')}</span> */}
{/* /!* <span className="help--dt">({__('Earned from channel page')})</span> *!/ */}
{/* </dt> */}
{/* <dd> */}
{/* <span className="dd__text"> */}
{/* {Boolean(1) && ( */}
{/* <Button */}
{/* button="link" */}
{/* className="dd__button" */}
{/* icon={ICONS.UNLOCK} */}
{/* /> */}
{/* )} */}
{/* <CreditAmount amount={1} precision={4} /> */}
{/* </span> */}
{/* </dd> */}
{/* <dt> */}
{/* <span className="dt__text">{__('Earned from channel page')}</span> */}
{/* /!* <span className="help--dt">({__('Delete or edit past content to spend')})</span> *!/ */}
{/* </dt> */}
{/* <dd> */}
{/* <CreditAmount amount={1} precision={4} /> */}
{/* </dd> */}
{/* /!* <dt> *!/ */}
{/* /!* <span className="dt__text">{__('...supporting content')}</span> *!/ */}
{/* /!* <span className="help--dt">({__('Delete supports to spend')})</span> *!/ */}
{/* /!* </dt> *!/ */}
{/* /!* <dd> *!/ */}
{/* /!* <CreditAmount amount={1} precision={4} /> *!/ */}
{/* /!* </dd> *!/ */}
{/* </dl> */}
{/* </div> */}
{/* )} */}
<div className="section__actions">
{/* <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND} /> */}
<Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
</div>
</>

View file

@ -159,6 +159,7 @@ const WalletPage = (props: Props) => {
<>
{/* @if TARGET='web' */}
<Page>
<WalletBalance />
<Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--collection-edit-page">
<Tab>{__('LBRY Credits')}</Tab>
@ -182,7 +183,6 @@ const WalletPage = (props: Props) => {
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<WalletBalance />
<TxoList search={search} />
</div>
)}
@ -193,13 +193,11 @@ const WalletPage = (props: Props) => {
</TabPanel>
<TabPanel>
<div className="section card-stack">
<WalletFiatBalance accountDetails={accountStatusResponse} />
<WalletFiatAccountHistory transactions={accountTransactionResponse} />
</div>
</TabPanel>
<TabPanel>
<div className="section card-stack">
<WalletFiatPaymentBalance transactions={customerTransactions} accountDetails={accountStatusResponse} />
<WalletFiatPaymentHistory transactions={customerTransactions} />
</div>
</TabPanel>
@ -220,7 +218,6 @@ const WalletPage = (props: Props) => {
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<WalletBalance />
<TxoList search={search} />
</div>
)}