feat: implement relay management
All checks were successful
Release to Staging / build_and_release (push) Successful in 46s

This commit is contained in:
daniyal 2024-09-25 20:21:53 +05:00
parent 26accf4eca
commit 37457128c5
3 changed files with 488 additions and 162 deletions

View File

@ -141,6 +141,9 @@ export class MetadataController {
})
}
public getNDKRelayList = async (hexKey: string) =>
getRelayListForUser(hexKey, this.ndk)
public getMuteLists = async (
pubkey?: string
): Promise<{

View File

@ -14,6 +14,13 @@ import { PreferencesSetting } from './preference'
import { AdminSetting } from './admin'
import { ProfileSection } from 'components/ProfileSection'
import 'styles/feed.css'
import 'styles/innerPage.css'
import 'styles/popup.css'
import 'styles/settings.css'
import 'styles/styles.css'
import 'styles/write.css'
export const SettingsPage = () => {
const location = useLocation()
const userState = useAppSelector((state) => state.user)
@ -67,7 +74,11 @@ const SettingTabs = () => {
const navLinks = [
{ path: appRoutes.settingsProfile, label: 'Profile', icon: <ProfileSVG /> },
{ path: appRoutes.settingsRelays, label: 'Relays (WIP)', icon: <RelaySVG /> },
{
path: appRoutes.settingsRelays,
label: 'Relays',
icon: <RelaySVG />
},
{
path: appRoutes.settingsPreferences,
label: 'Preferences (WIP)',

View File

@ -1,123 +1,442 @@
import { NDKRelayList } from '@nostr-dev-kit/ndk'
import { InputField } from 'components/Inputs'
import { LoadingSpinner } from 'components/LoadingSpinner'
import {
MetadataController,
RelayController,
UserRelaysType
} from 'controllers'
import { useAppSelector, useDidMount } from 'hooks'
import { Event, kinds, UnsignedEvent } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { toast } from 'react-toastify'
import { log, LogType, normalizeWebSocketURL, now } from 'utils'
const READ_MARKER = 'read'
const WRITE_MARKER = 'write'
export const RelaySettings = () => {
const userState = useAppSelector((state) => state.user)
const [ndkRelayList, setNDKRelayList] = useState<NDKRelayList | null>(null)
const [isPublishing, setIsPublishing] = useState(false)
const [inputValue, setInputValue] = useState('')
useEffect(() => {
const fetchRelayList = async (pubkey: string) => {
const metadataController = await MetadataController.getInstance()
metadataController
.getNDKRelayList(pubkey)
.then((res) => {
setNDKRelayList(res)
})
.catch((err) => {
toast.error(
`An error occurred in fetching user relay list: ${
err.message || err
}`
)
setNDKRelayList(null)
})
}
if (userState.auth && userState.user?.pubkey) {
fetchRelayList(userState.user.pubkey as string)
} else {
setNDKRelayList(null)
}
}, [userState])
const handleAdd = async (relayUrl: string) => {
if (!ndkRelayList) return
const normalizedUrl = normalizeWebSocketURL(relayUrl)
const rawEvent = ndkRelayList.rawEvent()
const unsignedEvent: UnsignedEvent = {
pubkey: rawEvent.pubkey,
kind: kinds.RelayList,
tags: [...rawEvent.tags, ['r', normalizedUrl]],
content: rawEvent.content,
created_at: now()
}
setIsPublishing(true)
const signedEvent = await window.nostr
?.signEvent(unsignedEvent)
.then((event) => event as Event)
.catch((err) => {
toast.error('Failed to sign the event!')
log(true, LogType.Error, 'Failed to sign the event!', err)
return null
})
if (!signedEvent) {
setIsPublishing(false)
return
}
const publishedOnRelays =
await RelayController.getInstance().publishOnRelays(
signedEvent,
ndkRelayList.writeRelayUrls
)
// Handle cases where publishing failed or succeeded
if (publishedOnRelays.length === 0) {
toast.error('Failed to publish relay list event on any relay')
} else {
toast.success(
`Event published successfully to the following relays\n\n${publishedOnRelays.join(
'\n'
)}`
)
const newNDKRelayList = new NDKRelayList(ndkRelayList.ndk, signedEvent)
setNDKRelayList(newNDKRelayList)
}
setIsPublishing(false)
}
const handleRemove = async (relayUrl: string) => {
if (!ndkRelayList) return
const normalizedUrl = normalizeWebSocketURL(relayUrl)
const rawEvent = ndkRelayList.rawEvent()
const nonRelayTags = rawEvent.tags.filter(
(tag) => tag[0] !== 'r' && tag[0] !== 'relay'
)
const relayTags = rawEvent.tags
.filter((tag) => tag[0] === 'r' || tag[0] === 'relay')
.filter((tag) => normalizeWebSocketURL(tag[1]) !== normalizedUrl)
const unsignedEvent: UnsignedEvent = {
pubkey: rawEvent.pubkey,
kind: kinds.RelayList,
tags: [...nonRelayTags, ...relayTags],
content: rawEvent.content,
created_at: now()
}
setIsPublishing(true)
const signedEvent = await window.nostr
?.signEvent(unsignedEvent)
.then((event) => event as Event)
.catch((err) => {
toast.error('Failed to sign the event!')
log(true, LogType.Error, 'Failed to sign the event!', err)
return null
})
if (!signedEvent) {
setIsPublishing(false)
return
}
const publishedOnRelays =
await RelayController.getInstance().publishOnRelays(
signedEvent,
ndkRelayList.writeRelayUrls
)
// Handle cases where publishing failed or succeeded
if (publishedOnRelays.length === 0) {
toast.error('Failed to publish relay list event on any relay')
} else {
toast.success(
`Event published successfully to the following relays\n\n${publishedOnRelays.join(
'\n'
)}`
)
const newNDKRelayList = new NDKRelayList(ndkRelayList.ndk, signedEvent)
setNDKRelayList(newNDKRelayList)
}
setIsPublishing(false)
}
const changeRelayType = async (
relayUrl: string,
relayType: UserRelaysType
) => {
if (!ndkRelayList) return
const normalizedUrl = normalizeWebSocketURL(relayUrl)
const rawEvent = ndkRelayList.rawEvent()
const nonRelayTags = rawEvent.tags.filter(
(tag) => tag[0] !== 'r' && tag[0] !== 'relay'
)
// all relay tags except the changing one
const relayTags = rawEvent.tags
.filter((tag) => tag[0] === 'r' || tag[0] === 'relay')
.filter((tag) => normalizeWebSocketURL(tag[1]) !== normalizedUrl)
// create a new relay tag
const tag = ['r', normalizedUrl]
// set the relay marker
if (relayType !== UserRelaysType.Both) {
tag.push(relayType === UserRelaysType.Read ? READ_MARKER : WRITE_MARKER)
}
const unsignedEvent: UnsignedEvent = {
pubkey: rawEvent.pubkey,
kind: kinds.RelayList,
tags: [...nonRelayTags, ...relayTags, tag],
content: rawEvent.content,
created_at: now()
}
setIsPublishing(true)
const signedEvent = await window.nostr
?.signEvent(unsignedEvent)
.then((event) => event as Event)
.catch((err) => {
toast.error('Failed to sign the event!')
log(true, LogType.Error, 'Failed to sign the event!', err)
return null
})
if (!signedEvent) {
setIsPublishing(false)
return
}
const publishedOnRelays =
await RelayController.getInstance().publishOnRelays(
signedEvent,
ndkRelayList.writeRelayUrls
)
// Handle cases where publishing failed or succeeded
if (publishedOnRelays.length === 0) {
toast.error('Failed to publish relay list event on any relay')
} else {
toast.success(
`Event published successfully to the following relays\n\n${publishedOnRelays.join(
'\n'
)}`
)
const newNDKRelayList = new NDKRelayList(ndkRelayList.ndk, signedEvent)
setNDKRelayList(newNDKRelayList)
}
setIsPublishing(false)
}
if (!ndkRelayList)
return <div>Could not fetch user relay list or user is not logged in </div>
const relayMap = new Map<string, UserRelaysType>()
ndkRelayList.readRelayUrls.forEach((relayUrl) => {
const normalizedUrl = normalizeWebSocketURL(relayUrl)
if (!relayMap.has(normalizedUrl)) {
relayMap.set(normalizedUrl, UserRelaysType.Read)
}
})
ndkRelayList.writeRelayUrls.forEach((relayUrl) => {
const normalizedUrl = normalizeWebSocketURL(relayUrl)
if (relayMap.has(normalizedUrl)) {
relayMap.set(normalizedUrl, UserRelaysType.Both)
} else {
relayMap.set(normalizedUrl, UserRelaysType.Write)
}
})
const relayEntries = Array.from(relayMap.entries())
return (
<div className='IBMSMSplitMainFullSideFWMid'>
<div className='IBMSMSplitMainFullSideSec'>
<div className='relayList'>
<div className='inputLabelWrapperMain'>
<label className='form-label labelMain'>Your relays</label>
<>
{isPublishing && <LoadingSpinner desc='Publishing relay list event' />}
<div className='IBMSMSplitMainFullSideFWMid'>
<div className='IBMSMSplitMainFullSideSec'>
<div className='relayList'>
<div className='inputLabelWrapperMain'>
<label className='form-label labelMain'>Your relays</label>
</div>
{relayEntries.map(([relayUrl, relayType]) => (
<RelayListItem
key={relayUrl}
relayUrl={relayUrl}
relayType={relayType}
isOwnRelay
handleAdd={handleAdd}
handleRemove={handleRemove}
changeRelayType={changeRelayType}
/>
))}
</div>
</div>
<div className='IBMSMSplitMainFullSideSec'>
<InputField
label='Add Relays'
placeholder='wss://some-relay.com'
type='text'
name='relay'
value={inputValue}
onChange={(_, value) => setInputValue(value)}
/>
<button
className='btn btnMain'
type='button'
onClick={() => handleAdd(inputValue).then(() => setInputValue(''))}
>
Add
</button>
</div>
<div className='IBMSMSplitMainFullSideSec'>
<div className='inputLabelWrapperMain'>
<label className='form-label labelMain'>DEG Mods Relays</label>
<p className='labelDescriptionMain'>
We recommend adding one of our relays if you're planning to
frequently use DEG Mods, for a better experience.
</p>
</div>
<div className='relayList'>
{degmodRelays.map((relayUrl) => {
const normalizedUrl = normalizeWebSocketURL(relayUrl)
const alreadyAdded = relayMap.has(normalizedUrl)
return (
<RelayListItem
key={relayUrl}
relayUrl={normalizedUrl}
alreadyAdded={alreadyAdded}
handleAdd={handleAdd}
handleRemove={handleRemove}
changeRelayType={changeRelayType}
/>
)
})}
</div>
</div>
<div className='IBMSMSplitMainFullSideSec'>
<div className='inputLabelWrapperMain'>
<label className='form-label labelMain'>Recommended Relays</label>
<p className='labelDescriptionMain'>
Relays we recommend using as they support the same functionalities
that our relays provide.
</p>
</div>
<div className='relayList'>
{recommendRelays.map((relayUrl) => {
const normalizedUrl = normalizeWebSocketURL(relayUrl)
const alreadyAdded = relayMap.has(normalizedUrl)
return (
<RelayListItem
key={relayUrl}
relayUrl={normalizedUrl}
alreadyAdded={alreadyAdded}
handleAdd={handleAdd}
handleRemove={handleRemove}
changeRelayType={changeRelayType}
/>
)
})}
</div>
{usersRelays.map((relay, index) => (
<RelayListItem key={index} item={relay} isOwnRelay />
))}
</div>
</div>
<div className='IBMSMSplitMainFullSideSec'>
<InputField
label='Add Relays'
placeholder='wss://some-relay.com'
type='text'
name='relay'
value=''
onChange={() => {}}
/>
<button className='btn btnMain' type='button'>
Add
</button>
</div>
<div className='IBMSMSplitMainFullSideSec'>
<div className='inputLabelWrapperMain'>
<label className='form-label labelMain'>DEG Mods Relays</label>
<p className='labelDescriptionMain'>
We recommend adding one of our relays if you're planning to
frequently use DEG Mods, for a better experience.
</p>
</div>
<div className='relayList'>
{degmodsRelays.map((relay, index) => (
<RelayListItem key={index} item={relay} />
))}
</div>
</div>
<div className='IBMSMSplitMainFullSideSec'>
<div className='inputLabelWrapperMain'>
<label className='form-label labelMain'>Recommended Relays</label>
<p className='labelDescriptionMain'>
Relays we recommend using as they support the same functionalities
that our relays provide.
</p>
</div>
<div className='relayList'>
{recommendRelays.map((relay, index) => (
<RelayListItem key={index} item={relay} />
))}
</div>
</div>
</div>
</>
)
}
const RelayListItem = ({
item,
isOwnRelay
}: {
item: RelayItem
type RelayItemProps = {
relayUrl: string
relayType?: UserRelaysType
isOwnRelay?: boolean
}) => {
alreadyAdded?: boolean
handleAdd: (relayUrl: string) => void
handleRemove: (relayUrl: string) => void
changeRelayType: (relayUrl: string, relayType: UserRelaysType) => void
}
const RelayListItem = ({
relayUrl,
relayType,
isOwnRelay,
alreadyAdded,
handleAdd,
handleRemove,
changeRelayType
}: RelayItemProps) => {
const [isConnected, setIsConnected] = useState(false)
useDidMount(() => {
RelayController.getInstance()
.connectRelay(relayUrl)
.then((relay) => {
if (relay && relay.connected) {
setIsConnected(true)
} else {
setIsConnected(false)
}
})
})
return (
<div className='relayListItem'>
<div className='relayListItemSec relayListItemSecPic'>
<div
className='relayListItemSecPicImg'
style={{
background: item.backgroundColor
background: isConnected ? '#60ae60' : '#cd4d45'
}}
></div>
</div>
<div className='relayListItemSec relayListItemSecDetails'>
<p className='relayListItemSecDetailsText'>{item.url}</p>
<p className='relayListItemSecDetailsText'>{relayUrl}</p>
<div className='relayListItemSecDetailsExtra'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='-64 0 512 512'
width='1em'
height='1em'
fill='currentColor'
data-bs-toggle='tooltip'
data-bss-tooltip
aria-label={item.readTitle}
>
<path d='M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256z'></path>
</svg>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 -32 576 576'
width='1em'
height='1em'
fill='currentColor'
data-bs-toggle='tooltip'
data-bss-tooltip
aria-label={item.writeTitle}
>
<path d='M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V299.6L289.3 394.3C281.1 402.5 275.3 412.8 272.5 424.1L257.4 484.2C255.1 493.6 255.7 503.2 258.8 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256zM564.1 250.1C579.8 265.7 579.8 291 564.1 306.7L534.7 336.1L463.8 265.1L493.2 235.7C508.8 220.1 534.1 220.1 549.8 235.7L564.1 250.1zM311.9 416.1L441.1 287.8L512.1 358.7L382.9 487.9C378.8 492 373.6 494.9 368 496.3L307.9 511.4C302.4 512.7 296.7 511.1 292.7 507.2C288.7 503.2 287.1 497.4 288.5 491.1L303.5 431.8C304.9 426.2 307.8 421.1 311.9 416.1V416.1z'></path>
</svg>
{item.subscribedTitle && (
{(relayType === UserRelaysType.Read ||
relayType === UserRelaysType.Both) && (
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
viewBox='-64 0 512 512'
width='1em'
height='1em'
fill='currentColor'
data-bs-toggle='tooltip'
data-bss-tooltip
aria-label={item.subscribedTitle}
aria-label='Read'
>
<path d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zm-141.651-35.33c4.937-32.999-20.191-50.739-54.55-62.573l11.146-44.702-27.213-6.781-10.851 43.524c-7.154-1.783-14.502-3.464-21.803-5.13l10.929-43.81-27.198-6.781-11.153 44.686c-5.922-1.349-11.735-2.682-17.377-4.084l.031-.14-37.53-9.37-7.239 29.062s20.191 4.627 19.765 4.913c11.022 2.751 13.014 10.044 12.68 15.825l-12.696 50.925c.76.194 1.744.473 2.829.907-.907-.225-1.876-.473-2.876-.713l-17.796 71.338c-1.349 3.348-4.767 8.37-12.471 6.464.271.395-19.78-4.937-19.78-4.937l-13.51 31.147 35.414 8.827c6.588 1.651 13.045 3.379 19.4 5.006l-11.262 45.213 27.182 6.781 11.153-44.733a1038.209 1038.209 0 0 0 21.687 5.627l-11.115 44.523 27.213 6.781 11.262-45.128c46.404 8.781 81.299 5.239 95.986-36.727 11.836-33.79-.589-53.281-25.004-65.991 17.78-4.098 31.174-15.792 34.747-39.949zm-62.177 87.179c-8.41 33.79-65.308 15.523-83.755 10.943l14.944-59.899c18.446 4.603 77.6 13.717 68.811 48.956zm8.417-87.667c-7.673 30.736-55.031 15.12-70.393 11.292l13.548-54.327c15.363 3.828 64.836 10.973 56.845 43.035z'></path>
<path d='M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256z'></path>
</svg>
)}
{(relayType === UserRelaysType.Write ||
relayType === UserRelaysType.Both) && (
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 -32 576 576'
width='1em'
height='1em'
fill='currentColor'
data-bs-toggle='tooltip'
data-bss-tooltip
aria-label='Write'
>
<path d='M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V299.6L289.3 394.3C281.1 402.5 275.3 412.8 272.5 424.1L257.4 484.2C255.1 493.6 255.7 503.2 258.8 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256zM564.1 250.1C579.8 265.7 579.8 291 564.1 306.7L534.7 336.1L463.8 265.1L493.2 235.7C508.8 220.1 534.1 220.1 549.8 235.7L564.1 250.1zM311.9 416.1L441.1 287.8L512.1 358.7L382.9 487.9C378.8 492 373.6 494.9 368 496.3L307.9 511.4C302.4 512.7 296.7 511.1 292.7 507.2C288.7 503.2 287.1 497.4 288.5 491.1L303.5 431.8C304.9 426.2 307.8 421.1 311.9 416.1V416.1z'></path>
</svg>
)}
</div>
@ -148,17 +467,72 @@ const RelayListItem = ({
className='dropdown-menu dropdownMainMenu'
style={{ position: 'absolute' }}
>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
{(relayType === UserRelaysType.Read ||
relayType === UserRelaysType.Write) && (
<div
className='dropdown-item dropdownMainMenuItem'
onClick={() => changeRelayType(relayUrl, UserRelaysType.Both)}
>
Read & Write
</div>
)}
{relayType === UserRelaysType.Both && (
<>
<div
className='dropdown-item dropdownMainMenuItem'
onClick={() =>
changeRelayType(relayUrl, UserRelaysType.Read)
}
>
Read Only
</div>
<div
className='dropdown-item dropdownMainMenuItem'
onClick={() =>
changeRelayType(relayUrl, UserRelaysType.Write)
}
>
Write Only
</div>
</>
)}
{relayType === UserRelaysType.Read && (
<div
className='dropdown-item dropdownMainMenuItem'
onClick={() =>
changeRelayType(relayUrl, UserRelaysType.Write)
}
>
Write Only
</div>
)}
{relayType === UserRelaysType.Write && (
<div
className='dropdown-item dropdownMainMenuItem'
onClick={() => changeRelayType(relayUrl, UserRelaysType.Read)}
>
Read Only
</div>
)}
<div
className='dropdown-item dropdownMainMenuItem'
onClick={() => handleRemove(relayUrl)}
>
Remove
</a>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Details
</a>
</div>
</div>
</div>
)}
{!isOwnRelay && (
<button className='btn btnMain' type='button'>
{!isOwnRelay && !alreadyAdded && (
<button
className='btn btnMain'
type='button'
onClick={() => handleAdd(relayUrl)}
>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='-32 0 512 512'
@ -175,68 +549,6 @@ const RelayListItem = ({
)
}
interface RelayItem {
url: string
backgroundColor: string
readTitle: string
writeTitle: string
subscribedTitle: string
}
const degmodRelays = ['wss://relay.degmods.com']
const usersRelays: RelayItem[] = [
{
url: 'wss://relay.wibblywobbly.com',
backgroundColor: '#cd4d45',
readTitle: 'Read',
writeTitle: 'Write',
subscribedTitle: ''
},
{
url: 'wss://relay.wibblywobbly.com',
backgroundColor: '#60ae60',
readTitle: 'Read',
writeTitle: 'Write',
subscribedTitle: 'Paid (Subscribed)'
},
{
url: 'wss://relay.degmods.com',
backgroundColor: '#60ae60',
readTitle: 'Read',
writeTitle: 'Write',
subscribedTitle: ''
}
]
const degmodsRelays: RelayItem[] = [
{
url: 'wss://relay1.degmods.com',
backgroundColor: '#60ae60',
readTitle: 'Read',
writeTitle: 'Write',
subscribedTitle: ''
},
{
url: 'wss://relay2.degmods.com',
backgroundColor: '#60ae60',
readTitle: 'Read',
writeTitle: 'Write',
subscribedTitle: ''
}
]
const recommendRelays: RelayItem[] = [
{
url: 'wss://relay1.degmods.com',
backgroundColor: '#60ae60',
readTitle: 'Read',
writeTitle: 'Write',
subscribedTitle: ''
},
{
url: 'wss://relay2.degmods.com',
backgroundColor: '#60ae60',
readTitle: 'Read',
writeTitle: 'Write',
subscribedTitle: ''
}
]
const recommendRelays = ['wss://relay.degmods.com']