fix(web): improve onClick functionality #1657
Conversation
✅ Deploy Preview for kleros-v2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
| Name | Link |
|---|---|
| 🔨 Latest commit | 1fd68f0 |
👷 Deploy request for kleros-v2-university pending review.Visit the deploys page to approve it
|
WalkthroughThe recent updates enhance the Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- web/src/layout/Header/DesktopHeader.tsx (5 hunks)
- web/src/layout/Header/navbar/Menu/Settings/index.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
- web/src/layout/Header/navbar/Menu/Settings/index.tsx
Additional comments not posted (5)
web/src/layout/Header/DesktopHeader.tsx (5)
6-6: LGTM! Imports are correct.The
useAccountanduseChainIdhooks are correctly imported fromwagmi.
12-12: LGTM! Constant import is correct.The
DEFAULT_CHAINconstant is correctly imported for chain validation.
78-88: LGTM! Styled component prop addition is correct.The
ConnectWalletContainerstyled component now correctly accepts theisCorrectChainprop for conditional styling.
111-113: LGTM! State and hooks changes are correct.The
chainIdandisCorrectChainvariables are correctly introduced and implemented for chain validation.
149-152: LGTM! Rendering logic changes are correct.The
ConnectWalletContainernow correctly passes theisCorrectChainprop and conditionally sets theonClickhandler based on connection and chain validation.
There was a problem hiding this comment.
doesnt work. correct code below, this is different from escrow-v2 and curate-v2 since the useAccount hook has the chainId in the new wagmi versions. The problem with useChainId is that it fetches the chainId used by the web application and not from the wallet:
import React, { useCallback, useEffect, useState } from "react";
import styled, { css } from "styled-components";
import { useLocation } from "react-router-dom";
import { useToggle } from "react-use";
import { useAccount } 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";
import ConnectWallet from "components/ConnectWallet";
import LightButton from "components/LightButton";
import Onboarding from "components/Popup/MiniGuides/Onboarding";
import Logo from "./Logo";
import DappList from "./navbar/DappList";
import Explore from "./navbar/Explore";
import Menu from "./navbar/Menu";
import Help from "./navbar/Menu/Help";
import Settings from "./navbar/Menu/Settings";
const Container = styled.div`
display: none;
position: absolute;
${landscapeStyle(
() => css`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
position: relative;
`
)};
`;
const LeftSide = styled.div`
display: flex;
`;
const MiddleSide = styled.div`
display: flex;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: ${({ theme }) => theme.white} !important;
`;
const RightSide = styled.div`
display: flex;
gap: ${responsiveSize(8, 16, 300, 1024)};
margin-left: 8px;
canvas {
width: 20px;
}
`;
const LightButtonContainer = styled.div`
display: flex;
align-items: center;
width: 16px;
margin-left: ${responsiveSize(4, 8)};
margin-right: ${responsiveSize(12, 16)};
`;
const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)`
fill: ${({ theme }) => theme.white} !important;
`;
const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain: boolean }>`
label {
color: ${({ theme }) => theme.white};
}
${({ isConnected, isDefaultChain }) =>
isConnected &&
isDefaultChain &&
css`
cursor: pointer;
& > * {
pointer-events: none;
}
`}
`;
const PopupContainer = styled.div`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: ${({ theme }) => theme.blackLowOpacity};
`;
const DesktopHeader: React.FC = () => {
const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false);
const [initialTab, setInitialTab] = useState<number>(0);
const location = useLocation();
const { isConnected, chainId } = useAccount();
const isDefaultChain = chainId === DEFAULT_CHAIN;
const initializeFragmentURL = useCallback(() => {
const hash = location.hash;
const hasOnboardingPath = hash.includes("#onboarding");
const hasNotificationsPath = hash.includes("#notifications");
toggleIsOnboardingMiniGuidesOpen(hasOnboardingPath);
toggleIsSettingsOpen(hasNotificationsPath);
setInitialTab(hasNotificationsPath ? 1 : 0);
}, [location.hash, toggleIsSettingsOpen, toggleIsOnboardingMiniGuidesOpen]);
useEffect(initializeFragmentURL, [initializeFragmentURL]);
useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
return (
<>
<Container>
<LeftSide>
<LightButtonContainer>
<LightButton
text=""
onClick={() => {
toggleIsDappListOpen();
}}
Icon={StyledKlerosSolutionsIcon}
/>
</LightButtonContainer>
<Logo />
</LeftSide>
<MiddleSide>
<Explore />
</MiddleSide>
<RightSide>
<ConnectWalletContainer
{...{ isConnected, isDefaultChain }}
onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}
>
<ConnectWallet />
</ConnectWalletContainer>
<Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
</RightSide>
</Container>
{(isDappListOpen || isHelpOpen || isSettingsOpen) && (
<PopupContainer>
{isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
{isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
{isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
</PopupContainer>
)}
{isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}
</>
);
};
export default DesktopHeader;
|
Code Climate has analyzed commit d4f28a5 and detected 0 issues on this pull request. View more on Code Climate. |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- web/src/layout/Header/DesktopHeader.tsx (5 hunks)
Files skipped from review as they are similar to previous changes (1)
- web/src/layout/Header/DesktopHeader.tsx
PR-Codex overview
The focus of this PR is to optimize the settings menu in the header by passing additional props and conditionally rendering based on the default chain.
Detailed summary
isDefaultChainprop toConnectWalletContainerstyled componentDEFAULT_CHAINimportchainIdfromuseAccounthook inDesktopHeaderConnectWalletContaineronClick logic to consider bothisConnectedandisDefaultChainSummary by CodeRabbit
New Features
Bug Fixes
Documentation