refactor: connect and switch-chain flow

.gitignore

@@ -54,3 +54,5 @@ next-env.d.ts
 CLAUDE.md
 FULLAUTO_CONTEXT.md
 .claude/settings.local.json
+
+.claude/settings.local.json

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

@@ -1,11 +1,10 @@
 'use client';
 
+import { useCallback } from 'react';
 import type { Address } from 'viem';
-import { useConnection } from 'wagmi';
-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';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { TokenIcon } from '@/components/TokenIcon';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useVaultV2Deposit } from '@/hooks/useVaultV2Deposit';
@@ -33,7 +32,6 @@ export function DepositToVaultModal({
   onClose,
   onSuccess,
 }: DepositToVaultModalProps): JSX.Element {
-  const { isConnected } = useConnection();
   const [usePermit2Setting] = useLocalStorage('usePermit2', true);
 
   const {
@@ -61,6 +59,14 @@ export function DepositToVaultModal({
     onSuccess,
   });
 
+  const handleDeposit = useCallback(() => {
+    if (!permit2Authorized || (!usePermit2Setting && !isApproved)) {
+      void approveAndDeposit();
+    } else {
+      void signAndDeposit();
+    }
+  }, [permit2Authorized, usePermit2Setting, isApproved, approveAndDeposit, signAndDeposit]);
+
   return (
     <>
       <Modal
@@ -87,55 +93,40 @@ export function DepositToVaultModal({
           onClose={onClose}
         />
         <ModalBody className="gap-6">
-          {isConnected ? (
-            <div className="space-y-4">
-              <div>
-                <div className="flex items-center justify-between">
-                  <span className="opacity-80">Deposit amount</span>
-                  <p className="font-inter text-xs opacity-50">
-                    Balance: {formatBalance(tokenBalance ?? BigInt(0), assetDecimals)} {assetSymbol}
-                  </p>
-                </div>
-
-                <div className="mt-2 flex items-start justify-between">
-                  <div className="relative flex-grow">
-                    <Input
-                      decimals={assetDecimals}
-                      max={tokenBalance ?? BigInt(0)}
-                      setValue={setDepositAmount}
-                      setError={setInputError}
-                      exceedMaxErrMessage="Insufficient Balance"
-                    />
-                    {inputError && <p className="p-1 text-sm text-red-500 transition-opacity duration-200 ease-in-out">{inputError}</p>}
-                  </div>
+          <div className="space-y-4">
+            <div>
+              <div className="flex items-center justify-between">
+                <span className="opacity-80">Deposit amount</span>
+                <p className="font-inter text-xs opacity-50">
+                  Balance: {formatBalance(tokenBalance ?? BigInt(0), assetDecimals)} {assetSymbol}
+                </p>
+              </div>
 
-                  {!permit2Authorized || (!usePermit2Setting && !isApproved) ? (
-                    <Button
-                      disabled={!isConnected || isLoadingPermit2 || depositPending}
-                      onClick={() => void approveAndDeposit()}
-                      className="ml-2 min-w-32"
-                      variant="primary"
-                    >
-                      Deposit
-                    </Button>
-                  ) : (
-                    <Button
-                      disabled={!isConnected || depositPending || inputError !== null || !depositAmount}
-                      onClick={() => void signAndDeposit()}
-                      className="ml-2 min-w-32"
-                      variant="primary"
-                    >
-                      Deposit
-                    </Button>
-                  )}
+              <div className="mt-2 flex items-start justify-between">
+                <div className="relative grow">
+                  <Input
+                    decimals={assetDecimals}
+                    max={tokenBalance ?? BigInt(0)}
+                    setValue={setDepositAmount}
+                    setError={setInputError}
+                    exceedMaxErrMessage="Insufficient Balance"
+                  />
+                  {inputError && <p className="p-1 text-sm text-red-500 transition-opacity duration-200 ease-in-out">{inputError}</p>}
                 </div>
+
+                <ExecuteTransactionButton
+                  targetChainId={chainId}
+                  onClick={handleDeposit}
+                  isLoading={isLoadingPermit2 || depositPending}
+                  disabled={inputError !== null || !depositAmount}
+                  variant="primary"
+                  className="ml-2 min-w-32"
+                >
+                  {!permit2Authorized || (!usePermit2Setting && !isApproved) ? 'Approve' : 'Deposit'}
+                </ExecuteTransactionButton>
               </div>
             </div>
-          ) : (
-            <div className="flex justify-center py-4">
-              <AccountConnect />
-            </div>
-          )}
+          </div>
         </ModalBody>
       </Modal>
 

app/autovault/components/deployment/DeploymentModal.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Checkbox } from '@heroui/react';
 import { FaCube } from 'react-icons/fa';
-import { Button } from '@/components/ui/button';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
-import { Spinner } from '@/components/common/Spinner';
 import { useMarkets } from '@/contexts/MarketsContext';
 import type { UserVaultV2 } from '@/data-sources/subgraph/v2-vaults';
 import { useUserBalances } from '@/hooks/useUserBalances';
@@ -23,7 +22,7 @@ type DeploymentModalContentProps = {
 };
 
 function DeploymentModalContent({ isOpen, onOpenChange, existingVaults }: DeploymentModalContentProps) {
-  const { selectedTokenAndNetwork, needSwitchChain, switchToNetwork, createVault, isDeploying } = useDeployment();
+  const { selectedTokenAndNetwork, createVault, isDeploying } = useDeployment();
 
   // Load balances and tokens at modal level
   const { balances, loading: balancesLoading } = useUserBalances({
@@ -53,6 +52,17 @@ function DeploymentModalContent({ isOpen, onOpenChange, existingVaults }: Deploy
     }
   }, [isOpen]);
 
+  const handleCreateVault = useCallback(() => {
+    void createVault();
+  }, [createVault]);
+
+  const getButtonText = useCallback(() => {
+    if (isDeploying) return 'Deploying...';
+    if (balancesLoading || marketsLoading) return 'Loading...';
+    if (!selectedTokenAndNetwork) return 'Select Asset & Network';
+    return 'Deploy Vault';
+  }, [isDeploying, balancesLoading, marketsLoading, selectedTokenAndNetwork]);
+
   return (
     <Modal
       isOpen={isOpen}
@@ -105,33 +115,16 @@ function DeploymentModalContent({ isOpen, onOpenChange, existingVaults }: Deploy
               )}
 
               <div className="flex justify-end pt-2">
-                <Button
+                <ExecuteTransactionButton
+                  targetChainId={selectedTokenAndNetwork?.networkId ?? 1}
+                  onClick={handleCreateVault}
+                  disabled={!selectedTokenAndNetwork || balancesLoading || marketsLoading || (userAlreadyHasVault && !ackExistingVault)}
+                  isLoading={isDeploying}
                   variant="primary"
-                  onClick={needSwitchChain ? switchToNetwork : () => void createVault()}
-                  disabled={
-                    !selectedTokenAndNetwork ||
-                    isDeploying ||
-                    balancesLoading ||
-                    marketsLoading ||
-                    (userAlreadyHasVault && !ackExistingVault)
-                  }
                   className="min-w-[140px]"
                 >
-                  {isDeploying ? (
-                    <div className="flex items-center gap-2">
-                      <Spinner />
-                      Deploying...
-                    </div>
-                  ) : balancesLoading || marketsLoading ? (
-                    'Loading...'
-                  ) : needSwitchChain && selectedTokenAndNetwork ? (
-                    `Switch to ${getNetworkName(selectedTokenAndNetwork.networkId)}`
-                  ) : selectedTokenAndNetwork ? (
-                    'Deploy Vault'
-                  ) : (
-                    'Select Asset & Network'
-                  )}
-                </Button>
+                  {getButtonText()}
+                </ExecuteTransactionButton>
               </div>
             </div>
           </div>

app/positions/components/RebalanceModal.tsx

@@ -6,8 +6,8 @@ import { MarketSelectionModal } from '@/components/common/MarketSelectionModal';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
 import { Spinner } from '@/components/common/Spinner';
 import { TokenIcon } from '@/components/TokenIcon';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { useMarkets } from '@/hooks/useMarkets';
 import { useRebalance } from '@/hooks/useRebalance';
 import { useStyledToast } from '@/hooks/useStyledToast';
@@ -110,7 +110,7 @@ export function RebalanceModal({ groupedPosition, isOpen, onOpenChange, refetch,
       return false;
     }
     return true;
-  }, [selectedFromMarketUniqueKey, amount, groupedPosition.loanAssetDecimals, getPendingDelta, toast]);
+  }, [selectedFromMarketUniqueKey, amount, groupedPosition.loanAssetDecimals, getPendingDelta, toast, groupedPosition.markets]);
 
   const createAction = useCallback((fromMarket: Market, toMarket: Market, actionAmount: bigint, isMax: boolean): RebalanceAction => {
     return {
@@ -194,40 +194,25 @@ export function RebalanceModal({ groupedPosition, isOpen, onOpenChange, refetch,
     resetSelections,
   ]);
 
-  // Use the market network hook for chain switching with direct chainId
-  const { needSwitchChain, switchToNetwork } = useMarketNetwork({
-    targetChainId: groupedPosition.chainId,
-  });
-
-  const handleExecuteRebalance = useCallback(async () => {
-    if (needSwitchChain) {
+  const handleExecuteRebalance = useCallback(() => {
+    void (async () => {
+      setShowProcessModal(true);
       try {
-        // Call our switchToNetwork function
-        switchToNetwork();
-        // Wait a bit for the network switch to complete
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-      } catch (_error) {
-        toast.error('Something went wrong', 'Failed to switch network. Please try again');
-        return;
-      }
-    }
+        const result = await executeRebalance();
+        // Explicitly refetch AFTER successful execution
 
-    setShowProcessModal(true);
-    try {
-      const result = await executeRebalance();
-      // Explicitly refetch AFTER successful execution
-
-      if (result == true) {
-        refetch(() => {
-          toast.info('Data refreshed', 'Position data updated after rebalance.');
-        });
+        if (result === true) {
+          refetch(() => {
+            toast.info('Data refreshed', 'Position data updated after rebalance.');
+          });
+        }
+      } catch (error) {
+        console.error('Error during rebalance:', error);
+      } finally {
+        setShowProcessModal(false);
       }
-    } catch (error) {
-      console.error('Error during rebalance:', error);
-    } finally {
-      setShowProcessModal(false);
-    }
-  }, [executeRebalance, needSwitchChain, switchToNetwork, toast, refetch]);
+    })();
+  }, [executeRebalance, toast, refetch]);
 
   const handleManualRefresh = () => {
     refetch(() => {
@@ -319,15 +304,16 @@ export function RebalanceModal({ groupedPosition, isOpen, onOpenChange, refetch,
           >
             Cancel
           </Button>
-          <Button
-            variant="primary"
-            onClick={() => void handleExecuteRebalance()}
-            disabled={isProcessing || rebalanceActions.length === 0}
+          <ExecuteTransactionButton
+            targetChainId={groupedPosition.chainId}
+            onClick={handleExecuteRebalance}
+            disabled={rebalanceActions.length === 0}
             isLoading={isProcessing}
+            variant="primary"
             className="rounded-sm p-4 px-10 font-zen text-white duration-200 ease-in-out hover:scale-105 disabled:opacity-50"
           >
-            {needSwitchChain ? 'Switch Network & Execute' : 'Execute Rebalance'}
-          </Button>
+            Execute Rebalance
+          </ExecuteTransactionButton>
         </ModalFooter>
       </Modal>
       {showProcessModal && (