Skip to content

Commit

Permalink
feat(explorer): reduce space of owned objects if there isn't many (#4192
Browse files Browse the repository at this point in the history 
)

* feat(explorer): reduce space of owned objects if there isn't many

* fix: owned objects layout

* fix: move logic to assets pane

* fix: classes

* fix: data
  • Loading branch information
@VmMad
VmMad authored Nov 25, 2024
1 parent 3662450 commit ec66e09
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 45 deletions.
35 changes: 24 additions & 11 deletions apps/explorer/src/components/owned-coins/OwnedCoins.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,12 +153,14 @@ export function OwnedCoins({ id }: OwnerCoinsProps): JSX.Element {
</div>
) : (
<div className="flex h-full flex-col">
<Title
title={coinBalanceHeader}
trailingElement={
hasCoinsBalance && <CoinsFilter filterOptions={filterOptions} />
}
/>
<div className="flex flex-col justify-center sm:min-h-[72px]">
<Title
title={coinBalanceHeader}
trailingElement={
hasCoinsBalance && <CoinsFilter filterOptions={filterOptions} />
}
/>
</div>
{hasCoinsBalance ? (
<>
<div className="relative overflow-y-auto p-sm--rs pt-0">
Expand Down Expand Up @@ -213,18 +215,29 @@ export function OwnedCoins({ id }: OwnerCoinsProps): JSX.Element {
)}
</>
) : (
<div className="flex h-20 items-center justify-center md:h-coinsAndAssetsContainer">
<span className="flex flex-row items-center gap-x-xs text-neutral-40 dark:text-neutral-60">
No Coins Owned
</span>
</div>
<NoObjectsOwnedMessage objectType="Coins" />
)}
</div>
)}
</div>
);
}

interface NoObjectsOwnedMessageProps {
objectType: string;
}
export function NoObjectsOwnedMessage({
objectType,
}: NoObjectsOwnedMessageProps): React.JSX.Element {
return (
<div className="flex h-full items-center justify-center md:h-coinsAndAssetsContainer">
<span className="flex flex-row items-center gap-x-xs text-neutral-40 dark:text-neutral-60">
No {objectType} Owned
</span>
</div>
);
}

interface FilterOption {
label: string;
isDisabled?: boolean;
Expand Down
99 changes: 66 additions & 33 deletions apps/explorer/src/components/owned-objects/OwnedObjects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {
import { ListViewLarge, ListViewMedium, ListViewSmall, Warning } from '@iota/ui-icons';
import clsx from 'clsx';
import { useEffect, useMemo, useState } from 'react';
import { ListView, SmallThumbnailsView, ThumbnailsView } from '~/components';
import { ListView, NoObjectsOwnedMessage, SmallThumbnailsView, ThumbnailsView } from '~/components';
import { ObjectViewMode } from '~/lib/enums';
import { Pagination } from '~/components/ui';
import { PAGE_SIZES_RANGE_10_50 } from '~/lib/constants';
Expand All @@ -49,6 +49,11 @@ enum FilterValue {
Kiosks = 'kiosks',
}

enum OwnedObjectsContainerHeight {
Small = 'h-[400px]',
Default = 'h-[400px] md:h-[570px]',
}

const FILTER_OPTIONS = [
{ label: 'NFTS', value: FilterValue.All },
{ label: 'KIOSKS', value: FilterValue.Kiosks },
Expand Down Expand Up @@ -86,6 +91,11 @@ function getShowPagination(
return currentPage !== 0 || itemsLength > SHOW_PAGINATION_MAX_ITEMS;
}

const MIN_OBJECT_COUNT_TO_HEIGHT_MAP: Record<number, OwnedObjectsContainerHeight> = {
0: OwnedObjectsContainerHeight.Small,
20: OwnedObjectsContainerHeight.Default,
};

interface OwnedObjectsProps {
id: string;
}
Expand All @@ -96,6 +106,9 @@ export function OwnedObjects({ id }: OwnedObjectsProps): JSX.Element {
undefined,
);

const [ownedObjectsContainerHeight, setOwnedObjectsContainerHeight] =
useState<OwnedObjectsContainerHeight>(OwnedObjectsContainerHeight.Small);

const [viewMode, setViewMode] = useLocalStorage(
OWNED_OBJECTS_LOCAL_STORAGE_VIEW_MODE,
ObjectViewMode.Thumbnail,
Expand Down Expand Up @@ -166,8 +179,20 @@ export function OwnedObjects({ id }: OwnedObjectsProps): JSX.Element {
isFetching,
);

const hasAssets = sortedDataByDisplayImages.length > 0;
const noAssets = !hasAssets && !isPending;
const hasVisualAssets = sortedDataByDisplayImages.length > 0;

const noVisualAssets = !hasVisualAssets && !isPending;

useEffect(() => {
const ownedObjectsCount = sortedDataByDisplayImages.length;
Object.keys(MIN_OBJECT_COUNT_TO_HEIGHT_MAP).forEach((minObjectCount) => {
if (ownedObjectsCount >= Number(minObjectCount)) {
setOwnedObjectsContainerHeight(
MIN_OBJECT_COUNT_TO_HEIGHT_MAP[Number(minObjectCount)],
);
}
});
}, [sortedDataByDisplayImages, setOwnedObjectsContainerHeight]);

if (isError) {
return (
Expand All @@ -184,13 +209,17 @@ export function OwnedObjects({ id }: OwnedObjectsProps): JSX.Element {
}

return (
<div className={clsx(!noAssets && 'h-coinsAndAssetsContainer md:h-full')}>
<div className={clsx(!noVisualAssets ? 'h-coinsAndAssetsContainer' : 'h-full')}>
<div className={clsx('flex h-full overflow-hidden', !showPagination && 'pb-2')}>
<div className="relative flex h-full w-full flex-col gap-4">
<div className="flex w-full flex-col items-start sm:min-h-[72px] sm:flex-row sm:items-center sm:justify-between">
<div
className={clsx('relative flex h-full w-full flex-col', {
'gap-4': hasVisualAssets,
})}
>
<div className="flex w-full flex-row flex-wrap items-center justify-between sm:min-h-[72px]">
<Title size={TitleSize.Medium} title="Assets" />
{hasAssets && (
<div className="flex flex-row-reverse justify-between sm:flex-row sm:pr-lg">
{hasVisualAssets && (
<div className="flex justify-between sm:flex-row sm:pr-lg">
<div className="flex items-center gap-sm">
{VIEW_MODES.map((mode) => {
const selected = mode.value === viewMode;
Expand Down Expand Up @@ -244,32 +273,36 @@ export function OwnedObjects({ id }: OwnedObjectsProps): JSX.Element {
</div>
)}
</div>
<div className="flex-2 flex w-full flex-col overflow-hidden p-md">
{noAssets && (
<div className="flex h-20 items-center justify-center md:h-coinsAndAssetsContainer">
<div className="text-body-lg">No Assets owned</div>
</div>
)}
{noVisualAssets ? (
<NoObjectsOwnedMessage objectType="Assets" />
) : (
<div
className={clsx(
'flex-2 flex w-full flex-col overflow-hidden p-md',
ownedObjectsContainerHeight,
)}
>
{hasVisualAssets && viewMode === ObjectViewMode.List && (
<ListView loading={isPending} data={sortedDataByDisplayImages} />
)}
{hasVisualAssets && viewMode === ObjectViewMode.SmallThumbnail && (
<SmallThumbnailsView
loading={isPending}
data={sortedDataByDisplayImages}
limit={limit}
/>
)}
{hasVisualAssets && viewMode === ObjectViewMode.Thumbnail && (
<ThumbnailsView
loading={isPending}
data={sortedDataByDisplayImages}
limit={limit}
/>
)}
</div>
)}

{hasAssets && viewMode === ObjectViewMode.List && (
<ListView loading={isPending} data={sortedDataByDisplayImages} />
)}
{hasAssets && viewMode === ObjectViewMode.SmallThumbnail && (
<SmallThumbnailsView
loading={isPending}
data={sortedDataByDisplayImages}
limit={limit}
/>
)}
{hasAssets && viewMode === ObjectViewMode.Thumbnail && (
<ThumbnailsView
loading={isPending}
data={sortedDataByDisplayImages}
limit={limit}
/>
)}
</div>
{showPagination && hasAssets && (
{showPagination && hasVisualAssets && (
<div className="flex flex-row flex-wrap items-center justify-between gap-sm px-sm--rs py-sm--rs">
<Pagination {...pagination} />
<div className="flex items-center gap-3">
Expand Down
2 changes: 1 addition & 1 deletion apps/explorer/src/pages/address-result/AddressResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ function OwnedObjectsPanel({ address }: { address: string }) {
};

return (
<div className="flex h-[800px] flex-col justify-between">
<div className="flex flex-col justify-between">
<ErrorBoundary>
{isMediumOrAbove ? (
<SplitPanes
Expand Down

0 comments on commit ec66e09

Please sign in to comment.