feat: update version of viem and wagmi

#97

frontend/package.json

@@ -24,11 +24,14 @@
     "@heroicons/react": "2.0.13",
     "@metamask/detect-provider": "^2.0.0",
     "@ramp-network/ramp-instant-sdk": "^4.0.4",
+    "@tanstack/react-query": "^5.20.5",
     "@typechain/ethers-v6": "^0.5.0",
     "@types/lodash": "^4.14.198",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.4",
-    "@web3modal/wagmi": "^3.0.2",
+    "@wagmi/connectors": "^4.1.14",
+    "@wagmi/core": "^2.6.5",
+    "@web3modal/wagmi": "^4.0.5",
     "@xstate/react": "^3.2.2",
     "debug": "^4.3.4",
     "ethers": "^6.7.1",
@@ -42,11 +45,11 @@
     "react-intersection-observer": "^9.5.3",
     "react-router-dom": "^6.15.0",
     "ts-pattern": "^5.0.6",
+    "ts-results": "^3.3.0",
     "use-query-params": "^2.2.1",
     "usehooks-ts": "^2.9.1",
-    "viem": "^1.15.3",
-    "wagmi": "^1.4.3",
-    "winston": "^3.10.0",
+    "viem": "^2.7.9",
+    "wagmi": "^2.5.7",
     "xstate": "^4.38.2"
   },
   "devDependencies": {
@@ -76,8 +79,6 @@
     "eslint-plugin-storybook": "^0.6.13",
     "fp-ts": "^2.16.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.3.1",
-    "jest-environment-jsdom": "29.3.1",
     "lint-staged": "13.1.0",
     "postcss": "8.4.21",
     "prettier": "2.8.2",

frontend/src/components/organisms/onboarding/steps/ChooseNetwork.step.tsx

@@ -1,7 +1,7 @@
 import { MouseEventHandler, useState, useEffect, useCallback } from 'react'
 import { NetworkType } from 'types/ethereum'
 import { Network } from 'ethereum/networks/types'
-import { useSwitchNetwork } from 'wagmi'
+import { useSwitchChain } from 'wagmi'
 import { useNetwork } from 'hooks/useNetwork'
 import { useSetup } from 'hooks/useSetup'
 import { TooltipProvider } from 'components/providers/Tooltip.provider'
@@ -109,14 +109,14 @@ export const ChooseNetwork = () => {
   const { send } = useOnboarding()
   const { network: selectedNetworkFromParams } = useSetup()
   const { chain } = useNetwork()
-  const { switchNetworkAsync } = useSwitchNetwork()
+  const { switchChainAsync } = useSwitchChain()
 
   const onConfirm = useCallback(async () => {
     if (chain?.id === selectedNetwork) {
       send(Commands.NEXT)
       return
     }
-    await switchNetworkAsync?.(hexToNumber(selectedNetwork))
+    await switchChainAsync({ chainId: hexToNumber(selectedNetwork) })
     send(Commands.NEXT)
   }, [selectedNetwork, chain?.id])
 

frontend/src/components/organisms/onboarding/steps/ConnectWallet.step.tsx

@@ -4,16 +4,15 @@ import { useWeb3Modal } from '@web3modal/wagmi/react'
 
 import { queryShadowRootDeep } from 'utils/shadowRoot'
 import { TooltipProvider } from 'components/providers/Tooltip.provider'
-
+import { config as wagmiConfig } from 'components/providers/Blockchain.provider'
 import { useEffect, useState } from 'react'
 import { useAccount } from 'hooks/useAccount'
 import { useOnboarding } from 'hooks/useOnboarding'
 import { Commands } from 'state/commands'
 import { motion } from 'framer-motion'
 import { useHasFocus } from 'hooks/useHasFocus'
-import { InjectedConnector } from 'wagmi/connectors/injected'
-import { connect } from 'wagmi/actions'
-import { polygon, mainnet } from 'viem/chains'
+import { injected } from '@wagmi/connectors'
+import { connect } from '@wagmi/core'
 TooltipProvider.registerTooltip({
   id: 'connect-wallet',
   tooltip: {
@@ -99,17 +98,20 @@ export const ConnectWallet = () => {
   const { address } = useAccount()
   const { send } = useOnboarding()
   const hasFocus = useHasFocus()
+  const [shouldTrackFocus, setShouldTrackFocus] = useState(false)
   const [shouldReload, setShouldReload] = useState(false)
-  const [shouldConnect, setShouldConnect] = useState(false)
+  const [shouldConnect, setShouldConnect] = useState(true)
 
   useEffect(() => {
     if (shouldConnect) {
-      connect({
-        chainId: polygon.id,
-        connector: new InjectedConnector({
-          chains: [polygon, mainnet],
-        }),
-      })
+      try {
+        connect(wagmiConfig, {
+          connector: injected(),
+        })
+      } catch (e) {
+        console.error(e)
+      }
+
       setShouldConnect(false)
     }
   }, [shouldConnect])
@@ -120,7 +122,7 @@ export const ConnectWallet = () => {
   }, [address])
 
   useEffect(() => {
-    if (!hasFocus) {
+    if (!hasFocus && shouldTrackFocus) {
       setShouldReload(true)
     }
   }, [hasFocus])
@@ -137,6 +139,7 @@ export const ConnectWallet = () => {
     <ConnectWalletPresentational
       openWeb3Modal={() => {
         open()
+        setShouldTrackFocus(true)
         setTimeout(() => {
           adjustWeb3ModalContent()
         }, 0)

frontend/src/components/pages/landing/Run.section.tsx

@@ -60,7 +60,7 @@ const underlyingCardData: CardDataType = {
 const Progress = [
   () => {
     return (
-      <div className={sectionStyle.progressBox}>
+      <div key="progress_step_image" className={sectionStyle.progressBox}>
         <span className="mt-2">Progress: 1/4</span>
         <span className="ml-2">
           Resolving image tag:{' '}
@@ -74,7 +74,7 @@ const Progress = [
   },
   () => {
     return (
-      <div className={sectionStyle.progressBox}>
+      <div key="progress_step_demand" className={sectionStyle.progressBox}>
         <span className="mt-2">Progress: 2/4</span>
         <span className="ml-2">
           Demand created. Waiting for counter proposal.
@@ -88,7 +88,7 @@ const Progress = [
   },
   () => {
     return (
-      <div className={sectionStyle.progressBox}>
+      <div key="progress_step_params" className={sectionStyle.progressBox}>
         <span className="mt-2">Progress: 3/4</span>
         <span className="ml-2">Agreement created.</span>
         <span className="ml-2">
@@ -111,7 +111,7 @@ const Progress = [
   },
   () => {
     return (
-      <div className={sectionStyle.progressBox}>
+      <div key="progress_step_starting" className={sectionStyle.progressBox}>
         <span className="mt-2">Progress: 4/4</span>
         <span className="ml-2 mb-1">
           Engine is starting. Depending on provider, it might take few to
@@ -122,7 +122,10 @@ const Progress = [
   },
   () => {
     return (
-      <div className={`${sectionStyle.progressBox} mt-2s`}>
+      <div
+        key="progress_step_ready"
+        className={`${sectionStyle.progressBox} mt-2s`}
+      >
         <span>Ready</span>
       </div>
     )
@@ -139,10 +142,6 @@ export const RunSection = () => {
             descriptionLanding: sectionStyle.description,
             iconLanding: 'h-9 text-primary',
           }}
-          // className="col-span-12 mb-48 md:mb-1"
-          // descriptionClassName={`${sectionStyle.description}`}
-          // titleClassName={`${sectionStyle.title}`}
-          // linkClassName="mb-8"
         />
         <div
           className={`${sectionStyle.overlayContainer} ${sectionStyle.card}`}

frontend/src/components/pages/landing/UseCase.section.tsx

@@ -56,7 +56,11 @@ export const UseCaseSection = () => {
           </div>
         </div>
         <div className={style.separator} />
-        {useCases.map(Card)}
+        {useCases.map((data) => (
+          <div key={`useCaseCard_${data.title}`}>
+            <Card {...data}></Card>
+          </div>
+        ))}
       </div>
     </AnimatedSection>
   )

frontend/src/components/providers/Blockchain.provider.tsx

@@ -1,8 +1,11 @@
-import { ReactNode } from 'react'
-import { WagmiConfig } from 'wagmi'
 import { polygon, polygonMumbai, mainnet } from 'wagmi/chains'
-import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
+import { createWeb3Modal } from '@web3modal/wagmi/react'
+import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
 
+import { WagmiProvider } from 'wagmi'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Prop } from 'xstate'
+import { PropsWithChildren } from 'react'
 const projectId = '20bd2ed396d80502980b6d2a3fb425f4'
 
 const metadata = {
@@ -12,16 +15,25 @@ const metadata = {
   icons: ['/logo.svg'],
 }
 
-const chains = [polygon, polygonMumbai, mainnet]
-const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })
+const chains = [polygon, polygonMumbai, mainnet] as const
+
+const queryClient = new QueryClient()
+
+export const config = defaultWagmiConfig({
+  chains,
+  projectId,
+  metadata,
+})
 
 createWeb3Modal({
-  wagmiConfig,
+  wagmiConfig: config,
   projectId,
-  chains,
-  themeMode: 'light',
 })
 
-export const BlockchainProvider = ({ children }: { children: ReactNode }) => {
-  return <WagmiConfig config={wagmiConfig}>{children}</WagmiConfig>
+export function BlockchainProvider({ children }: PropsWithChildren) {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  )
 }

frontend/src/components/providers/Onboarding.provider.tsx

@@ -17,8 +17,8 @@ const ChainObserver = () => {
   const { chain } = useNetwork()
   const { address } = useAccount()
   const balance = useBalance()
-  console.log('balance', chain)
   useEffect(() => {
+    console.log('chain', chain)
     send({
       type: Commands.CHAIN_CONTEXT_CHANGED,
       payload: chain

frontend/src/components/templates/themes/defaultTheme/Step.template.tsx

@@ -12,10 +12,10 @@ import { Commands } from 'state/commands'
 import { RightDot } from 'components/atoms/ornaments/rightDot'
 import { AnimatePresence, motion } from 'framer-motion'
 import { AnimatedText } from 'components/molecules/animateText/AnimatedText'
-import { useNetwork } from 'wagmi'
 import { useTooltip } from 'components/providers/Tooltip.provider'
+import { useNetwork } from 'hooks/useNetwork'
 // import { SuccessIcon, TrustStackedIcon } from 'components/atoms/icons'
-
+import { polygon } from 'viem/chains'
 const style = {
   ...globalStyle,
   ...templateStyle,
@@ -38,7 +38,7 @@ export const StepTemplate: FC<StepRenderDetailsType> = function (
   const [isNextCalled, setIsNextCalled] = useState(false)
   const { send } = useOnboarding()
   const [namespace, setNamespace] = useState(`${name}.step`)
-  const { chain } = useNetwork()
+  const { chain, chains } = useNetwork()
   const [textVisible, setTextVisible] = useState(true)
   const [componentPlacement, setComponentPlacement] = useState('')
   useEffect(() => {

frontend/src/hooks/useAccount.ts

@@ -7,7 +7,6 @@ export const useAccount = (): Omit<GetAccountResult, 'account'> & {
   address?: EthereumAddress
 } => {
   const account = useAccountWagmi()
-
   const address = account.address
 
   if (address !== undefined) {

frontend/src/hooks/useNetwork.ts

@@ -1,22 +1,27 @@
-import { useNetwork as useNetworkWagmi } from 'wagmi'
+import { useAccount, useChainId, UseChainIdReturnType, useChains } from 'wagmi'
 import { toHex } from 'viem'
 import { Chain } from 'types/wagmi'
-import { Chain as ChainWagmi } from 'wagmi'
-
-type GetNetworkResult = ReturnType<typeof useNetworkWagmi>
-
+import { assertSupportedChainId } from 'types/ethereum'
+import { Ok, Err, Result } from 'ts-results'
+import { polygon, mainnet, polygonMumbai } from 'viem/chains'
 /**.
- * @param chain The wgagmi Chain  object with number id .
+ * @param chain The gagmi Chain  object with number id .
  * @returns The  Chain object with hex string id .
  */
-const formatChain = (chain: ChainWagmi): Chain => {
+const formatChain = (chain: { id: number }): Chain => {
   const chainId = toHex(chain.id)
 
-  //TODO chech homested case
-  // assertSupportedChainId(chainId)
+  assertSupportedChainId(chainId)
+
+  //wagmi in version 2 changed hooks so now useNetwork returns only chain id
+  //and we need to get chain data for backward compatibility
+
+  const chainData = [polygon, mainnet, polygonMumbai].find(
+    (_chain) => _chain.id === chain.id
+  )
 
   return {
-    ...chain,
+    ...chainData,
     id: chainId,
   }
 }
@@ -29,19 +34,12 @@ const formatChain = (chain: ChainWagmi): Chain => {
  * @returns An object containing network information with formatted chain and chains array.
  */
 
-export const useNetwork = (): Omit<GetNetworkResult, 'chain' | 'chains'> & {
-  chain?: Chain
-  chains: Chain[]
-} => {
-  const network = useNetworkWagmi()
-  let chain = undefined
-  if (network.chain) {
-    chain = formatChain(network.chain)
-  }
-
+const NOT_CONNECTED = 'no connected to blockchain'
+export const useNetwork = () => {
+  const account = useAccount()
+  const chains = useChains()
   return {
-    ...network,
-    chain,
-    chains: network.chains.map(formatChain),
+    chain: account.chainId ? formatChain({ id: account.chainId }) : null,
+    chains: chains.map(formatChain),
   }
 }