Skip to content

Commit

Permalink
fix: swap out dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@reneaaron
reneaaron committed Jan 7, 2025
1 parent 4331e19 commit f77258d
Showing 1 changed file with 166 additions and 98 deletions.
264 changes: 166 additions & 98 deletions frontend/src/screens/channels/Channels.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,15 @@ import {
CardHeader,
CardTitle,
} from "src/components/ui/card.tsx";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "src/components/ui/dialog";
import {
DropdownMenu,
DropdownMenuContent,
Expand All @@ -44,6 +53,8 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "src/components/ui/dropdown-menu.tsx";
import { Input } from "src/components/ui/input";
import { Label } from "src/components/ui/label";
import { CircleProgress } from "src/components/ui/progress.tsx";
import {
Tooltip,
Expand All @@ -61,10 +72,12 @@ import { useBalances } from "src/hooks/useBalances.ts";
import { useChannels } from "src/hooks/useChannels";
import { useIsDesktop } from "src/hooks/useMediaQuery.ts";
import { useNodeConnectionInfo } from "src/hooks/useNodeConnectionInfo.ts";
import { useOnchainAddress } from "src/hooks/useOnchainAddress";
import { useSyncWallet } from "src/hooks/useSyncWallet.ts";
import { copyToClipboard } from "src/lib/clipboard.ts";
import { cn } from "src/lib/utils.ts";
import { Channel, Node } from "src/types";
import { openLink } from "src/utils/openLink";
import { request } from "src/utils/request";

export default function Channels() {
Expand All @@ -75,6 +88,8 @@ export default function Channels() {
const { data: albyBalance, mutate: reloadAlbyBalance } = useAlbyBalance();
const navigate = useNavigate();
const [nodes, setNodes] = React.useState<Node[]>([]);
const [amount, setAmount] = React.useState(0);
const { getNewAddress, data: onchainAddress } = useOnchainAddress();

const { toast } = useToast();
const isDesktop = useIsDesktop();
Expand Down Expand Up @@ -104,8 +119,25 @@ export default function Channels() {

React.useEffect(() => {
loadNodeStats();

// TODO: Execute this only when user opens swap window
setAmount(
((findLargestChannel()?.localSpendableBalance || 0) * 0.9) / 1000
);
}, [loadNodeStats]);

function findLargestChannel(): Channel | undefined {
if (!channels || channels.length === 0) {
return undefined;
}

return channels.reduce((prevLargest, current) => {
return current.localSpendableBalance > prevLargest.localSpendableBalance
? current
: prevLargest;
}, channels[0]);
}

const showHostedBalance =
albyBalance && albyBalance.sats > ALBY_HIDE_HOSTED_BALANCE_LIMIT;

Expand All @@ -116,108 +148,144 @@ export default function Channels() {
description="Manage your lightning node"
contentRight={
<div className="flex gap-3 items-center justify-center">
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
{isDesktop ? (
<Button
className="inline-flex"
variant="outline"
size="default"
>
Advanced
<ChevronDown />
</Button>
) : (
<Button variant="outline" size="icon">
<Settings2 className="w-4 h-4" />
</Button>
)}
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuGroup>
<DropdownMenuItem>
<div
className="flex flex-row gap-4 items-center w-full cursor-pointer"
onClick={() => {
if (!nodeConnectionInfo) {
return;
}
copyToClipboard(nodeConnectionInfo.pubkey, toast);
}}
<Dialog>
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
{isDesktop ? (
<Button
className="inline-flex"
variant="outline"
size="default"
>
<div>Node</div>
<div className="overflow-hidden text-ellipsis flex-1">
{nodeConnectionInfo?.pubkey || "Loading..."}
Advanced
<ChevronDown />
</Button>
) : (
<Button variant="outline" size="icon">
<Settings2 className="w-4 h-4" />
</Button>
)}
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuGroup>
<DropdownMenuItem>
<div
className="flex flex-row gap-4 items-center w-full cursor-pointer"
onClick={() => {
if (!nodeConnectionInfo) {
return;
}
copyToClipboard(nodeConnectionInfo.pubkey, toast);
}}
>
<div>Node</div>
<div className="overflow-hidden text-ellipsis flex-1">
{nodeConnectionInfo?.pubkey || "Loading..."}
</div>
{nodeConnectionInfo && (
<CopyIcon className="shrink-0 w-4 h-4" />
)}
</div>
{nodeConnectionInfo && (
<CopyIcon className="shrink-0 w-4 h-4" />
)}
</div>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>On-Chain</DropdownMenuLabel>
<DropdownMenuItem>
<Link
to="/channels/onchain/deposit-bitcoin"
className="w-full"
>
Deposit Bitcoin
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link to="onchain/buy-bitcoin" className="w-full">
Buy Bitcoin
</Link>
</DropdownMenuItem>
{(balances?.onchain.spendable || 0) > ONCHAIN_DUST_SATS && (
<DropdownMenuItem
onClick={() => navigate("/wallet/withdraw")}
className="w-full cursor-pointer"
>
Withdraw On-Chain Balance
</DropdownMenuItem>
)}
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Swaps</DropdownMenuLabel>
<DropdownMenuItem>
Swap in
<div className="ml-2 text-muted-foreground flex flex-row items-center">
(
<LinkIcon className="w-4 h-4" />
<ArrowRight className="w-4 h-4" />
<ZapIcon className="w-4 h-4" />)
</div>
</DropdownMenuItem>
<DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>On-Chain</DropdownMenuLabel>
<DropdownMenuItem>
<Link
to="/channels/onchain/deposit-bitcoin"
className="w-full"
>
Deposit Bitcoin
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link to="onchain/buy-bitcoin" className="w-full">
Buy Bitcoin
</Link>
</DropdownMenuItem>
{(balances?.onchain.spendable || 0) > ONCHAIN_DUST_SATS && (
<DropdownMenuItem
onClick={() => navigate("/wallet/withdraw")}
className="w-full cursor-pointer"
>
Withdraw On-Chain Balance
</DropdownMenuItem>
)}
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Swaps</DropdownMenuLabel>
{/* TODO: Implement swap in
<DropdownMenuItem>
Swap in
<div className="ml-2 text-muted-foreground flex flex-row items-center">
(
<LinkIcon className="w-4 h-4" />
<ArrowRight className="w-4 h-4" />
<ZapIcon className="w-4 h-4" />)
</div>
</DropdownMenuItem> */}
<DialogTrigger asChild>
<DropdownMenuItem>
Swap out
<div className="ml-2 text-muted-foreground flex flex-row items-center">
(
<ZapIcon className="w-4 h-4" />
<ArrowRight className="w-4 h-4" />
<LinkIcon className="w-4 h-4" />)
</div>
</DropdownMenuItem>
</DialogTrigger>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Management</DropdownMenuLabel>
<DropdownMenuItem>
<Link className="w-full" to="/peers">
Connected Peers
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link className="w-full" to="/wallet/sign-message">
Sign Message
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<DialogContent>
<DialogHeader>
<DialogTitle>Swap out funds</DialogTitle>
<DialogDescription>
Funds from one of your channels will be sent to your savings
balance via a swap service in order to restore some of your
inbound liquidity.
</DialogDescription>
</DialogHeader>
<div className="grid grid-cols-4 items-center">
<Label>Amount</Label>
<Input
className="col-span-3"
value={amount}
onChange={(e) => setAmount(parseInt(e.target.value))}
/>
</div>
<DialogFooter>
<Button
type="submit"
onClick={async () => {
await getNewAddress();
openLink(
`https://boltz.exchange/?sendAsset=LN&receiveAsset=BTC&sendAmount=${amount}&destination=${onchainAddress}`
);
}}
>
Swap out
<div className="ml-2 text-muted-foreground flex flex-row items-center">
(
<ZapIcon className="w-4 h-4" />
<ArrowRight className="w-4 h-4" />
<LinkIcon className="w-4 h-4" />)
</div>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Management</DropdownMenuLabel>
<DropdownMenuItem>
<Link className="w-full" to="/peers">
Connected Peers
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link className="w-full" to="/wallet/sign-message">
Sign Message
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Link to="/channels/incoming">
<Button>Open Channel</Button>
</Link>
Expand Down

0 comments on commit f77258d

Please sign in to comment.