Feature/localstorage

[Handy4ndy]

High Level Overview of Change

Local Storage Implementation:

• Account and escrow data now persist to local storage, enabling users to continue testing with the same accounts and escrows across sessions
• Network-specific storage keys ensure accounts and escrows are isolated per network (Devnet vs Local Node)
• Automatic loading of saved data when connecting to a network

Theme Switching:

• Added light/dark theme toggle in the header
• User theme preference persists across sessions using local storage
• Two complete theme files: styles.css (light) and stylesDark.css (dark)

UX Improvements:

• Auto-scroll to network configuration if user tries to perform actions while disconnected
• Better visual feedback for connection state

Context of Change

New Features:

1. AccountSync Module (accountSync.js):

   • Singleton class managing account persistence across networks
   • Network-specific storage keys (e.g., xrpl_accounts_wss_wasm_devnet_rippletest_net_51233)
   • Auto-sync functionality with hooks for get/set operations
   • Methods for import/export, clearing storage, and managing individual accounts
   • Initialize on page load to restore previous session state

2. EscrowSync Module (escrowSync.js):

   • Similar architecture to AccountSync for escrow data persistence
   • Tracks created escrows per network
   • Automatic save/load on network switches
   • Methods for adding, removing, and syncing escrows

3. Theme System:

   • Complete dark theme with GitHub-inspired color palette
   • Light theme (original styling maintained)
   • Toggle button positioned in top-right corner of header
   • Theme preference saved to localStorage as theme key
   • Smooth transitions between themes

Design Decisions:

• Serverless architecture: Local storage aligns with the lightweight, client-side-only design
• Network isolation: Prevents confusion by keeping test accounts separate per network
• Modular design: Separate JS files for accounts and escrows enable easier maintenance
• Singleton pattern: Ensures consistent state management across the application
• CSS file separation: Easier to maintain two complete theme files vs. CSS variables

Type of Change

• New feature (non-breaking change which adds functionality)
• Refactor (non-breaking change that only restructures code)
• Documentation Updates (new JS modules with comprehensive JSDoc comments)

Test Plan

1. Local Storage Persistence:

   • ✅ Generated accounts persist after page refresh
   • ✅ Accounts are network-specific (switching networks shows different account sets)
   • ✅ Created escrows persist and load correctly
   • ✅ Clearing storage works for individual networks and all networks

2. Theme Switching:

   • ✅ Toggle switches between light and dark themes
   • ✅ Theme preference persists across page reloads
   • ✅ All UI elements properly styled in both themes
   • ✅ Button text updates correctly (☀️ Light / 🌙 Dark)

3. Existing Functionality:

   • ✅ Account generation and funding unaffected
   • ✅ Escrow creation and finishing workflows work correctly
   • ✅ WASM deployment and testing unchanged
   • ✅ All dropdowns and smart escrow functionality operational

4. UX Improvements:

   • ✅ Auto-scroll to connection section when disconnected
   • ✅ Import/export functionality for accounts
   • ✅ Download all accounts feature working

Files Changed

New Files:

• ui/accountSync.js - Account persistence module
• ui/escrowSync.js - Escrow persistence module
• ui/stylesDark.css - Complete dark theme stylesheet

Modified Files:

• ui/index.html - Integrated AccountSync and EscrowSync, added theme toggle
• ui/styles.css - Added theme toggle button positioning

API Reference

AccountSync Global Methods:

AccountSync.init(xrpl, network)          // Initialize with XRPL library
AccountSync.setNetwork(network, autoLoad) // Switch networks
AccountSync.autoSync(get, set, onChange)  // Enable auto-save
AccountSync.sync()                        // Manual save trigger
AccountSync.initialize()                  // Load accounts on startup
AccountSync.clearAccounts()               // Clear current network
AccountSync.exportAccounts()              // Export as JSON
AccountSync.importAccounts(json, append)  // Import from JSON

EscrowSync Global Methods

EscrowSync.init(network)                 // Initialize
EscrowSync.setNetwork(network, autoLoad) // Switch networks
EscrowSync.autoSync(get, set)            // Enable auto-save
EscrowSync.sync()                        // Manual save trigger
EscrowSync.initialize()                  // Load escrows on startup
EscrowSync.addEscrow(escrow)            // Add new escrow
EscrowSync.removeEscrow(index)          // Remove by index
EscrowSync.clearEscrows()               // Clear current network

5. Future Tasks:
   • Add account labeling/naming feature for easier identification
   • Add data import for backup and transfer between browsers
   • Implement escrow filtering and search functionality

[Handy4ndy]

Light theme / Dark theme with extended functionality