src/component/channelSelector/view.js

@@ -252,11 +252,12 @@ export default class ChannelSelector extends React.PureComponent {
                 underlineColorAndroid={Colors.NextLbryGreen}
               />
               <Text style={channelSelectorStyle.currency}>LBC</Text>
-              <Text style={channelSelectorStyle.balance}>
+              <View style={channelSelectorStyle.balance}>
-                {this.state.creditsInputFocused
+                {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
-                  ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+                {this.state.creditsInputFocused && (
-                  : ''}
+                  <Text style={channelSelectorStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
-              </Text>
+                )}
+              </View>
             </View>
             <Text style={channelSelectorStyle.helpText}>
               {__('This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.')}

src/component/walletSend/view.js

@@ -4,6 +4,7 @@ import { formatCredits, regexAddress } from 'lbry-redux';
 import { Alert, Clipboard, TextInput, Text, View } from 'react-native';
 import Button from 'component/button';
 import Colors from 'styles/colors';
+import Icon from 'react-native-vector-icons/FontAwesome5';
 import walletStyle from 'styles/wallet';
 
 type DraftTransaction = {
@@ -128,11 +129,12 @@ class WalletSend extends React.PureComponent<Props> {
               style={[walletStyle.input, walletStyle.amountInput]}
             />
             <Text style={[walletStyle.text, walletStyle.currency]}>LBC</Text>
-            <Text style={walletStyle.balanceFocus}>
+            <View style={walletStyle.balanceFocus}>
-              {this.state.creditsInputFocused
+              {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
-                ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+              {this.state.creditsInputFocused && (
-                : ''}
+                <Text style={walletStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
-            </Text>
+              )}
+            </View>
           </View>
           <Button
             text={__('Send')}

src/page/channelCreator/view.js

@@ -968,11 +968,12 @@ export default class ChannelCreator extends React.PureComponent {
                   underlineColorAndroid={Colors.NextLbryGreen}
                 />
                 <Text style={channelCreatorStyle.currency}>LBC</Text>
-                <Text style={channelCreatorStyle.balance}>
+                <View style={channelCreatorStyle.balance}>
-                  {this.state.creditsInputFocused
+                  {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
-                    ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+                  {this.state.creditsInputFocused && (
-                    : ''}
+                    <Text style={channelCreatorStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
-                </Text>
+                  )}
+                </View>
               </View>
               <Text style={channelCreatorStyle.helpText}>
                 {__('This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.')}

src/page/file/view.js

@@ -1174,11 +1174,12 @@ class FilePage extends React.PureComponent {
                           style={[filePageStyle.input, filePageStyle.tipAmountInput]}
                         />
                         <Text style={[filePageStyle.text, filePageStyle.currency]}>LBC</Text>
-                        <Text style={filePageStyle.balance}>
+                        <View style={filePageStyle.balance}>
-                          {this.state.creditsInputFocused
+                          {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
-                            ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+                          {this.state.creditsInputFocused && (
-                            : ''}
+                            <Text style={filePageStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
-                        </Text>
+                          )}
+                        </View>
                       </View>
                       {this.state.sendTipStarted && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
                       <Link

src/page/publish/view.js

@@ -1139,11 +1139,12 @@ class PublishPage extends React.PureComponent {
                 onBlur={() => this.setState({ creditsInputFocused: false })}
               />
               <Text style={publishStyle.currency}>LBC</Text>
-              <Text style={publishStyle.balance}>
+              <View style={publishStyle.balance}>
-                {this.state.creditsInputFocused
+                {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
-                  ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+                {this.state.creditsInputFocused && (
-                  : ''}
+                  <Text style={publishStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
-              </Text>
+                )}
+              </View>
             </View>
             <Text style={publishStyle.helpText}>
               {__('This LBC remains yours and the deposit can be undone at any time.')}

src/styles/channelCreator.js

@@ -31,9 +31,14 @@ const channelCreatorStyle = StyleSheet.create({
     fontSize: 16,
   },
   balance: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
   channelNameInput: {
     fontFamily: 'Inter-UI-Regular',

src/styles/channelSelector.js

@@ -25,9 +25,14 @@ const channelSelectorStyle = StyleSheet.create({
     fontSize: 16,
   },
   balance: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
   channelNameInput: {
     fontFamily: 'Inter-UI-Regular',

src/styles/filePage.js

@@ -447,9 +447,14 @@ const filePageStyle = StyleSheet.create({
     marginTop: 16,
   },
   balance: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
 });
 

src/styles/publish.js

@@ -467,9 +467,14 @@ const publishStyle = StyleSheet.create({
     fontSize: 12,
   },
   balance: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
 });
 

src/styles/wallet.js

@@ -127,9 +127,14 @@ const walletStyle = StyleSheet.create({
     marginBottom: 16,
   },
   balanceFocus: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
   infoText: {
     color: '#aaaaaa',