Merge branch 'nostr-relays' into 'main'

Nostr relays

See merge request soapbox-pub/soapbox!2973

src/components/ui/select/select.tsx

@@ -3,18 +3,22 @@ import React from 'react';
 
 interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
   children: Iterable<React.ReactNode>;
+  full?: boolean;
 }
 
 /** Multiple-select dropdown. */
 const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
-  const { children, className, ...filteredProps } = props;
+  const { children, className, full = true, ...filteredProps } = props;
 
   return (
     <select
       ref={ref}
       className={clsx(
-        'w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500',
+        'truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500',
         className,
+        {
+          'w-full': full,
+        },
       )}
       {...filteredProps}
     >

src/features/nostr-relays/components/relay-editor.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { HStack, Input, Select } from 'soapbox/components/ui';
+import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+import { useInstance } from 'soapbox/hooks';
+
+interface IRelayEditor {
+  relays: RelayData[];
+  setRelays: (relays: RelayData[]) => void;
+}
+
+const RelayEditor: React.FC<IRelayEditor> = ({ relays, setRelays }) => {
+  const handleAddRelay = (): void => {
+    setRelays([...relays, { url: '' }]);
+  };
+
+  const handleRemoveRelay = (i: number): void => {
+    const newRelays = [...relays];
+    newRelays.splice(i, 1);
+    setRelays(newRelays);
+  };
+
+  return (
+    <Streamfield
+      values={relays}
+      onChange={setRelays}
+      component={RelayField}
+      onAddItem={handleAddRelay}
+      onRemoveItem={handleRemoveRelay}
+    />
+  );
+};
+
+interface RelayData {
+  url: string;
+  marker?: 'read' | 'write';
+}
+
+const RelayField: StreamfieldComponent<RelayData> = ({ value, onChange }) => {
+  const instance = useInstance();
+
+  const handleChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      onChange({ ...value, [key]: e.currentTarget.value });
+    };
+  };
+
+  const handleMarkerChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
+    onChange({ ...value, marker: (e.currentTarget.value as 'read' | 'write' | '') || undefined });
+  };
+
+  return (
+    <HStack space={2} grow>
+      <Input
+        type='text'
+        outerClassName='w-full grow'
+        value={value.url}
+        onChange={handleChange('url')}
+        placeholder={instance.nostr?.relay ?? `wss://${instance.domain}/relay`}
+      />
+
+      <Select className='mt-1' full={false} onChange={handleMarkerChange}>
+        <option value='' selected={value.marker === undefined}>
+          <FormattedMessage id='nostr_relays.read_write' defaultMessage='Read & write' />
+        </option>
+        <option value='read' selected={value.marker === 'read'}>
+          <FormattedMessage id='nostr_relays.read_only' defaultMessage='Read-only' />
+        </option>
+        <option value='write' selected={value.marker === 'write'}>
+          <FormattedMessage id='nostr_relays.write_only' defaultMessage='Write-only' />
+        </option>
+      </Select>
+    </HStack>
+  );
+};
+
+export default RelayEditor;
+
+export type { RelayData };

src/features/nostr-relays/index.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
+import { useNostr } from 'soapbox/contexts/nostr-context';
+import { useNostrReq } from 'soapbox/features/nostr/hooks/useNostrReq';
+import { useOwnAccount } from 'soapbox/hooks';
+
+import RelayEditor, { RelayData } from './components/relay-editor';
+
+const messages = defineMessages({
+  title: { id: 'nostr_relays.title', defaultMessage: 'Relays' },
+});
+
+const NostrRelays = () => {
+  const intl = useIntl();
+  const { account } = useOwnAccount();
+  const { relay, signer } = useNostr();
+
+  const { events } = useNostrReq(
+    account?.nostr
+      ? [{ kinds: [10002], authors: [account?.nostr.pubkey], limit: 1 }]
+      : [],
+  );
+
+  const [relays, setRelays] = useState<RelayData[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const tags = events[0]?.tags ?? [];
+    const data = tags.map(tag => ({ url: tag[1], marker: tag[2] as 'read' | 'write' | undefined }));
+    setRelays(data);
+  }, [events]);
+
+  const handleSubmit = async (): Promise<void> => {
+    if (!signer || !relay) return;
+
+    setIsLoading(true);
+
+    const event = await signer.signEvent({
+      kind: 10002,
+      tags: relays.map(relay => relay.marker ? ['r', relay.url, relay.marker] : ['r', relay.url]),
+      content: '',
+      created_at: Math.floor(Date.now() / 1000),
+    });
+
+    // eslint-disable-next-line compat/compat
+    await relay.event(event, { signal: AbortSignal.timeout(1000) });
+
+    setIsLoading(false);
+  };
+
+  return (
+    <Column label={intl.formatMessage(messages.title)}>
+      <Form onSubmit={handleSubmit}>
+        <Stack space={4}>
+          <RelayEditor relays={relays} setRelays={setRelays} />
+
+          <FormActions>
+            <Button to='/settings' theme='tertiary'>
+              <FormattedMessage id='common.cancel' defaultMessage='Cancel' />
+            </Button>
+
+            <Button theme='primary' type='submit' disabled={isLoading}>
+              <FormattedMessage id='edit_profile.save' defaultMessage='Save' />
+            </Button>
+          </FormActions>
+        </Stack>
+      </Form>
+    </Column>
+  );
+};
+
+export default NostrRelays;

src/features/settings/index.tsx

@@ -21,6 +21,7 @@ const messages = defineMessages({
   deleteAccount: { id: 'settings.delete_account', defaultMessage: 'Delete Account' },
   editProfile: { id: 'settings.edit_profile', defaultMessage: 'Edit Profile' },
   editIdentity: { id: 'settings.edit_identity', defaultMessage: 'Identity' },
+  editRelays: { id: 'nostr_relays.title', defaultMessage: 'Relays' },
   exportData: { id: 'column.export_data', defaultMessage: 'Export data' },
   importData: { id: 'navigation_bar.import_data', defaultMessage: 'Import data' },
   mfaDisabled: { id: 'mfa.disabled', defaultMessage: 'Disabled' },
@@ -71,6 +72,7 @@ const Settings = () => {
                 <span className='max-w-full truncate'>{account?.source?.nostr?.nip05}</span>
               </ListItem>
             )}
+            {features.nostr && <ListItem label={intl.formatMessage(messages.editRelays)} to='/settings/relays' />}
           </List>
         </CardBody>
 

src/features/ui/index.tsx

@@ -139,6 +139,7 @@ import {
   BookmarkFolders,
   EditIdentity,
   Domains,
+  NostrRelays,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -313,6 +314,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       {features.accountAliases && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />}
       {features.accountMoving && <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} content={children} />}
       {features.backups && <WrappedRoute path='/settings/backups' page={DefaultPage} component={Backups} content={children} />}
+      <WrappedRoute path='/settings/relays' page={DefaultPage} component={NostrRelays} content={children} />
       <WrappedRoute path='/settings/email' page={DefaultPage} component={EditEmail} content={children} />
       <WrappedRoute path='/settings/password' page={DefaultPage} component={EditPassword} content={children} />
       <WrappedRoute path='/settings/account' page={DefaultPage} component={DeleteAccount} content={children} />

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

@@ -170,3 +170,4 @@ export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/
 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'));
+export const NostrRelays = lazy(() => import('soapbox/features/nostr-relays'));

src/locales/en.json

@@ -1115,6 +1115,10 @@
   "new_group_panel.title": "Create Group",
   "nostr_extension.found": "<link>Sign in</link> with browser extension.",
   "nostr_extension.not_found": "Browser extension not found.",
+  "nostr_relays.read_only": "Read-only",
+  "nostr_relays.read_write": "Read & write",
+  "nostr_relays.title": "Relays",
+  "nostr_relays.write_only": "Write-only",
   "nostr_signup.key-add.title": "Import Key",
   "nostr_signup.key.title": "You need a key to continue",
   "nostr_signup.keygen.title": "Your new key",

src/utils/features.ts

@@ -757,6 +757,9 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     nip05: v.software === DITTO,
 
+    /** Has a Nostr relay. */
+    nostr: !!instance.nostr?.relay,
+
     /**
      * Ability to sign Nostr events over websocket.
      * @see GET /api/v1/streaming?stream=nostr