31 lines
1.3 KiB
JavaScript
31 lines
1.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
export default function KeypairManager({ keypairs, onSelect, onCreate, selectedKeypair }) {
|
|
const [creating, setCreating] = useState(false);
|
|
|
|
return (
|
|
<div className="keypair-manager">
|
|
<label>Keypair:</label>
|
|
<select value={selectedKeypair || ''} onChange={e => onSelect(e.target.value)}>
|
|
<option value="" disabled>Select keypair</option>
|
|
{keypairs.map(kp => (
|
|
<option key={kp.id} value={kp.id}>{kp.label}</option>
|
|
))}
|
|
</select>
|
|
<button onClick={() => setCreating(true)} style={{marginLeft: 8}}>Create New</button>
|
|
{creating && (
|
|
<div style={{marginTop: '0.5rem'}}>
|
|
<button onClick={() => { onCreate(); setCreating(false); }}>Create Secp256k1 Keypair</button>
|
|
<button onClick={() => setCreating(false)} style={{marginLeft: 8}}>Cancel</button>
|
|
</div>
|
|
)}
|
|
{selectedKeypair && (
|
|
<div style={{marginTop: '0.5rem'}}>
|
|
<span>Public Key: <code>{keypairs.find(kp => kp.id === selectedKeypair)?.publicKey}</code></span>
|
|
<button onClick={() => navigator.clipboard.writeText(keypairs.find(kp => kp.id === selectedKeypair)?.publicKey)} style={{marginLeft: 8}}>Copy</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|