add immediately spendable balance inline wherever credits are used

ui/component/channelCreate/view.jsx

@@ -6,6 +6,7 @@ import Button from 'component/button';
 import analytics from 'analytics';
 import LbcSymbol from 'component/common/lbc-symbol';
 import { MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
+import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
 
 type Props = {
   balance: number,
@@ -116,9 +117,14 @@ class ChannelCreate extends React.PureComponent<Props, State> {
             step="any"
             min="0"
             type="number"
-            helper={__(
-              'These LBRY Credits remain yours. It is a deposit to reserve the name and can be undone at any time.'
-            )}
+            helper={
+              <>
+                {__(
+                  'These LBRY Credits remain yours. It is a deposit to reserve the name and can be undone at any time.'
+                )}
+                <WalletSpendableBalanceHelp inline />
+              </>
+            }
             error={newChannelBidError}
             value={newChannelBid}
             onChange={event => this.handleNewChannelBidChange(parseFloat(event.target.value))}

ui/component/channelEdit/view.jsx

@@ -19,6 +19,8 @@ import * as PAGES from 'constants/pages';
 import analytics from 'analytics';
 import LbcSymbol from 'component/common/lbc-symbol';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
+import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
+
 const LANG_NONE = 'none';
 
 const MAX_TAG_SELECT = 5;
@@ -336,7 +338,12 @@ function ChannelForm(props: Props) {
                     disabled={false}
                     onChange={event => handleBidChange(parseFloat(event.target.value))}
                     placeholder={0.1}
-                    helper={__('Increasing your deposit can help your channel be discovered more easily.')}
+                    helper={
+                      <>
+                        {__('Increasing your deposit can help your channel be discovered more easily.')}
+                        <WalletSpendableBalanceHelp inline />
+                      </>
+                    }
                   />
                 }
               />

ui/component/publishName/view.jsx

@@ -7,6 +7,7 @@ import NameHelpText from './name-help-text';
 import BidHelpText from './bid-help-text';
 import Card from 'component/common/card';
 import LbcSymbol from 'component/common/lbc-symbol';
+import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
 
 type Props = {
   name: string,
@@ -141,11 +142,14 @@ function PublishName(props: Props) {
             onChange={event => updatePublishForm({ bid: parseFloat(event.target.value) })}
             onWheel={e => e.stopPropagation()}
             helper={
-              <BidHelpText
-                uri={'lbry://' + name}
-                amountNeededForTakeover={amountNeededForTakeover}
-                isResolvingUri={isResolvingUri}
-              />
+              <>
+                <BidHelpText
+                  uri={'lbry://' + name}
+                  amountNeededForTakeover={amountNeededForTakeover}
+                  isResolvingUri={isResolvingUri}
+                />
+                <WalletSpendableBalanceHelp inline />
+              </>
             }
           />
         </React.Fragment>

ui/component/walletSend/view.jsx

@@ -8,6 +8,7 @@ import { validateSendTx } from 'util/form-validation';
 import Card from 'component/common/card';
 import I18nMessage from 'component/i18nMessage';
 import LbcSymbol from 'component/common/lbc-symbol';
+import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
 
 type DraftTransaction = {
   address: string,
@@ -105,6 +106,7 @@ class WalletSend extends React.PureComponent<Props> {
                     </span>
                   )}
                 </div>
+                <WalletSpendableBalanceHelp />
               </Form>
             )}
           />

ui/component/walletSendTip/view.jsx

@@ -15,8 +15,9 @@ import SelectChannel from 'component/selectChannel';
 import LbcSymbol from 'component/common/lbc-symbol';
 import { parseURI } from 'lbry-redux';
 import usePersistedState from 'effects/use-persisted-state';
+import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
 
-const DEFAULT_TIP_AMOUNTS = [5, 25, 100, 1000];
+const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
 
 type SupportParams = { amount: number, claim_id: string, channel_id?: string };
 
@@ -312,6 +313,7 @@ function WalletSendTip(props: Props) {
                     />
                   )}
                 </div>
+                <WalletSpendableBalanceHelp />
               </>
             )
           }

ui/component/walletSpendableBalanceHelp/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { selectBalance } from 'lbry-redux';
+import WalletSpendableBalanceHelp from './view';
+
+const select = (state, props) => ({
+  balance: selectBalance(state),
+});
+
+export default connect(select)(WalletSpendableBalanceHelp);

ui/component/walletSpendableBalanceHelp/view.jsx

@@ -0,0 +1,34 @@
+// @flow
+
+import React from 'react';
+import CreditAmount from 'component/common/credit-amount';
+import I18nMessage from 'component/i18nMessage';
+
+type Props = {
+  balance: number,
+  inline?: boolean,
+};
+
+function WalletSpendableBalanceHelp(props: Props) {
+  const { balance, inline } = props;
+
+  if (!balance) {
+    return null;
+  }
+
+  return inline ? (
+    <span className="help--spendable">
+      <I18nMessage tokens={{ balance: <CreditAmount amount={balance} precision={4} /> }}>
+        %balance% available.
+      </I18nMessage>
+    </span>
+  ) : (
+    <div className="help">
+      <I18nMessage tokens={{ balance: <CreditAmount amount={balance} precision={4} /> }}>
+        Your immediately spendable balance is %balance%.
+      </I18nMessage>
+    </div>
+  );
+}
+
+export default WalletSpendableBalanceHelp;

ui/scss/init/_gui.scss

@@ -270,6 +270,10 @@ textarea {
   margin-left: var(--spacing-s);
 }
 
+.help--spendable {
+  margin-left: var(--spacing-xxs);
+}
+
 .empty {
   color: var(--color-text-empty);
   font-style: italic;