Merge branch 'ditto-identity' into 'main'

Ditto identity

See merge request soapbox-pub/soapbox!2968

src/features/edit-identity/index.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { patchMe } from 'soapbox/actions/me';
+import List, { ListItem } from 'soapbox/components/list';
+import { Button, Column, Emoji, HStack, Icon, Input, Tooltip } from 'soapbox/components/ui';
+import { useNostr } from 'soapbox/contexts/nostr-context';
+import { useNostrReq } from 'soapbox/features/nostr/hooks/useNostrReq';
+import { useAppDispatch, useInstance, useOwnAccount } from 'soapbox/hooks';
+import toast from 'soapbox/toast';
+
+interface IEditIdentity {
+}
+
+const messages = defineMessages({
+  title: { id: 'settings.edit_identity', defaultMessage: 'Identity' },
+  username: { id: 'edit_profile.fields.nip05_label', defaultMessage: 'Username' },
+  unverified: { id: 'edit_profile.fields.nip05_unverified', defaultMessage: 'Name could not be verified and won\'t be used.' },
+  success: { id: 'edit_profile.success', defaultMessage: 'Your profile has been successfully saved!' },
+  error: { id: 'edit_profile.error', defaultMessage: 'Profile update failed' },
+});
+
+/** EditIdentity component. */
+const EditIdentity: React.FC<IEditIdentity> = () => {
+  const intl = useIntl();
+  const instance = useInstance();
+  const dispatch = useAppDispatch();
+  const { account } = useOwnAccount();
+  const { relay, signer } = useNostr();
+
+  const admin = instance.nostr?.pubkey;
+  const pubkey = account?.nostr?.pubkey;
+  const [username, setUsername] = useState<string>('');
+
+  const { events: labels } = useNostrReq(
+    (admin && pubkey)
+      ? [{ kinds: [1985], authors: [admin], '#L': ['nip05'], '#p': [pubkey] }]
+      : [],
+  );
+
+  if (!account) return null;
+
+  const updateNip05 = async (nip05: string): Promise<void> => {
+    if (account.source?.nostr?.nip05 === nip05) return;
+    try {
+      await dispatch(patchMe({ nip05 }));
+      toast.success(intl.formatMessage(messages.success));
+    } catch (e) {
+      toast.error(intl.formatMessage(messages.error));
+    }
+  };
+
+  const submit = async () => {
+    if (!admin || !signer || !relay) return;
+
+    const event = await signer.signEvent({
+      kind: 5950,
+      content: '',
+      tags: [
+        ['i', `${username}@${instance.domain}`, 'text'],
+        ['p', admin],
+      ],
+      created_at: Math.floor(Date.now() / 1000),
+    });
+
+    await relay.event(event);
+  };
+
+  return (
+    <Column label={intl.formatMessage(messages.title)}>
+      <List>
+        {labels.map((label) => {
+          const identifier = label.tags.find(([name]) => name === 'l')?.[1];
+          if (!identifier) return null;
+
+          return (
+            <ListItem
+              key={identifier}
+              label={
+                <HStack alignItems='center' space={2}>
+                  <span>{identifier}</span>
+                  {(account.source?.nostr?.nip05 === identifier && account.acct !== identifier) && (
+                    <Tooltip text={intl.formatMessage(messages.unverified)}>
+                      <div>
+                        <Emoji className='h-4 w-4' emoji='⚠️' />
+                      </div>
+                    </Tooltip>
+                  )}
+                </HStack>
+              }
+              isSelected={account.source?.nostr?.nip05 === identifier}
+              onSelect={() => updateNip05(identifier)}
+            />
+          );
+        })}
+        <ListItem label={<UsernameInput value={username} onChange={(e) => setUsername(e.target.value)} />}>
+          <Button theme='accent' onClick={submit}>Add</Button>
+        </ListItem>
+      </List>
+    </Column>
+  );
+};
+
+const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (props) => {
+  const intl = useIntl();
+  const instance = useInstance();
+
+  return (
+    <Input
+      placeholder={intl.formatMessage(messages.username)}
+      append={(
+        <HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
+          <Icon className='h-4 w-4' src={require('@tabler/icons/at.svg')} />
+          <span>{instance.domain}</span>
+        </HStack>
+      )}
+      {...props}
+    />
+  );
+};
+
+export default EditIdentity;

src/features/edit-profile/index.tsx

@@ -325,7 +325,7 @@ const EditProfile: React.FC = () => {
               type='text'
               value={data.nip05}
               onChange={handleTextChange('nip05')}
-              placeholder={intl.formatMessage(messages.nip05Placeholder, { domain: location.host })}
+              placeholder={intl.formatMessage(messages.nip05Placeholder, { domain: instance.domain })}
             />
           </FormGroup>
         )}

src/features/nostr/hooks/useNostrReq.ts

@@ -1,14 +1,17 @@
-import { NostrEvent, NostrFilter } from '@soapbox/nspec';
+import { NSet, NostrEvent, NostrFilter } from '@soapbox/nspec';
 import isEqual from 'lodash/isEqual';
 import { useEffect, useRef, useState } from 'react';
 
 import { useNostr } from 'soapbox/contexts/nostr-context';
+import { useForceUpdate } from 'soapbox/hooks/useForceUpdate';
 
 /** Streams events from the relay for the given filters. */
 export function useNostrReq(filters: NostrFilter[]): { events: NostrEvent[]; eose: boolean; closed: boolean } {
   const { relay } = useNostr();
 
-  const [events, setEvents] = useState<NostrEvent[]>([]);
+  const nset = useRef<NSet>(new NSet());
+  const forceUpdate = useForceUpdate();
+
   const [closed, setClosed] = useState(false);
   const [eose, setEose] = useState(false);
 
@@ -21,7 +24,8 @@ export function useNostrReq(filters: NostrFilter[]): { events: NostrEvent[]; eos
       (async () => {
         for await (const msg of relay.req(value, { signal })) {
           if (msg[0] === 'EVENT') {
-            setEvents((prev) => [msg[2], ...prev]);
+            nset.current.add(msg[2]);
+            forceUpdate();
           } else if (msg[0] === 'EOSE') {
             setEose(true);
           } else if (msg[0] === 'CLOSED') {
@@ -41,7 +45,7 @@ export function useNostrReq(filters: NostrFilter[]): { events: NostrEvent[]; eos
   }, [relay, value]);
 
   return {
-    events,
+    events: [...nset.current],
     eose,
     closed,
   };

src/features/settings/index.tsx

@@ -20,6 +20,7 @@ const messages = defineMessages({
   configureMfa: { id: 'settings.configure_mfa', defaultMessage: 'Configure MFA' },
   deleteAccount: { id: 'settings.delete_account', defaultMessage: 'Delete Account' },
   editProfile: { id: 'settings.edit_profile', defaultMessage: 'Edit Profile' },
+  editIdentity: { id: 'settings.edit_identity', defaultMessage: 'Identity' },
   exportData: { id: 'column.export_data', defaultMessage: 'Export data' },
   importData: { id: 'navigation_bar.import_data', defaultMessage: 'Import data' },
   mfaDisabled: { id: 'mfa.disabled', defaultMessage: 'Disabled' },
@@ -65,6 +66,11 @@ const Settings = () => {
             <ListItem label={intl.formatMessage(messages.editProfile)} to='/settings/profile'>
               <span className='max-w-full truncate'>{displayName}</span>
             </ListItem>
+            {features.nip05 && (
+              <ListItem label={intl.formatMessage(messages.editIdentity)} to='/settings/identity'>
+                <span className='max-w-full truncate'>{account?.source?.nostr?.nip05}</span>
+              </ListItem>
+            )}
           </List>
         </CardBody>
 

src/features/ui/index.tsx

@@ -137,6 +137,7 @@ import {
   ExternalLogin,
   LandingTimeline,
   BookmarkFolders,
+  EditIdentity,
   Domains,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
@@ -306,6 +307,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       {features.scheduledStatuses && <WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} />}
 
       <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />
+      {features.nip05 && <WrappedRoute path='/settings/identity' page={DefaultPage} component={EditIdentity} content={children} />}
       {features.exportData && <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} />}
       {features.importData && <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />}
       {features.accountAliases && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />}

src/features/ui/util/async-components.ts

@@ -167,5 +167,6 @@ export const NostrLoginModal = lazy(() => import('soapbox/features/ui/components
 export const BookmarkFolders = lazy(() => import('soapbox/features/bookmark-folders'));
 export const EditBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/edit-bookmark-folder-modal'));
 export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/select-bookmark-folder-modal'));
+export const EditIdentity = lazy(() => import('soapbox/features/edit-identity'));
 export const Domains = lazy(() => import('soapbox/features/admin/domains'));
 export const EditDomainModal = lazy(() => import('soapbox/features/ui/components/modals/edit-domain-modal'));

src/hooks/useForceUpdate.ts

@@ -0,0 +1,11 @@
+import { useState, useCallback } from 'react';
+
+export function useForceUpdate(): () => void {
+  const [, setState] = useState(false);
+
+  const forceUpdate = useCallback(() => {
+    setState(prevState => !prevState);
+  }, []);
+
+  return forceUpdate;
+}

src/locales/en.json

@@ -634,6 +634,7 @@
   "edit_profile.fields.meta_fields_label": "Profile fields",
   "edit_profile.fields.nip05_label": "Username",
   "edit_profile.fields.nip05_placeholder": "user@{domain}",
+  "edit_profile.fields.nip05_unverified": "Name could not be verified and won't be used.",
   "edit_profile.fields.stranger_notifications_label": "Block notifications from strangers",
   "edit_profile.fields.website_label": "Website",
   "edit_profile.fields.website_placeholder": "Display a Link",
@@ -1376,6 +1377,7 @@
   "settings.change_password": "Change Password",
   "settings.configure_mfa": "Configure MFA",
   "settings.delete_account": "Delete Account",
+  "settings.edit_identity": "Identity",
   "settings.edit_profile": "Edit Profile",
   "settings.messages.label": "Allow users to start a new chat with you",
   "settings.mutes": "Mutes",