fix merge conflicts

This commit is contained in:
Anthony 2021-08-18 20:06:12 +02:00
parent 5208be07ab
commit 15b076fd20
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
7 changed files with 441 additions and 367 deletions

View file

@ -49,6 +49,11 @@ class CreditAmount extends React.PureComponent<Props> {
isFiat,
} = this.props;
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 isFree = parseFloat(amount) === 0;

View file

@ -12,6 +12,17 @@ import { toCapitalCase } from 'util/string';
import classnames from 'classnames';
import HelpLink from 'component/common/help-link';
import FileExporter from 'component/common/file-exporter';
import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
import { STRIPE_PUBLIC_KEY } from '../../../config';
import { Lbryio } from 'lbryinc';
let stripeEnvironment = 'test';
// if the key contains pk_live it's a live key
// update the environment for the calls to the backend to indicate which environment to hit
if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
stripeEnvironment = 'live';
}
type Props = {
search: string,
@ -30,6 +41,7 @@ type Props = {
type Delta = {
dkey: string,
value: string,
tab: string
};
function TxoList(props: Props) {
@ -45,12 +57,72 @@ function TxoList(props: Props) {
transactionsFile,
} = props;
const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]);
const [customerTransactions, setCustomerTransactions] = React.useState([]);
function getPaymentHistory() {
return Lbryio.call(
'customer',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
function getAccountTransactionsa() {
return Lbryio.call(
'account',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
// calculate account transactions section
React.useEffect(() => {
(async function() {
try {
const getAccountTransactions = await getAccountTransactionsa();
setAccountTransactionResponse(getAccountTransactions);
} 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);
if (customerTransactionResponse && customerTransactionResponse.length) {
customerTransactionResponse.reverse();
}
setCustomerTransactions(customerTransactionResponse);
} catch (err) {
console.log(err);
}
})();
}, []);
const urlParams = new URLSearchParams(search);
const page = urlParams.get(TXO.PAGE) || String(1);
const pageSize = urlParams.get(TXO.PAGE_SIZE) || String(TXO.PAGE_SIZE_DEFAULT);
const type = urlParams.get(TXO.TYPE) || TXO.ALL;
const subtype = urlParams.get(TXO.SUB_TYPE);
const active = urlParams.get(TXO.ACTIVE) || TXO.ALL;
const currency = urlParams.get('currency') || 'credits';
const fiatType = urlParams.get('fiatType') || 'incoming';
const currentUrlParams = {
page,
@ -58,6 +130,8 @@ function TxoList(props: Props) {
active,
type,
subtype,
currency,
fiatType,
};
const hideStatus =
@ -119,8 +193,32 @@ function TxoList(props: Props) {
history.push(url);
}
// let currency = 'credits';
function updateUrl(delta: Delta) {
const newUrlParams = new URLSearchParams();
const existingCurrency = newUrlParams.get('currency') || 'credits';
const existingFiatType = newUrlParams.get('fiatType') || 'incoming';
console.log(existingFiatType);
console.log(newUrlParams);
// set tab name to account for wallet page tab
newUrlParams.set('tab', delta.tab);
// only update currency if it's being changed
if (delta.currency) {
newUrlParams.set('currency', delta.currency);
}
if (delta.fiatType) {
newUrlParams.set('fiatType', delta.fiatType);
} else {
newUrlParams.set('fiatType', existingFiatType);
}
switch (delta.dkey) {
case TXO.PAGE:
if (currentUrlParams.type) {
@ -179,6 +277,10 @@ function TxoList(props: Props) {
const paramsString = JSON.stringify(params);
// tab used in the wallet section
// TODO: change the name of this eventually
const tab = 'fiat-payment-history';
useEffect(() => {
if (paramsString && updateTxoPageParams) {
const params = JSON.parse(paramsString);
@ -188,28 +290,54 @@ function TxoList(props: Props) {
return (
<Card
title={<div className="table__header-text">{__(`Transactions`)}</div>}
titleActions={
<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') : ''}
/>
title={
<><div className="table__header-text" style={{width: '124px', display: 'inline-block'}}>{__(`Transactions`)}</div>
<div style={{display: 'inline-block'}}>
<fieldset-section>
<div className={'txo__radios'}>
<Button
button="alt"
onClick={(e) => handleChange({ currency: 'credits', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': currency === 'credits',
})}
label={__('Credits')}
/>
<Button
button="alt"
onClick={(e) => handleChange({ currency: 'fiat', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': currency === 'fiat',
})}
label={__('USD')}
/>
</div>
</fieldset-section>
</div>
<Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
</div>
</>
}
titleActions={<></>
// <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>
}
isBodyList
body={
<div>
body={currency === 'credits'
? <div>
<div className="card__body-actions">
<div className="card__actions">
<div>
@ -223,7 +351,7 @@ function TxoList(props: Props) {
</>
}
value={type || 'all'}
onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value })}
onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab })}
>
{Object.values(TXO.DROPDOWN_TYPES).map((v) => {
const stringV = String(v);
@ -242,7 +370,7 @@ function TxoList(props: Props) {
name="subtype"
label={__('Payment Type')}
value={subtype || 'all'}
onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value })}
onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value, tab })}
>
{Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
const stringV = String(v);
@ -262,7 +390,7 @@ function TxoList(props: Props) {
<div className={'txo__radios'}>
<Button
button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active' })}
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === TXO.ACTIVE,
})}
@ -270,7 +398,7 @@ function TxoList(props: Props) {
/>
<Button
button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent' })}
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'spent',
})}
@ -278,7 +406,7 @@ function TxoList(props: Props) {
/>
<Button
button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all' })}
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'all',
})}
@ -288,12 +416,69 @@ function TxoList(props: Props) {
</fieldset-section>
</div>
)}
<div className="card__actions--inline" style={{marginLeft: '181px'}}>
{!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 transactions */}
<TransactionListTable txos={txoPage} />
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
</div>
: <div>
{/* fiat section (buttons and transactions) */}
<div className="section card-stack">
<div className="card__body-actions">
<div className="card__actions">
{!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')}
/>
</div>
</fieldset-section>
</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>
}
/>
);
}

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';
import WalletFiatBalance from 'component/walletFiatBalance';
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,10 @@ const WalletBalance = (props: Props) => {
</>
}
/>
{/* fiat balance card */}
<WalletFiatBalance />
</div>
);
};

View file

@ -21,67 +21,60 @@ const WalletBalance = (props: Props) => {
}
// if there are more than 10 transactions, limit it to 10 for the frontend
if (accountTransactions && accountTransactions.length > 10) {
accountTransactions.length = 10;
}
// if (accountTransactions && accountTransactions.length > 10) {
// accountTransactions.length = 10;
// }
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>
);
};

View file

@ -6,83 +6,69 @@ import Button from 'component/button';
import Card from 'component/common/card';
import Icon from 'component/common/icon';
import I18nMessage from 'component/i18nMessage';
import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config';
type Props = {
accountDetails: any,
};
let stripeEnvironment = 'test';
// if the key contains pk_live it's a live key
// update the environment for the calls to the backend to indicate which environment to hit
if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
stripeEnvironment = 'live';
}
const WalletBalance = (props: Props) => {
const {
accountDetails,
} = props;
const [accountStatusResponse, setAccountStatusResponse] = React.useState();
function getAccountStatus() {
return Lbryio.call(
'account',
'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 (
<>{<Card
title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountDetails && ((accountDetails.total_received_unpaid - accountDetails.total_paid_out) / 100)) || 0} USD</>}
subtitle={accountDetails && accountDetails.total_received_unpaid > 0 &&
title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountStatusResponse && ((accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100)) || 0} USD</>}
subtitle={accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? (
<I18nMessage>
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={
<>
<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 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)} */}
{/* /> */}
${(accountStatusResponse && (accountStatusResponse.total_paid_out / 100)) || 0} Withdrawn
</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

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

View file

@ -2,10 +2,6 @@
import React from 'react';
import { useHistory } from 'react-router';
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 Page from 'component/page';
import * as PAGES from 'constants/pages';
@ -73,84 +69,6 @@ const WalletPage = (props: Props) => {
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
const { totalBalance } = props;
@ -159,80 +77,67 @@ const WalletPage = (props: Props) => {
return (
<>
{stripeEnvironment && (
<Page>
<Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--collection-edit-page">
<Tab>{__('LBRY Credits')}</Tab>
<Tab>{__('Account History')}</Tab>
<Tab>{__('Payment History')}</Tab>
</TabList>
<TabPanels>
<TabPanel>
<div className="section card-stack">
<div className="lbc-transactions">
{/* if the transactions are loading */}
{loading && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{/* when the transactions are finished loading */}
{!loading && (
<>
{showIntro ? (
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<WalletBalance />
<TxoList search={search} />
</div>
)}
</>
)}
</div>
{/* @if TARGET='web' */}
<Page>
<Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--collection-edit-page">
<Tab>{__('Balance')}</Tab>
<Tab>{__('Transactions')}</Tab>
</TabList>
<TabPanels>
{/* balances for lbc and fiat */}
<TabPanel>
<WalletBalance />
</TabPanel>
{/* transactions panel */}
<TabPanel>
<div className="section card-stack">
<div className="lbc-transactions">
{/* if the transactions are loading */}
{loading && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{/* when the transactions are finished loading */}
{!loading && (
<>
{showIntro ? (
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<TxoList search={search} />
</div>
)}
</>
)}
</div>
</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>
</TabPanels>
</Tabs>
</Page>
)}
{!stripeEnvironment && (
<Page>
{loading && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{!loading && (
<>
{showIntro ? (
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<WalletBalance />
<TxoList search={search} />
</div>
)}
</>
)}
</Page>
)}
</div>
</TabPanel>
</TabPanels>
</Tabs>
</Page>
{/* @endif */}
{/* @if TARGET='app' */}
<Page>
{loading && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{!loading && (
<>
{showIntro ? (
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<TxoList search={search} />
</div>
)}
</>
)}
</Page>
{/* @endif */}
</>
);
};