Skip to content

Commit 12699a5

Browse files
kemurukemuru
committed
refactor: ensurechain button
1 parent 53bd969 commit 12699a5

File tree

11 files changed

+108
-118
lines changed

11 files changed

+108
-118
lines changed

web/src/components/ConnectButton.tsx renamed to web/src/components/ConnectWallet.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -70,18 +70,20 @@ export const SwitchChainButton: React.FC = () => {
7070
};
7171

7272
const ConnectButton: React.FC = () => {
73+
const { open, isOpen } = useWeb3Modal();
74+
return (
75+
<Button disabled={isOpen} small text={"Connect"} onClick={async () => await open({ route: "ConnectWallet" })} />
76+
);
77+
};
78+
79+
const ConnectWallet: React.FC = () => {
7380
const { chain } = useNetwork();
7481
const { isConnected } = useAccount();
75-
const { open, isOpen } = useWeb3Modal();
76-
if (isConnected && chain && chain.id !== DEFAULT_CHAIN) {
77-
return <SwitchChainButton />;
78-
} else if (isConnected) {
79-
return <AccountDisplay />;
80-
} else {
81-
return (
82-
<Button disabled={isOpen} small text={"Connect"} onClick={async () => await open({ route: "ConnectWallet" })} />
83-
);
84-
}
82+
if (isConnected) {
83+
if (chain && chain.id !== DEFAULT_CHAIN) {
84+
return <SwitchChainButton />;
85+
} else return <AccountDisplay />;
86+
} else return <ConnectButton />;
8587
};
8688

87-
export default ConnectButton;
89+
export default ConnectWallet;

‎web/src/components/EnsureChain.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
import { DEFAULT_CHAIN } from "consts/chains";
3+
import { useNetwork } from "wagmi";
4+
import ConnectWallet from "components/ConnectWallet";
5+
6+
interface IEnsureChain {
7+
children: React.ReactElement;
8+
}
9+
10+
export const EnsureChain: React.FC<IEnsureChain> = ({ children }) => {
11+
const { chain } = useNetwork();
12+
13+
return chain && chain.id === DEFAULT_CHAIN ? children : <ConnectWallet />;
14+
};

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

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from "react";
22
import styled from "styled-components";
3-
import { useAccount, useNetwork } from "wagmi";
3+
import { useAccount } from "wagmi";
44
import Identicon from "react-identicons";
5-
import ConnectButton, { AddressDisplay, ChainDisplay } from "components/ConnectButton";
6-
import { SUPPORTED_CHAINIDS } from "consts/chains";
5+
import { AddressDisplay, ChainDisplay } from "components/ConnectWallet";
6+
import { EnsureChain } from "components/EnsureChain";
77

88
const Container = styled.div`
99
display: flex;
@@ -43,34 +43,33 @@ const StyledIdenticon = styled.div`
4343
margin-top: 32px;
4444
`;
4545

46-
const StyledConnectButtonContainer = styled.div`
46+
const EnsureChainContainer = styled.div`
4747
display: flex;
4848
justify-content: center;
4949
padding: 16px;
5050
`;
5151

5252
const General: React.FC = () => {
5353
const { address } = useAccount();
54-
const { chain } = useNetwork();
5554

56-
return chain && SUPPORTED_CHAINIDS.includes(chain.id) ? (
57-
<Container>
58-
<StyledChainContainer>
59-
<ChainDisplay />
60-
</StyledChainContainer>
61-
{address && (
62-
<StyledIdenticon>
63-
<Identicon size="24" string={address} />
64-
</StyledIdenticon>
65-
)}
66-
<StyledAddressContainer>
67-
<AddressDisplay />
68-
</StyledAddressContainer>
69-
</Container>
70-
) : (
71-
<StyledConnectButtonContainer>
72-
<ConnectButton />
73-
</StyledConnectButtonContainer>
55+
return (
56+
<EnsureChainContainer>
57+
<EnsureChain>
58+
<Container>
59+
<StyledChainContainer>
60+
<ChainDisplay />
61+
</StyledChainContainer>
62+
{address && (
63+
<StyledIdenticon>
64+
<Identicon size="24" string={address} />
65+
</StyledIdenticon>
66+
)}
67+
<StyledAddressContainer>
68+
<AddressDisplay />
69+
</StyledAddressContainer>
70+
</Container>
71+
</EnsureChain>
72+
</EnsureChainContainer>
7473
);
7574
};
7675

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import styled from "styled-components";
33
import { useLockBodyScroll, useToggle } from "react-use";
4-
import ConnectButton from "components/ConnectButton";
4+
import ConnectWallet from "components/ConnectWallet";
55
import LightButton from "components/LightButton";
66
import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
77
import { useOpenContext } from "../index";
@@ -52,7 +52,7 @@ const NavBar: React.FC = () => {
5252
<hr />
5353
<Explore />
5454
<hr />
55-
<ConnectButton />
55+
<ConnectWallet />
5656
<hr />
5757
<Menu />
5858
</Container>

‎web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ import { useParams } from "react-router-dom";
44
import { useAccount, useBalance, useNetwork } from "wagmi";
55
import { useDebounce } from "react-use";
66
import { Field, Button } from "@kleros/ui-components-library";
7-
import ConnectButton from "components/ConnectButton";
8-
import { usePrepareDisputeKitClassicFundAppeal, useDisputeKitClassicFundAppeal } from "hooks/contracts/generated";
97
import { wrapWithToast } from "utils/wrapWithToast";
8+
import { isUndefined } from "utils/index";
9+
import { EnsureChain } from "components/EnsureChain";
10+
import { usePrepareDisputeKitClassicFundAppeal, useDisputeKitClassicFundAppeal } from "hooks/contracts/generated";
1011
import { useParsedAmount } from "hooks/useParsedAmount";
1112
import {
1213
useLoserSideCountdownContext,
1314
useSelectedOptionContext,
1415
useFundingContext,
1516
} from "hooks/useClassicAppealContext";
16-
import { isUndefined } from "utils/index";
17-
import { DEFAULT_CHAIN } from "consts/chains";
1817

1918
const useNeedFund = () => {
2019
const loserSideCountdown = useLoserSideCountdownContext();
@@ -74,7 +73,7 @@ const Fund: React.FC = () => {
7473
}}
7574
placeholder="Amount to fund"
7675
/>
77-
{chain && chain.id === DEFAULT_CHAIN ? (
76+
<EnsureChain>
7877
<StyledButton
7978
disabled={isDisconnected || isSending || !balance || parsedAmount > balance.value}
8079
text={isDisconnected ? "Connect to Fund" : "Fund"}
@@ -90,9 +89,7 @@ const Fund: React.FC = () => {
9089
}
9190
}}
9291
/>
93-
) : (
94-
<ConnectButton />
95-
)}
92+
</EnsureChain>
9693
</div>
9794
</div>
9895
) : (

‎web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import { Textarea, Button } from "@kleros/ui-components-library";
66
import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast";
77
import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS";
88
import { useWalletClient, useNetwork } from "wagmi";
9+
import { EnsureChain } from "components/EnsureChain";
910
import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated";
10-
import { DEFAULT_CHAIN } from "consts/chains";
11-
import ConnectButton from "components/ConnectButton";
1211

1312
const SubmitEvidenceModal: React.FC<{
1413
isOpen: boolean;
@@ -25,7 +24,7 @@ const SubmitEvidenceModal: React.FC<{
2524
<StyledTextArea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Your Arguments" />
2625
<ButtonArea>
2726
<Button variant="secondary" disabled={isSending} text="Return" onClick={close} />
28-
{chain && chain.id === DEFAULT_CHAIN ? (
27+
<EnsureChain>
2928
<Button
3029
text="Submit"
3130
isLoading={isSending}
@@ -53,9 +52,7 @@ const SubmitEvidenceModal: React.FC<{
5352
.finally(() => setIsSending(false));
5453
}}
5554
/>
56-
) : (
57-
<ConnectButton />
58-
)}
55+
</EnsureChain>
5956
</ButtonArea>
6057
</StyledModal>
6158
);

‎web/src/pages/Cases/CaseDetails/Evidence/index.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import { useEvidenceGroup } from "queries/useEvidenceGroup";
77
import { useEvidences } from "queries/useEvidences";
88
import SubmitEvidenceModal from "./SubmitEvidenceModal";
99
import EvidenceCard from "components/EvidenceCard";
10-
import ConnectButton from "components/ConnectButton";
11-
import { DEFAULT_CHAIN } from "consts/chains";
10+
import { EnsureChain } from "components/EnsureChain";
1211

1312
const Container = styled.div`
1413
width: 100%;
@@ -36,17 +35,15 @@ const Evidence: React.FC<{ arbitrable?: string }> = ({ arbitrable }) => {
3635
<SubmitEvidenceModal isOpen={isModalOpen} close={() => setIsModalOpen(false)} {...{ evidenceGroup }} />
3736
)}
3837
<Searchbar />
39-
{chain && chain.id === DEFAULT_CHAIN ? (
38+
<EnsureChain>
4039
<StyledButton
4140
small
4241
text="Submit Evidence"
4342
disabled={typeof address === "undefined" || isModalOpen}
4443
isLoading={isModalOpen}
4544
onClick={() => setIsModalOpen(true)}
4645
/>
47-
) : (
48-
<ConnectButton />
49-
)}
46+
</EnsureChain>
5047
{data &&
5148
data.evidences.map(({ id, evidence, sender }, i) => (
5249
<EvidenceCard key={id} index={i + 1} sender={sender?.id} {...{ evidence }} />

‎web/src/pages/Cases/CaseDetails/Voting/Binary.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ import { useParams } from "react-router-dom";
44
import { Button, Textarea } from "@kleros/ui-components-library";
55
import { useGetMetaEvidence } from "queries/useGetMetaEvidence";
66
import { wrapWithToast } from "utils/wrapWithToast";
7-
import { useWalletClient, useNetwork } from "wagmi";
7+
import { useWalletClient } from "wagmi";
8+
import { EnsureChain } from "components/EnsureChain";
89
import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated";
9-
import { DEFAULT_CHAIN } from "consts/chains";
10-
import ConnectButton from "components/ConnectButton";
1110

1211
const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrable, voteIDs }) => {
1312
const { id } = useParams();
@@ -18,7 +17,6 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrab
1817
const [isSending, setIsSending] = useState(false);
1918
const [justification, setJustification] = useState("");
2019
const { data: walletClient } = useWalletClient();
21-
const { chain } = useNetwork();
2220

2321
const handleVote = async (voteOption: number) => {
2422
setIsSending(true);
@@ -50,32 +48,28 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrab
5048
/>
5149
<OptionsContainer>
5250
{metaEvidence?.rulingOptions?.titles?.map((answer: string, i: number) => {
53-
return chain && chain.id === DEFAULT_CHAIN ? (
51+
<EnsureChain>
5452
<Button
5553
key={i}
5654
text={answer}
5755
disabled={isSending}
5856
isLoading={chosenOption === i + 1}
5957
onClick={() => handleVote(i + 1)}
6058
/>
61-
) : (
62-
<ConnectButton />
63-
);
59+
</EnsureChain>;
6460
})}
6561
</OptionsContainer>
6662
</MainContainer>
6763
<RefuseToArbitrateContainer>
68-
{chain && chain.id === DEFAULT_CHAIN ? (
64+
<EnsureChain>
6965
<Button
7066
variant="secondary"
7167
text="Refuse to Arbitrate"
7268
disabled={isSending}
7369
isLoading={chosenOption === 0}
7470
onClick={() => handleVote(0)}
7571
/>
76-
) : (
77-
<ConnectButton />
78-
)}
72+
</EnsureChain>
7973
</RefuseToArbitrateContainer>
8074
</Container>
8175
) : (

‎web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,29 @@ import { useParsedAmount } from "hooks/useParsedAmount";
1010
import { usePNKBalance } from "queries/usePNKBalance";
1111
import { useJurorBalance } from "queries/useJurorBalance";
1212
import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton";
13-
import ConnectButton from "components/ConnectButton";
13+
import { EnsureChain } from "components/EnsureChain";
14+
15+
const StyledField = styled(Field)`
16+
width: 100%;
17+
height: fit-content;
18+
`;
19+
20+
const LabelArea = styled.div`
21+
display: flex;
22+
justify-content: space-between;
23+
`;
24+
25+
const StyledLabel = styled.label`
26+
color: ${({ theme }) => theme.primaryBlue};
27+
cursor: pointer;
28+
`;
29+
30+
const InputArea = styled.div`
31+
display: flex;
32+
flex-direction: column;
33+
align-items: center;
34+
gap: 12px;
35+
`;
1436

1537
interface IInputDisplay {
1638
action: ActionType;
@@ -58,7 +80,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({ action, isSending, setIsSending
5880
}
5981
variant="info"
6082
/>
61-
{address ? (
83+
<EnsureChain>
6284
<StakeWithdrawButton
6385
{...{
6486
parsedAmount,
@@ -68,34 +90,10 @@ const InputDisplay: React.FC<IInputDisplay> = ({ action, isSending, setIsSending
6890
setIsSending,
6991
}}
7092
/>
71-
) : (
72-
<ConnectButton />
73-
)}
93+
</EnsureChain>
7494
</InputArea>
7595
</>
7696
);
7797
};
7898

7999
export default InputDisplay;
80-
81-
const StyledField = styled(Field)`
82-
width: 100%;
83-
height: fit-content;
84-
`;
85-
86-
const LabelArea = styled.div`
87-
display: flex;
88-
justify-content: space-between;
89-
`;
90-
91-
const StyledLabel = styled.label`
92-
color: ${({ theme }) => theme.primaryBlue};
93-
cursor: pointer;
94-
`;
95-
96-
const InputArea = styled.div`
97-
display: flex;
98-
flex-direction: column;
99-
align-items: center;
100-
gap: 12px;
101-
`;

0 commit comments

Comments
 (0)