Welcome.tsx raw

   1  import React from "react";
   2  import { useNavigate } from "react-router";
   3  import Container from "src/components/Container";
   4  import { Button } from "src/components/ui/button";
   5  import { localStorageKeys } from "src/constants";
   6  import { useInfo } from "src/hooks/useInfo";
   7  
   8  export function Welcome() {
   9    const { data: info } = useInfo();
  10    const navigate = useNavigate();
  11  
  12    React.useEffect(() => {
  13      if (!info?.setupCompleted) {
  14        return;
  15      }
  16      navigate("/");
  17    }, [info, navigate]);
  18  
  19    function navigateToAuthPage(returnTo: string) {
  20      if (info?.albyAccountConnected) {
  21        // in case user goes back after authenticating in setup
  22        // we don't want to show the auth screen twice
  23        navigate(returnTo);
  24        return;
  25      }
  26  
  27      window.localStorage.setItem(localStorageKeys.setupReturnTo, returnTo);
  28  
  29      // by default, allow the user to choose whether or not to connect to alby account
  30      let navigateTo = "/setup/alby";
  31      if (info?.oauthRedirect) {
  32        // if using a custom OAuth client (e.g. Alby Cloud) the user must connect their Alby account
  33        // but they are already logged in at getalby.com, so it should be an instant redirect.
  34        navigateTo = "/alby/auth";
  35      }
  36      navigate(navigateTo);
  37    }
  38  
  39    return (
  40      <Container>
  41        <title>Welcome · Alby Hub</title>
  42        <div className="grid text-center gap-5">
  43          <div className="grid gap-2">
  44            <h1 className="font-semibold text-2xl font-headline">
  45              Welcome to Alby Hub
  46            </h1>
  47            <p className="text-muted-foreground">
  48              A powerful, all-in-one bitcoin lightning wallet with the superpower
  49              of connecting to applications.
  50            </p>
  51          </div>
  52          <div className="grid gap-2">
  53            <Button
  54              className="w-full"
  55              onClick={() =>
  56                navigateToAuthPage(
  57                  info?.backendType
  58                    ? "/setup/password?node=preset" // node already setup through env variables
  59                    : "/setup/password?node=ldk"
  60                )
  61              }
  62            >
  63              Get Started
  64              {info?.backendType && ` (${info?.backendType})`}
  65            </Button>
  66  
  67            {info?.enableAdvancedSetup && (
  68              <Button
  69                variant="secondary"
  70                className="w-full"
  71                onClick={() => navigateToAuthPage("/setup/advanced")}
  72              >
  73                Advanced Setup
  74              </Button>
  75            )}
  76          </div>
  77        </div>
  78      </Container>
  79    );
  80  }
  81