From 1c97a163d07f7c64bbb31b57d6fdae3683229536 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 12 Feb 2024 17:57:44 -0600
Subject: [PATCH] NostrSigninModal: add extension indicator, flesh out
 IdentityStep

---
 .../nostr-extension-indicator.tsx             | 31 +++++++++++++++++++
 .../steps/identity-step.tsx                   | 26 +++++++++++++---
 2 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/features/ui/components/modals/nostr-signin-modal/nostr-extension-indicator.tsx

diff --git a/src/features/ui/components/modals/nostr-signin-modal/nostr-extension-indicator.tsx b/src/features/ui/components/modals/nostr-signin-modal/nostr-extension-indicator.tsx
new file mode 100644
index 000000000..735674a9a
--- /dev/null
+++ b/src/features/ui/components/modals/nostr-signin-modal/nostr-extension-indicator.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Stack from 'soapbox/components/ui/stack/stack';
+import Text from 'soapbox/components/ui/text/text';
+
+interface INostrExtensionIndicator {
+  signinAction: () => void;
+}
+
+const NostrExtensionIndicator: React.FC<INostrExtensionIndicator> = ({ signinAction }) => {
+  return (
+    <Stack space={2} className='rounded-lg bg-gray-100 p-2 dark:bg-gray-800'>
+      <Text size='xs'>
+        {window.nostr ? (
+          <FormattedMessage
+            id='nostr_extension.found'
+            defaultMessage='<link>Sign in</link> with browser extension.'
+            values={{
+              link: (node) => <button className='underline' onClick={signinAction}>{node}</button>,
+            }}
+          />
+        ) : (
+          <FormattedMessage id='nostr_extension.not_found' defaultMessage='Browser extension not found.' />
+        )}
+      </Text>
+    </Stack>
+  );
+};
+
+export default NostrExtensionIndicator;
\ No newline at end of file
diff --git a/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx b/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx
index f343e4ce3..db82a0cc9 100644
--- a/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx
+++ b/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx
@@ -1,15 +1,33 @@
 import React from 'react';
 
-import { Stack } from 'soapbox/components/ui';
+import Button from 'soapbox/components/ui/button/button';
+import FormGroup from 'soapbox/components/ui/form-group/form-group';
+import HStack from 'soapbox/components/ui/hstack/hstack';
+import Input from 'soapbox/components/ui/input/input';
+import Stack from 'soapbox/components/ui/stack/stack';
+
+import NostrExtensionIndicator from '../nostr-extension-indicator';
 
 interface IIdentityStep {
   setStep: (step: number) => void;
 }
 
-const IdentityStep: React.FC<IIdentityStep> = () => {
+const IdentityStep: React.FC<IIdentityStep> = ({ setStep }) => {
   return (
-    <Stack>
-      identity step
+    <Stack space={3}>
+      <NostrExtensionIndicator signinAction={() => setStep(0)} />
+
+      <FormGroup labelText='Username'>
+        <Input
+          icon={require('@tabler/icons/at.svg')}
+          placeholder='Username or npub'
+        />
+      </FormGroup>
+
+      <HStack space={2} alignItems='center' justifyContent='between'>
+        <Button theme='transparent'>Sign up</Button>
+        <Button theme='accent' onClick={() => setStep(2)}>Next</Button>
+      </HStack>
     </Stack>
   );
 };