Skip to content
Snippets Groups Projects
Commit c2dacbc9 authored by mcfarhat's avatar mcfarhat
Browse files

Merge branch 'lbudginas/#392_part2_simplify_URL_route_build' of... 

Merge branch 'lbudginas/#392_part2_simplify_URL_route_build' of https://gitlab.syncad.com/hive/block_explorer_ui into lbudginas/#392_part2_simplify_URL_route_build
parents 2be58346 64477327
No related branches found
No related tags found
1 merge request!499#392_part2_simplify_URL_route_build
Pipeline #112260 failed
Stage: build
Stage: test
Stage: test-report-aggregate
Stage: cleanup
Hide whitespace changes
Inline Side-by-side
components/OperationsTable.tsx
+ 12
− 8
View file @ c2dacbc9
...@@ -145,18 +145,22 @@ const OperationsTable: React.FC<OperationsTableProps> = ({ ...@@ -145,18 +145,22 @@ const OperationsTable: React.FC<OperationsTableProps> = ({
id={operation.trxId} id={operation.trxId}
data-testid="detailed-operation-card" data-testid="detailed-operation-card"
key={index} key={index}
className={cn("border-b border-gray-700", { className={cn(
"border-b-0": "border-b bg-theme hover:bg-rowHover border-gray-700",
nextTransactionId === operation.trxId && !!operation.trxId, {
"bg-operationPerspectiveIncoming": "border-b-0":
operationPerspective === "incoming", nextTransactionId === operation.trxId &&
})} !!operation.trxId,
"bg-operationPerspectiveIncoming":
operationPerspective === "incoming",
}
)}
> >
<TableCell className="sticky left-0 xl:bg-inherit"> <TableCell className="sticky left-0 bg-inherit">
<CopyJSON value={getUnformattedValue(operation)} /> <CopyJSON value={getUnformattedValue(operation)} />
</TableCell> </TableCell>
<TableCell <TableCell
className="pl-2 sticky left-12 xl:bg-inherit" className="pl-2 sticky left-12 bg-inherit"
data-testid="block-number-operation-table" data-testid="block-number-operation-table"
> >
<Link <Link
......
components/Witnesses/VotersDialog.tsx
+ 95
− 92
View file @ c2dacbc9
import { useState ,useEffect } from "react"; import { useState, useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import { MoveDown, MoveUp, Loader2 } from "lucide-react"; import { MoveDown, MoveUp, Loader2 } from "lucide-react";
import { Switch } from "../ui/switch"; import { Switch } from "../ui/switch";
...@@ -90,32 +90,35 @@ const VotersDialog: React.FC<VotersDialogProps> = ({ ...@@ -90,32 +90,35 @@ const VotersDialog: React.FC<VotersDialogProps> = ({
nai: "", nai: "",
precision: 0, precision: 0,
}); });
const { hiveChain } = useHiveChainContext(); const { hiveChain } = useHiveChainContext();
useEffect(() => { useEffect(() => {
const fetchDynamicGlobalProperties = async () => { const fetchDynamicGlobalProperties = async () => {
const dynamicGlobalProperties =
await fetchingService.getDynamicGlobalProperties();
const _totalVestingfundHive =
dynamicGlobalProperties.total_vesting_fund_hive;
const _totalVestingShares = dynamicGlobalProperties.total_vesting_shares;
const dynamicGlobalProperties = await fetchingService.getDynamicGlobalProperties(); setTotalVestingFundHive(_totalVestingfundHive);
const _totalVestingfundHive = dynamicGlobalProperties.total_vesting_fund_hive; setTotalVestingShares(_totalVestingShares);
const _totalVestingShares = dynamicGlobalProperties.total_vesting_shares; };
setTotalVestingFundHive(_totalVestingfundHive);
setTotalVestingShares(_totalVestingShares);
}
fetchDynamicGlobalProperties(); fetchDynamicGlobalProperties();
}, []);
}, []);
const fetchHivePower = (value: string, isHP: boolean): string => { const fetchHivePower = (value: string, isHP: boolean): string => {
if (isHP) {
if (isHP) { if (!hiveChain) return "";
if (!hiveChain) return ""; return convertVestsToHP(
return convertVestsToHP(hiveChain,value,totalVestingFundHive,totalVestingShares); hiveChain,
value,
totalVestingFundHive,
totalVestingShares
);
} }
return formatNumber(parseInt(value),true,false)+ " Vests"; // Return raw vests if not toggled to HP return formatNumber(parseInt(value), true, false) + " Vests"; // Return raw vests if not toggled to HP
}; };
return ( return (
<Dialog <Dialog
...@@ -160,7 +163,7 @@ const VotersDialog: React.FC<VotersDialogProps> = ({ ...@@ -160,7 +163,7 @@ const VotersDialog: React.FC<VotersDialogProps> = ({
</div> </div>
</div> </div>
</div> </div>
<CustomPagination <CustomPagination
currentPage={pageNum} currentPage={pageNum}
onPageChange={(newPage: number) => { onPageChange={(newPage: number) => {
setPageNum(newPage); setPageNum(newPage);
...@@ -171,86 +174,86 @@ const VotersDialog: React.FC<VotersDialogProps> = ({ ...@@ -171,86 +174,86 @@ const VotersDialog: React.FC<VotersDialogProps> = ({
isMirrored={false} isMirrored={false}
/> />
{witnessVoters?.voters?.length === 0 && !isWitnessVotersLoading ? ( {witnessVoters?.voters?.length === 0 && !isWitnessVotersLoading ? (
<div className="flex justify-center w-full"> <div className="flex justify-center w-full">
No results matching given criteria No results matching given criteria
</div> </div>
) : ( ) : (
<> <>
<Table className="text-white"> <Table className="text-white">
<TableHeader> <TableHeader>
<TableRow> <TableRow>
{tableColums.map((column, index) => ( {tableColums.map((column, index) => (
<TableHead <TableHead
onClick={() => { onClick={() => {
onHeaderClick(column.key); onHeaderClick(column.key);
}} }}
key={column.key} key={column.key}
className={cn({ className={cn({
"sticky md:static left-0": !index, "sticky md:static left-0": !index,
})}
>
<span
className={cn("flex", {
"justify-end": column.isRightAligned,
})} })}
> >
{column.name} {showSorter(column.key)} <span
</span> className={cn("flex", {
</TableHead> "justify-end": column.isRightAligned,
))} })}
</TableRow> >
</TableHeader> {column.name} {showSorter(column.key)}
<TableBody data-testid="voters-dialog-table-body"> </span>
{witnessVoters && </TableHead>
witnessVoters.voters.map((voter, index) => ( ))}
<TableRow </TableRow>
key={index} </TableHeader>
className={`${ <TableBody data-testid="voters-dialog-table-body">
index % 2 === 0 ? "bg-rowEven" : "bg-rowOdd" {witnessVoters &&
}`} witnessVoters.voters.map((voter, index) => (
> <TableRow
<TableCell key={index}
className={`text-link sticky md:static left-0 ${ className={`${
index % 2 === 0 index % 2 === 0 ? "bg-rowEven" : "bg-rowOdd"
? "bg-rowEven md:bg-inherit"
: "bg-rowOdd md:bg-inherit"
}`} }`}
> >
<Link <TableCell className="text-link sticky md:static left-0 bg-inherit">
href={`/@${voter.voter_name}`} <Link
data-testid="voter-name" href={`/@${voter.voter_name}`}
data-testid="voter-name"
>
{voter.voter_name}
</Link>
</TableCell>
<TableCell
className="text-right"
data-testid="vote-power"
> >
{voter.voter_name} {fetchHivePower(voter.vests.toString(), isHP)}
</Link> </TableCell>
</TableCell> <TableCell
<TableCell className="text-right"
className="text-right" data-testid="account-power"
data-testid="vote-power" >
> {fetchHivePower(
{fetchHivePower(voter.vests.toString(), isHP)} voter.account_vests.toString(),
</TableCell> isHP
<TableCell )}
className="text-right" </TableCell>
data-testid="account-power" <TableCell
> className="text-right"
{fetchHivePower(voter.account_vests.toString(), isHP)} data-testid="proxied-power"
</TableCell> >
<TableCell {fetchHivePower(
className="text-right" voter.proxied_vests.toString(),
data-testid="proxied-power" isHP
> )}
{fetchHivePower(voter.proxied_vests.toString(), isHP)} </TableCell>
</TableCell> </TableRow>
</TableRow> ))}
))} </TableBody>
</TableBody> </Table>
</Table>
</> </>
)} )}
</> </>
) : ( ) : (
<Loader2 className="animate-spin mt-1 h-8 w-8 ml-3 ..." /> <Loader2 className="animate-spin mt-1 h-8 w-8 ml-3 ..." />
)} )}
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
......
components/Witnesses/VotesHistoryDialog.tsx
+ 1
− 5
View file @ c2dacbc9
...@@ -247,11 +247,7 @@ const VotesHistoryDialog: React.FC<VotersDialogProps> = ({ ...@@ -247,11 +247,7 @@ const VotesHistoryDialog: React.FC<VotersDialogProps> = ({
}`} }`}
> >
<TableCell <TableCell
className={`sticky md:static left-0 ${ className="sticky md:static left-0 bg-inherit"
index % 2 === 0
? "bg-rowEven md:bg-inherit"
: "bg-rowOdd md:bg-inherit"
}`}
data-testid="date-format" data-testid="date-format"
> >
{formatAndDelocalizeTime(vote.timestamp)} {formatAndDelocalizeTime(vote.timestamp)}
......
components/account/AccountBalanceCard.tsx
+ 56
− 35
View file @ c2dacbc9
import { Fragment, useState, useEffect } from "react"; import React, { Fragment, useState, useEffect } from "react";
import { ArrowDown, ArrowUp } from "lucide-react"; import { ArrowDown, ArrowUp } from "lucide-react";
import { Card, CardContent, CardHeader } from "../ui/card"; import { Card, CardContent, CardHeader } from "../ui/card";
import { Table, TableBody, TableCell, TableRow } from "../ui/table"; import { Table, TableBody, TableCell, TableRow } from "../ui/table";
import VestsTooltip from "../VestsTooltip"; import VestsTooltip from "../VestsTooltip";
import Explorer from "@/types/Explorer"; import Explorer from "@/types/Explorer";
import { changeHBDToDollarsDisplay, grabNumericValue } from "@/utils/StringUtils"; import {
changeHBDToDollarsDisplay,
grabNumericValue,
} from "@/utils/StringUtils";
import { cn, formatNumber } from "@/lib/utils"; import { cn, formatNumber } from "@/lib/utils";
import Link from "next/link"; import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHistory } from "@fortawesome/free-solid-svg-icons"; import { faHistory } from "@fortawesome/free-solid-svg-icons";
import { Tooltip,TooltipProvider,TooltipTrigger,TooltipContent } from "@radix-ui/react-tooltip"; import {
Tooltip,
TooltipProvider,
TooltipTrigger,
TooltipContent,
} from "@radix-ui/react-tooltip";
type AccountBalanceCardProps = { type AccountBalanceCardProps = {
header: string; header: string;
userDetails: Explorer.FormattedAccountDetails; userDetails: Explorer.FormattedAccountDetails;
...@@ -37,9 +45,7 @@ const unclaimedRecourses = new Map([ ...@@ -37,9 +45,7 @@ const unclaimedRecourses = new Map([
]); ]);
/* list of fields to be skipped when calculating account value */ /* list of fields to be skipped when calculating account value */
const skipCalculation = const skipCalculation = ["delegated_vesting_shares", "received_vesting_shares"];
["delegated_vesting_shares",
"received_vesting_shares"];
const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({
header, header,
...@@ -49,41 +55,57 @@ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({ ...@@ -49,41 +55,57 @@ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({
userDetails userDetails
) as (keyof Explorer.AccountDetailsDollars)[]; ) as (keyof Explorer.AccountDetailsDollars)[];
const checkForMarkedRender = (param: keyof Explorer.AccountDetailsDollars): boolean => { const checkForMarkedRender = (
param: keyof Explorer.AccountDetailsDollars
): boolean => {
if (!unclaimedRecourses.has(param)) return false; if (!unclaimedRecourses.has(param)) return false;
const rewardParamName = unclaimedRecourses.get(param) as keyof Explorer.FormattedAccountDetails; const rewardParamName = unclaimedRecourses.get(
param
) as keyof Explorer.FormattedAccountDetails;
if (rewardParamName && userDetails[rewardParamName]) return true; if (rewardParamName && userDetails[rewardParamName]) return true;
return false; return false;
} };
const renderKey = (key: keyof Explorer.FormattedAccountDetails) => { const renderKey = (
key: keyof Explorer.FormattedAccountDetails
): React.ReactNode => {
if (Object.keys(userDetails.vests).includes(key)) { if (Object.keys(userDetails.vests).includes(key)) {
const vestKey = key as keyof Explorer.AccountDetailsVests; const vestKey = key as keyof Explorer.AccountDetailsVests;
const vestValue = userDetails.vests[vestKey]; const vestValue = userDetails.vests[vestKey];
return ( return (
<VestsTooltip <VestsTooltip
tooltipTrigger={userDetails[key] as string} tooltipTrigger={String(userDetails[key])}
tooltipContent={vestValue} tooltipContent={String(vestValue)}
/> />
); );
} }
return <>{userDetails[key]} </>;
const value = userDetails[key];
if (
typeof value === "object" &&
value !== null &&
!React.isValidElement(value)
) {
return JSON.stringify(value);
}
return value;
}; };
const [isBalancesHidden, setIsBalancesHidden] = useState(false); const [isBalancesHidden, setIsBalancesHidden] = useState(false);
const [totalBalance, setTotalBalance] = useState(0); const [totalBalance, setTotalBalance] = useState(0);
useEffect(() => { useEffect(() => {
const newBalance = keys.reduce((acc, param) => { const newBalance = keys.reduce((acc, param) => {
if (cardNameMap.has(param) && !skipCalculation.includes(param)) { if (cardNameMap.has(param) && !skipCalculation.includes(param)) {
const value = grabNumericValue(userDetails.dollars[param]); const value = grabNumericValue(userDetails.dollars[param]);
if (typeof value === 'number' && !isNaN(value)) { if (typeof value === "number" && !isNaN(value)) {
return acc + value; return acc + value;
} else { } else {
console.error('Value is not a number:', value); console.error("Value is not a number:", value);
return acc; return acc;
} }
} }
...@@ -93,45 +115,44 @@ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({ ...@@ -93,45 +115,44 @@ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({
setTotalBalance(newBalance); setTotalBalance(newBalance);
}, [keys, userDetails]); }, [keys, userDetails]);
const renderBalance = () => {
const renderBalance = (
) => {
return ( return (
<TableRow className="border-b border-gray-700 hover:bg-inherit font-bold">
<TableRow className="border-b border-gray-700 hover:bg-inherit font-bold"> <TableCell className="">Account Value</TableCell>
<TableCell className="">Account Value</TableCell> <TableCell
<TableCell className="text-right" colSpan={2}>{formatNumber(totalBalance, false, true)} $</TableCell> className="text-right"
</TableRow> colSpan={2}
>
{formatNumber(totalBalance, false, true)} $
</TableCell>
</TableRow>
); );
} };
const buildTableBody = ( const buildTableBody = (
parameters: (keyof Explorer.AccountDetailsDollars)[] parameters: (keyof Explorer.AccountDetailsDollars)[]
) => { ) => {
return parameters.map( return parameters.map(
(param: keyof Explorer.AccountDetailsDollars, index: number) => (param: keyof Explorer.AccountDetailsDollars, index: number) => (
<Fragment key={index}> <Fragment key={index}>
{cardNameMap.has(param) && {cardNameMap.has(param) && (
<TableRow <TableRow
className={cn( className={cn(
"border-b border-gray-700 hover:bg-inherit dark:hover:bg-inherit", "border-b border-gray-700 hover:bg-inherit dark:hover:bg-inherit",
{ {
"bg-explorer-orange": checkForMarkedRender(param), "bg-explorer-orange": checkForMarkedRender(param),
} }
)} )}
> >
<TableCell>{cardNameMap.get(param)}</TableCell> <TableCell>{cardNameMap.get(param)}</TableCell>
<TableCell className="text-right"> <TableCell className="text-right">{renderKey(param)}</TableCell>
{renderKey(param as keyof Explorer.FormattedAccountDetails)}
</TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
{changeHBDToDollarsDisplay(userDetails.dollars[param])} {changeHBDToDollarsDisplay(userDetails.dollars[param])}
</TableCell> </TableCell>
</TableRow> </TableRow>
} )}
</Fragment> </Fragment>
)
); );
}; };
...@@ -201,4 +222,4 @@ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({ ...@@ -201,4 +222,4 @@ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({
); );
}; };
export default AccountBalanceCard; export default AccountBalanceCard;
\ No newline at end of file
components/block/BlockDetails.tsx
+ 9
− 7
View file @ c2dacbc9
...@@ -26,6 +26,8 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({ ...@@ -26,6 +26,8 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({
enableRawVirtualOperations, enableRawVirtualOperations,
handleEnableVirtualOperations, handleEnableVirtualOperations,
}) => { }) => {
if (!blockDetails) return;
return ( return (
<Card <Card
className="flex flex-col w-full md:max-w-screen-2xl m-auto" className="flex flex-col w-full md:max-w-screen-2xl m-auto"
...@@ -33,7 +35,7 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({ ...@@ -33,7 +35,7 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({
> >
<CardHeader> <CardHeader>
<CardTitle data-testid="block-number"> <CardTitle data-testid="block-number">
Block {blockDetails?.block_num?.toLocaleString()} Block {blockDetails.block_num.toLocaleString()}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
...@@ -42,22 +44,22 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({ ...@@ -42,22 +44,22 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({
data-testid="produced-data" data-testid="produced-data"
> >
<p>Produced at: </p> <p>Produced at: </p>
<p>{formatAndDelocalizeTime(blockDetails?.created_at)}</p> <p>{formatAndDelocalizeTime(blockDetails.created_at)}</p>
<p>by</p> <p>by</p>
<Link <Link
className="flex justif-between items-center" className="flex justif-between items-center"
data-testid="account-name" data-testid="account-name"
href={`/@${blockDetails?.producer_account}`} href={`/@${blockDetails.producer_account}`}
> >
<span <span
className="text-link mx-2" className="text-link mx-2"
data-testid="block-producer-name" data-testid="block-producer-name"
> >
{blockDetails?.producer_account} {blockDetails.producer_account}
</span> </span>
<Image <Image
className="rounded-full border-2 border-link" className="rounded-full border-2 border-link"
src={getHiveAvatarUrl(blockDetails?.producer_account)} src={getHiveAvatarUrl(blockDetails.producer_account)}
alt="avatar" alt="avatar"
width={40} width={40}
height={40} height={40}
...@@ -72,7 +74,7 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({ ...@@ -72,7 +74,7 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({
> >
Hash:{" "} Hash:{" "}
</span> </span>
{blockDetails?.hash.slice(2)} {blockDetails.hash}
</p> </p>
<p> <p>
<span <span
...@@ -81,7 +83,7 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({ ...@@ -81,7 +83,7 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({
> >
Prev hash:{" "} Prev hash:{" "}
</span> </span>
{blockDetails?.prev.slice(2)} {blockDetails.prev}
</p> </p>
</div> </div>
<BlockPageOperationCount <BlockPageOperationCount
......
pages/witnesses.tsx
+ 3
− 17
View file @ c2dacbc9
...@@ -198,11 +198,7 @@ export default function Witnesses() { ...@@ -198,11 +198,7 @@ export default function Witnesses() {
<TableRow <TableRow
key={index} key={index}
className={cn( className={cn(
`${ `${index % 2 === 0 ? "bg-rowEven" : "bg-rowOdd"}`,
index % 2 === 0
? "bg-rowEven dark:bg-rowEven"
: "bg-rowOdd dark:bg-rowOdd"
}`,
{ {
"line-through": "line-through":
singleWitness.signing_key === config.inactiveWitnessKey, singleWitness.signing_key === config.inactiveWitnessKey,
...@@ -211,20 +207,10 @@ export default function Witnesses() { ...@@ -211,20 +207,10 @@ export default function Witnesses() {
)} )}
data-testid="witnesses-table-row" data-testid="witnesses-table-row"
> >
<TableCell <TableCell className="sticky left-0 min-w-[20px] bg-inherit">
className={cn("sticky left-0 min-w-[20px]", {
"bg-rowEven dark:bg-rowEven md:bg-inherit": index % 2 === 0,
"bg-rowOdd dark:bg-rowOdd md:bg-inherit": index % 2 !== 0,
})}
>
{singleWitness.rank} {singleWitness.rank}
</TableCell> </TableCell>
<TableCell <TableCell className="text-explorer-turquoise sticky left-16 bg-inherit">
className={cn("text-explorer-turquoise sticky left-16", {
"bg-rowEven dark:bg-rowEven md:bg-inherit": index % 2 === 0,
"bg-rowOdd dark:bg-rowOdd md:bg-inherit": index % 2 !== 0,
})}
>
<div className="flex justify-between"> <div className="flex justify-between">
<Link <Link
href={`/@${singleWitness.witness_name}`} href={`/@${singleWitness.witness_name}`}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment