add 'immediately spendable' balance on header balance hover

static/app-strings.json

@@ -1557,6 +1557,7 @@
   "%lbc_amount% currently in use": "%lbc_amount% currently in use",
   "View less": "View less",
   "Your total balance.": "Your total balance.",
+  "Immediately spendable": "Immediately spendable",
   "%lbc_amount% immediately spendable": "%lbc_amount% immediately spendable",
   "%lbc_amount% contributing to content": "%lbc_amount% contributing to content",
   "...earned from others": "...earned from others",

ui/component/common/icon.jsx

@@ -1,7 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import React from 'react';
-import Tooltip from 'component/common/tooltip';
 import classnames from 'classnames';
 import { icons } from './icon-custom';
 
@@ -70,6 +69,7 @@ class IconComponent extends React.PureComponent<Props> {
 
     const component = (
       <Icon
+        title={tooltipText}
         size={size || (sectionIcon ? 20 : 16)}
         className={classnames(`icon icon--${icon}`, className)}
         color={color}
@@ -77,9 +77,7 @@ class IconComponent extends React.PureComponent<Props> {
       />
     );
 
-    const inner = sectionIcon ? <span className={`icon__wrapper icon__wrapper--${icon}`}>{component}</span> : component;
+    return sectionIcon ? <span className={`icon__wrapper icon__wrapper--${icon}`}>{component}</span> : component;
-
-    return tooltipText ? <Tooltip label={tooltipText}>{inner}</Tooltip> : inner;
   }
 }
 

ui/component/fileRenderFloating/view.jsx

@@ -10,7 +10,6 @@ import UriIndicator from 'component/uriIndicator';
 import usePersistedState from 'effects/use-persisted-state';
 import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
 import Draggable from 'react-draggable';
-import Tooltip from 'component/common/tooltip';
 import { onFullscreenChange } from 'util/full-screen';
 import { useIsMobile } from 'effects/use-screensize';
 import debounce from 'util/debounce';
@@ -270,14 +269,13 @@ export default function FileRenderFloating(props: Props) {
           })}
         >
           {isFloating && (
-            <Tooltip label={__('Close')}>
+            <Button
-              <Button
+              title={__('Close')}
-                onClick={closeFloatingPlayer}
+              onClick={closeFloatingPlayer}
-                icon={ICONS.REMOVE}
+              icon={ICONS.REMOVE}
-                button="primary"
+              button="primary"
-                className="content__floating-close"
+              className="content__floating-close"
-              />
+            />
-            </Tooltip>
           )}
 
           {isReadyToPlay ? (
@@ -296,7 +294,7 @@ export default function FileRenderFloating(props: Props) {
               <div className="claim-preview__title" title={title || uri}>
                 <Button label={title || uri} navigate={uri} button="link" className="content__floating-link" />
               </div>
-              <UriIndicator link addTooltip={false} uri={uri} />
+              <UriIndicator link uri={uri} />
             </div>
           )}
         </div>

ui/component/header/index.js

@@ -1,6 +1,6 @@
 import * as MODALS from 'constants/modal_types';
 import { connect } from 'react-redux';
-import { selectTotalBalance, formatCredits, selectMyChannelClaims, SETTINGS } from 'lbry-redux';
+import { selectTotalBalance, selectBalance, 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';
@@ -13,6 +13,8 @@ import { selectHasNavigated } from 'redux/selectors/app';
 
 const select = state => ({
   language: selectLanguage(state),
+  balance: selectBalance(state),
+  roundedSpendableBalance: formatCredits(selectBalance(state), 2, true),
   roundedBalance: formatCredits(selectTotalBalance(state), 2, true),
   currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
   automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state),

ui/component/header/view.jsx

@@ -9,7 +9,6 @@ import Button from 'component/button';
 import WunderBar from 'component/wunderbar';
 import Icon from 'component/common/icon';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
-import Tooltip from 'component/common/tooltip';
 import NavigationButton from 'component/navigationButton';
 import { LOGO_TITLE } from 'config';
 import { useIsMobile } from 'effects/use-screensize';
@@ -24,7 +23,9 @@ import { IS_MAC } from 'component/app/view';
 type Props = {
   user: ?User,
   balance: string,
-  roundedBalance: number,
+  balance: number,
+  roundedBalance: string,
+  roundedSpendableBalance: string,
   history: {
     entities: {}[],
     goBack: () => void,
@@ -66,7 +67,9 @@ type Props = {
 
 const Header = (props: Props) => {
   const {
+    balance,
     roundedBalance,
+    roundedSpendableBalance,
     history,
     setClientSetting,
     currentTheme,
@@ -170,10 +173,6 @@ const Header = (props: Props) => {
     }
   }
 
-  function getWalletTitle() {
-    return hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance;
-  }
-
   const loginButtons = (
     <div className="header__auth-buttons">
       <Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Log In')} className="mobile-hidden" />
@@ -181,6 +180,26 @@ const Header = (props: Props) => {
     </div>
   );
 
+  type BalanceButtonProps = { className: string };
+  const BalanceButton = (balanceButtonProps: BalanceButtonProps) => (
+    <Button
+      title={
+        balance > 0
+          ? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
+          : __('Your Wallet')
+      }
+      navigate={`/$/${PAGES.WALLET}`}
+      className={balanceButtonProps.className}
+      label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
+      icon={ICONS.LBC}
+      // @if TARGET='app'
+      onDoubleClick={e => {
+        e.stopPropagation();
+      }}
+      // @endif
+    />
+  );
+
   return (
     <header
       className={classnames('header', {
@@ -206,18 +225,7 @@ const Header = (props: Props) => {
             />
             {backTitle && <h1 className="header__auth-title">{isMobile ? simpleBackTitle || backTitle : backTitle}</h1>}
             {authenticated || !IS_WEB ? (
-              <Button
+              <BalanceButton className="header__navigation-item menu__title header__navigation-item--balance" />
-                aria-label={__('Your wallet')}
-                navigate={`/$/${PAGES.WALLET}`}
-                className="header__navigation-item menu__title header__navigation-item--balance"
-                label={getWalletTitle()}
-                icon={ICONS.LBC}
-                // @if TARGET='app'
-                onDoubleClick={e => {
-                  e.stopPropagation();
-                }}
-                // @endif
-              />
             ) : (
               loginButtons
             )}
@@ -292,20 +300,7 @@ const Header = (props: Props) => {
             {!authHeader && !backout ? (
               <div className={classnames('header__menu', { 'header__menu--with-balance': !IS_WEB || authenticated })}>
                 {(!IS_WEB || authenticated) && (
-                  <Button
+                  <BalanceButton className="header__navigation-item menu__title header__navigation-item--balance mobile-hidden" />
-                    button="link"
-                    aria-label={__('Your wallet')}
-                    navigate={`/$/${PAGES.WALLET}`}
-                    className="header__navigation-item menu__title header__navigation-item--balance mobile-hidden"
-                    label={getWalletTitle()}
-                    icon={ICONS.LBC}
-                    iconSize={20}
-                    // @if TARGET='app'
-                    onDoubleClick={e => {
-                      e.stopPropagation();
-                    }}
-                    // @endif
-                  />
                 )}
 
                 {IS_WEB && !authenticated && loginButtons}
@@ -317,19 +312,19 @@ const Header = (props: Props) => {
                   {/* Add an empty span here so we can use the same style as above */}
                   {/* This pushes the close button to the right side */}
                   <span />
-                  <Tooltip label={__('Go Back')}>
+
-                    <Button
+                  <Button
-                      button="alt"
+                    title={__('Go Back')}
-                      // className="button--header-close"
+                    button="alt"
-                      icon={ICONS.REMOVE}
+                    // className="button--header-close"
-                      {...closeButtonNavigationProps}
+                    icon={ICONS.REMOVE}
-                      // @if TARGET='app'
+                    {...closeButtonNavigationProps}
-                      onDoubleClick={e => {
+                    // @if TARGET='app'
-                        e.stopPropagation();
+                    onDoubleClick={e => {
-                      }}
+                      e.stopPropagation();
-                      // @endif
+                    }}
-                    />
+                    // @endif
-                  </Tooltip>
+                  />
                 </div>
               )
             )}

ui/component/uriIndicator/view.jsx

@@ -3,15 +3,13 @@ import type { Node } from 'react';
 import React from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
-import Tooltip from 'component/common/tooltip';
-import ClaimPreview from 'component/claimPreview';
 
 type Props = {
   isResolvingUri: boolean,
   channelUri: ?string,
   link: ?boolean,
   claim: ?Claim,
-  addTooltip: boolean,
+
   hideAnonymous: boolean,
   // Lint thinks we aren't using these, even though we are.
   // Possibly because the resolve function is an arrow function that is passed in props?
@@ -23,10 +21,6 @@ type Props = {
 };
 
 class UriIndicator extends React.PureComponent<Props> {
-  static defaultProps = {
-    addTooltip: true,
-  };
-
   componentDidMount() {
     this.resolve(this.props);
   }
@@ -44,7 +38,7 @@ class UriIndicator extends React.PureComponent<Props> {
   };
 
   render() {
-    const { link, isResolvingUri, claim, addTooltip, children, inline, hideAnonymous = false } = this.props;
+    const { link, isResolvingUri, claim, children, inline, hideAnonymous = false } = this.props;
 
     if (!claim) {
       return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
@@ -57,7 +51,11 @@ class UriIndicator extends React.PureComponent<Props> {
         return null;
       }
 
-      return <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>Anonymous</span>;
+      return (
+        <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
+          Anonymous
+        </span>
+      );
     }
 
     const channelClaim = isChannelClaim ? claim : claim.signing_channel;
@@ -66,7 +64,11 @@ class UriIndicator extends React.PureComponent<Props> {
       const { name } = channelClaim;
       const channelLink = link ? channelClaim.canonical_url || channelClaim.permanent_url : false;
 
-      const inner = <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>{name}</span>;
+      const inner = (
+        <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
+          {name}
+        </span>
+      );
 
       if (!channelLink) {
         return inner;
@@ -75,16 +77,9 @@ class UriIndicator extends React.PureComponent<Props> {
       if (children) {
         return <Button navigate={channelLink}>{children}</Button>;
       } else {
-        const Wrapper = addTooltip
-          ? ({ children }) => (
-              <Tooltip label={<ClaimPreview uri={channelLink} type="tooltip" placeholder={false} />}>
-                {children}
-              </Tooltip>
-            )
-          : 'span';
         return (
           <Button className="button--uri-indicator" navigate={channelLink}>
-            <Wrapper>{inner}</Wrapper>
+            {inner}
           </Button>
         );
       }