SetupNode.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 { cn } from "src/lib/utils";
   7  import { BackendType } from "src/types";
   8  
   9  import { backendTypeConfigs } from "src/lib/backendType";
  10  import useSetupStore from "src/state/SetupStore";
  11  
  12  const backendTypeDisplayConfigList = Object.entries(backendTypeConfigs).map(
  13    (entry) => ({
  14      ...entry[1],
  15      backendType: entry[0] as BackendType,
  16    })
  17  );
  18  
  19  export function SetupNode() {
  20    const navigate = useNavigate();
  21    const setupStore = useSetupStore();
  22    const [selectedBackendType, setSelectedBackupType] =
  23      React.useState<BackendType>();
  24  
  25    function next() {
  26      if (!selectedBackendType) {
  27        return;
  28      }
  29      navigate(`/setup/node/${selectedBackendType.toLowerCase()}`);
  30    }
  31  
  32    const hasImportedMnemonic =
  33      !!setupStore.nodeInfo.mnemonic && setupStore.hasImportedMnemonic;
  34  
  35    return (
  36      <Container>
  37        <TwoColumnLayoutHeader
  38          title="Choose Wallet Implementation"
  39          pageTitle="Choose Wallet Implementation"
  40          description="Decide between one of available lightning wallet backends."
  41        />
  42        <div className="flex flex-col gap-5 w-full mt-6">
  43          <div className="w-full grid grid-cols-2 gap-3">
  44            {backendTypeDisplayConfigList
  45              .filter((item) =>
  46                hasImportedMnemonic
  47                  ? backendTypeConfigs[item.backendType].hasMnemonic
  48                  : true
  49              )
  50              .map((item) => (
  51                <div
  52                  key={item.backendType}
  53                  className={cn(
  54                    "border-foreground-muted border px-4 py-6 flex flex-col gap-3 items-center rounded cursor-pointer",
  55                    selectedBackendType === item.backendType && "border-primary"
  56                  )}
  57                  onClick={() => setSelectedBackupType(item.backendType)}
  58                >
  59                  <div className="h-6 w-6">{item.icon}</div>
  60                  {item.title}
  61                </div>
  62              ))}
  63          </div>
  64          <Button onClick={() => next()} disabled={!selectedBackendType}>
  65            Next
  66          </Button>
  67        </div>
  68      </Container>
  69    );
  70  }
  71