Fix/qr modal and chain source

web/src/components/ConnectWallet/AccountDisplay.tsx

@@ -4,9 +4,8 @@ import styled, { css } from "styled-components";
 import Identicon from "react-identicons";
 import { isAddress } from "viem";
 import { normalize } from "viem/ens";
-import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
+import { useAccount, useEnsAvatar, useEnsName } from "wagmi";
 
-import { getChain } from "consts/chains";
 import { shortenAddress } from "utils/shortenAddress";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -144,8 +143,7 @@ export const AddressOrName: React.FC<IAddressOrName> = ({ address: propAddress }
 };
 
 export const ChainDisplay: React.FC = () => {
-  const chainId = useChainId();
-  const chain = getChain(chainId);
+  const { chain } = useAccount();
   return <label>{chain?.name}</label>;
 };
 

web/src/components/ConnectWallet/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { useAccount, useChainId, useSwitchChain } from "wagmi";
+import { useAccount, useSwitchChain } from "wagmi";
 import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
 import { Button } from "@kleros/ui-components-library";
 import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
@@ -29,7 +29,6 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
   );
 };
 
-
 const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
   const { open } = useWeb3Modal();
   const { open: isOpen } = useWeb3ModalState();
@@ -45,10 +44,9 @@ const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
 };
 
 const ConnectWallet: React.FC<{ className?: string }> = ({ className }) => {
-  const chainId = useChainId();
-  const { isConnected } = useAccount();
+  const { isConnected, chain } = useAccount();
   if (isConnected) {
-    if (chainId !== DEFAULT_CHAIN) {
+    if (chain?.id !== DEFAULT_CHAIN) {
       return <SwitchChainButton {...{ className }} />;
     } else return <AccountDisplay />;
   } else return <ConnectButton {...{ className }} />;

web/src/components/EnsureAuth.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 
 import * as jwt from "jose";
 import { SiweMessage } from "siwe";
-import { useAccount, useChainId, useSignMessage } from "wagmi";
+import { useAccount, useSignMessage } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -37,8 +37,7 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonTex
   const [isLoading, setIsLoading] = useState(false);
 
   const [authToken, setAuthToken] = useSessionStorage<string | null>("auth-token", localToken);
-  const { address } = useAccount();
-  const chainId = useChainId();
+  const { address, chain } = useAccount();
 
   const { signMessageAsync } = useSignMessage();
 
@@ -58,7 +57,7 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonTex
       setIsLoading(true);
       if (!address) return;
 
-      const message = await createSiweMessage(address, "Sign In to Kleros with Ethereum.", chainId);
+      const message = await createSiweMessage(address, "Sign In to Kleros with Ethereum.", chain.id);
 
       const signature = await signMessageAsync({ message });
 

web/src/consts/chains.ts

@@ -1,4 +1,3 @@
-import { extractChain } from "viem";
 import { Chain, arbitrumSepolia, gnosisChiado } from "wagmi/chains";
 
 export const DEFAULT_CHAIN = arbitrumSepolia.id;
@@ -15,9 +14,3 @@ export const QUERY_CHAINS: Record<number, Chain> = {
 export const ALL_CHAINS = [...Object.values(SUPPORTED_CHAINS), ...Object.values(QUERY_CHAINS)];
 
 export const QUERY_CHAIN_IDS = Object.keys(QUERY_CHAINS);
-
-export const getChain = (chainId: number): Chain | null =>
-  extractChain({
-    chains: ALL_CHAINS,
-    id: chainId,
-  });

web/src/context/Web3Provider.tsx

@@ -24,10 +24,7 @@ const getTransports = () => {
   const alchemyTransport = (chain: Chain) =>
     fallback([http(alchemyURL("https", chain.id)), webSocket(alchemyURL("wss", chain.id))]);
   const chiadoTransport = () =>
-    fallback([
-      http("https://rpc.chiadochain.net"),
-      webSocket("wss://rpc.chiadochain.net/wss"),
-    ]);
+    fallback([http("https://rpc.chiadochain.net"), webSocket("wss://rpc.chiadochain.net/wss")]);
 
   return {
     [arbitrumSepolia.id]: alchemyTransport(arbitrumSepolia),
@@ -42,7 +39,7 @@ const projectId = import.meta.env.WALLETCONNECT_PROJECT_ID ?? "";
 const wagmiConfig = createConfig({
   chains,
   transports,
-  connectors: [walletConnect({ projectId })],
+  connectors: [walletConnect({ projectId, showQrModal: false })],
 });
 
 createWeb3Modal({

web/src/hooks/useNativeTokenSymbol.ts

@@ -1,8 +1,6 @@
-import { useChainId } from "wagmi";
-import { getChain } from "consts/chains";
+import { useAccount } from "wagmi";
 
 export const useNativeTokenSymbol = () => {
-  const chainId = useChainId();
-  const chain = getChain(chainId);
+  const { chain } = useAccount();
   return chain?.nativeCurrency.symbol;
-};
+};

web/src/hooks/useTokenMetadata.ts

@@ -1,16 +1,16 @@
 import { useState, useEffect } from "react";
 import { Alchemy } from "alchemy-sdk";
-import { useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 import { alchemyConfig } from "utils/alchemyConfig";
 
 export const useTokenMetadata = (tokenAddress: string) => {
-  const chainId = useChainId();
+  const { chain } = useAccount();
   const [tokenMetadata, setTokenMetadata] = useState<any>(null);
 
   useEffect(() => {
     const fetchTokenMetadata = async () => {
-      if (!tokenAddress || tokenAddress === "native") return;
-      const alchemy = new Alchemy(alchemyConfig(chainId));
+      if (!tokenAddress || tokenAddress === "native" || !chain) return;
+      const alchemy = new Alchemy(alchemyConfig(chain.id));
       try {
         const metadata = await alchemy.core.getTokenMetadata(tokenAddress);
         setTokenMetadata(metadata);
@@ -21,7 +21,7 @@ export const useTokenMetadata = (tokenAddress: string) => {
     };
 
     fetchTokenMetadata();
-  }, [tokenAddress, chainId]);
+  }, [tokenAddress, chain]);
 
   return { tokenMetadata };
-};
+};

web/src/layout/Header/DesktopHeader.tsx

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { useToggle } from "react-use";
 import { Link } from "react-router-dom";
-import { useAccount, useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 import { DEFAULT_CHAIN } from "consts/chains";
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
@@ -75,7 +75,8 @@ const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain
   }
 
   ${({ isConnected, isDefaultChain }) =>
-    isConnected && isDefaultChain &&
+    isConnected &&
+    isDefaultChain &&
     css`
       cursor: pointer;
       & > * {
@@ -88,24 +89,19 @@ const DesktopHeader = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
   const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
-
-  const chainId = useChainId();
-  const { isConnected } = useAccount();
-
-  const isDefaultChain = chainId === DEFAULT_CHAIN;
-
+
+  const { isConnected, chain } = useAccount();
+
+  const isDefaultChain = chain?.id === DEFAULT_CHAIN;
+
   useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
 
   return (
     <>
       <Container>
         <LeftSide>
           <LightButtonContainer>
-            <LightButton
-              text=""
-              onClick={toggleIsDappListOpen}
-              Icon={StyledKlerosSolutionsIcon}
-            />
+            <LightButton text="" onClick={toggleIsDappListOpen} Icon={StyledKlerosSolutionsIcon} />
           </LightButtonContainer>
           <StyledLink to={"/"}>
             <EscrowLogo />
@@ -117,7 +113,10 @@ const DesktopHeader = () => {
         </MiddleSide>
 
         <RightSide>
-          <ConnectWalletContainer {...{ isConnected, isDefaultChain }} onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}>
+          <ConnectWalletContainer
+            {...{ isConnected, isDefaultChain }}
+            onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}
+          >
             <ConnectWallet />
           </ConnectWalletContainer>
           <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
@@ -134,4 +133,4 @@ const DesktopHeader = () => {
   );
 };
 
-export default DesktopHeader;
+export default DesktopHeader;

web/src/pages/MyTransactions/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Route, Routes } from "react-router-dom";
-import { useAccount, useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 import { DEFAULT_CHAIN } from "consts/chains";
 import ConnectWallet from "components/ConnectWallet";
 import TransactionsFetcher from "./TransactionsFetcher";
@@ -27,9 +27,8 @@ export const ConnectWalletContainer = styled.div`
 `;
 
 const Dashboard: React.FC = () => {
-  const { isConnected } = useAccount();
-  const chainId = useChainId();
-  const isOnSupportedChain = chainId === DEFAULT_CHAIN;
+  const { isConnected, chain } = useAccount();
+  const isOnSupportedChain = chain?.id === DEFAULT_CHAIN;
 
   return (
     <Container>

web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx

@@ -8,7 +8,6 @@ import {
   useSimulateEscrowUniversalCreateErc20Transaction,
   escrowUniversalAddress,
 } from "hooks/contracts/generated";
-import { useChainId } from "wagmi";
 import { erc20Abi } from "viem";
 import { useNewTransactionContext } from "context/NewTransactionContext";
 import {
@@ -47,8 +46,7 @@ const DepositPaymentButton: React.FC = () => {
   const refetchQuery = useQueryRefetch();
   const [isSending, setIsSending] = useState(false);
   const [isApproved, setIsApproved] = useState(false);
-  const { address } = useAccount();
-  const chainId = useChainId();
+  const { address, chain } = useAccount();
   const ensResult = useEnsAddress({ name: sellerAddress, chainId: 1 });
   const deadlineTimestamp = useMemo(() => BigInt(Math.floor(new Date(deadline).getTime() / 1000)), [deadline]);
   const isNativeTransaction = sendingToken?.address === "native";
@@ -62,11 +60,11 @@ const DepositPaymentButton: React.FC = () => {
   }, [sellerAddress, ensResult.data]);
 
   const { data: allowance, refetch: refetchAllowance } = useReadContract({
-    query: { enabled: !isNativeTransaction },
+    query: { enabled: !isNativeTransaction && chain?.id },
     address: sendingToken?.address,
     abi: erc20Abi,
     functionName: "allowance",
-    args: [address, escrowUniversalAddress?.[chainId]],
+    args: [address, escrowUniversalAddress?.[chain?.id]],
   });
 
   useEffect(() => {
@@ -101,11 +99,11 @@ const DepositPaymentButton: React.FC = () => {
     useWriteEscrowUniversalCreateErc20Transaction(createERC20TransactionConfig);
 
   const { data: approveConfig } = useSimulateContract({
-    query: { enabled: !isNativeTransaction },
+    query: { enabled: !isNativeTransaction && chain?.id },
     address: sendingToken?.address,
     abi: erc20Abi,
     functionName: "approve",
-    args: [escrowUniversalAddress?.[chainId], transactionValue],
+    args: [escrowUniversalAddress?.[chain?.id], transactionValue],
   });
 
   const { writeContractAsync: approve } = useWriteContract(approveConfig);

web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from "react";
 import styled from "styled-components";
 import { useClickAway } from "react-use";
 import { Alchemy } from "alchemy-sdk";
-import { useAccount, useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 import { useNewTransactionContext } from "context/NewTransactionContext";
 import { initializeTokens } from "utils/initializeTokens";
 import { alchemyConfig } from "utils/alchemyConfig";
@@ -18,24 +18,23 @@ const Container = styled.div`
 `;
 
 const TokenSelector: React.FC = () => {
-  const { address } = useAccount();
-  const chainId = useChainId();
+  const { address, chain } = useAccount();
   const { sendingToken, setSendingToken } = useNewTransactionContext();
   const [tokens, setTokens] = useLocalStorage("tokens", []);
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef(null);
   const [loading, setLoading] = useState(true);
 
-  const alchemyInstance = useMemo(() => new Alchemy(alchemyConfig(chainId)), [chainId]);
+  const alchemyInstance = useMemo(() => chain && new Alchemy(alchemyConfig(chain?.id)), [chain]);
 
   useClickAway(containerRef, () => setIsOpen(false));
 
   useEffect(() => {
-    if (address && chainId) {
+    if (address && alchemyInstance && chain) {
       localStorage.removeItem("tokens");
-      initializeTokens(address, setTokens, setLoading, chainId, alchemyInstance);
+      initializeTokens(address, setTokens, setLoading, chain.id, alchemyInstance);
     }
-  }, [address, chainId, alchemyInstance]);
+  }, [address, chain, alchemyInstance]);
 
   useEffect(() => {
     if (tokens?.length > 0) {

web/src/pages/NewTransaction/index.tsx

@@ -13,7 +13,7 @@ import Notifications from "./Terms/Notifications";
 import Payment from "./Terms/Payment";
 import Timeline from "./Timeline";
 import { responsiveSize } from "styles/responsiveSize";
-import { useAccount, useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 import ConnectWallet from "components/ConnectWallet";
 import { ConnectWalletContainer } from "../MyTransactions";
 import { DEFAULT_CHAIN } from "consts/chains";
@@ -39,11 +39,10 @@ const MiddleContentContainer = styled.div`
 const NewTransaction: React.FC = () => {
   const location = useLocation();
   const { width } = useWindowSize();
-  const { isConnected } = useAccount();
-  const chainId = useChainId();
+  const { isConnected, chain } = useAccount();
   const isPreviewPage = location.pathname.includes("/preview");
   const isMobileView = width <= BREAKPOINT_LANDSCAPE;
-  const isOnSupportedChain = chainId === DEFAULT_CHAIN;
+  const isOnSupportedChain = chain?.id === DEFAULT_CHAIN;
 
   return (
     <>