PhoenixdForm.tsx raw

   1  import React from "react";
   2  import { useNavigate } from "react-router";
   3  import { toast } from "sonner";
   4  import Container from "src/components/Container";
   5  import PasswordInput from "src/components/password/PasswordInput";
   6  import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
   7  import { Button } from "src/components/ui/button";
   8  import { Input } from "src/components/ui/input";
   9  import { Label } from "src/components/ui/label";
  10  import useSetupStore from "src/state/SetupStore";
  11  
  12  export function PhoenixdForm() {
  13    const navigate = useNavigate();
  14    const setupStore = useSetupStore();
  15    const [phoenixdAddress, setPhoenixdAddress] = React.useState<string>(
  16      setupStore.nodeInfo.phoenixdAddress || "http://127.0.0.1:9740"
  17    );
  18    const [phoenixdAuthorization, setPhoenixdAuthorization] =
  19      React.useState<string>(setupStore.nodeInfo.phoenixdAuthorization || "");
  20  
  21    function onSubmit(e: React.FormEvent) {
  22      e.preventDefault();
  23      if (!phoenixdAddress || !phoenixdAuthorization) {
  24        toast.error("Please fill out all fields");
  25        return;
  26      }
  27      handleSubmit({
  28        phoenixdAddress,
  29        phoenixdAuthorization,
  30      });
  31    }
  32  
  33    async function handleSubmit(data: object) {
  34      setupStore.updateNodeInfo({
  35        backendType: "PHOENIX",
  36        ...data,
  37      });
  38      navigate("/setup/security");
  39    }
  40  
  41    return (
  42      <Container>
  43        <TwoColumnLayoutHeader
  44          title="Configure phoenixd"
  45          pageTitle="Configure phoenixd"
  46          description="Fill out wallet details to finish setup."
  47        />
  48        <form className="w-full grid gap-5 mt-6" onSubmit={onSubmit}>
  49          <div className="grid gap-1.5">
  50            <Label htmlFor="phoenix-address">Phoenixd Address</Label>
  51            <Input
  52              name="phoenix-address"
  53              onChange={(e) => setPhoenixdAddress(e.target.value)}
  54              placeholder="http://127.0.0.1:9740"
  55              value={phoenixdAddress}
  56              id="phoenix-address"
  57            />
  58          </div>
  59          <div className="grid gap-1.5">
  60            <Label htmlFor="lnd-cert-hex">Authorization</Label>
  61  
  62            <PasswordInput
  63              id="phoenix-authorization"
  64              onChange={setPhoenixdAuthorization}
  65              value={phoenixdAuthorization}
  66            />
  67          </div>
  68          <Button>Next</Button>
  69        </form>
  70      </Container>
  71    );
  72  }
  73