Skip to content

Commit 84c9c86

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Fix Solana connection issues and implement comprehensive theme system with consistent sizing
Co-authored-by: 0xrinegade <[email protected]>
1 parent f020456 commit 84c9c86

File tree

9 files changed

+964
-185
lines changed

9 files changed

+964
-185
lines changed

‎src/App.js‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -145,34 +145,34 @@ const AppContent = () => {
145145
const renderWalletStatus = () => {
146146
if (wallet.error) {
147147
return (
148-
<div className="ascii-wallet-status ascii-wallet-error" title={wallet.error}>
149-
<span className="ascii-status-dot ascii-status-error"></span>
148+
<div className="app-wallet-status app-wallet-error" title={wallet.error}>
149+
<span className="app-status-dot app-status-error"></span>
150150
<span>ERROR</span>
151151
</div>
152152
);
153153
}
154154

155155
if (wallet.connecting || wallet.connectionState === 'connecting') {
156156
return (
157-
<div className="ascii-wallet-status ascii-wallet-connecting">
158-
<span className="ascii-status-dot ascii-status-connecting"></span>
157+
<div className="app-wallet-status app-wallet-connecting">
158+
<span className="app-status-dot app-status-connecting"></span>
159159
<span>CONNECTING...</span>
160160
</div>
161161
);
162162
}
163163

164164
if (wallet.connected) {
165165
return (
166-
<div className="ascii-wallet-status ascii-wallet-connected">
167-
<span className="ascii-status-dot ascii-status-connected"></span>
166+
<div className="app-wallet-status app-wallet-connected">
167+
<span className="app-status-dot app-status-connected"></span>
168168
<span>CONNECTED</span>
169169
</div>
170170
);
171171
}
172172

173173
return (
174-
<div className="ascii-wallet-status ascii-wallet-disconnected">
175-
<span className="ascii-status-dot ascii-status-disconnected"></span>
174+
<div className="app-wallet-status app-wallet-disconnected">
175+
<span className="app-status-dot app-status-disconnected"></span>
176176
<span>DISCONNECTED</span>
177177
</div>
178178
);
@@ -181,49 +181,49 @@ const AppContent = () => {
181181
return (
182182
<AppContext.Provider value={contextValue}>
183183
<div className="app-container">
184-
<header className="ascii-header">
185-
<div className="ascii-header-content">
186-
<div className="ascii-logo-section">
184+
<header className="app-header">
185+
<div className="app-header-content">
186+
<div className="app-logo-section">
187187
<Image
188188
src="/images/opensvm-logo.svg"
189189
alt="OpenSVM P2P Exchange"
190-
className="ascii-logo-image"
190+
className="app-logo-image"
191191
width={24}
192192
height={24}
193193
priority
194194
/>
195-
<h1 className="ascii-logo-text">OPENSVM P2P</h1>
195+
<h1 className="app-logo-text">OPENSVM P2P</h1>
196196
</div>
197197

198198
{/* Consolidated Navigation */}
199-
<nav className="ascii-nav-desktop">
200-
<div className="ascii-nav-tabs">
199+
<nav className="app-nav-desktop">
200+
<div className="app-nav-tabs">
201201
<button
202-
className={`ascii-nav-tab ${activeTab === 'buy' ? 'active' : ''}`}
202+
className={`app-nav-tab ${activeTab === 'buy' ? 'active' : ''}`}
203203
onClick={() => handleNavClick('buy')}
204204
>
205205
BUY
206206
</button>
207207
<button
208-
className={`ascii-nav-tab ${activeTab === 'sell' ? 'active' : ''}`}
208+
className={`app-nav-tab ${activeTab === 'sell' ? 'active' : ''}`}
209209
onClick={() => handleNavClick('sell')}
210210
>
211211
SELL
212212
</button>
213213
<button
214-
className={`ascii-nav-tab ${activeTab === 'myoffers' ? 'active' : ''}`}
214+
className={`app-nav-tab ${activeTab === 'myoffers' ? 'active' : ''}`}
215215
onClick={() => handleNavClick('myoffers')}
216216
>
217217
MY OFFERS
218218
</button>
219219
<button
220-
className={`ascii-nav-tab ${activeTab === 'disputes' ? 'active' : ''}`}
220+
className={`app-nav-tab ${activeTab === 'disputes' ? 'active' : ''}`}
221221
onClick={() => handleNavClick('disputes')}
222222
>
223223
DISPUTES
224224
</button>
225225
<button
226-
className={`ascii-nav-tab ${activeTab === 'profile' ? 'active' : ''}`}
226+
className={`app-nav-tab ${activeTab === 'profile' ? 'active' : ''}`}
227227
onClick={() => handleNavClick('profile')}
228228
>
229229
PROFILE
@@ -232,7 +232,7 @@ const AppContent = () => {
232232
</nav>
233233

234234
{/* Header Controls */}
235-
<div className="ascii-header-controls">
235+
<div className="app-header-controls">
236236
{/* Theme selector */}
237237
<ThemeSelector />
238238

@@ -251,7 +251,7 @@ const AppContent = () => {
251251
href={network.explorerUrl}
252252
target="_blank"
253253
rel="noopener noreferrer"
254-
className="ascii-header-control ascii-explorer-link"
254+
className="app-header-control app-explorer-link"
255255
>
256256
{network.name.toUpperCase()} EXPLORER
257257
</a>
@@ -263,17 +263,17 @@ const AppContent = () => {
263263
/>
264264

265265
<ErrorBoundary fallback={
266-
<div className="ascii-error-container">
266+
<div className="app-error-container">
267267
<p>WALLET ERROR</p>
268-
<button onClick={() => wallet.reconnect()} className="ascii-retry-button">RETRY</button>
268+
<button onClick={() => wallet.reconnect()} className="app-retry-button">RETRY</button>
269269
</div>
270270
}>
271-
<div className="ascii-wallet-wrapper">
271+
<div className="app-wallet-wrapper">
272272
{renderWalletStatus()}
273273
<PhantomWalletButton />
274274
{wallet.error && (
275275
<button
276-
className="ascii-wallet-retry"
276+
className="app-wallet-retry"
277277
onClick={() => wallet.reconnect()}
278278
title="Retry connection"
279279
>
@@ -286,35 +286,35 @@ const AppContent = () => {
286286
</div>
287287
</header>
288288

289-
{/* Mobile Navigation - ASCII Styled */}
290-
<nav className="ascii-nav-mobile">
291-
<div className="ascii-nav-grid">
289+
{/* Mobile Navigation */}
290+
<nav className="app-nav-mobile">
291+
<div className="app-nav-grid">
292292
<button
293-
className={`ascii-nav-button ${activeTab === 'buy' ? 'active' : ''}`}
293+
className={`app-nav-button ${activeTab === 'buy' ? 'active' : ''}`}
294294
onClick={() => handleNavClick('buy')}
295295
>
296296
BUY
297297
</button>
298298
<button
299-
className={`ascii-nav-button ${activeTab === 'sell' ? 'active' : ''}`}
299+
className={`app-nav-button ${activeTab === 'sell' ? 'active' : ''}`}
300300
onClick={() => handleNavClick('sell')}
301301
>
302302
SELL
303303
</button>
304304
<button
305-
className={`ascii-nav-button ${activeTab === 'myoffers' ? 'active' : ''}`}
305+
className={`app-nav-button ${activeTab === 'myoffers' ? 'active' : ''}`}
306306
onClick={() => handleNavClick('myoffers')}
307307
>
308308
MY OFFERS
309309
</button>
310310
<button
311-
className={`ascii-nav-button ${activeTab === 'disputes' ? 'active' : ''}`}
311+
className={`app-nav-button ${activeTab === 'disputes' ? 'active' : ''}`}
312312
onClick={() => handleNavClick('disputes')}
313313
>
314314
DISPUTES
315315
</button>
316316
<button
317-
className={`ascii-nav-button ${activeTab === 'profile' ? 'active' : ''}`}
317+
className={`app-nav-button ${activeTab === 'profile' ? 'active' : ''}`}
318318
onClick={() => handleNavClick('profile')}
319319
>
320320
PROFILE

0 commit comments

Comments
 (0)