diff --git a/src/views/signin/start.tsx b/src/views/signin/start.tsx index f66285e..993bdcd 100644 --- a/src/views/signin/start.tsx +++ b/src/views/signin/start.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { Button, ButtonGroup, Divider, Flex, IconButton, Link, Spinner, Text, useToast } from "@chakra-ui/react"; import { Link as RouterLink, useLocation } from "react-router-dom"; -import clientRelaysService, { recommendedReadRelays, recommendedWriteRelays } from "../../services/client-relays"; + import Key01 from "../../components/icons/key-01"; import Diamond01 from "../../components/icons/diamond-01"; import UsbFlashDrive from "../../components/icons/usb-flash-drive"; @@ -19,7 +19,9 @@ import SerialPortSigner from "../../classes/signers/serial-port-signer"; import ExtensionAccount from "../../classes/accounts/extension-account"; import SerialPortAccount from "../../classes/accounts/serial-port-account"; import AmberAccount from "../../classes/accounts/amber-account"; +import clientRelaysService, { recommendedReadRelays, recommendedWriteRelays } from "../../services/client-relays"; import { getRelaysFromExt } from "../../helpers/nip07"; + export default function LoginStartView() { const location = useLocation(); const toast = useToast(); @@ -78,7 +80,7 @@ export default function LoginStartView() { {window.nostr && ( <Button onClick={async () => { - signinWithExtension(); + signinWithExtension(); const { read, write } = await getRelaysFromExt(); clientRelaysService.readRelays.next(read); clientRelaysService.writeRelays.next(write); @@ -87,6 +89,9 @@ export default function LoginStartView() { Extension </Button> )} + <Button as={RouterLink} to="./address" state={location.state} w="full" colorScheme="blue" leftIcon={<AtIcon />}> + Nostr Address + </Button> {SerialPortSigner.SUPPORTED && ( <ButtonGroup colorScheme="purple"> <Button onClick={signinWithSerial} leftIcon={<UsbFlashDrive boxSize={6} />} w="xs"> @@ -104,17 +109,10 @@ export default function LoginStartView() { )} {AmberSigner.SUPPORTED && ( <ButtonGroup colorScheme="orange" w="full"> - <Button - onClick={async () => { - const { read, write } = await getRelaysFromExt(); - clientRelaysService.readRelays.next(read); - clientRelaysService.writeRelays.next(write); - clientRelaysService.saveRelays(); - }} - > - Extension - </Button> - <IconButton + <Button onClick={signinWithAmber} leftIcon={<Diamond01 boxSize={6} />} flex={1}> + Use Amber + </Button> + <IconButton as={Link} aria-label="What is Amber?" title="What is Amber?" @@ -124,7 +122,48 @@ export default function LoginStartView() { /> </ButtonGroup> )} + <Flex w="full" alignItems="center" gap="4"> + <Divider /> + <Text fontWeight="bold">OR</Text> + <Divider /> + </Flex> <Flex gap="2"> + <Button + flexDirection="column" + h="auto" + p="4" + as={RouterLink} + to="./nostr-connect" + state={location.state} + variant="outline" + > + <Package boxSize={12} /> + Nostr Connect + </Button> + <Button + flexDirection="column" + h="auto" + p="4" + as={RouterLink} + to="./nsec" + state={location.state} + variant="outline" + > + <Key01 boxSize={12} /> + Private key + </Button> + <Button + flexDirection="column" + h="auto" + p="4" + as={RouterLink} + to="./npub" + state={location.state} + variant="outline" + > + <Eye boxSize={12} /> + Public key + </Button> </Flex> <Text fontWeight="bold" mt="4"> Don't have an account?