diff --git a/package.json b/package.json index e6765f310..eb99f3de0 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "build:dir": "yarn build -- --dir -c.compression=store -c.mac.identity=null", "crossenv": "./node_modules/cross-env/dist/bin/cross-env", "lint": "eslint 'ui/**/*.{js,jsx}' && eslint 'web/**/*.{js,jsx}' && eslint 'electron/**/*.js' && flow", - "lint-fix": "eslint --fix 'ui/**/*.{js,jsx}' && eslint --fix 'web/**/*.{js,jsx}' && eslint --fix 'electron/**/*.js' && flow", + "lint-fix": "eslint --fix --quiet 'ui/**/*.{js,jsx}' && eslint --fix --quiet 'web/**/*.{js,jsx}' && eslint --fix --quiet 'electron/**/*.js'", "format": "prettier 'src/**/*.{js,jsx,scss,json}' --write", "flow-defs": "flow-typed install", "precommit": "lint-staged", diff --git a/ui/component/walletFiatAccountHistory/index.js b/ui/component/walletFiatAccountHistory/index.js new file mode 100644 index 000000000..83b0a30cf --- /dev/null +++ b/ui/component/walletFiatAccountHistory/index.js @@ -0,0 +1,40 @@ +import { connect } from 'react-redux'; +import { + selectBalance, + selectClaimsBalance, + selectSupportsBalance, + selectTipsBalance, + selectIsFetchingUtxoCounts, + selectUtxoCounts, + doFetchUtxoCounts, + doUtxoConsolidate, + selectIsConsolidatingUtxos, + selectIsMassClaimingTips, + selectPendingConsolidateTxid, + selectPendingMassClaimTxid, +} from 'lbry-redux'; +import { doOpenModal } from 'redux/actions/app'; +import { selectSyncHash } from 'redux/selectors/sync'; +import { selectClaimedRewards } from 'redux/selectors/rewards'; +import WalletBalance from './view'; + +const select = state => ({ + balance: selectBalance(state), + claimsBalance: selectClaimsBalance(state) || 0, + supportsBalance: selectSupportsBalance(state) || 0, + tipsBalance: selectTipsBalance(state) || 0, + rewards: selectClaimedRewards(state), + hasSynced: Boolean(selectSyncHash(state)), + fetchingUtxoCounts: selectIsFetchingUtxoCounts(state), + consolidatingUtxos: selectIsConsolidatingUtxos(state), + massClaimingTips: selectIsMassClaimingTips(state), + utxoCounts: selectUtxoCounts(state), + consolidateIsPending: selectPendingConsolidateTxid(state), + massClaimIsPending: selectPendingMassClaimTxid(state), +}); + +export default connect(select, { + doOpenModal, + doFetchUtxoCounts, + doUtxoConsolidate, +})(WalletBalance); diff --git a/ui/component/walletFiatAccountHistory/view.jsx b/ui/component/walletFiatAccountHistory/view.jsx new file mode 100644 index 000000000..dd40d08c4 --- /dev/null +++ b/ui/component/walletFiatAccountHistory/view.jsx @@ -0,0 +1,166 @@ +// @flow +import React from 'react'; +import Button from 'component/button'; +import Card from 'component/common/card'; +import { Lbryio } from 'lbryinc'; +import moment from 'moment'; + +type Props = { + accountDetails: any, + transactions: any, +}; + +const WalletBalance = (props: Props) => { + // receive transactions from parent component + let accountTransactions = props.transactions; + + // reverse so most recent payments come first + if (accountTransactions) { + accountTransactions = accountTransactions.reverse(); + } + + if (accountTransactions && accountTransactions.length > 10) { + accountTransactions.length = 10; + } + + // const [detailsExpanded, setDetailsExpanded] = React.useState(false); + const [accountStatusResponse, setAccountStatusResponse] = React.useState(); + const [subscriptions, setSubscriptions] = React.useState([]); + + var environment = 'test'; + + function getAccountStatus() { + return Lbryio.call( + 'account', + 'status', + { + environment, + }, + 'post' + ); + } + + React.useEffect(() => { + (async function() { + const response = await getAccountStatus(); + + setAccountStatusResponse(response); + + console.log(response); + })(); + }, []); + + return ( + <> +
+ + + + + + + + + + + + + + {accountTransactions && + accountTransactions.map((transaction) => ( + + + + + + + + + + ))} + +
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Processing Fee')}{__('Odysee Fee')}{__('Received Amount')}
{moment(transaction.created_at).format('LLL')} + + ${transaction.tipped_amount / 100}${transaction.transaction_fee / 100}${transaction.application_fee / 100}${transaction.received_amount / 100}
+ {!accountTransactions &&

No Transactions

} +
+ + )} + /> + + +
+ + + + + + + + + + + + + {subscriptions && + subscriptions.reverse().map((transaction) => ( + + + + + + + + + ))} + +
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Card Last 4')}{__('Anonymous')}
{moment(transaction.created_at).format('LLL')} + + ${transaction.tipped_amount / 100}{lastFour}{transaction.private_tip ? 'Yes' : 'No'}
+ {(!subscriptions || subscriptions.length === 0) &&

No Subscriptions

} +
+ + } + /> + ); +}; + +export default WalletBalance; diff --git a/ui/component/walletFiatBalance/index.js b/ui/component/walletFiatBalance/index.js new file mode 100644 index 000000000..83b0a30cf --- /dev/null +++ b/ui/component/walletFiatBalance/index.js @@ -0,0 +1,40 @@ +import { connect } from 'react-redux'; +import { + selectBalance, + selectClaimsBalance, + selectSupportsBalance, + selectTipsBalance, + selectIsFetchingUtxoCounts, + selectUtxoCounts, + doFetchUtxoCounts, + doUtxoConsolidate, + selectIsConsolidatingUtxos, + selectIsMassClaimingTips, + selectPendingConsolidateTxid, + selectPendingMassClaimTxid, +} from 'lbry-redux'; +import { doOpenModal } from 'redux/actions/app'; +import { selectSyncHash } from 'redux/selectors/sync'; +import { selectClaimedRewards } from 'redux/selectors/rewards'; +import WalletBalance from './view'; + +const select = state => ({ + balance: selectBalance(state), + claimsBalance: selectClaimsBalance(state) || 0, + supportsBalance: selectSupportsBalance(state) || 0, + tipsBalance: selectTipsBalance(state) || 0, + rewards: selectClaimedRewards(state), + hasSynced: Boolean(selectSyncHash(state)), + fetchingUtxoCounts: selectIsFetchingUtxoCounts(state), + consolidatingUtxos: selectIsConsolidatingUtxos(state), + massClaimingTips: selectIsMassClaimingTips(state), + utxoCounts: selectUtxoCounts(state), + consolidateIsPending: selectPendingConsolidateTxid(state), + massClaimIsPending: selectPendingMassClaimTxid(state), +}); + +export default connect(select, { + doOpenModal, + doFetchUtxoCounts, + doUtxoConsolidate, +})(WalletBalance); diff --git a/ui/component/walletFiatBalance/view.jsx b/ui/component/walletFiatBalance/view.jsx new file mode 100644 index 000000000..4661aa2f9 --- /dev/null +++ b/ui/component/walletFiatBalance/view.jsx @@ -0,0 +1,99 @@ +// @flow +import * as ICONS from 'constants/icons'; +import * as PAGES from 'constants/pages'; +import React from 'react'; +import CreditAmount from 'component/common/credit-amount'; +import Button from 'component/button'; +import Card from 'component/common/card'; +import Icon from 'component/common/icon'; +import I18nMessage from 'component/i18nMessage'; + +type Props = { + accountDetails: any, +}; + +const WalletBalance = (props: Props) => { + const { + accountDetails, + } = props; + + console.log('account details'); + console.log(accountDetails); + + const [detailsExpanded, setDetailsExpanded] = React.useState(false); + + return ( + <>{{(accountDetails && (accountDetails.total_received_unpaid / 100)) || 0} USD} + subtitle={ + + This is your remaining balance that can still be withdrawn to your bank account + + } + actions={ + <> +

+ ${(accountDetails && (accountDetails.total_tipped / 100)) || 0} Total Received Tips +

+ +

+ ${(accountDetails && (accountDetails.total_paid_out / 100)) || 0} Withdrawn +

+ + {/* view more section */} + {detailsExpanded && ( +
+
+
+ {__('Earned from uploads')} + {/* ({__('Earned from channel page')}) */} +
+
+ + {Boolean(1) && ( +
+ +
+ {__('Earned from channel page')} + {/* ({__('Delete or edit past content to spend')}) */} +
+
+ +
+ + {/*
*/} + {/* {__('...supporting content')} */} + {/* ({__('Delete supports to spend')}) */} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} +
+
+ )} + +
+
+ + } + />} + ); +}; + +export default WalletBalance; diff --git a/ui/component/walletFiatPaymentBalance/index.js b/ui/component/walletFiatPaymentBalance/index.js new file mode 100644 index 000000000..83b0a30cf --- /dev/null +++ b/ui/component/walletFiatPaymentBalance/index.js @@ -0,0 +1,40 @@ +import { connect } from 'react-redux'; +import { + selectBalance, + selectClaimsBalance, + selectSupportsBalance, + selectTipsBalance, + selectIsFetchingUtxoCounts, + selectUtxoCounts, + doFetchUtxoCounts, + doUtxoConsolidate, + selectIsConsolidatingUtxos, + selectIsMassClaimingTips, + selectPendingConsolidateTxid, + selectPendingMassClaimTxid, +} from 'lbry-redux'; +import { doOpenModal } from 'redux/actions/app'; +import { selectSyncHash } from 'redux/selectors/sync'; +import { selectClaimedRewards } from 'redux/selectors/rewards'; +import WalletBalance from './view'; + +const select = state => ({ + balance: selectBalance(state), + claimsBalance: selectClaimsBalance(state) || 0, + supportsBalance: selectSupportsBalance(state) || 0, + tipsBalance: selectTipsBalance(state) || 0, + rewards: selectClaimedRewards(state), + hasSynced: Boolean(selectSyncHash(state)), + fetchingUtxoCounts: selectIsFetchingUtxoCounts(state), + consolidatingUtxos: selectIsConsolidatingUtxos(state), + massClaimingTips: selectIsMassClaimingTips(state), + utxoCounts: selectUtxoCounts(state), + consolidateIsPending: selectPendingConsolidateTxid(state), + massClaimIsPending: selectPendingMassClaimTxid(state), +}); + +export default connect(select, { + doOpenModal, + doFetchUtxoCounts, + doUtxoConsolidate, +})(WalletBalance); diff --git a/ui/component/walletFiatPaymentBalance/view.jsx b/ui/component/walletFiatPaymentBalance/view.jsx new file mode 100644 index 000000000..20b5c121a --- /dev/null +++ b/ui/component/walletFiatPaymentBalance/view.jsx @@ -0,0 +1,68 @@ +// @flow +import * as ICONS from 'constants/icons'; +import * as PAGES from 'constants/pages'; +import React from 'react'; +import Button from 'component/button'; +import Card from 'component/common/card'; +import Icon from 'component/common/icon'; +import I18nMessage from 'component/i18nMessage'; + +type Props = { + totalTippedAmount: number, + accountDetails: any, + transactions: any, +}; + +const WalletBalance = (props: Props) => { + const { + // accountDetails, + totalTippedAmount, + transactions, + } = props; + + // const [detailsExpanded, setDetailsExpanded] = React.useState(false); + const [totalCreatorsSupported, setTotalCreatorsSupported] = React.useState(false); + + // calculate how many unique users tipped + React.useEffect(() => { + if (transactions) { + let channelNames = []; + + for (const transaction of transactions) { + channelNames.push(transaction.channel_name); + console.log(transaction.channel_name); + } + + let unique = [...new Set(channelNames)]; + setTotalCreatorsSupported(unique.length); + } + }, [transactions]); + + return ( + <>{{totalTippedAmount} USD} + subtitle={ + + The total amount you have tipped to different creators + + } + actions={ + <> +

+ {transactions && transactions.length} Total Tips +

+ +

+ {totalCreatorsSupported || 0} Creators Supported +

+ +
+
+ + } + />} + ); +}; + +export default WalletBalance; diff --git a/ui/component/walletFiatPaymentHistory/index.js b/ui/component/walletFiatPaymentHistory/index.js new file mode 100644 index 000000000..83b0a30cf --- /dev/null +++ b/ui/component/walletFiatPaymentHistory/index.js @@ -0,0 +1,40 @@ +import { connect } from 'react-redux'; +import { + selectBalance, + selectClaimsBalance, + selectSupportsBalance, + selectTipsBalance, + selectIsFetchingUtxoCounts, + selectUtxoCounts, + doFetchUtxoCounts, + doUtxoConsolidate, + selectIsConsolidatingUtxos, + selectIsMassClaimingTips, + selectPendingConsolidateTxid, + selectPendingMassClaimTxid, +} from 'lbry-redux'; +import { doOpenModal } from 'redux/actions/app'; +import { selectSyncHash } from 'redux/selectors/sync'; +import { selectClaimedRewards } from 'redux/selectors/rewards'; +import WalletBalance from './view'; + +const select = state => ({ + balance: selectBalance(state), + claimsBalance: selectClaimsBalance(state) || 0, + supportsBalance: selectSupportsBalance(state) || 0, + tipsBalance: selectTipsBalance(state) || 0, + rewards: selectClaimedRewards(state), + hasSynced: Boolean(selectSyncHash(state)), + fetchingUtxoCounts: selectIsFetchingUtxoCounts(state), + consolidatingUtxos: selectIsConsolidatingUtxos(state), + massClaimingTips: selectIsMassClaimingTips(state), + utxoCounts: selectUtxoCounts(state), + consolidateIsPending: selectPendingConsolidateTxid(state), + massClaimIsPending: selectPendingMassClaimTxid(state), +}); + +export default connect(select, { + doOpenModal, + doFetchUtxoCounts, + doUtxoConsolidate, +})(WalletBalance); diff --git a/ui/component/walletFiatPaymentHistory/view.jsx b/ui/component/walletFiatPaymentHistory/view.jsx new file mode 100644 index 000000000..5eeb1e879 --- /dev/null +++ b/ui/component/walletFiatPaymentHistory/view.jsx @@ -0,0 +1,203 @@ +// @flow +import React from 'react'; +import Button from 'component/button'; +import Card from 'component/common/card'; +import { Lbryio } from 'lbryinc'; +import moment from 'moment'; + +type Props = { + accountDetails: any, + transactions: any, + totalTippedAmount: number, +}; + +const WalletBalance = (props: Props) => { + // receive transactions from parent component + let accountTransactions = props.transactions; + + console.log('heres transactions'); + console.log(accountTransactions); + + // let totalTippedAmount = props.totalTippedAmount; + + // totalTippedAmount = 0; + + // reverse so most recent payments come first + if (accountTransactions) { + accountTransactions = accountTransactions.reverse(); + } + + // const [detailsExpanded, setDetailsExpanded] = React.useState(false); + // const [accountStatusResponse, setAccountStatusResponse] = React.useState(); + // const [totalTippedAmount, setTotalTippedAmount] = React.useState(0); + + const [paymentHistoryTransactions, setPaymentHistoryTransactions] = React.useState(); + const [subscriptions, setSubscriptions] = React.useState(); + + const [lastFour, setLastFour] = React.useState(); + + var environment = 'test'; + + // function getPaymentHistory() { + // return Lbryio.call( + // 'customer', + // 'list', + // { + // environment, + // }, + // 'post' + // ); }; + + function getCustomerStatus() { + return Lbryio.call( + 'customer', + 'status', + { + environment, + }, + 'post' + ); + } + + React.useEffect(() => { + (async function() { + let response = accountTransactions; + + console.log('payment transactions'); + console.log(response); + + const customerStatusResponse = await getCustomerStatus(); + + setLastFour(customerStatusResponse.PaymentMethods[0].card.last4); + + if (response && response.length > 10) response.length = 10; + + setPaymentHistoryTransactions(response); + + const subscriptions = [...response]; + + if (subscriptions && subscriptions.length > 2) { + subscriptions.length = 2; + setSubscriptions([]); + } else { + setSubscriptions([]); + } + + console.log(response); + })(); + }, [accountTransactions]); + + return ( + <> + +
+ + + + + + + + + + + + + {accountTransactions && + accountTransactions.map((transaction) => ( + + + + + + + + + ))} + +
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Card Last 4')}{__('Anonymous')}
{moment(transaction.created_at).format('LLL')} + + ${transaction.tipped_amount / 100}{lastFour}{transaction.private_tip ? 'Yes' : 'No'}
+ {(!accountTransactions || accountTransactions.length === 0) &&

No Transactions

} +
+ + } + /> + + +
+ + + + + + + + + + + + + {subscriptions && + subscriptions.reverse().map((transaction) => ( + + + + + + + + + ))} + +
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Card Last 4')}{__('Anonymous')}
{moment(transaction.created_at).format('LLL')} + + ${transaction.tipped_amount / 100}{lastFour}{transaction.private_tip ? 'Yes' : 'No'}
+ {(!subscriptions || subscriptions.length === 0) &&

No Subscriptions

} +
+ + } + /> + + ); +}; + +export default WalletBalance; diff --git a/ui/page/settingsStripeAccount/view.jsx b/ui/page/settingsStripeAccount/view.jsx index 2821b4423..4bc0edcec 100644 --- a/ui/page/settingsStripeAccount/view.jsx +++ b/ui/page/settingsStripeAccount/view.jsx @@ -1,12 +1,12 @@ // @flow import * as ICONS from 'constants/icons'; +import * as PAGES from 'constants/pages'; import React from 'react'; import Button from 'component/button'; import Card from 'component/common/card'; import Page from 'component/page'; import { Lbryio } from 'lbryinc'; import { URL, WEBPACK_WEB_PORT, STRIPE_PUBLIC_KEY } from 'config'; -import moment from 'moment'; const isDev = process.env.NODE_ENV !== 'production'; @@ -184,7 +184,7 @@ class StripeAccountConnection extends React.Component { unpaidBalance, accountNotConfirmedButReceivedTips, pageTitle, - accountTransactions, + // accountTransactions, } = this.state; const { user } = this.props; @@ -228,25 +228,11 @@ class StripeAccountConnection extends React.Component {

{__('Congratulations! Your account has been connected with Odysee.')}

- {unpaidBalance > 0 ? ( -
-
-

- {__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })} -

-
- ) : ( -
-
-

- {__('Your account balance is $0 USD. When you receive a tip you will see it here.')} -

-
- )}
)} + {/* TODO: hopefully we won't be using this anymore and can remove it */} {accountNotConfirmedButReceivedTips && (
@@ -277,66 +263,16 @@ class StripeAccountConnection extends React.Component { )}
} + actions={ +
)} - - {/* customer already has transactions */} - {customerTransactions && customerTransactions.length > 0 && ( - -
- - - - - - - - - - - - {customerTransactions && - customerTransactions.reverse().map((transaction) => ( - - - - - - - - ))} - -
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Anonymous')}
{moment(transaction.created_at).format('LLL')} - - ${transaction.tipped_amount / 100}{transaction.private_tip ? 'Yes' : 'No'}
-
- - } - /> - )} ); } diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx index ba284ffe1..2bc991b5d 100644 --- a/ui/page/wallet/view.jsx +++ b/ui/page/wallet/view.jsx @@ -2,10 +2,15 @@ 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 }, @@ -14,6 +19,143 @@ type Props = { }; 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; @@ -21,23 +163,66 @@ const WalletPage = (props: Props) => { return ( - {loading && ( -
- -
- )} - {!loading && ( - <> - {showIntro ? ( - - ) : ( -
- - -
- )} - - )} + {/* tabs to switch between fiat and lbc */} + {/* lbc button */} +

{ + focusLBCTab(); + }} + >LBC Wallet

+ {/* 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 */} +
+ +
+ +
+ ); };