Skip to content

Commit e02f691

Browse files
nomadbitcoinnomadbitcoin
committed
feat: enhance login UX with provider readiness detection and mobile
 optimizations - Add Web3Auth provider initialization status tracking with loading states - Implement login button that only appears when provider is ready - Set Passet Hub as default network in wagmi configuration - Fix mobile text overflow and zoom issues with enhanced viewport settings - Add comprehensive mobile-responsive CSS optimizations - Remove black console background and improve UI spacing - Add error handling for provider initialization failures - Prevent error messages during active connection attempts
1 parent 090214a commit e02f691

File tree

8 files changed

+255
-23
lines changed

8 files changed

+255
-23
lines changed

‎quick-starts/react-quick-start/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</script>
1212
<meta charset="UTF-8" />
1313
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
14-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
1515
<title>Vite + React + TS</title>
1616
</head>
1717
<body>

‎quick-starts/react-quick-start/src/App.css‎

Lines changed: 98 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ body {
5050
color: var(--text-color);
5151
background-color: var(--bg-color);
5252
line-height: 1.6;
53+
overflow-x: hidden;
54+
word-wrap: break-word;
5355
}
5456

5557
/* Layout */
@@ -59,6 +61,7 @@ body {
5961
margin: 0 auto;
6062
max-width: 100vw;
6163
box-sizing: border-box;
64+
overflow-x: hidden;
6265
}
6366

6467
.main {
@@ -78,6 +81,8 @@ body {
7881
font-weight: 600;
7982
padding: 0 8px;
8083
word-wrap: break-word;
84+
overflow-wrap: break-word;
85+
max-width: 100%;
8186
}
8287

8388
.title a {
@@ -204,12 +209,21 @@ input::placeholder {
204209
word-wrap: break-word;
205210
font-family: monospace;
206211
font-size: 14px; /* Use whole px */
207-
padding: 16px;
208-
margin: 24px 0;
209-
background-color: #0a0a0a; /* Near-black background */
212+
padding: 0;
213+
margin: 0;
214+
background-color: transparent; /* Remove black background */
210215
color: #e0e0e0; /* Light grey text */
211216
border-radius: 0; /* Sharp corners */
212217
border: none; /* No border */
218+
min-height: 0; /* Don't take up space when empty */
219+
}
220+
221+
#console:empty {
222+
display: none; /* Hide when empty */
223+
}
224+
225+
#console p:empty {
226+
display: none; /* Hide empty paragraphs */
213227
}
214228

215229
/* Footer */
@@ -244,6 +258,63 @@ input::placeholder {
244258
color: var(--primary-color);
245259
}
246260

261+
.warning-message {
262+
color: #ff9800;
263+
background-color: rgba(255, 152, 0, 0.1);
264+
border: 1px solid rgba(255, 152, 0, 0.3);
265+
border-radius: var(--radius);
266+
padding: 12px 16px;
267+
margin: 12px 0;
268+
text-align: center;
269+
font-size: 14px;
270+
line-height: 1.4;
271+
word-wrap: break-word;
272+
overflow-wrap: break-word;
273+
}
274+
275+
/* Mobile optimizations for warning message and zoom prevention */
276+
@media (max-width: 480px) {
277+
.warning-message {
278+
padding: 16px 12px;
279+
font-size: 16px; /* Prevent zoom on mobile */
280+
line-height: 1.5;
281+
margin: 16px 0;
282+
word-break: break-word;
283+
overflow-wrap: break-word;
284+
}
285+
286+
/* Prevent mobile zoom on all small text elements and ensure text wrapping */
287+
p, div, span, label, h1, h2, h3, h4, h5, h6 {
288+
font-size: 16px !important;
289+
word-break: break-word !important;
290+
overflow-wrap: break-word !important;
291+
max-width: 100% !important;
292+
}
293+
294+
/* Override specific small text elements */
295+
.showcase-message p {
296+
font-size: 16px !important;
297+
}
298+
299+
/* Console and other monospace text */
300+
#console {
301+
font-size: 16px !important;
302+
word-break: break-all !important;
303+
overflow-wrap: break-word !important;
304+
}
305+
306+
/* Footer links */
307+
.footer a {
308+
font-size: 16px !important;
309+
}
310+
311+
/* Ensure all containers respect viewport */
312+
* {
313+
max-width: 100% !important;
314+
box-sizing: border-box !important;
315+
}
316+
}
317+
247318
/* Mobile-first responsive design */
248319
/* Mobile styles (default) */
249320
body {
@@ -291,37 +362,56 @@ button, .card {
291362
@media (max-width: 480px) {
292363
.container {
293364
padding: 0 12px;
365+
overflow-x: hidden;
294366
}
295367

296368
.title {
297-
font-size: 22px;
369+
font-size: 20px;
298370
line-height: 1.3;
371+
word-break: break-word;
372+
hyphens: auto;
299373
}
300374

301375
.educational-message {
302-
padding: 16px;
376+
padding: 16px 12px;
303377
margin: 12px 0;
378+
word-break: break-word;
304379
}
305380

306381
.educational-message h2 {
307382
font-size: 18px;
308383
margin-bottom: 8px;
384+
word-break: break-word;
385+
hyphens: auto;
386+
}
387+
388+
.educational-message p {
389+
word-break: break-word;
390+
hyphens: auto;
309391
}
310392

311393
.showcase-message {
312394
padding: 12px;
313395
margin: 8px 0;
396+
word-break: break-word;
314397
}
315398

316399
.showcase-message h3 {
317400
font-size: 15px;
318401
margin-bottom: 6px;
402+
word-break: break-word;
403+
}
404+
405+
.showcase-message p {
406+
word-break: break-word;
407+
hyphens: auto;
319408
}
320409

321410
button, .card {
322411
padding: 14px 16px; /* Larger touch targets */
323412
font-size: 16px;
324413
min-height: 48px;
414+
word-break: break-word;
325415
}
326416
}
327417

@@ -392,6 +482,9 @@ button, .card {
392482
border: 1px solid var(--border-color);
393483
border-radius: var(--radius);
394484
box-shadow: var(--shadow-sm);
485+
max-width: 100%;
486+
word-wrap: break-word;
487+
overflow-wrap: break-word;
395488
}
396489

397490
.educational-message h2 {

‎quick-starts/react-quick-start/src/App.tsx‎

Lines changed: 108 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
useWeb3AuthConnect,
44
useWeb3AuthDisconnect,
55
useWeb3AuthUser,
6+
useWeb3Auth,
67
} from "@web3auth/modal/react";
78
import { useAccount, useChainId } from "wagmi";
89
import { SendTransaction } from "./components/sendTransaction";
@@ -12,6 +13,7 @@ import { ExportPrivateKey } from "./components/exportPrivateKey";
1213
import { ContractData } from "./components/ContractData";
1314
import { myTokenModuleMyTokenAddress } from "./generated";
1415
import { passetHub, kusamaAssetHub, westend } from "./wagmi-config";
16+
import { useState, useEffect } from "react";
1517

1618
function App() {
1719
const {
@@ -27,12 +29,79 @@ function App() {
2729
error: disconnectError,
2830
} = useWeb3AuthDisconnect();
2931
const { userInfo } = useWeb3AuthUser();
32+
const { web3Auth } = useWeb3Auth();
3033
const { address } = useAccount();
3134
const chainId = useChainId();
3235

36+
// Provider readiness states
37+
const [providerReady, setProviderReady] = useState(false);
38+
const [providerLoading, setProviderLoading] = useState(true);
39+
const [providerError, setProviderError] = useState(false);
40+
41+
// Track Web3Auth provider initialization
42+
useEffect(() => {
43+
const checkProviderStatus = () => {
44+
if (web3Auth) {
45+
try {
46+
// Check if Web3Auth is properly initialized and ready for login
47+
// Web3Auth is ready if status is 'ready'
48+
const isInitialized = web3Auth.status === "ready";
49+
const isNotConnecting = !connectLoading;
50+
const canLogin = isInitialized && isNotConnecting;
51+
52+
setProviderReady(canLogin);
53+
setProviderLoading(web3Auth.status !== "ready");
54+
55+
// console.log('Web3Auth status:', web3Auth.status, 'connectLoading:', connectLoading, 'canLogin:', canLogin);
56+
57+
// If ready, clear the interval
58+
if (canLogin) {
59+
return true; // Signal to stop interval
60+
}
61+
} catch (error) {
62+
console.error("Error checking Web3Auth status:", error);
63+
setProviderReady(false);
64+
setProviderLoading(true);
65+
}
66+
} else {
67+
// Still loading if web3Auth instance not available
68+
setProviderReady(false);
69+
setProviderLoading(true);
70+
}
71+
return false; // Continue interval
72+
};
73+
74+
// Check immediately
75+
if (checkProviderStatus()) {
76+
return; // Already ready, no need for interval
77+
}
78+
79+
// Set up interval to continuously check until ready
80+
const interval = setInterval(() => {
81+
if (checkProviderStatus()) {
82+
clearInterval(interval);
83+
}
84+
}, 200); // Check more frequently
85+
86+
// Cleanup interval after 30 seconds max
87+
const timeout = setTimeout(() => {
88+
clearInterval(interval);
89+
console.warn("Web3Auth initialization timeout");
90+
setProviderLoading(false);
91+
setProviderError(true);
92+
setProviderReady(false);
93+
}, 30000);
94+
95+
return () => {
96+
clearInterval(interval);
97+
clearTimeout(timeout);
98+
};
99+
}, [web3Auth, connectLoading]);
100+
101+
33102
const contractAddress =
34103
myTokenModuleMyTokenAddress[
35-
420420422 as keyof typeof myTokenModuleMyTokenAddress
104+
passetHub.id as keyof typeof myTokenModuleMyTokenAddress
36105
];
37106

38107
// Faucet URLs for different networks
@@ -173,9 +242,44 @@ function App() {
173242
started.
174243
</p>
175244
</div>
176-
<button onClick={() => connect()} className="card">
177-
Login
178-
</button>
245+
246+
{/* Provider initialization status */}
247+
{providerLoading && (
248+
<div className="loading">Initializing Web3Auth provider...</div>
249+
)}
250+
251+
{/* Login button - only show when provider is ready */}
252+
{!providerLoading && providerReady && (
253+
<button
254+
onClick={() => {
255+
// Since the button only appears when ready, we should always be able to connect
256+
if (web3Auth && web3Auth.status === "ready" && !connectLoading && !isConnected) {
257+
connect();
258+
}
259+
}}
260+
className="card"
261+
disabled={!providerReady || connectLoading || isConnected}
262+
>
263+
Login
264+
</button>
265+
)}
266+
267+
{/* Provider failed to initialize */}
268+
{!providerLoading && !providerReady && providerError && !connectLoading && (
269+
<div className="error">
270+
Web3Auth provider failed to initialize after 30 seconds. Please check
271+
your internet connection and reload the page.
272+
</div>
273+
)}
274+
275+
{/* Provider ready but can't connect (network issues) */}
276+
{!providerLoading && !providerReady && !providerError && !connectLoading && (
277+
<div className="error">
278+
Web3Auth provider is not ready for login. Please wait or reload the
279+
page.
280+
</div>
281+
)}
282+
179283
{connectLoading && <div className="loading">Connecting...</div>}
180284
{connectError && <div className="error">{connectError.message}</div>}
181285
</div>

0 commit comments

Comments
 (0)