From 09045ce3a8120bc40dc6c21e7b4f4140f3da15d9 Mon Sep 17 00:00:00 2001 From: raghukapur9 <64493087+raghukapur9@users.noreply.github.com> Date: Fri, 20 Sep 2024 14:09:34 -0400 Subject: [PATCH] added all-blocks UI --- .../app-explorer/src/app/blocks/layout.tsx | 17 ++ packages/app-explorer/src/app/blocks/page.tsx | 23 +++ .../Block/components/BlockEfficiencyItem.tsx | 49 +++++ .../Block/components/BlockHashItem.tsx | 28 +++ .../systems/Block/components/BlockItem.tsx | 26 +++ .../Block/components/BlockTimeItem.tsx | 28 +++ .../Block/components/BlockValidatorItem.tsx | 16 ++ .../systems/Block/components/BlocksTable.tsx | 132 +++++++++++++ .../src/systems/Block/components/Hero.tsx | 21 +++ .../src/systems/Block/screens/BlockScreen.tsx | 130 +++++++++++++ packages/ui/package.json | 2 + .../ui/src/components/GridTable/GridTable.tsx | 173 ++++++++++++++++++ .../ui/src/components/GridTable/index.tsx | 1 + packages/ui/src/index.ts | 1 + packages/ui/src/theme/theme.css | 2 + pnpm-lock.yaml | 108 ++++++----- 16 files changed, 708 insertions(+), 49 deletions(-) create mode 100644 packages/app-explorer/src/app/blocks/layout.tsx create mode 100644 packages/app-explorer/src/app/blocks/page.tsx create mode 100644 packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx create mode 100644 packages/app-explorer/src/systems/Block/components/BlockHashItem.tsx create mode 100644 packages/app-explorer/src/systems/Block/components/BlockItem.tsx create mode 100644 packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx create mode 100644 packages/app-explorer/src/systems/Block/components/BlockValidatorItem.tsx create mode 100644 packages/app-explorer/src/systems/Block/components/BlocksTable.tsx create mode 100644 packages/app-explorer/src/systems/Block/components/Hero.tsx create mode 100644 packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx create mode 100644 packages/ui/src/components/GridTable/GridTable.tsx create mode 100644 packages/ui/src/components/GridTable/index.tsx diff --git a/packages/app-explorer/src/app/blocks/layout.tsx b/packages/app-explorer/src/app/blocks/layout.tsx new file mode 100644 index 000000000..1291bdbff --- /dev/null +++ b/packages/app-explorer/src/app/blocks/layout.tsx @@ -0,0 +1,17 @@ +import { OverlayDialog, Providers } from 'app-portal'; +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'All Blocks', +}; + +export default function Layout({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + ); +} + +export const dynamic = 'force-static'; diff --git a/packages/app-explorer/src/app/blocks/page.tsx b/packages/app-explorer/src/app/blocks/page.tsx new file mode 100644 index 000000000..90838da61 --- /dev/null +++ b/packages/app-explorer/src/app/blocks/page.tsx @@ -0,0 +1,23 @@ +'use client'; +import { Box, Flex } from '@fuels/ui'; +import { tv } from 'tailwind-variants'; +import { BlocksScreen } from '~/systems/Block/screens/BlockScreen'; + +const Blocks = () => { + const classes = styles(); + return ( + + + + + + ); +}; +const styles = tv({ + slots: { + content: 'w-full max-w-[100%]', + }, +}); +export default Blocks; + +export const dynamic = 'force-static'; diff --git a/packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx new file mode 100644 index 000000000..48a82374e --- /dev/null +++ b/packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx @@ -0,0 +1,49 @@ +import { Box, HStack, Text, VStack } from '@fuels/ui'; + +type BlockEfficiencyItemProps = { + current: number; + total: number; +}; + +export default function BlockEfficiencyItem({ + current, + total, +}: BlockEfficiencyItemProps) { + // Convert current and total to millions + const currentInMillions = current / 1_000_000; + const totalInMillions = total / 1_000_000; + + // Calculate progress percentage + const progress = (current / total) * 100; + + return ( + + + + {/* Format current and total as M (millions) */} + + {currentInMillions % 1 === 0 + ? currentInMillions.toFixed(0) + : currentInMillions.toFixed(1)} + M / + {totalInMillions % 1 === 0 + ? totalInMillions.toFixed(0) + : totalInMillions.toFixed(1)} + M + + + ({progress.toFixed(2)}%) + + +
+
+
+
+
+ + + ); +} diff --git a/packages/app-explorer/src/systems/Block/components/BlockHashItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockHashItem.tsx new file mode 100644 index 000000000..d36eeffd1 --- /dev/null +++ b/packages/app-explorer/src/systems/Block/components/BlockHashItem.tsx @@ -0,0 +1,28 @@ +import { Box, Copyable, HStack, VStack } from '@fuels/ui'; + +type BlockHashItemProps = { + hashAddress: string; + width: string; +}; + +export default function BlockHashItem({ + hashAddress, + width, +}: BlockHashItemProps) { + return ( + + + + +

+ {hashAddress} +

+ + + + + ); +} diff --git a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx new file mode 100644 index 000000000..f566d2ac2 --- /dev/null +++ b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx @@ -0,0 +1,26 @@ +import { Box, Copyable, HStack, Text, VStack } from '@fuels/ui'; + +export interface BlockItemProps { + blockId: string; + ethValue: string; +} + +export default function BlockItem({ blockId, ethValue }: BlockItemProps) { + return ( + + + + + #{blockId} + + + + + {ethValue} ETH + + + ); +} diff --git a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx new file mode 100644 index 000000000..741077768 --- /dev/null +++ b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx @@ -0,0 +1,28 @@ +import { Text, VStack } from '@fuels/ui'; + +type BlockTimeItemProps = { + time: Date; + timeAgo: string; +}; + +export default function BlockTimeItem({ time, timeAgo }: BlockTimeItemProps) { + const timeDate = new Date(time); + + const formattedTime = timeDate.toLocaleString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + hour12: true, + }); + + return ( + + {timeAgo} + + {formattedTime} + + + ); +} diff --git a/packages/app-explorer/src/systems/Block/components/BlockValidatorItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockValidatorItem.tsx new file mode 100644 index 000000000..29f616635 --- /dev/null +++ b/packages/app-explorer/src/systems/Block/components/BlockValidatorItem.tsx @@ -0,0 +1,16 @@ +import { HStack } from '@fuels/ui'; +import BlockHashItem from './BlockHashItem'; + +type BlockValidatorItemProps = { + hashAddress: string; +}; + +export default function BlockValidatorItem({ + hashAddress, +}: BlockValidatorItemProps) { + return ( + + + + ); +} diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx new file mode 100644 index 000000000..a146eb711 --- /dev/null +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -0,0 +1,132 @@ +import { GQLBlocksQuery } from '@fuel-explorer/graphql'; +import { GridTable } from '@fuels/ui'; +import { Link } from '@fuels/ui'; +import NextLink from 'next/link'; +import BlockEfficiencyItem from './BlockEfficiencyItem'; +import BlockHashItem from './BlockHashItem'; +import BlockItem from './BlockItem'; +import BlockTimeItem from './BlockTimeItem'; +import BlockValidatorItem from './BlockValidatorItem'; + +const columns = [ + { + name: 'Block', + cell: (row: any) => { + const totalGasUsed = ( + parseFloat(row.node.totalGasUsed) / + 10 ** 9 + ).toString(); + return ( + + ); + }, + sortable: false, + }, + { + name: 'Blockhash', + cell: (row: any) => ( + + ), + sortable: false, + }, + { + name: 'Transactions', + cell: (row: any) => ( +
+ {row.node.header.transactionsCount} +
+ ), + sortable: false, + }, + { + name: 'Rewards', + cell: (row: any) => { + const mintTransaction = row.node.transactions.find( + (trans: any) => trans.mintAmount != null, + ); + return ( +
+ {mintTransaction ? mintTransaction.mintAmount : 'No mint amount'}{' '} +
+ ); + }, + sortable: false, + }, + { + name: 'Validator', + cell: (row: any) => ( +
+ +
+ ), + sortable: false, + }, + { + name: 'Efficiency', + cell: (row: any) => ( +
+ +
+ ), + sortable: false, + }, + { + name: 'Time', + cell: (row: any) => { + const unixTimestamp = row.node.time.rawUnix; + const date = new Date(unixTimestamp * 1000); + + return ; + }, + sortable: false, + }, + { + name: '', + cell: (row: any) => ( + + View + + ), + sortable: false, + }, +]; + +type BlocksTableProps = { + blocks: GQLBlocksQuery['blocks']; + onPageChanged: (pageNumber: number) => void; + pageCount: number; + currentPage: number; + setCurrentPage: (currentPage: number) => void; +}; + +function BlocksTable({ + blocks, + onPageChanged, + pageCount, + currentPage, + setCurrentPage, +}: BlocksTableProps) { + const handlePageChanged = (pageNumber: number) => { + onPageChanged(pageNumber); + }; + + return ( +
+ +
+ ); +} + +export default BlocksTable; diff --git a/packages/app-explorer/src/systems/Block/components/Hero.tsx b/packages/app-explorer/src/systems/Block/components/Hero.tsx new file mode 100644 index 000000000..0ed3fa4b4 --- /dev/null +++ b/packages/app-explorer/src/systems/Block/components/Hero.tsx @@ -0,0 +1,21 @@ +import { HStack, Heading, Theme, VStack } from '@fuels/ui'; +import { IconChevronRight } from '@tabler/icons-react'; + +export function Hero() { + return ( + + + + Blocks + + + +

Home

+ + +

View All Blocks

+ + + + ); +} diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx new file mode 100644 index 000000000..b0a4a81dc --- /dev/null +++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx @@ -0,0 +1,130 @@ +import { VStack } from '@fuels/ui'; +import { useRouter, useSearchParams } from 'next/navigation'; +import { useEffect, useState } from 'react'; + +import { GQLBlocksQuery } from '@fuel-explorer/graphql'; +import { getBlocks } from '../actions/get-blocks'; +import BlocksTable from '../components/BlocksTable'; +import { Hero } from '../components/Hero'; + +export const BlocksScreen = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + + const [data, setData] = useState( + undefined, + ); + const [dir, setDir] = useState<'after' | 'before'>('after'); + const [totalPages, setTotalPages] = useState(1); + const [currentPage, setCurrentPage] = useState(1); + const [currentCursor, setCurrentCursor] = useState(null); + const [loading, setLoading] = useState(false); + const limit = 10; + + const calculateTotalPages = () => { + if (data?.pageInfo.endCursor) { + const endCursor = Number(data.pageInfo.endCursor); + return Math.ceil(endCursor / limit); + } + return 1; + }; + + useEffect(() => { + if (data) { + const totalPageCount = calculateTotalPages(); + setTotalPages(totalPageCount); + } + }, [data]); + + const fetchBlockData = async ( + cursor: string | null = null, + dir: 'after' | 'before' = 'after', + ) => { + setLoading(true); + try { + const result = await getBlocks({ cursor, dir }); + const blockData = result.blocks; + setData(blockData); + } finally { + setLoading(false); + } + }; + + const handlePageChanged = (newPageNumber: number) => { + if (data) { + const newDir = newPageNumber > currentPage ? 'before' : 'after'; + let newCursor: string | null = null; + setDir(newDir); + + if ( + newPageNumber === currentPage + 1 || + newPageNumber === currentPage - 1 + ) { + if (newDir === 'before' && data.pageInfo.endCursor) { + newCursor = data.pageInfo.endCursor; + } else if (newDir === 'after' && data.pageInfo.startCursor) { + newCursor = data.pageInfo.startCursor; + } + } else { + if (newDir === 'before' && data.pageInfo.endCursor) { + newCursor = ( + +data.pageInfo.endCursor - + (newPageNumber - currentPage) * limit + ).toString(); + } else if (newDir === 'after' && data.pageInfo.startCursor) { + newCursor = ( + +data.pageInfo.startCursor + + (currentPage - newPageNumber) * limit + ).toString(); + } + } + + setCurrentPage(newPageNumber); + setCurrentCursor(newCursor); + if (newPageNumber === 1) { + router.push('/blocks'); + return; + } + router.push(`/blocks?page=${newPageNumber}&cursor=${newCursor}`); + } + }; + + useEffect(() => { + const page = parseInt(searchParams.get('page') || '1'); + const cursor = searchParams.get('cursor') || null; + + setCurrentPage(page); + setCurrentCursor(cursor); + setDir(page > currentPage ? 'after' : 'before'); + }, [searchParams]); + + useEffect(() => { + fetchBlockData(currentCursor, dir); + }, [currentCursor, dir]); + + useEffect(() => { + if (data) { + const totalPageCount = calculateTotalPages(); + setTotalPages(totalPageCount); + } + }, [data]); + + return ( + + + {loading ? ( +

Loading blocks...

+ ) : ( + data && ( + + ) + )} + + ); +}; diff --git a/packages/ui/package.json b/packages/ui/package.json index 26f25362d..e8b2b99ce 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -67,6 +67,8 @@ "@react-aria/focus": "3.16.2", "@tabler/icons-react": "2.47.0", "@tailwindcss/typography": "0.5.10", + "react-paginate": "8.2.0", + "react-data-table-component": "7.6.2", "clsx": "2.1.0", "csstype": "3.1.3", "framer-motion": "11.0.5", diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx new file mode 100644 index 000000000..676ddace7 --- /dev/null +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -0,0 +1,173 @@ +'use client'; +import React from 'react'; +import DataTable, { TableProps, TableColumn } from 'react-data-table-component'; +import ReactPaginate from 'react-paginate'; + +export interface GridTableProps extends TableProps { + columns: TableColumn[]; + data: T[]; + pageCount: number; + onPageChanged: (selectedItem: number) => void; + currentPage: number; + setCurrentPage: (currentPage: number) => void; +} +export type GridTableColumn = TableColumn; + +export const GridTable = ({ + columns, + data, + pageCount, + onPageChanged, + setCurrentPage, + currentPage, + ...props +}: GridTableProps): React.JSX.Element => { + const customStyles = { + tableWrapper: { + style: { + borderRadius: '7px', + }, + }, + table: { + style: { + backgroundColor: 'transparent', + }, + }, + headRow: { + style: { + backgroundColor: 'transparent', + color: '#9f9f9f', + fontWeight: '600', + }, + }, + headCells: { + style: { + backgroundColor: 'transparent', + color: '#9f9f9f', + fontWeight: '600', + }, + }, + rows: { + style: { + cursor: 'pointer', + backgroundColor: 'transparent', + fontWeight: '400', + '&:hover': { + backgroundColor: 'var(--gray-2)', // Change background color on hover + }, + }, + }, + cells: { + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + paddingLeft: '0.5rem', + paddingRight: '0.5rem', + color: 'var(--gray-table-text)', + paddingTop: '0.9rem', + paddingBottom: '0.9rem', + backgroundColor: 'transparent', + fontWeight: '400', + }, + }, + pagination: { + style: { + backgroundColor: 'var(--gray-2)', + color: '#f0f0f0', + }, + pageButtonsStyle: { + padding: '8px 16px', + margin: '0 4px', + color: '#f0f0f0', + borderRadius: '4px', + backgroundColor: 'var(--gray-2)', + '&.selected': { + backgroundColor: 'rgba(255, 255, 255, 0.1)', + fontWeight: 'bold', + }, + '&:hover': { + backgroundColor: 'rgba(255, 255, 255, 0.2)', + }, + }, + }, + }; + + const Pagination: React.FC = () => { + return ( + ← Previous} // Left Arrow + nextLabel={Next →} // Right Arrow + breakLabel={'...'} + pageCount={pageCount} + marginPagesDisplayed={2} + pageRangeDisplayed={5} + onPageChange={(page) => handlePagination(page)} + containerClassName={'pagination'} + activeClassName={'selected'} + disabledClassName={'disabled'} + pageLinkClassName={'page-link'} + forcePage={currentPage !== 0 ? currentPage - 1 : 0} + /> + ); + }; + + const handlePagination = (page: any) => { + setCurrentPage(page.selected + 1); + onPageChanged(page.selected + 1); + }; + + return ( +
+ + +
+ ); +}; diff --git a/packages/ui/src/components/GridTable/index.tsx b/packages/ui/src/components/GridTable/index.tsx new file mode 100644 index 000000000..42edf4b31 --- /dev/null +++ b/packages/ui/src/components/GridTable/index.tsx @@ -0,0 +1 @@ +export { GridTable } from './GridTable'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 85be5c025..9aa443a79 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -32,6 +32,7 @@ export * from './components/Dropdown'; export * from './components/EntityItem'; export * from './components/Focus'; export * from './components/FuelLogo'; +export * from './components/GridTable'; export * from './components/Heading'; export * from './components/HelperIcon'; export * from './components/HoverCard'; diff --git a/packages/ui/src/theme/theme.css b/packages/ui/src/theme/theme.css index bfd4d716a..7a282c623 100644 --- a/packages/ui/src/theme/theme.css +++ b/packages/ui/src/theme/theme.css @@ -834,6 +834,7 @@ --gray-a12: #ffffffed; --gray-contrast: #FFFFFF; + --gray-table-text: #FFFFFF; --gray-surface: rgba(0, 0, 0, 0.05); --gray-indicator: var(--gray-9); } @@ -871,6 +872,7 @@ --gray-a12: #000000df; --gray-contrast: #FFFFFF; + --gray-table-text: #000000; --gray-surface: #ffffffcc; --gray-indicator: var(--gray-9); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75a7ae6e8..abed6c342 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -869,9 +869,15 @@ importers: react-aria: specifier: 3.32.1 version: 3.32.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + react-data-table-component: + specifier: 7.6.2 + version: 7.6.2(react@18.2.0)(styled-components@5.3.11(@babel/core@7.23.9)(react-dom@18.2.0(react@18.2.0))(react-is@18.2.0)(react@18.2.0)) react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) + react-paginate: + specifier: 8.2.0 + version: 8.2.0(react@18.2.0) react-stately: specifier: 3.29.1 version: 3.29.1(react@18.2.0) @@ -3828,10 +3834,6 @@ packages: resolution: {integrity: sha512-yfmE79bRQtnMzarnKfX7AEJBwFTxvTyw3nBQlu/5rmGXrjAeAMltoGxO62TFurxrQAFMNa/fEjIHNvungZp0+g==} engines: {node: '>=14.0.0'} - '@metamask/utils@8.4.0': - resolution: {integrity: sha512-dbIc3C7alOe0agCuBHM1h71UaEaEqOk2W8rAtEn8QGz4haH2Qq7MoK6i7v2guzvkJVVh79c+QCzIqphC3KvrJg==} - engines: {node: '>=16.0.0'} - '@metamask/utils@8.5.0': resolution: {integrity: sha512-I6bkduevXb72TIM9q2LRO63JSsF9EXduh3sBr9oybNX2hNNpr/j1tEjXrsG0Uabm4MJ1xkGAQEMwifvKZIkyxQ==} engines: {node: '>=16.0.0'} @@ -13028,6 +13030,12 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' + react-data-table-component@7.6.2: + resolution: {integrity: sha512-nHe7040fmtrJyQr/ieGrTfV0jBflYGK4sLokC6/AFOv3ThjmA9WzKz8Z8/2wMxzRqLU+Rn0CVFg+8+frKLepWQ==} + peerDependencies: + react: '>= 16.8.3' + styled-components: '>= 5.0.0' + react-docgen-typescript@2.2.2: resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==} peerDependencies: @@ -13078,6 +13086,11 @@ packages: react: '*' react-native: '*' + react-paginate@8.2.0: + resolution: {integrity: sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==} + peerDependencies: + react: ^16 || ^17 || ^18 + react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} @@ -18299,7 +18312,7 @@ snapshots: '@graphql-tools/utils': 10.5.4(graphql@16.8.1) dataloader: 2.2.2 graphql: 16.8.1 - tslib: 2.6.3 + tslib: 2.7.0 value-or-promise: 1.0.12 '@graphql-tools/batch-execute@9.0.4(graphql@16.8.1)': @@ -18970,7 +18983,7 @@ snapshots: dependencies: '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 18.19.14 + '@types/node': 20.14.15 '@types/yargs': 15.0.19 chalk: 4.1.2 @@ -19039,8 +19052,8 @@ snapshots: '@jridgewell/source-map@0.3.5': dependencies: - '@jridgewell/gen-mapping': 0.3.3 - '@jridgewell/trace-mapping': 0.3.22 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 '@jridgewell/source-map@0.3.6': dependencies: @@ -19122,7 +19135,7 @@ snapshots: dependencies: '@metamask/rpc-errors': 6.2.1 '@metamask/safe-event-emitter': 3.1.1 - '@metamask/utils': 8.4.0 + '@metamask/utils': 8.5.0 transitivePeerDependencies: - supports-color @@ -19130,7 +19143,7 @@ snapshots: dependencies: '@metamask/json-rpc-engine': 8.0.2 '@metamask/safe-event-emitter': 3.1.1 - '@metamask/utils': 8.4.0 + '@metamask/utils': 8.5.0 readable-stream: 3.6.2 transitivePeerDependencies: - supports-color @@ -19151,7 +19164,7 @@ snapshots: '@metamask/object-multiplex': 2.0.0 '@metamask/rpc-errors': 6.2.1 '@metamask/safe-event-emitter': 3.1.1 - '@metamask/utils': 8.4.0 + '@metamask/utils': 8.5.0 detect-browser: 5.3.0 extension-port-stream: 3.0.0 fast-deep-equal: 3.1.3 @@ -19163,7 +19176,7 @@ snapshots: '@metamask/rpc-errors@6.2.1': dependencies: - '@metamask/utils': 8.4.0 + '@metamask/utils': 8.5.0 fast-safe-stringify: 2.1.1 transitivePeerDependencies: - supports-color @@ -19249,29 +19262,15 @@ snapshots: transitivePeerDependencies: - supports-color - '@metamask/utils@8.4.0': - dependencies: - '@ethereumjs/tx': 4.2.0 - '@noble/hashes': 1.4.0 - '@scure/base': 1.1.8 - '@types/debug': 4.1.12 - debug: 4.3.7(supports-color@8.1.1) - pony-cause: 2.1.10 - semver: 7.6.3 - superstruct: 1.0.4 - uuid: 9.0.1 - transitivePeerDependencies: - - supports-color - '@metamask/utils@8.5.0': dependencies: '@ethereumjs/tx': 4.2.0 '@metamask/superstruct': 3.1.0 - '@noble/hashes': 1.5.0 + '@noble/hashes': 1.4.0 '@scure/base': 1.1.8 '@types/debug': 4.1.12 debug: 4.3.7(supports-color@8.1.1) - pony-cause: 2.1.11 + pony-cause: 2.1.10 semver: 7.6.3 uuid: 9.0.1 transitivePeerDependencies: @@ -19296,7 +19295,7 @@ snapshots: '@motionone/easing': 10.17.0 '@motionone/types': 10.17.0 '@motionone/utils': 10.17.0 - tslib: 2.6.3 + tslib: 2.7.0 '@motionone/dom@10.12.0': dependencies: @@ -19325,7 +19324,7 @@ snapshots: dependencies: '@motionone/types': 10.17.0 '@motionone/utils': 10.17.0 - tslib: 2.6.3 + tslib: 2.7.0 '@motionone/svelte@10.16.4': dependencies: @@ -19338,7 +19337,7 @@ snapshots: dependencies: '@motionone/types': 10.17.0 hey-listen: 1.0.8 - tslib: 2.6.3 + tslib: 2.7.0 '@motionone/vue@10.16.4': dependencies: @@ -19576,11 +19575,11 @@ snapshots: dependencies: asn1js: 3.0.5 pvtsutils: 1.3.5 - tslib: 2.6.3 + tslib: 2.7.0 '@peculiar/json-schema@1.1.12': dependencies: - tslib: 2.6.3 + tslib: 2.7.0 '@peculiar/webcrypto@1.4.5': dependencies: @@ -23265,11 +23264,11 @@ snapshots: '@swc/helpers@0.4.36': dependencies: legacy-swc-helpers: '@swc/helpers@0.4.14' - tslib: 2.6.3 + tslib: 2.7.0 '@swc/helpers@0.5.12': dependencies: - tslib: 2.6.3 + tslib: 2.7.0 '@swc/helpers@0.5.5': dependencies: @@ -23646,7 +23645,7 @@ snapshots: '@types/http-proxy@1.17.14': dependencies: - '@types/node': 18.19.14 + '@types/node': 20.14.15 '@types/istanbul-lib-coverage@2.0.6': {} @@ -23707,7 +23706,7 @@ snapshots: '@types/node-forge@1.3.11': dependencies: - '@types/node': 18.19.14 + '@types/node': 20.14.15 '@types/node@10.12.18': {} @@ -23737,7 +23736,7 @@ snapshots: '@types/pbkdf2@3.1.2': dependencies: - '@types/node': 18.19.14 + '@types/node': 20.14.15 '@types/pg@8.11.6': dependencies: @@ -23777,7 +23776,7 @@ snapshots: '@types/secp256k1@4.0.6': dependencies: - '@types/node': 18.19.14 + '@types/node': 20.14.15 '@types/semver@7.5.6': {} @@ -26241,7 +26240,7 @@ snapshots: capital-case@1.0.4: dependencies: no-case: 3.0.4 - tslib: 2.6.3 + tslib: 2.7.0 upper-case-first: 2.0.2 case-sensitive-paths-webpack-plugin@2.4.0: {} @@ -26610,7 +26609,7 @@ snapshots: constant-case@3.0.4: dependencies: no-case: 3.0.4 - tslib: 2.6.3 + tslib: 2.7.0 upper-case: 2.0.2 constants-browserify@1.0.0: {} @@ -29042,7 +29041,7 @@ snapshots: header-case@2.0.4: dependencies: capital-case: 1.0.4 - tslib: 2.6.3 + tslib: 2.7.0 help-me@5.0.0: {} @@ -29365,7 +29364,7 @@ snapshots: '@formatjs/ecma402-abstract': 1.18.2 '@formatjs/fast-memoize': 2.2.0 '@formatjs/icu-messageformat-parser': 2.7.6 - tslib: 2.6.3 + tslib: 2.7.0 into-stream@3.1.0: dependencies: @@ -29672,7 +29671,7 @@ snapshots: '@babel/core': 7.23.9 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 - semver: 7.6.0 + semver: 7.6.3 transitivePeerDependencies: - supports-color @@ -29692,7 +29691,7 @@ snapshots: '@babel/parser': 7.23.9 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 - semver: 7.6.0 + semver: 7.6.3 transitivePeerDependencies: - supports-color @@ -30787,7 +30786,7 @@ snapshots: make-dir@4.0.0: dependencies: - semver: 7.6.0 + semver: 7.6.3 make-error@1.3.6: {} @@ -31468,7 +31467,7 @@ snapshots: path-case@3.0.4: dependencies: dot-case: 3.0.4 - tslib: 2.6.3 + tslib: 2.7.0 path-exists@3.0.0: {} @@ -32151,7 +32150,7 @@ snapshots: pvtsutils@1.3.5: dependencies: - tslib: 2.6.3 + tslib: 2.7.0 pvutils@1.1.3: {} @@ -32308,6 +32307,12 @@ snapshots: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + react-data-table-component@7.6.2(react@18.2.0)(styled-components@5.3.11(@babel/core@7.23.9)(react-dom@18.2.0(react@18.2.0))(react-is@18.2.0)(react@18.2.0)): + dependencies: + deepmerge: 4.3.1 + react: 18.2.0 + styled-components: 5.3.11(@babel/core@7.23.9)(react-dom@18.2.0(react@18.2.0))(react-is@18.2.0)(react@18.2.0) + react-docgen-typescript@2.2.2(typescript@5.4.5): dependencies: typescript: 5.4.5 @@ -32363,6 +32368,11 @@ snapshots: invariant: 2.2.4 react: 18.2.0 + react-paginate@8.2.0(react@18.2.0): + dependencies: + prop-types: 15.8.1 + react: 18.2.0 + react-refresh@0.14.0: {} react-remove-scroll-bar@2.3.4(@types/react@18.2.54)(react@18.2.0): @@ -35055,7 +35065,7 @@ snapshots: '@peculiar/json-schema': 1.1.12 asn1js: 3.0.5 pvtsutils: 1.3.5 - tslib: 2.6.3 + tslib: 2.7.0 webextension-polyfill@0.10.0: {}