Add params to quasar.connect()

Author: connor33341

docs/PRIVATE_KEY_ACCESS.md

@@ -0,0 +1,165 @@
+# Quasar Private Key Access Feature
+
+## Overview
+
+The Quasar wallet now supports requesting private key access during connection. This is a **high-security feature** that should only be used when absolutely necessary and with trusted applications.
+
+## API Changes
+
+### Updated `connect()` Method
+
+The `connect()` method now accepts a `QuasarConnectionParams` object:
+
+```typescript
+interface QuasarConnectionParams {
+    address?: string;           // Connect to specific wallet address
+    return_private_key?: boolean; // Request private key access
+}
+
+// New signature
+async connect(params?: QuasarConnectionParams | string): Promise<WalletAccount[]>
+```
+
+### Backward Compatibility
+
+The method maintains backward compatibility. You can still pass a string as the address:
+
+```javascript
+// Old way (still works)
+await quasar.connect("0x1234567890abcdef...");
+
+// New way
+await quasar.connect({
+    address: "0x1234567890abcdef...",
+    return_private_key: false
+});
+```
+
+## Usage Examples
+
+### Basic Connection
+```javascript
+// Connect normally (no changes needed)
+const accounts = await quasar.connect();
+```
+
+### Connect with Private Key Access
+```javascript
+// Request private key access
+const result = await quasar.connect({
+    return_private_key: true
+});
+
+// Private key will be included in the response
+console.log('Private key:', result.privateKey);
+```
+
+### Connect to Specific Address with Private Key
+```javascript
+// Connect to specific wallet and request private key
+const result = await quasar.connect({
+    address: "0x1234567890abcdef...",
+    return_private_key: true
+});
+```
+
+## Security Features
+
+When `return_private_key: true` is requested:
+
+### 1. Security Warning Dialog
+- A prominent warning is displayed to the user
+- Clear indication of the security implications
+- Visual emphasis on the risks
+
+### 2. Confirmation Phrase Requirement
+- User must type the exact phrase: **"I understand the security risks"**
+- Prevents accidental approval
+- Ensures user awareness of the implications
+
+### 3. Visual Indicators
+- Red color scheme for private key requests
+- Warning icons and messages
+- Disabled approve button until phrase is correctly entered
+
+## Security Best Practices
+
+### For Developers
+1. **Only request private key access when absolutely necessary**
+2. **Never store private keys in logs or persistent storage**
+3. **Use private key access only for legitimate cryptographic operations**
+4. **Implement proper key handling and memory cleanup**
+5. **Test only with development/test wallets**
+
+### For Users
+1. **Only approve private key requests from trusted applications**
+2. **Verify the website URL before entering the confirmation phrase**
+3. **Never approve private key requests from unknown websites**
+4. **Use separate test wallets for development**
+
+## Response Format
+
+When private key access is granted, the response includes additional fields:
+
+```javascript
+{
+}
+```
+
+## Error Handling
+
+```javascript
+
+```
+
+## Testing
+
+Use the provided test page: `tests/private-key-test.html`
+
+This page includes:
+- Normal connection test
+- Private key access test
+- Multi-parameter connection test
+- Security warning demonstrations
+
+## Implementation Details
+
+### Files Modified
+- `src/lib/browser/wallet-injection.ts` - Updated connect method signature
+- `src/pages/Background/index.js` - Enhanced connection parameter handling
+- `src/pages/Popup/RequestDialog.tsx` - Added security warning UI and validation
+- `src/pages/Popup/RequestDialog.css` - Styled security warning components
+- `src/pages/Panel/Panel.tsx` - Updated dev tools to support new parameters
+
+### Security Measures Implemented
+1. **Phrase verification** - Exact match required for confirmation
+2. **Visual warnings** - Red color scheme and warning icons
+3. **Disabled controls** - Approval disabled until phrase is entered
+4. **Clear messaging** - Explicit security warnings and implications
+5. **Parameter validation** - Proper handling of connection parameters
+
+## Migration Guide
+
+### From v5.4.30 and earlier
+```javascript
+// Old code
+const accounts = await quasar.connect();
+const accountsWithAddress = await quasar.connect("0x123...");
+
+// New code (backward compatible)
+const accounts = await quasar.connect();
+const accountsWithAddress = await quasar.connect("0x123...");
+
+// Or use new parameter object
+const accounts = await quasar.connect({});
+const accountsWithAddress = await quasar.connect({
+    address: "0x123..."
+});
+
+// New private key access
+const result = await quasar.connect({
+    return_private_key: true
+});
+```
+
+No breaking changes - all existing code continues to work unchanged.

src/lib/browser/wallet-injection.ts

@@ -29,6 +29,7 @@ export interface BrowserInfo {
 export interface WalletAccount {
     address: string;
     publicKey: string;
+    privateKey?: string;
     curve: string;
 }
 
@@ -54,6 +55,11 @@ export interface TransactionResponse {
     error?: string;
 }
 
+export interface QuasarConnectionParams {
+    address?: string;
+    return_private_key?: boolean;
+}
+
 export interface WalletEvents {
     accountsChanged: (accounts: WalletAccount[]) => void;
     chainChanged: (chainId: string) => void;
@@ -205,9 +211,17 @@ class QuasarWallet {
     }
 
     // Public API methods - now using relayMap for type safety
-    async connect(address?: string): Promise<WalletAccount[]> {
+    async connect(params?: QuasarConnectionParams | string): Promise<WalletAccount[]> {
         try {
-            const payload = address ? { address } : undefined;
+            let payload: QuasarConnectionParams | undefined;
+            
+            // Handle backward compatibility - if params is a string, treat it as address
+            if (typeof params === 'string') {
+                payload = { address: params };
+            } else {
+                payload = params;
+            }
+            
             const result = await this.sendMessage('QUASAR_CONNECT', payload);
             if (result && result.accounts) {
                 this.isConnected = true;

src/pages/Background/index.js

@@ -103,8 +103,8 @@ async function getWalletData(origin = null, hostname = null) {
 }
 
 // Handle wallet connection request
-async function handleConnectWallet(origin, hostname, requestedAddress = null) {
-    console.log(`Connection request from: ${hostname}${requestedAddress ? ` for address: ${requestedAddress}` : ''}`);
+async function handleConnectWallet(origin, hostname, connectionParams = null) {
+    console.log(`Connection request from: ${hostname}${connectionParams?.address ? ` for address: ${connectionParams.address}` : ''}${connectionParams?.return_private_key ? ' [PRIVATE KEY REQUESTED]' : ''}`);
 
     // Check if already connected
     if (connectedSites.has(origin)) {
@@ -116,7 +116,8 @@ async function handleConnectWallet(origin, hostname, requestedAddress = null) {
             hostname,
             title: 'Get Wallet Data',
             message: `Getting wallet data for ${hostname}`,
-            requestedAddress
+            requestedAddress: connectionParams?.address,
+            connectionParams
         });
 
         return new Promise((resolve, reject) => {
@@ -166,10 +167,11 @@ async function handleConnectWallet(origin, hostname, requestedAddress = null) {
             origin,
             hostname,
             title: 'Connect Wallet',
-            message: requestedAddress
-                ? `${hostname} wants to connect to wallet with address: ${requestedAddress}`
+            message: connectionParams?.address
+                ? `${hostname} wants to connect to wallet with address: ${connectionParams.address}`
                 : `${hostname} wants to connect to your wallet`,
-            requestedAddress
+            requestedAddress: connectionParams?.address,
+            connectionParams
         });
 
         // Wait for user response
@@ -345,7 +347,7 @@ if (browserAPI.runtime.onMessage) {
                 break;
 
             case 'CONNECT_WALLET':
-                handleConnectWallet(message.origin, message.hostname, message.payload?.address).then(result => {
+                handleConnectWallet(message.origin, message.hostname, message.payload).then(result => {
                     sendResponse(result);
                 }).catch(error => {
                     sendResponse({ success: false, error: error.message });

src/pages/Panel/Panel.tsx

@@ -22,8 +22,8 @@ interface SignMessageParams {
 }
 
 interface ConnectParams {
-    chainId?: string;
-    requestedChains?: string[];
+    address?: string;
+    return_private_key?: boolean;
 }
 
 interface DialogState {
@@ -54,6 +54,8 @@ const Panel: React.FC = () => {
     });
 
     const [connectForm, setConnectForm] = useState<ConnectParams>({
+        address: undefined,
+        return_private_key: false,
         chainId: undefined,
         requestedChains: []
     });
@@ -622,26 +624,59 @@ const Panel: React.FC = () => {
                         <button
                             type="button"
                             className="preset-btn"
-                            onClick={() => setConnectForm({ chainId: undefined, requestedChains: [] })}
+                            onClick={() => setConnectForm({ address: undefined, return_private_key: false, chainId: undefined, requestedChains: [] })}
                         >
                             Default
                         </button>
                         <button
                             type="button"
                             className="preset-btn"
-                            onClick={() => setConnectForm({ chainId: 'stellaris', requestedChains: ['stellaris'] })}
+                            onClick={() => setConnectForm({ address: undefined, return_private_key: false, chainId: 'stellaris', requestedChains: ['stellaris'] })}
                         >
                             Stellaris
                         </button>
                         <button
                             type="button"
                             className="preset-btn"
-                            onClick={() => setConnectForm({ chainId: 'ethereum', requestedChains: ['ethereum', 'polygon'] })}
+                            onClick={() => setConnectForm({ address: undefined, return_private_key: false, chainId: 'ethereum', requestedChains: ['ethereum', 'polygon'] })}
                         >
                             Multi-chain
                         </button>
+                        <button
+                            type="button"
+                            className="preset-btn"
+                            onClick={() => setConnectForm({ address: undefined, return_private_key: true, chainId: undefined, requestedChains: [] })}
+                            style={{ background: '#ff6b6b', color: 'white' }}
+                        >
+                            Test Private Key
+                        </button>
                     </div>
                 </div>
+                <div className="form-group">
+                    <label>Specific Address (optional)</label>
+                    <input
+                        type="text"
+                        value={connectForm.address || ''}
+                        onChange={(e) => setConnectForm({ ...connectForm, address: e.target.value || undefined })}
+                        placeholder="e.g., 0x1234567890abcdef..."
+                    />
+                    <small style={{ color: '#666', fontSize: '11px' }}>
+                        Connect to a specific wallet address
+                    </small>
+                </div>
+                <div className="form-group">
+                    <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <input
+                            type="checkbox"
+                            checked={connectForm.return_private_key || false}
+                            onChange={(e) => setConnectForm({ ...connectForm, return_private_key: e.target.checked })}
+                        />
+                        Request Private Key Access
+                    </label>
+                    <small style={{ color: '#ff6b6b', fontSize: '11px' }}>
+                        ⚠️ WARNING: This grants full access to the wallet. Only use for testing!
+                    </small>
+                </div>
                 <div className="form-group">
                     <label>Chain ID (optional)</label>
                     <input