Merge pull request #1015 from IncrediboyXD/feat/extract-copy-strings-950-951-952-953

refactor: extract hardcoded UI strings into lib/copy modules

Author: Austinaminu2

components/landing/hero.tsx

@@ -12,11 +12,12 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { LiveStreamPreview } from '@/components/landing/live-stream-preview'
+import { landingHeaderCopy, landingHeroCopy } from '@/lib/copy/landing'
 
 const NAV_LINKS = [
-  { href: '#features', label: 'Features' },
-  { href: '#how', label: 'How it works' },
-  { href: '#use-cases', label: 'Use cases' },
+  { href: '#features', label: landingHeaderCopy.navLinks.features },
+  { href: '#how', label: landingHeaderCopy.navLinks.how },
+  { href: '#use-cases', label: landingHeaderCopy.navLinks.useCases },
 ]
 
 export function LandingHeader() {
@@ -41,7 +42,7 @@ export function LandingHeader() {
                 variant="ghost"
                 size="icon"
                 className="md:hidden"
-                aria-label="Open navigation menu"
+                aria-label={landingHeaderCopy.openMenuAriaLabel}
               >
                 {mobileNavOpen ? <X className="size-5" /> : <Menu className="size-5" />}
               </Button>
@@ -52,7 +53,7 @@ export function LandingHeader() {
               className="min-w-56 rounded-xl border border-border bg-background/95 p-2 shadow-xl backdrop-blur-md"
             >
               <div className="mb-1 px-2 py-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                Navigate
+                {landingHeaderCopy.mobileMenuHeading}
               </div>
               {NAV_LINKS.map((link) => (
                 <DropdownMenuItem
@@ -69,7 +70,7 @@ export function LandingHeader() {
 
           <Button asChild size="sm">
             <Link href="/app">
-              Open app
+              {landingHeaderCopy.openAppButton}
               <ArrowRight className="size-4" />
             </Link>
           </Button>
@@ -91,29 +92,26 @@ export function Hero() {
         <div>
           <span className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1 text-xs text-muted-foreground">
             <span className="size-1.5 rounded-full bg-primary" />
-            Built on Stellar &amp; Soroban
+            {landingHeroCopy.badge}
           </span>
           <h1 className="mt-5 text-balance text-4xl font-semibold leading-[1.05] tracking-tight sm:text-6xl">
-            Stream money by the second
+            {landingHeroCopy.title}
           </h1>
           <p className="mt-5 max-w-md text-pretty text-lg leading-relaxed text-muted-foreground">
-            FlowStar turns one-time transfers into continuous streams. Perfect for payroll, token
-            vesting, and grants that unlock in real time — withdraw anytime, cancel anytime.
+            {landingHeroCopy.description}
           </p>
           <div className="mt-8 flex flex-wrap items-center gap-3">
             <Button asChild size="lg">
               <Link href="/app/create">
-                Create a stream
+                {landingHeroCopy.createStreamButton}
                 <ArrowRight className="size-4" />
               </Link>
             </Button>
             <Button asChild size="lg" variant="secondary">
-              <Link href="/app">Open dashboard</Link>
+              <Link href="/app">{landingHeroCopy.openDashboardButton}</Link>
             </Button>
           </div>
-          <p className="mt-6 font-mono text-xs text-muted-foreground">
-            No code · Non-custodial · Testnet ready
-          </p>
+          <p className="mt-6 font-mono text-xs text-muted-foreground">{landingHeroCopy.tagline}</p>
         </div>
 
         <div className="relative">

components/landing/sections.tsx

@@ -12,78 +12,33 @@ import {
 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Brand, APP_NAME } from '@/components/brand'
+import { landingSectionsCopy } from '@/lib/copy/landing'
+
+const { features, howItWorks, useCases, cta, footer } = landingSectionsCopy
 
 const FEATURES = [
-  {
-    icon: Gauge,
-    title: 'Per-second unlocking',
-    body: 'Funds unlock continuously down to the second. Recipients see their balance grow in real time, no waiting for payout dates.',
-  },
-  {
-    icon: ShieldCheck,
-    title: 'Non-custodial',
-    body: 'Streams live in a Soroban smart contract. FlowStar never holds your keys or your tokens — you sign every action from your wallet.',
-  },
-  {
-    icon: Hourglass,
-    title: 'Cliffs & schedules',
-    body: 'Add a cliff before unlocking starts, set start and end times, and let the contract handle the math precisely.',
-  },
-  {
-    icon: Wallet,
-    title: 'Withdraw anytime',
-    body: 'Recipients withdraw unlocked funds whenever they want. Senders can cancel and reclaim whatever has not unlocked yet.',
-  },
+  { icon: Gauge, ...features.items.perSecond },
+  { icon: ShieldCheck, ...features.items.nonCustodial },
+  { icon: Hourglass, ...features.items.cliffs },
+  { icon: Wallet, ...features.items.withdraw },
 ]
 
 const USE_CASES = [
-  {
-    icon: Briefcase,
-    title: 'Payroll',
-    body: 'Pay contributors a salary that streams every second instead of monthly lump sums.',
-  },
-  {
-    icon: CalendarClock,
-    title: 'Token vesting',
-    body: 'Vest team and investor allocations on-chain with cliffs and linear schedules.',
-  },
-  {
-    icon: Gift,
-    title: 'Grants',
-    body: 'Fund builders progressively and keep the ability to stop if milestones slip.',
-  },
-  {
-    icon: Coins,
-    title: 'Subscriptions',
-    body: 'Bill continuously for services with streams that anyone can verify on-chain.',
-  },
+  { icon: Briefcase, ...useCases.items.payroll },
+  { icon: CalendarClock, ...useCases.items.vesting },
+  { icon: Gift, ...useCases.items.grants },
+  { icon: Coins, ...useCases.items.subscriptions },
 ]
 
-const STEPS = [
-  {
-    step: '01',
-    title: 'Connect your wallet',
-    body: 'Sign in with Freighter, xBull, LOBSTR, or Albedo. FlowStar reads your address — nothing more.',
-  },
-  {
-    step: '02',
-    title: 'Create a stream',
-    body: 'Pick a token, recipient, amount, and schedule. Fund it in a single transaction.',
-  },
-  {
-    step: '03',
-    title: 'Watch it flow',
-    body: 'The recipient withdraws unlocked funds anytime. Cancel to reclaim the rest whenever you need.',
-  },
-]
+const STEPS = [howItWorks.steps.connect, howItWorks.steps.create, howItWorks.steps.watch]
 
 export function Features() {
   return (
     <section id="features" className="mx-auto max-w-6xl px-4 py-20 sm:px-6">
       <div className="max-w-2xl">
-        <p className="text-sm font-medium text-primary">Why FlowStar</p>
+        <p className="text-sm font-medium text-primary">{features.eyebrow}</p>
         <h2 className="mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-          Programmable money that moves continuously
+          {features.title}
         </h2>
       </div>
       <div className="mt-12 grid gap-4 sm:grid-cols-2">
@@ -111,9 +66,9 @@ export function HowItWorks() {
     <section id="how" className="border-y border-border bg-card/30">
       <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6">
         <div className="max-w-2xl">
-          <p className="text-sm font-medium text-primary">How it works</p>
+          <p className="text-sm font-medium text-primary">{howItWorks.eyebrow}</p>
           <h2 className="mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-            Three steps from transfer to stream
+            {howItWorks.title}
           </h2>
         </div>
         <div className="mt-12 grid gap-8 md:grid-cols-3">
@@ -137,9 +92,9 @@ export function UseCases() {
   return (
     <section id="use-cases" className="mx-auto max-w-6xl px-4 py-20 sm:px-6">
       <div className="max-w-2xl">
-        <p className="text-sm font-medium text-primary">Use cases</p>
+        <p className="text-sm font-medium text-primary">{useCases.eyebrow}</p>
         <h2 className="mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-          One primitive, many payment flows
+          {useCases.title}
         </h2>
       </div>
       <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
@@ -168,16 +123,15 @@ export function CTA() {
           className="pointer-events-none absolute -bottom-24 left-1/2 size-[420px] -translate-x-1/2 rounded-full bg-primary/10 blur-3xl"
         />
         <h2 className="relative text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-          Start streaming in minutes
+          {cta.title}
         </h2>
         <p className="relative mx-auto mt-4 max-w-md text-pretty text-muted-foreground">
-          Connect a wallet and create your first stream on Stellar testnet. No setup, no custody, no
-          code.
+          {cta.description}
         </p>
         <div className="relative mt-8 flex justify-center">
           <Button asChild size="lg">
             <Link href="/app/create">
-              Create a stream
+              {cta.createStreamButton}
               <ArrowRight className="size-4" />
             </Link>
           </Button>
@@ -192,10 +146,7 @@ export function Footer() {
     <footer className="border-t border-border">
       <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-4 py-8 sm:flex-row sm:px-6">
         <Brand />
-        <p className="text-xs text-muted-foreground">
-          {APP_NAME} streams tokens on Stellar. Demo frontend — connect your Soroban contracts to go
-          live.
-        </p>
+        <p className="text-xs text-muted-foreground">{footer.tagline(APP_NAME)}</p>
       </div>
     </footer>
   )

components/layout/navbar.tsx

@@ -19,8 +19,13 @@ import { ConnectWalletButton } from '@/components/layout/connect-wallet-button'
 import { NotificationBell } from '@/components/layout/notification-bell'
 import { navigationCopy } from '@/lib/copy/navigation'
 import { cn } from '@/lib/utils'
+import { navbarCopy } from '@/lib/copy/navigation'
 
 const NAV_LINKS = [
+  { href: '/app', label: navbarCopy.navLinks.dashboard },
+  { href: '/app/streams', label: navbarCopy.navLinks.streams },
+  { href: '/app/analytics', label: navbarCopy.navLinks.analytics },
+  { href: '/app/settings', label: navbarCopy.navLinks.settings },
   { href: '/app', label: navigationCopy.links.dashboard },
   { href: '/app/streams', label: navigationCopy.links.streams },
   { href: '/app/analytics', label: navigationCopy.links.analytics },
@@ -64,6 +69,11 @@ export function Navbar() {
           {!isOnline && (
             <span
               role="status"
+              title={navbarCopy.offlineTitle}
+              className="flex items-center gap-1.5 rounded-full border border-amber-500/40 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-600 dark:text-amber-400"
+            >
+              <WifiOff className="size-3.5" />
+              <span className="hidden sm:inline">{navbarCopy.offlineLabel}</span>
               title={navigationCopy.offline.title}
               className="flex items-center gap-1.5 rounded-full border border-amber-500/40 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-600 dark:text-amber-400"
             >
@@ -77,6 +87,10 @@ export function Navbar() {
               size="sm"
               className="gap-1.5"
               disabled
+              aria-label={navbarCopy.newStreamDisabledAriaLabel}
+            >
+              <Plus className="size-4" />
+              <span className="hidden sm:inline">{navbarCopy.newStreamButton}</span>
               aria-label={navigationCopy.newStream.unavailableAriaLabel}
             >
               <Plus className="size-4" />
@@ -86,6 +100,7 @@ export function Navbar() {
             <Button asChild variant="ghost" size="sm" className="gap-1.5">
               <Link href="/app/create">
                 <Plus className="size-4" />
+                <span className="hidden sm:inline">{navbarCopy.newStreamButton}</span>
                 <span className="hidden sm:inline">{navigationCopy.newStream.label}</span>
               </Link>
             </Button>
@@ -96,6 +111,7 @@ export function Navbar() {
               <Button variant="ghost" size="sm" className="gap-1.5">
                 <Network className="size-4" />
                 <span className="hidden sm:inline">
+                  {network === 'mainnet' ? navbarCopy.network.mainnet : navbarCopy.network.testnet}
                   {network === 'mainnet'
                     ? navigationCopy.network.mainnet
                     : navigationCopy.network.testnet}
@@ -104,6 +120,10 @@ export function Navbar() {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuItem onClick={() => setNetwork('testnet')}>
+                {navbarCopy.network.testnet}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setNetwork('mainnet')}>
+                {navbarCopy.network.mainnet}
                 {navigationCopy.network.testnet}
               </DropdownMenuItem>
               <DropdownMenuItem onClick={() => setNetwork('mainnet')}>
@@ -117,12 +137,22 @@ export function Navbar() {
               <Button variant="ghost" size="icon">
                 <Sun className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                 <Moon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span className="sr-only">{navbarCopy.theme.toggleSrLabel}</span>
                 <span className="sr-only">{navigationCopy.theme.toggle}</span>
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuItem onClick={() => setTheme('light')}>
                 <Sun className="mr-2 size-4" />
+                {navbarCopy.theme.light}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme('dark')}>
+                <Moon className="mr-2 size-4" />
+                {navbarCopy.theme.dark}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme('system')}>
+                <Monitor className="mr-2 size-4" />
+                {navbarCopy.theme.system}
                 {navigationCopy.theme.light}
               </DropdownMenuItem>
               <DropdownMenuItem onClick={() => setTheme('dark')}>
@@ -146,6 +176,9 @@ export function Navbar() {
         <div className="flex items-center gap-2 border-t border-yellow-500/30 bg-yellow-500/10 px-4 py-2 text-sm text-yellow-600 dark:text-yellow-400">
           <AlertTriangle className="size-4 shrink-0" />
           <span>
+            {navbarCopy.networkMismatch.prefix} <strong>{walletNetwork}</strong>{' '}
+            {navbarCopy.networkMismatch.middle} <strong>{network}</strong>{' '}
+            {navbarCopy.networkMismatch.suffix}
             {navigationCopy.networkMismatch.before}
             <strong>{walletNetwork}</strong>
             {navigationCopy.networkMismatch.switchTo}