CLNForm.tsx raw

   1  import React from "react";
   2  import { useNavigate } from "react-router";
   3  import Container from "src/components/Container";
   4  import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
   5  import { Button } from "src/components/ui/button";
   6  import { Input } from "src/components/ui/input";
   7  import { Label } from "src/components/ui/label";
   8  import useSetupStore from "src/state/SetupStore";
   9  
  10  export function CLNForm() {
  11    const navigate = useNavigate();
  12    const setupStore = useSetupStore();
  13    const [clnAddress, setClnAddress] = React.useState<string>(
  14      setupStore.nodeInfo.clnAddress || ""
  15    );
  16    const [clnLightningDir, setClnLightningDir] = React.useState<string>(
  17      setupStore.nodeInfo.clnLightningDir || ""
  18    );
  19    const [clnAddressHold, setClnAddressHold] = React.useState<string>(
  20      setupStore.nodeInfo.clnAddressHold || ""
  21    );
  22  
  23    // TODO: proper onboarding
  24    function onSubmit(e: React.FormEvent) {
  25      e.preventDefault();
  26      handleSubmit({
  27        clnAddress,
  28        clnLightningDir,
  29        clnAddressHold,
  30      });
  31    }
  32  
  33    async function handleSubmit(data: object) {
  34      setupStore.updateNodeInfo({
  35        backendType: "CLN",
  36        ...data,
  37      });
  38      navigate("/setup/security");
  39    }
  40  
  41    return (
  42      <Container>
  43        <TwoColumnLayoutHeader
  44          title="Configure CLN"
  45          description="Fill out wallet details to finish setup."
  46        />
  47        <form className="w-full grid gap-5 mt-6" onSubmit={onSubmit}>
  48          <div className="grid gap-1.5">
  49            <Label htmlFor="cln-address">CLN Address (GRPC)</Label>
  50            <Input
  51              required
  52              name="cln-address"
  53              onChange={(e) => setClnAddress(e.target.value)}
  54              value={clnAddress}
  55              id="cln-address"
  56            />
  57          </div>
  58          <div className="grid gap-1.5">
  59            <Label htmlFor="cln-lightning-dir">
  60              CLN Lightning directory (full path)
  61            </Label>
  62            <Input
  63              required
  64              name="cln-lightning-dir"
  65              onChange={(e) => setClnLightningDir(e.target.value)}
  66              value={clnLightningDir}
  67              type="text"
  68              id="cln-lightning-dir"
  69            />
  70          </div>
  71          <div className="grid gap-1.5">
  72            <Label htmlFor="cln-address-hold">
  73              (optional) CLN hold plugin Address (GRPC)
  74            </Label>
  75            <Input
  76              name="cln-address-hold"
  77              onChange={(e) => setClnAddressHold(e.target.value)}
  78              value={clnAddressHold}
  79              id="cln-address-hold"
  80            />
  81          </div>
  82          <Button>Next</Button>
  83        </form>
  84      </Container>
  85    );
  86  }
  87