Skip to content

Commit a2a9294

Browse files
alcercualcercu
authored
Merge pull request #912 from kleros/refactor(web)/migrate-files-to-viem
refactor: migrating from ethers to viem
2 parents 566ad40 + c47ecbd commit a2a9294

File tree

8 files changed

+54
-136
lines changed

8 files changed

+54
-136
lines changed

‎web/src/components/DisputeCard/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 { useNavigate } from "react-router-dom";
4-
import { utils } from "ethers";
4+
import { formatEther } from "viem";
55
import Skeleton from "react-loading-skeleton";
66
import { Card } from "@kleros/ui-components-library";
77
import { Periods } from "consts/periods";
@@ -42,7 +42,7 @@ const DisputeCard: React.FC<CasesPageQuery["disputes"][number]> = ({
4242
court,
4343
}) => {
4444
const currentPeriodIndex = Periods[period];
45-
const rewards = `≥ ${utils.formatEther(court.feeForJuror)} ETH`;
45+
const rewards = `≥ ${formatEther(court.feeForJuror)} ETH`;
4646
const date =
4747
currentPeriodIndex === 4
4848
? lastPeriodChange

‎web/src/consts/index.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
import { BigNumber } from "ethers";
2-
3-
export const ONE_BASIS_POINT = BigNumber.from("10000");
1+
export const ONE_BASIS_POINT = 10000n;

‎web/src/hooks/queries/useGetMetaEvidence.ts‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import useSWRImmutable from "swr/immutable";
2-
// import { utils } from "ethers";
32
import { usePublicClient } from "wagmi";
43
import { getIMetaEvidence } from "hooks/contracts/generated";
54

6-
export const useGetMetaEvidence = (
7-
disputeID?: string,
8-
arbitrableAddress?: string
9-
) => {
5+
export const useGetMetaEvidence = (disputeID?: string, arbitrableAddress?: string) => {
106
// const formattedAddress = arbitrableAddress
117
// ? utils.getAddress(arbitrableAddress)
128
// : undefined;
@@ -24,16 +20,13 @@ export const useGetMetaEvidence = (
2420
const disputeEvents = await publicClient.getFilterLogs({
2521
filter: disputeFilter,
2622
});
27-
const metaEvidenceFilter =
28-
await arbitrable.createEventFilter.MetaEvidence({
29-
_metaEvidenceID: disputeEvents[0].args._metaEvidenceID,
30-
});
23+
const metaEvidenceFilter = await arbitrable.createEventFilter.MetaEvidence({
24+
_metaEvidenceID: disputeEvents[0].args._metaEvidenceID,
25+
});
3126
const metaEvidenceEvents = await publicClient.getFilterLogs({
3227
filter: metaEvidenceFilter,
3328
});
34-
return fetch(
35-
`https://cloudflare-ipfs.com${metaEvidenceEvents[0].args?._evidence}`
36-
).then((res) => res.json());
29+
return fetch(`https://cloudflare-ipfs.com${metaEvidenceEvents[0].args?._evidence}`).then((res) => res.json());
3730
} else throw Error;
3831
}
3932
);

‎web/src/hooks/useClassicAppealContext.tsx‎

Lines changed: 29 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import React, { useMemo, useState, createContext, useContext } from "react";
22
import { useParams } from "react-router-dom";
3-
import { BigNumber } from "ethers";
43
import { ONE_BASIS_POINT } from "consts/index";
54
import { Periods } from "consts/periods";
65
import { notUndefined } from "utils/index";
76
import { useGetMetaEvidence } from "queries/useGetMetaEvidence";
87
import { useAppealCost } from "queries/useAppealCost";
98
import { useDisputeKitClassicMultipliers } from "queries/useDisputeKitClassicMultipliers";
10-
import {
11-
useClassicAppealQuery,
12-
ClassicAppealQuery,
13-
} from "queries/useClassicAppealQuery";
9+
import { useClassicAppealQuery, ClassicAppealQuery } from "queries/useClassicAppealQuery";
1410
import { useCountdown } from "hooks/useCountdown";
1511

1612
const LoserSideCountdownContext = createContext<number | undefined>(undefined);
@@ -29,9 +25,9 @@ const SelectedOptionContext = createContext<ISelectedOptionContext>({
2925

3026
interface IFundingContext {
3127
winningChoice: string | undefined;
32-
paidFees: BigNumber[] | undefined;
33-
loserRequiredFunding: BigNumber | undefined;
34-
winnerRequiredFunding: BigNumber | undefined;
28+
paidFees: bigint[] | undefined;
29+
loserRequiredFunding: bigint | undefined;
30+
winnerRequiredFunding: bigint | undefined;
3531
fundedChoices: string[] | undefined;
3632
}
3733
const FundingContext = createContext<IFundingContext>({
@@ -54,31 +50,20 @@ export const ClassicAppealProvider: React.FC<{
5450
const arbitrable = data?.dispute?.arbitrated.id;
5551
const { data: metaEvidence } = useGetMetaEvidence(id, arbitrable);
5652
const { data: multipliers } = useDisputeKitClassicMultipliers();
57-
const options = ["Refuse to Arbitrate"].concat(
58-
metaEvidence?.rulingOptions?.titles
59-
);
53+
const options = ["Refuse to Arbitrate"].concat(metaEvidence?.rulingOptions?.titles);
6054
const loserSideCountdown = useLoserSideCountdown(
6155
dispute?.lastPeriodChange,
6256
dispute?.court.timesPerPeriod[Periods.appeal],
63-
multipliers?.loser_appeal_period_multiplier.toString()
64-
);
65-
const loserRequiredFunding = getLoserRequiredFunding(
66-
appealCost,
67-
multipliers?.loser_stake_multiplier
68-
);
69-
const winnerRequiredFunding = getWinnerRequiredFunding(
70-
appealCost,
71-
multipliers?.winner_stake_multiplier
57+
multipliers?.loser_appeal_period_multiplier.toString()!
7258
);
59+
const loserRequiredFunding = getLoserRequiredFunding(appealCost!, multipliers?.loser_stake_multiplier!);
60+
const winnerRequiredFunding = getWinnerRequiredFunding(appealCost!, multipliers?.winner_stake_multiplier!);
7361
const fundedChoices = getFundedChoices(data?.dispute);
7462
const [selectedOption, setSelectedOption] = useState<number | undefined>();
7563
return (
7664
<LoserSideCountdownContext.Provider value={loserSideCountdown}>
7765
<SelectedOptionContext.Provider
78-
value={useMemo(
79-
() => ({ selectedOption, setSelectedOption }),
80-
[selectedOption, setSelectedOption]
81-
)}
66+
value={useMemo(() => ({ selectedOption, setSelectedOption }), [selectedOption, setSelectedOption])}
8267
>
8368
<FundingContext.Provider
8469
value={useMemo(
@@ -89,39 +74,29 @@ export const ClassicAppealProvider: React.FC<{
8974
winnerRequiredFunding,
9075
fundedChoices,
9176
}),
92-
[
93-
winningChoice,
94-
paidFees,
95-
loserRequiredFunding,
96-
winnerRequiredFunding,
97-
fundedChoices,
98-
]
77+
[winningChoice, paidFees, loserRequiredFunding, winnerRequiredFunding, fundedChoices]
9978
)}
10079
>
101-
<OptionsContext.Provider value={options}>
102-
{children}
103-
</OptionsContext.Provider>
80+
<OptionsContext.Provider value={options}>{children}</OptionsContext.Provider>
10481
</FundingContext.Provider>
10582
</SelectedOptionContext.Provider>
10683
</LoserSideCountdownContext.Provider>
10784
);
10885
};
10986

110-
export const useLoserSideCountdownContext = () =>
111-
useContext(LoserSideCountdownContext);
87+
export const useLoserSideCountdownContext = () => useContext(LoserSideCountdownContext);
11288
export const useSelectedOptionContext = () => useContext(SelectedOptionContext);
11389
export const useFundingContext = () => useContext(FundingContext);
11490
export const useOptionsContext = () => useContext(OptionsContext);
11591

11692
const getCurrentLocalRound = (dispute?: ClassicAppealQuery["dispute"]) => {
117-
const currentLocalRoundIndex =
118-
dispute?.disputeKitDispute?.currentLocalRoundIndex;
93+
const currentLocalRoundIndex = dispute?.disputeKitDispute?.currentLocalRoundIndex;
11994
return dispute?.disputeKitDispute?.localRounds[currentLocalRoundIndex];
12095
};
12196

12297
const getPaidFees = (dispute?: ClassicAppealQuery["dispute"]) => {
12398
const currentLocalRound = getCurrentLocalRound(dispute);
124-
return currentLocalRound?.paidFees.map((amount) => BigNumber.from(amount));
99+
return currentLocalRound?.paidFees.map((amount) => BigInt(amount));
125100
};
126101

127102
const getFundedChoices = (dispute?: ClassicAppealQuery["dispute"]) => {
@@ -134,57 +109,29 @@ const getWinningChoice = (dispute?: ClassicAppealQuery["dispute"]) => {
134109
return currentLocalRound?.winningChoice;
135110
};
136111

137-
const getLoserRequiredFunding = (
138-
appealCost: BigNumber,
139-
loser_stake_multiplier: BigNumber
140-
): BigNumber =>
112+
const getLoserRequiredFunding = (appealCost: bigint, loser_stake_multiplier: bigint): bigint =>
141113
notUndefined([appealCost, loser_stake_multiplier])
142-
? appealCost.add(
143-
loser_stake_multiplier.mul(appealCost).div(ONE_BASIS_POINT)
144-
)
145-
: BigNumber.from(0);
114+
? appealCost + (loser_stake_multiplier * appealCost) / ONE_BASIS_POINT
115+
: 0n;
146116

147-
const getWinnerRequiredFunding = (
148-
appealCost: BigNumber,
149-
winner_stake_multiplier: BigNumber
150-
): BigNumber =>
117+
const getWinnerRequiredFunding = (appealCost: bigint, winner_stake_multiplier: bigint): bigint =>
151118
notUndefined([appealCost, winner_stake_multiplier])
152-
? appealCost.add(
153-
winner_stake_multiplier.mul(appealCost).div(ONE_BASIS_POINT)
154-
)
155-
: BigNumber.from(0);
119+
? appealCost + (winner_stake_multiplier * appealCost) / ONE_BASIS_POINT
120+
: 0n;
156121

157-
const getDeadline = (
158-
lastPeriodChange: string,
159-
appealPeriodDuration: string,
160-
loserTimeMultiplier: string
161-
): number => {
162-
const parsedLastPeriodChange = BigNumber.from(lastPeriodChange);
163-
const parsedAppealPeriodDuration = BigNumber.from(appealPeriodDuration);
164-
const parsedLoserTimeMultiplier = BigNumber.from(loserTimeMultiplier);
165-
const loserAppealPeriodDuration = parsedAppealPeriodDuration
166-
.mul(parsedLoserTimeMultiplier)
167-
.div(ONE_BASIS_POINT);
168-
return loserAppealPeriodDuration.add(parsedLastPeriodChange).toNumber();
122+
const getDeadline = (lastPeriodChange: string, appealPeriodDuration: string, loserTimeMultiplier: string): number => {
123+
const parsedLastPeriodChange = BigInt(lastPeriodChange);
124+
const parsedAppealPeriodDuration = BigInt(appealPeriodDuration);
125+
const parsedLoserTimeMultiplier = BigInt(loserTimeMultiplier);
126+
const loserAppealPeriodDuration = (parsedAppealPeriodDuration * parsedLoserTimeMultiplier) / ONE_BASIS_POINT;
127+
return Number(loserAppealPeriodDuration + parsedLastPeriodChange);
169128
};
170129

171-
function useLoserSideCountdown(
172-
lastPeriodChange: string,
173-
appealPeriodDuration: string,
174-
loserTimeMultiplier: string
175-
) {
130+
function useLoserSideCountdown(lastPeriodChange: string, appealPeriodDuration: string, loserTimeMultiplier: string) {
176131
const deadline = useMemo(
177132
() =>
178-
notUndefined([
179-
lastPeriodChange,
180-
appealPeriodDuration,
181-
loserTimeMultiplier,
182-
])
183-
? getDeadline(
184-
lastPeriodChange,
185-
appealPeriodDuration,
186-
loserTimeMultiplier
187-
)
133+
notUndefined([lastPeriodChange, appealPeriodDuration, loserTimeMultiplier])
134+
? getDeadline(lastPeriodChange, appealPeriodDuration, loserTimeMultiplier)
188135
: 0,
189136
[lastPeriodChange, appealPeriodDuration, loserTimeMultiplier]
190137
);

‎web/src/hooks/useParsedAmount.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useMemo } from "react";
2-
import { BigNumber, utils } from "ethers";
2+
import { parseUnits } from "viem";
33

4-
export function useParsedAmount(amount: string): BigNumber {
5-
return useMemo(() => (amount === "" ? BigNumber.from(0) : utils.parseUnits(amount, 18)), [amount]);
4+
export function useParsedAmount(amount: string): bigint {
5+
return useMemo(() => (amount === "" ? 0n : parseUnits(`${parseInt(amount)}`, 18)), [amount]);
66
}

‎web/src/hooks/useWeb3.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Web3Provider } from "@ethersproject/providers";
21
import { useWeb3React } from "@web3-react/core";
32

4-
export const useWeb3 = () => useWeb3React<Web3Provider>();
3+
export const useWeb3 = () => useWeb3React();

‎web/src/pages/Cases/CaseDetails/Overview.tsx‎

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
11
import React from "react";
22
import styled from "styled-components";
33
import { Link, useParams } from "react-router-dom";
4-
import { utils } from "ethers";
4+
import { formatEther } from "viem";
55
import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
66
import { useGetMetaEvidence } from "queries/useGetMetaEvidence";
77
import { useCourtPolicy } from "queries/useCourtPolicy";
88
import { useCourtPolicyURI } from "queries/useCourtPolicyURI";
99
import PolicyIcon from "svgs/icons/policy.svg";
1010
import DisputeInfo from "components/DisputeCard/DisputeInfo";
1111

12-
const Overview: React.FC<{ arbitrable?: string; courtID?: string }> = ({
13-
arbitrable,
14-
courtID,
15-
}) => {
12+
const Overview: React.FC<{ arbitrable?: string; courtID?: string }> = ({ arbitrable, courtID }) => {
1613
const { id } = useParams();
1714
const { data: metaEvidence } = useGetMetaEvidence(id, arbitrable);
1815
const { data: disputeDetails } = useDisputeDetailsQuery(id);
1916
const { data: courtPolicyURI } = useCourtPolicyURI(courtID);
2017
const { data: courtPolicy } = useCourtPolicy(courtID);
2118
const courtName = courtPolicy?.name;
2219
const court = disputeDetails?.dispute?.court;
23-
const rewards = court
24-
? `≥ ${utils.formatEther(court.feeForJuror)} ETH`
25-
: undefined;
20+
const rewards = court ? `≥ ${formatEther(court.feeForJuror)} ETH` : undefined;
2621
const category = metaEvidence ? metaEvidence.category : undefined;
2722
return (
2823
<>
@@ -41,41 +36,27 @@ const Overview: React.FC<{ arbitrable?: string; courtID?: string }> = ({
4136
</a>
4237
<VotingOptions>
4338
{metaEvidence && <h3>Voting Options</h3>}
44-
{metaEvidence?.rulingOptions?.titles?.map(
45-
(answer: string, i: number) => (
46-
<span key={i}>
47-
<small>Option {i + 1}:</small>
48-
<label>{answer}</label>
49-
</span>
50-
)
51-
)}
39+
{metaEvidence?.rulingOptions?.titles?.map((answer: string, i: number) => (
40+
<span key={i}>
41+
<small>Option {i + 1}:</small>
42+
<label>{answer}</label>
43+
</span>
44+
))}
5245
</VotingOptions>
5346
<hr />
54-
<DisputeInfo
55-
courtId={court?.id}
56-
court={courtName}
57-
{...{ rewards, category }}
58-
/>
47+
<DisputeInfo courtId={court?.id} court={courtName} {...{ rewards, category }} />
5948
</Container>
6049
<ShadeArea>
6150
<p>Make sure you understand the Policies</p>
6251
<LinkContainer>
6352
{metaEvidence?.fileURI && (
64-
<StyledA
65-
href={`https://cloudflare-ipfs.com${metaEvidence.fileURI}`}
66-
target="_blank"
67-
rel="noreferrer"
68-
>
53+
<StyledA href={`https://cloudflare-ipfs.com${metaEvidence.fileURI}`} target="_blank" rel="noreferrer">
6954
<PolicyIcon />
7055
Dispute Policy
7156
</StyledA>
7257
)}
7358
{courtPolicy && (
74-
<StyledA
75-
href={`https://cloudflare-ipfs.com${courtPolicyURI}`}
76-
target="_blank"
77-
rel="noreferrer"
78-
>
59+
<StyledA href={`https://cloudflare-ipfs.com${courtPolicyURI}`} target="_blank" rel="noreferrer">
7960
<PolicyIcon />
8061
Court Policy
8162
</StyledA>

‎web/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
"./src/assets/svgs*"
4747
]
4848
},
49-
"target": "es2017",
49+
"target": "es2020",
5050
"rootDir": "src",
5151
"outDir": "build/dist",
5252
"allowJs": true,

0 commit comments

Comments
 (0)