initial maddafacka
This commit is contained in:
sakrecoer
commit
57a252b983
16 changed files with 4135 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
node_modules
|
||||||
|
package-lock-json
|
||||||
|
*.pem
|
||||||
|
dist/
|
||||||
14
index.html
Normal file
14
index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Relay Template - Nostr</title>
|
||||||
|
<meta name="description" content="Create and share Nostr relay templates for your community" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1924
package-lock.json
generated
Normal file
1924
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
22
package.json
Normal file
22
package.json
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"name": "relay-template-app",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"nostr-tools": "^2.0.0",
|
||||||
|
"react-router-dom": "^6.20.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.43",
|
||||||
|
"@types/react-dom": "^18.2.17",
|
||||||
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
|
"vite": "^5.0.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
336
src/App.css
Normal file
336
src/App.css
Normal file
|
|
@ -0,0 +1,336 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 0;
|
||||||
|
border-bottom: 2px solid #e0e0e0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header nav a {
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header nav a:hover {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-badge {
|
||||||
|
background: #e8f5e9;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2e7d32;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 50px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #e0e0e0;
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form Styles */
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #7c4dff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button Styles */
|
||||||
|
.btn-primary {
|
||||||
|
background: #7c4dff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: #6c3fdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #e0e0e0;
|
||||||
|
color: #333;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: #ff5252;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover:not(:disabled) {
|
||||||
|
background: #d32f2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nostr {
|
||||||
|
background: #ff6b00;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nostr:hover:not(:disabled) {
|
||||||
|
background: #e85a00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Relay List */
|
||||||
|
.relay-list {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item .relay-input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Share Box */
|
||||||
|
.share-box {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
background: #e8f5e9;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 4px solid #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-box input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
margin: 8px 0;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-box button {
|
||||||
|
background: #4caf50;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Template Applier */
|
||||||
|
.template-preview {
|
||||||
|
background: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 20px 0;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-preview h3 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-preview ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-preview li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-url {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-permissions {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-box, .warning {
|
||||||
|
padding: 20px;
|
||||||
|
background: #ffebee;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 4px solid #f44336;
|
||||||
|
color: #c62828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
background: #fff3e0;
|
||||||
|
border-left-color: #ff9800;
|
||||||
|
color: #e65100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-box {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
background: #e8f5e9;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 4px solid #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.app-header {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header nav {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item label {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Connection status */
|
||||||
|
.connection-status {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-status .warning {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-status .warning .btn-nostr {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Info box for connection status */
|
||||||
|
.info-box {
|
||||||
|
background: #e3f2fd;
|
||||||
|
border-left: 4px solid #2196f3;
|
||||||
|
color: #0d47a1;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box code {
|
||||||
|
background: rgba(0,0,0,0.08);
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
43
src/App.jsx
Normal file
43
src/App.jsx
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { HashRouter, Routes, Route, Link } from 'react-router-dom';
|
||||||
|
import TemplateCreator from './components/TemplateCreator';
|
||||||
|
import TemplateApplier from './components/TemplateApplier';
|
||||||
|
import './App.css';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [connectedPubkey, setConnectedPubkey] = useState(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HashRouter>
|
||||||
|
<div className="app">
|
||||||
|
<header className="app-header">
|
||||||
|
<h1>⚡ Relay Template</h1>
|
||||||
|
<nav>
|
||||||
|
<Link to="/">🏠 Create Template</Link>
|
||||||
|
{/* Remove the broken link - users will access /apply/:encoded via generated links */}
|
||||||
|
</nav>
|
||||||
|
{connectedPubkey && (
|
||||||
|
<div className="user-badge">
|
||||||
|
✅ {connectedPubkey.slice(0, 8)}...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={
|
||||||
|
<TemplateCreator setConnectedPubkey={setConnectedPubkey} />
|
||||||
|
} />
|
||||||
|
<Route path="/apply/:encoded" element={
|
||||||
|
<TemplateApplier connectedPubkey={connectedPubkey} setConnectedPubkey={setConnectedPubkey} />
|
||||||
|
} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p>Self-contained • Built with Nostr</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</HashRouter>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
49
src/components/NostrConnect.jsx
Normal file
49
src/components/NostrConnect.jsx
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
const NostrConnect = ({ setConnectedPubkey }) => {
|
||||||
|
const [pubkey, setPubkey] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const connect = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
if (!window.nostr) {
|
||||||
|
throw new Error('Please install a Nostr extension (Alby, Nos2x, etc.)');
|
||||||
|
}
|
||||||
|
|
||||||
|
const pubkey = await window.nostr.getPublicKey();
|
||||||
|
setPubkey(pubkey);
|
||||||
|
setConnectedPubkey(pubkey);
|
||||||
|
} catch (error) {
|
||||||
|
alert('Failed to connect: ' + error.message);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check if already connected
|
||||||
|
if (window.nostr) {
|
||||||
|
window.nostr.getPublicKey().then(pk => {
|
||||||
|
setPubkey(pk);
|
||||||
|
setConnectedPubkey(pk);
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (pubkey) {
|
||||||
|
return (
|
||||||
|
<div className="nostr-connected">
|
||||||
|
✅ Connected: {pubkey.slice(0, 8)}...{pubkey.slice(-8)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button onClick={connect} disabled={loading} className="btn-nostr">
|
||||||
|
{loading ? 'Connecting...' : '🔑 Connect Nostr'}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NostrConnect;
|
||||||
44
src/components/RelayList.jsx
Normal file
44
src/components/RelayList.jsx
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const RelayList = ({ relays, onUpdate, onRemove }) => {
|
||||||
|
return (
|
||||||
|
<div className="relay-list">
|
||||||
|
{relays.map((relay, index) => (
|
||||||
|
<div key={index} className="relay-item">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={relay.url}
|
||||||
|
onChange={(e) => onUpdate(index, 'url', e.target.value)}
|
||||||
|
placeholder="wss://relay.example.com"
|
||||||
|
className="relay-input"
|
||||||
|
/>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={relay.read}
|
||||||
|
onChange={(e) => onUpdate(index, 'read', e.target.checked)}
|
||||||
|
/>
|
||||||
|
Read
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={relay.write}
|
||||||
|
onChange={(e) => onUpdate(index, 'write', e.target.checked)}
|
||||||
|
/>
|
||||||
|
Write
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
onClick={() => onRemove(index)}
|
||||||
|
className="btn-danger"
|
||||||
|
disabled={relays.length === 1}
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RelayList;
|
||||||
273
src/components/TemplateApplier.jsx
Normal file
273
src/components/TemplateApplier.jsx
Normal file
|
|
@ -0,0 +1,273 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Link, useParams } from 'react-router-dom';
|
||||||
|
import { decodeTemplate, validateTemplate } from '../utils/templates';
|
||||||
|
import useNostr from '../hooks/useNostr';
|
||||||
|
|
||||||
|
const TemplateApplier = ({ connectedPubkey, setConnectedPubkey }) => {
|
||||||
|
const { encoded } = useParams();
|
||||||
|
const [template, setTemplate] = useState(null);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [applying, setApplying] = useState(false);
|
||||||
|
const [results, setResults] = useState(null);
|
||||||
|
const [publishResults, setPublishResults] = useState(null);
|
||||||
|
const [isConnecting, setIsConnecting] = useState(false);
|
||||||
|
const { publishKind10002, isConnected, connect, pubkey } = useNostr();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!encoded) {
|
||||||
|
setError('No template provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Decode and validate the template
|
||||||
|
const decoded = decodeTemplate(encoded);
|
||||||
|
validateTemplate(decoded);
|
||||||
|
setTemplate(decoded);
|
||||||
|
setError('');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Template decode error:', err);
|
||||||
|
setError('Invalid template: ' + err.message);
|
||||||
|
}
|
||||||
|
}, [encoded]);
|
||||||
|
|
||||||
|
// Update parent when connection changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (pubkey && !connectedPubkey) {
|
||||||
|
setConnectedPubkey(pubkey);
|
||||||
|
}
|
||||||
|
}, [pubkey, connectedPubkey, setConnectedPubkey]);
|
||||||
|
|
||||||
|
const handleConnect = async () => {
|
||||||
|
setIsConnecting(true);
|
||||||
|
try {
|
||||||
|
const pk = await connect();
|
||||||
|
setConnectedPubkey(pk);
|
||||||
|
setError('');
|
||||||
|
} catch (err) {
|
||||||
|
setError('Failed to connect: ' + err.message);
|
||||||
|
} finally {
|
||||||
|
setIsConnecting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleApplyTemplate = async () => {
|
||||||
|
if (!template) return;
|
||||||
|
|
||||||
|
setApplying(true);
|
||||||
|
setError('');
|
||||||
|
setPublishResults(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Get pubkey from parent or hook
|
||||||
|
let pubkeyToUse = connectedPubkey || pubkey;
|
||||||
|
|
||||||
|
if (!pubkeyToUse) {
|
||||||
|
// Try to connect
|
||||||
|
try {
|
||||||
|
pubkeyToUse = await connect();
|
||||||
|
setConnectedPubkey(pubkeyToUse);
|
||||||
|
} catch (err) {
|
||||||
|
throw new Error('Please connect your Nostr extension first');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!pubkeyToUse) {
|
||||||
|
throw new Error('No Nostr public key available. Please connect your extension.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Publish the kind 10002 event
|
||||||
|
const result = await publishKind10002(template.relays, pubkeyToUse);
|
||||||
|
|
||||||
|
setPublishResults({
|
||||||
|
success: true,
|
||||||
|
eventId: result.event.id,
|
||||||
|
publishedTo: result.results.filter(r => r.success).length,
|
||||||
|
totalRelays: result.results.length,
|
||||||
|
details: result.results
|
||||||
|
});
|
||||||
|
|
||||||
|
setResults({
|
||||||
|
success: true,
|
||||||
|
eventId: result.event.id,
|
||||||
|
published: result.event
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
setError('Failed to apply template: ' + err.message);
|
||||||
|
setPublishResults({
|
||||||
|
success: false,
|
||||||
|
error: err.message
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setApplying(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle case where template fails to decode
|
||||||
|
if (error && !template) {
|
||||||
|
return (
|
||||||
|
<div className="template-applier">
|
||||||
|
<h2>Apply Relay Template</h2>
|
||||||
|
<div className="error-box">
|
||||||
|
<h3>❌ Error Loading Template</h3>
|
||||||
|
<p>{error}</p>
|
||||||
|
<p style={{ marginTop: '10px', fontSize: '14px', color: '#666' }}>
|
||||||
|
The link you clicked may be malformed or expired. Please try generating a new template.
|
||||||
|
</p>
|
||||||
|
<Link to="/" className="btn-primary" style={{ display: 'inline-block', marginTop: '10px', width: 'auto' }}>
|
||||||
|
← Go Back to Create
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!template) {
|
||||||
|
return (
|
||||||
|
<div className="template-applier">
|
||||||
|
<div className="loading">Loading template...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="template-applier">
|
||||||
|
<h2>Apply Relay Template</h2>
|
||||||
|
|
||||||
|
<div className="template-preview">
|
||||||
|
<h3>{template.name}</h3>
|
||||||
|
{template.description && <p>{template.description}</p>}
|
||||||
|
{template.created_at && (
|
||||||
|
<p style={{ fontSize: '14px', color: '#999', marginTop: '4px' }}>
|
||||||
|
Created: {new Date(template.created_at * 1000).toLocaleDateString()}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="relay-preview">
|
||||||
|
<h4>📡 Relays in this template ({template.relays.length}):</h4>
|
||||||
|
<ul>
|
||||||
|
{template.relays.map((relay, index) => (
|
||||||
|
<li key={index}>
|
||||||
|
<span className="relay-url">{relay.url}</span>
|
||||||
|
<span className="relay-permissions">
|
||||||
|
{relay.read ? '📖 Read' : '🔒 No Read'}
|
||||||
|
{relay.write ? ' ✍️ Write' : ' 🔒 No Write'}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Connection Status & Button */}
|
||||||
|
<div className="connection-status" style={{ marginBottom: '16px' }}>
|
||||||
|
{(connectedPubkey || pubkey) ? (
|
||||||
|
<div className="info-box">
|
||||||
|
✅ Connected as: <code>{(connectedPubkey || pubkey).slice(0, 8)}...{(connectedPubkey || pubkey).slice(-8)}</code>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="warning" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '10px' }}>
|
||||||
|
<span>⚠️ Not connected to Nostr. Please connect your extension to publish.</span>
|
||||||
|
<button
|
||||||
|
onClick={handleConnect}
|
||||||
|
disabled={isConnecting}
|
||||||
|
className="btn-nostr"
|
||||||
|
style={{ width: 'auto' }}
|
||||||
|
>
|
||||||
|
{isConnecting ? '⏳ Connecting...' : '🔑 Connect Nostr'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Publish Button */}
|
||||||
|
{!results && (connectedPubkey || pubkey) && (
|
||||||
|
<button
|
||||||
|
onClick={handleApplyTemplate}
|
||||||
|
className="btn-primary"
|
||||||
|
disabled={applying}
|
||||||
|
style={{
|
||||||
|
fontSize: '18px',
|
||||||
|
padding: '16px',
|
||||||
|
marginTop: '10px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{applying ? (
|
||||||
|
'⏳ Publishing...'
|
||||||
|
) : (
|
||||||
|
'✅ Apply Template & Publish to Relays'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error Display */}
|
||||||
|
{error && !results && (
|
||||||
|
<div className="error-box" style={{ marginTop: '16px' }}>
|
||||||
|
<strong>Error:</strong> {error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Success Results */}
|
||||||
|
{publishResults && publishResults.success && (
|
||||||
|
<div className="success-box" style={{ marginTop: '20px' }}>
|
||||||
|
<h3>✅ Template Applied Successfully!</h3>
|
||||||
|
<p style={{ marginTop: '8px' }}>
|
||||||
|
Published to <strong>{publishResults.publishedTo}</strong> of {publishResults.totalRelays} relays
|
||||||
|
</p>
|
||||||
|
<p style={{ fontSize: '13px', color: '#555', marginTop: '4px' }}>
|
||||||
|
Event ID: <code style={{ fontSize: '12px', wordBreak: 'break-all' }}>
|
||||||
|
{publishResults.eventId}
|
||||||
|
</code>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<details style={{ marginTop: '12px' }}>
|
||||||
|
<summary style={{ cursor: 'pointer', color: '#2e7d32' }}>
|
||||||
|
📊 Publication Details
|
||||||
|
</summary>
|
||||||
|
<ul style={{ marginTop: '8px', fontSize: '13px' }}>
|
||||||
|
{publishResults.details.map((result, index) => (
|
||||||
|
<li key={index} style={{
|
||||||
|
padding: '4px 0',
|
||||||
|
color: result.success ? '#2e7d32' : '#c62828'
|
||||||
|
}}>
|
||||||
|
{result.success ? '✅' : '❌'} {result.url}
|
||||||
|
{result.error && ` - ${result.error}`}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div style={{ marginTop: '16px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||||
|
<Link to="/" className="btn-secondary">
|
||||||
|
← Create Another Template
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
className="btn-secondary"
|
||||||
|
>
|
||||||
|
🔄 Apply Again
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error Results */}
|
||||||
|
{publishResults && !publishResults.success && (
|
||||||
|
<div className="error-box" style={{ marginTop: '20px' }}>
|
||||||
|
<h3>❌ Failed to Publish</h3>
|
||||||
|
<p>{publishResults.error}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setPublishResults(null)}
|
||||||
|
className="btn-secondary"
|
||||||
|
style={{ marginTop: '10px' }}
|
||||||
|
>
|
||||||
|
Try Again
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TemplateApplier;
|
||||||
132
src/components/TemplateCreator.jsx
Normal file
132
src/components/TemplateCreator.jsx
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { encodeTemplate, generateTemplateId, validateTemplate } from '../utils/templates';
|
||||||
|
import RelayList from './RelayList';
|
||||||
|
import NostrConnect from './NostrConnect';
|
||||||
|
|
||||||
|
const TemplateCreator = ({ setConnectedPubkey }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [templateName, setTemplateName] = useState('');
|
||||||
|
const [description, setDescription] = useState('');
|
||||||
|
const [relays, setRelays] = useState([
|
||||||
|
{ url: 'wss://relay.dyne.org', read: false, write: true },
|
||||||
|
{ url: 'wss://relay.dyne.org/inbox', read: true, write: false },
|
||||||
|
{ url: 'wss://basspistol.org', read: false, write: true },
|
||||||
|
{ url: 'wss://basspistol.org/inbox', read: true, write: false },
|
||||||
|
{ url: 'wss://spatia-arcana.com', read: false, write: true },
|
||||||
|
{ url: 'wss://spatia-arcana.com/inbox', read: true, write: false },
|
||||||
|
{ url: 'wss://nestr.nedao.ch', read: false, write: true },
|
||||||
|
{ url: 'wss://nestr.nedao.ch/inbox', read: true, write: false },
|
||||||
|
{ url: 'wss://pyramid.fiatjaf.com', read: false, write: true },
|
||||||
|
{ url: 'wss://pyramid.fiatjaf.com/inbox', read: true, write: false },
|
||||||
|
{ url: 'wss://relay.ditto.pub', read: true, write: true },
|
||||||
|
{ url: 'wss://nos.lol', read: true, write: true }
|
||||||
|
]);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [shareUrl, setShareUrl] = useState('');
|
||||||
|
|
||||||
|
const handleCreateTemplate = () => {
|
||||||
|
try {
|
||||||
|
const template = {
|
||||||
|
id: generateTemplateId(),
|
||||||
|
name: templateName,
|
||||||
|
description: description,
|
||||||
|
relays: relays,
|
||||||
|
created_at: Math.floor(Date.now() / 1000)
|
||||||
|
};
|
||||||
|
|
||||||
|
validateTemplate(template);
|
||||||
|
|
||||||
|
const encoded = encodeTemplate(template);
|
||||||
|
// Use HashRouter format
|
||||||
|
const url = `${window.location.origin}${window.location.pathname}#/apply/${encoded}`;
|
||||||
|
setShareUrl(url);
|
||||||
|
|
||||||
|
// Copy to clipboard automatically
|
||||||
|
navigator.clipboard?.writeText(url).catch(() => {
|
||||||
|
// Fallback - just show the URL
|
||||||
|
});
|
||||||
|
|
||||||
|
setError('');
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addRelay = () => {
|
||||||
|
setRelays([...relays, { url: '', read: true, write: true }]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeRelay = (index) => {
|
||||||
|
setRelays(relays.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateRelay = (index, field, value) => {
|
||||||
|
const updated = [...relays];
|
||||||
|
updated[index][field] = value;
|
||||||
|
setRelays(updated);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="template-creator">
|
||||||
|
<h2>Create Relay Template</h2>
|
||||||
|
|
||||||
|
<NostrConnect setConnectedPubkey={setConnectedPubkey} />
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>Template Name *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={templateName}
|
||||||
|
onChange={(e) => setTemplateName(e.target.value)}
|
||||||
|
placeholder="e.g., Nostr Plebs Default Relays"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>Description</label>
|
||||||
|
<textarea
|
||||||
|
value={description}
|
||||||
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
|
placeholder="Describe this relay set for new users"
|
||||||
|
rows="3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>Relays *</label>
|
||||||
|
<RelayList
|
||||||
|
relays={relays}
|
||||||
|
onUpdate={updateRelay}
|
||||||
|
onRemove={removeRelay}
|
||||||
|
/>
|
||||||
|
<button onClick={addRelay} className="btn-secondary">
|
||||||
|
+ Add Relay
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <div className="error">{error}</div>}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleCreateTemplate}
|
||||||
|
className="btn-primary"
|
||||||
|
disabled={!templateName || relays.some(r => !r.url)}
|
||||||
|
>
|
||||||
|
Generate Shareable Template
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{shareUrl && (
|
||||||
|
<div className="share-box">
|
||||||
|
<h3>✅ Template Created!</h3>
|
||||||
|
<p>Share this link with your community:</p>
|
||||||
|
<input type="text" value={shareUrl} readOnly />
|
||||||
|
<button onClick={() => navigator.clipboard?.writeText(shareUrl)}>
|
||||||
|
Copy Link
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TemplateCreator;
|
||||||
258
src/hooks/useNostr.js
Normal file
258
src/hooks/useNostr.js
Normal file
|
|
@ -0,0 +1,258 @@
|
||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
export const useNostr = () => {
|
||||||
|
const [pubkey, setPubkey] = useState(null);
|
||||||
|
const [isConnected, setIsConnected] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [extension, setExtension] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkExtension = async () => {
|
||||||
|
try {
|
||||||
|
if (window.nostr) {
|
||||||
|
setExtension(window.nostr);
|
||||||
|
try {
|
||||||
|
const pk = await window.nostr.getPublicKey();
|
||||||
|
setPubkey(pk);
|
||||||
|
setIsConnected(true);
|
||||||
|
} catch (err) {
|
||||||
|
console.log('Extension available but not authorized');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError('No Nostr extension found');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
checkExtension();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const connect = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
if (!window.nostr) {
|
||||||
|
throw new Error('Please install a Nostr extension (Alby, Nos2x, etc.)');
|
||||||
|
}
|
||||||
|
const pk = await window.nostr.getPublicKey();
|
||||||
|
setPubkey(pk);
|
||||||
|
setIsConnected(true);
|
||||||
|
setExtension(window.nostr);
|
||||||
|
setError(null);
|
||||||
|
return pk;
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
setIsConnected(false);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const signEvent = useCallback(async (event) => {
|
||||||
|
if (!extension) {
|
||||||
|
throw new Error('No Nostr extension connected');
|
||||||
|
}
|
||||||
|
return await extension.signEvent(event);
|
||||||
|
}, [extension]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Publish to a single relay using native WebSocket
|
||||||
|
* Relays are passed in from the template - nothing hardcoded
|
||||||
|
*/
|
||||||
|
const publishToSingleRelay = useCallback((url, event) => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
let ws = null;
|
||||||
|
let resolved = false;
|
||||||
|
let timeoutIds = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(`Connecting to ${url}...`);
|
||||||
|
ws = new WebSocket(url);
|
||||||
|
|
||||||
|
// Connection timeout
|
||||||
|
const connectTimeout = setTimeout(() => {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
console.log(`⏰ Connection timeout for ${url}`);
|
||||||
|
if (ws && ws.readyState !== WebSocket.CLOSED) {
|
||||||
|
try { ws.close(); } catch (e) {}
|
||||||
|
}
|
||||||
|
resolve({ url, success: false, error: 'Connection timeout' });
|
||||||
|
}
|
||||||
|
}, 10000);
|
||||||
|
timeoutIds.push(connectTimeout);
|
||||||
|
|
||||||
|
ws.onopen = () => {
|
||||||
|
console.log(`Connected to ${url}, sending event...`);
|
||||||
|
|
||||||
|
// Send the event as a JSON-RPC message
|
||||||
|
const message = JSON.stringify(['EVENT', event]);
|
||||||
|
ws.send(message);
|
||||||
|
|
||||||
|
// Publish timeout
|
||||||
|
const publishTimeout = setTimeout(() => {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
console.log(`⏰ Publish timeout for ${url}`);
|
||||||
|
try { ws.close(); } catch (e) {}
|
||||||
|
resolve({ url, success: false, error: 'Publish timeout' });
|
||||||
|
}
|
||||||
|
}, 15000);
|
||||||
|
timeoutIds.push(publishTimeout);
|
||||||
|
|
||||||
|
// Listen for responses
|
||||||
|
ws.onmessage = (msg) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(msg.data);
|
||||||
|
// Check for OK response for our event
|
||||||
|
if (Array.isArray(data) && data[0] === 'OK' && data[1] === event.id) {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
console.log(`✅ Published to ${url}`);
|
||||||
|
// Clear all timeouts
|
||||||
|
timeoutIds.forEach(id => clearTimeout(id));
|
||||||
|
try { ws.close(); } catch (e) {}
|
||||||
|
resolve({ url, success: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Check for error response
|
||||||
|
if (Array.isArray(data) && data[0] === 'OK' && data[1] !== event.id && data[2] === false) {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
console.log(`❌ Relay rejected event for ${url}:`, data[3]);
|
||||||
|
timeoutIds.forEach(id => clearTimeout(id));
|
||||||
|
try { ws.close(); } catch (e) {}
|
||||||
|
resolve({ url, success: false, error: data[3] || 'Event rejected' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// Ignore parse errors for non-OK messages
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onerror = (error) => {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
console.log(`❌ WebSocket error for ${url}:`, error);
|
||||||
|
timeoutIds.forEach(id => clearTimeout(id));
|
||||||
|
try { ws.close(); } catch (e) {}
|
||||||
|
resolve({ url, success: false, error: 'WebSocket error' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onclose = () => {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
console.log(`⚠️ Connection closed for ${url}`);
|
||||||
|
timeoutIds.forEach(id => clearTimeout(id));
|
||||||
|
resolve({ url, success: false, error: 'Connection closed' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onerror = (error) => {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
console.log(`❌ Connection error for ${url}:`, error);
|
||||||
|
timeoutIds.forEach(id => clearTimeout(id));
|
||||||
|
resolve({ url, success: false, error: 'Connection error' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
console.log(`❌ Error with ${url}:`, err.message);
|
||||||
|
timeoutIds.forEach(id => clearTimeout(id));
|
||||||
|
if (ws) {
|
||||||
|
try { ws.close(); } catch (e) {}
|
||||||
|
}
|
||||||
|
resolve({ url, success: false, error: err.message });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Publish to multiple relays (all from the user's template)
|
||||||
|
*/
|
||||||
|
const publishToRelays = useCallback(async (event, relayUrls) => {
|
||||||
|
console.log(`Publishing to ${relayUrls.length} relays...`);
|
||||||
|
|
||||||
|
// Filter out invalid URLs
|
||||||
|
const validUrls = relayUrls.filter(url => {
|
||||||
|
try {
|
||||||
|
new URL(url);
|
||||||
|
return url.startsWith('wss://') || url.startsWith('ws://');
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (validUrls.length === 0) {
|
||||||
|
return [{ url: 'none', success: false, error: 'No valid relay URLs' }];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Publish to each relay in parallel
|
||||||
|
const publishPromises = validUrls.map(url => publishToSingleRelay(url, event));
|
||||||
|
const results = await Promise.all(publishPromises);
|
||||||
|
|
||||||
|
const successCount = results.filter(r => r.success).length;
|
||||||
|
console.log(`Published to ${successCount}/${results.length} relays`);
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}, [publishToSingleRelay]);
|
||||||
|
|
||||||
|
const publishKind10002 = useCallback(async (relays, pubkey) => {
|
||||||
|
if (!extension) {
|
||||||
|
throw new Error('No Nostr extension connected');
|
||||||
|
}
|
||||||
|
|
||||||
|
// relays comes from the user's template - NOT hardcoded
|
||||||
|
const validRelays = relays.filter(r => r.url && r.url.trim() !== '');
|
||||||
|
|
||||||
|
if (validRelays.length === 0) {
|
||||||
|
throw new Error('No valid relays to publish to');
|
||||||
|
}
|
||||||
|
|
||||||
|
const tags = validRelays.map(relay => {
|
||||||
|
const params = [];
|
||||||
|
if (!relay.read) params.push('read');
|
||||||
|
if (!relay.write) params.push('write');
|
||||||
|
return ['r', relay.url, ...params];
|
||||||
|
});
|
||||||
|
|
||||||
|
const event = {
|
||||||
|
kind: 10002,
|
||||||
|
pubkey: pubkey,
|
||||||
|
created_at: Math.floor(Date.now() / 1000),
|
||||||
|
tags: tags,
|
||||||
|
content: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('Signing kind 10002 event...');
|
||||||
|
const signedEvent = await extension.signEvent(event);
|
||||||
|
console.log('Event signed successfully');
|
||||||
|
|
||||||
|
// Extract URLs from the user's relay list
|
||||||
|
const relayUrls = [...new Set(validRelays.map(r => r.url))];
|
||||||
|
console.log('Publishing to relay URLs:', relayUrls);
|
||||||
|
|
||||||
|
const results = await publishToRelays(signedEvent, relayUrls);
|
||||||
|
console.log('Final results:', results);
|
||||||
|
|
||||||
|
return {
|
||||||
|
event: signedEvent,
|
||||||
|
results: results
|
||||||
|
};
|
||||||
|
}, [extension, publishToRelays]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
pubkey,
|
||||||
|
isConnected,
|
||||||
|
error,
|
||||||
|
extension,
|
||||||
|
connect,
|
||||||
|
signEvent,
|
||||||
|
publishToRelays,
|
||||||
|
publishKind10002
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useNostr;
|
||||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
import './styles/index.css';
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
569
src/styles/index.css
Normal file
569
src/styles/index.css
Normal file
|
|
@ -0,0 +1,569 @@
|
||||||
|
/* Reset and base styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary: #7c4dff;
|
||||||
|
--primary-dark: #6c3fdb;
|
||||||
|
--secondary: #e0e0e0;
|
||||||
|
--success: #4caf50;
|
||||||
|
--danger: #ff5252;
|
||||||
|
--warning: #ff9800;
|
||||||
|
--text: #333;
|
||||||
|
--text-light: #666;
|
||||||
|
--background: #f5f5f5;
|
||||||
|
--white: #ffffff;
|
||||||
|
--border: #e0e0e0;
|
||||||
|
--shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
--radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* App Layout */
|
||||||
|
.app {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.app-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 0 16px;
|
||||||
|
border-bottom: 2px solid var(--border);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, var(--primary), #b388ff);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header nav a {
|
||||||
|
color: var(--text-light);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header nav a:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-badge {
|
||||||
|
background: #e8f5e9;
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2e7d32;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main content */
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
margin-top: 50px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form elements */
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--primary);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s, transform 0.1s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: var(--primary-dark);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:active:not(:disabled) {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: var(--secondary);
|
||||||
|
color: var(--text);
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: var(--danger);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover:not(:disabled) {
|
||||||
|
background: #d32f2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nostr {
|
||||||
|
background: #ff6b00;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nostr:hover:not(:disabled) {
|
||||||
|
background: #e85a00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background: var(--success);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success:hover:not(:disabled) {
|
||||||
|
background: #388e3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Relay List */
|
||||||
|
.relay-list {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item:hover {
|
||||||
|
border-color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item .relay-input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item .relay-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: var(--text-light);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item label input[type="checkbox"] {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
accent-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Template Creator */
|
||||||
|
.template-creator {
|
||||||
|
background: var(--white);
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-creator h2 {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Template Applier */
|
||||||
|
.template-applier {
|
||||||
|
background: var(--white);
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-applier h2 {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-preview {
|
||||||
|
background: #fafafa;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
margin: 20px 0;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-preview h3 {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-preview > p {
|
||||||
|
color: var(--text-light);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-preview h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-light);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-preview ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-preview li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-preview li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-url {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-permissions {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status boxes */
|
||||||
|
.error-box,
|
||||||
|
.warning,
|
||||||
|
.success-box,
|
||||||
|
.info-box {
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-box {
|
||||||
|
background: #ffebee;
|
||||||
|
border-left: 4px solid var(--danger);
|
||||||
|
color: #c62828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
background: #fff3e0;
|
||||||
|
border-left: 4px solid var(--warning);
|
||||||
|
color: #e65100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-box {
|
||||||
|
background: #e8f5e9;
|
||||||
|
border-left: 4px solid var(--success);
|
||||||
|
color: #2e7d32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
background: #e3f2fd;
|
||||||
|
border-left: 4px solid #2196f3;
|
||||||
|
color: #0d47a1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Share Box */
|
||||||
|
.share-box {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding: 20px;
|
||||||
|
background: #e8f5e9;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border-left: 4px solid var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-box h3 {
|
||||||
|
color: #2e7d32;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-box p {
|
||||||
|
color: #1b5e20;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-box input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 8px 0;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: monospace;
|
||||||
|
background: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-box .btn-success {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nostr Connect */
|
||||||
|
.nostr-connected {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: #e8f5e9;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2e7d32;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading */
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading::after {
|
||||||
|
content: '...';
|
||||||
|
animation: dots 1.5s steps(4, end) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dots {
|
||||||
|
0% { content: ''; }
|
||||||
|
25% { content: '.'; }
|
||||||
|
50% { content: '..'; }
|
||||||
|
75% { content: '...'; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.app {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header nav {
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header h1 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-creator,
|
||||||
|
.template-applier {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item .relay-input {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item label {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item .btn-danger {
|
||||||
|
order: 2;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-badge {
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.relay-item label {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay-item label input[type="checkbox"] {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-box input {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utility classes */
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-20 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-10 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-20 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-10 {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-20 {
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
59
src/utils/nostr.js
Normal file
59
src/utils/nostr.js
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { finalizeEvent, generateSecretKey, getPublicKey } from 'nostr-tools';
|
||||||
|
|
||||||
|
export const getNostrExtension = async () => {
|
||||||
|
if (window.nostr) {
|
||||||
|
return window.nostr;
|
||||||
|
}
|
||||||
|
throw new Error('No Nostr extension found. Please install Alby, Nos2x, or another NIP-07 extension.');
|
||||||
|
};
|
||||||
|
|
||||||
|
export const signAndPublishKind10002 = async (relays, pubkey) => {
|
||||||
|
const nostr = await getNostrExtension();
|
||||||
|
|
||||||
|
// Build kind 10002 tags
|
||||||
|
const tags = relays.map(relay => {
|
||||||
|
const params = [];
|
||||||
|
if (!relay.read) params.push('read');
|
||||||
|
if (!relay.write) params.push('write');
|
||||||
|
return ['r', relay.url, ...params];
|
||||||
|
});
|
||||||
|
|
||||||
|
const event = {
|
||||||
|
kind: 10002,
|
||||||
|
pubkey: pubkey,
|
||||||
|
created_at: Math.floor(Date.now() / 1000),
|
||||||
|
tags: tags,
|
||||||
|
content: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
// Sign with extension
|
||||||
|
const signedEvent = await nostr.signEvent(event);
|
||||||
|
|
||||||
|
// Publish to all relays in the template
|
||||||
|
const relayUrls = relays.map(r => r.url);
|
||||||
|
await publishToRelays(signedEvent, relayUrls);
|
||||||
|
|
||||||
|
return signedEvent;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const publishToRelays = async (event, relayUrls) => {
|
||||||
|
const publishPromises = relayUrls.map(async (url) => {
|
||||||
|
try {
|
||||||
|
const relay = await getRelayConnection(url);
|
||||||
|
await relay.publish(event);
|
||||||
|
return { url, success: true };
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Failed to publish to ${url}:`, error);
|
||||||
|
return { url, success: false, error: error.message };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return Promise.all(publishPromises);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Simple relay connection (in production, use a relay pool)
|
||||||
|
export const getRelayConnection = async (url) => {
|
||||||
|
const relay = await relayInit(url);
|
||||||
|
await relay.connect();
|
||||||
|
return relay;
|
||||||
|
};
|
||||||
368
src/utils/templates.js
Normal file
368
src/utils/templates.js
Normal file
|
|
@ -0,0 +1,368 @@
|
||||||
|
/**
|
||||||
|
* ============================================
|
||||||
|
* ENCODING / DECODING FUNCTIONS
|
||||||
|
* ============================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Encode a template object into a URL-safe base64 string
|
||||||
|
* Using btoa with proper UTF-8 handling
|
||||||
|
*/
|
||||||
|
export const encodeTemplate = (template) => {
|
||||||
|
try {
|
||||||
|
const json = JSON.stringify(template);
|
||||||
|
// Proper UTF-8 encoding for btoa
|
||||||
|
const utf8Encoded = encodeURIComponent(json);
|
||||||
|
const base64 = btoa(utf8Encoded);
|
||||||
|
return base64;
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error('Failed to encode template: ' + error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Decode a URL-safe base64 string back to a template object
|
||||||
|
*/
|
||||||
|
export const decodeTemplate = (encoded) => {
|
||||||
|
try {
|
||||||
|
// First, make sure the string is clean
|
||||||
|
const clean = encoded.trim();
|
||||||
|
// Decode from base64
|
||||||
|
const decoded = atob(clean);
|
||||||
|
// Decode the URI component
|
||||||
|
const json = decodeURIComponent(decoded);
|
||||||
|
return JSON.parse(json);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Decode error:', error);
|
||||||
|
throw new Error('Failed to decode template: ' + error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a short unique ID for templates
|
||||||
|
*/
|
||||||
|
export const generateTemplateId = () => {
|
||||||
|
const timestamp = Date.now().toString(36);
|
||||||
|
const random = Math.random().toString(36).substring(2, 8);
|
||||||
|
return `${timestamp}-${random}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ============================================
|
||||||
|
* VALIDATION FUNCTIONS
|
||||||
|
* ============================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validate template structure and data
|
||||||
|
*/
|
||||||
|
export const validateTemplate = (template) => {
|
||||||
|
if (!template || typeof template !== 'object') {
|
||||||
|
throw new Error('Template must be an object');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!template.name || typeof template.name !== 'string' || template.name.trim().length === 0) {
|
||||||
|
throw new Error('Template must have a name');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(template.relays) || template.relays.length === 0) {
|
||||||
|
throw new Error('Template must have at least one relay');
|
||||||
|
}
|
||||||
|
|
||||||
|
template.relays.forEach((relay, index) => {
|
||||||
|
if (!relay.url || typeof relay.url !== 'string') {
|
||||||
|
throw new Error(`Relay ${index + 1} must have a URL`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate URL format
|
||||||
|
try {
|
||||||
|
const url = new URL(relay.url);
|
||||||
|
if (url.protocol !== 'wss:' && url.protocol !== 'ws:') {
|
||||||
|
throw new Error(`Relay ${index + 1} must use wss:// or ws:// protocol`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error(`Relay ${index + 1} has invalid URL: ${relay.url}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof relay.read !== 'boolean') {
|
||||||
|
throw new Error(`Relay ${index + 1} must specify read as boolean`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof relay.write !== 'boolean') {
|
||||||
|
throw new Error(`Relay ${index + 1} must specify write as boolean`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if a template has duplicate relay URLs
|
||||||
|
*/
|
||||||
|
export const hasDuplicateRelays = (template) => {
|
||||||
|
const urls = template.relays.map(r => r.url);
|
||||||
|
return new Set(urls).size !== urls.length;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ============================================
|
||||||
|
* DEFAULT / PRESET TEMPLATES
|
||||||
|
* ============================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get default relay template
|
||||||
|
*/
|
||||||
|
export const getDefaultTemplate = () => {
|
||||||
|
return {
|
||||||
|
id: generateTemplateId(),
|
||||||
|
name: 'Default Relays',
|
||||||
|
description: 'Standard Nostr relay set for beginners',
|
||||||
|
relays: [
|
||||||
|
{ url: 'wss://relay.damus.io', read: true, write: true },
|
||||||
|
{ url: 'wss://nos.lol', read: true, write: true },
|
||||||
|
{ url: 'wss://relay.snort.social', read: true, write: true }
|
||||||
|
],
|
||||||
|
created_at: Math.floor(Date.now() / 1000)
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get popular community templates
|
||||||
|
*/
|
||||||
|
export const getCommunityTemplates = () => {
|
||||||
|
return {
|
||||||
|
'nostr-punks': {
|
||||||
|
id: 'nostr-punks',
|
||||||
|
name: 'Nostr Punks',
|
||||||
|
description: 'Relay set for the Nostr Punks community',
|
||||||
|
relays: [
|
||||||
|
{ url: 'wss://relay.nostr-punks.com', read: true, write: true },
|
||||||
|
{ url: 'wss://relay.damus.io', read: true, write: true },
|
||||||
|
{ url: 'wss://nostr-pub.wellorder.net', read: true, write: true }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'plebchain': {
|
||||||
|
id: 'plebchain',
|
||||||
|
name: 'PlebChain',
|
||||||
|
description: 'Relay set for PlebChain community',
|
||||||
|
relays: [
|
||||||
|
{ url: 'wss://relay.damus.io', read: true, write: true },
|
||||||
|
{ url: 'wss://nos.lol', read: true, write: true },
|
||||||
|
{ url: 'wss://relay.snort.social', read: true, write: true },
|
||||||
|
{ url: 'wss://offchain.pub', read: true, write: true }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'minimal': {
|
||||||
|
id: 'minimal',
|
||||||
|
name: 'Minimal Set',
|
||||||
|
description: 'Just the essentials to get started',
|
||||||
|
relays: [
|
||||||
|
{ url: 'wss://relay.damus.io', read: true, write: true }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ============================================
|
||||||
|
* TEMPLATE MANIPULATION FUNCTIONS
|
||||||
|
* ============================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a relay to a template
|
||||||
|
*/
|
||||||
|
export const addRelayToTemplate = (template, relay) => {
|
||||||
|
if (!relay.url) {
|
||||||
|
throw new Error('Relay must have a URL');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if relay already exists
|
||||||
|
if (template.relays.some(r => r.url === relay.url)) {
|
||||||
|
throw new Error('Relay already exists in template');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...template,
|
||||||
|
relays: [
|
||||||
|
...template.relays,
|
||||||
|
{
|
||||||
|
url: relay.url,
|
||||||
|
read: relay.read !== undefined ? relay.read : true,
|
||||||
|
write: relay.write !== undefined ? relay.write : true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove a relay from a template by URL
|
||||||
|
*/
|
||||||
|
export const removeRelayFromTemplate = (template, relayUrl) => {
|
||||||
|
return {
|
||||||
|
...template,
|
||||||
|
relays: template.relays.filter(r => r.url !== relayUrl)
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update a relay in a template
|
||||||
|
*/
|
||||||
|
export const updateRelayInTemplate = (template, relayUrl, updates) => {
|
||||||
|
return {
|
||||||
|
...template,
|
||||||
|
relays: template.relays.map(r =>
|
||||||
|
r.url === relayUrl ? { ...r, ...updates } : r
|
||||||
|
)
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clone a template (deep copy)
|
||||||
|
*/
|
||||||
|
export const cloneTemplate = (template) => {
|
||||||
|
return JSON.parse(JSON.stringify(template));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ============================================
|
||||||
|
* CONVERSION FUNCTIONS
|
||||||
|
* ============================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert template relays to kind 10002 tags format
|
||||||
|
*/
|
||||||
|
export const templateToKind10002Tags = (template) => {
|
||||||
|
return template.relays.map(relay => {
|
||||||
|
const params = [];
|
||||||
|
if (!relay.read) params.push('read');
|
||||||
|
if (!relay.write) params.push('write');
|
||||||
|
return ['r', relay.url, ...params];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert kind 10002 tags to template format
|
||||||
|
*/
|
||||||
|
export const kind10002TagsToTemplate = (tags, name = 'Imported Relays') => {
|
||||||
|
const relays = tags
|
||||||
|
.filter(tag => tag[0] === 'r')
|
||||||
|
.map(tag => {
|
||||||
|
const url = tag[1];
|
||||||
|
const params = tag.slice(2);
|
||||||
|
return {
|
||||||
|
url: url,
|
||||||
|
read: !params.includes('read'),
|
||||||
|
write: !params.includes('write')
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: generateTemplateId(),
|
||||||
|
name: name,
|
||||||
|
description: `Imported from existing relay set`,
|
||||||
|
relays: relays,
|
||||||
|
created_at: Math.floor(Date.now() / 1000)
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ============================================
|
||||||
|
* STORAGE FUNCTIONS (LocalStorage)
|
||||||
|
* ============================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save template to localStorage
|
||||||
|
*/
|
||||||
|
export const saveTemplateToStorage = (template) => {
|
||||||
|
const history = JSON.parse(localStorage.getItem('templateHistory') || '[]');
|
||||||
|
const entry = {
|
||||||
|
...template,
|
||||||
|
saved_at: Date.now()
|
||||||
|
};
|
||||||
|
// Remove duplicates
|
||||||
|
const filtered = history.filter(h => h.id !== template.id);
|
||||||
|
filtered.unshift(entry);
|
||||||
|
// Keep last 50 templates
|
||||||
|
localStorage.setItem('templateHistory', JSON.stringify(filtered.slice(0, 50)));
|
||||||
|
return entry;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get template history from localStorage
|
||||||
|
*/
|
||||||
|
export const getTemplateHistory = () => {
|
||||||
|
return JSON.parse(localStorage.getItem('templateHistory') || '[]');
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear template history
|
||||||
|
*/
|
||||||
|
export const clearTemplateHistory = () => {
|
||||||
|
localStorage.removeItem('templateHistory');
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get recently applied templates
|
||||||
|
*/
|
||||||
|
export const getRecentTemplates = (limit = 5) => {
|
||||||
|
const history = getTemplateHistory();
|
||||||
|
return history.slice(0, limit);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ============================================
|
||||||
|
* SHARE FUNCTIONS
|
||||||
|
* ============================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a shareable URL for a template
|
||||||
|
*/
|
||||||
|
export const generateShareUrl = (template, baseUrl = window.location.origin) => {
|
||||||
|
const encoded = encodeTemplate(template);
|
||||||
|
return `${baseUrl}/apply/${encoded}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Extract template from share URL
|
||||||
|
*/
|
||||||
|
export const extractTemplateFromUrl = (url) => {
|
||||||
|
const match = url.match(/\/apply\/([^/?]+)/);
|
||||||
|
if (!match) {
|
||||||
|
throw new Error('Invalid share URL');
|
||||||
|
}
|
||||||
|
return decodeTemplate(match[1]);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ============================================
|
||||||
|
* EXPORT ALL
|
||||||
|
* ============================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Default export for convenience
|
||||||
|
export default {
|
||||||
|
encodeTemplate,
|
||||||
|
decodeTemplate,
|
||||||
|
generateTemplateId,
|
||||||
|
validateTemplate,
|
||||||
|
hasDuplicateRelays,
|
||||||
|
getDefaultTemplate,
|
||||||
|
getCommunityTemplates,
|
||||||
|
addRelayToTemplate,
|
||||||
|
removeRelayFromTemplate,
|
||||||
|
updateRelayInTemplate,
|
||||||
|
cloneTemplate,
|
||||||
|
templateToKind10002Tags,
|
||||||
|
kind10002TagsToTemplate,
|
||||||
|
saveTemplateToStorage,
|
||||||
|
getTemplateHistory,
|
||||||
|
clearTemplateHistory,
|
||||||
|
getRecentTemplates,
|
||||||
|
generateShareUrl,
|
||||||
|
extractTemplateFromUrl
|
||||||
|
};
|
||||||
30
vite.config.js
Normal file
30
vite.config.js
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import fs from 'fs';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
open: true,
|
||||||
|
// Enable HTTPS with self-signed certificate
|
||||||
|
https: {
|
||||||
|
key: fs.readFileSync('./localhost-key.pem'),
|
||||||
|
cert: fs.readFileSync('./localhost.pem'),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: 'dist',
|
||||||
|
assetsDir: 'assets',
|
||||||
|
sourcemap: false,
|
||||||
|
minify: true,
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks: {
|
||||||
|
vendor: ['react', 'react-dom'],
|
||||||
|
nostr: ['nostr-tools']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue