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