feat: improve open channel ux flows (#249)

feat: improve open channel ui - re-add primary open channel button - add links to increase receiving capacity from outgoing and channel order pages
getAlby · Jul 10, 2024 · 340dcda · 340dcda
1 parent 5a7b68a
commit 340dcda
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 77 deletions.
diff --git a/frontend/src/screens/channels/Channels.tsx b/frontend/src/screens/channels/Channels.tsx
@@ -363,9 +363,9 @@ export default function Channels() {
                 </DropdownMenuGroup>
               </DropdownMenuContent>
             </DropdownMenu>
-            {/* <Link to="/channels/new">
+            <Link to="/channels/outgoing">
               <Button>Open Channel</Button>
-            </Link> */}
+            </Link>
             <ExternalLink to="https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/alby-hub/liquidity/node-health">
               <TooltipProvider>
                 <Tooltip>

diff --git a/frontend/src/screens/channels/CurrentChannelOrder.tsx b/frontend/src/screens/channels/CurrentChannelOrder.tsx
@@ -356,6 +356,11 @@ function PayBitcoinChannelOrderTopup({ order }: { order: NewChannelOrder }) {
             Topup with your credit card or bank account
           </Button>
         </ExternalLink>
+        <Link to="/channels/incoming" className="w-full">
+          <Button className="w-full" variant="secondary">
+            Need receiving capacity?
+          </Button>
+        </Link>
       </div>
     </div>
   );

diff --git a/frontend/src/screens/channels/IncreaseOutgoingCapacity.tsx b/frontend/src/screens/channels/IncreaseOutgoingCapacity.tsx
@@ -1,4 +1,4 @@
-import { Box, ChevronDown, Zap } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import React, { FormEvent } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import AppHeader from "src/components/AppHeader";
@@ -78,21 +78,13 @@ function NewChannelInternal({ network }: { network: Network }) {
     return _channelPeerSuggestions
       ? [
           ..._channelPeerSuggestions.filter(
-            (peer) =>
-              peer.paymentMethod !== "lightning" || peer.lspType !== "LSPS1"
+            (peer) => peer.paymentMethod !== "lightning"
           ),
           customOption,
         ]
       : undefined;
   }, [_channelPeerSuggestions, network]);
 
-  function setPaymentMethod(paymentMethod: "onchain" | "lightning") {
-    setOrder((current) => ({
-      ...current,
-      paymentMethod,
-    }));
-  }
-
   function setPublic(isPublic: boolean) {
     setOrder((current) => ({
       ...current,
@@ -131,21 +123,9 @@ function NewChannelInternal({ network }: { network: Network }) {
           host: selectedPeer.host,
         }));
       }
-      if (
-        selectedPeer.paymentMethod === "lightning" &&
-        order.paymentMethod === "lightning"
-      ) {
-        setOrder((current) => ({
-          ...current,
-          lspType: selectedPeer.lspType,
-          lspUrl: selectedPeer.lspUrl,
-        }));
-      }
     }
   }, [order.paymentMethod, selectedPeer]);
 
-  const selectedCardStyles = "border-primary border-2 font-medium";
-
   const [showAdvanced, setShowAdvanced] = React.useState(false);
 
   function onSubmit(e: FormEvent) {
@@ -219,6 +199,15 @@ function NewChannelInternal({ network }: { network: Network }) {
       <AppHeader
         title="Increase Spending Balance"
         description="Funds used to open a channel minus fees will be added to your spending balance"
+        contentRight={
+          <div className="flex items-end">
+            <Link to="/channels/incoming">
+              <Button className="w-full" variant="secondary">
+                Need receiving capacity?
+              </Button>
+            </Link>
+          </div>
+        }
       />
       <form
         onSubmit={onSubmit}
@@ -270,46 +259,10 @@ function NewChannelInternal({ network }: { network: Network }) {
         </div>
         {showAdvanced && (
           <>
-            <div className="grid gap-3">
-              <Label htmlFor="amount">Payment method</Label>
-              <div className="grid grid-cols-2 gap-3">
-                <Link
-                  to="#"
-                  onClick={() => setPaymentMethod("onchain")}
-                  className="flex-1"
-                >
-                  <div
-                    className={cn(
-                      "rounded-xl border bg-card text-card-foreground shadow p-5 flex flex-col items-center gap-3",
-                      order.paymentMethod === "onchain"
-                        ? selectedCardStyles
-                        : undefined
-                    )}
-                  >
-                    <Box className="w-4 h-4" />
-                    Onchain
-                  </div>
-                </Link>
-                <Link to="#" onClick={() => setPaymentMethod("lightning")}>
-                  <div
-                    className={cn(
-                      "rounded-xl border bg-card text-card-foreground shadow p-5 flex flex-col items-center gap-3",
-                      order.paymentMethod === "lightning"
-                        ? selectedCardStyles
-                        : undefined
-                    )}
-                  >
-                    <Zap className="w-4 h-4" />
-                    Lightning
-                  </div>
-                </Link>
-              </div>
-            </div>
             <div className="flex flex-col gap-3">
               {selectedPeer &&
-                (selectedPeer.paymentMethod === "lightning" ||
-                  (order.paymentMethod === "onchain" &&
-                    selectedPeer.pubkey === order.pubkey)) && (
+                order.paymentMethod === "onchain" &&
+                selectedPeer.pubkey === order.pubkey && (
                   <div className="grid gap-1.5">
                     <Label>Channel peer</Label>
                     <Select
@@ -378,9 +331,6 @@ function NewChannelInternal({ network }: { network: Network }) {
                 showCustomOptions={selectedPeer?.name === "Custom"}
               />
             )}
-            {order.paymentMethod === "lightning" && (
-              <NewChannelLightning order={order} setOrder={setOrder} />
-            )}
 
             <div className="mt-2 flex items-top space-x-2">
               <Checkbox
@@ -421,18 +371,6 @@ function NewChannelInternal({ network }: { network: Network }) {
   );
 }
 
-type NewChannelLightningProps = {
-  order: Partial<NewChannelOrder>;
-  setOrder(order: Partial<NewChannelOrder>): void;
-};
-
-function NewChannelLightning(props: NewChannelLightningProps) {
-  if (props.order.paymentMethod !== "lightning") {
-    throw new Error("unexpected payment method");
-  }
-  return null;
-}
-
 type NewChannelOnchainProps = {
   order: Partial<NewChannelOrder>;
   setOrder: React.Dispatch<React.SetStateAction<Partial<NewChannelOrder>>>;