almost ready for refactor
This commit is contained in:
Anthony
parent
32e8672be5
commit
815799a389
4 changed files with 181 additions and 198 deletions
|
|
@ -373,90 +373,92 @@ function TxoList(props: Props) {
|
|||
</div>
|
||||
// fiat section
|
||||
: <div>
|
||||
<div className="card__body-actions">
|
||||
<div className="card__actions">
|
||||
{/*<div>*/}
|
||||
{/* <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, tab, currency: 'fiat' })}*/}
|
||||
{/* >*/}
|
||||
{/* {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>
|
||||
<FormField
|
||||
type="select"
|
||||
name="subtype"
|
||||
label={__('Payment Type')}
|
||||
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);
|
||||
return (
|
||||
<option key={stringV} value={stringV}>
|
||||
{stringV && __(toCapitalCase(stringV))}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</FormField>
|
||||
</div>
|
||||
)}
|
||||
{!hideStatus && (
|
||||
<div>
|
||||
<fieldset-section>
|
||||
<label>{__('Type')}</label>
|
||||
<div className={'txo__radios'}>
|
||||
<Button
|
||||
button="alt"
|
||||
onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })}
|
||||
className={classnames(`button-toggle`, {
|
||||
'button-toggle--active': fiatType === 'incoming',
|
||||
})}
|
||||
label={__('Incoming')}
|
||||
/>
|
||||
<Button
|
||||
button="alt"
|
||||
onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })}
|
||||
className={classnames(`button-toggle`, {
|
||||
'button-toggle--active': fiatType === 'outgoing',
|
||||
})}
|
||||
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={__('Payouts')}*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
</fieldset-section>
|
||||
</div>
|
||||
)}
|
||||
<div className="section card-stack">
|
||||
<div className="card__body-actions">
|
||||
<div className="card__actions">
|
||||
{/*<div>*/}
|
||||
{/* <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, tab, currency: 'fiat' })}*/}
|
||||
{/* >*/}
|
||||
{/* {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>
|
||||
<FormField
|
||||
type="select"
|
||||
name="subtype"
|
||||
label={__('Payment Type')}
|
||||
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);
|
||||
return (
|
||||
<option key={stringV} value={stringV}>
|
||||
{stringV && __(toCapitalCase(stringV))}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</FormField>
|
||||
</div>
|
||||
)}
|
||||
{!hideStatus && (
|
||||
<div>
|
||||
<fieldset-section>
|
||||
<label>{__('Type')}</label>
|
||||
<div className={'txo__radios'}>
|
||||
<Button
|
||||
button="alt"
|
||||
onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })}
|
||||
className={classnames(`button-toggle`, {
|
||||
'button-toggle--active': fiatType === 'incoming',
|
||||
})}
|
||||
label={__('Incoming')}
|
||||
/>
|
||||
<Button
|
||||
button="alt"
|
||||
onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })}
|
||||
className={classnames(`button-toggle`, {
|
||||
'button-toggle--active': fiatType === 'outgoing',
|
||||
})}
|
||||
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={__('Payouts')}*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
</fieldset-section>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* listing of the transactions */}
|
||||
{ fiatType === 'incoming' && <WalletFiatAccountHistory transactions={[]} /> }
|
||||
{ fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={[]} /> }
|
||||
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
|
||||
</div>
|
||||
{/* listing of the transactions */}
|
||||
{ fiatType === 'incoming' && <WalletFiatAccountHistory transactions={[]} /> }
|
||||
{ fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={[]} /> }
|
||||
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,62 +26,55 @@ const WalletBalance = (props: Props) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<><Card
|
||||
title={'Tip History'}
|
||||
body={(
|
||||
<>
|
||||
<div className="table__wrapper">
|
||||
<table className="table table--transactions">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="date-header">{__('Date')}</th>
|
||||
<th>{<>{__('Receiving Channel Name')}</>}</th>
|
||||
<th>{__('Tip Location')}</th>
|
||||
<th>{__('Amount (USD)')} </th>
|
||||
<th>{__('Processing Fee')}</th>
|
||||
<th>{__('Odysee Fee')}</th>
|
||||
<th>{__('Received Amount')}</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>${transaction.transaction_fee / 100}</td>
|
||||
<td>${transaction.application_fee / 100}</td>
|
||||
<td>${transaction.received_amount / 100}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{!accountTransactions && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
<div className="table__wrapper">
|
||||
<table className="table table--transactions">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="date-header">{__('Date')}</th>
|
||||
<th>{<>{__('Receiving Channel Name')}</>}</th>
|
||||
<th>{__('Tip Location')}</th>
|
||||
<th>{__('Amount (USD)')} </th>
|
||||
<th>{__('Processing Fee')}</th>
|
||||
<th>{__('Odysee Fee')}</th>
|
||||
<th>{__('Received Amount')}</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>${transaction.transaction_fee / 100}</td>
|
||||
<td>${transaction.application_fee / 100}</td>
|
||||
<td>${transaction.received_amount / 100}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{!accountTransactions && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -53,58 +53,52 @@ const WalletBalance = (props: Props) => {
|
|||
return (
|
||||
<>
|
||||
<div className="section card-stack">
|
||||
<Card
|
||||
body={
|
||||
<>
|
||||
<div className="table__wrapper">
|
||||
<table className="table table--transactions">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="date-header">{__('Date')}</th>
|
||||
<th>{<>{__('Receiving Channel Name')}</>}</th>
|
||||
<th>{__('Tip Location')}</th>
|
||||
<th>{__('Amount (USD)')} </th>
|
||||
<th>{__('Card Last 4')}</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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<div className="table__wrapper">
|
||||
<table className="table table--transactions">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="date-header">{__('Date')}</th>
|
||||
<th>{<>{__('Receiving Channel Name')}</>}</th>
|
||||
<th>{__('Tip Location')}</th>
|
||||
<th>{__('Amount (USD)')} </th>
|
||||
<th>{__('Card Last 4')}</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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ const WalletPage = (props: Props) => {
|
|||
<Tab>{__('Balance')}</Tab>
|
||||
<Tab>{__('Transactions')}</Tab>
|
||||
<Tab>{__('Subscriptions')}</Tab>
|
||||
<Tab>{__('Analytics')}</Tab>
|
||||
{/*<Tab>{__('Analytics')}</Tab>*/}
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
|
|
@ -196,13 +196,7 @@ const WalletPage = (props: Props) => {
|
|||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="section card-stack">
|
||||
<WalletFiatPaymentHistory transactions={customerTransactions} />
|
||||
<WalletFiatAccountHistory transactions={accountTransactionResponse} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="section card-stack">
|
||||
<WalletFiatPaymentHistory transactions={customerTransactions} />
|
||||
<h1> Coming soon! </h1>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
|
|
|
|||
Loading…
Reference in a new issue