From 0dcbddea702e815b7388786ab0f0718c5fe85ad4 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 17:41:18 +0100 Subject: [PATCH 01/13] modify files for upgrade --- frontend/src/App.css | 749 ----------------------------------------- frontend/src/App.tsx | 164 --------- frontend/src/index.css | 150 --------- frontend/src/main.tsx | 19 -- 4 files changed, 1082 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 3fb9196..e69de29 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,749 +0,0 @@ -/* App Container */ -.app { - min-height: 100vh; - display: flex; - flex-direction: column; -} - -/* Header */ -.header { - background: rgba(30, 30, 46, 0.6); - backdrop-filter: blur(10px); - border-bottom: 1px solid var(--border); - padding: 1rem 2rem; - position: sticky; - top: 0; - z-index: 100; -} - -.header-content { - max-width: 1200px; - margin: 0 auto; - display: flex; - justify-content: space-between; - align-items: center; - gap: 2rem; -} - -.logo h1 { - font-size: 1.5rem; - margin: 0; - background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.logo .tagline { - font-size: 0.875rem; - color: var(--text-secondary); - margin: 0; -} - -.wallet-section { - display: flex; - align-items: center; - gap: 1rem; -} - -.address-badge { - background: var(--bg-card); - padding: 0.5rem 1rem; - border-radius: 8px; - font-family: 'Courier New', monospace; - font-size: 0.875rem; - border: 1px solid var(--border); -} - -/* Main Content */ -.main-content { - flex: 1; - max-width: 1200px; - width: 100%; - margin: 0 auto; - padding: 2rem; -} - -/* Connect Prompt */ -.connect-prompt { - display: flex; - justify-content: center; - align-items: center; - min-height: calc(100vh - 200px); -} - -.connect-card { - background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(0, 82, 255, 0.1) 100%); - backdrop-filter: blur(10px); - border: 1px solid var(--border); - border-radius: 24px; - padding: 3rem; - max-width: 800px; - text-align: center; -} - -.connect-card h2 { - font-size: 2.5rem; - margin-bottom: 1rem; -} - -.connect-card > p { - color: var(--text-secondary); - font-size: 1.125rem; - margin-bottom: 3rem; -} - -.features { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 2rem; - margin-bottom: 3rem; -} - -.feature { - text-align: center; -} - -.feature .icon { - font-size: 3rem; - display: block; - margin-bottom: 1rem; -} - -.feature h3 { - font-size: 1.125rem; - margin-bottom: 0.5rem; -} - -.feature p { - color: var(--text-secondary); - font-size: 0.875rem; -} - -.connect-action p { - margin-bottom: 1rem; - color: var(--text-secondary); -} - -/* Dashboard */ -.dashboard { - max-width: 900px; - margin: 0 auto; -} - -.dashboard-header { - text-align: center; - margin-bottom: 2rem; -} - -.dashboard-header h2 { - font-size: 2rem; - margin-bottom: 0.5rem; -} - -.dashboard-header p { - color: var(--text-secondary); -} - -/* Balance Card */ -.balance-card { - background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(0, 82, 255, 0.2) 100%); - backdrop-filter: blur(10px); - border: 1px solid var(--border); - border-radius: 20px; - padding: 2rem; - margin-bottom: 2rem; -} - -.balance-info { - text-align: center; - margin-bottom: 2rem; -} - -.balance-info h3 { - font-size: 1rem; - color: var(--text-secondary); - margin-bottom: 0.5rem; -} - -.balance-amount { - font-size: 3rem; - font-weight: 700; - background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.timelock-info { - text-align: center; -} - -.locked, -.unlocked, -.no-lock { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; -} - -.status-icon { - font-size: 2rem; -} - -.countdown { - display: flex; - gap: 1rem; - margin-top: 1rem; -} - -.time-unit { - background: var(--bg-card); - padding: 1rem; - border-radius: 12px; - min-width: 80px; - border: 1px solid var(--border); -} - -.time-unit .value { - display: block; - font-size: 2rem; - font-weight: 700; - color: var(--primary); -} - -.time-unit .label { - display: block; - font-size: 0.75rem; - color: var(--text-secondary); - text-transform: uppercase; - margin-top: 0.25rem; -} - -/* Action Panel */ -.action-panel { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 20px; - overflow: hidden; -} - -.tabs { - display: flex; - border-bottom: 1px solid var(--border); -} - -.tab { - flex: 1; - padding: 1rem; - background: transparent; - border: none; - color: var(--text-secondary); - font-weight: 600; - transition: all 0.2s; -} - -.tab.active { - color: var(--primary); - background: rgba(124, 58, 237, 0.1); - border-bottom: 2px solid var(--primary); -} - -.tab:hover { - background: rgba(124, 58, 237, 0.05); -} - -.tab-content { - padding: 2rem; -} - -/* Forms */ -.deposit-form, -.withdraw-section { - max-width: 500px; - margin: 0 auto; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: var(--text-secondary); -} - -.form-group input, -.form-group select { - width: 100%; - padding: 0.875rem 1rem; - background: var(--bg-secondary); - border: 1px solid var(--border); - border-radius: 12px; - color: var(--text-primary); - font-size: 1rem; - transition: all 0.2s; -} - -.form-group input:focus, -.form-group select:focus { - outline: none; - border-color: var(--primary); - box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); -} - -.form-group input:disabled, -.form-group select:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.info-box, -.warning-box, -.success-box { - padding: 1rem; - border-radius: 12px; - margin-bottom: 1.5rem; - display: flex; - align-items: center; - gap: 0.75rem; -} - -.info-box { - background: rgba(0, 82, 255, 0.1); - border: 1px solid rgba(0, 82, 255, 0.3); - color: var(--text-secondary); -} - -.warning-box { - background: rgba(245, 158, 11, 0.1); - border: 1px solid rgba(245, 158, 11, 0.3); -} - -.success-box { - background: rgba(16, 185, 129, 0.1); - border: 1px solid rgba(16, 185, 129, 0.3); -} - -.warning-box .icon, -.success-box .icon { - font-size: 1.5rem; -} - -/* Buttons */ -.btn { - width: 100%; - padding: 1rem 2rem; - border: none; - border-radius: 12px; - font-size: 1rem; - font-weight: 600; - transition: all 0.2s; - cursor: pointer; -} - -.btn-primary { - background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); - color: white; -} - -.btn-primary:hover:not(:disabled) { - transform: translateY(-2px); - box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3); -} - -.btn-primary:active:not(:disabled) { - transform: translateY(0); -} - -.btn-primary:disabled { - opacity: 0.6; - cursor: not-allowed; -} - -.success-message { - margin-top: 1rem; - padding: 1rem; - background: rgba(16, 185, 129, 0.1); - border: 1px solid rgba(16, 185, 129, 0.3); - border-radius: 12px; - color: var(--success); - text-align: center; -} - -/* Navigation */ -.app-nav { - max-width: 1200px; - margin: 0 auto; - padding: 1rem 2rem; - display: flex; - gap: 1rem; - justify-content: center; -} - -.nav-btn { - padding: 0.75rem 1.5rem; - background: var(--bg-card); - border: 1px solid var(--border); - color: var(--text-primary); - border-radius: 12px; - cursor: pointer; - font-weight: 600; - transition: all 0.2s; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.nav-btn:hover { - border-color: var(--primary); - background: rgba(124, 58, 237, 0.1); -} - -.nav-btn.active { - background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); - color: white; - border-color: transparent; -} - -/* Footer */ -.footer { - background: rgba(30, 30, 46, 0.6); - backdrop-filter: blur(10px); - border-top: 1px solid var(--border); - padding: 1.5rem 2rem; - text-align: center; - color: var(--text-secondary); -} - -/* Responsive Design */ - -/* Small mobile devices (up to 360px) */ -@media (max-width: 360px) { - .header { - padding: 0.75rem 1rem; - } - - .header-content { - flex-direction: column; - gap: 0.75rem; - text-align: center; - } - - .logo h1 { - font-size: 1.25rem; - } - - .logo .tagline { - font-size: 0.75rem; - } - - .wallet-section { - gap: 0.5rem; - } - - .address-badge { - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - } - - .main-content { - padding: 0.75rem; - } - - .connect-card { - padding: 1.5rem; - border-radius: 16px; - } - - .connect-card h2 { - font-size: 1.5rem; - } - - .connect-card > p { - font-size: 1rem; - margin-bottom: 2rem; - } - - .features { - grid-template-columns: 1fr; - gap: 1rem; - margin-bottom: 2rem; - } - - .feature .icon { - font-size: 2rem; - } - - .feature h3 { - font-size: 1rem; - } - - .feature p { - font-size: 0.8125rem; - } - - .dashboard-header h2 { - font-size: 1.5rem; - } - - .balance-card { - padding: 1.5rem; - border-radius: 16px; - } - - .balance-amount { - font-size: 1.875rem; - } - - .countdown { - flex-wrap: wrap; - gap: 0.5rem; - } - - .time-unit { - min-width: 60px; - padding: 0.5rem; - } - - .time-unit .value { - font-size: 1.25rem; - } - - .time-unit .label { - font-size: 0.6875rem; - } - - .tab { - padding: 0.75rem 0.5rem; - font-size: 0.875rem; - } - - .tab-content { - padding: 1rem; - } - - .app-nav { - padding: 0.75rem 1rem; - gap: 0.5rem; - } - - .nav-btn { - padding: 0.5rem 0.75rem; - font-size: 0.875rem; - } - - .footer { - padding: 1rem; - font-size: 0.875rem; - } -} - -/* Large mobile devices (361px to 414px) */ -@media (min-width: 361px) and (max-width: 414px) { - .header { - padding: 1rem 1.5rem; - } - - .header-content { - flex-direction: column; - gap: 1rem; - } - - .logo h1 { - font-size: 1.375rem; - } - - .logo .tagline { - font-size: 0.8125rem; - } - - .main-content { - padding: 1rem; - } - - .connect-card { - padding: 2rem; - } - - .connect-card h2 { - font-size: 1.75rem; - } - - .connect-card > p { - font-size: 1.0625rem; - } - - .features { - grid-template-columns: 1fr; - gap: 1.25rem; - } - - .balance-amount { - font-size: 2rem; - } - - .countdown { - flex-wrap: wrap; - gap: 0.75rem; - } - - .time-unit { - min-width: 65px; - padding: 0.625rem; - } - - .time-unit .value { - font-size: 1.375rem; - } - - .tab-content { - padding: 1.25rem; - } - - .app-nav { - padding: 1rem 1.5rem; - } - - .nav-btn { - padding: 0.625rem 1rem; - } -} - -/* Tablet devices (415px to 768px) */ -@media (min-width: 415px) and (max-width: 768px) { - .header-content { - flex-direction: row; - gap: 1.5rem; - } - - .main-content { - padding: 1.5rem; - } - - .connect-card { - padding: 2.5rem; - } - - .connect-card h2 { - font-size: 2rem; - } - - .features { - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 1.5rem; - } - - .balance-amount { - font-size: 2.25rem; - } - - .countdown { - flex-wrap: wrap; - } - - .time-unit { - min-width: 70px; - padding: 0.75rem; - } - - .time-unit .value { - font-size: 1.5rem; - } - - .tab-content { - padding: 1.5rem; - } - - .app-nav { - padding: 1rem 1.5rem; - gap: 1rem; - } - - .nav-btn { - padding: 0.75rem 1.25rem; - } -} - -/* Desktop and tablet landscape (769px to 1024px) */ -@media (min-width: 769px) and (max-width: 1024px) { - .header { - padding: 1rem 1.5rem; - } - - .header-content { - gap: 1.5rem; - } - - .main-content { - padding: 1.75rem; - } - - .connect-card { - padding: 2.75rem; - } - - .features { - grid-template-columns: repeat(3, 1fr); - } - - .balance-amount { - font-size: 2.75rem; - } - - .countdown { - gap: 1.25rem; - } - - .time-unit { - min-width: 85px; - padding: 1.125rem; - } - - .time-unit .value { - font-size: 1.875rem; - } - - .app-nav { - padding: 1rem 1.5rem; - } -} - -/* Large desktop (1025px and above) */ -@media (min-width: 1025px) { - .header { - padding: 1.25rem 2rem; - } - - .header-content { - gap: 2rem; - } - - .main-content { - padding: 2.5rem; - } - - .connect-card { - padding: 3.5rem; - } - - .features { - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - } - - .balance-amount { - font-size: 3.25rem; - } - - .time-unit { - min-width: 90px; - padding: 1.25rem; - } - - .time-unit .value { - font-size: 2.125rem; - } -} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 2b200d0..e69de29 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,164 +0,0 @@ -import { useState, useMemo } from 'react' -import { useAccount } from 'wagmi' -import { Header } from './components/Header' -import { PiggyBankDashboard } from './components/PiggyBankDashboard' -import { WalletConnectPage } from './components/WalletConnectPage' -import { AdminDashboard } from './components/AdminDashboard' -import { TransactionToast } from './components/TransactionToast' -import { MobileNavigation } from './components/MobileNavigation' -import { NotificationProvider, NotificationContainer } from './components/SecureNotification' -import { ErrorBoundary } from './components/ErrorBoundary' -import { useWalletHistory } from './hooks/useWalletHistory' -import { usePiggyBank } from './hooks/usePiggyBank' -import { useMobile, useTouchDevice } from './hooks/useMobile' -import { DebugPage } from './components/DebugPage' -import './App.css' -import './styles/walletConnect.css' -import './styles/saveForLater.css' -import './styles/mobile.css' - -type Page = 'home' | 'wallet' | 'admin' | 'debug' - -function App() { - const { isConnected, address } = useAccount() - const [currentPage, setCurrentPage] = useState('home') - const { owner } = usePiggyBank() - - // Track wallet connection history - useWalletHistory() - - // Check if current user is admin - const isAdmin = useMemo(() => { - if (address && owner) { - return address.toLowerCase() === owner.toLowerCase() - } - return false - }, [address, owner]) - - return ( - - -
- - - -
- -
- - {/* Mobile Navigation */} - {isMobile && ( - - setCurrentPage(page as Page)} - isAdmin={isAdmin} - /> - - )} -
- - {/* Desktop Navigation */} - {!isMobile && ( - - )} - -
- {currentPage === 'wallet' ? ( - - - - ) : !isConnected ? ( - -
-
-

Welcome to Ajo PiggyBank

-

A decentralized savings application on Base blockchain

-
- -
- 🔒 -

Time-Locked Savings

-

Lock your ETH for a specific duration

-
- - -
- 💰 -

Secure Storage

-

Your funds are safe on-chain

-
- - -
- ⚡ -

Base Network

-

Fast and low-cost transactions

-
- -
-
-

Connect your wallet to get started

- -
-
-
- - ) : currentPage === 'admin' ? ( - - - - ) : currentPage === 'debug' ? ( - - - - ) : ( - - - - )} -
- -
- -

Built with REOWN AppKit & WalletConnect on Base

- -
-
- - - ) -} - -export default App diff --git a/frontend/src/index.css b/frontend/src/index.css index 04fc99c..e69de29 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,150 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -:root { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - line-height: 1.6; - font-weight: 400; - - --primary: #7c3aed; - --primary-dark: #6d28d9; - --primary-light: #8b5cf6; - --secondary: #0052ff; - --success: #10b981; - --warning: #f59e0b; - --error: #ef4444; - --bg-primary: #0a0a0f; - --bg-secondary: #16161f; - --bg-card: #1e1e2e; - --text-primary: #ffffff; - --text-secondary: #a1a1aa; - --border: #2d2d3a; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - margin: 0; - min-width: 320px; - min-height: 100vh; - background: linear-gradient(135deg, #0a0a0f 0%, #1a0b2e 100%); - color: var(--text-primary); -} - -#root { - width: 100%; - min-height: 100vh; -} - -a { - font-weight: 500; - color: var(--primary); - text-decoration: none; - transition: color 0.2s; -} - -a:hover { - color: var(--primary-light); -} - -button { - cursor: pointer; - font-family: inherit; -} - -input, -select, -textarea { - font-family: inherit; - font-size: inherit; -} - -/* Scrollbar styling */ -::-webkit-scrollbar { - width: 10px; -} - -::-webkit-scrollbar-track { - background: var(--bg-secondary); -} - -::-webkit-scrollbar-thumb { - background: var(--primary); - border-radius: 5px; -} - -::-webkit-scrollbar-thumb:hover { - background: var(--primary-dark); -} - -/* Mobile-first responsive utilities */ -@media (max-width: 360px) { - html { - font-size: 14px; - } -} - -@media (min-width: 361px) and (max-width: 414px) { - html { - font-size: 15px; - } -} - -@media (min-width: 415px) and (max-width: 768px) { - html { - font-size: 16px; - } -} - -/* Prevent horizontal scrolling on mobile */ -body { - overflow-x: hidden; -} - -/* Improve touch targets on mobile */ -@media (max-width: 768px) { - button, - .btn, - .nav-btn, - .tab, - .network-btn, - .network-option, - .copy-btn { - min-height: 44px; /* Apple's recommended minimum touch target */ - min-width: 44px; - } - - /* Increase spacing between interactive elements */ - button + button, - .btn + .btn, - .nav-btn + .nav-btn { - margin-top: 0.5rem; - } -} - -/* Prevent text size adjustment on mobile */ -@media (max-width: 768px) { - * { - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - text-size-adjust: 100%; - } -} - -/* Smooth scrolling on mobile */ -@media (max-width: 768px) { - html { - scroll-behavior: smooth; - } -} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index fb5f690..e69de29 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,19 +0,0 @@ -import React, { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import { WagmiProvider } from 'wagmi' // cspell:ignore wagmi -import { QueryClientProvider } from '@tanstack/react-query' -import { App } from './App' -import { wagmiConfig, queryClient } from './config/wagmi' - -const container = document.getElementById('root')! -const root = createRoot(container) - -root.render( - - - - - - - , -) From d23a9f71b3189c78ba2886c3393ce14ea4e436a6 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 17:50:57 +0100 Subject: [PATCH 02/13] updating --- frontend/src/App.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index e69de29..adc7670 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -0,0 +1,26 @@ +/* App Container */ +.app { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* Header */ +.header { + background: rgba(30, 30, 46, 0.6); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border); + padding: 1rem 2rem; + position: sticky; + top: 0; + z-index: 100; +} + +.header-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; +} From 0c7fe15606e1ba4cae50a481894f7f3a118348a4 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 17:51:40 +0100 Subject: [PATCH 03/13] updating --- frontend/src/App.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index adc7670..fd9789b 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -24,3 +24,27 @@ align-items: center; gap: 2rem; } + +.header-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; +} + +.logo h1 { + font-size: 1.5rem; + margin: 0; + background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.logo .tagline { + font-size: 0.875rem; + color: var(--text-secondary); + margin: 0; +} From ee1d64855f0f3d5fb64ae2519a38c6b5070e157f Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 17:55:58 +0100 Subject: [PATCH 04/13] updating --- frontend/src/App.css | 150 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index fd9789b..911234a 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -48,3 +48,153 @@ color: var(--text-secondary); margin: 0; } + +.header-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; +} + +.logo h1 { + font-size: 1.5rem; + margin: 0; + background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.logo .tagline { + font-size: 0.875rem; + color: var(--text-secondary); + margin: 0; +} + +.wallet-section { + display: flex; + align-items: center; + gap: 1rem; +} + +.address-badge { + background: var(--bg-card); + padding: 0.5rem 1rem; + border-radius: 8px; + font-family: 'Courier New', monospace; + font-size: 0.875rem; + border: 1px solid var(--border); +} + +/* Main Content */ +.main-content { + flex: 1; + max-width: 1200px; + width: 100%; + margin: 0 auto; + padding: 2rem; +} + +/* Connect Prompt */ +.connect-prompt { + display: flex; + justify-content: center; + align-items: center; + min-height: calc(100vh - 200px); +} + +.connect-card { + background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(0, 82, 255, 0.1) 100%); + backdrop-filter: blur(10px); + border: 1px solid var(--border); + border-radius: 24px; + padding: 3rem; + max-width: 800px; + text-align: center; +} + +.connect-card h2 { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.connect-card > p { + color: var(--text-secondary); + font-size: 1.125rem; + margin-bottom: 3rem; +} + +.features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.feature { + text-align: center; +} + +.feature .icon { + font-size: 3rem; + display: block; + margin-bottom: 1rem; +} + +.feature h3 { + font-size: 1.125rem; + margin-bottom: 0.5rem; +} + +.feature p { + color: var(--text-secondary); + font-size: 0.875rem; +} + +.connect-action p { + margin-bottom: 1rem; + color: var(--text-secondary); +} + +/* Dashboard */ +.dashboard { + max-width: 900px; + margin: 0 auto; +} + +.dashboard-header { + text-align: center; + margin-bottom: 2rem; +} + +.dashboard-header h2 { + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.dashboard-header p { + color: var(--text-secondary); +} + +/* Balance Card */ +.balance-card { + background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(0, 82, 255, 0.2) 100%); + backdrop-filter: blur(10px); + border: 1px solid var(--border); + border-radius: 20px; + padding: 2rem; + margin-bottom: 2rem; +} + +.balance-info { + text-align: center; + margin-bottom: 2rem; +} + +.balance-info h3 { + font-size: 1rem; + color: var(--text-secondary); + margin-bottom: 0.5rem; +} From 8f3325dfd70b64b6572b5896a92ad323957bd1c1 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 18:05:21 +0100 Subject: [PATCH 05/13] updating --- frontend/src/App.css | 56 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 911234a..9ed7211 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -198,3 +198,59 @@ color: var(--text-secondary); margin-bottom: 0.5rem; } + +.balance-amount { + font-size: 3rem; + font-weight: 700; + background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.timelock-info { + text-align: center; +} + +.locked, +.unlocked, +.no-lock { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.status-icon { + font-size: 2rem; +} + +.countdown { + display: flex; + gap: 1rem; + margin-top: 1rem; +} + +.time-unit { + background: var(--bg-card); + padding: 1rem; + border-radius: 12px; + min-width: 80px; + border: 1px solid var(--border); +} + +.time-unit .value { + display: block; + font-size: 2rem; + font-weight: 700; + color: var(--primary); +} + +.time-unit .label { + display: block; + font-size: 0.75rem; + color: var(--text-secondary); + text-transform: uppercase; + margin-top: 0.25rem; +} + From 3571529a250567a6aa89e1ceb1b0274c920b1038 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 18:06:19 +0100 Subject: [PATCH 06/13] updating --- frontend/src/App.css | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 9ed7211..00b4172 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -254,3 +254,46 @@ margin-top: 0.25rem; } +/* Action Panel */ +.action-panel { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 20px; + overflow: hidden; +} + +.tabs { + display: flex; + border-bottom: 1px solid var(--border); +} + +.tab { + flex: 1; + padding: 1rem; + background: transparent; + border: none; + color: var(--text-secondary); + font-weight: 600; + transition: all 0.2s; +} + +.tab.active { + color: var(--primary); + background: rgba(124, 58, 237, 0.1); + border-bottom: 2px solid var(--primary); +} + +.tab:hover { + background: rgba(124, 58, 237, 0.05); +} + +.tab-content { + padding: 2rem; +} + +/* Forms */ +.deposit-form, +.withdraw-section { + max-width: 500px; + margin: 0 auto; +} From a5c910fd88ee63698bd6e2dad182b4a98f9d6e31 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 18:07:03 +0100 Subject: [PATCH 07/13] updating --- frontend/src/App.css | 47 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 00b4172..3e08828 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -297,3 +297,50 @@ max-width: 500px; margin: 0 auto; } + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--text-secondary); +} + +.form-group input, +.form-group select { + width: 100%; + padding: 0.875rem 1rem; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 12px; + color: var(--text-primary); + font-size: 1rem; + transition: all 0.2s; +} + +.form-group input:focus, +.form-group select:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); +} + +.form-group input:disabled, +.form-group select:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.info-box, +.warning-box, +.success-box { + padding: 1rem; + border-radius: 12px; + margin-bottom: 1.5rem; + display: flex; + align-items: center; + gap: 0.75rem; +} From dc083fbe1f10a80433fd6650c702a039d73d3a30 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 18:07:43 +0100 Subject: [PATCH 08/13] updating --- frontend/src/App.css | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 3e08828..0466606 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -344,3 +344,36 @@ align-items: center; gap: 0.75rem; } + +.info-box { + background: rgba(0, 82, 255, 0.1); + border: 1px solid rgba(0, 82, 255, 0.3); + color: var(--text-secondary); +} + +.warning-box { + background: rgba(245, 158, 11, 0.1); + border: 1px solid rgba(245, 158, 11, 0.3); +} + +.success-box { + background: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.3); +} + +.warning-box .icon, +.success-box .icon { + font-size: 1.5rem; +} + +/* Buttons */ +.btn { + width: 100%; + padding: 1rem 2rem; + border: none; + border-radius: 12px; + font-size: 1rem; + font-weight: 600; + transition: all 0.2s; + cursor: pointer; +} From 154c81d6a8cd30e0e69fdf26d90ecd7ff5430ca0 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 18:08:53 +0100 Subject: [PATCH 09/13] updating --- frontend/src/App.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 0466606..d6d8ee7 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -377,3 +377,22 @@ transition: all 0.2s; cursor: pointer; } + +.btn-primary { + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); + color: white; +} + +.btn-primary:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3); +} + +.btn-primary:active:not(:disabled) { + transform: translateY(0); +} + +.btn-primary:disabled { + opacity: 0.6; + cursor: not-allowed; +} From 765aff35624279a88a280709aa661514b7ec404b Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 18:32:17 +0100 Subject: [PATCH 10/13] updating --- frontend/src/App.css | 56 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index d6d8ee7..9f26f4d 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -396,3 +396,59 @@ opacity: 0.6; cursor: not-allowed; } + +.success-message { + margin-top: 1rem; + padding: 1rem; + background: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.3); + border-radius: 12px; + color: var(--success); + text-align: center; +} + +/* Navigation */ +.app-nav { + max-width: 1200px; + margin: 0 auto; + padding: 1rem 2rem; + display: flex; + gap: 1rem; + justify-content: center; +} + +.nav-btn { + padding: 0.75rem 1.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + color: var(--text-primary); + border-radius: 12px; + cursor: pointer; + font-weight: 600; + transition: all 0.2s; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.nav-btn:hover { + border-color: var(--primary); + background: rgba(124, 58, 237, 0.1); +} + +.nav-btn.active { + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); + color: white; + border-color: transparent; +} + +/* Footer */ +.footer { + background: rgba(30, 30, 46, 0.6); + backdrop-filter: blur(10px); + border-top: 1px solid var(--border); + padding: 1.5rem 2rem; + text-align: center; + color: var(--text-secondary); +} + From 0049aa1ad912abad4f59819dddf13e3801627aba Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 18:33:15 +0100 Subject: [PATCH 11/13] updating --- frontend/src/App.css | 123 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 9f26f4d..950a9cc 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -452,3 +452,126 @@ color: var(--text-secondary); } +/* Responsive Design */ + +/* Small mobile devices (up to 360px) */ +@media (max-width: 360px) { + .header { + padding: 0.75rem 1rem; + } + + .header-content { + flex-direction: column; + gap: 0.75rem; + text-align: center; + } + + .logo h1 { + font-size: 1.25rem; + } + + .logo .tagline { + font-size: 0.75rem; + } + + .wallet-section { + gap: 0.5rem; + } + + .address-badge { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + } + + .main-content { + padding: 0.75rem; + } + + .connect-card { + padding: 1.5rem; + border-radius: 16px; + } + + .connect-card h2 { + font-size: 1.5rem; + } + + .connect-card > p { + font-size: 1rem; + margin-bottom: 2rem; + } + + .features { + grid-template-columns: 1fr; + gap: 1rem; + margin-bottom: 2rem; + } + + .feature .icon { + font-size: 2rem; + } + + .feature h3 { + font-size: 1rem; + } + + .feature p { + font-size: 0.8125rem; + } + + .dashboard-header h2 { + font-size: 1.5rem; + } + + .balance-card { + padding: 1.5rem; + border-radius: 16px; + } + + .balance-amount { + font-size: 1.875rem; + } + + .countdown { + flex-wrap: wrap; + gap: 0.5rem; + } + + .time-unit { + min-width: 60px; + padding: 0.5rem; + } + + .time-unit .value { + font-size: 1.25rem; + } + + .time-unit .label { + font-size: 0.6875rem; + } + + .tab { + padding: 0.75rem 0.5rem; + font-size: 0.875rem; + } + + .tab-content { + padding: 1rem; + } + + .app-nav { + padding: 0.75rem 1rem; + gap: 0.5rem; + } + + .nav-btn { + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + } + + .footer { + padding: 1rem; + font-size: 0.875rem; + } +} + From 1e6af118af107d246076623bdd4d14480eee45d7 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 18:36:35 +0100 Subject: [PATCH 12/13] updating --- frontend/src/App.css | 72 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 950a9cc..f71cb88 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -575,3 +575,75 @@ } } +/* Large mobile devices (361px to 414px) */ +@media (min-width: 361px) and (max-width: 414px) { + .header { + padding: 1rem 1.5rem; + } + + .header-content { + flex-direction: column; + gap: 1rem; + } + + .logo h1 { + font-size: 1.375rem; + } + + .logo .tagline { + font-size: 0.8125rem; + } + + .main-content { + padding: 1rem; + } + + .connect-card { + padding: 2rem; + } + + .connect-card h2 { + font-size: 1.75rem; + } + + .connect-card > p { + font-size: 1.0625rem; + } + + .features { + grid-template-columns: 1fr; + gap: 1.25rem; + } + + .balance-amount { + font-size: 2rem; + } + + .countdown { + flex-wrap: wrap; + gap: 0.75rem; + } + + .time-unit { + min-width: 65px; + padding: 0.625rem; + } + + .time-unit .value { + font-size: 1.375rem; + } + + .tab-content { + padding: 1.25rem; + } + + .app-nav { + padding: 1rem 1.5rem; + } + + .nav-btn { + padding: 0.625rem 1rem; + } +} + + From 3438cfb5a98478bf1f0cb16d7f03e24bc53e4ace Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Tue, 27 Jan 2026 18:38:32 +0100 Subject: [PATCH 13/13] updating --- frontend/src/App.css | 133 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 133 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index f71cb88..63d284a 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -646,4 +646,137 @@ } } +/* Tablet devices (415px to 768px) */ +@media (min-width: 415px) and (max-width: 768px) { + .header-content { + flex-direction: row; + gap: 1.5rem; + } + + .main-content { + padding: 1.5rem; + } + + .connect-card { + padding: 2.5rem; + } + + .connect-card h2 { + font-size: 2rem; + } + + .features { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + } + + .balance-amount { + font-size: 2.25rem; + } + + .countdown { + flex-wrap: wrap; + } + + .time-unit { + min-width: 70px; + padding: 0.75rem; + } + + .time-unit .value { + font-size: 1.5rem; + } + + .tab-content { + padding: 1.5rem; + } + + .app-nav { + padding: 1rem 1.5rem; + gap: 1rem; + } + + .nav-btn { + padding: 0.75rem 1.25rem; + } +} + +/* Desktop and tablet landscape (769px to 1024px) */ +@media (min-width: 769px) and (max-width: 1024px) { + .header { + padding: 1rem 1.5rem; + } + + .header-content { + gap: 1.5rem; + } + + .main-content { + padding: 1.75rem; + } + + .connect-card { + padding: 2.75rem; + } + + .features { + grid-template-columns: repeat(3, 1fr); + } + + .balance-amount { + font-size: 2.75rem; + } + + .countdown { + gap: 1.25rem; + } + + .time-unit { + min-width: 85px; + padding: 1.125rem; + } + + .time-unit .value { + font-size: 1.875rem; + } + + .app-nav { + padding: 1rem 1.5rem; + } +} + +/* Large desktop (1025px and above) */ +@media (min-width: 1025px) { + .header { + padding: 1.25rem 2rem; + } + + .header-content { + gap: 2rem; + } + + .main-content { + padding: 2.5rem; + } + + .connect-card { + padding: 3.5rem; + } + .features { + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + } + + .balance-amount { + font-size: 3.25rem; + } + + .time-unit { + min-width: 90px; + padding: 1.25rem; + } + + .time-unit .value { + font-size: 2.125rem; + } +}