feat(explorer): rebrand `apps/explorer/src/pages/checkpoints/Checkpoi…

…ntTransactionBlocks.tsx` and add `pageSizeSelector` to Table (#3487) * feat: use Select component from uikit * feat: update table component to add the select * feat: refine styles * feat: add selector to tables * fix: add overflow-y-auto * feat: add constants
iotaledger · Oct 25, 2024 · cdf3cfe · cdf3cfe
1 parent 2ab4f69
commit cdf3cfe
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 99 deletions.
diff --git a/apps/explorer/src/components/activity/EpochsActivityTable.tsx b/apps/explorer/src/components/activity/EpochsActivityTable.tsx
@@ -2,13 +2,13 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { InfoBox, InfoBoxStyle, InfoBoxType, Select } from '@iota/apps-ui-kit';
+import { InfoBox, InfoBoxStyle, InfoBoxType, Select, SelectSize } from '@iota/apps-ui-kit';
 import { useIotaClientQuery, useIotaClient, useIotaClientInfiniteQuery } from '@iota/dapp-kit';
 import { Warning } from '@iota/ui-icons';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
-
 import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui';
+import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants';
 import { generateEpochsTableColumns } from '~/lib/ui';
 import { numberSuffix } from '~/lib/utils';
 
@@ -71,29 +71,26 @@ export function EpochsActivityTable({
                     data={data.data}
                     columns={tableColumns}
                     totalLabel={count ? `${numberSuffix(Number(count))} Total` : '-'}
-                    viewAll={!disablePagination ? '/recent?tab=epochs' : undefined}
+                    viewAll="/recent?tab=epochs"
                     paginationOptions={!disablePagination ? pagination : undefined}
+                    pageSizeSelector={
+                        !disablePagination && (
+                            <Select
+                                value={limit.toString()}
+                                options={PAGE_SIZES_RANGE_20_60.map((size) => ({
+                                    label: `${size} / page`,
+                                    id: size.toString(),
+                                }))}
+                                size={SelectSize.Small}
+                                onValueChange={(e) => {
+                                    setLimit(Number(e));
+                                    pagination.onFirst();
+                                }}
+                            />
+                        )
+                    }
                 />
             )}
-
-            <div className="flex justify-between">
-                <div className="flex items-center space-x-3">
-                    {!disablePagination && (
-                        <Select
-                            value={limit.toString()}
-                            options={[
-                                { id: '20', label: '20 Per Page' },
-                                { id: '40', label: '40 Per Page' },
-                                { id: '60', label: '60 Per Page' },
-                            ]}
-                            onValueChange={(e) => {
-                                setLimit(Number(e));
-                                pagination.onFirst();
-                            }}
-                        />
-                    )}
-                </div>
-            </div>
         </div>
     );
 }
diff --git a/apps/explorer/src/components/activity/TransactionsActivityTable.tsx b/apps/explorer/src/components/activity/TransactionsActivityTable.tsx
@@ -5,16 +5,16 @@
 import { useIotaClient } from '@iota/dapp-kit';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useRef, useState } from 'react';
-
 import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui';
 import {
     DEFAULT_TRANSACTIONS_LIMIT,
     useGetTransactionBlocks,
 } from '~/hooks/useGetTransactionBlocks';
 import { numberSuffix } from '~/lib/utils';
-import { InfoBox, InfoBoxStyle, InfoBoxType, Select } from '@iota/apps-ui-kit';
+import { InfoBox, InfoBoxStyle, InfoBoxType, Select, SelectSize } from '@iota/apps-ui-kit';
 import { generateTransactionsTableColumns } from '~/lib/ui';
 import { Warning } from '@iota/ui-icons';
+import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants';
 
 interface TransactionsActivityTableProps {
     disablePagination?: boolean;
@@ -76,27 +76,24 @@ export function TransactionsActivityTable({
                         totalLabel={count ? `${numberSuffix(Number(count))} Total` : '-'}
                         viewAll="/recent"
                         paginationOptions={!disablePagination ? pagination : undefined}
+                        pageSizeSelector={
+                            !disablePagination && (
+                                <Select
+                                    value={limit.toString()}
+                                    options={PAGE_SIZES_RANGE_20_60.map((size) => ({
+                                        label: `${size} / page`,
+                                        id: size.toString(),
+                                    }))}
+                                    onValueChange={(e) => {
+                                        setLimit(Number(e));
+                                        pagination.onFirst();
+                                    }}
+                                    size={SelectSize.Small}
+                                />
+                            )
+                        }
                     />
                 )}
-
-                <div className="flex justify-between">
-                    <div className="flex items-center space-x-3">
-                        {!disablePagination && (
-                            <Select
-                                value={limit.toString()}
-                                options={[
-                                    { id: '20', label: '20 Per Page' },
-                                    { id: '40', label: '40 Per Page' },
-                                    { id: '60', label: '60 Per Page' },
-                                ]}
-                                onValueChange={(e) => {
-                                    setLimit(Number(e));
-                                    pagination.onFirst();
-                                }}
-                            />
-                        )}
-                    </div>
-                </div>
             </div>
         </div>
     );

diff --git a/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx b/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx
@@ -2,12 +2,13 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { InfoBox, InfoBoxStyle, InfoBoxType, Select } from '@iota/apps-ui-kit';
+import { InfoBox, InfoBoxStyle, InfoBoxType, Select, SelectSize } from '@iota/apps-ui-kit';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { Warning } from '@iota/ui-icons';
 import { useMemo, useState } from 'react';
 import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui';
 import { DEFAULT_CHECKPOINTS_LIMIT, useGetCheckpoints } from '~/hooks/useGetCheckpoints';
+import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants';
 import { generateCheckpointsTableColumns } from '~/lib/ui';
 import { numberSuffix } from '~/lib/utils';
 
@@ -81,26 +82,24 @@ export function CheckpointsTable({
                               }
                             : undefined
                     }
+                    pageSizeSelector={
+                        !disablePagination && (
+                            <Select
+                                value={limit.toString()}
+                                options={PAGE_SIZES_RANGE_20_60.map((size) => ({
+                                    label: `${size} / page`,
+                                    id: size.toString(),
+                                }))}
+                                size={SelectSize.Small}
+                                onValueChange={(e) => {
+                                    setLimit(Number(e));
+                                    pagination.onFirst();
+                                }}
+                            />
+                        )
+                    }
                 />
             )}
-            <div className="flex justify-between">
-                <div className="flex items-center space-x-3">
-                    {!disablePagination && (
-                        <Select
-                            value={limit.toString()}
-                            options={[
-                                { id: '20', label: '20 Per Page' },
-                                { id: '40', label: '40 Per Page' },
-                                { id: '60', label: '60 Per Page' },
-                            ]}
-                            onValueChange={(e) => {
-                                setLimit(Number(e));
-                                pagination.onFirst();
-                            }}
-                        />
-                    )}
-                </div>
-            </div>
         </div>
     );
 }
diff --git a/apps/explorer/src/components/owned-coins/OwnedCoins.tsx b/apps/explorer/src/components/owned-coins/OwnedCoins.tsx
@@ -25,6 +25,7 @@ import {
     Title,
 } from '@iota/apps-ui-kit';
 import { Pagination } from '../ui';
+import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants';
 
 export type CoinBalanceVerified = CoinBalance & {
     isRecognized?: boolean;
@@ -197,11 +198,10 @@ export function OwnedCoins({ id }: OwnerCoinsProps): JSX.Element {
                                         <Select
                                             dropdownPosition={DropdownPosition.Top}
                                             value={limit.toString()}
-                                            options={[
-                                                { label: '20 / page', id: '20' },
-                                                { label: '40 / page', id: '40' },
-                                                { label: '60 / page', id: '60' },
-                                            ]}
+                                            options={PAGE_SIZES_RANGE_20_60.map((size) => ({
+                                                label: `${size} / page`,
+                                                id: size.toString(),
+                                            }))}
                                             onValueChange={(value) => {
                                                 setLimit(Number(value));
                                                 setCurrentSlice(1);

diff --git a/apps/explorer/src/components/owned-objects/ListView.tsx b/apps/explorer/src/components/owned-objects/ListView.tsx
@@ -16,7 +16,7 @@ export function ListView({ data, loading }: ListViewProps): JSX.Element {
     const tableColumns = generateObjectListColumns();
 
     return (
-        <div className="h-full w-full [&_div:not(table_div)]:mb-md [&_div:not(table_div)]:flex [&_div:not(table_div)]:flex-col">
+        <div className="h-full w-full overflow-y-auto">
             {tableColumns && data && <TableCard data={data ?? []} columns={tableColumns} />}
             {loading && new Array(10).fill(0).map((_, index) => <Placeholder key={index} />)}
         </div>

diff --git a/apps/explorer/src/components/owned-objects/OwnedObjects.tsx b/apps/explorer/src/components/owned-objects/OwnedObjects.tsx
@@ -28,8 +28,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { ListView, SmallThumbnailsView, ThumbnailsView } from '~/components';
 import { ObjectViewMode } from '~/lib/enums';
 import { Pagination, useCursorPagination } from '~/components/ui';
+import { PAGE_SIZES_RANGE_10_50 } from '~/lib/constants';
 
-const PAGE_SIZES = [10, 20, 30, 40, 50];
 const SHOW_PAGINATION_MAX_ITEMS = 9;
 const OWNED_OBJECTS_LOCAL_STORAGE_VIEW_MODE = 'owned-objects/viewMode';
 const OWNED_OBJECTS_LOCAL_STORAGE_FILTER = 'owned-objects/filter';
@@ -128,7 +128,7 @@ export function OwnedObjects({ id }: OwnedObjectsProps): JSX.Element {
         () =>
             getItemsRangeFromCurrentPage(
                 pagination.currentPage,
-                filteredData?.length || PAGE_SIZES[0],
+                filteredData?.length || PAGE_SIZES_RANGE_10_50[0],
             ),
         [filteredData?.length, pagination.currentPage],
     );
@@ -276,7 +276,7 @@ export function OwnedObjects({ id }: OwnedObjectsProps): JSX.Element {
                                 <Select
                                     dropdownPosition={DropdownPosition.Top}
                                     value={limit.toString()}
-                                    options={PAGE_SIZES.map((size) => ({
+                                    options={PAGE_SIZES_RANGE_10_50.map((size) => ({
                                         label: `${size} / page`,
                                         id: size.toString(),
                                     }))}

diff --git a/apps/explorer/src/components/ui/TableCard.tsx b/apps/explorer/src/components/ui/TableCard.tsx
@@ -21,7 +21,7 @@ import {
     useReactTable,
 } from '@tanstack/react-table';
 import clsx from 'clsx';
-import { Fragment, useState } from 'react';
+import { Fragment, type ReactNode, useState } from 'react';
 import { Link } from './Link';
 
 export interface TableCardProps<DataType extends RowData> {
@@ -34,6 +34,7 @@ export interface TableCardProps<DataType extends RowData> {
     paginationOptions?: TablePaginationOptions;
     totalLabel?: string;
     viewAll?: string;
+    pageSizeSelector?: ReactNode;
 }
 
 export function TableCard<DataType extends object>({
@@ -46,6 +47,7 @@ export function TableCard<DataType extends object>({
     paginationOptions,
     totalLabel,
     viewAll,
+    pageSizeSelector,
 }: TableCardProps<DataType>): JSX.Element {
     const [sorting, setSorting] = useState<SortingState>(defaultSorting || []);
 
@@ -66,7 +68,7 @@ export function TableCard<DataType extends object>({
     });
 
     return (
-        <div className={clsx('w-full overflow-x-auto', refetching && 'opacity-50')}>
+        <div className={clsx('w-full overflow-visible', refetching && 'opacity-50')}>
             <Table
                 rowIndexes={table.getRowModel().rows.map((row) => row.index)}
                 paginationOptions={paginationOptions}
@@ -78,6 +80,7 @@ export function TableCard<DataType extends object>({
                         </Link>
                     ) : undefined
                 }
+                pageSizeSelector={pageSizeSelector}
             >
                 <TableHeader>
                     {table.getHeaderGroups().map((headerGroup) => (

diff --git a/apps/explorer/src/lib/constants/index.ts b/apps/explorer/src/lib/constants/index.ts
@@ -3,3 +3,4 @@
 
 export * from './footer.constants';
 export * from './validator.constants';
+export * from './pageSize.constants';
diff --git a/apps/explorer/src/lib/constants/pageSize.constants.ts b/apps/explorer/src/lib/constants/pageSize.constants.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const PAGE_SIZES_RANGE_10_50 = [10, 20, 30, 40, 50];
+export const PAGE_SIZES_RANGE_20_60 = [20, 40, 60];
diff --git a/apps/explorer/src/pages/checkpoints/CheckpointTransactionBlocks.tsx b/apps/explorer/src/pages/checkpoints/CheckpointTransactionBlocks.tsx
@@ -2,13 +2,14 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { DropdownPosition, Select, SelectSize } from '@iota/apps-ui-kit';
 import { useState } from 'react';
-
-import { Pagination, PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui';
+import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui';
 import {
     DEFAULT_TRANSACTIONS_LIMIT,
     useGetTransactionBlocks,
 } from '~/hooks/useGetTransactionBlocks';
+import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants';
 import { generateTransactionsTableColumns } from '~/lib/ui';
 
 export function CheckpointTransactionBlocks({ id }: { id: string }): JSX.Element {
@@ -34,24 +35,28 @@ export function CheckpointTransactionBlocks({ id }: { id: string }): JSX.Element
                 />
             ) : (
                 <div>
-                    <TableCard data={data.data} columns={tableColumns} />
+                    <TableCard
+                        data={data.data}
+                        columns={tableColumns}
+                        paginationOptions={pagination}
+                        pageSizeSelector={
+                            <Select
+                                dropdownPosition={DropdownPosition.Top}
+                                value={limit.toString()}
+                                options={PAGE_SIZES_RANGE_20_60.map((size) => ({
+                                    label: `${size} / page`,
+                                    id: size.toString(),
+                                }))}
+                                onValueChange={(value) => {
+                                    setLimit(Number(value));
+                                    pagination.onFirst();
+                                }}
+                                size={SelectSize.Small}
+                            />
+                        }
+                    />
                 </div>
             )}
-            <div className="flex justify-between">
-                <Pagination {...pagination} />
-                <select
-                    className="form-select rounded-md border border-gray-45 px-3 py-2 pr-8 text-bodySmall font-medium leading-[1.2] text-steel-dark shadow-button"
-                    value={limit}
-                    onChange={(e) => {
-                        setLimit(Number(e.target.value));
-                        pagination.onFirst();
-                    }}
-                >
-                    <option value={20}>20 Per Page</option>
-                    <option value={40}>40 Per Page</option>
-                    <option value={60}>60 Per Page</option>
-                </select>
-            </div>
         </div>
     );
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,4 @@

		export * from './footer.constants';
		export * from './validator.constants';
		export * from './pageSize.constants';