Display available balance on Withdraw and OpenChannel

src/components/Form.tsx

@@ -17,12 +17,13 @@ export interface IFormProps {
   buttons: ReactNode[];
   items: IFormItem[];
   style?: StyleProp<ViewStyle>;
-  noticeText?: string;
+  noticeText?: string | Element;
+  noticeIcon?: "info" | null;
   mathPadVisible?: boolean;
   mathPadProps?: IMathPadProps;
 }
 
-export default function Form({ buttons, items, style, noticeText, mathPadProps }: IFormProps) {
+export default function Form({ buttons, items, style, noticeText, noticeIcon, mathPadProps }: IFormProps) {
   return (
     <KeyboardAvoidingView enabled={PLATFORM === "ios"} style={[styles.content, style]} behavior={"padding"} keyboardVerticalOffset={77}>
       <View style={styles.itemContainer}>
@@ -43,7 +44,7 @@ export default function Form({ buttons, items, style, noticeText, mathPadProps }
         ))}
         {noticeText &&
           <View style={styles.notice}>
-            <Icon style={styles.noticeIcon} type="AntDesign" name="exclamationcircleo" />
+            {noticeIcon == "info" && <Icon style={styles.noticeIcon} type="AntDesign" name="exclamationcircleo" />}
             <Text style={styles.noticeText}>{noticeText}</Text>
           </View>
         }

src/hooks/useFormatBitcoinValue.ts

@@ -0,0 +1,12 @@
+import { formatBitcoin } from "../utils/bitcoin-units";
+import Long from "long";
+
+import { useStoreState } from "../state/store";
+
+export default function useFormatBitcoinValue() {
+  const bitcoinUnit = useStoreState((store) => store.settings.bitcoinUnit);
+
+  return function(value: Long) {
+    return formatBitcoin(value, bitcoinUnit, false);
+  }
+}

src/windows/LightningInfo/OpenChannel.tsx

@@ -3,14 +3,16 @@ import { StyleSheet, TextInput, View } from "react-native";
 import { Text, Container, Button, Icon, Input, Spinner } from "native-base";
 import { StackNavigationProp } from "@react-navigation/stack";
 import Slider from "@react-native-community/slider";
+import Long from "long";
 
 import { LightningInfoStackParamList } from "./index";
-import { useStoreActions } from "../../state/store";
+import { useStoreActions, useStoreState } from "../../state/store";
 import BlixtForm from "../../components/Form";
 import { blixtTheme } from "../../native-base-theme/variables/commonColor";
 import useBalance from "../../hooks/useBalance";
 import { RouteProp } from "@react-navigation/native";
 import { toast } from "../../utils";
+import useFormatBitcoinValue from "../../hooks/useFormatBitcoinValue";
 
 export interface IOpenChannelProps {
   navigation: StackNavigationProp<LightningInfoStackParamList, "OpenChannel">;
@@ -23,6 +25,8 @@ export default function OpenChannel({ navigation, route }: IOpenChannelProps) {
   const [peer, setPeer] = useState(peerUri ?? "");
   const [opening, setOpening] = useState(false);
   const [feeRate, setFeeRate] = useState(0);
+  const onChainBalance = useStoreState((store) => store.onChain.balance);
+  const formatBitcoinValue = useFormatBitcoinValue();
   const slider = useRef<Slider>(null);
   const {
     dollarValue,
@@ -78,11 +82,11 @@ export default function OpenChannel({ navigation, route }: IOpenChannelProps) {
         }, {
           key: "AMOUNT",
           title: `Amount ${bitcoinUnit.nice}`,
-          component: (<Input placeholder={`Amount ${bitcoinUnit.nice}`} keyboardType="numeric" returnKeyType="done" onChangeText={onChangeBitcoinInput} value={bitcoinValue} />)
+          component: (<Input placeholder={`${formatBitcoinValue(onChainBalance)} available`} keyboardType="numeric" returnKeyType="done" onChangeText={onChangeBitcoinInput} value={bitcoinValue} />)
         }, {
           key: "AMOUNT_FIAT",
           title: `Amount ${fiatUnit}`,
-          component: (<Input placeholder={`Amount ${fiatUnit}`} keyboardType="numeric" returnKeyType="done" onChangeText={onChangeFiatInput} value={dollarValue} />)
+          component: (<Input keyboardType="numeric" returnKeyType="done" onChangeText={onChangeFiatInput} value={dollarValue} />)
         }, {
           key: "SAT",
           title: `Fee-rate`,
@@ -129,6 +133,8 @@ export default function OpenChannel({ navigation, route }: IOpenChannelProps) {
             {opening && <Spinner color={blixtTheme.light} />}
           </Button>
         ]}
+        noticeText={`${formatBitcoinValue(onChainBalance)} available`}
+        noticeIcon={Long.fromValue(onChainBalance).gt(0) ? null : "info"}
       />
     </Container>
   );

src/windows/OnChain/Withdraw.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, TextInput, View } from "react-native";
 import { Text, Container, Button, Icon, Input, Spinner } from "native-base";
 import { StackNavigationProp } from "@react-navigation/stack";
 import Slider from "@react-native-community/slider";
+import Long from "long";
 
 import { OnChainStackParamList } from "./index";
 import { useStoreActions, useStoreState } from "../../state/store";
@@ -11,6 +12,7 @@ import { blixtTheme } from "../../native-base-theme/variables/commonColor";
 import { parseBech32, toast } from "../../utils";
 import { BitcoinUnits, convertBitcoinUnit } from "../../utils/bitcoin-units";
 import useBalance from "../../hooks/useBalance";
+import useFormatBitcoinValue from "../../hooks/useFormatBitcoinValue";
 
 export interface IOpenChannelProps {
   navigation: StackNavigationProp<OnChainStackParamList, "Withdraw">;
@@ -33,6 +35,8 @@ export default ({ navigation }: IOpenChannelProps) => {
     onChangeFiatInput,
     onChangeBitcoinInput,
   } = useBalance();
+  const onChainBalance = useStoreState((store) => store.onChain.balance);
+  const formatBitcoinValue = useFormatBitcoinValue();
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -199,6 +203,8 @@ export default ({ navigation }: IOpenChannelProps) => {
             {sending && <Spinner color={blixtTheme.light} />}
           </Button>
         ]}
+        noticeText={`${formatBitcoinValue(Long.fromValue(onChainBalance))} available`}
+        noticeIcon={Long.fromValue(onChainBalance).gt(0) ? null : "info"}
       />
     </Container>
   );

src/windows/Receive/ReceiveSetup.tsx

@@ -283,6 +283,7 @@ export default function ReceiveSetup({ navigation }: IReceiveSetupProps) {
         }}
         items={formItems}
         noticeText={noticeText}
+        noticeIcon="info"
         buttons={[
          <Button
             testID="create-invoice"

src/windows/Receive/ReceiveSetupLsp.tsx

@@ -415,6 +415,7 @@ This requires a one-time fee of approximately ${approxFeeFormatted} (${approxFee
         }}
         items={formItems}
         noticeText={noticeText}
+        noticeIcon="info"
         buttons={[
          <Button
             testID="create-invoice"