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

Merge pull request #6917 from lbryio/squashed-and-merged

Browse source 
Wallet redesign
This commit is contained in:
mayeaux 2021-08-24 18:46:47 +02:00 committed by GitHub
commit ef5701bb38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 729 additions and 617 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/component/common/credit-amount.jsx
View file

@ -49,6 +49,11 @@ class CreditAmount extends React.PureComponent<Props> {
isFiat, isFiat,
} = this.props; } = this.props;
const minimumRenderableAmount = 10 ** (-1 * precision); const minimumRenderableAmount = 10 ** (-1 * precision);
// return null, otherwise it will try and convert undefined to a string
if (amount === undefined) {
return null;
}
const fullPrice = formatFullPrice(amount, 2); const fullPrice = formatFullPrice(amount, 2);
const isFree = parseFloat(amount) === 0; const isFree = parseFloat(amount) === 0;

147
ui/component/inviteNew/view.jsx
View file

@ -11,7 +11,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
type Props = { type Props = {
errorMessage: ?string, errorMessage: ?string,
inviteNew: string => void, inviteNew: (string) => void,
isPending: boolean, isPending: boolean,
referralLink: string, referralLink: string,
referralCode: string, referralCode: string,
@ -35,10 +35,10 @@ function InviteNew(props: Props) {
const [referralSource, setReferralSource] = useState(referralCode); const [referralSource, setReferralSource] = useState(referralCode);
const handleReferralChange = React.useCallback( const handleReferralChange = React.useCallback(
code => { (code) => {
setReferralSource(code); setReferralSource(code);
// TODO: keep track of this in an array? // TODO: keep track of this in an array?
const matchingChannel = channels && channels.find(ch => ch.name === code); const matchingChannel = channels && channels.find((ch) => ch.name === code);
if (matchingChannel) { if (matchingChannel) {
analytics.apiLogPublish(matchingChannel); analytics.apiLogPublish(matchingChannel);
} }
@ -68,80 +68,85 @@ function InviteNew(props: Props) {
}, [topChannel, handleReferralChange]); }, [topChannel, handleReferralChange]);
function lookupUrlByClaimName(name, channels) { function lookupUrlByClaimName(name, channels) {
const claim = channels.find(channel => channel.name === name); const claim = channels.find((channel) => channel.name === name);
return claim && claim.canonical_url ? claim.canonical_url.replace('lbry://', '') : name; return claim && claim.canonical_url ? claim.canonical_url.replace('lbry://', '') : name;
} }
return ( return (
<div className={'columns'}> <div className={'columns'}>
<Card <div className="column">
title={__('Invites')} <Card
subtitle={ title={__('Invites')}
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}> subtitle={
Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%. <I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
You can use invites just like affiliate links. Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%.
</I18nMessage> You can use invites just like affiliate links.
} </I18nMessage>
actions={ }
<React.Fragment> actions={
<CopyableText label={__('Your invite link')} copyable={referral} /> <React.Fragment>
{channels && channels.length > 0 && ( <CopyableText label={__('Your invite link')} copyable={referral} />
<FormField {channels && channels.length > 0 && (
type="select" <FormField
label={__('Customize link')} type="select"
value={referralSource} label={__('Customize link')}
onChange={e => handleReferralChange(e.target.value)} value={referralSource}
> onChange={(e) => handleReferralChange(e.target.value)}
{channels.map(channel => (
<option key={channel.claim_id} value={channel.name}>
{channel.name}
</option>
))}
<option value={referralCode}>{referralCode}</option>
</FormField>
)}
</React.Fragment>
}
/>
<Card
title={__('Invite by email')}
subtitle={
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
Invite someone you know by email and earn %lbc% when they join %SITE_NAME%.
</I18nMessage>
}
actions={
<React.Fragment>
<Form onSubmit={handleSubmit}>
<FormField
type="text"
label={__('Email')}
placeholder="youremail@example.org"
name="email"
value={email}
error={errorMessage}
inputButton={
<Button button="secondary" type="submit" label={__('Invite')} disabled={isPending || !email} />
}
onChange={event => {
handleEmailChanged(event);
}}
/>
<p className="help">
<I18nMessage
tokens={{
rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
}}
> >
Read our %referral_faq_link% to learn more about rewards. {channels.map((channel) => (
</I18nMessage> <option key={channel.claim_id} value={channel.name}>
</p> {channel.name}
</Form> </option>
</React.Fragment> ))}
} <option value={referralCode}>{referralCode}</option>
/> </FormField>
)}
</React.Fragment>
}
/>
</div>
<div className="column">
<Card
title={__('Invite by email')}
subtitle={
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
Invite someone you know by email and earn %lbc% when they join %SITE_NAME%.
</I18nMessage>
}
actions={
<React.Fragment>
<Form onSubmit={handleSubmit}>
<FormField
type="text"
label={__('Email')}
placeholder="youremail@example.org"
name="email"
value={email}
error={errorMessage}
inputButton={
<Button button="secondary" type="submit" label={__('Invite')} disabled={isPending || !email} />
}
onChange={(event) => {
handleEmailChanged(event);
}}
/>
<p className="help">
<I18nMessage
tokens={{
rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
referral_faq_link: (
<Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />
),
}}
>
Read our %referral_faq_link% to learn more about rewards.
</I18nMessage>
</p>
</Form>
</React.Fragment>
}
/>
</div>
</div> </div>
); );
} }

341
ui/component/txoList/view.jsx
View file

@ -12,6 +12,20 @@ import { toCapitalCase } from 'util/string';
import classnames from 'classnames'; import classnames from 'classnames';
import HelpLink from 'component/common/help-link'; import HelpLink from 'component/common/help-link';
import FileExporter from 'component/common/file-exporter'; import FileExporter from 'component/common/file-exporter';
import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
import { Lbryio } from 'lbryinc';
import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment();
// constants to be used in query params
const QUERY_NAME_CURRENCY = 'currency';
const QUERY_NAME_TAB = 'tab';
const QUERY_NAME_FIAT_TYPE = 'fiatType';
// TODO: this tab will be renamed
const DEFAULT_CURRENCY_PARAM = 'credits';
const DEFAULT_TAB_PARAM = 'fiat-payment-history';
const DEFAULT_FIAT_TYPE_PARAM = 'incoming';
type Props = { type Props = {
search: string, search: string,
@ -28,7 +42,7 @@ type Props = {
}; };
type Delta = { type Delta = {
dkey: string, changedParameterKey: string,
value: string, value: string,
}; };
@ -45,12 +59,91 @@ function TxoList(props: Props) {
transactionsFile, transactionsFile,
} = props; } = props;
const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]);
const [customerTransactions, setCustomerTransactions] = React.useState([]);
function getPaymentHistory() {
return Lbryio.call(
'customer',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
function getAccountTransactions() {
return Lbryio.call(
'account',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
// calculate account transactions section
React.useEffect(() => {
(async function() {
try {
const accountTransactionResponse = await getAccountTransactions();
// reverse so order is from most recent to latest
if (accountTransactionResponse && accountTransactionResponse.length) {
accountTransactionResponse.reverse();
}
// TODO: remove this once pagination is implemented
if (accountTransactionResponse && accountTransactionResponse.length && accountTransactionResponse.length > 25) {
accountTransactionResponse.length = 25;
}
setAccountTransactionResponse(accountTransactionResponse);
} catch (err) {
console.log(err);
}
})();
}, []);
// populate customer payment data
React.useEffect(() => {
(async function() {
try {
// get card payments customer has made
let customerTransactionResponse = await getPaymentHistory();
// console.log('amount of transactions');
// console.log(customerTransactionResponse.length);
// reverse so order is from most recent to latest
if (customerTransactionResponse && customerTransactionResponse.length) {
customerTransactionResponse.reverse();
}
// TODO: remove this once pagination is implemented
if (customerTransactionResponse && customerTransactionResponse.length && customerTransactionResponse.length > 25) {
customerTransactionResponse.length = 25;
}
setCustomerTransactions(customerTransactionResponse);
} catch (err) {
console.log(err);
}
})();
}, []);
const urlParams = new URLSearchParams(search); const urlParams = new URLSearchParams(search);
const page = urlParams.get(TXO.PAGE) || String(1); const page = urlParams.get(TXO.PAGE) || String(1);
const pageSize = urlParams.get(TXO.PAGE_SIZE) || String(TXO.PAGE_SIZE_DEFAULT); const pageSize = urlParams.get(TXO.PAGE_SIZE) || String(TXO.PAGE_SIZE_DEFAULT);
const type = urlParams.get(TXO.TYPE) || TXO.ALL; const type = urlParams.get(TXO.TYPE) || TXO.ALL;
const subtype = urlParams.get(TXO.SUB_TYPE); const subtype = urlParams.get(TXO.SUB_TYPE);
const active = urlParams.get(TXO.ACTIVE) || TXO.ALL; const active = urlParams.get(TXO.ACTIVE) || TXO.ALL;
const currency = urlParams.get(QUERY_NAME_CURRENCY) || DEFAULT_CURRENCY_PARAM;
const fiatType = urlParams.get(QUERY_NAME_FIAT_TYPE) || DEFAULT_FIAT_TYPE_PARAM;
// tab used in the wallet section
// TODO: need to change this eventually
const tab = urlParams.get(QUERY_NAME_TAB) || DEFAULT_TAB_PARAM;
const currentUrlParams = { const currentUrlParams = {
page, page,
@ -58,11 +151,15 @@ function TxoList(props: Props) {
active, active,
type, type,
subtype, subtype,
currency,
fiatType,
tab,
}; };
const hideStatus = const hideStatus =
type === TXO.SENT || (currentUrlParams.type === TXO.RECEIVED && currentUrlParams.subtype !== TXO.TIP); type === TXO.SENT || (currentUrlParams.type === TXO.RECEIVED && currentUrlParams.subtype !== TXO.TIP);
// this is for sdk params
const params = {}; const params = {};
if (currentUrlParams.type) { if (currentUrlParams.type) {
if (currentUrlParams.type === TXO.ALL) { if (currentUrlParams.type === TXO.ALL) {
@ -121,7 +218,8 @@ function TxoList(props: Props) {
function updateUrl(delta: Delta) { function updateUrl(delta: Delta) {
const newUrlParams = new URLSearchParams(); const newUrlParams = new URLSearchParams();
switch (delta.dkey) {
switch (delta.changedParameterKey) {
case TXO.PAGE: case TXO.PAGE:
if (currentUrlParams.type) { if (currentUrlParams.type) {
newUrlParams.set(TXO.TYPE, currentUrlParams.type); newUrlParams.set(TXO.TYPE, currentUrlParams.type);
@ -133,6 +231,8 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.ACTIVE, currentUrlParams.active); newUrlParams.set(TXO.ACTIVE, currentUrlParams.active);
} }
newUrlParams.set(TXO.PAGE, delta.value); newUrlParams.set(TXO.PAGE, delta.value);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
case TXO.TYPE: case TXO.TYPE:
newUrlParams.set(TXO.TYPE, delta.value); newUrlParams.set(TXO.TYPE, delta.value);
@ -151,6 +251,8 @@ function TxoList(props: Props) {
} }
newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
case TXO.SUB_TYPE: case TXO.SUB_TYPE:
if (currentUrlParams.type) { if (currentUrlParams.type) {
@ -160,6 +262,8 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.SUB_TYPE, delta.value); newUrlParams.set(TXO.SUB_TYPE, delta.value);
newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
case TXO.ACTIVE: case TXO.ACTIVE:
if (currentUrlParams.type) { if (currentUrlParams.type) {
@ -171,6 +275,25 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.ACTIVE, delta.value); newUrlParams.set(TXO.ACTIVE, delta.value);
newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break;
// toggling the currency type (lbc/fiat)
case QUERY_NAME_CURRENCY:
newUrlParams.set(QUERY_NAME_CURRENCY, delta.value);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
// only set fiat type (incoming|outgoing) if fiat is being used
if (delta.value === 'credits') {
newUrlParams.delete(QUERY_NAME_FIAT_TYPE);
} else {
newUrlParams.set(QUERY_NAME_FIAT_TYPE, currentUrlParams.fiatType);
}
break;
// toggling the fiat type (incoming/outgoing)
case QUERY_NAME_FIAT_TYPE:
newUrlParams.set(QUERY_NAME_FIAT_TYPE, delta.value);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
} }
@ -188,63 +311,58 @@ function TxoList(props: Props) {
return ( return (
<Card <Card
title={<div className="table__header-text">{__(`Transactions`)}</div>} title={
titleActions={ <><div className="table__header-text txo__table_header">{__(`Transactions`)}</div>
<div className="card__actions--inline"> <div className="txo__radios_container">
{!isFetchingTransactions && transactionsFile === null && ( <fieldset-section style={{display: 'inline'}} className="txo__radios_fieldset">
<label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label> {/* toggle between LBC and fiat buttons */}
)} <div className={'txo__radios'}>
<div className="txo__export"> {/* toggle to LBC */}
<FileExporter <Button
data={transactionsFile} button="alt"
label={__('Export')} onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'credits' })}
tooltip={__('Fetch transaction data for export')} className={classnames(`button-toggle`, {
defaultFileName={'transactions-history.csv'} 'button-toggle--active': currency === 'credits',
onFetch={() => fetchTransactions()} })}
progressMsg={isFetchingTransactions ? __('Fetching data') : ''} label={__('Credits')}
/> />
{/* toggle to fiat */}
<Button
button="alt"
onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'fiat' })}
className={classnames(`button-toggle`, {
'button-toggle--active': currency === 'fiat',
})}
label={__('USD')}
/>
</div>
</fieldset-section>
</div> </div>
<Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} /> </>
</div>
} }
isBodyList isBodyList
body={ body={currency === 'credits'
<div> ? <div>
{/* LBC transactions section */}
<div className="card__body-actions"> <div className="card__body-actions">
<div className="card__actions"> <div className="card__actions card__actions--between">
<div> <div className="card__actions--inline">
<FormField
type="select"
name="type"
label={
<>
{__('Type')}
<HelpLink href="https://lbry.com/faq/transaction-types" />
</>
}
value={type || 'all'}
onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value })}
>
{Object.values(TXO.DROPDOWN_TYPES).map((v) => {
const stringV = String(v);
return (
<option key={stringV} value={stringV}>
{stringV && __(toCapitalCase(stringV))}
</option>
);
})}
</FormField>
</div>
{(type === TXO.SENT || type === TXO.RECEIVED) && (
<div> <div>
{/* LBC transaction type dropdown */}
<FormField <FormField
type="select" type="select"
name="subtype" name="type"
label={__('Payment Type')} label={
value={subtype || 'all'} <>
onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value })} {__('Type')}
<HelpLink href="https://lbry.com/faq/transaction-types" />
</>
}
value={type || 'all'}
onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value, tab })}
> >
{Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => { {Object.values(TXO.DROPDOWN_TYPES).map((v) => {
const stringV = String(v); const stringV = String(v);
return ( return (
<option key={stringV} value={stringV}> <option key={stringV} value={stringV}>
@ -254,46 +372,127 @@ function TxoList(props: Props) {
})} })}
</FormField> </FormField>
</div> </div>
)} {(type === TXO.SENT || type === TXO.RECEIVED) && (
{!hideStatus && ( <div>
<FormField
type="select"
name="subtype"
label={__('Payment Type')}
value={subtype || 'all'}
onChange={(e) => handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value, tab })}
>
{Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
const stringV = String(v);
return (
<option key={stringV} value={stringV}>
{stringV && __(toCapitalCase(stringV))}
</option>
);
})}
</FormField>
</div>
)}
{!hideStatus && (
<div>
<fieldset-section>
<label>{__('Status')}</label>
<div className={'txo__radios'}>
{/* active transactions button */}
<Button
button="alt"
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === TXO.ACTIVE,
})}
label={__('Active')}
/>
{/* historical transactions button */}
<Button
button="alt"
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'spent',
})}
label={__('Historical')}
/>
{/* all transactions button */}
<Button
button="alt"
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'all',
})}
label={__('All')}
/>
</div>
</fieldset-section>
</div>
)}
</div>
{/* export and refresh buttons */}
<div className="card__actions--inline">
{!isFetchingTransactions && transactionsFile === null && (
<label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
)}
<div className="txo__export">
<FileExporter
data={transactionsFile}
label={__('Export')}
tooltip={__('Fetch transaction data for export')}
defaultFileName={'transactions-history.csv'}
onFetch={() => fetchTransactions()}
progressMsg={isFetchingTransactions ? __('Fetching data') : ''}
/>
</div>
<Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
</div>
</div>
</div>
{/* listing of the lbc transactions */}
<TransactionListTable txos={txoPage} />
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
</div>
: <div>
{/* FIAT SECTION ( toggle buttons and transactions) */}
<div className="section card-stack">
<div className="card__body-actions">
<div className="card__actions">
<div> <div>
<fieldset-section> <fieldset-section>
<label>{__('Status')}</label> <label>{__('Type')}</label>
<div className={'txo__radios'}> <div className={'txo__radios'}>
{/* incoming transactions button */}
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active' })} onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'incoming'})}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': active === TXO.ACTIVE, 'button-toggle--active': fiatType === 'incoming',
})} })}
label={__('Active')} label={__('Incoming')}
/> />
{/* incoming transactions button */}
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent' })} onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'outgoing'})}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': active === 'spent', 'button-toggle--active': fiatType === 'outgoing',
})} })}
label={__('Historical')} label={__('Outgoing')}
/>
<Button
button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all' })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'all',
})}
label={__('All')}
/> />
</div> </div>
</fieldset-section> </fieldset-section>
</div> </div>
)} </div>
</div> </div>
{/* listing of the transactions */}
{ fiatType === 'incoming' && <WalletFiatAccountHistory transactions={accountTransactionResponse} /> }
{ fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={customerTransactions} /> }
{/* TODO: have to finish pagination */}
{/* <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> */}
</div> </div>
<TransactionListTable txos={txoPage} />
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
</div> </div>
} }
/> />
); );
} }

250
ui/component/walletBalance/view.jsx
View file

@ -10,6 +10,7 @@ import Card from 'component/common/card';
import LbcSymbol from 'component/common/lbc-symbol'; import LbcSymbol from 'component/common/lbc-symbol';
import I18nMessage from 'component/i18nMessage'; import I18nMessage from 'component/i18nMessage';
import { formatNumberWithCommas } from 'util/number'; import { formatNumberWithCommas } from 'util/number';
import WalletFiatBalance from 'component/walletFiatBalance';
type Props = { type Props = {
balance: number, balance: number,
@ -63,124 +64,139 @@ const WalletBalance = (props: Props) => {
}, [doFetchUtxoCounts, balance, detailsExpanded]); }, [doFetchUtxoCounts, balance, detailsExpanded]);
return ( return (
<Card <div className={'columns'}>
title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />} <div className="column">
subtitle={ <Card
totalLocked > 0 ? ( title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}> subtitle={
Your total balance. All of this is yours, but some %lbc% is in use on channels and content right now. totalLocked > 0 ? (
</I18nMessage> <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
) : ( Your total balance. All of this is yours, but some %lbc% is in use on channels and content right now.
<span>{__('Your total balance.')}</span>
)
}
actions={
<>
<h2 className="section__title--small">
<I18nMessage tokens={{ lbc_amount: <CreditAmount amount={balance} precision={4} /> }}>
%lbc_amount% immediately spendable
</I18nMessage>
</h2>
<h2 className="section__title--small">
<I18nMessage
tokens={{
lbc_amount: <CreditAmount amount={totalLocked} precision={4} />,
}}
>
%lbc_amount% boosting content
</I18nMessage>
<Button
button="link"
label={detailsExpanded ? __('View less') : __('View more')}
iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
onClick={() => setDetailsExpanded(!detailsExpanded)}
/>
</h2>
{detailsExpanded && (
<div className="section__subtitle">
<dl>
<dt>
<span className="dt__text">{__('...earned from others')}</span>
<span className="help--dt">({__('Unlock to spend')})</span>
</dt>
<dd>
<span className="dd__text">
{Boolean(tipsBalance) && (
<Button
button="link"
className="dd__button"
disabled={operationPending}
icon={ICONS.UNLOCK}
onClick={() => doOpenModal(MODALS.MASS_TIP_UNLOCK)}
/>
)}
<CreditAmount amount={tipsBalance} precision={4} />
</span>
</dd>
<dt>
<span className="dt__text">{__('...on initial publishes')}</span>
<span className="help--dt">({__('Delete or edit past content to spend')})</span>
</dt>
<dd>
<CreditAmount amount={claimsBalance} precision={4} />
</dd>
<dt>
<span className="dt__text">{__('...supporting content')}</span>
<span className="help--dt">({__('Delete supports to spend')})</span>
</dt>
<dd>
<CreditAmount amount={supportsBalance} precision={4} />
</dd>
</dl>
</div>
)}
{/* @if TARGET='app' */}
{hasSynced ? (
<p className="section help">
{__('A backup of your wallet is synced with lbry.tv.')}
<HelpLink href="https://lbry.com/faq/account-sync" />
</p>
) : (
<p className="help--warning">
{__('Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.')}
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
</p>
)}
{/* @endif */}
<div className="section__actions">
<Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
<Button button="secondary" label={__('Receive')} icon={ICONS.RECEIVE} navigate={`/$/${PAGES.RECEIVE}`} />
<Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
</div>
{(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
<p className="help">
<I18nMessage
tokens={{
now: (
<Button
button="link"
onClick={() => doUtxoConsolidate()}
disabled={operationPending}
label={
consolidateIsPending || consolidatingUtxos ? __('Consolidating...') : __('Consolidate Now')
}
/>
),
help: <HelpLink href="https://lbry.com/faq/transaction-types" />,
}}
>
Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This could
take some time. %now%%help%
</I18nMessage> </I18nMessage>
</p> ) : (
)} <span>{__('Your total balance.')}</span>
</> )
} }
/> actions={
<>
<h2 className="section__title--small">
<I18nMessage tokens={{ lbc_amount: <CreditAmount amount={balance} precision={4} /> }}>
%lbc_amount% immediately spendable
</I18nMessage>
</h2>
<h2 className="section__title--small">
<I18nMessage
tokens={{
lbc_amount: <CreditAmount amount={totalLocked} precision={4} />,
}}
>
%lbc_amount% boosting content
</I18nMessage>
<Button
button="link"
label={detailsExpanded ? __('View less') : __('View more')}
iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
onClick={() => setDetailsExpanded(!detailsExpanded)}
/>
</h2>
{detailsExpanded && (
<div className="section__subtitle">
<dl>
<dt>
<span className="dt__text">{__('...earned from others')}</span>
<span className="help--dt">({__('Unlock to spend')})</span>
</dt>
<dd>
<span className="dd__text">
{Boolean(tipsBalance) && (
<Button
button="link"
className="dd__button"
disabled={operationPending}
icon={ICONS.UNLOCK}
onClick={() => doOpenModal(MODALS.MASS_TIP_UNLOCK)}
/>
)}
<CreditAmount amount={tipsBalance} precision={4} />
</span>
</dd>
<dt>
<span className="dt__text">{__('...on initial publishes')}</span>
<span className="help--dt">({__('Delete or edit past content to spend')})</span>
</dt>
<dd>
<CreditAmount amount={claimsBalance} precision={4} />
</dd>
<dt>
<span className="dt__text">{__('...supporting content')}</span>
<span className="help--dt">({__('Delete supports to spend')})</span>
</dt>
<dd>
<CreditAmount amount={supportsBalance} precision={4} />
</dd>
</dl>
</div>
)}
{/* @if TARGET='app' */}
{hasSynced ? (
<p className="section help">
{__('A backup of your wallet is synced with lbry.tv.')}
<HelpLink href="https://lbry.com/faq/account-sync" />
</p>
) : (
<p className="help--warning">
{__(
'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
)}
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
</p>
)}
{/* @endif */}
<div className="section__actions">
<Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
<Button
button="secondary"
label={__('Receive')}
icon={ICONS.RECEIVE}
navigate={`/$/${PAGES.RECEIVE}`}
/>
<Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
</div>
{(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
<p className="help">
<I18nMessage
tokens={{
now: (
<Button
button="link"
onClick={() => doUtxoConsolidate()}
disabled={operationPending}
label={
consolidateIsPending || consolidatingUtxos ? __('Consolidating...') : __('Consolidate Now')
}
/>
),
help: <HelpLink href="https://lbry.com/faq/transaction-types" />,
}}
>
Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This
could take some time. %now%%help%
</I18nMessage>
</p>
)}
</>
}
/>
</div>
<div className="column">
{/* fiat balance card */}
<WalletFiatBalance />
</div>
</div>
); );
}; };

112
ui/component/walletFiatAccountHistory/view.jsx
View file

@ -1,7 +1,6 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import Button from 'component/button'; import Button from 'component/button';
import Card from 'component/common/card';
import moment from 'moment'; import moment from 'moment';
type Props = { type Props = {
@ -21,67 +20,60 @@ const WalletBalance = (props: Props) => {
} }
// if there are more than 10 transactions, limit it to 10 for the frontend // if there are more than 10 transactions, limit it to 10 for the frontend
if (accountTransactions && accountTransactions.length > 10) { // if (accountTransactions && accountTransactions.length > 10) {
accountTransactions.length = 10; // accountTransactions.length = 10;
} // }
return ( return (
<><Card <div className="table__wrapper">
title={'Tip History'} <table className="table table--transactions">
body={( <thead>
<> <tr>
<div className="table__wrapper"> <th className="date-header">{__('Date')}</th>
<table className="table table--transactions"> <th>{<>{__('Receiving Channel Name')}</>}</th>
<thead> <th>{__('Tip Location')}</th>
<tr> <th>{__('Amount (USD)')} </th>
<th className="date-header">{__('Date')}</th> <th>{__('Processing Fee')}</th>
<th>{<>{__('Receiving Channel Name')}</>}</th> <th>{__('Odysee Fee')}</th>
<th>{__('Tip Location')}</th> <th>{__('Received Amount')}</th>
<th>{__('Amount (USD)')} </th> </tr>
<th>{__('Processing Fee')}</th> </thead>
<th>{__('Odysee Fee')}</th> <tbody>
<th>{__('Received Amount')}</th> {accountTransactions &&
</tr> accountTransactions.map((transaction) => (
</thead> <tr key={transaction.name + transaction.created_at}>
<tbody> <td>{moment(transaction.created_at).format('LLL')}</td>
{accountTransactions && <td>
accountTransactions.map((transaction) => ( <Button
<tr key={transaction.name + transaction.created_at}> className=""
<td>{moment(transaction.created_at).format('LLL')}</td> navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
<td> label={transaction.channel_name}
<Button button="link"
className="" />
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id} </td>
label={transaction.channel_name} <td>
button="link" <Button
/> className=""
</td> navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
<td> label={
<Button transaction.channel_claim_id === transaction.source_claim_id
className="" ? 'Channel Page'
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id} : 'Content Page'
label={ }
transaction.channel_claim_id === transaction.source_claim_id button="link"
? 'Channel Page' />
: 'Content Page' </td>
} <td>${transaction.tipped_amount / 100}</td>
button="link" <td>${transaction.transaction_fee / 100}</td>
/> <td>${transaction.application_fee / 100}</td>
</td> <td>${transaction.received_amount / 100}</td>
<td>${transaction.tipped_amount / 100}</td> </tr>
<td>${transaction.transaction_fee / 100}</td> ))}
<td>${transaction.application_fee / 100}</td> </tbody>
<td>${transaction.received_amount / 100}</td> </table>
</tr> {!accountTransactions && <p className="wallet__fiat-transactions">No Transactions</p>}
))} </div>
</tbody>
</table>
{!accountTransactions && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
</div>
</>
)}
/>
</>
); );
}; };

102
ui/component/walletFiatBalance/view.jsx
View file

@ -6,84 +6,64 @@ import Button from 'component/button';
import Card from 'component/common/card'; import Card from 'component/common/card';
import Icon from 'component/common/icon'; import Icon from 'component/common/icon';
import I18nMessage from 'component/i18nMessage'; import I18nMessage from 'component/i18nMessage';
import { Lbryio } from 'lbryinc';
import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment();
type Props = { const WalletBalance = () => {
accountDetails: any, const [accountStatusResponse, setAccountStatusResponse] = React.useState();
};
const WalletBalance = (props: Props) => { function getAccountStatus() {
const { return Lbryio.call(
accountDetails, 'account',
} = props; 'status',
{
environment: stripeEnvironment,
},
'post'
);
}
// calculate account transactions section
React.useEffect(() => {
(async function () {
try {
if (!stripeEnvironment) {
return;
}
const response = await getAccountStatus();
setAccountStatusResponse(response);
} catch (err) {
console.log(err);
}
})();
}, [stripeEnvironment]);
return ( return (
<>{<Card <>{<Card
title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountDetails && ((accountDetails.total_received_unpaid - accountDetails.total_paid_out) / 100)) || 0} USD</>} title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountStatusResponse && ((accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100)) || 0} USD</>}
subtitle={accountDetails && accountDetails.total_received_unpaid > 0 && subtitle={accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? (
<I18nMessage> <I18nMessage>
This is your pending balance that will be automatically sent to your bank account This is your pending balance that will be automatically sent to your bank account
</I18nMessage> </I18nMessage>) : (
<I18nMessage>
When you begin to receive tips your balance will be updated here
</I18nMessage>)
} }
actions={ actions={
<> <>
<h2 className="section__title--small"> <h2 className="section__title--small">
${(accountDetails && (accountDetails.total_received_unpaid / 100)) || 0} Total Received Tips ${(accountStatusResponse && (accountStatusResponse.total_received_unpaid / 100)) || 0} Total Received Tips
</h2> </h2>
<h2 className="section__title--small"> <h2 className="section__title--small">
${(accountDetails && (accountDetails.total_paid_out / 100)) || 0} Withdrawn ${(accountStatusResponse && (accountStatusResponse.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> </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"> <div className="section__actions">
{/* <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND} /> */} <Button button="secondary" label={__('Bank Accounts')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
<Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} /> <Button button="secondary" label={__('Payment Methods')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} />
</div> </div>
</> </>
} }

133
ui/component/walletFiatPaymentHistory/view.jsx
View file

@ -1,7 +1,6 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import Button from 'component/button'; import Button from 'component/button';
import Card from 'component/common/card';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import moment from 'moment'; import moment from 'moment';
import { getStripeEnvironment } from 'util/stripe'; import { getStripeEnvironment } from 'util/stripe';
@ -16,10 +15,6 @@ const WalletBalance = (props: Props) => {
// receive transactions from parent component // receive transactions from parent component
const { transactions: accountTransactions } = props; const { transactions: accountTransactions } = props;
// const [accountStatusResponse, setAccountStatusResponse] = React.useState();
// const [subscriptions, setSubscriptions] = React.useState();
const [lastFour, setLastFour] = React.useState(); const [lastFour, setLastFour] = React.useState();
function getCustomerStatus() { function getCustomerStatus() {
@ -35,78 +30,76 @@ const WalletBalance = (props: Props) => {
// TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details // TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details
React.useEffect(() => { React.useEffect(() => {
(async function () { (async function() {
const customerStatusResponse = await getCustomerStatus(); const customerStatusResponse = await getCustomerStatus();
const lastFour = const lastFour = customerStatusResponse.PaymentMethods && customerStatusResponse.PaymentMethods.length && customerStatusResponse.PaymentMethods[0].card.last4;
customerStatusResponse.PaymentMethods &&
customerStatusResponse.PaymentMethods.length &&
customerStatusResponse.PaymentMethods[0].card.last4;
setLastFour(lastFour); setLastFour(lastFour);
})(); })();
}, []); }, []);
return ( return (
<> <>
<Card <div className="section card-stack">
title={__('Payment History')} <div className="table__wrapper">
body={ <table className="table table--transactions">
<> {/* table header */}
<div className="table__wrapper"> <thead>
<table className="table table--transactions"> <tr>
<thead> <th className="date-header">{__('Date')}</th>
<tr> <th>{<>{__('Receiving Channel Name')}</>}</th>
<th className="date-header">{__('Date')}</th> <th>{__('Tip Location')}</th>
<th>{<>{__('Receiving Channel Name')}</>}</th> <th>{__('Amount (USD)')} </th>
<th>{__('Tip Location')}</th> <th>{__('Card Last 4')}</th>
<th>{__('Amount (USD)')} </th> <th>{__('Anonymous')}</th>
<th>{__('Card Last 4')}</th> </tr>
<th>{__('Anonymous')}</th> </thead>
</tr> {/* list data for transactions */}
</thead> <tbody>
<tbody> {accountTransactions &&
{accountTransactions && accountTransactions.map((transaction) => (
accountTransactions.map((transaction) => ( <tr key={transaction.name + transaction.created_at}>
<tr key={transaction.name + transaction.created_at}> {/* date */}
<td>{moment(transaction.created_at).format('LLL')}</td> <td>{moment(transaction.created_at).format('LLL')}</td>
<td> {/* receiving channel name */}
<Button <td>
className="" <Button
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id} className=""
label={transaction.channel_name} navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
button="link" label={transaction.channel_name}
/> button="link"
</td> />
<td> </td>
<Button {/* link to content or channel */}
className="" <td>
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id} <Button
label={ className=""
transaction.channel_claim_id === transaction.source_claim_id navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
? 'Channel Page' label={
: 'Content Page' transaction.channel_claim_id === transaction.source_claim_id
} ? 'Channel Page'
button="link" : 'Content Page'
/> }
</td> button="link"
<td>${transaction.tipped_amount / 100}</td> />
<td>{lastFour}</td> </td>
<td>{transaction.private_tip ? 'Yes' : 'No'}</td> {/* how much tipped */}
</tr> <td>${transaction.tipped_amount / 100}</td>
))} {/* TODO: this is incorrect need it per transactions not per user */}
</tbody> {/* last four of credit card */}
</table> <td>{lastFour}</td>
{(!accountTransactions || accountTransactions.length === 0) && ( {/* whether tip is anonymous or not */}
<p style={{ textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)' }}> <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
No Transactions </tr>
</p> ))}
)} </tbody>
</div> </table>
</> {/* show some markup if there's no transactions */}
} {(!accountTransactions || accountTransactions.length === 0) && <p className="wallet__fiat-transactions">No Transactions</p>}
/> </div>
</> </div>
</>
); );
}; };

17
ui/page/settingsStripeAccount/view.jsx
View file

@ -281,7 +281,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
)} )}
</div> </div>
} }
actions={ // only show additional buttons if its for additional verification or to show transaction page
actions={(stillRequiringVerification || accountConfirmed) &&
<> <>
{stillRequiringVerification && ( {stillRequiringVerification && (
<Button <Button
@ -292,12 +293,14 @@ class StripeAccountConnection extends React.Component<Props, State> {
className="stripe__complete-verification-button" className="stripe__complete-verification-button"
/> />
)} )}
<Button {accountConfirmed && (
button="secondary" <Button
label={__('View Transactions')} button="secondary"
icon={ICONS.SETTINGS} label={__('View Transactions')}
navigate={`/$/${PAGES.WALLET}?tab=fiat-payment-history`} icon={ICONS.SETTINGS}
/> navigate={`/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history&currency=fiat`}
/>
)}
</> </>
} }
/> />

2
ui/page/settingsStripeCard/view.jsx
View file

@ -426,7 +426,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
button="primary" button="primary"
label={__('View Transactions')} label={__('View Transactions')}
icon={ICONS.SETTINGS} icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.WALLET}?tab=fiat-account-history`} navigate={`/$/${PAGES.WALLET}?fiatType=outgoing&tab=fiat-payment-history&currency=fiat`}
/> />
} }
/> />

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

@ -2,18 +2,12 @@
import React from 'react'; import React from 'react';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import WalletBalance from 'component/walletBalance'; import WalletBalance from 'component/walletBalance';
import WalletFiatBalance from 'component/walletFiatBalance';
import WalletFiatPaymentBalance from 'component/walletFiatPaymentBalance';
import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
import TxoList from 'component/txoList'; import TxoList from 'component/txoList';
import Page from 'component/page'; import Page from 'component/page';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
import YrblWalletEmpty from 'component/yrblWalletEmpty'; import YrblWalletEmpty from 'component/yrblWalletEmpty';
import { Lbryio } from 'lbryinc';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs'; import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
import { getStripeEnvironment } from 'util/stripe';
const TAB_QUERY = 'tab'; const TAB_QUERY = 'tab';
@ -23,8 +17,6 @@ const TABS = {
PAYMENT_HISTORY: 'fiat-payment-history', PAYMENT_HISTORY: 'fiat-payment-history',
}; };
let stripeEnvironment = getStripeEnvironment();
type Props = { type Props = {
history: { action: string, push: (string) => void, replace: (string) => void }, history: { action: string, push: (string) => void, replace: (string) => void },
location: { search: string, pathname: string }, location: { search: string, pathname: string },
@ -73,84 +65,6 @@ const WalletPage = (props: Props) => {
push(url); push(url);
} }
const [accountStatusResponse, setAccountStatusResponse] = React.useState();
const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]);
const [customerTransactions, setCustomerTransactions] = React.useState([]);
function getPaymentHistory() {
return Lbryio.call(
'customer',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
function getAccountStatus() {
return Lbryio.call(
'account',
'status',
{
environment: stripeEnvironment,
},
'post'
);
}
function getAccountTransactionsa() {
return Lbryio.call(
'account',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
// calculate account transactions section
React.useEffect(() => {
(async function () {
try {
if (!stripeEnvironment) {
return;
}
const response = await getAccountStatus();
setAccountStatusResponse(response);
// TODO: some weird naming clash hence getAccountTransactionsa
const getAccountTransactions = await getAccountTransactionsa();
setAccountTransactionResponse(getAccountTransactions);
} catch (err) {
console.log(err);
}
})();
}, [stripeEnvironment]);
// populate customer payment data
React.useEffect(() => {
(async function () {
try {
// get card payments customer has made
if (!stripeEnvironment) {
return;
}
let customerTransactionResponse = await getPaymentHistory();
if (customerTransactionResponse && customerTransactionResponse.length) {
customerTransactionResponse.reverse();
}
setCustomerTransactions(customerTransactionResponse);
} catch (err) {
console.log(err);
}
})();
}, [stripeEnvironment]);
// @endif // @endif
const { totalBalance } = props; const { totalBalance } = props;
@ -159,80 +73,67 @@ const WalletPage = (props: Props) => {
return ( return (
<> <>
{stripeEnvironment && ( {/* @if TARGET='web' */}
<Page> <Page>
<Tabs onChange={onTabChange} index={tabIndex}> <Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--collection-edit-page"> <TabList className="tabs__list--collection-edit-page">
<Tab>{__('LBRY Credits')}</Tab> <Tab>{__('Balance')}</Tab>
<Tab>{__('Account History')}</Tab> <Tab>{__('Transactions')}</Tab>
<Tab>{__('Payment History')}</Tab> </TabList>
</TabList> <TabPanels>
<TabPanels> {/* balances for lbc and fiat */}
<TabPanel> <TabPanel>
<div className="section card-stack"> <WalletBalance />
<div className="lbc-transactions"> </TabPanel>
{/* if the transactions are loading */} {/* transactions panel */}
{loading && ( <TabPanel>
<div className="main--empty"> <div className="section card-stack">
<Spinner delayed /> <div className="lbc-transactions">
</div> {/* if the transactions are loading */}
)} {loading && (
{/* when the transactions are finished loading */} <div className="main--empty">
{!loading && ( <Spinner delayed />
<> </div>
{showIntro ? ( )}
<YrblWalletEmpty includeWalletLink /> {/* when the transactions are finished loading */}
) : ( {!loading && (
<div className="card-stack"> <>
<WalletBalance /> {showIntro ? (
<TxoList search={search} /> <YrblWalletEmpty includeWalletLink />
</div> ) : (
)} <div className="card-stack">
</> <TxoList search={search} />
)} </div>
</div> )}
</>
)}
</div> </div>
</TabPanel> </div>
<TabPanel> </TabPanel>
<div className="section card-stack"> </TabPanels>
<WalletFiatBalance accountDetails={accountStatusResponse} /> </Tabs>
<WalletFiatAccountHistory transactions={accountTransactionResponse} /> </Page>
</div> {/* @endif */}
</TabPanel> {/* @if TARGET='app' */}
<TabPanel> <Page>
<div className="section card-stack"> {loading && (
<WalletFiatPaymentBalance <div className="main--empty">
transactions={customerTransactions} <Spinner delayed />
accountDetails={accountStatusResponse} </div>
/> )}
<WalletFiatPaymentHistory transactions={customerTransactions} /> {!loading && (
</div> <>
</TabPanel> {showIntro ? (
</TabPanels> <YrblWalletEmpty includeWalletLink />
</Tabs> ) : (
</Page> <div className="card-stack">
)} <TxoList search={search} />
{!stripeEnvironment && ( </div>
<Page> )}
{loading && ( </>
<div className="main--empty"> )}
<Spinner delayed /> </Page>
</div> {/* @endif */}
)}
{!loading && (
<>
{showIntro ? (
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<WalletBalance />
<TxoList search={search} />
</div>
)}
</>
)}
</Page>
)}
</> </>
); );
}; };

18
ui/scss/component/_txo-list.scss
View file

@ -10,3 +10,21 @@
display: block; display: block;
} }
} }
.txo__table_header {
width: 124px;
display: inline-block;
}
// displaying fiat transactions (incoming/outgoing) in wallet
.wallet__fiat-transactions {
text-align: center;
margin-top: 13px;
margin-bottom: 9px;
font-size: 13px;
color: rgb(171, 171, 171);
}
.txo__radios_container, .txo__radios, .txo__radios_fieldset {
display: inline !important;
}