+
+
+
+
+
+
+
+
+
+ {prompt}{text}
+ ) + } else if (isSuccess) { + return ( +{prompt}{text}
+ ) + } else { + return{prompt}{text}
+ } +} + +export default FeedbackConsoleLine; diff --git a/ui/src/components/status/ChannelDisplay.tsx b/ui/src/components/status/ChannelDisplay.tsx new file mode 100644 index 00000000..37e73c50 --- /dev/null +++ b/ui/src/components/status/ChannelDisplay.tsx @@ -0,0 +1,110 @@ +import React, { useContext, useMemo } from 'react'; +import { ChannelContext } from '../../contexts/ChannelContext'; +import Channel, { ChannelStatus } from '../../types/Channel'; + +const ChannelDisplay: React.FC = () => { + const { channelsByStatus, channels } = useContext(ChannelContext); + + const getStatusSortPriority = (status: ChannelStatus) => { + switch (status) { + case ChannelStatus.Open: + return 1; + case ChannelStatus.ForceClosing: + return 2; + case ChannelStatus.Closing: + return 3; + case ChannelStatus.Shutdown: + return 4; + case ChannelStatus.Funded: + return 5; + case ChannelStatus.Opening: + return 6; + case ChannelStatus.Preopening: + return 7; + case ChannelStatus.Closed: + return 8; + case ChannelStatus.Redeemed: + return 9; + } + } + + const compareChannels = (a: Channel, b: Channel) => { + // Group by status + if (a.status !== b.status) { + return getStatusSortPriority(a.status) - getStatusSortPriority(b.status); + } + // Order within status by liquidity + const aLiquidity = a.our.add(a.his); + const bLiquidity = b.our.add(b.his); + if (aLiquidity.gt(bLiquidity)) { + return -1; + } else if (bLiquidity.gt(aLiquidity)) { + return 1; + // Order by channel partner ship as fallback + } else if (a.who !== b.who) { + return a.who.localeCompare(b.who); + // Order by channel id as fallback + } else {{ + return a.id.localeCompare(b.id); + }} + } + + const notOpenChannels = useMemo(() => { + return channels + .filter((channel) => channel.status !== ChannelStatus.Open) + .sort(compareChannels) + }, [channels]); + + const openChannels = useMemo(() => { + return channelsByStatus.open.sort(compareChannels) + }, [channelsByStatus]); + + const headerClassnames = 'text-center font-normal w-1/4'; + const rowClassnames = 'text-center text-gray-500 font-normal w-1/4'; + const closedRowClassnames = 'text-center font-normal text-gray-400 w-1/4'; + + return ( + <> +| Partner | +Ours | +Theirs | +Status | +
|---|---|---|---|
| ~{channel.who} | +{channel.our.displayAsSats()} | +{channel.his.displayAsSats()} | +{channel.status.toUpperCase()} | + +
| ~{channel.who} | +{channel.our.displayAsSats()} | +{channel.his.displayAsSats()} | +{channel.status.toUpperCase()} | +