New pop-over picker for channel card and startup

locales/en.json

@@ -298,7 +298,11 @@
       "maturityHeight": "Maturity height",
       "localCommitmentTxid": "Local commitment TXID",
       "remoteCommitmentTxid": "Remote commitment TXID",
-      "closeChannel": "Close channel",
+      "enterDeliveryAddress": "Enter Closing Address",
+      "invalidAddress": "Enter a valid Bitcoin Address",
+      "closeChannel": "Close Channel",
+      "forceCloseChannel": "Force Close Channel",
+      "closeChannelToAddress": "Close Channel to External Address",
       "forceClosePendingChannel": "Force Close Pending Channel",
       "forceCloseDelay": "Force closure delay",
       "closeChannelPrompt": {

package.json

@@ -130,10 +130,10 @@
     "react-native-linear-gradient": "^2.8.3",
     "react-native-macos": "0.73.26",
     "react-native-maps": "1.15.6",
-    "react-native-material-menu": "^2.0.0",
     "react-native-modal": "^13.0.1",
     "react-native-paper": "5.12.3",
     "react-native-permissions": "^3.10.1",
+    "react-native-popup-menu": "^0.16.1",
     "react-native-push-notification": "8.1.1",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-reanimated": "github:software-mansion/react-native-reanimated#fff280c91aecde1ef54e0975f959aa05d407aba3",

src/App.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { StyleProvider, Root } from "native-base";
 import { DefaultTheme, NavigationContainer, Theme } from "@react-navigation/native";
 import { StoreProvider } from "easy-peasy";
+import { MenuProvider } from "react-native-popup-menu";
 
 import Main from "./Main";
 import DEV_Commands from "./windows/InitProcess/DEV_Commands";
@@ -43,9 +44,11 @@ export default function App() {
           documentTitle={{ enabled: false }}
           ref={navigator}
         >
-          <Root>
-            {debug ? <DEV_Commands continueCallback={() => setDebug(false)} /> : <Main />}
-          </Root>
+          <MenuProvider>
+            <Root>
+              {debug ? <DEV_Commands continueCallback={() => setDebug(false)} /> : <Main />}
+            </Root>
+          </MenuProvider>
         </NavigationContainer>
       </StyleProvider>
     </StoreProvider>

src/components/ChannelCard.tsx

@@ -1,21 +1,24 @@
 import * as nativeBaseTheme from "../native-base-theme/variables/commonColor";
 
-import { Alert, Image, Linking, StyleSheet } from "react-native";
-import { Body, Button, Card, CardItem, Left, Right, Row, Text } from "native-base";
+import { Image, Linking, StyleSheet } from "react-native";
+import { Body, Card, CardItem, Icon, Left, Right, Row, Text, View } from "native-base";
 import { Line, Svg } from "react-native-svg";
+import { Menu, MenuOptions, MenuOption, MenuTrigger } from "react-native-popup-menu";
 import { getUnitNice, valueBitcoin, valueFiat } from "../utils/bitcoin-units";
 import { identifyService, lightningServices } from "../utils/lightning-services";
 import { useStoreActions, useStoreState } from "../state/store";
 
 import BigNumber from "bignumber.js";
 import CopyText from "./CopyText";
 import Long from "long";
-import React from "react";
+import React, { useState } from "react";
 import { constructOnchainExplorerUrl } from "../utils/onchain-explorer";
 import { lnrpc } from "../../proto/lightning";
 import { namespaces } from "../i18n/i18n.constants";
 import { toast } from "../utils";
 import { useTranslation } from "react-i18next";
+import { Alert } from "../utils/alert";
+import { PLATFORM } from "../utils/constants";
 
 const blixtTheme = nativeBaseTheme.blixtTheme;
 
@@ -36,7 +39,33 @@ export function ChannelCard({ channel, alias }: IChannelCardProps) {
   const preferFiat = useStoreState((store) => store.settings.preferFiat);
   const onchainExplorer = useStoreState((store) => store.settings.onchainExplorer);
 
-  const close = (force: boolean = false) => {
+  const closeWithAddress = async () => {
+    Alert.prompt(
+      t("channel.enterDeliveryAddress"),
+      "Enter the external Bitcoin address where you want your funds to be deposited.",
+      [
+        {
+          style: "cancel",
+          text: "No",
+        },
+        {
+          style: "default",
+          text: "Ok",
+          onPress: (address) => {
+            if (!address || address.trim().length === 0) {
+              toast(t("channel.invalidAddress"), undefined, "danger");
+              return;
+            }
+            close(false, address);
+          },
+        },
+      ],
+      "plain-text",
+      "",
+    );
+  };
+
+  const close = (force: boolean = false, address: string | undefined) => {
     Alert.alert(
       t("channel.closeChannelPrompt.title"),
       `Are you sure you want to${force ? " force" : ""} close the channel${
@@ -51,33 +80,43 @@ export function ChannelCard({ channel, alias }: IChannelCardProps) {
           style: "default",
           text: "Yes",
           onPress: async () => {
-            const result = await closeChannel({
-              fundingTx: channel.channelPoint!.split(":")[0],
-              outputIndex: Number.parseInt(channel.channelPoint!.split(":")[1], 10),
-              force,
-            });
-            console.log(result);
+            try {
+              const result = await closeChannel({
+                fundingTx: channel.channelPoint!.split(":")[0],
+                outputIndex: Number.parseInt(channel.channelPoint!.split(":")[1], 10),
+                force,
+                deliveryAddress: address,
+              });
+              console.log(result);
 
-            setTimeout(async () => {
-              await getChannels(undefined);
-            }, 3000);
+              setTimeout(async () => {
+                await getChannels(undefined);
+              }, 3000);
 
-            if (autopilotEnabled) {
-              Alert.alert(
-                "Autopilot",
-                "Automatic channel opening is enabled, " +
-                  "new on-chain funds will automatically go to a new channel unless you disable it.\n\n" +
-                  "Do you wish to disable automatic channel opening?",
-                [
-                  { text: "No" },
-                  {
-                    text: "Yes",
-                    onPress: async () => {
-                      changeAutopilotEnabled(false);
-                      setupAutopilot(false);
+              if (autopilotEnabled) {
+                Alert.alert(
+                  "Autopilot",
+                  "Automatic channel opening is enabled, " +
+                    "new on-chain funds will automatically go to a new channel unless you disable it.\n\n" +
+                    "Do you wish to disable automatic channel opening?",
+                  [
+                    { text: "No" },
+                    {
+                      text: "Yes",
+                      onPress: async () => {
+                        changeAutopilotEnabled(false);
+                        setupAutopilot(false);
+                      },
                     },
-                  },
-                ],
+                  ],
+                );
+              }
+            } catch (error: any) {
+              toast(
+                t("msg.error", { ns: namespaces.common }) + ": " + error.message,
+                0,
+                "danger",
+                "OK",
               );
             }
           },
@@ -128,6 +167,38 @@ export function ChannelCard({ channel, alias }: IChannelCardProps) {
     <Card style={style.channelCard}>
       <CardItem style={style.channelDetail}>
         <Body>
+          <Row
+            style={{
+              width: "100%",
+              marginBottom: PLATFORM === "ios" || PLATFORM === "macos" ? 10 : 0,
+            }}
+          >
+            <Right>
+              <Menu>
+                <MenuTrigger>
+                  <Icon type="Entypo" name="dots-three-horizontal" style={{}} />
+                </MenuTrigger>
+                <MenuOptions customStyles={menuOptionsStyles}>
+                  <MenuOption
+                    onSelect={onPressViewInExplorer}
+                    text={t("generic.viewInBlockExplorer", { ns: namespaces.common })}
+                  />
+                  <MenuOption
+                    onSelect={() => close(false, undefined)}
+                    text={t("channel.closeChannel")}
+                  />
+                  <MenuOption
+                    onSelect={() => close(true, undefined)}
+                    text={t("channel.forceCloseChannel")}
+                  />
+                  <MenuOption
+                    onSelect={() => closeWithAddress()}
+                    text={t("channel.closeChannelToAddress")}
+                  />
+                </MenuOptions>
+              </Menu>
+            </Right>
+          </Row>
           {alias && (
             <Row style={{ width: "100%" }}>
               <Left style={{ alignSelf: "flex-start" }}>
@@ -398,28 +469,6 @@ export function ChannelCard({ channel, alias }: IChannelCardProps) {
               </Right>
             </Row>
           )}
-          <Row style={{ width: "100%" }}>
-            <Left style={{ flexDirection: "row" }}>
-              <Button
-                style={{ marginTop: 14 }}
-                danger={true}
-                small={true}
-                onPress={() => close(false)}
-                onLongPress={() => close(true)}
-              >
-                <Text style={{ fontSize: 8 }}>{t("channel.closeChannel")}</Text>
-              </Button>
-              <Button
-                style={{ marginTop: 14, marginLeft: 10 }}
-                small={true}
-                onPress={onPressViewInExplorer}
-              >
-                <Text style={{ fontSize: 8 }}>
-                  {t("generic.viewInBlockExplorer", { ns: namespaces.common })}
-                </Text>
-              </Button>
-            </Left>
-          </Row>
         </Body>
       </CardItem>
     </Card>
@@ -428,12 +477,35 @@ export function ChannelCard({ channel, alias }: IChannelCardProps) {
 
 export default ChannelCard;
 
+const menuOptionsStyles = {
+  optionsContainer: {
+    padding: 5,
+    borderRadius: 5,
+    shadowColor: blixtTheme.dark,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    backgroundColor: blixtTheme.light,
+  },
+  optionWrapper: {
+    padding: 5,
+  },
+  optionText: {
+    fontSize: 16,
+    color: blixtTheme.dark,
+  },
+};
+
 export const style = StyleSheet.create({
   channelCard: {
     width: "100%",
     marginTop: 8,
+    paddingBottom: 16,
+  },
+  channelDetail: {
+    paddingTop: 8, // Add padding to the top of the detail section
   },
-  channelDetail: {},
   channelDetails: {
     fontSize: 16,
   },
@@ -448,4 +520,9 @@ export const style = StyleSheet.create({
     marginTop: -2.5,
     marginBottom: 4,
   },
+  menuIconContainer: {},
+  menuIcon: {
+    fontSize: 35,
+    color: blixtTheme.light,
+  },
 });

src/lndmobile/channel.ts

@@ -82,6 +82,7 @@ export const closeChannel = async (
   fundingTxId: string,
   outputIndex: number,
   force: boolean,
+  deliveryAddress?: string,
 ): Promise<string> => {
   const response = await sendStreamCommand<lnrpc.ICloseChannelRequest, lnrpc.CloseChannelRequest>(
     {
@@ -93,6 +94,7 @@ export const closeChannel = async (
           outputIndex,
         },
         force,
+        deliveryAddress,
       },
     },
     false,

src/state/Channel.ts

@@ -39,6 +39,7 @@ export interface ICloseChannelPayload {
   fundingTx: string;
   outputIndex: number;
   force: boolean;
+  deliveryAddress?: string;
 }
 
 export interface ISetPendingChannelsPayload {
@@ -402,9 +403,13 @@ export const channel: IChannelModel = {
   ),
 
   closeChannel: thunk(
-    async (_, { fundingTx, outputIndex, force }, { injections, getStoreActions }) => {
+    async (
+      _,
+      { fundingTx, outputIndex, force, deliveryAddress },
+      { injections, getStoreActions },
+    ) => {
       const closeChannel = injections.lndMobile.channel.closeChannel;
-      const result = await closeChannel(fundingTx, outputIndex, force);
+      const result = await closeChannel(fundingTx, outputIndex, force, deliveryAddress);
       getStoreActions().onChain.addToTransactionNotificationBlacklist(fundingTx);
       log.d("closeChannel", [result]);
       return result;

src/state/LndMobileInjection.ts

@@ -162,7 +162,12 @@ export interface ILndMobileInjections {
       accept: boolean,
       zeroConf?: boolean,
     ) => Promise<void>;
-    closeChannel: (fundingTxId: string, outputIndex: number, force: boolean) => Promise<string>;
+    closeChannel: (
+      fundingTxId: string,
+      outputIndex: number,
+      force: boolean,
+      deliveryAddress?: string,
+    ) => Promise<string>;
     listChannels: () => Promise<lnrpc.ListChannelsResponse>;
     openChannel: (
       pubkey: string,