feat: enhance UI/UX with improved mobile responsiveness and visual consistency (#10)

- Add educational messaging for logged-in and not-logged states with key pair generation context
- Implement mobile-first responsive design with touch-friendly buttons (48px min height)
- Add faucet integration with updated polkadot.io URLs for test token acquisition
- Replace transaction hash display with clean explorer buttons showing 5-char previews
- Improve balance visibility on small screens with structured grid layout and clear labeling
- Apply consistent color scheme: blue for mint actions, orange for burn actions
- Add 5-second delay before showing transaction hash buttons for better UX
- Implement comprehensive test suite with 9 test cases covering all functionality
- Update balance component to use proper Asset Hub decimals from wagmi config
- Comment out ETH transactions (code preserved) and add explorer link integration

Author: nomadbitcoin

quick-starts/react-quick-start/package-lock.json

@@ -8,7 +8,10 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint"
+    "lint": "eslint",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
   },
   "//IMP START": "IMP START - Web3Auth Installation",
   "dependencies": {
@@ -20,12 +23,17 @@
   },
   "//IMP END": "IMP END - Web3Auth Installation",
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "buffer": "^6.0.3",
+    "jsdom": "^27.0.0",
     "process": "^0.11.10",
     "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vitest": "^3.2.4"
   }
 }

quick-starts/react-quick-start/package.json

@@ -55,8 +55,10 @@ body {
 /* Layout */
 .container {
 	width: 100%;
-	padding: 0 16px;
+	padding: 16px;
 	margin: 0 auto;
+	max-width: 100vw;
+	box-sizing: border-box;
 }
 
 .main {
@@ -69,11 +71,13 @@ body {
 
 /* Typography */
 .title {
-	font-size: 28px;
+	font-size: 24px;
 	text-align: center;
-	margin: 24px 0;
-	line-height: 1.2;
+	margin: 20px 0;
+	line-height: 1.3;
 	font-weight: 600;
+	padding: 0 8px;
+	word-wrap: break-word;
 }
 
 .title a {
@@ -117,6 +121,17 @@ button:hover, .card:hover {
 	transform: translateY(-1px);
 }
 
+/* Faucet button styling */
+.faucet-button {
+	background-color: var(--primary-color);
+	color: white;
+	font-weight: 600;
+}
+
+.faucet-button:hover {
+	background-color: var(--primary-hover);
+}
+
 .card {
 	width: 100%;
 	margin: 8px 0;
@@ -229,21 +244,115 @@ input::placeholder {
 	color: var(--primary-color);
 }
 
-/* Responsive */
+/* Mobile-first responsive design */
+/* Mobile styles (default) */
+body {
+	font-size: 16px; /* Prevent zoom on mobile */
+}
+
+button, .card {
+	min-height: 48px; /* Touch-friendly button size */
+	font-size: 16px; /* Prevent zoom on mobile */
+}
+
+.flex-container {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	width: 100%;
+	align-items: stretch;
+}
+
+.educational-message h2 {
+	font-size: 22px;
+	text-align: center;
+	line-height: 1.4;
+}
+
+.educational-message p {
+	font-size: 16px;
+	text-align: center;
+	line-height: 1.5;
+}
+
+.showcase-message h3 {
+	font-size: 18px;
+	text-align: center;
+	line-height: 1.3;
+}
+
+.showcase-message p {
+	font-size: 15px;
+	text-align: center;
+	line-height: 1.4;
+}
+
+/* Small mobile (max-width: 480px) */
+@media (max-width: 480px) {
+	.container {
+		padding: 0 12px;
+	}
+
+	.title {
+		font-size: 22px;
+		line-height: 1.3;
+	}
+
+	.educational-message {
+		padding: 16px;
+		margin: 12px 0;
+	}
+
+	.educational-message h2 {
+		font-size: 18px;
+		margin-bottom: 8px;
+	}
+
+	.showcase-message {
+		padding: 12px;
+		margin: 8px 0;
+	}
+
+	.showcase-message h3 {
+		font-size: 15px;
+		margin-bottom: 6px;
+	}
+
+	button, .card {
+		padding: 14px 16px; /* Larger touch targets */
+		font-size: 16px;
+		min-height: 48px;
+	}
+}
+
+/* Tablet and up styles */
 @media (min-width: 640px) {
 	.container {
 		max-width: 640px;
 	}
-	
+
 	.title {
 		font-size: 32px;
 	}
-	
+
+	.flex-container {
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	.educational-message h2 {
+		font-size: 24px;
+	}
+
+	.showcase-message h3 {
+		font-size: 18px;
+	}
+
 	form {
 		flex-direction: row;
 		align-items: flex-start;
 	}
-	
+
 	form button {
 		margin-top: 0;
 	}
@@ -253,10 +362,19 @@ input::placeholder {
 	.container {
 		max-width: 768px;
 	}
-	
+
 	.title {
 		font-size: 36px;
 	}
+
+	.flex-container {
+		justify-content: center;
+	}
+
+	.flex-container > div {
+		flex: 0 1 auto;
+		max-width: 200px;
+	}
 }
 
 @media (min-width: 1024px) {
@@ -265,6 +383,55 @@ input::placeholder {
 	}
 }
 
+/* Educational message styles */
+.educational-message {
+	text-align: center;
+	padding: 24px;
+	margin: 16px 0;
+	background-color: var(--bg-light);
+	border: 1px solid var(--border-color);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-sm);
+}
+
+.educational-message h2 {
+	color: var(--primary-color);
+	font-size: 24px;
+	margin-bottom: 12px;
+	line-height: 1.3;
+}
+
+.educational-message p {
+	color: var(--text-muted);
+	font-size: 16px;
+	line-height: 1.5;
+	max-width: 600px;
+	margin: 0 auto;
+}
+
+.showcase-message {
+	background-color: var(--bg-light);
+	border: 1px solid var(--border-color);
+	border-radius: var(--radius);
+	padding: 16px;
+	margin: 12px 0;
+	box-shadow: var(--shadow-sm);
+}
+
+.showcase-message h3 {
+	color: var(--primary-color);
+	font-size: 18px;
+	margin: 0 0 8px 0;
+	font-weight: 500;
+}
+
+.showcase-message p {
+	color: var(--text-muted);
+	font-size: 14px;
+	margin: 0;
+	line-height: 1.4;
+}
+
 /* Contract section styles */
 .contract-section {
 	margin-top: 24px;
@@ -384,4 +551,84 @@ input::placeholder {
 
 .focus\:ring-indigo-600:focus {
 	box-shadow: 0 0 0 2px var(--primary-color);
+}
+
+/* Balance display improvements */
+.balance-grid {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	gap: 16px 20px;
+	align-items: center;
+}
+
+.balance-address {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+
+.balance-label {
+	font-size: 12px;
+	color: var(--text-muted);
+	font-weight: 500;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.balance-value {
+	font-family: monospace;
+	font-size: 13px;
+	color: var(--text-color);
+	word-break: break-all;
+	padding: 6px 10px;
+	background-color: var(--bg-color);
+	border: 1px solid var(--border-color);
+	border-radius: 4px;
+}
+
+.balance-amount {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.balance-amount-value {
+	font-size: 18px;
+	font-weight: 600;
+	color: var(--primary-color);
+	background-color: var(--bg-color);
+	padding: 8px 12px;
+	border: 1px solid var(--border-color);
+	border-radius: 6px;
+	min-width: 100px;
+	text-align: center;
+}
+
+/* Mobile responsive balance display */
+@media (max-width: 480px) {
+	.balance-grid {
+		grid-template-columns: 1fr;
+		gap: 12px;
+	}
+
+	.balance-address {
+		order: 1;
+	}
+
+	.balance-amount {
+		order: 2;
+		justify-content: center;
+		margin-bottom: 16px;
+	}
+
+	.balance-amount-value {
+		font-size: 20px;
+		padding: 12px 16px;
+		min-width: 120px;
+	}
+
+	.balance-value {
+		font-size: 12px;
+		padding: 8px 12px;
+	}
 }