diff --git a/src/components/NewsBanner.tsx b/src/components/NewsBanner.tsx index 4f7fbe4..0583cf9 100644 --- a/src/components/NewsBanner.tsx +++ b/src/components/NewsBanner.tsx @@ -1,36 +1,70 @@ +<<<<<<< HEAD +/** + * News Banner Component. + * A dismissible top-level banner for announcing major protocol updates or news. + * Persists visibility only within the current session. + */ +======= "use client"; import React, { useState } from 'react'; import { X } from 'lucide-react'; import Icon from './ui/Icon'; +>>>>>>> upstream/main +import React, { useState } from 'react'; +import { X, Sparkles } from 'lucide-react'; + +/** + * A stylized notification banner for global announcements. + */ export default function NewsBanner() { + // --- Component State --- const [isVisible, setIsVisible] = useState(true); + // 1. Conditional Rendering for Visibility if (!isVisible) return null; return ( -
+
-
- 🚀 - - TradeFlow Mainnet Beta is now live! 🚀 +
+ {/* Decorative Icon */} +
+ +
+ + TradeFlow Mainnet Beta is now live! + + + NEW
+ {/* Dismiss Button */}
); } +<<<<<<< HEAD +======= // Inconsequential change for repo health // Maintenance: minor update +>>>>>>> upstream/main diff --git a/src/components/ProModeSection.tsx b/src/components/ProModeSection.tsx index 332f5a1..1f531fa 100644 --- a/src/components/ProModeSection.tsx +++ b/src/components/ProModeSection.tsx @@ -1,3 +1,9 @@ +/** + * Pro Mode Section Component. + * Handles the logic for toggling advanced trading features, + * including token-gated access to high-resolution charts. + */ + "use client"; import React, { useState, useEffect } from "react"; @@ -5,73 +11,119 @@ import dynamic from "next/dynamic"; import Toggle from "../app/Toggle"; import { useTokenStore } from "../stores/tokenStore"; import PremiumUnlockModal from "./PremiumUnlockModal"; +<<<<<<< HEAD +import { Zap, Crown, Lock } from "lucide-react"; +======= import SkeletonCard from "./ui/SkeletonCard"; +>>>>>>> upstream/main -// Dynamically import the heavy chart component with loading fallback +/** + * Dynamically import the heavy TradingView-style chart component. + * Uses a skeleton fallback to prevent layout shifts during hydration. + */ const LivePriceChart = dynamic(() => import("../components/LivePriceChart"), { ssr: false, loading: () => ( +<<<<<<< HEAD +
+======= +>>>>>>> upstream/main
-
-

Loading Pro Chart...

+
+

Hydrating Pro Engine...

 ), }); +/** + * A section that manages the state and access control for "Pro Mode". + */ export default function ProModeSection() { + // --- Component State --- + /** Local toggle state for the current session */ const [isProMode, setIsProMode] = useState(false); + /** Controls visibility of the TF token paywall modal */ const [showPaywall, setShowPaywall] = useState(false); + /** Access logic from the token store */ const { tfTokenBalance, isConnected, hasProModeAccess } = useTokenStore(); + /** + * Handles user interaction with the Pro Mode toggle. + * Validates wallet connection and token requirements before enabling. + */ const handleProModeToggle = () => { - // If trying to enable pro mode + // 1. Logic for enabling Pro Mode if (!isProMode) { if (!isConnected) { - // User is not connected to wallet - alert('Please connect your wallet to enable Pro Mode'); + // TODO: Replace with a non-blocking toast notification + alert('Please connect your Stellar wallet to access Pro Mode features.'); return; } if (!hasProModeAccess()) { - // User doesn't have enough TF tokens - show paywall + // User is connected but lacks sufficient TF token balance setShowPaywall(true); return; } } - // Allow toggle (either disabling pro mode or user has access) + // 2. Commit the toggle state change setIsProMode(!isProMode); }; return ( <> -
-
-
-

Pro Mode Charts

-

- Enable advanced TradingView-style charts with live data. - {!isConnected && " (Connect wallet to enable)"} - {isConnected && !hasProModeAccess() && " (Requires 1,000+ TF tokens)"} +

+
+
+
+
+ {isProMode ? : } +
+

Pro Mode Analytics

+
+

+ Unlock advanced technical indicators and sub-second price feeds. + {!isConnected && ( + + Connect wallet to unlock + + )} + {isConnected && !hasProModeAccess() && ( + + Requires 1,000+ TF utility tokens + + )}

- + +
+ + {isProMode ? "Active" : "Inactive"} + + +
+ {/* Conditional Rendering of Pro Content */} {isProMode && ( -
+
)} -
+
+ {/* Paywall Modal Overlay */} setShowPaywall(false)} @@ -81,6 +133,9 @@ export default function ProModeSection() { ); } +<<<<<<< HEAD +======= // Inconsequential change for repo health // Maintenance: minor update +>>>>>>> upstream/main diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx index 7f3bff7..2f51e1c 100644 --- a/src/components/SettingsModal.tsx +++ b/src/components/SettingsModal.tsx @@ -1,21 +1,203 @@ +/** + * Settings Modal Component. + * Provides a centralized interface for configuring trade parameters + * like slippage tolerance, transaction deadlines, and Expert Mode. + */ + "use client"; +<<<<<<< HEAD +import React, { useState } from 'react'; +import { X, Settings, ShieldAlert, Zap, Clock } from 'lucide-react'; +import Card from './Card'; +import { useSlippage } from '../contexts/SlippageContext'; +import { useExpertMode } from '../contexts/ExpertModeContext'; +import ExpertModeModal from './ExpertModeModal'; +======= import React from "react"; import { X, Info } from "lucide-react"; import { useSettings } from "../lib/context/SettingsContext"; import Icon from "./ui/Icon"; +>>>>>>> upstream/main +/** + * Props for the SettingsModal component. + */ interface SettingsModalProps { + /** Visibility toggle for the modal */ isOpen: boolean; + /** Callback to close the modal */ onClose: () => void; } +/** + * A modal overlay for managing user preferences and trade constraints. + */ export default function SettingsModal({ isOpen, onClose }: SettingsModalProps) { +<<<<<<< HEAD + // --- Context & Store Hooks --- + const { + slippageTolerance, + setSlippageTolerance, + isSlippageAuto, + setIsSlippageAuto, + transactionDeadline, + setTransactionDeadline + } = useSlippage(); + + const { isExpertMode, setExpertMode, hasAcceptedRisk, acceptRisk } = useExpertMode(); + + // --- Component State --- + /** Controls visibility of the high-risk confirmation modal */ + const [isExpertModalOpen, setIsExpertModalOpen] = useState(false); + + /** Standard slippage preset options (as percentages) */ + const presetOptions = [0.1, 0.5, 1.0, 3.0, 5.0]; + + // --- Handlers --- + + /** + * Updates the slippage tolerance to a preset value. + * Only applicable when "Auto" mode is disabled. + * + * @param {number} value - The preset percentage. + */ + const handlePresetClick = (value: number) => { + if (!isSlippageAuto) { + setSlippageTolerance(value); + console.log(`[Settings] Slippage preset applied: ${value}%`); + } + }; + + /** + * Handles manual entry of custom slippage values. + * Constraints: 0% to 50%. + * + * @param {React.ChangeEvent} e - The input change event. + */ + const handleCustomChange = (e: React.ChangeEvent) => { + if (!isSlippageAuto) { + const value = parseFloat(e.target.value); + if (!isNaN(value) && value >= 0 && value <= 50) { + setSlippageTolerance(value); + } + } + }; + + /** + * Toggles between automatic and manual slippage management. + */ + const handleAutoToggle = () => { + const newAutoState = !isSlippageAuto; + setIsSlippageAuto(newAutoState); + + // Reset to a safe protocol default (0.5%) when re-enabling Auto + if (newAutoState) { + setSlippageTolerance(0.5); + } + }; + + /** + * Toggles Expert Mode with security checks. + */ + const handleExpertModeToggle = () => { + if (isExpertMode) { + // Disabling expert mode is always allowed + setExpertMode(false); + } else { + // Enabling expert mode requires explicit risk acknowledgment + if (hasAcceptedRisk) { + setExpertMode(true); + } else { + setIsExpertModalOpen(true); + } + } + }; + + /** + * Callback for the Expert Mode confirmation modal. + */ + const handleExpertModeConfirm = () => { + acceptRisk(); + setExpertMode(true); + setIsExpertModalOpen(false); + }; +======= const { slippage, setSlippage, deadline, setDeadline } = useSettings(); +>>>>>>> upstream/main + // 1. Conditional Rendering for Visibility if (!isOpen) return null; return ( +<<<<<<< HEAD + <> +
+ + {/* Modal Header */} +
+
+
+ +
+

Settings

+
+ +
+ +
+ {/* --- Expert Mode Configuration --- */} +
+
+ +

Expert Mode

+
+

+ Allows high-slippage trades and customizes complex transaction parameters. Use with extreme caution. +

+ +
+ Active Status + +
+
+ + {/* Slippage Tolerance */} +
+

Slippage Tolerance

+

+ Your transaction will revert if the price changes unfavorably by more than this percentage +

+ + {/* Auto Toggle */} +
+
+ Auto Slippage +

Use algorithmically safe default (0.5%)

+=======
@@ -41,6 +223,7 @@ export default function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
Your transaction will revert if the price changes unfavorably by more than this percentage.
+>>>>>>> upstream/main
@@ -69,10 +252,68 @@ export default function SettingsModal({ isOpen, onClose }: SettingsModalProps) { className="w-full bg-slate-800 border border-slate-700 rounded-xl py-2 px-3 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 pr-8" placeholder="Custom" /> +<<<<<<< HEAD + % +
+ + {/* Auto Indicator */} + {isSlippageAuto && ( +
+

+ 🤖 Auto slippage is enabled at 0.5% - Turn off "Auto" to set custom values +

+
+ )} + + {/* Warnings - Only show when not in Auto mode */} + {!isSlippageAuto && ( + <> + {slippageTolerance < 0.1 && ( +

+ Your transaction may fail +

+ )} + {slippageTolerance > 5 && ( +

+ High slippage tolerance may result in a bad trade +

+ )} + + )} + {/* Transaction Deadline */} +
+
+ +

Transaction Deadline

+
+

+ Your transaction will revert if it is pending for more than this period. +

+
+ { + const val = parseInt(e.target.value); + if (!isNaN(val) && val > 0) setTransactionDeadline(val); + }} + min="1" + className="w-20 bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-2.5 text-white font-mono font-bold focus:outline-none focus:border-blue-500 transition-colors" + placeholder="20" + /> + Minutes +
+
+
+
+ +
+======= %
+>>>>>>> upstream/main {/* Transaction Deadline */}
@@ -119,6 +360,9 @@ export default function SettingsModal({ isOpen, onClose }: SettingsModalProps) { ); } +<<<<<<< HEAD +======= // Inconsequential change for repo health // Maintenance: minor update +>>>>>>> upstream/main diff --git a/src/components/SkeletonRow.tsx b/src/components/SkeletonRow.tsx index ee2912a..02029db 100644 --- a/src/components/SkeletonRow.tsx +++ b/src/components/SkeletonRow.tsx @@ -1,19 +1,44 @@ +/** + * Skeleton Row Component. + * A loading placeholder for table rows, providing visual feedback while + * asynchronous data (like invoice lists) is being fetched. + */ + import React from 'react'; +/** + * Renders a set of pulsing placeholder elements that mimic the layout + * of a standard table row. + */ const SkeletonRow = () => { return ( - - -
+ + {/* 1. Asset ID Placeholder */} + +
+ + + {/* 2. Amount Placeholder */} + +
- -
+ + {/* 3. Interest/Badge Placeholder */} + +
- -
+ + {/* 4. Status Placeholder */} + +
- -
+ + {/* 5. Action Button Placeholder */} + +
); @@ -21,6 +46,9 @@ const SkeletonRow = () => { export default SkeletonRow; +<<<<<<< HEAD +======= // Inconsequential change for repo health // Maintenance: minor update +>>>>>>> upstream/main diff --git a/src/components/StarIcon.tsx b/src/components/StarIcon.tsx index 7c55b44..a8f3a03 100644 --- a/src/components/StarIcon.tsx +++ b/src/components/StarIcon.tsx @@ -1,36 +1,68 @@ +<<<<<<< HEAD +/** + * Star Icon Component. + * A reusable interactive toggle for marking assets as favorites or + * adding them to a watchlist. + */ +======= "use client"; +>>>>>>> upstream/main import React from 'react'; import { Star } from 'lucide-react'; import Icon from './ui/Icon'; +/** + * Props for the StarIcon component. + */ interface StarIconProps { + /** Current state of the star (filled vs outline) */ isStarred: boolean; - onClick: () => void; + /** Callback triggered when the icon is clicked */ + onClick: (e: React.MouseEvent) => void; + /** Size of the icon in pixels (default: 16) */ size?: number; + /** Additional CSS classes for custom styling */ className?: string; } -export default function StarIcon({ isStarred, onClick, size = 16, className = '' }: StarIconProps) { +/** + * A stylized star toggle button with smooth transitions and accessibility. + */ +export default function StarIcon({ + isStarred, + onClick, + size = 16, + className = '' +}: StarIconProps) { return ( ); } +<<<<<<< HEAD +======= // Inconsequential change for repo health // Maintenance: minor update +>>>>>>> upstream/main diff --git a/src/components/TabNavigation.tsx b/src/components/TabNavigation.tsx index 83fe389..6e1d08b 100644 --- a/src/components/TabNavigation.tsx +++ b/src/components/TabNavigation.tsx @@ -1,45 +1,101 @@ +<<<<<<< HEAD +/** + * Tab Navigation Component. + * A reusable horizontal navigation bar for switching between different + * content views within a page. + */ +======= "use client"; import React, { useState } from 'react'; +>>>>>>> upstream/main +import React from 'react'; + +/** + * Represents a single tab item in the navigation. + */ interface Tab { + /** Unique identifier for the tab (e.g., "overview") */ id: string; + /** Human-readable text label for the tab */ label: string; + /** Optional Lucide icon to display alongside the label */ icon?: React.ReactNode; } +/** + * Props for the TabNavigation component. + */ interface TabNavigationProps { + /** Array of tab definitions to render */ tabs: Tab[]; + /** The ID of the currently selected tab */ activeTab: string; + /** Callback triggered when a new tab is selected */ onTabChange: (tabId: string) => void; + /** Additional CSS classes for the container */ className?: string; } -export default function TabNavigation({ tabs, activeTab, onTabChange, className = '' }: TabNavigationProps) { +/** + * A stylized tab bar with animated indicators and accessibility support. + */ +export default function TabNavigation({ + tabs, + activeTab, + onTabChange, + className = '' +}: TabNavigationProps) { return ( -
-