Skip to content

Commit

Permalink
Channels: replace toggle header with tab nav
Browse files Browse the repository at this point in the history
  • Loading branch information
kaloudis committed Nov 24, 2024
1 parent f28aae3 commit e996016
Showing 3 changed files with 145 additions and 86 deletions.
36 changes: 2 additions & 34 deletions components/WalletHeader.tsx
Original file line number Diff line number Diff line change
@@ -23,7 +23,6 @@ import NodeInfoStore from '../stores/NodeInfoStore';
import PosStore from '../stores/PosStore';
import SyncStore from '../stores/SyncStore';

import Button from '../components/Button';
import Header from './Header';
import LoadingIndicator from '../components/LoadingIndicator';
import NodeIdenticon from '../components/NodeIdenticon';
@@ -207,7 +206,6 @@ interface WalletHeaderProps {
loading?: boolean;
title?: string;
channels?: boolean;
toggle?: () => void;
}

interface WalletHeaderState {
@@ -255,7 +253,6 @@ export default class WalletHeader extends React.Component<
loading,
title,
channels,
toggle,
AlertStore,
SettingsStore,
NodeInfoStore,
@@ -265,7 +262,7 @@ export default class WalletHeader extends React.Component<
PosStore,
SyncStore
} = this.props;
const { filteredPendingChannels, pendingHTLCs } = ChannelsStore!;
const { pendingHTLCs } = ChannelsStore!;
const { settings, posStatus, setPosStatus, implementation } =
SettingsStore!;
const { paid, redeemingAll } = LightningAddressStore!;
@@ -517,36 +514,7 @@ export default class WalletHeader extends React.Component<
centerComponent={
title ? (
<View style={{ flex: 1 }}>
{toggle ? (
<View
style={{ flex: 1, width: '100%' }}
accessibilityLiveRegion="polite"
>
<Button
onPress={() => toggle()}
title={title}
noUppercase
buttonStyle={{
alignSelf: 'center',
height: 40
}}
icon={
filteredPendingChannels?.length > 0
? {
name: 'clockcircle',
type: 'antdesign',
size: 20,
color: themeColor(
'background'
)
}
: null
}
/>
</View>
) : (
<Body bold>{title}</Body>
)}
<Body bold>{title}</Body>
</View>
) : settings.display && settings.display.displayNickname ? (
<View style={{ top: 0 }}>
5 changes: 3 additions & 2 deletions locales/en.json
Original file line number Diff line number Diff line change
@@ -341,8 +341,9 @@
"views.Wallet.Wallet.invoices": "Invoices",
"views.Wallet.Wallet.onchain": "On-chain",
"views.Wallet.Wallet.channels": "Channels",
"views.Wallet.Wallet.pendingChannels": "Pending Channels",
"views.Wallet.Wallet.closedChannels": "Closed Channels",
"views.Wallet.Wallet.open": "Open",
"views.Wallet.Wallet.pending": "Pending",
"views.Wallet.Wallet.closed": "Closed",
"views.Wallet.Wallet.startingUp": "Zeus is starting up.",
"views.Wallet.Wallet.connecting": "Zeus is connecting to your node.",
"views.Wallet.Wallet.loadingAccount": "Zeus is loading your account.",
190 changes: 140 additions & 50 deletions views/Channels/ChannelsPane.tsx
Original file line number Diff line number Diff line change
@@ -15,16 +15,26 @@ import { StackNavigationProp } from '@react-navigation/stack';
import { ChannelsHeader } from '../../components/Channels/ChannelsHeader';
import { ChannelItem } from '../../components/Channels/ChannelItem';
import ChannelsFilter from '../../components/Channels/ChannelsFilter';

import LoadingIndicator from '../../components/LoadingIndicator';
import WalletHeader from '../../components/WalletHeader';
import { Spacer } from '../../components/layout/Spacer';
import Screen from '../../components/Screen';

// nav
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
DefaultTheme,
NavigationContainer,
NavigationContainerRef,
NavigationIndependentTree
} from '@react-navigation/native';

import ChannelsStore, { ChannelsType } from '../../stores/ChannelsStore';
import SettingsStore from '../../stores/SettingsStore';

import BackendUtils from '../../utils/BackendUtils';
import { localeString } from '../../utils/LocaleUtils';
import { themeColor } from '../../utils/ThemeUtils';

import Channel from '../../models/Channel';

@@ -86,6 +96,8 @@ const ColorChangingButton = ({ onPress }: { onPress: () => void }) => {
@inject('ChannelsStore', 'SettingsStore')
@observer
export default class ChannelsPane extends React.PureComponent<ChannelsProps> {
private tabNavigationRef = React.createRef<NavigationContainerRef<any>>();

renderItem = ({ item }: { item: Channel }) => {
const { ChannelsStore, navigation } = this.props;
const { largestChannelSats, channelsType } = ChannelsStore!;
@@ -157,30 +169,13 @@ export default class ChannelsPane extends React.PureComponent<ChannelsProps> {
);
};

toggleChannelsType = () => {
const { ChannelsStore } = this.props;
const { channelsType } = ChannelsStore!;

let newType = ChannelsType.Open;
switch (channelsType) {
case ChannelsType.Open:
newType = ChannelsType.Pending;
break;
case ChannelsType.Pending:
newType = ChannelsType.Closed;
break;

default:
newType = ChannelsType.Open;
}
ChannelsStore!.setChannelsType(newType);
};

updateSearch = (value: string) => {
this.props.ChannelsStore!.setSearch(value);
};

render() {
const Tab = createBottomTabNavigator();

const { ChannelsStore, SettingsStore, navigation } = this.props;
const {
loading,
@@ -191,46 +186,96 @@ export default class ChannelsPane extends React.PureComponent<ChannelsProps> {
filteredChannels,
filteredPendingChannels,
filteredClosedChannels,
showSearch,
channelsType
showSearch
} = ChannelsStore!;

const { settings } = SettingsStore!;

let headerString;
let channelsData: Channel[];
switch (channelsType) {
case ChannelsType.Open:
headerString = `${localeString(
'views.Wallet.Wallet.channels'
)} (${filteredChannels?.length || 0})`;
channelsData = filteredChannels;
break;
case ChannelsType.Pending:
headerString = `${localeString(
'views.Wallet.Wallet.pendingChannels'
)} (${filteredPendingChannels?.length || 0})`;
channelsData = filteredPendingChannels;
break;
case ChannelsType.Closed:
headerString = `${localeString(
'views.Wallet.Wallet.closedChannels'
)} (${filteredClosedChannels?.length || 0})`;
channelsData = filteredClosedChannels;
break;
}
const Theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: themeColor('background'),
card: themeColor('background'),
border: themeColor('background')
}
};

const OpenChannelsScreen = () => {
return (
<Screen>
<FlatList
data={filteredChannels}
renderItem={this.renderItem}
ListFooterComponent={<Spacer height={100} />}
onRefresh={() => getChannels()}
refreshing={loading}
keyExtractor={(item, index) =>
`${item.remote_pubkey}-${index}`
}
/>
</Screen>
);
};

const PendingChannelsScreen = () => {
return (
<Screen>
<FlatList
data={filteredPendingChannels}
renderItem={this.renderItem}
ListFooterComponent={<Spacer height={100} />}
onRefresh={() => getChannels()}
refreshing={loading}
keyExtractor={(item, index) =>
`${item.remote_pubkey}-${index}`
}
/>
</Screen>
);
};

const ClosedChannelsScreen = () => {
return (
<Screen>
<FlatList
data={filteredClosedChannels}
renderItem={this.renderItem}
ListFooterComponent={<Spacer height={100} />}
onRefresh={() => getChannels()}
refreshing={loading}
keyExtractor={(item, index) =>
`${item.remote_pubkey}-${index}`
}
/>
</Screen>
);
};

const openChannelsTabName = `${localeString(
'views.Wallet.Wallet.open'
)} (${filteredChannels?.length || 0})`;

const pendingChannelsTabName = `${localeString(
'views.Wallet.Wallet.pending'
)} (${filteredPendingChannels?.length || 0})`;

const closedChannelsTabName = `${localeString(
'views.Wallet.Wallet.closed'
)} (${filteredClosedChannels?.length || 0})`;

return (
<View style={{ flex: 1 }}>
<WalletHeader
navigation={navigation}
title={headerString}
channels
toggle={
title={
BackendUtils.supportsPendingChannels()
? this.toggleChannelsType
: undefined
? localeString('views.Wallet.Wallet.channels')
: `${localeString(
'views.Wallet.Wallet.channels'
)} (${filteredChannels?.length || 0})`
}
channels
/>
<ChannelsHeader
totalInbound={totalInbound}
@@ -251,9 +296,54 @@ export default class ChannelsPane extends React.PureComponent<ChannelsProps> {
<View style={{ marginTop: 40 }}>
<LoadingIndicator />
</View>
) : BackendUtils.supportsPendingChannels() ? (
<NavigationIndependentTree>
<NavigationContainer
theme={Theme}
ref={this.tabNavigationRef}
>
<Tab.Navigator
initialRouteName={openChannelsTabName}
backBehavior="none"
screenOptions={() => ({
tabBarIcon: () => {
return null;
},
headerShown: false,
tabBarActiveTintColor: themeColor('text'),
tabBarInactiveTintColor: 'gray',
tabBarShowLabel: true,
tabBarStyle: {
borderTopWidth: 0.2,
borderTopColor:
themeColor('secondaryText'),
marginBottom: 20
},
tabBarLabelStyle: {
fontSize: 18,
fontFamily: 'PPNeueMontreal-Medium'
},
animation: 'shift'
})}
>
<Tab.Screen
name={openChannelsTabName}
component={OpenChannelsScreen}
/>
<Tab.Screen
name={pendingChannelsTabName}
component={PendingChannelsScreen}
/>
<Tab.Screen
name={closedChannelsTabName}
component={ClosedChannelsScreen}
/>
</Tab.Navigator>
</NavigationContainer>
</NavigationIndependentTree>
) : (
<FlatList
data={channelsData}
data={filteredChannels}
renderItem={this.renderItem}
ListFooterComponent={<Spacer height={100} />}
onRefresh={() => getChannels()}

0 comments on commit e996016

Please sign in to comment.