From 5d0ff2a5461c177a16b9bf8760bd5e01d208310e Mon Sep 17 00:00:00 2001 From: Nikhil Verma Date: Wed, 13 Mar 2024 13:59:10 +0530 Subject: [PATCH] fix(web): linted-imports-with-new-rule --- web/codegen.ts | 1 + web/netlify/functions/update-settings.ts | 5 ++-- web/netlify/functions/uploadToIPFS.ts | 2 +- web/scripts/gitInfo.js | 3 +- web/src/app.tsx | 20 +++++++------ web/src/components/CasesDisplay/CasesGrid.tsx | 10 +++++-- web/src/components/CasesDisplay/Filters.tsx | 8 ++++-- web/src/components/CasesDisplay/Search.tsx | 11 ++++++-- .../CasesDisplay/StatsAndFilters.tsx | 1 + web/src/components/CasesDisplay/index.tsx | 15 ++++++---- web/src/components/ClaimPnkButton.tsx | 11 ++++++-- .../ConnectWallet/AccountDisplay.tsx | 9 ++++-- web/src/components/ConnectWallet/index.tsx | 6 +++- web/src/components/DisputePreview/Alias.tsx | 11 +++++--- .../DisputePreview/DisputeContext.tsx | 17 +++++++---- .../components/DisputePreview/Policies.tsx | 9 ++++-- .../CardLabels/RewardsAndFundLabel.tsx | 2 ++ .../DisputeView/CardLabels/index.tsx | 17 +++++++---- .../DisputeView/DisputeCardView.tsx | 14 +++++++--- .../DisputeInfo/DisputeInfoCard.tsx | 12 ++++++-- .../DisputeInfo/DisputeInfoList.tsx | 3 ++ .../DisputeView/DisputeInfo/index.tsx | 14 ++++++---- .../DisputeView/DisputeListView.tsx | 15 ++++++---- .../components/DisputeView/PeriodBanner.tsx | 2 ++ web/src/components/DisputeView/index.tsx | 12 +++++--- web/src/components/EnsureChain.tsx | 5 +++- web/src/components/EvidenceCard.tsx | 9 ++++-- web/src/components/Field.tsx | 4 ++- web/src/components/HeroImage.tsx | 6 ++-- web/src/components/HowItWorks.tsx | 1 + web/src/components/InfoCard.tsx | 4 ++- web/src/components/JSONEditor.tsx | 2 ++ web/src/components/LabeledInput.tsx | 4 ++- web/src/components/LatestCases.tsx | 11 ++++++-- web/src/components/LightButton.tsx | 1 + web/src/components/NumberDisplay.tsx | 3 +- web/src/components/NumberInputField.tsx | 1 + web/src/components/PlusMinusField.tsx | 3 +- .../components/Popup/Description/Appeal.tsx | 1 + .../Popup/Description/DisputeCreated.tsx | 11 +++++--- .../Popup/Description/StakeWithdraw.tsx | 7 +++-- .../Popup/Description/SwapSuccess.tsx | 10 +++++-- .../Popup/Description/VoteWithCommit.tsx | 1 + .../Popup/Description/VoteWithoutCommit.tsx | 1 + .../ExtraInfo/DisputeCreatedExtraInfo.tsx | 1 + .../ExtraInfo/StakeWithdrawExtraInfo.tsx | 1 + .../ExtraInfo/VoteWithCommitExtraInfo.tsx | 4 ++- .../MiniGuides/Appeal/CrowdfundAppeal.tsx | 2 ++ .../MiniGuides/Appeal/PayoffSimulator.tsx | 2 ++ .../Popup/MiniGuides/Appeal/StageOne.tsx | 2 ++ .../Popup/MiniGuides/Appeal/StageTwo.tsx | 2 ++ .../MiniGuides/Appeal/WhoWinsRewards.tsx | 2 ++ .../Popup/MiniGuides/Appeal/index.tsx | 4 ++- .../MiniGuides/BinaryVoting/PrivateVoting.tsx | 2 ++ .../MiniGuides/BinaryVoting/VotingModule.tsx | 2 ++ .../Popup/MiniGuides/BinaryVoting/index.tsx | 4 ++- .../Popup/MiniGuides/JurorLevels.tsx | 10 +++++-- .../MiniGuides/MainStructureTemplate.tsx | 10 +++++-- .../MiniGuides/Onboarding/HowItWorks.tsx | 2 ++ .../MiniGuides/Onboarding/PnkLogoAndTitle.tsx | 2 ++ .../MiniGuides/Onboarding/WhatDoINeed.tsx | 2 ++ .../Popup/MiniGuides/Onboarding/index.tsx | 15 ++++++---- .../Popup/MiniGuides/PageContentsTemplate.tsx | 4 ++- .../MiniGuides/RankedVoting/VotingModule.tsx | 2 ++ .../Popup/MiniGuides/RankedVoting/index.tsx | 6 ++-- .../Popup/MiniGuides/Staking/CourtHeader.tsx | 2 ++ .../Popup/MiniGuides/Staking/JurorRewards.tsx | 2 ++ .../MiniGuides/Staking/Notifications.tsx | 2 ++ .../MiniGuides/Staking/StakingSection.tsx | 2 ++ .../Popup/MiniGuides/Staking/index.tsx | 4 ++- web/src/components/Popup/index.tsx | 26 ++++++++++------- web/src/components/ReactMarkdown.tsx | 1 + web/src/components/StatDisplay.tsx | 3 +- web/src/components/StyledSkeleton.tsx | 2 ++ web/src/components/Tag.tsx | 3 +- web/src/components/Verdict/Answer.tsx | 3 +- .../components/Verdict/DisputeTimeline.tsx | 17 +++++++---- web/src/components/Verdict/FinalDecision.tsx | 27 +++++++++++------- web/src/components/Verdict/VerdictBanner.tsx | 2 ++ web/src/components/Verdict/index.tsx | 3 +- web/src/components/WithHelpTooltip.tsx | 5 +++- web/src/consts/community-elements.tsx | 6 ++-- web/src/consts/socialmedia.tsx | 11 ++++---- web/src/context/GraphqlBatcher.tsx | 8 ++++-- web/src/context/IsListProvider.tsx | 1 + web/src/context/NewDisputeContext.tsx | 4 ++- web/src/context/QueryClientProvider.tsx | 1 + web/src/context/RefetchOnBlock.tsx | 1 + web/src/context/StyledComponentsProvider.tsx | 2 ++ web/src/context/Web3Provider.tsx | 6 ++-- web/src/hooks/queries/useAllCasesQuery.ts | 7 +++-- web/src/hooks/queries/useAppealCost.ts | 1 + web/src/hooks/queries/useCasesQuery.ts | 10 ++++--- .../hooks/queries/useClassicAppealQuery.ts | 6 ++-- web/src/hooks/queries/useCounter.ts | 7 +++-- web/src/hooks/queries/useCourtDetails.ts | 6 ++-- web/src/hooks/queries/useCourtPolicy.ts | 1 + web/src/hooks/queries/useCourtPolicyURI.ts | 7 +++-- web/src/hooks/queries/useCourtTree.ts | 6 ++-- .../hooks/queries/useDisputeDetailsQuery.ts | 6 ++-- .../useDisputeKitClassicMultipliers.ts | 1 + .../hooks/queries/useDisputeTemplateFromId.ts | 6 ++-- web/src/hooks/queries/useDrawQuery.ts | 6 ++-- web/src/hooks/queries/useEvidenceGroup.ts | 5 ++-- web/src/hooks/queries/useEvidences.ts | 6 ++-- web/src/hooks/queries/useHomePageQuery.ts | 6 ++-- .../queries/useJurorStakeDetailsQuery.ts | 6 ++-- web/src/hooks/queries/useLabelInfoQuery.ts | 6 ++-- .../hooks/queries/usePolicyRegistryEvent.ts | 1 + .../hooks/queries/usePopulatedDisputeData.ts | 18 +++++++----- .../queries/useTopUsersByCoherenceScore.ts | 6 ++-- web/src/hooks/queries/useUser.ts | 4 ++- web/src/hooks/queries/useVotingHistory.ts | 6 ++-- web/src/hooks/useClassicAppealContext.tsx | 9 ++++-- web/src/hooks/useContractAddress.tsx | 1 + web/src/hooks/useCountdown.ts | 1 + web/src/hooks/useHomePageContext.tsx | 7 ++--- web/src/hooks/useIPFSQuery.ts | 3 +- web/src/hooks/useIsCrossChainDispute.ts | 6 ++-- web/src/hooks/useIsDesktop.tsx | 2 ++ web/src/hooks/useLockOverlayScroll.ts | 1 + web/src/hooks/useParsedAmount.ts | 1 + web/src/hooks/useSigningAccount.tsx | 1 + web/src/hooks/useVotingContext.tsx | 7 +++-- web/src/index.tsx | 4 ++- web/src/layout/Footer/index.tsx | 5 +++- web/src/layout/Header/DesktopHeader.tsx | 21 +++++++++----- web/src/layout/Header/MobileHeader.tsx | 13 ++++++--- web/src/layout/Header/TestnetBanner.tsx | 1 + web/src/layout/Header/index.tsx | 6 ++-- web/src/layout/Header/navbar/DappList.tsx | 8 ++++-- web/src/layout/Header/navbar/Debug.tsx | 3 +- web/src/layout/Header/navbar/Explore.tsx | 7 +++-- web/src/layout/Header/navbar/Menu/Help.tsx | 9 ++++-- .../Header/navbar/Menu/Settings/General.tsx | 3 ++ .../FormContactDetails/index.tsx | 13 +++++++-- .../Menu/Settings/Notifications/index.tsx | 10 +++++-- .../Header/navbar/Menu/Settings/index.tsx | 14 +++++++--- web/src/layout/Header/navbar/Menu/index.tsx | 9 ++++-- web/src/layout/Header/navbar/Product.tsx | 1 + web/src/layout/Header/navbar/index.tsx | 16 +++++++---- web/src/layout/index.tsx | 7 +++-- .../CaseDetails/Appeal/AppealHistory.tsx | 8 ++++-- .../Cases/CaseDetails/Appeal/Classic/Fund.tsx | 14 ++++++---- .../Appeal/Classic/Options/StageOne.tsx | 8 ++++-- .../Appeal/Classic/Options/StageTwo.tsx | 9 ++++-- .../Appeal/Classic/Options/index.tsx | 5 +++- .../Appeal/Classic/StageExplainer.tsx | 10 +++++-- .../CaseDetails/Appeal/Classic/index.tsx | 15 ++++++---- .../Cases/CaseDetails/Appeal/OptionCard.tsx | 6 +++- .../pages/Cases/CaseDetails/Appeal/index.tsx | 10 +++++-- .../Evidence/SubmitEvidenceModal.tsx | 12 +++++--- .../Cases/CaseDetails/Evidence/index.tsx | 17 +++++++---- .../Cases/CaseDetails/Overview/index.tsx | 15 ++++++---- web/src/pages/Cases/CaseDetails/Tabs.tsx | 19 ++++++++----- web/src/pages/Cases/CaseDetails/Timeline.tsx | 13 ++++++--- .../CaseDetails/Voting/Classic/Commit.tsx | 6 +++- .../Voting/Classic/JustificationArea.tsx | 1 + .../Voting/Classic/OptionsContainer.tsx | 9 ++++-- .../CaseDetails/Voting/Classic/Reveal.tsx | 12 ++++++-- .../Cases/CaseDetails/Voting/Classic/Vote.tsx | 4 +++ .../CaseDetails/Voting/Classic/index.tsx | 10 +++++-- .../CaseDetails/Voting/PendingVotesBox.tsx | 2 ++ .../Voting/VotesDetails/AccordionTitle.tsx | 9 ++++-- .../CaseDetails/Voting/VotesDetails/index.tsx | 13 ++++++--- .../CaseDetails/Voting/VotingHistory.tsx | 23 +++++++++------ .../pages/Cases/CaseDetails/Voting/index.tsx | 21 +++++++++----- web/src/pages/Cases/CaseDetails/index.tsx | 10 +++++-- web/src/pages/Cases/CasesFetcher.tsx | 13 ++++++--- web/src/pages/Cases/index.tsx | 5 +++- .../pages/Courts/CourtDetails/Description.tsx | 6 +++- .../CourtDetails/StakePanel/InputDisplay.tsx | 14 ++++++---- .../StakePanel/JurorStakeDisplay.tsx | 14 +++++++--- .../StakePanel/StakeWithdrawButton.tsx | 6 +++- .../Courts/CourtDetails/StakePanel/index.tsx | 16 +++++++---- web/src/pages/Courts/CourtDetails/Stats.tsx | 28 +++++++++++-------- web/src/pages/Courts/CourtDetails/index.tsx | 25 +++++++++++------ web/src/pages/Courts/TopSearch.tsx | 7 ++++- web/src/pages/Courts/index.tsx | 7 +++-- .../Dashboard/Courts/CourtCard/CourtName.tsx | 4 ++- .../Dashboard/Courts/CourtCard/Stake.tsx | 5 +++- .../Dashboard/Courts/CourtCard/index.tsx | 5 +++- web/src/pages/Dashboard/Courts/Header.tsx | 9 ++++-- web/src/pages/Dashboard/Courts/index.tsx | 13 ++++++--- .../pages/Dashboard/JurorInfo/Coherency.tsx | 5 +++- web/src/pages/Dashboard/JurorInfo/Header.tsx | 8 ++++-- .../Dashboard/JurorInfo/JurorRewards.tsx | 13 ++++++--- .../pages/Dashboard/JurorInfo/PixelArt.tsx | 6 ++-- .../Dashboard/JurorInfo/StakingRewards.tsx | 7 +++-- .../Dashboard/JurorInfo/TokenRewards.tsx | 3 +- web/src/pages/Dashboard/JurorInfo/index.tsx | 19 +++++++++---- web/src/pages/Dashboard/index.tsx | 17 +++++++---- .../FetchDisputeRequestInput.tsx | 11 +++++--- .../DisputeTemplateView/FetchFromIdInput.tsx | 7 +++-- web/src/pages/DisputeTemplateView/index.tsx | 21 +++++++++----- web/src/pages/GetPnk/Header.tsx | 1 + web/src/pages/GetPnk/Settings/index.tsx | 4 ++- web/src/pages/GetPnk/StyledDropdown.tsx | 3 +- web/src/pages/GetPnk/Swap/Cards/FromCard.tsx | 12 +++++--- .../pages/GetPnk/Swap/Cards/SwapDetails.tsx | 9 ++++-- web/src/pages/GetPnk/Swap/Cards/ToCard.tsx | 7 +++-- web/src/pages/GetPnk/Swap/ChainSelect.tsx | 6 ++-- web/src/pages/GetPnk/Swap/NumberInput.tsx | 1 + web/src/pages/GetPnk/Swap/TokenSelect.tsx | 4 ++- web/src/pages/GetPnk/Swap/index.tsx | 14 ++++++---- web/src/pages/GetPnk/index.tsx | 13 ++++++--- web/src/pages/Home/Community/index.tsx | 8 ++++-- web/src/pages/Home/CourtOverview/Chart.tsx | 12 ++++++-- web/src/pages/Home/CourtOverview/Header.tsx | 6 +++- web/src/pages/Home/CourtOverview/Stats.tsx | 23 +++++++++------ .../Home/CourtOverview/TimeSeriesChart.tsx | 20 ++----------- web/src/pages/Home/CourtOverview/index.tsx | 3 +- .../pages/Home/TopJurors/Header/Coherency.tsx | 5 +++- .../Home/TopJurors/Header/DesktopHeader.tsx | 12 +++++--- .../Home/TopJurors/Header/MobileHeader.tsx | 5 +++- .../pages/Home/TopJurors/Header/Rewards.tsx | 2 ++ web/src/pages/Home/TopJurors/Header/index.tsx | 3 +- .../Home/TopJurors/JurorCard/DesktopCard.tsx | 12 ++++---- .../Home/TopJurors/JurorCard/JurorLevel.tsx | 5 +++- .../Home/TopJurors/JurorCard/JurorTitle.tsx | 1 + .../Home/TopJurors/JurorCard/MobileCard.tsx | 7 +++-- .../pages/Home/TopJurors/JurorCard/Rank.tsx | 1 + .../Home/TopJurors/JurorCard/Rewards.tsx | 6 +++- .../pages/Home/TopJurors/JurorCard/index.tsx | 1 + web/src/pages/Home/TopJurors/index.tsx | 11 ++++++-- web/src/pages/Home/index.tsx | 14 ++++++---- .../pages/Resolver/Briefing/Description.tsx | 9 ++++-- web/src/pages/Resolver/Briefing/Title.tsx | 9 ++++-- web/src/pages/Resolver/Header.tsx | 1 + .../Resolver/NavigationButtons/NextButton.tsx | 5 +++- .../NavigationButtons/PreviousButton.tsx | 4 ++- .../NavigationButtons/SubmitDisputeButton.tsx | 17 +++++++---- .../Resolver/NavigationButtons/index.tsx | 6 ++-- .../pages/Resolver/Parameters/Category.tsx | 9 ++++-- web/src/pages/Resolver/Parameters/Court.tsx | 13 ++++++--- web/src/pages/Resolver/Parameters/Jurors.tsx | 16 +++++++---- .../NotablePersons/PersonFields.tsx | 11 +++++--- .../Parameters/NotablePersons/index.tsx | 10 +++++-- .../VotingOptions/OptionsFields.tsx | 7 +++-- .../Parameters/VotingOptions/index.tsx | 12 ++++++-- web/src/pages/Resolver/Policy/index.tsx | 16 +++++++---- web/src/pages/Resolver/Preview/index.tsx | 14 +++++++--- web/src/pages/Resolver/Timeline.tsx | 5 +++- web/src/pages/Resolver/index.tsx | 18 +++++++----- web/src/utils/calculateSubtextRender.tsx | 7 +++-- web/src/utils/debounceErrorToast.ts | 1 + web/src/utils/format.ts | 1 + .../utils/getDisputeRequestParamsFromTxn.ts | 2 ++ web/src/utils/getLocalRounds.ts | 2 +- web/src/utils/isLastRound.ts | 1 + web/src/utils/jurorRewardConfig.ts | 4 ++- web/src/utils/sentry.ts | 2 ++ web/src/utils/uploadFormDataToIPFS.ts | 1 + web/src/utils/uploadSettingsToSupabase.ts | 1 + web/src/utils/uri.ts | 1 + web/wagmi.config.ts | 10 ++++--- 256 files changed, 1316 insertions(+), 568 deletions(-) diff --git a/web/codegen.ts b/web/codegen.ts index e50b114f5..0a7c95877 100644 --- a/web/codegen.ts +++ b/web/codegen.ts @@ -1,4 +1,5 @@ import type { CodegenConfig } from "@graphql-codegen/cli"; + import { getGraphqlUrl } from "utils/getGraphqlUrl"; const config: CodegenConfig = { diff --git a/web/netlify/functions/update-settings.ts b/web/netlify/functions/update-settings.ts index 5ae1ea5fb..3e64b530b 100644 --- a/web/netlify/functions/update-settings.ts +++ b/web/netlify/functions/update-settings.ts @@ -1,9 +1,10 @@ import { Handler } from "@netlify/functions"; -import { verifyTypedData } from "viem"; import { createClient } from "@supabase/supabase-js"; -import { Database } from "../../src/types/supabase-notification"; +import { verifyTypedData } from "viem"; + import messages from "../../src/consts/eip712-messages"; import { EMAIL_REGEX, TELEGRAM_REGEX, ETH_ADDRESS_REGEX, ETH_SIGNATURE_REGEX } from "../../src/consts/index"; +import { Database } from "../../src/types/supabase-notification"; type NotificationSettings = { email?: string; diff --git a/web/netlify/functions/uploadToIPFS.ts b/web/netlify/functions/uploadToIPFS.ts index 26c64bdc1..1b88c136e 100644 --- a/web/netlify/functions/uploadToIPFS.ts +++ b/web/netlify/functions/uploadToIPFS.ts @@ -1,5 +1,5 @@ -import { Handler } from "@netlify/functions"; import { File, FilebaseClient } from "@filebase/client"; +import { Handler } from "@netlify/functions"; import amqp, { Connection } from "amqplib"; import busboy from "busboy"; diff --git a/web/scripts/gitInfo.js b/web/scripts/gitInfo.js index 1828e114b..2d75a946d 100644 --- a/web/scripts/gitInfo.js +++ b/web/scripts/gitInfo.js @@ -1,7 +1,8 @@ /* eslint-disable max-len */ +const { execSync } = require("child_process"); const fs = require("fs"); const path = require("path"); -const { execSync } = require("child_process"); + const packageJson = require("../package.json"); const execSyncWrapper = (command) => { diff --git a/web/src/app.tsx b/web/src/app.tsx index 4b16279dc..8d3de7550 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -1,23 +1,27 @@ import React from "react"; + import { Route } from "react-router-dom"; -import { SentryRoutes } from "./utils/sentry"; + import "react-loading-skeleton/dist/skeleton.css"; import "react-toastify/dist/ReactToastify.css"; -import Web3Provider from "context/Web3Provider"; +import GraphqlBatcherProvider from "context/GraphqlBatcher"; import IsListProvider from "context/IsListProvider"; +import { NewDisputeProvider } from "context/NewDisputeContext"; import QueryClientProvider from "context/QueryClientProvider"; -import StyledComponentsProvider from "context/StyledComponentsProvider"; import RefetchOnBlock from "context/RefetchOnBlock"; -import GraphqlBatcherProvider from "context/GraphqlBatcher"; -import { NewDisputeProvider } from "context/NewDisputeContext"; +import StyledComponentsProvider from "context/StyledComponentsProvider"; +import Web3Provider from "context/Web3Provider"; + import Layout from "layout/index"; -import Home from "./pages/Home"; + import Cases from "./pages/Cases"; -import Dashboard from "./pages/Dashboard"; import Courts from "./pages/Courts"; +import Dashboard from "./pages/Dashboard"; import DisputeTemplateView from "./pages/DisputeTemplateView"; -import DisputeResolver from "./pages/Resolver"; import GetPnk from "./pages/GetPnk"; +import Home from "./pages/Home"; +import DisputeResolver from "./pages/Resolver"; +import { SentryRoutes } from "./utils/sentry"; const App: React.FC = () => { return ( diff --git a/web/src/components/CasesDisplay/CasesGrid.tsx b/web/src/components/CasesDisplay/CasesGrid.tsx index 149983750..a61051dd5 100644 --- a/web/src/components/CasesDisplay/CasesGrid.tsx +++ b/web/src/components/CasesDisplay/CasesGrid.tsx @@ -1,15 +1,21 @@ import React from "react"; import styled from "styled-components"; + import { useParams } from "react-router-dom"; -import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton"; + import { StandardPagination } from "@kleros/ui-components-library"; + import { useIsList } from "context/IsListProvider"; +import useIsDesktop from "hooks/useIsDesktop"; import { isUndefined } from "utils/index"; import { decodeURIFilter } from "utils/uri"; + import { DisputeDetailsFragment } from "queries/useCasesQuery"; -import useIsDesktop from "hooks/useIsDesktop"; + import DisputeView from "components/DisputeView"; +import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton"; + const GridContainer = styled.div` --gap: 24px; display: grid; diff --git a/web/src/components/CasesDisplay/Filters.tsx b/web/src/components/CasesDisplay/Filters.tsx index ebc332eaa..c7ae88513 100644 --- a/web/src/components/CasesDisplay/Filters.tsx +++ b/web/src/components/CasesDisplay/Filters.tsx @@ -1,11 +1,15 @@ import React from "react"; import styled, { useTheme } from "styled-components"; + import { useNavigate, useParams } from "react-router-dom"; + import { DropdownSelect } from "@kleros/ui-components-library"; + +import GridIcon from "svgs/icons/grid.svg"; +import ListIcon from "svgs/icons/list.svg"; + import { useIsList } from "context/IsListProvider"; import useIsDesktop from "hooks/useIsDesktop"; -import ListIcon from "svgs/icons/list.svg"; -import GridIcon from "svgs/icons/grid.svg"; import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri"; const Container = styled.div` diff --git a/web/src/components/CasesDisplay/Search.tsx b/web/src/components/CasesDisplay/Search.tsx index edafa0361..a33dce126 100644 --- a/web/src/components/CasesDisplay/Search.tsx +++ b/web/src/components/CasesDisplay/Search.tsx @@ -1,13 +1,18 @@ import React, { useMemo, useState } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + +import Skeleton from "react-loading-skeleton"; import { useNavigate, useParams } from "react-router-dom"; import { useDebounce } from "react-use"; -import Skeleton from "react-loading-skeleton"; + import { Searchbar, DropdownCascader } from "@kleros/ui-components-library"; -import { rootCourtToItems, useCourtTree } from "queries/useCourtTree"; + import { isUndefined } from "utils/index"; import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri"; + +import { rootCourtToItems, useCourtTree } from "queries/useCourtTree"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` diff --git a/web/src/components/CasesDisplay/StatsAndFilters.tsx b/web/src/components/CasesDisplay/StatsAndFilters.tsx index 42af83f81..2b7f0fefe 100644 --- a/web/src/components/CasesDisplay/StatsAndFilters.tsx +++ b/web/src/components/CasesDisplay/StatsAndFilters.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import Filters from "./Filters"; import Stats, { IStats } from "./Stats"; diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 75fe60bd2..2857ef8b9 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/web/src/components/CasesDisplay/index.tsx @@ -1,12 +1,17 @@ import React from "react"; import styled from "styled-components"; -import Search from "./Search"; -import StatsAndFilters from "./StatsAndFilters"; -import CasesGrid, { ICasesGrid } from "./CasesGrid"; + +import { useLocation, useNavigate } from "react-router-dom"; + +import ArrowIcon from "assets/svgs/icons/arrow.svg"; + import { responsiveSize } from "styles/responsiveSize"; + import LightButton from "../LightButton"; -import ArrowIcon from "assets/svgs/icons/arrow.svg"; -import { useLocation, useNavigate } from "react-router-dom"; + +import CasesGrid, { ICasesGrid } from "./CasesGrid"; +import Search from "./Search"; +import StatsAndFilters from "./StatsAndFilters"; const Divider = styled.hr` display: flex; diff --git a/web/src/components/ClaimPnkButton.tsx b/web/src/components/ClaimPnkButton.tsx index 66fe49b49..4e5faacb9 100644 --- a/web/src/components/ClaimPnkButton.tsx +++ b/web/src/components/ClaimPnkButton.tsx @@ -1,7 +1,12 @@ -import { Button } from "@kleros/ui-components-library"; import React, { useState } from "react"; + import { formatEther } from "viem"; import { useAccount, useNetwork, usePublicClient, useWalletClient } from "wagmi"; + +import { Button } from "@kleros/ui-components-library"; + +import FaucetIcon from "svgs/icons/faucet.svg"; + import { DEFAULT_CHAIN } from "consts/chains"; import { prepareWritePnkFaucet, @@ -10,11 +15,11 @@ import { usePnkFaucetWithdrewAlready, } from "hooks/contracts/generated"; import { usePNKFaucetAddress } from "hooks/useContractAddress"; +import { formatPNK } from "utils/format"; import { isUndefined } from "utils/index"; import { wrapWithToast } from "utils/wrapWithToast"; + import Popup, { PopupType } from "./Popup"; -import { formatPNK } from "utils/format"; -import FaucetIcon from "svgs/icons/faucet.svg"; const ClaimPnkButton: React.FC = () => { const [isSending, setIsSending] = useState(false); diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx index 80b5e43d6..4499a2303 100644 --- a/web/src/components/ConnectWallet/AccountDisplay.tsx +++ b/web/src/components/ConnectWallet/AccountDisplay.tsx @@ -1,10 +1,13 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { useAccount, useNetwork, useEnsAvatar, useEnsName } from "wagmi"; + import Identicon from "react-identicons"; -import { shortenAddress } from "utils/shortenAddress"; import { isAddress } from "viem"; +import { useAccount, useNetwork, useEnsAvatar, useEnsName } from "wagmi"; + +import { shortenAddress } from "utils/shortenAddress"; + +import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` display: flex; diff --git a/web/src/components/ConnectWallet/index.tsx b/web/src/components/ConnectWallet/index.tsx index b446d9e59..847808ef8 100644 --- a/web/src/components/ConnectWallet/index.tsx +++ b/web/src/components/ConnectWallet/index.tsx @@ -1,8 +1,12 @@ import React from "react"; -import { useAccount, useNetwork, useSwitchNetwork } from "wagmi"; + import { useWeb3Modal } from "@web3modal/react"; +import { useAccount, useNetwork, useSwitchNetwork } from "wagmi"; + import { Button } from "@kleros/ui-components-library"; + import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains"; + import AccountDisplay from "./AccountDisplay"; export const SwitchChainButton: React.FC<{ className?: string }> = ({ className }) => { diff --git a/web/src/components/DisputePreview/Alias.tsx b/web/src/components/DisputePreview/Alias.tsx index 53355aa4f..481c1a68a 100644 --- a/web/src/components/DisputePreview/Alias.tsx +++ b/web/src/components/DisputePreview/Alias.tsx @@ -1,11 +1,14 @@ import React from "react"; import styled from "styled-components"; -import { AddressOrName, IdenticonOrAvatar } from "../ConnectWallet/AccountDisplay"; + +import Skeleton from "react-loading-skeleton"; +import { isAddress } from "viem"; +import { useEnsAddress } from "wagmi"; + import { Alias } from "context/NewDisputeContext"; import { isUndefined } from "utils/index"; -import { useEnsAddress } from "wagmi"; -import { isAddress } from "viem"; -import Skeleton from "react-loading-skeleton"; + +import { AddressOrName, IdenticonOrAvatar } from "../ConnectWallet/AccountDisplay"; const AliasContainer = styled.div` min-height: 32px; diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 0eede6f2c..647666d56 100644 --- a/web/src/components/DisputePreview/DisputeContext.tsx +++ b/web/src/components/DisputePreview/DisputeContext.tsx @@ -1,13 +1,18 @@ import React from "react"; -import ReactMarkdown from "components/ReactMarkdown"; import styled from "styled-components"; -import { StyledSkeleton } from "components/StyledSkeleton"; -import { isUndefined } from "utils/index"; -import { Answer as IAnswer } from "context/NewDisputeContext"; -import AliasDisplay from "./Alias"; -import { responsiveSize } from "styles/responsiveSize"; + import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes"; + import { INVALID_DISPUTE_DATA_ERROR, RPC_ERROR } from "consts/index"; +import { Answer as IAnswer } from "context/NewDisputeContext"; +import { isUndefined } from "utils/index"; + +import { responsiveSize } from "styles/responsiveSize"; + +import ReactMarkdown from "components/ReactMarkdown"; +import { StyledSkeleton } from "components/StyledSkeleton"; + +import AliasDisplay from "./Alias"; const StyledH1 = styled.h1` margin: 0; diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index 1f59b57d3..080e7d304 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/web/src/components/DisputePreview/Policies.tsx @@ -1,11 +1,14 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + +import PaperclipIcon from "svgs/icons/paperclip.svg"; import PolicyIcon from "svgs/icons/policy.svg"; + +import { getIpfsUrl } from "utils/getIpfsUrl"; import { isUndefined } from "utils/index"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; -import PaperclipIcon from "svgs/icons/paperclip.svg"; -import { getIpfsUrl } from "utils/getIpfsUrl"; const ShadeArea = styled.div` display: flex; diff --git a/web/src/components/DisputeView/CardLabels/RewardsAndFundLabel.tsx b/web/src/components/DisputeView/CardLabels/RewardsAndFundLabel.tsx index 1886a68ca..ad9b959eb 100644 --- a/web/src/components/DisputeView/CardLabels/RewardsAndFundLabel.tsx +++ b/web/src/components/DisputeView/CardLabels/RewardsAndFundLabel.tsx @@ -1,7 +1,9 @@ import React from "react"; import styled, { useTheme } from "styled-components"; + import EthIcon from "assets/svgs/icons/eth.svg"; import PnkIcon from "assets/svgs/icons/kleros.svg"; + import NumberDisplay from "components/NumberDisplay"; const Container = styled.div` diff --git a/web/src/components/DisputeView/CardLabels/index.tsx b/web/src/components/DisputeView/CardLabels/index.tsx index afc4f2ece..6595bbf34 100644 --- a/web/src/components/DisputeView/CardLabels/index.tsx +++ b/web/src/components/DisputeView/CardLabels/index.tsx @@ -1,19 +1,24 @@ import React, { useMemo } from "react"; import styled, { css } from "styled-components"; + +import Skeleton from "react-loading-skeleton"; import { formatEther, formatUnits } from "viem"; import { useAccount } from "wagmi"; -import Skeleton from "react-loading-skeleton"; + +import AppealIcon from "svgs/label-icons/appeal.svg"; import EvidenceIcon from "svgs/label-icons/evidence.svg"; +import ForgotToVoteIcon from "svgs/label-icons/forgot-vote.svg"; +import FundedIcon from "svgs/label-icons/funded.svg"; import NotDrawnIcon from "svgs/label-icons/minus-circle.svg"; import CanVoteIcon from "svgs/label-icons/vote.svg"; import VotedIcon from "svgs/label-icons/voted.svg"; -import ForgotToVoteIcon from "svgs/label-icons/forgot-vote.svg"; -import AppealIcon from "svgs/label-icons/appeal.svg"; -import FundedIcon from "svgs/label-icons/funded.svg"; -import { ClassicContribution } from "src/graphql/graphql"; + import { useLabelInfoQuery } from "hooks/queries/useLabelInfoQuery"; -import { isUndefined } from "utils/index"; import { getLocalRounds } from "utils/getLocalRounds"; +import { isUndefined } from "utils/index"; + +import { ClassicContribution } from "src/graphql/graphql"; + import Label, { IColors } from "./Label"; import RewardsAndFundLabel from "./RewardsAndFundLabel"; diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx index 8a78a18cd..deece5ba7 100644 --- a/web/src/components/DisputeView/DisputeCardView.tsx +++ b/web/src/components/DisputeView/DisputeCardView.tsx @@ -1,12 +1,18 @@ import React from "react"; -import { Card } from "@kleros/ui-components-library"; import styled from "styled-components"; + +import { useNavigate } from "react-router-dom"; + +import { Card } from "@kleros/ui-components-library"; + +import { Periods } from "consts/periods"; + import { responsiveSize } from "styles/responsiveSize"; -import PeriodBanner from "./PeriodBanner"; + import { StyledSkeleton } from "components/StyledSkeleton"; + import DisputeInfo from "./DisputeInfo"; -import { useNavigate } from "react-router-dom"; -import { Periods } from "consts/periods"; +import PeriodBanner from "./PeriodBanner"; const StyledCard = styled(Card)` width: 100%; diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx index 9f42e03f5..80dfe71ce 100644 --- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx +++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx @@ -1,13 +1,19 @@ import React, { useMemo } from "react"; import styled, { css } from "styled-components"; + +import LawBalanceIcon from "svgs/icons/law-balance.svg"; + +import { useCourtTree } from "hooks/queries/useCourtTree"; + import { landscapeStyle } from "styles/landscapeStyle"; + import Field, { IField } from "components/Field"; -import { FieldItem, IDisputeInfo } from "."; import { getCourtsPath } from "pages/Courts/CourtDetails"; -import { useCourtTree } from "hooks/queries/useCourtTree"; -import LawBalanceIcon from "svgs/icons/law-balance.svg"; + import CardLabel from "../CardLabels"; +import { FieldItem, IDisputeInfo } from "."; + const Container = styled.div` display: flex; width: 100%; diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx index 789a03e96..66059f963 100644 --- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx +++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx @@ -1,7 +1,10 @@ import React from "react"; import styled from "styled-components"; + import Field, { IField } from "components/Field"; + import CardLabel from "../CardLabels"; + import { FieldItem, IDisputeInfo } from "."; const Container = styled.div<{ isLabel?: boolean }>` diff --git a/web/src/components/DisputeView/DisputeInfo/index.tsx b/web/src/components/DisputeView/DisputeInfo/index.tsx index f04a80577..2bf8be948 100644 --- a/web/src/components/DisputeView/DisputeInfo/index.tsx +++ b/web/src/components/DisputeView/DisputeInfo/index.tsx @@ -1,16 +1,20 @@ import React, { useMemo } from "react"; -import { Periods } from "consts/periods"; -import { useIsList } from "context/IsListProvider"; + +import { useAccount } from "wagmi"; + import BookmarkIcon from "svgs/icons/bookmark.svg"; import CalendarIcon from "svgs/icons/calendar.svg"; +import LawBalanceIcon from "svgs/icons/law-balance.svg"; import PileCoinsIcon from "svgs/icons/pile-coins.svg"; import RoundIcon from "svgs/icons/round.svg"; -import LawBalanceIcon from "svgs/icons/law-balance.svg"; -import { useAccount } from "wagmi"; + +import { Periods } from "consts/periods"; +import { useIsList } from "context/IsListProvider"; import { formatDate } from "utils/date"; import { isUndefined } from "utils/index"; -import DisputeInfoList from "./DisputeInfoList"; + import DisputeInfoCard from "./DisputeInfoCard"; +import DisputeInfoList from "./DisputeInfoList"; const getPeriodPhrase = (period: Periods): string => { switch (period) { diff --git a/web/src/components/DisputeView/DisputeListView.tsx b/web/src/components/DisputeView/DisputeListView.tsx index 669a93c87..c03b37517 100644 --- a/web/src/components/DisputeView/DisputeListView.tsx +++ b/web/src/components/DisputeView/DisputeListView.tsx @@ -1,12 +1,17 @@ -import { Card } from "@kleros/ui-components-library"; import React from "react"; import styled from "styled-components"; + +import { useNavigate } from "react-router-dom"; +import { useAccount } from "wagmi"; + +import { Card } from "@kleros/ui-components-library"; + +import { Periods } from "consts/periods"; + import { responsiveSize } from "styles/responsiveSize"; -import PeriodBanner from "./PeriodBanner"; + import DisputeInfo from "./DisputeInfo"; -import { Periods } from "consts/periods"; -import { useAccount } from "wagmi"; -import { useNavigate } from "react-router-dom"; +import PeriodBanner from "./PeriodBanner"; const StyledListItem = styled(Card)` display: flex; diff --git a/web/src/components/DisputeView/PeriodBanner.tsx b/web/src/components/DisputeView/PeriodBanner.tsx index 86eb6de3f..aa0dac171 100644 --- a/web/src/components/DisputeView/PeriodBanner.tsx +++ b/web/src/components/DisputeView/PeriodBanner.tsx @@ -1,6 +1,8 @@ import React, { useMemo } from "react"; import styled, { Theme, css, useTheme } from "styled-components"; + import { Periods } from "consts/periods"; + import { responsiveSize } from "styles/responsiveSize"; interface IContainer { diff --git a/web/src/components/DisputeView/index.tsx b/web/src/components/DisputeView/index.tsx index 8cff0ffb9..b10974a43 100644 --- a/web/src/components/DisputeView/index.tsx +++ b/web/src/components/DisputeView/index.tsx @@ -1,14 +1,18 @@ import React from "react"; + import { formatEther } from "viem"; + +import { INVALID_DISPUTE_DATA_ERROR, RPC_ERROR } from "consts/index"; import { Periods } from "consts/periods"; import { useIsList } from "context/IsListProvider"; -import { DisputeDetailsFragment } from "queries/useCasesQuery"; -import { useCourtPolicy } from "queries/useCourtPolicy"; import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData"; import { isUndefined } from "utils/index"; -import { INVALID_DISPUTE_DATA_ERROR, RPC_ERROR } from "consts/index"; -import DisputeListView from "./DisputeListView"; + +import { DisputeDetailsFragment } from "queries/useCasesQuery"; +import { useCourtPolicy } from "queries/useCourtPolicy"; + import DisputeCardView from "./DisputeCardView"; +import DisputeListView from "./DisputeListView"; export const getPeriodEndTimestamp = ( lastPeriodChange: string, diff --git a/web/src/components/EnsureChain.tsx b/web/src/components/EnsureChain.tsx index 35e726a3f..e58f020e1 100644 --- a/web/src/components/EnsureChain.tsx +++ b/web/src/components/EnsureChain.tsx @@ -1,6 +1,9 @@ import React from "react"; -import { DEFAULT_CHAIN } from "consts/chains"; + import { useNetwork } from "wagmi"; + +import { DEFAULT_CHAIN } from "consts/chains"; + import ConnectWallet from "components/ConnectWallet"; interface IEnsureChain { diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index c34ee41d0..f606061a2 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -1,13 +1,18 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import Identicon from "react-identicons"; + import { Card } from "@kleros/ui-components-library"; + import AttachmentIcon from "svgs/icons/attachment.svg"; + import { useIPFSQuery } from "hooks/useIPFSQuery"; +import { getIpfsUrl } from "utils/getIpfsUrl"; import { shortenAddress } from "utils/shortenAddress"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; -import { getIpfsUrl } from "utils/getIpfsUrl"; const StyledCard = styled(Card)` width: 100%; diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx index 96d7381c7..ddb22b18e 100644 --- a/web/src/components/Field.tsx +++ b/web/src/components/Field.tsx @@ -1,8 +1,10 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Link } from "react-router-dom"; +import { landscapeStyle } from "styles/landscapeStyle"; + const FieldContainer = styled.div` display: flex; align-items: center; diff --git a/web/src/components/HeroImage.tsx b/web/src/components/HeroImage.tsx index d07c177f9..4de256361 100644 --- a/web/src/components/HeroImage.tsx +++ b/web/src/components/HeroImage.tsx @@ -1,9 +1,11 @@ import React from "react"; import { useTheme } from "styled-components"; -import HeroLightMobile from "tsx:svgs/hero/hero-lightmode-mobile.svg"; + +import HeroDarkDesktop from "tsx:svgs/hero/hero-darkmode-desktop.svg"; import HeroDarkMobile from "tsx:svgs/hero/hero-darkmode-mobile.svg"; import HeroLightDesktop from "tsx:svgs/hero/hero-lightmode-desktop.svg"; -import HeroDarkDesktop from "tsx:svgs/hero/hero-darkmode-desktop.svg"; +import HeroLightMobile from "tsx:svgs/hero/hero-lightmode-mobile.svg"; + import useIsDesktop from "hooks/useIsDesktop"; const HeroImage = () => { diff --git a/web/src/components/HowItWorks.tsx b/web/src/components/HowItWorks.tsx index 6791b400c..0f23328cf 100644 --- a/web/src/components/HowItWorks.tsx +++ b/web/src/components/HowItWorks.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg"; const Container = styled.div` diff --git a/web/src/components/InfoCard.tsx b/web/src/components/InfoCard.tsx index 7500016b5..7e24fd726 100644 --- a/web/src/components/InfoCard.tsx +++ b/web/src/components/InfoCard.tsx @@ -1,8 +1,10 @@ import React from "react"; import styled from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; + import InfoCircle from "tsx:svgs/icons/info-circle.svg"; +import { responsiveSize } from "styles/responsiveSize"; + const InfoContainer = styled.div` display: grid; grid-template-columns: 16px auto; diff --git a/web/src/components/JSONEditor.tsx b/web/src/components/JSONEditor.tsx index fbf6b9d0d..d7ca55aa3 100644 --- a/web/src/components/JSONEditor.tsx +++ b/web/src/components/JSONEditor.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useRef } from "react"; import styled, { css } from "styled-components"; + import { JSONEditor as Editor, JSONEditorPropsOptional } from "vanilla-jsoneditor"; + import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` diff --git a/web/src/components/LabeledInput.tsx b/web/src/components/LabeledInput.tsx index b7fb5958c..dee85ebbc 100644 --- a/web/src/components/LabeledInput.tsx +++ b/web/src/components/LabeledInput.tsx @@ -1,6 +1,8 @@ -import { Field, FieldProps } from "@kleros/ui-components-library"; import React from "react"; import styled from "styled-components"; + +import { Field, FieldProps } from "@kleros/ui-components-library"; + import { isUndefined } from "utils/index"; const Container = styled.div` diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index e00f5c4e7..a85396f39 100644 --- a/web/src/components/LatestCases.tsx +++ b/web/src/components/LatestCases.tsx @@ -1,11 +1,16 @@ import React, { useMemo } from "react"; import styled from "styled-components"; -import { Dispute_Filter } from "../graphql/graphql"; + +import { isUndefined } from "utils/index"; + import { DisputeDetailsFragment, useCasesQuery } from "queries/useCasesQuery"; + +import { responsiveSize } from "styles/responsiveSize"; + import DisputeView from "components/DisputeView"; import { SkeletonDisputeCard } from "components/StyledSkeleton"; -import { isUndefined } from "utils/index"; -import { responsiveSize } from "styles/responsiveSize"; + +import { Dispute_Filter } from "../graphql/graphql"; const Container = styled.div` margin-top: ${responsiveSize(48, 80)}; diff --git a/web/src/components/LightButton.tsx b/web/src/components/LightButton.tsx index 3ade4bc12..273d48352 100644 --- a/web/src/components/LightButton.tsx +++ b/web/src/components/LightButton.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import { Button } from "@kleros/ui-components-library"; const StyledButton = styled(Button)` diff --git a/web/src/components/NumberDisplay.tsx b/web/src/components/NumberDisplay.tsx index 236c5b90e..ee67ec43e 100644 --- a/web/src/components/NumberDisplay.tsx +++ b/web/src/components/NumberDisplay.tsx @@ -1,5 +1,6 @@ -import { Tooltip } from "@kleros/ui-components-library"; import React from "react"; + +import { Tooltip } from "@kleros/ui-components-library"; interface INumberDisplay { value: string | number; unit?: string; diff --git a/web/src/components/NumberInputField.tsx b/web/src/components/NumberInputField.tsx index 42a7f456a..f6ecddb92 100644 --- a/web/src/components/NumberInputField.tsx +++ b/web/src/components/NumberInputField.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import styled from "styled-components"; + import { Field } from "@kleros/ui-components-library"; const Container = styled.div` diff --git a/web/src/components/PlusMinusField.tsx b/web/src/components/PlusMinusField.tsx index 7ef2a679c..f1596b3dc 100644 --- a/web/src/components/PlusMinusField.tsx +++ b/web/src/components/PlusMinusField.tsx @@ -1,8 +1,9 @@ import React from "react"; import styled, { css } from "styled-components"; + import Ellipse from "assets/svgs/icons/ellipse.svg"; -import Plus from "assets/svgs/icons/plus.svg"; import Minus from "assets/svgs/icons/minus.svg"; +import Plus from "assets/svgs/icons/plus.svg"; const Container = styled.div` display: flex; diff --git a/web/src/components/Popup/Description/Appeal.tsx b/web/src/components/Popup/Description/Appeal.tsx index f8f750e45..c058d37a3 100644 --- a/web/src/components/Popup/Description/Appeal.tsx +++ b/web/src/components/Popup/Description/Appeal.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` diff --git a/web/src/components/Popup/Description/DisputeCreated.tsx b/web/src/components/Popup/Description/DisputeCreated.tsx index 22d4a10d7..50bc29d64 100644 --- a/web/src/components/Popup/Description/DisputeCreated.tsx +++ b/web/src/components/Popup/Description/DisputeCreated.tsx @@ -1,10 +1,13 @@ import React, { useMemo } from "react"; -import Skeleton from "react-loading-skeleton"; import styled from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; -import { isUndefined } from "utils/index"; -import { formatDate, getCurrentTime } from "utils/date"; + +import Skeleton from "react-loading-skeleton"; + import { useCourtDetails } from "hooks/queries/useCourtDetails"; +import { formatDate, getCurrentTime } from "utils/date"; +import { isUndefined } from "utils/index"; + +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; diff --git a/web/src/components/Popup/Description/StakeWithdraw.tsx b/web/src/components/Popup/Description/StakeWithdraw.tsx index ff30f7525..24b796469 100644 --- a/web/src/components/Popup/Description/StakeWithdraw.tsx +++ b/web/src/components/Popup/Description/StakeWithdraw.tsx @@ -1,10 +1,13 @@ import React from "react"; import styled from "styled-components"; + +import KlerosLogo from "tsx:svgs/icons/kleros.svg"; import { formatUnits } from "viem"; import { useAccount } from "wagmi"; -import { isUndefined } from "utils/index"; + import { useSortitionModuleGetJurorBalance } from "hooks/contracts/generatedProvider"; -import KlerosLogo from "tsx:svgs/icons/kleros.svg"; +import { isUndefined } from "utils/index"; + import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` diff --git a/web/src/components/Popup/Description/SwapSuccess.tsx b/web/src/components/Popup/Description/SwapSuccess.tsx index ddc1f566f..0ceb5c385 100644 --- a/web/src/components/Popup/Description/SwapSuccess.tsx +++ b/web/src/components/Popup/Description/SwapSuccess.tsx @@ -1,10 +1,14 @@ import React from "react"; import styled from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; + +import ArrowIcon from "tsx:svgs/icons/arrow.svg"; + import PnkIcon from "svgs/tokens/pnk.svg"; -import { Token } from "pages/GetPnk/Swap/TokenSelect"; + +import { responsiveSize } from "styles/responsiveSize"; + import LightButton from "components/LightButton"; -import ArrowIcon from "tsx:svgs/icons/arrow.svg"; +import { Token } from "pages/GetPnk/Swap/TokenSelect"; const Container = styled.div` display: flex; diff --git a/web/src/components/Popup/Description/VoteWithCommit.tsx b/web/src/components/Popup/Description/VoteWithCommit.tsx index 382a41ab9..94c5ddc50 100644 --- a/web/src/components/Popup/Description/VoteWithCommit.tsx +++ b/web/src/components/Popup/Description/VoteWithCommit.tsx @@ -1,4 +1,5 @@ import React from "react"; + import { VoteDescriptionEmphasizedDate } from "components/Popup"; interface IVoteWithCommit { diff --git a/web/src/components/Popup/Description/VoteWithoutCommit.tsx b/web/src/components/Popup/Description/VoteWithoutCommit.tsx index 260eed231..06d08792f 100644 --- a/web/src/components/Popup/Description/VoteWithoutCommit.tsx +++ b/web/src/components/Popup/Description/VoteWithoutCommit.tsx @@ -1,4 +1,5 @@ import React from "react"; + import { VoteDescriptionEmphasizedDate } from "components/Popup"; interface IVoteWithoutCommit { diff --git a/web/src/components/Popup/ExtraInfo/DisputeCreatedExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/DisputeCreatedExtraInfo.tsx index c9f154be4..e19127949 100644 --- a/web/src/components/Popup/ExtraInfo/DisputeCreatedExtraInfo.tsx +++ b/web/src/components/Popup/ExtraInfo/DisputeCreatedExtraInfo.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` diff --git a/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx index aaf7d4675..fbaa97783 100644 --- a/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx +++ b/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` diff --git a/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx index b0a8a096f..794d80a4c 100644 --- a/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx +++ b/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx @@ -1,8 +1,10 @@ import React from "react"; import styled from "styled-components"; -import InfoCard from "components/InfoCard"; + import { responsiveSize } from "styles/responsiveSize"; +import InfoCard from "components/InfoCard"; + const StyledInfoCard = styled(InfoCard)` margin: ${responsiveSize(8, 24, 300)} ${responsiveSize(8, 32, 300)} 0; font-size: 14px; diff --git a/web/src/components/Popup/MiniGuides/Appeal/CrowdfundAppeal.tsx b/web/src/components/Popup/MiniGuides/Appeal/CrowdfundAppeal.tsx index cf2fcadd9..0c0a75fdf 100644 --- a/web/src/components/Popup/MiniGuides/Appeal/CrowdfundAppeal.tsx +++ b/web/src/components/Popup/MiniGuides/Appeal/CrowdfundAppeal.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import CrowdfundAppealSvg from "tsx:assets/svgs/mini-guides/appeal/crowdfund-appeal.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledCrowdfundAppealSvg = styled(CrowdfundAppealSvg)` diff --git a/web/src/components/Popup/MiniGuides/Appeal/PayoffSimulator.tsx b/web/src/components/Popup/MiniGuides/Appeal/PayoffSimulator.tsx index 7e0a16680..8397a76f2 100644 --- a/web/src/components/Popup/MiniGuides/Appeal/PayoffSimulator.tsx +++ b/web/src/components/Popup/MiniGuides/Appeal/PayoffSimulator.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import PayoffSimulatorSvg from "tsx:assets/svgs/mini-guides/appeal/payoff-simulator.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledPayoffSimulatorSvg = styled(PayoffSimulatorSvg)` diff --git a/web/src/components/Popup/MiniGuides/Appeal/StageOne.tsx b/web/src/components/Popup/MiniGuides/Appeal/StageOne.tsx index fe6d47047..664958f0a 100644 --- a/web/src/components/Popup/MiniGuides/Appeal/StageOne.tsx +++ b/web/src/components/Popup/MiniGuides/Appeal/StageOne.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import StageOneSvg from "tsx:assets/svgs/mini-guides/appeal/stage-one.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledStageOneSvg = styled(StageOneSvg)` diff --git a/web/src/components/Popup/MiniGuides/Appeal/StageTwo.tsx b/web/src/components/Popup/MiniGuides/Appeal/StageTwo.tsx index f625d0034..5e936cb65 100644 --- a/web/src/components/Popup/MiniGuides/Appeal/StageTwo.tsx +++ b/web/src/components/Popup/MiniGuides/Appeal/StageTwo.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import StageTwoSvg from "tsx:assets/svgs/mini-guides/appeal/stage-two.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledStageTwoSvg = styled(StageTwoSvg)` diff --git a/web/src/components/Popup/MiniGuides/Appeal/WhoWinsRewards.tsx b/web/src/components/Popup/MiniGuides/Appeal/WhoWinsRewards.tsx index a4627b42f..445df8865 100644 --- a/web/src/components/Popup/MiniGuides/Appeal/WhoWinsRewards.tsx +++ b/web/src/components/Popup/MiniGuides/Appeal/WhoWinsRewards.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import WhoWinsRewardsSvg from "tsx:assets/svgs/mini-guides/appeal/who-wins-rewards.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledWhoWinsRewardsSvg = styled(WhoWinsRewardsSvg)` diff --git a/web/src/components/Popup/MiniGuides/Appeal/index.tsx b/web/src/components/Popup/MiniGuides/Appeal/index.tsx index 1f3a60ac2..d31f70bf8 100644 --- a/web/src/components/Popup/MiniGuides/Appeal/index.tsx +++ b/web/src/components/Popup/MiniGuides/Appeal/index.tsx @@ -1,9 +1,11 @@ import React from "react"; + +import PageContentsTemplate from "../PageContentsTemplate"; + import CrowdfundAppeal from "./CrowdfundAppeal"; import PayoffSimulator from "./PayoffSimulator"; import StageOne from "./StageOne"; import StageTwo from "./StageTwo"; -import PageContentsTemplate from "../PageContentsTemplate"; import WhoWinsRewards from "./WhoWinsRewards"; const leftPageContents = [ diff --git a/web/src/components/Popup/MiniGuides/BinaryVoting/PrivateVoting.tsx b/web/src/components/Popup/MiniGuides/BinaryVoting/PrivateVoting.tsx index 8e122d861..8a3d9f9f5 100644 --- a/web/src/components/Popup/MiniGuides/BinaryVoting/PrivateVoting.tsx +++ b/web/src/components/Popup/MiniGuides/BinaryVoting/PrivateVoting.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import PrivateVotingSvg from "tsx:assets/svgs/mini-guides/binary-voting/private-voting.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledPrivateVotingSvg = styled(PrivateVotingSvg)` diff --git a/web/src/components/Popup/MiniGuides/BinaryVoting/VotingModule.tsx b/web/src/components/Popup/MiniGuides/BinaryVoting/VotingModule.tsx index fcb7a4938..2f93a9a45 100644 --- a/web/src/components/Popup/MiniGuides/BinaryVoting/VotingModule.tsx +++ b/web/src/components/Popup/MiniGuides/BinaryVoting/VotingModule.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import VotingModuleSvg from "tsx:assets/svgs/mini-guides/binary-voting/voting-module.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledVotingModuleSvg = styled(VotingModuleSvg)` diff --git a/web/src/components/Popup/MiniGuides/BinaryVoting/index.tsx b/web/src/components/Popup/MiniGuides/BinaryVoting/index.tsx index 31ac4d896..9849da711 100644 --- a/web/src/components/Popup/MiniGuides/BinaryVoting/index.tsx +++ b/web/src/components/Popup/MiniGuides/BinaryVoting/index.tsx @@ -1,8 +1,10 @@ import React from "react"; + import PageContentsTemplate from "../PageContentsTemplate"; import JurorRewards from "../Staking/JurorRewards"; -import VotingModule from "./VotingModule"; + import PrivateVoting from "./PrivateVoting"; +import VotingModule from "./VotingModule"; const leftPageContents = [ { diff --git a/web/src/components/Popup/MiniGuides/JurorLevels.tsx b/web/src/components/Popup/MiniGuides/JurorLevels.tsx index 4ab5cf292..8313d580c 100644 --- a/web/src/components/Popup/MiniGuides/JurorLevels.tsx +++ b/web/src/components/Popup/MiniGuides/JurorLevels.tsx @@ -1,11 +1,15 @@ import React, { useState } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Card as _Card } from "@kleros/ui-components-library"; -import PixelArt from "pages/Dashboard/JurorInfo/PixelArt"; + +import { landscapeStyle } from "styles/landscapeStyle"; + import Coherency from "pages/Dashboard/JurorInfo/Coherency"; -import { Title, ParagraphsContainer, LeftContentContainer } from "./PageContentsTemplate"; +import PixelArt from "pages/Dashboard/JurorInfo/PixelArt"; + import Template from "./MainStructureTemplate"; +import { Title, ParagraphsContainer, LeftContentContainer } from "./PageContentsTemplate"; const Card = styled(_Card)` display: flex; diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index 12f606ca0..086a7b97c 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx @@ -1,11 +1,15 @@ import React, { Dispatch, SetStateAction, useRef } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; + import { useClickAway } from "react-use"; +import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg"; + import { CompactPagination } from "@kleros/ui-components-library"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import { Overlay } from "components/Overlay"; -import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg"; const Container = styled.div<{ isVisible: boolean }>` display: ${({ isVisible }) => (isVisible ? "flex" : "none")}; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx b/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx index 7fe7edaf2..68504fc71 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import HowItWorksSvg from "tsx:assets/svgs/mini-guides/onboarding/how-it-works.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledHowItWorksSvg = styled(HowItWorksSvg)` diff --git a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx index 614de6b9a..ab26fe7af 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import PnkIcon from "tsx:assets/svgs/styled/pnk.svg"; + import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` diff --git a/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx b/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx index d11441042..c406030d5 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import WhatDoINeedSvg from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledWhatDoINeedSvg = styled(WhatDoINeedSvg)` diff --git a/web/src/components/Popup/MiniGuides/Onboarding/index.tsx b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx index 7ae2f4e69..22896df57 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/index.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx @@ -1,14 +1,17 @@ import React from "react"; + import { useToggle } from "react-use"; -import HowItWorks from "./HowItWorks"; -import PnkLogoAndTitle from "./PnkLogoAndTitle"; -import WhatDoINeed from "./WhatDoINeed"; -import Staking from "../Staking"; -import BinaryVoting from "../BinaryVoting"; -import RankedVoting from "../RankedVoting"; + import Appeal from "../Appeal"; +import BinaryVoting from "../BinaryVoting"; import JurorLevels from "../JurorLevels"; import PageContentsTemplate from "../PageContentsTemplate"; +import RankedVoting from "../RankedVoting"; +import Staking from "../Staking"; + +import HowItWorks from "./HowItWorks"; +import PnkLogoAndTitle from "./PnkLogoAndTitle"; +import WhatDoINeed from "./WhatDoINeed"; const leftPageContents = [ { diff --git a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx index 81f7d1b7e..d3f5b5fa5 100644 --- a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx @@ -1,9 +1,11 @@ import React, { useState } from "react"; import styled, { css } from "styled-components"; + import { landscapeStyle } from "styles/landscapeStyle"; -import MainStructureTemplate from "./MainStructureTemplate"; import { responsiveSize } from "styles/responsiveSize"; +import MainStructureTemplate from "./MainStructureTemplate"; + export const ParagraphsContainer = styled.div` display: flex; gap: 18px; diff --git a/web/src/components/Popup/MiniGuides/RankedVoting/VotingModule.tsx b/web/src/components/Popup/MiniGuides/RankedVoting/VotingModule.tsx index 07629ede8..20554e869 100644 --- a/web/src/components/Popup/MiniGuides/RankedVoting/VotingModule.tsx +++ b/web/src/components/Popup/MiniGuides/RankedVoting/VotingModule.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import VotingModuleSvg from "tsx:assets/svgs/mini-guides/ranked-voting/voting-module.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledVotingModuleSvg = styled(VotingModuleSvg)` diff --git a/web/src/components/Popup/MiniGuides/RankedVoting/index.tsx b/web/src/components/Popup/MiniGuides/RankedVoting/index.tsx index afa0a1c7f..fbedb96f5 100644 --- a/web/src/components/Popup/MiniGuides/RankedVoting/index.tsx +++ b/web/src/components/Popup/MiniGuides/RankedVoting/index.tsx @@ -1,8 +1,10 @@ import React from "react"; + +import PrivateVoting from "../BinaryVoting/PrivateVoting"; +import PageContentsTemplate from "../PageContentsTemplate"; import JurorRewards from "../Staking/JurorRewards"; + import VotingModule from "./VotingModule"; -import PageContentsTemplate from "../PageContentsTemplate"; -import PrivateVoting from "../BinaryVoting/PrivateVoting"; const leftPageContents = [ { diff --git a/web/src/components/Popup/MiniGuides/Staking/CourtHeader.tsx b/web/src/components/Popup/MiniGuides/Staking/CourtHeader.tsx index 9c1ca3b2f..9e7436b6b 100644 --- a/web/src/components/Popup/MiniGuides/Staking/CourtHeader.tsx +++ b/web/src/components/Popup/MiniGuides/Staking/CourtHeader.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import CourtHeaderSvg from "tsx:assets/svgs/mini-guides/staking/court-header.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledCourtHeaderSvg = styled(CourtHeaderSvg)` diff --git a/web/src/components/Popup/MiniGuides/Staking/JurorRewards.tsx b/web/src/components/Popup/MiniGuides/Staking/JurorRewards.tsx index 4e0453f1c..e67020809 100644 --- a/web/src/components/Popup/MiniGuides/Staking/JurorRewards.tsx +++ b/web/src/components/Popup/MiniGuides/Staking/JurorRewards.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import JurorRewardsSvg from "tsx:assets/svgs/mini-guides/staking/juror-rewards.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledJurorRewardsSvg = styled(JurorRewardsSvg)` diff --git a/web/src/components/Popup/MiniGuides/Staking/Notifications.tsx b/web/src/components/Popup/MiniGuides/Staking/Notifications.tsx index 7b49e91dc..4747921db 100644 --- a/web/src/components/Popup/MiniGuides/Staking/Notifications.tsx +++ b/web/src/components/Popup/MiniGuides/Staking/Notifications.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import NotificationsSvg from "tsx:assets/svgs/mini-guides/staking/notifications.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledNotificationsSvg = styled(NotificationsSvg)` diff --git a/web/src/components/Popup/MiniGuides/Staking/StakingSection.tsx b/web/src/components/Popup/MiniGuides/Staking/StakingSection.tsx index 9bf708aac..52cacdc86 100644 --- a/web/src/components/Popup/MiniGuides/Staking/StakingSection.tsx +++ b/web/src/components/Popup/MiniGuides/Staking/StakingSection.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import StakingSectionSvg from "tsx:assets/svgs/mini-guides/staking/staking-section.svg"; + import { StyledImage } from "../PageContentsTemplate"; const StyledStakingSectionSvg = styled(StakingSectionSvg)` diff --git a/web/src/components/Popup/MiniGuides/Staking/index.tsx b/web/src/components/Popup/MiniGuides/Staking/index.tsx index 8bca34e2f..3e1d3e9ca 100644 --- a/web/src/components/Popup/MiniGuides/Staking/index.tsx +++ b/web/src/components/Popup/MiniGuides/Staking/index.tsx @@ -1,9 +1,11 @@ import React from "react"; + +import PageContentsTemplate from "../PageContentsTemplate"; + import CourtHeader from "./CourtHeader"; import JurorRewards from "./JurorRewards"; import Notifications from "./Notifications"; import StakingSection from "./StakingSection"; -import PageContentsTemplate from "../PageContentsTemplate"; const leftPageContents = [ { diff --git a/web/src/components/Popup/index.tsx b/web/src/components/Popup/index.tsx index 52d953e5e..18d1dd5c6 100644 --- a/web/src/components/Popup/index.tsx +++ b/web/src/components/Popup/index.tsx @@ -1,21 +1,27 @@ import React, { useRef } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + +import { useNavigate } from "react-router-dom"; + import { Button } from "@kleros/ui-components-library"; + +import CloseIcon from "svgs/icons/close.svg"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import { Overlay } from "components/Overlay"; +import { Token } from "pages/GetPnk/Swap/TokenSelect"; + +import Appeal from "./Description/Appeal"; +import DisputeCreated from "./Description/DisputeCreated"; import StakeWithdraw from "./Description/StakeWithdraw"; +import SwapSuccess from "./Description/SwapSuccess"; import VoteWithCommit from "./Description/VoteWithCommit"; import VoteWithoutCommit from "./Description/VoteWithoutCommit"; -import Appeal from "./Description/Appeal"; -import VoteWithCommitExtraInfo from "./ExtraInfo/VoteWithCommitExtraInfo"; -import StakeWithdrawExtraInfo from "./ExtraInfo/StakeWithdrawExtraInfo"; -import { responsiveSize } from "styles/responsiveSize"; -import DisputeCreated from "./Description/DisputeCreated"; import DisputeCreatedExtraInfo from "./ExtraInfo/DisputeCreatedExtraInfo"; -import { useNavigate } from "react-router-dom"; -import SwapSuccess from "./Description/SwapSuccess"; -import CloseIcon from "svgs/icons/close.svg"; -import { Token } from "pages/GetPnk/Swap/TokenSelect"; +import StakeWithdrawExtraInfo from "./ExtraInfo/StakeWithdrawExtraInfo"; +import VoteWithCommitExtraInfo from "./ExtraInfo/VoteWithCommitExtraInfo"; const Header = styled.h1` display: flex; diff --git a/web/src/components/ReactMarkdown.tsx b/web/src/components/ReactMarkdown.tsx index 71b00cedd..f7b52bb90 100644 --- a/web/src/components/ReactMarkdown.tsx +++ b/web/src/components/ReactMarkdown.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import Reactmkdwn from "react-markdown"; const StyledMarkdown = styled(Reactmkdwn)` diff --git a/web/src/components/StatDisplay.tsx b/web/src/components/StatDisplay.tsx index 23a1d9ba7..9c0e5a353 100644 --- a/web/src/components/StatDisplay.tsx +++ b/web/src/components/StatDisplay.tsx @@ -1,6 +1,7 @@ import React from "react"; -import { landscapeStyle } from "styles/landscapeStyle"; import styled, { useTheme, css } from "styled-components"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx index fbd91129b..98f132ef0 100644 --- a/web/src/components/StyledSkeleton.tsx +++ b/web/src/components/StyledSkeleton.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import Skeleton from "react-loading-skeleton"; + import { responsiveSize } from "styles/responsiveSize"; export const StyledSkeleton = styled(Skeleton)` diff --git a/web/src/components/Tag.tsx b/web/src/components/Tag.tsx index 47f71f79c..3dde5d5ce 100644 --- a/web/src/components/Tag.tsx +++ b/web/src/components/Tag.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { Tag as BaseTag } from "@kleros/ui-components-library"; import styled from "styled-components"; +import { Tag as BaseTag } from "@kleros/ui-components-library"; + interface ITag { text: string; active: boolean; diff --git a/web/src/components/Verdict/Answer.tsx b/web/src/components/Verdict/Answer.tsx index 2f6335779..906c27c21 100644 --- a/web/src/components/Verdict/Answer.tsx +++ b/web/src/components/Verdict/Answer.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { Answer } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes"; import styled from "styled-components"; +import { Answer } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes"; + const AnswerTitle = styled.h3` margin: 0; `; diff --git a/web/src/components/Verdict/DisputeTimeline.tsx b/web/src/components/Verdict/DisputeTimeline.tsx index a5f14ef2b..7adfc92ae 100644 --- a/web/src/components/Verdict/DisputeTimeline.tsx +++ b/web/src/components/Verdict/DisputeTimeline.tsx @@ -1,19 +1,26 @@ import React, { useMemo } from "react"; -import { useParams } from "react-router-dom"; import styled, { useTheme } from "styled-components"; + +import { useParams } from "react-router-dom"; + import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library"; + import CalendarIcon from "assets/svgs/icons/calendar.svg"; import ClosedCaseIcon from "assets/svgs/icons/check-circle-outline.svg"; import AppealedCaseIcon from "assets/svgs/icons/close-circle.svg"; + import { Periods } from "consts/periods"; -import { ClassicRound } from "src/graphql/graphql"; -import { DisputeDetailsQuery, useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData"; -import { useVotingHistory } from "queries/useVotingHistory"; import { getLocalRounds } from "utils/getLocalRounds"; -import { responsiveSize } from "styles/responsiveSize"; import { getVoteChoice } from "utils/getVoteChoice"; +import { DisputeDetailsQuery, useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; +import { useVotingHistory } from "queries/useVotingHistory"; + +import { ClassicRound } from "src/graphql/graphql"; + +import { responsiveSize } from "styles/responsiveSize"; + const Container = styled.div` display: flex; position: relative; diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx index 8495263ec..02c8f6769 100644 --- a/web/src/components/Verdict/FinalDecision.tsx +++ b/web/src/components/Verdict/FinalDecision.tsx @@ -1,20 +1,27 @@ import React, { useMemo } from "react"; -import { useNavigate, useParams } from "react-router-dom"; import styled from "styled-components"; + +import Skeleton from "react-loading-skeleton"; +import { useNavigate, useParams } from "react-router-dom"; +import { useAccount } from "wagmi"; + import ArrowIcon from "assets/svgs/icons/arrow.svg"; + +import { Periods } from "consts/periods"; import { useKlerosCoreCurrentRuling } from "hooks/contracts/generatedProvider"; -import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData"; -import LightButton from "../LightButton"; -import VerdictBanner from "./VerdictBanner"; -import { responsiveSize } from "styles/responsiveSize"; -import { useVotingContext } from "hooks/useVotingContext"; -import Skeleton from "react-loading-skeleton"; -import { useAccount } from "wagmi"; -import AnswerDisplay from "./Answer"; import { useVotingHistory } from "hooks/queries/useVotingHistory"; +import { useVotingContext } from "hooks/useVotingContext"; import { getLocalRounds } from "utils/getLocalRounds"; -import { Periods } from "consts/periods"; + +import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + +import { responsiveSize } from "styles/responsiveSize"; + +import LightButton from "../LightButton"; + +import AnswerDisplay from "./Answer"; +import VerdictBanner from "./VerdictBanner"; const Container = styled.div` width: 100%; diff --git a/web/src/components/Verdict/VerdictBanner.tsx b/web/src/components/Verdict/VerdictBanner.tsx index 4e9456687..fd768e606 100644 --- a/web/src/components/Verdict/VerdictBanner.tsx +++ b/web/src/components/Verdict/VerdictBanner.tsx @@ -1,7 +1,9 @@ import React from "react"; import styled from "styled-components"; + import ClosedCaseIcon from "assets/svgs/icons/check-circle-outline.svg"; import HourglassIcon from "assets/svgs/icons/hourglass.svg"; + import { responsiveSize } from "styles/responsiveSize"; const BannerContainer = styled.div` diff --git a/web/src/components/Verdict/index.tsx b/web/src/components/Verdict/index.tsx index 565ec5837..08a1a3712 100644 --- a/web/src/components/Verdict/index.tsx +++ b/web/src/components/Verdict/index.tsx @@ -1,7 +1,8 @@ import React from "react"; import styled from "styled-components"; -import FinalDecision from "./FinalDecision"; + import DisputeTimeline from "./DisputeTimeline"; +import FinalDecision from "./FinalDecision"; const Container = styled.div` display: flex; diff --git a/web/src/components/WithHelpTooltip.tsx b/web/src/components/WithHelpTooltip.tsx index 395b0ea66..70b6d2225 100644 --- a/web/src/components/WithHelpTooltip.tsx +++ b/web/src/components/WithHelpTooltip.tsx @@ -1,9 +1,12 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Tooltip } from "@kleros/ui-components-library"; + import _HelpIcon from "svgs/menu-icons/help.svg"; +import { landscapeStyle } from "styles/landscapeStyle"; + const Container = styled.div` display: flex; align-items: center; diff --git a/web/src/consts/community-elements.tsx b/web/src/consts/community-elements.tsx index 41898e2f3..e5918fd46 100644 --- a/web/src/consts/community-elements.tsx +++ b/web/src/consts/community-elements.tsx @@ -1,11 +1,13 @@ import React from "react"; import styled, { css } from "styled-components"; -import { IElement } from "../pages/Home/Community/Element"; + +import FrenchFlagIcon from "svgs/icons/french-flag.svg"; import PNKIcon from "svgs/icons/pnk.svg"; import SnapshotIcon from "svgs/icons/snapshot-color.svg"; -import FrenchFlagIcon from "svgs/icons/french-flag.svg"; import TelegramIcon from "svgs/socialmedia/telegram.svg"; +import { IElement } from "../pages/Home/Community/Element"; + const StyledLabel = styled.label` color: ${({ theme }) => theme.primaryBlue}; :hover { diff --git a/web/src/consts/socialmedia.tsx b/web/src/consts/socialmedia.tsx index 749e11396..ed3ff7d62 100644 --- a/web/src/consts/socialmedia.tsx +++ b/web/src/consts/socialmedia.tsx @@ -1,13 +1,14 @@ import React from "react"; + +import DiscordLogo from "svgs/socialmedia/discord.svg"; import EtherscanLogo from "svgs/socialmedia/etherscan.svg"; +import GhostBlogLogo from "svgs/socialmedia/ghost-blog.svg"; import GithubLogo from "svgs/socialmedia/github.svg"; -import SnapshotLogo from "svgs/socialmedia/snapshot.svg"; -import DiscordLogo from "svgs/socialmedia/discord.svg"; -import XLogo from "svgs/socialmedia/x.svg"; +import LinkedinLogo from "svgs/socialmedia/linkedin.svg"; import RedditLogo from "svgs/socialmedia/reddit.svg"; +import SnapshotLogo from "svgs/socialmedia/snapshot.svg"; import TelegramLogo from "svgs/socialmedia/telegram.svg"; -import GhostBlogLogo from "svgs/socialmedia/ghost-blog.svg"; -import LinkedinLogo from "svgs/socialmedia/linkedin.svg"; +import XLogo from "svgs/socialmedia/x.svg"; export const socialmedia = { etherscan: { diff --git a/web/src/context/GraphqlBatcher.tsx b/web/src/context/GraphqlBatcher.tsx index d2cd65742..8ae400f45 100644 --- a/web/src/context/GraphqlBatcher.tsx +++ b/web/src/context/GraphqlBatcher.tsx @@ -1,8 +1,10 @@ import React, { useMemo, createContext, useContext } from "react"; -import { arbitrumSepolia } from "wagmi/chains"; -import { request } from "graphql-request"; -import { create, windowedFiniteBatchScheduler, Batcher } from "@yornaath/batshit"; + import { TypedDocumentNode } from "@graphql-typed-document-node/core"; +import { create, windowedFiniteBatchScheduler, Batcher } from "@yornaath/batshit"; +import { request } from "graphql-request"; +import { arbitrumSepolia } from "wagmi/chains"; + import { debounceErrorToast } from "utils/debounceErrorToast"; import { getGraphqlUrl } from "utils/getGraphqlUrl"; diff --git a/web/src/context/IsListProvider.tsx b/web/src/context/IsListProvider.tsx index 1525f05a5..a995e1c7d 100644 --- a/web/src/context/IsListProvider.tsx +++ b/web/src/context/IsListProvider.tsx @@ -1,4 +1,5 @@ import React, { createContext, useContext } from "react"; + import { useLocalStorage, useToggle } from "react-use"; interface IIsListProvider { diff --git a/web/src/context/NewDisputeContext.tsx b/web/src/context/NewDisputeContext.tsx index 7060cbe0a..c614039db 100644 --- a/web/src/context/NewDisputeContext.tsx +++ b/web/src/context/NewDisputeContext.tsx @@ -1,7 +1,9 @@ import React, { createContext, useState, useContext, useMemo } from "react"; -import { isUndefined } from "utils/index"; + import { Address } from "viem"; + import { useLocalStorage } from "hooks/useLocalStorage"; +import { isUndefined } from "utils/index"; export type Answer = { id?: string; diff --git a/web/src/context/QueryClientProvider.tsx b/web/src/context/QueryClientProvider.tsx index 6787e2504..1e7ea78fe 100644 --- a/web/src/context/QueryClientProvider.tsx +++ b/web/src/context/QueryClientProvider.tsx @@ -1,4 +1,5 @@ import React from "react"; + import { QueryClient, QueryClientProvider as _QueryClientProvider } from "@tanstack/react-query"; const queryClient = new QueryClient(); diff --git a/web/src/context/RefetchOnBlock.tsx b/web/src/context/RefetchOnBlock.tsx index 91fe229dd..9b4fdfb55 100644 --- a/web/src/context/RefetchOnBlock.tsx +++ b/web/src/context/RefetchOnBlock.tsx @@ -1,4 +1,5 @@ import React, { useEffect } from "react"; + import { useQueryClient } from "@tanstack/react-query"; import { useWebSocketPublicClient } from "wagmi"; diff --git a/web/src/context/StyledComponentsProvider.tsx b/web/src/context/StyledComponentsProvider.tsx index 7d11c3407..d13624a19 100644 --- a/web/src/context/StyledComponentsProvider.tsx +++ b/web/src/context/StyledComponentsProvider.tsx @@ -1,7 +1,9 @@ import React from "react"; import { ThemeProvider } from "styled-components"; + import { useLocalStorage } from "hooks/useLocalStorage"; import { ToggleThemeProvider } from "hooks/useToggleThemeContext"; + import { GlobalStyle } from "styles/global-style"; import { lightTheme, darkTheme } from "styles/themes"; diff --git a/web/src/context/Web3Provider.tsx b/web/src/context/Web3Provider.tsx index 1c5153862..7f75f63a8 100644 --- a/web/src/context/Web3Provider.tsx +++ b/web/src/context/Web3Provider.tsx @@ -1,12 +1,14 @@ import React from "react"; -import { EthereumClient, w3mConnectors } from "@web3modal/ethereum"; +import { useTheme } from "styled-components"; + import { alchemyProvider } from "@wagmi/core/providers/alchemy"; +import { EthereumClient, w3mConnectors } from "@web3modal/ethereum"; import { Web3Modal } from "@web3modal/react"; import { configureChains, createConfig, WagmiConfig } from "wagmi"; import { mainnet, arbitrumSepolia, gnosisChiado } from "wagmi/chains"; import { jsonRpcProvider } from "wagmi/providers/jsonRpc"; + import { useToggleTheme } from "hooks/useToggleThemeContext"; -import { useTheme } from "styled-components"; const chains = [arbitrumSepolia, mainnet, gnosisChiado]; const projectId = process.env.WALLETCONNECT_PROJECT_ID ?? "6efaa26765fa742153baf9281e218217"; diff --git a/web/src/hooks/queries/useAllCasesQuery.ts b/web/src/hooks/queries/useAllCasesQuery.ts index 0dd10ef47..49cc787c8 100644 --- a/web/src/hooks/queries/useAllCasesQuery.ts +++ b/web/src/hooks/queries/useAllCasesQuery.ts @@ -1,7 +1,10 @@ -import { graphql } from "src/graphql"; import { useQuery } from "@tanstack/react-query"; -import { AllCasesQuery } from "src/graphql/graphql"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { AllCasesQuery } from "src/graphql/graphql"; + export type { AllCasesQuery }; const allCasesQuery = graphql(` diff --git a/web/src/hooks/queries/useAppealCost.ts b/web/src/hooks/queries/useAppealCost.ts index 72a40380c..78995542d 100644 --- a/web/src/hooks/queries/useAppealCost.ts +++ b/web/src/hooks/queries/useAppealCost.ts @@ -1,4 +1,5 @@ import { useQuery } from "@tanstack/react-query"; + import { getKlerosCore } from "hooks/contracts/generatedProvider"; import { isUndefined } from "utils/index"; diff --git a/web/src/hooks/queries/useCasesQuery.ts b/web/src/hooks/queries/useCasesQuery.ts index 39e554e54..daa6ac6a2 100644 --- a/web/src/hooks/queries/useCasesQuery.ts +++ b/web/src/hooks/queries/useCasesQuery.ts @@ -1,6 +1,10 @@ -import { graphql } from "src/graphql"; -import { Address } from "viem"; import { useQuery } from "@tanstack/react-query"; +import { Address } from "viem"; + +import { useGraphqlBatcher } from "context/GraphqlBatcher"; +import { isUndefined } from "utils/index"; + +import { graphql } from "src/graphql"; import { CasesPageQuery, Dispute_Filter, @@ -8,8 +12,6 @@ import { MyCasesQuery, DisputeDetailsFragment, } from "src/graphql/graphql"; -import { useGraphqlBatcher } from "context/GraphqlBatcher"; -import { isUndefined } from "utils/index"; export type { CasesPageQuery, DisputeDetailsFragment }; export const disputeFragment = graphql(` diff --git a/web/src/hooks/queries/useClassicAppealQuery.ts b/web/src/hooks/queries/useClassicAppealQuery.ts index f2a736ac9..1fa6ce271 100644 --- a/web/src/hooks/queries/useClassicAppealQuery.ts +++ b/web/src/hooks/queries/useClassicAppealQuery.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; -import { ClassicAppealQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { ClassicAppealQuery } from "src/graphql/graphql"; export type { ClassicAppealQuery }; const classicAppealQuery = graphql(` diff --git a/web/src/hooks/queries/useCounter.ts b/web/src/hooks/queries/useCounter.ts index 223f1d9d1..a03e05231 100644 --- a/web/src/hooks/queries/useCounter.ts +++ b/web/src/hooks/queries/useCounter.ts @@ -1,7 +1,10 @@ -import { graphql } from "src/graphql"; import { useQuery } from "@tanstack/react-query"; -import { CounterQuery } from "src/graphql/graphql"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { CounterQuery } from "src/graphql/graphql"; + export type { CounterQuery }; const counterQuery = graphql(` diff --git a/web/src/hooks/queries/useCourtDetails.ts b/web/src/hooks/queries/useCourtDetails.ts index b55c643f7..1b9b61e3d 100644 --- a/web/src/hooks/queries/useCourtDetails.ts +++ b/web/src/hooks/queries/useCourtDetails.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; -import { CourtDetailsQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { CourtDetailsQuery } from "src/graphql/graphql"; export type { CourtDetailsQuery }; const courtDetailsQuery = graphql(` diff --git a/web/src/hooks/queries/useCourtPolicy.ts b/web/src/hooks/queries/useCourtPolicy.ts index efde22da9..0008f0ad4 100644 --- a/web/src/hooks/queries/useCourtPolicy.ts +++ b/web/src/hooks/queries/useCourtPolicy.ts @@ -1,4 +1,5 @@ import { useCourtPolicyURI } from "queries/useCourtPolicyURI"; + import { useIPFSQuery } from "../useIPFSQuery"; export const useCourtPolicy = (courtID?: string) => { diff --git a/web/src/hooks/queries/useCourtPolicyURI.ts b/web/src/hooks/queries/useCourtPolicyURI.ts index 2ddb5f36e..6f866b1c2 100644 --- a/web/src/hooks/queries/useCourtPolicyURI.ts +++ b/web/src/hooks/queries/useCourtPolicyURI.ts @@ -1,8 +1,11 @@ import { useQuery } from "@tanstack/react-query"; -import { graphql } from "src/graphql"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; -import { CourtPolicyUriQuery } from "src/graphql/graphql"; import { isUndefined } from "utils/index"; + +import { graphql } from "src/graphql"; +import { CourtPolicyUriQuery } from "src/graphql/graphql"; + export type { CourtPolicyUriQuery }; const courtPolicyURIQuery = graphql(` diff --git a/web/src/hooks/queries/useCourtTree.ts b/web/src/hooks/queries/useCourtTree.ts index f1a850f56..dffab3e2a 100644 --- a/web/src/hooks/queries/useCourtTree.ts +++ b/web/src/hooks/queries/useCourtTree.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; -import { CourtTreeQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { CourtTreeQuery } from "src/graphql/graphql"; export type { CourtTreeQuery }; const courtTreeQuery = graphql(` diff --git a/web/src/hooks/queries/useDisputeDetailsQuery.ts b/web/src/hooks/queries/useDisputeDetailsQuery.ts index 87d44301b..30ecbdf97 100644 --- a/web/src/hooks/queries/useDisputeDetailsQuery.ts +++ b/web/src/hooks/queries/useDisputeDetailsQuery.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; -import { DisputeDetailsQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { DisputeDetailsQuery } from "src/graphql/graphql"; export type { DisputeDetailsQuery }; const disputeDetailsQuery = graphql(` diff --git a/web/src/hooks/queries/useDisputeKitClassicMultipliers.ts b/web/src/hooks/queries/useDisputeKitClassicMultipliers.ts index 820f216dd..0a5e6361f 100644 --- a/web/src/hooks/queries/useDisputeKitClassicMultipliers.ts +++ b/web/src/hooks/queries/useDisputeKitClassicMultipliers.ts @@ -1,4 +1,5 @@ import { useQuery } from "@tanstack/react-query"; + import { getDisputeKitClassic } from "hooks/contracts/generatedProvider"; import { isUndefined } from "utils/index"; diff --git a/web/src/hooks/queries/useDisputeTemplateFromId.ts b/web/src/hooks/queries/useDisputeTemplateFromId.ts index 68a85e70d..f6c1b0b79 100644 --- a/web/src/hooks/queries/useDisputeTemplateFromId.ts +++ b/web/src/hooks/queries/useDisputeTemplateFromId.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; import { useQuery } from "@tanstack/react-query"; -import { isUndefined } from "utils/index"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; +import { isUndefined } from "utils/index"; + +import { graphql } from "src/graphql"; import { DisputeTemplateQuery } from "src/graphql/graphql"; const disputeTemplateQuery = graphql(` diff --git a/web/src/hooks/queries/useDrawQuery.ts b/web/src/hooks/queries/useDrawQuery.ts index 646f9f326..07c9a36e3 100644 --- a/web/src/hooks/queries/useDrawQuery.ts +++ b/web/src/hooks/queries/useDrawQuery.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; -import { DrawQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { DrawQuery } from "src/graphql/graphql"; export type { DrawQuery }; const drawQuery = graphql(` diff --git a/web/src/hooks/queries/useEvidenceGroup.ts b/web/src/hooks/queries/useEvidenceGroup.ts index b7abee401..86829c495 100644 --- a/web/src/hooks/queries/useEvidenceGroup.ts +++ b/web/src/hooks/queries/useEvidenceGroup.ts @@ -1,8 +1,9 @@ import { useQuery } from "@tanstack/react-query"; -import { getIArbitrableV2 } from "hooks/contracts/generated"; import { usePublicClient } from "wagmi"; -import { isUndefined } from "utils/index"; + import { GENESIS_BLOCK_ARBSEPOLIA } from "consts/index"; +import { getIArbitrableV2 } from "hooks/contracts/generated"; +import { isUndefined } from "utils/index"; export const useEvidenceGroup = (disputeID?: string, arbitrableAddress?: `0x${string}`) => { const isEnabled = !isUndefined(arbitrableAddress); diff --git a/web/src/hooks/queries/useEvidences.ts b/web/src/hooks/queries/useEvidences.ts index eeac0f99b..30daba1a9 100644 --- a/web/src/hooks/queries/useEvidences.ts +++ b/web/src/hooks/queries/useEvidences.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; -import { EvidencesQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { EvidencesQuery } from "src/graphql/graphql"; export type { EvidencesQuery }; const evidencesQuery = graphql(` diff --git a/web/src/hooks/queries/useHomePageQuery.ts b/web/src/hooks/queries/useHomePageQuery.ts index d1613dad9..3c43a3b3f 100644 --- a/web/src/hooks/queries/useHomePageQuery.ts +++ b/web/src/hooks/queries/useHomePageQuery.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; -import { HomePageQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { HomePageQuery } from "src/graphql/graphql"; export type { HomePageQuery }; const homePageQuery = graphql(` diff --git a/web/src/hooks/queries/useJurorStakeDetailsQuery.ts b/web/src/hooks/queries/useJurorStakeDetailsQuery.ts index 40a4b83dc..1583fdee8 100644 --- a/web/src/hooks/queries/useJurorStakeDetailsQuery.ts +++ b/web/src/hooks/queries/useJurorStakeDetailsQuery.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; -import { JurorStakeDetailsQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { JurorStakeDetailsQuery } from "src/graphql/graphql"; export type { JurorStakeDetailsQuery }; const jurorStakeDetailsQuery = graphql(` diff --git a/web/src/hooks/queries/useLabelInfoQuery.ts b/web/src/hooks/queries/useLabelInfoQuery.ts index 48a3be5d4..f34cc8f56 100644 --- a/web/src/hooks/queries/useLabelInfoQuery.ts +++ b/web/src/hooks/queries/useLabelInfoQuery.ts @@ -1,8 +1,10 @@ -import { graphql } from "src/graphql"; -import { LabelInfoQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; +import { graphql } from "src/graphql"; +import { LabelInfoQuery } from "src/graphql/graphql"; + const labelQuery = graphql(` query LabelInfo($address: String, $disputeID: ID!) { dispute(id: $disputeID) { diff --git a/web/src/hooks/queries/usePolicyRegistryEvent.ts b/web/src/hooks/queries/usePolicyRegistryEvent.ts index e0ce718cd..5c87ad5e1 100644 --- a/web/src/hooks/queries/usePolicyRegistryEvent.ts +++ b/web/src/hooks/queries/usePolicyRegistryEvent.ts @@ -1,5 +1,6 @@ import { useQuery } from "@tanstack/react-query"; import { usePublicClient } from "wagmi"; + import { getPolicyRegistry } from "hooks/contracts/generated"; import { isUndefined } from "utils/index"; diff --git a/web/src/hooks/queries/usePopulatedDisputeData.ts b/web/src/hooks/queries/usePopulatedDisputeData.ts index cefab87a0..2c3159a44 100644 --- a/web/src/hooks/queries/usePopulatedDisputeData.ts +++ b/web/src/hooks/queries/usePopulatedDisputeData.ts @@ -1,16 +1,20 @@ import { useQuery } from "@tanstack/react-query"; -import { graphql } from "src/graphql"; import { HttpRequestError, PublicClient, RpcError } from "viem"; import { usePublicClient } from "wagmi"; -import { getIArbitrableV2 } from "hooks/contracts/generated"; -import { isUndefined } from "utils/index"; -import { useGraphqlBatcher } from "context/GraphqlBatcher"; -import { useIsCrossChainDispute } from "../useIsCrossChainDispute"; -import { GENESIS_BLOCK_ARBSEPOLIA } from "consts/index"; -import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate"; + import { executeActions } from "@kleros/kleros-sdk/src/dataMappings/executeActions"; import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes"; +import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate"; + +import { GENESIS_BLOCK_ARBSEPOLIA } from "consts/index"; +import { useGraphqlBatcher } from "context/GraphqlBatcher"; +import { getIArbitrableV2 } from "hooks/contracts/generated"; import { debounceErrorToast } from "utils/debounceErrorToast"; +import { isUndefined } from "utils/index"; + +import { graphql } from "src/graphql"; + +import { useIsCrossChainDispute } from "../useIsCrossChainDispute"; const disputeTemplateQuery = graphql(` query DisputeTemplate($id: ID!) { diff --git a/web/src/hooks/queries/useTopUsersByCoherenceScore.ts b/web/src/hooks/queries/useTopUsersByCoherenceScore.ts index c24deb65a..f45ad08d5 100644 --- a/web/src/hooks/queries/useTopUsersByCoherenceScore.ts +++ b/web/src/hooks/queries/useTopUsersByCoherenceScore.ts @@ -1,8 +1,10 @@ import { useQuery } from "@tanstack/react-query"; -import { graphql } from "src/graphql"; -import { TopUsersByCoherenceScoreQuery } from "src/graphql/graphql"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; import { isUndefined } from "utils/index"; + +import { graphql } from "src/graphql"; +import { TopUsersByCoherenceScoreQuery } from "src/graphql/graphql"; export type { TopUsersByCoherenceScoreQuery }; const topUsersByCoherenceScoreQuery = graphql(` diff --git a/web/src/hooks/queries/useUser.ts b/web/src/hooks/queries/useUser.ts index 65df695af..0fe7216c0 100644 --- a/web/src/hooks/queries/useUser.ts +++ b/web/src/hooks/queries/useUser.ts @@ -1,8 +1,10 @@ import { useQuery } from "@tanstack/react-query"; import { Address } from "viem"; + +import { useGraphqlBatcher } from "context/GraphqlBatcher"; + import { graphql } from "src/graphql"; import { UserQuery, Dispute_Filter, UserDisputeFilterQuery, UserDetailsFragment } from "src/graphql/graphql"; -import { useGraphqlBatcher } from "context/GraphqlBatcher"; export type { UserQuery, UserDetailsFragment }; export const userFragment = graphql(` diff --git a/web/src/hooks/queries/useVotingHistory.ts b/web/src/hooks/queries/useVotingHistory.ts index 11d2bbf30..81ae8f960 100644 --- a/web/src/hooks/queries/useVotingHistory.ts +++ b/web/src/hooks/queries/useVotingHistory.ts @@ -1,7 +1,9 @@ -import { graphql } from "src/graphql"; -import { VotingHistoryQuery } from "src/graphql/graphql"; import { useQuery } from "@tanstack/react-query"; + import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { VotingHistoryQuery } from "src/graphql/graphql"; export type { VotingHistoryQuery }; const votingHistoryQuery = graphql(` diff --git a/web/src/hooks/useClassicAppealContext.tsx b/web/src/hooks/useClassicAppealContext.tsx index 65a936c30..687fc184c 100644 --- a/web/src/hooks/useClassicAppealContext.tsx +++ b/web/src/hooks/useClassicAppealContext.tsx @@ -1,14 +1,17 @@ import React, { useMemo, useState, createContext, useContext } from "react"; + import { useParams } from "react-router-dom"; + import { ONE_BASIS_POINT } from "consts/index"; import { Periods } from "consts/periods"; import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData"; -import { useAppealCost } from "queries/useAppealCost"; -import { useDisputeKitClassicMultipliers } from "queries/useDisputeKitClassicMultipliers"; -import { useClassicAppealQuery, ClassicAppealQuery } from "queries/useClassicAppealQuery"; import { useCountdown } from "hooks/useCountdown"; import { getLocalRounds } from "utils/getLocalRounds"; +import { useAppealCost } from "queries/useAppealCost"; +import { useClassicAppealQuery, ClassicAppealQuery } from "queries/useClassicAppealQuery"; +import { useDisputeKitClassicMultipliers } from "queries/useDisputeKitClassicMultipliers"; + interface ICountdownContext { loserSideCountdown?: number; winnerSideCountdown?: number; diff --git a/web/src/hooks/useContractAddress.tsx b/web/src/hooks/useContractAddress.tsx index 4b02fb620..3b9f7a786 100644 --- a/web/src/hooks/useContractAddress.tsx +++ b/web/src/hooks/useContractAddress.tsx @@ -1,6 +1,7 @@ import { Abi, PublicClient } from "viem"; import { usePublicClient } from "wagmi"; import { GetContractArgs, GetContractResult } from "wagmi/actions"; + import { getPinakionV2, pinakionV2ABI, getWeth, getPnkFaucet, wethABI, pnkFaucetABI } from "./contracts/generated"; import { klerosCoreABI, getKlerosCore } from "./contracts/generatedProvider"; diff --git a/web/src/hooks/useCountdown.ts b/web/src/hooks/useCountdown.ts index ca60fa33a..ef11b817c 100644 --- a/web/src/hooks/useCountdown.ts +++ b/web/src/hooks/useCountdown.ts @@ -1,4 +1,5 @@ import { useState, useEffect } from "react"; + import { getTimeLeft } from "utils/date"; import { isUndefined } from "utils/index"; diff --git a/web/src/hooks/useHomePageContext.tsx b/web/src/hooks/useHomePageContext.tsx index 9ec6b5529..2b2f493ab 100644 --- a/web/src/hooks/useHomePageContext.tsx +++ b/web/src/hooks/useHomePageContext.tsx @@ -1,4 +1,5 @@ import React, { createContext, useContext } from "react"; + import { useHomePageQuery, HomePageQuery } from "queries/useHomePageQuery"; export type { HomePageQuery }; @@ -21,11 +22,7 @@ export const HomePageProvider: React.FC<{ timeframe: number; }> = ({ children, timeframe }) => { const { data, error, isValidating } = useHomePageQuery(timeframe); - return ( - - {children} - - ); + return {children}; }; export const useHomePageContext: () => IContext = () => { diff --git a/web/src/hooks/useIPFSQuery.ts b/web/src/hooks/useIPFSQuery.ts index e4716c448..fc27f5ec8 100644 --- a/web/src/hooks/useIPFSQuery.ts +++ b/web/src/hooks/useIPFSQuery.ts @@ -1,6 +1,7 @@ import { useQuery } from "@tanstack/react-query"; -import { isUndefined } from "utils/index"; + import { getIpfsUrl } from "utils/getIpfsUrl"; +import { isUndefined } from "utils/index"; export const useIPFSQuery = (ipfsPath?: string) => { const isEnabled = !isUndefined(ipfsPath); diff --git a/web/src/hooks/useIsCrossChainDispute.ts b/web/src/hooks/useIsCrossChainDispute.ts index 5536bd2c5..5dafdd9cf 100644 --- a/web/src/hooks/useIsCrossChainDispute.ts +++ b/web/src/hooks/useIsCrossChainDispute.ts @@ -1,10 +1,12 @@ import { useQuery } from "@tanstack/react-query"; +import { HttpRequestError, RpcError } from "viem"; import { usePublicClient } from "wagmi"; + import { getIHomeGateway } from "hooks/contracts/generated"; +import { debounceErrorToast } from "utils/debounceErrorToast"; import { isUndefined } from "utils/index"; + import { GENESIS_BLOCK_ARBSEPOLIA } from "src/consts"; -import { debounceErrorToast } from "utils/debounceErrorToast"; -import { HttpRequestError, RpcError } from "viem"; interface IIsCrossChainDispute { isCrossChainDispute: boolean; diff --git a/web/src/hooks/useIsDesktop.tsx b/web/src/hooks/useIsDesktop.tsx index 1b0928f12..1ff105d51 100644 --- a/web/src/hooks/useIsDesktop.tsx +++ b/web/src/hooks/useIsDesktop.tsx @@ -1,5 +1,7 @@ import { useMemo } from "react"; + import { useWindowSize } from "react-use"; + import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle"; const useIsDesktop = () => { diff --git a/web/src/hooks/useLockOverlayScroll.ts b/web/src/hooks/useLockOverlayScroll.ts index 146cdcd2a..831a0edaf 100644 --- a/web/src/hooks/useLockOverlayScroll.ts +++ b/web/src/hooks/useLockOverlayScroll.ts @@ -1,4 +1,5 @@ import { useContext, useEffect, useCallback } from "react"; + import { OverlayScrollContext } from "context/OverlayScrollContext"; export const useLockOverlayScroll = (shouldLock: boolean) => { diff --git a/web/src/hooks/useParsedAmount.ts b/web/src/hooks/useParsedAmount.ts index c46c30727..86085867a 100644 --- a/web/src/hooks/useParsedAmount.ts +++ b/web/src/hooks/useParsedAmount.ts @@ -1,4 +1,5 @@ import { useMemo } from "react"; + import { parseUnits } from "viem"; export function useParsedAmount(amount: `${number}`): bigint { diff --git a/web/src/hooks/useSigningAccount.tsx b/web/src/hooks/useSigningAccount.tsx index 1966e3f47..3e290d661 100644 --- a/web/src/hooks/useSigningAccount.tsx +++ b/web/src/hooks/useSigningAccount.tsx @@ -2,6 +2,7 @@ import { useLocalStorage } from "react-use"; import { Hex, WalletClient, keccak256 } from "viem"; import { privateKeyToAccount } from "viem/accounts"; import { useWalletClient } from "wagmi"; + import messages from "consts/eip712-messages"; import { isUndefined } from "utils/index"; diff --git a/web/src/hooks/useVotingContext.tsx b/web/src/hooks/useVotingContext.tsx index 46a190e7f..b35cbfb02 100644 --- a/web/src/hooks/useVotingContext.tsx +++ b/web/src/hooks/useVotingContext.tsx @@ -1,10 +1,13 @@ import React, { useContext, createContext, useMemo } from "react"; + import { useParams } from "react-router-dom"; import { useAccount } from "wagmi"; + +import { isUndefined } from "utils/index"; + +import { useDisputeKitClassicIsVoteActive } from "./contracts/generatedProvider"; import { useDisputeDetailsQuery } from "./queries/useDisputeDetailsQuery"; import { useDrawQuery } from "./queries/useDrawQuery"; -import { useDisputeKitClassicIsVoteActive } from "./contracts/generatedProvider"; -import { isUndefined } from "utils/index"; interface IVotingContext { wasDrawn: boolean; diff --git a/web/src/index.tsx b/web/src/index.tsx index a8678fb09..e05d7cdb4 100644 --- a/web/src/index.tsx +++ b/web/src/index.tsx @@ -1,9 +1,11 @@ import React from "react"; + import { createRoot } from "react-dom/client"; -import App from "./app"; import Modal from "react-modal"; import { HashRouter } from "react-router-dom"; +import App from "./app"; + const container = document.getElementById("app"); Modal.setAppElement(container!); const root = createRoot(container!); diff --git a/web/src/layout/Footer/index.tsx b/web/src/layout/Footer/index.tsx index e43c109ea..d72781487 100644 --- a/web/src/layout/Footer/index.tsx +++ b/web/src/layout/Footer/index.tsx @@ -1,9 +1,12 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg"; + import { socialmedia } from "consts/socialmedia"; +import { landscapeStyle } from "styles/landscapeStyle"; + const Container = styled.div` height: 122px; width: 100%; diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 1d78f299c..67263fbd9 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -1,22 +1,29 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { useToggle } from "react-use"; + import { Link } from "react-router-dom"; -import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; -import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; -import KlerosCourtLogo from "svgs/header/kleros-court.svg"; +import { useToggle } from "react-use"; + import KlerosCourtUniversityLogo from "svgs/header/kleros-court-university.svg"; +import KlerosCourtLogo from "svgs/header/kleros-court.svg"; +import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; + +import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import ConnectWallet from "components/ConnectWallet"; import LightButton from "components/LightButton"; +import { Overlay } from "components/Overlay"; + 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"; -import { Overlay } from "components/Overlay"; + import { PopupContainer } from "."; -import { responsiveSize } from "styles/responsiveSize"; const IS_UNIVERSITY = process.env.REACT_APP_UNIVERSITY_COURT === "true"; diff --git a/web/src/layout/Header/MobileHeader.tsx b/web/src/layout/Header/MobileHeader.tsx index 69db9ad62..30a172235 100644 --- a/web/src/layout/Header/MobileHeader.tsx +++ b/web/src/layout/Header/MobileHeader.tsx @@ -1,12 +1,17 @@ import React, { useContext, useMemo, useRef } from "react"; import styled, { css } from "styled-components"; -import { useClickAway, useToggle } from "react-use"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Link } from "react-router-dom"; -import KlerosCourtLogo from "svgs/header/kleros-court.svg"; -import KlerosCourtUniversityLogo from "svgs/header/kleros-court-university.svg"; +import { useClickAway, useToggle } from "react-use"; + import HamburgerIcon from "svgs/header/hamburger.svg"; +import KlerosCourtUniversityLogo from "svgs/header/kleros-court-university.svg"; +import KlerosCourtLogo from "svgs/header/kleros-court.svg"; + +import { landscapeStyle } from "styles/landscapeStyle"; + import LightButton from "components/LightButton"; + import NavBar from "./navbar"; const IS_UNIVERSITY = process.env.REACT_APP_UNIVERSITY_COURT === "true"; diff --git a/web/src/layout/Header/TestnetBanner.tsx b/web/src/layout/Header/TestnetBanner.tsx index 3e9edc4dc..0485b4784 100644 --- a/web/src/layout/Header/TestnetBanner.tsx +++ b/web/src/layout/Header/TestnetBanner.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled, { css } from "styled-components"; + import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx index aa58fdd2e..96fca094c 100644 --- a/web/src/layout/Header/index.tsx +++ b/web/src/layout/Header/index.tsx @@ -1,9 +1,11 @@ import React from "react"; import styled from "styled-components"; -import MobileHeader from "./MobileHeader"; + +import { isProductionDeployment } from "consts/index"; + import DesktopHeader from "./DesktopHeader"; +import MobileHeader from "./MobileHeader"; import { TestnetBanner } from "./TestnetBanner"; -import { isProductionDeployment } from "consts/index"; const Container = styled.div` position: sticky; diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx index 532700fa8..e9ba34fe1 100644 --- a/web/src/layout/Header/navbar/DappList.tsx +++ b/web/src/layout/Header/navbar/DappList.tsx @@ -1,8 +1,8 @@ import React, { useRef } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; + import { useClickAway } from "react-use"; + import Curate from "svgs/icons/curate-image.png"; import Resolver from "svgs/icons/dispute-resolver.svg"; import Escrow from "svgs/icons/escrow.svg"; @@ -10,6 +10,10 @@ import Governor from "svgs/icons/governor.svg"; import Court from "svgs/icons/kleros.svg"; import POH from "svgs/icons/poh-image.png"; import Vea from "svgs/icons/vea.svg"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import Product from "./Product"; const Header = styled.h1` diff --git a/web/src/layout/Header/navbar/Debug.tsx b/web/src/layout/Header/navbar/Debug.tsx index 69ec9fcf3..7f59cb02c 100644 --- a/web/src/layout/Header/navbar/Debug.tsx +++ b/web/src/layout/Header/navbar/Debug.tsx @@ -1,8 +1,9 @@ import React, { useMemo } from "react"; import styled from "styled-components"; + +import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_TAGS, GIT_URL, RELEASE_VERSION } from "consts/index"; import { useSortitionModulePhase } from "hooks/contracts/generatedProvider"; import { useToggleTheme } from "hooks/useToggleThemeContext"; -import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_TAGS, GIT_URL, RELEASE_VERSION } from "consts/index"; import { isUndefined } from "utils/index"; const Container = styled.div` diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index 6447edb82..871f19d39 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -1,10 +1,13 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Link, useLocation } from "react-router-dom"; -import { useOpenContext } from "../MobileHeader"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { useOpenContext } from "../MobileHeader"; + const Container = styled.div` display: flex; gap: 0px; diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx index a68233d47..078d029a9 100644 --- a/web/src/layout/Header/navbar/Menu/Help.tsx +++ b/web/src/layout/Header/navbar/Menu/Help.tsx @@ -1,16 +1,21 @@ import React, { useRef } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { useClickAway, useToggle } from "react-use"; + import Book from "svgs/icons/book-open.svg"; import Guide from "svgs/icons/book.svg"; import Bug from "svgs/icons/bug.svg"; import ETH from "svgs/icons/eth.svg"; import Faq from "svgs/menu-icons/help.svg"; import Telegram from "svgs/socialmedia/telegram.svg"; + +import { landscapeStyle } from "styles/landscapeStyle"; + +import Onboarding from "components/Popup/MiniGuides/Onboarding"; + import { IHelp } from ".."; import Debug from "../Debug"; -import Onboarding from "components/Popup/MiniGuides/Onboarding"; const Container = styled.div` display: flex; diff --git a/web/src/layout/Header/navbar/Menu/Settings/General.tsx b/web/src/layout/Header/navbar/Menu/Settings/General.tsx index d5656f32d..5962dce7d 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/General.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/General.tsx @@ -1,7 +1,10 @@ import React from "react"; import styled from "styled-components"; + import { useAccount, useDisconnect } from "wagmi"; + import { Button } from "@kleros/ui-components-library"; + import { AddressOrName, ChainDisplay, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay"; import { EnsureChain } from "components/EnsureChain"; diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx index 795b78add..94a404a23 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx @@ -1,14 +1,21 @@ import React, { useState } from "react"; import styled from "styled-components"; + import { useWalletClient, useAccount } from "wagmi"; + import { Button } from "@kleros/ui-components-library"; + +import { EMAIL_REGEX, TELEGRAM_REGEX } from "consts/index"; import { uploadSettingsToSupabase } from "utils/uploadSettingsToSupabase"; -import FormContact from "./FormContact"; + import messages from "src/consts/eip712-messages"; -import { EMAIL_REGEX, TELEGRAM_REGEX } from "consts/index"; -import { ISettings } from "../../../../index"; + import { responsiveSize } from "styles/responsiveSize"; +import { ISettings } from "../../../../index"; + +import FormContact from "./FormContact"; + const FormContainer = styled.form` position: relative; display: flex; diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx index c278fda6b..341144a6d 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx @@ -1,11 +1,15 @@ import React from "react"; import styled from "styled-components"; -import { ISettings } from "layout/Header/navbar/index"; -import FormContactDetails from "./FormContactDetails"; -import { EnsureChain } from "components/EnsureChain"; + import TelegramLogo from "svgs/socialmedia/telegram.svg"; + import { HERMES_TELEGRAM_BOT_URL } from "consts/index"; +import { EnsureChain } from "components/EnsureChain"; +import { ISettings } from "layout/Header/navbar/index"; + +import FormContactDetails from "./FormContactDetails"; + const Container = styled.div` display: flex; flex-direction: column; diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx index c5470927e..fb683cd5f 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx @@ -1,13 +1,19 @@ import React, { useRef, useState } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { useClickAway } from "react-use"; + import { Tabs } from "@kleros/ui-components-library"; -import General from "./General"; -import NotificationSettings from "./Notifications"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import { Overlay } from "components/Overlay"; + import { ISettings } from "../../index"; -import { responsiveSize } from "styles/responsiveSize"; + +import General from "./General"; +import NotificationSettings from "./Notifications"; const Container = styled.div` display: flex; diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx index fb12c6e50..93d8a83ab 100644 --- a/web/src/layout/Header/navbar/Menu/index.tsx +++ b/web/src/layout/Header/navbar/Menu/index.tsx @@ -1,13 +1,18 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import LightButton from "components/LightButton"; + import DarkModeIcon from "svgs/menu-icons/dark-mode.svg"; import HelpIcon from "svgs/menu-icons/help.svg"; import LightModeIcon from "svgs/menu-icons/light-mode.svg"; import NotificationsIcon from "svgs/menu-icons/notifications.svg"; import SettingsIcon from "svgs/menu-icons/settings.svg"; + import { useToggleTheme } from "hooks/useToggleThemeContext"; + +import { landscapeStyle } from "styles/landscapeStyle"; + +import LightButton from "components/LightButton"; + import { IHelp, ISettings } from ".."; const Container = styled.div` diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx index 8d568ace7..ec866320e 100644 --- a/web/src/layout/Header/navbar/Product.tsx +++ b/web/src/layout/Header/navbar/Product.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import { responsiveSize } from "styles/responsiveSize"; const Container = styled.a` diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx index b3c6e3d16..7742a7a68 100644 --- a/web/src/layout/Header/navbar/index.tsx +++ b/web/src/layout/Header/navbar/index.tsx @@ -1,20 +1,26 @@ import React from "react"; import styled from "styled-components"; + import { useToggle } from "react-use"; import { useAccount } from "wagmi"; + +import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; + import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; -import { useOpenContext } from "../MobileHeader"; -import DappList from "./DappList"; -import Explore from "./Explore"; + import ConnectWallet from "components/ConnectWallet"; import LightButton from "components/LightButton"; import { Overlay } from "components/Overlay"; -import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; + +import { PopupContainer } from ".."; +import { useOpenContext } from "../MobileHeader"; + +import DappList from "./DappList"; +import Explore from "./Explore"; import Menu from "./Menu"; import Help from "./Menu/Help"; import Settings from "./Menu/Settings"; import { DisconnectWalletButton } from "./Menu/Settings/General"; -import { PopupContainer } from ".."; const Wrapper = styled.div<{ isOpen: boolean }>` visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")}; diff --git a/web/src/layout/index.tsx b/web/src/layout/index.tsx index c65773b27..4b6974e0b 100644 --- a/web/src/layout/index.tsx +++ b/web/src/layout/index.tsx @@ -1,12 +1,15 @@ import React, { useRef } from "react"; import styled from "styled-components"; + import "overlayscrollbars/styles/overlayscrollbars.css"; +import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; import { Outlet } from "react-router-dom"; import { ToastContainer } from "react-toastify"; -import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; + import { OverlayScrollContext } from "context/OverlayScrollContext"; -import Header from "./Header"; + import Footer from "./Footer"; +import Header from "./Header"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx b/web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx index 591b5aaae..c8fa48cd2 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx @@ -1,10 +1,14 @@ import React from "react"; import styled from "styled-components"; -import OptionCard from "./OptionCard"; + +import { useOptionsContext, useFundingContext } from "hooks/useClassicAppealContext"; + import HowItWorks from "components/HowItWorks"; import Appeal from "components/Popup/MiniGuides/Appeal"; + +import OptionCard from "./OptionCard"; + import { AppealHeader, StyledTitle } from "."; -import { useOptionsContext, useFundingContext } from "hooks/useClassicAppealContext"; const OptionsContainer = styled.div` display: flex; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx index 2cda9f51e..f984a02e4 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx @@ -1,18 +1,22 @@ import React, { useMemo, useState } from "react"; import styled from "styled-components"; + import { useParams } from "react-router-dom"; -import { useAccount, useBalance, usePublicClient } from "wagmi"; import { useDebounce } from "react-use"; +import { useAccount, useBalance, usePublicClient } from "wagmi"; + import { Field, Button } from "@kleros/ui-components-library"; -import { wrapWithToast } from "utils/wrapWithToast"; -import { isUndefined } from "utils/index"; -import { EnsureChain } from "components/EnsureChain"; + import { usePrepareDisputeKitClassicFundAppeal, useDisputeKitClassicFundAppeal, } from "hooks/contracts/generatedProvider"; -import { useParsedAmount } from "hooks/useParsedAmount"; import { useSelectedOptionContext, useFundingContext, useCountdownContext } from "hooks/useClassicAppealContext"; +import { useParsedAmount } from "hooks/useParsedAmount"; +import { isUndefined } from "utils/index"; +import { wrapWithToast } from "utils/wrapWithToast"; + +import { EnsureChain } from "components/EnsureChain"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx index edd75f7c3..46d967432 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx @@ -1,15 +1,17 @@ import React from "react"; import styled from "styled-components"; -import StageExplainer from "../StageExplainer"; -import OptionCard from "../../OptionCard"; + import { useCountdownContext, useFundingContext, useOptionsContext, useSelectedOptionContext, } from "hooks/useClassicAppealContext"; -import { isUndefined } from "utils/index"; import { formatUnitsWei } from "utils/format"; +import { isUndefined } from "utils/index"; + +import OptionCard from "../../OptionCard"; +import StageExplainer from "../StageExplainer"; const Container = styled.div` margin: 24px 0; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx index ff2d16d7b..08bad3d58 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx @@ -1,16 +1,19 @@ import React, { useEffect } from "react"; import styled from "styled-components"; -import OptionCard from "../../OptionCard"; + +import Skeleton from "react-loading-skeleton"; + import { useCountdownContext, useFundingContext, useOptionsContext, useSelectedOptionContext, } from "hooks/useClassicAppealContext"; -import { isUndefined } from "utils/index"; import { formatUnitsWei } from "utils/format"; +import { isUndefined } from "utils/index"; + +import OptionCard from "../../OptionCard"; import StageExplainer from "../StageExplainer"; -import Skeleton from "react-loading-skeleton"; const Container = styled.div` margin: 24px 0; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx index c846ff3d9..ceb47eb2a 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx @@ -1,10 +1,13 @@ import React from "react"; import styled from "styled-components"; + import { useCountdownContext } from "hooks/useClassicAppealContext"; +import { isUndefined } from "utils/index"; + import { StyledSkeleton } from "components/StyledSkeleton"; + import StageOne from "./StageOne"; import StageTwo from "./StageTwo"; -import { isUndefined } from "utils/index"; const Container = styled.div` margin: 24px 0; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx index 206ce2d79..0e6ba59fd 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx @@ -1,11 +1,15 @@ import React from "react"; import styled from "styled-components"; + +import Skeleton from "react-loading-skeleton"; + import { Box } from "@kleros/ui-components-library"; -import { secondsToDayHourMinute } from "utils/date"; + import HourglassIcon from "svgs/icons/hourglass.svg"; -import { isUndefined } from "utils/index"; + import { useFundingContext, useOptionsContext } from "hooks/useClassicAppealContext"; -import Skeleton from "react-loading-skeleton"; +import { secondsToDayHourMinute } from "utils/date"; +import { isUndefined } from "utils/index"; const StyledBox = styled(Box)` border-radius: 3px; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx index 06f1495f4..9ad8339e3 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx @@ -1,14 +1,19 @@ import React, { useState } from "react"; + +import AppealIcon from "svgs/icons/appeal.svg"; + import { useOptionsContext, useSelectedOptionContext } from "hooks/useClassicAppealContext"; -import Options from "./Options"; -import Fund from "./Fund"; +import { isUndefined } from "utils/index"; + +import HowItWorks from "components/HowItWorks"; import Popup, { PopupType } from "components/Popup"; import Appeal from "components/Popup/MiniGuides/Appeal"; -import HowItWorks from "components/HowItWorks"; -import AppealIcon from "svgs/icons/appeal.svg"; -import { isUndefined } from "utils/index"; + import { AppealHeader, StyledTitle } from ".."; +import Fund from "./Fund"; +import Options from "./Options"; + interface IClassic { isAppealMiniGuideOpen: boolean; toggleAppealMiniGuide: () => void; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx b/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx index 729a402d6..053f83f7b 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx @@ -1,9 +1,13 @@ import React, { useMemo } from "react"; import styled from "styled-components"; + import { useMeasure } from "react-use"; +import { formatEther } from "viem"; + import { Card, Radio, LinearProgress } from "@kleros/ui-components-library"; + import Gavel from "svgs/icons/gavel.svg"; -import { formatEther } from "viem"; + import { isUndefined } from "utils/index"; const StyledCard = styled(Card)` diff --git a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx index df5269829..04cadb16d 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx @@ -1,13 +1,17 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { useToggle } from "react-use"; -import Classic from "./Classic"; + import { Periods } from "consts/periods"; -import AppealHistory from "./AppealHistory"; import { ClassicAppealProvider } from "hooks/useClassicAppealContext"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import AppealHistory from "./AppealHistory"; +import Classic from "./Classic"; + const Container = styled.div` padding: ${responsiveSize(16, 32)}; `; diff --git a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx index 7573a475f..ceafeb276 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx @@ -1,13 +1,17 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { toast } from "react-toastify"; + import Modal from "react-modal"; +import { toast } from "react-toastify"; +import { useWalletClient, usePublicClient } from "wagmi"; + import { Textarea, Button, FileUploader } from "@kleros/ui-components-library"; -import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast"; + +import { prepareWriteEvidenceModule } from "hooks/contracts/generated"; import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS"; -import { useWalletClient, usePublicClient } from "wagmi"; +import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast"; + import { EnsureChain } from "components/EnsureChain"; -import { prepareWriteEvidenceModule } from "hooks/contracts/generated"; const StyledModal = styled(Modal)` position: absolute; diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index b409a9b17..3d75eada8 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -1,17 +1,24 @@ import React, { useState } from "react"; import styled from "styled-components"; + import { useParams } from "react-router-dom"; import { useAccount } from "wagmi"; + import { Button, Searchbar } from "@kleros/ui-components-library"; + +import { isUndefined } from "utils/index"; + import { useEvidenceGroup } from "queries/useEvidenceGroup"; import { useEvidences } from "queries/useEvidences"; -import SubmitEvidenceModal from "./SubmitEvidenceModal"; -import { SkeletonEvidenceCard } from "components/StyledSkeleton"; -import EvidenceCard from "components/EvidenceCard"; -import { EnsureChain } from "components/EnsureChain"; -import { isUndefined } from "utils/index"; + import { responsiveSize } from "styles/responsiveSize"; +import { EnsureChain } from "components/EnsureChain"; +import EvidenceCard from "components/EvidenceCard"; +import { SkeletonEvidenceCard } from "components/StyledSkeleton"; + +import SubmitEvidenceModal from "./SubmitEvidenceModal"; + const Container = styled.div` width: 100%; display: flex; diff --git a/web/src/pages/Cases/CaseDetails/Overview/index.tsx b/web/src/pages/Cases/CaseDetails/Overview/index.tsx index 3605062f3..601fe882a 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/index.tsx @@ -1,17 +1,22 @@ import React, { useMemo } from "react"; import styled from "styled-components"; + import { useParams } from "react-router-dom"; import { formatEther } from "viem"; -import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData"; -import { useCourtPolicy } from "queries/useCourtPolicy"; -import DisputeInfo from "components/DisputeView/DisputeInfo"; -import Verdict from "components/Verdict/index"; import { useVotingHistory } from "hooks/queries/useVotingHistory"; import { getLocalRounds } from "utils/getLocalRounds"; + +import { useCourtPolicy } from "queries/useCourtPolicy"; +import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + +import { responsiveSize } from "styles/responsiveSize"; + import { DisputeContext } from "components/DisputePreview/DisputeContext"; import { Policies } from "components/DisputePreview/Policies"; -import { responsiveSize } from "styles/responsiveSize"; +import DisputeInfo from "components/DisputeView/DisputeInfo"; +import Verdict from "components/Verdict/index"; const Container = styled.div` width: 100%; diff --git a/web/src/pages/Cases/CaseDetails/Tabs.tsx b/web/src/pages/Cases/CaseDetails/Tabs.tsx index 21ff58fd1..29e0b4de9 100644 --- a/web/src/pages/Cases/CaseDetails/Tabs.tsx +++ b/web/src/pages/Cases/CaseDetails/Tabs.tsx @@ -1,17 +1,22 @@ import React, { useState, useEffect, useMemo } from "react"; import styled from "styled-components"; + import { useNavigate, useLocation, useParams } from "react-router-dom"; + import { Tabs as TabsComponent } from "@kleros/ui-components-library"; + +import BullhornIcon from "assets/svgs/icons/bullhorn.svg"; +import DocIcon from "assets/svgs/icons/doc.svg"; +import EyeIcon from "assets/svgs/icons/eye.svg"; +import BalanceIcon from "assets/svgs/icons/law-balance.svg"; + import { Periods } from "consts/periods"; -import { useVotingHistory } from "hooks/queries/useVotingHistory"; import { useDisputeDetailsQuery } from "hooks/queries/useDisputeDetailsQuery"; -import { useAppealCost } from "queries/useAppealCost"; -import { isLastRound } from "utils/isLastRound"; +import { useVotingHistory } from "hooks/queries/useVotingHistory"; import { isUndefined } from "utils/index"; -import EyeIcon from "assets/svgs/icons/eye.svg"; -import DocIcon from "assets/svgs/icons/doc.svg"; -import BalanceIcon from "assets/svgs/icons/law-balance.svg"; -import BullhornIcon from "assets/svgs/icons/bullhorn.svg"; +import { isLastRound } from "utils/isLastRound"; + +import { useAppealCost } from "queries/useAppealCost"; const StyledTabs = styled(TabsComponent)` width: 100%; diff --git a/web/src/pages/Cases/CaseDetails/Timeline.tsx b/web/src/pages/Cases/CaseDetails/Timeline.tsx index cf54a6e4a..be8113549 100644 --- a/web/src/pages/Cases/CaseDetails/Timeline.tsx +++ b/web/src/pages/Cases/CaseDetails/Timeline.tsx @@ -1,15 +1,20 @@ import React, { useMemo } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { Periods } from "consts/periods"; -import { DisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + import { Box, Steps } from "@kleros/ui-components-library"; -import { StyledSkeleton } from "components/StyledSkeleton"; + +import { Periods } from "consts/periods"; import { useCountdown } from "hooks/useCountdown"; import useIsDesktop from "hooks/useIsDesktop"; import { secondsToDayHourMinute } from "utils/date"; + +import { DisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { StyledSkeleton } from "components/StyledSkeleton"; + const TimeLineContainer = styled(Box)` display: block; width: 100%; diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/Commit.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/Commit.tsx index 11c428fb2..91f231e39 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/Classic/Commit.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/Classic/Commit.tsx @@ -1,15 +1,19 @@ import React, { useCallback, useMemo } from "react"; import styled from "styled-components"; + import { useParams } from "react-router-dom"; import { useLocalStorage } from "react-use"; import { keccak256, encodePacked } from "viem"; import { useWalletClient, usePublicClient } from "wagmi"; + import { prepareWriteDisputeKitClassic } from "hooks/contracts/generatedProvider"; import useSigningAccount from "hooks/useSigningAccount"; +import { isUndefined } from "utils/index"; import { wrapWithToast } from "utils/wrapWithToast"; + import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + import OptionsContainer from "./OptionsContainer"; -import { isUndefined } from "utils/index"; const Container = styled.div` width: 100%; diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/JustificationArea.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/JustificationArea.tsx index 1144de92b..45767659f 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/Classic/JustificationArea.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/Classic/JustificationArea.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import { Textarea } from "@kleros/ui-components-library"; const StyledTextarea = styled(Textarea)` diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/OptionsContainer.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/OptionsContainer.tsx index 3bbbd4b48..f590a640a 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/Classic/OptionsContainer.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/Classic/OptionsContainer.tsx @@ -1,11 +1,16 @@ import React, { useCallback, useState } from "react"; import styled from "styled-components"; -import { useParams } from "react-router-dom"; + import ReactMarkdown from "react-markdown"; +import { useParams } from "react-router-dom"; + import { Button } from "@kleros/ui-components-library"; -import { isUndefined } from "utils/index"; + import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData"; +import { isUndefined } from "utils/index"; + import { EnsureChain } from "components/EnsureChain"; + import JustificationArea from "./JustificationArea"; const MainContainer = styled.div` diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx index a44fbfa39..6e02ed67c 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx @@ -1,18 +1,24 @@ import React, { useCallback, useMemo, useState } from "react"; import styled from "styled-components"; + +import ReactMarkdown from "react-markdown"; import { useParams } from "react-router-dom"; import { useLocalStorage } from "react-use"; import { encodePacked, keccak256, PrivateKeyAccount } from "viem"; import { useWalletClient, usePublicClient } from "wagmi"; -import ReactMarkdown from "react-markdown"; + import { Button } from "@kleros/ui-components-library"; + import { prepareWriteDisputeKitClassic } from "hooks/contracts/generatedProvider"; -import useSigningAccount from "hooks/useSigningAccount"; -import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData"; +import useSigningAccount from "hooks/useSigningAccount"; import { isUndefined } from "utils/index"; import { wrapWithToast, catchShortMessage } from "utils/wrapWithToast"; + +import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + import InfoCard from "components/InfoCard"; + import JustificationArea from "./JustificationArea"; const Container = styled.div` diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx index 5b3e1e8ab..fe3ba6792 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx @@ -1,10 +1,14 @@ import React, { useCallback, useMemo, useState } from "react"; import styled from "styled-components"; + import { useParams } from "react-router-dom"; import { useWalletClient, usePublicClient } from "wagmi"; + import { prepareWriteDisputeKitClassic } from "hooks/contracts/generatedProvider"; import { wrapWithToast } from "utils/wrapWithToast"; + import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + import OptionsContainer from "./OptionsContainer"; const Container = styled.div` diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/index.tsx index 717711452..10fbb3904 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/Classic/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/Classic/index.tsx @@ -1,12 +1,16 @@ import React, { useMemo } from "react"; + import { useParams } from "react-router-dom"; import { useAccount } from "wagmi"; -import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + import { useDrawQuery } from "hooks/queries/useDrawQuery"; -import Vote from "./Vote"; +import { useVotingContext } from "hooks/useVotingContext"; + +import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + import Commit from "./Commit"; import Reveal from "./Reveal"; -import { useVotingContext } from "hooks/useVotingContext"; +import Vote from "./Vote"; interface IClassic { arbitrable: `0x${string}`; diff --git a/web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx b/web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx index 003dba0af..60b8ced5e 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; + import { Box } from "@kleros/ui-components-library"; + import BalanceIcon from "svgs/icons/law-balance.svg"; const StyledBox = styled(Box)` diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx index 60d69d627..9db36ebda 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx @@ -1,12 +1,15 @@ import React from "react"; import styled, { css } from "styled-components"; -import { Answer } from "context/NewDisputeContext"; -import { responsiveSize } from "styles/responsiveSize"; -import { isUndefined } from "utils/index"; + import Identicon from "react-identicons"; + +import { Answer } from "context/NewDisputeContext"; import { getVoteChoice } from "utils/getVoteChoice"; +import { isUndefined } from "utils/index"; import { shortenAddress } from "utils/shortenAddress"; + import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; const TitleContainer = styled.div` display: flex; diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx index 6675bd516..b1d121de9 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx @@ -1,14 +1,19 @@ -import { Card, CustomAccordion } from "@kleros/ui-components-library"; import React, { useMemo } from "react"; import styled from "styled-components"; + +import { Card, CustomAccordion } from "@kleros/ui-components-library"; + import { Answer } from "context/NewDisputeContext"; import { DrawnJuror } from "utils/getDrawnJurorsWithCount"; -import InfoCard from "components/InfoCard"; -import AccordionTitle from "./AccordionTitle"; -import { responsiveSize } from "styles/responsiveSize"; import { getVoteChoice } from "utils/getVoteChoice"; import { isUndefined } from "utils/index"; +import { responsiveSize } from "styles/responsiveSize"; + +import InfoCard from "components/InfoCard"; + +import AccordionTitle from "./AccordionTitle"; + const Container = styled.div` display: flex; flex-direction: column; diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx index 84242f47c..e8bdd5396 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx @@ -1,21 +1,28 @@ import React, { useEffect, useMemo, useState } from "react"; import styled from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; -import { useParams } from "react-router-dom"; + +import Skeleton from "react-loading-skeleton"; import ReactMarkdown from "react-markdown"; +import { useParams } from "react-router-dom"; import { useToggle } from "react-use"; -import Skeleton from "react-loading-skeleton"; + import { Tabs } from "@kleros/ui-components-library"; -import { useVotingHistory } from "queries/useVotingHistory"; -import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; -import { usePopulatedDisputeData } from "queries/usePopulatedDisputeData"; + import { INVALID_DISPUTE_DATA_ERROR, RPC_ERROR } from "consts/index"; -import { getLocalRounds } from "utils/getLocalRounds"; import { getDrawnJurorsWithCount } from "utils/getDrawnJurorsWithCount"; +import { getLocalRounds } from "utils/getLocalRounds"; + +import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; +import { usePopulatedDisputeData } from "queries/usePopulatedDisputeData"; +import { useVotingHistory } from "queries/useVotingHistory"; + +import { responsiveSize } from "styles/responsiveSize"; + import HowItWorks from "components/HowItWorks"; import BinaryVoting from "components/Popup/MiniGuides/BinaryVoting"; -import VotesAccordion from "./VotesDetails"; + import PendingVotesBox from "./PendingVotesBox"; +import VotesAccordion from "./VotesDetails"; const Container = styled.div``; diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index 875b341e7..5045a66ab 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/index.tsx @@ -1,23 +1,30 @@ import React, { useMemo, useState } from "react"; import styled from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; -import { useParams } from "react-router-dom"; + import Skeleton from "react-loading-skeleton"; +import { useParams } from "react-router-dom"; import { useAccount } from "wagmi"; + import VoteIcon from "assets/svgs/icons/voted.svg"; + import { Periods } from "consts/periods"; import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; -import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; -import { useAppealCost } from "queries/useAppealCost"; +import { useVotingContext } from "hooks/useVotingContext"; +import { formatDate } from "utils/date"; import { isUndefined } from "utils/index"; import { isLastRound } from "utils/isLastRound"; -import { formatDate } from "utils/date"; -import Popup, { PopupType } from "components/Popup"; + +import { useAppealCost } from "queries/useAppealCost"; +import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + +import { responsiveSize } from "styles/responsiveSize"; + import { getPeriodEndTimestamp } from "components/DisputeView"; import InfoCard from "components/InfoCard"; +import Popup, { PopupType } from "components/Popup"; + import Classic from "./Classic"; import VotingHistory from "./VotingHistory"; -import { useVotingContext } from "hooks/useVotingContext"; const Container = styled.div` padding: ${responsiveSize(16, 32)}; diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx index 6dadbb6b7..1b2c42c5c 100644 --- a/web/src/pages/Cases/CaseDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/index.tsx @@ -1,17 +1,23 @@ import React from "react"; import styled from "styled-components"; + import { Route, Routes, useParams, Navigate } from "react-router-dom"; + import { Card } from "@kleros/ui-components-library"; + import { Periods } from "consts/periods"; +import { VotingContextProvider } from "hooks/useVotingContext"; + import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; + +import { responsiveSize } from "styles/responsiveSize"; + import Appeal from "./Appeal"; import Evidence from "./Evidence"; import Overview from "./Overview"; import Tabs from "./Tabs"; import Timeline from "./Timeline"; import Voting from "./Voting"; -import { responsiveSize } from "styles/responsiveSize"; -import { VotingContextProvider } from "hooks/useVotingContext"; const Container = styled.div``; diff --git a/web/src/pages/Cases/CasesFetcher.tsx b/web/src/pages/Cases/CasesFetcher.tsx index c9556fbc8..83b34cf20 100644 --- a/web/src/pages/Cases/CasesFetcher.tsx +++ b/web/src/pages/Cases/CasesFetcher.tsx @@ -1,12 +1,17 @@ import React, { useMemo } from "react"; + import { useParams, useNavigate } from "react-router-dom"; -import { DisputeDetailsFragment, Dispute_Filter, OrderDirection } from "src/graphql/graphql"; -import { useCasesQuery } from "queries/useCasesQuery"; -import { useCounterQuery, CounterQuery } from "queries/useCounter"; -import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails"; + import useIsDesktop from "hooks/useIsDesktop"; import { isUndefined } from "utils/index"; import { decodeURIFilter, useRootPath } from "utils/uri"; + +import { useCasesQuery } from "queries/useCasesQuery"; +import { useCounterQuery, CounterQuery } from "queries/useCounter"; +import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails"; + +import { DisputeDetailsFragment, Dispute_Filter, OrderDirection } from "src/graphql/graphql"; + import CasesDisplay from "components/CasesDisplay"; const calculateStats = ( diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx index dcaef535a..f19472556 100644 --- a/web/src/pages/Cases/index.tsx +++ b/web/src/pages/Cases/index.tsx @@ -1,9 +1,12 @@ import React from "react"; import styled from "styled-components"; + import { Routes, Route } from "react-router-dom"; + +import { responsiveSize } from "styles/responsiveSize"; + import CaseDetails from "./CaseDetails"; import CasesFetcher from "./CasesFetcher"; -import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; diff --git a/web/src/pages/Courts/CourtDetails/Description.tsx b/web/src/pages/Courts/CourtDetails/Description.tsx index c48ce3593..5d30f358e 100644 --- a/web/src/pages/Courts/CourtDetails/Description.tsx +++ b/web/src/pages/Courts/CourtDetails/Description.tsx @@ -1,11 +1,15 @@ import React, { useEffect, useState } from "react"; import styled from "styled-components"; + import ReactMarkdown from "react-markdown"; import { Routes, Route, Navigate, useParams, useNavigate, useLocation } from "react-router-dom"; + import { Tabs } from "@kleros/ui-components-library"; -import { StyledSkeleton } from "components/StyledSkeleton"; + import { useCourtPolicy } from "queries/useCourtPolicy"; +import { StyledSkeleton } from "components/StyledSkeleton"; + const Container = styled.div` width: 100%; `; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx index ce1e042f9..a00f1d06b 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx @@ -1,17 +1,21 @@ import React, { useState } from "react"; import styled from "styled-components"; + import { useParams } from "react-router-dom"; import { useDebounce } from "react-use"; import { useAccount } from "wagmi"; -import { NumberInputField } from "components/NumberInputField"; -import { useParsedAmount } from "hooks/useParsedAmount"; -import { useCourtDetails } from "hooks/queries/useCourtDetails"; + import { usePnkBalanceOf } from "hooks/contracts/generated"; import { useSortitionModuleGetJurorBalance } from "hooks/contracts/generatedProvider"; -import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton"; +import { useCourtDetails } from "hooks/queries/useCourtDetails"; +import { useParsedAmount } from "hooks/useParsedAmount"; +import { commify, uncommify } from "utils/commify"; import { formatPNK, roundNumberDown } from "utils/format"; import { isUndefined } from "utils/index"; -import { commify, uncommify } from "utils/commify"; + +import { NumberInputField } from "components/NumberInputField"; + +import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton"; const StyledField = styled(NumberInputField)` height: fit-content; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx index c75b34e54..de34dbaab 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx @@ -1,15 +1,21 @@ import React, { useState, useEffect, useMemo } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { useParams } from "react-router-dom"; import { formatEther } from "viem"; import { useAccount } from "wagmi"; -import { isUndefined } from "utils/index"; -import Field from "components/Field"; + import DiceIcon from "svgs/icons/dice.svg"; import PNKIcon from "svgs/icons/pnk.svg"; -import { useCourtDetails } from "queries/useCourtDetails"; + import { useSortitionModuleGetJurorBalance } from "hooks/contracts/generatedProvider"; +import { isUndefined } from "utils/index"; + +import { useCourtDetails } from "queries/useCourtDetails"; + +import { landscapeStyle } from "styles/landscapeStyle"; + +import Field from "components/Field"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx index 86a14dd1b..c51358936 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx @@ -1,7 +1,10 @@ import React, { useMemo } from "react"; + import { useParams } from "react-router-dom"; import { useAccount, usePublicClient } from "wagmi"; + import { Button } from "@kleros/ui-components-library"; + import { usePnkBalanceOf, usePnkIncreaseAllowance, @@ -15,8 +18,9 @@ import { useSortitionModuleGetJurorBalance, } from "hooks/contracts/generatedProvider"; import { useCourtDetails } from "hooks/queries/useCourtDetails"; -import { wrapWithToast } from "utils/wrapWithToast"; import { isUndefined } from "utils/index"; +import { wrapWithToast } from "utils/wrapWithToast"; + import { EnsureChain } from "components/EnsureChain"; export enum ActionType { diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx index a2953f3cf..a99880746 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx @@ -1,14 +1,20 @@ import React, { useState } from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + +import ThreePnksIcon from "tsx:assets/svgs/styled/three-pnks.svg"; + +import BalanceIcon from "assets/svgs/icons/balance.svg"; + import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; + +import { landscapeStyle } from "styles/landscapeStyle"; + +import Popup, { PopupType } from "components/Popup/index"; import Tag from "components/Tag"; -import JurorBalanceDisplay from "./JurorStakeDisplay"; + import InputDisplay from "./InputDisplay"; +import JurorBalanceDisplay from "./JurorStakeDisplay"; import { ActionType } from "./StakeWithdrawButton"; -import Popup, { PopupType } from "components/Popup/index"; -import BalanceIcon from "assets/svgs/icons/balance.svg"; -import ThreePnksIcon from "tsx:assets/svgs/styled/three-pnks.svg"; const Container = styled.div` position: relative; diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx index 58c36f39e..a5f0e8747 100644 --- a/web/src/pages/Courts/CourtDetails/Stats.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats.tsx @@ -1,23 +1,29 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { useParams } from "react-router-dom"; -import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails"; -import { useCoinPrice } from "hooks/useCoinPrice"; -import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format"; -import { isUndefined } from "utils/index"; -import { calculateSubtextRender } from "utils/calculateSubtextRender"; -import { CoinIds } from "consts/coingecko"; -import StatDisplay, { IStatDisplay } from "components/StatDisplay"; -import { StyledSkeleton } from "components/StyledSkeleton"; + +import EthereumIcon from "svgs/icons/ethereum.svg"; import BalanceIcon from "svgs/icons/law-balance.svg"; import MinStake from "svgs/icons/min-stake.svg"; -import VoteStake from "svgs/icons/vote-stake.svg"; import PNKIcon from "svgs/icons/pnk.svg"; import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg"; -import EthereumIcon from "svgs/icons/ethereum.svg"; +import VoteStake from "svgs/icons/vote-stake.svg"; + +import { CoinIds } from "consts/coingecko"; +import { useCoinPrice } from "hooks/useCoinPrice"; +import { calculateSubtextRender } from "utils/calculateSubtextRender"; +import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format"; +import { isUndefined } from "utils/index"; + +import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import StatDisplay, { IStatDisplay } from "components/StatDisplay"; +import { StyledSkeleton } from "components/StyledSkeleton"; + const StyledCard = styled.div` width: auto; height: fit-content; diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index 2eeff489c..b790bf6c7 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -1,21 +1,28 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { useToggle } from "react-use"; + import { useParams } from "react-router-dom"; +import { useToggle } from "react-use"; + import { Card, Breadcrumb } from "@kleros/ui-components-library"; + +import { isUndefined } from "utils/index"; + import { useCourtPolicy } from "queries/useCourtPolicy"; import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree"; -import { isUndefined } from "utils/index"; -import { StyledSkeleton } from "components/StyledSkeleton"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + +import ClaimPnkButton from "components/ClaimPnkButton"; +import HowItWorks from "components/HowItWorks"; import LatestCases from "components/LatestCases"; -import Stats from "./Stats"; +import Staking from "components/Popup/MiniGuides/Staking"; +import { StyledSkeleton } from "components/StyledSkeleton"; + import Description from "./Description"; import StakePanel from "./StakePanel"; -import HowItWorks from "components/HowItWorks"; -import Staking from "components/Popup/MiniGuides/Staking"; -import { responsiveSize } from "styles/responsiveSize"; -import ClaimPnkButton from "components/ClaimPnkButton"; +import Stats from "./Stats"; const Container = styled.div``; diff --git a/web/src/pages/Courts/TopSearch.tsx b/web/src/pages/Courts/TopSearch.tsx index 69552b797..481ad4c8d 100644 --- a/web/src/pages/Courts/TopSearch.tsx +++ b/web/src/pages/Courts/TopSearch.tsx @@ -1,10 +1,15 @@ import React, { useMemo } from "react"; + import { useNavigate } from "react-router-dom"; + import { DropdownCascader } from "@kleros/ui-components-library"; -import { StyledSkeleton } from "components/StyledSkeleton"; + import { isUndefined } from "utils/index"; + import { useCourtTree, rootCourtToItems } from "queries/useCourtTree"; +import { StyledSkeleton } from "components/StyledSkeleton"; + const TopSearch: React.FC = () => { const { data } = useCourtTree(); const navigate = useNavigate(); diff --git a/web/src/pages/Courts/index.tsx b/web/src/pages/Courts/index.tsx index 019c22ee9..5944cd9b9 100644 --- a/web/src/pages/Courts/index.tsx +++ b/web/src/pages/Courts/index.tsx @@ -1,10 +1,13 @@ import React from "react"; import styled from "styled-components"; + import { Routes, Route, Navigate } from "react-router-dom"; -import TopSearch from "./TopSearch"; -import CourtDetails from "./CourtDetails"; + import { responsiveSize } from "styles/responsiveSize"; +import CourtDetails from "./CourtDetails"; +import TopSearch from "./TopSearch"; + const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx index 67c6e2fc1..b2742f567 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx @@ -1,8 +1,10 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Breadcrumb } from "@kleros/ui-components-library"; +import { landscapeStyle } from "styles/landscapeStyle"; + const Container = styled.div` width: 100%; justify-content: flex-start; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx index 4ac7e2929..de2084617 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx @@ -1,7 +1,10 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { formatUnits } from "viem"; + +import { landscapeStyle } from "styles/landscapeStyle"; + import NumberDisplay from "components/NumberDisplay"; const Container = styled.div` diff --git a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx index 4cc0e16b9..369c2a599 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx @@ -1,7 +1,10 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Card as _Card } from "@kleros/ui-components-library"; + +import { landscapeStyle } from "styles/landscapeStyle"; + import CourtName from "./CourtName"; import Stake from "./Stake"; diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx index ad1ce97bf..3577acd68 100644 --- a/web/src/pages/Dashboard/Courts/Header.tsx +++ b/web/src/pages/Dashboard/Courts/Header.tsx @@ -1,10 +1,15 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { formatUnits } from "viem"; -import { isUndefined } from "utils/index"; + import LockerIcon from "svgs/icons/locker.svg"; + +import { isUndefined } from "utils/index"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; + import NumberDisplay from "components/NumberDisplay"; const Container = styled.div` diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index 20c6c0bfd..0c769ea41 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -1,12 +1,17 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { useAccount } from "wagmi"; + import Skeleton from "react-loading-skeleton"; +import { useAccount } from "wagmi"; + +import { useSortitionModuleGetJurorBalance } from "hooks/contracts/generatedProvider"; + +import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery"; + +import { landscapeStyle } from "styles/landscapeStyle"; + import CourtCard from "./CourtCard"; import Header from "./Header"; -import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery"; -import { useSortitionModuleGetJurorBalance } from "hooks/contracts/generatedProvider"; const Container = styled.div` margin-top: 64px; diff --git a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx index eb869b498..bef8db218 100644 --- a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx @@ -1,7 +1,10 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { CircularProgress } from "@kleros/ui-components-library"; + +import { landscapeStyle } from "styles/landscapeStyle"; + import WithHelpTooltip from "components/WithHelpTooltip"; const Container = styled.div` diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Dashboard/JurorInfo/Header.tsx index 9b5532faa..8db90b3c8 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Header.tsx @@ -1,11 +1,15 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { useToggle } from "react-use"; + import XIcon from "svgs/socialmedia/x.svg"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import HowItWorks from "components/HowItWorks"; import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; -import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx index 23ddd0c73..c6224ea60 100644 --- a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx @@ -1,12 +1,17 @@ import React from "react"; import styled from "styled-components"; + import { useAccount } from "wagmi"; -import TokenRewards from "./TokenRewards"; -import WithHelpTooltip from "components/WithHelpTooltip"; -import { getFormattedRewards } from "utils/jurorRewardConfig"; + import { CoinIds } from "consts/coingecko"; -import { useUserQuery } from "queries/useUser"; import { useCoinPrice } from "hooks/useCoinPrice"; +import { getFormattedRewards } from "utils/jurorRewardConfig"; + +import { useUserQuery } from "queries/useUser"; + +import WithHelpTooltip from "components/WithHelpTooltip"; + +import TokenRewards from "./TokenRewards"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Dashboard/JurorInfo/PixelArt.tsx b/web/src/pages/Dashboard/JurorInfo/PixelArt.tsx index 7b360be1d..48e15dd93 100644 --- a/web/src/pages/Dashboard/JurorInfo/PixelArt.tsx +++ b/web/src/pages/Dashboard/JurorInfo/PixelArt.tsx @@ -1,11 +1,13 @@ import React, { useState } from "react"; import styled from "styled-components"; + import Skeleton from "react-loading-skeleton"; + +import aristotelesImage from "assets/pngs/dashboard/aristoteles.png"; import diogenesImage from "assets/pngs/dashboard/diogenes.png"; +import platoImage from "assets/pngs/dashboard/plato.png"; import pythagorasImage from "assets/pngs/dashboard/pythagoras.png"; import socratesImage from "assets/pngs/dashboard/socrates.png"; -import platoImage from "assets/pngs/dashboard/plato.png"; -import aristotelesImage from "assets/pngs/dashboard/aristoteles.png"; interface IStyledImage { show: boolean; diff --git a/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx b/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx index 7a613f2ba..85f865430 100644 --- a/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx @@ -1,9 +1,12 @@ import React from "react"; import styled from "styled-components"; + import { Box as _Box, Button } from "@kleros/ui-components-library"; -import TokenRewards from "./TokenRewards"; -import WithHelpTooltip from "components/WithHelpTooltip"; + import { EnsureChain } from "components/EnsureChain"; +import WithHelpTooltip from "components/WithHelpTooltip"; + +import TokenRewards from "./TokenRewards"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx index d91e3f091..dc1c50e91 100644 --- a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx @@ -1,8 +1,9 @@ import React from "react"; import styled from "styled-components"; + import GradientTokenIcons from "components/GradientTokenIcons"; -import { StyledSkeleton } from "components/StyledSkeleton"; import NumberDisplay from "components/NumberDisplay"; +import { StyledSkeleton } from "components/StyledSkeleton"; const RewardContainer = styled.div` display: flex; diff --git a/web/src/pages/Dashboard/JurorInfo/index.tsx b/web/src/pages/Dashboard/JurorInfo/index.tsx index b8044e543..e75f70100 100644 --- a/web/src/pages/Dashboard/JurorInfo/index.tsx +++ b/web/src/pages/Dashboard/JurorInfo/index.tsx @@ -1,15 +1,22 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + +import { useAccount } from "wagmi"; + import { Card as _Card } from "@kleros/ui-components-library"; -import Header from "./Header"; + +import { getUserLevelData } from "utils/userLevelCalculation"; + +import { useUserQuery } from "queries/useUser"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import Coherency from "./Coherency"; +import Header from "./Header"; import JurorRewards from "./JurorRewards"; import PixelArt from "./PixelArt"; -import { useAccount } from "wagmi"; -import { useUserQuery } from "queries/useUser"; -import { getUserLevelData } from "utils/userLevelCalculation"; -import { responsiveSize } from "styles/responsiveSize"; + // import StakingRewards from "./StakingRewards"; const Container = styled.div``; diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index d5c55b07e..a526b06d0 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -1,17 +1,24 @@ import React, { useMemo } from "react"; import styled from "styled-components"; + import { useNavigate, useParams } from "react-router-dom"; import { useAccount } from "wagmi"; -import { OrderDirection } from "src/graphql/graphql"; + +import { isUndefined } from "utils/index"; +import { decodeURIFilter, useRootPath } from "utils/uri"; + import { DisputeDetailsFragment, useMyCasesQuery } from "queries/useCasesQuery"; import { useUserQuery } from "queries/useUser"; -import { decodeURIFilter, useRootPath } from "utils/uri"; -import { isUndefined } from "utils/index"; + +import { OrderDirection } from "src/graphql/graphql"; + +import { responsiveSize } from "styles/responsiveSize"; + import CasesDisplay from "components/CasesDisplay"; import ConnectWallet from "components/ConnectWallet"; -import JurorInfo from "./JurorInfo"; + import Courts from "./Courts"; -import { responsiveSize } from "styles/responsiveSize"; +import JurorInfo from "./JurorInfo"; const Container = styled.div` width: 100%; diff --git a/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx b/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx index 074790261..6987d55fe 100644 --- a/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx +++ b/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx @@ -1,12 +1,15 @@ -import { Field } from "@kleros/ui-components-library"; import React, { useEffect, useState } from "react"; -import { useDebounce } from "react-use"; import styled from "styled-components"; + +import { useDebounce } from "react-use"; +import { GetEventArgs } from "viem/_types/types/contract"; + +import { Field } from "@kleros/ui-components-library"; + import { DEFAULT_CHAIN } from "consts/chains"; +import { iArbitrableV2ABI } from "hooks/contracts/generated"; import { getDisputeRequestParamsFromTxn } from "utils/getDisputeRequestParamsFromTxn"; import { isUndefined } from "utils/index"; -import { GetEventArgs } from "viem/_types/types/contract"; -import { iArbitrableV2ABI } from "hooks/contracts/generated"; const Container = styled.div` display: flex; diff --git a/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx b/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx index ddaa34938..8fb0aa4f2 100644 --- a/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx +++ b/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx @@ -1,9 +1,12 @@ -import { Field } from "@kleros/ui-components-library"; import React, { useEffect, useState } from "react"; import styled from "styled-components"; + +import { useDebounce } from "react-use"; + +import { Field } from "@kleros/ui-components-library"; + import { useDisputeTemplateFromId } from "hooks/queries/useDisputeTemplateFromId"; import { isUndefined } from "utils/index"; -import { useDebounce } from "react-use"; const Container = styled.div` display: flex; diff --git a/web/src/pages/DisputeTemplateView/index.tsx b/web/src/pages/DisputeTemplateView/index.tsx index b3699fa43..be8f6bb7d 100644 --- a/web/src/pages/DisputeTemplateView/index.tsx +++ b/web/src/pages/DisputeTemplateView/index.tsx @@ -1,21 +1,28 @@ import React, { useEffect, useState } from "react"; import styled, { css } from "styled-components"; -import { useDebounce } from "react-use"; + import Skeleton from "react-loading-skeleton"; -import { Field } from "@kleros/ui-components-library"; +import { useDebounce } from "react-use"; +import { Mode } from "vanilla-jsoneditor"; + import { executeActions } from "@kleros/kleros-sdk/src/dataMappings/executeActions"; -import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate"; import { Answer, DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes"; +import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate"; +import { Field } from "@kleros/ui-components-library"; + import PolicyIcon from "svgs/icons/policy.svg"; + import { INVALID_DISPUTE_DATA_ERROR } from "consts/index"; import { useKlerosCoreAddress } from "hooks/useContractAddress"; import { getIpfsUrl } from "utils/getIpfsUrl"; -import ReactMarkdown from "components/ReactMarkdown"; -import JSONEditor from "components/JSONEditor"; -import { Mode } from "vanilla-jsoneditor"; + import { landscapeStyle } from "styles/landscapeStyle"; -import FetchFromIDInput from "./FetchFromIdInput"; + +import JSONEditor from "components/JSONEditor"; +import ReactMarkdown from "components/ReactMarkdown"; + import FetchDisputeRequestInput, { DisputeRequest } from "./FetchDisputeRequestInput"; +import FetchFromIDInput from "./FetchFromIdInput"; const Container = styled.div` height: auto; diff --git a/web/src/pages/GetPnk/Header.tsx b/web/src/pages/GetPnk/Header.tsx index 0f0bc087a..e3a18e3e7 100644 --- a/web/src/pages/GetPnk/Header.tsx +++ b/web/src/pages/GetPnk/Header.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import CloseIcon from "svgs/icons/close.svg"; import SettingsIcon from "svgs/menu-icons/settings.svg"; diff --git a/web/src/pages/GetPnk/Settings/index.tsx b/web/src/pages/GetPnk/Settings/index.tsx index bb924850d..85989a8eb 100644 --- a/web/src/pages/GetPnk/Settings/index.tsx +++ b/web/src/pages/GetPnk/Settings/index.tsx @@ -1,8 +1,10 @@ -import { Button } from "@kleros/ui-components-library"; import React from "react"; import styled from "styled-components"; + import GasIcon from "tsx:svgs/icons/gas.svg"; +import { Button } from "@kleros/ui-components-library"; + const Container = styled.div` display: flex; flex-direction: column; diff --git a/web/src/pages/GetPnk/StyledDropdown.tsx b/web/src/pages/GetPnk/StyledDropdown.tsx index 59a53b2dd..1284a1449 100644 --- a/web/src/pages/GetPnk/StyledDropdown.tsx +++ b/web/src/pages/GetPnk/StyledDropdown.tsx @@ -1,6 +1,7 @@ -import { DropdownSelect } from "@kleros/ui-components-library"; import styled from "styled-components"; +import { DropdownSelect } from "@kleros/ui-components-library"; + const StyledDropdown = styled(DropdownSelect)` button { border: none; diff --git a/web/src/pages/GetPnk/Swap/Cards/FromCard.tsx b/web/src/pages/GetPnk/Swap/Cards/FromCard.tsx index 6c9ba2076..3eaaaed7b 100644 --- a/web/src/pages/GetPnk/Swap/Cards/FromCard.tsx +++ b/web/src/pages/GetPnk/Swap/Cards/FromCard.tsx @@ -1,11 +1,15 @@ import React, { useState } from "react"; -import { Button, Card } from "@kleros/ui-components-library"; import styled from "styled-components"; -import ChainSelect from "../ChainSelect"; -import TokenSelect from "../TokenSelect"; + +import DownArrow from "tsx:svgs/icons/down-arrow.svg"; + +import { Button, Card } from "@kleros/ui-components-library"; + import { responsiveSize } from "styles/responsiveSize"; + +import ChainSelect from "../ChainSelect"; import NumberField from "../NumberInput"; -import DownArrow from "tsx:svgs/icons/down-arrow.svg"; +import TokenSelect from "../TokenSelect"; const Container = styled(Card)` width: 100%; diff --git a/web/src/pages/GetPnk/Swap/Cards/SwapDetails.tsx b/web/src/pages/GetPnk/Swap/Cards/SwapDetails.tsx index 5ed350991..0f98d4d50 100644 --- a/web/src/pages/GetPnk/Swap/Cards/SwapDetails.tsx +++ b/web/src/pages/GetPnk/Swap/Cards/SwapDetails.tsx @@ -1,10 +1,13 @@ import React from "react"; -import { Card } from "@kleros/ui-components-library"; import styled from "styled-components"; -import SpinnerIcon from "tsx:svgs/icons/spinner.svg"; + import ArrowIcon from "tsx:svgs/icons/arrow.svg"; -import GasIcon from "tsx:svgs/icons/gas.svg"; import ClockIcon from "tsx:svgs/icons/clock.svg"; +import GasIcon from "tsx:svgs/icons/gas.svg"; +import SpinnerIcon from "tsx:svgs/icons/spinner.svg"; + +import { Card } from "@kleros/ui-components-library"; + import { responsiveSize } from "styles/responsiveSize"; const Container = styled(Card)` diff --git a/web/src/pages/GetPnk/Swap/Cards/ToCard.tsx b/web/src/pages/GetPnk/Swap/Cards/ToCard.tsx index 67382dcbf..04e895914 100644 --- a/web/src/pages/GetPnk/Swap/Cards/ToCard.tsx +++ b/web/src/pages/GetPnk/Swap/Cards/ToCard.tsx @@ -1,9 +1,12 @@ import React, { useState } from "react"; -import { Card } from "@kleros/ui-components-library"; import styled from "styled-components"; + +import { Card } from "@kleros/ui-components-library"; + +import { responsiveSize } from "styles/responsiveSize"; + import ChainSelect from "../ChainSelect"; import TokenSelect from "../TokenSelect"; -import { responsiveSize } from "styles/responsiveSize"; const Container = styled(Card)` width: 100%; diff --git a/web/src/pages/GetPnk/Swap/ChainSelect.tsx b/web/src/pages/GetPnk/Swap/ChainSelect.tsx index 026b95e1e..d181f5f6f 100644 --- a/web/src/pages/GetPnk/Swap/ChainSelect.tsx +++ b/web/src/pages/GetPnk/Swap/ChainSelect.tsx @@ -1,9 +1,11 @@ import React from "react"; -import { arbitrum, arbitrumSepolia, gnosis, gnosisChiado, mainnet, polygon, polygonMumbai, sepolia } from "viem/chains"; -import EthIcon from "tsx:svgs/tokens/eth.svg"; + import ArbitrumIcon from "tsx:svgs/tokens/arbitrum.svg"; +import EthIcon from "tsx:svgs/tokens/eth.svg"; import GnosisIcon from "tsx:svgs/tokens/gnosis.svg"; import PolygonIcon from "tsx:svgs/tokens/polygon.svg"; +import { arbitrum, arbitrumSepolia, gnosis, gnosisChiado, mainnet, polygon, polygonMumbai, sepolia } from "viem/chains"; + import StyledDropdown from "../StyledDropdown"; const supportedChains = true diff --git a/web/src/pages/GetPnk/Swap/NumberInput.tsx b/web/src/pages/GetPnk/Swap/NumberInput.tsx index 0aa60294e..26583bf77 100644 --- a/web/src/pages/GetPnk/Swap/NumberInput.tsx +++ b/web/src/pages/GetPnk/Swap/NumberInput.tsx @@ -1,4 +1,5 @@ import styled from "styled-components"; + import { NumberInputField } from "components/NumberInputField"; const NumberField = styled(NumberInputField)` diff --git a/web/src/pages/GetPnk/Swap/TokenSelect.tsx b/web/src/pages/GetPnk/Swap/TokenSelect.tsx index de7a873c1..d093100ff 100644 --- a/web/src/pages/GetPnk/Swap/TokenSelect.tsx +++ b/web/src/pages/GetPnk/Swap/TokenSelect.tsx @@ -1,8 +1,10 @@ import React from "react"; + +import DaiIcon from "tsx:svgs/tokens/dai.svg"; import EthIcon from "tsx:svgs/tokens/eth.svg"; import PnkIcon from "tsx:svgs/tokens/pnk.svg"; import UsdcIcon from "tsx:svgs/tokens/usdc.svg"; -import DaiIcon from "tsx:svgs/tokens/dai.svg"; + import StyledDropdown from "../StyledDropdown"; // get these from the aggregator sdk we will use ? diff --git a/web/src/pages/GetPnk/Swap/index.tsx b/web/src/pages/GetPnk/Swap/index.tsx index d1415b539..dc6d3b209 100644 --- a/web/src/pages/GetPnk/Swap/index.tsx +++ b/web/src/pages/GetPnk/Swap/index.tsx @@ -1,13 +1,17 @@ import React, { useState } from "react"; import styled from "styled-components"; -import FromCard from "./Cards/FromCard"; -import ToCard from "./Cards/ToCard"; -import { EnsureChain } from "components/EnsureChain"; -import SwapDetails from "./Cards/SwapDetails"; + import { Button } from "@kleros/ui-components-library"; -import Popup, { PopupType } from "components/Popup"; + import { isProductionDeployment } from "consts/index"; +import { EnsureChain } from "components/EnsureChain"; +import Popup, { PopupType } from "components/Popup"; + +import FromCard from "./Cards/FromCard"; +import SwapDetails from "./Cards/SwapDetails"; +import ToCard from "./Cards/ToCard"; + const Container = styled.div` display: flex; flex-direction: column; diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx index 8e6dae864..8b00cb848 100644 --- a/web/src/pages/GetPnk/index.tsx +++ b/web/src/pages/GetPnk/index.tsx @@ -1,13 +1,18 @@ -import { Card } from "@kleros/ui-components-library"; import React from "react"; import styled from "styled-components"; + +import { useToggle } from "react-use"; + +import { Card } from "@kleros/ui-components-library"; + import { responsiveSize } from "styles/responsiveSize"; + +import ClaimPnkButton from "components/ClaimPnkButton"; import HeroImage from "components/HeroImage"; + import Header from "./Header"; -import Swap from "./Swap"; import Settings from "./Settings"; -import { useToggle } from "react-use"; -import ClaimPnkButton from "components/ClaimPnkButton"; +import Swap from "./Swap"; const Container = styled.div` width: 100%; diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx index aaf0ab380..58553aaec 100644 --- a/web/src/pages/Home/Community/index.tsx +++ b/web/src/pages/Home/Community/index.tsx @@ -1,11 +1,15 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Card } from "@kleros/ui-components-library"; -import { Element } from "./Element"; + import { section } from "consts/community-elements"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { Element } from "./Element"; + const Container = styled.div` margin-top: ${responsiveSize(44, 64)}; diff --git a/web/src/pages/Home/CourtOverview/Chart.tsx b/web/src/pages/Home/CourtOverview/Chart.tsx index c4a403284..56794e4ab 100644 --- a/web/src/pages/Home/CourtOverview/Chart.tsx +++ b/web/src/pages/Home/CourtOverview/Chart.tsx @@ -1,12 +1,18 @@ import React, { useState } from "react"; import styled from "styled-components"; -import TimeSeriesChart from "./TimeSeriesChart"; -import { DropdownSelect } from "@kleros/ui-components-library"; -import { StyledSkeleton } from "components/StyledSkeleton"; + import { formatUnits } from "viem"; + +import { DropdownSelect } from "@kleros/ui-components-library"; + import { useHomePageContext } from "hooks/useHomePageContext"; + import { responsiveSize } from "styles/responsiveSize"; +import { StyledSkeleton } from "components/StyledSkeleton"; + +import TimeSeriesChart from "./TimeSeriesChart"; + const Container = styled.div` margin-bottom: ${responsiveSize(32, 48)}; display: flex; diff --git a/web/src/pages/Home/CourtOverview/Header.tsx b/web/src/pages/Home/CourtOverview/Header.tsx index dddc02b68..d29858002 100644 --- a/web/src/pages/Home/CourtOverview/Header.tsx +++ b/web/src/pages/Home/CourtOverview/Header.tsx @@ -1,8 +1,12 @@ import React from "react"; import styled from "styled-components"; + +import { useNavigate } from "react-router-dom"; + import { Button } from "@kleros/ui-components-library"; + import Bookmark from "svgs/icons/bookmark.svg"; -import { useNavigate } from "react-router-dom"; + import { responsiveSize } from "styles/responsiveSize"; const StyledHeader = styled.div` diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx index 2aaa686f9..d7d7ecedb 100644 --- a/web/src/pages/Home/CourtOverview/Stats.tsx +++ b/web/src/pages/Home/CourtOverview/Stats.tsx @@ -1,22 +1,27 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Card } from "@kleros/ui-components-library"; -import StatDisplay, { IStatDisplay } from "components/StatDisplay"; -import { StyledSkeleton } from "components/StyledSkeleton"; -import PNKIcon from "svgs/icons/pnk.svg"; + import EthereumIcon from "svgs/icons/ethereum.svg"; +import BalanceIcon from "svgs/icons/law-balance.svg"; +import PNKIcon from "svgs/icons/pnk.svg"; import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg"; import JurorIcon from "svgs/icons/user.svg"; -import BalanceIcon from "svgs/icons/law-balance.svg"; -import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format"; -import { isUndefined } from "utils/index"; -import { calculateSubtextRender } from "utils/calculateSubtextRender"; + import { CoinIds } from "consts/coingecko"; -import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext"; import { useCoinPrice } from "hooks/useCoinPrice"; +import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext"; +import { calculateSubtextRender } from "utils/calculateSubtextRender"; +import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format"; +import { isUndefined } from "utils/index"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import StatDisplay, { IStatDisplay } from "components/StatDisplay"; +import { StyledSkeleton } from "components/StyledSkeleton"; + const StyledCard = styled(Card)` width: auto; height: fit-content; diff --git a/web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx b/web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx index 5a538d425..d6f6fe5d5 100644 --- a/web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx +++ b/web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx @@ -1,14 +1,7 @@ import React from "react"; import styled, { useTheme } from "styled-components"; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - PointElement, - LineElement, - TimeScale, - Tooltip, -} from "chart.js"; + +import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, TimeScale, Tooltip } from "chart.js"; import { Line } from "react-chartjs-2"; import "chartjs-adapter-moment"; @@ -17,14 +10,7 @@ const LineContainer = styled.div` margin-top: 16px; `; -ChartJS.register( - CategoryScale, - LinearScale, - PointElement, - LineElement, - TimeScale, - Tooltip -); +ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, TimeScale, Tooltip); interface ITimeSeriesChart { data: { x: number; y: number }[]; diff --git a/web/src/pages/Home/CourtOverview/index.tsx b/web/src/pages/Home/CourtOverview/index.tsx index 6eda162b3..cbb1a5d96 100644 --- a/web/src/pages/Home/CourtOverview/index.tsx +++ b/web/src/pages/Home/CourtOverview/index.tsx @@ -1,8 +1,9 @@ import React from "react"; import styled from "styled-components"; -import Stats from "./Stats"; + import Chart from "./Chart"; import Header from "./Header"; +import Stats from "./Stats"; const Container = styled.div` width: 100%; diff --git a/web/src/pages/Home/TopJurors/Header/Coherency.tsx b/web/src/pages/Home/TopJurors/Header/Coherency.tsx index 2ad5bce5c..ee08bb904 100644 --- a/web/src/pages/Home/TopJurors/Header/Coherency.tsx +++ b/web/src/pages/Home/TopJurors/Header/Coherency.tsx @@ -1,7 +1,10 @@ import React from "react"; import styled, { css } from "styled-components"; -import { BREAKPOINT_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; + import { useWindowSize } from "react-use"; + +import { BREAKPOINT_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; + import WithHelpTooltip from "components/WithHelpTooltip"; const Container = styled.div` diff --git a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx index f2102ba20..dfe0d040e 100644 --- a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx +++ b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx @@ -1,12 +1,16 @@ import React from "react"; -import { useToggle } from "react-use"; import styled, { css } from "styled-components"; + +import { useToggle } from "react-use"; + import { landscapeStyle } from "styles/landscapeStyle"; -import Rewards from "./Rewards"; -import Coherency from "./Coherency"; +import { responsiveSize } from "styles/responsiveSize"; + import HowItWorks from "components/HowItWorks"; import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; -import { responsiveSize } from "styles/responsiveSize"; + +import Coherency from "./Coherency"; +import Rewards from "./Rewards"; const Container = styled.div` display: none; diff --git a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx index 67cd7b3a9..db98f16e0 100644 --- a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx +++ b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx @@ -1,7 +1,10 @@ import React from "react"; -import { useToggle } from "react-use"; import styled, { css } from "styled-components"; + +import { useToggle } from "react-use"; + import { landscapeStyle } from "styles/landscapeStyle"; + import HowItWorks from "components/HowItWorks"; import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; diff --git a/web/src/pages/Home/TopJurors/Header/Rewards.tsx b/web/src/pages/Home/TopJurors/Header/Rewards.tsx index 9a9deb147..5365c3c7b 100644 --- a/web/src/pages/Home/TopJurors/Header/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled, { css } from "styled-components"; + import { landscapeStyle } from "styles/landscapeStyle"; + import WithHelpTooltip from "components/WithHelpTooltip"; const Container = styled.div` diff --git a/web/src/pages/Home/TopJurors/Header/index.tsx b/web/src/pages/Home/TopJurors/Header/index.tsx index cd703ef67..cdb31388f 100644 --- a/web/src/pages/Home/TopJurors/Header/index.tsx +++ b/web/src/pages/Home/TopJurors/Header/index.tsx @@ -1,6 +1,7 @@ import React from "react"; -import { MobileHeader } from "./MobileHeader"; + import { DesktopHeader } from "./DesktopHeader"; +import { MobileHeader } from "./MobileHeader"; const Header: React.FC = () => { return ( diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx index 5c560a0cb..12b39f4c2 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx @@ -1,12 +1,14 @@ import React from "react"; -import { landscapeStyle } from "styles/landscapeStyle"; import styled, { css } from "styled-components"; -import Rank from "./Rank"; -import JurorTitle from "./JurorTitle"; -import Rewards from "./Rewards"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import Coherency from "./Coherency"; import JurorLevel from "./JurorLevel"; -import { responsiveSize } from "styles/responsiveSize"; +import JurorTitle from "./JurorTitle"; +import Rank from "./Rank"; +import Rewards from "./Rewards"; const Container = styled.div` display: none; diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx index 74047484c..3becac4c0 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx @@ -1,8 +1,11 @@ import React from "react"; import styled, { css } from "styled-components"; + +import { getUserLevelData } from "utils/userLevelCalculation"; + import { landscapeStyle } from "styles/landscapeStyle"; + import PixelArt from "pages/Dashboard/JurorInfo/PixelArt"; -import { getUserLevelData } from "utils/userLevelCalculation"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx index 3e8831375..e4b52af2b 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; + import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay"; const Container = styled.div` diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx index ad9ec48e0..54f0be3e1 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx @@ -1,13 +1,16 @@ import React from "react"; import styled, { css } from "styled-components"; + import { landscapeStyle } from "styles/landscapeStyle"; + +import HeaderCoherency from "../Header/Coherency"; +import HeaderRewards from "../Header/Rewards"; + import Coherency from "./Coherency"; import JurorLevel from "./JurorLevel"; import JurorTitle from "./JurorTitle"; import Rank from "./Rank"; import Rewards from "./Rewards"; -import HeaderRewards from "../Header/Rewards"; -import HeaderCoherency from "../Header/Coherency"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx index 3c423c0c4..a93b6f23b 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled, { css } from "styled-components"; + import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx index 7339436fb..ee114faf7 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx @@ -1,10 +1,14 @@ import React from "react"; import styled, { css } from "styled-components"; -import { getFormattedRewards } from "utils/jurorRewardConfig"; + import EthIcon from "assets/svgs/icons/eth.svg"; import PnkIcon from "assets/svgs/icons/kleros.svg"; + import { useUserQuery } from "hooks/queries/useUser"; +import { getFormattedRewards } from "utils/jurorRewardConfig"; + import { landscapeStyle } from "styles/landscapeStyle"; + import NumberDisplay from "components/NumberDisplay"; const Container = styled.div` diff --git a/web/src/pages/Home/TopJurors/JurorCard/index.tsx b/web/src/pages/Home/TopJurors/JurorCard/index.tsx index 2b2dfe6a2..9ae084dbf 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/index.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/index.tsx @@ -1,4 +1,5 @@ import React from "react"; + import DesktopCard from "./DesktopCard"; import MobileCard from "./MobileCard"; diff --git a/web/src/pages/Home/TopJurors/index.tsx b/web/src/pages/Home/TopJurors/index.tsx index ef41231da..45daaccb0 100644 --- a/web/src/pages/Home/TopJurors/index.tsx +++ b/web/src/pages/Home/TopJurors/index.tsx @@ -1,13 +1,18 @@ import React from "react"; import styled, { css } from "styled-components"; -import { SkeletonDisputeListItem } from "components/StyledSkeleton"; -import Header from "./Header"; -import JurorCard from "./JurorCard"; + import { isUndefined } from "utils/index"; + import { useTopUsersByCoherenceScore } from "queries/useTopUsersByCoherenceScore"; + import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { SkeletonDisputeListItem } from "components/StyledSkeleton"; + +import Header from "./Header"; +import JurorCard from "./JurorCard"; + const Container = styled.div` margin-top: ${responsiveSize(64, 80)}; `; diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index e0b578e6e..70e69d75d 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -1,14 +1,18 @@ import React from "react"; import styled from "styled-components"; -import LatestCases from "components/LatestCases"; -import CourtOverview from "./CourtOverview"; -import Community from "./Community"; -import HeroImage from "components/HeroImage"; + import { HomePageProvider } from "hooks/useHomePageContext"; import { getOneYearAgoTimestamp } from "utils/date"; -import TopJurors from "./TopJurors"; + import { responsiveSize } from "styles/responsiveSize"; +import HeroImage from "components/HeroImage"; +import LatestCases from "components/LatestCases"; + +import Community from "./Community"; +import CourtOverview from "./CourtOverview"; +import TopJurors from "./TopJurors"; + const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; diff --git a/web/src/pages/Resolver/Briefing/Description.tsx b/web/src/pages/Resolver/Briefing/Description.tsx index d650098b4..0c412d649 100644 --- a/web/src/pages/Resolver/Briefing/Description.tsx +++ b/web/src/pages/Resolver/Briefing/Description.tsx @@ -1,11 +1,16 @@ import React from "react"; -import Header from "pages/Resolver/Header"; import styled, { css } from "styled-components"; + import { Textarea } from "@kleros/ui-components-library"; + +import { useNewDisputeContext } from "context/NewDisputeContext"; + import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; + +import Header from "pages/Resolver/Header"; + import NavigationButtons from "../NavigationButtons"; -import { useNewDisputeContext } from "context/NewDisputeContext"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Resolver/Briefing/Title.tsx b/web/src/pages/Resolver/Briefing/Title.tsx index 454e998c9..1ade32aba 100644 --- a/web/src/pages/Resolver/Briefing/Title.tsx +++ b/web/src/pages/Resolver/Briefing/Title.tsx @@ -1,11 +1,16 @@ import React from "react"; -import Header from "pages/Resolver/Header"; import styled, { css } from "styled-components"; + import { Field } from "@kleros/ui-components-library"; + +import { useNewDisputeContext } from "context/NewDisputeContext"; + import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; + +import Header from "pages/Resolver/Header"; + import NavigationButtons from "../NavigationButtons"; -import { useNewDisputeContext } from "context/NewDisputeContext"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Resolver/Header.tsx b/web/src/pages/Resolver/Header.tsx index 005bb47b8..d7cdbe8e1 100644 --- a/web/src/pages/Resolver/Header.tsx +++ b/web/src/pages/Resolver/Header.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled, { css } from "styled-components"; + import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.h1` diff --git a/web/src/pages/Resolver/NavigationButtons/NextButton.tsx b/web/src/pages/Resolver/NavigationButtons/NextButton.tsx index db247770b..80e08fbed 100644 --- a/web/src/pages/Resolver/NavigationButtons/NextButton.tsx +++ b/web/src/pages/Resolver/NavigationButtons/NextButton.tsx @@ -1,6 +1,9 @@ import React from "react"; -import { Button } from "@kleros/ui-components-library"; + import { useLocation, useNavigate } from "react-router-dom"; + +import { Button } from "@kleros/ui-components-library"; + import { useNewDisputeContext } from "context/NewDisputeContext"; interface INextButton { diff --git a/web/src/pages/Resolver/NavigationButtons/PreviousButton.tsx b/web/src/pages/Resolver/NavigationButtons/PreviousButton.tsx index 432024461..b51aa6d36 100644 --- a/web/src/pages/Resolver/NavigationButtons/PreviousButton.tsx +++ b/web/src/pages/Resolver/NavigationButtons/PreviousButton.tsx @@ -1,8 +1,10 @@ import React from "react"; import styled from "styled-components"; -import { Button } from "@kleros/ui-components-library"; + import { useNavigate } from "react-router-dom"; +import { Button } from "@kleros/ui-components-library"; + const StyledButton = styled(Button)<{ prevRoute: string }>` display: ${({ prevRoute }) => (prevRoute === "" ? "none" : "flex")}; `; diff --git a/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx b/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx index 77217aa20..82f49b43d 100644 --- a/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx +++ b/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx @@ -1,19 +1,24 @@ import React, { useMemo, useState } from "react"; import styled from "styled-components"; + +import { Log, decodeEventLog, parseAbi } from "viem"; +import { usePublicClient } from "wagmi"; + import { Button } from "@kleros/ui-components-library"; + +import DisputeIcon from "assets/svgs/icons/dispute.svg"; + import { IDisputeTemplate, useNewDisputeContext } from "context/NewDisputeContext"; -import { wrapWithToast } from "utils/wrapWithToast"; import { useDisputeResolverCreateDisputeForTemplate, usePrepareDisputeResolverCreateDisputeForTemplate, } from "hooks/contracts/generatedProvider"; +import { isUndefined } from "utils/index"; import { prepareArbitratorExtradata } from "utils/prepareArbitratorExtradata"; -import { usePublicClient } from "wagmi"; -import Popup, { PopupType } from "components/Popup"; -import DisputeIcon from "assets/svgs/icons/dispute.svg"; -import { Log, decodeEventLog, parseAbi } from "viem"; +import { wrapWithToast } from "utils/wrapWithToast"; + import { EnsureChain } from "components/EnsureChain"; -import { isUndefined } from "utils/index"; +import Popup, { PopupType } from "components/Popup"; const StyledButton = styled(Button)``; diff --git a/web/src/pages/Resolver/NavigationButtons/index.tsx b/web/src/pages/Resolver/NavigationButtons/index.tsx index 53a74b91b..2133ec0fa 100644 --- a/web/src/pages/Resolver/NavigationButtons/index.tsx +++ b/web/src/pages/Resolver/NavigationButtons/index.tsx @@ -1,8 +1,10 @@ import React from "react"; import styled from "styled-components"; -import PreviousButton from "./PreviousButton"; -import NextButton from "./NextButton"; + import { responsiveSize } from "styles/responsiveSize"; + +import NextButton from "./NextButton"; +import PreviousButton from "./PreviousButton"; import SubmitDisputeButton from "./SubmitDisputeButton"; const Container = styled.div` diff --git a/web/src/pages/Resolver/Parameters/Category.tsx b/web/src/pages/Resolver/Parameters/Category.tsx index ee161eda8..f7effd190 100644 --- a/web/src/pages/Resolver/Parameters/Category.tsx +++ b/web/src/pages/Resolver/Parameters/Category.tsx @@ -1,11 +1,16 @@ import React from "react"; -import Header from "pages/Resolver/Header"; import styled, { css } from "styled-components"; + import { Field } from "@kleros/ui-components-library"; + +import { useNewDisputeContext } from "context/NewDisputeContext"; + import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; + +import Header from "pages/Resolver/Header"; + import NavigationButtons from "../NavigationButtons"; -import { useNewDisputeContext } from "context/NewDisputeContext"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Resolver/Parameters/Court.tsx b/web/src/pages/Resolver/Parameters/Court.tsx index 294428ee5..078f92558 100644 --- a/web/src/pages/Resolver/Parameters/Court.tsx +++ b/web/src/pages/Resolver/Parameters/Court.tsx @@ -1,14 +1,19 @@ import React, { useMemo } from "react"; -import Header from "pages/Resolver/Header"; import styled, { css } from "styled-components"; + import { AlertMessage, DropdownCascader } from "@kleros/ui-components-library"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; -import NavigationButtons from "../NavigationButtons"; + import { useNewDisputeContext } from "context/NewDisputeContext"; import { rootCourtToItems, useCourtTree } from "hooks/queries/useCourtTree"; import { isUndefined } from "utils/index"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import { StyledSkeleton } from "components/StyledSkeleton"; +import Header from "pages/Resolver/Header"; + +import NavigationButtons from "../NavigationButtons"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Resolver/Parameters/Jurors.tsx b/web/src/pages/Resolver/Parameters/Jurors.tsx index f34cf8281..c24107492 100644 --- a/web/src/pages/Resolver/Parameters/Jurors.tsx +++ b/web/src/pages/Resolver/Parameters/Jurors.tsx @@ -1,15 +1,21 @@ import React, { useEffect } from "react"; -import Header from "pages/Resolver/Header"; import styled from "styled-components"; + import { DisplaySmall, Field } from "@kleros/ui-components-library"; -import NavigationButtons from "../NavigationButtons"; -import { responsiveSize } from "styles/responsiveSize"; + +import ETH from "svgs/icons/eth.svg"; + import { useNewDisputeContext } from "context/NewDisputeContext"; import { useKlerosCoreArbitrationCost } from "hooks/contracts/generatedProvider"; -import { prepareArbitratorExtradata } from "utils/prepareArbitratorExtradata"; import { formatETH } from "utils/format"; -import ETH from "svgs/icons/eth.svg"; import { isUndefined } from "utils/index"; +import { prepareArbitratorExtradata } from "utils/prepareArbitratorExtradata"; + +import { responsiveSize } from "styles/responsiveSize"; + +import Header from "pages/Resolver/Header"; + +import NavigationButtons from "../NavigationButtons"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx b/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx index 4e42c70a6..7e465191f 100644 --- a/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx +++ b/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx @@ -1,11 +1,14 @@ import React, { useRef } from "react"; import styled, { css } from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { Alias, useNewDisputeContext } from "context/NewDisputeContext"; -import LabeledInput from "components/LabeledInput"; -import { validateAddress } from "utils/validateAddressOrEns"; import { isUndefined } from "utils/index"; +import { validateAddress } from "utils/validateAddressOrEns"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + +import LabeledInput from "components/LabeledInput"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Resolver/Parameters/NotablePersons/index.tsx b/web/src/pages/Resolver/Parameters/NotablePersons/index.tsx index a4092f3a3..bc8f43f2c 100644 --- a/web/src/pages/Resolver/Parameters/NotablePersons/index.tsx +++ b/web/src/pages/Resolver/Parameters/NotablePersons/index.tsx @@ -1,10 +1,14 @@ import React from "react"; -import Header from "pages/Resolver/Header"; import styled from "styled-components"; -import NavigationButtons from "../../NavigationButtons"; -import PlusMinusField from "components/PlusMinusField"; + import { useNewDisputeContext } from "context/NewDisputeContext"; import { isUndefined } from "utils/index"; + +import PlusMinusField from "components/PlusMinusField"; +import Header from "pages/Resolver/Header"; + +import NavigationButtons from "../../NavigationButtons"; + import PersonFields from "./PersonFields"; const Container = styled.div` diff --git a/web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx b/web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx index 24197dfb7..0509c4da7 100644 --- a/web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx +++ b/web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx @@ -1,10 +1,13 @@ import React from "react"; import styled, { css } from "styled-components"; + +import { Answer, useNewDisputeContext } from "context/NewDisputeContext"; + import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; -import PlusMinusField from "components/PlusMinusField"; + import LabeledInput from "components/LabeledInput"; -import { Answer, useNewDisputeContext } from "context/NewDisputeContext"; +import PlusMinusField from "components/PlusMinusField"; const OptionsContainer = styled.div` display: flex; diff --git a/web/src/pages/Resolver/Parameters/VotingOptions/index.tsx b/web/src/pages/Resolver/Parameters/VotingOptions/index.tsx index d04edf8f5..70b923096 100644 --- a/web/src/pages/Resolver/Parameters/VotingOptions/index.tsx +++ b/web/src/pages/Resolver/Parameters/VotingOptions/index.tsx @@ -1,12 +1,18 @@ import React from "react"; -import Header from "pages/Resolver/Header"; import styled, { css } from "styled-components"; + +import { AlertMessage } from "@kleros/ui-components-library"; + +import { useNewDisputeContext } from "context/NewDisputeContext"; + import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; -import { AlertMessage } from "@kleros/ui-components-library"; + import LabeledInput from "components/LabeledInput"; -import { useNewDisputeContext } from "context/NewDisputeContext"; +import Header from "pages/Resolver/Header"; + import NavigationButtons from "../../NavigationButtons"; + import OptionsFields from "./OptionsFields"; const Container = styled.div` diff --git a/web/src/pages/Resolver/Policy/index.tsx b/web/src/pages/Resolver/Policy/index.tsx index 84fba03d3..ffe47aa37 100644 --- a/web/src/pages/Resolver/Policy/index.tsx +++ b/web/src/pages/Resolver/Policy/index.tsx @@ -1,14 +1,20 @@ import React from "react"; -import Header from "pages/Resolver/Header"; import styled, { css } from "styled-components"; -import NavigationButtons from "../NavigationButtons"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; + +import { toast } from "react-toastify"; + import { FileUploader } from "@kleros/ui-components-library"; + import { useNewDisputeContext } from "context/NewDisputeContext"; import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS"; import { OPTIONS as toastOptions } from "utils/wrapWithToast"; -import { toast } from "react-toastify"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + +import Header from "pages/Resolver/Header"; + +import NavigationButtons from "../NavigationButtons"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Resolver/Preview/index.tsx b/web/src/pages/Resolver/Preview/index.tsx index 0b664236e..aa1f8f39e 100644 --- a/web/src/pages/Resolver/Preview/index.tsx +++ b/web/src/pages/Resolver/Preview/index.tsx @@ -1,14 +1,20 @@ import React from "react"; import styled, { css } from "styled-components"; + +import { Card } from "@kleros/ui-components-library"; + +import { useNewDisputeContext } from "context/NewDisputeContext"; + import { useCourtPolicy } from "queries/useCourtPolicy"; -import DisputeInfo from "components/DisputeView/DisputeInfo"; + +import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; + import { DisputeContext } from "components/DisputePreview/DisputeContext"; import { Policies } from "components/DisputePreview/Policies"; -import { Card } from "@kleros/ui-components-library"; -import { landscapeStyle } from "styles/landscapeStyle"; +import DisputeInfo from "components/DisputeView/DisputeInfo"; + import NavigationButtons from "../NavigationButtons"; -import { useNewDisputeContext } from "context/NewDisputeContext"; const Container = styled.div` width: 100%; diff --git a/web/src/pages/Resolver/Timeline.tsx b/web/src/pages/Resolver/Timeline.tsx index 383338b43..ee6db2c3c 100644 --- a/web/src/pages/Resolver/Timeline.tsx +++ b/web/src/pages/Resolver/Timeline.tsx @@ -1,8 +1,11 @@ import React from "react"; import styled, { css } from "styled-components"; + +import { useLocation } from "react-router-dom"; + import { Steps } from "@kleros/ui-components-library"; + import { landscapeStyle } from "styles/landscapeStyle"; -import { useLocation } from "react-router-dom"; const StyledSteps = styled(Steps)` display: none; diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx index 99e651d10..bc8cd6e98 100644 --- a/web/src/pages/Resolver/index.tsx +++ b/web/src/pages/Resolver/index.tsx @@ -1,21 +1,25 @@ import React from "react"; -import { Navigate, Route, Routes, useLocation } from "react-router-dom"; import styled, { css } from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; + +import { Navigate, Route, Routes, useLocation } from "react-router-dom"; import { useAccount } from "wagmi"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import ConnectWallet from "components/ConnectWallet"; -import Timeline from "./Timeline"; import HeroImage from "components/HeroImage"; -import Title from "./Briefing/Title"; -import { landscapeStyle } from "styles/landscapeStyle"; + import Description from "./Briefing/Description"; -import Court from "./Parameters/Court"; +import Title from "./Briefing/Title"; import Category from "./Parameters/Category"; +import Court from "./Parameters/Court"; import Jurors from "./Parameters/Jurors"; -import VotingOptions from "./Parameters/VotingOptions"; import NotablePersons from "./Parameters/NotablePersons"; +import VotingOptions from "./Parameters/VotingOptions"; import Policy from "./Policy"; import Preview from "./Preview"; +import Timeline from "./Timeline"; const Container = styled.div` display: flex; diff --git a/web/src/utils/calculateSubtextRender.tsx b/web/src/utils/calculateSubtextRender.tsx index 3b0216820..556a197c1 100644 --- a/web/src/utils/calculateSubtextRender.tsx +++ b/web/src/utils/calculateSubtextRender.tsx @@ -1,9 +1,12 @@ import React from "react"; -import { StyledSkeleton } from "components/StyledSkeleton"; -import { isUndefined } from "utils/index"; + import { HomePageQuery } from "hooks/useHomePageContext"; +import { isUndefined } from "utils/index"; + import { CourtDetailsQuery } from "queries/useCourtDetails"; +import { StyledSkeleton } from "components/StyledSkeleton"; + export const calculateSubtextRender = ( countersOrCourtData: CourtDetailsQuery["court"] | HomePageQuery["counters"], getSubtext: ((data: any, coinPrice: number) => string) | undefined, diff --git a/web/src/utils/debounceErrorToast.ts b/web/src/utils/debounceErrorToast.ts index ca69b8032..9762c14c2 100644 --- a/web/src/utils/debounceErrorToast.ts +++ b/web/src/utils/debounceErrorToast.ts @@ -1,4 +1,5 @@ import { toast } from "react-toastify"; + import { OPTIONS as toastOptions } from "utils/wrapWithToast"; let timeoutId: NodeJS.Timeout; diff --git a/web/src/utils/format.ts b/web/src/utils/format.ts index 5b07d7f46..9523ab84c 100644 --- a/web/src/utils/format.ts +++ b/web/src/utils/format.ts @@ -1,4 +1,5 @@ import { formatEther, formatUnits } from "viem"; + import { commify } from "./commify"; export const roundNumberDown = (value: number, fractionDigits = 0) => { diff --git a/web/src/utils/getDisputeRequestParamsFromTxn.ts b/web/src/utils/getDisputeRequestParamsFromTxn.ts index ba39b4bc1..b808fc1af 100644 --- a/web/src/utils/getDisputeRequestParamsFromTxn.ts +++ b/web/src/utils/getDisputeRequestParamsFromTxn.ts @@ -1,6 +1,8 @@ import { GetTransactionReceiptReturnType, decodeEventLog, getEventSelector } from "viem"; import { getPublicClient } from "wagmi/dist/actions"; + import { iArbitrableV2ABI } from "hooks/contracts/generated"; + import { isUndefined } from "."; export const getDisputeRequestParamsFromTxn = async (hash: `0x${string}`, chainId: number) => { diff --git a/web/src/utils/getLocalRounds.ts b/web/src/utils/getLocalRounds.ts index 547d7cc80..6113f2bc9 100644 --- a/web/src/utils/getLocalRounds.ts +++ b/web/src/utils/getLocalRounds.ts @@ -1,5 +1,5 @@ -import { VotingHistoryQuery } from "queries/useVotingHistory"; import { ClassicAppealQuery } from "queries/useClassicAppealQuery"; +import { VotingHistoryQuery } from "queries/useVotingHistory"; type IVotingHistoryLocalRounds = NonNullable< NonNullable["disputeKitDispute"] diff --git a/web/src/utils/isLastRound.ts b/web/src/utils/isLastRound.ts index 4e5593908..f03a6b196 100644 --- a/web/src/utils/isLastRound.ts +++ b/web/src/utils/isLastRound.ts @@ -1,4 +1,5 @@ import { formatEther } from "viem"; + import { isUndefined } from "utils/index"; export const isLastRound = (appealCost?: bigint) => { diff --git a/web/src/utils/jurorRewardConfig.ts b/web/src/utils/jurorRewardConfig.ts index 1f2d8dca5..ed176f959 100644 --- a/web/src/utils/jurorRewardConfig.ts +++ b/web/src/utils/jurorRewardConfig.ts @@ -1,7 +1,9 @@ import { formatUnits, formatEther } from "viem"; + +import { CoinIds } from "consts/coingecko"; import { isUndefined } from "utils/index"; + import { UserQuery } from "queries/useUser"; -import { CoinIds } from "consts/coingecko"; export interface IReward { token: "ETH" | "PNK"; diff --git a/web/src/utils/sentry.ts b/web/src/utils/sentry.ts index bd384d67d..0646cc3e5 100644 --- a/web/src/utils/sentry.ts +++ b/web/src/utils/sentry.ts @@ -1,6 +1,8 @@ import React from "react"; + import * as Sentry from "@sentry/react"; import { Routes, createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from "react-router-dom"; + import { GIT_DIRTY, GIT_HASH, RELEASE_VERSION } from "consts/index"; Sentry.init({ diff --git a/web/src/utils/uploadFormDataToIPFS.ts b/web/src/utils/uploadFormDataToIPFS.ts index c9de6459e..0a2eb73e0 100644 --- a/web/src/utils/uploadFormDataToIPFS.ts +++ b/web/src/utils/uploadFormDataToIPFS.ts @@ -1,4 +1,5 @@ import { toast } from "react-toastify"; + import { OPTIONS } from "utils/wrapWithToast"; export function uploadFormDataToIPFS(formData: FormData, operation: string = "evidence"): Promise { diff --git a/web/src/utils/uploadSettingsToSupabase.ts b/web/src/utils/uploadSettingsToSupabase.ts index 7566d3227..bd0a22c9f 100644 --- a/web/src/utils/uploadSettingsToSupabase.ts +++ b/web/src/utils/uploadSettingsToSupabase.ts @@ -1,4 +1,5 @@ import { toast } from "react-toastify"; + import { OPTIONS } from "utils/wrapWithToast"; type SettingsToSupabaseData = { diff --git a/web/src/utils/uri.ts b/web/src/utils/uri.ts index 659928e2d..e6a8b9220 100644 --- a/web/src/utils/uri.ts +++ b/web/src/utils/uri.ts @@ -1,4 +1,5 @@ import { useLocation } from "react-router-dom"; + import { Dispute_Filter } from "src/graphql/graphql"; export const encodeURIFilter = (filter: Dispute_Filter): string => { diff --git a/web/wagmi.config.ts b/web/wagmi.config.ts index 043440401..36cde0272 100644 --- a/web/wagmi.config.ts +++ b/web/wagmi.config.ts @@ -1,12 +1,14 @@ -import { type Config, type ContractConfig, defineConfig } from "@wagmi/cli"; -import { react, actions } from "@wagmi/cli/plugins"; import { readdir, readFile } from "fs/promises"; import { parse, join } from "path"; -import { Abi } from "viem"; + import { Chain } from "@wagmi/chains"; +import { type Config, type ContractConfig, defineConfig } from "@wagmi/cli"; +import { react, actions } from "@wagmi/cli/plugins"; import dotenv from "dotenv"; -import IHomeGateway from "@kleros/kleros-v2-contracts/artifacts/src/gateway/interfaces/IHomeGateway.sol/IHomeGateway.json" assert { type: "json" }; +import { Abi } from "viem"; + import IArbitrableV2 from "@kleros/kleros-v2-contracts/artifacts/src/arbitration/interfaces/IArbitrableV2.sol/IArbitrableV2.json" assert { type: "json" }; +import IHomeGateway from "@kleros/kleros-v2-contracts/artifacts/src/gateway/interfaces/IHomeGateway.sol/IHomeGateway.json" assert { type: "json" }; dotenv.config();