add about section

api1.js

@@ -1921,6 +1921,23 @@ function registerTorHandlers() {
 // MAIN REGISTRATION FUNCTION
 // ============================================================================
 
+function registerAppHandlers() {
+  ipcMain.handle('app:getVersionInfo', async () => {
+    try {
+      const appVersion = app.getVersion();
+      let binaryVersion = 'unknown';
+      try {
+        const napiPkgPath = require.resolve('coinswap-napi/package.json');
+        const napiPkg = JSON.parse(fs.readFileSync(napiPkgPath, 'utf8'));
+        binaryVersion = napiPkg.version || 'unknown';
+      } catch (_) {}
+      return { success: true, appVersion, binaryVersion };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+}
+
 function registerAPI1() {
   console.log('📦 Registering API v1 handlers...');
 
@@ -1932,6 +1949,7 @@ function registerAPI1() {
   registerDialogHandlers();
   registerShellHandlers();
   registerTorHandlers();
+  registerAppHandlers();
 
   console.log('✅ API v1 handlers registered');
 }

preload.js

@@ -68,6 +68,10 @@ contextBridge.exposeInMainWorld('api', {
     set: (key, value) => ipcRenderer.invoke('preferences:set', key, value),
   },
 
+  app: {
+    getVersionInfo: () => ipcRenderer.invoke('app:getVersionInfo'),
+  },
+
   // File dialogs - TOP LEVEL, NOT INSIDE TAKER!
   openFile: (options) => ipcRenderer.invoke('dialog:openFile', options),
   saveFile: (options) => ipcRenderer.invoke('dialog:saveFile', options),

src/components/Nav.js

@@ -99,6 +99,13 @@ export async function NavComponent(container) {
         </svg>
         <span class="text-sm font-semibold text-lg">Settings</span>
       </a>
+
+      <a href="#about" data-nav="about" class="nav-item flex flex-col items-center justify-center p-4 rounded-lg bg-[#242d3d] text-gray-400 hover:bg-[#2d3748] hover:text-white transition-colors">
+        <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <span class="text-sm font-semibold text-lg">About</span>
+      </a>
     </nav>
   `;
 

src/components/about/About.js

@@ -0,0 +1,50 @@
+export async function AboutComponent(container) {
+  container.innerHTML = `
+    <div class="flex-1 p-8 overflow-auto">
+
+      <!-- Header -->
+      <div class="flex items-start justify-between mb-8">
+        <div>
+          <h2 class="text-3xl font-bold text-[#FF6B35]">Coinswap</h2>
+          <p class="text-gray-400 text-sm mt-1">Taker Wallet — Bitcoin Privacy Tool</p>
+        </div>
+        <div class="flex items-center gap-3 mt-1">
+          <span class="text-gray-500 text-sm">Version</span>
+          <span id="app-version" class="text-white font-mono text-sm bg-[#1a2332] px-3 py-1 rounded">Loading...</span>
+        </div>
+      </div>
+
+      <!-- What is Coinswap -->
+      <div class="bg-[#1a2332] rounded-lg p-8 max-w-3xl space-y-4">
+        <h3 class="text-xl font-semibold text-white">About Coinswap</h3>
+        <p class="text-gray-300 text-sm leading-relaxed">
+          Coinswap is a trustless, self-custodial atomic swap protocol built on Bitcoin. Unlike existing solutions
+          that rely on centralized servers, Coinswap's marketplace is seeded in the Bitcoin blockchain itself —
+          no central host required. Sybil resistance is achieved through
+          <span class="text-white font-medium">Fidelity Bonds</span>: time-locked UTXOs that make Sybil attacks
+          economically costly while bootstrapping the marketplace on-chain.
+        </p>
+        <p class="text-gray-300 text-sm leading-relaxed">
+          There are two roles. <span class="text-white font-medium">Makers</span> are swap service providers who
+          earn fees for supplying liquidity and run in an install-fund-forget mode — no active management needed.
+          <span class="text-white font-medium">Takers</span> (this app) initiate swaps, pay all fees, and select
+          makers based on bond validity, available liquidity, and fee rates.
+        </p>
+        <p class="text-gray-300 text-sm leading-relaxed">
+          Swaps are routed through multiple makers — no single maker sees the full route. The taker relays all
+          messages between makers over Tor, keeping each maker's view partial. This app is a production-grade
+          implementation of Chris Belcher's teleport-transactions proof-of-concept.
+        </p>
+      </div>
+
+    </div>
+  `;
+
+  try {
+    const result = await window.api.app.getVersionInfo();
+    const version = result.success ? `v${result.appVersion}` : 'unavailable';
+    container.querySelector('#app-version').textContent = version;
+  } catch (_) {
+    container.querySelector('#app-version').textContent = 'unavailable';
+  }
+}

src/components/connection/ConnectionStatus.js

@@ -228,7 +228,16 @@ export function ConnectionStatusComponent(container, onConnected) {
 
         try {
             const result = await bitcoindConnection.connect();
-            if (!result.success) {
+            if (result.alreadyConnected) {
+                // Connection existed before our patch was in place — verify and proceed
+                const check = await bitcoindConnection.testConnection();
+                if (check.success) {
+                    showSuccess(check.info);
+                } else {
+                    bitcoindConnection.disconnect();
+                    startConnection(); // retry from scratch
+                }
+            } else if (!result.success) {
                 showError(result.finalError || result.error);
             }
         } catch (error) {

src/components/taker/TakerInitialization.js

@@ -30,12 +30,6 @@ export function TakerInitializationComponent(container, config, onInitialized) {
                         </div>
                         <span id="step-taker-text" class="text-gray-400 text-sm">Initializing taker (creates wallet)</span>
                     </div>
-                    <div id="step-offerbook" class="flex items-center space-x-3">
-                        <div id="step-offerbook-icon" class="w-6 h-6 rounded-full bg-gray-600 flex items-center justify-center">
-                            <span class="text-xs text-white">3</span>
-                        </div>
-                        <span id="step-offerbook-text" class="text-gray-400 text-sm">Syncing offerbook</span>
-                    </div>
                 </div>
             </div>
 
@@ -269,31 +263,6 @@ export function TakerInitializationComponent(container, config, onInitialized) {
       }
 
       updateStep('step-taker', 'complete', 'Taker ready (wallet loaded)');
-      updateProgress(66, 'Syncing offerbook...');
-      updateStep('step-offerbook', 'active', 'Syncing offerbook...');
-
-      const syncResult = await window.api.taker.syncOfferbookAndWait();
-      if (!syncResult.success) {
-        console.warn('⚠️ Offerbook sync failed on launch:', syncResult.error);
-        updateStep('step-offerbook', 'error', 'Sync failed (will retry later)');
-      } else {
-        const syncId = syncResult.syncId;
-        await new Promise((resolve) => {
-          const poll = setInterval(async () => {
-            try {
-              const status = await window.api.taker.getSyncStatus(syncId);
-              const done = !status.success || status.sync.status === 'completed' || status.sync.status === 'failed';
-              if (done) {
-                clearInterval(poll);
-                const ok = status.success && status.sync.status === 'completed';
-                updateStep('step-offerbook', ok ? 'complete' : 'error', ok ? 'Offerbook ready' : 'Sync failed (will retry later)');
-                resolve();
-              }
-            } catch { clearInterval(poll); updateStep('step-offerbook', 'error', 'Sync failed (will retry later)'); resolve(); }
-          }, 1000);
-        });
-      }
-
       updateProgress(100, 'Initialization complete');
       showSuccess();
     } catch (error) {

src/js/app.js

@@ -7,6 +7,7 @@ import { SwapComponent } from '../components/swap/Swap.js';
 import { RecoveryComponent } from '../components/recovery/Recovery.js';
 import { LogComponent } from '../components/log/Log.js';
 import { SettingsComponent } from '../components/settings/Settings.js';
+import { AboutComponent } from '../components/about/About.js';
 import { FirstTimeSetupModal } from '../components/settings/FirstTimeSetup.js';
 import { SwapStateManager } from '../components/swap/SwapStateManager.js';
 import { ConnectionStatusComponent } from '../components/connection/ConnectionStatus.js';
@@ -23,6 +24,7 @@ const components = {
   recovery: RecoveryComponent,
   log: LogComponent,
   settings: SettingsComponent,
+  about: AboutComponent,
 };
 
 // Background swap manager - runs independently of UI components
@@ -133,70 +135,17 @@ function setupNavigation() {
 async function checkBitcoindConnection(config) {
   console.log('🔌 Checking Bitcoin Core connection...');
 
-  // Update the connection manager with config from setup
   if (config) {
     bitcoindConnection.updateConfig(config);
   }
 
-  // Show connection status component
   const appContainer = document.querySelector('body');
   ConnectionStatusComponent(appContainer, (connectionInfo) => {
     console.log('✅ Bitcoin Core connected, starting app...', connectionInfo);
-    checkTakerInitialization(config);
+    startTakerInitWithConfig(config);
   });
 }
 
-async function checkTakerInitialization(config) {
-  console.log('🔄 Checking Taker initialization...');
-
-  if (!config || !config.rpc) {
-    console.log('⚠️ RPC configuration missing, skipping taker initialization');
-    startMainApp();
-    return;
-  }
-
-  try {
-    // Extract wallet name from config
-    const walletName =
-      config.wallet?.name || config.wallet?.fileName || 'taker-wallet';
-
-    console.log('🔍 Checking wallet:', walletName);
-
-    // Store it in config so showPasswordPrompt can use it
-    if (!config.wallet.name && !config.wallet.fileName) {
-      config.wallet.name = walletName;
-    }
-
-    // Check if wallet file is encrypted
-    const isEncrypted = await window.api.taker.isWalletEncrypted(
-      null,
-      walletName
-    );
-    console.log('🔐 Wallet file encrypted:', isEncrypted);
-
-    if (isEncrypted) {
-      console.log('🔓 Wallet is encrypted, showing password prompt...');
-      await showPasswordPrompt(config); // ✅ Config has correct wallet name
-    } else {
-      console.log('🔓 Wallet is not encrypted');
-
-      const result = await window.api.taker.initialize(config);
-
-      if (result.success) {
-        console.log('✅ Taker initialized');
-        startMainApp();
-        startBackgroundOfferbookSync();
-      } else {
-        console.error('❌ Taker initialization failed:', result.error);
-        alert('Failed to initialize: ' + result.error);
-      }
-    }
-  } catch (error) {
-    console.error('❌ Initialization check failed:', error);
-    alert('Initialization failed: ' + error.message);
-  }
-}
-
 function startTakerInitWithConfig(config) {
   const appContainer = document.querySelector('body');
   TakerInitializationComponent(appContainer, config, (result) => {
@@ -349,6 +298,7 @@ async function startBackgroundOfferbookSync() {
   }
 }
 
+
 // Start the main app after bitcoind connection is established
 async function startMainApp() {
   const activeSwap = await SwapStateManager.getActiveSwap();

src/styles/output.css

@@ -45,6 +45,7 @@
     --spacing: 0.25rem;
     --container-md: 28rem;
     --container-2xl: 42rem;
+    --container-3xl: 48rem;
     --container-5xl: 64rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
@@ -66,6 +67,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-wide: 0.025em;
+    --leading-relaxed: 1.625;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -515,6 +517,9 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
@@ -588,9 +593,6 @@
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
-  .grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -1252,6 +1254,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);