Bump wagmi to v3

.github/workflows/playwright.yml

@@ -17,24 +17,22 @@ jobs:
       uses: foundry-rs/foundry-toolchain@v1
       with:
         version: stable
+    - name: Install pnpm and dependencies
+      run: npm install -g pnpm && pnpm install
     - name: Get installed Playwright version
       id: playwright-version
-      run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV
+      run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@playwright/test'])")" >> $GITHUB_ENV
     - name: Cache playwright binaries
       uses: actions/cache@v4
       id: playwright-cache
       with:
         path: |
           ~/.cache/ms-playwright
         key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
-    - name: Install dependencies
-      run: npm install -g pnpm && pnpm install
     - name: Install Playwright Browsers
-      run: pnpm exec playwright install --with-deps
-      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      run: pnpm exec playwright install --with-deps chromium
     - name: Install Playwright Dependencies
-      run: pnpm exec playwright install-deps
-      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      run: pnpm exec playwright install-deps chromium
     - name: Run Playwright tests
       run: pnpm exec playwright test
     - uses: actions/upload-artifact@v4

package.json

@@ -30,47 +30,49 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
-    "@reown/appkit": "^1.8.14",
-    "@reown/appkit-adapter-wagmi": "^1.8.14",
+    "@reown/appkit": "^1.8.15",
+    "@reown/appkit-adapter-wagmi": "^1.8.15",
+    "@safe-global/safe-apps-provider": "~0.18.6",
+    "@safe-global/safe-apps-sdk": "~9.1.0",
     "@tailwindcss/vite": "^4.1.17",
-    "@tanstack/react-query": "5.90.11",
+    "@tanstack/react-query": "5.90.12",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "jwt-decode": "^4.0.0",
-    "lucide-react": "^0.555.0",
+    "lucide-react": "^0.559.0",
     "next-themes": "^0.4.6",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-phone-number-input": "^3.4.14",
-    "react-router-dom": "^7.10.0",
+    "react-router-dom": "^7.10.1",
     "react-use-zendesk": "^1.4.1",
     "siwe": "^3.0.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
     "viem": "^2.41.2",
-    "wagmi": "^2.19.4"
+    "wagmi": "^3.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
     "@johanneskares/wallet-mock": "^1.4.1",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.57.0",
     "@viem/anvil": "^0.0.10",
     "@types/jsonwebtoken": "^9.0.10",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react": "^5.1.2",
     "@wagmi/cli": "^2.8.0",
     "buffer": "^6.0.3",
     "concurrently": "^9.2.1",
     "dotenv-cli": "^11.0.0",
-    "jsonwebtoken": "^9.0.2",
+    "jsonwebtoken": "^9.0.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.6"
+    "vite": "^7.2.7"
   },
   "packageManager": "pnpm@10.20.0"
 }

src/components/AuthGuard.tsx

@@ -10,7 +10,7 @@ import darkOwl from "@/assets/Gnosis-owl-white.svg";
 import lightOwl from "@/assets/Gnosis-owl-black.svg";
 import { TROUBLE_LOGGING_IN_URL } from "@/constants";
 import { DebugButton } from "./DebugButton";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 import { useGnosisChainEnforcer } from "@/hooks/useGnosisChainEnforcer";
 
 interface AuthGuardProps {
@@ -82,7 +82,7 @@ export const AuthGuard = ({
   const { isDeactivated, isUserSignedUp, isKycApproved, isSafeConfigured, isOnboarded } = useUser();
   const { open } = useAppKit();
   const navigate = useNavigate();
-  const { isConnected, isConnecting } = useAccount();
+  const { isConnected, isConnecting } = useConnection();
 
   useGnosisChainEnforcer();
 

src/components/WithdrawFundsForm.tsx

@@ -9,7 +9,7 @@ import type { TokenInfoWithBalance } from "@/hooks/useTokenBalance";
 import { TokenAmountInput } from "./modals/send-funds/token-amount-input";
 import { CustomTokenAmountInput } from "./modals/send-funds/custom-token-amount-input";
 import { AddressInput } from "./modals/send-funds/address-input";
-import { useAccount, useSignTypedData } from "wagmi";
+import { useConnection, useSignTypedData } from "wagmi";
 import { useUser } from "@/context/UserContext";
 import { ERC20_ABI } from "@/utils/abis/ERC20Abi";
 import { populateExecuteEnqueue, predictAddresses } from "@gnosispay/account-kit";
@@ -27,7 +27,7 @@ interface WithdrawFundsFormProps {
 }
 
 export const WithdrawFundsForm = ({ onSuccess }: WithdrawFundsFormProps = {}) => {
-  const { address: connectedAddress } = useAccount();
+  const { address: connectedAddress } = useConnection();
   const { safeConfig } = useUser();
   const { signTypedDataAsync } = useSignTypedData();
   const { isSignerConnected, signerError, isDataLoading: isSignerVerificationLoading } = useSafeSignerVerification();

src/components/account/IbanAccountDetails.tsx

@@ -81,7 +81,7 @@ export const IbanAccountDetails = () => {
               {user?.bankingDetails?.address || "N/A"}
             </div>
             {user?.bankingDetails?.address && (
-              <Button variant="outline" size="sm" onClick={handleCopyAddress} className="p-2 flex-shrink-0">
+              <Button variant="outline" size="sm" onClick={handleCopyAddress} className="p-2 shrink-0">
                 <Copy className="h-4 w-4" />
               </Button>
             )}
@@ -92,7 +92,7 @@ export const IbanAccountDetails = () => {
           <div className="flex items-center gap-2">
             <div className="flex-1 p-3 bg-muted/50 rounded-lg font-medium text-foreground">{fullName}</div>
             {fullName && (
-              <Button variant="outline" size="sm" onClick={handleCopyBeneficiary} className="p-2 flex-shrink-0">
+              <Button variant="outline" size="sm" onClick={handleCopyBeneficiary} className="p-2 shrink-0">
                 <Copy className="h-4 w-4" />
               </Button>
             )}
@@ -106,7 +106,7 @@ export const IbanAccountDetails = () => {
               {user?.bankingDetails?.moneriumIban || "N/A"}
             </div>
             {user?.bankingDetails?.moneriumIban && (
-              <Button variant="outline" size="sm" onClick={handleCopyIban} className="p-2 flex-shrink-0">
+              <Button variant="outline" size="sm" onClick={handleCopyIban} className="p-2 shrink-0">
                 <Copy className="h-4 w-4" />
               </Button>
             )}
@@ -120,7 +120,7 @@ export const IbanAccountDetails = () => {
               {user?.bankingDetails?.moneriumBic || "N/A"}
             </div>
             {user?.bankingDetails?.moneriumBic && (
-              <Button variant="outline" size="sm" onClick={handleCopyBic} className="p-2 flex-shrink-0">
+              <Button variant="outline" size="sm" onClick={handleCopyBic} className="p-2 shrink-0">
                 <Copy className="h-4 w-4" />
               </Button>
             )}

src/components/account/SafeAccountDetails.tsx

@@ -48,7 +48,7 @@ export const SafeAccountDetails = ({ addressLabel = "Wallet address" }: SafeAcco
             {safeConfig?.address || "N/A"}
           </div>
           {safeConfig?.address && (
-            <Button variant="outline" size="sm" onClick={handleCopyAddress} className="p-2 flex-shrink-0">
+            <Button variant="outline" size="sm" onClick={handleCopyAddress} className="p-2 shrink-0">
               <Copy className="h-4 w-4" />
             </Button>
           )}

src/components/iban/iban-integration-flow.tsx

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { StandardAlert } from "@/components/ui/standard-alert";
 import { getApiV1IbansSigningMessage, postApiV1IntegrationsMonerium } from "@/client";
 import { extractErrorMessage } from "@/utils/errorHelpers";
-import { useAccount, useSignMessage } from "wagmi";
+import { useConnection, useSignMessage } from "wagmi";
 import { useUser } from "@/context/UserContext";
 import { shortenAddress } from "@/utils/shortenAddress";
 import { currencies } from "@/constants";
@@ -21,7 +21,7 @@ export function IbanIntegrationFlow({ onSuccess, onCancel, showCancelButton = tr
   const [isProcessing, setIsProcessing] = useState(false);
   const [error, setError] = useState<string>("");
   const [success, setSuccess] = useState(false);
-  const { address } = useAccount();
+  const { address } = useConnection();
 
   const currency = useMemo(() => {
     if (!safeConfig?.fiatSymbol) return null;
@@ -120,7 +120,7 @@ export function IbanIntegrationFlow({ onSuccess, onCancel, showCancelButton = tr
       {/* Information Section */}
       <div className="space-y-3">
         <div className="flex items-start gap-3">
-          <AlertCircle className="h-5 w-5 text-info mt-0.5 flex-shrink-0" />
+          <AlertCircle className="h-5 w-5 text-info mt-0.5 shrink-0" />
           <div className="space-y-2 text-sm">
             <p className="font-medium text-foreground">What happens next:</p>
             <ul className="space-y-1 text-muted-foreground">

src/components/modals/add-funds/add-funds.tsx

@@ -98,14 +98,14 @@ export const AddFundsModal = ({ open, onOpenChange }: AddFundsModalProps) => {
                     className="cursor-pointer w-full flex items-center gap-4 p-4 rounded-lg border hover:bg-muted/50 transition-colors text-left"
                     onClick={option.onClick}
                   >
-                    <div className="flex-shrink-0">
+                    <div className="shrink-0">
                       <IconComponent className="h-6 w-6 text-foreground" />
                     </div>
                     <div className="flex-1 min-w-0">
                       <h3 className="font-medium text-foreground mb-1">{option.title}</h3>
                       <p className="text-sm text-muted-foreground">{option.description}</p>
                     </div>
-                    <div className="flex-shrink-0">
+                    <div className="shrink-0">
                       <ChevronRight className="h-5 w-5 text-muted-foreground" />
                     </div>
                   </button>

src/components/modals/safe-owners/safe-owners-view.tsx

@@ -73,7 +73,7 @@ export const SafeOwnersView = ({ owners, isLoading, onEditClick, onDeleteClick }
                   variant="outline"
                   size="sm"
                   onClick={() => handleCopyAddress(ownerAddress)}
-                  className="p-2 flex-shrink-0"
+                  className="p-2 shrink-0"
                 >
                   <Copy className="h-4 w-4" />
                 </Button>
@@ -82,7 +82,7 @@ export const SafeOwnersView = ({ owners, isLoading, onEditClick, onDeleteClick }
                     variant="outline"
                     size="sm"
                     onClick={() => handleDeleteClick(ownerAddress)}
-                    className="p-2 flex-shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                    className="p-2 shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
                   >
                     <Trash2 className="h-4 w-4" />
                   </Button>

src/components/modals/send-funds/send-funds-form.tsx

@@ -9,7 +9,7 @@ import type { TokenInfoWithBalance } from "@/hooks/useTokenBalance";
 import { TokenAmountInput } from "./token-amount-input";
 import { CustomTokenAmountInput } from "./custom-token-amount-input.tsx";
 import { AddressInput } from "./address-input";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 import { useDelayRelay } from "@/context/DelayRelayContext";
 import { QueueNotEmptyAlert } from "@/components/QueueNotEmptyAlert";
 import { useSafeSignerVerification } from "@/hooks/useSafeSignerVerification";
@@ -25,7 +25,7 @@ interface SendFundsFormProps {
 }
 
 export const SendFundsForm = ({ onNext }: SendFundsFormProps) => {
-  const { address: connectedAddress } = useAccount();
+  const { address: connectedAddress } = useConnection();
   const { queue } = useDelayRelay();
   const isQueueNotEmpty = useMemo(() => queue.length > 0, [queue]);
   const [toAddress, setToAddress] = useState("");

src/components/modals/sign-in-wallets/sign-in-wallets-view.tsx

@@ -77,7 +77,7 @@ export const SignInWalletsView = ({ eoaAccounts, isLoading, onEditClick, onDelet
                     variant="outline"
                     size="sm"
                     onClick={() => handleCopyAddress(account.address)}
-                    className="p-2 flex-shrink-0"
+                    className="p-2 shrink-0"
                   >
                     <Copy className="h-4 w-4" />
                   </Button>
@@ -87,7 +87,7 @@ export const SignInWalletsView = ({ eoaAccounts, isLoading, onEditClick, onDelet
                     variant="outline"
                     size="sm"
                     onClick={() => handleDeleteClick(account)}
-                    className="p-2 flex-shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                    className="p-2 shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
                   >
                     <Trash2 className="h-4 w-4" />
                   </Button>

src/components/nav/header.tsx

@@ -6,12 +6,12 @@ import { NavLink } from "react-router-dom";
 import { menuRoutes } from "@/App";
 import { Button } from "@/components/ui/button";
 import { useAppKit } from "@reown/appkit/react";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 import { useCallback } from "react";
 
 export const HeaderNavBar = () => {
   const { effectiveTheme } = useTheme();
-  const { isConnected } = useAccount();
+  const { isConnected } = useConnection();
   const { open } = useAppKit();
 
   const handleConnect = useCallback(() => {

src/components/pending-card-order.tsx

@@ -45,7 +45,7 @@ export const PendingCardOrder = () => {
   return (
     <div className="bg-card border border-border rounded-lg p-4 mb-6" data-testid="pending-card-order">
       <div className="flex items-start gap-3">
-        <div className="flex-shrink-0 mt-1">
+        <div className="shrink-0 mt-1">
           <Package className="w-5 h-5 text-warning" />
         </div>
         <div className="flex-1 min-w-0">

src/context/AuthContext.tsx

@@ -8,7 +8,7 @@ import { jwtDecode } from "jwt-decode";
 import { type ReactNode, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { SiweMessage } from "siwe";
 import { toast } from "sonner";
-import { useSignMessage, useAccount, useConnections } from "wagmi";
+import { useSignMessage, useConnection, useConnections } from "wagmi";
 import { getAddress } from "viem";
 
 export const LOCALSTORAGE_JWT_KEY = "gp-ui.jwt";
@@ -36,7 +36,7 @@ const AuthContextProvider = ({ children }: AuthContextProps) => {
   const [isAuthenticating, setIsAuthenticating] = useState(false);
   const [isLocaStorageLoading, setIsLocaStorageLoading] = useState(true);
   const [contextKey, setContextKey] = useState(0);
-  const { address, chainId } = useAccount();
+  const { address, chainId } = useConnection();
   const { signMessageAsync } = useSignMessage();
   const connections = useConnections();
   const renewalTimeoutRef = useRef<NodeJS.Timeout | null>(null);

src/hooks/useAppInitialization.ts

@@ -1,11 +1,11 @@
 import { useEffect, useState, useRef, useCallback } from "react";
-import { useAccount, useConnections } from "wagmi";
+import { useConnection, useConnections } from "wagmi";
 import { useAuth } from "@/context/AuthContext";
 import { useUser } from "@/context/UserContext";
 
 export const useAppInitialization = () => {
   const [isInitializing, setIsInitializing] = useState(true);
-  const { isConnected, isConnecting } = useAccount();
+  const { isConnected, isConnecting } = useConnection();
   const connections = useConnections();
   const { isAuthenticated, showInitializingLoader: authShowsLoader } = useAuth();
   const { showInitializingLoader: userShowsLoader } = useUser();

src/hooks/useGnosisChainEnforcer.ts

@@ -1,13 +1,13 @@
 import { useEffect } from "react";
-import { useAccount, useSwitchChain } from "wagmi";
+import { useConnection, useSwitchChain } from "wagmi";
 import { gnosis } from "wagmi/chains";
 
 /**
  * Hook to ensure the wallet is always connected to Gnosis chain
  * Automatically switches to Gnosis chain if connected to a different network
  */
 export const useGnosisChainEnforcer = () => {
-  const { chainId, isConnected } = useAccount();
+  const { chainId, isConnected } = useConnection();
   const { switchChain } = useSwitchChain();
 
   useEffect(() => {

src/hooks/useSafeSignerVerification.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useEffect } from "react";
 import type { Address } from "viem";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 import { getApiV1Owners } from "@/client";
 import { useUser } from "@/context/UserContext";
 import { extractErrorMessage } from "@/utils/errorHelpers";
@@ -12,7 +12,7 @@ interface UseSafeSignerVerificationResult {
 }
 
 export const useSafeSignerVerification = (): UseSafeSignerVerificationResult => {
-  const { address: connectedAddress } = useAccount();
+  const { address: connectedAddress } = useConnection();
   const { safeConfig } = useUser();
 
   const [safeSigners, setSafeSigners] = useState<Address[] | null>(null);

src/hooks/useSmartWallet.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from "react";
-import { useAccount, usePublicClient } from "wagmi";
+import { useConnection, usePublicClient } from "wagmi";
 import type { Address } from "viem";
 
 interface UseSmartWalletReturn {
@@ -11,7 +11,7 @@ interface UseSmartWalletReturn {
 export const useSmartWallet = (): UseSmartWalletReturn => {
   const [isSmartWallet, setIsSmartWallet] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const { address } = useAccount();
+  const { address } = useConnection();
   const publicClient = usePublicClient();
 
   const checkSmartWallet = useCallback(() => {