feat(synapse-interface): Upgraded wagmi, viem, rainbowkit to 2.x

packages/explorer-ui/package.json

@@ -39,8 +39,6 @@
     "synapse-constants": "^1.3.8",
     "tailwind-merge": "^1.3.0",
     "tiny-warning": "^1.0.3",
-    "viem": "^1.19.13",
-    "wagmi": "^1.4.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

packages/synapse-constants/constants/minichef.ts

@@ -1,4 +1,4 @@
-import { Address } from 'wagmi'
+import { Address } from 'viem'
 
 import * as ALL_CHAINS from './chains/master'
 

packages/synapse-interface/README.md

@@ -24,7 +24,7 @@ This guide is for running `@synapsecns/synapse-interface` and `@synapsecns/sdk-r
 
 ## Prerequisites
 
-Ensure you've installed Node.js (version >=18.17.0) and Yarn on your machine. This setup assumes you're using Yarn Workspaces and Lerna to manage your project, with `@synapsecns/sdk-router` and `@synapsecns/synapse-interface` as part of the same workspace.
+Ensure you've installed Node.js (version 18.17.0) and Yarn on your machine. This setup assumes you're using Yarn Workspaces and Lerna to manage your project, with `@synapsecns/sdk-router` and `@synapsecns/synapse-interface` as part of the same workspace.
 
 ## Steps
 

packages/synapse-interface/actions/approveErc20Token.ts

@@ -1,16 +1,15 @@
 import {
-  Address,
-  erc20ABI,
-  prepareWriteContract,
-  waitForTransaction,
+  simulateContract,
+  waitForTransactionReceipt,
   writeContract,
 } from '@wagmi/core'
-import { TransactionReceipt } from 'viem'
+import { Address, erc20Abi } from 'viem'
 
 import { MAX_UINT256 } from '@/constants'
 import { USDT } from '@/constants/tokens/bridgeable'
 import { USDT_ABI } from '@/constants/abis/usdtAbi'
 import { ETH as Ethereum } from '@/constants/chains/master'
+import { wagmiConfig } from '@/wagmiConfig'
 
 export const approveErc20Token = async ({
   chainId,
@@ -28,20 +27,20 @@ export const approveErc20Token = async ({
   if (tokenAddress === USDT.addresses[Ethereum.id]) {
     abi = USDT_ABI
   } else {
-    abi = erc20ABI
+    abi = erc20Abi
   }
 
-  const { request } = await prepareWriteContract({
+  const { request } = await simulateContract(wagmiConfig, {
     chainId,
     address: tokenAddress,
     abi,
     functionName: 'approve',
     args: [spender, amount ?? MAX_UINT256],
   })
 
-  const { hash } = await writeContract(request)
+  const hash = await writeContract(wagmiConfig, request)
 
-  const txReceipt: TransactionReceipt = await waitForTransaction({ hash })
+  const txReceipt = await waitForTransactionReceipt(wagmiConfig, { hash })
 
   return txReceipt
 }

packages/synapse-interface/actions/getErc20TokenAllowance.ts

@@ -1,5 +1,7 @@
-import { erc20ABI } from 'wagmi'
-import { Address, readContract } from '@wagmi/core'
+import { readContract } from '@wagmi/core'
+import { Address, erc20Abi } from 'viem'
+
+import { wagmiConfig } from '@/wagmiConfig'
 
 export const getErc20TokenAllowance = async ({
   address,
@@ -13,10 +15,10 @@ export const getErc20TokenAllowance = async ({
   spender: Address
 }): Promise<bigint> => {
   try {
-    const allowance = await readContract({
+    const allowance = await readContract(wagmiConfig, {
       chainId,
       address: tokenAddress,
-      abi: erc20ABI,
+      abi: erc20Abi,
       functionName: 'allowance',
       args: [address, spender],
     })

packages/synapse-interface/actions/harvestLpPool.ts

@@ -1,12 +1,12 @@
 import {
-  Address,
-  prepareWriteContract,
-  waitForTransaction,
+  simulateContract,
+  waitForTransactionReceipt,
   writeContract,
 } from '@wagmi/core'
-import { TransactionReceipt } from 'viem'
+import { Address } from 'viem'
 
 import { MINICHEF_ABI } from '@/constants/abis/miniChef'
+import { wagmiConfig } from '@/wagmiConfig'
 
 export const harvestLpPool = async ({
   address,
@@ -19,16 +19,16 @@ export const harvestLpPool = async ({
   poolId: number
   lpAddress: Address
 }) => {
-  const { request } = await prepareWriteContract({
+  const { request } = await simulateContract(wagmiConfig, {
     chainId,
     address: lpAddress,
     abi: MINICHEF_ABI,
     functionName: 'harvest',
     args: [poolId, address],
   })
 
-  const { hash } = await writeContract(request)
-  const txReceipt: TransactionReceipt = await waitForTransaction({ hash })
+  const hash = await writeContract(wagmiConfig, request)
+  const txReceipt = await waitForTransactionReceipt(wagmiConfig, { hash })
 
   return txReceipt
 }

packages/synapse-interface/actions/stakeLpToken.ts

@@ -1,12 +1,12 @@
 import {
-  Address,
-  prepareWriteContract,
-  waitForTransaction,
+  simulateContract,
+  waitForTransactionReceipt,
   writeContract,
 } from '@wagmi/core'
-import { TransactionReceipt } from 'viem'
+import { Address } from 'viem'
 
 import { MINICHEF_ABI } from '@/constants/abis/miniChef'
+import { wagmiConfig } from '@/wagmiConfig'
 
 export const stakeLpToken = async ({
   address,
@@ -21,16 +21,16 @@ export const stakeLpToken = async ({
   amount: bigint
   lpAddress: Address
 }) => {
-  const { request } = await prepareWriteContract({
+  const { request } = await simulateContract(wagmiConfig, {
     chainId,
     address: lpAddress,
     abi: MINICHEF_ABI,
     functionName: 'deposit',
     args: [poolId, amount, address],
   })
 
-  const { hash } = await writeContract(request)
-  const txReceipt: TransactionReceipt = await waitForTransaction({ hash })
+  const hash = await writeContract(wagmiConfig, request)
+  const txReceipt = await waitForTransactionReceipt(wagmiConfig, { hash })
 
   return txReceipt
 }

packages/synapse-interface/actions/swapPoolAddLiquidity.ts

@@ -1,11 +1,11 @@
 import {
-  prepareWriteContract,
-  waitForTransaction,
+  simulateContract,
+  waitForTransactionReceipt,
   writeContract,
 } from '@wagmi/core'
-import { TransactionReceipt } from 'viem'
 
 import { getSwapDepositContractFields } from '@/utils/getSwapDepositContractFields'
+import { wagmiConfig } from '@/wagmiConfig'
 
 export const swapPoolAddLiquidity = async ({
   chainId,
@@ -42,10 +42,10 @@ export const swapPoolAddLiquidity = async ({
     pwcConfig = pwcBaseConfig
   }
 
-  const { request } = await prepareWriteContract(pwcConfig)
+  const { request } = await simulateContract(wagmiConfig, pwcConfig)
 
-  const { hash } = await writeContract(request)
-  const txReceipt: TransactionReceipt = await waitForTransaction({ hash })
+  const hash = await writeContract(wagmiConfig, request)
+  const txReceipt = await waitForTransactionReceipt(wagmiConfig, { hash })
 
   return txReceipt
 }

packages/synapse-interface/actions/swapPoolCalculateAddLiquidity.ts

@@ -2,6 +2,7 @@ import { readContract } from '@wagmi/core'
 
 import { Token } from '@/utils/types'
 import { SYNAPSE_ROUTER_ABI } from '@/constants/abis/synapseRouter'
+import { wagmiConfig } from '@/wagmiConfig'
 
 const ROUTER_ADDRESS = '0x7E7A0e201FD38d3ADAA9523Da6C109a07118C96a'
 
@@ -14,7 +15,7 @@ export const swapPoolCalculateAddLiquidity = async ({
   pool: Token
   inputs: bigint[]
 }) => {
-  const amount = await readContract({
+  const amount = await readContract(wagmiConfig, {
     chainId,
     address: ROUTER_ADDRESS,
     abi: SYNAPSE_ROUTER_ABI,

packages/synapse-interface/actions/swapPoolCalculateTokenAmount.ts

@@ -2,6 +2,7 @@ import { readContract } from '@wagmi/core'
 
 import { getSwapDepositContractFields } from '@/utils/getSwapDepositContractFields'
 import { Token } from '@/utils/types'
+import { wagmiConfig } from '@/wagmiConfig'
 
 export const swapPoolCalculateTokenAmount = async ({
   chainId,
@@ -14,7 +15,7 @@ export const swapPoolCalculateTokenAmount = async ({
 }) => {
   const { abi, poolAddress } = getSwapDepositContractFields(pool, chainId)
 
-  const minToMint = await readContract({
+  const minToMint = await readContract(wagmiConfig, {
     chainId,
     address: poolAddress,
     abi,

packages/synapse-interface/actions/swapPoolRemoveLiquidity.ts

@@ -1,13 +1,13 @@
 import { ALL } from '@constants/withdrawTypes'
 import {
-  prepareWriteContract,
-  waitForTransaction,
+  simulateContract,
+  waitForTransactionReceipt,
   writeContract,
 } from '@wagmi/core'
-import { TransactionReceipt } from 'viem'
 
 import { getSwapDepositContractFields } from '@/utils/getSwapDepositContractFields'
 import { subtractSlippageBigInt } from '@/utils/slippage'
+import { wagmiConfig } from '@/wagmiConfig'
 
 export const swapPoolRemoveLiquidity = async ({
   chainId,
@@ -26,7 +26,7 @@ export const swapPoolRemoveLiquidity = async ({
 }) => {
   const { abi, poolAddress } = getSwapDepositContractFields(pool, chainId)
 
-  const { request } = await prepareWriteContract({
+  const { request } = await simulateContract(wagmiConfig, {
     chainId,
     address: poolAddress,
     abi,
@@ -44,8 +44,8 @@ export const swapPoolRemoveLiquidity = async ({
     ],
   })
 
-  const { hash } = await writeContract(request)
-  const txReceipt: TransactionReceipt = await waitForTransaction({ hash })
+  const hash = await writeContract(wagmiConfig, request)
+  const txReceipt = await waitForTransactionReceipt(wagmiConfig, { hash })
 
   return txReceipt
 }

packages/synapse-interface/actions/swapPoolRemoveLiquidityOneToken.ts

@@ -1,13 +1,13 @@
 import {
-  prepareWriteContract,
-  waitForTransaction,
+  simulateContract,
+  waitForTransactionReceipt,
   writeContract,
 } from '@wagmi/core'
-import { TransactionReceipt } from 'viem'
 
 import { getSwapDepositContractFields } from '@/utils/getSwapDepositContractFields'
 import { subtractSlippageBigInt } from '@/utils/slippage'
 import { Token } from '@/utils/types'
+import { wagmiConfig } from '@/wagmiConfig'
 
 export const swapPoolRemoveLiquidityOneToken = async ({
   chainId,
@@ -28,7 +28,7 @@ export const swapPoolRemoveLiquidityOneToken = async ({
 }) => {
   const { abi, poolAddress } = getSwapDepositContractFields(pool, chainId)
 
-  const { request } = await prepareWriteContract({
+  const { request } = await simulateContract(wagmiConfig, {
     chainId,
     address: poolAddress,
     abi,
@@ -45,8 +45,10 @@ export const swapPoolRemoveLiquidityOneToken = async ({
     ],
   })
 
-  const { hash } = await writeContract(request)
-  const txReceipt: TransactionReceipt = await waitForTransaction({ hash })
+  const hash = await writeContract(wagmiConfig, request)
+  const txReceipt = await waitForTransactionReceipt(wagmiConfig, {
+    hash,
+  })
 
   return txReceipt
 }

packages/synapse-interface/actions/unstakeLpToken.ts

@@ -1,12 +1,12 @@
 import {
-  Address,
-  prepareWriteContract,
-  waitForTransaction,
+  simulateContract,
+  waitForTransactionReceipt,
   writeContract,
 } from '@wagmi/core'
-import { TransactionReceipt } from 'viem'
+import { Address } from 'viem'
 
 import { MINICHEF_ABI } from '@/constants/abis/miniChef'
+import { wagmiConfig } from '@/wagmiConfig'
 
 export const unstakeLpToken = async ({
   address,
@@ -21,16 +21,16 @@ export const unstakeLpToken = async ({
   amount: bigint
   lpAddress: Address
 }) => {
-  const { request } = await prepareWriteContract({
+  const { request } = await simulateContract(wagmiConfig, {
     chainId,
     address: lpAddress,
     abi: MINICHEF_ABI,
     functionName: 'withdraw',
     args: [poolId, amount, address],
   })
 
-  const { hash } = await writeContract(request)
-  const txReceipt: TransactionReceipt = await waitForTransaction({ hash })
+  const hash = await writeContract(wagmiConfig, request)
+  const txReceipt = await waitForTransactionReceipt(wagmiConfig, { hash })
 
   return txReceipt
 }

packages/synapse-interface/components/Activity/Activity.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react'
 import _ from 'lodash'
 import Fuse from 'fuse.js'
-import { useAccount, Address } from 'wagmi'
-
+import { useAccount } from 'wagmi'
+import { Address } from 'viem'
 import { useTransactionsState } from '@/slices/transactions/hooks'
 import { usePortfolioState } from '@/slices/portfolio/hooks'
 import { BridgeTransaction } from '@/slices/api/generated'

packages/synapse-interface/components/ConnectionIndicators.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useAccount } from 'wagmi'
-import { switchNetwork } from '@wagmi/core'
-import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { switchChain } from '@wagmi/core'
 import { LoaderIcon } from 'react-hot-toast'
+import { ConnectButton } from '@rainbow-me/rainbowkit'
 
-import { setFromChainId } from '@/slices/bridge/reducer'
 import { CHAINS_BY_ID } from '@/constants/chains'
+import { setFromChainId } from '@/slices/bridge/reducer'
 import { getNetworkButtonBorderHover, getNetworkHover } from '@/styles/chains'
 import { joinClassNames } from '@/utils/joinClassNames'
+import { wagmiConfig } from '@/wagmiConfig'
 
 const Indicator = ({ className }) => (
   <span
@@ -45,7 +46,7 @@ export const ConnectToNetworkButton = ({ chainId }: { chainId: number }) => {
   const handleConnectNetwork: () => Promise<void> = async () => {
     setIsConnecting(true)
     try {
-      await switchNetwork({ chainId: chainId }).then((success) => {
+      await switchChain(wagmiConfig, { chainId }).then((success) => {
         success && dispatch(setFromChainId(chainId))
         scrollToTop()
       })