remove ts extension
This commit is contained in:
Sameh Abouel-saad
parent
4f3f98a954
commit
1d3d0a4fa4
1
hero_vault_extension/.gitignore
vendored
1
hero_vault_extension/.gitignore
vendored
@ -1 +0,0 @@
|
|||||||
dist
|
|
||||||
@ -1,88 +0,0 @@
|
|||||||
# SAL Modular Cryptographic Browser Extension
|
|
||||||
|
|
||||||
A modern, secure browser extension for interacting with the SAL modular Rust cryptographic stack, enabling key management, cryptographic operations, and secure Rhai script execution.
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
### Session & Key Management
|
|
||||||
- Create and unlock encrypted keyspaces with password protection
|
|
||||||
- Create, select, and manage multiple keypairs (Ed25519, Secp256k1)
|
|
||||||
- Clear session state visualization and management
|
|
||||||
|
|
||||||
### Cryptographic Operations
|
|
||||||
- Sign and verify messages using selected keypair
|
|
||||||
- Encrypt and decrypt messages using asymmetric cryptography
|
|
||||||
- Support for symmetric encryption using password-derived keys
|
|
||||||
|
|
||||||
### Scripting (Rhai)
|
|
||||||
- Execute Rhai scripts securely within the extension
|
|
||||||
- Explicit user approval for all script executions
|
|
||||||
- Script history and audit trail
|
|
||||||
|
|
||||||
### WebSocket Integration
|
|
||||||
- Connect to WebSocket servers using keypair's public key
|
|
||||||
- Receive, review, and approve/reject incoming scripts
|
|
||||||
- Support for both local and remote script execution
|
|
||||||
|
|
||||||
### Security
|
|
||||||
- Dark mode UI with modern, responsive design
|
|
||||||
- Session auto-lock after configurable inactivity period
|
|
||||||
- Explicit user approval for all sensitive operations
|
|
||||||
- No persistent storage of passwords or private keys in plaintext
|
|
||||||
|
|
||||||
## Architecture
|
|
||||||
|
|
||||||
The extension is built with a modern tech stack:
|
|
||||||
|
|
||||||
- **Frontend**: React with TypeScript, Material-UI
|
|
||||||
- **State Management**: Zustand
|
|
||||||
- **Backend**: WebAssembly (WASM) modules compiled from Rust
|
|
||||||
- **Storage**: Chrome extension storage API with encryption
|
|
||||||
- **Networking**: WebSocket for server communication
|
|
||||||
|
|
||||||
## Development Setup
|
|
||||||
|
|
||||||
1. Install dependencies:
|
|
||||||
```
|
|
||||||
cd sal_extension
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Build the extension:
|
|
||||||
```
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Load the extension in Chrome/Edge:
|
|
||||||
- Navigate to `chrome://extensions/`
|
|
||||||
- Enable "Developer mode"
|
|
||||||
- Click "Load unpacked" and select the `dist` directory
|
|
||||||
|
|
||||||
4. For development with hot-reload:
|
|
||||||
```
|
|
||||||
npm run watch
|
|
||||||
```
|
|
||||||
|
|
||||||
## Integration with WASM
|
|
||||||
|
|
||||||
The extension uses WebAssembly modules compiled from Rust to perform cryptographic operations securely. The WASM modules are loaded in the extension's background script and provide a secure API for the frontend.
|
|
||||||
|
|
||||||
Key WASM functions exposed:
|
|
||||||
- `init_session` - Unlock a keyspace with password
|
|
||||||
- `create_keyspace` - Create a new keyspace
|
|
||||||
- `add_keypair` - Create a new keypair
|
|
||||||
- `select_keypair` - Select a keypair for use
|
|
||||||
- `sign` - Sign a message with the selected keypair
|
|
||||||
- `run_rhai` - Execute a Rhai script securely
|
|
||||||
|
|
||||||
## Security Considerations
|
|
||||||
|
|
||||||
- The extension follows the principle of least privilege
|
|
||||||
- All sensitive operations require explicit user approval
|
|
||||||
- Passwords are never stored persistently, only kept in memory during an active session
|
|
||||||
- Session state is automatically cleared when the extension is locked
|
|
||||||
- WebSocket connections are authenticated using the user's public key
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
[MIT License](LICENSE)
|
|
||||||
@ -1 +0,0 @@
|
|||||||
:root{font-family:Roboto,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark}body{margin:0;min-width:360px;min-height:520px;overflow-x:hidden}#root{width:100%;height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:3px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
console.log("Background script initialized");let i=!1,e=null;chrome.runtime.onMessage.addListener((o,l,r)=>{if(console.log("Background received message:",o.type),o.type==="SESSION_STATUS")return r({active:i}),!0;if(o.type==="SESSION_UNLOCK")return i=!0,r({success:!0}),!0;if(o.type==="SESSION_LOCK")return i=!1,e&&(e.close(),e=null),r({success:!0}),!0;if(o.type==="CONNECT_WEBSOCKET"&&o.serverUrl&&o.publicKey){try{e&&e.close(),e=new WebSocket(o.serverUrl),e.onopen=()=>{console.log("WebSocket connection established"),e&&e.send(JSON.stringify({type:"IDENTIFY",publicKey:o.publicKey}))},e.onmessage=c=>{try{const t=JSON.parse(c.data);console.log("WebSocket message received:",t),chrome.runtime.sendMessage({type:"WEBSOCKET_MESSAGE",data:t}).catch(n=>{console.error("Failed to forward WebSocket message:",n)})}catch(t){console.error("Failed to parse WebSocket message:",t)}},e.onerror=c=>{console.error("WebSocket error:",c)},e.onclose=()=>{console.log("WebSocket connection closed"),e=null},r({success:!0})}catch(c){console.error("Failed to connect to WebSocket:",c),r({success:!1,error:c.message})}return!0}return o.type==="DISCONNECT_WEBSOCKET"?(e?(e.close(),e=null,r({success:!0})):r({success:!1,error:"No active WebSocket connection"}),!0):!1});chrome.notifications&&chrome.notifications.onClicked&&chrome.notifications.onClicked.addListener(o=>{chrome.action.openPopup()});
|
|
||||||
61
hero_vault_extension/dist/background.js
vendored
61
hero_vault_extension/dist/background.js
vendored
@ -1,61 +0,0 @@
|
|||||||
|
|
||||||
// Background Service Worker for SAL Modular Cryptographic Extension
|
|
||||||
// This is a simplified version that only handles messaging
|
|
||||||
|
|
||||||
console.log('Background script initialized');
|
|
||||||
|
|
||||||
// Store active WebSocket connection
|
|
||||||
let activeWebSocket = null;
|
|
||||||
let sessionActive = false;
|
|
||||||
|
|
||||||
// Listen for messages from popup or content scripts
|
|
||||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
|
||||||
console.log('Background received message:', message.type);
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_STATUS') {
|
|
||||||
sendResponse({ active: sessionActive });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_UNLOCK') {
|
|
||||||
sessionActive = true;
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_LOCK') {
|
|
||||||
sessionActive = false;
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
activeWebSocket = null;
|
|
||||||
}
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'CONNECT_WEBSOCKET') {
|
|
||||||
// Simplified WebSocket handling
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'DISCONNECT_WEBSOCKET') {
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
activeWebSocket = null;
|
|
||||||
sendResponse({ success: true });
|
|
||||||
} else {
|
|
||||||
sendResponse({ success: false, error: 'No active WebSocket connection' });
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize notification setup
|
|
||||||
chrome.notifications.onClicked.addListener((notificationId) => {
|
|
||||||
// Open the extension popup when a notification is clicked
|
|
||||||
chrome.action.openPopup();
|
|
||||||
});
|
|
||||||
|
|
||||||
BIN
hero_vault_extension/dist/icons/icon-128.png
vendored
BIN
hero_vault_extension/dist/icons/icon-128.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
BIN
hero_vault_extension/dist/icons/icon-16.png
vendored
BIN
hero_vault_extension/dist/icons/icon-16.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 454 B |
BIN
hero_vault_extension/dist/icons/icon-32.png
vendored
BIN
hero_vault_extension/dist/icons/icon-32.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 712 B |
BIN
hero_vault_extension/dist/icons/icon-48.png
vendored
BIN
hero_vault_extension/dist/icons/icon-48.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
14
hero_vault_extension/dist/index.html
vendored
14
hero_vault_extension/dist/index.html
vendored
@ -1,14 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Hero Vault</title>
|
|
||||||
<script type="module" crossorigin src="/assets/index-b58c7e43.js"></script>
|
|
||||||
<link rel="stylesheet" href="/assets/index-11057528.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
26
hero_vault_extension/dist/manifest.json
vendored
26
hero_vault_extension/dist/manifest.json
vendored
@ -1,26 +0,0 @@
|
|||||||
{
|
|
||||||
"manifest_version": 3,
|
|
||||||
"name": "Hero Vault",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "A secure browser extension for cryptographic operations and Rhai script execution",
|
|
||||||
"action": {
|
|
||||||
"default_popup": "index.html",
|
|
||||||
"default_title": "Hero Vault"
|
|
||||||
},
|
|
||||||
"icons": {
|
|
||||||
"16": "icons/icon-16.png",
|
|
||||||
"48": "icons/icon-48.png",
|
|
||||||
"128": "icons/icon-128.png"
|
|
||||||
},
|
|
||||||
"permissions": [
|
|
||||||
"storage",
|
|
||||||
"unlimitedStorage"
|
|
||||||
],
|
|
||||||
"background": {
|
|
||||||
"service_worker": "service-worker-loader.js",
|
|
||||||
"type": "module"
|
|
||||||
},
|
|
||||||
"content_security_policy": {
|
|
||||||
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
import './assets/simple-background.ts-e63275e1.js';
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Hero Vault</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
4862
hero_vault_extension/package-lock.json
generated
4862
hero_vault_extension/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,42 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "hero-vault-extension",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "Hero Vault - A secure browser extension for cryptographic operations",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "node scripts/copy-wasm.js && vite",
|
|
||||||
"build": "node scripts/copy-wasm.js && ([ \"$NO_TYPECHECK\" = \"true\" ] || tsc) && vite build",
|
|
||||||
"watch": "node scripts/copy-wasm.js && tsc && vite build --watch",
|
|
||||||
"preview": "vite preview",
|
|
||||||
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
||||||
"format": "prettier --write \"src/**/*.{ts,tsx,css,scss}\"",
|
|
||||||
"copy-wasm": "node scripts/copy-wasm.js"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@emotion/react": "^11.11.1",
|
|
||||||
"@emotion/styled": "^11.11.0",
|
|
||||||
"@mui/icons-material": "^5.14.3",
|
|
||||||
"@mui/material": "^5.14.3",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-dom": "^18.2.0",
|
|
||||||
"react-router-dom": "^6.14.2",
|
|
||||||
"zustand": "^4.4.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@crxjs/vite-plugin": "^2.0.0-beta.18",
|
|
||||||
"@types/chrome": "^0.0.243",
|
|
||||||
"@types/node": "^20.4.5",
|
|
||||||
"@types/react": "^18.2.15",
|
|
||||||
"@types/react-dom": "^18.2.7",
|
|
||||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
|
||||||
"@typescript-eslint/parser": "^6.0.0",
|
|
||||||
"@vitejs/plugin-react": "^4.0.3",
|
|
||||||
"esbuild": "^0.25.4",
|
|
||||||
"eslint": "^8.45.0",
|
|
||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
|
||||||
"eslint-plugin-react-refresh": "^0.4.3",
|
|
||||||
"prettier": "^3.0.0",
|
|
||||||
"sass": "^1.64.1",
|
|
||||||
"typescript": "^5.0.2",
|
|
||||||
"vite": "^4.4.5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 454 B |
Binary file not shown.
|
Before Width: | Height: | Size: 712 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,26 +0,0 @@
|
|||||||
{
|
|
||||||
"manifest_version": 3,
|
|
||||||
"name": "Hero Vault",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "A secure browser extension for cryptographic operations and Rhai script execution",
|
|
||||||
"action": {
|
|
||||||
"default_popup": "index.html",
|
|
||||||
"default_title": "Hero Vault"
|
|
||||||
},
|
|
||||||
"icons": {
|
|
||||||
"16": "icons/icon-16.png",
|
|
||||||
"48": "icons/icon-48.png",
|
|
||||||
"128": "icons/icon-128.png"
|
|
||||||
},
|
|
||||||
"permissions": [
|
|
||||||
"storage",
|
|
||||||
"unlimitedStorage"
|
|
||||||
],
|
|
||||||
"background": {
|
|
||||||
"service_worker": "src/background/simple-background.ts",
|
|
||||||
"type": "module"
|
|
||||||
},
|
|
||||||
"content_security_policy": {
|
|
||||||
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
/**
|
|
||||||
* Script to build the background script for the extension
|
|
||||||
*/
|
|
||||||
const { build } = require('esbuild');
|
|
||||||
const { resolve } = require('path');
|
|
||||||
const fs = require('fs');
|
|
||||||
|
|
||||||
async function buildBackground() {
|
|
||||||
try {
|
|
||||||
console.log('Building background script...');
|
|
||||||
|
|
||||||
// First, create a simplified background script that doesn't import WASM
|
|
||||||
const backgroundContent = `
|
|
||||||
// Background Service Worker for SAL Modular Cryptographic Extension
|
|
||||||
// This is a simplified version that only handles messaging
|
|
||||||
|
|
||||||
console.log('Background script initialized');
|
|
||||||
|
|
||||||
// Store active WebSocket connection
|
|
||||||
let activeWebSocket = null;
|
|
||||||
let sessionActive = false;
|
|
||||||
|
|
||||||
// Listen for messages from popup or content scripts
|
|
||||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
|
||||||
console.log('Background received message:', message.type);
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_STATUS') {
|
|
||||||
sendResponse({ active: sessionActive });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_UNLOCK') {
|
|
||||||
sessionActive = true;
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_LOCK') {
|
|
||||||
sessionActive = false;
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
activeWebSocket = null;
|
|
||||||
}
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'CONNECT_WEBSOCKET') {
|
|
||||||
// Simplified WebSocket handling
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'DISCONNECT_WEBSOCKET') {
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
activeWebSocket = null;
|
|
||||||
sendResponse({ success: true });
|
|
||||||
} else {
|
|
||||||
sendResponse({ success: false, error: 'No active WebSocket connection' });
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize notification setup
|
|
||||||
chrome.notifications.onClicked.addListener((notificationId) => {
|
|
||||||
// Open the extension popup when a notification is clicked
|
|
||||||
chrome.action.openPopup();
|
|
||||||
});
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Write the simplified background script to a temporary file
|
|
||||||
fs.writeFileSync(resolve(__dirname, '../dist/background.js'), backgroundContent);
|
|
||||||
|
|
||||||
console.log('Background script built successfully!');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error building background script:', error);
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
buildBackground();
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
/**
|
|
||||||
* Script to copy WASM files from wasm_app/pkg to the extension build directory
|
|
||||||
*/
|
|
||||||
const fs = require('fs');
|
|
||||||
const path = require('path');
|
|
||||||
|
|
||||||
// Source and destination paths
|
|
||||||
const sourceDir = path.resolve(__dirname, '../../wasm_app/pkg');
|
|
||||||
const destDir = path.resolve(__dirname, '../public/wasm');
|
|
||||||
|
|
||||||
// Create destination directory if it doesn't exist
|
|
||||||
if (!fs.existsSync(destDir)) {
|
|
||||||
fs.mkdirSync(destDir, { recursive: true });
|
|
||||||
console.log(`Created directory: ${destDir}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Copy all files from source to destination
|
|
||||||
try {
|
|
||||||
const files = fs.readdirSync(sourceDir);
|
|
||||||
|
|
||||||
files.forEach(file => {
|
|
||||||
const sourcePath = path.join(sourceDir, file);
|
|
||||||
const destPath = path.join(destDir, file);
|
|
||||||
|
|
||||||
fs.copyFileSync(sourcePath, destPath);
|
|
||||||
console.log(`Copied: ${file}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('WASM files copied successfully!');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error copying WASM files:', error);
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
@ -1,127 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { Box, Container, Paper } from '@mui/material';
|
|
||||||
import { Routes, Route, HashRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
// Import pages
|
|
||||||
import HomePage from './pages/HomePage';
|
|
||||||
import SessionPage from './pages/SessionPage';
|
|
||||||
import KeypairPage from './pages/KeypairPage';
|
|
||||||
import ScriptPage from './pages/ScriptPage';
|
|
||||||
import SettingsPage from './pages/SettingsPage';
|
|
||||||
import WebSocketPage from './pages/WebSocketPage';
|
|
||||||
import CryptoPage from './pages/CryptoPage';
|
|
||||||
|
|
||||||
// Import components
|
|
||||||
import Header from './components/Header';
|
|
||||||
import Navigation from './components/Navigation';
|
|
||||||
|
|
||||||
// Import session state management
|
|
||||||
import { useSessionStore } from './store/sessionStore';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const { checkSessionStatus, initWasm } = useSessionStore();
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
const [wasmError, setWasmError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
// Initialize WASM and check session status on mount
|
|
||||||
useEffect(() => {
|
|
||||||
const initializeApp = async () => {
|
|
||||||
try {
|
|
||||||
// First initialize WASM module
|
|
||||||
const wasmInitialized = await initWasm();
|
|
||||||
|
|
||||||
if (!wasmInitialized) {
|
|
||||||
throw new Error('Failed to initialize WASM module');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Then check session status
|
|
||||||
await checkSessionStatus();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Initialization error:', error);
|
|
||||||
setWasmError((error as Error).message || 'Failed to initialize the extension');
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
initializeApp();
|
|
||||||
}, [checkSessionStatus, initWasm]);
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
height: '100vh',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Loading...
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (wasmError) {
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
height: '100vh',
|
|
||||||
p: 3,
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Paper sx={{ p: 3, maxWidth: 400 }}>
|
|
||||||
<h6 style={{ color: 'red', marginBottom: '8px' }}>
|
|
||||||
WASM Module Failed to Initialize
|
|
||||||
</h6>
|
|
||||||
<p style={{ marginBottom: '16px' }}>
|
|
||||||
The WASM module could not be loaded. Please try reloading the extension.
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: '0.875rem', color: 'gray' }}>
|
|
||||||
Error: {wasmError} Please contact support if the problem persists.
|
|
||||||
</p>
|
|
||||||
</Paper>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<HashRouter>
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
|
|
||||||
<Header />
|
|
||||||
|
|
||||||
<Container component="main" sx={{ flexGrow: 1, overflow: 'auto', py: 2 }}>
|
|
||||||
<Paper
|
|
||||||
elevation={3}
|
|
||||||
sx={{
|
|
||||||
p: 2,
|
|
||||||
height: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
overflow: 'hidden'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Routes>
|
|
||||||
<Route path="/" element={<HomePage />} />
|
|
||||||
<Route path="/session" element={<SessionPage />} />
|
|
||||||
<Route path="/keypair" element={<KeypairPage />} />
|
|
||||||
<Route path="/crypto" element={<CryptoPage />} />
|
|
||||||
<Route path="/script" element={<ScriptPage />} />
|
|
||||||
<Route path="/websocket" element={<WebSocketPage />} />
|
|
||||||
<Route path="/settings" element={<SettingsPage />} />
|
|
||||||
</Routes>
|
|
||||||
</Paper>
|
|
||||||
</Container>
|
|
||||||
|
|
||||||
<Navigation />
|
|
||||||
</Box>
|
|
||||||
</HashRouter>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
/**
|
|
||||||
* Background Service Worker for Hero Vault Extension
|
|
||||||
*
|
|
||||||
* Responsibilities:
|
|
||||||
* - Maintain WebSocket connections
|
|
||||||
* - Handle incoming script requests
|
|
||||||
* - Manage session state when popup is closed
|
|
||||||
* - Provide messaging interface for popup/content scripts
|
|
||||||
* - Initialize WASM module when extension starts
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Import WASM helper functions
|
|
||||||
import { initWasm } from '../wasm/wasmHelper';
|
|
||||||
|
|
||||||
// Initialize WASM module when service worker starts
|
|
||||||
initWasm().catch(error => {
|
|
||||||
console.error('Failed to initialize WASM module:', error);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Store active WebSocket connection
|
|
||||||
let activeWebSocket: WebSocket | null = null;
|
|
||||||
let sessionActive = false;
|
|
||||||
|
|
||||||
// Listen for messages from popup or content scripts
|
|
||||||
chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
|
|
||||||
if (message.type === 'SESSION_STATUS') {
|
|
||||||
sendResponse({ active: sessionActive });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_UNLOCK') {
|
|
||||||
sessionActive = true;
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_LOCK') {
|
|
||||||
sessionActive = false;
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
activeWebSocket = null;
|
|
||||||
}
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'CONNECT_WEBSOCKET' && message.serverUrl && message.publicKey) {
|
|
||||||
connectToWebSocket(message.serverUrl, message.publicKey)
|
|
||||||
.then(success => sendResponse({ success }))
|
|
||||||
.catch(error => sendResponse({ success: false, error: error.message }));
|
|
||||||
return true; // Indicates we'll respond asynchronously
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'DISCONNECT_WEBSOCKET') {
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
activeWebSocket = null;
|
|
||||||
sendResponse({ success: true });
|
|
||||||
} else {
|
|
||||||
sendResponse({ success: false, error: 'No active WebSocket connection' });
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Connect to a WebSocket server with the user's public key
|
|
||||||
*/
|
|
||||||
async function connectToWebSocket(serverUrl: string, publicKey: string): Promise<boolean> {
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
try {
|
|
||||||
const ws = new WebSocket(serverUrl);
|
|
||||||
|
|
||||||
ws.onopen = () => {
|
|
||||||
// Send authentication message with public key
|
|
||||||
ws.send(JSON.stringify({
|
|
||||||
type: 'AUTH',
|
|
||||||
publicKey
|
|
||||||
}));
|
|
||||||
|
|
||||||
activeWebSocket = ws;
|
|
||||||
resolve(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onerror = (error) => {
|
|
||||||
console.error('WebSocket error:', error);
|
|
||||||
reject(new Error('Failed to connect to WebSocket server'));
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onclose = () => {
|
|
||||||
activeWebSocket = null;
|
|
||||||
console.log('WebSocket connection closed');
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onmessage = async (event) => {
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
|
|
||||||
// Handle incoming script requests
|
|
||||||
if (data.type === 'SCRIPT_REQUEST') {
|
|
||||||
// Notify the user of the script request
|
|
||||||
chrome.notifications.create({
|
|
||||||
type: 'basic',
|
|
||||||
iconUrl: 'icons/icon128.png',
|
|
||||||
title: 'Script Request',
|
|
||||||
message: `Received script request: ${data.title || 'Untitled Script'}`,
|
|
||||||
priority: 2
|
|
||||||
});
|
|
||||||
|
|
||||||
// Store the script request for the popup to handle
|
|
||||||
await chrome.storage.local.set({
|
|
||||||
pendingScripts: [
|
|
||||||
...(await chrome.storage.local.get('pendingScripts')).pendingScripts || [],
|
|
||||||
{
|
|
||||||
id: data.id,
|
|
||||||
title: data.title || 'Untitled Script',
|
|
||||||
description: data.description || '',
|
|
||||||
script: data.script,
|
|
||||||
tags: data.tags || [],
|
|
||||||
timestamp: Date.now()
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error processing WebSocket message:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize notification setup
|
|
||||||
chrome.notifications.onClicked.addListener((_notificationId) => {
|
|
||||||
// Open the extension popup when a notification is clicked
|
|
||||||
chrome.action.openPopup();
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('Hero Vault Extension background service worker initialized');
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
/**
|
|
||||||
* Simplified Background Service Worker for Hero Vault Extension
|
|
||||||
*
|
|
||||||
* This is a version that doesn't use WASM to avoid service worker limitations
|
|
||||||
* with dynamic imports. It only handles basic messaging between components.
|
|
||||||
*/
|
|
||||||
|
|
||||||
console.log('Background script initialized');
|
|
||||||
|
|
||||||
// Store session state
|
|
||||||
let sessionActive = false;
|
|
||||||
let activeWebSocket: WebSocket | null = null;
|
|
||||||
|
|
||||||
// Listen for messages from popup or content scripts
|
|
||||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
|
||||||
console.log('Background received message:', message.type);
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_STATUS') {
|
|
||||||
sendResponse({ active: sessionActive });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_UNLOCK') {
|
|
||||||
sessionActive = true;
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'SESSION_LOCK') {
|
|
||||||
sessionActive = false;
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
activeWebSocket = null;
|
|
||||||
}
|
|
||||||
sendResponse({ success: true });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'CONNECT_WEBSOCKET' && message.serverUrl && message.publicKey) {
|
|
||||||
// Simplified WebSocket handling
|
|
||||||
try {
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
activeWebSocket = new WebSocket(message.serverUrl);
|
|
||||||
|
|
||||||
activeWebSocket.onopen = () => {
|
|
||||||
console.log('WebSocket connection established');
|
|
||||||
// Send public key to identify this client
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.send(JSON.stringify({
|
|
||||||
type: 'IDENTIFY',
|
|
||||||
publicKey: message.publicKey
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
activeWebSocket.onmessage = (event) => {
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
console.log('WebSocket message received:', data);
|
|
||||||
|
|
||||||
// Forward message to popup
|
|
||||||
chrome.runtime.sendMessage({
|
|
||||||
type: 'WEBSOCKET_MESSAGE',
|
|
||||||
data
|
|
||||||
}).catch(error => {
|
|
||||||
console.error('Failed to forward WebSocket message:', error);
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to parse WebSocket message:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
activeWebSocket.onerror = (error) => {
|
|
||||||
console.error('WebSocket error:', error);
|
|
||||||
};
|
|
||||||
|
|
||||||
activeWebSocket.onclose = () => {
|
|
||||||
console.log('WebSocket connection closed');
|
|
||||||
activeWebSocket = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
sendResponse({ success: true });
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to connect to WebSocket:', error);
|
|
||||||
sendResponse({ success: false, error: error.message });
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'DISCONNECT_WEBSOCKET') {
|
|
||||||
if (activeWebSocket) {
|
|
||||||
activeWebSocket.close();
|
|
||||||
activeWebSocket = null;
|
|
||||||
sendResponse({ success: true });
|
|
||||||
} else {
|
|
||||||
sendResponse({ success: false, error: 'No active WebSocket connection' });
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we don't handle the message, return false
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle notifications if available
|
|
||||||
if (chrome.notifications && chrome.notifications.onClicked) {
|
|
||||||
chrome.notifications.onClicked.addListener((notificationId) => {
|
|
||||||
// Open the extension popup when a notification is clicked
|
|
||||||
chrome.action.openPopup();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
import { AppBar, Toolbar, Typography, IconButton, Box, Chip } from '@mui/material';
|
|
||||||
import LockIcon from '@mui/icons-material/Lock';
|
|
||||||
import LockOpenIcon from '@mui/icons-material/LockOpen';
|
|
||||||
import SignalWifiStatusbar4BarIcon from '@mui/icons-material/SignalWifiStatusbar4Bar';
|
|
||||||
import SignalWifiOffIcon from '@mui/icons-material/SignalWifiOff';
|
|
||||||
import { useSessionStore } from '../store/sessionStore';
|
|
||||||
|
|
||||||
const Header = () => {
|
|
||||||
const {
|
|
||||||
isSessionUnlocked,
|
|
||||||
currentKeyspace,
|
|
||||||
currentKeypair,
|
|
||||||
isWebSocketConnected,
|
|
||||||
lockSession
|
|
||||||
} = useSessionStore();
|
|
||||||
|
|
||||||
const handleLockClick = async () => {
|
|
||||||
if (isSessionUnlocked) {
|
|
||||||
await lockSession();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AppBar position="static" color="primary" elevation={0}>
|
|
||||||
<Toolbar>
|
|
||||||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
||||||
Hero Vault
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
|
||||||
{/* WebSocket connection status */}
|
|
||||||
{isWebSocketConnected ? (
|
|
||||||
<Chip
|
|
||||||
icon={<SignalWifiStatusbar4BarIcon fontSize="small" />}
|
|
||||||
label="Connected"
|
|
||||||
size="small"
|
|
||||||
color="success"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Chip
|
|
||||||
icon={<SignalWifiOffIcon fontSize="small" />}
|
|
||||||
label="Offline"
|
|
||||||
size="small"
|
|
||||||
color="default"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Session status */}
|
|
||||||
{isSessionUnlocked ? (
|
|
||||||
<Chip
|
|
||||||
icon={<LockOpenIcon fontSize="small" />}
|
|
||||||
label={currentKeyspace || 'Unlocked'}
|
|
||||||
size="small"
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Chip
|
|
||||||
icon={<LockIcon fontSize="small" />}
|
|
||||||
label="Locked"
|
|
||||||
size="small"
|
|
||||||
color="error"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Current keypair */}
|
|
||||||
{isSessionUnlocked && currentKeypair && (
|
|
||||||
<Chip
|
|
||||||
label={currentKeypair.name || currentKeypair.id}
|
|
||||||
size="small"
|
|
||||||
color="secondary"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Lock button */}
|
|
||||||
{isSessionUnlocked && (
|
|
||||||
<IconButton
|
|
||||||
edge="end"
|
|
||||||
color="inherit"
|
|
||||||
onClick={handleLockClick}
|
|
||||||
size="small"
|
|
||||||
aria-label="lock session"
|
|
||||||
>
|
|
||||||
<LockIcon />
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Toolbar>
|
|
||||||
</AppBar>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { BottomNavigation, BottomNavigationAction, Paper, Box, IconButton, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
|
|
||||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
||||||
import { useNavigate, useLocation } from 'react-router-dom';
|
|
||||||
import HomeIcon from '@mui/icons-material/Home';
|
|
||||||
import VpnKeyIcon from '@mui/icons-material/VpnKey';
|
|
||||||
import CodeIcon from '@mui/icons-material/Code';
|
|
||||||
import SettingsIcon from '@mui/icons-material/Settings';
|
|
||||||
import WifiIcon from '@mui/icons-material/Wifi';
|
|
||||||
import LockIcon from '@mui/icons-material/Lock';
|
|
||||||
import { useSessionStore } from '../store/sessionStore';
|
|
||||||
|
|
||||||
const Navigation = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const location = useLocation();
|
|
||||||
const { isSessionUnlocked } = useSessionStore();
|
|
||||||
|
|
||||||
// Get current path without leading slash
|
|
||||||
const currentPath = location.pathname.substring(1) || 'home';
|
|
||||||
|
|
||||||
// State for the more menu
|
|
||||||
const [moreAnchorEl, setMoreAnchorEl] = useState<null | HTMLElement>(null);
|
|
||||||
const isMoreMenuOpen = Boolean(moreAnchorEl);
|
|
||||||
|
|
||||||
const handleMoreClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
|
||||||
setMoreAnchorEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMoreClose = () => {
|
|
||||||
setMoreAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNavigation = (path: string) => {
|
|
||||||
navigate(`/${path === 'home' ? '' : path}`);
|
|
||||||
handleMoreClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Paper
|
|
||||||
sx={{ position: 'static', bottom: 0, left: 0, right: 0 }}
|
|
||||||
elevation={3}
|
|
||||||
>
|
|
||||||
<Box sx={{ display: 'flex', width: '100%' }}>
|
|
||||||
<BottomNavigation
|
|
||||||
showLabels
|
|
||||||
value={currentPath}
|
|
||||||
onChange={(_, newValue) => {
|
|
||||||
navigate(`/${newValue === 'home' ? '' : newValue}`);
|
|
||||||
}}
|
|
||||||
sx={{ flexGrow: 1 }}
|
|
||||||
>
|
|
||||||
<BottomNavigationAction
|
|
||||||
label="Home"
|
|
||||||
value="home"
|
|
||||||
icon={<HomeIcon />}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<BottomNavigationAction
|
|
||||||
label="Keys"
|
|
||||||
value="keypair"
|
|
||||||
icon={<VpnKeyIcon />}
|
|
||||||
disabled={!isSessionUnlocked}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<BottomNavigationAction
|
|
||||||
label="Crypto"
|
|
||||||
value="crypto"
|
|
||||||
icon={<LockIcon />}
|
|
||||||
disabled={!isSessionUnlocked}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<BottomNavigationAction
|
|
||||||
label="More"
|
|
||||||
value="more"
|
|
||||||
icon={<MoreVertIcon />}
|
|
||||||
onClick={handleMoreClick}
|
|
||||||
/>
|
|
||||||
</BottomNavigation>
|
|
||||||
|
|
||||||
<Menu
|
|
||||||
anchorEl={moreAnchorEl}
|
|
||||||
open={isMoreMenuOpen}
|
|
||||||
onClose={handleMoreClose}
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right',
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => handleNavigation('script')}
|
|
||||||
disabled={!isSessionUnlocked}
|
|
||||||
selected={currentPath === 'script'}
|
|
||||||
>
|
|
||||||
<ListItemIcon>
|
|
||||||
<CodeIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Scripts</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => handleNavigation('websocket')}
|
|
||||||
disabled={!isSessionUnlocked}
|
|
||||||
selected={currentPath === 'websocket'}
|
|
||||||
>
|
|
||||||
<ListItemIcon>
|
|
||||||
<WifiIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>WebSocket</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => handleNavigation('settings')}
|
|
||||||
selected={currentPath === 'settings'}
|
|
||||||
>
|
|
||||||
<ListItemIcon>
|
|
||||||
<SettingsIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Settings</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Navigation;
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
:root {
|
|
||||||
font-family: 'Roboto', system-ui, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
min-width: 360px;
|
|
||||||
min-height: 520px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#root {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbar styling */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom/client';
|
|
||||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
|
||||||
import CssBaseline from '@mui/material/CssBaseline';
|
|
||||||
import App from './App';
|
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
// Create a dark theme for the extension
|
|
||||||
const darkTheme = createTheme({
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
primary: {
|
|
||||||
main: '#6200ee',
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
main: '#03dac6',
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
default: '#121212',
|
|
||||||
paper: '#1e1e1e',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
typography: {
|
|
||||||
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
|
||||||
h1: {
|
|
||||||
fontSize: '1.5rem',
|
|
||||||
fontWeight: 600,
|
|
||||||
},
|
|
||||||
h2: {
|
|
||||||
fontSize: '1.25rem',
|
|
||||||
fontWeight: 600,
|
|
||||||
},
|
|
||||||
h3: {
|
|
||||||
fontSize: '1.125rem',
|
|
||||||
fontWeight: 600,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
MuiButton: {
|
|
||||||
styleOverrides: {
|
|
||||||
root: {
|
|
||||||
borderRadius: 8,
|
|
||||||
textTransform: 'none',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
MuiPaper: {
|
|
||||||
styleOverrides: {
|
|
||||||
root: {
|
|
||||||
borderRadius: 8,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<ThemeProvider theme={darkTheme}>
|
|
||||||
<CssBaseline />
|
|
||||||
<App />
|
|
||||||
</ThemeProvider>
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
|
||||||
@ -1,392 +0,0 @@
|
|||||||
/**
|
|
||||||
* Cryptographic Operations Page
|
|
||||||
*
|
|
||||||
* This page provides a UI for:
|
|
||||||
* - Encrypting/decrypting data using the keyspace's symmetric cipher
|
|
||||||
* - Signing/verifying messages using the selected keypair
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import type { SyntheticEvent } from '../types';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Typography,
|
|
||||||
TextField,
|
|
||||||
Button,
|
|
||||||
Paper,
|
|
||||||
Tabs,
|
|
||||||
Tab,
|
|
||||||
CircularProgress,
|
|
||||||
Alert,
|
|
||||||
Divider,
|
|
||||||
IconButton,
|
|
||||||
Tooltip,
|
|
||||||
} from '@mui/material';
|
|
||||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
|
||||||
import { useSessionStore } from '../store/sessionStore';
|
|
||||||
import { useCryptoStore } from '../store/cryptoStore';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
const CryptoPage = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { isSessionUnlocked, currentKeypair } = useSessionStore();
|
|
||||||
const {
|
|
||||||
encryptData,
|
|
||||||
decryptData,
|
|
||||||
signMessage,
|
|
||||||
verifySignature,
|
|
||||||
isEncrypting,
|
|
||||||
isDecrypting,
|
|
||||||
isSigning,
|
|
||||||
isVerifying,
|
|
||||||
error,
|
|
||||||
clearError
|
|
||||||
} = useCryptoStore();
|
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState(0);
|
|
||||||
const [copySuccess, setCopySuccess] = useState<string | null>(null);
|
|
||||||
|
|
||||||
// Encryption state
|
|
||||||
const [plaintext, setPlaintext] = useState('');
|
|
||||||
const [encryptedData, setEncryptedData] = useState('');
|
|
||||||
|
|
||||||
// Decryption state
|
|
||||||
const [ciphertext, setCiphertext] = useState('');
|
|
||||||
const [decryptedData, setDecryptedData] = useState('');
|
|
||||||
|
|
||||||
// Signing state
|
|
||||||
const [messageToSign, setMessageToSign] = useState('');
|
|
||||||
const [signature, setSignature] = useState('');
|
|
||||||
|
|
||||||
// Verification state
|
|
||||||
const [messageToVerify, setMessageToVerify] = useState('');
|
|
||||||
const [signatureToVerify, setSignatureToVerify] = useState('');
|
|
||||||
const [isVerified, setIsVerified] = useState<boolean | null>(null);
|
|
||||||
|
|
||||||
// Redirect if not unlocked
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
navigate('/');
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked, navigate]);
|
|
||||||
|
|
||||||
const handleTabChange = (_event: React.SyntheticEvent<Element, Event>, newValue: number) => {
|
|
||||||
setActiveTab(newValue);
|
|
||||||
clearError();
|
|
||||||
setCopySuccess(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEncrypt = async () => {
|
|
||||||
try {
|
|
||||||
const result = await encryptData(plaintext);
|
|
||||||
setEncryptedData(result);
|
|
||||||
} catch (err) {
|
|
||||||
// Error is already handled in the store
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDecrypt = async () => {
|
|
||||||
try {
|
|
||||||
const result = await decryptData(ciphertext);
|
|
||||||
setDecryptedData(result);
|
|
||||||
} catch (err) {
|
|
||||||
// Error is already handled in the store
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSign = async () => {
|
|
||||||
try {
|
|
||||||
const result = await signMessage(messageToSign);
|
|
||||||
setSignature(result);
|
|
||||||
} catch (err) {
|
|
||||||
// Error is already handled in the store
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleVerify = async () => {
|
|
||||||
try {
|
|
||||||
const result = await verifySignature(messageToVerify, signatureToVerify);
|
|
||||||
setIsVerified(result);
|
|
||||||
} catch (err) {
|
|
||||||
setIsVerified(false);
|
|
||||||
// Error is already handled in the store
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyToClipboard = (text: string, label: string) => {
|
|
||||||
navigator.clipboard.writeText(text).then(
|
|
||||||
() => {
|
|
||||||
setCopySuccess(`${label} copied to clipboard!`);
|
|
||||||
setTimeout(() => setCopySuccess(null), 2000);
|
|
||||||
},
|
|
||||||
() => {
|
|
||||||
setCopySuccess('Failed to copy!');
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
return null; // Will redirect via useEffect
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<Typography variant="h6" sx={{ mb: 2 }}>Cryptographic Operations</Typography>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Alert severity="error" sx={{ mb: 2 }}>
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{copySuccess && (
|
|
||||||
<Alert severity="success" sx={{ mb: 2 }}>
|
|
||||||
{copySuccess}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Paper sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
|
||||||
{/* Tabs with smaller width and scrollable */}
|
|
||||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
|
||||||
<Tabs
|
|
||||||
value={activeTab}
|
|
||||||
onChange={handleTabChange}
|
|
||||||
variant="scrollable"
|
|
||||||
scrollButtons="auto"
|
|
||||||
allowScrollButtonsMobile
|
|
||||||
sx={{ minHeight: '48px' }}
|
|
||||||
>
|
|
||||||
<Tab label="Encrypt" sx={{ minWidth: '80px', minHeight: '48px', py: 0 }} />
|
|
||||||
<Tab label="Decrypt" sx={{ minWidth: '80px', minHeight: '48px', py: 0 }} />
|
|
||||||
<Tab label="Sign" sx={{ minWidth: '80px', minHeight: '48px', py: 0 }} />
|
|
||||||
<Tab label="Verify" sx={{ minWidth: '80px', minHeight: '48px', py: 0 }} />
|
|
||||||
</Tabs>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Content area with proper scrolling */}
|
|
||||||
<Box sx={{ p: 2, flexGrow: 1, overflow: 'auto', height: 'calc(100% - 48px)' }}>
|
|
||||||
{/* Encryption Tab */}
|
|
||||||
{activeTab === 0 && (
|
|
||||||
<Box>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>Encrypt Data</Typography>
|
|
||||||
<Typography variant="body2" color="text.secondary" paragraph>
|
|
||||||
Data will be encrypted using ChaCha20-Poly1305 with a key derived from your keyspace password.
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Data to Encrypt"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
fullWidth
|
|
||||||
value={plaintext}
|
|
||||||
onChange={(e) => setPlaintext(e.target.value)}
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
onClick={handleEncrypt}
|
|
||||||
disabled={!plaintext || isEncrypting}
|
|
||||||
sx={{ mt: 2 }}
|
|
||||||
>
|
|
||||||
{isEncrypting ? <CircularProgress size={24} /> : 'Encrypt'}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{encryptedData && (
|
|
||||||
<Box sx={{ mt: 3 }}>
|
|
||||||
<Divider sx={{ my: 2 }} />
|
|
||||||
<Typography variant="subtitle1">Encrypted Result</Typography>
|
|
||||||
<Box sx={{ position: 'relative' }}>
|
|
||||||
<TextField
|
|
||||||
label="Encrypted Data (Base64)"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
fullWidth
|
|
||||||
value={encryptedData}
|
|
||||||
InputProps={{ readOnly: true }}
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
<Tooltip title="Copy to clipboard">
|
|
||||||
<IconButton
|
|
||||||
sx={{ position: 'absolute', top: 8, right: 8 }}
|
|
||||||
onClick={() => copyToClipboard(encryptedData, 'Encrypted data')}
|
|
||||||
>
|
|
||||||
<ContentCopyIcon fontSize="small" />
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Decryption Tab */}
|
|
||||||
{activeTab === 1 && (
|
|
||||||
<Box>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>Decrypt Data</Typography>
|
|
||||||
<Typography variant="body2" color="text.secondary" paragraph>
|
|
||||||
Paste encrypted data (in Base64 format) to decrypt it using your keyspace password.
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Encrypted Data (Base64)"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
fullWidth
|
|
||||||
value={ciphertext}
|
|
||||||
onChange={(e) => setCiphertext(e.target.value)}
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
onClick={handleDecrypt}
|
|
||||||
disabled={!ciphertext || isDecrypting}
|
|
||||||
sx={{ mt: 2 }}
|
|
||||||
>
|
|
||||||
{isDecrypting ? <CircularProgress size={24} /> : 'Decrypt'}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{decryptedData && (
|
|
||||||
<Box sx={{ mt: 3 }}>
|
|
||||||
<Divider sx={{ my: 2 }} />
|
|
||||||
<Typography variant="subtitle1">Decrypted Result</Typography>
|
|
||||||
<Box sx={{ position: 'relative' }}>
|
|
||||||
<TextField
|
|
||||||
label="Decrypted Data"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
fullWidth
|
|
||||||
value={decryptedData}
|
|
||||||
InputProps={{ readOnly: true }}
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
<Tooltip title="Copy to clipboard">
|
|
||||||
<IconButton
|
|
||||||
sx={{ position: 'absolute', top: 8, right: 8 }}
|
|
||||||
onClick={() => copyToClipboard(decryptedData, 'Decrypted data')}
|
|
||||||
>
|
|
||||||
<ContentCopyIcon fontSize="small" />
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Signing Tab */}
|
|
||||||
{activeTab === 2 && (
|
|
||||||
<Box>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>Sign Message</Typography>
|
|
||||||
|
|
||||||
{!currentKeypair ? (
|
|
||||||
<Alert severity="warning" sx={{ mb: 2 }}>
|
|
||||||
Please select a keypair from the Keypair page before signing messages.
|
|
||||||
</Alert>
|
|
||||||
) : (
|
|
||||||
<Alert severity="info" sx={{ mb: 2 }}>
|
|
||||||
Signing with keypair: {currentKeypair.name || currentKeypair.id.substring(0, 8)}...
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Message to Sign"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
fullWidth
|
|
||||||
value={messageToSign}
|
|
||||||
onChange={(e) => setMessageToSign(e.target.value)}
|
|
||||||
margin="normal"
|
|
||||||
disabled={!currentKeypair}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
onClick={handleSign}
|
|
||||||
disabled={!messageToSign || !currentKeypair || isSigning}
|
|
||||||
sx={{ mt: 2 }}
|
|
||||||
>
|
|
||||||
{isSigning ? <CircularProgress size={24} /> : 'Sign Message'}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{signature && (
|
|
||||||
<Box sx={{ mt: 3 }}>
|
|
||||||
<Divider sx={{ my: 2 }} />
|
|
||||||
<Typography variant="subtitle1">Signature</Typography>
|
|
||||||
<Box sx={{ position: 'relative' }}>
|
|
||||||
<TextField
|
|
||||||
label="Signature (Hex)"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
fullWidth
|
|
||||||
value={signature}
|
|
||||||
InputProps={{ readOnly: true }}
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
<Tooltip title="Copy to clipboard">
|
|
||||||
<IconButton
|
|
||||||
sx={{ position: 'absolute', top: 8, right: 8 }}
|
|
||||||
onClick={() => copyToClipboard(signature, 'Signature')}
|
|
||||||
>
|
|
||||||
<ContentCopyIcon fontSize="small" />
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Verification Tab */}
|
|
||||||
{activeTab === 3 && (
|
|
||||||
<Box>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>Verify Signature</Typography>
|
|
||||||
<Typography variant="body2" color="text.secondary" paragraph>
|
|
||||||
Verify that a message was signed by the currently selected keypair.
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Message"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
fullWidth
|
|
||||||
value={messageToVerify}
|
|
||||||
onChange={(e) => setMessageToVerify(e.target.value)}
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
label="Signature (Hex)"
|
|
||||||
multiline
|
|
||||||
rows={2}
|
|
||||||
fullWidth
|
|
||||||
value={signatureToVerify}
|
|
||||||
onChange={(e) => setSignatureToVerify(e.target.value)}
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
onClick={handleVerify}
|
|
||||||
disabled={!messageToVerify || !signatureToVerify || isVerifying}
|
|
||||||
sx={{ mt: 2 }}
|
|
||||||
>
|
|
||||||
{isVerifying ? <CircularProgress size={24} /> : 'Verify Signature'}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{isVerified !== null && (
|
|
||||||
<Box sx={{ mt: 3 }}>
|
|
||||||
<Alert severity={isVerified ? "success" : "error"}>
|
|
||||||
{isVerified
|
|
||||||
? "Signature is valid! The message was signed by the expected keypair."
|
|
||||||
: "Invalid signature. The message may have been tampered with or signed by a different keypair."}
|
|
||||||
</Alert>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CryptoPage;
|
|
||||||
@ -1,155 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Typography,
|
|
||||||
Button,
|
|
||||||
TextField,
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
Stack,
|
|
||||||
Alert,
|
|
||||||
CircularProgress
|
|
||||||
} from '@mui/material';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { useSessionStore } from '../store/sessionStore';
|
|
||||||
|
|
||||||
const HomePage = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { isSessionUnlocked, unlockSession, createKeyspace } = useSessionStore();
|
|
||||||
|
|
||||||
const [keyspace, setKeyspace] = useState<string>('');
|
|
||||||
const [password, setPassword] = useState<string>('');
|
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [mode, setMode] = useState<'unlock' | 'create'>('unlock');
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setError(null);
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let success = false;
|
|
||||||
|
|
||||||
if (mode === 'unlock') {
|
|
||||||
success = await unlockSession(keyspace, password);
|
|
||||||
} else {
|
|
||||||
success = await createKeyspace(keyspace, password);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
// Navigate to keypair page on success
|
|
||||||
navigate('/keypair');
|
|
||||||
} else {
|
|
||||||
setError(mode === 'unlock'
|
|
||||||
? 'Failed to unlock keyspace. Check your password and try again.'
|
|
||||||
: 'Failed to create keyspace. Please try again.');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError((err as Error).message || 'An unexpected error occurred');
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isSessionUnlocked) {
|
|
||||||
return (
|
|
||||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
|
||||||
<Typography variant="h5" gutterBottom>
|
|
||||||
Welcome to Hero Vault
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1" color="text.secondary" paragraph>
|
|
||||||
Your session is unlocked. You can now use the extension features.
|
|
||||||
</Typography>
|
|
||||||
<Stack direction="row" spacing={2} justifyContent="center" mt={3}>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
onClick={() => navigate('/keypair')}
|
|
||||||
>
|
|
||||||
Manage Keys
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
color="secondary"
|
|
||||||
onClick={() => navigate('/script')}
|
|
||||||
>
|
|
||||||
Run Scripts
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ maxWidth: 400, mx: 'auto', py: 2 }}>
|
|
||||||
<Typography variant="h5" align="center" gutterBottom>
|
|
||||||
Hero Vault
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Card variant="outlined" sx={{ mt: 3 }}>
|
|
||||||
<CardContent>
|
|
||||||
<Typography variant="h6" gutterBottom>
|
|
||||||
{mode === 'unlock' ? 'Unlock Keyspace' : 'Create New Keyspace'}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Alert severity="error" sx={{ mb: 2 }}>
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<TextField
|
|
||||||
label="Keyspace Name"
|
|
||||||
value={keyspace}
|
|
||||||
onChange={(e) => setKeyspace(e.target.value)}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
required
|
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Password"
|
|
||||||
type="password"
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
required
|
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Box sx={{ mt: 3, display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<Button
|
|
||||||
variant="text"
|
|
||||||
onClick={() => setMode(mode === 'unlock' ? 'create' : 'unlock')}
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
{mode === 'unlock' ? 'Create New Keyspace' : 'Unlock Existing'}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
disabled={isLoading || !keyspace || !password}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<CircularProgress size={24} color="inherit" />
|
|
||||||
) : mode === 'unlock' ? (
|
|
||||||
'Unlock'
|
|
||||||
) : (
|
|
||||||
'Create'
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HomePage;
|
|
||||||
@ -1,242 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Typography,
|
|
||||||
Button,
|
|
||||||
List,
|
|
||||||
ListItem,
|
|
||||||
ListItemText,
|
|
||||||
ListItemSecondaryAction,
|
|
||||||
IconButton,
|
|
||||||
Divider,
|
|
||||||
Dialog,
|
|
||||||
DialogTitle,
|
|
||||||
DialogContent,
|
|
||||||
DialogActions,
|
|
||||||
TextField,
|
|
||||||
FormControl,
|
|
||||||
InputLabel,
|
|
||||||
Select,
|
|
||||||
MenuItem,
|
|
||||||
CircularProgress,
|
|
||||||
Paper,
|
|
||||||
Alert,
|
|
||||||
Chip
|
|
||||||
} from '@mui/material';
|
|
||||||
import AddIcon from '@mui/icons-material/Add';
|
|
||||||
import CheckIcon from '@mui/icons-material/Check';
|
|
||||||
import { useSessionStore } from '../store/sessionStore';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
const KeypairPage = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const {
|
|
||||||
isSessionUnlocked,
|
|
||||||
availableKeypairs,
|
|
||||||
currentKeypair,
|
|
||||||
listKeypairs,
|
|
||||||
selectKeypair,
|
|
||||||
createKeypair
|
|
||||||
} = useSessionStore();
|
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
|
||||||
const [newKeypairName, setNewKeypairName] = useState('');
|
|
||||||
const [newKeypairType, setNewKeypairType] = useState('Secp256k1');
|
|
||||||
const [newKeypairDescription, setNewKeypairDescription] = useState('');
|
|
||||||
const [isCreating, setIsCreating] = useState(false);
|
|
||||||
|
|
||||||
// Redirect if not unlocked
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
navigate('/');
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked, navigate]);
|
|
||||||
|
|
||||||
// Load keypairs on mount
|
|
||||||
useEffect(() => {
|
|
||||||
const loadKeypairs = async () => {
|
|
||||||
try {
|
|
||||||
setIsLoading(true);
|
|
||||||
await listKeypairs();
|
|
||||||
} catch (err) {
|
|
||||||
setError((err as Error).message || 'Failed to load keypairs');
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isSessionUnlocked) {
|
|
||||||
loadKeypairs();
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked, listKeypairs]);
|
|
||||||
|
|
||||||
const handleSelectKeypair = async (keypairId: string) => {
|
|
||||||
try {
|
|
||||||
setIsLoading(true);
|
|
||||||
await selectKeypair(keypairId);
|
|
||||||
} catch (err) {
|
|
||||||
setError((err as Error).message || 'Failed to select keypair');
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateKeypair = async () => {
|
|
||||||
try {
|
|
||||||
setIsCreating(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
await createKeypair(newKeypairType, {
|
|
||||||
name: newKeypairName,
|
|
||||||
description: newKeypairDescription
|
|
||||||
});
|
|
||||||
|
|
||||||
setCreateDialogOpen(false);
|
|
||||||
setNewKeypairName('');
|
|
||||||
setNewKeypairDescription('');
|
|
||||||
|
|
||||||
// Refresh the list
|
|
||||||
await listKeypairs();
|
|
||||||
} catch (err) {
|
|
||||||
setError((err as Error).message || 'Failed to create keypair');
|
|
||||||
} finally {
|
|
||||||
setIsCreating(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
return null; // Will redirect via useEffect
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
|
||||||
<Typography variant="h6">Keypair Management</Typography>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
startIcon={<AddIcon />}
|
|
||||||
onClick={() => setCreateDialogOpen(true)}
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
Create New
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Alert severity="error" sx={{ mb: 2 }}>
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
|
||||||
<CircularProgress />
|
|
||||||
</Box>
|
|
||||||
) : availableKeypairs.length === 0 ? (
|
|
||||||
<Paper sx={{ p: 3, textAlign: 'center' }}>
|
|
||||||
<Typography variant="body1" color="text.secondary">
|
|
||||||
No keypairs found. Create your first keypair to get started.
|
|
||||||
</Typography>
|
|
||||||
</Paper>
|
|
||||||
) : (
|
|
||||||
<Paper variant="outlined" sx={{ flexGrow: 1, overflow: 'auto' }}>
|
|
||||||
<List disablePadding>
|
|
||||||
{availableKeypairs.map((keypair: any, index: number) => (
|
|
||||||
<Box key={keypair.id}>
|
|
||||||
{index > 0 && <Divider />}
|
|
||||||
<ListItem
|
|
||||||
button
|
|
||||||
selected={currentKeypair?.id === keypair.id}
|
|
||||||
onClick={() => handleSelectKeypair(keypair.id)}
|
|
||||||
>
|
|
||||||
<ListItemText
|
|
||||||
primary={
|
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
||||||
{keypair.name || keypair.id}
|
|
||||||
<Chip
|
|
||||||
label={keypair.type}
|
|
||||||
size="small"
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
}
|
|
||||||
secondary={
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
{keypair.description || 'No description'}
|
|
||||||
<br />
|
|
||||||
Created: {new Date(keypair.createdAt).toLocaleString()}
|
|
||||||
</Typography>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<ListItemSecondaryAction>
|
|
||||||
{currentKeypair?.id === keypair.id && (
|
|
||||||
<IconButton edge="end" disabled>
|
|
||||||
<CheckIcon color="success" />
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
</ListItemSecondaryAction>
|
|
||||||
</ListItem>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</List>
|
|
||||||
</Paper>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Create Keypair Dialog */}
|
|
||||||
<Dialog open={createDialogOpen} onClose={() => setCreateDialogOpen(false)} maxWidth="sm" fullWidth>
|
|
||||||
<DialogTitle>Create New Keypair</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<TextField
|
|
||||||
label="Name"
|
|
||||||
value={newKeypairName}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewKeypairName(e.target.value)}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
disabled={isCreating}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormControl fullWidth margin="normal">
|
|
||||||
<InputLabel>Type</InputLabel>
|
|
||||||
<Select
|
|
||||||
value={newKeypairType}
|
|
||||||
onChange={(e) => setNewKeypairType(e.target.value)}
|
|
||||||
disabled={isCreating}
|
|
||||||
>
|
|
||||||
<MenuItem value="Ed25519">Ed25519</MenuItem>
|
|
||||||
<MenuItem value="Secp256k1">Secp256k1 (Ethereum)</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Description"
|
|
||||||
value={newKeypairDescription}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewKeypairDescription(e.target.value)}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
multiline
|
|
||||||
rows={2}
|
|
||||||
disabled={isCreating}
|
|
||||||
/>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={() => setCreateDialogOpen(false)} disabled={isCreating}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleCreateKeypair}
|
|
||||||
color="primary"
|
|
||||||
variant="contained"
|
|
||||||
disabled={isCreating || !newKeypairName}
|
|
||||||
>
|
|
||||||
{isCreating ? <CircularProgress size={24} /> : 'Create'}
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default KeypairPage;
|
|
||||||
@ -1,557 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { getChromeApi } from '../utils/chromeApi';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Typography,
|
|
||||||
Button,
|
|
||||||
TextField,
|
|
||||||
Paper,
|
|
||||||
Alert,
|
|
||||||
CircularProgress,
|
|
||||||
Divider,
|
|
||||||
Tabs,
|
|
||||||
Tab,
|
|
||||||
List,
|
|
||||||
ListItem,
|
|
||||||
ListItemText,
|
|
||||||
ListItemSecondaryAction,
|
|
||||||
IconButton,
|
|
||||||
Dialog,
|
|
||||||
DialogTitle,
|
|
||||||
DialogContent,
|
|
||||||
DialogActions,
|
|
||||||
Chip
|
|
||||||
} from '@mui/material';
|
|
||||||
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
|
|
||||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
|
||||||
// DeleteIcon removed as it's not used
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { useSessionStore } from '../store/sessionStore';
|
|
||||||
|
|
||||||
interface ScriptResult {
|
|
||||||
id: string;
|
|
||||||
timestamp: number;
|
|
||||||
script: string;
|
|
||||||
result: string;
|
|
||||||
success: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface PendingScript {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
script: string;
|
|
||||||
tags: string[];
|
|
||||||
timestamp: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ScriptPage = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { isSessionUnlocked, currentKeypair } = useSessionStore();
|
|
||||||
|
|
||||||
const [tabValue, setTabValue] = useState<number>(0);
|
|
||||||
const [scriptInput, setScriptInput] = useState<string>('');
|
|
||||||
const [isExecuting, setIsExecuting] = useState<boolean>(false);
|
|
||||||
const [executionResult, setExecutionResult] = useState<string | null>(null);
|
|
||||||
const [executionSuccess, setExecutionSuccess] = useState<boolean | null>(null);
|
|
||||||
const [scriptResults, setScriptResults] = useState<ScriptResult[]>([]);
|
|
||||||
const [pendingScripts, setPendingScripts] = useState<PendingScript[]>([]);
|
|
||||||
const [selectedPendingScript, setSelectedPendingScript] = useState<PendingScript | null>(null);
|
|
||||||
const [scriptDialogOpen, setScriptDialogOpen] = useState<boolean>(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
// Redirect if not unlocked
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
navigate('/');
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked, navigate]);
|
|
||||||
|
|
||||||
// Load pending scripts from storage
|
|
||||||
useEffect(() => {
|
|
||||||
const loadPendingScripts = async () => {
|
|
||||||
try {
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
const data = await chromeApi.storage.local.get('pendingScripts');
|
|
||||||
if (data.pendingScripts) {
|
|
||||||
setPendingScripts(data.pendingScripts);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to load pending scripts:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isSessionUnlocked) {
|
|
||||||
loadPendingScripts();
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked]);
|
|
||||||
|
|
||||||
// Load script history from storage
|
|
||||||
useEffect(() => {
|
|
||||||
const loadScriptResults = async () => {
|
|
||||||
try {
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
const data = await chromeApi.storage.local.get('scriptResults');
|
|
||||||
if (data.scriptResults) {
|
|
||||||
setScriptResults(data.scriptResults);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to load script results:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isSessionUnlocked) {
|
|
||||||
loadScriptResults();
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked]);
|
|
||||||
|
|
||||||
const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
|
|
||||||
setTabValue(newValue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleExecuteScript = async () => {
|
|
||||||
if (!scriptInput.trim()) return;
|
|
||||||
|
|
||||||
setIsExecuting(true);
|
|
||||||
setError(null);
|
|
||||||
setExecutionResult(null);
|
|
||||||
setExecutionSuccess(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Call the WASM run_rhai function via our store
|
|
||||||
const result = await useSessionStore.getState().executeScript(scriptInput);
|
|
||||||
|
|
||||||
setExecutionResult(result);
|
|
||||||
setExecutionSuccess(true);
|
|
||||||
|
|
||||||
// Save to history
|
|
||||||
const newResult: ScriptResult = {
|
|
||||||
id: `script-${Date.now()}`,
|
|
||||||
timestamp: Date.now(),
|
|
||||||
script: scriptInput,
|
|
||||||
result,
|
|
||||||
success: true
|
|
||||||
};
|
|
||||||
|
|
||||||
const updatedResults = [newResult, ...scriptResults].slice(0, 20); // Keep last 20
|
|
||||||
setScriptResults(updatedResults);
|
|
||||||
|
|
||||||
// Save to storage
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
await chromeApi.storage.local.set({ scriptResults: updatedResults });
|
|
||||||
} catch (err) {
|
|
||||||
setError((err as Error).message || 'Failed to execute script');
|
|
||||||
setExecutionSuccess(false);
|
|
||||||
setExecutionResult('Execution failed');
|
|
||||||
} finally {
|
|
||||||
setIsExecuting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleViewPendingScript = (script: PendingScript) => {
|
|
||||||
setSelectedPendingScript(script);
|
|
||||||
setScriptDialogOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleApprovePendingScript = async () => {
|
|
||||||
if (!selectedPendingScript) return;
|
|
||||||
|
|
||||||
setScriptDialogOpen(false);
|
|
||||||
setScriptInput(selectedPendingScript.script);
|
|
||||||
setTabValue(0); // Switch to execute tab
|
|
||||||
|
|
||||||
// Remove from pending list
|
|
||||||
const updatedPendingScripts = pendingScripts.filter(
|
|
||||||
script => script.id !== selectedPendingScript.id
|
|
||||||
);
|
|
||||||
|
|
||||||
setPendingScripts(updatedPendingScripts);
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
await chromeApi.storage.local.set({ pendingScripts: updatedPendingScripts });
|
|
||||||
setSelectedPendingScript(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRejectPendingScript = async () => {
|
|
||||||
if (!selectedPendingScript) return;
|
|
||||||
|
|
||||||
// Remove from pending list
|
|
||||||
const updatedPendingScripts = pendingScripts.filter(
|
|
||||||
script => script.id !== selectedPendingScript.id
|
|
||||||
);
|
|
||||||
|
|
||||||
setPendingScripts(updatedPendingScripts);
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
await chromeApi.storage.local.set({ pendingScripts: updatedPendingScripts });
|
|
||||||
|
|
||||||
setScriptDialogOpen(false);
|
|
||||||
setSelectedPendingScript(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClearHistory = async () => {
|
|
||||||
setScriptResults([]);
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
await chromeApi.storage.local.set({ scriptResults: [] });
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
return null; // Will redirect via useEffect
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
|
||||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
|
||||||
<Tabs
|
|
||||||
value={tabValue}
|
|
||||||
onChange={handleTabChange}
|
|
||||||
aria-label="script tabs"
|
|
||||||
variant="scrollable"
|
|
||||||
scrollButtons="auto"
|
|
||||||
allowScrollButtonsMobile
|
|
||||||
sx={{ minHeight: '48px' }}
|
|
||||||
>
|
|
||||||
<Tab label="Execute" sx={{ minHeight: '48px', py: 0 }} />
|
|
||||||
<Tab
|
|
||||||
label={
|
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
||||||
Pending
|
|
||||||
{pendingScripts.length > 0 && (
|
|
||||||
<Chip
|
|
||||||
label={pendingScripts.length}
|
|
||||||
size="small"
|
|
||||||
color="primary"
|
|
||||||
sx={{ ml: 1 }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
}
|
|
||||||
sx={{ minHeight: '48px', py: 0 }}
|
|
||||||
/>
|
|
||||||
<Tab label="History" sx={{ minHeight: '48px', py: 0 }} />
|
|
||||||
</Tabs>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Execute Tab */}
|
|
||||||
{tabValue === 0 && (
|
|
||||||
<Box sx={{
|
|
||||||
p: 2,
|
|
||||||
flexGrow: 1,
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
overflow: 'hidden',
|
|
||||||
height: 'calc(100% - 48px)' // Subtract tab height
|
|
||||||
}}>
|
|
||||||
<Box sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
overflow: 'auto',
|
|
||||||
height: '100%',
|
|
||||||
pb: 2 // Add padding at bottom for scrolling
|
|
||||||
}}>
|
|
||||||
{!currentKeypair && (
|
|
||||||
<Alert severity="warning" sx={{ mb: 2 }}>
|
|
||||||
No keypair selected. Select a keypair to enable script execution with signing capabilities.
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Alert severity="error" sx={{ mb: 2 }}>
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Rhai Script"
|
|
||||||
multiline
|
|
||||||
rows={6} // Reduced from 8 to leave more space for results
|
|
||||||
value={scriptInput}
|
|
||||||
onChange={(e) => setScriptInput(e.target.value)}
|
|
||||||
fullWidth
|
|
||||||
variant="outlined"
|
|
||||||
placeholder="Enter your Rhai script here..."
|
|
||||||
sx={{ mb: 2 }}
|
|
||||||
disabled={isExecuting}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
startIcon={<PlayArrowIcon />}
|
|
||||||
onClick={handleExecuteScript}
|
|
||||||
disabled={isExecuting || !scriptInput.trim()}
|
|
||||||
>
|
|
||||||
{isExecuting ? <CircularProgress size={24} /> : 'Execute'}
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{executionResult && (
|
|
||||||
<Paper
|
|
||||||
variant="outlined"
|
|
||||||
sx={{
|
|
||||||
p: 2,
|
|
||||||
bgcolor: executionSuccess ? 'success.dark' : 'error.dark',
|
|
||||||
color: 'white',
|
|
||||||
overflowY: 'auto',
|
|
||||||
mb: 2, // Add margin at bottom
|
|
||||||
minHeight: '100px', // Ensure minimum height for visibility
|
|
||||||
maxHeight: '200px' // Limit maximum height
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant="subtitle2" gutterBottom>
|
|
||||||
Execution Result:
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
component="pre"
|
|
||||||
sx={{
|
|
||||||
whiteSpace: 'pre-wrap',
|
|
||||||
wordBreak: 'break-word',
|
|
||||||
fontFamily: 'monospace'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{executionResult}
|
|
||||||
</Typography>
|
|
||||||
</Paper>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Pending Scripts Tab */}
|
|
||||||
{tabValue === 1 && (
|
|
||||||
<Box sx={{ p: 2, flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
|
|
||||||
{pendingScripts.length === 0 ? (
|
|
||||||
<Paper sx={{ p: 3, textAlign: 'center' }}>
|
|
||||||
<Typography variant="body1" color="text.secondary">
|
|
||||||
No pending scripts. Incoming scripts from connected WebSocket servers will appear here.
|
|
||||||
</Typography>
|
|
||||||
</Paper>
|
|
||||||
) : (
|
|
||||||
<Paper variant="outlined" sx={{ flexGrow: 1, overflow: 'auto' }}>
|
|
||||||
<List disablePadding>
|
|
||||||
{pendingScripts.map((script, index) => (
|
|
||||||
<Box key={script.id}>
|
|
||||||
{index > 0 && <Divider />}
|
|
||||||
<ListItem>
|
|
||||||
<ListItemText
|
|
||||||
primary={script.title}
|
|
||||||
secondary={
|
|
||||||
<>
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
{script.description || 'No description'}
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{ mt: 0.5 }}>
|
|
||||||
{script.tags.map(tag => (
|
|
||||||
<Chip
|
|
||||||
key={tag}
|
|
||||||
label={tag}
|
|
||||||
size="small"
|
|
||||||
color={tag === 'remote' ? 'secondary' : 'primary'}
|
|
||||||
variant="outlined"
|
|
||||||
sx={{ mr: 0.5 }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<ListItemSecondaryAction>
|
|
||||||
<IconButton
|
|
||||||
edge="end"
|
|
||||||
onClick={() => handleViewPendingScript(script)}
|
|
||||||
aria-label="view script"
|
|
||||||
>
|
|
||||||
<VisibilityIcon />
|
|
||||||
</IconButton>
|
|
||||||
</ListItemSecondaryAction>
|
|
||||||
</ListItem>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</List>
|
|
||||||
</Paper>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* History Tab */}
|
|
||||||
{tabValue === 2 && (
|
|
||||||
<Box sx={{
|
|
||||||
p: 2,
|
|
||||||
flexGrow: 1,
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
overflow: 'hidden',
|
|
||||||
height: 'calc(100% - 48px)' // Subtract tab height
|
|
||||||
}}>
|
|
||||||
<Box sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
overflow: 'auto',
|
|
||||||
height: '100%',
|
|
||||||
pb: 2 // Add padding at bottom for scrolling
|
|
||||||
}}>
|
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
color="error"
|
|
||||||
size="small"
|
|
||||||
onClick={handleClearHistory}
|
|
||||||
disabled={scriptResults.length === 0}
|
|
||||||
>
|
|
||||||
Clear History
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{scriptResults.length === 0 ? (
|
|
||||||
<Paper sx={{ p: 3, textAlign: 'center' }}>
|
|
||||||
<Typography variant="body1" color="text.secondary">
|
|
||||||
No script execution history yet.
|
|
||||||
</Typography>
|
|
||||||
</Paper>
|
|
||||||
) : (
|
|
||||||
<Paper variant="outlined" sx={{ flexGrow: 1, overflow: 'auto' }}>
|
|
||||||
<List disablePadding>
|
|
||||||
{scriptResults.map((result, index) => (
|
|
||||||
<Box key={result.id}>
|
|
||||||
{index > 0 && <Divider />}
|
|
||||||
<ListItem>
|
|
||||||
<ListItemText
|
|
||||||
primary={
|
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
||||||
<Typography variant="subtitle2">
|
|
||||||
{new Date(result.timestamp).toLocaleString()}
|
|
||||||
</Typography>
|
|
||||||
<Chip
|
|
||||||
label={result.success ? 'Success' : 'Failed'}
|
|
||||||
size="small"
|
|
||||||
color={result.success ? 'success' : 'error'}
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
}
|
|
||||||
secondary={
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
color="text.secondary"
|
|
||||||
sx={{
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
maxWidth: '280px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{result.script}
|
|
||||||
</Typography>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<ListItemSecondaryAction>
|
|
||||||
<IconButton
|
|
||||||
edge="end"
|
|
||||||
onClick={() => {
|
|
||||||
setScriptInput(result.script);
|
|
||||||
setTabValue(0);
|
|
||||||
}}
|
|
||||||
aria-label="reuse script"
|
|
||||||
>
|
|
||||||
<PlayArrowIcon />
|
|
||||||
</IconButton>
|
|
||||||
</ListItemSecondaryAction>
|
|
||||||
</ListItem>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</List>
|
|
||||||
</Paper>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Pending Script Dialog */}
|
|
||||||
<Dialog
|
|
||||||
open={scriptDialogOpen}
|
|
||||||
onClose={() => setScriptDialogOpen(false)}
|
|
||||||
maxWidth="md"
|
|
||||||
fullWidth
|
|
||||||
>
|
|
||||||
<DialogTitle>
|
|
||||||
{selectedPendingScript?.title || 'Script Details'}
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
{selectedPendingScript && (
|
|
||||||
<>
|
|
||||||
<Typography variant="subtitle2" gutterBottom>
|
|
||||||
Description:
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body2" paragraph>
|
|
||||||
{selectedPendingScript.description || 'No description provided'}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box sx={{ mb: 2 }}>
|
|
||||||
{selectedPendingScript.tags.map(tag => (
|
|
||||||
<Chip
|
|
||||||
key={tag}
|
|
||||||
label={tag}
|
|
||||||
size="small"
|
|
||||||
color={tag === 'remote' ? 'secondary' : 'primary'}
|
|
||||||
sx={{ mr: 0.5 }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Typography variant="subtitle2" gutterBottom>
|
|
||||||
Script Content:
|
|
||||||
</Typography>
|
|
||||||
<Paper
|
|
||||||
variant="outlined"
|
|
||||||
sx={{
|
|
||||||
p: 2,
|
|
||||||
bgcolor: 'background.paper',
|
|
||||||
maxHeight: '300px',
|
|
||||||
overflow: 'auto'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
component="pre"
|
|
||||||
sx={{
|
|
||||||
whiteSpace: 'pre-wrap',
|
|
||||||
wordBreak: 'break-word',
|
|
||||||
fontFamily: 'monospace'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{selectedPendingScript.script}
|
|
||||||
</Typography>
|
|
||||||
</Paper>
|
|
||||||
|
|
||||||
<Alert severity="warning" sx={{ mt: 2 }}>
|
|
||||||
<Typography variant="body2">
|
|
||||||
{selectedPendingScript.tags.includes('remote')
|
|
||||||
? 'This is a remote script. If approved, your signature will be sent to the server and the script may execute remotely.'
|
|
||||||
: 'This script will execute locally in your browser extension if approved.'}
|
|
||||||
</Typography>
|
|
||||||
</Alert>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button
|
|
||||||
onClick={handleRejectPendingScript}
|
|
||||||
color="error"
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
Reject
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleApprovePendingScript}
|
|
||||||
color="primary"
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
Approve
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ScriptPage;
|
|
||||||
@ -1,191 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Typography,
|
|
||||||
Button,
|
|
||||||
Paper,
|
|
||||||
Alert,
|
|
||||||
CircularProgress,
|
|
||||||
List,
|
|
||||||
ListItem,
|
|
||||||
ListItemText,
|
|
||||||
Divider,
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
Grid
|
|
||||||
} from '@mui/material';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { useSessionStore } from '../store/sessionStore';
|
|
||||||
import LockIcon from '@mui/icons-material/Lock';
|
|
||||||
import SecurityIcon from '@mui/icons-material/Security';
|
|
||||||
// HistoryIcon removed as it's not used
|
|
||||||
|
|
||||||
interface SessionActivity {
|
|
||||||
id: string;
|
|
||||||
action: string;
|
|
||||||
timestamp: number;
|
|
||||||
details?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SessionPage = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const {
|
|
||||||
isSessionUnlocked,
|
|
||||||
currentKeyspace,
|
|
||||||
currentKeypair,
|
|
||||||
lockSession
|
|
||||||
} = useSessionStore();
|
|
||||||
|
|
||||||
const [sessionActivities, setSessionActivities] = useState<SessionActivity[]>([]);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
|
|
||||||
// Redirect if not unlocked
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
navigate('/');
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked, navigate]);
|
|
||||||
|
|
||||||
// Load session activities from storage
|
|
||||||
useEffect(() => {
|
|
||||||
const loadSessionActivities = async () => {
|
|
||||||
try {
|
|
||||||
setIsLoading(true);
|
|
||||||
const data = await chrome.storage.local.get('sessionActivities');
|
|
||||||
if (data.sessionActivities) {
|
|
||||||
setSessionActivities(data.sessionActivities);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to load session activities:', err);
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isSessionUnlocked) {
|
|
||||||
loadSessionActivities();
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked]);
|
|
||||||
|
|
||||||
const handleLockSession = async () => {
|
|
||||||
try {
|
|
||||||
await lockSession();
|
|
||||||
navigate('/');
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to lock session:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
return null; // Will redirect via useEffect
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<Typography variant="h6" gutterBottom>
|
|
||||||
Session Management
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Grid container spacing={2} sx={{ mb: 3 }}>
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<Card variant="outlined">
|
|
||||||
<CardContent>
|
|
||||||
<Typography color="text.secondary" gutterBottom>
|
|
||||||
Current Keyspace
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="h5" component="div">
|
|
||||||
{currentKeyspace || 'None'}
|
|
||||||
</Typography>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<Card variant="outlined">
|
|
||||||
<CardContent>
|
|
||||||
<Typography color="text.secondary" gutterBottom>
|
|
||||||
Selected Keypair
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="h5" component="div">
|
|
||||||
{currentKeypair?.name || currentKeypair?.id || 'None'}
|
|
||||||
</Typography>
|
|
||||||
{currentKeypair && (
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
Type: {currentKeypair.type}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
|
||||||
<Typography variant="subtitle1">
|
|
||||||
Session Activity
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
color="error"
|
|
||||||
startIcon={<LockIcon />}
|
|
||||||
onClick={handleLockSession}
|
|
||||||
>
|
|
||||||
Lock Session
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
|
||||||
<CircularProgress />
|
|
||||||
</Box>
|
|
||||||
) : sessionActivities.length === 0 ? (
|
|
||||||
<Paper sx={{ p: 3, textAlign: 'center' }}>
|
|
||||||
<Typography variant="body1" color="text.secondary">
|
|
||||||
No session activity recorded yet.
|
|
||||||
</Typography>
|
|
||||||
</Paper>
|
|
||||||
) : (
|
|
||||||
<Paper variant="outlined" sx={{ flexGrow: 1, overflow: 'auto' }}>
|
|
||||||
<List disablePadding>
|
|
||||||
{sessionActivities.map((activity, index) => (
|
|
||||||
<Box key={activity.id}>
|
|
||||||
{index > 0 && <Divider />}
|
|
||||||
<ListItem>
|
|
||||||
<ListItemText
|
|
||||||
primary={
|
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
||||||
<Typography variant="subtitle2">
|
|
||||||
{activity.action}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
}
|
|
||||||
secondary={
|
|
||||||
<>
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
{new Date(activity.timestamp).toLocaleString()}
|
|
||||||
</Typography>
|
|
||||||
{activity.details && (
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
{activity.details}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</ListItem>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</List>
|
|
||||||
</Paper>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Box sx={{ mt: 3 }}>
|
|
||||||
<Alert severity="info" icon={<SecurityIcon />}>
|
|
||||||
Your session is active. All cryptographic operations and script executions require explicit approval.
|
|
||||||
</Alert>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SessionPage;
|
|
||||||
@ -1,246 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Typography,
|
|
||||||
Switch,
|
|
||||||
// FormControlLabel removed as it's not used
|
|
||||||
Divider,
|
|
||||||
Paper,
|
|
||||||
List,
|
|
||||||
ListItem,
|
|
||||||
ListItemText,
|
|
||||||
Button,
|
|
||||||
Dialog,
|
|
||||||
DialogTitle,
|
|
||||||
DialogContent,
|
|
||||||
DialogActions,
|
|
||||||
TextField,
|
|
||||||
Alert,
|
|
||||||
Snackbar
|
|
||||||
} from '@mui/material';
|
|
||||||
import DeleteIcon from '@mui/icons-material/Delete';
|
|
||||||
import InfoIcon from '@mui/icons-material/Info';
|
|
||||||
|
|
||||||
interface Settings {
|
|
||||||
darkMode: boolean;
|
|
||||||
autoLockTimeout: number; // minutes
|
|
||||||
confirmCryptoOperations: boolean;
|
|
||||||
showScriptNotifications: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SettingsPage = () => {
|
|
||||||
const [settings, setSettings] = useState<Settings>({
|
|
||||||
darkMode: true,
|
|
||||||
autoLockTimeout: 15,
|
|
||||||
confirmCryptoOperations: true,
|
|
||||||
showScriptNotifications: true
|
|
||||||
});
|
|
||||||
|
|
||||||
const [clearDataDialogOpen, setClearDataDialogOpen] = useState(false);
|
|
||||||
const [confirmText, setConfirmText] = useState('');
|
|
||||||
const [snackbarOpen, setSnackbarOpen] = useState(false);
|
|
||||||
const [snackbarMessage, setSnackbarMessage] = useState('');
|
|
||||||
|
|
||||||
// Load settings from storage
|
|
||||||
useEffect(() => {
|
|
||||||
const loadSettings = async () => {
|
|
||||||
try {
|
|
||||||
const data = await chrome.storage.local.get('settings');
|
|
||||||
if (data.settings) {
|
|
||||||
setSettings(data.settings);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to load settings:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
loadSettings();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Save settings when changed
|
|
||||||
const handleSettingChange = (key: keyof Settings, value: boolean | number) => {
|
|
||||||
const updatedSettings = { ...settings, [key]: value };
|
|
||||||
setSettings(updatedSettings);
|
|
||||||
|
|
||||||
// Save to storage
|
|
||||||
chrome.storage.local.set({ settings: updatedSettings })
|
|
||||||
.then(() => {
|
|
||||||
setSnackbarMessage('Settings saved');
|
|
||||||
setSnackbarOpen(true);
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.error('Failed to save settings:', err);
|
|
||||||
setSnackbarMessage('Failed to save settings');
|
|
||||||
setSnackbarOpen(true);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClearAllData = () => {
|
|
||||||
if (confirmText !== 'CLEAR ALL DATA') {
|
|
||||||
setSnackbarMessage('Please type the confirmation text exactly');
|
|
||||||
setSnackbarOpen(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all extension data
|
|
||||||
chrome.storage.local.clear()
|
|
||||||
.then(() => {
|
|
||||||
setSnackbarMessage('All data cleared successfully');
|
|
||||||
setSnackbarOpen(true);
|
|
||||||
setClearDataDialogOpen(false);
|
|
||||||
setConfirmText('');
|
|
||||||
|
|
||||||
// Reset settings to defaults
|
|
||||||
setSettings({
|
|
||||||
darkMode: true,
|
|
||||||
autoLockTimeout: 15,
|
|
||||||
confirmCryptoOperations: true,
|
|
||||||
showScriptNotifications: true
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.error('Failed to clear data:', err);
|
|
||||||
setSnackbarMessage('Failed to clear data');
|
|
||||||
setSnackbarOpen(true);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<Typography variant="h6" gutterBottom>
|
|
||||||
Settings
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Paper variant="outlined" sx={{ flexGrow: 1, overflow: 'auto' }}>
|
|
||||||
<List disablePadding>
|
|
||||||
<ListItem>
|
|
||||||
<ListItemText
|
|
||||||
primary="Dark Mode"
|
|
||||||
secondary="Use dark theme for the extension"
|
|
||||||
/>
|
|
||||||
<Switch
|
|
||||||
edge="end"
|
|
||||||
checked={settings.darkMode}
|
|
||||||
onChange={(e) => handleSettingChange('darkMode', e.target.checked)}
|
|
||||||
/>
|
|
||||||
</ListItem>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<ListItem>
|
|
||||||
<ListItemText
|
|
||||||
primary="Auto-Lock Timeout"
|
|
||||||
secondary={`Automatically lock session after ${settings.autoLockTimeout} minutes of inactivity`}
|
|
||||||
/>
|
|
||||||
<Box sx={{ width: 120 }}>
|
|
||||||
<TextField
|
|
||||||
type="number"
|
|
||||||
size="small"
|
|
||||||
value={settings.autoLockTimeout}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = parseInt(e.target.value);
|
|
||||||
if (!isNaN(value) && value >= 1) {
|
|
||||||
handleSettingChange('autoLockTimeout', value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
InputProps={{ inputProps: { min: 1, max: 60 } }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</ListItem>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<ListItem>
|
|
||||||
<ListItemText
|
|
||||||
primary="Confirm Cryptographic Operations"
|
|
||||||
secondary="Always ask for confirmation before signing or encrypting"
|
|
||||||
/>
|
|
||||||
<Switch
|
|
||||||
edge="end"
|
|
||||||
checked={settings.confirmCryptoOperations}
|
|
||||||
onChange={(e) => handleSettingChange('confirmCryptoOperations', e.target.checked)}
|
|
||||||
/>
|
|
||||||
</ListItem>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<ListItem>
|
|
||||||
<ListItemText
|
|
||||||
primary="Script Notifications"
|
|
||||||
secondary="Show notifications when new scripts are received"
|
|
||||||
/>
|
|
||||||
<Switch
|
|
||||||
edge="end"
|
|
||||||
checked={settings.showScriptNotifications}
|
|
||||||
onChange={(e) => handleSettingChange('showScriptNotifications', e.target.checked)}
|
|
||||||
/>
|
|
||||||
</ListItem>
|
|
||||||
</List>
|
|
||||||
</Paper>
|
|
||||||
|
|
||||||
<Box sx={{ mt: 3 }}>
|
|
||||||
<Alert
|
|
||||||
severity="info"
|
|
||||||
icon={<InfoIcon />}
|
|
||||||
sx={{ mb: 2 }}
|
|
||||||
>
|
|
||||||
<Typography variant="body2">
|
|
||||||
The extension stores all cryptographic keys in encrypted form. Your password is never stored and is only kept in memory while the session is unlocked.
|
|
||||||
</Typography>
|
|
||||||
</Alert>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
color="error"
|
|
||||||
startIcon={<DeleteIcon />}
|
|
||||||
onClick={() => setClearDataDialogOpen(true)}
|
|
||||||
fullWidth
|
|
||||||
>
|
|
||||||
Clear All Data
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Clear Data Confirmation Dialog */}
|
|
||||||
<Dialog open={clearDataDialogOpen} onClose={() => setClearDataDialogOpen(false)}>
|
|
||||||
<DialogTitle>Clear All Extension Data</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<Typography variant="body1" paragraph>
|
|
||||||
This will permanently delete all your keyspaces, keypairs, and settings. This action cannot be undone.
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body2" color="error" paragraph>
|
|
||||||
Type "CLEAR ALL DATA" to confirm:
|
|
||||||
</Typography>
|
|
||||||
<TextField
|
|
||||||
value={confirmText}
|
|
||||||
onChange={(e) => setConfirmText(e.target.value)}
|
|
||||||
fullWidth
|
|
||||||
variant="outlined"
|
|
||||||
placeholder="CLEAR ALL DATA"
|
|
||||||
/>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={() => setClearDataDialogOpen(false)}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleClearAllData}
|
|
||||||
color="error"
|
|
||||||
disabled={confirmText !== 'CLEAR ALL DATA'}
|
|
||||||
>
|
|
||||||
Clear All Data
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
{/* Snackbar for notifications */}
|
|
||||||
<Snackbar
|
|
||||||
open={snackbarOpen}
|
|
||||||
autoHideDuration={3000}
|
|
||||||
onClose={() => setSnackbarOpen(false)}
|
|
||||||
message={snackbarMessage}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SettingsPage;
|
|
||||||
@ -1,248 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Typography,
|
|
||||||
Button,
|
|
||||||
TextField,
|
|
||||||
Paper,
|
|
||||||
Alert,
|
|
||||||
CircularProgress,
|
|
||||||
List,
|
|
||||||
ListItem,
|
|
||||||
ListItemText,
|
|
||||||
Divider,
|
|
||||||
Chip
|
|
||||||
} from '@mui/material';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { useSessionStore } from '../store/sessionStore';
|
|
||||||
|
|
||||||
interface ConnectionHistory {
|
|
||||||
id: string;
|
|
||||||
url: string;
|
|
||||||
timestamp: number;
|
|
||||||
status: 'connected' | 'disconnected';
|
|
||||||
}
|
|
||||||
|
|
||||||
const WebSocketPage = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const {
|
|
||||||
isSessionUnlocked,
|
|
||||||
currentKeypair,
|
|
||||||
isWebSocketConnected,
|
|
||||||
webSocketUrl,
|
|
||||||
connectWebSocket,
|
|
||||||
disconnectWebSocket
|
|
||||||
} = useSessionStore();
|
|
||||||
|
|
||||||
const [serverUrl, setServerUrl] = useState('');
|
|
||||||
const [isConnecting, setIsConnecting] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [connectionHistory, setConnectionHistory] = useState<ConnectionHistory[]>([]);
|
|
||||||
|
|
||||||
// Redirect if not unlocked
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
navigate('/');
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked, navigate]);
|
|
||||||
|
|
||||||
// Load connection history from storage
|
|
||||||
useEffect(() => {
|
|
||||||
const loadConnectionHistory = async () => {
|
|
||||||
try {
|
|
||||||
const data = await chrome.storage.local.get('connectionHistory');
|
|
||||||
if (data.connectionHistory) {
|
|
||||||
setConnectionHistory(data.connectionHistory);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to load connection history:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isSessionUnlocked) {
|
|
||||||
loadConnectionHistory();
|
|
||||||
}
|
|
||||||
}, [isSessionUnlocked]);
|
|
||||||
|
|
||||||
const handleConnect = async () => {
|
|
||||||
if (!serverUrl.trim() || !currentKeypair) return;
|
|
||||||
|
|
||||||
setIsConnecting(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const success = await connectWebSocket(serverUrl);
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
// Add to connection history
|
|
||||||
const newConnection: ConnectionHistory = {
|
|
||||||
id: `conn-${Date.now()}`,
|
|
||||||
url: serverUrl,
|
|
||||||
timestamp: Date.now(),
|
|
||||||
status: 'connected'
|
|
||||||
};
|
|
||||||
|
|
||||||
const updatedHistory = [newConnection, ...connectionHistory].slice(0, 10); // Keep last 10
|
|
||||||
setConnectionHistory(updatedHistory);
|
|
||||||
|
|
||||||
// Save to storage
|
|
||||||
await chrome.storage.local.set({ connectionHistory: updatedHistory });
|
|
||||||
} else {
|
|
||||||
throw new Error('Failed to connect to WebSocket server');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError((err as Error).message || 'Failed to connect to WebSocket server');
|
|
||||||
} finally {
|
|
||||||
setIsConnecting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDisconnect = async () => {
|
|
||||||
try {
|
|
||||||
const success = await disconnectWebSocket();
|
|
||||||
|
|
||||||
if (success && webSocketUrl) {
|
|
||||||
// Update connection history
|
|
||||||
const updatedHistory = connectionHistory.map(conn =>
|
|
||||||
conn.url === webSocketUrl && conn.status === 'connected'
|
|
||||||
? { ...conn, status: 'disconnected' }
|
|
||||||
: conn
|
|
||||||
);
|
|
||||||
|
|
||||||
setConnectionHistory(updatedHistory);
|
|
||||||
|
|
||||||
// Save to storage
|
|
||||||
await chrome.storage.local.set({ connectionHistory: updatedHistory });
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError((err as Error).message || 'Failed to disconnect from WebSocket server');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleQuickConnect = (url: string) => {
|
|
||||||
setServerUrl(url);
|
|
||||||
// Don't auto-connect to avoid unexpected connections
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isSessionUnlocked) {
|
|
||||||
return null; // Will redirect via useEffect
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<Typography variant="h6" gutterBottom>
|
|
||||||
WebSocket Connection
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
{!currentKeypair && (
|
|
||||||
<Alert severity="warning" sx={{ mb: 2 }}>
|
|
||||||
No keypair selected. Select a keypair before connecting to a WebSocket server.
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Alert severity="error" sx={{ mb: 2 }}>
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Paper variant="outlined" sx={{ p: 2, mb: 2 }}>
|
|
||||||
<Box sx={{ mb: 2 }}>
|
|
||||||
<Typography variant="subtitle2" gutterBottom>
|
|
||||||
Connection Status:
|
|
||||||
</Typography>
|
|
||||||
<Chip
|
|
||||||
label={isWebSocketConnected ? 'Connected' : 'Disconnected'}
|
|
||||||
color={isWebSocketConnected ? 'success' : 'default'}
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
{isWebSocketConnected && webSocketUrl && (
|
|
||||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
|
|
||||||
Connected to: {webSocketUrl}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
||||||
<TextField
|
|
||||||
label="WebSocket Server URL"
|
|
||||||
placeholder="wss://example.com/ws"
|
|
||||||
value={serverUrl}
|
|
||||||
onChange={(e) => setServerUrl(e.target.value)}
|
|
||||||
fullWidth
|
|
||||||
disabled={isConnecting || isWebSocketConnected || !currentKeypair}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{isWebSocketConnected ? (
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
color="error"
|
|
||||||
onClick={handleDisconnect}
|
|
||||||
>
|
|
||||||
Disconnect
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
onClick={handleConnect}
|
|
||||||
disabled={isConnecting || !serverUrl.trim() || !currentKeypair}
|
|
||||||
>
|
|
||||||
{isConnecting ? <CircularProgress size={24} /> : 'Connect'}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
Connection History
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
{connectionHistory.length === 0 ? (
|
|
||||||
<Paper sx={{ p: 3, textAlign: 'center' }}>
|
|
||||||
<Typography variant="body1" color="text.secondary">
|
|
||||||
No connection history yet.
|
|
||||||
</Typography>
|
|
||||||
</Paper>
|
|
||||||
) : (
|
|
||||||
<Paper variant="outlined" sx={{ flexGrow: 1, overflow: 'auto' }}>
|
|
||||||
<List disablePadding>
|
|
||||||
{connectionHistory.map((conn, index) => (
|
|
||||||
<Box key={conn.id}>
|
|
||||||
{index > 0 && <Divider />}
|
|
||||||
<ListItem
|
|
||||||
button
|
|
||||||
onClick={() => handleQuickConnect(conn.url)}
|
|
||||||
disabled={isWebSocketConnected}
|
|
||||||
>
|
|
||||||
<ListItemText
|
|
||||||
primary={
|
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
||||||
<Typography variant="subtitle2">
|
|
||||||
{conn.url}
|
|
||||||
</Typography>
|
|
||||||
<Chip
|
|
||||||
label={conn.status}
|
|
||||||
size="small"
|
|
||||||
color={conn.status === 'connected' ? 'success' : 'default'}
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
}
|
|
||||||
secondary={
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
{new Date(conn.timestamp).toLocaleString()}
|
|
||||||
</Typography>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</ListItem>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</List>
|
|
||||||
</Paper>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default WebSocketPage;
|
|
||||||
@ -1,144 +0,0 @@
|
|||||||
/**
|
|
||||||
* Crypto Store for Hero Vault Extension
|
|
||||||
*
|
|
||||||
* This store manages cryptographic operations such as:
|
|
||||||
* - Encryption/decryption using the keyspace's symmetric cipher
|
|
||||||
* - Signing/verification using the selected keypair
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { create } from 'zustand';
|
|
||||||
import { getWasmModule, stringToUint8Array, uint8ArrayToString } from '../wasm/wasmHelper';
|
|
||||||
|
|
||||||
// Helper functions for Unicode-safe base64 encoding/decoding
|
|
||||||
function base64Encode(data: Uint8Array): string {
|
|
||||||
// Convert binary data to a string that only uses the low 8 bits of each character
|
|
||||||
const binaryString = Array.from(data)
|
|
||||||
.map(byte => String.fromCharCode(byte))
|
|
||||||
.join('');
|
|
||||||
|
|
||||||
// Use btoa on the binary string
|
|
||||||
return btoa(binaryString);
|
|
||||||
}
|
|
||||||
|
|
||||||
function base64Decode(base64: string): Uint8Array {
|
|
||||||
// Decode base64 to binary string
|
|
||||||
const binaryString = atob(base64);
|
|
||||||
|
|
||||||
// Convert binary string to Uint8Array
|
|
||||||
const bytes = new Uint8Array(binaryString.length);
|
|
||||||
for (let i = 0; i < binaryString.length; i++) {
|
|
||||||
bytes[i] = binaryString.charCodeAt(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
return bytes;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CryptoState {
|
|
||||||
// State
|
|
||||||
isEncrypting: boolean;
|
|
||||||
isDecrypting: boolean;
|
|
||||||
isSigning: boolean;
|
|
||||||
isVerifying: boolean;
|
|
||||||
error: string | null;
|
|
||||||
|
|
||||||
// Actions
|
|
||||||
encryptData: (data: string) => Promise<string>;
|
|
||||||
decryptData: (encrypted: string) => Promise<string>;
|
|
||||||
signMessage: (message: string) => Promise<string>;
|
|
||||||
verifySignature: (message: string, signature: string) => Promise<boolean>;
|
|
||||||
clearError: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useCryptoStore = create<CryptoState>()((set, get) => ({
|
|
||||||
isEncrypting: false,
|
|
||||||
isDecrypting: false,
|
|
||||||
isSigning: false,
|
|
||||||
isVerifying: false,
|
|
||||||
error: null,
|
|
||||||
|
|
||||||
encryptData: async (data: string) => {
|
|
||||||
try {
|
|
||||||
set({ isEncrypting: true, error: null });
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Convert input to Uint8Array
|
|
||||||
const dataBytes = stringToUint8Array(data);
|
|
||||||
|
|
||||||
// Encrypt the data
|
|
||||||
const encrypted = await wasmModule.encrypt_data(dataBytes);
|
|
||||||
|
|
||||||
// Convert result to base64 for storage/display using our Unicode-safe function
|
|
||||||
const encryptedBase64 = base64Encode(encrypted);
|
|
||||||
|
|
||||||
return encryptedBase64;
|
|
||||||
} catch (error) {
|
|
||||||
set({ error: (error as Error).message || 'Failed to encrypt data' });
|
|
||||||
throw error;
|
|
||||||
} finally {
|
|
||||||
set({ isEncrypting: false });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
decryptData: async (encrypted: string) => {
|
|
||||||
try {
|
|
||||||
set({ isDecrypting: true, error: null });
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Convert input from base64 using our Unicode-safe function
|
|
||||||
const encryptedBytes = base64Decode(encrypted);
|
|
||||||
|
|
||||||
// Decrypt the data
|
|
||||||
const decrypted = await wasmModule.decrypt_data(encryptedBytes);
|
|
||||||
|
|
||||||
// Convert result to string
|
|
||||||
return uint8ArrayToString(decrypted);
|
|
||||||
} catch (error) {
|
|
||||||
set({ error: (error as Error).message || 'Failed to decrypt data' });
|
|
||||||
throw error;
|
|
||||||
} finally {
|
|
||||||
set({ isDecrypting: false });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
signMessage: async (message: string) => {
|
|
||||||
try {
|
|
||||||
set({ isSigning: true, error: null });
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Convert message to Uint8Array
|
|
||||||
const messageBytes = stringToUint8Array(message);
|
|
||||||
|
|
||||||
// Sign the message
|
|
||||||
const signature = await wasmModule.sign(messageBytes);
|
|
||||||
|
|
||||||
return signature;
|
|
||||||
} catch (error) {
|
|
||||||
set({ error: (error as Error).message || 'Failed to sign message' });
|
|
||||||
throw error;
|
|
||||||
} finally {
|
|
||||||
set({ isSigning: false });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
verifySignature: async (message: string, signature: string) => {
|
|
||||||
try {
|
|
||||||
set({ isVerifying: true, error: null });
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Convert inputs
|
|
||||||
const messageBytes = stringToUint8Array(message);
|
|
||||||
|
|
||||||
// Verify the signature
|
|
||||||
const isValid = await wasmModule.verify(messageBytes, signature);
|
|
||||||
|
|
||||||
return isValid;
|
|
||||||
} catch (error) {
|
|
||||||
set({ error: (error as Error).message || 'Failed to verify signature' });
|
|
||||||
throw error;
|
|
||||||
} finally {
|
|
||||||
set({ isVerifying: false });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
clearError: () => set({ error: null })
|
|
||||||
}));
|
|
||||||
@ -1,416 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { getWasmModule, stringToUint8Array } from '../wasm/wasmHelper';
|
|
||||||
import { getChromeApi } from '../utils/chromeApi';
|
|
||||||
|
|
||||||
// Import Chrome types
|
|
||||||
/// <reference types="chrome" />
|
|
||||||
|
|
||||||
interface KeypairMetadata {
|
|
||||||
id: string;
|
|
||||||
type: string;
|
|
||||||
name?: string;
|
|
||||||
description?: string;
|
|
||||||
createdAt: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SessionState {
|
|
||||||
isSessionUnlocked: boolean;
|
|
||||||
currentKeyspace: string | null;
|
|
||||||
currentKeypair: KeypairMetadata | null;
|
|
||||||
availableKeypairs: KeypairMetadata[];
|
|
||||||
isWebSocketConnected: boolean;
|
|
||||||
webSocketUrl: string | null;
|
|
||||||
isWasmLoaded: boolean;
|
|
||||||
|
|
||||||
// Actions
|
|
||||||
initWasm: () => Promise<boolean>;
|
|
||||||
checkSessionStatus: () => Promise<boolean>;
|
|
||||||
unlockSession: (keyspace: string, password: string) => Promise<boolean>;
|
|
||||||
lockSession: () => Promise<boolean>;
|
|
||||||
createKeyspace: (keyspace: string, password: string) => Promise<boolean>;
|
|
||||||
listKeypairs: () => Promise<KeypairMetadata[]>;
|
|
||||||
selectKeypair: (keypairId: string) => Promise<boolean>;
|
|
||||||
createKeypair: (type: string, metadata?: Record<string, any>) => Promise<string>;
|
|
||||||
connectWebSocket: (url: string) => Promise<boolean>;
|
|
||||||
disconnectWebSocket: () => Promise<boolean>;
|
|
||||||
executeScript: (script: string) => Promise<string>;
|
|
||||||
signMessage: (message: string) => Promise<string>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create the store
|
|
||||||
export const useSessionStore = create<SessionState>((set: any, get: any) => ({
|
|
||||||
isSessionUnlocked: false,
|
|
||||||
currentKeyspace: null,
|
|
||||||
currentKeypair: null,
|
|
||||||
availableKeypairs: [],
|
|
||||||
isWebSocketConnected: false,
|
|
||||||
webSocketUrl: null,
|
|
||||||
isWasmLoaded: false,
|
|
||||||
|
|
||||||
// Initialize WASM module
|
|
||||||
initWasm: async () => {
|
|
||||||
try {
|
|
||||||
set({ isWasmLoaded: true });
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to initialize WASM module:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Check if a session is currently active
|
|
||||||
checkSessionStatus: async () => {
|
|
||||||
try {
|
|
||||||
// First check with the background service worker
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
const response = await chromeApi.runtime.sendMessage({ type: 'SESSION_STATUS' });
|
|
||||||
|
|
||||||
if (response && response.active) {
|
|
||||||
// If session is active in the background, check with WASM
|
|
||||||
try {
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
const isUnlocked = wasmModule.is_unlocked();
|
|
||||||
|
|
||||||
if (isUnlocked) {
|
|
||||||
// Get current keypair metadata if available
|
|
||||||
try {
|
|
||||||
const keypairMetadata = await wasmModule.current_keypair_metadata();
|
|
||||||
const parsedMetadata = JSON.parse(keypairMetadata);
|
|
||||||
|
|
||||||
set({
|
|
||||||
isSessionUnlocked: true,
|
|
||||||
currentKeypair: parsedMetadata
|
|
||||||
});
|
|
||||||
|
|
||||||
// Load keypairs
|
|
||||||
await get().listKeypairs();
|
|
||||||
} catch (e) {
|
|
||||||
// No keypair selected, but session is unlocked
|
|
||||||
set({ isSessionUnlocked: true });
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} catch (wasmError) {
|
|
||||||
console.error('WASM error checking session status:', wasmError);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
set({ isSessionUnlocked: false });
|
|
||||||
return false;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to check session status:', error);
|
|
||||||
set({ isSessionUnlocked: false });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Unlock a session with keyspace and password
|
|
||||||
unlockSession: async (keyspace: string, password: string) => {
|
|
||||||
try {
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Call the WASM init_session function
|
|
||||||
await wasmModule.init_session(keyspace, password);
|
|
||||||
|
|
||||||
// Initialize Rhai environment
|
|
||||||
wasmModule.init_rhai_env();
|
|
||||||
|
|
||||||
// Notify background service worker
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
await chromeApi.runtime.sendMessage({ type: 'SESSION_UNLOCK' });
|
|
||||||
|
|
||||||
set({
|
|
||||||
isSessionUnlocked: true,
|
|
||||||
currentKeyspace: keyspace,
|
|
||||||
currentKeypair: null
|
|
||||||
});
|
|
||||||
|
|
||||||
// Load keypairs after unlocking
|
|
||||||
const keypairs = await get().listKeypairs();
|
|
||||||
set({ availableKeypairs: keypairs });
|
|
||||||
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to unlock session:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Lock the current session
|
|
||||||
lockSession: async () => {
|
|
||||||
try {
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Call the WASM lock_session function
|
|
||||||
wasmModule.lock_session();
|
|
||||||
|
|
||||||
// Notify background service worker
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
await chromeApi.runtime.sendMessage({ type: 'SESSION_LOCK' });
|
|
||||||
|
|
||||||
set({
|
|
||||||
isSessionUnlocked: false,
|
|
||||||
currentKeyspace: null,
|
|
||||||
currentKeypair: null,
|
|
||||||
availableKeypairs: [],
|
|
||||||
isWebSocketConnected: false,
|
|
||||||
webSocketUrl: null
|
|
||||||
});
|
|
||||||
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to lock session:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Create a new keyspace
|
|
||||||
createKeyspace: async (keyspace: string, password: string) => {
|
|
||||||
try {
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Call the WASM create_keyspace function
|
|
||||||
await wasmModule.create_keyspace(keyspace, password);
|
|
||||||
|
|
||||||
// Initialize Rhai environment
|
|
||||||
wasmModule.init_rhai_env();
|
|
||||||
|
|
||||||
// Notify background service worker
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
await chromeApi.runtime.sendMessage({ type: 'SESSION_UNLOCK' });
|
|
||||||
|
|
||||||
set({
|
|
||||||
isSessionUnlocked: true,
|
|
||||||
currentKeyspace: keyspace,
|
|
||||||
currentKeypair: null,
|
|
||||||
availableKeypairs: []
|
|
||||||
});
|
|
||||||
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to create keyspace:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// List all keypairs in the current keyspace
|
|
||||||
listKeypairs: async () => {
|
|
||||||
try {
|
|
||||||
console.log('Listing keypairs from WASM module');
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
console.log('WASM module loaded, calling list_keypairs');
|
|
||||||
|
|
||||||
// Call the WASM list_keypairs function
|
|
||||||
let keypairsJson;
|
|
||||||
try {
|
|
||||||
keypairsJson = await wasmModule.list_keypairs();
|
|
||||||
console.log('Raw keypairs JSON from WASM:', keypairsJson);
|
|
||||||
} catch (listError) {
|
|
||||||
console.error('Error calling list_keypairs:', listError);
|
|
||||||
throw new Error(`Failed to list keypairs: ${listError.message || listError}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
let keypairs;
|
|
||||||
try {
|
|
||||||
keypairs = JSON.parse(keypairsJson);
|
|
||||||
console.log('Parsed keypairs object:', keypairs);
|
|
||||||
} catch (parseError) {
|
|
||||||
console.error('Error parsing keypairs JSON:', parseError);
|
|
||||||
throw new Error(`Failed to parse keypairs JSON: ${parseError.message}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Transform the keypairs to our expected format
|
|
||||||
const formattedKeypairs: KeypairMetadata[] = keypairs.map((keypair: any, index: number) => {
|
|
||||||
console.log(`Processing keypair at index ${index}:`, keypair);
|
|
||||||
return {
|
|
||||||
id: keypair.id, // Use the actual keypair ID from the WASM module
|
|
||||||
type: keypair.key_type || 'Unknown',
|
|
||||||
name: keypair.metadata?.name,
|
|
||||||
description: keypair.metadata?.description,
|
|
||||||
createdAt: keypair.metadata?.created_at || Date.now()
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('Formatted keypairs for UI:', formattedKeypairs);
|
|
||||||
set({ availableKeypairs: formattedKeypairs });
|
|
||||||
return formattedKeypairs;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to list keypairs:', error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Select a keypair for use
|
|
||||||
selectKeypair: async (keypairId: string) => {
|
|
||||||
try {
|
|
||||||
console.log('Selecting keypair with ID:', keypairId);
|
|
||||||
|
|
||||||
// First, let's log the available keypairs to see what we have
|
|
||||||
const { availableKeypairs } = get();
|
|
||||||
console.log('Available keypairs:', JSON.stringify(availableKeypairs));
|
|
||||||
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
console.log('WASM module loaded, attempting to select keypair');
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Call the WASM select_keypair function
|
|
||||||
await wasmModule.select_keypair(keypairId);
|
|
||||||
console.log('Successfully selected keypair in WASM');
|
|
||||||
} catch (selectError) {
|
|
||||||
console.error('Error in WASM select_keypair:', selectError);
|
|
||||||
throw new Error(`select_keypair error: ${selectError.message || selectError}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Find the keypair in our availableKeypairs list
|
|
||||||
const selectedKeypair = availableKeypairs.find((kp: KeypairMetadata) => kp.id === keypairId);
|
|
||||||
|
|
||||||
if (selectedKeypair) {
|
|
||||||
console.log('Found keypair in available list, setting as current');
|
|
||||||
set({ currentKeypair: selectedKeypair });
|
|
||||||
} else {
|
|
||||||
console.log('Keypair not found in available list, creating new entry from available data');
|
|
||||||
// If not found in our list (rare case), create a new entry with what we know
|
|
||||||
// Since we can't get metadata from WASM, use what we have from the keypair list
|
|
||||||
const matchingKeypair = availableKeypairs.find(k => k.id === keypairId);
|
|
||||||
|
|
||||||
if (matchingKeypair) {
|
|
||||||
set({ currentKeypair: matchingKeypair });
|
|
||||||
} else {
|
|
||||||
// Last resort: create a minimal keypair entry
|
|
||||||
const newKeypair: KeypairMetadata = {
|
|
||||||
id: keypairId,
|
|
||||||
type: 'Unknown',
|
|
||||||
name: `Keypair ${keypairId.substring(0, 8)}...`,
|
|
||||||
createdAt: Date.now()
|
|
||||||
};
|
|
||||||
|
|
||||||
set({ currentKeypair: newKeypair });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to select keypair:', error);
|
|
||||||
throw error; // Re-throw to show error in UI
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Create a new keypair
|
|
||||||
createKeypair: async (type: string, metadata?: Record<string, any>) => {
|
|
||||||
try {
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Format metadata for WASM
|
|
||||||
const metadataJson = metadata ? JSON.stringify({
|
|
||||||
name: metadata.name,
|
|
||||||
description: metadata.description,
|
|
||||||
created_at: Date.now()
|
|
||||||
}) : undefined;
|
|
||||||
|
|
||||||
// Call the WASM add_keypair function
|
|
||||||
const keypairId = await wasmModule.add_keypair(type, metadataJson);
|
|
||||||
|
|
||||||
// Refresh the keypair list
|
|
||||||
await get().listKeypairs();
|
|
||||||
|
|
||||||
return keypairId;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to create keypair:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Connect to a WebSocket server
|
|
||||||
connectWebSocket: async (url: string) => {
|
|
||||||
try {
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
const { currentKeypair } = get();
|
|
||||||
|
|
||||||
if (!currentKeypair) {
|
|
||||||
throw new Error('No keypair selected');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get the public key from WASM
|
|
||||||
const publicKeyArray = await wasmModule.current_keypair_public_key();
|
|
||||||
const publicKeyHex = Array.from(publicKeyArray)
|
|
||||||
.map(b => b.toString(16).padStart(2, '0'))
|
|
||||||
.join('');
|
|
||||||
|
|
||||||
// Connect to WebSocket via background service worker
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
const response = await chromeApi.runtime.sendMessage({
|
|
||||||
type: 'CONNECT_WEBSOCKET',
|
|
||||||
serverUrl: url,
|
|
||||||
publicKey: publicKeyHex
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response && response.success) {
|
|
||||||
set({
|
|
||||||
isWebSocketConnected: true,
|
|
||||||
webSocketUrl: url
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
throw new Error(response?.error || 'Failed to connect to WebSocket server');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to connect to WebSocket:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Disconnect from WebSocket server
|
|
||||||
disconnectWebSocket: async () => {
|
|
||||||
try {
|
|
||||||
// Disconnect via background service worker
|
|
||||||
const chromeApi = getChromeApi();
|
|
||||||
const response = await chromeApi.runtime.sendMessage({
|
|
||||||
type: 'DISCONNECT_WEBSOCKET'
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response && response.success) {
|
|
||||||
set({
|
|
||||||
isWebSocketConnected: false,
|
|
||||||
webSocketUrl: null
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
throw new Error(response?.error || 'Failed to disconnect from WebSocket server');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to disconnect from WebSocket:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Execute a Rhai script
|
|
||||||
executeScript: async (script: string) => {
|
|
||||||
try {
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Call the WASM run_rhai function
|
|
||||||
const result = await wasmModule.run_rhai(script);
|
|
||||||
return result;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to execute script:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Sign a message with the current keypair
|
|
||||||
signMessage: async (message: string) => {
|
|
||||||
try {
|
|
||||||
const wasmModule = await getWasmModule();
|
|
||||||
|
|
||||||
// Convert message to Uint8Array
|
|
||||||
const messageBytes = stringToUint8Array(message);
|
|
||||||
|
|
||||||
// Call the WASM sign function
|
|
||||||
const signature = await wasmModule.sign(messageBytes);
|
|
||||||
return signature;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to sign message:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
/**
|
|
||||||
* Common TypeScript types for the Hero Vault Extension
|
|
||||||
*/
|
|
||||||
|
|
||||||
// React types
|
|
||||||
export type SyntheticEvent<T = Element, E = Event> = React.BaseSyntheticEvent<E, EventTarget & T, EventTarget>;
|
|
||||||
|
|
||||||
// Session types
|
|
||||||
export interface SessionActivity {
|
|
||||||
timestamp: number;
|
|
||||||
action: string;
|
|
||||||
details?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Script types
|
|
||||||
export interface ScriptResult {
|
|
||||||
id: string;
|
|
||||||
script: string;
|
|
||||||
result: string;
|
|
||||||
timestamp: number;
|
|
||||||
success: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PendingScript {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
script: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// WebSocket types
|
|
||||||
export interface ConnectionHistory {
|
|
||||||
id: string;
|
|
||||||
url: string;
|
|
||||||
timestamp: number;
|
|
||||||
status: 'connected' | 'disconnected' | 'error';
|
|
||||||
message?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Settings types
|
|
||||||
export interface Settings {
|
|
||||||
darkMode: boolean;
|
|
||||||
autoLockTimeout: number;
|
|
||||||
defaultKeyType: string;
|
|
||||||
showScriptNotifications: boolean;
|
|
||||||
}
|
|
||||||
5
hero_vault_extension/src/types/chrome.d.ts
vendored
5
hero_vault_extension/src/types/chrome.d.ts
vendored
@ -1,5 +0,0 @@
|
|||||||
/// <reference types="chrome" />
|
|
||||||
|
|
||||||
// This file provides type declarations for Chrome extension APIs
|
|
||||||
// It's needed because we're using the Chrome extension API in a TypeScript project
|
|
||||||
// The actual implementation is provided by the browser at runtime
|
|
||||||
14
hero_vault_extension/src/types/declarations.d.ts
vendored
14
hero_vault_extension/src/types/declarations.d.ts
vendored
@ -1,14 +0,0 @@
|
|||||||
// Type declarations for modules without type definitions
|
|
||||||
|
|
||||||
// React and Material UI
|
|
||||||
declare module 'react';
|
|
||||||
declare module 'react-dom';
|
|
||||||
declare module 'react-router-dom';
|
|
||||||
declare module '@mui/material';
|
|
||||||
declare module '@mui/material/*';
|
|
||||||
declare module '@mui/icons-material/*';
|
|
||||||
|
|
||||||
// Project modules
|
|
||||||
declare module './pages/*';
|
|
||||||
declare module './components/*';
|
|
||||||
declare module './store/*';
|
|
||||||
16
hero_vault_extension/src/types/wasm.d.ts
vendored
16
hero_vault_extension/src/types/wasm.d.ts
vendored
@ -1,16 +0,0 @@
|
|||||||
declare module '*/wasm_app.js' {
|
|
||||||
export default function init(): Promise<void>;
|
|
||||||
export function init_session(keyspace: string, password: string): Promise<void>;
|
|
||||||
export function create_keyspace(keyspace: string, password: string): Promise<void>;
|
|
||||||
export function lock_session(): void;
|
|
||||||
export function is_unlocked(): boolean;
|
|
||||||
export function add_keypair(key_type: string | undefined, metadata: string | undefined): Promise<string>;
|
|
||||||
export function list_keypairs(): Promise<string>;
|
|
||||||
export function select_keypair(key_id: string): Promise<void>;
|
|
||||||
export function current_keypair_metadata(): Promise<any>;
|
|
||||||
export function current_keypair_public_key(): Promise<Uint8Array>;
|
|
||||||
export function sign(message: Uint8Array): Promise<string>;
|
|
||||||
export function verify(signature: string, message: Uint8Array): Promise<boolean>;
|
|
||||||
export function init_rhai_env(): void;
|
|
||||||
export function run_rhai(script: string): Promise<string>;
|
|
||||||
}
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
/**
|
|
||||||
* Chrome API utilities for Hero Vault Extension
|
|
||||||
*
|
|
||||||
* This module provides Chrome API detection and mocks for development mode
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Check if we're running in a Chrome extension environment
|
|
||||||
export const isExtensionEnvironment = (): boolean => {
|
|
||||||
return typeof chrome !== 'undefined' && !!chrome.runtime && !!chrome.runtime.id;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Mock storage for development mode
|
|
||||||
const mockStorage: Record<string, any> = {
|
|
||||||
// Initialize with some default values for script storage
|
|
||||||
pendingScripts: [],
|
|
||||||
scriptResults: []
|
|
||||||
};
|
|
||||||
|
|
||||||
// Mock Chrome API for development mode
|
|
||||||
export const getChromeApi = () => {
|
|
||||||
// If we're in a Chrome extension environment, return the real Chrome API
|
|
||||||
if (isExtensionEnvironment()) {
|
|
||||||
return chrome;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Otherwise, return a mock implementation
|
|
||||||
return {
|
|
||||||
runtime: {
|
|
||||||
sendMessage: (message: any): Promise<any> => {
|
|
||||||
console.log('Mock sendMessage called with:', message);
|
|
||||||
|
|
||||||
// Mock responses based on message type
|
|
||||||
if (message.type === 'SESSION_STATUS') {
|
|
||||||
return Promise.resolve({ active: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'CREATE_KEYSPACE') {
|
|
||||||
mockStorage['currentKeyspace'] = message.keyspace;
|
|
||||||
return Promise.resolve({ success: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'UNLOCK_SESSION') {
|
|
||||||
mockStorage['currentKeyspace'] = message.keyspace;
|
|
||||||
return Promise.resolve({ success: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (message.type === 'LOCK_SESSION') {
|
|
||||||
delete mockStorage['currentKeyspace'];
|
|
||||||
return Promise.resolve({ success: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.resolve({ success: false });
|
|
||||||
},
|
|
||||||
getURL: (path: string): string => {
|
|
||||||
return path;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
storage: {
|
|
||||||
local: {
|
|
||||||
get: (keys: string | string[] | object): Promise<Record<string, any>> => {
|
|
||||||
console.log('Mock storage.local.get called with:', keys);
|
|
||||||
|
|
||||||
if (typeof keys === 'string') {
|
|
||||||
// Handle specific script storage keys
|
|
||||||
if (keys === 'pendingScripts' && !mockStorage[keys]) {
|
|
||||||
mockStorage[keys] = [];
|
|
||||||
}
|
|
||||||
if (keys === 'scriptResults' && !mockStorage[keys]) {
|
|
||||||
mockStorage[keys] = [];
|
|
||||||
}
|
|
||||||
return Promise.resolve({ [keys]: mockStorage[keys] });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(keys)) {
|
|
||||||
const result: Record<string, any> = {};
|
|
||||||
keys.forEach(key => {
|
|
||||||
// Handle specific script storage keys
|
|
||||||
if (key === 'pendingScripts' && !mockStorage[key]) {
|
|
||||||
mockStorage[key] = [];
|
|
||||||
}
|
|
||||||
if (key === 'scriptResults' && !mockStorage[key]) {
|
|
||||||
mockStorage[key] = [];
|
|
||||||
}
|
|
||||||
result[key] = mockStorage[key];
|
|
||||||
});
|
|
||||||
return Promise.resolve(result);
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.resolve(mockStorage);
|
|
||||||
},
|
|
||||||
set: (items: Record<string, any>): Promise<void> => {
|
|
||||||
console.log('Mock storage.local.set called with:', items);
|
|
||||||
|
|
||||||
Object.keys(items).forEach(key => {
|
|
||||||
mockStorage[key] = items[key];
|
|
||||||
});
|
|
||||||
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} as typeof chrome;
|
|
||||||
};
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
/**
|
|
||||||
* WASM Helper for Hero Vault Extension
|
|
||||||
*
|
|
||||||
* This module handles loading and initializing the WASM module,
|
|
||||||
* and provides a typed interface to the WASM functions.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Import types for TypeScript
|
|
||||||
interface WasmModule {
|
|
||||||
// Session management
|
|
||||||
init_session: (keyspace: string, password: string) => Promise<void>;
|
|
||||||
create_keyspace: (keyspace: string, password: string) => Promise<void>;
|
|
||||||
lock_session: () => void;
|
|
||||||
is_unlocked: () => boolean;
|
|
||||||
|
|
||||||
// Keypair management
|
|
||||||
add_keypair: (key_type: string | undefined, metadata: string | undefined) => Promise<string>;
|
|
||||||
list_keypairs: () => Promise<string>;
|
|
||||||
select_keypair: (key_id: string) => Promise<void>;
|
|
||||||
current_keypair_metadata: () => Promise<any>;
|
|
||||||
current_keypair_public_key: () => Promise<Uint8Array>;
|
|
||||||
|
|
||||||
// Cryptographic operations
|
|
||||||
sign: (message: Uint8Array) => Promise<string>;
|
|
||||||
verify: (message: Uint8Array, signature: string) => Promise<boolean>;
|
|
||||||
encrypt_data: (data: Uint8Array) => Promise<Uint8Array>;
|
|
||||||
decrypt_data: (encrypted: Uint8Array) => Promise<Uint8Array>;
|
|
||||||
|
|
||||||
// Rhai scripting
|
|
||||||
init_rhai_env: () => void;
|
|
||||||
run_rhai: (script: string) => Promise<string>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Global reference to the WASM module
|
|
||||||
let wasmModule: WasmModule | null = null;
|
|
||||||
let isInitializing = false;
|
|
||||||
let initPromise: Promise<void> | null = null;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize the WASM module
|
|
||||||
* This should be called before any other WASM functions
|
|
||||||
*/
|
|
||||||
export const initWasm = async (): Promise<void> => {
|
|
||||||
if (wasmModule) {
|
|
||||||
return Promise.resolve(); // Already initialized
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isInitializing && initPromise) {
|
|
||||||
return initPromise; // Already initializing
|
|
||||||
}
|
|
||||||
|
|
||||||
isInitializing = true;
|
|
||||||
|
|
||||||
initPromise = new Promise<void>(async (resolve, reject) => {
|
|
||||||
try {
|
|
||||||
try {
|
|
||||||
// Import the WASM module
|
|
||||||
// Use a relative path that will be resolved by Vite during build
|
|
||||||
const wasmImport = await import('../../public/wasm/wasm_app.js');
|
|
||||||
|
|
||||||
// Initialize the WASM module
|
|
||||||
await wasmImport.default();
|
|
||||||
|
|
||||||
// Store the WASM module globally
|
|
||||||
wasmModule = wasmImport as unknown as WasmModule;
|
|
||||||
|
|
||||||
console.log('WASM module initialized successfully');
|
|
||||||
resolve();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to initialize WASM module:', error);
|
|
||||||
reject(error);
|
|
||||||
}
|
|
||||||
|
|
||||||
} finally {
|
|
||||||
isInitializing = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return initPromise;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the WASM module
|
|
||||||
* This will initialize the module if it hasn't been initialized yet
|
|
||||||
*/
|
|
||||||
export const getWasmModule = async (): Promise<WasmModule> => {
|
|
||||||
if (!wasmModule) {
|
|
||||||
await initWasm();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!wasmModule) {
|
|
||||||
throw new Error('WASM module failed to initialize');
|
|
||||||
}
|
|
||||||
|
|
||||||
return wasmModule;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if the WASM module is initialized
|
|
||||||
*/
|
|
||||||
export const isWasmInitialized = (): boolean => {
|
|
||||||
return wasmModule !== null;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Helper to convert string to Uint8Array
|
|
||||||
*/
|
|
||||||
export const stringToUint8Array = (str: string): Uint8Array => {
|
|
||||||
const encoder = new TextEncoder();
|
|
||||||
return encoder.encode(str);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Helper to convert Uint8Array to string
|
|
||||||
*/
|
|
||||||
export const uint8ArrayToString = (array: Uint8Array): string => {
|
|
||||||
const decoder = new TextDecoder();
|
|
||||||
return decoder.decode(array);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Helper to convert hex string to Uint8Array
|
|
||||||
*/
|
|
||||||
export const hexToUint8Array = (hex: string): Uint8Array => {
|
|
||||||
const bytes = new Uint8Array(hex.length / 2);
|
|
||||||
for (let i = 0; i < hex.length; i += 2) {
|
|
||||||
bytes[i / 2] = parseInt(hex.substring(i, i + 2), 16);
|
|
||||||
}
|
|
||||||
return bytes;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Helper to convert Uint8Array to hex string
|
|
||||||
*/
|
|
||||||
export const uint8ArrayToHex = (array: Uint8Array): string => {
|
|
||||||
return Array.from(array)
|
|
||||||
.map(b => b.toString(16).padStart(2, '0'))
|
|
||||||
.join('');
|
|
||||||
};
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2020",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"strict": false,
|
|
||||||
"noImplicitAny": false,
|
|
||||||
"noUnusedLocals": false,
|
|
||||||
"noUnusedParameters": false,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["./src/*"]
|
|
||||||
},
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"typeRoots": ["./node_modules/@types", "./src/types"],
|
|
||||||
"jsxImportSource": "react"
|
|
||||||
},
|
|
||||||
"include": ["src"],
|
|
||||||
"references": [{ "path": "./tsconfig.node.json" }]
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"composite": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowSyntheticDefaultImports": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import { defineConfig } from 'vite';
|
|
||||||
import react from '@vitejs/plugin-react';
|
|
||||||
import { crx } from '@crxjs/vite-plugin';
|
|
||||||
import { resolve } from 'path';
|
|
||||||
import { readFileSync } from 'fs';
|
|
||||||
import fs from 'fs';
|
|
||||||
|
|
||||||
const manifest = JSON.parse(
|
|
||||||
readFileSync('public/manifest.json', 'utf-8')
|
|
||||||
);
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [
|
|
||||||
react(),
|
|
||||||
crx({ manifest }),
|
|
||||||
],
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@': resolve(__dirname, 'src'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
build: {
|
|
||||||
outDir: 'dist',
|
|
||||||
emptyOutDir: true,
|
|
||||||
rollupOptions: {
|
|
||||||
input: {
|
|
||||||
index: resolve(__dirname, 'index.html'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// Copy WASM files to the dist directory
|
|
||||||
publicDir: 'public',
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user