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

almost ready for refactor

Browse source
This commit is contained in:
Anthony 2021-08-19 17:11:51 +02:00
parent 32e8672be5
commit 815799a389
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
4 changed files with 181 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -373,90 +373,92 @@ function TxoList(props: Props) {
</div> </div>
// fiat section // fiat section
: <div> : <div>
<div className="card__body-actions"> <div className="section card-stack">
<div className="card__actions"> <div className="card__body-actions">
{/*<div>*/} <div className="card__actions">
{/* <FormField*/} {/*<div>*/}
{/* type="select"*/} {/* <FormField*/}
{/* name="type"*/} {/* type="select"*/}
{/* label={*/} {/* name="type"*/}
{/* <>*/} {/* label={*/}
{/* {__('Type')}*/} {/* <>*/}
{/* <HelpLink href="https://lbry.com/faq/transaction-types" />*/} {/* {__('Type')}*/}
{/* </>*/} {/* <HelpLink href="https://lbry.com/faq/transaction-types" />*/}
{/* }*/} {/* </>*/}
{/* value={type || 'all'}*/} {/* }*/}
{/* onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab, currency: 'fiat' })}*/} {/* value={type || 'all'}*/}
{/* >*/} {/* onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab, currency: 'fiat' })}*/}
{/* {Object.values(TXO.DROPDOWN_TYPES).map((v) => {*/} {/* >*/}
{/* const stringV = String(v);*/} {/* {Object.values(TXO.DROPDOWN_TYPES).map((v) => {*/}
{/* return (*/} {/* const stringV = String(v);*/}
{/* <option key={stringV} value={stringV}>*/} {/* return (*/}
{/* {stringV && __(toCapitalCase(stringV))}*/} {/* <option key={stringV} value={stringV}>*/}
{/* </option>*/} {/* {stringV && __(toCapitalCase(stringV))}*/}
{/* );*/} {/* </option>*/}
{/* })}*/} {/* );*/}
{/* </FormField>*/} {/* })}*/}
{/*</div>*/} {/* </FormField>*/}
{(type === TXO.SENT || type === TXO.RECEIVED) && ( {/*</div>*/}
<div> {(type === TXO.SENT || type === TXO.RECEIVED) && (
<FormField <div>
type="select" <FormField
name="subtype" type="select"
label={__('Payment Type')} name="subtype"
value={subtype || 'all'} label={__('Payment Type')}
onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value, tab, currency: 'fiat' })} value={subtype || 'all'}
> onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value, tab, currency: 'fiat' })}
{Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => { >
const stringV = String(v); {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
return ( const stringV = String(v);
<option key={stringV} value={stringV}> return (
{stringV && __(toCapitalCase(stringV))} <option key={stringV} value={stringV}>
</option> {stringV && __(toCapitalCase(stringV))}
); </option>
})} );
</FormField> })}
</div> </FormField>
)} </div>
{!hideStatus && ( )}
<div> {!hideStatus && (
<fieldset-section> <div>
<label>{__('Type')}</label> <fieldset-section>
<div className={'txo__radios'}> <label>{__('Type')}</label>
<Button <div className={'txo__radios'}>
button="alt" <Button
onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })} button="alt"
className={classnames(`button-toggle`, { onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })}
'button-toggle--active': fiatType === 'incoming', className={classnames(`button-toggle`, {
})} 'button-toggle--active': fiatType === 'incoming',
label={__('Incoming')} })}
/> label={__('Incoming')}
<Button />
button="alt" <Button
onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })} button="alt"
className={classnames(`button-toggle`, { onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })}
'button-toggle--active': fiatType === 'outgoing', className={classnames(`button-toggle`, {
})} 'button-toggle--active': fiatType === 'outgoing',
label={__('Outgoing')} })}
/> label={__('Outgoing')}
{/*<Button*/} />
{/* button="alt"*/} {/*<Button*/}
{/* onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab, currency: 'fiat' })}*/} {/* button="alt"*/}
{/* className={classnames(`button-toggle`, {*/} {/* onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab, currency: 'fiat' })}*/}
{/* 'button-toggle--active': active === 'all',*/} {/* className={classnames(`button-toggle`, {*/}
{/* })}*/} {/* 'button-toggle--active': active === 'all',*/}
{/* label={__('Payouts')}*/} {/* })}*/}
{/*/>*/} {/* label={__('Payouts')}*/}
</div> {/*/>*/}
</fieldset-section> </div>
</div> </fieldset-section>
)} </div>
)}
</div>
</div> </div>
{/* listing of the transactions */}
{ fiatType === 'incoming' && <WalletFiatAccountHistory transactions={[]} /> }
{ fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={[]} /> }
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
</div> </div>
{/* listing of the transactions */}
{ fiatType === 'incoming' && <WalletFiatAccountHistory transactions={[]} /> }
{ fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={[]} /> }
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
</div> </div>
} }

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

@ -26,62 +26,55 @@ const WalletBalance = (props: Props) => {
} }
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 style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
))} </div>
</tbody>
</table>
{!accountTransactions && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
</div>
</>
)}
/>
</>
); );
}; };

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

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

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

@ -164,7 +164,7 @@ const WalletPage = (props: Props) => {
<Tab>{__('Balance')}</Tab> <Tab>{__('Balance')}</Tab>
<Tab>{__('Transactions')}</Tab> <Tab>{__('Transactions')}</Tab>
<Tab>{__('Subscriptions')}</Tab> <Tab>{__('Subscriptions')}</Tab>
<Tab>{__('Analytics')}</Tab> {/*<Tab>{__('Analytics')}</Tab>*/}
</TabList> </TabList>
<TabPanels> <TabPanels>
<TabPanel> <TabPanel>
@ -196,13 +196,7 @@ const WalletPage = (props: Props) => {
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<div className="section card-stack"> <div className="section card-stack">
<WalletFiatPaymentHistory transactions={customerTransactions} /> <h1> Coming soon! </h1>
<WalletFiatAccountHistory transactions={accountTransactionResponse} />
</div>
</TabPanel>
<TabPanel>
<div className="section card-stack">
<WalletFiatPaymentHistory transactions={customerTransactions} />
</div> </div>
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>