Upgrade wagmi and rainbowkit

package.json

@@ -5,6 +5,9 @@
   "license": "MIT",
   "dependencies": {},
   "private": true,
+	"engines": {
+		"node": ">=16.0.0"
+	},
   "scripts": {
     "start": "yarn workspaces run start",
     "dev": "yarn workspaces run dev"

packages/website/package.json

@@ -8,14 +8,17 @@
 		"start": "next start",
 		"lint": "next lint"
 	},
+	"engines": {
+		"node": ">=16.0.0"
+	},
 	"dependencies": {
 		"@chakra-ui/icons": "^2.0.11",
 		"@chakra-ui/react": "^2.3.7",
 		"@emotion/react": "^11.10.5",
 		"@emotion/styled": "^11.10.5",
 		"@ethersproject/providers": "^5.7.2",
 		"@metamask/detect-provider": "^2.0.0",
-		"@rainbow-me/rainbowkit": "^0.12.8",
+		"@rainbow-me/rainbowkit": "^1.0.4",
 		"@reduxjs/toolkit": "^1.8.6",
 		"date-fns": "^2.28.0",
 		"ethers": "^5.7.2",
@@ -35,7 +38,7 @@
 		"react-tweet-embed": "^1.3.1",
 		"tsparticles": "^2.5.3",
 		"use-local-storage": "^2.3.6",
-		"wagmi": "^0.12.0"
+		"wagmi": "^1.3.7"
 	},
 	"devDependencies": {
 		"@mdx-js/loader": "^1.6.22",

packages/website/src/components/RainbowKit.tsx

@@ -1,45 +1,64 @@
 import '@rainbow-me/rainbowkit/styles.css'
 import {
 	AvatarComponent,
+	connectorsForWallets,
 	getDefaultWallets,
 	RainbowKitProvider,
 } from '@rainbow-me/rainbowkit'
 import Jazzicon from 'react-jazzicon'
-import { configureChains, createClient, WagmiConfig } from 'wagmi'
+import { configureChains, WagmiConfig, createConfig } from 'wagmi'
+import { argentWallet } from '@rainbow-me/rainbowkit/wallets';
 import { mainnet } from 'wagmi/chains'
 import { publicProvider } from 'wagmi/providers/public'
 import { alchemyProvider } from 'wagmi/providers/alchemy'
 import { infuraProvider } from 'wagmi/providers/infura'
 import React from 'react'
 
-const { chains, provider, webSocketProvider } = configureChains(
-	[mainnet],
-	[infuraProvider({ apiKey: process.env.ALCHEMY_ID }), publicProvider()]
-)
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+  [mainnet],
+  [infuraProvider({ apiKey: process.env.ALCHEMY_ID }), publicProvider()]
+);
 
-const { connectors } = getDefaultWallets({
+const projectId = '3b71d8be5f6ba6ab0f5dcd6815d21d1c'
+
+const { wallets } = getDefaultWallets({
 	appName: 'DIVA App',
-	projectId: '3b71d8be5f6ba6ab0f5dcd6815d21d1c',
+	projectId,
 	chains,
 })
 
-const wagmiClient = createClient({
-	autoConnect: true,
-	connectors,
-	provider,
-	webSocketProvider,
-})
+
+const connectors = connectorsForWallets([
+  ...wallets,
+  {
+    groupName: "Other",
+    wallets: [
+      argentWallet({
+        projectId,
+        chains,
+      }),
+    ],
+  },
+]);
+
+const wagmiClient = createConfig({
+  autoConnect: true,
+  connectors,
+  publicClient,
+  webSocketPublicClient,
+});
 
 const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
 	return <Jazzicon diameter={88} seed={Number(address)} />
 }
 
 export const WagmiProvider = ({ children }: { children: React.ReactNode }) => {
 	return (
-		<WagmiConfig client={wagmiClient}>
-			<RainbowKitProvider avatar={CustomAvatar} chains={chains}>
-				{children}
-			</RainbowKitProvider>
-		</WagmiConfig>
-	)
+    <WagmiConfig config={wagmiClient}>
+      <RainbowKitProvider avatar={CustomAvatar} chains={chains}>
+        {children}
+      </RainbowKitProvider>
+    </WagmiConfig>
+  );
 }
+

packages/website/src/pages/rewards.tsx

@@ -5,7 +5,14 @@ import { isAddress, parseUnits } from 'ethers/lib/utils'
 import { useToast } from '@chakra-ui/react'
 import Image from 'next/image'
 import Skeleton from 'react-loading-skeleton'
-import { useAccount, useNetwork, useSigner } from 'wagmi'
+import {
+  useAccount,
+  useNetwork,
+  useWalletClient,
+  useContractWrite,
+  useContractReads,
+} from "wagmi";
+import { getContract } from "wagmi/actions";
 import 'react-loading-skeleton/dist/skeleton.css'
 
 import ClaimDivaLinearVestingABI from '../abi/ClaimDivaLinearVestingABI.json'
@@ -21,11 +28,12 @@ import { Paragraph } from '../components/typography/Paragraph'
 import { Highlight } from '../components/typography/Highlight'
 import RewardPageBlobs from '../components/RewardPageBlobs'
 import TokenClaimInfo from '../components/TokenClaimInfo'
+import { TbX } from 'react-icons/tb'
 
 const Rewards = () => {
 	const { address: userAddress } = useAccount()
 	const { chain } = useNetwork()
-	const { data: signer } = useSigner()
+	const { data: signer } = useWalletClient()
 	const [rewardInfo, setRewardInfo] = useState<any>({})
 	const [proof, setProof] = useState<string[]>([])
 	const [isClaiming, setIsClaiming] = useState<boolean>(false)
@@ -48,17 +56,10 @@ const Rewards = () => {
 		return () => clearInterval(interval)
 	}, [])
 
-	const claimDivaLinearVesting = useMemo(
-		() =>
-			signer && chain?.id && config[chain?.id]?.claimDivaLinearVestingAddress
-				? new ethers.Contract(
-						config[chain?.id]?.claimDivaLinearVestingAddress,
-						ClaimDivaLinearVestingABI,
-						signer
-				  )
-				: null,
-		[chain, signer]
-	)
+	const claimDivaContact = {
+		address: config[chain?.id]?.claimDivaLinearVestingAddress,
+		abi: ClaimDivaLinearVestingABI as any,
+	}
 
 	const rewardBN = useMemo(
 		() =>
@@ -73,6 +74,55 @@ const Rewards = () => {
 		[rewardBN]
 	)
 
+	const claimDivaRead = useContractReads({
+    contracts: [
+      {
+        ...claimDivaContact,
+        functionName: "trigger",
+      },
+      {
+        ...claimDivaContact,
+        functionName: "claimPeriodStarts",
+      },
+      {
+        ...claimDivaContact,
+        functionName: "claimedAmount",
+        args: [userAddress],
+      },
+      {
+        ...claimDivaContact,
+        functionName: "availableDrawDownAmount",
+        args: [
+          rewardBN,
+          rewardBN.sub(immediateClaimableAmount),
+          rewardInfo.time,
+          userAddress,
+        ],
+      },
+    ],
+  });
+
+	const claimDivaWrite = useContractWrite({
+    ...(claimDivaContact as any),
+    functionName: "claimTokens" as never,
+    args: [rewardBN, rewardInfo.time, proof] as never,
+  });
+
+	console.log({ claimDivaRead, claimDivaWrite });
+
+	const claimDivaLinearVesting = useMemo(
+    () =>
+      signer && chain?.id && config[chain?.id]?.claimDivaLinearVestingAddress
+        ? getContract({
+            address: config[chain?.id]?.claimDivaLinearVestingAddress,
+            abi: ClaimDivaLinearVestingABI,
+          })
+        : null,
+    [chain, signer]
+  );
+
+
+
 	const currentTimestamp = useMemo(() => Math.floor(+new Date() / 1000), [])
 
 	const claimableAmount = useMemo(
@@ -134,67 +184,11 @@ const Rewards = () => {
 		}
 	}, [userAddress])
 
-	useEffect(() => {
-		const getTrigger = async () => {
-			setTrigger(await claimDivaLinearVesting.trigger())
-		}
-		const getClaimPeriodStarts = async () => {
-			setClaimPeriodStarts(
-				(await claimDivaLinearVesting.claimPeriodStarts()).toNumber()
-			)
-		}
-		if (claimDivaLinearVesting) {
-			Promise.all([getTrigger(), getClaimPeriodStarts()])
-		}
-	}, [claimDivaLinearVesting, count])
-
-	useEffect(() => {
-		const getClaimedAmount = async () => {
-			setClaimedAmount(await claimDivaLinearVesting.claimedAmount(userAddress))
-		}
-		if (claimDivaLinearVesting && userAddress) {
-			getClaimedAmount()
-		}
-	}, [claimDivaLinearVesting, userAddress, count])
-
-	useEffect(() => {
-		const getAvailableDrawDownAmount = async () => {
-			setAvailableDrawDownAmount(
-				await claimDivaLinearVesting.availableDrawDownAmount(
-					rewardBN,
-					rewardBN.sub(immediateClaimableAmount),
-					rewardInfo.time,
-					userAddress
-				)
-			)
-		}
-		if (
-			claimDivaLinearVesting &&
-			userAddress &&
-			rewardBN.gt(0) &&
-			immediateClaimableAmount
-		) {
-			getAvailableDrawDownAmount()
-		}
-	}, [
-		claimDivaLinearVesting,
-		userAddress,
-		rewardBN,
-		immediateClaimableAmount,
-		count,
-		rewardInfo,
-	])
-
 	const claim = useCallback(async () => {
 		if (claimableAmount.gt(0)) {
 			setIsClaiming(true)
 			try {
-				const tx = await claimDivaLinearVesting.claimTokens(
-					rewardBN,
-					rewardInfo.time,
-					proof
-				)
-				await tx.wait()
+				await claimDivaWrite.writeAsync();
 				setCount((count) => count + 1)
 			} catch (error) {
 				toast({
@@ -209,14 +203,7 @@ const Rewards = () => {
 			}
 			setIsClaiming(false)
 		}
-	}, [
-		claimableAmount,
-		rewardBN,
-		rewardInfo.time,
-		proof,
-		claimDivaLinearVesting,
-		toast,
-	])
+	}, [claimableAmount, claimDivaWrite, toast])
 
 	return (
 		<PageLayout>