Nostr relays See merge request soapbox-pub/soapbox!2973environments/review-main-yi2y9f/deployments/4510
commit
738f8bfd58
@ -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 };
|
@ -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;
|
Loading…
Reference in new issue