From 1b13c1e7f1f2e6b0b48379f4a4e73fc1e9103e7f Mon Sep 17 00:00:00 2001 From: kirill Date: Thu, 8 May 2025 12:21:45 +0300 Subject: [PATCH 01/24] feat: add kv store table, show transaction history for operator; cleanup --- .../dashboard/client/src/assets/react.svg | 1 - .../src/assets/styles/_breadcrumbs.scss | 11 -- .../client/src/assets/styles/main.scss | 1 - .../components/Breadcrumbs/Breadcrumbs.tsx | 31 ++-- .../src/components/SectionWrapper/index.tsx | 21 +++ packages/apps/dashboard/client/src/main.tsx | 2 +- .../client/src/pages/Home/HMTPrice.tsx | 11 +- .../client/src/pages/Home/Holders.tsx | 8 +- .../EscrowAddress/EscrowAddress.tsx | 44 ++--- .../EscrowAddress/HMTBalance.tsx | 12 +- .../src/pages/SearchResults/KVStore/index.tsx | 66 +++++++ .../SearchResults/RoleDetails/RoleDetails.tsx | 165 +++--------------- .../RoleDetailsEscrowsTable.tsx | 141 ++++++--------- .../src/pages/SearchResults/SearchResults.tsx | 54 +++--- .../pages/SearchResults/StakeInfo/index.tsx | 71 ++++++++ .../WalletAddress/WalletAddress.tsx | 67 +++---- .../WalletAddressTransactionsTable.tsx | 30 ++-- .../client/src/services/api-paths.ts | 3 + .../client/src/services/api/use-hmt-price.tsx | 2 +- .../src/services/api/use-kvstore-data.tsx | 36 ++++ 20 files changed, 396 insertions(+), 381 deletions(-) delete mode 100644 packages/apps/dashboard/client/src/assets/react.svg delete mode 100644 packages/apps/dashboard/client/src/assets/styles/_breadcrumbs.scss create mode 100644 packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx create mode 100644 packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx create mode 100644 packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx create mode 100644 packages/apps/dashboard/client/src/services/api/use-kvstore-data.tsx diff --git a/packages/apps/dashboard/client/src/assets/react.svg b/packages/apps/dashboard/client/src/assets/react.svg deleted file mode 100644 index 6c87de9bb3..0000000000 --- a/packages/apps/dashboard/client/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/apps/dashboard/client/src/assets/styles/_breadcrumbs.scss b/packages/apps/dashboard/client/src/assets/styles/_breadcrumbs.scss deleted file mode 100644 index 3d21ae1cb6..0000000000 --- a/packages/apps/dashboard/client/src/assets/styles/_breadcrumbs.scss +++ /dev/null @@ -1,11 +0,0 @@ -.breadcrumbs{ - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 62px; - - @media(max-width: 1100px) { - margin-bottom: 24px; - } - -} diff --git a/packages/apps/dashboard/client/src/assets/styles/main.scss b/packages/apps/dashboard/client/src/assets/styles/main.scss index e1848c1a11..2be6414a1a 100644 --- a/packages/apps/dashboard/client/src/assets/styles/main.scss +++ b/packages/apps/dashboard/client/src/assets/styles/main.scss @@ -5,6 +5,5 @@ @import 'home-page'; @import 'search'; @import 'shadow-icon'; -@import 'breadcrumbs'; @import 'nothing-found'; @import "graph-swipper"; diff --git a/packages/apps/dashboard/client/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/apps/dashboard/client/src/components/Breadcrumbs/Breadcrumbs.tsx index 18bb584207..de76c85be6 100644 --- a/packages/apps/dashboard/client/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/apps/dashboard/client/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -1,28 +1,29 @@ import { FC } from 'react'; + +import { Link as RouterLink } from 'react-router-dom'; +import Link from '@mui/material/Link'; +import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; + import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; -import { useNavigate } from 'react-router-dom'; const Breadcrumbs: FC<{ title?: string }> = ({ title }) => { - const navigate = useNavigate(); return ( -
- { - navigate('/'); - }} - component="span" - fontSize={16} - sx={{ textDecoration: 'unset', cursor: 'pointer' }} + + Dashboard - + - - {title} - -
+ {title} + ); }; diff --git a/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx b/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx new file mode 100644 index 0000000000..446c00bcf8 --- /dev/null +++ b/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx @@ -0,0 +1,21 @@ +import { FC, PropsWithChildren } from 'react'; + +import Card from '@mui/material/Card'; + +const SectionWrapper: FC = ({ children }) => { + return ( + + {children} + + ); +}; + +export default SectionWrapper; diff --git a/packages/apps/dashboard/client/src/main.tsx b/packages/apps/dashboard/client/src/main.tsx index 6d62a8b395..6ede097359 100644 --- a/packages/apps/dashboard/client/src/main.tsx +++ b/packages/apps/dashboard/client/src/main.tsx @@ -11,7 +11,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient({ defaultOptions: { mutations: { retry: 0 }, - queries: { retry: 0 }, + queries: { retry: 0, refetchOnWindowFocus: false }, }, }); diff --git a/packages/apps/dashboard/client/src/pages/Home/HMTPrice.tsx b/packages/apps/dashboard/client/src/pages/Home/HMTPrice.tsx index 20b9474c58..e01e260a66 100644 --- a/packages/apps/dashboard/client/src/pages/Home/HMTPrice.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/HMTPrice.tsx @@ -1,17 +1,18 @@ -import { useHMTPrice } from '../../services/api/use-hmt-price'; import Typography from '@mui/material/Typography'; +import { useHMTPrice } from '../../services/api/use-hmt-price'; + export function HMTPrice() { - const { data, status } = useHMTPrice(); + const { data, isError, isPending, isSuccess } = useHMTPrice(); return (
HMT Price
- {status === 'success' && `$${data.hmtPrice}`} - {status === 'pending' && '...'} - {status === 'error' && 'No data'} + {isSuccess && `$${data}`} + {isPending && '...'} + {isError && 'No data'}
); diff --git a/packages/apps/dashboard/client/src/pages/Home/Holders.tsx b/packages/apps/dashboard/client/src/pages/Home/Holders.tsx index d72698569e..671bf3c1e8 100644 --- a/packages/apps/dashboard/client/src/pages/Home/Holders.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/Holders.tsx @@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography'; import { useGeneralStats } from '@services/api/use-general-stats'; export function Holders() { - const { data, status } = useGeneralStats(); + const { data, isSuccess, isPending, isError } = useGeneralStats(); return (
@@ -11,9 +11,9 @@ export function Holders() { Holders
- {status === 'success' && } - {status === 'pending' && '...'} - {status === 'error' && 'No data'} + {isSuccess && } + {isPending && '...'} + {isError && 'No data'}
); diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx index 2a774f6b9c..41c399323e 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx @@ -1,12 +1,13 @@ -import Typography from '@mui/material/Typography'; -import Card from '@mui/material/Card'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; -import { colorPalette } from '@assets/styles/color-palette'; +import Typography from '@mui/material/Typography'; + import TitleSectionWrapper from '@components/SearchResults'; -import { AddressDetailsEscrowSchema } from '@services/api/use-address-details'; +import SectionWrapper from '@components/SectionWrapper'; import { HMTBalance } from '@pages/SearchResults/EscrowAddress/HMTBalance'; +import { AddressDetailsEscrowSchema } from '@services/api/use-address-details'; + const EscrowAddress = ({ data: { token, @@ -24,14 +25,7 @@ const EscrowAddress = ({ data: AddressDetailsEscrowSchema; }) => { return ( - + {token} @@ -51,30 +45,26 @@ const EscrowAddress = ({ {factoryAddress} - + {totalFundedAmount} HMT - + {amountPaid} HMT @@ -86,13 +76,11 @@ const EscrowAddress = ({ sx={{ padding: '3px 8px', borderRadius: '16px', - border: `1px solid ${colorPalette.secondary.light}`, + border: '1px solid', + borderColor: 'secondary.light', }} > - + {status} @@ -142,7 +130,7 @@ const EscrowAddress = ({ {reputationOracle} - + ); }; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/HMTBalance.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/HMTBalance.tsx index 839e28393a..a7fa348a53 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/HMTBalance.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/HMTBalance.tsx @@ -1,6 +1,6 @@ -import { colorPalette } from '@assets/styles/color-palette'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; + import { useHMTPrice } from '@services/api/use-hmt-price'; export const HMTBalance = ({ HMTBalance }: { HMTBalance: number }) => { @@ -13,18 +13,16 @@ export const HMTBalance = ({ HMTBalance }: { HMTBalance: number }) => { if (isPending) { return ...; } - const HMTBalanceInDollars = HMTBalance * data.hmtPrice; + const HMTBalanceInDollars = HMTBalance * data; return ( - + {HMTBalance} {`HMT($${HMTBalanceInDollars.toFixed(2)})`} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx new file mode 100644 index 0000000000..4ee28ec445 --- /dev/null +++ b/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx @@ -0,0 +1,66 @@ +import Typography from '@mui/material/Typography'; + +import SectionWrapper from '@components/SectionWrapper'; + +import useKvstoreData from '@services/api/use-kvstore-data'; +import TableBody from '@mui/material/TableBody'; +import TableContainer from '@mui/material/TableContainer'; +import Table from '@mui/material/Table'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; +import CustomTooltip from '@components/CustomTooltip'; + +const KVStore = () => { + const { data } = useKvstoreData(); + console.log(data); + return ( + + + KV Store + + + + + + + + + + Key + + Value + + + + {data?.map((row) => ( + + + {/* + + */} + {row.key} + + {row.value} + + ))} + +
+ + + ); +}; + +export default KVStore; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx index 24f69c717a..68d3c3b69d 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx @@ -1,23 +1,27 @@ -import Card from '@mui/material/Card'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; -import { colorPalette } from '@assets/styles/color-palette'; +import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; +import { Role } from '@human-protocol/sdk'; + +import CustomTooltip from '@components/CustomTooltip'; +import SectionWrapper from '@components/SectionWrapper'; +import KVStore from '../KVStore'; +import StakeInfo from '../StakeInfo'; +import { RoleDetailsEscrowsTable } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable'; + import ReputationOracleIcon from '@assets/icons/reputation-oracle.svg'; import ExchangeOracleIcon from '@assets/icons/exchange-oracle.svg'; import JobLauncherIcon from '@assets/icons/job-launcher.svg'; import RecordingOracleIcon from '@assets/icons/recording-oracle.svg'; -import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; + import { AddressDetailsOperator } from '@services/api/use-address-details'; import { getNetwork } from '@utils/config/networks'; import { useWalletSearch } from '@utils/hooks/use-wallet-search'; -import { RoleDetailsEscrowsTable } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable'; import { Reputation } from '@services/api/use-leaderboard-details'; import { env } from '@helpers/env'; -import { FormatNumberWithDecimals } from '@components/Home/FormatNumber'; -import CustomTooltip from '@components/CustomTooltip'; -import { Role } from '@human-protocol/sdk'; +import { colorPalette } from '@assets/styles/color-palette'; interface RoleInfoProps { title: string; @@ -179,26 +183,9 @@ const RoleDetails = ({ return ( <> - - - + + + Overview {env.VITE_HUMANPROTOCOL_CORE_ARCHITECTURE ? ( @@ -227,13 +214,7 @@ const RoleDetails = ({ alignItems="baseline" direction={{ sm: 'column', md: 'row' }} > - + Role @@ -242,12 +223,7 @@ const RoleDetails = ({ - + Network @@ -259,13 +235,7 @@ const RoleDetails = ({ gap={{ xs: 1, md: 0 }} direction={{ sm: 'column', md: 'row' }} > - + - + Jobs Launched {amountJobsProcessed} - + - - - - Stake Info - - - - {amountStaked !== undefined && amountStaked !== null ? ( - - - Tokens Staked - - - - - - - HMT - - - - ) : null} - {amountLocked !== undefined && amountLocked !== null ? ( - - - Tokens Locked - - - - - - - HMT - - - - ) : null} - - + {filterParams.address && filterParams.chainId ? ( - + <> + + + ) : null} ); diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx index 9a01f47b1c..c006787460 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx @@ -1,22 +1,17 @@ -import Card from '@mui/material/Card'; +import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; -import { AddressDetailsOperator } from '@services/api/use-address-details'; import TableContainer from '@mui/material/TableContainer'; import Table from '@mui/material/Table'; -import { EscrowsTableBody } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/tableComponents/EscrowsTableBody'; import TablePagination from '@mui/material/TablePagination'; -import { useEscrowDetailsDto } from '@utils/hooks/use-escrows-details-dto'; -import { useEscrowDetails } from '@services/api/use-escrows-details'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; -import { Stack } from '@mui/material'; -export const RoleDetailsEscrowsTable = ({ - role, -}: { - role: AddressDetailsOperator['role']; -}) => { +import { EscrowsTableBody } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/tableComponents/EscrowsTableBody'; +import SectionWrapper from '@components/SectionWrapper'; +import { useEscrowDetailsDto } from '@utils/hooks/use-escrows-details-dto'; +import { useEscrowDetails } from '@services/api/use-escrows-details'; + +export const RoleDetailsEscrowsTable = ({ role }: { role: string | null }) => { const { data } = useEscrowDetails({ role }); const { pagination: { page, pageSize, lastPageIndex }, @@ -26,83 +21,63 @@ export const RoleDetailsEscrowsTable = ({ } = useEscrowDetailsDto(); return ( - - - + + Escrows + + + - Escrows - - -
- - - - -
- - + + + + + + + {}} + page={page} + rowsPerPage={pageSize} + onRowsPerPageChange={(event) => { + setPageSize(Number(event.target.value)); }} - > - {}} - page={page} - rowsPerPage={pageSize} - onRowsPerPageChange={(event) => { - setPageSize(Number(event.target.value)); - }} - rowsPerPageOptions={[5, 10]} - labelDisplayedRows={({ from, to }) => { - const effectiveTo = data?.results - ? from + data.results.length - 1 - : to; - return `${from}–${effectiveTo}`; - }} - component="div" - slotProps={{ - actions: { - nextButton: { - onClick: () => { - setNextPage(); - }, - disabled: - lastPageIndex !== undefined && - (page === lastPageIndex || lastPageIndex - 1 === page), + rowsPerPageOptions={[5, 10]} + labelDisplayedRows={({ from, to }) => { + const effectiveTo = data?.results + ? from + data.results.length - 1 + : to; + return `${from}–${effectiveTo}`; + }} + component="div" + slotProps={{ + actions: { + nextButton: { + onClick: () => { + setNextPage(); }, - previousButton: { - onClick: () => { - setPrevPage(); - }, + disabled: + lastPageIndex !== undefined && + (page === lastPageIndex || lastPageIndex - 1 === page), + }, + previousButton: { + onClick: () => { + setPrevPage(); }, }, - }} - /> - - - + }, + }} + /> + + ); }; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx index 9c3db5f7f4..0097b5abb1 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx @@ -14,7 +14,6 @@ import Loader from '@components/Loader'; import { getNetwork } from '@utils/config/networks'; import { AddressDetails, - AddressDetailsWallet, useAddressDetails, } from '@services/api/use-address-details'; import { handleErrorMessage } from '@services/handle-error-message'; @@ -22,6 +21,7 @@ import RoleDetails from '@pages/SearchResults/RoleDetails/RoleDetails'; import { AxiosError } from 'axios'; import { WalletIcon } from '@components/Icons/WalletIcon'; import { EscrowAddressIcon } from '@components/Icons/EscrowAddressIcon'; +import { WalletAddressTransactionsTable } from './WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable'; const renderCurrentResultType = ( addressDetails: AddressDetails, @@ -84,14 +84,18 @@ const Results = () => { return ; } - const selectedWalletData: AddressDetailsWallet | undefined = - data.wallet || - (data.operator && data.operator.role === null ? data.operator : undefined); + const showTransactions = !!data.wallet || !!data.operator; + + const walletBalance = + data.wallet?.balance || + (data.operator && data.operator.role === null + ? data.operator?.balance + : undefined); return ( <> { {data.operator && data.operator.role ? ( ) : null} - {selectedWalletData ? : null} - {data.escrow ? : null} + {walletBalance ? : null} + {data.escrow && } + {showTransactions && } ); }; +enum ParamsStatus { + LOADING = 'loading', + ERROR = 'error', + SUCCESS = 'success', +} + const SearchResults = () => { const location = useLocation(); const { chainId: urlChainId, address: urlAddress } = useParams(); @@ -116,20 +127,21 @@ const SearchResults = () => { setChainId, filterParams: { chainId, address }, } = useWalletSearch(); - const [paramsStatus, setParamsStatus] = useState< - 'loading' | 'error' | 'success' - >('loading'); + + const [paramsStatus, setParamsStatus] = useState( + ParamsStatus.LOADING + ); useEffect(() => { - setParamsStatus('loading'); + setParamsStatus(ParamsStatus.LOADING); }, [location]); useEffect(() => { - if (paramsStatus === 'success') return; + if (paramsStatus === ParamsStatus.SUCCESS) return; if (urlAddress) { setAddress(urlAddress); } else { - setParamsStatus('error'); + setParamsStatus(ParamsStatus.ERROR); return; } const chainIdFromUrl = Number(urlChainId); @@ -140,7 +152,7 @@ const SearchResults = () => { ) { setChainId(chainIdFromUrl); } else { - setParamsStatus('error'); + setParamsStatus(ParamsStatus.ERROR); } }, [ address, @@ -153,8 +165,8 @@ const SearchResults = () => { ]); useEffect(() => { - if (address && chainId && paramsStatus !== 'success') { - setParamsStatus('success'); + if (address && chainId && paramsStatus !== ParamsStatus.SUCCESS) { + setParamsStatus(ParamsStatus.SUCCESS); } }, [address, chainId, paramsStatus]); @@ -162,11 +174,13 @@ const SearchResults = () => { - {paramsStatus === 'loading' && } - {paramsStatus === 'error' && ( - Something went wrong + {paramsStatus === ParamsStatus.LOADING && ( + + )} + {paramsStatus === ParamsStatus.ERROR && ( + Something went wrong )} - {paramsStatus === 'success' && } + {paramsStatus === ParamsStatus.SUCCESS && } ); }; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx new file mode 100644 index 0000000000..d066480c14 --- /dev/null +++ b/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx @@ -0,0 +1,71 @@ +import { FC } from 'react'; + +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +import SectionWrapper from '@components/SectionWrapper'; +import { FormatNumberWithDecimals } from '@components/Home/FormatNumber'; + +type Props = { + amountStaked?: number | null; + amountLocked?: number | null; +}; + +const StakeInfo: FC = ({ amountStaked, amountLocked }) => { + if (!amountStaked) return null; + + return ( + + + + Stake Info + + + + {amountStaked !== undefined && amountStaked !== null ? ( + + + Tokens Staked + + + + + + + HMT + + + + ) : null} + {amountLocked !== undefined && amountLocked !== null ? ( + + + Tokens Locked + + + + + + + HMT + + + + ) : null} + + + ); +}; + +export default StakeInfo; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx index c127024544..4072d06063 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx @@ -1,43 +1,35 @@ import Typography from '@mui/material/Typography'; -import Card from '@mui/material/Card'; import Stack from '@mui/material/Stack'; +import { NumericFormat } from 'react-number-format'; + import TitleSectionWrapper from '@components/SearchResults'; -import { colorPalette } from '@assets/styles/color-palette'; -import { AddressDetailsWallet } from '@services/api/use-address-details'; +import SectionWrapper from '@components/SectionWrapper'; + import { useHMTPrice } from '@services/api/use-hmt-price'; -import { WalletAddressTransactionsTable } from '@pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable'; -import { useWalletSearch } from '@utils/hooks/use-wallet-search'; -import { NumericFormat } from 'react-number-format'; import { useBreakPoints } from '@utils/hooks/use-is-mobile'; +import StakeInfo from '../StakeInfo'; +import KVStore from '../KVStore'; const HmtPrice = () => { - const { - data: hmtPrice, - isError: isHmtPriceError, - isPending: isHmtPricePending, - } = useHMTPrice(); + const { data, isError, isPending } = useHMTPrice(); - if (isHmtPriceError) { + if (isError) { return N/A; } - if (isHmtPricePending) { + if (isPending) { return ...; } return ( - - - <>{hmtPrice.hmtPrice} - + + {data} $ @@ -46,28 +38,15 @@ const HmtPrice = () => { ); }; -const WalletAddress = ({ - data: { balance }, -}: { - data: AddressDetailsWallet; -}) => { - const { filterParams } = useWalletSearch(); +const WalletAddress = ({ balance }: { balance: number | null | undefined }) => { const { mobile } = useBreakPoints(); return ( <> - + - + HMT @@ -90,11 +67,9 @@ const WalletAddress = ({ - - - {filterParams.address && filterParams.chainId ? ( - - ) : null} + + + ); }; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx index 62992706eb..2d398ffddb 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx @@ -1,13 +1,16 @@ -import Typography from '@mui/material/Typography'; -import Card from '@mui/material/Card'; -import TableContainer from '@mui/material/TableContainer'; -import Table from '@mui/material/Table'; import SimpleBar from 'simplebar-react'; +import Table from '@mui/material/Table'; +import TableContainer from '@mui/material/TableContainer'; +import TableFooter from '@mui/material/TableFooter'; import TablePagination from '@mui/material/TablePagination'; +import TableRow from '@mui/material/TableRow'; +import Typography from '@mui/material/Typography'; + import { TransactionsTableHead } from '@pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead'; import { TransactionsTableBody } from '@pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody'; +import SectionWrapper from '@components/SectionWrapper'; + import { useTransactionDetailsDto } from '@utils/hooks/use-transactions-details-dto'; -import { TableFooter } from '@mui/material'; import { useTransactionDetails } from '@services/api/use-transaction-details'; export const WalletAddressTransactionsTable = () => { @@ -20,15 +23,8 @@ export const WalletAddressTransactionsTable = () => { } = useTransactionDetailsDto(); return ( - - + + Transactions @@ -45,7 +41,7 @@ export const WalletAddressTransactionsTable = () => { - + { }, }} /> - + - + ); }; diff --git a/packages/apps/dashboard/client/src/services/api-paths.ts b/packages/apps/dashboard/client/src/services/api-paths.ts index 656a08c685..dfa16f9f30 100644 --- a/packages/apps/dashboard/client/src/services/api-paths.ts +++ b/packages/apps/dashboard/client/src/services/api-paths.ts @@ -29,4 +29,7 @@ export const apiPaths = { enabledChains: { path: '/networks/operating', }, + kvstore: { + path: '/details/kvstore', + }, } as const; diff --git a/packages/apps/dashboard/client/src/services/api/use-hmt-price.tsx b/packages/apps/dashboard/client/src/services/api/use-hmt-price.tsx index 78232607d3..4a1ae8629b 100644 --- a/packages/apps/dashboard/client/src/services/api/use-hmt-price.tsx +++ b/packages/apps/dashboard/client/src/services/api/use-hmt-price.tsx @@ -20,7 +20,7 @@ export function useHMTPrice() { successHMTPriceResponseSchema ); - return validResponse; + return validResponse.hmtPrice; }, queryKey: ['useHMTPrice'], }); diff --git a/packages/apps/dashboard/client/src/services/api/use-kvstore-data.tsx b/packages/apps/dashboard/client/src/services/api/use-kvstore-data.tsx new file mode 100644 index 0000000000..55ef3228a4 --- /dev/null +++ b/packages/apps/dashboard/client/src/services/api/use-kvstore-data.tsx @@ -0,0 +1,36 @@ +import { useQuery } from '@tanstack/react-query'; + +import { apiPaths } from '@services/api-paths'; +import { httpService } from '@services/http-service'; +import { validateResponse } from '@services/validate-response'; +import { z } from 'zod'; +import { useWalletSearch } from '@utils/hooks/use-wallet-search'; + +const kvstoreDataSchema = z.array( + z.object({ + key: z.string(), + value: z.string(), + }) +); + +export type KvstoreData = z.infer; + +const useKvstoreData = () => { + const { filterParams } = useWalletSearch(); + + return useQuery({ + queryKey: ['kvstoreData', filterParams.address], + queryFn: async () => { + const { data } = await httpService.get( + `${apiPaths.kvstore.path}/${filterParams.address}`, + { params: { chain_id: filterParams.chainId || -1 } } + ); + + const validResponse = validateResponse(data, kvstoreDataSchema); + + return validResponse; + }, + }); +}; + +export default useKvstoreData; From cbe8bd478f82301e459cf4304b3ba3b116eb1d18 Mon Sep 17 00:00:00 2001 From: kirill Date: Mon, 12 May 2025 11:13:37 +0300 Subject: [PATCH 02/24] refactor: home page, header, graph --- .../src/assets/styles/_graph-swipper.scss | 2 +- .../client/src/assets/styles/_header.scss | 72 ------ .../client/src/assets/styles/_home-page.scss | 56 +---- .../src/assets/styles/_page-wrapper.scss | 13 +- .../client/src/assets/styles/main.scss | 1 - .../components/DataEntry/ToggleButtons.tsx | 35 ++- .../client/src/components/Header/Header.tsx | 231 +++++++++--------- .../client/src/components/Home/SmallGraph.tsx | 45 ++-- .../client/src/pages/Home/HMTPrice.tsx | 6 +- .../client/src/pages/Home/Holders.tsx | 8 +- .../dashboard/client/src/pages/Home/Home.tsx | 200 +++++++-------- packages/apps/dashboard/client/src/theme.tsx | 2 +- .../hooks/use-graph-page-chart-params.tsx | 22 +- 13 files changed, 278 insertions(+), 415 deletions(-) delete mode 100644 packages/apps/dashboard/client/src/assets/styles/_header.scss diff --git a/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss b/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss index 4176d2fffd..d0e58f340b 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss @@ -1,5 +1,5 @@ .swiper-button-next, .swiper-button-prev { - top: 35% + top: 50% } .swiper-button-next::after, .swiper-button-prev::after { diff --git a/packages/apps/dashboard/client/src/assets/styles/_header.scss b/packages/apps/dashboard/client/src/assets/styles/_header.scss deleted file mode 100644 index 348816444b..0000000000 --- a/packages/apps/dashboard/client/src/assets/styles/_header.scss +++ /dev/null @@ -1,72 +0,0 @@ -.header-toolbar { - height: 82px; - justify-content: space-between; - - .header-list-link { - display: flex; - gap: 16px; - align-items: center; - .header-link { - font-weight: 600; - padding: 6px 8px; - cursor: pointer; - font-size: 14px; - } - } - - .mobile-icon { - display: none; - } - - .logo-mobile, - .search-header-mobile { - display: none; - } - - @media (max-width: 1300px) { - .logo { - display: none; - } - .logo-mobile { - display: block; - } - } - - @media (max-width: 1280px) { - height: 62px; - .mobile-icon, - .search-header-mobile { - display: block; - } - .header-list-link, - .search-header { - display: none; - } - - .logo-mobile { - margin-left: 24px; - } - - .mobile-icon { - margin-right: 16px; - } - } -} - -.header-mobile-menu { - padding: 20px 10px; - .header-list-link { - display: flex; - gap: 16px; - flex-direction: column; - .header-link { - font-weight: 600; - padding: 6px 8px; - font-size: 14px; - } - - span { - cursor: pointer; - } - } -} diff --git a/packages/apps/dashboard/client/src/assets/styles/_home-page.scss b/packages/apps/dashboard/client/src/assets/styles/_home-page.scss index a6c4853400..0230e679ed 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_home-page.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_home-page.scss @@ -1,57 +1,5 @@ -.home-page-header { - color: $white; - .home-page-search { - margin-top: 24px; - } -} - -.home-page-boxes { - display: flex; - gap: 24px; - margin-top: 62px; - - .home-page-box { - color: $primary; - background-color: $white; - border-radius: 16px; - padding: 24px 32px; - width: calc(38% - 24px); - - @media (max-width: 660px) { - padding: 24px 16px; - } - - .box-title { - font-size: 14px; - height: 32px; - margin-bottom: 24px; - display: flex; - align-items: center; - justify-content: space-between; - } - .box-content { - display: flex; - .count { - font-size: 20px; - font-weight: 500; - margin-top: 3px; - } - .box-icon { - margin-right: 10px; - } - } - } - - .home-page-box:first-child { - width: 24%; - } - @media (max-width: 1250px) { - flex-wrap: wrap; - .home-page-box, - .home-page-box:first-child { - width: 100%; - } - } +.home-page-search { + margin-top: 24px; } .home-page-find { diff --git a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss index 6891dda980..044ff797e8 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss @@ -1,16 +1,16 @@ .page-wrapper { margin: 0 56px; min-height: calc(100vh - 206px); - border-bottom-left-radius: 20px; - border-bottom-right-radius: 20px; display: flex; flex-direction: column; - padding: 14px 0; - height: 100vh; + padding: 0; + height: 100dvh; @media (max-width: 1280px) { border-radius: 0; height: auto; + min-height: calc(100vh - 386px); + margin: 0 24px; } .container { @@ -22,11 +22,6 @@ } } - @media (max-width: 1280px) { - min-height: calc(100vh - 386px); - margin: 0 24px; - } - @media (max-width: 600px) { margin: 0; } diff --git a/packages/apps/dashboard/client/src/assets/styles/main.scss b/packages/apps/dashboard/client/src/assets/styles/main.scss index 2be6414a1a..c899f02bae 100644 --- a/packages/apps/dashboard/client/src/assets/styles/main.scss +++ b/packages/apps/dashboard/client/src/assets/styles/main.scss @@ -1,5 +1,4 @@ @import 'const'; -@import 'header'; @import 'page-wrapper'; @import 'footer'; @import 'home-page'; diff --git a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx index 808d5ec296..def28b1bd6 100644 --- a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx +++ b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx @@ -2,21 +2,23 @@ import ToggleButton from '@mui/material/ToggleButton'; import Typography from '@mui/material/Typography'; import { styled } from '@mui/material'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { colorPalette } from '@assets/styles/color-palette'; import { TIME_PERIOD_OPTIONS, TimePeriod, useGraphPageChartParams, } from '@utils/hooks/use-graph-page-chart-params'; -export const StyledToggleButtonGroup = styled(ToggleButtonGroup)({ - '.MuiToggleButtonGroup-grouped': { - border: 'none', - borderRadius: 4, - width: 50, - color: colorPalette.primary.main, - }, -}); +export const StyledToggleButtonGroup = styled(ToggleButtonGroup)( + ({ theme }) => ({ + '.MuiToggleButtonGroup-grouped': { + border: 'none', + borderRadius: 4, + width: 47, + height: 30, + color: theme.palette.primary.main, + }, + }) +); const ToggleButtons = () => { const { setTimePeriod, selectedTimePeriod, dateRangeParams } = @@ -36,25 +38,22 @@ const ToggleButtons = () => { > {TIME_PERIOD_OPTIONS.map((elem) => ( { - setTimePeriod(elem); - }} - selected={checkIfSelected(elem)} key={elem.name} + onClick={() => setTimePeriod(elem)} + selected={checkIfSelected(elem)} + value={elem.name} sx={{ '.MuiTypography-root': { wordBreak: 'normal', }, '&.Mui-selected': { - backgroundColor: colorPalette.primary.main, - color: colorPalette.white, + backgroundColor: 'primary.main', + color: 'white.main', }, '&.Mui-selected:hover': { - cursor: 'pointer', - backgroundColor: colorPalette.primary.main, + backgroundColor: 'primary.main', }, }} - value={elem.name} > {elem.name} diff --git a/packages/apps/dashboard/client/src/components/Header/Header.tsx b/packages/apps/dashboard/client/src/components/Header/Header.tsx index 97db534fe9..a19f45789f 100644 --- a/packages/apps/dashboard/client/src/components/Header/Header.tsx +++ b/packages/apps/dashboard/client/src/components/Header/Header.tsx @@ -1,20 +1,33 @@ import { FC, useState } from 'react'; -import clsx from 'clsx'; -import Toolbar from '@mui/material/Toolbar'; + +import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; +import { Link as MuiLink } from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; import MenuIcon from '@mui/icons-material/Menu'; import Drawer from '@mui/material/Drawer'; -import Box from '@mui/material/Box'; -import Link from '@mui/material/Link'; -import { env } from '@helpers/env'; -import { useNavigate } from 'react-router-dom'; +import Toolbar from '@mui/material/Toolbar'; +import styled from '@mui/material/styles/styled'; +import { Link } from 'react-router-dom'; + import { LogoBlockIcon } from '@components/Icons/LogoBlockIcon'; import { LogoBlockIconMobile } from '@components/Icons/LogoBlockIconMobile'; -import CloseIcon from '@mui/icons-material/Close'; +import { env } from '@helpers/env'; + +const NavLink = styled(MuiLink)(({ theme }) => ({ + color: theme.palette.primary.main, + padding: '6px 8px', + fontSize: '14px', + fontWeight: 600, + lineHeight: '150%', + cursor: 'pointer', + textDecoration: 'none', + width: 'fit-content', +})); const Header: FC = () => { - const navigate = useNavigate(); const [open, setState] = useState(false); const handleClick = (url: string) => { @@ -26,130 +39,104 @@ const Header: FC = () => { }; return ( - - { - navigate('/'); - }} - underline="none" + + - - - - - - - + + + + -
- handleClick(env.VITE_NAVBAR_LINK_GITBOOK)} - > - GitBook - - handleClick(env.VITE_NAVBAR_LINK_FAUCETS)} - > - Faucet - - handleClick(env.VITE_NAVBAR_LINK_HUMAN_WEBSITE)} + - HUMAN Website - - - -
+ GitBook + Faucet + + HUMAN Website + + + + - toggleDrawer(true)} - > - - + toggleDrawer(true)} + > + + - toggleDrawer(false)} - PaperProps={{ - sx: { - width: '80%', - }, - }} - > - - - toggleDrawer(false)} /> - + toggleDrawer(false)} + PaperProps={{ + sx: { + width: '80%', + }, + }} + > + + + toggleDrawer(false)} /> + -
-
- handleClick(env.VITE_NAVBAR_LINK_GITBOOK)} - > - GitBook - -
-
- handleClick(env.VITE_NAVBAR_LINK_FAUCETS)} + + GitBook + Faucet + + HUMAN Website + +
-
- handleClick(env.VITE_NAVBAR_LINK_HUMAN_WEBSITE)} + Launch Jobs + +
- - -
- - - + Work & Earn + + + + + + ); }; diff --git a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx index 0b2327b214..c359e2ce7d 100644 --- a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx +++ b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx @@ -11,7 +11,7 @@ import { import Card from '@mui/material/Card'; import { colorPalette } from '@assets/styles/color-palette'; import Box from '@mui/material/Box'; -import { Typography } from '@mui/material'; +import { Typography, useMediaQuery, useTheme } from '@mui/material'; import Stack from '@mui/material/Stack'; import ToggleButtons from '@components/DataEntry/ToggleButtons'; import { Fragment } from 'react'; @@ -29,12 +29,7 @@ const CustomSmallChartTooltip = ({ border: `2px solid ${colorPalette.fog.light}`, }} > - + {payload?.map((elem) => ( @@ -60,10 +55,29 @@ interface SmallGraphProps { title: string; } +const GraphSettings = ({ title }: { title: string }) => ( + + + {title} + + + +); + const SmallGraph = ({ title, graphData }: SmallGraphProps) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); return ( <> - + {!isMobile && } + { /> - - - {title} - - - + {isMobile && } ); }; diff --git a/packages/apps/dashboard/client/src/pages/Home/HMTPrice.tsx b/packages/apps/dashboard/client/src/pages/Home/HMTPrice.tsx index e01e260a66..2a9a88500a 100644 --- a/packages/apps/dashboard/client/src/pages/Home/HMTPrice.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/HMTPrice.tsx @@ -1,19 +1,21 @@ +import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { useHMTPrice } from '../../services/api/use-hmt-price'; export function HMTPrice() { const { data, isError, isPending, isSuccess } = useHMTPrice(); + return (
HMT Price -
+ {isSuccess && `$${data}`} {isPending && '...'} {isError && 'No data'} -
+
); } diff --git a/packages/apps/dashboard/client/src/pages/Home/Holders.tsx b/packages/apps/dashboard/client/src/pages/Home/Holders.tsx index 671bf3c1e8..3e2600d7b0 100644 --- a/packages/apps/dashboard/client/src/pages/Home/Holders.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/Holders.tsx @@ -1,5 +1,7 @@ -import { FormatNumber } from '@components/Home/FormatNumber'; +import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; + +import { FormatNumber } from '@components/Home/FormatNumber'; import { useGeneralStats } from '@services/api/use-general-stats'; export function Holders() { @@ -10,11 +12,11 @@ export function Holders() { Holders -
+ {isSuccess && } {isPending && '...'} {isError && 'No data'} -
+ ); } diff --git a/packages/apps/dashboard/client/src/pages/Home/Home.tsx b/packages/apps/dashboard/client/src/pages/Home/Home.tsx index 8082578b9f..842663fd8a 100644 --- a/packages/apps/dashboard/client/src/pages/Home/Home.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/Home.tsx @@ -1,11 +1,16 @@ -import PageWrapper from '@components/PageWrapper'; -import SearchBar from '@components/SearchBar/SearchBar'; -import ShadowIcon from '@components/ShadowIcon'; -import Typography from '@mui/material/Typography'; +import { FC } from 'react'; + import Button from '@mui/material/Button'; -import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; import Divider from '@mui/material/Divider'; +import Grid from '@mui/material/Unstable_Grid2'; +import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; +import Typography from '@mui/material/Typography'; import { Link } from 'react-router-dom'; +import styled from '@mui/material/styles/styled'; + +import PageWrapper from '@components/PageWrapper'; +import SearchBar from '@components/SearchBar/SearchBar'; +import ShadowIcon from '@components/ShadowIcon'; import { Leaderboard } from './Leaderboard'; import GraphSwiper from '@components/Home/GraphSwiper'; import { HMTPrice } from '@pages/Home/HMTPrice'; @@ -13,112 +18,109 @@ import { TotalNumberOfTasks } from '@pages/Home/TotalNumberOfTasks'; import { Holders } from '@pages/Home/Holders'; import { TotalTransactions } from '@pages/Home/TotalTransactions'; import { LeaderboardIcon } from '@components/Icons/LeaderboardIcon'; -import { useBreakPoints } from '@utils/hooks/use-is-mobile'; -import { colorPalette } from '@assets/styles/color-palette'; import CustomTooltip from '@components/CustomTooltip'; -const Home: React.FC = () => { +import { useBreakPoints } from '@utils/hooks/use-is-mobile'; +import Box from '@mui/material/Box'; + +const CardWrapper = styled(Grid)(({ theme }) => ({ + display: 'flex', + background: theme.palette.white.main, + borderRadius: '16px', + padding: '24px 32px', + [theme.breakpoints.up('md')]: { + height: 300, + }, + [theme.breakpoints.down('md')]: { + height: 'auto', + }, +})); + +const InfoTooltip = ({ title }: { title: string }) => ( + + + +); + +const Home: FC = () => { const { mobile: { isMobile }, } = useBreakPoints(); return ( -
- - All HUMAN activity. In one place. - - -
-
-
-
Token
-
-
- - - -
- -
- -
-
+ + All HUMAN activity. In one place. + + + + + + Token + + + + + + - + -
- -
-
-
-
- Data Overview - -
-
-
- - - -
- -
- -
-
- - + Data Overview (All networks) + +
- -
-
-
- -
-
+ variant="outlined" + color="secondary" + component={Link} + to="/graph" + > + Charts by Network + + + + + + + + + + + + + + + + + + + + + + Date: Fri, 16 May 2025 14:17:46 +0300 Subject: [PATCH 03/24] refactor: theme, components, simplify code, reorganize imports, add new fields to the wallet details --- .../client/src/assets/styles/color-palette.ts | 6 - .../src/components/Clipboard/Clipboard.tsx | 12 +- .../src/components/SearchBar/SearchBar.tsx | 10 +- .../SearchResults/TitleSectionWrapper.tsx | 56 ++-- .../src/components/SectionWrapper/index.tsx | 2 + .../Leaderboard/hooks/useDataGrid.tsx | 9 +- .../EscrowAddress/EscrowAddress.tsx | 41 +-- .../EscrowAddress/HMTBalance.tsx | 31 -- .../pages/SearchResults/HmtBalance/index.tsx | 50 ++++ .../pages/SearchResults/HmtPrice/index.tsx | 22 ++ .../src/pages/SearchResults/KVStore/index.tsx | 6 +- .../SearchResults/ReputationScore/index.tsx | 58 ++++ .../SearchResults/RoleDetails/RoleDetails.tsx | 277 ++++++++---------- .../src/pages/SearchResults/SearchResults.tsx | 10 +- .../pages/SearchResults/StakeInfo/index.tsx | 9 +- .../WalletAddress/WalletAddress.tsx | 78 ++--- .../tableComponents/TransactionsTableHead.tsx | 35 +-- .../src/services/api/use-address-details.tsx | 6 + packages/apps/dashboard/client/src/theme.tsx | 16 +- 19 files changed, 373 insertions(+), 361 deletions(-) delete mode 100644 packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/HMTBalance.tsx create mode 100644 packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx create mode 100644 packages/apps/dashboard/client/src/pages/SearchResults/HmtPrice/index.tsx create mode 100644 packages/apps/dashboard/client/src/pages/SearchResults/ReputationScore/index.tsx diff --git a/packages/apps/dashboard/client/src/assets/styles/color-palette.ts b/packages/apps/dashboard/client/src/assets/styles/color-palette.ts index 0d1b0e298e..ed67fcb013 100644 --- a/packages/apps/dashboard/client/src/assets/styles/color-palette.ts +++ b/packages/apps/dashboard/client/src/assets/styles/color-palette.ts @@ -55,12 +55,6 @@ export const colorPalette = { main: '#ED6C02', light: '#ED6C0280', }, - textSecondary: { - main: '#858ec6', - light: '#858ec6', - dark: '#858ec6', - contrastText: '#858ec6', - }, table: { main: '#FFFFFF01', selected: '#1406B21F', diff --git a/packages/apps/dashboard/client/src/components/Clipboard/Clipboard.tsx b/packages/apps/dashboard/client/src/components/Clipboard/Clipboard.tsx index da3bc72a74..5e006f3cc4 100644 --- a/packages/apps/dashboard/client/src/components/Clipboard/Clipboard.tsx +++ b/packages/apps/dashboard/client/src/components/Clipboard/Clipboard.tsx @@ -1,11 +1,11 @@ +import { useState } from 'react'; + import Card from '@mui/material/Card'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import IconButton from '@mui/material/IconButton'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; -import { colorPalette } from '@assets/styles/color-palette'; import CustomTooltip from '@components/CustomTooltip'; -import { useState } from 'react'; interface ClipboardProps { value: string; @@ -16,9 +16,11 @@ const Clipboard = ({ value }: ClipboardProps) => { return ( @@ -54,7 +56,7 @@ const Clipboard = ({ value }: ClipboardProps) => { diff --git a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx index 60b49386ca..f9cd5b0fd7 100644 --- a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx +++ b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx @@ -102,7 +102,9 @@ const SearchBar: FC = ({ if (isLoading) return ; const renderEmptyValue = ( - Network + + Network + ); const renderSelectedValue = ( @@ -173,9 +175,9 @@ const SearchBar: FC = ({ @@ -192,7 +194,7 @@ const SearchBar: FC = ({ }} > > = ({ title, - children, tooltip, -}: { - title: string; - children: React.ReactNode; - tooltip?: { - description: string; - }; + sx, + children, }) => { return ( {tooltip ? ( - - - - - + + + {title} ) : ( - + {title} )} - {children} + + {children} + ); }; diff --git a/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx b/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx index 446c00bcf8..148387aa71 100644 --- a/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx +++ b/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx @@ -6,6 +6,8 @@ const SectionWrapper: FC = ({ children }) => { return ( { @@ -98,8 +97,8 @@ export const useDataGrid = (data: LeaderBoardData) => { diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx index 41c399323e..2eff682f7a 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx @@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography'; import TitleSectionWrapper from '@components/SearchResults'; import SectionWrapper from '@components/SectionWrapper'; -import { HMTBalance } from '@pages/SearchResults/EscrowAddress/HMTBalance'; +import HmtBalance from '../HmtBalance'; import { AddressDetailsEscrowSchema } from '@services/api/use-address-details'; @@ -31,16 +31,13 @@ const EscrowAddress = ({ {token} {balance !== undefined && balance !== null ? ( - - + + ) : null} {factoryAddress} @@ -88,9 +85,7 @@ const EscrowAddress = ({ {launcher} @@ -99,33 +94,29 @@ const EscrowAddress = ({ {exchangeOracle} {recordingOracle} {reputationOracle} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/HMTBalance.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/HMTBalance.tsx deleted file mode 100644 index a7fa348a53..0000000000 --- a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/HMTBalance.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; - -import { useHMTPrice } from '@services/api/use-hmt-price'; - -export const HMTBalance = ({ HMTBalance }: { HMTBalance: number }) => { - const { data, isError, isPending } = useHMTPrice(); - - if (isError) { - return N/A; - } - - if (isPending) { - return ...; - } - const HMTBalanceInDollars = HMTBalance * data; - - return ( - - {HMTBalance} - - {`HMT($${HMTBalanceInDollars.toFixed(2)})`} - - - ); -}; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx new file mode 100644 index 0000000000..39ad92082e --- /dev/null +++ b/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx @@ -0,0 +1,50 @@ +import { FC } from 'react'; + +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { NumericFormat } from 'react-number-format'; + +import { useHMTPrice } from '@services/api/use-hmt-price'; +import { useBreakPoints } from '@utils/hooks/use-is-mobile'; + +type Props = { + balance?: number | null; +}; + +const HmtBalance: FC = ({ balance }) => { + const { data, isError, isPending } = useHMTPrice(); + const { mobile } = useBreakPoints(); + + if (isError) { + return N/A; + } + + if (isPending) { + return ...; + } + + const balanceInDollars = balance ? (balance * data).toFixed(2) : 0; + + return ( + + + + + + {`HMT($${balanceInDollars})`} + + + ); +}; + +export default HmtBalance; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/HmtPrice/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/HmtPrice/index.tsx new file mode 100644 index 0000000000..996d1f2c9e --- /dev/null +++ b/packages/apps/dashboard/client/src/pages/SearchResults/HmtPrice/index.tsx @@ -0,0 +1,22 @@ +import { Typography, Stack } from '@mui/material'; + +import { useHMTPrice } from '@services/api/use-hmt-price'; + +const HmtPrice = () => { + const { data, isError, isPending, isSuccess } = useHMTPrice(); + + return ( + + + $ + + + {isError && 'N/A'} + {isPending && '...'} + {isSuccess && data} + + + ); +}; + +export default HmtPrice; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx index 4ee28ec445..a40eb79388 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx @@ -14,7 +14,11 @@ import CustomTooltip from '@components/CustomTooltip'; const KVStore = () => { const { data } = useKvstoreData(); - console.log(data); + + if (data?.length === 0) { + return null; + } + return ( diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/ReputationScore/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/ReputationScore/index.tsx new file mode 100644 index 0000000000..7241d36ba9 --- /dev/null +++ b/packages/apps/dashboard/client/src/pages/SearchResults/ReputationScore/index.tsx @@ -0,0 +1,58 @@ +import { FC } from 'react'; + +import { Reputation } from '@services/api/use-leaderboard-details'; +import { colorPalette } from '@assets/styles/color-palette'; +import { Box, Typography } from '@mui/material'; + +type Props = { + reputation: Reputation; +}; + +type ReputationAttributes = { + title: string; + colors: { title: string; border: string }; +}; + +const reputationAttributes: Record = { + High: { + title: 'High', + colors: { + title: colorPalette.success.main, + border: colorPalette.success.light, + }, + }, + Medium: { + title: 'Medium', + colors: { + title: colorPalette.warning.main, + border: colorPalette.warning.light, + }, + }, + Low: { + title: 'Low', + colors: { + title: colorPalette.orange.main, + border: colorPalette.orange.light, + }, + }, + Unknown: { + title: 'Coming soon', + colors: { + title: colorPalette.ocean.main, + border: colorPalette.ocean.light, + }, + }, +}; + +const ReputationScore: FC = ({ reputation }) => { + const colors = reputationAttributes[reputation].colors; + return ( + + + {reputationAttributes[reputation].title} + + + ); +}; + +export default ReputationScore; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx index 68d3c3b69d..fac42ad7a3 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx @@ -1,15 +1,20 @@ -import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; -import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; +import Chip from '@mui/material/Chip'; +import Link from '@mui/material/Link'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; import Stack from '@mui/material/Stack'; -import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; import { Role } from '@human-protocol/sdk'; -import CustomTooltip from '@components/CustomTooltip'; import SectionWrapper from '@components/SectionWrapper'; +import TitleSectionWrapper from '@components/SearchResults/TitleSectionWrapper'; +import { RoleDetailsEscrowsTable } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable'; import KVStore from '../KVStore'; +import ReputationScore from '../ReputationScore'; import StakeInfo from '../StakeInfo'; -import { RoleDetailsEscrowsTable } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable'; +import HmtBalance from '../HmtBalance'; +import HmtPrice from '../HmtPrice'; import ReputationOracleIcon from '@assets/icons/reputation-oracle.svg'; import ExchangeOracleIcon from '@assets/icons/exchange-oracle.svg'; @@ -17,43 +22,53 @@ import JobLauncherIcon from '@assets/icons/job-launcher.svg'; import RecordingOracleIcon from '@assets/icons/recording-oracle.svg'; import { AddressDetailsOperator } from '@services/api/use-address-details'; -import { getNetwork } from '@utils/config/networks'; -import { useWalletSearch } from '@utils/hooks/use-wallet-search'; -import { Reputation } from '@services/api/use-leaderboard-details'; import { env } from '@helpers/env'; import { colorPalette } from '@assets/styles/color-palette'; interface RoleInfoProps { title: string; points: string[]; + role: string; } -const RoleInformation = ({ title, points }: RoleInfoProps) => { +const renderRoleIcon = (role: string | null) => { + if (!role) return null; + + const roleIcons = { + [Role.ReputationOracle]: , + [Role.ExchangeOracle]: , + [Role.JobLauncher]: , + [Role.RecordingOracle]: , + }; + + return roleIcons[role]; +}; + +const RoleInformation = ({ title, points, role }: RoleInfoProps) => { return ( - - {title} -
    + + {renderRoleIcon(role)} + + {title} + + {points.map((elem, idx) => ( -
  • + {elem} -
    • + ))} -
- + + ); }; -const RenderRoleDetailsInfo = ({ - role, -}: { - role: AddressDetailsOperator['role']; -}) => { +const renderRoleDetailsInfo = (role: string | null) => { if (!role) { return null; } @@ -98,176 +113,114 @@ const RenderRoleDetailsInfo = ({ return null; } - return ; -}; - -const renderReputationTitle = (reputation: Reputation) => { - const reputationAttributes: Record< - Reputation, - { title: string; colors: { title: string; border: string } } - > = { - High: { - title: 'High', - colors: { - title: colorPalette.success.main, - border: colorPalette.success.light, - }, - }, - Medium: { - title: 'Medium', - colors: { - title: colorPalette.warning.main, - border: colorPalette.warning.light, - }, - }, - - Low: { - title: 'Low', - colors: { - title: colorPalette.orange.main, - border: colorPalette.orange.light, - }, - }, - Unknown: { - title: 'Coming soon', - colors: { - title: colorPalette.ocean.main, - border: colorPalette.ocean.light, - }, - }, - }; - - const colors = reputationAttributes[reputation].colors; - return ( - - - {reputationAttributes[reputation].title} - - + ); }; -const renderRoleIcon = (role: AddressDetailsOperator['role']) => { - if (!role) return null; - const roleIcons = { - [Role.ReputationOracle]: , - [Role.ExchangeOracle]: , - [Role.JobLauncher]: , - [Role.RecordingOracle]: , - }; - - return roleIcons[role]; -}; - -const RoleDetails = ({ - data: { +const RoleDetails = ({ data }: { data: AddressDetailsOperator }) => { + const { + balance, role, - chainId, reputation, amountJobsProcessed, amountStaked, amountLocked, - }, -}: { - data: AddressDetailsOperator; -}) => { - const { filterParams } = useWalletSearch(); + url, + fee, + jobTypes, + } = data; return ( <> - - - Overview - + + Overview {env.VITE_HUMANPROTOCOL_CORE_ARCHITECTURE ? ( - + HUMAN Protocol core architecture ) : null} - - - Role - - - {renderRoleIcon(role)} - - - - - - Network - - - {getNetwork(chainId)?.name || ''} - - - + + + + + + - - - - - - - Reputation Score - - {renderReputationTitle(reputation)} - - - - Jobs Launched - - {amountJobsProcessed} - + + + + {renderRoleDetailsInfo(role)} + + {url && ( + + + {url} + + + )} + {jobTypes && jobTypes?.length > 0 && ( + + + {jobTypes.map((jobType) => ( + + ))} + + + )} + {fee && ( + + {fee}% + + )} + + {amountJobsProcessed} + - - {filterParams.address && filterParams.chainId ? ( - <> - - - - ) : null} + + ); }; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx index 0097b5abb1..b0083efe6a 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx @@ -86,11 +86,9 @@ const Results = () => { const showTransactions = !!data.wallet || !!data.operator; - const walletBalance = - data.wallet?.balance || - (data.operator && data.operator.role === null - ? data.operator?.balance - : undefined); + const walletData = + data.wallet || + (data.operator && data.operator.role === null ? data.operator : undefined); return ( <> @@ -106,7 +104,7 @@ const Results = () => { {data.operator && data.operator.role ? ( ) : null} - {walletBalance ? : null} + {walletData ? : null} {data.escrow && } {showTransactions && } diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx index d066480c14..2e5b129337 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx @@ -1,6 +1,5 @@ import { FC } from 'react'; -import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; @@ -17,11 +16,9 @@ const StakeInfo: FC = ({ amountStaked, amountLocked }) => { return ( - - - Stake Info - - + + Stake Info + {amountStaked !== undefined && amountStaked !== null ? ( diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx index 4072d06063..892ecc5cd7 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx @@ -1,74 +1,46 @@ -import Typography from '@mui/material/Typography'; +import { FC } from 'react'; + import Stack from '@mui/material/Stack'; -import { NumericFormat } from 'react-number-format'; import TitleSectionWrapper from '@components/SearchResults'; import SectionWrapper from '@components/SectionWrapper'; - -import { useHMTPrice } from '@services/api/use-hmt-price'; -import { useBreakPoints } from '@utils/hooks/use-is-mobile'; -import StakeInfo from '../StakeInfo'; +import HmtBalance from '../HmtBalance'; +import HmtPrice from '../HmtPrice'; import KVStore from '../KVStore'; +import ReputationScore from '../ReputationScore'; +import StakeInfo from '../StakeInfo'; -const HmtPrice = () => { - const { data, isError, isPending } = useHMTPrice(); - - if (isError) { - return N/A; - } - - if (isPending) { - return ...; - } +import { + AddressDetailsOperator, + AddressDetailsWallet, +} from '@services/api/use-address-details'; - return ( - - - {data} - - $ - - - - ); +type Props = { + data: AddressDetailsWallet | AddressDetailsOperator; }; -const WalletAddress = ({ balance }: { balance: number | null | undefined }) => { - const { mobile } = useBreakPoints(); +const WalletAddress: FC = ({ data }) => { + const { balance, amountStaked, amountLocked, reputation } = data; return ( <> - - - - - - HMT - - + + + + + + + - - + ); diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx index 24d5723e1d..14b256d731 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx @@ -1,33 +1,30 @@ import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; -import { colorPalette } from '@assets/styles/color-palette'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import TableCell from '@mui/material/TableCell'; import IconButton from '@mui/material/IconButton'; import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; + import CustomTooltip from '@components/CustomTooltip'; export const TransactionsTableHead = () => { return ( - + - + @@ -40,11 +37,11 @@ export const TransactionsTableHead = () => { - + @@ -61,11 +58,11 @@ export const TransactionsTableHead = () => { - + @@ -76,11 +73,11 @@ export const TransactionsTableHead = () => { - + diff --git a/packages/apps/dashboard/client/src/services/api/use-address-details.tsx b/packages/apps/dashboard/client/src/services/api/use-address-details.tsx index 258b3588cc..89f6e36c30 100644 --- a/packages/apps/dashboard/client/src/services/api/use-address-details.tsx +++ b/packages/apps/dashboard/client/src/services/api/use-address-details.tsx @@ -29,6 +29,12 @@ const walletSchema = z.object({ chainId: z.number(), address: z.string(), balance: z.string().transform(transformOptionalTokenAmount), + amountStaked: z.string().transform(transformOptionalTokenAmount), + amountLocked: z.string().transform(transformOptionalTokenAmount), + amountWithdrawable: z.string().transform(transformOptionalTokenAmount), + reputation: reputationSchema, + totalAmountReceived: z.string().transform(transformOptionalTokenAmount), + payoutCount: z.number(), }); export type AddressDetailsWallet = z.infer; diff --git a/packages/apps/dashboard/client/src/theme.tsx b/packages/apps/dashboard/client/src/theme.tsx index f5d2b32d8c..3176fd2ae5 100644 --- a/packages/apps/dashboard/client/src/theme.tsx +++ b/packages/apps/dashboard/client/src/theme.tsx @@ -3,7 +3,7 @@ import { PaletteColorOptions, PaletteColor, } from '@mui/material/styles/createPalette'; -import { ThemeOptions } from '@mui/material'; +import { Shadows, ThemeOptions } from '@mui/material'; import { colorPalette } from '@assets/styles/color-palette'; import { CSSProperties } from 'react'; @@ -43,12 +43,10 @@ declare module '@mui/material/styles' { interface Palette { sky: PaletteColor; white: PaletteColor; - textSecondary: PaletteColor; } interface PaletteOptions { sky?: PaletteColorOptions; white?: PaletteColorOptions; - textSecondary?: PaletteColorOptions; } } @@ -56,7 +54,6 @@ declare module '@mui/material/Button' { interface ButtonPropsColorOverrides { sky: true; white: true; - textSecondary: true; } } @@ -64,7 +61,6 @@ declare module '@mui/material/IconButton' { interface IconButtonPropsColorOverrides { sky: true; white: true; - textSecondary: true; } } @@ -72,7 +68,6 @@ declare module '@mui/material/SvgIcon' { interface SvgIconPropsColorOverrides { sky: true; white: true; - textSecondary: true; } } @@ -107,7 +102,6 @@ const theme: ThemeOptions = createTheme({ dark: '#fff', contrastText: '#fff', }, - textSecondary: colorPalette.textSecondary, }, typography: { fontFamily: 'Inter, Arial, sans-serif', @@ -200,6 +194,14 @@ const theme: ThemeOptions = createTheme({ fontSize: 10, }, }, + shadows: [ + ...createTheme({}).shadows.map((shadow, i) => { + if (i === 2) { + return '0px 3px 1px -2px #e9ebfa, 0px 2px 2px 0px rgba(233, 235, 250, 0.50), 0px 1px 5px 0px rgba(233, 235, 250, 0.20)'; + } + return shadow; + }), + ] as Shadows, components: { MuiButton: { styleOverrides: { From eebc65943af1bdb460b2587ee50da9da1af4376f Mon Sep 17 00:00:00 2001 From: kirill Date: Fri, 16 May 2025 15:33:37 +0300 Subject: [PATCH 04/24] refactor: styles for mobile device, shadow icon --- .../client/src/assets/styles/_page-wrapper.scss | 2 +- .../client/src/assets/styles/_shadow-icon.scss | 12 +++++++----- .../src/components/Breadcrumbs/Breadcrumbs.tsx | 2 +- .../client/src/pages/SearchResults/SearchResults.tsx | 5 +++-- 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss index 044ff797e8..7423218594 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss @@ -18,7 +18,7 @@ padding: 30px 80px 100px; @media (max-width: 1100px) { - padding: 30px 16px; + padding: 24px 16px; } } diff --git a/packages/apps/dashboard/client/src/assets/styles/_shadow-icon.scss b/packages/apps/dashboard/client/src/assets/styles/_shadow-icon.scss index bf50fc4162..3dfec75db9 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_shadow-icon.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_shadow-icon.scss @@ -1,9 +1,13 @@ .shadow-icon{ display: flex; + align-items: center; gap: 16px; - height: 90px; + height: 78px; + &__icon { - width: 65px; + width: 66px; + height: 100%; + padding: 6px; display: flex; justify-content: center; align-items: center; @@ -14,14 +18,12 @@ height: 130px; } span{ - padding-top: 20px; font-size: 28px; font-weight: 600; } - @media (max-width: 400px) { + @media (max-width: 600px) { span { - padding-top: 30px; font-size: 20px; font-weight: 500; } diff --git a/packages/apps/dashboard/client/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/apps/dashboard/client/src/components/Breadcrumbs/Breadcrumbs.tsx index de76c85be6..8505e7439c 100644 --- a/packages/apps/dashboard/client/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/apps/dashboard/client/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -9,7 +9,7 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; const Breadcrumbs: FC<{ title?: string }> = ({ title }) => { return ( - + { return ( <> {renderCurrentResultType(data, filterParams.address)} From ae5df9568130698d07dd0ae2d9d0e0c2c4522a57 Mon Sep 17 00:00:00 2001 From: kirill Date: Fri, 16 May 2025 19:18:00 +0300 Subject: [PATCH 05/24] refactor: make table responsove, fix its cells, fix few other components, replace scss with mui in the component --- .../src/assets/styles/_nothing-found.scss | 16 --- .../client/src/assets/styles/main.scss | 1 - .../src/components/Clipboard/Clipboard.tsx | 2 +- .../components/NothingFound/NothingFound.tsx | 16 ++- .../pages/SearchResults/HmtPrice/index.tsx | 2 +- .../WalletAddress/WalletAddress.tsx | 20 +++ .../WalletAddressTransactionsTable.tsx | 94 +++++++------ .../cells/TransactionTableCellMethod.tsx | 126 +++++++++--------- .../cells/TransactionTableCellValue.tsx | 2 +- .../tableComponents/TransactionsTableBody.tsx | 26 ++-- .../tableComponents/TransactionsTableHead.tsx | 59 +++----- 11 files changed, 177 insertions(+), 187 deletions(-) delete mode 100644 packages/apps/dashboard/client/src/assets/styles/_nothing-found.scss diff --git a/packages/apps/dashboard/client/src/assets/styles/_nothing-found.scss b/packages/apps/dashboard/client/src/assets/styles/_nothing-found.scss deleted file mode 100644 index 4730145a62..0000000000 --- a/packages/apps/dashboard/client/src/assets/styles/_nothing-found.scss +++ /dev/null @@ -1,16 +0,0 @@ -.nothing-found-title{ - font-size: 34px; - font-weight: 600; -} - -.nothing-found-desc{ - font-size: 16px; - margin-top: 30px; -} - -.nothing-found-link{ - color: $secondary; - margin-left: 10px; - margin-top: 20px; - font-weight: 600; -} diff --git a/packages/apps/dashboard/client/src/assets/styles/main.scss b/packages/apps/dashboard/client/src/assets/styles/main.scss index c899f02bae..91c7e4b2c1 100644 --- a/packages/apps/dashboard/client/src/assets/styles/main.scss +++ b/packages/apps/dashboard/client/src/assets/styles/main.scss @@ -4,5 +4,4 @@ @import 'home-page'; @import 'search'; @import 'shadow-icon'; -@import 'nothing-found'; @import "graph-swipper"; diff --git a/packages/apps/dashboard/client/src/components/Clipboard/Clipboard.tsx b/packages/apps/dashboard/client/src/components/Clipboard/Clipboard.tsx index 5e006f3cc4..967c27340e 100644 --- a/packages/apps/dashboard/client/src/components/Clipboard/Clipboard.tsx +++ b/packages/apps/dashboard/client/src/components/Clipboard/Clipboard.tsx @@ -31,7 +31,7 @@ const Clipboard = ({ value }: ClipboardProps) => { justifyContent="space-between" > { return ( <> -
Nothing found :(
-
+ Nothing found :( + We couldn't find anything within this criteria.
- Please search by wallet address or escrow address. -
- -
Back Home
+ Please search by wallet address or escrow address. + + + + Back Home + ); diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/HmtPrice/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/HmtPrice/index.tsx index 996d1f2c9e..71c97576a8 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/HmtPrice/index.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/HmtPrice/index.tsx @@ -7,7 +7,7 @@ const HmtPrice = () => { return ( - + $ diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx index 892ecc5cd7..5649dbc0fc 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx @@ -1,6 +1,7 @@ import { FC } from 'react'; import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; import TitleSectionWrapper from '@components/SearchResults'; import SectionWrapper from '@components/SectionWrapper'; @@ -21,6 +22,7 @@ type Props = { const WalletAddress: FC = ({ data }) => { const { balance, amountStaked, amountLocked, reputation } = data; + const isWallet = 'totalAmountReceived' in data; return ( <> @@ -38,6 +40,24 @@ const WalletAddress: FC = ({ data }) => { > + {isWallet && ( + + + {data?.totalAmountReceived} + + + HMT + + + )} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx index 2d398ffddb..f55364e536 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx @@ -24,65 +24,73 @@ export const WalletAddressTransactionsTable = () => { return ( - + Transactions - - - {}} - page={page} - component="td" - rowsPerPage={pageSize} - onRowsPerPageChange={(event) => { - setPageSize(Number(event.target.value)); - }} - rowsPerPageOptions={[5, 10]} - labelDisplayedRows={({ from, to }) => { - const effectiveTo = data?.results - ? from + data.results.length - 1 - : to; - return `${from}–${effectiveTo}`; - }} - slotProps={{ - actions: { - nextButton: { - onClick: () => { - setNextPage(); - }, - disabled: - lastPageIndex !== undefined && - (page === lastPageIndex || - lastPageIndex - 1 === page), +
+ + + + + {}} + page={page} + component="td" + rowsPerPage={pageSize} + onRowsPerPageChange={(event) => { + setPageSize(Number(event.target.value)); + }} + rowsPerPageOptions={[5, 10]} + labelDisplayedRows={({ from, to }) => { + const effectiveTo = data?.results + ? from + data.results.length - 1 + : to; + return `${from}–${effectiveTo}`; + }} + slotProps={{ + actions: { + nextButton: { + onClick: () => { + setNextPage(); }, - previousButton: { - onClick: () => { - setPrevPage(); - }, + disabled: + lastPageIndex !== undefined && + (page === lastPageIndex || lastPageIndex - 1 === page), + }, + previousButton: { + onClick: () => { + setPrevPage(); }, }, - }} - /> - - -
- + }, + }} + /> + + + ); diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx index 9480c5cd7d..61b1a638b9 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx @@ -1,69 +1,69 @@ -import { colorPalette } from '@assets/styles/color-palette'; import Box from '@mui/material/Box/Box'; import Typography from '@mui/material/Typography'; -import { capitalize } from '@mui/material'; -export const TransactionTableCellMethod = ({ method }: { method: string }) => { - const methodAttributes: Record< - string, - { color: { text: string; border: string } } - > = { - withdraw: { - color: { - text: colorPalette.error.main, - border: colorPalette.error.light, - }, +import { colorPalette } from '@assets/styles/color-palette'; + +const methodAttributes: Record< + string, + { color: { text: string; border: string } } +> = { + withdraw: { + color: { + text: colorPalette.error.main, + border: colorPalette.error.light, }, - cancel: { - color: { - text: colorPalette.error.main, - border: colorPalette.error.light, - }, + }, + cancel: { + color: { + text: colorPalette.error.main, + border: colorPalette.error.light, }, - stake: { - color: { - text: colorPalette.success.main, - border: colorPalette.success.light, - }, + }, + stake: { + color: { + text: colorPalette.success.main, + border: colorPalette.success.light, }, - unstake: { - color: { - text: colorPalette.error.main, - border: colorPalette.error.light, - }, + }, + unstake: { + color: { + text: colorPalette.error.main, + border: colorPalette.error.light, }, - slash: { - color: { - text: colorPalette.error.main, - border: colorPalette.error.light, - }, + }, + slash: { + color: { + text: colorPalette.error.main, + border: colorPalette.error.light, }, - stakeWithdrawn: { - color: { - text: colorPalette.error.main, - border: colorPalette.error.light, - }, + }, + stakeWithdrawn: { + color: { + text: colorPalette.error.main, + border: colorPalette.error.light, }, - withdrawFees: { - color: { - text: colorPalette.error.main, - border: colorPalette.error.light, - }, + }, + withdrawFees: { + color: { + text: colorPalette.error.main, + border: colorPalette.error.light, }, - approve: { - color: { - text: colorPalette.warning.main, - border: colorPalette.warning.light, - }, + }, + approve: { + color: { + text: colorPalette.warning.main, + border: colorPalette.warning.light, }, - complete: { - color: { - text: colorPalette.success.main, - border: colorPalette.success.light, - }, + }, + complete: { + color: { + text: colorPalette.success.main, + border: colorPalette.success.light, }, - }; + }, +}; +export const TransactionTableCellMethod = ({ method }: { method: string }) => { const currentStatusColors = methodAttributes[method]?.color || { text: colorPalette.primary.main, border: colorPalette.primary.light, @@ -71,20 +71,14 @@ export const TransactionTableCellMethod = ({ method }: { method: string }) => { return ( - - {capitalize(method)} + + {method} ); diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx index 6e18d806de..e1f229a167 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx @@ -16,7 +16,7 @@ export const TransactionTableCellValue = ({ value }: { value: string }) => { return ( {formatHMTDecimals(value)} - HMT + HMT ); }; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx index 1bc9c3a454..d5b7f153af 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx @@ -6,6 +6,7 @@ import Box from '@mui/material/Box'; import IconButton from '@mui/material/IconButton'; import CircularProgress from '@mui/material/CircularProgress'; import AddCircleIcon from '@mui/icons-material/AddCircle'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'; import AbbreviateClipboard from '@components/SearchResults/AbbreviateClipboard'; import { colorPalette } from '@assets/styles/color-palette'; @@ -85,7 +86,7 @@ export const TransactionsTableBody: React.FC = () => { > - + {elem.internalTransactions.length > 0 && ( toggleRow(idx)} size="small"> {expandedRows[idx] ? ( @@ -109,11 +110,13 @@ export const TransactionsTableBody: React.FC = () => { /> - {' '} - + + + + {elem.block} @@ -140,10 +143,13 @@ export const TransactionsTableBody: React.FC = () => { /> - + + + + diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx index 14b256d731..75a2e6df0a 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx @@ -3,11 +3,22 @@ import Stack from '@mui/material/Stack'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import TableCell from '@mui/material/TableCell'; -import IconButton from '@mui/material/IconButton'; import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; import CustomTooltip from '@components/CustomTooltip'; +const InfoTooltip = ({ title }: { title: string }) => ( + + + +); + export const TransactionsTableHead = () => { return ( { }} > - + - - - - - Transaction Hash + - - - - - Method + @@ -57,32 +50,14 @@ export const TransactionsTableHead = () => { - - - - - Block + - - - - - Value + From b59ee75de40212d0b7dedb91dc2e611ecfaacec3 Mon Sep 17 00:00:00 2001 From: kirill Date: Mon, 19 May 2025 15:21:55 +0300 Subject: [PATCH 06/24] fix: time period buttons logic, numeric format of hmt balance, remove some tooltips --- .../components/DataEntry/ToggleButtons.tsx | 6 ++++- .../client/src/components/Header/Header.tsx | 2 +- .../pages/SearchResults/HmtBalance/index.tsx | 5 ++-- .../src/pages/SearchResults/KVStore/index.tsx | 23 ++++--------------- .../WalletAddress/WalletAddress.tsx | 2 +- .../hooks/use-graph-page-chart-params.tsx | 1 + 6 files changed, 16 insertions(+), 23 deletions(-) diff --git a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx index def28b1bd6..643411b155 100644 --- a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx +++ b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx @@ -7,6 +7,7 @@ import { TimePeriod, useGraphPageChartParams, } from '@utils/hooks/use-graph-page-chart-params'; +import dayjs from 'dayjs'; export const StyledToggleButtonGroup = styled(ToggleButtonGroup)( ({ theme }) => ({ @@ -26,7 +27,10 @@ const ToggleButtons = () => { const checkIfSelected = (element: TimePeriod) => { if (element.name !== 'ALL') { - return element.value.isSame(dateRangeParams.from); + return ( + element.value.isSame(dateRangeParams.from) && + dateRangeParams.to.isSame(dayjs(), 'day') + ); } }; diff --git a/packages/apps/dashboard/client/src/components/Header/Header.tsx b/packages/apps/dashboard/client/src/components/Header/Header.tsx index a19f45789f..b323190c2d 100644 --- a/packages/apps/dashboard/client/src/components/Header/Header.tsx +++ b/packages/apps/dashboard/client/src/components/Header/Header.tsx @@ -90,7 +90,7 @@ const Header: FC = () => { edge="start" color="inherit" aria-label="open drawer" - sx={{ display: { xs: 'block', md: 'none' } }} + sx={{ display: { xs: 'flex', md: 'none' } }} onClick={() => toggleDrawer(true)} > diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx index 39ad92082e..5a18e44cbb 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx @@ -23,14 +23,15 @@ const HmtBalance: FC = ({ balance }) => { return ...; } - const balanceInDollars = balance ? (balance * data).toFixed(2) : 0; + const _balance = Number(balance) * 1e18; + const balanceInDollars = balance ? (_balance * data).toFixed(2) : 0; return ( diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx index a40eb79388..3078b19642 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/KVStore/index.tsx @@ -1,16 +1,14 @@ import Typography from '@mui/material/Typography'; -import SectionWrapper from '@components/SectionWrapper'; - -import useKvstoreData from '@services/api/use-kvstore-data'; import TableBody from '@mui/material/TableBody'; import TableContainer from '@mui/material/TableContainer'; import Table from '@mui/material/Table'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; -import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; -import CustomTooltip from '@components/CustomTooltip'; + +import SectionWrapper from '@components/SectionWrapper'; +import useKvstoreData from '@services/api/use-kvstore-data'; const KVStore = () => { const { data } = useKvstoreData(); @@ -32,31 +30,20 @@ const KVStore = () => { borderBottom: '1px solid rgba(203, 207, 232, 0.80)', }, '& .MuiTableCell-root': { - px: 0, borderBottom: 'none', }, }} > - - - - - Key - + Key Value {data?.map((row) => ( - - {/* - - */} - {row.key} - + {row.key} {row.value} ))} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx index 5649dbc0fc..f27c42f28a 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx @@ -43,7 +43,7 @@ const WalletAddress: FC = ({ data }) => { {isWallet && ( {data?.totalAmountReceived} diff --git a/packages/apps/dashboard/client/src/utils/hooks/use-graph-page-chart-params.tsx b/packages/apps/dashboard/client/src/utils/hooks/use-graph-page-chart-params.tsx index ab811afc2b..0869e4dc69 100644 --- a/packages/apps/dashboard/client/src/utils/hooks/use-graph-page-chart-params.tsx +++ b/packages/apps/dashboard/client/src/utils/hooks/use-graph-page-chart-params.tsx @@ -95,6 +95,7 @@ export const useGraphPageChartParams = create((set) => ({ dateRangeParams: { ...state.dateRangeParams, from: timePeriod.value, + to: dayjs(), }, }; }); From 40bf1e73df04dad1d5950b956c37c52bfdf99a3d Mon Sep 17 00:00:00 2001 From: kirill Date: Tue, 20 May 2025 15:52:43 +0300 Subject: [PATCH 07/24] refactor: leaderboard table, some component, reorder imports, remove unused css modules and components --- .../src/assets/styles/_graph-swipper.scss | 6 +- .../client/src/assets/styles/_home-page.scss | 130 ----------------- .../components/DataEntry/ToggleButtons.tsx | 1 + .../client/src/components/Home/SmallGraph.tsx | 29 ++-- .../Leaderboard/components/AddressCell.tsx | 2 +- .../Leaderboard/components/CategoryCell.tsx | 14 +- .../Leaderboard/components/ChainCell.tsx | 2 +- .../components/DataGridWrapper.tsx | 70 ++++------ .../components/ReputationLabel.tsx | 36 ----- .../Leaderboard/components/RoleCell.tsx | 31 ++-- .../Leaderboard/components/SelectNetwork.tsx | 5 + .../Leaderboard/hooks/useDataGrid.tsx | 109 ++++++--------- .../Leaderboard/hooks/useDatagridOptions.tsx | 132 ------------------ .../client/src/features/Leaderboard/index.tsx | 38 +++-- .../client/src/pages/Home/HMTPrice.tsx | 18 +-- .../client/src/pages/Home/Holders.tsx | 12 +- .../dashboard/client/src/pages/Home/Home.tsx | 30 ++-- .../src/pages/Home/TotalNumberOfTasks.tsx | 28 ++-- .../src/pages/Home/TotalTransactions.tsx | 30 ++-- 19 files changed, 218 insertions(+), 505 deletions(-) delete mode 100644 packages/apps/dashboard/client/src/features/Leaderboard/components/ReputationLabel.tsx delete mode 100644 packages/apps/dashboard/client/src/features/Leaderboard/hooks/useDatagridOptions.tsx diff --git a/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss b/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss index d0e58f340b..bc3caf878a 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss @@ -1,5 +1,9 @@ .swiper-button-next, .swiper-button-prev { - top: 50% + top: 50%; + + @media (max-width: 1100px) { + top: 30%; + } } .swiper-button-next::after, .swiper-button-prev::after { diff --git a/packages/apps/dashboard/client/src/assets/styles/_home-page.scss b/packages/apps/dashboard/client/src/assets/styles/_home-page.scss index 0230e679ed..e0c55f0895 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_home-page.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_home-page.scss @@ -2,136 +2,6 @@ margin-top: 24px; } -.home-page-find { - font-size: 14px; - margin-top: 32px; - display: flex; - gap: 32px; - align-items: center; - height: 60px; - white-space: nowrap; - span { - display: flex; - align-items: center; - gap: 16px; - } - @media (max-width: 1100px) { - span { - min-width: 120px; - } - } -} - -.home-page-find-title-mobile { - margin-top: 32px; - font-size: 14px; - @media (max-width: 1100px) { - display: block; - } -} .home-page-leaderboard { margin-top: 60px; } - -.home-page-table-header { - background-color: $whiteSolid; - height: 72px; - color: #320a8d; - text-transform: uppercase; - border: 0; - margin-bottom: 15px; - - th { - font-size: 12px; - } - .icon-table { - display: flex; - align-items: center; - gap: 8px; - } -} - -.home-page-table-row { - td { - padding: 32px 16px; - font-size: 16px; - } - - .icon-table { - background-color: $groundwaterOpacity; - display: flex; - align-items: center; - justify-content: center; - border-radius: 10px; - width: 52px; - height: 52px; - } - - .reputation-table { - padding: 4px 8px; - border-radius: 16px; - font-size: 13px; - display: inline; - } - - .reputation-table-medium { - color: $medium; - border: 1px solid $mediumBorder; - } - - .reputation-table-low { - color: $low; - border: 1px solid $lowBorder; - } - - .reputation-table-high { - color: $high; - border: 1px solid $highBorder; - } - .reputation-table-soon { - color: $soon; - border: 1px solid $soonBorder; - } - - &:hover { - transition: opacity 8ms; - opacity: 0.8; - } -} - -#network-select { - svg { - display: none; - } -} - -.select-item { - display: flex; - gap: 10px; -} - -.mobile-select { - width: 270px; - background-color: $whiteSolid; - padding: 10px; - display: none; - margin-bottom: 20px; - @media (max-width: 1100px) { - display: block; - } -} - -.table-filter-select { - @media (max-width: 1100px) { - div { - display: none; - } - } - .mobile-title { - display: none; - font-weight: 400; - @media (max-width: 1100px) { - display: block; - } - } -} diff --git a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx index 643411b155..dfd54a2ef6 100644 --- a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx +++ b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx @@ -11,6 +11,7 @@ import dayjs from 'dayjs'; export const StyledToggleButtonGroup = styled(ToggleButtonGroup)( ({ theme }) => ({ + gap: 8, '.MuiToggleButtonGroup-grouped': { border: 'none', borderRadius: 4, diff --git a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx index c359e2ce7d..5d20c48d35 100644 --- a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx +++ b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx @@ -25,17 +25,19 @@ const CustomSmallChartTooltip = ({ if (active) { return ( - + {payload?.map((elem) => ( {formatDate(elem.payload.date, 'MMMM DD, YYYY')} - + {elem.value ? elem.value.toLocaleString('en-US') : ''} @@ -57,12 +59,14 @@ interface SmallGraphProps { const GraphSettings = ({ title }: { title: string }) => ( {title} @@ -74,10 +78,11 @@ const GraphSettings = ({ title }: { title: string }) => ( const SmallGraph = ({ title, graphData }: SmallGraphProps) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('md')); + return ( <> {!isMobile && } - + { > - - + + { stroke={colorPalette.fog.main} tickFormatter={formatNumber} /> - + } /> diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/AddressCell.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/AddressCell.tsx index e1699a869a..bfaa2633be 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/AddressCell.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/AddressCell.tsx @@ -8,7 +8,7 @@ export const AddressCell = ({ chainId: string; address: string; }) => ( - + value?.length ? ( - + + + ) : null; const getCategoryLabel = (category: string) => { diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/ChainCell.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/ChainCell.tsx index 32b40e4831..e341f5b7ba 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/ChainCell.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/ChainCell.tsx @@ -5,7 +5,7 @@ import { getNetwork } from '@utils/config/networks'; export const ChainCell = ({ chainId }: { chainId: number }) => ( { - const apiRef = useGridApiRef(); - const { columns, visibleRows } = useDataGrid(data); - const { customizedColumns, handleSortModelChange, pinnedColSx } = - useDatagridOptions<(typeof visibleRows)[number]>({ - apiRef, - columns, - isRowIdx: true, - pinnedColumnName: 'role', - }); + const { columns, rows } = useDataGrid(data); const { mobile: { isMobile }, } = useBreakPoints(); - const tableIsEmpty = status === 'success' && visibleRows.length === 0; + const tableIsEmpty = status === 'success' && rows.length === 0; const tableMinHeight = status === 'success' && !tableIsEmpty ? 'unset' : 300; return ( ({ + top: 4, + bottom: 0, + })} loading={status === 'pending'} - rows={visibleRows} - columns={customizedColumns} - autosizeOptions={{ - expand: true, - }} - onSortModelChange={handleSortModelChange} slots={{ noRowsOverlay() { if (status === 'error') { @@ -72,38 +67,30 @@ export const DataGridWrapper = ({ return ; }, }} - rowHeight={125} - columnHeaderHeight={72} sx={{ position: 'relative', border: 0, - marginBottom: '16px', + mb: 2, '& .MuiDataGrid-cell': { borderTop: 'none', - padding: '0 8px', + p: 2, overflow: 'visible !important', }, - '& .MuiDataGrid-row': { - borderTop: isMobile ? '15px solid rgb(255, 255, 255)' : '', - }, '& .MuiDataGrid-row:hover': { background: 'rgba(20, 6, 178, 0.04)', }, - '& .MuiDataGrid-cell:focus': { - outline: 'none', - }, - '& .MuiDataGrid-cell:focus-within': { + '& .MuiDataGrid-cell:focus, & .MuiDataGrid-cell:focus-within': { outline: 'none', }, '& .MuiDataGrid-columnSeparator--sideRight': { display: 'none', }, '& .MuiDataGrid-columnHeader': { - padding: '0 16px', + fontSize: '12px', + p: 2, overflow: 'visible !important', - }, - '& .MuiDataGrid-columnHeader:hover': { - color: 'rgb(133, 142, 198)', + textTransform: 'uppercase', + bgcolor: colorPalette.whiteSolid, }, '& .MuiDataGrid-row--borderBottom .MuiDataGrid-withBorderColor': { borderColor: 'transparent', @@ -116,6 +103,7 @@ export const DataGridWrapper = ({ }, '& .MuiDataGrid-columnHeaderTitleContainer': { overflow: 'unset', + whiteSpace: 'normal', }, '& .MuiDataGrid-columnHeader:focus': { outline: 'none', @@ -126,9 +114,7 @@ export const DataGridWrapper = ({ '& .MuiDataGrid-filler': { display: 'none', }, - ...pinnedColSx, }} - getRowClassName={() => 'home-page-table-row'} /> ); diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/ReputationLabel.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/ReputationLabel.tsx deleted file mode 100644 index 7ace7dc2af..0000000000 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/ReputationLabel.tsx +++ /dev/null @@ -1,36 +0,0 @@ -export const ReputationLabel: React.FC<{ reputation: string }> = ({ - reputation, -}) => { - switch (reputation) { - case 'High': - return ( -
- {reputation} -
- ); - case 'Medium': - return ( -
- {reputation} -
- ); - case 'Low': - return ( -
- {reputation} -
- ); - case 'Coming soon': - return ( -
- {reputation} -
- ); - default: - return ( -
- Coming soon -
- ); - } -}; diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx index 56a154a708..b6dd62bf54 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx @@ -30,10 +30,12 @@ const Wrapper = ({ }; export const RoleCell = ({ + rank, role, websiteUrl, name, }: { + rank: number; role: string; websiteUrl?: string; name?: string; @@ -42,34 +44,25 @@ export const RoleCell = ({ mobile: { isMobile }, } = useBreakPoints(); const humanReadableRole = CaseConverter.convertSnakeToHumanReadable(role); + const formattedName = name ? name.split(' ')[0] : null; + return ( - - {!isMobile && } + + + {rank} + + - - {name ?? humanReadableRole} + + {formattedName ?? humanReadableRole} {websiteUrl ? : null} {name && role ? ( - + {humanReadableRole} ) : null} diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/SelectNetwork.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/SelectNetwork.tsx index dfc9488530..d946d1b187 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/SelectNetwork.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/SelectNetwork.tsx @@ -59,6 +59,11 @@ export const SelectNetwork = () => { value={chainId === -1 ? '' : chainId} label="By Network" onChange={handleChange} + sx={{ + '& #network-select svg': { + display: 'none', + }, + }} > {filteredNetworks.map((network) => ( { +import { LeaderBoardData } from '@services/api/use-leaderboard-details'; +import { useBreakPoints } from '@utils/hooks/use-is-mobile'; +import { useLeaderboardSearch } from '@utils/hooks/use-leaderboard-search'; + +// eslint-disable-next-line react-refresh/only-export-components +const InfoTooltip = ({ title }: { title: string }) => ( + + + +); + +const useDataGrid = (data: LeaderBoardData) => { const { filterParams: { chainId }, } = useLeaderboardSearch(); @@ -32,7 +45,7 @@ export const useDataGrid = (data: LeaderBoardData) => { }); }, [data]); - const visibleRows = useMemo(() => { + const rows = useMemo(() => { if (chainId !== -1) { return formattedData.filter((elem) => elem.chainId === chainId); } @@ -40,24 +53,17 @@ export const useDataGrid = (data: LeaderBoardData) => { return formattedData; }, [formattedData, chainId]); - const columns: GridColDef<(typeof visibleRows)[number]>[] = useMemo( + const columns: GridColDef[] = useMemo( () => [ { field: 'role', + flex: 1.5, + minWidth: isMobile ? 250 : 340, sortable: false, - flex: isMobile ? 0.8 : 1.5, - minWidth: isMobile ? 100 : 360, - headerClassName: isMobile - ? 'home-page-table-header pinned-column--header' - : 'home-page-table-header', - cellClassName: isMobile ? 'pinned-column--cell' : '', - renderHeader: () => ( - - Role - - ), + renderHeader: () => Role, renderCell: (params: GridRenderCellParams) => ( { field: 'address', sortable: false, flex: 1, - minWidth: 150, - headerClassName: 'home-page-table-header', + minWidth: isMobile ? 180 : 260, renderHeader: () => ( - - - - - - Address - + + + Address ), renderCell: (params: GridRenderCellParams) => ( @@ -90,21 +87,13 @@ export const useDataGrid = (data: LeaderBoardData) => { }, { field: 'amountStaked', + sortable: false, flex: 1, - minWidth: 130, - headerClassName: 'home-page-table-header', + minWidth: isMobile ? 130 : 260, renderHeader: () => ( - - - - - - Stake - + + + Stake ), valueFormatter: (value: string) => { @@ -118,16 +107,12 @@ export const useDataGrid = (data: LeaderBoardData) => { field: 'chainId', headerName: 'Network', flex: isMobile ? 1 : 1.5, - sortable: false, - minWidth: isMobile ? 150 : 245, - headerClassName: 'home-page-table-header', + minWidth: isMobile ? 130 : 245, renderHeader: () => { return ( <> {isMobile ? ( - - Network - + Network ) : ( )} @@ -140,25 +125,21 @@ export const useDataGrid = (data: LeaderBoardData) => { }, { field: 'category', - minWidth: 200, + sortable: false, + minWidth: isMobile ? 180 : 260, headerName: 'Category', - headerClassName: 'home-page-table-header', - renderHeader: () => ( - - Category - - ), + renderHeader: () => Category, renderCell: (params: GridRenderCellParams) => ( ), }, { field: 'fee', - minWidth: 150, + sortable: false, + minWidth: isMobile ? 100 : 130, headerName: 'Operator Fee', - headerClassName: 'home-page-table-header', renderHeader: () => ( - + Operator Fee ), @@ -179,6 +160,8 @@ export const useDataGrid = (data: LeaderBoardData) => { return { columns, - visibleRows, + rows, }; }; + +export default useDataGrid; diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/hooks/useDatagridOptions.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/hooks/useDatagridOptions.tsx deleted file mode 100644 index 94386e4bdb..0000000000 --- a/packages/apps/dashboard/client/src/features/Leaderboard/hooks/useDatagridOptions.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import { Typography } from '@mui/material'; -import { - GridColDef, - GridRenderCellParams, - GridSortModel, - GridCallbackDetails, - GridValidRowModel, -} from '@mui/x-data-grid'; -import { GridApiCommunity } from '@mui/x-data-grid/models/api/gridApiCommunity'; -import { useMemo, useCallback, MutableRefObject } from 'react'; -import { useBreakPoints } from '@utils/hooks/use-is-mobile'; - -interface IColPossibleOptions { - isRowIdx?: boolean; - pinnedColumnName?: string; -} - -interface IProps extends IColPossibleOptions { - columns: GridColDef[]; - apiRef: MutableRefObject; -} - -export function useDatagridOptions({ - apiRef, - columns, - isRowIdx, - pinnedColumnName, -}: IProps) { - const { - mobile: { isMobile }, - } = useBreakPoints(); - - const handlePinnedColOption = useCallback( - (cols: GridColDef[]) => - cols.map((col) => - col.field === pinnedColumnName - ? { - ...col, - headerClassName: isMobile - ? 'home-page-table-header pinned-column--header' - : 'home-page-table-header', - cellClassName: isMobile ? 'pinned-column--cell' : '', - } - : col - ), - [isMobile, pinnedColumnName] - ); - - const handleRowOrderNum = useCallback( - (cols: GridColDef[]) => { - return isMobile - ? cols - : [ - { - field: 'rowIndex', - headerName: '', - width: 30, - headerClassName: 'home-page-table-header', - sortable: false, - renderCell: (params: GridRenderCellParams) => { - return ( - - {params.value + 1} - - ); - }, - }, - ...cols, - ]; - }, - [isMobile] - ); - - const handleColumnOptions = useCallback( - (cols: GridColDef[]) => { - let colsWithOptions = cols; - if (isRowIdx) { - colsWithOptions = handleRowOrderNum(colsWithOptions); - } - if (pinnedColumnName) { - colsWithOptions = handlePinnedColOption(colsWithOptions); - } - - return colsWithOptions; - }, - [handlePinnedColOption, handleRowOrderNum, isRowIdx, pinnedColumnName] - ); - - const handleSortModelChange = useCallback( - (_model: GridSortModel, details: GridCallbackDetails) => { - apiRef.current.applySorting(); - const sortedRows = details.api.getSortedRows(); - sortedRows.forEach((row, index) => { - apiRef.current.updateRows([{ ...row, rowIndex: index }]); - }); - }, - [apiRef] - ); - - const pinnedColSx = { - '& .pinned-column--header': { - position: 'sticky', - left: 0, - zIndex: 1000, - transform: 'translateZ(0)', - }, - '& .pinned-column--cell': { - position: 'sticky', - left: 0, - zIndex: 1000, - background: '#fff', - transform: 'translateZ(0)', - borderRight: isMobile ? '1px solid rgb(224, 224, 224)' : '', - }, - }; - - const customizedColumns: GridColDef[] = useMemo( - () => handleColumnOptions(columns), - [columns, handleColumnOptions] - ); - - return { - customizedColumns, - handleSortModelChange, - pinnedColSx, - }; -} diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx index 40b5a20ea5..7783d2f7ca 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx @@ -1,41 +1,52 @@ -import { colorPalette } from '@assets/styles/color-palette'; +import { FC } from 'react'; + +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; import TableContainer from '@mui/material/TableContainer'; -import { LeaderBoardData } from '@services/api/use-leaderboard-details'; import { useNavigate } from 'react-router-dom'; import SimpleBar from 'simplebar-react'; + import { SelectNetwork } from './components/SelectNetwork'; import { DataGridWrapper } from './components/DataGridWrapper'; -import { Button, Typography } from '@mui/material'; +import { LeaderBoardData } from '@services/api/use-leaderboard-details'; +import { colorPalette } from '@assets/styles/color-palette'; -export type LeaderboardCommonProps = { +type Props = { data: LeaderBoardData | undefined; status: 'success' | 'error' | 'pending'; error: unknown; + viewAllBanner?: boolean; }; -export const Leaderboard = ({ +export const Leaderboard: FC = ({ data, status, error, viewAllBanner, -}: LeaderboardCommonProps & { - viewAllBanner?: boolean; }) => { const navigate = useNavigate(); return ( -
+ -
+ @@ -43,7 +54,8 @@ export const Leaderboard = ({ diff --git a/packages/apps/dashboard/client/src/pages/Home/TotalNumberOfTasks.tsx b/packages/apps/dashboard/client/src/pages/Home/TotalNumberOfTasks.tsx index 26a8bb850d..3e4c90922e 100644 --- a/packages/apps/dashboard/client/src/pages/Home/TotalNumberOfTasks.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/TotalNumberOfTasks.tsx @@ -1,20 +1,22 @@ -import { useHcaptchaGeneralStats } from '@services/api/use-hcaptcha-general-stats'; +import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; + import { FormatNumber } from '@components/Home/FormatNumber'; +import { useHcaptchaGeneralStats } from '@services/api/use-hcaptcha-general-stats'; -export function TotalNumberOfTasks() { - const { data, status } = useHcaptchaGeneralStats(); +const TotalNumberOfTasks = () => { + const { data, isError, isPending, isSuccess } = useHcaptchaGeneralStats(); return ( -
- - Total Number of Tasks + + Total Number of Tasks + + {isSuccess && } + {isPending && '...'} + {isError && 'No data'} -
- {status === 'success' && } - {status === 'pending' && '...'} - {status === 'error' && 'No data'} -
-
+ ); -} +}; + +export default TotalNumberOfTasks; diff --git a/packages/apps/dashboard/client/src/pages/Home/TotalTransactions.tsx b/packages/apps/dashboard/client/src/pages/Home/TotalTransactions.tsx index 82bf49cab7..6c4ada399a 100644 --- a/packages/apps/dashboard/client/src/pages/Home/TotalTransactions.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/TotalTransactions.tsx @@ -1,22 +1,22 @@ -import { FormatNumber } from '@components/Home/FormatNumber'; +import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; + +import { FormatNumber } from '@components/Home/FormatNumber'; import { useGeneralStats } from '@services/api/use-general-stats'; -export function TotalTransactions() { - const { data, status } = useGeneralStats(); +const TotalTransactions = () => { + const { data, isError, isPending, isSuccess } = useGeneralStats(); return ( -
- - Total Transactions + + Total Transactions + + {isSuccess && } + {isPending && '...'} + {isError && 'No data'} -
- {status === 'success' && ( - - )} - {status === 'pending' && '...'} - {status === 'error' && 'No data'} -
-
+ ); -} +}; + +export default TotalTransactions; From 5767773329f0b8da41c3abf2400d2649edb46085 Mon Sep 17 00:00:00 2001 From: kirill Date: Tue, 20 May 2025 16:35:22 +0300 Subject: [PATCH 08/24] refactor: use-breakpoints hook, some components, remove needless files --- packages/apps/dashboard/client/src/App.css | 0 packages/apps/dashboard/client/src/App.tsx | 10 ++-- .../src/assets/styles/_graph-swipper.scss | 2 +- .../components/SearchBar/SearchBar.styles.ts | 17 ++---- .../src/components/SearchBar/SearchBar.tsx | 14 +++-- .../components/DataGridWrapper.tsx | 6 +-- .../Leaderboard/components/RoleCell.tsx | 6 +-- .../Leaderboard/components/SelectNetwork.tsx | 6 +-- .../Leaderboard/hooks/useDataGrid.tsx | 7 ++- packages/apps/dashboard/client/src/index.css | 0 .../client/src/pages/Home/Holders.tsx | 2 +- .../dashboard/client/src/pages/Home/Home.tsx | 6 +-- .../client/src/pages/Leaderboard/index.tsx | 4 +- .../pages/SearchResults/HmtBalance/index.tsx | 6 +-- .../src/utils/hooks/use-breakpoints.tsx | 54 +++++++++++++++++++ .../client/src/utils/hooks/use-is-mobile.tsx | 15 ------ 16 files changed, 88 insertions(+), 67 deletions(-) delete mode 100644 packages/apps/dashboard/client/src/App.css delete mode 100644 packages/apps/dashboard/client/src/index.css create mode 100644 packages/apps/dashboard/client/src/utils/hooks/use-breakpoints.tsx delete mode 100644 packages/apps/dashboard/client/src/utils/hooks/use-is-mobile.tsx diff --git a/packages/apps/dashboard/client/src/App.css b/packages/apps/dashboard/client/src/App.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/apps/dashboard/client/src/App.tsx b/packages/apps/dashboard/client/src/App.tsx index 5ed277c1f9..fd00554e6d 100644 --- a/packages/apps/dashboard/client/src/App.tsx +++ b/packages/apps/dashboard/client/src/App.tsx @@ -1,11 +1,13 @@ -import React from 'react'; +import { FC } from 'react'; + import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; -import Home from '@pages/Home'; + import Graph from '@pages/Graph'; +import Home from '@pages/Home'; +import LeaderBoard from '@pages/Leaderboard'; import SearchResults from '@pages/SearchResults'; -import { LeaderBoard } from '@pages/Leaderboard'; -const App: React.FC = () => { +const App: FC = () => { return ( diff --git a/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss b/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss index bc3caf878a..70b3f74ea0 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_graph-swipper.scss @@ -1,7 +1,7 @@ .swiper-button-next, .swiper-button-prev { top: 50%; - @media (max-width: 1100px) { + @media (max-width: 900px) { top: 30%; } } diff --git a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.styles.ts b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.styles.ts index 228cd04a4c..20a24ae2c5 100644 --- a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.styles.ts +++ b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.styles.ts @@ -22,10 +22,7 @@ export const gridSx = { overflow: 'hidden', }; -export const muiSelectSx = (mobile: { - isMobile: boolean; - mediaQuery: string; -}) => ({ +export const muiSelectSx = () => ({ backgroundColor: `${colorPalette.white}`, width: 'unset', fontSize: '16px', @@ -41,9 +38,6 @@ export const muiSelectSx = (mobile: { backgroundColor: `${colorPalette.white}`, border: 0, }, - [mobile.mediaQuery]: { - width: 'unset', - }, }); export const menuItemSx = (isSelected: boolean) => ({ @@ -66,16 +60,11 @@ export const muiTextFieldInputPropsSx = (borderColor: string) => ({ padding: '0 5px', }); -export const muiTextFieldSx = (mobile: { - isMobile: boolean; - mediaQuery: string; -}) => ({ +export const muiTextFieldSx = (isMobile: boolean) => ({ fontSize: '16px', '& .MuiOutlinedInput-root': { '& input': { - [mobile.mediaQuery]: { - padding: '12px 0px', - }, + padding: isMobile ? '12px 0px' : '16px 0px', }, '& fieldset': { border: 'none', diff --git a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx index f9cd5b0fd7..b7490bbe70 100644 --- a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx +++ b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx @@ -17,7 +17,7 @@ import { } from '@mui/material'; import { colorPalette } from '@assets/styles/color-palette'; import { useFilteredNetworks } from '@utils/hooks/use-filtered-networks'; -import { useBreakPoints } from '@utils/hooks/use-is-mobile'; +import { useIsMobile } from '@utils/hooks/use-breakpoints'; import { NetworkIcon } from '@components/NetworkIcon'; import { useWalletSearch } from '@utils/hooks/use-wallet-search'; import { @@ -40,7 +40,7 @@ const SearchBar: FC = ({ className = '', initialInputValue = '', }) => { - const { mobile } = useBreakPoints(); + const isMobile = useIsMobile(); const { filteredNetworks, isLoading } = useFilteredNetworks(); const { filterParams, setChainId, setAddress } = useWalletSearch(); const navigate = useNavigate(); @@ -115,7 +115,7 @@ const SearchBar: FC = ({ } />
- {mobile.isMobile || filterParams.chainId === -1 + {isMobile || filterParams.chainId === -1 ? null : filteredNetworks.find((n) => n.id === filterParams.chainId)?.name || ''} @@ -135,7 +135,7 @@ const SearchBar: FC = ({ error={!!error} helperText={error} fullWidth - sx={muiTextFieldSx(mobile)} + sx={muiTextFieldSx(isMobile)} InputProps={{ sx: muiTextFieldInputPropsSx( focus ? colorPalette.secondary.main : colorPalette.skyOpacity @@ -148,7 +148,7 @@ const SearchBar: FC = ({ value={filterParams.chainId} displayEmpty - sx={muiSelectSx(mobile)} + sx={muiSelectSx()} onChange={handleSelectChange} renderValue={() => filterParams.chainId === -1 @@ -188,9 +188,7 @@ const SearchBar: FC = ({ type="submit" aria-label="search" sx={{ - [mobile.mediaQuery]: { - padding: '4px', - }, + padding: { xs: '4px', md: '0px' }, }} > { const { columns, rows } = useDataGrid(data); - const { - mobile: { isMobile }, - } = useBreakPoints(); + const isMobile = useIsMobile(); const tableIsEmpty = status === 'success' && rows.length === 0; const tableMinHeight = status === 'success' && !tableIsEmpty ? 'unset' : 300; diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx index b6dd62bf54..c51ab16f9c 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx @@ -1,6 +1,6 @@ import { Box, Typography } from '@mui/material'; import { Launch as LaunchIcon } from '@mui/icons-material'; -import { useBreakPoints } from '@utils/hooks/use-is-mobile'; +import { useIsMobile } from '@utils/hooks/use-breakpoints'; import { Link } from 'react-router-dom'; import { EntityIcon } from './EntityIcon'; import { CaseConverter } from '@utils/case-converter'; @@ -40,9 +40,7 @@ export const RoleCell = ({ websiteUrl?: string; name?: string; }) => { - const { - mobile: { isMobile }, - } = useBreakPoints(); + const isMobile = useIsMobile(); const humanReadableRole = CaseConverter.convertSnakeToHumanReadable(role); const formattedName = name ? name.split(' ')[0] : null; diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/SelectNetwork.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/SelectNetwork.tsx index d946d1b187..8ce48e5d04 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/SelectNetwork.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/SelectNetwork.tsx @@ -5,7 +5,7 @@ import MenuItem from '@mui/material/MenuItem'; import Box from '@mui/material/Box'; import { useLeaderboardSearch } from '@utils/hooks/use-leaderboard-search'; import { useFilteredNetworks } from '@utils/hooks/use-filtered-networks'; -import { useBreakPoints } from '@utils/hooks/use-is-mobile'; +import { useIsMobile } from '@utils/hooks/use-breakpoints'; import { NetworkIcon } from '@components/NetworkIcon'; import CircularProgress from '@mui/material/CircularProgress'; import { useEffect } from 'react'; @@ -24,9 +24,7 @@ export const SelectNetwork = () => { } }, [chainId, filteredNetworks, setChainId]); - const { - mobile: { isMobile }, - } = useBreakPoints(); + const isMobile = useIsMobile(); const handleChange = (event: SelectChangeEvent) => { const value = Number(event.target.value); diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/hooks/useDataGrid.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/hooks/useDataGrid.tsx index 6320fafd26..6480ae130b 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/hooks/useDataGrid.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/hooks/useDataGrid.tsx @@ -13,7 +13,7 @@ import { TextCell } from '../components/TextCell'; import { CategoryCell } from '../components/CategoryCell'; import { LeaderBoardData } from '@services/api/use-leaderboard-details'; -import { useBreakPoints } from '@utils/hooks/use-is-mobile'; +import { useIsMobile } from '@utils/hooks/use-breakpoints'; import { useLeaderboardSearch } from '@utils/hooks/use-leaderboard-search'; // eslint-disable-next-line react-refresh/only-export-components @@ -32,9 +32,8 @@ const useDataGrid = (data: LeaderBoardData) => { filterParams: { chainId }, } = useLeaderboardSearch(); - const { - mobile: { isMobile }, - } = useBreakPoints(); + const isMobile = useIsMobile(); + const formattedData = useMemo(() => { return data.map((row, idx) => { return { diff --git a/packages/apps/dashboard/client/src/index.css b/packages/apps/dashboard/client/src/index.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/apps/dashboard/client/src/pages/Home/Holders.tsx b/packages/apps/dashboard/client/src/pages/Home/Holders.tsx index dde33fc333..bcaf80c17d 100644 --- a/packages/apps/dashboard/client/src/pages/Home/Holders.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/Holders.tsx @@ -8,7 +8,7 @@ const Holders = () => { const { data, isSuccess, isPending, isError } = useGeneralStats(); return ( - + Holders diff --git a/packages/apps/dashboard/client/src/pages/Home/Home.tsx b/packages/apps/dashboard/client/src/pages/Home/Home.tsx index 68160cf5e9..6e2e9fbb73 100644 --- a/packages/apps/dashboard/client/src/pages/Home/Home.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/Home.tsx @@ -21,7 +21,7 @@ import TotalTransactions from '@pages/Home/TotalTransactions'; import { LeaderboardIcon } from '@components/Icons/LeaderboardIcon'; import CustomTooltip from '@components/CustomTooltip'; -import { useBreakPoints } from '@utils/hooks/use-is-mobile'; +import { useIsMobile } from '@utils/hooks/use-breakpoints'; const CardWrapper = styled(Grid)(({ theme }) => ({ display: 'flex', @@ -43,9 +43,7 @@ const InfoTooltip = ({ title }: { title: string }) => ( ); const Home: FC = () => { - const { - mobile: { isMobile }, - } = useBreakPoints(); + const isMobile = useIsMobile(); return ( diff --git a/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx b/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx index 1a2a7f2d48..60f93d1732 100644 --- a/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx +++ b/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx @@ -5,7 +5,7 @@ import { Leaderboard } from '../../features/Leaderboard/index'; import { useLeaderboardDetails } from '@services/api/use-leaderboard-details'; import { LeaderboardIcon } from '@components/Icons/LeaderboardIcon'; -export const LeaderBoard = () => { +const LeaderBoard = () => { const { data, status, error } = useLeaderboardDetails(); return ( @@ -20,3 +20,5 @@ export const LeaderBoard = () => { ); }; + +export default LeaderBoard; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx index 5a18e44cbb..900f9ac848 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx @@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography'; import { NumericFormat } from 'react-number-format'; import { useHMTPrice } from '@services/api/use-hmt-price'; -import { useBreakPoints } from '@utils/hooks/use-is-mobile'; +import { useIsMobile } from '@utils/hooks/use-breakpoints'; type Props = { balance?: number | null; @@ -13,7 +13,7 @@ type Props = { const HmtBalance: FC = ({ balance }) => { const { data, isError, isPending } = useHMTPrice(); - const { mobile } = useBreakPoints(); + const isMobile = useIsMobile(); if (isError) { return N/A; @@ -33,7 +33,7 @@ const HmtBalance: FC = ({ balance }) => { displayType="text" value={_balance} thousandSeparator="," - decimalScale={mobile.isMobile ? 4 : 9} + decimalScale={isMobile ? 4 : 9} /> { + const matchesXs = useMediaQuery(breakpoints.xs); + const matchesSm = useMediaQuery(breakpoints.sm); + const matchesMd = useMediaQuery(breakpoints.md); + const matchesLg = useMediaQuery(breakpoints.lg); + const matchesXl = useMediaQuery(breakpoints.xl); + + return { + xs: { + isActive: matchesXs, + mediaQuery: `@media ${breakpoints.xs}`, + }, + sm: { + isActive: matchesSm, + mediaQuery: `@media ${breakpoints.sm}`, + }, + md: { + isActive: matchesMd, + mediaQuery: `@media ${breakpoints.md}`, + }, + lg: { + isActive: matchesLg, + mediaQuery: `@media ${breakpoints.lg}`, + }, + xl: { + isActive: matchesXl, + mediaQuery: `@media ${breakpoints.xl}`, + }, + }; +}; + +export const useIsMobile = () => { + const { xs, sm } = useBreakpoints(); + return xs.isActive || sm.isActive; +}; diff --git a/packages/apps/dashboard/client/src/utils/hooks/use-is-mobile.tsx b/packages/apps/dashboard/client/src/utils/hooks/use-is-mobile.tsx deleted file mode 100644 index b0c520f018..0000000000 --- a/packages/apps/dashboard/client/src/utils/hooks/use-is-mobile.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import useMediaQuery from '@mui/material/useMediaQuery'; - -const breakpoints = { - mobile: `(max-width: 1100px)`, -}; - -export function useBreakPoints() { - const matchesMobile = useMediaQuery(breakpoints.mobile); - return { - mobile: { - isMobile: matchesMobile, - mediaQuery: `@media ${breakpoints.mobile}`, - }, - }; -} From 172a5c8d80c66892a8f5cfa2b1d5431c73fa6c56 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 15:39:07 +0300 Subject: [PATCH 09/24] refactor: remove footer scss and changed footer component, other minor changes --- .../client/src/assets/styles/_footer.scss | 72 --------- .../src/assets/styles/_page-wrapper.scss | 23 ++- .../client/src/assets/styles/main.scss | 1 - .../client/src/components/Footer/Footer.tsx | 153 ++++++++++++------ .../client/src/components/Home/SmallGraph.tsx | 2 +- .../client/src/pages/Graph/Graph.tsx | 2 +- .../client/src/pages/Leaderboard/index.tsx | 2 +- .../src/pages/SearchResults/SearchResults.tsx | 2 +- packages/apps/dashboard/client/src/theme.tsx | 21 ++- 9 files changed, 130 insertions(+), 148 deletions(-) delete mode 100644 packages/apps/dashboard/client/src/assets/styles/_footer.scss diff --git a/packages/apps/dashboard/client/src/assets/styles/_footer.scss b/packages/apps/dashboard/client/src/assets/styles/_footer.scss deleted file mode 100644 index 9942d4a1d9..0000000000 --- a/packages/apps/dashboard/client/src/assets/styles/_footer.scss +++ /dev/null @@ -1,72 +0,0 @@ -footer{ - min-height: 124px; - margin-top: auto; - @media(max-width: 1100px) { - padding: 0 24px; - flex-direction: column-reverse; - justify-content: center; - align-items: center; - background-color: $maWhite; - } - - .footer-wrapper { - display: flex; - padding: 32px 18px; - flex-direction: row; - justify-content: space-between; - align-items: stretch; - - @media (max-width: 1100px) { - flex-direction: column-reverse; - } - } - - .footer-link { - gap: 24px; - margin-bottom: 24px; - align-items: flex-start; - } - - .footer-icon { - justify-content: flex-start; - gap: 30px; - margin-bottom: 0; - align-items: flex-end; - - @media (max-width: 600px) { - justify-content: space-between; - align-items: flex-start; - margin-bottom: 32px; - } - - @media (max-width: 1100px) { - margin-bottom: 32px; - } - } - - .footer-link, .footer-icon{ - display: flex; - flex-wrap: wrap; - span { - cursor: pointer; - font-size: 12px; - } - svg { - font-size: 32px; - cursor: pointer; - } - } - - @media (max-width: 1100px) { - .footer-link-wrapper{ - .footer-link{ - flex-direction: column; - } - } - } - - .footer-link, .footer-icon{ - justify-content: flex-start; - align-items: flex-start; - } -} diff --git a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss index 7423218594..40cfd6e264 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss @@ -1,15 +1,10 @@ .page-wrapper { margin: 0 56px; - min-height: calc(100vh - 206px); - display: flex; - flex-direction: column; padding: 0; - height: 100dvh; + min-height: 100dvh; + background-color: $maWhite; @media (max-width: 1280px) { - border-radius: 0; - height: auto; - min-height: calc(100vh - 386px); margin: 0 24px; } @@ -17,7 +12,7 @@ margin: auto; padding: 30px 80px 100px; - @media (max-width: 1100px) { + @media (max-width: 1200px) { padding: 24px 16px; } } @@ -33,12 +28,12 @@ background-size: 100% 100%; background: linear-gradient(to bottom, $primary 252px, $maWhite 1px); + @media (max-width: 900px) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + @media (max-width: 600px) { - border-top-left-radius: 0; - border-top-right-radius: 0; + border-radius: 0; } } - -.standard-background { - background-color: $maWhite; -} diff --git a/packages/apps/dashboard/client/src/assets/styles/main.scss b/packages/apps/dashboard/client/src/assets/styles/main.scss index 91c7e4b2c1..2ddc2cf6e3 100644 --- a/packages/apps/dashboard/client/src/assets/styles/main.scss +++ b/packages/apps/dashboard/client/src/assets/styles/main.scss @@ -1,6 +1,5 @@ @import 'const'; @import 'page-wrapper'; -@import 'footer'; @import 'home-page'; @import 'search'; @import 'shadow-icon'; diff --git a/packages/apps/dashboard/client/src/components/Footer/Footer.tsx b/packages/apps/dashboard/client/src/components/Footer/Footer.tsx index f89a3f7dcd..31e4281a67 100644 --- a/packages/apps/dashboard/client/src/components/Footer/Footer.tsx +++ b/packages/apps/dashboard/client/src/components/Footer/Footer.tsx @@ -1,83 +1,132 @@ import { FC } from 'react'; + +import Box from '@mui/material/Box'; +import Link from '@mui/material/Link'; +import { IconButton, styled } from '@mui/material'; import Typography from '@mui/material/Typography'; import TwitterIcon from '@mui/icons-material/Twitter'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; import GitHubIcon from '@mui/icons-material/GitHub'; import TelegramIcon from '@mui/icons-material/Telegram'; + import DiscordIcon from '@components/Icons/DiscordIcon'; -import { colorPalette } from '@assets/styles/color-palette'; import { env } from '@helpers/env'; +const StyledLink = styled(Link)(({ theme }) => ({ + textDecoration: 'none', + color: theme.palette.text.secondary, + '&:visited': { + color: theme.palette.text.secondary, + }, +})); + +const SocialMediaIconButton = styled(IconButton)(({ theme }) => ({ + padding: 0, + color: theme.palette.text.secondary, + + '&:hover': { + background: 'none', + color: 'inherit', + }, + '& > svg': { + fontSize: '32px', + }, +})); + const Footer: FC = () => { const handleClick = (url: string) => { window.open(url, '_blank'); }; return ( -
-
-
-
- handleClick(env.VITE_FOOTER_LINK_PRIVACY_POLICY)} + + + + + Privacy Policy - - handleClick(env.VITE_FOOTER_LINK_TERMS_OF_SERVICE)} + + Terms of Service - - handleClick(env.VITE_FOOTER_LINK_HUMAN_PROTOCOL)} + + HUMAN Protocol - -
- + + + © 2021 HPF. HUMAN Protocol® is a registered trademark -
-
- + + handleClick(env.VITE_FOOTER_LINK_GITHUB)} - /> - + + + handleClick(env.VITE_FOOTER_LINK_DISCORD)} - /> - + + + handleClick(env.VITE_FOOTER_LINK_X)} - /> - + + + handleClick(env.VITE_FOOTER_LINK_TELEGRAM)} - /> - + + + handleClick(env.VITE_FOOTER_LINK_LINKEDIN)} - /> -
-
-
+ > + + + + + ); }; diff --git a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx index 5d20c48d35..82cebe9b6d 100644 --- a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx +++ b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx @@ -34,7 +34,7 @@ const CustomSmallChartTooltip = ({ {payload?.map((elem) => ( - + {formatDate(elem.payload.date, 'MMMM DD, YYYY')} diff --git a/packages/apps/dashboard/client/src/pages/Graph/Graph.tsx b/packages/apps/dashboard/client/src/pages/Graph/Graph.tsx index 0441976ec4..fe543ec3c9 100644 --- a/packages/apps/dashboard/client/src/pages/Graph/Graph.tsx +++ b/packages/apps/dashboard/client/src/pages/Graph/Graph.tsx @@ -13,7 +13,7 @@ const Graph = () => { }, []); return ( - + diff --git a/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx b/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx index 60f93d1732..1abbc0e577 100644 --- a/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx +++ b/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx @@ -9,7 +9,7 @@ const LeaderBoard = () => { const { data, status, error } = useLeaderboardDetails(); return ( - + { }, [address, chainId, paramsStatus]); return ( - + {paramsStatus === ParamsStatus.LOADING && ( diff --git a/packages/apps/dashboard/client/src/theme.tsx b/packages/apps/dashboard/client/src/theme.tsx index 3176fd2ae5..2a6915a090 100644 --- a/packages/apps/dashboard/client/src/theme.tsx +++ b/packages/apps/dashboard/client/src/theme.tsx @@ -13,6 +13,7 @@ declare module '@mui/material/Typography' { ['Components/Button Large']: true; ['Components/Chip']: true; ['Components/Table Header']: true; + ['Components/Tooltip']: true; ['H6-Mobile']: true; body3: true; } @@ -24,6 +25,7 @@ declare module '@mui/material/styles' { ['Components/Button Large']: CSSProperties; ['Components/Chip']: CSSProperties; ['Components/Table Header']: CSSProperties; + ['Components/Tooltip']: CSSProperties; ['H6-Mobile']: CSSProperties; body3: CSSProperties; } @@ -34,6 +36,7 @@ declare module '@mui/material/styles' { ['Components/Button Large']?: CSSProperties; ['Components/Chip']?: CSSProperties; ['Components/Table Header']?: CSSProperties; + ['Components/Tooltip']?: CSSProperties; ['H6-Mobile']: CSSProperties; body3?: CSSProperties; } @@ -97,10 +100,10 @@ const theme: ThemeOptions = createTheme({ contrastText: colorPalette.sky.contrastText, }, white: { - main: '#fff', - light: '#fff', - dark: '#fff', - contrastText: '#fff', + main: '#ffffff', + light: '#ffffff', + dark: '#f6f7fe', + contrastText: '#ffffff', }, }, typography: { @@ -182,6 +185,11 @@ const theme: ThemeOptions = createTheme({ letterSpacing: '0.17px', textAlign: 'left', }, + 'Components/Tooltip': { + fontSize: 10, + fontWeight: 500, + lineHeight: '14px', + }, subtitle1: { fontSize: 12, }, @@ -191,7 +199,10 @@ const theme: ThemeOptions = createTheme({ lineHeight: '21.9px', }, caption: { - fontSize: 10, + fontSize: 12, + fontWeight: 400, + lineHeight: 5 / 3, + letterSpacing: 0.4, }, }, shadows: [ From 2fb21c0e8776b36be363c597ae162e10b885ae95 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 15:46:14 +0300 Subject: [PATCH 10/24] refactor: theme's variants --- .../components/DataEntry/ToggleButtons.tsx | 2 +- .../client/src/components/Home/SmallGraph.tsx | 2 +- .../client/src/features/Leaderboard/index.tsx | 2 +- .../EscrowAddress/EscrowAddress.tsx | 2 +- .../SearchResults/RoleDetails/RoleDetails.tsx | 5 +-- .../tableComponents/TransactionsTableHead.tsx | 14 +++---- packages/apps/dashboard/client/src/theme.tsx | 40 +++++++++---------- 7 files changed, 31 insertions(+), 36 deletions(-) diff --git a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx index dfd54a2ef6..88da0dd274 100644 --- a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx +++ b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx @@ -60,7 +60,7 @@ const ToggleButtons = () => { }, }} > - {elem.name} + {elem.name} ))} diff --git a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx index 82cebe9b6d..d41370e166 100644 --- a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx +++ b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx @@ -34,7 +34,7 @@ const CustomSmallChartTooltip = ({ {payload?.map((elem) => ( - + {formatDate(elem.payload.date, 'MMMM DD, YYYY')} diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx index 7783d2f7ca..403aacc14a 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx @@ -67,7 +67,7 @@ export const Leaderboard: FC = ({ navigate('/leaderboard'); }} > - View All + View All ) : null} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx index 2eff682f7a..f258eeb751 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx @@ -77,7 +77,7 @@ const EscrowAddress = ({ borderColor: 'secondary.light', }} > - + {status} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx index fac42ad7a3..3fdbc7aa28 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx @@ -155,10 +155,7 @@ const RoleDetails = ({ data }: { data: AddressDetailsOperator }) => { href={env.VITE_HUMANPROTOCOL_CORE_ARCHITECTURE} target="_blank" > - + HUMAN Protocol core architecture diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx index 75a2e6df0a..1e7c35be6d 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx @@ -30,33 +30,31 @@ export const TransactionsTableHead = () => { - - Transaction Hash - + Transaction Hash - Method + Method - From + From - To + To - Block + Block - Value + Value diff --git a/packages/apps/dashboard/client/src/theme.tsx b/packages/apps/dashboard/client/src/theme.tsx index 2a6915a090..d961419f4a 100644 --- a/packages/apps/dashboard/client/src/theme.tsx +++ b/packages/apps/dashboard/client/src/theme.tsx @@ -9,11 +9,11 @@ import { CSSProperties } from 'react'; declare module '@mui/material/Typography' { interface TypographyPropsVariantOverrides { - ['Components/Button Small']: true; - ['Components/Button Large']: true; - ['Components/Chip']: true; - ['Components/Table Header']: true; - ['Components/Tooltip']: true; + ['Button Small']: true; + ['Button Large']: true; + ['Chip']: true; + ['Table Header']: true; + ['Tooltip']: true; ['H6-Mobile']: true; body3: true; } @@ -21,22 +21,22 @@ declare module '@mui/material/Typography' { declare module '@mui/material/styles' { interface TypographyVariants { - ['Components/Button Small']: CSSProperties; - ['Components/Button Large']: CSSProperties; - ['Components/Chip']: CSSProperties; - ['Components/Table Header']: CSSProperties; - ['Components/Tooltip']: CSSProperties; + ['Button Small']: CSSProperties; + ['Button Large']: CSSProperties; + ['Chip']: CSSProperties; + ['Table Header']: CSSProperties; + ['Tooltip']: CSSProperties; ['H6-Mobile']: CSSProperties; body3: CSSProperties; } // allow configuration using `createTheme` interface TypographyVariantsOptions { - ['Components/Button Small']?: CSSProperties; - ['Components/Button Large']?: CSSProperties; - ['Components/Chip']?: CSSProperties; - ['Components/Table Header']?: CSSProperties; - ['Components/Tooltip']?: CSSProperties; + ['Button Small']?: CSSProperties; + ['Button Large']?: CSSProperties; + ['Chip']?: CSSProperties; + ['Table Header']?: CSSProperties; + ['Tooltip']?: CSSProperties; ['H6-Mobile']: CSSProperties; body3?: CSSProperties; } @@ -156,28 +156,28 @@ const theme: ThemeOptions = createTheme({ letterSpacing: '0.4px', textAlign: 'left', }, - 'Components/Button Small': { + 'Button Small': { fontSize: '13px', fontWeight: 600, lineHeight: '22px', letterSpacing: '0.1px', textAlign: 'left', }, - 'Components/Button Large': { + 'Button Large': { fontSize: '15px', fontWeight: 600, lineHeight: '26px', letterSpacing: '0.1px', textAlign: 'left', }, - 'Components/Chip': { + Chip: { fontSize: '13px', fontWeight: 400, lineHeight: '18px', letterSpacing: '0.16px', textAlign: 'left', }, - 'Components/Table Header': { + 'Table Header': { fontFamily: 'Roboto', fontSize: '14px', fontWeight: 500, @@ -185,7 +185,7 @@ const theme: ThemeOptions = createTheme({ letterSpacing: '0.17px', textAlign: 'left', }, - 'Components/Tooltip': { + Tooltip: { fontSize: 10, fontWeight: 500, lineHeight: '14px', From 39edb94d98843ecc1bc8df3ef11809b74e004604 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 15:50:33 +0300 Subject: [PATCH 11/24] feat: add tooltips to the operator details --- .../SearchResults/RoleDetails/RoleDetails.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx index 3fdbc7aa28..e7086f3095 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx @@ -174,11 +174,14 @@ const RoleDetails = ({ data }: { data: AddressDetailsOperator }) => { > - + {renderRoleDetailsInfo(role)} {url && ( - + {url} @@ -187,7 +190,7 @@ const RoleDetails = ({ data }: { data: AddressDetailsOperator }) => { {jobTypes && jobTypes?.length > 0 && ( {jobTypes.map((jobType) => ( @@ -209,7 +212,10 @@ const RoleDetails = ({ data }: { data: AddressDetailsOperator }) => { {fee}% )} - + {amountJobsProcessed} From 309225cb4a4434155e2d4ef26011b9fd118ea0b2 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 16:17:18 +0300 Subject: [PATCH 12/24] fix: rename button --- .../src/components/Charts/AreaChart.tsx | 15 +++++++------- .../dashboard/client/src/pages/Home/Home.tsx | 20 +++++++++---------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx b/packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx index 4300ff5fe8..990e9cabbe 100644 --- a/packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx +++ b/packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx @@ -155,16 +155,17 @@ export const AreaChart = ({ return ( @@ -360,9 +361,9 @@ export const AreaChart = ({ { Data Overview (All networks) @@ -117,16 +117,16 @@ const Home: FC = () => { From 6860275c7bb5c0377e167f76f0ea5aa38c12120d Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 16:42:59 +0300 Subject: [PATCH 13/24] refactor: tooltips on home page --- .../apps/dashboard/client/src/pages/Home/Home.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/apps/dashboard/client/src/pages/Home/Home.tsx b/packages/apps/dashboard/client/src/pages/Home/Home.tsx index 4889afa151..138f03506f 100644 --- a/packages/apps/dashboard/client/src/pages/Home/Home.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/Home.tsx @@ -96,19 +96,12 @@ const Home: FC = () => { - - - + - - - + From 2c66cad430ce716e80ffa1638a64bca381f25155 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 16:55:42 +0300 Subject: [PATCH 14/24] minor refactoring --- .../dashboard/client/src/pages/Home/Home.tsx | 46 +++++++++---------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/packages/apps/dashboard/client/src/pages/Home/Home.tsx b/packages/apps/dashboard/client/src/pages/Home/Home.tsx index 138f03506f..73e16c028a 100644 --- a/packages/apps/dashboard/client/src/pages/Home/Home.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/Home.tsx @@ -42,6 +42,26 @@ const InfoTooltip = ({ title }: { title: string }) => ( ); +const renderViewChartsButton = (show: boolean) => { + if (show) { + return ( + + ); + } else { + return null; + } +}; + const Home: FC = () => { const isMobile = useIsMobile(); @@ -82,18 +102,7 @@ const Home: FC = () => { Data Overview (All networks) - + {renderViewChartsButton(!isMobile)} @@ -109,18 +118,7 @@ const Home: FC = () => { - + {renderViewChartsButton(isMobile)} From 15aa4a9481583f43010af023d10be05ee8925283 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 17:10:40 +0300 Subject: [PATCH 15/24] fix: use custom hook for identifying isMobile --- .../client/src/components/Home/SmallGraph.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx index d41370e166..7029bbb4f1 100644 --- a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx +++ b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx @@ -1,3 +1,5 @@ +import { Fragment } from 'react'; + import { AreaChart, Area, @@ -8,15 +10,16 @@ import { ResponsiveContainer, TooltipProps, } from 'recharts'; -import Card from '@mui/material/Card'; -import { colorPalette } from '@assets/styles/color-palette'; import Box from '@mui/material/Box'; -import { Typography, useMediaQuery, useTheme } from '@mui/material'; +import Card from '@mui/material/Card'; import Stack from '@mui/material/Stack'; import ToggleButtons from '@components/DataEntry/ToggleButtons'; -import { Fragment } from 'react'; +import Typography from '@mui/material/Typography'; + +import { colorPalette } from '@assets/styles/color-palette'; import { formatDate } from '@helpers/formatDate'; import { formatNumber } from '@helpers/formatNumber'; +import { useIsMobile } from '@utils/hooks/use-breakpoints'; const CustomSmallChartTooltip = ({ payload, @@ -76,8 +79,7 @@ const GraphSettings = ({ title }: { title: string }) => ( ); const SmallGraph = ({ title, graphData }: SmallGraphProps) => { - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('md')); + const isMobile = useIsMobile(); return ( <> From 537acb7848c979a683697473b128ca8e1db86b0e Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 17:18:03 +0300 Subject: [PATCH 16/24] minor refactoring of Holders component --- packages/apps/dashboard/client/src/pages/Home/Holders.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/apps/dashboard/client/src/pages/Home/Holders.tsx b/packages/apps/dashboard/client/src/pages/Home/Holders.tsx index bcaf80c17d..d25feb93b3 100644 --- a/packages/apps/dashboard/client/src/pages/Home/Holders.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/Holders.tsx @@ -9,14 +9,12 @@ const Holders = () => { return ( - - Holders - - + Holders + {isSuccess && } {isPending && '...'} {isError && 'No data'} - + ); }; From 4523ea02db9aa804e4d9caaf4021e7711e90c229 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 18:57:05 +0300 Subject: [PATCH 17/24] fix: weird padding in table, tooltip's padding on graph, color of address in the table, add withdrawable tokens --- .../src/assets/styles/_page-wrapper.scss | 4 +- .../client/src/components/Home/SmallGraph.tsx | 2 +- .../src/components/SearchBar/SearchBar.tsx | 2 +- .../SearchResults/AbbreviateClipboard.tsx | 4 + .../src/components/SectionWrapper/index.tsx | 2 +- .../components/DataGridWrapper.tsx | 2 +- .../Leaderboard/components/RoleCell.tsx | 2 +- .../client/src/features/Leaderboard/index.tsx | 24 ++---- .../SearchResults/RoleDetails/RoleDetails.tsx | 7 +- .../pages/SearchResults/StakeInfo/index.tsx | 75 +++++++++++-------- .../WalletAddress/WalletAddress.tsx | 29 +++++-- .../src/services/api/use-address-details.tsx | 6 +- 12 files changed, 100 insertions(+), 59 deletions(-) diff --git a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss index 40cfd6e264..ff918eae8d 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss @@ -1,8 +1,10 @@ .page-wrapper { + display: flex; + flex-direction: column; margin: 0 56px; padding: 0; - min-height: 100dvh; background-color: $maWhite; + min-height: 100dvh; @media (max-width: 1280px) { margin: 0 24px; diff --git a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx index 7029bbb4f1..18c3af1b8f 100644 --- a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx +++ b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx @@ -34,7 +34,7 @@ const CustomSmallChartTooltip = ({ borderRadius: 2, }} > - + {payload?.map((elem) => ( diff --git a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx index b7490bbe70..b57d3b7b28 100644 --- a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx +++ b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx @@ -188,7 +188,7 @@ const SearchBar: FC = ({ type="submit" aria-label="search" sx={{ - padding: { xs: '4px', md: '0px' }, + p: 0.5, }} > { underline="none" sx={{ zIndex: 1, + color: 'text.primary', + '&:visited': { + color: 'text.primary', + }, }} > {abbreviateValue(value)} diff --git a/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx b/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx index 148387aa71..df126af5fe 100644 --- a/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx +++ b/packages/apps/dashboard/client/src/components/SectionWrapper/index.tsx @@ -9,7 +9,7 @@ const SectionWrapper: FC = ({ children }) => { display: 'flex', flexDirection: 'column', px: { xs: 2, md: 8 }, - py: { xs: 4, md: 6 }, + py: { xs: 4, md: 4 }, mb: 4, borderRadius: '16px', boxShadow: 'none', diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx index 3bd764b494..5780d73b0b 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx @@ -109,7 +109,7 @@ export const DataGridWrapper = ({ '& .MuiDataGrid-virtualScroller': { position: 'relative', }, - '& .MuiDataGrid-filler': { + '& .MuiDataGrid-filler, & .MuiDataGrid-cellEmpty': { display: 'none', }, }} diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx index c51ab16f9c..3fb3e6b34f 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx @@ -60,7 +60,7 @@ export const RoleCell = ({ {websiteUrl ? : null} {name && role ? ( - + {humanReadableRole} ) : null} diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx index 403aacc14a..c401e08ebc 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx @@ -2,11 +2,8 @@ import { FC } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; -import TableContainer from '@mui/material/TableContainer'; import { useNavigate } from 'react-router-dom'; -import SimpleBar from 'simplebar-react'; import { SelectNetwork } from './components/SelectNetwork'; import { DataGridWrapper } from './components/DataGridWrapper'; @@ -28,15 +25,12 @@ export const Leaderboard: FC = ({ }) => { const navigate = useNavigate(); return ( - = ({ > - - - + {viewAllBanner ? ( ) : null} - + ); }; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx index e7086f3095..e1215c99c4 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx @@ -130,6 +130,7 @@ const RoleDetails = ({ data }: { data: AddressDetailsOperator }) => { amountJobsProcessed, amountStaked, amountLocked, + amountWithdrawable, url, fee, jobTypes, @@ -221,7 +222,11 @@ const RoleDetails = ({ data }: { data: AddressDetailsOperator }) => { - + diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx index 2e5b129337..9aac1faa85 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx @@ -2,16 +2,47 @@ import { FC } from 'react'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; +import { NumericFormat } from 'react-number-format'; import SectionWrapper from '@components/SectionWrapper'; -import { FormatNumberWithDecimals } from '@components/Home/FormatNumber'; + +import { useIsMobile } from '@utils/hooks/use-breakpoints'; type Props = { amountStaked?: number | null; amountLocked?: number | null; + amountWithdrawable?: number | null; +}; + +const renderAmount = (amount: number | null, isMobile: boolean) => { + return ( + + + + + + HMT + + + ); }; -const StakeInfo: FC = ({ amountStaked, amountLocked }) => { +const StakeInfo: FC = ({ + amountStaked, + amountLocked, + amountWithdrawable, +}) => { + const isMobile = useIsMobile(); if (!amountStaked) return null; return ( @@ -23,41 +54,25 @@ const StakeInfo: FC = ({ amountStaked, amountLocked }) => { {amountStaked !== undefined && amountStaked !== null ? ( - Tokens Staked + Staked Tokens - - - - - - HMT - - + {renderAmount(amountStaked, isMobile)} ) : null} {amountLocked !== undefined && amountLocked !== null ? ( - Tokens Locked + Locked Tokens + + {renderAmount(amountLocked, isMobile)} + + ) : null} + {amountWithdrawable !== undefined && amountWithdrawable !== null ? ( + + + Withdrawable Tokens - - - - - - HMT - - + {renderAmount(amountWithdrawable, isMobile)} ) : null} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx index f27c42f28a..89ac4b736a 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddress.tsx @@ -2,6 +2,7 @@ import { FC } from 'react'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; +import { NumericFormat } from 'react-number-format'; import TitleSectionWrapper from '@components/SearchResults'; import SectionWrapper from '@components/SectionWrapper'; @@ -15,19 +16,28 @@ import { AddressDetailsOperator, AddressDetailsWallet, } from '@services/api/use-address-details'; +import { useIsMobile } from '@utils/hooks/use-breakpoints'; type Props = { data: AddressDetailsWallet | AddressDetailsOperator; }; const WalletAddress: FC = ({ data }) => { - const { balance, amountStaked, amountLocked, reputation } = data; + const { + balance, + amountStaked, + amountLocked, + reputation, + amountWithdrawable, + } = data; + const isMobile = useIsMobile(); const isWallet = 'totalAmountReceived' in data; return ( <> + Overview @@ -42,11 +52,16 @@ const WalletAddress: FC = ({ data }) => { {isWallet && ( - {data?.totalAmountReceived} + = ({ data }) => { )} - + ); diff --git a/packages/apps/dashboard/client/src/services/api/use-address-details.tsx b/packages/apps/dashboard/client/src/services/api/use-address-details.tsx index 89f6e36c30..51a4487c6e 100644 --- a/packages/apps/dashboard/client/src/services/api/use-address-details.tsx +++ b/packages/apps/dashboard/client/src/services/api/use-address-details.tsx @@ -34,7 +34,7 @@ const walletSchema = z.object({ amountWithdrawable: z.string().transform(transformOptionalTokenAmount), reputation: reputationSchema, totalAmountReceived: z.string().transform(transformOptionalTokenAmount), - payoutCount: z.number(), + payoutCount: z.number().or(z.string()), }); export type AddressDetailsWallet = z.infer; @@ -84,6 +84,10 @@ const operatorSchema = z.object({ .nullable(), amountStaked: z.string().optional().transform(transformOptionalTokenAmount), amountLocked: z.string().optional().transform(transformOptionalTokenAmount), + amountWithdrawable: z + .string() + .optional() + .transform(transformOptionalTokenAmount), lockedUntilTimestamp: z.string().optional(), reputation: reputationSchema, fee: z.number(), From d39cbd05d7d30ce54fd468e8eb168ae07f3f7817 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 19:02:51 +0300 Subject: [PATCH 18/24] address the feedback partially --- .../src/pages/SearchResults/StakeInfo/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx index 9aac1faa85..2d1d293b0b 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/StakeInfo/index.tsx @@ -14,7 +14,7 @@ type Props = { amountWithdrawable?: number | null; }; -const renderAmount = (amount: number | null, isMobile: boolean) => { +const renderAmount = (amount: number | null | undefined, isMobile: boolean) => { return ( @@ -43,7 +43,7 @@ const StakeInfo: FC = ({ amountWithdrawable, }) => { const isMobile = useIsMobile(); - if (!amountStaked) return null; + if (!amountStaked && !amountLocked && !amountWithdrawable) return null; return ( @@ -51,30 +51,30 @@ const StakeInfo: FC = ({ Stake Info - {amountStaked !== undefined && amountStaked !== null ? ( + {Number.isFinite(amountStaked) && ( Staked Tokens {renderAmount(amountStaked, isMobile)} - ) : null} - {amountLocked !== undefined && amountLocked !== null ? ( + )} + {Number.isFinite(amountLocked) && ( Locked Tokens {renderAmount(amountLocked, isMobile)} - ) : null} - {amountWithdrawable !== undefined && amountWithdrawable !== null ? ( + )} + {Number.isFinite(amountWithdrawable) && ( Withdrawable Tokens {renderAmount(amountWithdrawable, isMobile)} - ) : null} + )} ); From baccb27ca79df23ab7ddcd1e718d14ebf1e9cc5d Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 21 May 2025 19:04:03 +0300 Subject: [PATCH 19/24] fix: using max integer --- .../RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx | 2 +- .../WalletAddressTransactionsTable.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx index c006787460..193b0ab4ce 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx @@ -43,7 +43,7 @@ export const RoleDetailsEscrowsTable = ({ role }: { role: string | null }) => { {}} page={page} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx index f55364e536..111329daa2 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx @@ -54,7 +54,7 @@ export const WalletAddressTransactionsTable = () => { {}} page={page} From e1efc3207938ac27505b73ab17bdbf66e7aca1da Mon Sep 17 00:00:00 2001 From: kirill Date: Thu, 22 May 2025 14:55:50 +0300 Subject: [PATCH 20/24] fix: show 0 instead of empty string, if graph's metric is nullable --- .../dashboard/client/src/components/Charts/ToggleCharts.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/apps/dashboard/client/src/components/Charts/ToggleCharts.tsx b/packages/apps/dashboard/client/src/components/Charts/ToggleCharts.tsx index 94dc0314d4..18ff136855 100644 --- a/packages/apps/dashboard/client/src/components/Charts/ToggleCharts.tsx +++ b/packages/apps/dashboard/client/src/components/Charts/ToggleCharts.tsx @@ -62,7 +62,7 @@ const ToggleCharts = ({ <> {elem.title} - {elem.amount ? : ''} + {elem.amount ? : 0} {elem.name === 'totalTransactionAmount' && elem.isAreaChart && ( Date: Thu, 22 May 2025 16:31:25 +0300 Subject: [PATCH 21/24] fix: reset pagination on unmount --- .../client/src/components/Charts/ToggleCharts.tsx | 7 ++----- .../RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx | 8 ++++++++ .../WalletAddressTransactionsTable.tsx | 8 ++++++++ 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/apps/dashboard/client/src/components/Charts/ToggleCharts.tsx b/packages/apps/dashboard/client/src/components/Charts/ToggleCharts.tsx index 18ff136855..bb040ec562 100644 --- a/packages/apps/dashboard/client/src/components/Charts/ToggleCharts.tsx +++ b/packages/apps/dashboard/client/src/components/Charts/ToggleCharts.tsx @@ -1,7 +1,6 @@ import { FormControlLabel, FormGroup, Typography } from '@mui/material'; import Stack from '@mui/material/Stack'; import Checkbox from '@mui/material/Checkbox'; -import { colorPalette } from '@assets/styles/color-palette'; import { FormatNumber } from '@components/Home/FormatNumber'; interface ToggleChartsProps { @@ -68,10 +67,8 @@ const ToggleCharts = ({ HMT diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx index 193b0ab4ce..babb913b9f 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx @@ -1,3 +1,5 @@ +import { useEffect } from 'react'; + import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import TableContainer from '@mui/material/TableContainer'; @@ -20,6 +22,12 @@ export const RoleDetailsEscrowsTable = ({ role }: { role: string | null }) => { setPrevPage, } = useEscrowDetailsDto(); + useEffect(() => { + return () => { + setPageSize(10); + }; + }, [setPageSize]); + return ( diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx index 111329daa2..10b3927722 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx @@ -1,3 +1,5 @@ +import { useEffect } from 'react'; + import SimpleBar from 'simplebar-react'; import Table from '@mui/material/Table'; import TableContainer from '@mui/material/TableContainer'; @@ -22,6 +24,12 @@ export const WalletAddressTransactionsTable = () => { setPrevPage, } = useTransactionDetailsDto(); + useEffect(() => { + return () => { + setPageSize(10); + }; + }, [setPageSize]); + return ( From 0268ff8e62ef0cff2b0c4a0f5658039a5714e88a Mon Sep 17 00:00:00 2001 From: kirill Date: Fri, 23 May 2025 12:16:56 +0300 Subject: [PATCH 22/24] fix: hide vertical scroll on tables, get back standard-background className --- .../dashboard/client/src/assets/styles/_page-wrapper.scss | 7 +++++-- .../features/Leaderboard/components/DataGridWrapper.tsx | 4 ++++ packages/apps/dashboard/client/src/pages/Graph/Graph.tsx | 2 +- .../apps/dashboard/client/src/pages/Leaderboard/index.tsx | 2 +- .../client/src/pages/SearchResults/SearchResults.tsx | 2 +- 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss index ff918eae8d..647bdf1945 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_page-wrapper.scss @@ -3,7 +3,6 @@ flex-direction: column; margin: 0 56px; padding: 0; - background-color: $maWhite; min-height: 100dvh; @media (max-width: 1280px) { @@ -28,7 +27,7 @@ z-index: 10; border-radius: 20px; background-size: 100% 100%; - background: linear-gradient(to bottom, $primary 252px, $maWhite 1px); + background: linear-gradient(to bottom, $primary 252px, $maWhite 0px); @media (max-width: 900px) { border-bottom-left-radius: 0; @@ -39,3 +38,7 @@ border-radius: 0; } } + +.standard-background { + background-color: $maWhite; +} diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx index 5780d73b0b..309a9947f7 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx @@ -31,6 +31,7 @@ export const DataGridWrapper = ({ columns={columns} rowHeight={90} columnHeaderHeight={72} + scrollbarSize={0} disableColumnResize disableColumnMenu disableColumnSelector @@ -112,6 +113,9 @@ export const DataGridWrapper = ({ '& .MuiDataGrid-filler, & .MuiDataGrid-cellEmpty': { display: 'none', }, + // '& .MuiDataGrid-scrollbar': { + // display: 'none', + // }, }} /> diff --git a/packages/apps/dashboard/client/src/pages/Graph/Graph.tsx b/packages/apps/dashboard/client/src/pages/Graph/Graph.tsx index fe543ec3c9..0441976ec4 100644 --- a/packages/apps/dashboard/client/src/pages/Graph/Graph.tsx +++ b/packages/apps/dashboard/client/src/pages/Graph/Graph.tsx @@ -13,7 +13,7 @@ const Graph = () => { }, []); return ( - + diff --git a/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx b/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx index 1abbc0e577..60f93d1732 100644 --- a/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx +++ b/packages/apps/dashboard/client/src/pages/Leaderboard/index.tsx @@ -9,7 +9,7 @@ const LeaderBoard = () => { const { data, status, error } = useLeaderboardDetails(); return ( - + { }, [address, chainId, paramsStatus]); return ( - + {paramsStatus === ParamsStatus.LOADING && ( From cbbec0930bf425c004311dbf3cb725e1ccec2054 Mon Sep 17 00:00:00 2001 From: kirill Date: Fri, 23 May 2025 12:17:54 +0300 Subject: [PATCH 23/24] remove log --- .../src/features/Leaderboard/components/DataGridWrapper.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx index 309a9947f7..a84f9f340f 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx @@ -113,9 +113,6 @@ export const DataGridWrapper = ({ '& .MuiDataGrid-filler, & .MuiDataGrid-cellEmpty': { display: 'none', }, - // '& .MuiDataGrid-scrollbar': { - // display: 'none', - // }, }} /> From 10b59d7c7d46daec5b35d23a3e4e511dd82849f4 Mon Sep 17 00:00:00 2001 From: kirill Date: Tue, 27 May 2025 12:59:00 +0300 Subject: [PATCH 24/24] fix hmt balance --- .../client/src/pages/SearchResults/HmtBalance/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx index 900f9ac848..b942cac755 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/HmtBalance/index.tsx @@ -23,7 +23,8 @@ const HmtBalance: FC = ({ balance }) => { return ...; } - const _balance = Number(balance) * 1e18; + const _balance = + Number(balance) < 1 ? Number(balance) * 1e18 : Number(balance); const balanceInDollars = balance ? (_balance * data).toFixed(2) : 0; return (