From 9abb8f9fc924063be804b72a57673060c9aa9500 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Mon, 31 Jul 2023 18:11:21 +0700 Subject: [PATCH 1/8] chore: update filter component to filter chains by typedChainId --- .../PoolTransactionsTable.tsx | 4 -- .../components/PoolTransactionsTable/types.ts | 1 - .../components/table/FilterButton.tsx | 52 ++++++++----------- apps/hubble-stats/components/table/types.ts | 20 ++++--- .../PoolTransactionsTableContainer.tsx | 19 ++++--- 5 files changed, 39 insertions(+), 57 deletions(-) diff --git a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx index 8f22e59804..404717b9fe 100644 --- a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx +++ b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx @@ -66,15 +66,11 @@ const columns: ColumnDef[] = [ const PoolTransactionsTable: FC = ({ data, - globalSearchText, pageSize, }) => { const table = useReactTable({ data, columns, - state: { - globalFilter: globalSearchText, - }, initialState: { pagination: { pageSize, diff --git a/apps/hubble-stats/components/PoolTransactionsTable/types.ts b/apps/hubble-stats/components/PoolTransactionsTable/types.ts index 53af909f70..792f4727a6 100644 --- a/apps/hubble-stats/components/PoolTransactionsTable/types.ts +++ b/apps/hubble-stats/components/PoolTransactionsTable/types.ts @@ -14,6 +14,5 @@ export type PoolTransactionType = { export interface PoolTransactionsTableProps { data: PoolTransactionType[]; - globalSearchText: string; pageSize: number; } diff --git a/apps/hubble-stats/components/table/FilterButton.tsx b/apps/hubble-stats/components/table/FilterButton.tsx index 947be60e1f..16074aa600 100644 --- a/apps/hubble-stats/components/table/FilterButton.tsx +++ b/apps/hubble-stats/components/table/FilterButton.tsx @@ -1,4 +1,4 @@ -import { FC, useMemo } from 'react'; +import { FC } from 'react'; import { Accordion, AccordionButton, @@ -12,7 +12,7 @@ import { DropdownBody, } from '@webb-tools/webb-ui-components'; import { TokenIcon, ChevronDown } from '@webb-tools/icons'; -import { chainsConfig, ChainConfig } from '@webb-tools/dapp-config/chains'; +import { chainsConfig } from '@webb-tools/dapp-config/chains'; import { FilterButtonProps } from './types'; @@ -28,18 +28,6 @@ const FilterButton: FC = ({ setSelectedDestinationChains, showAllFn, }) => { - const sourceChainOptions = useMemo(() => { - return Object.keys(chainsConfig) - .map((key: any) => [String(key), chainsConfig[key]]) - .filter((val: any) => sourceChains.includes(val['1'].name)); - }, [sourceChains]); - - const destinationChainOptions = useMemo(() => { - return Object.keys(chainsConfig) - .map((key: any) => [String(key), chainsConfig[key]]) - .filter((val: any) => destinationChains.includes(val['1'].name)); - }, [destinationChains]); - return ( @@ -68,13 +56,11 @@ const FilterButton: FC = ({ value={selectedTokens} options={tokens} onChange={(tokens) => { - setSelectedTokens(tokens as [string, string][]); + setSelectedTokens(tokens as [number, string][]); }} - iconGetter={([_key, name]) => ( - - )} + iconGetter={([_, name]) => } labelGetter={([_, name]) => name} - keyGetter={([tokenId]) => `Filter_proposals${tokenId}`} + keyGetter={([tokenId]) => tokenId.toString()} className="px-0" labelClassName="uppercase" showAllLabel={false} @@ -91,14 +77,17 @@ const FilterButton: FC = ({ { - setSelectedSourceChains(chains as [string, ChainConfig][]); + setSelectedSourceChains(chains as number[]); }} - labelGetter={([_, chain]: any) => ( - + labelGetter={(typedChainId) => ( + )} - keyGetter={([chainId]) => `Filter_proposals${chainId}`} + keyGetter={(typedChainId) => typedChainId.toString()} className="px-0" labelClassName="!pl-0" showAllLabel={false} @@ -114,16 +103,17 @@ const FilterButton: FC = ({ { - setSelectedDestinationChains( - chains as [string, ChainConfig][] - ); + setSelectedDestinationChains(chains as number[]); }} - labelGetter={([_, chain]: any) => ( - + labelGetter={(typedChainId) => ( + )} - keyGetter={([chainId]) => `Filter_proposals${chainId}`} + keyGetter={(typedChainId) => typedChainId.toString()} className="px-0" labelClassName="!pl-0" showAllLabel={false} diff --git a/apps/hubble-stats/components/table/types.ts b/apps/hubble-stats/components/table/types.ts index e952970c0c..d90a8d233d 100644 --- a/apps/hubble-stats/components/table/types.ts +++ b/apps/hubble-stats/components/table/types.ts @@ -1,5 +1,3 @@ -import { ChainConfig } from '@webb-tools/dapp-config'; - export interface HeaderCellProps { title: string; tooltip?: string; @@ -37,14 +35,14 @@ export interface DestinationCellProps { } export interface FilterButtonProps { - tokens: [string, string][]; - selectedTokens: [string, string][]; - setSelectedTokens: (tokens: [string, string][]) => void; - sourceChains: string[]; - selectedSourceChains: [string, ChainConfig][]; - setSelectedSourceChains: (chains: [string, ChainConfig][]) => void; - destinationChains: string[]; - selectedDestinationChains: [string, ChainConfig][]; - setSelectedDestinationChains: (chains: [string, ChainConfig][]) => void; + tokens: [number, string][]; + selectedTokens: [number, string][]; + setSelectedTokens: (tokens: [number, string][]) => void; + sourceChains: number[]; + selectedSourceChains: number[]; + setSelectedSourceChains: (chains: number[]) => void; + destinationChains: number[]; + selectedDestinationChains: number[]; + setSelectedDestinationChains: (chains: number[]) => void; showAllFn: () => void; } diff --git a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx index 5c922a26eb..7016810b30 100644 --- a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx +++ b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx @@ -1,18 +1,21 @@ 'use client'; -import { useState, useMemo } from 'react'; +import { FC, useMemo } from 'react'; import { TableAndChartTabs } from '@webb-tools/webb-ui-components'; import { PoolTransactionsTable } from '../../components'; import { FilterButton } from '../../components/table'; import { PoolTransactionType } from '../../components/PoolTransactionsTable/types'; -const pageSize = 10; +interface PoolTransactionsTableContainerProps { + poolsData?: PoolTransactionType[]; +} -const PoolTransactionsTableContainer = () => { - const [poolsData, setPoolsData] = useState([]); - const [globalSearchText, setGlobalSearchText] = useState(''); +const pageSize = 10; +const PoolTransactionsTableContainer: FC< + PoolTransactionsTableContainerProps +> = ({ poolsData = [] }) => { const filterButton = useMemo( () => ( { headerClassName="w-full overflow-x-auto" triggerClassName="whitespace-nowrap" > - + ); }; From e4448e8ee3aa592d7f33e5866e7b58150cfd5cff Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Mon, 31 Jul 2023 18:38:30 +0700 Subject: [PATCH 2/8] chore: update typedChainIds prop in shielded tables --- .../ShieldedAssetsTable/ShieldedAssetsTable.tsx | 11 ++++++----- .../components/ShieldedAssetsTable/types.ts | 8 ++++---- .../ShieldedPoolsTable/ShieldedPoolsTable.tsx | 11 ++++++----- .../components/ShieldedPoolsTable/types.ts | 6 +++--- apps/hubble-stats/utils/getChainNamesByTypedId.ts | 7 +++++++ apps/hubble-stats/utils/index.ts | 1 + 6 files changed, 27 insertions(+), 17 deletions(-) create mode 100644 apps/hubble-stats/utils/getChainNamesByTypedId.ts diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx index 7b3fc75686..fec6dd3fdf 100644 --- a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx +++ b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx @@ -20,6 +20,7 @@ import { ShieldedAssetDark, ShieldedAssetLight } from '@webb-tools/icons'; import { ShieldedAssetType, ShieldedAssetsTableProps } from './types'; import { HeaderCell, NumberCell, ShieldedCell } from '../table'; import { PoolTypeChip } from '..'; +import { getChainNamesByTypedId } from '../../utils'; const columnHelper = createColumnHelper(); @@ -50,11 +51,11 @@ const staticColumns: ColumnDef[] = [ header: () => , cell: (props) => , }), - columnHelper.accessor('chains', { + columnHelper.accessor('typedChainIds', { header: () => , cell: (props) => ( @@ -70,14 +71,14 @@ const ShieldedAssetsTable: FC = ({ const columns = useMemo[]>( () => [ - columnHelper.accessor('assetAddress', { + columnHelper.accessor('address', { header: () => ( ), cell: (props) => ( : } /> ), diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/types.ts b/apps/hubble-stats/components/ShieldedAssetsTable/types.ts index 3572f8868a..5480baab6b 100644 --- a/apps/hubble-stats/components/ShieldedAssetsTable/types.ts +++ b/apps/hubble-stats/components/ShieldedAssetsTable/types.ts @@ -1,14 +1,14 @@ import { PoolType } from '../PoolTypeChip/types'; export interface ShieldedAssetType { - assetAddress: string; - assetSymbol: string; - assetsUrl: string; + address: string; + symbol: string; + url: string; poolType: PoolType; composition: string[]; deposits24h: number; tvl: number; - chains: string[]; + typedChainIds: number[]; } export interface ShieldedAssetsTableProps { diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx index b12f26100b..ffefc5fc68 100644 --- a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx +++ b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx @@ -14,18 +14,19 @@ import { Table, IconsGroup, fuzzyFilter } from '@webb-tools/webb-ui-components'; import { ShieldedPoolType, ShieldedPoolsTableProps } from './types'; import { HeaderCell, NumberCell, ShieldedCell } from '../table'; import { PoolTypeChip } from '..'; +import { getChainNamesByTypedId } from '../../utils'; const columnHelper = createColumnHelper(); const columns: ColumnDef[] = [ - columnHelper.accessor('poolAddress', { + columnHelper.accessor('address', { header: () => ( ), cell: (props) => ( ), }), @@ -49,11 +50,11 @@ const columns: ColumnDef[] = [ header: () => , cell: (props) => , }), - columnHelper.accessor('chains', { + columnHelper.accessor('typedChainIds', { header: () => , cell: (props) => ( diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts index 02dd757412..8c87782da1 100644 --- a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts +++ b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts @@ -1,13 +1,13 @@ import { PoolType } from '../PoolTypeChip/types'; export interface ShieldedPoolType { - poolSymbol: string; - poolAddress: string; + symbol: string; + address: string; poolType: PoolType; token: number; deposits24h: number; tvl: number; - chains: string[]; + typedChainIds: string[]; } export interface ShieldedPoolsTableProps { diff --git a/apps/hubble-stats/utils/getChainNamesByTypedId.ts b/apps/hubble-stats/utils/getChainNamesByTypedId.ts new file mode 100644 index 0000000000..ad6ace5bce --- /dev/null +++ b/apps/hubble-stats/utils/getChainNamesByTypedId.ts @@ -0,0 +1,7 @@ +import { chainsConfig } from '@webb-tools/dapp-config/chains'; + +const getChainNamesByTypedId = (typedChainIds: number[]) => { + return typedChainIds.map((typedChainId) => chainsConfig[typedChainId].name); +}; + +export default getChainNamesByTypedId; diff --git a/apps/hubble-stats/utils/index.ts b/apps/hubble-stats/utils/index.ts index daa6cd1945..13061a8d06 100644 --- a/apps/hubble-stats/utils/index.ts +++ b/apps/hubble-stats/utils/index.ts @@ -1 +1,2 @@ +export { default as getChainNamesByTypedId } from './getChainNamesByTypedId'; export { default as getSortedTypedChainIds } from './getSortedTypedChainIds'; From 3bf56f382e5f8d9d1b78b8dff2d3e8a5a68f36e4 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Mon, 31 Jul 2023 18:47:47 +0700 Subject: [PATCH 3/8] chore: remove darkmode check in Shielded Asset Table --- .../ShieldedAssetsTable.tsx | 44 ++++++------------- .../components/table/ShieldedCell.tsx | 13 ++++-- apps/hubble-stats/components/table/types.ts | 1 - 3 files changed, 23 insertions(+), 35 deletions(-) diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx index fec6dd3fdf..aa878e6933 100644 --- a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx +++ b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx @@ -1,4 +1,4 @@ -import { FC, useMemo } from 'react'; +import { FC } from 'react'; import { createColumnHelper, useReactTable, @@ -9,13 +9,7 @@ import { ColumnDef, Table as RTTable, } from '@tanstack/react-table'; -import { - Table, - fuzzyFilter, - IconsGroup, - useDarkMode, -} from '@webb-tools/webb-ui-components'; -import { ShieldedAssetDark, ShieldedAssetLight } from '@webb-tools/icons'; +import { Table, fuzzyFilter, IconsGroup } from '@webb-tools/webb-ui-components'; import { ShieldedAssetType, ShieldedAssetsTableProps } from './types'; import { HeaderCell, NumberCell, ShieldedCell } from '../table'; @@ -24,7 +18,18 @@ import { getChainNamesByTypedId } from '../../utils'; const columnHelper = createColumnHelper(); -const staticColumns: ColumnDef[] = [ +const columns: ColumnDef[] = [ + columnHelper.accessor('address', { + header: () => ( + + ), + cell: (props) => ( + + ), + }), columnHelper.accessor('poolType', { header: () => , cell: (props) => ( @@ -67,27 +72,6 @@ const ShieldedAssetsTable: FC = ({ data, pageSize, }) => { - const [isDarkMode] = useDarkMode(); - - const columns = useMemo[]>( - () => [ - columnHelper.accessor('address', { - header: () => ( - - ), - cell: (props) => ( - : } - /> - ), - }), - ...staticColumns, - ], - [isDarkMode] - ); - const table = useReactTable({ data, columns, diff --git a/apps/hubble-stats/components/table/ShieldedCell.tsx b/apps/hubble-stats/components/table/ShieldedCell.tsx index 05c75753ee..b05abf2b97 100644 --- a/apps/hubble-stats/components/table/ShieldedCell.tsx +++ b/apps/hubble-stats/components/table/ShieldedCell.tsx @@ -1,14 +1,19 @@ import { FC } from 'react'; import { Typography } from '@webb-tools/webb-ui-components'; import { shortenHex } from '@webb-tools/webb-ui-components/utils'; -import { ExternalLinkIcon } from '@radix-ui/react-icons'; +import { + ExternalLinkLine, + ShieldedAssetDark, + ShieldedAssetLight, +} from '@webb-tools/icons'; import { ShieldedCellProps } from './types'; -const ShieldedCell: FC = ({ title, address, icon }) => { +const ShieldedCell: FC = ({ title, address }) => { return (
- {icon ?? null} + +
= ({ title, address, icon }) => { {/* TODO: update href */} - +
diff --git a/apps/hubble-stats/components/table/types.ts b/apps/hubble-stats/components/table/types.ts index d90a8d233d..8f3d774d8b 100644 --- a/apps/hubble-stats/components/table/types.ts +++ b/apps/hubble-stats/components/table/types.ts @@ -15,7 +15,6 @@ export interface NumberCellProps { export interface ShieldedCellProps { title: string; address: string; - icon?: JSX.Element; } export type ActivityType = 'deposit' | 'transfer' | 'withdraw'; From d3537f3031b415d221a3120632ae53490911584e Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Mon, 31 Jul 2023 20:04:14 +0700 Subject: [PATCH 4/8] chore: minor refactor accross files --- .../KeyMetricItem/KeyMetricItem.tsx | 8 +----- .../PoolTransactionsTable.tsx | 26 +++++++++---------- .../components/table/DestinationCell.tsx | 7 ++--- .../components/table/HeaderCell.tsx | 4 +-- .../components/table/NumberCell.tsx | 4 +-- .../components/table/TimeCell.tsx | 4 +-- .../KeyMetricsTableContainer.tsx | 9 +------ .../PoolMetadataTableContainer.tsx | 3 ++- .../PoolOverviewContainer.tsx | 9 +------ 9 files changed, 28 insertions(+), 46 deletions(-) diff --git a/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx b/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx index 4d77347e2c..0534be891b 100644 --- a/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx +++ b/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx @@ -12,13 +12,7 @@ const KeyMetricItem: FC = ({ changeRate, }) => { return ( -
+
{title} diff --git a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx index 404717b9fe..67c85e1392 100644 --- a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx +++ b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx @@ -25,41 +25,41 @@ const columnHelper = createColumnHelper(); const columns: ColumnDef[] = [ columnHelper.accessor('activity', { header: () => , - cell: (row) => ( + cell: (props) => ( ), }), columnHelper.accessor('tokenAmount', { header: () => , - cell: (row) => ( + cell: (props) => ( ), }), columnHelper.accessor('source', { header: () => , - cell: (row) => ( + cell: (props) => ( ), }), columnHelper.accessor('destination', { header: () => , - cell: (row) => , + cell: (props) => , }), columnHelper.accessor('time', { header: () => , - cell: (row) => ( - + cell: (props) => ( + ), }), ]; diff --git a/apps/hubble-stats/components/table/DestinationCell.tsx b/apps/hubble-stats/components/table/DestinationCell.tsx index 7a30a33110..046fa5dd7c 100644 --- a/apps/hubble-stats/components/table/DestinationCell.tsx +++ b/apps/hubble-stats/components/table/DestinationCell.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import cx from 'classnames'; +import { twMerge } from 'tailwind-merge'; import { ShieldedAssetLight } from '@webb-tools/icons'; import { DestinationCellProps } from './types'; @@ -7,10 +7,11 @@ import { DestinationCellProps } from './types'; const DestinationCell: FC = ({ className }) => { return ( diff --git a/apps/hubble-stats/components/table/HeaderCell.tsx b/apps/hubble-stats/components/table/HeaderCell.tsx index c1e5b73e11..500ab31c6f 100644 --- a/apps/hubble-stats/components/table/HeaderCell.tsx +++ b/apps/hubble-stats/components/table/HeaderCell.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import cx from 'classnames'; +import { twMerge } from 'tailwind-merge'; import { IconWithTooltip, Typography } from '@webb-tools/webb-ui-components'; import { InformationLine } from '@webb-tools/icons'; @@ -10,7 +10,7 @@ const HeaderCell: FC = ({ title, tooltip, className }) => { = ({ return ( = ({ time, className }) => { return ( {time ? 'Today' : '-'} diff --git a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx index 9cfbe8d56b..6ad3e2bd4d 100644 --- a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx +++ b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx @@ -1,19 +1,12 @@ 'use client'; import { FC } from 'react'; -import cx from 'classnames'; import { KeyMetricItem } from '../../components'; const KeyMetricsTableContainer: FC = () => { return ( -
+
{/* Tablet and Desktop */}
diff --git a/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx b/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx index ab2a147f82..ecc2a293f3 100644 --- a/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx +++ b/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx @@ -1,5 +1,6 @@ 'use client'; +import { FC } from 'react'; import { Typography } from '@webb-tools/webb-ui-components'; import { PoolMetadataTable } from '../../components'; @@ -40,7 +41,7 @@ const metadata: PoolAttributeType[] = [ }, ]; -const PoolMetadataTableContainer = () => { +const PoolMetadataTableContainer: FC = () => { return (
diff --git a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx index 37ed893eef..3a1a4f12d7 100644 --- a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx +++ b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx @@ -1,7 +1,6 @@ 'use client'; import { FC } from 'react'; -import cx from 'classnames'; import { Typography } from '@webb-tools/webb-ui-components'; import { shortenHex } from '@webb-tools/webb-ui-components/utils'; import { @@ -28,13 +27,7 @@ const PoolOverviewContainer: FC<{ poolOverviewData?: PoolOverviewType }> = ({ poolOverviewData = undefined, }) => { return ( -
+
{/* Icon */} Date: Tue, 1 Aug 2023 11:51:12 +0700 Subject: [PATCH 5/8] chore:n add favicon + optimize 'use client' --- apps/hubble-stats/app/layout.tsx | 22 ++++++++++-------- apps/hubble-stats/app/page.tsx | 6 ----- .../components/AreaChart/AreaChart.tsx | 2 ++ .../components/BarChart/BarChart.tsx | 2 ++ .../hubble-stats/components/Header/Header.tsx | 5 ++-- .../NetworkPoolTable/NetworkPoolTable.tsx | 2 ++ .../NetworkTokenTable/NetworkTokenTable.tsx | 2 ++ .../PoolMetadataTable/PoolMetadataTable.tsx | 2 ++ .../PoolTransactionsTable.tsx | 2 ++ .../ShieldedAssetsTable.tsx | 2 ++ .../ShieldedPoolsTable/ShieldedPoolsTable.tsx | 2 ++ apps/hubble-stats/components/index.ts | 2 ++ .../components/sideBar/SideBar.tsx | 12 ++++++++++ .../components/sideBar/SideBarMenu.tsx | 12 ++++++++++ .../hubble-stats/components/sideBar/index.tsx | 2 ++ .../sideBar/sideBarProps.tsx} | 0 apps/hubble-stats/constants/index.ts | 1 - .../KeyMetricsTableContainer.tsx | 2 -- .../NetworkTablesContainer.tsx | 2 -- .../PoolMetadataTableContainer.tsx | 2 -- .../PoolOverviewContainer.tsx | 2 -- .../PoolTransactionsTableContainer.tsx | 2 -- .../ShieldedTablesContainer.tsx | 2 -- apps/hubble-stats/public/favicon.ico | Bin 15086 -> 0 bytes apps/hubble-stats/public/favicon.png | Bin 0 -> 16585 bytes libs/icons/src/hooks/useDynamicSVGImport.tsx | 2 ++ libs/webb-ui-components/src/index.ts | 2 ++ 27 files changed, 62 insertions(+), 32 deletions(-) create mode 100644 apps/hubble-stats/components/sideBar/SideBar.tsx create mode 100644 apps/hubble-stats/components/sideBar/SideBarMenu.tsx create mode 100644 apps/hubble-stats/components/sideBar/index.tsx rename apps/hubble-stats/{constants/sideBar.ts => components/sideBar/sideBarProps.tsx} (100%) delete mode 100644 apps/hubble-stats/constants/index.ts delete mode 100644 apps/hubble-stats/public/favicon.ico create mode 100644 apps/hubble-stats/public/favicon.png diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx index 882848e5eb..4eed7ec9fd 100644 --- a/apps/hubble-stats/app/layout.tsx +++ b/apps/hubble-stats/app/layout.tsx @@ -1,14 +1,16 @@ -'use client'; - -import { - WebbUIProvider, - Footer, - SideBar, -} from '@webb-tools/webb-ui-components'; +import { Metadata } from 'next'; +import { WebbUIProvider, Footer } from '@webb-tools/webb-ui-components'; import '@webb-tools/webb-ui-components/tailwind.css'; -import { Header } from '../components'; -import { sideBarProps } from '../constants'; +import { Header, SideBar } from '../components'; + +export const metadata: Metadata = { + title: 'Hubble Stats', + description: 'Welcome to Hubble Stats!', + icons: { + icon: '/favicon.png', + }, +}; export default function RootLayout({ children, @@ -19,7 +21,7 @@ export default function RootLayout({ - +
{children} diff --git a/apps/hubble-stats/app/page.tsx b/apps/hubble-stats/app/page.tsx index 4e3502842a..159fbd0f1b 100644 --- a/apps/hubble-stats/app/page.tsx +++ b/apps/hubble-stats/app/page.tsx @@ -1,15 +1,9 @@ -import { Metadata } from 'next'; import { KeyMetricsTableContainer, ShieldedTablesContainer, OverviewChartsContainer, } from '../containers'; -export const metadata: Metadata = { - title: 'Hubble Stats', - description: 'Welcome to Hubble Stats!', -}; - export default async function Index() { return (
diff --git a/apps/hubble-stats/components/AreaChart/AreaChart.tsx b/apps/hubble-stats/components/AreaChart/AreaChart.tsx index 76ecc2ebbd..3fb7887069 100644 --- a/apps/hubble-stats/components/AreaChart/AreaChart.tsx +++ b/apps/hubble-stats/components/AreaChart/AreaChart.tsx @@ -1,3 +1,5 @@ +'use client'; + import { FC } from 'react'; import { ResponsiveContainer, diff --git a/apps/hubble-stats/components/BarChart/BarChart.tsx b/apps/hubble-stats/components/BarChart/BarChart.tsx index bb8d3cba74..cf1ee43c3e 100644 --- a/apps/hubble-stats/components/BarChart/BarChart.tsx +++ b/apps/hubble-stats/components/BarChart/BarChart.tsx @@ -1,3 +1,5 @@ +'use client'; + import { FC } from 'react'; import { ResponsiveContainer, diff --git a/apps/hubble-stats/components/Header/Header.tsx b/apps/hubble-stats/components/Header/Header.tsx index b26c9a0ae3..a3ba97e838 100644 --- a/apps/hubble-stats/components/Header/Header.tsx +++ b/apps/hubble-stats/components/Header/Header.tsx @@ -5,12 +5,11 @@ import { BreadcrumbsItem, Chip, ChipProps, - SideBarMenu, } from '@webb-tools/webb-ui-components'; import { BlockIcon, GridFillIcon, Spinner } from '@webb-tools/icons'; import { IconBase } from '@webb-tools/icons/types'; -import { sideBarProps } from '../../constants'; +import { SideBarMenu } from '..'; const Header = () => { const tvl = useMemo(() => { @@ -25,7 +24,7 @@ const Header = () => {
{/* Breadcrumbs */}
- + { + return ; +}; + +export default SideBar; diff --git a/apps/hubble-stats/components/sideBar/SideBarMenu.tsx b/apps/hubble-stats/components/sideBar/SideBarMenu.tsx new file mode 100644 index 0000000000..eacd69e530 --- /dev/null +++ b/apps/hubble-stats/components/sideBar/SideBarMenu.tsx @@ -0,0 +1,12 @@ +'use client'; + +import { FC } from 'react'; +import { SideBarMenu as SideBarMenuCmp } from '@webb-tools/webb-ui-components'; + +import sideBarProps from './sideBarProps'; + +const SideBarMenu: FC = () => { + return ; +}; + +export default SideBarMenu; diff --git a/apps/hubble-stats/components/sideBar/index.tsx b/apps/hubble-stats/components/sideBar/index.tsx new file mode 100644 index 0000000000..07a45eed61 --- /dev/null +++ b/apps/hubble-stats/components/sideBar/index.tsx @@ -0,0 +1,2 @@ +export { default as SideBar } from './SideBar'; +export { default as SideBarMenu } from './SideBarMenu'; diff --git a/apps/hubble-stats/constants/sideBar.ts b/apps/hubble-stats/components/sideBar/sideBarProps.tsx similarity index 100% rename from apps/hubble-stats/constants/sideBar.ts rename to apps/hubble-stats/components/sideBar/sideBarProps.tsx diff --git a/apps/hubble-stats/constants/index.ts b/apps/hubble-stats/constants/index.ts deleted file mode 100644 index 456794533d..0000000000 --- a/apps/hubble-stats/constants/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as sideBarProps } from './sideBar'; diff --git a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx index 6ad3e2bd4d..e8023e8ef6 100644 --- a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx +++ b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx @@ -1,5 +1,3 @@ -'use client'; - import { FC } from 'react'; import { KeyMetricItem } from '../../components'; diff --git a/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx b/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx index c71ed4f000..b0696dc80f 100644 --- a/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx +++ b/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx @@ -1,5 +1,3 @@ -'use client'; - import { FC } from 'react'; import { TableAndChartTabs, Typography } from '@webb-tools/webb-ui-components'; diff --git a/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx b/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx index ecc2a293f3..1d501a43eb 100644 --- a/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx +++ b/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx @@ -1,5 +1,3 @@ -'use client'; - import { FC } from 'react'; import { Typography } from '@webb-tools/webb-ui-components'; diff --git a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx index 3a1a4f12d7..95d4708f58 100644 --- a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx +++ b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx @@ -1,5 +1,3 @@ -'use client'; - import { FC } from 'react'; import { Typography } from '@webb-tools/webb-ui-components'; import { shortenHex } from '@webb-tools/webb-ui-components/utils'; diff --git a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx index 7016810b30..850e0fd4b1 100644 --- a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx +++ b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx @@ -1,5 +1,3 @@ -'use client'; - import { FC, useMemo } from 'react'; import { TableAndChartTabs } from '@webb-tools/webb-ui-components'; diff --git a/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx b/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx index 09230744ef..a85c97ec15 100644 --- a/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx +++ b/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx @@ -1,5 +1,3 @@ -'use client'; - import { FC } from 'react'; import { TableAndChartTabs, TabContent } from '@webb-tools/webb-ui-components'; diff --git a/apps/hubble-stats/public/favicon.ico b/apps/hubble-stats/public/favicon.ico deleted file mode 100644 index 317ebcb2336e0833a22dddf0ab287849f26fda57..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 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 D(ybpE literal 0 HcmV?d00001 diff --git a/libs/icons/src/hooks/useDynamicSVGImport.tsx b/libs/icons/src/hooks/useDynamicSVGImport.tsx index 1f78089757..d1a80842fd 100644 --- a/libs/icons/src/hooks/useDynamicSVGImport.tsx +++ b/libs/icons/src/hooks/useDynamicSVGImport.tsx @@ -1,3 +1,5 @@ +'use client'; + import React, { useEffect, useMemo, useState } from 'react'; /** diff --git a/libs/webb-ui-components/src/index.ts b/libs/webb-ui-components/src/index.ts index 6d7853877a..e4c470828e 100644 --- a/libs/webb-ui-components/src/index.ts +++ b/libs/webb-ui-components/src/index.ts @@ -1,3 +1,5 @@ +'use client'; + export * from './components'; export * from './containers'; export * from './typography'; From afc57bd030cdc83beddb111af7ebfca2e0e55f45 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Tue, 1 Aug 2023 14:13:41 +0700 Subject: [PATCH 6/8] chore: refactor components --- apps/hubble-stats/app/layout.tsx | 11 +- .../components/Breadcrumbs/Breadcrumbs.tsx | 61 +++++++++ .../components/Breadcrumbs/index.ts | 1 + .../components/Breadcrumbs/types.ts | 7 ++ .../hubble-stats/components/Header/Header.tsx | 118 ------------------ apps/hubble-stats/components/Header/index.ts | 2 - apps/hubble-stats/components/Header/types.ts | 12 -- apps/hubble-stats/components/index.ts | 2 +- .../hubble-stats/containers/Layout/Layout.tsx | 31 +++++ apps/hubble-stats/containers/Layout/index.ts | 1 + .../OverviewChipsContainer.tsx | 29 +++++ .../OverviewChipsContainer/index.ts | 1 + .../PoolTransactionsTableContainer.tsx | 2 + apps/hubble-stats/containers/index.ts | 3 + 14 files changed, 139 insertions(+), 142 deletions(-) create mode 100644 apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx create mode 100644 apps/hubble-stats/components/Breadcrumbs/index.ts create mode 100644 apps/hubble-stats/components/Breadcrumbs/types.ts delete mode 100644 apps/hubble-stats/components/Header/Header.tsx delete mode 100644 apps/hubble-stats/components/Header/index.ts delete mode 100644 apps/hubble-stats/components/Header/types.ts create mode 100644 apps/hubble-stats/containers/Layout/Layout.tsx create mode 100644 apps/hubble-stats/containers/Layout/index.ts create mode 100644 apps/hubble-stats/containers/OverviewChipsContainer/OverviewChipsContainer.tsx create mode 100644 apps/hubble-stats/containers/OverviewChipsContainer/index.ts diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx index 674f2969c0..ece930c6ce 100644 --- a/apps/hubble-stats/app/layout.tsx +++ b/apps/hubble-stats/app/layout.tsx @@ -2,7 +2,7 @@ import { Metadata } from 'next'; import { WebbUIProvider, Footer } from '@webb-tools/webb-ui-components'; import '@webb-tools/webb-ui-components/tailwind.css'; -import { Header, SideBar } from '../components'; +import { Layout } from '../containers'; export const metadata: Metadata = { title: 'Hubble Stats', @@ -20,14 +20,7 @@ export default function RootLayout({ return ( - - -
-
- {children} -
-
- + {children} ); diff --git a/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx b/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx new file mode 100644 index 0000000000..7bbd8b2aa7 --- /dev/null +++ b/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx @@ -0,0 +1,61 @@ +'use client'; + +import { FC, useMemo } from 'react'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import { + Breadcrumbs as BreadcrumbsCmp, + BreadcrumbsItem, +} from '@webb-tools/webb-ui-components'; +import { CoinIcon, ContrastLine } from '@webb-tools/icons'; + +import { BreadcrumbType } from './types'; + +const Breadcrumbs: FC = () => { + const pathname = usePathname(); + + const breadCrumbs = useMemo(() => { + const parts = pathname.split('/'); + const activeItem = parts[parts.length - 1]; + + const breadCrumbItems: BreadcrumbType[] = [ + { + label: 'Hubble Overview', + isLast: activeItem !== '' ? false : true, + icon: ( + + ), + href: '/', + }, + ]; + + if (activeItem !== '') { + breadCrumbItems.push({ + label: activeItem, + isLast: true, + icon: , + href: '', + }); + } + + return breadCrumbItems; + }, [pathname]); + + return ( + + {breadCrumbs.map((breadcrumb, index) => ( + + + {breadcrumb.label} + + + ))} + + ); +}; + +export default Breadcrumbs; diff --git a/apps/hubble-stats/components/Breadcrumbs/index.ts b/apps/hubble-stats/components/Breadcrumbs/index.ts new file mode 100644 index 0000000000..0835ba0b68 --- /dev/null +++ b/apps/hubble-stats/components/Breadcrumbs/index.ts @@ -0,0 +1 @@ +export { default as Breadcrumbs } from './Breadcrumbs'; diff --git a/apps/hubble-stats/components/Breadcrumbs/types.ts b/apps/hubble-stats/components/Breadcrumbs/types.ts new file mode 100644 index 0000000000..47053b33b9 --- /dev/null +++ b/apps/hubble-stats/components/Breadcrumbs/types.ts @@ -0,0 +1,7 @@ +export type BreadcrumbType = { + label: string; + isLast: boolean; + icon: JSX.Element; + href: string; + className?: string; +}; diff --git a/apps/hubble-stats/components/Header/Header.tsx b/apps/hubble-stats/components/Header/Header.tsx deleted file mode 100644 index 0c739f1bf6..0000000000 --- a/apps/hubble-stats/components/Header/Header.tsx +++ /dev/null @@ -1,118 +0,0 @@ -'use client'; - -import { BlockIcon, CoinIcon, ContrastLine, Spinner } from '@webb-tools/icons'; -import { IconBase } from '@webb-tools/icons/types'; -import { FC, useMemo } from 'react'; -import Link from 'next/link'; -import { - Breadcrumbs, - BreadcrumbsItem, - Chip, - ChipProps, -} from '@webb-tools/webb-ui-components'; -import { HeaderProps, Breadcrumb } from './types'; -import { usePathname } from 'next/navigation'; - -import { SideBarMenu } from '..'; - -const Header = ({ tvlValue, volumeValue }: HeaderProps) => { - const pathname = usePathname(); - - const breadCrumbs = useMemo(() => { - const parts = pathname.split('/'); - const activeItem = parts[parts.length - 1]; - - const breadCrumbItems: Breadcrumb[] = [ - { - label: 'Hubble Overview', - isLast: activeItem !== '' ? false : true, - icon: ( - - ), - href: '/', - }, - ]; - - if (activeItem !== '') { - breadCrumbItems.push({ - label: activeItem, - isLast: true, - icon: , - href: '', - }); - } - - return breadCrumbItems; - }, [pathname]); - - return ( -
- {/* Breadcrumbs */} -
- - - {breadCrumbs.map((breadcrumb, index) => ( - - - {breadcrumb.label} - - - ))} - -
- - {/* TVL and Volume Chips */} -
- - -
-
- ); -}; - -type VolumeChipProps = { - color: ChipProps['color']; - className?: string; - Icon: (props: IconBase) => JSX.Element; - iconClassName?: string; - iconSize?: IconBase['size']; - value: string; - isLoading?: boolean; -}; - -export const VolumeChip: FC = ({ - color, - className, - Icon, - iconClassName, - iconSize = 'md', - value, - isLoading, -}) => { - return ( - - - {isLoading ? : value} - - ); -}; - -export default Header; diff --git a/apps/hubble-stats/components/Header/index.ts b/apps/hubble-stats/components/Header/index.ts deleted file mode 100644 index b35d22a28a..0000000000 --- a/apps/hubble-stats/components/Header/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as Header } from './Header'; -export * from './types'; diff --git a/apps/hubble-stats/components/Header/types.ts b/apps/hubble-stats/components/Header/types.ts deleted file mode 100644 index e6a7822aa6..0000000000 --- a/apps/hubble-stats/components/Header/types.ts +++ /dev/null @@ -1,12 +0,0 @@ -export type Breadcrumb = { - label: string; - isLast: boolean; - icon: JSX.Element; - href: string; - className?: string; -}; - -export type HeaderProps = { - tvlValue: string; - volumeValue: string; -}; diff --git a/apps/hubble-stats/components/index.ts b/apps/hubble-stats/components/index.ts index 440e845588..5909f4588c 100644 --- a/apps/hubble-stats/components/index.ts +++ b/apps/hubble-stats/components/index.ts @@ -1,6 +1,6 @@ export * from './AreaChart'; export * from './BarChart'; -export * from './Header'; +export * from './Breadcrumbs'; export * from './KeyMetricItem'; export * from './NetworkPoolTable'; export * from './NetworkTokenTable'; diff --git a/apps/hubble-stats/containers/Layout/Layout.tsx b/apps/hubble-stats/containers/Layout/Layout.tsx new file mode 100644 index 0000000000..78aff88d72 --- /dev/null +++ b/apps/hubble-stats/containers/Layout/Layout.tsx @@ -0,0 +1,31 @@ +import { FC } from 'react'; +import { Footer } from '@webb-tools/webb-ui-components'; + +import { OverviewChipsContainer } from '..'; +import { SideBar, SideBarMenu, Breadcrumbs } from '../../components'; + +const Layout: FC<{ children?: React.ReactNode }> = ({ children }) => { + return ( + + +
+ {/* Header */} +
+
+ + +
+ +
+ + {/* Body */} + {children} + + {/* Footer */} +
+
+ + ); +}; + +export default Layout; diff --git a/apps/hubble-stats/containers/Layout/index.ts b/apps/hubble-stats/containers/Layout/index.ts new file mode 100644 index 0000000000..6c48faec7d --- /dev/null +++ b/apps/hubble-stats/containers/Layout/index.ts @@ -0,0 +1 @@ +export { default as Layout } from './Layout'; diff --git a/apps/hubble-stats/containers/OverviewChipsContainer/OverviewChipsContainer.tsx b/apps/hubble-stats/containers/OverviewChipsContainer/OverviewChipsContainer.tsx new file mode 100644 index 0000000000..ea6e3cb1c6 --- /dev/null +++ b/apps/hubble-stats/containers/OverviewChipsContainer/OverviewChipsContainer.tsx @@ -0,0 +1,29 @@ +import { FC } from 'react'; +import { Chip } from '@webb-tools/webb-ui-components'; +import { BlockIcon } from '@webb-tools/icons'; + +interface OverviewChipsContainerProps { + tvlValue?: number; + volumeValue?: number; +} + +const OverviewChipsContainer: FC = ({ + tvlValue, + volumeValue, +}) => { + return ( +
+ + + TVL: {tvlValue ? `${tvlValue}` : ' - '} + + + + + Volume: {volumeValue ? `${volumeValue}` : ' - '} + +
+ ); +}; + +export default OverviewChipsContainer; diff --git a/apps/hubble-stats/containers/OverviewChipsContainer/index.ts b/apps/hubble-stats/containers/OverviewChipsContainer/index.ts new file mode 100644 index 0000000000..ccadb4f60c --- /dev/null +++ b/apps/hubble-stats/containers/OverviewChipsContainer/index.ts @@ -0,0 +1 @@ +export { default as OverviewChipsContainer } from './OverviewChipsContainer'; diff --git a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx index 850e0fd4b1..7016810b30 100644 --- a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx +++ b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx @@ -1,3 +1,5 @@ +'use client'; + import { FC, useMemo } from 'react'; import { TableAndChartTabs } from '@webb-tools/webb-ui-components'; diff --git a/apps/hubble-stats/containers/index.ts b/apps/hubble-stats/containers/index.ts index 3934b212d8..d653738c60 100644 --- a/apps/hubble-stats/containers/index.ts +++ b/apps/hubble-stats/containers/index.ts @@ -1,7 +1,10 @@ export { KeyMetricsTableContainer } from './KeyMetricsTableContainer'; export { NetworkTablesContainer } from './NetworkTablesContainer'; export { OverviewChartsContainer } from './OverviewChartsContainer'; +export { OverviewChipsContainer } from './OverviewChipsContainer'; export { PoolMetadataTableContainer } from './PoolMetadataTableContainer'; export { PoolOverviewContainer } from './PoolOverviewContainer'; export { PoolTransactionsTableContainer } from './PoolTransactionsTableContainer'; export { ShieldedTablesContainer } from './ShieldedTablesContainer'; + +export { Layout } from './Layout'; From a23008dcaad53132b00fdbe40d066a3d1c0abef0 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Tue, 1 Aug 2023 14:39:44 +0700 Subject: [PATCH 7/8] chore: refactor charts code --- .../components/AreaChart/AreaChart.tsx | 5 +++- .../components/AreaChart/types.ts | 6 +++-- .../components/BarChart/BarChart.tsx | 5 +++- .../hubble-stats/components/BarChart/types.ts | 6 +++-- .../OverviewChartsContainer.tsx | 27 +++---------------- 5 files changed, 19 insertions(+), 30 deletions(-) diff --git a/apps/hubble-stats/components/AreaChart/AreaChart.tsx b/apps/hubble-stats/components/AreaChart/AreaChart.tsx index 3fb7887069..2eef4ced69 100644 --- a/apps/hubble-stats/components/AreaChart/AreaChart.tsx +++ b/apps/hubble-stats/components/AreaChart/AreaChart.tsx @@ -8,16 +8,19 @@ import { Tooltip, XAxis, } from 'recharts'; +import { useDarkMode } from '@webb-tools/webb-ui-components'; + import { AreaChartProps } from './types'; const AreaChart: FC = ({ data, setDate, setValue, - isDarkMode, width = '100%', height = 180, }) => { + const [isDarkMode] = useDarkMode(); + return ( ; setValue: (value: number | null) => void; setDate: (date: Date | null) => void; - isDarkMode: boolean; width?: number | string; height?: number | string; }; diff --git a/apps/hubble-stats/components/BarChart/BarChart.tsx b/apps/hubble-stats/components/BarChart/BarChart.tsx index cf1ee43c3e..1023d3f507 100644 --- a/apps/hubble-stats/components/BarChart/BarChart.tsx +++ b/apps/hubble-stats/components/BarChart/BarChart.tsx @@ -8,16 +8,19 @@ import { Tooltip, Bar, } from 'recharts'; +import { useDarkMode } from '@webb-tools/webb-ui-components'; + import { BarChartProps } from './types'; const BarChart: FC = ({ data, setValue, setDate, - isDarkMode, width = '100%', height = 180, }) => { + const [isDarkMode] = useDarkMode(); + return ( ; setValue: (value: number | null) => void; setDate: (date: Date | null) => void; - isDarkMode: boolean; width?: number | string; height?: number | string; }; diff --git a/apps/hubble-stats/containers/OverviewChartsContainer/OverviewChartsContainer.tsx b/apps/hubble-stats/containers/OverviewChartsContainer/OverviewChartsContainer.tsx index c783427073..39388c1ec9 100644 --- a/apps/hubble-stats/containers/OverviewChartsContainer/OverviewChartsContainer.tsx +++ b/apps/hubble-stats/containers/OverviewChartsContainer/OverviewChartsContainer.tsx @@ -1,7 +1,8 @@ 'use client'; -import { useEffect, useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { DaysFilterType, ChartContainer } from '@webb-tools/webb-ui-components'; + import { AreaChart, BarChart } from '../../components'; const OverviewChartsContainer = () => { @@ -20,22 +21,6 @@ const OverviewChartsContainer = () => { // 24 Hour Volume data type (day, week, month) - Default value is Week const [volumeDataType, setVolumeDataType] = useState('week'); - const [isDarkMode, setIsDarkMode] = useState(false); - - useEffect(() => { - const handleThemeChange = () => { - setIsDarkMode(localStorage.getItem('theme') === 'dark'); - }; - - handleThemeChange(); - - window.addEventListener('storage', handleThemeChange); - - return () => { - window.removeEventListener('storage', handleThemeChange); - }; - }, []); - const tvlData = useMemo(() => { const data = []; @@ -71,12 +56,7 @@ const OverviewChartsContainer = () => { value={tvlValue} date={tvlDate} > - + {/* 24 Hour Volume Chart Container */} @@ -93,7 +73,6 @@ const OverviewChartsContainer = () => { data={volumeData} setDate={setVolumeDate} setValue={setVolumeValue} - isDarkMode={isDarkMode} />
From 0af328e0b306ca7233f3842d4aae84cf23889c8e Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Wed, 2 Aug 2023 09:07:16 +0700 Subject: [PATCH 8/8] chore: update code based on comments --- .../components/KeyMetricItem/KeyMetricItem.tsx | 8 +++++++- apps/hubble-stats/components/ShieldedPoolsTable/types.ts | 2 +- .../KeyMetricsTableContainer.tsx | 9 ++++++++- .../PoolOverviewContainer/PoolOverviewContainer.tsx | 9 ++++++++- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx b/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx index 0534be891b..23636b2716 100644 --- a/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx +++ b/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx @@ -12,7 +12,13 @@ const KeyMetricItem: FC = ({ changeRate, }) => { return ( -
+
{title} diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts index 8c87782da1..e1db285fc8 100644 --- a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts +++ b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts @@ -7,7 +7,7 @@ export interface ShieldedPoolType { token: number; deposits24h: number; tvl: number; - typedChainIds: string[]; + typedChainIds: number[]; } export interface ShieldedPoolsTableProps { diff --git a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx index e8023e8ef6..de097005c9 100644 --- a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx +++ b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx @@ -1,10 +1,17 @@ import { FC } from 'react'; +import cx from 'classnames'; import { KeyMetricItem } from '../../components'; const KeyMetricsTableContainer: FC = () => { return ( -
+
{/* Tablet and Desktop */}
diff --git a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx index 95d4708f58..307b1e316c 100644 --- a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx +++ b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx @@ -1,4 +1,5 @@ import { FC } from 'react'; +import cx from 'classnames'; import { Typography } from '@webb-tools/webb-ui-components'; import { shortenHex } from '@webb-tools/webb-ui-components/utils'; import { @@ -25,7 +26,13 @@ const PoolOverviewContainer: FC<{ poolOverviewData?: PoolOverviewType }> = ({ poolOverviewData = undefined, }) => { return ( -
+
{/* Icon */}