diff --git a/src/windows/LightningInfo/LightningInfo.tsx b/src/windows/LightningInfo/LightningInfo.tsx
index 2de353529..9de426cb1 100644
--- a/src/windows/LightningInfo/LightningInfo.tsx
+++ b/src/windows/LightningInfo/LightningInfo.tsx
@@ -1,8 +1,9 @@
import React, { useEffect, useLayoutEffect } from "react";
-import { StyleSheet, View, ScrollView } from "react-native";
+import { StyleSheet, View } from "react-native";
import { Icon, H1, Fab, Spinner } from "native-base";
import Long from "long";
import { StackNavigationProp } from "@react-navigation/stack";
+import { FlashList } from "@shopify/flash-list";
import { LightningInfoStackParamList } from "./index";
import { useStoreState, useStoreActions } from "../../state/store";
@@ -27,14 +28,16 @@ export default function LightningInfo({ navigation }: ILightningInfoProps) {
const channels = useStoreState((store) => store.channel.channels);
const pendingOpenChannels = useStoreState((store) => store.channel.pendingOpenChannels);
const pendingClosingChannels = useStoreState((store) => store.channel.pendingClosingChannels);
- const pendingForceClosingChannels = useStoreState((store) => store.channel.pendingForceClosingChannels);
+ const pendingForceClosingChannels = useStoreState(
+ (store) => store.channel.pendingForceClosingChannels,
+ );
const waitingCloseChannels = useStoreState((store) => store.channel.waitingCloseChannels);
const getChannels = useStoreActions((store) => store.channel.getChannels);
const bitcoinUnit = useStoreState((store) => store.settings.bitcoinUnit);
const fiatUnit = useStoreState((store) => store.settings.fiatUnit);
const currentRate = useStoreState((store) => store.fiat.currentRate);
const preferFiat = useStoreState((store) => store.settings.preferFiat);
- const changePreferFiat = useStoreActions((store) => store.settings.changePreferFiat);
+ const changePreferFiat = useStoreActions((store) => store.settings.changePreferFiat);
async function getChans() {
(async () => {
@@ -55,15 +58,15 @@ export default function LightningInfo({ navigation }: ILightningInfoProps) {
useLayoutEffect(() => {
navigation.setOptions({
headerTitle: t("layout.title"),
- headerBackTitle: t("buttons.back",{ns:namespaces.common}),
+ headerBackTitle: t("buttons.back", { ns: namespaces.common }),
headerShown: true,
headerRight: () => {
return (
- )
- }
+ );
+ },
});
}, [navigation]);
@@ -75,80 +78,105 @@ export default function LightningInfo({ navigation }: ILightningInfoProps) {
// return accumulator.add(channel.localBalance!.sub(channel.localChanReserveSat!));
}, Long.fromInt(0));
- const channelCards = [
- ...pendingOpenChannels.map((pendingChannel, i) => (
-
- )),
- ...pendingClosingChannels.map((pendingChannel, i) => (
-
- )),
- ...pendingForceClosingChannels.map((pendingChannel, i) => (
-
- )),
- ...waitingCloseChannels.map((pendingChannel, i) => (
-
- )),
- ...channels.map((channel, i) => (
-
- )),
+ const channelsArr = [
+ ...pendingOpenChannels.map((pendingChannel, i) => ({ ...pendingChannel, type: "pendingOpen" })),
+ ...pendingClosingChannels.map((pendingChannel, i) => ({
+ ...pendingChannel,
+ type: "pendingClose",
+ })),
+ ...pendingForceClosingChannels.map((pendingChannel, i) => ({
+ ...pendingChannel,
+ type: "pendingForceClose",
+ })),
+ ...waitingCloseChannels.map((pendingChannel, i) => ({
+ ...pendingChannel,
+ type: "waitingForClose",
+ })),
+ ...channels.map((channel, i) => ({ ...channel, type: "open" })),
];
const onPressBalance = async () => {
await changePreferFiat(!preferFiat);
- }
+ };
return (
- {rpcReady &&
-
-
-
- {t("balance.title")}
-
-
- {preferFiat
- ? (valueFiat(balance, currentRate).toFixed(2) + " " + fiatUnit)
- : formatBitcoin(balance, bitcoinUnit)
- }
-
-
- {channelCards}
-
- }
- {!rpcReady &&
+ {rpcReady && (
+
+ {t("balance.title")}
+
+ {preferFiat
+ ? valueFiat(balance, currentRate).toFixed(2) + " " + fiatUnit
+ : formatBitcoin(balance, bitcoinUnit)}
+
+
+ }
+ data={channelsArr}
+ renderItem={(info) => {
+ if (info.item.type === "pendingOpen") {
+ return (
+
+ );
+ } else if (info.item.type === "pendingClose") {
+ return (
+
+ );
+ } else if (info.item.type === "pendingForceClose") {
+ return (
+
+ );
+ } else if (info.item.type === "waitingForClose") {
+ return (
+
+ );
+ } else if (info.item.type === "open") {
+ return (
+
+ );
+ }
+ return <>>;
+ }}
+ contentContainerStyle={style.container}
+ />
+ )}
+ {!rpcReady && (
- }
+ )}
navigation.navigate("OpenChannel", {})}>
+ onPress={() => navigation.navigate("OpenChannel", {})}
+ >
);
-};
+}
const style = StyleSheet.create({
container: {