add confidential-token-demo

Author: olehnikolaiev

examples/confidential-token-demo/index.html

@@ -32,11 +32,6 @@ <h1>Confidential ERC-20 Transfer</h1>
             <input type="text" id="providerUrl" value="http://127.0.0.1:1234">
         </div>
 
-        <div class="form-group">
-            <label for="chainID">Chain ID (Hex)</label>
-            <input type="text" id="chainID" value="0x2f8d4b0d3abc9">
-        </div>
-
         <div class="form-group">
             <label for="tokenAddress">Token Address</label>
             <input type="text" id="tokenAddress" placeholder="0x...">
@@ -70,6 +65,29 @@ <h2>Decrypt Balance</h2>
         <button id="decryptBtn">Decrypt Balance</button>
         <div id="decryptResult" style="margin-top: 10px; font-weight: bold;"></div>
     </div>
+    
+    <div class="card" style="margin-top: 20px;">
+        <h2>User Management</h2>
+        <button id="generateUserBtn">Generate New User</button>
+        <div id="generatedUserInfo" style="display:none; background:#f9f9f9; padding:10px; margin-top:10px; word-break: break-all;">
+            <p style="margin: 5px 0;"><strong>Private Key:</strong> <span id="genPrivKey" style="font-family: monospace;"></span></p>
+            <p style="margin: 5px 0;"><strong>Public Key:</strong> <span id="genPubKey" style="font-family: monospace;"></span></p>
+            <p style="margin: 5px 0;"><strong>Address:</strong> <span id="genAddress" style="font-family: monospace;"></span></p>
+        </div>
+
+        <hr style="margin: 20px 0; border: 0; border-top: 1px solid #ddd;">
+
+        <h3>Register New User</h3>
+        <div class="form-group">
+            <label for="regPublicKey">Public Key</label>
+            <textarea id="regPublicKey" rows="3" placeholder="0x..." style="width: 100%; border: 1px solid #ccc; border-radius: 4px; padding: 8px;"></textarea>
+        </div>
+        <div class="form-group">
+            <label for="regAmount">CTX Deposit</label>
+            <input type="text" id="regAmount" placeholder="0.0">
+        </div>
+        <button id="registerUserBtn">Register New User</button>
+    </div>
 
     <script type="module" src="/src/main.js"></script>
 </body>

examples/confidential-token-demo/src/main.js

@@ -1,4 +1,5 @@
 import { encryptTokenTransfer, decryptBalance } from './encryption';
+import { ethers } from 'ethers';
 
 const connectBtn = document.getElementById('connectBtn');
 const sendBtn = document.getElementById('sendBtn');
@@ -35,7 +36,6 @@ async function handleSend() {
     sendBtn.disabled = true;
 
     const providerUrl = document.getElementById('providerUrl').value;
-    const chainID = document.getElementById('chainID').value;
     const tokenAddress = document.getElementById('tokenAddress').value;
     const recipient = document.getElementById('recipient').value;
     const amount = document.getElementById('amount').value;
@@ -58,7 +58,7 @@ async function handleSend() {
             to: result.to,
             data: result.data,
             value: '0x0', // 0 ETH
-            gas: '0x30d40', // 200,000 gas 
+            gas: '0xf4240', // 200,000 gas 
         };
 
         const txHash = await window.ethereum.request({
@@ -121,3 +121,78 @@ if (decryptBtn) {
     decryptBtn.addEventListener('click', handleDecrypt);
 }
 
+/* User Management */
+
+const generateUserBtn = document.getElementById('generateUserBtn');
+const generatedUserInfo = document.getElementById('generatedUserInfo');
+const genPrivKey = document.getElementById('genPrivKey');
+const genPubKey = document.getElementById('genPubKey');
+const genAddress = document.getElementById('genAddress');
+
+if (generateUserBtn) {
+    generateUserBtn.addEventListener('click', () => {
+        const wallet = ethers.Wallet.createRandom();
+        genPrivKey.textContent = wallet.privateKey;
+        genPubKey.textContent = wallet.signingKey.publicKey;
+        genAddress.textContent = wallet.address;
+        generatedUserInfo.style.display = 'block';
+    });
+}
+
+const registerUserBtn = document.getElementById('registerUserBtn');
+const regPublicKeyInput = document.getElementById('regPublicKey');
+const regAmountInput = document.getElementById('regAmount');
+
+if (registerUserBtn) {
+    registerUserBtn.addEventListener('click', async () => {
+        try {
+            const pubKeyHex = regPublicKeyInput.value.trim();
+            const amount = regAmountInput.value.trim();
+            const tokenAddr = document.getElementById('tokenAddress').value;
+
+            if (!pubKeyHex || !amount || !tokenAddr) {
+                 setStatus("Please fill all fields (Token Addr, Public Key, Amount)", "error");
+                 return;
+            }
+            
+            // Parse Public Key
+            let cleanKey = pubKeyHex;
+            if (cleanKey.startsWith('0x')) cleanKey = cleanKey.slice(2);
+            // Remove 04 prefix if present and length is 130
+            if (cleanKey.length === 130 && cleanKey.startsWith('04')) {
+                 cleanKey = cleanKey.slice(2);       
+            }
+
+            if (cleanKey.length !== 128) {
+                 setStatus("Invalid Public Key length. Expected uncompressed key (start with 04).", "error");
+                 return; 
+            }
+
+            const x = "0x" + cleanKey.slice(0, 64);
+            const y = "0x" + cleanKey.slice(64);
+
+            setStatus("Registering user...", "info");
+
+            // ABI for registerPublicKey
+            const abi = [
+                "function registerPublicKey((bytes32,bytes32) publicKey) payable"
+            ];
+            
+            // Use browser provider
+            const provider = new ethers.BrowserProvider(window.ethereum);
+            const signer = await provider.getSigner();
+            const contract = new ethers.Contract(tokenAddr, abi, signer);
+            
+            const tx = await contract.registerPublicKey([x, y], {
+                value: ethers.parseEther(amount),
+                gasLimit: 500000
+            });
+            
+            setStatus(`Registration sent! Hash: ${tx.hash}`, 'success');
+
+        } catch (e) {
+            console.error(e);
+            setStatus("Error: " + e.message, "error");
+        }
+    });
+}