Skip to content

Commit

Permalink
Merge branch 'develop' into devx/cli-output-filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@salaheldinsoliman
salaheldinsoliman authored Sep 18, 2024
2 parents 8e723d4 + f7a61eb commit ed622b3
Show file tree
Hide file tree
Showing 59 changed files with 889 additions and 862 deletions.
3 changes: 0 additions & 3 deletions apps/explorer/src/components/AddressesCardGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export function AddressesCardGraph(): JSX.Element {
? addressMetrics.cumulativeAddresses.toString()
: '--'
}
showSupportingLabel={false}
/>
</div>

Expand All @@ -68,7 +67,6 @@ export function AddressesCardGraph(): JSX.Element {
? addressMetrics.cumulativeActiveAddresses.toString()
: '--'
}
showSupportingLabel={false}
/>
</div>
</div>
Expand All @@ -80,7 +78,6 @@ export function AddressesCardGraph(): JSX.Element {
? addressMetrics.dailyActiveAddresses.toString()
: '--'
}
showSupportingLabel={false}
/>
<div className="flex min-h-[180px] flex-1 flex-col items-center justify-center rounded-xl transition-colors">
{isPending ? (
Expand Down
2 changes: 0 additions & 2 deletions apps/explorer/src/components/TransactionsCardGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ export function TransactionsCardGraph() {
size={LabelTextSize.Large}
label="Total"
text={totalTransactions ? formatBalance(totalTransactions, 0) : '--'}
showSupportingLabel={false}
/>
</div>

Expand All @@ -98,7 +97,6 @@ export function TransactionsCardGraph() {
? lastEpochTotalTransactions.toString()
: '--'
}
showSupportingLabel={false}
/>
</div>
</div>
Expand Down
8 changes: 1 addition & 7 deletions apps/explorer/src/components/home-metrics/CurrentEpoch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,7 @@ export function CurrentEpoch(): JSX.Element {
<div className="flex flex-col gap-md p-md--rs">
<div className="flex flex-row gap-md">
<div className="flex flex-1">
<LabelText
size={LabelTextSize.Medium}
label="Time Left"
text={label}
showSupportingLabel={false}
/>
<LabelText size={LabelTextSize.Medium} label="Time Left" text={label} />
</div>
<div className="flex flex-1">
<LabelText
Expand All @@ -70,7 +65,6 @@ export function CurrentEpoch(): JSX.Element {
).toLocaleString()
: '--'
}
showSupportingLabel={false}
/>
</div>
</div>
Expand Down
10 changes: 2 additions & 8 deletions apps/explorer/src/components/home-metrics/OnTheNetwork.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export function OnTheNetwork(): JSX.Element {
? Math.floor(networkMetrics.currentTps).toString()
: '-'
}
showSupportingLabel={false}
/>
</div>

Expand All @@ -49,7 +48,6 @@ export function OnTheNetwork(): JSX.Element {
? Math.floor(networkMetrics?.tps30Days).toString()
: '-'
}
showSupportingLabel={false}
/>
</div>
</div>
Expand All @@ -62,15 +60,13 @@ export function OnTheNetwork(): JSX.Element {
size={LabelTextSize.Large}
label="Total Packages"
text={networkMetrics?.totalPackages ?? '-'}
showSupportingLabel={false}
/>
</div>
<div className="flex-1">
<LabelText
size={LabelTextSize.Large}
label="Objects"
text={networkMetrics?.totalObjects ?? '-'}
showSupportingLabel={false}
/>
</div>
</div>
Expand All @@ -81,17 +77,15 @@ export function OnTheNetwork(): JSX.Element {
size={LabelTextSize.Large}
label="Reference Gas Price"
text={gasPriceFormatted ?? '-'}
showSupportingLabel={gasPriceFormatted !== null}
supportingLabel="IOTA"
supportingLabel={gasPriceFormatted !== null ? 'IOTA' : undefined}
/>
</div>
<div className="flex-1">
<LabelText
size={LabelTextSize.Large}
label="Total Supply"
text={totalSupplyFormatted ?? '-'}
showSupportingLabel={totalSupplyFormatted !== null}
supportingLabel="IOTA"
supportingLabel={totalSupplyFormatted !== null ? 'IOTA' : undefined}
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/explorer/src/components/owned-objects/ListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ function ListViewItemContainer({ obj }: { obj: IotaObjectResponse }): JSX.Elemen
subtitle={type}
src={displayMeta?.image_url || ''}
video={video}
variant="xs"
variant="xxs"
/>
<div className="flex flex-col overflow-hidden">
<OwnedObjectsText color="steel-darker" font="semibold">
Expand Down
35 changes: 18 additions & 17 deletions apps/explorer/src/components/owned-objects/SmallThumbnailsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

import { Tooltip, TooltipPosition } from '@iota/apps-ui-kit';
import { type IotaObjectResponse } from '@iota/iota-sdk/client';
import { formatAddress } from '@iota/iota-sdk/utils';
import { Placeholder } from '@iota/ui';
import { Info, Loader } from '@iota/ui-icons';
import { type ReactNode } from 'react';

import { OwnedObjectsText } from '~/components';
import { ObjectLink, ObjectVideoImage } from '~/components/ui';
import { useResolveVideo } from '~/hooks/useResolveVideo';
import { parseObjectType, trimStdLibPrefix } from '~/lib/utils';
Expand All @@ -25,8 +24,8 @@ interface OwnObjectContainerProps {

function OwnObjectContainer({ id, children }: OwnObjectContainerProps): JSX.Element {
return (
<div className="w-full min-w-smallThumbNailsViewContainerMobile basis-1/2 pb-3 pr-4 md:min-w-smallThumbNailsViewContainer md:basis-1/4">
<div className="rounded-lg p-2 hover:bg-hero/5">
<div className="w-full min-w-[150px] basis-1/2 md:min-w-[210px] md:basis-1/3">
<div className="rounded-xl p-xs hover:bg-neutral-92">
<ObjectLink display="block" objectId={id} label={children} />
</div>
</div>
Expand All @@ -38,7 +37,7 @@ function SmallThumbnailsViewLoading({ limit }: { limit: number }): JSX.Element {
<>
{new Array(limit).fill(0).map((_, index) => (
<OwnObjectContainer key={index} id={String(index)}>
<Placeholder rounded="lg" height="80px" />
<Loader className="animate-spin" />
</OwnObjectContainer>
))}
</>
Expand All @@ -54,24 +53,26 @@ function SmallThumbnail({ obj }: { obj: IotaObjectResponse }): JSX.Element {
const id = obj.data?.objectId;

return (
<div className="group flex items-center gap-3.75 overflow-auto">
<div className="flex items-center gap-md">
<ObjectVideoImage
fadeIn
disablePreview
title={name}
subtitle={type}
src={src}
video={video}
variant="small"
variant="xs"
/>

<div className="flex min-w-0 flex-col flex-nowrap gap-1.25">
<OwnedObjectsText color="steel-darker" font="semibold">
{name}
</OwnedObjectsText>
<OwnedObjectsText color="steel-dark" font="medium">
{formatAddress(id!)}
</OwnedObjectsText>
<div className="flex min-w-0 flex-col flex-nowrap gap-xxs">
<span className="text-label-md text-neutral-10 dark:text-neutral-92">{name}</span>
<div className="flex flex-row items-center gap-xs text-label-md text-neutral-10 dark:text-neutral-92">
<span className="text-label-sm text-neutral-40 dark:text-neutral-60">
{formatAddress(id!)}
</span>
<Tooltip text={type} position={TooltipPosition.Bottom}>
<Info className="text-neutral-60 dark:text-neutral-40" />
</Tooltip>
</div>
</div>
</div>
);
Expand All @@ -83,7 +84,7 @@ export function SmallThumbnailsView({
limit,
}: SmallThumbnailsViewProps): JSX.Element {
return (
<div className="flex flex-row flex-wrap overflow-auto">
<div className="flex h-full flex-row flex-wrap overflow-auto">
{loading && <SmallThumbnailsViewLoading limit={limit} />}
{data?.map((obj, index) => {
const id = obj.data?.objectId;
Expand Down
138 changes: 29 additions & 109 deletions apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,119 +4,28 @@

import { useIotaClientQuery } from '@iota/dapp-kit';
import { ArrowRight12 } from '@iota/icons';
import { type IotaValidatorSummary } from '@iota/iota-sdk/client';
import { Text } from '@iota/ui';
import { type ReactNode, useMemo } from 'react';
import { useMemo } from 'react';

import { HighlightedTableCol } from '~/components';
import {
AddressLink,
Banner,
ImageIcon,
Link,
PlaceholderTable,
TableCard,
ValidatorLink,
} from '~/components/ui';
import { ampli } from '~/lib/utils';
import { StakeColumn } from './StakeColumn';
import { Banner, Link, PlaceholderTable, TableCard } from '~/components/ui';
import { generateValidatorsTableData, type ValidatorTableColumn } from '~/lib/ui';

const NUMBER_OF_VALIDATORS = 10;

export function processValidators(set: IotaValidatorSummary[]) {
return set.map((av) => ({
name: av.name,
address: av.iotaAddress,
stake: av.stakingPoolIotaBalance,
logo: av.imageUrl,
}));
}
interface ValidatorData {
name: ReactNode;
stake: ReactNode;
delegation: ReactNode;
address: ReactNode;
}

interface TableColumn {
header: string;
accessorKey: keyof ValidatorData;
}

interface ValidatorsTableData {
data: ValidatorData[];
columns: TableColumn[];
}

function validatorsTable(
validatorsData: IotaValidatorSummary[],
limit?: number,
showIcon?: boolean,
): ValidatorsTableData {
const validators = processValidators(validatorsData).sort(() => (Math.random() > 0.5 ? -1 : 1));

const validatorsItems = limit ? validators.splice(0, limit) : validators;

return {
data: validatorsItems.map(({ name, stake, address, logo }) => ({
name: (
<HighlightedTableCol first>
<div className="flex items-center gap-2.5">
{showIcon && (
<ImageIcon src={logo} size="sm" fallback={name} label={name} circle />
)}
<ValidatorLink
address={address}
label={name}
onClick={() =>
ampli.clickedValidatorRow({
sourceFlow: 'Top validators - validator name',
validatorAddress: address,
validatorName: name,
})
}
/>
</div>
</HighlightedTableCol>
),
stake: <StakeColumn stake={stake} />,
delegation: (
<Text variant="bodySmall/medium" color="steel-darker">
{stake.toString()}
</Text>
),
address: (
<HighlightedTableCol>
<AddressLink
address={address}
noTruncate={!limit}
onClick={() =>
ampli.clickedValidatorRow({
sourceFlow: 'Top validators - validator address',
validatorAddress: address,
validatorName: name,
})
}
/>
</HighlightedTableCol>
),
})),
columns: [
{
header: 'Name',
accessorKey: 'name',
},
{
header: 'Address',
accessorKey: 'address',
},
{
header: 'Stake',
accessorKey: 'stake',
},
],
};
}
const VALIDATOR_COLUMNS: ValidatorTableColumn[] = [
{
header: 'Name',
accessorKey: 'name',
},
{
header: 'Address',
accessorKey: 'address',
},
{
header: 'Stake',
accessorKey: 'stake',
},
];

type TopValidatorsCardProps = {
limit?: number;
Expand All @@ -127,7 +36,18 @@ export function TopValidatorsCard({ limit, showIcon }: TopValidatorsCardProps):
const { data, isPending, isSuccess, isError } = useIotaClientQuery('getLatestIotaSystemState');

const tableData = useMemo(
() => (data ? validatorsTable(data.activeValidators, limit, showIcon) : null),
() =>
data
? generateValidatorsTableData({
validators: [...data.activeValidators].sort(() => 0.5 - Math.random()),
atRiskValidators: [],
validatorEvents: [],
rollingAverageApys: null,
limit,
showValidatorIcon: showIcon,
columns: VALIDATOR_COLUMNS,
})
: null,
[data, limit, showIcon],
);

Expand Down
4 changes: 2 additions & 2 deletions apps/explorer/src/components/ui/ImageIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const imageStyle = cva(['text-white capitalize overflow-hidden bg-gray-40'], {
variants: {
size: {
sm: 'w-6 h-6 font-medium text-subtitleSmallExtra',
md: 'w-7.5 h-7.5 font-medium text-body',
md: 'w-8 h-8 text-label-lg',
lg: 'md:w-10 md:h-10 w-8 h-8 font-medium text-heading4 md:text-iconTextLarge',
xl: 'md:w-31.5 md:h-31.5 w-16 h-16 font-medium text-heading4 md:text-iconTextLarge',
},
Expand Down Expand Up @@ -38,7 +38,7 @@ interface FallBackAvatarProps {

function FallBackAvatar({ fallback }: FallBackAvatarProps): JSX.Element {
return (
<div className="flex h-full w-full items-center justify-center bg-neutral-80">
<div className="flex h-full w-full items-center justify-center bg-neutral-90 text-neutral-10">
{fallback?.slice(0, 2)}
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion apps/explorer/src/components/ui/ObjectVideoImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import { Image, ObjectModal, type ImageProps } from '~/components/ui';
const imageStyles = cva(['z-0 flex-shrink-0 relative'], {
variants: {
variant: {
xs: 'h-8 w-8',
xxs: 'h-8 w-8',
xs: 'h-12 w-12',
small: 'h-16 w-16',
medium: 'md:h-31.5 md:w-31.5 h-16 w-16',
large: 'h-50 w-50',
Expand Down
Loading

0 comments on commit ed622b3

Please sign in to comment.