From 90edd7229c2d20f7e3a944a8658b5c52505133a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Aaron?= Date: Thu, 11 Jul 2024 15:13:25 +0200 Subject: [PATCH 1/6] fix: scrollable sidebar --- frontend/src/components/layouts/AppLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/layouts/AppLayout.tsx b/frontend/src/components/layouts/AppLayout.tsx index 4dcba215..b56ff8a0 100644 --- a/frontend/src/components/layouts/AppLayout.tsx +++ b/frontend/src/components/layouts/AppLayout.tsx @@ -198,7 +198,7 @@ export default function AppLayout() {
-
+
+ + + +
+

+ Spending +

+

+ Receiving +

+
+
+
+ +
+ + {formatAmount(channel.localSpendableBalance)} sats + + + {formatAmount(channel.remoteBalance)} sats + +
+
+ +
+ + + ); + })} +
+ + ); +} diff --git a/frontend/src/components/channels/ChannelsTable.tsx b/frontend/src/components/channels/ChannelsTable.tsx new file mode 100644 index 00000000..aaf9cec2 --- /dev/null +++ b/frontend/src/components/channels/ChannelsTable.tsx @@ -0,0 +1,245 @@ +import { + ExternalLinkIcon, + HandCoins, + InfoIcon, + MoreHorizontal, + Trash2, +} from "lucide-react"; +import { ChannelWarning } from "src/components/channels/ChannelWarning"; +import ExternalLink from "src/components/ExternalLink"; +import Loading from "src/components/Loading.tsx"; +import { Badge } from "src/components/ui/badge.tsx"; +import { Button } from "src/components/ui/button.tsx"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "src/components/ui/dropdown-menu.tsx"; +import { Progress } from "src/components/ui/progress.tsx"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "src/components/ui/table.tsx"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "src/components/ui/tooltip.tsx"; +import { formatAmount } from "src/lib/utils.ts"; +import { Channel, Node } from "src/types"; + +type ChannelsTableProps = { + channels?: Channel[]; + nodes?: Node[]; + closeChannel( + channelId: string, + counterpartyNodeId: string, + isActive: boolean + ): void; + editChannel(channel: Channel): void; +}; + +export function ChannelsTable({ + channels, + nodes, + closeChannel, + editChannel, +}: ChannelsTableProps) { + if (channels && !channels.length) { + return null; + } + + return ( +
+ + + + Status + Node + Capacity + + + + +
+ Reserve + +
+ + + Funds each participant sets aside to discourage cheating by + ensuring each party has something at stake. This reserve + cannot be spent during the channel's lifetime and typically + amounts to 1% of the channel capacity. + + + + + +
+
Spending
+
Receiving
+
+ + + + + + + {channels && channels.length > 0 && ( + <> + {channels + .sort((a, b) => + a.localBalance + a.remoteBalance > + b.localBalance + b.remoteBalance + ? -1 + : 1 + ) + .map((channel) => { + const node = nodes?.find( + (n) => n.public_key === channel.remotePubkey + ); + const alias = node?.alias || "Unknown"; + const capacity = channel.localBalance + channel.remoteBalance; + + return ( + + + {channel.status == "online" ? ( + Online + ) : channel.status == "opening" ? ( + Opening + ) : ( + Offline + )} + + + {alias} + + {channel.public ? "Public" : "Private"} + + + + {formatAmount(capacity)} sats + + + {channel.localBalance < + channel.unspendablePunishmentReserve * 1000 && ( + <> + {formatAmount( + Math.min( + channel.localBalance, + channel.unspendablePunishmentReserve * 1000 + ) + )}{" "} + /{" "} + + )} + {formatAmount( + channel.unspendablePunishmentReserve * 1000 + )}{" "} + sats + + +
+ +
+ + {formatAmount(channel.localSpendableBalance)} sats + + + {formatAmount(channel.remoteBalance)} sats + +
+
+ + + + + + + + + + + + + +

View Funding Transaction

+ + + + + +

View Node on amboss.space

+ + + {channel.public && ( + editChannel(channel)} + > + + Set Routing Fee + + )} + + closeChannel( + channel.id, + channel.remotePubkey, + channel.active + ) + } + > + + Close Channel + + + + + + ); + })} + + )} + {!channels && ( + + + + + + )} + +
+
+ ); +} diff --git a/frontend/src/components/icons/AlbyHubLogo.tsx b/frontend/src/components/icons/AlbyHubLogo.tsx index abd42e0b..48a1783c 100644 --- a/frontend/src/components/icons/AlbyHubLogo.tsx +++ b/frontend/src/components/icons/AlbyHubLogo.tsx @@ -10,7 +10,7 @@ export function AlbyHubLogo(props: SVGAttributes) { xmlns="http://www.w3.org/2000/svg" {...props} > - + { - const isDesktop = useMediaQuery(desktop); + const isDesktop = useIsDesktop(); return ( {children} diff --git a/frontend/src/hooks/useMediaQuery.ts b/frontend/src/hooks/useMediaQuery.ts index 48db609e..6c3a6271 100644 --- a/frontend/src/hooks/useMediaQuery.ts +++ b/frontend/src/hooks/useMediaQuery.ts @@ -17,3 +17,8 @@ export function useMediaQuery(query: string) { return value; } + +export function useIsDesktop() { + const desktop = "(min-width: 768px)"; + return useMediaQuery(desktop); +} diff --git a/frontend/src/screens/channels/Channels.tsx b/frontend/src/screens/channels/Channels.tsx index 2bb8424d..4b180b19 100644 --- a/frontend/src/screens/channels/Channels.tsx +++ b/frontend/src/screens/channels/Channels.tsx @@ -5,18 +5,16 @@ import { Bitcoin, ChevronDown, CopyIcon, - ExternalLinkIcon, - HandCoins, Heart, Hotel, InfoIcon, - MoreHorizontal, - Trash2, Unplug, } from "lucide-react"; import React from "react"; import { Link } from "react-router-dom"; import AppHeader from "src/components/AppHeader.tsx"; +import { ChannelsCards } from "src/components/channels/ChannelsCards.tsx"; +import { ChannelsTable } from "src/components/channels/ChannelsTable.tsx"; import EmptyState from "src/components/EmptyState.tsx"; import ExternalLink from "src/components/ExternalLink"; import Loading from "src/components/Loading.tsx"; @@ -25,7 +23,6 @@ import { AlertDescription, AlertTitle, } from "src/components/ui/alert.tsx"; -import { Badge } from "src/components/ui/badge.tsx"; import { Button } from "src/components/ui/button.tsx"; import { Card, @@ -44,15 +41,7 @@ import { DropdownMenuTrigger, } from "src/components/ui/dropdown-menu.tsx"; import { LoadingButton } from "src/components/ui/loading-button.tsx"; -import { CircleProgress, Progress } from "src/components/ui/progress.tsx"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "src/components/ui/table.tsx"; +import { CircleProgress } from "src/components/ui/progress.tsx"; import { Tooltip, TooltipContent, @@ -68,11 +57,12 @@ import { useAlbyBalance } from "src/hooks/useAlbyBalance.ts"; import { useBalances } from "src/hooks/useBalances.ts"; import { useChannels } from "src/hooks/useChannels"; import { useInfo } from "src/hooks/useInfo"; +import { useIsDesktop } from "src/hooks/useMediaQuery.ts"; import { useNodeConnectionInfo } from "src/hooks/useNodeConnectionInfo.ts"; import { useRedeemOnchainFunds } from "src/hooks/useRedeemOnchainFunds.ts"; import { useSyncWallet } from "src/hooks/useSyncWallet.ts"; import { copyToClipboard } from "src/lib/clipboard.ts"; -import { cn, formatAmount } from "src/lib/utils.ts"; +import { cn } from "src/lib/utils.ts"; import { Channel, CloseChannelResponse, @@ -95,6 +85,7 @@ export default function Channels() { const { toast } = useToast(); const [drainingAlbySharedFunds, setDrainingAlbySharedFunds] = React.useState(false); + const isDesktop = useIsDesktop(); const nodeHealth = channels ? getNodeHealth(channels) : 0; @@ -656,247 +647,21 @@ export default function Channels() { /> )} - {!channels || - (channels.length > 0 && ( -
- - - - Status - Node - Capacity - - - - -
- Reserve - -
- - - Funds each participant sets aside to discourage - cheating by ensuring each party has something at - stake. This reserve cannot be spent during the - channel's lifetime and typically amounts to 1% of the - channel capacity. - - - - - -
-
Spending
-
Receiving
-
- - - - - - - {channels && channels.length > 0 && ( - <> - {channels - .sort((a, b) => - a.localBalance + a.remoteBalance > - b.localBalance + b.remoteBalance - ? -1 - : 1 - ) - .map((channel) => { - const node = nodes.find( - (n) => n.public_key === channel.remotePubkey - ); - const alias = node?.alias || "Unknown"; - const capacity = - channel.localBalance + channel.remoteBalance; - - let channelWarning = ""; - if (channel.error) { - channelWarning = channel.error; - } else { - if (channel.localSpendableBalance < capacity * 0.1) { - channelWarning = - "Spending balance low. You may have trouble sending payments through this channel."; - } - if (channel.localSpendableBalance > capacity * 0.9) { - channelWarning = - "Receiving capacity low. You may have trouble receiving payments through this channel."; - } - } - - const channelStatus = channel.active - ? "online" - : channel.confirmationsRequired !== undefined && - channel.confirmations !== undefined && - channel.confirmationsRequired > - channel.confirmations - ? "opening" - : "offline"; - if (channelStatus === "opening") { - channelWarning = `Channel is currently being opened (${channel.confirmations} of ${channel.confirmationsRequired} confirmations). Once the required confirmation are reached, you will be able to send and receive on this channel.`; - } - if (channelStatus === "offline") { - channelWarning = - "This channel is currently offline and cannot be used to send or receive payments. Please contact Alby Support for more information."; - } - - return ( - - - {channelStatus == "online" ? ( - Online - ) : channelStatus == "opening" ? ( - Opening - ) : ( - Offline - )} - - - - - - - {channel.public ? "Public" : "Private"} - - - - {formatAmount(capacity)} sats - - - {channel.localBalance < - channel.unspendablePunishmentReserve * 1000 && ( - <> - {formatAmount( - Math.min( - channel.localBalance, - channel.unspendablePunishmentReserve * - 1000 - ) - )}{" "} - /{" "} - - )} - {formatAmount( - channel.unspendablePunishmentReserve * 1000 - )}{" "} - sats - - -
- -
- - {formatAmount( - channel.localSpendableBalance - )}{" "} - sats - - - {formatAmount(channel.remoteBalance)} sats - -
-
- - - {channelWarning ? ( - - - - - - - {channelWarning} - - - - ) : null} - - - - - - - - - - -

View Funding Transaction

- - - {channel.public && ( - editChannel(channel)} - > - - Set Routing Fee - - )} - - closeChannel( - channel.id, - channel.remotePubkey, - channel.active - ) - } - > - - Close Channel - - - - - - ); - })} - - )} - {!channels && ( - - - - - - )} - -
-
- ))} + {isDesktop ? ( + + ) : ( + + )} ); } diff --git a/frontend/src/themes/alby.css b/frontend/src/themes/alby.css index db52a422..117da5ad 100644 --- a/frontend/src/themes/alby.css +++ b/frontend/src/themes/alby.css @@ -1,23 +1,35 @@ .theme-alby { --background: 0 0% 100%; --foreground: 0 0% 5%; + --card: 0 0% 100%; --card-foreground: 0 0% 5%; + --popover: 0 0% 100%; --popover-foreground: 0 0% 5%; + --primary: 47 100% 72%; --primary-foreground: 0 0% 2%; + --secondary: 0 0% 96%; --secondary-foreground: 0 0% 5%; + --muted: 0 0% 96%; --muted-foreground: 0 0% 45%; + --accent: 0 0% 96%; --accent-foreground: 0 0% 5%; + --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; + + --positive: 138, 68%, 96%; + --positive-foreground: 142 76% 36%; + --border: 0 0% 92%; --input: 0 0% 85%; --ring: 0 0% 76%; + --radius: 0.5rem; } @@ -46,6 +58,9 @@ --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; + --warning: 33 90% 96%; + --warning-foreground: 21 90% 48%; + --border: 0 0% 15%; --input: 0 0% 15%; --ring: 47 100% 40%; diff --git a/frontend/src/themes/bitcoin.css b/frontend/src/themes/bitcoin.css index eb7cd837..8799dab1 100644 --- a/frontend/src/themes/bitcoin.css +++ b/frontend/src/themes/bitcoin.css @@ -23,6 +23,12 @@ --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; + --positive: 138, 68%, 96%; + --positive-foreground: 142 76% 36%; + + --warning: 33, 90%, 96%; + --warning-foreground: 21, 90%, 48%; + --border: 0 0% 92%; --input: 0 0% 85%; --ring: 0 0% 76%; diff --git a/frontend/src/themes/default.css b/frontend/src/themes/default.css index 64a4a1bd..cef648a0 100644 --- a/frontend/src/themes/default.css +++ b/frontend/src/themes/default.css @@ -1,25 +1,37 @@ .theme-default { --background: 0 0% 100%; --foreground: 240 10% 3.9%; + --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; + + --positive: 138, 68%, 96%; + --positive-foreground: 142 76% 36%; + + --warning: 33, 90%, 96%; + --warning-foreground: 21, 90%, 48%; + --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; - --positive: 138, 68%, 96%; - --positive-foreground: 142 76% 36%; --radius: 0.5rem; } diff --git a/frontend/src/themes/nostr.css b/frontend/src/themes/nostr.css index 01b9c732..fbe5734a 100644 --- a/frontend/src/themes/nostr.css +++ b/frontend/src/themes/nostr.css @@ -23,6 +23,12 @@ --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; + --positive: 138, 68%, 96%; + --positive-foreground: 142 76% 36%; + + --warning: 33, 90%, 96%; + --warning-foreground: 21, 90%, 48%; + --border: 270 9% 87%; --input: 267 9% 81%; --ring: 273 36% 72%; diff --git a/frontend/src/types.ts b/frontend/src/types.ts index b26c4d51..a3eb7962 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -195,6 +195,7 @@ export type Channel = { unspendablePunishmentReserve: number; counterpartyUnspendablePunishmentReserve: number; error?: string; + status: "online" | "opening" | "offline"; }; export type UpdateChannelRequest = { diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index afa21e7a..f2835e2a 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -61,6 +61,10 @@ module.exports = { DEFAULT: "hsl(var(--positive))", foreground: "hsl(var(--positive-foreground))", }, + warning: { + DEFAULT: "hsl(var(--warning))", + foreground: "hsl(var(--warning-foreground))", + }, }, borderRadius: { lg: "var(--radius)", diff --git a/lnclient/ldk/ldk.go b/lnclient/ldk/ldk.go index 35bea447..0146f87e 100644 --- a/lnclient/ldk/ldk.go +++ b/lnclient/ldk/ldk.go @@ -263,6 +263,7 @@ func NewLDKService(ctx context.Context, cfg config.Config, eventPublisher events case <-time.After(MIN_SYNC_INTERVAL): ls.syncing = true // always update fee rates to avoid differences in fee rates with channel partners + logger.Logger.Info("Updating fee estimates") err = node.UpdateFeeEstimates() if err != nil { logger.Logger.WithError(err).Error("Failed to update fee estimates") diff --git a/lnclient/models.go b/lnclient/models.go index 8ff75a12..513bc49a 100644 --- a/lnclient/models.go +++ b/lnclient/models.go @@ -79,21 +79,21 @@ type LNClient interface { } type Channel struct { - LocalBalance int64 `json:"localBalance"` - LocalSpendableBalance int64 `json:"localSpendableBalance"` - RemoteBalance int64 `json:"remoteBalance"` - Id string `json:"id"` - RemotePubkey string `json:"remotePubkey"` - FundingTxId string `json:"fundingTxId"` - Active bool `json:"active"` - Public bool `json:"public"` - InternalChannel interface{} `json:"internalChannel"` - Confirmations *uint32 `json:"confirmations"` - ConfirmationsRequired *uint32 `json:"confirmationsRequired"` - ForwardingFeeBaseMsat uint32 `json:"forwardingFeeBaseMsat"` - UnspendablePunishmentReserve uint64 `json:"unspendablePunishmentReserve"` - CounterpartyUnspendablePunishmentReserve uint64 `json:"counterpartyUnspendablePunishmentReserve"` - Error *string `json:"error"` + LocalBalance int64 + LocalSpendableBalance int64 + RemoteBalance int64 + Id string + RemotePubkey string + FundingTxId string + Active bool + Public bool + InternalChannel interface{} + Confirmations *uint32 + ConfirmationsRequired *uint32 + ForwardingFeeBaseMsat uint32 + UnspendablePunishmentReserve uint64 + CounterpartyUnspendablePunishmentReserve uint64 + Error *string } type NodeStatus struct { From 6398d3ded76c7138042a7db72adda24fad898caf Mon Sep 17 00:00:00 2001 From: Roland Bewick Date: Wed, 31 Jul 2024 13:08:38 +0700 Subject: [PATCH 5/6] fix: app header content alignment --- frontend/src/components/AppHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/AppHeader.tsx b/frontend/src/components/AppHeader.tsx index 8bcb3e53..b352f05b 100644 --- a/frontend/src/components/AppHeader.tsx +++ b/frontend/src/components/AppHeader.tsx @@ -17,7 +17,7 @@ function AppHeader({ return ( <> {breadcrumb && } -
+

{title}

From e291388c21eb6bc79936d4ab2a46fc1dfb2813bf Mon Sep 17 00:00:00 2001 From: Roland Bewick Date: Wed, 31 Jul 2024 14:08:33 +0700 Subject: [PATCH 6/6] fix: menu items on settings page --- frontend/src/components/layouts/SettingsLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/layouts/SettingsLayout.tsx b/frontend/src/components/layouts/SettingsLayout.tsx index d5cf2dfe..57fac529 100644 --- a/frontend/src/components/layouts/SettingsLayout.tsx +++ b/frontend/src/components/layouts/SettingsLayout.tsx @@ -97,7 +97,7 @@ export default function SettingsLayout() { />