Flesh out AccountStep

src/features/ui/components/modals/nostr-signin-modal/steps/account-step.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import { NSchema as n } from 'nspec';
+import React, { useMemo } from 'react';
 
 import { useAccountLookup } from 'soapbox/api/hooks';
-import Stack from 'soapbox/components/ui/stack/stack';
+import { Avatar, Text, Stack, Emoji, Button, Tooltip } from 'soapbox/components/ui';
+import { useInstance } from 'soapbox/hooks';
 
 interface IAccountStep {
   username: string;
@@ -9,10 +11,56 @@ interface IAccountStep {
 
 const AccountStep: React.FC<IAccountStep> = ({ username }) => {
   const { account } = useAccountLookup(username);
+  const instance = useInstance();
+
+  const isBech32 = useMemo(
+    () => n.bech32().safeParse(account?.acct).success,
+    [account?.acct],
+  );
+
+  if (!account) {
+    return null;
+  }
 
   return (
-    <Stack space={3}>
-      {JSON.stringify(account, null, 2)}
+    <Stack space={6}>
+      <Stack space={3} alignItems='center'>
+        <Avatar className='bg-gray-100 dark:bg-gray-800' src={account.avatar} size={160} />
+
+        <Stack space={1}>
+          <Text
+            size='xl'
+            weight='semibold'
+            align='center'
+            dangerouslySetInnerHTML={{ __html: account.display_name_html }}
+            truncate
+          />
+
+          <Tooltip text={account.nostr.npub ?? account.acct}>
+            <Text size='sm' theme='muted' align='center' truncate>
+              {isBech32 ? (
+                account.acct.slice(0, 13)
+              ) : (
+                account.acct
+              )}
+            </Text>
+          </Tooltip>
+        </Stack>
+      </Stack>
+
+      {!account.ditto.is_registered && (
+        <Stack space={6}>
+          <Stack space={3} alignItems='center' className='rounded-xl bg-gray-100 p-4 dark:bg-gray-800'>
+            <Emoji className='h-16 w-16' emoji='🫂' />
+
+            <Text align='center' className='max-w-72'>
+              You need an account on {instance.title} to continue.
+            </Text>
+          </Stack>
+
+          <Button theme='accent' size='lg'>Join</Button>
+        </Stack>
+      )}
     </Stack>
   );
 };

src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx

@@ -71,7 +71,14 @@ const IdentityStep: React.FC<IIdentityStep> = ({ username, setUsername, setStep
 
         <HStack space={2} alignItems='center' justifyContent='between'>
           <Button theme='transparent' onClick={() => setStep(2)} disabled={loading}>Sign up</Button>
-          <Button theme='accent' type='submit' disabled={!username || loading} onClick={handleSubmit}>Next</Button>
+
+          <Button
+            theme='accent'
+            type='submit' disabled={!username || loading || notFound}
+            onClick={handleSubmit}
+          >
+            Next
+          </Button>
         </HStack>
       </Stack>
     </Form>

src/schemas/account.ts

@@ -33,6 +33,7 @@ const baseAccountSchema = z.object({
   display_name: z.string().catch(''),
   ditto: coerceObject({
     accepts_zaps: z.boolean().catch(false),
+    is_registered: z.boolean().catch(false),
   }),
   emojis: filteredArray(customEmojiSchema),
   fields: filteredArray(fieldSchema),