Update wagmi

components/Campaigns/Details/Leaderboard.tsx

@@ -5,7 +5,7 @@ import useSWR from "swr"
 import { ApiResponse } from "../../../Models/ApiResponse"
 import ClickTooltip from "../../Tooltips/ClickTooltip"
 import { Address, getExplorerUrl } from "@/lib/address"
-import { useAccount } from "wagmi"
+import { useConnection } from "wagmi"
 import { truncateDecimals } from "../../utils/RoundDecimals"
 import AddressIcon from "../../AddressIcon";
 import Modal from "../../modal/modal";
@@ -18,7 +18,7 @@ type Props = {
 }
 const Component: FC<Props> = ({ campaign }) => {
     const [openTopModal, setOpenTopModal] = useState(false)
-    const { address } = useAccount();
+    const { address } = useConnection();
 
     const handleOpenTopModal = () => {
         setOpenTopModal(true)

components/Swap/Withdraw/Wallet/WithdrawalProviders/EVMWalletWithdraw/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 import { PublishedSwapTransactions } from "@/lib/apiClients/layerSwapApiClient";
 import { ChangeNetworkButton, ConnectWalletButton } from "../../Common/buttons";
 import TransferTokenButton from "./TransferToken";
@@ -16,7 +16,7 @@ export const EVMWalletWithdrawal: FC<WithdrawPageProps> = ({
 }) => {
 
     const { source_network, destination_network, destination_address } = swapBasicData
-    const { isConnected, chain: activeChain } = useAccount();
+    const { isConnected, chain: activeChain } = useConnection();
     const selectedSourceAccount = useSelectedAccount("from", swapBasicData.source_network.name);
     const { sameAccountNetwork } = useQueryState()
     const { wallets } = useWallet(source_network, 'withdrawal')

components/Swap/Withdraw/Wallet/WithdrawalProviders/Loopring/index.tsx

@@ -1,7 +1,7 @@
 import { Lock } from 'lucide-react';
 import { FC, useCallback, useEffect, useState } from 'react'
 import toast from 'react-hot-toast';
-import { useAccount } from 'wagmi';
+import { useConnection } from 'wagmi';
 import { ActivationTokenPicker } from './ActivationTokentPicker';
 import { useActivationData, useLoopringAccount, useLoopringTokens } from './hooks';
 import { LoopringAPI } from '@/lib/loopring/LoopringAPI';
@@ -21,7 +21,7 @@ export const LoopringWalletWithdraw: FC<WithdrawPageProps> = ({ swapBasicData, r
     const [selectedActivationAsset, setSelectedActivationAsset] = useState<string>()
     const { source_network, source_token } = swapBasicData;
 
-    const { isConnected, address: fromAddress, chain } = useAccount();
+    const { isConnected, address: fromAddress, chain } = useConnection();
     const { account: accInfo, isLoading: loadingAccount, noAccount, mutate: refetchAccount } = useLoopringAccount({ address: fromAddress })
     const { availableBalances, defaultValue, loading: activationDataIsLoading, feeData } = useActivationData(accInfo?.accountId)
     const [unlockedAccount, setUnlockedAccount] = useState<UnlockedAccount | undefined>()

components/Swap/Withdraw/Wallet/WithdrawalProviders/TempoWalletWithdraw/TransferToken.tsx

@@ -1,11 +1,11 @@
 import { FC, useCallback, useState } from "react";
 import { useConfig } from "wagmi";
-import { encodeFunctionData, erc20Abi, numberToHex, parseUnits } from 'viem'
+import { numberToHex, parseUnits } from 'viem'
+import { Actions } from 'wagmi/tempo'
 import { ActionData, TransferProps } from "../../Common/sharedTypes";
 import TransactionMessage from "../EVMWalletWithdraw/transactionMessage";
 import { SendTransactionButton } from "../../Common/buttons";
 import { isMobile } from "@/lib/openLink";
-import { sendTransaction } from '@wagmi/core'
 import { SwapBasicData } from "@/lib/apiClients/layerSwapApiClient";
 import { useSelectedAccount } from "@/context/swapAccounts";
 import useWallet from "@/hooks/useWallet";
@@ -38,7 +38,7 @@ const TempoTransferTokenButton: FC<Props> = ({
     const { gasData } = useSWRGas(selectedSourceAccount?.address, swapData?.source_network)
     const { health, suggestRpcForCurrentChain, isSuggestingRpc, checkManually } = useWalletRpcHealth()
 
-    const clickHandler = useCallback(async ({ amount, callData, sequenceNumber, depositAddress }: TransferProps) => {
+    const clickHandler = useCallback(async ({ amount, sequenceNumber, depositAddress }: TransferProps) => {
         setButtonClicked(true)
         setError(undefined)
         setLoading(true)
@@ -55,34 +55,19 @@ const TempoTransferTokenButton: FC<Props> = ({
             if (!tokenContract)
                 throw new Error('Missing token contract for TIP20 transfer')
 
-            let data = encodeFunctionData({
-                abi: erc20Abi,
-                functionName: 'transfer',
-                args: [
-                    depositAddress as `0x${string}`,
-                    parseUnits(amount.toString(), swapData.source_token.decimals)
-                ]
-            })
-
-            if (sequenceNumber != null) {
-                const memo = numberToHex(sequenceNumber, { size: 8 })
-                data = `${data}${memo.slice(2)}` as `0x${string}`
-            }
-
-            const tx = {
-                chainId,
-                to: tokenContract as `0x${string}`,
-                value: 0n,
-                gas: gasData?.gas ? BigInt(gasData.gas) : undefined,
-                data,
-                account: selectedSourceAccount.address as `0x${string}`
-            }
-
             if (isMobile() && wallet?.metadata?.deepLink) {
                 window.location.href = wallet.metadata?.deepLink
                 await new Promise(resolve => setTimeout(resolve, 100))
             }
-            const hash = await sendTransaction(config, tx)
+
+            const hash = await Actions.token.transfer(config, {
+                token: tokenContract as `0x${string}`,
+                to: depositAddress as `0x${string}`,
+                amount: parseUnits(amount.toString(), swapData.source_token.decimals),
+                account: selectedSourceAccount.address as `0x${string}`,
+                ...(sequenceNumber != null ? { memo: numberToHex(sequenceNumber, { size: 8 }) } : {}),
+                ...(gasData?.gas ? { gas: BigInt(gasData.gas) } : {}),
+            })
 
             if (hash) {
                 return hash

components/Swap/Withdraw/Wallet/WithdrawalProviders/TempoWalletWithdraw/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 import { PublishedSwapTransactions } from "@/lib/apiClients/layerSwapApiClient";
 import { ChangeNetworkButton, ConnectWalletButton } from "../../Common/buttons";
 import TempoTransferTokenButton from "./TransferToken";
@@ -8,15 +8,14 @@ import { useQueryState } from "@/context/query";
 import { WithdrawPageProps } from "../../Common/sharedTypes";
 import { useSelectedAccount } from "@/context/swapAccounts";
 import useWallet from "@/hooks/useWallet";
-
 export const TempoWalletWithdrawal: FC<WithdrawPageProps> = ({
     swapBasicData,
     refuel,
     swapId
 }) => {
 
     const { source_network, destination_network, destination_address } = swapBasicData
-    const { isConnected, chain: activeChain } = useAccount();
+    const { isConnected, chain: activeChain } = useConnection();
     const selectedSourceAccount = useSelectedAccount("from", swapBasicData.source_network.name);
     const { sameAccountNetwork } = useQueryState()
     const { wallets } = useWallet(source_network, 'withdrawal')

components/Swap/Withdraw/Wallet/WithdrawalProviders/ZKsyncWalletWithdraw.tsx

@@ -6,7 +6,7 @@ import { utils } from 'ethers';
 import { useEthersSigner } from '@/lib/ethersToViem/ethers';
 import { ButtonWrapper, ChangeNetworkButton, ConnectWalletButton, SendTransactionButton } from '../Common/buttons';
 import { useSettingsState } from '@/context/settings';
-import { useAccount } from 'wagmi';
+import { useConnection } from 'wagmi';
 import ClickTooltip from '@/components/Tooltips/ClickTooltip';
 import SignatureIcon from '@/components/icons/SignatureIcon';
 import { formatUnits } from "viem";
@@ -22,7 +22,7 @@ export const ZkSyncWalletWithdrawStep: FC<WithdrawPageProps> = ({ swapBasicData,
     const [accountIsActivated, setAccountIsActivated] = useState(false);
     const [activationFee, setActivationFee] = useState<({ feeInAsset: number, feeInUsd: number } | undefined)>(undefined);
     const { source_network, source_token } = swapBasicData;
-    const { chain } = useAccount();
+    const { chain } = useConnection();
     const signer = useEthersSigner();
 
     const { networks: layers } = useSettingsState();

components/Swap/Withdraw/Wallet/WithdrawalProviders/paradex/Evm.tsx

@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import { ChangeNetworkButton, ConnectWalletButton, SendTransactionButton } from '../../Common/buttons';
-import { useAccount } from 'wagmi';
+import { useConnection } from 'wagmi';
 import { useSettingsState } from '@/context/settings';
 import KnownInternalNames from '@/lib/knownIds';
 import { useEthersSigner } from '@/lib/ethersToViem/ethers';
@@ -19,7 +19,7 @@ const ParadexWalletWithdrawStep: FC<WithdrawPageProps> = ({ swapBasicData, refue
     const l1Network = networks.find(n => n.name === KnownInternalNames.Networks.EthereumMainnet || n.name === KnownInternalNames.Networks.EthereumSepolia);
     const { source_token } = swapBasicData;
 
-    const { chain } = useAccount();
+    const { chain } = useConnection();
 
     const selectedSourceAccount = useSelectedAccount("from", l1Network?.name);
     const { wallets } = useWallet(l1Network, 'withdrawal')

components/WalletProviders/ActiveEvmAccount.tsx

@@ -1,5 +1,5 @@
 import { Context, FC, createContext, useCallback, useContext, useMemo, useState } from 'react';
-import { useAccount } from 'wagmi';
+import { useConnection } from 'wagmi';
 
 type ActiveAccountState = {
     activeConnection?: {
@@ -16,7 +16,7 @@ type Props = {
 }
 
 export const ActiveEvmAccountProvider: FC<Props> = ({ children }) => {
-    const activeAccount = useAccount()
+    const activeAccount = useConnection()
     const [selectedAddress, setSelectedAddress] = useState<string>()
 
     const activeConnection = useMemo(() => {

context/evmConnectorsContext.tsx

@@ -56,7 +56,7 @@ const loadWalletConnectWalletRegistry = async (): Promise<WalletConnectWallet[]>
 
 // Create stable connector instances at module level to ensure wagmi can reconnect properly
 const metaMaskConnector = metaMask({
-    dappMetadata: {
+    dapp: {
         name: 'Layerswap',
         url: 'https://layerswap.io/app/',
         iconUrl: 'https://layerswap.io/app/symbol.png'

hooks/useWalletRpcHealth.tsx

@@ -1,4 +1,4 @@
-import { useAccount } from 'wagmi'
+import { useConnection } from 'wagmi'
 import { useCallback, useEffect, useState } from 'react'
 
 export type WalletRpcHealth =
@@ -23,7 +23,7 @@ type SuggestRpcResult =
   | { success: false; error: string }
 
 export function useWalletRpcHealth() {
-  const { isConnected, connector, chainId } = useAccount()
+  const { isConnected, connector, chainId } = useConnection()
   const [health, setHealth] = useState<WalletRpcHealth>({ status: undefined })
   const [isSuggestingRpc, setIsSuggestingRpc] = useState(false)
 

lib/NetworkSettings.ts

@@ -56,6 +56,7 @@ export default class NetworkSettings {
     GasCalculationType?: GasCalculation
     isFeatured?: boolean
     ChainOrder?: number
+    FeeParsingDecimalPlaces?: number
 
     public static KnownSettings: { [network: string]: NetworkSettings } = {};
 
@@ -275,6 +276,12 @@ export default class NetworkSettings {
         NetworkSettings.KnownSettings[KnownInternalNames.Networks.BlastMainnet] = {
             GasCalculationType: GasCalculation.OptimismType,
         };
+        NetworkSettings.KnownSettings[KnownInternalNames.Networks.TempoTestnet] = {
+            FeeParsingDecimalPlaces: 18,
+        };
+        NetworkSettings.KnownSettings[KnownInternalNames.Networks.TempoMainnet] = {
+            FeeParsingDecimalPlaces: 18,
+        };
 
         for (var k in NetworkSettings.KnownSettings) {
             let networkSetting = NetworkSettings.KnownSettings[k];

lib/gases/providers/evmGasProvider.ts

@@ -227,8 +227,8 @@ class getEthereumGas extends getEVMGas {
             return undefined
 
         const totalGas = multiplier * estimatedGasLimit
-
-        const formattedGas = Number(formatUnits(BigInt(totalGas), this.nativeToken?.decimals))
+        const decimals = NetworkSettings.KnownSettings[this.from.name]?.FeeParsingDecimalPlaces || this.nativeToken?.decimals || 18 
+        const formattedGas = Number(formatUnits(BigInt(totalGas), decimals))
         return formattedGas
     }
 

lib/wallets/evm/useEVM.ts

@@ -1,11 +1,11 @@
-import { useConfig, useConnect, useConnectors, useDisconnect, useSwitchAccount, Connector } from "wagmi"
+import { useConfig, useConnect, useConnectors, useDisconnect, useSwitchConnection, Connector } from "wagmi"
 import { NetworkType, NetworkWithTokens } from "@/Models/Network"
 import { useSettingsState } from "@/context/settings"
 import KnownInternalNames from "../../knownIds"
 import { resolveWalletConnectorIcon, resolveWalletConnectorIndex } from "../utils/resolveWalletIcon"
 import { evmConnectorNameResolver } from "./KnownEVMConnectors"
 import { useCallback, useEffect, useMemo } from "react"
-import { CreateConnectorFn, getAccount, getConnections } from '@wagmi/core'
+import { CreateConnectorFn, getConnection, getConnections } from '@wagmi/core'
 import { isMobile } from "../../isMobile"
 import convertSvgComponentToBase64 from "@/components/utils/convertSvgComponentToBase64"
 import { LSConnector } from "../connectors/types"
@@ -101,12 +101,12 @@ export default function useEVM(): WalletProvider {
         return supportedNetworksByPurpose.length === 0 || !supportedNetworksByPurpose.includes(network)
     }, [withdrawalSupportedNetworks, autofillSupportedNetworks, asSourceSupportedNetworks])
 
-    const { disconnectAsync } = useDisconnect()
-    const { switchAccountAsync } = useSwitchAccount()
+    const { mutateAsync: disconnectAsync } = useDisconnect()
+    const { mutateAsync: switchConnectionAsync } = useSwitchConnection()
     const { activeConnection, setActiveAddress } = useActiveEvmAccount()
     const allConnectors = useConnectors()
     const config = useConfig()
-    const { connectAsync } = useConnect();
+    const { mutateAsync: connectAsync } = useConnect();
 
     const { setSelectedConnector, isWalletModalOpen } = useConnectModal()
     const {
@@ -368,12 +368,12 @@ export default function useEVM(): WalletProvider {
         const connector = resolveWalletConnector(wallet)
         if (!connector)
             throw new Error("Connector not found")
-        const { accounts } = await switchAccountAsync({ connector })
+        const { accounts } = await switchConnectionAsync({ connector })
         const account = accounts.find(a => a.toLowerCase() === address.toLowerCase())
         if (!account)
             throw new Error("Account not found")
         setActiveAddress(account)
-    }, [resolveWalletConnector, switchAccountAsync])
+    }, [config, switchConnectionAsync])
 
     const switchChain = async (wallet: Wallet, chainId: string | number) => {
         const connector = resolveWalletConnector(wallet)
@@ -546,15 +546,15 @@ const resolveSupportedNetworks = (supportedNetworks: string[], connectorId: stri
 
 async function attemptGetAccount(config, maxAttempts = 5) {
     for (let attempt = 0; attempt < maxAttempts; attempt++) {
-        const account = getAccount(config);
+        const account = getConnection(config);
 
         if (account.address) {
             return account;
         }
         await sleep(500);
     }
 
-    return getAccount(config);
+    return getConnection(config);
 }
 function dedupePreferInjected(arr: Connector<CreateConnectorFn>[]) {
     // Helper to strip off any prefix up to the last dot

lib/wallets/fuel/useFuel.ts

@@ -3,7 +3,7 @@ import {
     useConnectors,
     useFuel as useGlobalFuel,
 } from '@fuels/react';
-import { Connector, useAccount } from "wagmi";
+import { Connector, useConnection } from "wagmi";
 import {
     FuelConnector,
     FuelConnectorEventTypes,
@@ -29,7 +29,7 @@ export default function useFuel(): WalletProvider {
     const name = 'Fuel'
     const id = 'fuel'
 
-    const { address: evmAddress, connector: evmConnector } = useAccount()
+    const { address: evmAddress, connector: evmConnector } = useConnection()
     const { connectors } = useConnectors()
     const { fuel } = useGlobalFuel()
     const { networks } = useSettingsState()

package.json

@@ -15,17 +15,19 @@
   },
   "dependencies": {
     "@badrap/bar-of-progress": "^0.2.2",
+    "@base-org/account": "^2.5.1",
     "@bigmi/client": "^0.3.1",
     "@bigmi/core": "^0.3.1",
     "@bigmi/react": "^0.3.1",
     "@bitcoinerlab/secp256k1": "^1.2.0",
     "@bitget-wallet/web3-sdk": "^0.0.8",
+    "@coinbase/wallet-sdk": "^4.3.6",
     "@fuel-ts/account": "^0.101.3",
     "@fuel-ts/address": "^0.101.3",
     "@fuels/react": "^0.43.2",
     "@headlessui/react": "^2.1.1",
     "@imtbl/sdk": "1.45.10",
-    "@metamask/sdk": "^0.33.1",
+    "@metamask/connect-evm": "^0.9.1",
     "@number-flow/react": "0.6.0",
     "@paradex/sdk": "^0.8.1",
     "@posthog/react": "^1.4.0",
@@ -102,8 +104,8 @@
     "tailwindcss-animate": "^1.0.5",
     "ton": "^13.9.0",
     "uuid": "^9.0.0",
-    "viem": "^2.21.16",
-    "wagmi": "2.14.11",
+    "viem": "^2.47.10",
+    "wagmi": "^3.6.0",
     "web-encoding": "^1.1.5",
     "web3": "1.8.0",
     "zksync": "0.13.1",