refactor: buttons

.claude/settings.local.json

@@ -41,7 +41,8 @@
       "Bash(timeout 60 npx tsc:*)",
       "Bash(tee:*)",
       "WebFetch(domain:medium.com)",
-      "Bash(pnpm info:*)"
+      "Bash(pnpm info:*)",
+      "Bash(for file in )"
     ],
     "deny": []
   }

app/HomePage.tsx

@@ -7,7 +7,7 @@ import { useTheme } from 'next-themes';
 import { RiBookLine, RiDiscordFill, RiGithubFill, RiArrowDownLine, RiExternalLinkLine } from 'react-icons/ri';
 import RebalanceAnimation from '@/components/animations/RebalanceAnimation';
 import { Badge } from '@/components/common/Badge';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import Header from '@/components/layout/header/Header';
 import { EXTERNAL_LINKS } from '@/utils/external';
 import logo from '../src/components/imgs/logo.png';
@@ -227,7 +227,7 @@ function HomePage() {
                   variant="default"
                   className="flex w-auto min-w-[200px] items-center justify-center gap-2 px-8 py-3 font-zen sm:px-10 sm:py-4"
                   size="lg"
-                  onPress={() => scrollToSection('section-1')}
+                  onClick={() => scrollToSection('section-1')}
                 >
                   Learn More
                   <RiArrowDownLine className="h-5 w-5" />
@@ -237,7 +237,7 @@ function HomePage() {
                   className="block no-underline"
                 >
                   <Button
-                    variant="cta"
+                    variant="primary"
                     className="w-auto min-w-[200px] px-8 py-3 font-zen sm:px-10 sm:py-4"
                     size="lg"
                   >
@@ -293,7 +293,7 @@ function HomePage() {
                     className="inline-block no-underline"
                   >
                     <Button
-                      variant="secondary"
+                      variant="default"
                       size="lg"
                       className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
                     >
@@ -302,10 +302,10 @@ function HomePage() {
                     </Button>
                   </a>
                   <Button
-                    variant="cta"
+                    variant="primary"
                     size="lg"
                     className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
-                    onPress={() => scrollToSection('section-2')}
+                    onClick={() => scrollToSection('section-2')}
                   >
                     Continue
                     <RiArrowDownLine className="h-5 w-5" />
@@ -356,7 +356,7 @@ function HomePage() {
                     className="inline-block no-underline"
                   >
                     <Button
-                      variant="secondary"
+                      variant="default"
                       size="lg"
                       className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
                     >
@@ -365,10 +365,10 @@ function HomePage() {
                     </Button>
                   </a>
                   <Button
-                    variant="cta"
+                    variant="primary"
                     size="lg"
                     className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
-                    onPress={() => scrollToSection('section-3')}
+                    onClick={() => scrollToSection('section-3')}
                   >
                     Why Monarch
                     <RiArrowDownLine className="h-5 w-5" />
@@ -440,10 +440,10 @@ function HomePage() {
               {/* CTA Buttons - Centered */}
               <div className="mx-auto flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
                 <Button
-                  variant="secondary"
+                  variant="default"
                   size="lg"
                   className="w-auto min-w-[200px] cursor-not-allowed font-zen opacity-50"
-                  isDisabled
+                  disabled
                 >
                   Auto Vault <Badge variant="success"> Coming Soon </Badge>
                 </Button>
@@ -452,7 +452,7 @@ function HomePage() {
                   className="block no-underline"
                 >
                   <Button
-                    variant="cta"
+                    variant="primary"
                     size="lg"
                     className="w-auto min-w-[200px] font-zen"
                   >
@@ -520,7 +520,7 @@ function HomePage() {
 
               <div className="mt-12">
                 <Link href="/autovault">
-                  <Button variant="cta" size="lg" className="px-12 py-4 font-zen">
+                  <Button variant="primary" size="lg" className="px-12 py-4 font-zen">
                     Create Auto Vault
                   </Button>
                 </Link>

app/admin/stats/page.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Button } from '@heroui/react';
+import { Button } from '@/components/ui/button';
 import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@heroui/react';
 import Image from 'next/image';
-import { FiChevronDown } from 'react-icons/fi';
 import ButtonGroup from '@/components/ButtonGroup';
 import { Spinner } from '@/components/common/Spinner';
 import { TokenIcon } from '@/components/TokenIcon';
@@ -182,11 +181,8 @@ export default function StatsPage() {
           {/* Network selector */}
           <Dropdown>
             <DropdownTrigger>
-              <Button
-                variant="flat"
-                endContent={<FiChevronDown className="text-small" />}
-                className="bg-surface min-w-[140px] border border-divider font-zen hover:bg-default-100 active:bg-default-200"
-                startContent={
+              <Button className="bg-surface min-w-[140px] border border-divider font-zen hover:bg-default-100 active:bg-default-200">
+                <div className="flex gap-2">
                   <div className="flex items-center">
                     {selectedNetworkImg && (
                       <Image
@@ -198,9 +194,8 @@ export default function StatsPage() {
                       />
                     )}
                   </div>
-                }
-              >
-                {getNetworkName(selectedNetwork) ?? 'Network'}
+                  <div>{getNetworkName(selectedNetwork)}</div>
+                </div>
               </Button>
             </DropdownTrigger>
             <DropdownMenu
@@ -271,11 +266,7 @@ export default function StatsPage() {
             {/* Loan Asset Filter */}
             <Dropdown>
               <DropdownTrigger>
-                <Button
-                  variant="flat"
-                  endContent={<FiChevronDown className="text-small" />}
-                  className="bg-surface min-w-[160px] border border-divider font-zen hover:bg-default-100 active:bg-default-200"
-                >
+                <Button className="bg-surface min-w-[160px] border border-divider font-zen hover:bg-default-100 active:bg-default-200">
                   {selectedLoanAssets.length === 0
                     ? 'All loan assets'
                     : selectedLoanAssets.length === 1
@@ -324,11 +315,7 @@ export default function StatsPage() {
             {/* Side Filter */}
             <Dropdown>
               <DropdownTrigger>
-                <Button
-                  variant="flat"
-                  endContent={<FiChevronDown className="text-small" />}
-                  className="bg-surface min-w-[140px] border border-divider font-zen hover:bg-default-100 active:bg-default-200"
-                >
+                <Button className="bg-surface min-w-[140px] border border-divider font-zen hover:bg-default-100 active:bg-default-200">
                   {selectedSides.length === 0
                     ? 'All sides'
                     : selectedSides.length === 1

app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx

@@ -2,7 +2,7 @@
 
 import type { Address } from 'viem';
 import { useConnection } from 'wagmi';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
 import Input from '@/components/Input/Input';
 import AccountConnect from '@/components/layout/header/AccountConnect';
@@ -111,19 +111,19 @@ export function DepositToVaultModal({
 
                   {!permit2Authorized || (!usePermit2Setting && !isApproved) ? (
                     <Button
-                      isDisabled={!isConnected || isLoadingPermit2 || depositPending}
-                      onPress={() => void approveAndDeposit()}
+                      disabled={!isConnected || isLoadingPermit2 || depositPending}
+                      onClick={() => void approveAndDeposit()}
                       className="ml-2 min-w-32"
-                      variant="cta"
+                      variant="primary"
                     >
                       Deposit
                     </Button>
                   ) : (
                     <Button
-                      isDisabled={!isConnected || depositPending || inputError !== null || !depositAmount}
-                      onPress={() => void signAndDeposit()}
+                      disabled={!isConnected || depositPending || inputError !== null || !depositAmount}
+                      onClick={() => void signAndDeposit()}
                       className="ml-2 min-w-32"
-                      variant="cta"
+                      variant="primary"
                     >
                       Deposit
                     </Button>

app/autovault/[chainId]/[vaultAddress]/components/VaultInitializationModal.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FiZap } from 'react-icons/fi';
 import { type Address, zeroAddress } from 'viem';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
 import { AllocatorCard } from '@/components/common/AllocatorCard';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
@@ -296,11 +296,11 @@ export function VaultInitializationModal({
     if (stepIndex === 0) {
       return (
         <Button
-          variant="cta"
+          variant="primary"
           size="sm"
           className="min-w-[150px]"
-          isDisabled={!canDeploy || isDeploying}
-          onPress={() => void handleDeploy()}
+          disabled={!canDeploy || isDeploying}
+          onClick={() => void handleDeploy()}
         >
           {isDeploying ? (
             <span className="flex items-center gap-2">
@@ -317,11 +317,11 @@ export function VaultInitializationModal({
     if (stepIndex === 1) {
       return (
         <Button
-          variant="cta"
+          variant="primary"
           size="sm"
           className="min-w-[150px]"
-          isDisabled={!canProceedFromAdapterCap}
-          onPress={() => setStepIndex(2)}
+          disabled={!canProceedFromAdapterCap}
+          onClick={() => setStepIndex(2)}
         >
           Next: Finalize setup
         </Button>
@@ -332,11 +332,11 @@ export function VaultInitializationModal({
     if (stepIndex === 2) {
       return (
         <Button
-          variant="cta"
+          variant="primary"
           size="sm"
           className="min-w-[170px]"
-          isDisabled={!canProceedToAgents}
-          onPress={() => setStepIndex(3)}
+          disabled={!canProceedToAgents}
+          onClick={() => setStepIndex(3)}
         >
           Next: Choose agent
         </Button>
@@ -350,17 +350,17 @@ export function VaultInitializationModal({
           variant="ghost"
           size="sm"
           className="min-w-[120px]"
-          onPress={() => void handleCompleteInitialization()}
-          isDisabled={isInitializing}
+          onClick={() => void handleCompleteInitialization()}
+          disabled={isInitializing}
         >
           Skip for now
         </Button>
         <Button
-          variant="cta"
+          variant="primary"
           size="sm"
           className="min-w-[170px]"
-          isDisabled={isInitializing}
-          onPress={() => void handleCompleteInitialization()}
+          disabled={isInitializing}
+          onClick={() => void handleCompleteInitialization()}
         >
           {isInitializing ? (
             <span className="flex items-center gap-2">
@@ -424,7 +424,7 @@ export function VaultInitializationModal({
           <Button
             variant="ghost"
             size="sm"
-            onPress={() => setStepIndex((prev) => Math.max(prev - 1, 0))}
+            onClick={() => setStepIndex((prev) => Math.max(prev - 1, 0))}
           >
             Back
           </Button>

app/autovault/[chainId]/[vaultAddress]/components/settings/AgentsTab.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import type { Address } from 'viem';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/common/Spinner';
 import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { v2AgentsBase } from '@/utils/monarch-agent';
@@ -100,10 +100,10 @@ export function AgentsTab({
           </div>
           {!isEditingAllocators && (
             <Button
-              variant="interactive"
+              variant="surface"
               size="sm"
-              onPress={() => setIsEditingAllocators(true)}
-              isDisabled={!isOwner}
+              onClick={() => setIsEditingAllocators(true)}
+              disabled={!isOwner}
             >
               {allocators.length === 0 ? 'Add allocators' : 'Edit'}
             </Button>
@@ -123,10 +123,10 @@ export function AgentsTab({
                   >
                     <AgentListItem address={address as Address} />
                     <Button
-                      variant="secondary"
+                      variant="default"
                       size="sm"
-                      onPress={() => void handleRemoveAllocator(address as Address)}
-                      isDisabled={isUpdatingAllocator && allocatorToRemove === (address as Address)}
+                      onClick={() => void handleRemoveAllocator(address as Address)}
+                      disabled={isUpdatingAllocator && allocatorToRemove === (address as Address)}
                     >
                       {isUpdatingAllocator && allocatorToRemove === (address as Address) ? (
                         <span className="flex items-center gap-2">
@@ -156,10 +156,10 @@ export function AgentsTab({
                       <p className="ml-8 text-xs text-secondary">{agent.strategyDescription}</p>
                     </div>
                     <Button
-                      variant="interactive"
+                      variant="surface"
                       size="sm"
-                      onPress={() => void handleAddAllocator(agent.address as Address)}
-                      isDisabled={isUpdatingAllocator && allocatorToAdd === (agent.address as Address)}
+                      onClick={() => void handleAddAllocator(agent.address as Address)}
+                      disabled={isUpdatingAllocator && allocatorToAdd === (agent.address as Address)}
                     >
                       {isUpdatingAllocator && allocatorToAdd === (agent.address as Address) ? (
                         <span className="flex items-center gap-2">
@@ -180,7 +180,7 @@ export function AgentsTab({
               <Button
                 variant="ghost"
                 size="sm"
-                onPress={() => setIsEditingAllocators(false)}
+                onClick={() => setIsEditingAllocators(false)}
               >
                 Done
               </Button>

app/autovault/[chainId]/[vaultAddress]/components/settings/CurrentCaps.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import { type Address, maxUint128 } from 'viem';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { MarketDetailsBlock } from '@/components/common/MarketDetailsBlock';
 import { Spinner } from '@/components/common/Spinner';
 import { TokenIcon } from '@/components/TokenIcon';
@@ -138,9 +138,9 @@ export function CurrentCaps({ existingCaps, isOwner, onStartEdit, chainId, vault
         <div className="flex items-center gap-2">
           {isOwner && (
             <Button
-              variant="subtle"
+              variant="default"
               size="sm"
-              onPress={onStartEdit}
+              onClick={onStartEdit}
             >
               {hasAnyCaps ? 'Edit caps' : 'Add caps'}
             </Button>