From 9f516ce39672dda75146b5528f73caf7d2451363 Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Thu, 29 Jan 2026 18:33:11 +0100 Subject: [PATCH 1/2] modificatio --- frontend/src/App.tsx | 164 +++++++++++++++++++++++++++++++++++++++++ frontend/src/index.css | 150 +++++++++++++++++++++++++++++++++++++ frontend/src/main.tsx | 19 +++++ 3 files changed, 333 insertions(+) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e69de29..6595d26 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -0,0 +1,164 @@ +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 e69de29..04fc99c 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -0,0 +1,150 @@ +@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 e69de29..fb5f690 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -0,0 +1,19 @@ +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 2cbe15c55bb08680678670737b015cd19f61a2af Mon Sep 17 00:00:00 2001 From: Oluwatomilola Date: Thu, 29 Jan 2026 18:39:49 +0100 Subject: [PATCH 2/2] fixing-bugs --- frontend/src/App.tsx | 124 +++++++++++++++++++++++++------------------ 1 file changed, 73 insertions(+), 51 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6595d26..d408eaf 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -10,19 +10,29 @@ import { NotificationProvider, NotificationContainer } from './components/Secure import { ErrorBoundary } from './components/ErrorBoundary' import { useWalletHistory } from './hooks/useWalletHistory' import { usePiggyBank } from './hooks/usePiggyBank' -import { useMobile, useTouchDevice } from './hooks/useMobile' +import { useMobile } from './hooks/useMobile' import { DebugPage } from './components/DebugPage' import './App.css' import './styles/walletConnect.css' import './styles/saveForLater.css' import './styles/mobile.css' +// Type declaration for custom web component +declare global { + namespace JSX { + interface IntrinsicElements { + 'appkit-button': any + } + } +} + type Page = 'home' | 'wallet' | 'admin' | 'debug' function App() { const { isConnected, address } = useAccount() const [currentPage, setCurrentPage] = useState('home') const { owner } = usePiggyBank() + const isMobile = useMobile() // Track wallet connection history useWalletHistory() @@ -95,59 +105,71 @@ function App() { )}
- {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

+ {(() => { + if (currentPage === 'wallet') { + return ( + + + + ); + } else if (!isConnected) { + return ( + +
+
+

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

+
+
- - -
- âš¡ -

Base Network

-

Fast and low-cost transactions

+
+

Connect your wallet to get started

+
- -
-
-

Connect your wallet to get started

- +
-
-
- - ) : currentPage === 'admin' ? ( - - - - ) : currentPage === 'debug' ? ( - - - - ) : ( - - - - )} + + ); + } else if (currentPage === 'admin') { + return ( + + + + ); + } else if (currentPage === 'debug') { + return ( + + + + ); + } else { + return ( + + + + ); + } + })()}