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

tabs coming along well need to stack the cards

Browse source
This commit is contained in:
Anthony 2021-08-19 16:30:47 +02:00
parent 78acb8d570
commit 32e8672be5
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
2 changed files with 106 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,6 +13,7 @@ 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 WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
type Props = { type Props = {
search: string, search: string,
@ -54,6 +55,7 @@ function TxoList(props: Props) {
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('currency') || 'credits'; const currency = urlParams.get('currency') || 'credits';
const fiatType = urlParams.get('fiatType') || 'incoming';
const currentUrlParams = { const currentUrlParams = {
page, page,
@ -62,6 +64,7 @@ function TxoList(props: Props) {
type, type,
subtype, subtype,
currency, currency,
fiatType,
}; };
const hideStatus = const hideStatus =
@ -128,7 +131,10 @@ function TxoList(props: Props) {
const newUrlParams = new URLSearchParams(); const newUrlParams = new URLSearchParams();
const existingCurrency = newUrlParams.get('currency') || 'credits'; const existingCurrency = newUrlParams.get('currency') || 'credits';
console.log(existingCurrency);
const existingFiatType = newUrlParams.get('fiatType') || 'incoming';
console.log(existingFiatType);
console.log(newUrlParams); console.log(newUrlParams);
@ -140,6 +146,12 @@ function TxoList(props: Props) {
newUrlParams.set('currency', delta.currency); newUrlParams.set('currency', delta.currency);
} }
if (delta.fiatType) {
newUrlParams.set('fiatType', delta.fiatType);
} else {
newUrlParams.set('fiatType', existingFiatType);
}
switch (delta.dkey) { switch (delta.dkey) {
case TXO.PAGE: case TXO.PAGE:
if (currentUrlParams.type) { if (currentUrlParams.type) {
@ -363,29 +375,29 @@ function TxoList(props: Props) {
: <div> : <div>
<div className="card__body-actions"> <div className="card__body-actions">
<div className="card__actions"> <div className="card__actions">
<div> {/*<div>*/}
<FormField {/* <FormField*/}
type="select" {/* type="select"*/}
name="type" {/* name="type"*/}
label={ {/* label={*/}
<> {/* <>*/}
{__('Type')} {/* {__('Type')}*/}
<HelpLink href="https://lbry.com/faq/transaction-types" /> {/* <HelpLink href="https://lbry.com/faq/transaction-types" />*/}
</> {/* </>*/}
} {/* }*/}
value={type || 'all'} {/* value={type || 'all'}*/}
onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab, currency: 'fiat' })} {/* onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab, currency: 'fiat' })}*/}
> {/* >*/}
{Object.values(TXO.DROPDOWN_TYPES).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}>*/}
{stringV && __(toCapitalCase(stringV))} {/* {stringV && __(toCapitalCase(stringV))}*/}
</option> {/* </option>*/}
); {/* );*/}
})} {/* })}*/}
</FormField> {/* </FormField>*/}
</div> {/*</div>*/}
{(type === TXO.SENT || type === TXO.RECEIVED) && ( {(type === TXO.SENT || type === TXO.RECEIVED) && (
<div> <div>
<FormField <FormField
@ -409,32 +421,32 @@ function TxoList(props: Props) {
{!hideStatus && ( {!hideStatus && (
<div> <div>
<fieldset-section> <fieldset-section>
<label>{__('Status')}</label> <label>{__('Type')}</label>
<div className={'txo__radios'}> <div className={'txo__radios'}>
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active', tab, currency: 'fiat' })} onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': active === TXO.ACTIVE, 'button-toggle--active': fiatType === 'incoming',
})} })}
label={__('Active')} label={__('Incoming')}
/> />
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent', tab, currency: 'fiat' })} onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })}
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', tab, currency: 'fiat' })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'all',
})}
label={__('All')}
/> />
{/*<Button*/}
{/* button="alt"*/}
{/* onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab, currency: 'fiat' })}*/}
{/* className={classnames(`button-toggle`, {*/}
{/* 'button-toggle--active': active === 'all',*/}
{/* })}*/}
{/* label={__('Payouts')}*/}
{/*/>*/}
</div> </div>
</fieldset-section> </fieldset-section>
</div> </div>
@ -442,7 +454,8 @@ function TxoList(props: Props) {
</div> </div>
</div> </div>
{/* listing of the transactions */} {/* listing of the transactions */}
<WalletFiatPaymentHistory transactions={[]} /> { fiatType === 'incoming' && <WalletFiatAccountHistory transactions={[]} /> }
{ fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={[]} /> }
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
</div> </div>
} }

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

@ -52,59 +52,60 @@ const WalletBalance = (props: Props) => {
return ( return (
<> <>
<Card <div className="section card-stack">
title={__('Payment History')} <Card
body={ body={
<> <>
<div className="table__wrapper"> <div className="table__wrapper">
<table className="table table--transactions"> <table className="table table--transactions">
<thead> <thead>
<tr> <tr>
<th className="date-header">{__('Date')}</th> <th className="date-header">{__('Date')}</th>
<th>{<>{__('Receiving Channel Name')}</>}</th> <th>{<>{__('Receiving Channel Name')}</>}</th>
<th>{__('Tip Location')}</th> <th>{__('Tip Location')}</th>
<th>{__('Amount (USD)')} </th> <th>{__('Amount (USD)')} </th>
<th>{__('Card Last 4')}</th> <th>{__('Card Last 4')}</th>
<th>{__('Anonymous')}</th> <th>{__('Anonymous')}</th>
</tr>
</thead>
<tbody>
{accountTransactions &&
accountTransactions.map((transaction) => (
<tr key={transaction.name + transaction.created_at}>
<td>{moment(transaction.created_at).format('LLL')}</td>
<td>
<Button
className=""
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
label={transaction.channel_name}
button="link"
/>
</td>
<td>
<Button
className=""
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
label={
transaction.channel_claim_id === transaction.source_claim_id
? 'Channel Page'
: 'Content Page'
}
button="link"
/>
</td>
<td>${transaction.tipped_amount / 100}</td>
<td>{lastFour}</td>
<td>{transaction.private_tip ? 'Yes' : 'No'}</td>
</tr> </tr>
))} </thead>
</tbody> <tbody>
</table> {accountTransactions &&
{(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>} accountTransactions.map((transaction) => (
</div> <tr key={transaction.name + transaction.created_at}>
</> <td>{moment(transaction.created_at).format('LLL')}</td>
} <td>
/> <Button
className=""
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
label={transaction.channel_name}
button="link"
/>
</td>
<td>
<Button
className=""
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
label={
transaction.channel_claim_id === transaction.source_claim_id
? 'Channel Page'
: 'Content Page'
}
button="link"
/>
</td>
<td>${transaction.tipped_amount / 100}</td>
<td>{lastFour}</td>
<td>{transaction.private_tip ? 'Yes' : 'No'}</td>
</tr>
))}
</tbody>
</table>
{(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
</div>
</>
}
/>
</div>
</> </>
); );
}; };