Relay firehose browser tools: https://compare.hose.cam
support custom relays (via url text entry)
+46
-1
+46
-1
src/App.tsx
+46
-1
src/App.tsx
···
32
32
const [keepalive, setKeepalive] = useState(() => () => {});
33
33
const [rateBars, setRateBars] = useState({ series: [] } as any);
34
34
const [died, setDied] = useState(false);
35
+
const [customRelayHost, setCustomRelayHost] = useState("");
35
36
36
37
useEffect(() => {
37
38
let lastChangeover = performance.now();
···
118
119
keepalive();
119
120
}
120
121
122
+
function getCustomRelayURL(): string {
123
+
if (!customRelayHost) return "";
124
+
125
+
try {
126
+
let url: URL;
127
+
if (customRelayHost.includes("://")) {
128
+
url = new URL(customRelayHost);
129
+
} else {
130
+
url = new URL("https://" + customRelayHost);
131
+
}
132
+
url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
133
+
134
+
return url.origin;
135
+
} catch (err) {
136
+
return "";
137
+
}
138
+
}
139
+
121
140
return (
122
141
<>
123
142
<h1>compare hoses</h1>
···
137
156
</label>
138
157
</p>
139
158
))}
159
+
160
+
<p style={{margin: 0}}>
161
+
<label>
162
+
<input
163
+
type='checkbox'
164
+
onChange={e => {
165
+
const url = getCustomRelayURL();
166
+
if (url) showRelay(url, e.target.checked);
167
+
}}
168
+
checked={relays.includes(getCustomRelayURL())}
169
+
/>
170
+
{` `}
171
+
<input
172
+
type='text'
173
+
placeholder='wss://…'
174
+
value={customRelayHost}
175
+
onChange={(e) => {
176
+
const oldURL = getCustomRelayURL();
177
+
setRelays(relays => relays.includes(oldURL) ? relays.filter(u => u !== oldURL) : relays);
178
+
setCustomRelayHost(e.target.value);
179
+
}}
180
+
/>
181
+
{` `}
182
+
{customRelayHost && (<code>{getCustomRelayURL()}</code>)}
183
+
</label>
184
+
</p>
140
185
</form>
141
186
142
187
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '2em', textAlign: 'left' }}>
143
188
{relays.map(url => {
144
-
const { desc } = knownRelays.find((r: Relay) => r.url === url)!;
189
+
const { desc } = knownRelays.find((r: Relay) => r.url === url) ?? { desc: "custom relay" };
145
190
return (
146
191
<div key={url}>
147
192
<Relay