Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Channels: replace toggle header with tab nav #2561

Merged
merged 1 commit into from
Nov 24, 2024
Merged

Channels: replace toggle header with tab nav #2561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 2 additions & 34 deletions components/WalletHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -207,7 +206,6 @@ interface WalletHeaderProps {
loading?: boolean;
title?: string;
channels?: boolean;
toggle?: () => void;
}

interface WalletHeaderState {
Expand Down Expand Up @@ -255,7 +253,6 @@ export default class WalletHeader extends React.Component<
loading,
title,
channels,
toggle,
AlertStore,
SettingsStore,
NodeInfoStore,
Expand All @@ -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!;
Expand Down Expand Up @@ -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 }}>
Expand Down
5 changes: 3 additions & 2 deletions locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
190 changes: 140 additions & 50 deletions views/Channels/ChannelsPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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!;
Expand Down Expand Up @@ -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,
Expand All @@ -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}
Expand All @@ -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()}
Expand Down
Loading