From 02eed64651612862dd8c20f6894bb5df1761ad48 Mon Sep 17 00:00:00 2001 From: Shubham Parkhi Date: Fri, 19 Jul 2024 00:50:32 +0530 Subject: [PATCH 1/3] refactor(web): clean code --- web/src/layout/Header/DesktopHeader.tsx | 2 +- web/src/layout/Header/navbar/Menu/Settings/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 5363a1fbc..5cce006d0 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -141,7 +141,7 @@ const DesktopHeader: React.FC = () => { - + diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx index 28575478f..aeb98797f 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx @@ -91,7 +91,7 @@ const Settings: React.FC = ({ toggleIsSettingsOpen, initialTab }) => setCurrentTab(n); }} /> - {currentTab === 0 ? : } + {currentTab === 0 ? : } ); }; From 10939c6e47b903970dea2fa6fb553cae41568b54 Mon Sep 17 00:00:00 2001 From: Shubham Parkhi Date: Sat, 20 Jul 2024 23:54:55 +0530 Subject: [PATCH 2/3] fix(web): improve onClick functionality --- web/src/layout/Header/DesktopHeader.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 5cce006d0..5eefab8ad 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -3,11 +3,14 @@ import styled, { css } from "styled-components"; import { useLocation } from "react-router-dom"; import { useToggle } from "react-use"; +import { useAccount, useChainId } from "wagmi"; import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; +import { DEFAULT_CHAIN } from "consts/chains"; + import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; @@ -21,7 +24,6 @@ import Explore from "./navbar/Explore"; import Menu from "./navbar/Menu"; import Help from "./navbar/Menu/Help"; import Settings from "./navbar/Menu/Settings"; -import { useAccount } from "wagmi"; const Container = styled.div` display: none; @@ -73,13 +75,14 @@ const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)` fill: ${({ theme }) => theme.white} !important; `; -const ConnectWalletContainer = styled.div<{ isConnected: boolean }>` +const ConnectWalletContainer = styled.div<{ isConnected: boolean; isCorrectChain: boolean }>` label { color: ${({ theme }) => theme.white}; } - ${({ isConnected }) => + ${({ isConnected, isCorrectChain }) => isConnected && + isCorrectChain && css` cursor: pointer; & > * { @@ -105,7 +108,9 @@ const DesktopHeader: React.FC = () => { const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false); const [initialTab, setInitialTab] = useState(0); const location = useLocation(); + const chainId = useChainId(); const { isConnected } = useAccount(); + const isCorrectChain = chainId === DEFAULT_CHAIN; const initializeFragmentURL = useCallback(() => { const hash = location.hash; @@ -141,7 +146,10 @@ const DesktopHeader: React.FC = () => { - + From d4f28a57c0d3718b54e46430c5feb1ed1c071771 Mon Sep 17 00:00:00 2001 From: Shubham Parkhi Date: Mon, 22 Jul 2024 15:24:14 +0530 Subject: [PATCH 3/3] fix(web): correct hook use --- web/src/layout/Header/DesktopHeader.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 5eefab8ad..afbf5369d 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 { useLocation } from "react-router-dom"; import { useToggle } from "react-use"; -import { useAccount, useChainId } from "wagmi"; +import { useAccount } from "wagmi"; import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; @@ -75,14 +75,14 @@ const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)` fill: ${({ theme }) => theme.white} !important; `; -const ConnectWalletContainer = styled.div<{ isConnected: boolean; isCorrectChain: boolean }>` +const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain: boolean }>` label { color: ${({ theme }) => theme.white}; } - ${({ isConnected, isCorrectChain }) => + ${({ isConnected, isDefaultChain }) => isConnected && - isCorrectChain && + isDefaultChain && css` cursor: pointer; & > * { @@ -108,9 +108,8 @@ const DesktopHeader: React.FC = () => { const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false); const [initialTab, setInitialTab] = useState(0); const location = useLocation(); - const chainId = useChainId(); - const { isConnected } = useAccount(); - const isCorrectChain = chainId === DEFAULT_CHAIN; + const { isConnected, chainId } = useAccount(); + const isDefaultChain = chainId === DEFAULT_CHAIN; const initializeFragmentURL = useCallback(() => { const hash = location.hash; @@ -147,8 +146,8 @@ const DesktopHeader: React.FC = () => {