feat(wallet): add Stellar Wallets Kit integration and fix manual address connection

- Add Stellar Wallets Kit for multi-wallet support (Freighter, Albedo, Rabet, Lobstr)
- Add new Multi-Wallet button to wallet sidebar using Stellar Wallets Kit modal
- Fix manual address connection functionality with dedicated connectManualAddress function
- Add robust fallback mechanisms: Stellar Wallets Kit → Direct Freighter API → Manual Address
- Update wallet interfaces and context to support new connection methods
- Add NetworkIndicator component for network status display
- Improve error handling and user feedback for all connection methods
- Ensure all wallet connection methods work seamlessly together

Author: josegomez-dev

.eslintrc.js

@@ -23,23 +23,27 @@ module.exports = {
   plugins: ['react', '@typescript-eslint', 'prettier'],
   rules: {
     // Prettier
-    'prettier/prettier': 'error',
+    'prettier/prettier': 'warn',
 
     // React
     'react/react-in-jsx-scope': 'off', // Not needed in Next.js
     'react/prop-types': 'off', // We use TypeScript
+    'react/no-unescaped-entities': 'off',
+    'react/no-unknown-property': 'off',
 
     // TypeScript
-    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-unused-vars': 'warn',
     '@typescript-eslint/no-explicit-any': 'warn',
+    'no-undef': 'off', // TypeScript handles this
+    'no-unused-vars': 'off', // TypeScript ESLint handles this
 
     // General
     'no-console': 'warn',
     'no-debugger': 'error',
     'no-var': 'error',
     'prefer-const': 'error',
     semi: ['error', 'always'],
-    quotes: ['error', 'single', { avoidEscape: true }],
+    quotes: 'off', // Let prettier handle this
   },
   settings: {
     react: {

.github/workflows/ci.yml

@@ -144,4 +144,3 @@ jobs:
           name: cypress-videos
           path: cypress/videos/
           retention-days: 7
-

.github/workflows/simple-ci.yml

@@ -45,4 +45,3 @@ jobs:
           name: build-files
           path: .next/
           retention-days: 7
-

.prettierrc

@@ -30,4 +30,3 @@
     }
   ]
 }
-

COMMANDS.md

@@ -170,12 +170,10 @@ npm run clean               # Clean up cache
 ---
 
 **💡 Pro Tips:**
+
 - Use `npm run dev:clean` if you encounter strange build issues
 - Use `npm run health:full` to verify everything is working
 - Use `npm run test:demo:open` to manually test your changes
 - Use `npm run check:fix` before committing to automatically fix issues
 
 **🚀 Happy coding!**
-
-
-

DEVELOPER_GUIDE.md

@@ -1,6 +1,7 @@
 # 🚀 Developer Guide - Nexus Experience
 
-> **Complete onboarding guide for developers joining the Nexus Experience project**
+> **Complete onboarding guide for developers joining the Nexus Experience
+> project**
 
 ## 📋 **Quick Start**
 
@@ -22,6 +23,7 @@ npm run setup:dev
 ```
 
 This will:
+
 - Install dependencies
 - Create environment file from template
 - Fix code formatting
@@ -243,6 +245,7 @@ npm run env:check
 ```
 
 This will show:
+
 - ✅ Environment loaded successfully
 - 📊 Number of public variables
 - 🔐 Number of server variables
@@ -278,17 +281,20 @@ NEXT_PUBLIC_APP_VERSION=0.1.0
 ## 🧪 **Testing Strategy**
 
 ### **Unit Tests**
+
 - **Location**: `__tests__/` directory
 - **Command**: `npm run test:unit`
 - **Watch mode**: `npm run test:unit:watch`
 - **Coverage**: `npm run test:coverage`
 
 ### **Component Tests**
+
 - **Location**: `components/**/*.test.tsx`
 - **Command**: `npm run test:components`
 - **Watch mode**: `npm run test:components:watch`
 
 ### **E2E Tests**
+
 - **Location**: `cypress/e2e/`
 - **Command**: `npm run test:e2e`
 - **UI**: `npm run test:e2e:open`
@@ -327,6 +333,7 @@ const easing = DESIGN_TOKENS.animations.easing['ease-out'];
 ### **Common Issues**
 
 #### **Environment Problems**
+
 ```bash
 # Check environment status
 npm run env:check
@@ -339,6 +346,7 @@ npm run env:validate
 ```
 
 #### **Build Issues**
+
 ```bash
 # Clean build
 npm run build:clean
@@ -348,6 +356,7 @@ npm run dev:reset
 ```
 
 #### **Test Failures**
+
 ```bash
 # Run tests in isolation
 npm run test:unit -- --testNamePattern="test name"
@@ -357,6 +366,7 @@ npm run test:coverage:open
 ```
 
 #### **Development Server Issues**
+
 ```bash
 # Clean start
 npm run dev:clean

DOCUMENTATION_CLEANUP_SUMMARY.md

@@ -151,4 +151,3 @@ and Web3 projects!** 🎉
 _This cleanup ensures that new developers can quickly understand and contribute
 to the Nexus Experience project while maintaining a professional, attractive
 presentation for the Web3 community._
-

TESTING_GUIDE.md

@@ -371,4 +371,3 @@ npx lint-staged
 - Pair programming for complex test scenarios
 - Regular test maintenance sessions
 - Share testing knowledge and best practices
-

app/demos/page.tsx

@@ -8,6 +8,7 @@ import { NexusPrime } from '@/components/layout/NexusPrime';
 import { EscrowProvider } from '@/contexts/EscrowContext';
 import { WalletProvider } from '@/contexts/WalletContext';
 import { AuthProvider } from '@/contexts/AuthContext';
+import { NetworkProvider } from '@/contexts/NetworkContext';
 import { Providers } from '@/components/Providers';
 import { TransactionProvider } from '@/contexts/TransactionContext';
 import { ToastProvider } from '@/contexts/ToastContext';
@@ -348,8 +349,8 @@ const DemoSelector = ({
                         }}
                         disabled={!isConnected}
                         className={`relative px-8 py-4 font-bold rounded-xl transition-all duration-500 transform shadow-2xl border-2 text-lg ${
-                          isConnected 
-                            ? 'hover:scale-110 hover:rotate-1 hover:shadow-brand-500/50 bg-gradient-to-r from-brand-500 via-accent-500 to-brand-400 hover:from-brand-600 hover:via-accent-600 hover:to-brand-500 text-white border-white/30 hover:border-white/60' 
+                          isConnected
+                            ? 'hover:scale-110 hover:rotate-1 hover:shadow-brand-500/50 bg-gradient-to-r from-brand-500 via-accent-500 to-brand-400 hover:from-brand-600 hover:via-accent-600 hover:to-brand-500 text-white border-white/30 hover:border-white/60'
                             : 'bg-gradient-to-r from-gray-600 via-gray-700 to-gray-600 text-gray-400 border-gray-600 cursor-not-allowed blur-sm opacity-60'
                         }`}
                       >
@@ -420,7 +421,7 @@ function DemosPageContent() {
   const [loadingProgress, setLoadingProgress] = useState(0);
   const [showImmersiveDemo, setShowImmersiveDemo] = useState(false);
   const [showTechTree, setShowTechTree] = useState(false);
-  
+
   // Authentication modals
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [authModalMode, setAuthModalMode] = useState<'signup' | 'signin'>('signup');
@@ -504,10 +505,7 @@ function DemosPageContent() {
         <Header />
 
         {/* Authentication Banner */}
-        <AuthBanner 
-          onSignUpClick={handleSignUpClick}
-          onSignInClick={handleSignInClick}
-        />
+        <AuthBanner onSignUpClick={handleSignUpClick} onSignInClick={handleSignInClick} />
 
         {/* Animated background elements */}
         <div className='absolute inset-0 opacity-20 bg-gradient-to-r from-brand-500/10 via-transparent to-accent-500/10'></div>
@@ -683,8 +681,7 @@ function DemosPageContent() {
                 <br />
 
                 <p className='text-xl text-white/80 max-w-3xl mx-auto mb-6'>
-                  Master the art of trustless work with our demo suite on Stellar
-                  blockchain
+                  Master the art of trustless work with our demo suite on Stellar blockchain
                 </p>
 
                 {/* Tutorial Buttons */}
@@ -710,15 +707,20 @@ function DemosPageContent() {
                     onClick={() => isConnected && setShowTechTree(true)}
                     disabled={!isConnected}
                     className={`px-8 py-4 font-bold rounded-xl transition-all duration-300 flex items-center space-x-3 ${
-                      isConnected 
-                        ? 'bg-gradient-to-r from-brand-500/20 to-accent-500/20 hover:from-brand-800/50 hover:to-accent-800/50 text-white transform hover:scale-105 shadow-lg hover:shadow-xl border-2 border-white/20 hover:border-white/40' 
+                      isConnected
+                        ? 'bg-gradient-to-r from-brand-500/20 to-accent-500/20 hover:from-brand-800/50 hover:to-accent-800/50 text-white transform hover:scale-105 shadow-lg hover:shadow-xl border-2 border-white/20 hover:border-white/40'
                         : 'bg-gradient-to-r from-gray-600/20 to-gray-700/20 text-gray-400 border-gray-600/30 cursor-not-allowed blur-[0.5px] opacity-70'
                     }`}
                     title={!isConnected ? 'Connect wallet to explore the tech tree' : ''}
                   >
                     <span>Trustless Work Tech Tree</span>
                     <span className='text-xl'>
-                      <Image src='/images/icons/demos.png' alt='Trustless Work Tech Tree' width={50} height={20} />
+                      <Image
+                        src='/images/icons/demos.png'
+                        alt='Trustless Work Tech Tree'
+                        width={50}
+                        height={20}
+                      />
                     </span>
                     {!isConnected && (
                       <span className='absolute -top-1 -right-1 text-xs bg-gray-600 text-gray-300 px-1 rounded-full'>
@@ -729,17 +731,22 @@ function DemosPageContent() {
 
                   <a
                     href={isConnected ? '/mini-games' : '#'}
-                    onClick={(e) => !isConnected && e.preventDefault()}
+                    onClick={e => !isConnected && e.preventDefault()}
                     className={`px-8 py-4 font-bold rounded-xl transition-all duration-300 flex items-center space-x-3 relative ${
-                      isConnected 
-                        ? 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white transform hover:scale-105 shadow-lg hover:shadow-xl border-2 border-white/20 hover:border-white/40' 
+                      isConnected
+                        ? 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white transform hover:scale-105 shadow-lg hover:shadow-xl border-2 border-white/20 hover:border-white/40'
                         : 'bg-gradient-to-r from-gray-600/20 to-gray-700/20 text-gray-400 border-gray-600/30 cursor-not-allowed blur-[0.5px] opacity-70'
                     }`}
                     title={!isConnected ? 'Connect wallet to access the Web3 playground' : ''}
                   >
                     <span>Nexus Web3 Playground</span>
                     <span className='text-xl'>
-                      <Image src='/images/icons/console.png' alt='Nexus Web3 Playground' width={50} height={20} />
+                      <Image
+                        src='/images/icons/console.png'
+                        alt='Nexus Web3 Playground'
+                        width={50}
+                        height={20}
+                      />
                     </span>
                     {!isConnected && (
                       <span className='absolute -top-1 -right-1 text-xs bg-gray-600 text-gray-300 px-1 rounded-full'>
@@ -1259,32 +1266,31 @@ function DemosPageContent() {
       <TechTreeModal isOpen={showTechTree} onClose={() => setShowTechTree(false)} />
 
       {/* Authentication Modal */}
-      <AuthModal 
+      <AuthModal
         isOpen={showAuthModal}
         onClose={() => setShowAuthModal(false)}
         mode={authModalMode}
       />
 
       {/* User Profile Modal */}
-      <UserProfile 
-        isOpen={showUserProfile}
-        onClose={() => setShowUserProfile(false)}
-      />
+      <UserProfile isOpen={showUserProfile} onClose={() => setShowUserProfile(false)} />
     </EscrowProvider>
   );
 }
 
 export default function DemosPage() {
   return (
     <WalletProvider>
-      <AuthProvider>
-        <ToastProvider>
-          <TransactionProvider>
-            <DemosPageContent />
-            <ToastContainer />
-          </TransactionProvider>
-        </ToastProvider>
-      </AuthProvider>
+      <NetworkProvider>
+        <AuthProvider>
+          <ToastProvider>
+            <TransactionProvider>
+              <DemosPageContent />
+              <ToastContainer />
+            </TransactionProvider>
+          </ToastProvider>
+        </AuthProvider>
+      </NetworkProvider>
     </WalletProvider>
   );
 }