initial maddafacka
This commit is contained in:
sakrecoer
commit
57a252b983
16 changed files with 4135 additions and 0 deletions
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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue