Wagmi versioning

package.json

@@ -20,8 +20,7 @@
     "@types/react-transition-group": "^4.4.6",
     "@walletconnect/ethereum-provider": "^2.9.1",
     "@walletconnect/modal": "^2.6.1",
-    "@web3modal/ethereum": "^2.7.1",
-    "@web3modal/react": "^2.7.1",
+    "@web3modal/wagmi": "^4.0.0-alpha.0",
     "apexcharts": "^3.40.0",
     "axios": "^1.4.0",
     "dompurify": "^3.0.5",
@@ -41,10 +40,10 @@
     "react-transition-group": "^4.4.5",
     "typeface-poppins": "^1.1.13",
     "universal-cookie": "^6.1.1",
-    "wagmi": "^1.3.9",
     "zustand": "^4.3.8"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.17.19",
     "@types/react": "^18.0.28",
     "@types/react-burger-menu": "^2.8.3",
     "@types/react-dom": "^18.0.11",
@@ -55,6 +54,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "typescript": "^5.0.2",
-    "vite": "^4.3.2"
+    "viem": "^2.5.0",
+    "vite": "^4.3.2",
+    "wagmi": "^2.5.0"
   }
 }

src/App.tsx

@@ -1,54 +1,18 @@
+import { Routes, Route } from "react-router-dom";
+import { WagmiProvider } from "wagmi";
 import {
-  EthereumClient,
-  w3mConnectors
-} from "@web3modal/ethereum";
-import { Web3Modal } from "@web3modal/react";
-import { Chain, configureChains, createConfig, WagmiConfig } from "wagmi";
-import {
-  arbitrum
+  arbitrum,
+  arbitrumSepolia
 } from "wagmi/chains";
-
-export const arbitrumSepolia = {
-  id: 421614,
-  name: 'Arbitrum Sepolia',
-  network: 'arbitrumSepolia',
-  nativeCurrency: {
-    decimals: 18,
-    name: 'Ether',
-    symbol: 'ETH',
-  },
-  rpcUrls: {
-    public: { http: [`https://arb-sepolia.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_SEPOLIA_API_KEY}`] },
-    default: { http: [`https://arb-sepolia.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_SEPOLIA_API_KEY}`] },
-  },
-  blockExplorers: {
-    etherscan: { name: 'Arbiscan', url: 'https://sepolia.arbiscan.io/' },
-    default: { name: 'Arbiscan', url: 'https://sepolia.arbiscan.io/' },
-  }
-} as const satisfies Chain
-
-const projectId = "67027f91c1db8751c6ea2ed13b9cdc55";
-
-const { chains, publicClient } = configureChains(
-  [arbitrum, arbitrumSepolia],
-  [alchemyProvider({ apiKey: import.meta.env.VITE_ALCHEMY_API_KEY }), publicProvider()],
-)
-
-const config = createConfig({
-  autoConnect: true,
-  connectors: w3mConnectors({ projectId, chains }),
-  publicClient,
-})
-const ethereumClient = new EthereumClient(config, chains);
-
+import { createWeb3Modal } from '@web3modal/wagmi/react'
 import HomePage from "./pages/HomePage.tsx";
 //import navbar
 import Navbar from "./components/Navbar.tsx";
 import Footer from "./components/Footer.tsx";
 import { Box } from "@mui/material";
-import { Routes, Route } from "react-router-dom";
 import Collateral from "./pages/Collateral.tsx";
 import CircularProgressComponent from "./components/CircularProgressComponent.tsx";
+import '@walletconnect/ethereum-provider';
 import {
   // useCircularProgressStore,
   useRenderAppCounterStore,
@@ -62,16 +26,19 @@ import Staking from "./pages/Staking.tsx";
 import VaultHistory from "./pages/VaultHistory.tsx";
 import TermsOfUse from "./pages/TermsOfUse.tsx";
 import Disclaimer from "./components/Disclaimer.tsx";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import wagmiConfig from "./WagmiConfig";
 
-import { alchemyProvider } from '@wagmi/core/providers/alchemy'
-import { publicProvider } from "wagmi/providers/public";
+const projectId = "67027f91c1db8751c6ea2ed13b9cdc55";
 
 function App() {
-  // const { circularProgress } = useCircularProgressStore();
   useBackgroundImage();
-  // console.log(circularProgress);
   const { renderAppCounter } = useRenderAppCounterStore();
 
+  const queryClient = new QueryClient()
+
+  createWeb3Modal({ wagmiConfig, projectId, chains: [arbitrum, arbitrumSepolia] });
+
   return (
     <Box
       sx={{
@@ -84,43 +51,23 @@ function App() {
       {/* <button onClick={handleRemountClick}>Remount</button>{" "} */}
       <CircularProgressComponent />
       <SnackbarComponent />
-      <WagmiConfig config={config}>
-        <Navbar />
-        <Disclaimer />
-        <Routes key={renderAppCounter}>
-          <Route path="/" element={<HomePage />} />
-          <Route path="termsofuse" element={<TermsOfUse />} />
-          <Route path="collateral/:vaultId" element={<Collateral />} />
-          <Route path="collateral/:vaultId/history" element={<VaultHistory />} />
-          <Route path="stats" element={<Stats />} />
-          <Route path="yield/*" element={<Yield />} />
-          <Route path="dex/*" element={<Dex />} />
-          <Route path="staking/*" element={<Staking />} />
-        </Routes>
-        <Footer />
-      </WagmiConfig>
-      <Web3Modal
-        projectId={projectId}
-        ethereumClient={ethereumClient}
-        themeVariables={{
-          "--w3m-font-family": "Poppins, sans-serif",
-          "--w3m-container-border-radius": "10px",
-          "--w3m-text-medium-regular-size": "10px",
-          // "--w3m-accent-color": "transparent",
-          "--w3m-accent-color": "rgba(0,0,0,0.2)",
-        }}
-        // mobileWallets={[
-        //   {
-        //     id: "1",
-        //     name: "MetaMask",
-        //     links: {
-        //       native: "https://metamask.app.link/dapp/standardio.vercel.app/",
-        //       universal:
-        //         "https://metamask.app.link/dapp/standardio.vercel.app/",
-        //     },
-        //   },
-        // ]}
-      />
+      <WagmiProvider config={wagmiConfig} reconnectOnMount={true}>
+        <QueryClientProvider client={queryClient}>
+          <Navbar />
+          <Disclaimer />
+          <Routes key={renderAppCounter}>
+            <Route path="/" element={<HomePage />} />
+            <Route path="termsofuse" element={<TermsOfUse />} />
+            <Route path="stats" element={<Stats />} />
+            <Route path="yield/*" element={<Yield />} />
+            <Route path="dex/*" element={<Dex />} />
+            <Route path="staking/*" element={<Staking />} />
+            <Route path="collateral/:vaultId" element={<Collateral />} />
+            <Route path="collateral/:vaultId/history" element={<VaultHistory />} />
+          </Routes>
+          <Footer />
+        </QueryClientProvider>
+      </WagmiProvider>
     </Box>
   );
 }

src/WagmiConfig.tsx

@@ -0,0 +1,19 @@
+import { createConfig, http } from "wagmi";
+import {
+  arbitrum,
+  arbitrumSepolia
+} from "wagmi/chains";
+import { walletConnect } from "wagmi/connectors";
+
+const projectId = "67027f91c1db8751c6ea2ed13b9cdc55";
+
+export const wagmiConfig = createConfig({
+  chains: [arbitrum, arbitrumSepolia],
+  transports: {
+    [arbitrum.id]: http(`https://arb-mainnet.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_API_KEY}`),
+    [arbitrumSepolia.id]: http(`https://arb-sepolia.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_SEPOLIA_API_KEY}`)
+  },
+  connectors: [ walletConnect({projectId}) ],
+});
+
+export default wagmiConfig;

src/abis/smartVault.ts

@@ -238,28 +238,33 @@ export const abi = [
   },
   { stateMutability: "payable", type: "receive" },
   {
-    inputs: [
+    "inputs": [
       {
-        internalType: "bytes32",
-        name: "_inToken",
-        type: "bytes32"
+        "internalType": "bytes32",
+        "name": "_inToken",
+        "type": "bytes32"
       },
       {
-        internalType: "bytes32",
-        name: "_outToken",
-        type: "bytes32"
+        "internalType": "bytes32",
+        "name": "_outToken",
+        "type": "bytes32"
       },
       {
-        internalType: "uint256",
-        name: "_amount",
-        type: "uint256"
+        "internalType": "uint256",
+        "name": "_amount",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "_requestedMinOut",
+        "type": "uint256"
       }
     ],
-    name: "swap",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  }
+    "name": "swap",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
 ];
 
 export default abi;

src/components/Exchange.tsx

@@ -1,13 +1,13 @@
 import { LiFiWidget, WidgetConfig, WidgetWalletManagement, WidgetVariant } from '@lifi/widget';
-import { Address, useWalletClient } from "wagmi";
+import { useWalletClient } from "wagmi";
 import { providers } from "ethers";
 
 interface ExchangeProps {
   variant?: WidgetVariant,
   fromChain?: number,
   toChain?: number,
-  fromToken?: Address,
-  toToken?: Address
+  fromToken?: any,
+  toToken?: any
 }
 const Exchange: React.FC<ExchangeProps> = ({
   variant = 'default',
@@ -31,7 +31,7 @@ const Exchange: React.FC<ExchangeProps> = ({
 
   const walletConfig:WidgetWalletManagement = {
     signer,
-    disconnect: async () => {},
+    disconnect: async () => {null},
     connect: async () => signer,
   }
 

src/components/LoginCard.tsx

@@ -1,5 +1,5 @@
 import { Box, Typography } from "@mui/material";
-import { Web3Button } from "@web3modal/react";
+// import { Web3Button } from "@web3modal/react";
 import Card from "./Card";
 
 const LoginCard = () => {
@@ -45,9 +45,11 @@ const LoginCard = () => {
         <Box
           sx={{
             marginTop: "1em",
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Web3Button />
+          <w3m-button />
         </Box>
       </Card>
     </>