diff --git a/src/components/common/ConnectWalletCtaBanner.tsx b/src/components/common/ConnectWalletCtaBanner.tsx new file mode 100644 index 0000000..7045bcc --- /dev/null +++ b/src/components/common/ConnectWalletCtaBanner.tsx @@ -0,0 +1,108 @@ +import { useCallback, useEffect, useState } from 'react'; +import { X, Wallet } from 'lucide-react'; +import { useAccount, useConnect } from 'wagmi'; +import { cn } from '@/lib/utils'; + +const DISMISS_KEY = 'connect-wallet-banner-dismissed'; + +function wasDismissed(): boolean { + try { + return sessionStorage.getItem(DISMISS_KEY) === 'true'; + } catch { + return false; + } +} + +function markDismissed(): void { + try { + sessionStorage.setItem(DISMISS_KEY, 'true'); + } catch { + // sessionStorage unavailable – silently ignore + } +} + +interface ConnectWalletCtaBannerProps { + className?: string; +} + +const ConnectWalletCtaBanner: React.FC = ({ + className, +}) => { + const { isConnected } = useAccount(); + const { connect, connectors, isPending } = useConnect(); + const [dismissed, setDismissed] = useState(wasDismissed); + + const visible = !isConnected && !dismissed; + + useEffect(() => { + if (isConnected) { + setDismissed(false); + try { + sessionStorage.removeItem(DISMISS_KEY); + } catch { + // ignore + } + } + }, [isConnected]); + + const handleDismiss = useCallback(() => { + setDismissed(true); + markDismissed(); + }, []); + + const handleConnect = useCallback(() => { + const primaryConnector = connectors[0]; + if (primaryConnector) { + connect({ connector: primaryConnector }); + } + }, [connect, connectors]); + + if (!visible) { + return null; + } + + return ( +
+
+
+
+ +
+

+ Connect your Stellar wallet to buy creator keys and start + earning +

+
+ +
+ + + +
+
+
+ ); +}; + +export default ConnectWalletCtaBanner; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 4e3fe47..75b9e54 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,3 +1,4 @@ +import ConnectWalletCtaBanner from '../components/common/ConnectWalletCtaBanner'; import FAQ from '../components/home/FAQ'; import Footer from '../components/home/Footer'; import Header from '../components/home/Header'; @@ -24,6 +25,7 @@ export default function HomePage() {
+ diff --git a/src/pages/__tests__/DocumentTitle.test.tsx b/src/pages/__tests__/DocumentTitle.test.tsx index 47a26ec..08d1edf 100644 --- a/src/pages/__tests__/DocumentTitle.test.tsx +++ b/src/pages/__tests__/DocumentTitle.test.tsx @@ -13,6 +13,9 @@ vi.mock('@/components/home/Hero', () => ({ vi.mock('@/components/home/CreatorSpotlight', () => ({ default: () =>
Creator Spotlight
, })); +vi.mock('@/components/home/MarketOverview', () => ({ + default: () =>
Market Overview
, +})); vi.mock('@/components/home/TrendingLeaderboard', () => ({ default: () =>
Trending Leaderboard
, })); @@ -25,6 +28,9 @@ vi.mock('@/components/home/FAQ', () => ({ vi.mock('@/components/home/Footer', () => ({ default: () =>
Footer
, })); +vi.mock('@/components/common/ConnectWalletCtaBanner', () => ({ + default: () => null, +})); vi.mock('@/components/common/ReferralLinkPanel', () => ({ default: () =>
Referral Link Panel
, })); diff --git a/src/utils/__tests__/slippageTolerance.utils.test.ts b/src/utils/__tests__/slippageTolerance.utils.test.ts index 603d3f4..9c094a1 100644 --- a/src/utils/__tests__/slippageTolerance.utils.test.ts +++ b/src/utils/__tests__/slippageTolerance.utils.test.ts @@ -11,9 +11,6 @@ import { computeMaxPriceStroops, computeMinPriceStroops, computeSlippageBounds, - computeSlippagePriceBounds, - validateSlippageTolerance, - MAX_SLIPPAGE_TOLERANCE_PERCENT, } from '../slippageTolerance.utils'; describe('slippageTolerance.utils', () => {