RED-289: Rainbowkit used in GUI is very outdated on 1.0.7 latest is 2.1.6

components/RemoveStakeButton.tsx

@@ -7,10 +7,10 @@ import LoadingButton from './LoadingButton';
 import { ConfirmModalContext } from './ConfirmModalContextProvider';
 import { isMetaMaskError } from '../utils/isMetaMaskError';
 import { isEthersError } from '../utils/isEthersError';
-import { Address } from 'wagmi';
 import { ExternalProvider } from '@ethersproject/providers';
 import { NodeStatus } from '../model/node-status'
 import { useSettings } from "../hooks/useSettings";
+import { Address } from 'viem'
 
 export default function RemoveStakeButton({nominee, force = false, nodeStatus}: { nominee: string, force?: boolean, nodeStatus: NodeStatus['state'] }) {
   const {showTemporarySuccessMessage, showErrorDetails, showTemporaryWarningMessage} = useContext(ToastContext);
@@ -35,7 +35,7 @@ export default function RemoveStakeButton({nominee, force = false, nodeStatus}:
       throw new Error('MetaMask not found');
     }
     try {
-      const provider = new ethers.providers.Web3Provider(ethereum as ExternalProvider);
+      const provider = new ethers.providers.Web3Provider(ethereum as unknown as ExternalProvider);
       const signer = provider.getSigner();
       const [gasPrice, from, nonce] = await Promise.all([
         signer.getGasPrice(),
@@ -106,12 +106,15 @@ export default function RemoveStakeButton({nominee, force = false, nodeStatus}:
       }
       const accounts = await ethereum.request({
         method: "eth_requestAccounts"
-      });
-
-      setAccountAddress(accounts[0]);
-
-      console.log("Account2: ", accountAddress);
-      await sendTransaction(accounts[0], nominee, force);
+      }) as Address[];
+      if (accounts && accounts.length > 0) {
+        setAccountAddress(accounts[0]);
+
+        console.log("Account2: ", accountAddress);
+        await sendTransaction(accounts[0], nominee, force);
+      } else {
+        console.error('Invalid accounts array:', accounts);
+      }
     } catch (error) {
       setLoading(false);
     }
@@ -125,8 +128,13 @@ export default function RemoveStakeButton({nominee, force = false, nodeStatus}:
     timestamp: Date.now()
   });
 
-  ethereum?.on?.("accountsChanged", (accounts: Address[]) => {
-    setData({...data, nominator: accounts[0]});
+  ethereum?.on?.("accountsChanged", (args: unknown) => {
+    const accounts = args as Address[]; 
+    if (accounts && accounts.length > 0) {
+      setData({...data, nominator: accounts[0]});
+    } else {
+      console.error('Invalid accounts array:', accounts);
+    }
   });
 
   async function removeStake() {

components/StakeForm.tsx

@@ -7,6 +7,7 @@ import LoadingButton from "./LoadingButton";
 import { isMetaMaskError } from "../utils/isMetaMaskError";
 import { isEthersError } from "../utils/isEthersError";
 import { ExternalProvider } from "@ethersproject/providers";
+import { type Address } from 'viem'
 
 interface StakeData {
   isInternalTx: boolean;
@@ -71,7 +72,7 @@ export default function StakeForm({
     try {
       const blobData: string = JSON.stringify(data);
       const provider = new ethers.providers.Web3Provider(
-        ethereum as ExternalProvider
+        ethereum as unknown as ExternalProvider
       );
       const signer = provider.getSigner();
       const [gasPrice, from, nonce] = await Promise.all([
@@ -136,11 +137,16 @@ export default function StakeForm({
   }
 
   useEffect(() => {
-    ethereum?.on?.("accountsChanged", (accounts: string[]) => {
-      setData((currentData) => ({
-        ...currentData,
-        nominator: accounts[0].toLowerCase(),
-      }));
+    ethereum?.on?.("accountsChanged", (accounts: unknown) => {
+      const accountsArray = accounts as Address[];
+      if (accountsArray && accountsArray.length > 0) {
+        setData((currentData) => ({
+          ...currentData,
+          nominator: accountsArray[0].toLowerCase(),
+        }));
+      } else {
+        console.error('Invalid accounts array:', accounts);
+      }
     });
     setData((currentData) => ({
       ...currentData,

components/molecules/RewardsCard.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
 import rewardsCardBg from "../../assets/rewards-card.png";
 import { useNodeStatus } from "../../hooks/useNodeStatus";
 import { Card } from "../layouts/Card";
-import { useAccount, useNetwork } from "wagmi";
-import { CHAIN_ID } from "../../pages/_app";
+import { useAccount } from "wagmi";
+import { CHAIN_ID } from "../../config/wagmiConfig";
 import useModalStore from "../../hooks/useModalStore";
 import { ConfirmRedemptionModal } from "./ConfirmRedemptionModal";
 import { MobileModalWrapper } from "../layouts/MobileModalWrapper";
@@ -37,7 +37,7 @@ export const RewardsCard = () => {
   );
   const { nodeStatus } = useNodeStatus();
   const { address, isConnected } = useAccount();
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const [canRedeem, setCanRedeem] = useState(
     isConnected &&
       chain?.id === CHAIN_ID &&

components/molecules/StakeDisplay.tsx

@@ -1,10 +1,10 @@
 import { Card } from "../layouts/Card";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useAccount, useNetwork } from "wagmi";
+import { useAccount } from "wagmi";
 import { useNodeStatus } from "../../hooks/useNodeStatus";
 import useModalStore from "../../hooks/useModalStore";
 import { AddStakeModal } from "./AddStakeModal";
-import { CHAIN_ID } from "../../pages/_app";
+import { CHAIN_ID } from "../../config/wagmiConfig";
 import { WalletConnectButton } from "./WalletConnectButton";
 import { ConfirmUnstakeModal } from "./ConfirmUnstakeModal";
 import { ClipboardIcon } from "../atoms/ClipboardIcon";
@@ -16,7 +16,7 @@ export const StakeDisplay = () => {
   const addressRef = useRef<HTMLSpanElement>(null);
   const { address, isConnected } = useAccount();
   const { stakeInfo } = useAccountStakeInfo(address);
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const { nodeStatus } = useNodeStatus();
   const { settings } = useSettings();
   const { setShowModal, setContent, resetModal } = useModalStore(

components/organisms/SettingsDisplay.tsx

@@ -1,12 +1,12 @@
-import { useAccount, useNetwork } from "wagmi";
+import { useAccount } from "wagmi";
 import dashboardBg from "../../assets/dashboard-bg.webp";
 import { useAccountStakeInfo } from "../../hooks/useAccountStakeInfo";
 import { useSettings } from "../../hooks/useSettings";
 import { AutoRestartNodeToggle } from "../molecules/AutoRestartNodeToggle";
 import { ForceRemoveStake } from "../molecules/ForceRemoveStake";
 import { ForceStopNode } from "../molecules/ForceStopNode";
 import PasswordResetForm from "../molecules/PasswordResetForm";
-import { CHAIN_ID } from "../../pages/_app";
+import { CHAIN_ID } from "../../config/wagmiConfig";
 import { useNodeStatus } from "../../hooks/useNodeStatus";
 import { useEffect, useState } from "react";
 import { BgImage } from "../atoms/BgImage";
@@ -17,8 +17,7 @@ export const SettingsDisplay = () => {
     updateSettings,
     isLoading: updateSettingsLoading,
   } = useSettings();
-  const { address, isConnected } = useAccount();
-  const { chain } = useNetwork();
+  const { address, isConnected, chain } = useAccount();
   const { stakeInfo } = useAccountStakeInfo(address);
   const { nodeStatus } = useNodeStatus();
   const [stopDirectly, setStopDirectly] = useState(

config/wagmiConfig.ts

@@ -0,0 +1,35 @@
+import { createConfig, http } from 'wagmi';
+import { Chain } from 'wagmi/chains';
+import { metaMask, walletConnect } from 'wagmi/connectors';
+
+// Define the constants for RPC URL, Explorer URL, and Chain ID
+export const RPC_URL = process.env.RPC_SERVER_URL ?? "https://atomium.shardeum.org/";
+export const EXPLORER_URL = process.env.NEXT_EXPLORER_URL ?? "https://explorer-atomium.shardeum.org/";
+export const CHAIN_ID = process.env.NEXT_PUBLIC_CHAIN_ID ? +process.env.NEXT_PUBLIC_CHAIN_ID : 8082;
+
+// Define the devnet chain configuration
+export const devnet: Chain = {
+  id: CHAIN_ID,
+  name: "shardeum_devnet",
+  nativeCurrency: {
+    decimals: 18,
+    name: "Shardeum",
+    symbol: "SHM",
+  },
+  rpcUrls: {
+    default: { http: [RPC_URL] },
+    public: { http: [RPC_URL] },
+  },
+  blockExplorers: {default: {name: 'Atomium Explorer', url: EXPLORER_URL}},
+};
+
+// Create the Wagmi config using the devnet chain
+export const config = createConfig({
+  chains: [devnet],
+  connectors: [metaMask(), /* walletConnect({
+    projectId: '<WALLETCONNECT_PROJECT_ID>', // TODO: Replace with actual project ID when available
+  }) */],
+  transports: {
+    [devnet.id]: http(),
+  },
+});

hooks/useStake.ts

@@ -4,6 +4,7 @@ import { useTXLogs } from "./useTXLogs";
 import { isMetaMaskError } from "../utils/isMetaMaskError";
 import { isEthersError } from "../utils/isEthersError";
 import { ExternalProvider } from "@ethersproject/providers";
+import { type Address } from 'viem'
 
 type useStakeProps = {
   nominator: string;
@@ -63,7 +64,7 @@ export const useStake = ({ nominator, nominee, stakeAmount, onStake, totalStaked
     try {
       const blobData: string = JSON.stringify({ ...data, nominee: nomineeAddress });
       const provider = new ethers.providers.Web3Provider(
-        ethereum as ExternalProvider
+        ethereum as unknown as ExternalProvider
       );
       const signer = provider.getSigner();
       const [gasPrice, from, nonce] = await Promise.all([
@@ -135,11 +136,16 @@ export const useStake = ({ nominator, nominee, stakeAmount, onStake, totalStaked
   }
 
   useEffect(() => {
-    ethereum?.on?.("accountsChanged", (accounts: string[]) => {
-      setData((currentData) => ({
-        ...currentData,
-        nominator: (accounts?.[0] || "").toLowerCase(),
-      }));
+    ethereum?.on?.("accountsChanged", (accounts: unknown) => {
+      const accountsArray = accounts as Address[];
+      if (accountsArray.length > 0) {
+        setData((currentData) => ({
+          ...currentData,
+          nominator: (accountsArray[0] || "").toLowerCase(),
+        }));
+      } else {
+        console.error('Invalid accounts array:', accounts);
+      }
     });
     setData((currentData) => ({
       ...currentData,

hooks/useUnstake.ts

@@ -5,7 +5,7 @@ import { useTXLogs } from "./useTXLogs";
 import { isMetaMaskError } from "../utils/isMetaMaskError";
 import { isEthersError } from "../utils/isEthersError";
 import { ExternalProvider } from "@ethersproject/providers";
-import { Address } from 'wagmi';
+import { Address } from 'viem';
 import { showErrorMessage, showSuccessMessage } from "./useToastStore";
 
 type useStakeProps = {
@@ -34,7 +34,7 @@ export const useUnstake = ({ nominator, nominee, force }: useStakeProps) => {
       throw new Error('MetaMask not found');
     }
     try {
-      const provider = new ethers.providers.Web3Provider(ethereum as ExternalProvider);
+      const provider = new ethers.providers.Web3Provider(ethereum as unknown as ExternalProvider);
       const signer = provider.getSigner();
       const [gasPrice, from, nonce] = await Promise.all([
         signer.getGasPrice(),
@@ -106,8 +106,13 @@ export const useUnstake = ({ nominator, nominee, force }: useStakeProps) => {
     timestamp: Date.now()
   });
 
-  ethereum?.on?.("accountsChanged", (accounts: Address[]) => {
-    setData({ ...data, nominator: accounts[0] });
+  ethereum?.on?.("accountsChanged", (accounts: unknown) => {
+    const accountsArray = accounts as Address[];
+    if (accountsArray.length > 0) {
+      setData({ ...data, nominator: accountsArray[0] });
+    } else {
+      console.error('Invalid accounts array:', accounts);
+    }
   });
 
   const handleRemoveStake = async () => {