Upgrade to wagmi v3 with compatible dynamic sdk and typescript versions

demo/package.json

@@ -14,17 +14,17 @@
     "trailingComma": "none"
   },
   "dependencies": {
-    "@dynamic-labs-connectors/abstract-global-wallet-evm": "4.4.3",
-    "@dynamic-labs/bitcoin": "4.40.2",
-    "@dynamic-labs/eclipse": "4.40.2",
-    "@dynamic-labs/ethereum": "4.40.2",
-    "@dynamic-labs/ethereum-core": "4.40.2",
-    "@dynamic-labs/sdk-react-core": "4.40.2",
-    "@dynamic-labs/solana": "4.40.2",
-    "@dynamic-labs/sui": "4.40.2",
-    "@dynamic-labs/tron": "4.40.2",
-    "@dynamic-labs/utils": "4.40.2",
-    "@dynamic-labs/wagmi-connector": "4.40.2",
+    "@dynamic-labs-connectors/abstract-global-wallet-evm": "4.5.0",
+    "@dynamic-labs/bitcoin": "4.52.5",
+    "@dynamic-labs/eclipse": "4.52.5",
+    "@dynamic-labs/ethereum": "4.52.5",
+    "@dynamic-labs/ethereum-core": "4.52.5",
+    "@dynamic-labs/sdk-react-core": "4.52.5",
+    "@dynamic-labs/solana": "4.52.5",
+    "@dynamic-labs/sui": "4.52.5",
+    "@dynamic-labs/tron": "4.52.5",
+    "@dynamic-labs/utils": "4.52.5",
+    "@dynamic-labs/wagmi-connector": "4.52.5",
     "@moonpay/moonpay-react": "^1.8.3",
     "@privy-io/cross-app-connect": "0.2.2",
     "@radix-ui/colors": "^0.1.8",
@@ -47,13 +47,13 @@
     "tronweb": "^6.0.4",
     "usehooks-ts": "^3.1.0",
     "viem": ">=2.26.0",
-    "wagmi": "^2.15.6"
+    "wagmi": "^3.1.0"
   },
   "devDependencies": {
-    "@dynamic-labs/types": "4.10.4",
+    "@dynamic-labs/types": "4.52.5",
     "@types/node": "^12.12.21",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "typescript": "5.4.5"
+    "typescript": "5.7.3"
   }
 }

demo/pages/hooks/useRelayConfig.tsx

@@ -3,11 +3,11 @@ import { useState } from 'react'
 import { MAINNET_RELAY_API } from '@relayprotocol/relay-sdk'
 
 import { useRelayConfig } from '@relayprotocol/relay-kit-hooks'
-import { useAccount } from 'wagmi'
+import { useConnection } from 'wagmi'
 import { ConnectButton } from 'components/ConnectButton'
 
 const UseRelayConfigPage: NextPage = () => {
-  const { address } = useAccount()
+  const { address } = useConnection()
   const [toChainId, setToChainId] = useState<string>('1')
   const [fromChainId, setFromChainId] = useState<string>('8453')
   const [currency, setCurrency] = useState<string>('eth')

package.json

@@ -37,7 +37,7 @@
     "openapi-typescript": "^6.7.3",
     "prettier": "^3.5.0",
     "tslib": "^2.6.2",
-    "typescript": "5.4.5"
+    "typescript": "5.7.3"
   },
   "prettier": {
     "semi": false,

packages/hooks/package.json

@@ -39,7 +39,7 @@
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.6.0",
-    "typescript": "5.4.5",
+    "typescript": "5.7.3",
     "typescript-eslint": "^7.13.1"
   },
   "peerDependencies": {

packages/sdk/package.json

@@ -50,7 +50,7 @@
     "@vitest/ui": "^1.6.0",
     "node-fetch": "^3.3.2",
     "rimraf": "^5.0.5",
-    "typescript": "5.4.5",
+    "typescript": "5.7.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {

packages/ui/package.json

@@ -60,7 +60,7 @@
     "node-fetch": "^3.3.2",
     "postcss": "^8",
     "rimraf": "^5.0.5",
-    "typescript": "5.4.5",
+    "typescript": "5.7.3",
     "typescript-eslint": "^7.13.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0"
@@ -71,7 +71,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "viem": ">=2.26.0",
-    "wagmi": "^2.15.6"
+    "wagmi": "^3.1.0"
   },
   "peerDependenciesMeta": {
     "@moonpay/moonpay-react": {

packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx

@@ -27,7 +27,7 @@ import {
 import { useRelayClient } from '../../../hooks/index.js'
 import { EventNames } from '../../../constants/events.js'
 import { ProviderOptionsContext } from '../../../providers/RelayKitProvider.js'
-import { useAccount } from 'wagmi'
+import { useConnection } from 'wagmi'
 import {
   calculatePriceTimeEstimate,
   extractDepositAddress,
@@ -114,7 +114,7 @@ export const DepositAddressModalRenderer: FC<Props> = ({
 
   const relayClient = useRelayClient()
   const providerOptionsContext = useContext(ProviderOptionsContext)
-  const { connector } = useAccount()
+  const { connector } = useConnection()
   const deadAddress = getDeadAddress(fromChain?.vmType, fromChain?.id)
 
   const quote = fetchingQuote ? undefined : quoteData

packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx

@@ -30,7 +30,7 @@ import { OnrampMoonPayStep } from './steps/OnrampMoonPayStep.js'
 import { formatBN } from '../../../../utils/numbers.js'
 import { ErrorStep } from '../../../common/TransactionModal/steps/ErrorStep.js'
 import { errorToJSON } from '../../../../utils/errors.js'
-import { useAccount } from 'wagmi'
+import { useConnection } from 'wagmi'
 import { mainnet } from 'viem/chains'
 
 export enum OnrampStep {
@@ -103,7 +103,7 @@ export const OnrampModal: FC<OnrampModalProps> = ({
   >()
   const [moonPayRequestId, setMoonPayRequestId] = useState<string | undefined>()
   const client = useRelayClient()
-  const { connector } = useAccount()
+  const { connector } = useConnection()
   const [moonPayIdAppended, setMoonPayIdAppended] = useState(false)
   const { data: ethTokenPriceResponse } = useTokenPrice(
     client?.baseApiUrl,

packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx

@@ -17,7 +17,7 @@ import type { LinkedWallet, Token } from '../../../../types/index.js'
 import type { ChainVM, Execute, RelayChain } from '@relayprotocol/relay-sdk'
 import { MultiWalletDropdown } from '../../../common/MultiWalletDropdown.js'
 import { CustomAddressModal } from '../../../common/CustomAddressModal.js'
-import { useAccount } from 'wagmi'
+import { useConnection } from 'wagmi'
 import { OnrampModal } from '../modals/OnrampModal.js'
 import { formatBN } from '../../../../utils/numbers.js'
 import { findSupportedWallet } from '../../../../utils/address.js'
@@ -92,7 +92,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
   )
   const [addressModalOpen, setAddressModalOpen] = useState(false)
   const [onrampModalOpen, setOnrampModalOpen] = useState(false)
-  const { isConnected } = useAccount()
+  const { isConnected } = useConnection()
   const providerOptionsContext = useContext(ProviderOptionsContext)
   const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides
 

packages/ui/src/components/widgets/SwapWidgetRenderer.tsx

@@ -15,8 +15,7 @@ import {
 } from '../../hooks/index.js'
 import type { Address, WalletClient } from 'viem'
 import { formatUnits, parseUnits } from 'viem'
-import { useAccount, useWalletClient } from 'wagmi'
-import { useCapabilities } from 'wagmi/experimental'
+import { useConnection, useWalletClient, useCapabilities } from 'wagmi'
 import type { Token } from '../../types/index.js'
 import { useQueryClient } from '@tanstack/react-query'
 import type { ChainVM, Execute } from '@relayprotocol/relay-sdk'
@@ -200,7 +199,7 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
   const providerOptionsContext = useContext(ProviderOptionsContext)
   const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides
   const relayClient = useRelayClient()
-  const { connector } = useAccount()
+  const { connector } = useConnection()
   const walletClient = useWalletClient()
   const [customToAddress, setCustomToAddress] = useState<
     Address | string | undefined

packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx

@@ -14,8 +14,7 @@ import {
 } from '../../../../hooks/index.js'
 import type { Address, WalletClient } from 'viem'
 import { formatUnits, parseUnits } from 'viem'
-import { useAccount, useWalletClient } from 'wagmi'
-import { useCapabilities } from 'wagmi/experimental'
+import { useConnection, useWalletClient, useCapabilities } from 'wagmi'
 import type { Token } from '../../../../types/index.js'
 import { useQueryClient } from '@tanstack/react-query'
 import type { ChainVM, Execute } from '@relayprotocol/relay-sdk'
@@ -204,7 +203,7 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
   const providerOptionsContext = useContext(ProviderOptionsContext)
   const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides
   const relayClient = useRelayClient()
-  const { connector } = useAccount()
+  const { connector } = useConnection()
   const walletClient = useWalletClient()
   const [customToAddress, setCustomToAddress] = useState<
     Address | string | undefined

packages/ui/src/components/widgets/WidgetContainer.tsx

@@ -9,7 +9,7 @@ import type {
   AdaptedWallet,
   Execute
 } from '@relayprotocol/relay-sdk'
-import { useAccount } from 'wagmi'
+import { useConnection } from 'wagmi'
 import type { LinkedWallet } from '../../types/index.js'
 
 export type WidgetContainerProps = {
@@ -93,7 +93,7 @@ const WidgetContainer: FC<WidgetContainerProps> = ({
   setCustomToAddress
 }) => {
   const isMounted = useMounted()
-  const { isConnected } = useAccount()
+  const { isConnected } = useConnection()
 
   return (
     <div className="relay-kit-reset">

packages/ui/src/hooks/useWalletAddress.ts

@@ -1,15 +1,15 @@
 import { useEffect, useState } from 'react'
 import type { AdaptedWallet } from '@relayprotocol/relay-sdk'
 import type { Address } from 'viem'
-import { useAccount } from 'wagmi'
+import { useConnection } from 'wagmi'
 import type { LinkedWallet } from '../types/index.js'
 
 export default function (
   wallet?: AdaptedWallet,
   linkedWallets?: LinkedWallet[]
 ): string | Address | undefined {
   const [address, setAddress] = useState<string | Address | undefined>()
-  const { address: wagmiAddress } = useAccount()
+  const { address: wagmiAddress } = useConnection()
 
   useEffect(() => {
     const getWalletAddress = async (wallet?: AdaptedWallet) => {