Skip to content
This repository has been archived by the owner on Sep 2, 2024. It is now read-only.

Commit

Permalink
fix: some more styles and ux improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@reneaaron
reneaaron committed May 2, 2024
1 parent 757d12a commit ea8a03e
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 334 deletions.
110 changes: 46 additions & 64 deletions frontend/src/screens/channels/ChannelOrder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@ import { useNavigate } from "react-router-dom";
import AppHeader from "src/components/AppHeader";
import Loading from "src/components/Loading";
import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
import { Card, CardContent } from "src/components/ui/card";
import { Label } from "src/components/ui/label";
import { LoadingButton } from "src/components/ui/loading-button";
import { Separator } from "src/components/ui/separator";
import { Table, TableBody, TableCell, TableRow } from "src/components/ui/table";
import { useToast } from "src/components/ui/use-toast";
import { useCSRF } from "src/hooks/useCSRF";
Expand Down Expand Up @@ -77,6 +78,7 @@ export function PayBitcoinChannelOrder({ order }: { order: NewChannelOrder }) {
const [loading, setLoading] = React.useState(false);
const [nodeDetails, setNodeDetails] = React.useState<Node | undefined>();
const { data: csrf } = useCSRF();
const navigate = useNavigate();

const { pubkey, host } = order;

Expand Down Expand Up @@ -142,29 +144,11 @@ export function PayBitcoinChannelOrder({ order }: { order: NewChannelOrder }) {
) {
return;
}
if (
!confirm(
`Are you sure you want to peer with ${nodeDetails?.alias || pubkey}?`
)
) {
return;
}

setLoading(true);

await connectPeer();

if (
!confirm(
`Are you sure you want to open a ${order.amount} sat channel to ${
nodeDetails?.alias || pubkey
}?`
)
) {
setLoading(false);
return;
}

console.log(`🎬 Opening channel with ${pubkey}`);

const openChannelRequest: OpenChannelRequest = {
Expand All @@ -187,8 +171,9 @@ export function PayBitcoinChannelOrder({ order }: { order: NewChannelOrder }) {
if (!openChannelResponse?.fundingTxId) {
throw new Error("No funding txid in response");
}

// TODO: Success screen?
alert(`🎉 Published tx: ${openChannelResponse.fundingTxId}`);
navigate("/channels");
} catch (error) {
console.error(error);
alert("Something went wrong: " + error);
Expand All @@ -197,54 +182,51 @@ export function PayBitcoinChannelOrder({ order }: { order: NewChannelOrder }) {
}
}

const description = nodeDetails?.alias ? (
<>
Open a channel with{" "}
<span style={{ color: `${nodeDetails.color}` }}>⬤</span>{" "}
{nodeDetails.alias} ({nodeDetails.active_channel_count} channels)
</>
) : (
"Connect to other nodes on the lightning network"
);

return (
<div className="flex flex-col gap-5">
<AppHeader title="Open a channel" description={description} />
<Card>
<CardContent>
<div className="flex flex-col gap-5">
<div className="grid gap-1.5">
<h3 className="font-medium text-2xl">
<span style={{ color: `${nodeDetails?.color || "#000"}` }}>
⬤
</span>
{nodeDetails?.alias ? (
<>
{nodeDetails.alias} ({nodeDetails.active_channel_count}{" "}
channels)
</>
) : (
<>
{pubkey}
&nbsp;(? channels)
</>
)}
</h3>
</div>
<AppHeader title="Open a channel" description="Check the configuration and confirm to open the channel" />

<div className="inline">
<LoadingButton
disabled={!pubkey || !order.amount || loading}
onClick={openChannel}
loading={loading}
>
Open Channel ({new Intl.NumberFormat().format(+order.amount)}{" "}
sats)
</LoadingButton>
</div>
<div className="flex flex-col gap-5">
<div className="grid gap-1.5">
<Label>Channel peer</Label>
<div className="flex flex-row items-center">
<span style={{ color: `${nodeDetails?.color || "#000"}` }} className="mr-2">
⬤
</span>
{nodeDetails?.alias ? (
<>
{nodeDetails.alias}
<span className="ml-2 text-sm text-muted-foreground">
({nodeDetails.active_channel_count}{" "}
channels)
</span>
</>
) : (
<>
{pubkey}
&nbsp;(? channels)
</>
)}
</div>
</div>
<div className="grid gap-1.5">
<Label>Channel size</Label>
<div className="flex flex-row items-center">
{new Intl.NumberFormat().format(+order.amount)}{" "}
sats
</div>
</CardContent>
</Card>
</div>
<Separator />
<div className="inline">
<LoadingButton
disabled={!pubkey || !order.amount || loading}
onClick={openChannel}
loading={loading}
>
Confirm
</LoadingButton>
</div>
</div>
</div>
);
}
Expand Down
36 changes: 3 additions & 33 deletions frontend/src/screens/channels/Channels.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
import React from "react";
import { Link, useNavigate } from "react-router-dom";
import AppHeader from "src/components/AppHeader.tsx";
import CardButton from "src/components/CardButton.tsx";
import Loading from "src/components/Loading.tsx";
import { Badge } from "src/components/ui/badge.tsx";
import { Button } from "src/components/ui/button.tsx";
Expand All @@ -22,7 +21,6 @@ import {
CardHeader,
CardTitle,
} from "src/components/ui/card.tsx";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "src/components/ui/dialog.tsx";
import {
DropdownMenu,
DropdownMenuContent,
Expand Down Expand Up @@ -217,7 +215,6 @@ export default function Channels() {
Node
</div>
<div className="overflow-hidden text-ellipsis">
{/* TODO: replace with skeleton loader */}
{nodeConnectionInfo?.pubkey || "Loading..."}
</div>
{nodeConnectionInfo && (
Expand Down Expand Up @@ -267,33 +264,9 @@ export default function Channels() {
)}
</DropdownMenuContent>
</DropdownMenu>

<Dialog>
<DialogTrigger asChild>
<Button>Open Channel</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[640px]">
<DialogHeader>
<DialogTitle>Open a channel</DialogTitle>
</DialogHeader>
<DialogDescription>
Choose how you want to obtain a new channel.
</DialogDescription>
<div className="grid grid-flow-row gap-4">
<CardButton to="channels/migrate-alby"
title={<>
Migrate your funds from Alby <Badge>Recommended</Badge></>}
description="Use funds from your hosted Alby Account to fund your first channel." />
<CardButton to="/channels/new/instant"
title="Lightning"
description="Pay a lightning invoice to open a channel." />
<CardButton to="channels/new/onchain"
title="Onchain"
description="Send an onchain payment to open a channel." />
</div>
</DialogContent>
</Dialog>

<Link to="/channels/new">
<Button>Open Channel</Button>
</Link>
</>
}
></AppHeader>
Expand Down Expand Up @@ -380,9 +353,6 @@ export default function Channels() {
</div>
)}
</CardContent>
<CardFooter className="flex justify-end">
<Button variant="outline">Top Up</Button>
</CardFooter>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
Expand Down
Loading

0 comments on commit ea8a03e

Please sign in to comment.