Merge pull request #160 from SecureSECO/dev

Wallet Connect Upgrade Release

package.json

@@ -16,95 +16,97 @@
     "test": "jest"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.1.1",
-    "@radix-ui/react-alert-dialog": "^1.0.3",
-    "@radix-ui/react-collapsible": "^1.0.2",
-    "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-dropdown-menu": "^2.0.4",
-    "@radix-ui/react-label": "^2.0.1",
-    "@radix-ui/react-popover": "^1.0.6",
-    "@radix-ui/react-progress": "^1.0.2",
-    "@radix-ui/react-radio-group": "^1.1.2",
-    "@radix-ui/react-select": "^1.2.1",
-    "@radix-ui/react-slider": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.0.3",
-    "@radix-ui/react-toast": "^1.1.3",
-    "@radix-ui/react-toggle": "^1.0.2",
-    "@radix-ui/react-tooltip": "^1.0.5",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "1.0.3",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "1.0.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "@reown/appkit": "^1.1.0",
+    "@reown/appkit-adapter-wagmi": "^1.1.0",
     "@secureseco-dao/diamond-governance-sdk": "^1.0.3",
-    "@tanstack/react-table": "^8.9.1",
-    "@tiptap/core": "^2.0.3",
-    "@tiptap/extension-link": "^2.0.3",
-    "@tiptap/extension-placeholder": "^2.0.3",
-    "@tiptap/pm": "^2.0.3",
-    "@tiptap/react": "^2.0.3",
-    "@tiptap/starter-kit": "^2.0.3",
+    "@tanstack/react-query": "^5.59.6",
+    "@tanstack/react-table": "^8.20.5",
+    "@tiptap/core": "^2.8.0",
+    "@tiptap/extension-link": "^2.8.0",
+    "@tiptap/extension-placeholder": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/react": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
     "@types/react-router-dom": "^5.3.3",
-    "@walletconnect/jsonrpc-types": "^1.0.3",
-    "@walletconnect/types": "^2.7.2",
-    "@web3modal/ethereum": "^2.3.7",
-    "@web3modal/react": "^2.3.7",
-    "alchemy-sdk": "^2.9.0",
-    "class-variance-authority": "^0.6.0",
-    "clsx": "^1.2.1",
-    "date-fns": "^2.30.0",
-    "dompurify": "^3.0.2",
-    "dotenv": "^16.0.3",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "ethers": "^5.7.2",
+    "@walletconnect/jsonrpc-types": "^1.0.4",
+    "@walletconnect/types": "^2.17.1",
+    "alchemy-sdk": "^3.4.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "dompurify": "^3.1.7",
+    "dotenv": "^16.4.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "ethers": "5",
     "file-saver": "^2.0.5",
     "http-server": "^14.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.9",
-    "react-icons": "^4.8.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "react-icons": "^5.3.0",
     "react-jazzicon": "^1.0.4",
-    "react-router": "^6.11.0",
-    "react-router-dom": "^6.11.0",
-    "tailwind-merge": "^1.12.0",
-    "wagmi": "^0.12.12"
+    "react-router": "^6.26.2",
+    "react-router-dom": "^6.26.2",
+    "tailwind-merge": "^2.5.3",
+    "viem": "^2.21.19",
+    "wagmi": "^2.12.17"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.20",
-    "@storybook/addon-links": "^7.0.20",
-    "@storybook/addon-mdx-gfm": "^7.0.20",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-styling": "^1.3.0",
-    "@storybook/blocks": "^7.0.20",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.20",
-    "@storybook/react-vite": "^7.0.20",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.1.0",
-    "@types/dompurify": "^3.0.2",
-    "@types/file-saver": "^2.0.5",
-    "@types/jest": "^29.5.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "@vitejs/plugin-react-swc": "^3.3.0",
-    "autoprefixer": "^10.4.14",
-    "chromatic": "^6.17.3",
-    "esbuild": "^0.17.19",
-    "eslint": "^8.39.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-tailwindcss": "^3.11.0",
-    "jest": "^29.5.0",
-    "postcss": "^8.4.23",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.8",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@storybook/addon-essentials": "8.3.5",
+    "@storybook/addon-interactions": "8.3.5",
+    "@storybook/addon-links": "8.3.5",
+    "@storybook/addon-mdx-gfm": "8.3.5",
+    "@storybook/addon-postcss": "2.0.0",
+    "@storybook/addon-styling": "1.3.0",
+    "@storybook/blocks": "8.3.5",
+    "@storybook/jest": "0.2.2",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-vite": "8.3.5",
+    "@storybook/test-runner": "0.19.1",
+    "@storybook/testing-library": "0.2.1",
+    "@types/dompurify": "^3.0.5",
+    "@types/file-saver": "^2.0.7",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "autoprefixer": "^10.4.20",
+    "chromatic": "^11.12.1",
+    "esbuild": "^0.24.0",
+    "eslint": "8",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-tailwindcss": "^3.17.4",
+    "jest": "^29.7.0",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "prop-types": "^15.8.1",
-    "storybook": "^7.0.20",
-    "tailwindcss": "^3.3.2",
-    "tailwindcss-animate": "^1.0.5",
-    "ts-jest": "^29.1.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.9"
+    "storybook": "^8.3.5",
+    "tailwindcss": "^3.4.13",
+    "tailwindcss-animate": "^1.0.7",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8"
   },
   "_id": "[email protected]"
 }

src/components/dashboard/ClaimDailyRewardCard.tsx

@@ -19,17 +19,21 @@ import { toast } from '@/src/hooks/useToast';
 import { TOKENS } from '@/src/lib/constants/tokens';
 import { BigNumber } from 'ethers';
 import { HiGift } from 'react-icons/hi2';
+import { Hex } from 'viem';
 
 export const ClaimDailyRewardCard = () => {
   const { data: timeClaimable, loading, error, refetch } = useTimeClaimable();
 
   const handleClaimReward = async () => {
     if (!timeClaimable) return;
-    toast.contractTransaction(timeClaimable.claimReward, {
-      error: 'Could not claim reward',
-      success: 'Reward claimed!',
-      onSuccess: () => refetch(),
-    });
+    toast.contractTransaction(
+      () => timeClaimable.claimReward().then((res) => res.hash as Hex),
+      {
+        error: 'Could not claim reward',
+        success: 'Reward claimed!',
+        onSuccess: () => refetch(),
+      }
+    );
   };
 
   return (

src/components/dashboard/MembershipStatus.tsx

@@ -11,34 +11,33 @@ import { Card, CardProps } from '@/src/components/ui/Card';
 import { Link } from '@/src/components/ui/Link';
 import { toast } from '@/src/hooks/useToast';
 import {
-  VerificationStatus,
   useVerification,
+  VerificationStatus,
 } from '@/src/hooks/useVerification';
 import { PREFERRED_NETWORK_METADATA } from '@/src/lib/constants/chains';
 import { cn } from '@/src/lib/utils';
+import { useAppKit } from '@reown/appkit/react';
 import { Stamp } from '@secureseco-dao/diamond-governance-sdk';
-import { useWeb3Modal } from '@web3modal/react';
 import { BigNumber } from 'ethers';
 import { HiOutlineExclamationCircle } from 'react-icons/hi2';
-import { Chain, useAccount, useNetwork, useSwitchNetwork } from 'wagmi';
+import { useAccount, useChainId, useSwitchChain } from 'wagmi';
+import { Chain } from 'wagmi/chains';
 
 export const MembershipStatus = () => {
-  const { open } = useWeb3Modal();
+  const { open } = useAppKit();
   const { isConnected } = useAccount();
-  const { chain } = useNetwork();
-  const { switchNetworkAsync, isLoading } = useSwitchNetwork({
-    chainId: PREFERRED_NETWORK_METADATA.id,
-  });
+  const chainId = useChainId();
+  const { switchChainAsync, isPending } = useSwitchChain();
 
   const { stamps, isVerified, getThresholdForTimestamp } = useVerification();
 
   return (
     <MembershipStatusView
       isConnected={isConnected}
-      chainId={chain?.id}
+      chainId={chainId}
       openConnector={open}
-      switchNetwork={switchNetworkAsync}
-      switchInProgress={isLoading}
+      switchNetwork={(chainId) => switchChainAsync({ chainId })}
+      switchInProgress={isPending}
       stamps={stamps}
       isVerified={isVerified}
       getThresholdForTimestamp={getThresholdForTimestamp}
@@ -66,9 +65,7 @@ export const MembershipStatusView = ({
   stamps?: Stamp[] | null;
   isVerified: (stamp: Stamp) => VerificationStatus;
   getThresholdForTimestamp: (timestamp: number) => BigNumber;
-  switchNetwork?:
-    | ((chainId_?: number | undefined) => Promise<Chain>)
-    | undefined;
+  switchNetwork?: ((chainId: number) => Promise<Chain>) | undefined;
   switchInProgress: boolean;
 }) => {
   // If user has not connected a wallet:
@@ -96,7 +93,7 @@ export const MembershipStatusView = ({
       });
     if (switchNetwork) {
       try {
-        await switchNetwork();
+        await switchNetwork(PREFERRED_NETWORK_METADATA.id);
       } catch (e: any) {
         toast.error({
           title: 'Could not switch network',

src/components/finance/DepositAssets.tsx

@@ -34,8 +34,8 @@ import {
 import { useDiamondSDKContext } from '@/src/context/DiamondGovernanceSDK';
 import {
   Pools,
-  TokenData,
   pools,
+  TokenData,
   useDepositAssets,
 } from '@/src/hooks/useDepositAssets';
 import { ContractTransactionToast, toast } from '@/src/hooks/useToast';
@@ -47,7 +47,8 @@ import { BigNumber } from 'ethers';
 import { formatUnits } from 'ethers/lib/utils.js';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { HiChevronLeft } from 'react-icons/hi2';
-import { useAccount, useBalance, useNetwork, Address as wAddress } from 'wagmi';
+import { Hex, Address as wAddress } from 'viem';
+import { useAccount, useBalance, useChainId } from 'wagmi';
 
 type DepositAssetsData = {
   token: Token;
@@ -76,7 +77,7 @@ export const DepositAssets = () => {
   const { daoAddress, secoinAddress } = useDiamondSDKContext();
   const { isConnected, address } = useAccount();
   const { data: maticData } = useBalance({ address });
-  const { chain } = useNetwork();
+  const chainId = useChainId();
 
   // Creating 'tokens', the object displaying known tokens that can be deposited through this component,
   // using ERC20 contract writes or native token transaction.
@@ -116,7 +117,7 @@ export const DepositAssets = () => {
     useDepositAssets({
       token,
       pool,
-      amount: amount ?? undefined,
+      amount: amount?.toBigInt() ?? undefined,
     });
 
   // State for loading symbol during transaction
@@ -397,7 +398,7 @@ export const DepositAssets = () => {
                         content: <ConnectWalletWarning action="to deposit" />,
                       },
                       {
-                        when: chain?.id !== PREFERRED_NETWORK_METADATA.id,
+                        when: chainId !== PREFERRED_NETWORK_METADATA.id,
                         content: (
                           <Warning> Switch network to deposit assets </Warning>
                         ),

src/components/governance/ProposalTag.tsx

@@ -14,7 +14,7 @@ import {
   Proposal,
   ProposalStatus,
 } from '@secureseco-dao/diamond-governance-sdk';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { BigNumber } from 'ethers';
 import { IconType } from 'react-icons';
 import {
@@ -75,7 +75,7 @@ const ProposalTag = ({
       {props.icon ? (
         <props.icon className="h-4 w-4 shrink-0" />
       ) : (
-        proposalTagIcon[variant as keyof typeof proposalTagIcon] ?? <></>
+        (proposalTagIcon[variant as keyof typeof proposalTagIcon] ?? <></>)
       )}
       <div className="break-inside-avoid">{children}</div>
     </div>

src/components/layout/ConnectButton.tsx

@@ -23,35 +23,32 @@ import {
 } from '@/src/components/ui/Tooltip';
 import { PREFERRED_NETWORK_METADATA } from '@/src/lib/constants/chains';
 import { cn } from '@/src/lib/utils';
-import { useWeb3Modal } from '@web3modal/react';
+import { useAppKit } from '@reown/appkit/react';
 import { FaWallet } from 'react-icons/fa';
 import { HiExclamationCircle, HiOutlineLogout } from 'react-icons/hi';
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
-import { useAccount, useDisconnect, useNetwork, useSwitchNetwork } from 'wagmi';
+import { useAccount, useChainId, useDisconnect, useSwitchChain } from 'wagmi';
 
 const ConnectButton = ({ buttonClassName }: { buttonClassName?: string }) => {
   const { disconnect } = useDisconnect();
-  const { open } = useWeb3Modal();
+  const { open } = useAppKit();
   const { address } = useAccount();
-  const { chain } = useNetwork();
+  const chainId = useChainId();
 
   // Make sure the user is on the correct network
   const [attemptedSwitch, setAttemptedSwitch] = useState(false);
-  const { switchNetworkAsync, isLoading } = useSwitchNetwork({
-    chainId: PREFERRED_NETWORK_METADATA.id,
-  });
+  const { switchChainAsync, isPending: isLoading } = useSwitchChain({});
 
   useEffect(() => {
     const handleSwitchNetwork = async () => {
       if (
         !attemptedSwitch &&
         !isLoading &&
-        chain &&
-        chain?.id !== PREFERRED_NETWORK_METADATA.id &&
-        switchNetworkAsync
+        chainId !== PREFERRED_NETWORK_METADATA.id &&
+        switchChainAsync
       ) {
         try {
-          await switchNetworkAsync();
+          await switchChainAsync({ chainId: PREFERRED_NETWORK_METADATA.id });
         } catch (e) {
           // Unable to switch network (possibly because it's already in progress since another render)
           console.error(e);
@@ -61,7 +58,7 @@ const ConnectButton = ({ buttonClassName }: { buttonClassName?: string }) => {
     };
 
     handleSwitchNetwork();
-  }, [chain, switchNetworkAsync, isLoading]);
+  }, [chainId, switchChainAsync, isLoading]);
 
   let jazznumber = address ? jsNumberForAddress(address!) : 0;
 
@@ -71,7 +68,7 @@ const ConnectButton = ({ buttonClassName }: { buttonClassName?: string }) => {
         <DropdownMenuTrigger className="relative flex rounded-full text-sm focus:outline-none ring-ring ring-offset-2 ring-offset-background focus:ring-2">
           <span className="sr-only">Open wallet menu</span>
           <Jazzicon diameter={40} seed={jazznumber} />
-          {chain?.id !== PREFERRED_NETWORK_METADATA.id && (
+          {chainId !== PREFERRED_NETWORK_METADATA.id && (
             <Tooltip>
               <TooltipTrigger asChild className="absolute -right-2 -top-2">
                 <div>