From 2e9311ebb8f9eb70b36f25e29c1a3ddc2ca01fa1 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 11 Sep 2024 19:29:24 +0530 Subject: [PATCH 1/3] fix(web): fix-double-wallet-connect-modal-opening --- web/src/context/Web3Provider.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/web/src/context/Web3Provider.tsx b/web/src/context/Web3Provider.tsx index a9023ff..34d0d82 100644 --- a/web/src/context/Web3Provider.tsx +++ b/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({ From 0e7f02edacf864c360cf2efcc176690ec1ef8112 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 11 Sep 2024 19:59:29 +0530 Subject: [PATCH 2/3] fix(web): fix-incorrect-chain-id-detection --- .../ConnectWallet/AccountDisplay.tsx | 6 ++-- web/src/components/ConnectWallet/index.tsx | 8 ++--- web/src/components/EnsureAuth.tsx | 7 ++--- web/src/hooks/useNativeTokenSymbol.ts | 8 ++--- web/src/hooks/useTokenMetadata.ts | 12 ++++---- web/src/layout/Header/DesktopHeader.tsx | 29 +++++++++---------- web/src/pages/MyTransactions/index.tsx | 7 ++--- .../DepositPaymentButton.tsx | 12 ++++---- .../TokenAndAmount/TokenSelector/index.tsx | 13 ++++----- web/src/pages/NewTransaction/index.tsx | 7 ++--- 10 files changed, 48 insertions(+), 61 deletions(-) diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx index 2a41523..ded18b6 100644 --- a/web/src/components/ConnectWallet/AccountDisplay.tsx +++ b/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 = ({ address: propAddress } }; export const ChainDisplay: React.FC = () => { - const chainId = useChainId(); - const chain = getChain(chainId); + const { chain } = useAccount(); return ; }; diff --git a/web/src/components/ConnectWallet/index.tsx b/web/src/components/ConnectWallet/index.tsx index c3f7e04..935839b 100644 --- a/web/src/components/ConnectWallet/index.tsx +++ b/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 ; } else return ; } else return ; diff --git a/web/src/components/EnsureAuth.tsx b/web/src/components/EnsureAuth.tsx index 75b09ec..33637a8 100644 --- a/web/src/components/EnsureAuth.tsx +++ b/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 = ({ children, message, buttonTex const [isLoading, setIsLoading] = useState(false); const [authToken, setAuthToken] = useSessionStorage("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 = ({ 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 }); diff --git a/web/src/hooks/useNativeTokenSymbol.ts b/web/src/hooks/useNativeTokenSymbol.ts index c0c0461..31fe874 100644 --- a/web/src/hooks/useNativeTokenSymbol.ts +++ b/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; -}; \ No newline at end of file +}; diff --git a/web/src/hooks/useTokenMetadata.ts b/web/src/hooks/useTokenMetadata.ts index eee5f96..396613e 100644 --- a/web/src/hooks/useTokenMetadata.ts +++ b/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(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 }; -}; \ No newline at end of file +}; diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 9f40305..7b98c6f 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/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,12 +89,11 @@ 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 ( @@ -101,11 +101,7 @@ const DesktopHeader = () => { - + @@ -117,7 +113,10 @@ const DesktopHeader = () => { - + @@ -134,4 +133,4 @@ const DesktopHeader = () => { ); }; -export default DesktopHeader; \ No newline at end of file +export default DesktopHeader; diff --git a/web/src/pages/MyTransactions/index.tsx b/web/src/pages/MyTransactions/index.tsx index 78e7539..2af3aec 100644 --- a/web/src/pages/MyTransactions/index.tsx +++ b/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 ( diff --git a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx index 8426d9c..bfc4650 100644 --- a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx +++ b/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); diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx index 182653d..630fa55 100644 --- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx +++ b/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) { diff --git a/web/src/pages/NewTransaction/index.tsx b/web/src/pages/NewTransaction/index.tsx index d788388..8f3ab66 100644 --- a/web/src/pages/NewTransaction/index.tsx +++ b/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 ( <> From a60a59aa98178bebdb6361dec8df7b837017e840 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 11 Sep 2024 20:06:07 +0530 Subject: [PATCH 3/3] refactor(web): remove-get-chain-function --- web/src/consts/chains.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/web/src/consts/chains.ts b/web/src/consts/chains.ts index 7849b63..17879cd 100644 --- a/web/src/consts/chains.ts +++ b/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 = { 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, - });