From e140613faf4b55dc8d7c17f6cf33c58c5109e5e4 Mon Sep 17 00:00:00 2001 From: Anthony Date: Tue, 10 Aug 2021 20:27:58 +0200 Subject: [PATCH] remove unused conditional get stuff ready for merge bugfix and cleanup requested changes fixing flow errors fix last flow error and touchups fiat and lbc tabs coming along support setting currency as the default tab via query param add wallet fiat balance fixing naming add fiat transactions using es6 to populate data should be fine but keeps crashing transaction listing working add no transactions thing about to add a third tab add third tab add card last 4 to transaction history some renaming show payments successfully show filler for subscriptions display if no transactions or subs working but in the wrong component approaching something thats working showing total tipped amount about to add last couple features cleanup More touchups adding last features calculate the total amount of unique creators tipped couple touchups remove transaction listings from settings add view transactions buttons small optimization add subscriptions section fix lot of linting errors and make command more userful --- package.json | 2 +- .../walletFiatAccountHistory/index.js | 40 ++++ .../walletFiatAccountHistory/view.jsx | 166 +++++++++++++ ui/component/walletFiatBalance/index.js | 40 ++++ ui/component/walletFiatBalance/view.jsx | 99 ++++++++ .../walletFiatPaymentBalance/index.js | 40 ++++ .../walletFiatPaymentBalance/view.jsx | 68 ++++++ .../walletFiatPaymentHistory/index.js | 40 ++++ .../walletFiatPaymentHistory/view.jsx | 203 ++++++++++++++++ ui/page/settingsStripeAccount/view.jsx | 87 +------ ui/page/settingsStripeCard/view.jsx | 74 +----- ui/page/wallet/view.jsx | 219 ++++++++++++++++-- 12 files changed, 921 insertions(+), 157 deletions(-) create mode 100644 ui/component/walletFiatAccountHistory/index.js create mode 100644 ui/component/walletFiatAccountHistory/view.jsx create mode 100644 ui/component/walletFiatBalance/index.js create mode 100644 ui/component/walletFiatBalance/view.jsx create mode 100644 ui/component/walletFiatPaymentBalance/index.js create mode 100644 ui/component/walletFiatPaymentBalance/view.jsx create mode 100644 ui/component/walletFiatPaymentHistory/index.js create mode 100644 ui/component/walletFiatPaymentHistory/view.jsx 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..2b36ac6ff 100644 --- a/ui/page/settingsStripeAccount/view.jsx +++ b/ui/page/settingsStripeAccount/view.jsx @@ -1,12 +1,13 @@ // @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 +185,7 @@ class StripeAccountConnection extends React.Component { unpaidBalance, accountNotConfirmedButReceivedTips, pageTitle, - accountTransactions, + // accountTransactions, } = this.state; const { user } = this.props; @@ -228,25 +229,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 +264,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 */} +
+ +
+ +
+ ); };