From 4f14e017fe262b60b40ee9d17e377fc77773cce4 Mon Sep 17 00:00:00 2001 From: Anthony Date: Wed, 28 Jul 2021 15:18:06 +0200 Subject: [PATCH] add wallet fiat balance --- ui/component/walletFiatBalance/index.js | 40 ++++++ ui/component/walletFiatBalance/view.jsx | 180 ++++++++++++++++++++++++ ui/page/wallet/view.jsx | 21 ++- 3 files changed, 228 insertions(+), 13 deletions(-) create mode 100644 ui/component/walletFiatBalance/index.js create mode 100644 ui/component/walletFiatBalance/view.jsx 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..074c76fe3 --- /dev/null +++ b/ui/component/walletFiatBalance/view.jsx @@ -0,0 +1,180 @@ +// @flow +import * as ICONS from 'constants/icons'; +import * as MODALS from 'constants/modal_types'; +import * as PAGES from 'constants/pages'; +import React from 'react'; +import CreditAmount from 'component/common/credit-amount'; +import Button from 'component/button'; +import HelpLink from 'component/common/help-link'; +import Card from 'component/common/card'; +import Icon from 'component/common/icon'; +import LbcSymbol from 'component/common/lbc-symbol'; +import I18nMessage from 'component/i18nMessage'; +import { formatNumberWithCommas } from 'util/number'; + +type Props = { + balance: number, + totalBalance: number, + claimsBalance: number, + supportsBalance: number, + tipsBalance: number, + doOpenModal: (string) => void, + hasSynced: boolean, + doFetchUtxoCounts: () => void, + doUtxoConsolidate: () => void, + fetchingUtxoCounts: boolean, + consolidatingUtxos: boolean, + consolidateIsPending: boolean, + massClaimingTips: boolean, + massClaimIsPending: boolean, + utxoCounts: { [string]: number }, +}; + +export const WALLET_CONSOLIDATE_UTXOS = 400; +const LARGE_WALLET_BALANCE = 100; + +const WalletBalance = (props: Props) => { + const { + balance, + claimsBalance, + supportsBalance, + tipsBalance, + doOpenModal, + hasSynced, + doUtxoConsolidate, + doFetchUtxoCounts, + consolidatingUtxos, + consolidateIsPending, + massClaimingTips, + massClaimIsPending, + utxoCounts, + } = props; + const [detailsExpanded, setDetailsExpanded] = React.useState(false); + + const { other: otherCount = 0 } = utxoCounts || {}; + + const totalBalance = balance + tipsBalance + supportsBalance + claimsBalance; + const totalLocked = tipsBalance + claimsBalance + supportsBalance; + const operationPending = massClaimIsPending || massClaimingTips || consolidateIsPending || consolidatingUtxos; + + React.useEffect(() => { + if (balance > LARGE_WALLET_BALANCE && detailsExpanded) { + doFetchUtxoCounts(); + } + }, [doFetchUtxoCounts, balance, detailsExpanded]); + + return ( + 313 USD} + subtitle={ + totalLocked > 0 ? ( + + This is your remaining balance that can still be withdrawn to your bank account + + ) : ( + {__('Your total balance.')} + ) + } + actions={ + <> +

+ + 413 Received Total +

+ +

+ $100 Already Withdrawn!!!! +

+ {detailsExpanded && ( +
+
+
+ {__('...earned from others')} + ({__('Unlock to spend')}) +
+
+ + {Boolean(tipsBalance) && ( +
+ +
+ {__('...on initial publishes')} + ({__('Delete or edit past content to spend')}) +
+
+ +
+ +
+ {__('...supporting content')} + ({__('Delete supports to spend')}) +
+
+ +
+
+
+ )} + + {/* @if TARGET='app' */} + {hasSynced ? ( +

+ {__('A backup of your wallet is synced with lbry.tv.')} + +

+ ) : ( +

+ {__('Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.')} + +

+ )} + {/* @endif */} +
+
+ {(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && ( +

+ doUtxoConsolidate()} + disabled={operationPending} + label={ + consolidateIsPending || consolidatingUtxos ? __('Consolidating...') : __('Consolidate Now') + } + /> + ), + help: , + }} + > + Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This could + take some time. %now%%help% + +

+ )} + + } + /> + ); +}; + +export default WalletBalance; diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx index 7c92b2e7d..5a9071539 100644 --- a/ui/page/wallet/view.jsx +++ b/ui/page/wallet/view.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { withRouter } from 'react-router'; import WalletBalance from 'component/walletBalance'; +import WalletFiatBalance from 'component/WalletFiatBalance'; import TxoList from 'component/txoList'; import Page from 'component/page'; import Spinner from 'component/spinner'; @@ -18,32 +19,27 @@ const WalletPage = (props: Props) => { const tab = new URLSearchParams(props.location.search).get('tab'); - React.useEffect(()=>{ - if(tab === 'currency'){ + React.useEffect(() => { + // if (tab === 'currency') { + if (1 === 1) { document.getElementsByClassName('lbc-transactions')[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'; } - },[]) - + }, []); const { location, totalBalance } = props; const { search } = location; const showIntro = totalBalance === 0; const loading = totalBalance === undefined; - const TAB_LBC_TRANSACTIONS = 'TabLBCTransactions'; - const TAB_FIAT_TRANSACTIONS = 'TabFiatTransactions'; - - const [activeTab, setActiveTab] = React.useState(TAB_LBC_TRANSACTIONS); - return ( {/* tabs to switch between fiat and lbc */}

{ document.getElementsByClassName('lbc-transactions')[0].style.display = 'inline'; document.getElementsByClassName('fiat-transactions')[0].style.display = 'none'; @@ -60,9 +56,8 @@ const WalletPage = (props: Props) => { document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'none'; document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'underline'; - }} - >Fiat Transactions

+ >USD Transactions
{/* if the transactions are loading */} { loading && ( @@ -87,7 +82,7 @@ const WalletPage = (props: Props) => { {( <>
-

Here's your fiat transactions

+
)}