Upgrade Deps Fall 2024 (#264)

* lint and build ok but i think because wagmi is now only esm (annoying but true) i must convert the entire project to esm now.

* upgrade deps to... node 22. lock viem wagmi rainbow, remove outdated resolution.

* setup custom wallet list with valora, etc. have special section for fallbacks of wallet connect and injected

* vercel doesnt support 22

* fix test for wagmi v2

.eslintrc.json

@@ -23,6 +23,5 @@
     "@typescript-eslint/no-require-imports": 1,
     "@typescript-eslint/no-non-null-assertion": 0,
     "react/function-component-definition": [2, { "namedComponents": "arrow-function", "unnamedComponents": "arrow-function" }]
-
   }
 }

.nvmrc

@@ -0,0 +1 @@
+v20

.vscode/settings.json

@@ -21,20 +21,20 @@
   "[javascriptreact]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     }
   },
   "[typescript]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

package.json

@@ -13,35 +13,32 @@
   "dependencies": {
     "@celo/abis": "^11.0.0",
     "@celo/compliance": "^1.0.23",
-    "@celo/rainbowkit-celo": "1.2.0",
-    "@rainbow-me/rainbowkit": "^1.3.7",
+    "@rainbow-me/rainbowkit": "^2.1.6",
+    "@tanstack/react-query": "^5.56.2",
     "@types/react-modal": "^3.15.1",
     "@types/react-transition-group": "^4.4.10",
     "bignumber.js": "^9.1.2",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "graphql": "^16.9.0",
     "graphql-request": "^6.1.0",
     "gray-matter": "^4.0.3",
-    "next": "^14.0.0",
+    "next": "^14.2.11",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-modal": "^3.16.1",
     "react-number-format": "^5.4.0",
     "react-toastify": "^10.0.5",
     "react-transition-group": "^4.4.5",
     "react-use-async-callback": "^2.1.2",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13"
-  },
-  "resolutions": {
-    "@wagmi/connectors": "^3.1.10"
+    "viem": "2.21.6",
+    "wagmi": "2.12.11"
   },
   "devDependencies": {
     "@celo/contractkit": "^8.0.0",
     "@next/bundle-analyzer": "^13.5.6",
     "@testing-library/react": "^14.3.1",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "18.19.40",
+    "@types/node": "20.14.8",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -67,5 +64,8 @@
     "minimumChangeThreshold": 0,
     "showDetails": true
   },
+  "engines": {
+    "node": "20"
+  },
   "packageManager": "[email protected]"
 }

src/config/contracts.ts

@@ -1,4 +1,3 @@
-import { Alfajores } from '@celo/rainbowkit-celo/chains';
 import {
   ACCOUNT_MAINNET_ADDRESS,
   ACCOUNT_TESTNET_ADDRESS,
@@ -16,6 +15,7 @@ import {
   VOTE_TESTNET_ADDRESS,
 } from 'src/config/consts';
 import { Address } from 'viem';
+import { celoAlfajores as Alfajores } from 'viem/chains';
 
 interface ContractAddresses {
   manager: Address;

src/contexts/account/AccountContext.tsx

@@ -2,7 +2,8 @@ import { createContext, PropsWithChildren, useContext } from 'react';
 import useStrategy from 'src/contexts/account/useStrategy';
 import { Option } from 'src/types';
 import { Celo, StCelo } from 'src/utils/tokens';
-import { Address, useAccount } from 'wagmi';
+import type { Address } from 'viem';
+import { useAccount } from 'wagmi';
 import { useAccountBalances } from './useBalances';
 import {
   PendingWithdrawal,

src/contexts/account/useBalances.ts

@@ -2,7 +2,8 @@ import { useCallback, useMemo } from 'react';
 import { useBlockchain } from 'src/contexts/blockchain/useBlockchain';
 import { Option } from 'src/types';
 import { Celo, StCelo } from 'src/utils/tokens';
-import { Address, useBalance, useContractRead } from 'wagmi';
+import type { Address } from 'viem';
+import { useBalance, useReadContract } from 'wagmi';
 
 export const useAccountBalances = (address: Option<Address>) => {
   const { stakedCeloContract } = useBlockchain();
@@ -12,14 +13,16 @@ export const useAccountBalances = (address: Option<Address>) => {
     fetchStatus,
   } = useBalance({
     address,
-    enabled: !!address,
+    query: { enabled: !!address },
   });
-  const { data: stCeloBalance, refetch: refetchStCelo } = useContractRead({
+  const { data: stCeloBalance, refetch: refetchStCelo } = useReadContract({
     ...stakedCeloContract,
     functionName: 'balanceOf',
     args: [address!],
-    enabled: !!address,
-    select: (data) => new StCelo(data),
+    query: {
+      enabled: !!address,
+      select: (data) => new StCelo(data),
+    },
   });
 
   // eslint-disable-next-line react-hooks/exhaustive-deps -- force update when fetchStatus changes

src/contexts/account/useDefaultGroups.ts

@@ -3,7 +3,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { useBlockchain } from 'src/contexts/blockchain/useBlockchain';
 import { Option } from 'src/types';
 import { readFromCache, writeToCache } from 'src/utils/localSave';
-import { Address, useContractRead } from 'wagmi';
+import type { Address } from 'viem';
+import { useConfig, useReadContract } from 'wagmi';
 
 const FEW_HOURS = 4 * 60 * 60 * 1000;
 
@@ -14,24 +15,26 @@ export default function useDefaultGroups(): { activeGroups: Address[]; error: Op
   const [activeGroups, setActiveGroups] = useState<Address[]>([]);
   const [error, setError] = useState<Error>();
 
-  const { data: activeGroupsLength } = useContractRead({
+  const { data: activeGroupsLength } = useReadContract({
     ...defaultGroupStrategyContract,
     functionName: 'getNumberOfGroups',
-    cacheTime: FEW_HOURS,
+    query: { gcTime: FEW_HOURS },
   });
 
-  const { data: groupsHead } = useContractRead({
+  const config = useConfig();
+
+  const { data: groupsHead } = useReadContract({
     ...defaultGroupStrategyContract,
     functionName: 'getGroupsHead',
-    cacheTime: FEW_HOURS,
+    query: { gcTime: FEW_HOURS },
   });
 
   const fetchGroups = useCallback(
     async (key: Address, length: bigint) => {
       const groups: Address[] = [key];
 
       for (let i = 0; i < length; i++) {
-        const previousAndNext = await readContract({
+        const previousAndNext = await readContract(config, {
           address: defaultGroupStrategyContract.address!,
           abi: defaultGroupStrategyContract.abi,
           functionName: 'getGroupPreviousAndNext',
@@ -43,7 +46,7 @@ export default function useDefaultGroups(): { activeGroups: Address[]; error: Op
 
       return groups;
     },
-    [defaultGroupStrategyContract]
+    [defaultGroupStrategyContract, config]
   );
 
   useEffect(() => {

src/contexts/account/useProposalVotes.ts

@@ -3,7 +3,8 @@ import { useCallback } from 'react';
 import useAddresses from 'src/hooks/useAddresses';
 import { VoteType } from 'src/types';
 import celoRegistry from 'src/utils/celoRegistry';
-import { Address, PublicClient, useAccount, usePublicClient } from 'wagmi';
+import type { Address } from 'viem';
+import { useAccount, usePublicClient, UsePublicClientReturnType } from 'wagmi';
 
 interface Vote {
   vote: VoteType;
@@ -25,17 +26,17 @@ function extractVote(args: VoteEventArgs): 'yesVotes' | 'noVotes' | 'abstainVote
 async function getRelevantVoteEvents(
   account: Address,
   proposalId: bigint,
-  publicClient: PublicClient,
+  publicClient: UsePublicClientReturnType,
   addresses: ReturnType<typeof useAddresses>
 ): Promise<Vote | null> {
-  const governanceAddress = await publicClient.readContract({
+  const governanceAddress = await publicClient!.readContract({
     ...celoRegistry,
     functionName: 'getAddressForString',
     args: ['Governance'],
   });
 
   const [{ result: proposal }, { result: queueExpiry }, { result: referendumStageDurations }] =
-    await publicClient.multicall({
+    await publicClient!.multicall({
       contracts: [
         {
           address: governanceAddress,
@@ -58,7 +59,7 @@ async function getRelevantVoteEvents(
   if (!proposal || !queueExpiry || !referendumStageDurations)
     throw new Error('proposal not found with id ' + proposalId);
 
-  const latestBlock = await publicClient.getBlock();
+  const latestBlock = await publicClient!.getBlock();
 
   const blockPadding = 12n; // probably more than necessary, this is 1 minute
   const now = Date.now() / 1000; // work with seconds, not ms
@@ -75,7 +76,7 @@ async function getRelevantVoteEvents(
   const endedAtBlock = Number(fromBlock) + endedAtBlockDiff;
   const toBlock = BigInt(Math.min(Number(latestBlock.number!), endedAtBlock));
 
-  const voteEvents = await publicClient.getLogs({
+  const voteEvents = await publicClient!.getLogs({
     address: addresses.vote,
     event: {
       type: 'event',

src/contexts/account/useStrategy.ts

@@ -1,6 +1,7 @@
 import { useBlockchain } from 'src/contexts/blockchain/useBlockchain';
 import { Option } from 'src/types';
-import { Address, useContractRead } from 'wagmi';
+import type { Address } from 'viem';
+import { useReadContract } from 'wagmi';
 
 // don't call directly. for use in AccountContext
 // returns the address of the  validator group the currently connected address is voting for OR the zero if on default
@@ -10,11 +11,11 @@ export default function useStrategy(address: Option<Address>) {
     data: strategy,
     isLoading,
     refetch: reloadStrategy,
-  } = useContractRead({
+  } = useReadContract({
     ...managerContract,
     functionName: 'getAddressStrategy',
     args: [address!],
-    enabled: !!address,
+    query: { enabled: !!address },
   });
 
   return { strategy, reloadStrategy, isLoading };

src/contexts/account/useWithdrawals.ts

@@ -5,8 +5,8 @@ import { useBlockchain } from 'src/contexts/blockchain/useBlockchain';
 import { useAPI } from 'src/hooks/useAPI';
 import { Option } from 'src/types';
 import { Celo } from 'src/utils/tokens';
-import { Address, useContractRead, usePublicClient } from 'wagmi';
-
+import type { Address } from 'viem';
+import { useConfig, usePublicClient, useReadContract } from 'wagmi';
 export interface PendingWithdrawal {
   amount: Celo;
   timestamp: string;
@@ -17,15 +17,15 @@ const botActionInterval = 180 * 1000;
 export const useWithdrawalBot = (address: Option<Address>) => {
   const { api } = useAPI();
   const { accountContract } = useBlockchain();
-
+  const config = useConfig();
   const { activeGroups: groups } = useDefaultGroups();
 
   const finalizeWithdrawal = useCallback(async () => {
     if (!address) return;
     if (!groups.length) return;
 
     for (const group of groups) {
-      const scheduledWithdrawals = await readContract({
+      const scheduledWithdrawals = await readContract(config, {
         address: accountContract.address!,
         abi: accountContract.abi,
         functionName: 'scheduledWithdrawalsForGroupAndBeneficiary',
@@ -34,7 +34,7 @@ export const useWithdrawalBot = (address: Option<Address>) => {
 
       if (scheduledWithdrawals > 0) return api.withdraw(address);
     }
-  }, [address, groups, accountContract, api]);
+  }, [address, groups, accountContract, api, config]);
 
   useEffect(() => {
     void finalizeWithdrawal();
@@ -49,18 +49,18 @@ export const useClaimingBot = (address: Option<Address>) => {
   const { api } = useAPI();
   const { accountContract } = useBlockchain();
   const publicClient = usePublicClient();
-  const { refetch: loadPendingWithdrawals } = useContractRead({
+  const { refetch: loadPendingWithdrawals } = useReadContract({
     ...accountContract,
     functionName: 'getPendingWithdrawals',
     args: [address!],
-    enabled: !!address,
+    query: { enabled: !!address },
   });
 
   const claim = useCallback(async () => {
     if (!address) return;
 
     const [{ timestamp: currentBlockTimestamp }, { data: valuesAndTimestamps }] = await Promise.all(
-      [publicClient.getBlock({ blockTag: 'latest' }), loadPendingWithdrawals()]
+      [publicClient!.getBlock({ blockTag: 'latest' }), loadPendingWithdrawals()]
     );
     const [, withdrawalTimestamps] = valuesAndTimestamps!;
     const availableToClaim = !!withdrawalTimestamps.find(
@@ -115,13 +115,15 @@ const pendingWithdrawalsLoadInterval = 60 * 1000;
 
 export const useWithdrawals = (address: Option<Address>) => {
   const { accountContract } = useBlockchain();
-  const { data: pendingWithdrawal, refetch: loadPendingWithdrawals } = useContractRead({
+  const { data: pendingWithdrawal, refetch: loadPendingWithdrawals } = useReadContract({
     ...accountContract,
     functionName: 'getPendingWithdrawals',
     args: [address!],
-    select: ([values, timestamps]) =>
-      formatPendingWithdrawals(values as bigint[], timestamps as bigint[]),
-    enabled: !!address,
+    query: {
+      enabled: !!address,
+      select: ([values, timestamps]) =>
+        formatPendingWithdrawals(values as bigint[], timestamps as bigint[]),
+    },
   });
 
   useEffect(() => {

src/contexts/blockchain/BlockchainContext.tsx

@@ -11,7 +11,8 @@ import { mainnetAddresses, testnetAddresses } from 'src/config/contracts';
 import useAddresses from 'src/hooks/useAddresses';
 import { Option } from 'src/types';
 import { isSanctionedAddress } from 'src/utils/sanctioned';
-import { Address, useAccount } from 'wagmi';
+import type { Address } from 'viem';
+import { useAccount, useConfig } from 'wagmi';
 
 export interface TxCallbacks {
   onSent?: () => void;
@@ -68,6 +69,7 @@ export const BlockchainContext = createContext<BlockchainContext>({
 export const BlockchainProvider = ({ children }: PropsWithChildren) => {
   const { address } = useAccount();
   const addresses = useAddresses();
+  const config = useConfig;
   const managerContract = useMemo(
     () => ({
       address: addresses.manager,
@@ -121,10 +123,10 @@ export const BlockchainProvider = ({ children }: PropsWithChildren) => {
     void (async () => {
       const sanctioned = address && (await isSanctionedAddress(address));
       if (sanctioned) {
-        await disconnect();
+        await disconnect(config());
       }
     })();
-  }, [address]);
+  }, [address, config]);
 
   return (
     <BlockchainContext.Provider

src/contexts/protocol/useAnnualProjectedRate.ts

@@ -2,16 +2,16 @@ import { epochRewardsABI } from '@celo/abis';
 import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 import useCeloRegistryAddress from 'src/hooks/useCeloRegistryAddress';
-import { useContractRead } from 'wagmi';
+import { useReadContract } from 'wagmi';
 
 export const useAnnualProjectedRate = () => {
   const address = useCeloRegistryAddress('EpochRewards');
-  const { data: rewardsMultiplierFraction, isLoading: multiplierLoading } = useContractRead({
+  const { data: rewardsMultiplierFraction, isLoading: multiplierLoading } = useReadContract({
     abi: epochRewardsABI,
     address,
     functionName: 'getRewardsMultiplier',
   });
-  const { data: targetVotingYieldParameters, isLoading: yieldParamsLoading } = useContractRead({
+  const { data: targetVotingYieldParameters, isLoading: yieldParamsLoading } = useReadContract({
     abi: epochRewardsABI,
     address,
     functionName: 'getTargetVotingYieldParameters',