From 5420a6a887058dfa2ef5447bc8bf70d7272d95f6 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 12 Jan 2021 10:25:51 -0500 Subject: [PATCH] show total balance on wallet page/header --- static/app-strings.json | 11 +- ui/component/channelCreate/view.jsx | 2 +- ui/component/channelEdit/view.jsx | 2 +- ui/component/fileReactions/view.jsx | 4 +- ui/component/header/index.js | 5 +- ui/component/publishName/view.jsx | 2 +- ui/component/repostCreate/view.jsx | 2 +- ui/component/walletBalance/view.jsx | 234 +++++++++++++--------------- ui/modal/modalRepost/view.jsx | 2 +- ui/page/wallet/view.jsx | 4 +- ui/scss/component/section.scss | 9 +- ui/scss/init/_gui.scss | 6 +- ui/scss/themes/dark.scss | 3 +- ui/scss/themes/light.scss | 3 +- ui/util/number.js | 4 +- 15 files changed, 145 insertions(+), 148 deletions(-) diff --git a/static/app-strings.json b/static/app-strings.json index 84901efd0..2a040b97f 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -502,8 +502,9 @@ "Access to these files are equivalent to having access to your Credits, channels, and publishes. Keep any copies you make of your wallet in a secure place. For more details on backing up and best practices %helpLink%.": "Access to these files are equivalent to having access to your Credits, channels, and publishes. Keep any copies you make of your wallet in a secure place. For more details on backing up and best practices %helpLink%.", "Your channels": "Your channels", "Add Tags": "Add Tags", - "Available Balance": "Available Balance", - "Earned and bound in tips": "Earned and bound in tips", + "available balance": "available balance", + "currently in use": "currently in use", + "... earned and bound in tips": "... earned and bound in tips", "... in your publishes": "... in your publishes", "... in your supports": "... in your supports", "Add a tag": "Add a tag", @@ -582,8 +583,8 @@ "settings": "settings", "Content may be hidden on this %type% because of your %settings%.": "Content may be hidden on this %type% because of your %settings%.", "Sync": "Sync", - "earned and bound in tips": "earned and bound in tips", - "currently staked": "currently staked", + "%lbc_amount% earned and bound in tips": "%lbc_amount% earned and bound in tips", + "%lbc_amount% currently staked": "%lbc_amount% currently staked", "Sync balance and preferences across devices.": "Sync balance and preferences across devices.", "By creating an account, you agree to our %terms% and confirm you're over the age of 13.": "By creating an account, you agree to our %terms% and confirm you're over the age of 13.", "Advanced Editor": "Advanced Editor", @@ -701,7 +702,7 @@ "Unlock Rewards": "Unlock Rewards", "Log in to %SITE_NAME% to earn rewards": "Log in to %SITE_NAME% to earn rewards", "A %site_name% account allows you to earn more than %credit_amount% in rewards, backup your data, and get content and security updates.": "A %site_name% account allows you to earn more than %credit_amount% in rewards, backup your data, and get content and security updates.", - "Deposit cannot be higher than your balance": "Deposit cannot be higher than your balance", + "Deposit cannot be higher than your available balance": "Deposit cannot be higher than your available balance", "Your deposit must be higher": "Your deposit must be higher", "1 view": "1 view", "%view_count% views": "%view_count% views", diff --git a/ui/component/channelCreate/view.jsx b/ui/component/channelCreate/view.jsx index 7f32ad036..00f20f962 100644 --- a/ui/component/channelCreate/view.jsx +++ b/ui/component/channelCreate/view.jsx @@ -64,7 +64,7 @@ class ChannelCreate extends React.PureComponent { } else if (newChannelBid === balance) { newChannelBidError = __('Please decrease your deposit to account for transaction fees'); } else if (newChannelBid > balance) { - newChannelBidError = __('Deposit cannot be higher than your balance'); + newChannelBidError = __('Deposit cannot be higher than your available balance'); } else if (newChannelBid < MINIMUM_PUBLISH_BID) { newChannelBidError = __('Your deposit must be higher'); } diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx index dffac967f..799acd5f3 100644 --- a/ui/component/channelEdit/view.jsx +++ b/ui/component/channelEdit/view.jsx @@ -138,7 +138,7 @@ function ChannelForm(props: Props) { if (bid <= 0.0 || isNaN(bid)) { setBidError(__('Deposit cannot be 0')); } else if (totalAvailableBidAmount < bid) { - setBidError(__('Deposit cannot be higher than your balance')); + setBidError(__('Deposit cannot be higher than your available balance')); } else if (totalAvailableBidAmount - bid < ESTIMATED_FEE) { setBidError(__('Please decrease your deposit to account for transaction fees')); } else if (bid < MINIMUM_PUBLISH_BID) { diff --git a/ui/component/fileReactions/view.jsx b/ui/component/fileReactions/view.jsx index 9c196f1fe..08ce9a569 100644 --- a/ui/component/fileReactions/view.jsx +++ b/ui/component/fileReactions/view.jsx @@ -42,7 +42,7 @@ function FileReactions(props: Props) { requiresAuth={IS_WEB} authSrc="filereaction_like" className={classnames('button--file-action')} - label={formatNumberWithCommas(likeCount)} + label={formatNumberWithCommas(likeCount, 0)} iconSize={18} icon={ICONS.UPVOTE} onClick={() => doReactionLike(uri)} @@ -52,7 +52,7 @@ function FileReactions(props: Props) { authSrc={'filereaction_dislike'} title={__('I dislike this')} className={classnames('button--file-action')} - label={formatNumberWithCommas(dislikeCount)} + label={formatNumberWithCommas(dislikeCount, 0)} iconSize={18} icon={ICONS.DOWNVOTE} onClick={() => doReactionDislike(uri)} diff --git a/ui/component/header/index.js b/ui/component/header/index.js index f18581bd8..bb8d36afe 100644 --- a/ui/component/header/index.js +++ b/ui/component/header/index.js @@ -1,6 +1,6 @@ import * as MODALS from 'constants/modal_types'; import { connect } from 'react-redux'; -import { selectBalance, formatCredits, selectMyChannelClaims, SETTINGS } from 'lbry-redux'; +import { selectTotalBalance, formatCredits, selectMyChannelClaims, SETTINGS } from 'lbry-redux'; import { selectGetSyncErrorMessage } from 'redux/selectors/sync'; import { selectUserVerifiedEmail, selectUserEmail, selectEmailToVerify, selectUser } from 'redux/selectors/user'; import { doClearEmailEntry, doClearPasswordEntry } from 'redux/actions/user'; @@ -12,9 +12,8 @@ import Header from './view'; import { selectHasNavigated } from 'redux/selectors/app'; const select = state => ({ - balance: selectBalance(state), language: selectLanguage(state), - roundedBalance: formatCredits(selectBalance(state), 2, true), + roundedBalance: formatCredits(selectTotalBalance(state), 2, true), currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state), automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state), hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state), diff --git a/ui/component/publishName/view.jsx b/ui/component/publishName/view.jsx index 55986a561..35803b294 100644 --- a/ui/component/publishName/view.jsx +++ b/ui/component/publishName/view.jsx @@ -88,7 +88,7 @@ function PublishName(props: Props) { } else if (bid < MINIMUM_PUBLISH_BID) { bidError = __('Your deposit must be higher'); } else if (totalAvailableBidAmount < bid) { - bidError = __('Deposit cannot be higher than your balance'); + bidError = __('Deposit cannot be higher than your available balance'); } else if (totalAvailableBidAmount <= bid + 0.05) { bidError = __('Please decrease your deposit to account for transaction fees or acquire more LBRY Credits.'); } diff --git a/ui/component/repostCreate/view.jsx b/ui/component/repostCreate/view.jsx index 8064f5eb8..2af537ea8 100644 --- a/ui/component/repostCreate/view.jsx +++ b/ui/component/repostCreate/view.jsx @@ -210,7 +210,7 @@ function RepostCreate(props: Props) { } else if (balance === repostBid) { rBidError = __('Please decrease your deposit to account for transaction fees'); } else if (balance < repostBid) { - rBidError = __('Deposit cannot be higher than your balance'); + rBidError = __('Deposit cannot be higher than your available balance'); } else if (repostBid < MINIMUM_PUBLISH_BID) { rBidError = __('Your deposit must be higher'); } diff --git a/ui/component/walletBalance/view.jsx b/ui/component/walletBalance/view.jsx index 91e6f31c0..420b46071 100644 --- a/ui/component/walletBalance/view.jsx +++ b/ui/component/walletBalance/view.jsx @@ -5,11 +5,11 @@ import * as PAGES from 'constants/pages'; import React from 'react'; import CreditAmount from 'component/common/credit-amount'; import Button from 'component/button'; -import Icon from 'component/common/icon'; import HelpLink from 'component/common/help-link'; import Card from 'component/common/card'; import LbcSymbol from 'component/common/lbc-symbol'; import I18nMessage from 'component/i18nMessage'; +import { formatNumberWithCommas } from 'util/number'; type Props = { balance: number, @@ -44,140 +44,124 @@ const WalletBalance = (props: Props) => { consolidatingUtxos, utxoCounts, } = props; + const [detailsExpanded, setDetailsExpanded] = React.useState(false); const { other: otherCount = 0 } = utxoCounts || {}; + const totalBalance = balance + tipsBalance + supportsBalance + claimsBalance; + React.useEffect(() => { if (balance > LARGE_WALLET_BALANCE) { doFetchUtxoCounts(); } }, [doFetchUtxoCounts, balance]); + return ( - -
-
-
- } - subtitle={__('Available Balance')} - actions={ - <> -
-
-
-
- {(otherCount > WALLET_CONSOLIDATE_UTXOS || pendingUtxoConsolidating.length || consolidatingUtxos) && ( -

- doUtxoConsolidate()} - disabled={pendingUtxoConsolidating.length || consolidatingUtxos} - label={ - pendingUtxoConsolidating.length || 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% - -

- )} - - } + } + subtitle={ + }}> + This is your total balance. Some of the %lbc% is in use on your channels and content right now. + + } + actions={ + <> +

+ }}> + %lbc_amount% available balance + +

+ +

+ , + }} + > + %lbc_amount% currently in use + +

+ {detailsExpanded && ( +
+
+
{__('... earned and bound in tips')}
+
+ +
+ +
{__('... in your publishes')}
+
+ +
+ +
{__('... in your supports')}
+
+ +
+
+
+ )} + + {/* @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 */} +
+
-
- -
- - {/* @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 */} - -
-
- -

- - - {' '} - {__('earned and bound in tips')} -

-
-
- -
-
- -
-

- - - {' '} - {__('currently staked')} -

-
-
-
{__('... in your publishes')}
-
- -
- -
{__('... in your supports')}
-
- -
-
-
-
-
-
- -
-
- + {(otherCount > WALLET_CONSOLIDATE_UTXOS || pendingUtxoConsolidating.length || consolidatingUtxos) && ( +

+ doUtxoConsolidate()} + disabled={pendingUtxoConsolidating.length || consolidatingUtxos} + label={ + pendingUtxoConsolidating.length || 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% + +

+ )} + + } + /> ); }; diff --git a/ui/modal/modalRepost/view.jsx b/ui/modal/modalRepost/view.jsx index c1eb29326..1e7a5d1b8 100644 --- a/ui/modal/modalRepost/view.jsx +++ b/ui/modal/modalRepost/view.jsx @@ -56,7 +56,7 @@ function ModalRepost(props: Props) { } else if (balance === repostBid) { repostBidError = __('Please decrease your deposit to account for transaction fees'); } else if (balance < repostBid) { - repostBidError = __('Deposit cannot be higher than your balance'); + repostBidError = __('Deposit cannot be higher than your available balance'); } else if (repostBid < MINIMUM_PUBLISH_BID) { repostBidError = __('Your deposit must be higher'); } diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx index ee8e25b67..bad237ff6 100644 --- a/ui/page/wallet/view.jsx +++ b/ui/page/wallet/view.jsx @@ -31,10 +31,10 @@ const WalletPage = (props: Props) => { {showIntro ? ( ) : ( - <> +
- +
)} )} diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss index 3d79ef5ce..130b7bab7 100644 --- a/ui/scss/component/section.scss +++ b/ui/scss/component/section.scss @@ -48,7 +48,14 @@ .section__title--small { @extend .section__title; font-size: var(--font-body); - margin-top: var(--spacing-m); + + .button { + margin-left: var(--spacing-s); + } + + &:not(:first-of-type) { + margin-top: var(--spacing-m); + } } .section__title--large { diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index 7714b5c26..5b93dcc02 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -231,7 +231,11 @@ textarea { .help--warning { @extend .help; - color: var(--color-text-help-warning); + padding: var(--spacing-s); + color: var(--color-black); + border-radius: var(--border-radius); + background-color: var(--color-help-warning-bg); + color: var(--color-help-warning-text); margin-bottom: var(--spacing-s); } diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index 98f6106b8..2f4e87d2f 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -63,7 +63,8 @@ // Text --color-text: #d8d8d8; --color-text-error: #f5748c; - --color-text-help-warning: #f5ec74; + --color-help-warning-bg: #fbbf2450; + --color-help-warning-text: white; --color-text-empty: var(--color-text-subtitle); --color-text-help: #bbbbbb; diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 65c7b1640..13f04ff37 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -43,7 +43,8 @@ --color-text-help: #999999; --color-text-subtitle: #767676; --color-text-warning: #212529; - --color-text-help-warning: #989b20; + --color-help-warning-bg: #fef3c7; + --color-help-warning-text: black; --color-text-warning--background: var(--lbry-yellow-1); --color-blockquote: var(--color-gray-3); --color-blockquote-bg: var(--color-gray-1); diff --git a/ui/util/number.js b/ui/util/number.js index e893d531d..f8a927249 100644 --- a/ui/util/number.js +++ b/ui/util/number.js @@ -1,5 +1,5 @@ // @flow -export function formatNumberWithCommas(num: number): string { - return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); +export function formatNumberWithCommas(num: number, numberOfDigits?: number): string { + return num.toLocaleString('en', { minimumFractionDigits: numberOfDigits !== undefined ? numberOfDigits : 8 }); }