LNDForm.tsx raw

   1  import { InfoIcon } from "lucide-react";
   2  import React from "react";
   3  import { useNavigate } from "react-router";
   4  import Container from "src/components/Container";
   5  import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
   6  import { Button } from "src/components/ui/button";
   7  import { Input } from "src/components/ui/input";
   8  import { Label } from "src/components/ui/label";
   9  import useSetupStore from "src/state/SetupStore";
  10  
  11  export function LNDForm() {
  12    const navigate = useNavigate();
  13    const setupStore = useSetupStore();
  14    const [lndAddress, setLndAddress] = React.useState<string>(
  15      setupStore.nodeInfo.lndAddress || ""
  16    );
  17    const [lndCertFile, setLndCertFile] = React.useState<string>(
  18      setupStore.nodeInfo.lndCertFile || ""
  19    );
  20    const [lndMacaroonFile, setLndMacaroonFile] = React.useState<string>(
  21      setupStore.nodeInfo.lndMacaroonFile || ""
  22    );
  23  
  24    // TODO: proper onboarding
  25    function onSubmit(e: React.FormEvent) {
  26      e.preventDefault();
  27      handleSubmit({
  28        lndAddress,
  29        lndCertFile,
  30        lndMacaroonFile,
  31      });
  32    }
  33  
  34    async function handleSubmit(data: object) {
  35      setupStore.updateNodeInfo({
  36        backendType: "LND",
  37        ...data,
  38      });
  39      navigate("/setup/security");
  40    }
  41  
  42    return (
  43      <Container>
  44        <TwoColumnLayoutHeader
  45          title="Configure LND"
  46          pageTitle="Configure LND"
  47          description="Fill out wallet details to finish setup."
  48        />
  49        <form className="w-full grid gap-5 mt-6" onSubmit={onSubmit}>
  50          <div className="grid gap-1.5">
  51            <Label htmlFor="lnd-address">LND Address (GRPC)</Label>
  52            <Input
  53              required
  54              name="lnd-address"
  55              onChange={(e) => setLndAddress(e.target.value)}
  56              value={lndAddress}
  57              id="lnd-address"
  58            />
  59          </div>
  60          <div className="grid gap-1.5">
  61            <Label htmlFor="lnd-macaroon-file">Admin Macaroon File Path</Label>
  62            <Input
  63              required
  64              name="lnd-macaroon-file"
  65              onChange={(e) => setLndMacaroonFile(e.target.value)}
  66              value={lndMacaroonFile}
  67              type="text"
  68              id="lnd-macaroon-file"
  69            />
  70          </div>
  71          <div className="grid gap-1.5">
  72            <Label htmlFor="lnd-cert-file">
  73              TLS Certificate File Path (optional)
  74            </Label>
  75            <Input
  76              name="lnd-cert-file"
  77              onChange={(e) => setLndCertFile(e.target.value)}
  78              value={lndCertFile}
  79              type="text"
  80              id="lnd-cert-file"
  81            />
  82            {!lndCertFile && (
  83              <div className="flex flex-row gap-2 items-center justify-start text-sm text-muted-foreground mt-2">
  84                <InfoIcon className="h-4 w-4 shrink-0" />
  85                Skipping TLS certificate is not recommended as it may expose your
  86                connection to security risks
  87              </div>
  88            )}
  89          </div>
  90          <Button>Next</Button>
  91        </form>
  92      </Container>
  93    );
  94  }
  95