diff --git a/frontend/src/components/AppLayout.tsx b/frontend/src/components/AppLayout.tsx index b2e3306f..4384181f 100644 --- a/frontend/src/components/AppLayout.tsx +++ b/frontend/src/components/AppLayout.tsx @@ -1,10 +1,11 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { Outlet, NavLink, useLocation } from 'react-router-dom'; import ConnectAccount from '../components/ConnectAccount'; import AppNav from './AppNav'; import { LanguageSelector } from './LanguageSelector'; import { ThemeToggle } from './ThemeToggle'; import { useTranslation } from 'react-i18next'; +import { OnboardingTour } from './OnboardingTour'; // ── Page Wrapper ─────────────────────── const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => ( @@ -15,6 +16,25 @@ const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => ( const AppLayout: React.FC = () => { const location = useLocation(); useTranslation(); + const [runTour, setRunTour] = useState(false); + + useEffect(() => { + const hasCompletedTour = localStorage.getItem('payd_onboarding_completed'); + if (!hasCompletedTour) { + const timer = setTimeout(() => setRunTour(true), 1500); + return () => clearTimeout(timer); + } + }, []); + + const handleTourComplete = () => { + localStorage.setItem('payd_onboarding_completed', 'true'); + setRunTour(false); + }; + + const restartTour = () => { + localStorage.removeItem('payd_onboarding_completed'); + setRunTour(true); + }; return (
{ > Apache License 2.0 +
STELLAR NETWORK · MAINNET
+
); }; diff --git a/frontend/src/components/AppNav.tsx b/frontend/src/components/AppNav.tsx index f8265039..0425ae40 100644 --- a/frontend/src/components/AppNav.tsx +++ b/frontend/src/components/AppNav.tsx @@ -40,6 +40,7 @@ const AppNav: React.FC = () => { const navLinks = ( <> `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${ @@ -57,6 +58,7 @@ const AppNav: React.FC = () => { `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${ diff --git a/frontend/src/pages/CrossAssetPayment.tsx b/frontend/src/pages/CrossAssetPayment.tsx index 2063d4a4..7b7a1539 100644 --- a/frontend/src/pages/CrossAssetPayment.tsx +++ b/frontend/src/pages/CrossAssetPayment.tsx @@ -71,7 +71,7 @@ export default function CrossAssetPayment() { clearTimeout(timeout); setIsLoadingPaths(false); }; - }, [amount, assetIn, assetOut, notifyError]); + }, [amount, assetIn, assetOut, notifyApiError]); useEffect(() => { if (!socket || !submissionTxHash) return; diff --git a/frontend/src/pages/EmployeeEntry.tsx b/frontend/src/pages/EmployeeEntry.tsx index 384d345e..6c2d19fc 100644 --- a/frontend/src/pages/EmployeeEntry.tsx +++ b/frontend/src/pages/EmployeeEntry.tsx @@ -267,17 +267,7 @@ export default function EmployeeEntry() {
- + diff --git a/frontend/src/pages/PayrollScheduler.tsx b/frontend/src/pages/PayrollScheduler.tsx index 1452a7bb..5b644b54 100644 --- a/frontend/src/pages/PayrollScheduler.tsx +++ b/frontend/src/pages/PayrollScheduler.tsx @@ -510,6 +510,7 @@ export default function PayrollScheduler() {
{!simulationPassed ? (