Fix wallet theme consistency and resolve fs module error

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

src/index.tsx

@@ -20,6 +20,9 @@ import './styles/theme.css';
 // Import logging utility
 import { devLog, logInfo, logError } from './utils/logger';
 
+// Import theme manager for proper initialization
+import { themeManager } from './themes/UnifiedThemeManager';
+
 // Secure Buffer initialization without global modification
 import { Buffer } from 'buffer';
 
@@ -72,6 +75,10 @@ devLog('Buffer polyfills and React initialized successfully');
 // Wrap the entire app initialization in error handling
 function initializeApp() {
   try {
+    // Initialize theme manager first to apply theme variables
+    themeManager.initialize();
+    devLog('Theme manager initialized successfully');
+
     const container = document.getElementById('root');
     if (!container) {
       throw new Error('Root container not found');

src/pages/Wallet/styles.tsx

@@ -5,10 +5,10 @@ export const StyledDialogContent = styled(DialogContent)<{ width?: string; heigh
   &&& {
     width: ${(props) => props.width || '50rem'};
     height: ${(props) => props.height || '40rem'};
-    background: #222429;
-    border: 0.1rem solid #3a475c;
-    box-shadow: 0px 0px 16px rgba(125, 125, 131, 0.1);
-    border-radius: 2rem;
+    background: var(--bg-secondary);
+    border: 0.1rem solid var(--border-primary);
+    box-shadow: var(--shadow-glass);
+    border-radius: var(--radius-xl);
     display: flex;
     justify-content: ${(props) => props.justify || 'center'};
     flex-direction: column;
@@ -20,10 +20,10 @@ export const StyledDialog = styled(Dialog)<{ width?: string; height?: string; ju
   &&& {
     width: ${(props) => props.width || '50rem'};
     height: ${(props) => props.height || '40rem'};
-    background: #222429;
-    border: 0.1rem solid #3a475c;
-    box-shadow: 0px 0px 16px rgba(125, 125, 131, 0.1);
-    border-radius: 2rem;
+    background: var(--bg-secondary);
+    border: 0.1rem solid var(--border-primary);
+    box-shadow: var(--shadow-glass);
+    border-radius: var(--radius-xl);
     display: flex;
     justify-content: ${(props) => props.justify || 'center'};
     flex-direction: column;
@@ -49,23 +49,27 @@ export const StyledTab = styled(Tab)`
     color: var(--interactive-primary);
     border-color: var(--interactive-primary);
     text-transform: capitalize;
-    font-size: 1.4rem;
-    font-family: Avenir Next Demi;
+    font-size: var(--font-size-sm);
+    font-family: var(--font-primary);
+    font-weight: var(--font-weight-semibold);
     white-space: nowrap;
   }
 `
 
 export const StyledStepLabel = styled(StepLabel)`
   & span {
-    font-size: 1.4rem;
+    font-size: var(--font-size-sm);
+    font-family: var(--font-primary);
+    color: var(--text-primary);
   }
 
   & svg {
     width: 2rem;
     height: 2rem;
 
     text {
-      font-size: 1.4rem;
+      font-size: var(--font-size-sm);
+      fill: var(--text-primary);
     }
   }
 `

src/polyfills/fs-browser.js

@@ -0,0 +1,83 @@
+/**
+ * Browser polyfill for Node.js fs module
+ * Provides minimal fs compatibility for browser environments
+ */
+
+// Minimal fs polyfill for browser compatibility
+const fs = {
+  // File system operations not available in browser
+  readFile: () => {
+    throw new Error('fs.readFile is not available in browser environment');
+  },
+  
+  writeFile: () => {
+    throw new Error('fs.writeFile is not available in browser environment');
+  },
+  
+  readFileSync: () => {
+    throw new Error('fs.readFileSync is not available in browser environment');
+  },
+  
+  writeFileSync: () => {
+    throw new Error('fs.writeFileSync is not available in browser environment');
+  },
+  
+  existsSync: () => {
+    return false; // Files don't exist in browser context
+  },
+  
+  exists: (path, callback) => {
+    if (typeof callback === 'function') {
+      callback(false);
+    }
+  },
+  
+  stat: () => {
+    throw new Error('fs.stat is not available in browser environment');
+  },
+  
+  statSync: () => {
+    throw new Error('fs.statSync is not available in browser environment');
+  },
+  
+  mkdir: () => {
+    throw new Error('fs.mkdir is not available in browser environment');
+  },
+  
+  mkdirSync: () => {
+    throw new Error('fs.mkdirSync is not available in browser environment');
+  },
+  
+  // Constants that some libraries might expect
+  constants: {
+    F_OK: 0,
+    R_OK: 4,
+    W_OK: 2,
+    X_OK: 1,
+  },
+  
+  // Promises API
+  promises: {
+    readFile: () => Promise.reject(new Error('fs.promises.readFile is not available in browser environment')),
+    writeFile: () => Promise.reject(new Error('fs.promises.writeFile is not available in browser environment')),
+    stat: () => Promise.reject(new Error('fs.promises.stat is not available in browser environment')),
+    mkdir: () => Promise.reject(new Error('fs.promises.mkdir is not available in browser environment')),
+    access: () => Promise.reject(new Error('fs.promises.access is not available in browser environment')),
+  }
+};
+
+export default fs;
+export const {
+  readFile,
+  writeFile,
+  readFileSync,
+  writeFileSync,
+  existsSync,
+  exists,
+  stat,
+  statSync,
+  mkdir,
+  mkdirSync,
+  constants,
+  promises
+} = fs;

vite.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
     }),
     // Add Node.js polyfills for browser compatibility
     nodePolyfills({
-      include: ['crypto', 'stream', 'buffer', 'process', 'util', 'assert', 'url', 'os', 'path', 'vm'],
+      include: ['crypto', 'stream', 'buffer', 'process', 'util', 'assert', 'url', 'os', 'path', 'vm', 'fs'],
       globals: {
         Buffer: true,
         global: true,
@@ -39,7 +39,6 @@ export default defineConfig({
     outDir: 'build',
     sourcemap: true,
     rollupOptions: {
-      external: ['fs'],
       output: {
         manualChunks: {
           // Vendor chunk for common dependencies
@@ -95,6 +94,7 @@ export default defineConfig({
       os: path.resolve(__dirname, './src/polyfills/os-browser.js'),
       path: 'path-browserify',
       vm: 'vm-browserify',
+      fs: path.resolve(__dirname, './src/polyfills/fs-browser.js'),
     },
   },