// @flow import React from 'react'; import { withRouter } 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 Spinner from 'component/spinner'; import YrblWalletEmpty from 'component/yrblWalletEmpty'; import { Lbryio } from 'lbryinc'; type Props = { history: { action: string, push: (string) => void, replace: (string) => void }, location: { search: string, pathname: string }, totalBalance: ?number, }; const WalletPage = (props: Props) => { console.log(props); const stripeEnvironment = 'test'; const tab = new URLSearchParams(props.location.search).get('tab'); const [accountStatusResponse, setAccountStatusResponse] = React.useState(); const [accountTransactionResponse, setAccountTransactionResponse] = React.useState(); const [customerTransactions, setCustomerTransactions] = React.useState(); const [totalTippedAmount, setTotalTippedAmount] = React.useState(0); function getPaymentHistory() { return Lbryio.call( 'customer', 'list', { environment: stripeEnvironment, }, 'post' ); }; // function getCustomerStatus() { // return Lbryio.call( // 'customer', // 'status', // { // 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 { const response = await getAccountStatus(); setAccountStatusResponse(response); // TODO: some weird naming clash hence getAccountTransactionsa 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 const customerTransactionResponse = await getPaymentHistory(); let totalTippedAmount = 0; for (const transaction of customerTransactionResponse) { totalTippedAmount = totalTippedAmount + transaction.tipped_amount; } setTotalTippedAmount(totalTippedAmount / 100); setCustomerTransactions(customerTransactionResponse); } catch (err) { console.log(err); } })(); }, []); function focusLBCTab() { document.getElementsByClassName('lbc-transactions')[0].style.display = 'inline'; document.getElementsByClassName('fiat-transactions')[0].style.display = 'none'; document.getElementsByClassName('payment-history-tab')[0].style.display = 'none'; document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'underline'; document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'none'; document.getElementsByClassName('fiat-payment-history-switcher')[0].style.textDecoration = 'none'; } function focusAccountHistoryTab() { document.getElementsByClassName('lbc-transactions')[0].style.display = 'none'; document.getElementsByClassName('payment-history-tab')[0].style.display = 'none'; document.getElementsByClassName('fiat-transactions')[0].style.display = 'inline'; document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'none'; document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'underline'; document.getElementsByClassName('fiat-payment-history-switcher')[0].style.textDecoration = 'none'; } function focusPaymentHistoryTab() { document.getElementsByClassName('lbc-transactions')[0].style.display = 'none'; document.getElementsByClassName('fiat-transactions')[0].style.display = 'none'; document.getElementsByClassName('payment-history-tab')[0].style.display = 'inline'; document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'none'; document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'none'; document.getElementsByClassName('fiat-payment-history-switcher')[0].style.textDecoration = 'underline'; } // select the first tab React.useEffect(() => { if (tab === 'account-history') { // if (1 === 2) { focusAccountHistoryTab(); } else if (tab === 'payment-history') { // } else if (1 === 2){ focusPaymentHistoryTab(); } else { focusLBCTab(); } }, []); const { location, totalBalance } = props; const { search } = location; const showIntro = totalBalance === 0; const loading = totalBalance === undefined; return ( {/* tabs to switch between fiat and lbc */} {/* lbc button */}

{ focusLBCTab(); }} >LBRY Credits

{/* account history button */}

{ focusAccountHistoryTab(); }} >Account History

{/* payment history button */}

{ focusPaymentHistoryTab(); }} >Payment History

{/* lbc wallet section */}
{/* if the transactions are loading */} { loading && (
)} {/* when the transactions are finished loading */} { !loading && ( <> {showIntro ? ( ) : (
)} )}
{/* account received transactions section */}
{/* fiat payment history for tips made by user */}
); }; export default withRouter(WalletPage);