NostrSigninModal: add extension indicator, flesh out IdentityStep

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;

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>
   );
 };