Merge pull request #212 from covenantalade/fix/issues-163-164-168

fix: resolve issues #163, #164, #168

Author: Nanle-code

package.json

@@ -33,6 +33,11 @@
     "recharts": "^2.12.7",
     "zustand": "^4.5.4"
   },
+  "optionalDependencies": {
+    "@ledgerhq/hw-transport-webusb": "^6.29.4",
+    "@ledgerhq/hw-transport-webhid": "^6.29.4",
+    "@stellar/ledger": "^1.0.0"
+  },
   "devDependencies": {
     "@babel/preset-env": "^7.29.3",
     "@babel/preset-react": "^7.24.7",

src/App.tsx

@@ -53,6 +53,7 @@ import {
 } from './lib/securityEvents'
 import { TourLauncher } from './components/tutorial'
 import SearchBar from './components/layout/SearchBar'
+import GlobalSearch from './components/search/GlobalSearch'
 import UserPreferences from './components/preferences/UserPreferences'
 import MobileNavigation from './components/layout/MobileNavigation'
 import KeyboardNavigation from './components/accessibility/KeyboardNavigation'
@@ -294,6 +295,10 @@ function DashboardLayout() {
       setActiveTab('account')
       return
     }
+    if (result.type === 'contract') {
+      setActiveTab('contracts')
+      return
+    }
     setActiveTab('overview')
   }
 
@@ -313,7 +318,7 @@ function DashboardLayout() {
           <KeyboardNavigation />
           <div style={{ marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
             <div style={{ flex: 1 }}>
-              <SearchBar onSelectResult={handleSearchResult} />
+              <GlobalSearch onSelectResult={handleSearchResult} />
             </div>
             <button
               onClick={() => setPreferencesOpen(true)}

src/components/dashboard/TransactionSigner.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 import { useStore } from '../../lib/store'
 import { signTransactionWithFreighter } from '../../lib/wallet/freighter'
+import { signXdrWithLedger, isLedgerSupported, getActiveLedgerSession } from '../../lib/wallet/ledger'
+import { NETWORKS } from '../../lib/stellar'
 import Card from './Card'
 
 export default function TransactionSigner() {
@@ -10,6 +12,9 @@ export default function TransactionSigner() {
   const [signing, setSigning] = useState(false)
   const [error, setError] = useState(null)
   const [copied, setCopied] = useState(false)
+  const [ledgerPrompt, setLedgerPrompt] = useState(false)
+
+  const networkPassphrase = NETWORKS[network]?.passphrase || NETWORKS.testnet.passphrase
 
   const handleSign = async () => {
     if (!xdr.trim()) {
@@ -23,18 +28,15 @@ export default function TransactionSigner() {
 
     try {
       let result = null
-      const networkName = network === 'mainnet' ? 'PUBLIC' : 'TESTNET'
 
       if (walletType === 'freighter') {
+        const networkName = network === 'mainnet' ? 'PUBLIC' : 'TESTNET'
         result = await signTransactionWithFreighter(xdr.trim(), networkName)
       } else if (walletType === 'ledger') {
-        setError('Ledger signing requires the device to be connected. Use the Builder tab to build and sign transactions.')
-        setSigning(false)
-        return
+        await _signWithLedger()
+        return // _signWithLedger manages its own state
       } else {
-        setError('No wallet connected. Connect a wallet first.')
-        setSigning(false)
-        return
+        throw new Error('No wallet connected. Connect a wallet first.')
       }
 
       setSignedXdr(result)
@@ -45,6 +47,47 @@ export default function TransactionSigner() {
     }
   }
 
+  const _signWithLedger = async () => {
+    // Check browser support first
+    const supported = await isLedgerSupported()
+    if (!supported) {
+      setError(
+        'WebUSB/WebHID is not supported in this browser. ' +
+        'Please use Chrome or a Chromium-based browser to sign with Ledger.'
+      )
+      setSigning(false)
+      return
+    }
+
+    // If we already have a live stellarApp session from WalletConnect, use it.
+    // Otherwise, prompt the user to reconnect via the Wallet tab.
+    const { stellarApp, publicKey } = getActiveLedgerSession()
+    if (!stellarApp) {
+      setError(
+        'Ledger session not found. Please connect your Ledger in the Wallet tab first, ' +
+        'then return here to sign.'
+      )
+      setSigning(false)
+      return
+    }
+
+    try {
+      setLedgerPrompt(true)
+      const signed = await signXdrWithLedger(
+        xdr.trim(),
+        networkPassphrase,
+        stellarApp,
+        publicKey || walletPublicKey
+      )
+      setSignedXdr(signed)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLedgerPrompt(false)
+      setSigning(false)
+    }
+  }
+
   const handleCopy = () => {
     if (signedXdr) {
       navigator.clipboard.writeText(signedXdr)
@@ -85,17 +128,37 @@ export default function TransactionSigner() {
           <span style={{ fontFamily: 'var(--font-mono)' }}>
             {walletPublicKey?.slice(0, 8)}…{walletPublicKey?.slice(-8)}
           </span>
+          <span style={{ marginLeft: 'auto', opacity: 0.7 }}>{walletType}</span>
         </div>
 
+        {/* Ledger device prompt banner */}
+        {ledgerPrompt && (
+          <div style={{
+            padding: '12px',
+            background: 'var(--amber-glow, rgba(245,158,11,0.1))',
+            border: '1px solid var(--amber, #f59e0b)',
+            borderRadius: 'var(--radius-md)',
+            fontSize: '12px',
+            color: 'var(--amber, #f59e0b)',
+            display: 'flex', alignItems: 'center', gap: '8px',
+          }}>
+            <span style={{ fontSize: '18px' }}>🔐</span>
+            Review and confirm the transaction on your Ledger device…
+          </div>
+        )}
+
         {/* XDR input */}
         <div>
-          <label style={{ fontSize: '10px', color: 'var(--text-muted)', letterSpacing: '1px', textTransform: 'uppercase', display: 'block', marginBottom: '6px' }}>
+          <label style={{
+            fontSize: '10px', color: 'var(--text-muted)', letterSpacing: '1px',
+            textTransform: 'uppercase', display: 'block', marginBottom: '6px',
+          }}>
             TRANSACTION XDR
           </label>
           <textarea
             value={xdr}
             onChange={(e) => setXdr(e.target.value)}
-            placeholder="Paste the transaction XDR envelope here..."
+            placeholder="Paste the unsigned transaction XDR envelope here…"
             rows={5}
             style={{
               width: '100%',
@@ -135,7 +198,7 @@ export default function TransactionSigner() {
           {signing ? (
             <>
               <div className="spinner" />
-              Signing…
+              {ledgerPrompt ? 'Waiting for Ledger…' : 'Signing…'}
             </>
           ) : (
             'Sign Transaction'

src/components/layout/MobileNavigation.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { useStore } from '../../lib/store'
 
+// Mirrors the most-used tabs; full nav is in the sidebar (hamburger menu).
 const QUICK_NAV = [
-  { id: 'overview', label: 'Home', icon: '◈' },
-  { id: 'transactions', label: 'Txns', icon: '⇄' },
-  { id: 'contracts', label: 'Contracts', icon: '◻' },
-  { id: 'assets', label: 'Assets', icon: '💎' },
-  { id: 'settings', label: 'Settings', icon: '⚙' },
+  { id: 'overview',      label: 'Home',    icon: '◈' },
+  { id: 'transactions',  label: 'Txns',    icon: '⇄' },
+  { id: 'dex',           label: 'DEX',     icon: '⇌' },
+  { id: 'wallet',        label: 'Wallet',  icon: '⊡' },
+  { id: 'settings',      label: 'Settings', icon: '⚙' },
 ]
 
 export default function MobileNavigation() {