Skip to content

Commit 7b39263

Browse files
tractorsstractorss
committed
Merge branch 'master' into refactor/evidence-refactors
2 parents 66eb1a5 + 779eb66 commit 7b39263

File tree

11 files changed

+231
-46
lines changed

11 files changed

+231
-46
lines changed

‎web/.parcelrc‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
{
22
"extends": "@parcel/config-default",
33
"transformers": {
4-
"*.svg": ["...", "@parcel/transformer-svg-react"],
5-
"tsx:*.svg": ["@parcel/transformer-svg-react"],
6-
"tsx:*": ["..."]
4+
"web/src/**/*.svg": [
5+
"...",
6+
"@parcel/transformer-svg-react"
7+
],
8+
"tsx:*.svg": [
9+
"@parcel/transformer-svg-react"
10+
],
11+
"tsx:*": [
12+
"..."
13+
]
714
}
815
}

‎web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
"react-use": "^17.4.3",
111111
"siwe": "^2.3.2",
112112
"styled-components": "^5.3.11",
113+
"subgraph-status": "^1.2.3",
113114
"viem": "^1.21.4",
114115
"wagmi": "^1.4.13"
115116
}

‎web/src/components/ItemCard/ItemField/LongTextField.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,11 @@ const StyledLabel = styled.label`
2626
`;
2727

2828
const LongTextFullDisplay: React.FC<{ text: string; toggleModal: () => void }> = ({ text, toggleModal }) => (
29-
<>
30-
<Overlay />
29+
<Overlay>
3130
<StyledModal {...{ toggleModal }}>
3231
<TextDisplay value={text} disabled />
3332
</StyledModal>
34-
</>
33+
</Overlay>
3534
);
3635

3736
export interface ILongTextField {

‎web/src/components/Modal.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,11 @@ const Modal: React.FC<{ children: React.ReactNode; toggleModal: () => void; clas
3232
const containerRef = useRef(null);
3333
useClickAway(containerRef, () => toggleModal());
3434
return (
35-
<>
36-
<Overlay />
35+
<Overlay>
3736
<StyledModal {...{ className }} ref={containerRef}>
3837
{children}
3938
</StyledModal>
40-
</>
39+
</Overlay>
4140
);
4241
};
4342

‎web/src/components/Overlay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ export const Overlay = styled.div`
77
width: 100vw;
88
height: 100vh;
99
background-color: ${({ theme }) => theme.blackLowOpacity};
10-
z-index: 1;
10+
z-index: 30;
1111
`;

‎web/src/context/Web3Provider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import { useToggleTheme } from "hooks/useToggleThemeContext";
99
import { useTheme } from "styled-components";
1010

1111
const chains = [arbitrumSepolia, mainnet, gnosisChiado];
12-
const projectId = process.env.WALLETCONNECT_PROJECT_ID ?? "6efaa26765fa742153baf9281e218217";
12+
const projectId = process.env.WALLETCONNECT_PROJECT_ID ?? "";
1313

1414
const { publicClient, webSocketPublicClient } = configureChains(chains, [
15-
alchemyProvider({ apiKey: process.env.ALCHEMY_API_KEY ?? "VeN8jzKXoqqi6av_8M4T1aYNNUEnSpgf" }),
15+
alchemyProvider({ apiKey: process.env.ALCHEMY_API_KEY ?? "" }),
1616
jsonRpcProvider({
1717
rpc: () => ({
1818
http: `https://rpc.chiadochain.net`,

‎web/src/layout/Header/DesktopHeader.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44
import { useToggle } from "react-use";
55
import { Link } from "react-router-dom";
6+
import { useAccount, useNetwork } from "wagmi";
67
import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
8+
import { DEFAULT_CHAIN } from "consts/chains";
79
import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
810
import DappLogo from "svgs/header/dapp-logo.svg";
911
import ConnectWallet from "components/ConnectWallet";
@@ -13,7 +15,6 @@ import Explore from "./navbar/Explore";
1315
import Menu from "./navbar/Menu";
1416
import Help from "./navbar/Menu/Help";
1517
import Settings from "./navbar/Menu/Settings";
16-
import { Overlay } from "components/Overlay";
1718
import { PopupContainer } from ".";
1819

1920
const Container = styled.div`
@@ -69,16 +70,28 @@ const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)`
6970
fill: ${({ theme }) => theme.white} !important;
7071
`;
7172

72-
const ConnectWalletContainer = styled.div`
73+
const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain: boolean }>`
7374
label {
7475
color: ${({ theme }) => theme.white};
7576
}
76-
`;
7777
78+
${({ isConnected, isDefaultChain }) =>
79+
isConnected &&
80+
isDefaultChain &&
81+
css`
82+
cursor: pointer;
83+
& > * {
84+
pointer-events: none;
85+
}
86+
`}
87+
`;
7888
const DesktopHeader = () => {
7989
const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
8090
const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
8191
const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
92+
const { chain } = useNetwork();
93+
const { isConnected } = useAccount();
94+
const isDefaultChain = chain?.id === DEFAULT_CHAIN;
8295
useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
8396

8497
return (
@@ -104,15 +117,17 @@ const DesktopHeader = () => {
104117
</MiddleSide>
105118

106119
<RightSide>
107-
<ConnectWalletContainer>
120+
<ConnectWalletContainer
121+
{...{ isConnected, isDefaultChain }}
122+
onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}
123+
>
108124
<ConnectWallet />
109125
</ConnectWalletContainer>
110126
<Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
111127
</RightSide>
112128
</Container>
113129
{(isDappListOpen || isHelpOpen || isSettingsOpen) && (
114130
<PopupContainer>
115-
<Overlay />
116131
{isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
117132
{isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
118133
{isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen }} />}

‎web/src/layout/Header/index.tsx‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
import React from "react";
2-
import styled from "styled-components";
3-
import MobileHeader from "./MobileHeader";
2+
import styled, { useTheme } from "styled-components";
3+
44
import DesktopHeader from "./DesktopHeader";
5+
import MobileHeader from "./MobileHeader";
6+
import { StatusBanner } from "subgraph-status";
7+
import { getGraphqlUrl } from "utils/getGraphqlUrl";
58

69
const Container = styled.div`
710
position: sticky;
8-
z-index: 1;
11+
z-index: 30;
912
top: 0;
1013
width: 100%;
11-
height: 64px;
1214
background-color: ${({ theme }) => theme.primaryPurple};
1315
14-
padding: 0 24px;
1516
display: flex;
17+
flex-wrap: wrap;
18+
`;
19+
20+
const HeaderContainer = styled.div`
21+
width: 100%;
22+
padding: 4px 24px 8px;
1623
`;
1724

1825
export const PopupContainer = styled.div`
@@ -22,15 +29,44 @@ export const PopupContainer = styled.div`
2229
width: 100%;
2330
height: 100%;
2431
z-index: 30;
32+
background-color: ${({ theme }) => theme.blackLowOpacity};
33+
`;
34+
35+
const StyledBanner = styled(StatusBanner)`
36+
position: sticky !important;
37+
.status-text {
38+
h2 {
39+
margin: 0;
40+
line-height: 24px;
41+
}
42+
}
2543
`;
2644

2745
const Header: React.FC = () => {
46+
const theme = useTheme();
47+
2848
return (
2949
<Container>
30-
<DesktopHeader />
31-
<MobileHeader />
50+
<StyledBanner
51+
autoHide
52+
theme={{
53+
colors: {
54+
main: theme.whiteBackground,
55+
primary: theme.primaryText,
56+
secondary: theme.secondaryText,
57+
},
58+
}}
59+
subgraphs={[
60+
{ name: "Curate", url: getGraphqlUrl(false) },
61+
{ name: "Kleros Core", url: getGraphqlUrl(true) },
62+
]}
63+
/>
64+
<HeaderContainer>
65+
<DesktopHeader />
66+
<MobileHeader />
67+
</HeaderContainer>
3268
</Container>
3369
);
3470
};
3571

36-
export default Header;
72+
export default Header;

‎web/src/layout/Header/navbar/Menu/Settings/index.tsx‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useClickAway } from "react-use";
55
import { Tabs } from "@kleros/ui-components-library";
66
import General from "./General";
77
import NotificationSettings from "./Notifications";
8-
import { Overlay } from "components/Overlay";
98
import { ISettings } from "../../index";
109

1110
const Container = styled.div`
@@ -72,20 +71,17 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
7271
useClickAway(containerRef, () => toggleIsSettingsOpen());
7372

7473
return (
75-
<>
76-
<Overlay />
77-
<Container ref={containerRef}>
78-
<StyledSettingsText>Settings</StyledSettingsText>
79-
<StyledTabs
80-
currentValue={currentTab}
81-
items={TABS}
82-
callback={(n: number) => {
83-
setCurrentTab(n);
84-
}}
85-
/>
86-
{currentTab === 0 ? <General /> : <NotificationSettings toggleIsSettingsOpen={toggleIsSettingsOpen} />}
87-
</Container>
88-
</>
74+
<Container ref={containerRef}>
75+
<StyledSettingsText>Settings</StyledSettingsText>
76+
<StyledTabs
77+
currentValue={currentTab}
78+
items={TABS}
79+
callback={(n: number) => {
80+
setCurrentTab(n);
81+
}}
82+
/>
83+
{currentTab === 0 ? <General /> : <NotificationSettings {...{ toggleIsSettingsOpen }} />}
84+
</Container>
8985
);
9086
};
9187

‎web/src/layout/Header/navbar/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@ const NavBar: React.FC = () => {
9999
</Container>
100100
{(isDappListOpen || isHelpOpen || isSettingsOpen) && (
101101
<PopupContainer>
102-
<Overlay />
103102
{isDappListOpen && <DappList {...{ toggleIsDappListOpen }} />}
104103
{isHelpOpen && <Help {...{ toggleIsHelpOpen }} />}
105104
{isSettingsOpen && <Settings {...{ toggleIsSettingsOpen }} />}

0 commit comments

Comments
 (0)