From e02376cb793dd343f8ee2aa914d913c48adb53e7 Mon Sep 17 00:00:00 2001
From: Jo D <dev-jodee@users.noreply.github.com>
Date: Thu, 30 Apr 2026 10:14:43 -0400
Subject: [PATCH] refactor(webapp): use remaining design system primitives

---
 webapp/src/components/app-modal.tsx           |  5 +-
 .../delegation/active-delegations.tsx         | 31 ++++---
 .../delegation/create-delegation-dialog.tsx   | 26 +++---
 .../components/plan/create-plan-dialog.tsx    | 11 +--
 .../plan/enhanced-collect-payments.tsx        | 82 +++++++++----------
 webapp/src/components/plan/plan-card.tsx      | 35 ++++----
 .../program/program-deploy-card.tsx           | 28 +++----
 webapp/src/routes/setup.tsx                   | 24 +++---
 8 files changed, 119 insertions(+), 123 deletions(-)

diff --git a/webapp/src/components/app-modal.tsx b/webapp/src/components/app-modal.tsx
index f648f77..46376ca 100644
--- a/webapp/src/components/app-modal.tsx
+++ b/webapp/src/components/app-modal.tsx
@@ -1,3 +1,4 @@
+import { Button as SolanaButton } from '@solana/design-system';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import React from 'react';
@@ -27,9 +28,9 @@ export function AppModal({
                 <div className="grid gap-4 py-4">{children}</div>
                 <DialogFooter>
                     {submit ? (
-                        <Button type="submit" onClick={submit} disabled={submitDisabled}>
+                        <SolanaButton type="submit" onClick={submit} disabled={submitDisabled}>
                             {submitLabel || 'Save'}
-                        </Button>
+                        </SolanaButton>
                     ) : null}
                 </DialogFooter>
             </DialogContent>
diff --git a/webapp/src/components/delegation/active-delegations.tsx b/webapp/src/components/delegation/active-delegations.tsx
index 68b5f2b..b8a33c9 100644
--- a/webapp/src/components/delegation/active-delegations.tsx
+++ b/webapp/src/components/delegation/active-delegations.tsx
@@ -1,5 +1,14 @@
 import { RefreshCw, FileX, Coins, ShieldAlert, Power, Trash2 } from 'lucide-react';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@solana/design-system';
+import {
+    Button as SolanaButton,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+    TextInput,
+} from '@solana/design-system';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
@@ -212,12 +221,11 @@ function TransferDelegationButton({ delegation, tokenMint, disabled, blockTime }
                 <div className="py-4 space-y-4">
                     <div className="space-y-2">
                         <label className="text-sm font-medium">Amount (USDC)</label>
-                        <input
+                        <TextInput
                             type="number"
                             value={amount}
                             onChange={e => setAmount(e.target.value)}
                             placeholder="0.00"
-                            className="w-full px-3 py-2 rounded-md border border-input bg-background text-sm"
                         />
                         <p className="text-xs text-muted-foreground">Available: {availableAmount} USDC</p>
                     </div>
@@ -232,13 +240,13 @@ function TransferDelegationButton({ delegation, tokenMint, disabled, blockTime }
                     <Button variant="outline" onClick={() => setOpen(false)}>
                         Cancel
                     </Button>
-                    <Button
+                    <SolanaButton
                         onClick={handleTransfer}
                         disabled={isPending || !amount || parseFloat(amount) <= 0}
-                        className="bg-green-600 hover:bg-green-700"
+                        loading={isPending}
                     >
-                        {isPending ? 'Transferring...' : 'Transfer'}
-                    </Button>
+                        Transfer
+                    </SolanaButton>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
@@ -654,17 +662,18 @@ function InitPrompt({
             {!hasAta && !tokenAccountsLoading && (
                 <p className="text-xs text-destructive">No token account found. Get some USDC first.</p>
             )}
-            <Button
+            <SolanaButton
                 onClick={handleInitialize}
                 disabled={initSubscriptionAuthority.isPending || !hasAta || tokenAccountsLoading}
                 size="sm"
+                loading={initSubscriptionAuthority.isPending}
             >
                 {initSubscriptionAuthority.isPending
                     ? 'Initializing...'
                     : tokenAccountsLoading
                       ? 'Loading...'
                       : 'Enable Delegations'}
-            </Button>
+            </SolanaButton>
         </div>
     );
 }
@@ -748,12 +757,10 @@ function CloseSubscriptionAuthorityDialog({
                         </p>
                         <div className="space-y-1 pt-2">
                             <label className="text-xs text-gray-400">Type CLOSE to confirm</label>
-                            <input
-                                type="text"
+                            <TextInput
                                 value={confirmText}
                                 onChange={e => setConfirmText(e.target.value)}
                                 placeholder="CLOSE"
-                                className="w-full px-3 py-2 rounded-md border border-input bg-background text-sm"
                             />
                         </div>
                     </div>
diff --git a/webapp/src/components/delegation/create-delegation-dialog.tsx b/webapp/src/components/delegation/create-delegation-dialog.tsx
index 8cbf5e2..3fdfa05 100644
--- a/webapp/src/components/delegation/create-delegation-dialog.tsx
+++ b/webapp/src/components/delegation/create-delegation-dialog.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Coins, RefreshCw, Plus, ArrowLeft } from 'lucide-react';
-import { Select, SelectItem, TextInput } from '@solana/design-system';
+import { Button as SolanaButton, Select, SelectItem, TextInput } from '@solana/design-system';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
@@ -169,13 +169,9 @@ export function CreateDelegationDialog({ tokenMint, disabled }: CreateDelegation
     return (
         <Dialog open={open} onOpenChange={handleOpenChange}>
             <DialogTrigger asChild>
-                <Button
-                    disabled={disabled}
-                    className="gap-2 rounded-full px-6 h-11 bg-emerald-600 hover:bg-emerald-500 text-white shadow-[0_0_20px_rgba(16,185,129,0.5)] transition-all hover:shadow-[0_0_25px_rgba(16,185,129,0.7)] border border-emerald-500/50"
-                >
-                    <Plus className="h-5 w-5" />
+                <SolanaButton disabled={disabled} iconLeft={<Plus />} radius="round" size="lg">
                     Create Delegation
-                </Button>
+                </SolanaButton>
             </DialogTrigger>
             <DialogContent className="sm:max-w-[480px]">
                 <DialogHeader>
@@ -204,12 +200,9 @@ export function CreateDelegationDialog({ tokenMint, disabled }: CreateDelegation
                             />
                         </div>
                         <DialogFooter className="mt-6">
-                            <Button
-                                onClick={handleContinue}
-                                className="w-full bg-emerald-600 hover:bg-emerald-500 text-white"
-                            >
+                            <SolanaButton onClick={handleContinue} style={{ width: '100%' }}>
                                 Continue
-                            </Button>
+                            </SolanaButton>
                         </DialogFooter>
                     </>
                 ) : (
@@ -330,13 +323,14 @@ export function CreateDelegationDialog({ tokenMint, disabled }: CreateDelegation
                                 <ArrowLeft className="h-4 w-4 mr-2" />
                                 Back
                             </Button>
-                            <Button
+                            <SolanaButton
                                 onClick={handleSubmit}
                                 disabled={isPending || !isFormValid}
-                                className="flex-1 bg-emerald-600 hover:bg-emerald-500 text-white"
+                                loading={isPending}
+                                style={{ flex: 1 }}
                             >
-                                {isPending ? 'Creating...' : 'Create Delegation'}
-                            </Button>
+                                Create Delegation
+                            </SolanaButton>
                         </DialogFooter>
                     </>
                 )}
diff --git a/webapp/src/components/plan/create-plan-dialog.tsx b/webapp/src/components/plan/create-plan-dialog.tsx
index 9732d3b..c2c0897 100644
--- a/webapp/src/components/plan/create-plan-dialog.tsx
+++ b/webapp/src/components/plan/create-plan-dialog.tsx
@@ -1,6 +1,6 @@
 import { useState, useMemo, useEffect } from 'react';
 import { X, Plus } from 'lucide-react';
-import { Select, SelectItem, TextInput } from '@solana/design-system';
+import { Button as SolanaButton, Select, SelectItem, TextInput } from '@solana/design-system';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
@@ -453,13 +453,14 @@ export function CreatePlanDialog({ open, onOpenChange }: CreatePlanDialogProps)
                 </div>
 
                 <DialogFooter className="mt-4">
-                    <Button
+                    <SolanaButton
                         onClick={handleSubmit}
                         disabled={createPlan.isPending || !isFormValid}
-                        className="w-full bg-emerald-600 hover:bg-emerald-500 text-white"
+                        loading={createPlan.isPending}
+                        style={{ width: '100%' }}
                     >
-                        {createPlan.isPending ? 'Creating...' : 'Create Plan'}
-                    </Button>
+                        Create Plan
+                    </SolanaButton>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
diff --git a/webapp/src/components/plan/enhanced-collect-payments.tsx b/webapp/src/components/plan/enhanced-collect-payments.tsx
index 7af24f2..c05f941 100644
--- a/webapp/src/components/plan/enhanced-collect-payments.tsx
+++ b/webapp/src/components/plan/enhanced-collect-payments.tsx
@@ -1,6 +1,16 @@
 import { useState, useMemo, useCallback } from 'react';
-import { DollarSign, Users, ClipboardPen, Loader2, Clock, Star, Banknote, RefreshCw } from 'lucide-react';
-import { Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@solana/design-system';
+import { DollarSign, Users, ClipboardPen, Clock, Star, Banknote, RefreshCw } from 'lucide-react';
+import {
+    Badge,
+    Button as SolanaButton,
+    SegmentedControl,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@solana/design-system';
 import { toast } from 'sonner';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -198,20 +208,15 @@ function CollectAllButton({
     }, [eligiblePlans, rpcUrl, progAddr, collectAllPlanPayments, onComplete]);
 
     return (
-        <Button
-            className="bg-emerald-600 hover:bg-emerald-500 text-white"
+        <SolanaButton
             disabled={eligiblePlans.length === 0 || collecting}
+            loading={collecting}
             onClick={handleCollectAll}
         >
-            {collecting ? (
-                <>
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    {progress}
-                </>
-            ) : (
-                `Collect All Pending ($${totalPendingUsd.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })})`
-            )}
-        </Button>
+            {collecting
+                ? progress || 'Collecting...'
+                : `Collect All Pending ($${totalPendingUsd.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })})`}
+        </SolanaButton>
     );
 }
 
@@ -317,43 +322,32 @@ function EnhancedPlanCard({ planData, blockTs }: { planData: PlanSubscriberData;
                     {pendingUsd > 0 && (
                         <span className="text-emerald-400 font-medium text-sm">${pendingUsd.toFixed(2)} pending</span>
                     )}
-                    <Button
-                        className="bg-emerald-600 hover:bg-emerald-500 text-white"
+                    <SolanaButton
                         size="sm"
                         disabled={isCollecting || eligible.length === 0}
+                        loading={isCollecting}
                         onClick={e => {
                             e.stopPropagation();
                             handleCollect();
                         }}
                     >
-                        {isCollecting ? (
-                            <Loader2 className="h-4 w-4 animate-spin" />
-                        ) : (
-                            `Collect $${pendingUsd.toFixed(2)}`
-                        )}
-                    </Button>
+                        Collect ${pendingUsd.toFixed(2)}
+                    </SolanaButton>
                 </div>
             </button>
 
             {expanded && (
                 <div className="border-t border-emerald-500/10">
-                    <div className="flex gap-1 p-2 border-b border-emerald-500/10">
-                        <Button
-                            variant={view === 'subscribers' ? 'default' : 'ghost'}
-                            size="sm"
-                            className={view === 'subscribers' ? 'bg-emerald-600 hover:bg-emerald-500' : ''}
-                            onClick={() => setView('subscribers')}
-                        >
-                            Subscribers
-                        </Button>
-                        <Button
-                            variant={view === 'history' ? 'default' : 'ghost'}
-                            size="sm"
-                            className={view === 'history' ? 'bg-emerald-600 hover:bg-emerald-500' : ''}
-                            onClick={() => setView('history')}
-                        >
-                            History
-                        </Button>
+                    <div className="p-2 border-b border-emerald-500/10">
+                        <SegmentedControl
+                            aria-label="Collection detail view"
+                            value={view}
+                            onValueChange={value => setView(value as typeof view)}
+                            items={[
+                                { value: 'subscribers', label: 'Subscribers' },
+                                { value: 'history', label: 'History' },
+                            ]}
+                        />
                     </div>
 
                     <div className="p-3">
@@ -563,9 +557,15 @@ export function EnhancedCollectPayments() {
             />
 
             <div className="flex items-center justify-end gap-2">
-                <Button variant="ghost" size="sm" onClick={handleRefresh} disabled={spinning}>
-                    <RefreshCw className={`h-4 w-4 ${spinning ? 'animate-spin' : ''}`} />
-                </Button>
+                <SolanaButton
+                    variant="secondary"
+                    size="sm"
+                    iconOnly
+                    iconLeft={<RefreshCw className={spinning ? 'animate-spin' : ''} />}
+                    aria-label="Refresh collections"
+                    onClick={handleRefresh}
+                    disabled={spinning}
+                />
                 <CollectAllButton
                     plansData={data?.plans ?? []}
                     totalPendingUsd={totalPendingUsd}
diff --git a/webapp/src/components/plan/plan-card.tsx b/webapp/src/components/plan/plan-card.tsx
index 91134cd..e2f336f 100644
--- a/webapp/src/components/plan/plan-card.tsx
+++ b/webapp/src/components/plan/plan-card.tsx
@@ -12,7 +12,7 @@ import {
     Plus,
     X,
 } from 'lucide-react';
-import { Badge, Select, SelectItem, TextInput } from '@solana/design-system';
+import { Badge, Button as SolanaButton, Select, SelectItem, TextInput } from '@solana/design-system';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
@@ -362,13 +362,13 @@ function EditPlanDialog({
                     <Button variant="outline" onClick={() => onOpenChange(false)}>
                         Cancel
                     </Button>
-                    <Button
+                    <SolanaButton
                         onClick={handleUpdate}
                         disabled={updatePlan.isPending || isSunset || !isFormValid}
-                        className="bg-emerald-600 hover:bg-emerald-500 text-white"
+                        loading={updatePlan.isPending}
                     >
-                        {updatePlan.isPending ? 'Updating...' : 'Update Plan'}
-                    </Button>
+                        Update Plan
+                    </SolanaButton>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
@@ -496,22 +496,21 @@ function SubscribeDialog({
                         <div className="text-sm text-amber-400 p-3 rounded-lg border border-amber-500/30 bg-amber-500/5">
                             Your SubscriptionAuthority account must be initialized for this token before subscribing.
                         </div>
-                        <Button
+                        <SolanaButton
                             onClick={handleInit}
                             disabled={initSubscriptionAuthority.isPending}
-                            className="w-full bg-amber-600 hover:bg-amber-500 text-white"
+                            loading={initSubscriptionAuthority.isPending}
+                            style={{ width: '100%' }}
                         >
-                            {initSubscriptionAuthority.isPending
-                                ? 'Initializing...'
-                                : 'Initialize SubscriptionAuthority'}
-                        </Button>
+                            Initialize SubscriptionAuthority
+                        </SolanaButton>
                     </div>
                 ) : (
                     <DialogFooter>
                         <Button variant="outline" onClick={() => onOpenChange(false)}>
                             Cancel
                         </Button>
-                        <Button
+                        <SolanaButton
                             onClick={() =>
                                 subscribe.mutate(
                                     {
@@ -526,10 +525,10 @@ function SubscribeDialog({
                                 )
                             }
                             disabled={subscribe.isPending}
-                            className="bg-emerald-600 hover:bg-emerald-500 text-white"
+                            loading={subscribe.isPending}
                         >
-                            {subscribe.isPending ? 'Subscribing...' : 'Subscribe'}
-                        </Button>
+                            Subscribe
+                        </SolanaButton>
                     </DialogFooter>
                 )}
             </DialogContent>
@@ -854,17 +853,17 @@ export function PlanCard({
                                     Already Subscribed
                                 </Badge>
                             ) : (
-                                <Button
+                                <SolanaButton
                                     size="sm"
                                     onClick={(e: React.MouseEvent) => {
                                         e.stopPropagation();
                                         setSubscribeOpen(true);
                                     }}
                                     disabled={isSunset || planExpired}
-                                    className="w-full h-9 bg-emerald-600 hover:bg-emerald-500 text-white"
+                                    style={{ width: '100%' }}
                                 >
                                     Subscribe
-                                </Button>
+                                </SolanaButton>
                             )}
                         </div>
                     )}
diff --git a/webapp/src/components/program/program-deploy-card.tsx b/webapp/src/components/program/program-deploy-card.tsx
index 7a4bce9..32b9172 100644
--- a/webapp/src/components/program/program-deploy-card.tsx
+++ b/webapp/src/components/program/program-deploy-card.tsx
@@ -11,7 +11,7 @@ import {
     Shield,
     Send,
 } from 'lucide-react';
-import { CopyButton, TextInput } from '@solana/design-system';
+import { Button as SolanaButton, CopyButton, TextInput } from '@solana/design-system';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useProgramStatus } from '@/hooks/use-program-status';
@@ -182,21 +182,15 @@ function TransferAuthoritySection() {
                     {isValidInput && (
                         <div className="flex gap-2">
                             {isAuthority && (
-                                <Button
+                                <SolanaButton
                                     onClick={() => transferMutation.mutate()}
                                     disabled={transferMutation.isPending}
-                                    className="flex-1 bg-purple-600 hover:bg-purple-500 text-white"
+                                    iconLeft={<Send />}
+                                    loading={transferMutation.isPending}
+                                    style={{ flex: 1 }}
                                 >
-                                    {transferMutation.isPending ? (
-                                        <>
-                                            <Loader2 className="h-4 w-4 mr-2 animate-spin" /> Transferring...
-                                        </>
-                                    ) : (
-                                        <>
-                                            <Send className="h-4 w-4 mr-2" /> Sign & Send
-                                        </>
-                                    )}
-                                </Button>
+                                    Sign & Send
+                                </SolanaButton>
                             )}
                             <Button
                                 onClick={handleGenerateBase58}
@@ -287,14 +281,14 @@ export function ProgramDeployCard() {
                 )}
 
                 {!isActive && progress.phase !== 'done' && progress.phase !== 'error' && (
-                    <Button
+                    <SolanaButton
                         onClick={() => handleDeploy()}
                         disabled={!!authorityMismatch}
-                        className="w-full bg-purple-600 hover:bg-purple-500 text-white disabled:opacity-50"
+                        iconLeft={<Rocket />}
+                        style={{ width: '100%' }}
                     >
-                        <Rocket className="h-4 w-4 mr-2" />
                         {isUpgrade ? 'Upgrade Program' : 'Deploy Program'}
-                    </Button>
+                    </SolanaButton>
                 )}
 
                 {(isActive || progress.phase === 'done' || progress.phase === 'error') && (
diff --git a/webapp/src/routes/setup.tsx b/webapp/src/routes/setup.tsx
index 61d29f0..766a6ee 100644
--- a/webapp/src/routes/setup.tsx
+++ b/webapp/src/routes/setup.tsx
@@ -845,14 +845,14 @@ function DevnetWizard({ onComplete, onBack }: { onComplete: () => void; onBack:
 
                         {phase === 'deploy' && (
                             <div className="space-y-3">
-                                <Button
+                                <SolanaButton
                                     onClick={handleDeploy}
                                     disabled={isPending}
-                                    className="w-full bg-purple-600 hover:bg-purple-700"
+                                    loading={programDeploy.isPending}
+                                    style={{ width: '100%' }}
                                 >
-                                    {programDeploy.isPending ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
                                     Begin Deployment
-                                </Button>
+                                </SolanaButton>
 
                                 {programStatus.data?.deployed && programStatus.data?.upgradeAuthority === account && (
                                     <div className="rounded-lg border border-red-500/20 bg-red-500/5 p-3">
@@ -915,14 +915,14 @@ function DevnetWizard({ onComplete, onBack }: { onComplete: () => void; onBack:
                                         placeholder="New authority address..."
                                         inputClassName="font-mono"
                                     />
-                                    <Button
+                                    <SolanaButton
                                         onClick={handleTransferAuthority}
                                         disabled={isPending || !isValidBase58Address(multisigAddress)}
-                                        className="w-full bg-amber-600 hover:bg-amber-500"
+                                        loading={isPending}
+                                        style={{ width: '100%' }}
                                     >
-                                        {isPending ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
                                         Transfer Authority
-                                    </Button>
+                                    </SolanaButton>
                                 </div>
                                 <Button
                                     onClick={() => {
@@ -1034,14 +1034,14 @@ function DevnetWizard({ onComplete, onBack }: { onComplete: () => void; onBack:
                                             <div className="flex-1 border-t border-white/5" />
                                         </div>
 
-                                        <Button
+                                        <SolanaButton
                                             onClick={runUsdcFlow}
                                             disabled={isPending}
-                                            className="w-full bg-purple-600 hover:bg-purple-700"
+                                            loading={isPending}
+                                            style={{ width: '100%' }}
                                         >
-                                            {isPending ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
                                             Create New USDC Mint
-                                        </Button>
+                                        </SolanaButton>
                                     </>
                                 )}
                             </div>