From c61029e1740d26e019a34abad883f869cf234dc1 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Wed, 19 Jul 2023 22:15:26 +0700 Subject: [PATCH 01/18] feat: add network table --- apps/hubble-stats/app/pool/[slug]/page.tsx | 2 + .../components/NetworkTable/NetworkTable.tsx | 107 ++++++++++++++++++ .../components/NetworkTable/index.ts | 1 + .../components/NetworkTable/types.ts | 12 ++ apps/hubble-stats/components/index.ts | 1 + .../NetworkTableContainer.tsx | 33 ++++++ .../containers/NetworkTableContainer/index.ts | 1 + apps/hubble-stats/containers/index.ts | 1 + apps/hubble-stats/tailwind.config.js | 2 +- apps/hubble-stats/utils/index.ts | 9 ++ 10 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 apps/hubble-stats/components/NetworkTable/NetworkTable.tsx create mode 100644 apps/hubble-stats/components/NetworkTable/index.ts create mode 100644 apps/hubble-stats/components/NetworkTable/types.ts create mode 100644 apps/hubble-stats/containers/NetworkTableContainer/NetworkTableContainer.tsx create mode 100644 apps/hubble-stats/containers/NetworkTableContainer/index.ts create mode 100644 apps/hubble-stats/utils/index.ts diff --git a/apps/hubble-stats/app/pool/[slug]/page.tsx b/apps/hubble-stats/app/pool/[slug]/page.tsx index 9862139a54..575808b21f 100644 --- a/apps/hubble-stats/app/pool/[slug]/page.tsx +++ b/apps/hubble-stats/app/pool/[slug]/page.tsx @@ -1,4 +1,5 @@ import { + NetworkTableContainer, PoolMetadataTableContainer, PoolTransactionsTableContainer, } from '../../../containers'; @@ -8,6 +9,7 @@ export default function Pool({ params }: { params: { slug: string } }) { return (
+
diff --git a/apps/hubble-stats/components/NetworkTable/NetworkTable.tsx b/apps/hubble-stats/components/NetworkTable/NetworkTable.tsx new file mode 100644 index 0000000000..5bd4960c11 --- /dev/null +++ b/apps/hubble-stats/components/NetworkTable/NetworkTable.tsx @@ -0,0 +1,107 @@ +import { FC, useMemo } from 'react'; +import { + createColumnHelper, + useReactTable, + getCoreRowModel, + ColumnDef, + Table as RTTable, +} from '@tanstack/react-table'; +import { + ChainChip, + Table, + fuzzyFilter, + Typography, +} from '@webb-tools/webb-ui-components'; +import { TokenIcon } from '@webb-tools/icons'; +import { chainsConfig, ChainBase } from '@webb-tools/dapp-config/chains'; + +import { TokenCompositionType, NetworkTableProps } from './types'; +import { HeaderCell, NumberCell } from '../table'; +import { convertChainChipTitle } from '../../utils'; + +const NetworkTable: FC = ({ chains, data }) => { + const columnHelper = useMemo( + () => createColumnHelper(), + [] + ); + + const columns = useMemo[]>( + () => [ + columnHelper.accessor('tokenName', { + header: () => null, + cell: (props) => ( +
+ + + {props.row.original.tokenSymbol} + + + {props.row.original.tokenComposition}% + +
+ ), + }), + columnHelper.accessor('tokenAggregate', { + header: () => , + cell: (props) => , + }), + ...chains.map((chainId) => + columnHelper.accessor('chainsData', { + id: chainId.toString(), + header: () => ( +
+ +
+ ), + cell: (props) => + props.row.original.chainsData[chainId] ? ( + + ) : ( + + * + + ), + }) + ), + ], + [chains, columnHelper] + ); + + const table = useReactTable({ + data, + columns, + filterFns: { + fuzzy: fuzzyFilter, + }, + globalFilterFn: fuzzyFilter, + getCoreRowModel: getCoreRowModel(), + }); + + if (chains.length === 0) { + return No network data available; + } + + return ( +
+ } + totalRecords={data.length} + /> + + ); +}; + +export default NetworkTable; diff --git a/apps/hubble-stats/components/NetworkTable/index.ts b/apps/hubble-stats/components/NetworkTable/index.ts new file mode 100644 index 0000000000..45e8c1d87c --- /dev/null +++ b/apps/hubble-stats/components/NetworkTable/index.ts @@ -0,0 +1 @@ +export { default as NetworkTable } from './NetworkTable'; diff --git a/apps/hubble-stats/components/NetworkTable/types.ts b/apps/hubble-stats/components/NetworkTable/types.ts new file mode 100644 index 0000000000..bd45e95ef8 --- /dev/null +++ b/apps/hubble-stats/components/NetworkTable/types.ts @@ -0,0 +1,12 @@ +export type TokenCompositionType = { + tokenName: string; + tokenSymbol: string; + tokenComposition: number; + tokenAggregate: number; + chainsData: Record; +}; + +export interface NetworkTableProps { + chains: number[]; + data: Array; +} diff --git a/apps/hubble-stats/components/index.ts b/apps/hubble-stats/components/index.ts index ae5875d8f4..2e8f100670 100644 --- a/apps/hubble-stats/components/index.ts +++ b/apps/hubble-stats/components/index.ts @@ -1,4 +1,5 @@ export * from './KeyMetricItem'; +export * from './NetworkTable'; export * from './PoolMetadataTable'; export * from './PoolTransactionsTable'; export * from './ShieldedAssetsTable'; diff --git a/apps/hubble-stats/containers/NetworkTableContainer/NetworkTableContainer.tsx b/apps/hubble-stats/containers/NetworkTableContainer/NetworkTableContainer.tsx new file mode 100644 index 0000000000..44c7694c11 --- /dev/null +++ b/apps/hubble-stats/containers/NetworkTableContainer/NetworkTableContainer.tsx @@ -0,0 +1,33 @@ +'use client'; + +import { FC, useState } from 'react'; +import { TableAndChartTabs, Typography } from '@webb-tools/webb-ui-components'; + +import { NetworkTable } from '../../components'; +import { TokenCompositionType } from '../../components/NetworkTable/types'; + +const NetworkTableContainer: FC = () => { + const [chains, setChains] = useState([]); + const [tvlData, setTvlData] = useState([]); + const [volumeData, setVolumeData] = useState([]); + const [depositsData, setDepositsData] = useState([]); + const [feesData, setFeesData] = useState([]); + + return ( +
+ + + + {chains.length > 0 && ( + + *TOKEN NOT SUPPORTED ON NETWORK + + )} +
+ ); +}; + +export default NetworkTableContainer; diff --git a/apps/hubble-stats/containers/NetworkTableContainer/index.ts b/apps/hubble-stats/containers/NetworkTableContainer/index.ts new file mode 100644 index 0000000000..ab332e6ee4 --- /dev/null +++ b/apps/hubble-stats/containers/NetworkTableContainer/index.ts @@ -0,0 +1 @@ +export { default as NetworkTableContainer } from './NetworkTableContainer'; diff --git a/apps/hubble-stats/containers/index.ts b/apps/hubble-stats/containers/index.ts index 6383e774e7..169fbeea6c 100644 --- a/apps/hubble-stats/containers/index.ts +++ b/apps/hubble-stats/containers/index.ts @@ -1,4 +1,5 @@ export * from './KeyMetricsTableContainer'; +export * from './NetworkTableContainer'; export * from './PoolMetadataTableContainer'; export * from './PoolTransactionsTableContainer'; export * from './ShieldedTablesContainer'; diff --git a/apps/hubble-stats/tailwind.config.js b/apps/hubble-stats/tailwind.config.js index e047c2c0fb..eb3550ae8f 100644 --- a/apps/hubble-stats/tailwind.config.js +++ b/apps/hubble-stats/tailwind.config.js @@ -9,7 +9,7 @@ module.exports = { content: [ join( __dirname, - '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}' + '{src,pages,components,containers,app}/**/*!(*.stories|*.spec).{ts,tsx,html}' ), join( __dirname, diff --git a/apps/hubble-stats/utils/index.ts b/apps/hubble-stats/utils/index.ts new file mode 100644 index 0000000000..0145bc1c08 --- /dev/null +++ b/apps/hubble-stats/utils/index.ts @@ -0,0 +1,9 @@ +export const convertChainChipTitle = (chainName: string): string => { + if (chainName.includes('Goerli')) return 'Goerli'; + if (chainName === 'Polygon Mumbai') return 'Mumbai'; + if (chainName === 'Moonbase Alpha' || chainName === 'Scroll Alpha') + return 'Alpha'; + if (chainName === 'Avalanche Fuji') return 'Fuji'; + + return chainName; +}; From 09d90707813bc8cf5ee8a6b9f3f79e28af98ce1d Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Thu, 20 Jul 2023 13:25:11 +0700 Subject: [PATCH 02/18] chore: remove useStatae in NetworkTableContainer --- .../NetworkTableContainer.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/apps/hubble-stats/containers/NetworkTableContainer/NetworkTableContainer.tsx b/apps/hubble-stats/containers/NetworkTableContainer/NetworkTableContainer.tsx index 44c7694c11..41ddbefceb 100644 --- a/apps/hubble-stats/containers/NetworkTableContainer/NetworkTableContainer.tsx +++ b/apps/hubble-stats/containers/NetworkTableContainer/NetworkTableContainer.tsx @@ -1,18 +1,26 @@ 'use client'; -import { FC, useState } from 'react'; +import { FC } from 'react'; import { TableAndChartTabs, Typography } from '@webb-tools/webb-ui-components'; import { NetworkTable } from '../../components'; import { TokenCompositionType } from '../../components/NetworkTable/types'; -const NetworkTableContainer: FC = () => { - const [chains, setChains] = useState([]); - const [tvlData, setTvlData] = useState([]); - const [volumeData, setVolumeData] = useState([]); - const [depositsData, setDepositsData] = useState([]); - const [feesData, setFeesData] = useState([]); +interface NetworkTableContainerProps { + chains: number[]; + tvlData: TokenCompositionType[]; + volumeData: TokenCompositionType[]; + depositsData: TokenCompositionType[]; + feesData: TokenCompositionType[]; +} +const NetworkTableContainer: FC = ({ + chains = [], + tvlData = [], + volumeData = [], + depositsData = [], + feesData = [], +}) => { return (
From 60099d094ad8202ffb9ecb40ff1b4b95a2ec6bb2 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Tue, 25 Jul 2023 14:15:54 +0700 Subject: [PATCH 03/18] chore: update basic layout --- apps/hubble-stats/app/layout.tsx | 5 +++-- apps/hubble-stats/app/page.tsx | 2 +- apps/hubble-stats/app/pool/[slug]/page.tsx | 7 +++---- apps/hubble-stats/components/Header/Header.tsx | 7 +++++-- .../PoolMetadataTable/PoolMetadataTable.tsx | 4 ++-- .../KeyMetricsTableContainer.tsx | 15 ++++++++++++++- .../OverviewChartsContainer.tsx | 2 +- .../src/components/Table/Table.tsx | 8 ++++++-- .../src/components/Table/types.ts | 5 +++++ 9 files changed, 40 insertions(+), 15 deletions(-) diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx index a3102af212..7b6f58d066 100644 --- a/apps/hubble-stats/app/layout.tsx +++ b/apps/hubble-stats/app/layout.tsx @@ -87,12 +87,13 @@ export default function RootLayout({ ClosedLogo={LogoWithoutName} logoLink={WEBB_MKT_URL} footer={footer} + className="hidden lg:block" /> -
+
{children} -
+
diff --git a/apps/hubble-stats/app/page.tsx b/apps/hubble-stats/app/page.tsx index e057496575..4e3502842a 100644 --- a/apps/hubble-stats/app/page.tsx +++ b/apps/hubble-stats/app/page.tsx @@ -12,7 +12,7 @@ export const metadata: Metadata = { export default async function Index() { return ( -
+
diff --git a/apps/hubble-stats/app/pool/[slug]/page.tsx b/apps/hubble-stats/app/pool/[slug]/page.tsx index b4cbc3375b..a37451199c 100644 --- a/apps/hubble-stats/app/pool/[slug]/page.tsx +++ b/apps/hubble-stats/app/pool/[slug]/page.tsx @@ -10,14 +10,13 @@ export default function Pool({ params }: { params: { slug: string } }) { return (
- -
-
+
+
- + diff --git a/apps/hubble-stats/components/Header/Header.tsx b/apps/hubble-stats/components/Header/Header.tsx index 7a9fbc5f5b..2396968443 100644 --- a/apps/hubble-stats/components/Header/Header.tsx +++ b/apps/hubble-stats/components/Header/Header.tsx @@ -24,7 +24,10 @@ const Header = () => {
- } className="ml-0"> + } + className="ml-0 bg-[rgba(156,160,176,0.10)] dark:bg-[rgba(255,255,255,0.05)]" + > Hubble Overview @@ -32,7 +35,7 @@ const Header = () => {
{/* TVL and Volume Chips */} -
+
= ({ data }) => { return (
} totalRecords={data.length} diff --git a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx index 66d08c4ed3..9cfbe8d56b 100644 --- a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx +++ b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx @@ -14,12 +14,25 @@ const KeyMetricsTableContainer: FC = () => { 'bg-glass dark:bg-glass_dark' )} > -
+ {/* Tablet and Desktop */} +
+ + {/* Mobile */} +
+
+ + +
+
+ + +
+
); }; diff --git a/apps/hubble-stats/containers/OverviewChartsContainer/OverviewChartsContainer.tsx b/apps/hubble-stats/containers/OverviewChartsContainer/OverviewChartsContainer.tsx index 3a347913a7..c783427073 100644 --- a/apps/hubble-stats/containers/OverviewChartsContainer/OverviewChartsContainer.tsx +++ b/apps/hubble-stats/containers/OverviewChartsContainer/OverviewChartsContainer.tsx @@ -63,7 +63,7 @@ const OverviewChartsContainer = () => { }, []); return ( -
+
{/* TVL Chart Container */} ( isPaginated, tableProps: table, totalRecords = 0, + tableClassName, thClassName, tdClassName, paginationClassName, @@ -22,7 +24,9 @@ const TableComp = ( ) => { return (
-
+
{table.getHeaderGroups().map((headerGroup) => ( diff --git a/libs/webb-ui-components/src/components/Table/types.ts b/libs/webb-ui-components/src/components/Table/types.ts index 1bf7864d06..c656030ce3 100644 --- a/libs/webb-ui-components/src/components/Table/types.ts +++ b/libs/webb-ui-components/src/components/Table/types.ts @@ -24,6 +24,11 @@ export interface TableProps extends WebbComponentBase { */ totalRecords?: number; + /** + * The optional class name for overriding style table component + */ + tableClassName?: string; + /** * The optional class name for overriding style THeader component */ From e47625337ca3892c2d0daeca3d32162cc240c5be Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Tue, 25 Jul 2023 16:05:03 +0700 Subject: [PATCH 04/18] chore: refactor + responsive Shielded tables --- apps/hubble-stats/app/layout.tsx | 2 + .../ShieldedAssetsTable.tsx | 5 +- .../components/ShieldedAssetsTable/types.ts | 1 - .../ShieldedPoolsTable/ShieldedPoolsTable.tsx | 9 +-- .../components/ShieldedPoolsTable/types.ts | 1 - .../components/table/HeaderCell.tsx | 2 +- .../ShieldedTablesContainer.tsx | 28 +++---- apps/hubble-stats/styles/globals.css | 16 ++++ .../src/components/Table/Table.tsx | 80 +++++++++---------- 9 files changed, 74 insertions(+), 70 deletions(-) create mode 100644 apps/hubble-stats/styles/globals.css diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx index 7b6f58d066..a6812a8b41 100644 --- a/apps/hubble-stats/app/layout.tsx +++ b/apps/hubble-stats/app/layout.tsx @@ -21,6 +21,8 @@ import { } from '@webb-tools/webb-ui-components/constants'; import { Header } from '../components'; +import '../styles/globals.css'; + export default function RootLayout({ children, }: { diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx index a4560a937e..9dc133ebba 100644 --- a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx +++ b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx @@ -64,7 +64,6 @@ const staticColumns: ColumnDef[] = [ const ShieldedAssetsTable: FC = ({ data, - globalSearchText, pageSize, }) => { const [isDarkMode] = useDarkMode(); @@ -91,9 +90,6 @@ const ShieldedAssetsTable: FC = ({ const table = useReactTable({ data, columns, - state: { - globalFilter: globalSearchText, - }, initialState: { pagination: { pageSize, @@ -112,6 +108,7 @@ const ShieldedAssetsTable: FC = ({ return (
} diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/types.ts b/apps/hubble-stats/components/ShieldedAssetsTable/types.ts index 583c18ae29..3572f8868a 100644 --- a/apps/hubble-stats/components/ShieldedAssetsTable/types.ts +++ b/apps/hubble-stats/components/ShieldedAssetsTable/types.ts @@ -13,6 +13,5 @@ export interface ShieldedAssetType { export interface ShieldedAssetsTableProps { data: ShieldedAssetType[]; - globalSearchText: string; pageSize: number; } diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx index 195dc3689c..025a1f479b 100644 --- a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx +++ b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx @@ -39,9 +39,7 @@ const columns: ColumnDef[] = [ }), columnHelper.accessor('token', { header: () => , - cell: (props) => ( - - ), + cell: (props) => , }), columnHelper.accessor('deposits24h', { header: () => , @@ -65,15 +63,11 @@ const columns: ColumnDef[] = [ const ShieldedPoolsTable: FC = ({ data, - globalSearchText, pageSize, }) => { const table = useReactTable({ data, columns, - state: { - globalFilter: globalSearchText, - }, initialState: { pagination: { pageSize, @@ -92,6 +86,7 @@ const ShieldedPoolsTable: FC = ({ return (
} diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts index 5fb3839530..02dd757412 100644 --- a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts +++ b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts @@ -12,6 +12,5 @@ export interface ShieldedPoolType { export interface ShieldedPoolsTableProps { data: ShieldedPoolType[]; - globalSearchText: string; pageSize: number; } diff --git a/apps/hubble-stats/components/table/HeaderCell.tsx b/apps/hubble-stats/components/table/HeaderCell.tsx index f52ec232be..c1e5b73e11 100644 --- a/apps/hubble-stats/components/table/HeaderCell.tsx +++ b/apps/hubble-stats/components/table/HeaderCell.tsx @@ -11,7 +11,7 @@ const HeaderCell: FC = ({ title, tooltip, className }) => { variant="body1" fw="bold" className={cx( - 'text-mono-140 dark:text-mono-40 flex-[1] flex items-center justify-center', + 'text-mono-140 dark:text-mono-40 flex-[1] flex items-center justify-center whitespace-nowrap', className )} > diff --git a/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx b/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx index cea911d5b5..a848f7b54e 100644 --- a/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx +++ b/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx @@ -1,39 +1,35 @@ 'use client'; -import { useState } from 'react'; +import { FC } from 'react'; import { TableAndChartTabs, TabContent } from '@webb-tools/webb-ui-components'; import { ShieldedAssetsTable, ShieldedPoolsTable } from '../../components'; import { ShieldedAssetType } from '../../components/ShieldedAssetsTable/types'; import { ShieldedPoolType } from '../../components/ShieldedPoolsTable/types'; +interface ShieldedTablesContainerProps { + assetsData?: ShieldedAssetType[]; + poolsData?: ShieldedPoolType[]; +} + const pageSize = 5; const assetsTableTab = 'Shielded Assets'; const poolsTableTab = 'Shielded Pools'; -const ShieldedTablesContainer = () => { - const [assetsData, setAssetsData] = useState([]); - const [poolsData, setPoolsData] = useState([]); - const [globalSearchText, setGlobalSearchText] = useState(''); - +const ShieldedTablesContainer: FC = ({ + assetsData = [], + poolsData = [], +}) => { return ( {/* Shielded Assets Table */} - + {/* Shielded Pools Table */} - + ); diff --git a/apps/hubble-stats/styles/globals.css b/apps/hubble-stats/styles/globals.css new file mode 100644 index 0000000000..e23620a7de --- /dev/null +++ b/apps/hubble-stats/styles/globals.css @@ -0,0 +1,16 @@ +@import 'tailwindcss/utilities'; + +@layer utilities { + @variants responsive { + /* Hide scrollbar for Chrome, Safari and Opera */ + .no-scrollbar::-webkit-scrollbar { + display: none; + } + + /* Hide scrollbar for IE, Edge and Firefox */ + .no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } + } +} diff --git a/libs/webb-ui-components/src/components/Table/Table.tsx b/libs/webb-ui-components/src/components/Table/Table.tsx index f66a2ad007..b7487cac6a 100644 --- a/libs/webb-ui-components/src/components/Table/Table.tsx +++ b/libs/webb-ui-components/src/components/Table/Table.tsx @@ -24,55 +24,55 @@ const TableComp = ( ) => { return (
-
- - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ))} - - ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - ))} - - {isDisplayFooter && ( - - {table.getFooterGroups().map((footerGroup) => ( - - {footerGroup.headers.map((header) => ( - +
+
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + {header.isPlaceholder ? null : flexRender( - header.column.columnDef.footer, + header.column.columnDef.header, header.getContext() )} ))} ))} - - )} -
+ + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + ))} + + {isDisplayFooter && ( + + {table.getFooterGroups().map((footerGroup) => ( + + {footerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.footer, + header.getContext() + )} + + ))} + + ))} + + )} + +
{/** Pagination */} {isPaginated && ( From 17768ac428df8e420043a00dda9ded3cd28eb767 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Wed, 26 Jul 2023 10:19:13 +0700 Subject: [PATCH 05/18] chore: add reponsive design to Pool Transaction table + refactor code --- apps/hubble-stats/app/layout.tsx | 2 -- .../PoolTransactionsTable.tsx | 1 + .../ShieldedAssetsTable.tsx | 2 +- .../ShieldedPoolsTable/ShieldedPoolsTable.tsx | 2 +- .../PoolTransactionsTableContainer.tsx | 2 ++ .../ShieldedTablesContainer.tsx | 5 +++- apps/hubble-stats/styles/globals.css | 16 ---------- .../TableAndChartTabs/TableAndChartTabs.tsx | 8 ++++- .../src/components/TableAndChartTabs/types.ts | 29 +++++++++++++++---- 9 files changed, 40 insertions(+), 27 deletions(-) delete mode 100644 apps/hubble-stats/styles/globals.css diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx index a6812a8b41..7b6f58d066 100644 --- a/apps/hubble-stats/app/layout.tsx +++ b/apps/hubble-stats/app/layout.tsx @@ -21,8 +21,6 @@ import { } from '@webb-tools/webb-ui-components/constants'; import { Header } from '../components'; -import '../styles/globals.css'; - export default function RootLayout({ children, }: { diff --git a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx index 6730e23ed0..a3c397e2a5 100644 --- a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx +++ b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx @@ -93,6 +93,7 @@ const PoolTransactionsTable: FC = ({ return (
} diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx index 9dc133ebba..ab219e9c2d 100644 --- a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx +++ b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx @@ -108,7 +108,7 @@ const ShieldedAssetsTable: FC = ({ return (
} diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx index 025a1f479b..136ea30133 100644 --- a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx +++ b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx @@ -86,7 +86,7 @@ const ShieldedPoolsTable: FC = ({ return (
} diff --git a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx index 0277326366..5c922a26eb 100644 --- a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx +++ b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx @@ -43,6 +43,8 @@ const PoolTransactionsTableContainer = () => { = ({ poolsData = [], }) => { return ( - + {/* Shielded Assets Table */} diff --git a/apps/hubble-stats/styles/globals.css b/apps/hubble-stats/styles/globals.css deleted file mode 100644 index e23620a7de..0000000000 --- a/apps/hubble-stats/styles/globals.css +++ /dev/null @@ -1,16 +0,0 @@ -@import 'tailwindcss/utilities'; - -@layer utilities { - @variants responsive { - /* Hide scrollbar for Chrome, Safari and Opera */ - .no-scrollbar::-webkit-scrollbar { - display: none; - } - - /* Hide scrollbar for IE, Edge and Firefox */ - .no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - } - } -} diff --git a/libs/webb-ui-components/src/components/TableAndChartTabs/TableAndChartTabs.tsx b/libs/webb-ui-components/src/components/TableAndChartTabs/TableAndChartTabs.tsx index c1aa6cb56c..7b4cfda12e 100644 --- a/libs/webb-ui-components/src/components/TableAndChartTabs/TableAndChartTabs.tsx +++ b/libs/webb-ui-components/src/components/TableAndChartTabs/TableAndChartTabs.tsx @@ -9,6 +9,7 @@ export const TableAndChartTabs: FC = ({ tabs, filterComponent, className, + headerClassName, listClassName, triggerClassName, children, @@ -20,7 +21,12 @@ export const TableAndChartTabs: FC = ({ className={cx('space-y-4', className)} {...tabsProps} > -
+
{/* Tabs List on the left */} {tabs.map((tab, idx) => { diff --git a/libs/webb-ui-components/src/components/TableAndChartTabs/types.ts b/libs/webb-ui-components/src/components/TableAndChartTabs/types.ts index cc6c9d85af..e09c35412f 100644 --- a/libs/webb-ui-components/src/components/TableAndChartTabs/types.ts +++ b/libs/webb-ui-components/src/components/TableAndChartTabs/types.ts @@ -1,15 +1,34 @@ import { ReactNode } from 'react'; import * as Tabs from '@radix-ui/react-tabs'; -export type TableAndChartTabType = { - value: string; - component: ReactNode; -}; - export interface TableAndChartTabsProps extends Tabs.TabsProps { + /** + * The list of value for the tabs + */ tabs: string[]; + + /** + * Filter component for the charts and tables (optional) + */ filterComponent?: ReactNode; + + /** + * The className for the whole component (optional) + */ className?: string; + + /** + * The className for header, including the trigger list and the filter component (optional) + */ + headerClassName?: string; + + /** + * The className for the trigger list (optional) + */ listClassName?: string; + + /** + * The className for trigger items (optional) + */ triggerClassName?: string; } From 4581d68f229729d72649971dc2d32b329b0f949e Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Wed, 26 Jul 2023 14:36:50 +0700 Subject: [PATCH 06/18] chore: refactor sidebar components + add SideBarItem component --- apps/hubble-stats/app/layout.tsx | 4 +- .../src/components/SideBar/SideBar.tsx | 16 +++----- .../src/components/SideBar/types.ts | 30 ++------------ .../Item.tsx => SideBarItem/SideBarItem.tsx} | 7 ++-- .../{SideBar => SideBarItem}/SubItem.tsx | 6 ++- .../src/components/SideBarItem/index.ts | 3 ++ .../src/components/SideBarItem/types.ts | 27 ++++++++++++ .../src/components/index.ts | 1 + .../stories/molecules/SideBarItem.stories.jsx | 41 +++++++++++++++++++ .../src/stories/organisms/Sidebar.stories.jsx | 6 --- 10 files changed, 91 insertions(+), 50 deletions(-) rename libs/webb-ui-components/src/components/{SideBar/Item.tsx => SideBarItem/SideBarItem.tsx} (95%) rename libs/webb-ui-components/src/components/{SideBar => SideBarItem}/SubItem.tsx (91%) create mode 100644 libs/webb-ui-components/src/components/SideBarItem/index.ts create mode 100644 libs/webb-ui-components/src/components/SideBarItem/types.ts create mode 100644 libs/webb-ui-components/src/stories/molecules/SideBarItem.stories.jsx diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx index 7b6f58d066..8099c18151 100644 --- a/apps/hubble-stats/app/layout.tsx +++ b/apps/hubble-stats/app/layout.tsx @@ -6,7 +6,7 @@ import { SideBar, Logo, LogoWithoutName, - ItemProps, + SideBarItemProps, FooterProps, } from '@webb-tools/webb-ui-components'; import '@webb-tools/webb-ui-components/tailwind.css'; @@ -26,7 +26,7 @@ export default function RootLayout({ }: { children: React.ReactNode; }) { - const items: ItemProps[] = [ + const items: SideBarItemProps[] = [ { name: 'Hubble', isInternal: true, diff --git a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx index 3d4542acce..cde3dc7934 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx @@ -1,17 +1,13 @@ import React, { useState } from 'react'; import cx from 'classnames'; -import { SidebarProps } from './types'; -import { Item } from './Item'; import { twMerge } from 'tailwind-merge'; -import { ThemeToggle } from '../ThemeToggle'; +import { ChevronLeft, ChevronRight, ExternalLinkLine } from '@webb-tools/icons'; + import { Typography } from '../../typography/Typography'; -import { - ChainIcon, - ChevronLeft, - ChevronRight, - ExternalLinkLine, -} from '@webb-tools/icons'; +import { SideBarItem } from '../SideBarItem'; +import { ThemeToggle } from '../ThemeToggle'; import { Link } from '../Link'; +import { SidebarProps } from './types'; /** * Sidebar Navigation Menu Component @@ -72,7 +68,7 @@ export const SideBar: React.FC = ({
{items.map((itemProps, index) => ( - ; ClosedLogo: React.FC; logoLink?: string; - items: ItemProps[]; + items: SideBarItemProps[]; footer: FooterProps; className?: string; }; - -export type ItemProps = { - name: string; - isInternal: boolean; - href: string; - Icon: (props: IconBase) => JSX.Element; - subItems: SubItemProps[]; -}; - -export type ExtraItemProps = { - isSidebarOpen?: boolean; - isActive?: boolean; - setIsActive?: () => void; -}; - -export type SubItemProps = { - name: string; - isInternal: boolean; - href: string; -}; - -export type ExtraSubItemProps = { - isActive?: boolean; - setItemIsActive?: () => void; - setSubItemIsActive?: () => void; -}; diff --git a/libs/webb-ui-components/src/components/SideBar/Item.tsx b/libs/webb-ui-components/src/components/SideBarItem/SideBarItem.tsx similarity index 95% rename from libs/webb-ui-components/src/components/SideBar/Item.tsx rename to libs/webb-ui-components/src/components/SideBarItem/SideBarItem.tsx index 278227d1ef..afc0ddc2ff 100644 --- a/libs/webb-ui-components/src/components/SideBar/Item.tsx +++ b/libs/webb-ui-components/src/components/SideBarItem/SideBarItem.tsx @@ -1,12 +1,14 @@ import React, { useEffect, useState } from 'react'; -import { ItemProps, ExtraItemProps } from './types'; +import { SideBarItemProps, SideBarExtraItemProps } from './types'; import { SubItem } from './SubItem'; import { ChevronDown, ChevronUp, ExternalLinkLine } from '@webb-tools/icons'; import { Typography } from '../../typography/Typography'; import { twMerge } from 'tailwind-merge'; import { Link } from '../Link'; -export const Item: React.FC = ({ +export const SideBarItem: React.FC< + SideBarItemProps & SideBarExtraItemProps +> = ({ name, isInternal, href, @@ -52,7 +54,6 @@ export const Item: React.FC = ({ : '', isSidebarOpen ? 'justify-between px-2 py-3' : 'justify-center' )} - // onClick={pushToLinkAndToggleDropdown} >
= ({ +export const SubItem: React.FC< + SideBarSubItemProps & SideBarExtraSubItemProps +> = ({ name, isInternal, href, diff --git a/libs/webb-ui-components/src/components/SideBarItem/index.ts b/libs/webb-ui-components/src/components/SideBarItem/index.ts new file mode 100644 index 0000000000..f886692566 --- /dev/null +++ b/libs/webb-ui-components/src/components/SideBarItem/index.ts @@ -0,0 +1,3 @@ +export * from './SideBarItem'; + +export * from './types'; diff --git a/libs/webb-ui-components/src/components/SideBarItem/types.ts b/libs/webb-ui-components/src/components/SideBarItem/types.ts new file mode 100644 index 0000000000..83d0c89c74 --- /dev/null +++ b/libs/webb-ui-components/src/components/SideBarItem/types.ts @@ -0,0 +1,27 @@ +import { IconBase } from '@webb-tools/icons/types'; + +export type SideBarItemProps = { + name: string; + isInternal: boolean; + href: string; + Icon: (props: IconBase) => JSX.Element; + subItems: SideBarSubItemProps[]; +}; + +export type SideBarExtraItemProps = { + isSidebarOpen?: boolean; + isActive?: boolean; + setIsActive?: () => void; +}; + +export type SideBarSubItemProps = { + name: string; + isInternal: boolean; + href: string; +}; + +export type SideBarExtraSubItemProps = { + isActive?: boolean; + setItemIsActive?: () => void; + setSubItemIsActive?: () => void; +}; diff --git a/libs/webb-ui-components/src/components/index.ts b/libs/webb-ui-components/src/components/index.ts index c1869b84ca..394ec08bb2 100644 --- a/libs/webb-ui-components/src/components/index.ts +++ b/libs/webb-ui-components/src/components/index.ts @@ -49,6 +49,7 @@ export * from './Popover'; export * from './Progress'; export * from './Radio'; export * from './SideBar'; +export * from './SideBarItem'; export * from './Slider'; export * from './Socials'; export * from './Stats'; diff --git a/libs/webb-ui-components/src/stories/molecules/SideBarItem.stories.jsx b/libs/webb-ui-components/src/stories/molecules/SideBarItem.stories.jsx new file mode 100644 index 0000000000..a14e39ce95 --- /dev/null +++ b/libs/webb-ui-components/src/stories/molecules/SideBarItem.stories.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +import { SideBarItem } from '@webb-tools/webb-ui-components/components'; +import { ContrastTwoLine } from '@webb-tools/icons'; + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Design System/Molecules/SideBarItem', + component: SideBarItem, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes +}; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Template = (args) => ; + +export const Default = Template.bind({}); +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = { + isSidebarOpen: true, + name: 'Hubble', + isInternal: true, + href: '', + Icon: ContrastTwoLine, + subItems: [ + { + name: 'Bridge', + isInternal: false, + // href: '#', + }, + { + name: 'Explorer', + isInternal: true, + // href: '#', + }, + { + name: 'Faucet', + isInternal: false, + // href: '#', + }, + ], +}; diff --git a/libs/webb-ui-components/src/stories/organisms/Sidebar.stories.jsx b/libs/webb-ui-components/src/stories/organisms/Sidebar.stories.jsx index fb2339e31d..e701ce843d 100644 --- a/libs/webb-ui-components/src/stories/organisms/Sidebar.stories.jsx +++ b/libs/webb-ui-components/src/stories/organisms/Sidebar.stories.jsx @@ -5,36 +5,30 @@ const items = [ { name: 'Hubble', isInternal: true, - href: '/bridge', Icon: ContrastTwoLine, subItems: [ { name: 'Bridge', isInternal: true, - href: '/bridge', }, { name: 'Faucet', isInternal: false, - href: 'https://develop--webb-faucet.netlify.app/', }, ], }, { name: 'Tangle Network', isInternal: true, - href: '', Icon: Tangle, subItems: [ { name: 'DKG Explorer', isInternal: false, - href: 'https://stats.webb.tools/#/keys', }, { name: 'Homepage', isInternal: false, - href: 'https://tangle.webb.tools/', }, ], }, From f171c2749a9579138c0c244b94e5d158a14ff2a7 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Wed, 26 Jul 2023 21:10:38 +0700 Subject: [PATCH 07/18] feat: add SideBarMenu --- apps/hubble-stats/app/layout.tsx | 76 +------------ .../hubble-stats/components/Header/Header.tsx | 16 ++- apps/hubble-stats/constants/index.ts | 1 + apps/hubble-stats/constants/sideBar.ts | 77 +++++++++++++ libs/icons/src/HamburgerMenu.tsx | 11 ++ libs/icons/src/index.ts | 1 + .../src/components/SideBar/SideBarMenu.tsx | 104 ++++++++++++++++++ .../src/components/SideBar/index.ts | 2 + .../src/components/SideBar/types.ts | 6 +- .../src/css/layer-components.css | 9 ++ .../stories/organisms/SideBarMenu.stories.jsx | 61 ++++++++++ 11 files changed, 282 insertions(+), 82 deletions(-) create mode 100644 apps/hubble-stats/constants/index.ts create mode 100644 apps/hubble-stats/constants/sideBar.ts create mode 100644 libs/icons/src/HamburgerMenu.tsx create mode 100644 libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx create mode 100644 libs/webb-ui-components/src/stories/organisms/SideBarMenu.stories.jsx diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx index 8099c18151..882848e5eb 100644 --- a/apps/hubble-stats/app/layout.tsx +++ b/apps/hubble-stats/app/layout.tsx @@ -4,92 +4,22 @@ import { WebbUIProvider, Footer, SideBar, - Logo, - LogoWithoutName, - SideBarItemProps, - FooterProps, } from '@webb-tools/webb-ui-components'; import '@webb-tools/webb-ui-components/tailwind.css'; -import { ContrastTwoLine, DocumentationIcon, Tangle } from '@webb-tools/icons'; -import { - BRIDGE_URL, - WEBB_FAUCET_URL, - STATS_URL, - TANGLE_MKT_URL, - WEBB_DOCS_URL, - WEBB_MKT_URL, -} from '@webb-tools/webb-ui-components/constants'; + import { Header } from '../components'; +import { sideBarProps } from '../constants'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { - const items: SideBarItemProps[] = [ - { - name: 'Hubble', - isInternal: true, - href: '', - Icon: ContrastTwoLine, - subItems: [ - { - name: 'Bridge', - isInternal: false, - href: BRIDGE_URL, - }, - { - name: 'Explorer', - isInternal: true, - href: '', - }, - { - name: 'Faucet', - isInternal: false, - href: WEBB_FAUCET_URL, - }, - ], - }, - { - name: 'Tangle Network', - isInternal: false, - href: '', - Icon: Tangle, - subItems: [ - { - name: 'DKG Explorer', - isInternal: false, - href: STATS_URL, - }, - { - name: 'Homepage', - isInternal: false, - href: TANGLE_MKT_URL, - }, - ], - }, - ]; - - const footer: FooterProps = { - name: 'Webb Docs', - isInternal: false, - href: WEBB_DOCS_URL, - Icon: DocumentationIcon, - }; - return ( - - +
{children} diff --git a/apps/hubble-stats/components/Header/Header.tsx b/apps/hubble-stats/components/Header/Header.tsx index 2396968443..b26c9a0ae3 100644 --- a/apps/hubble-stats/components/Header/Header.tsx +++ b/apps/hubble-stats/components/Header/Header.tsx @@ -1,13 +1,16 @@ -import { BlockIcon, GridFillIcon, 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, + SideBarMenu, } from '@webb-tools/webb-ui-components'; -import Link from 'next/link'; -import React, { useMemo } from 'react'; +import { BlockIcon, GridFillIcon, Spinner } from '@webb-tools/icons'; +import { IconBase } from '@webb-tools/icons/types'; + +import { sideBarProps } from '../../constants'; const Header = () => { const tvl = useMemo(() => { @@ -21,7 +24,8 @@ const Header = () => { return (
{/* Breadcrumbs */} -
+
+ = ({ +export const VolumeChip: FC = ({ color, className, Icon, diff --git a/apps/hubble-stats/constants/index.ts b/apps/hubble-stats/constants/index.ts new file mode 100644 index 0000000000..456794533d --- /dev/null +++ b/apps/hubble-stats/constants/index.ts @@ -0,0 +1 @@ +export { default as sideBarProps } from './sideBar'; diff --git a/apps/hubble-stats/constants/sideBar.ts b/apps/hubble-stats/constants/sideBar.ts new file mode 100644 index 0000000000..2dc8376477 --- /dev/null +++ b/apps/hubble-stats/constants/sideBar.ts @@ -0,0 +1,77 @@ +import { + Logo, + LogoWithoutName, + SideBarItemProps, + SideBarFooterProps, + SidebarProps, +} from '@webb-tools/webb-ui-components'; +import { ContrastTwoLine, DocumentationIcon, Tangle } from '@webb-tools/icons'; +import { + BRIDGE_URL, + WEBB_FAUCET_URL, + STATS_URL, + TANGLE_MKT_URL, + WEBB_DOCS_URL, + WEBB_MKT_URL, +} from '@webb-tools/webb-ui-components/constants'; + +const sideBarItems: SideBarItemProps[] = [ + { + name: 'Hubble', + isInternal: true, + href: '', + Icon: ContrastTwoLine, + subItems: [ + { + name: 'Bridge', + isInternal: false, + href: BRIDGE_URL, + }, + { + name: 'Explorer', + isInternal: true, + href: '', + }, + { + name: 'Faucet', + isInternal: false, + href: WEBB_FAUCET_URL, + }, + ], + }, + { + name: 'Tangle Network', + isInternal: false, + href: '', + Icon: Tangle, + subItems: [ + { + name: 'DKG Explorer', + isInternal: false, + href: STATS_URL, + }, + { + name: 'Homepage', + isInternal: false, + href: TANGLE_MKT_URL, + }, + ], + }, +]; + +const sideBarFooter: SideBarFooterProps = { + name: 'Webb Docs', + isInternal: false, + href: WEBB_DOCS_URL, + Icon: DocumentationIcon, +}; + +const sideBarProps: SidebarProps = { + Logo, + ClosedLogo: LogoWithoutName, + items: sideBarItems, + footer: sideBarFooter, + logoLink: WEBB_MKT_URL, +}; + +export default sideBarProps; diff --git a/libs/icons/src/HamburgerMenu.tsx b/libs/icons/src/HamburgerMenu.tsx new file mode 100644 index 0000000000..0b99be9435 --- /dev/null +++ b/libs/icons/src/HamburgerMenu.tsx @@ -0,0 +1,11 @@ +import { createIcon } from './create-icon'; +import { IconBase } from './types'; + +export const HamburgerMenu = (props: IconBase) => { + return createIcon({ + ...props, + viewBox: '0 0 15 15', + d: 'M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z', + displayName: 'HamburgerMenu', + }); +}; diff --git a/libs/icons/src/index.ts b/libs/icons/src/index.ts index 800bf08073..86f73bcdc2 100644 --- a/libs/icons/src/index.ts +++ b/libs/icons/src/index.ts @@ -50,6 +50,7 @@ export * from './ForumIcon'; export * from './GithubFill'; export * from './GraphIcon'; export * from './GridFillIcon'; +export * from './HamburgerMenu'; export * from './HelpLineIcon'; export * from './InformationLine'; export * from './InformationLineFill'; diff --git a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx new file mode 100644 index 0000000000..3f5c9e39b1 --- /dev/null +++ b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx @@ -0,0 +1,104 @@ +import { FC, useState } from 'react'; +import cx from 'classnames'; +import * as Dialog from '@radix-ui/react-dialog'; +import { HamburgerMenu, ExternalLinkLine } from '@webb-tools/icons'; + +import { Typography } from '../../typography/Typography'; +import { SideBarItem } from '../SideBarItem'; +import { ThemeToggle } from '../ThemeToggle'; +import { Link } from '../Link'; +import { SidebarProps } from './types'; + +export const SideBarMenu: FC = ({ + Logo, + logoLink, + items, + footer, + className, +}) => { + const [activeItem, setActiveItem] = useState(0); + console.log('activeItem :', activeItem); + + return ( +
+ + + + + + + + +
+ + + + +
+ {items.map((itemProps, index) => ( + setActiveItem(index)} + /> + ))} +
+
+ +
+
+ + + + +
+ + + {footer.name} + + +
+ + {!footer.isInternal ? ( +
+ + + +
+ ) : ( + '' + )} +
+ + +
+ + + +
+ ); +}; diff --git a/libs/webb-ui-components/src/components/SideBar/index.ts b/libs/webb-ui-components/src/components/SideBar/index.ts index a08ddcf077..2b8ec06062 100644 --- a/libs/webb-ui-components/src/components/SideBar/index.ts +++ b/libs/webb-ui-components/src/components/SideBar/index.ts @@ -1,2 +1,4 @@ export * from './SideBar'; +export * from './SideBarMenu'; + export * from './types'; diff --git a/libs/webb-ui-components/src/components/SideBar/types.ts b/libs/webb-ui-components/src/components/SideBar/types.ts index e3eb42fa28..6aa3552c21 100644 --- a/libs/webb-ui-components/src/components/SideBar/types.ts +++ b/libs/webb-ui-components/src/components/SideBar/types.ts @@ -3,7 +3,7 @@ import { IconBase } from '@webb-tools/icons/types'; import { SideBarItemProps } from '../SideBarItem'; import { LogoProps } from '../Logo/types'; -export type FooterProps = { +export type SideBarFooterProps = { name: string; isInternal: boolean; href: string; @@ -12,9 +12,9 @@ export type FooterProps = { export type SidebarProps = { Logo: React.FC; - ClosedLogo: React.FC; + ClosedLogo?: React.FC; logoLink?: string; items: SideBarItemProps[]; - footer: FooterProps; + footer: SideBarFooterProps; className?: string; }; diff --git a/libs/webb-ui-components/src/css/layer-components.css b/libs/webb-ui-components/src/css/layer-components.css index 31f5f5ea1f..8be6e83203 100644 --- a/libs/webb-ui-components/src/css/layer-components.css +++ b/libs/webb-ui-components/src/css/layer-components.css @@ -198,6 +198,15 @@ } } +@keyframes sideBarSlideLeftToRight { + from { + left: -280px; + } + to { + left: 0; + } +} + *[data-swipe='end'] { animation: 100ms ease-out; } diff --git a/libs/webb-ui-components/src/stories/organisms/SideBarMenu.stories.jsx b/libs/webb-ui-components/src/stories/organisms/SideBarMenu.stories.jsx new file mode 100644 index 0000000000..0170e9ad31 --- /dev/null +++ b/libs/webb-ui-components/src/stories/organisms/SideBarMenu.stories.jsx @@ -0,0 +1,61 @@ +import { SideBarMenu, Logo, LogoWithoutName } from '../../components'; +import { ContrastTwoLine, Tangle, DocumentationIcon } from '@webb-tools/icons'; + +const items = [ + { + name: 'Hubble', + isInternal: true, + Icon: ContrastTwoLine, + subItems: [ + { + name: 'Bridge', + isInternal: true, + }, + { + name: 'Faucet', + isInternal: false, + }, + ], + }, + { + name: 'Tangle Network', + isInternal: true, + Icon: Tangle, + subItems: [ + { + name: 'DKG Explorer', + isInternal: false, + }, + { + name: 'Homepage', + isInternal: false, + }, + ], + }, +]; + +const footer = { + name: 'Webb Docs', + isInternal: false, + href: 'https://docs.webb.tools/', + Icon: DocumentationIcon, +}; + +export default { + title: 'Design System/Organisms/SideBarMenu', + component: SideBarMenu, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes +}; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Template = (args) => ; + +export const Default = Template.bind({}); +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = { + items: items, + Logo: Logo, + ClosedLogo: LogoWithoutName, + logoLink: 'https://webb.tools/', + footer: footer, +}; From 82e3b7985e58d3ac5d66a704e26e3a0e4183e1b1 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Thu, 27 Jul 2023 09:23:32 +0700 Subject: [PATCH 08/18] chore: refactor code --- .../SideBarItem.tsx => SideBar/Item.tsx} | 0 .../src/components/SideBar/SideBar.tsx | 2 +- .../src/components/SideBar/SideBarMenu.tsx | 2 +- .../{SideBarItem => SideBar}/SubItem.tsx | 0 .../src/components/SideBar/index.ts | 2 + .../src/components/SideBar/types.ts | 27 +++++++++++- .../src/components/SideBarItem/index.ts | 3 -- .../src/components/SideBarItem/types.ts | 27 ------------ .../src/components/index.ts | 1 - .../stories/molecules/SideBarItem.stories.jsx | 41 ------------------- 10 files changed, 30 insertions(+), 75 deletions(-) rename libs/webb-ui-components/src/components/{SideBarItem/SideBarItem.tsx => SideBar/Item.tsx} (100%) rename libs/webb-ui-components/src/components/{SideBarItem => SideBar}/SubItem.tsx (100%) delete mode 100644 libs/webb-ui-components/src/components/SideBarItem/index.ts delete mode 100644 libs/webb-ui-components/src/components/SideBarItem/types.ts delete mode 100644 libs/webb-ui-components/src/stories/molecules/SideBarItem.stories.jsx diff --git a/libs/webb-ui-components/src/components/SideBarItem/SideBarItem.tsx b/libs/webb-ui-components/src/components/SideBar/Item.tsx similarity index 100% rename from libs/webb-ui-components/src/components/SideBarItem/SideBarItem.tsx rename to libs/webb-ui-components/src/components/SideBar/Item.tsx diff --git a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx index cde3dc7934..f38b51ce9d 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx @@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge'; import { ChevronLeft, ChevronRight, ExternalLinkLine } from '@webb-tools/icons'; import { Typography } from '../../typography/Typography'; -import { SideBarItem } from '../SideBarItem'; +import { SideBarItem } from './Item'; import { ThemeToggle } from '../ThemeToggle'; import { Link } from '../Link'; import { SidebarProps } from './types'; diff --git a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx index 3f5c9e39b1..ea289824c9 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx @@ -4,7 +4,7 @@ import * as Dialog from '@radix-ui/react-dialog'; import { HamburgerMenu, ExternalLinkLine } from '@webb-tools/icons'; import { Typography } from '../../typography/Typography'; -import { SideBarItem } from '../SideBarItem'; +import { SideBarItem } from './Item'; import { ThemeToggle } from '../ThemeToggle'; import { Link } from '../Link'; import { SidebarProps } from './types'; diff --git a/libs/webb-ui-components/src/components/SideBarItem/SubItem.tsx b/libs/webb-ui-components/src/components/SideBar/SubItem.tsx similarity index 100% rename from libs/webb-ui-components/src/components/SideBarItem/SubItem.tsx rename to libs/webb-ui-components/src/components/SideBar/SubItem.tsx diff --git a/libs/webb-ui-components/src/components/SideBar/index.ts b/libs/webb-ui-components/src/components/SideBar/index.ts index 2b8ec06062..586b05d6d3 100644 --- a/libs/webb-ui-components/src/components/SideBar/index.ts +++ b/libs/webb-ui-components/src/components/SideBar/index.ts @@ -1,4 +1,6 @@ export * from './SideBar'; export * from './SideBarMenu'; +export * from './Item'; +export * from './SubItem'; export * from './types'; diff --git a/libs/webb-ui-components/src/components/SideBar/types.ts b/libs/webb-ui-components/src/components/SideBar/types.ts index 6aa3552c21..a995fe06c1 100644 --- a/libs/webb-ui-components/src/components/SideBar/types.ts +++ b/libs/webb-ui-components/src/components/SideBar/types.ts @@ -1,6 +1,5 @@ import { IconBase } from '@webb-tools/icons/types'; -import { SideBarItemProps } from '../SideBarItem'; import { LogoProps } from '../Logo/types'; export type SideBarFooterProps = { @@ -18,3 +17,29 @@ export type SidebarProps = { footer: SideBarFooterProps; className?: string; }; + +export type SideBarItemProps = { + name: string; + isInternal: boolean; + href: string; + Icon: (props: IconBase) => JSX.Element; + subItems: SideBarSubItemProps[]; +}; + +export type SideBarExtraItemProps = { + isSidebarOpen?: boolean; + isActive?: boolean; + setIsActive?: () => void; +}; + +export type SideBarSubItemProps = { + name: string; + isInternal: boolean; + href: string; +}; + +export type SideBarExtraSubItemProps = { + isActive?: boolean; + setItemIsActive?: () => void; + setSubItemIsActive?: () => void; +}; diff --git a/libs/webb-ui-components/src/components/SideBarItem/index.ts b/libs/webb-ui-components/src/components/SideBarItem/index.ts deleted file mode 100644 index f886692566..0000000000 --- a/libs/webb-ui-components/src/components/SideBarItem/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './SideBarItem'; - -export * from './types'; diff --git a/libs/webb-ui-components/src/components/SideBarItem/types.ts b/libs/webb-ui-components/src/components/SideBarItem/types.ts deleted file mode 100644 index 83d0c89c74..0000000000 --- a/libs/webb-ui-components/src/components/SideBarItem/types.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { IconBase } from '@webb-tools/icons/types'; - -export type SideBarItemProps = { - name: string; - isInternal: boolean; - href: string; - Icon: (props: IconBase) => JSX.Element; - subItems: SideBarSubItemProps[]; -}; - -export type SideBarExtraItemProps = { - isSidebarOpen?: boolean; - isActive?: boolean; - setIsActive?: () => void; -}; - -export type SideBarSubItemProps = { - name: string; - isInternal: boolean; - href: string; -}; - -export type SideBarExtraSubItemProps = { - isActive?: boolean; - setItemIsActive?: () => void; - setSubItemIsActive?: () => void; -}; diff --git a/libs/webb-ui-components/src/components/index.ts b/libs/webb-ui-components/src/components/index.ts index 394ec08bb2..c1869b84ca 100644 --- a/libs/webb-ui-components/src/components/index.ts +++ b/libs/webb-ui-components/src/components/index.ts @@ -49,7 +49,6 @@ export * from './Popover'; export * from './Progress'; export * from './Radio'; export * from './SideBar'; -export * from './SideBarItem'; export * from './Slider'; export * from './Socials'; export * from './Stats'; diff --git a/libs/webb-ui-components/src/stories/molecules/SideBarItem.stories.jsx b/libs/webb-ui-components/src/stories/molecules/SideBarItem.stories.jsx deleted file mode 100644 index a14e39ce95..0000000000 --- a/libs/webb-ui-components/src/stories/molecules/SideBarItem.stories.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; - -import { SideBarItem } from '@webb-tools/webb-ui-components/components'; -import { ContrastTwoLine } from '@webb-tools/icons'; - -// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -export default { - title: 'Design System/Molecules/SideBarItem', - component: SideBarItem, - // More on argTypes: https://storybook.js.org/docs/react/api/argtypes -}; - -// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template = (args) => ; - -export const Default = Template.bind({}); -// More on args: https://storybook.js.org/docs/react/writing-stories/args -Default.args = { - isSidebarOpen: true, - name: 'Hubble', - isInternal: true, - href: '', - Icon: ContrastTwoLine, - subItems: [ - { - name: 'Bridge', - isInternal: false, - // href: '#', - }, - { - name: 'Explorer', - isInternal: true, - // href: '#', - }, - { - name: 'Faucet', - isInternal: false, - // href: '#', - }, - ], -}; From 0744aa3f92205088e792d6b94d4c68b21cdf3c2d Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Thu, 27 Jul 2023 09:35:23 +0700 Subject: [PATCH 09/18] chore: update Brige Dapp sidebar --- apps/bridge-dapp/src/containers/Layout/Layout.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/bridge-dapp/src/containers/Layout/Layout.tsx b/apps/bridge-dapp/src/containers/Layout/Layout.tsx index 0776a41f51..39d72bd9af 100644 --- a/apps/bridge-dapp/src/containers/Layout/Layout.tsx +++ b/apps/bridge-dapp/src/containers/Layout/Layout.tsx @@ -2,8 +2,8 @@ import { Transition } from '@headlessui/react'; import { Banner, Footer, - ItemProps, - FooterProps, + SideBarItemProps, + SideBarFooterProps, Logo, LogoWithoutName, SideBar, @@ -21,7 +21,7 @@ import { WEBB_DOCS_URL, } from '../../constants'; -const items: ItemProps[] = [ +const items: SideBarItemProps[] = [ { name: 'Hubble', isInternal: true, @@ -60,7 +60,7 @@ const items: ItemProps[] = [ }, ]; -const footer: FooterProps = { +const footer: SideBarFooterProps = { name: 'Webb Docs', isInternal: false, href: WEBB_DOCS_URL, From d456a2f9f5f130940e3c6f0fe13ac6f94b7e1b75 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Thu, 27 Jul 2023 09:54:54 +0700 Subject: [PATCH 10/18] chore: responsive Network Tables --- .../components/NetworkPoolTable/NetworkPoolTable.tsx | 1 + .../components/NetworkTokenTable/NetworkTokenTable.tsx | 1 + .../NetworkTablesContainer/NetworkTablesContainer.tsx | 8 +++++++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx b/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx index 4b11e39070..a9182d19e3 100644 --- a/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx +++ b/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx @@ -111,6 +111,7 @@ const NetworkPoolTable: FC = ({ return (
} diff --git a/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx b/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx index 5c0e32733a..fd0b872c6e 100644 --- a/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx +++ b/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx @@ -140,6 +140,7 @@ const NetworkTokenTable: FC = ({ return (
} diff --git a/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx b/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx index a36080102d..c71ed4f000 100644 --- a/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx +++ b/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx @@ -22,6 +22,8 @@ const NetworkTablesContainer: FC = ({
= ({
- + Date: Thu, 27 Jul 2023 11:58:37 +0700 Subject: [PATCH 11/18] feat: update useDarkMode with use-local-storage-state --- .../src/components/SideBar/SideBarMenu.tsx | 1 - .../src/hooks/useDarkMode.ts | 65 ++++++------------- 2 files changed, 20 insertions(+), 46 deletions(-) diff --git a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx index ea289824c9..b422e25cc1 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx @@ -17,7 +17,6 @@ export const SideBarMenu: FC = ({ className, }) => { const [activeItem, setActiveItem] = useState(0); - console.log('activeItem :', activeItem); return (
diff --git a/libs/webb-ui-components/src/hooks/useDarkMode.ts b/libs/webb-ui-components/src/hooks/useDarkMode.ts index b15856723e..d72e5ffaec 100644 --- a/libs/webb-ui-components/src/hooks/useDarkMode.ts +++ b/libs/webb-ui-components/src/hooks/useDarkMode.ts @@ -1,4 +1,5 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo } from 'react'; +import useLocalStorageState from 'use-local-storage-state'; type SupportTheme = 'light' | 'dark'; @@ -22,78 +23,52 @@ export type ToggleThemeModeFunc = ( export function useDarkMode( defaultTheme: SupportTheme = 'dark' ): [boolean, ToggleThemeModeFunc] { - const [preferredTheme, setPreferredTheme] = - useState(defaultTheme); + const currentLocalTheme = localStorage.getItem( + 'theme' + ) as SupportTheme | null; - const isDarkMode = useMemo( - () => - isBrowser() && localStorage.getItem('theme') !== null - ? localStorage.getItem('theme') === 'dark' - : preferredTheme === 'dark', - [preferredTheme] - ); + const [theme, setTheme] = useLocalStorageState('theme', { + defaultValue: currentLocalTheme ?? defaultTheme, + }); + + const isDarkMode = useMemo(() => theme === 'dark', [theme]); useEffect(() => { if (!isBrowser()) { return; } - if (localStorage.getItem('theme') === null) { + if (theme === 'dark') { document.documentElement.classList.add('dark'); - localStorage.setItem('theme', 'dark'); - window.dispatchEvent(new Event('storage')); - } - - if ( - localStorage.getItem('theme') === 'dark' || - (!('theme' in localStorage) && - window.matchMedia('(prefers-color-scheme: dark)').matches) - ) { - document.documentElement.classList.add('dark'); - setPreferredTheme('dark'); } else { document.documentElement.classList.remove('dark'); - setPreferredTheme('light'); } - }, []); + }, [theme]); const toggleThemeMode = useCallback( (nextThemeMode?: SupportTheme | undefined) => { - if (!isBrowser()) { - return; - } + if (!isBrowser()) return; - let _nextThemeMode: SupportTheme; + const _nextThemeMode = + nextThemeMode ?? theme === 'dark' ? 'light' : 'dark'; - if (!nextThemeMode) { - _nextThemeMode = preferredTheme === 'dark' ? 'light' : 'dark'; - } else { - _nextThemeMode = nextThemeMode; - } + if (_nextThemeMode === theme) return; switch (_nextThemeMode) { case 'dark': { - if (localStorage.getItem('theme') !== _nextThemeMode) { - document.documentElement.classList.add(_nextThemeMode); - localStorage.setItem('theme', _nextThemeMode); - window.dispatchEvent(new Event('storage')); - } + document.documentElement.classList.add('dark'); break; } case 'light': { - if (localStorage.getItem('theme') !== _nextThemeMode) { - document.documentElement.classList.remove('dark'); - localStorage.setItem('theme', _nextThemeMode); - window.dispatchEvent(new Event('storage')); - } + document.documentElement.classList.remove('dark'); break; } } - setPreferredTheme(_nextThemeMode); + setTheme(_nextThemeMode); }, - [preferredTheme] + [theme, setTheme] ); return [isDarkMode, toggleThemeMode]; From dda1d9df12a97d6fef0dca1ed85ccddb4fdf9136 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Thu, 27 Jul 2023 13:19:10 +0700 Subject: [PATCH 12/18] feat: add forwardRef --- .../src/components/SideBar/SideBar.tsx | 225 +++++++++--------- .../src/components/SideBar/SideBarMenu.tsx | 161 +++++++------ 2 files changed, 191 insertions(+), 195 deletions(-) diff --git a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx index acd4f3c2b7..1f0393fc0b 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, forwardRef } from 'react'; import cx from 'classnames'; import useLocalStorageState from 'use-local-storage-state'; import { twMerge } from 'tailwind-merge'; @@ -28,135 +28,132 @@ import { SidebarProps } from './types'; * /> * ``` */ -export const SideBar: React.FC = ({ - Logo, - ClosedLogo, - logoLink, - items, - footer, - className, -}) => { - const [isSidebarOpen, setIsSidebarOpen] = useLocalStorageState( - 'isSidebarOpen', - { - defaultValue: true, - } - ); +export const SideBar = forwardRef( + ({ Logo, ClosedLogo, logoLink, items, footer, className, ...props }, ref) => { + const [isSidebarOpen, setIsSidebarOpen] = useLocalStorageState( + 'isSidebarOpen', + { + defaultValue: true, + } + ); - const [activeItem, setActiveItem] = useState(0); - const [isHovering, setIsHovering] = useState(false); + const [activeItem, setActiveItem] = useState(0); + const [isHovering, setIsHovering] = useState(false); - return ( -
setIsHovering(true)} - onMouseLeave={() => setIsHovering(false)} - > + return (
setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} + {...props} + ref={ref} > -
- - -
- {items.map((itemProps, index) => ( - setActiveItem(index)} - /> - ))} -
-
- -
setIsSidebarOpen(!isSidebarOpen)} - /> -
-
- - - +
+ + +
+ {items.map((itemProps, index) => ( + setActiveItem(index)} + /> + ))} +
+
- {isSidebarOpen && ( - <> -
- - - {footer.name} - - -
+
setIsSidebarOpen(!isSidebarOpen)} + /> - {!footer.isInternal ? ( -
+
+
+ + + + + {isSidebarOpen && ( + <> +
- + + {footer.name} +
- ) : ( - '' - )} - - )} -
- {isSidebarOpen && } + {!footer.isInternal ? ( +
+ + + +
+ ) : ( + '' + )} + + )} +
+ + {isSidebarOpen && } +
-
- {isHovering && ( -
+ {isHovering && (
setIsSidebarOpen(!isSidebarOpen)} - className="p-1 rounded-full shadow-lg cursor-pointer bg-mono-0 dark:bg-mono-180" + className="absolute top-0 right-0 px-3 pt-12" + style={{ transform: 'translateX(100%)' }} > - {isSidebarOpen ? ( - - ) : ( - - )} +
setIsSidebarOpen(!isSidebarOpen)} + className="p-1 rounded-full shadow-lg cursor-pointer bg-mono-0 dark:bg-mono-180" + > + {isSidebarOpen ? ( + + ) : ( + + )} +
-
- )} -
- ); -}; + )} +
+ ); + } +); diff --git a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx index b422e25cc1..bca039bf78 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react'; +import { useState, forwardRef } from 'react'; import cx from 'classnames'; import * as Dialog from '@radix-ui/react-dialog'; import { HamburgerMenu, ExternalLinkLine } from '@webb-tools/icons'; @@ -9,95 +9,94 @@ import { ThemeToggle } from '../ThemeToggle'; import { Link } from '../Link'; import { SidebarProps } from './types'; -export const SideBarMenu: FC = ({ - Logo, - logoLink, - items, - footer, - className, -}) => { - const [activeItem, setActiveItem] = useState(0); +export const SideBarMenu = forwardRef( + ({ Logo, logoLink, items, footer, className, ...props }, ref) => { + const [activeItem, setActiveItem] = useState(0); - return ( -
- - - - + return ( +
+ + + + - - - -
- - - + + + +
+ + + -
- {items.map((itemProps, index) => ( - setActiveItem(index)} - /> - ))} +
+ {items.map((itemProps, index) => ( + setActiveItem(index)} + /> + ))} +
-
- -
-
- - - -
+
+
- - {footer.name} - + -
- {!footer.isInternal ? ( -
+
- + + {footer.name} +
- ) : ( - '' - )} -
- -
- - - -
- ); -}; + {!footer.isInternal ? ( +
+ + + +
+ ) : ( + '' + )} +
+ + +
+ + + +
+ ); + } +); From 57f1ad339592a8ad73a59e0e24cbc40efb512749 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Thu, 27 Jul 2023 14:10:52 +0700 Subject: [PATCH 13/18] fix: fix localStorage error when deploy --- libs/webb-ui-components/src/components/SideBar/SideBar.tsx | 2 +- libs/webb-ui-components/src/hooks/useDarkMode.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx index 1f0393fc0b..9ee5f11e1a 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx @@ -1,4 +1,4 @@ -import React, { useState, forwardRef } from 'react'; +import { useState, forwardRef } from 'react'; import cx from 'classnames'; import useLocalStorageState from 'use-local-storage-state'; import { twMerge } from 'tailwind-merge'; diff --git a/libs/webb-ui-components/src/hooks/useDarkMode.ts b/libs/webb-ui-components/src/hooks/useDarkMode.ts index d72e5ffaec..15b3c65a06 100644 --- a/libs/webb-ui-components/src/hooks/useDarkMode.ts +++ b/libs/webb-ui-components/src/hooks/useDarkMode.ts @@ -23,9 +23,9 @@ export type ToggleThemeModeFunc = ( export function useDarkMode( defaultTheme: SupportTheme = 'dark' ): [boolean, ToggleThemeModeFunc] { - const currentLocalTheme = localStorage.getItem( - 'theme' - ) as SupportTheme | null; + const currentLocalTheme = isBrowser() + ? (localStorage.getItem('theme') as SupportTheme) + : null; const [theme, setTheme] = useLocalStorageState('theme', { defaultValue: currentLocalTheme ?? defaultTheme, From 368deafc74cd2f4d33a37da291e7c50aa0925fe7 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Thu, 27 Jul 2023 14:55:29 +0700 Subject: [PATCH 14/18] chore: remove unnecessary code --- libs/webb-ui-components/src/hooks/useDarkMode.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/libs/webb-ui-components/src/hooks/useDarkMode.ts b/libs/webb-ui-components/src/hooks/useDarkMode.ts index 15b3c65a06..8c9074b350 100644 --- a/libs/webb-ui-components/src/hooks/useDarkMode.ts +++ b/libs/webb-ui-components/src/hooks/useDarkMode.ts @@ -23,12 +23,8 @@ export type ToggleThemeModeFunc = ( export function useDarkMode( defaultTheme: SupportTheme = 'dark' ): [boolean, ToggleThemeModeFunc] { - const currentLocalTheme = isBrowser() - ? (localStorage.getItem('theme') as SupportTheme) - : null; - const [theme, setTheme] = useLocalStorageState('theme', { - defaultValue: currentLocalTheme ?? defaultTheme, + defaultValue: defaultTheme, }); const isDarkMode = useMemo(() => theme === 'dark', [theme]); From abdb4c199cbf07c161d9145ba542d7c94228b248 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Thu, 27 Jul 2023 20:43:29 +0700 Subject: [PATCH 15/18] chore: update based comments --- .../NetworkPoolTable/NetworkPoolTable.tsx | 2 +- .../NetworkTokenTable/NetworkTokenTable.tsx | 2 +- .../PoolTransactionsTable.tsx | 2 +- .../ShieldedAssetsTable.tsx | 2 +- .../ShieldedPoolsTable/ShieldedPoolsTable.tsx | 2 +- .../src/components/SideBar/SideBar.tsx | 2 + .../src/components/SideBar/SideBarMenu.tsx | 4 +- .../src/components/Table/Table.tsx | 82 +++++++++---------- .../TableAndChartTabs/TableAndChartTabs.tsx | 10 +-- .../src/hooks/useDarkMode.ts | 6 +- 10 files changed, 61 insertions(+), 53 deletions(-) diff --git a/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx b/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx index a9182d19e3..89d0b5da3f 100644 --- a/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx +++ b/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx @@ -111,7 +111,7 @@ const NetworkPoolTable: FC = ({ return (
} diff --git a/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx b/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx index fd0b872c6e..b7b5de9cb2 100644 --- a/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx +++ b/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx @@ -140,7 +140,7 @@ const NetworkTokenTable: FC = ({ return (
} diff --git a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx index a3c397e2a5..8f22e59804 100644 --- a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx +++ b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx @@ -93,7 +93,7 @@ const PoolTransactionsTable: FC = ({ return (
} diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx index ab219e9c2d..7b3fc75686 100644 --- a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx +++ b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx @@ -108,7 +108,7 @@ const ShieldedAssetsTable: FC = ({ return (
} diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx index 136ea30133..b12f26100b 100644 --- a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx +++ b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx @@ -86,7 +86,7 @@ const ShieldedPoolsTable: FC = ({ return (
} diff --git a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx index 9ee5f11e1a..7094be8b2c 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useState, forwardRef } from 'react'; import cx from 'classnames'; import useLocalStorageState from 'use-local-storage-state'; diff --git a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx index bca039bf78..bc4c6b4d91 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useState, forwardRef } from 'react'; import cx from 'classnames'; import * as Dialog from '@radix-ui/react-dialog'; @@ -10,7 +12,7 @@ import { Link } from '../Link'; import { SidebarProps } from './types'; export const SideBarMenu = forwardRef( - ({ Logo, logoLink, items, footer, className, ...props }, ref) => { + ({ Logo, ClosedLogo, logoLink, items, footer, className, ...props }, ref) => { const [activeItem, setActiveItem] = useState(0); return ( diff --git a/libs/webb-ui-components/src/components/Table/Table.tsx b/libs/webb-ui-components/src/components/Table/Table.tsx index b7487cac6a..c11610fb97 100644 --- a/libs/webb-ui-components/src/components/Table/Table.tsx +++ b/libs/webb-ui-components/src/components/Table/Table.tsx @@ -1,5 +1,5 @@ import React, { forwardRef } from 'react'; -import cx from 'classnames'; +import { twMerge } from 'tailwind-merge'; import { flexRender, RowData } from '@tanstack/react-table'; import { Pagination } from '../Pagination'; @@ -24,55 +24,55 @@ const TableComp = ( ) => { return (
-
-
- - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + ))} + + {isDisplayFooter && ( + + {table.getFooterGroups().map((footerGroup) => ( + + {footerGroup.headers.map((header) => ( + {header.isPlaceholder ? null : flexRender( - header.column.columnDef.header, + header.column.columnDef.footer, header.getContext() )} ))} ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - ))} - - {isDisplayFooter && ( - - {table.getFooterGroups().map((footerGroup) => ( - - {footerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.footer, - header.getContext() - )} - - ))} - - ))} - - )} -
-
+ + )} + {/** Pagination */} {isPaginated && ( diff --git a/libs/webb-ui-components/src/components/TableAndChartTabs/TableAndChartTabs.tsx b/libs/webb-ui-components/src/components/TableAndChartTabs/TableAndChartTabs.tsx index 7b4cfda12e..021fa3cf54 100644 --- a/libs/webb-ui-components/src/components/TableAndChartTabs/TableAndChartTabs.tsx +++ b/libs/webb-ui-components/src/components/TableAndChartTabs/TableAndChartTabs.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import cx from 'classnames'; +import { twMerge } from 'tailwind-merge'; import { TabsRoot, TabsList, TabTrigger } from '../Tabs'; import { Typography } from '../../typography'; @@ -18,24 +18,24 @@ export const TableAndChartTabs: FC = ({ return (
{/* Tabs List on the left */} - + {tabs.map((tab, idx) => { return ( Date: Fri, 28 Jul 2023 14:56:12 +0700 Subject: [PATCH 16/18] chore: refactor SideBar code --- .../src/components/SideBar/Footer.tsx | 62 +++++++++++++ .../SideBar/{Item.tsx => Items.tsx} | 57 ++++++++---- .../src/components/SideBar/Logo.tsx | 11 +++ .../src/components/SideBar/SideBar.tsx | 90 ++++--------------- .../src/components/SideBar/SideBarMenu.tsx | 88 +++++------------- .../src/components/SideBar/index.ts | 5 +- .../src/components/SideBar/types.ts | 26 ++++-- 7 files changed, 173 insertions(+), 166 deletions(-) create mode 100644 libs/webb-ui-components/src/components/SideBar/Footer.tsx rename libs/webb-ui-components/src/components/SideBar/{Item.tsx => Items.tsx} (74%) create mode 100644 libs/webb-ui-components/src/components/SideBar/Logo.tsx diff --git a/libs/webb-ui-components/src/components/SideBar/Footer.tsx b/libs/webb-ui-components/src/components/SideBar/Footer.tsx new file mode 100644 index 0000000000..fe2f4b7fc9 --- /dev/null +++ b/libs/webb-ui-components/src/components/SideBar/Footer.tsx @@ -0,0 +1,62 @@ +import { FC } from 'react'; +import { twMerge } from 'tailwind-merge'; +import { ExternalLinkLine } from '@webb-tools/icons'; + +import { Typography } from '../../typography/Typography'; +import { Link } from '../Link'; +import { ThemeToggle } from '../ThemeToggle'; +import { SideBarFooterProps } from './types'; + +export const SideBarFooter: FC = ({ + Icon, + name, + isInternal, + href, + className, + isExpanded, +}) => { + return ( +
+
+ + + + + {isExpanded && ( + <> +
+ + + {name} + + +
+ + {!isInternal ? ( +
+ + + +
+ ) : ( + '' + )} + + )} +
+ + {isExpanded && } +
+ ); +}; diff --git a/libs/webb-ui-components/src/components/SideBar/Item.tsx b/libs/webb-ui-components/src/components/SideBar/Items.tsx similarity index 74% rename from libs/webb-ui-components/src/components/SideBar/Item.tsx rename to libs/webb-ui-components/src/components/SideBar/Items.tsx index afc0ddc2ff..9526318fce 100644 --- a/libs/webb-ui-components/src/components/SideBar/Item.tsx +++ b/libs/webb-ui-components/src/components/SideBar/Items.tsx @@ -1,20 +1,45 @@ -import React, { useEffect, useState } from 'react'; -import { SideBarItemProps, SideBarExtraItemProps } from './types'; -import { SubItem } from './SubItem'; +import { FC, useEffect, useState } from 'react'; +import { twMerge } from 'tailwind-merge'; import { ChevronDown, ChevronUp, ExternalLinkLine } from '@webb-tools/icons'; + import { Typography } from '../../typography/Typography'; -import { twMerge } from 'tailwind-merge'; +import { + SideBarItemsProps, + SideBarItemProps, + SideBarExtraItemProps, +} from './types'; +import { SubItem } from './SubItem'; import { Link } from '../Link'; -export const SideBarItem: React.FC< - SideBarItemProps & SideBarExtraItemProps -> = ({ +export const SideBarItems: FC = ({ + items, + isExpanded, + className, +}) => { + const [activeItem, setActiveItem] = useState(0); + + return ( +
+ {items.map((itemProps, idx) => ( + setActiveItem(idx)} + /> + ))} +
+ ); +}; + +export const SideBarItem: FC = ({ name, isInternal, href, Icon, subItems, - isSidebarOpen, + isExpanded, isActive, setIsActive, }) => { @@ -30,7 +55,7 @@ export const SideBarItem: React.FC< }, [isActive]); const setItemAsActiveAndToggleDropdown = () => { - if (!isSidebarOpen && setIsActive && isInternal) { + if (!isExpanded && setIsActive && isInternal) { setIsActive(); } @@ -46,19 +71,19 @@ export const SideBarItem: React.FC<
- {isSidebarOpen && ( + {isExpanded && ( - {isSidebarOpen && ( + {isExpanded && (
{!isInternal && href && subItems.length <= 0 ? ( @@ -105,7 +130,7 @@ export const SideBarItem: React.FC<
- {isSidebarOpen && isDropdownOpen && ( + {isExpanded && isDropdownOpen && (
    {subItems.map((subItemProps, index) => ( = ({ logoLink, Logo }) => { + return ( + + + + ); +}; diff --git a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx index 7094be8b2c..ac0fd4b4d5 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx @@ -4,12 +4,9 @@ import { useState, forwardRef } from 'react'; import cx from 'classnames'; import useLocalStorageState from 'use-local-storage-state'; import { twMerge } from 'tailwind-merge'; -import { ChevronLeft, ChevronRight, ExternalLinkLine } from '@webb-tools/icons'; +import { ChevronLeft, ChevronRight } from '@webb-tools/icons'; -import { Typography } from '../../typography/Typography'; -import { Link } from '../Link'; -import { ThemeToggle } from '../ThemeToggle'; -import { SideBarItem } from './Item'; +import { SideBarLogo, SideBarItems, SideBarFooter } from '.'; import { SidebarProps } from './types'; /** @@ -39,7 +36,6 @@ export const SideBar = forwardRef( } ); - const [activeItem, setActiveItem] = useState(0); const [isHovering, setIsHovering] = useState(false); return ( @@ -58,30 +54,13 @@ export const SideBar = forwardRef( >
    -
    - {items.map((itemProps, index) => ( - setActiveItem(index)} - /> - ))} -
    +
    ( onClick={() => setIsSidebarOpen(!isSidebarOpen)} /> -
    -
    - - - - - {isSidebarOpen && ( - <> -
    - - - {footer.name} - - -
    - - {!footer.isInternal ? ( -
    - - - -
    - ) : ( - '' - )} - - )} -
    - - {isSidebarOpen && } -
    +
    {isHovering && ( diff --git a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx index bc4c6b4d91..07d317bbd0 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx @@ -1,22 +1,21 @@ 'use client'; -import { useState, forwardRef } from 'react'; -import cx from 'classnames'; +import { forwardRef } from 'react'; +import { twMerge } from 'tailwind-merge'; import * as Dialog from '@radix-ui/react-dialog'; -import { HamburgerMenu, ExternalLinkLine } from '@webb-tools/icons'; +import { HamburgerMenu } from '@webb-tools/icons'; -import { Typography } from '../../typography/Typography'; -import { SideBarItem } from './Item'; -import { ThemeToggle } from '../ThemeToggle'; -import { Link } from '../Link'; +import { SideBarLogo, SideBarItems, SideBarFooter } from '.'; import { SidebarProps } from './types'; export const SideBarMenu = forwardRef( ({ Logo, ClosedLogo, logoLink, items, footer, className, ...props }, ref) => { - const [activeItem, setActiveItem] = useState(0); - return ( -
    +
    ( ( )} >
    - - - - -
    - {items.map((itemProps, index) => ( - setActiveItem(index)} - /> - ))} -
    + +
    -
    -
    - - - - -
    - - - {footer.name} - - -
    - - {!footer.isInternal ? ( -
    - - - -
    - ) : ( - '' - )} -
    - - -
    +     diff --git a/libs/webb-ui-components/src/components/SideBar/index.ts b/libs/webb-ui-components/src/components/SideBar/index.ts index 586b05d6d3..328099c01e 100644 --- a/libs/webb-ui-components/src/components/SideBar/index.ts +++ b/libs/webb-ui-components/src/components/SideBar/index.ts @@ -1,6 +1,9 @@ export * from './SideBar'; export * from './SideBarMenu'; -export * from './Item'; + +export * from './Footer'; +export * from './Logo'; +export * from './Items'; export * from './SubItem'; export * from './types'; diff --git a/libs/webb-ui-components/src/components/SideBar/types.ts b/libs/webb-ui-components/src/components/SideBar/types.ts index a995fe06c1..ac97f92da8 100644 --- a/libs/webb-ui-components/src/components/SideBar/types.ts +++ b/libs/webb-ui-components/src/components/SideBar/types.ts @@ -2,21 +2,35 @@ import { IconBase } from '@webb-tools/icons/types'; import { LogoProps } from '../Logo/types'; -export type SideBarFooterProps = { +type SideBarFooterType = { name: string; isInternal: boolean; href: string; Icon: (props: IconBase) => JSX.Element; }; -export type SidebarProps = { +export interface SideBarFooterProps extends SideBarFooterType { + isExpanded: boolean; + className?: string; +} + +export interface SideBarLogoProps { Logo: React.FC; - ClosedLogo?: React.FC; logoLink?: string; +} + +export interface SidebarProps extends SideBarLogoProps { + ClosedLogo?: React.FC; items: SideBarItemProps[]; - footer: SideBarFooterProps; + footer: SideBarFooterType; className?: string; -}; +} + +export interface SideBarItemsProps { + items: SideBarItemProps[]; + isExpanded: boolean; + className?: string; +} export type SideBarItemProps = { name: string; @@ -27,7 +41,7 @@ export type SideBarItemProps = { }; export type SideBarExtraItemProps = { - isSidebarOpen?: boolean; + isExpanded?: boolean; isActive?: boolean; setIsActive?: () => void; }; From b0a097e4118bb51e1ccad2a04d40691337977c73 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 Date: Fri, 28 Jul 2023 15:08:02 +0700 Subject: [PATCH 17/18] chore: fix outline for sidebarmenu hamburger and content --- .../webb-ui-components/src/components/SideBar/SideBarMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx index 07d317bbd0..a082ac52e1 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx @@ -17,7 +17,7 @@ export const SideBarMenu = forwardRef( ref={ref} > - + ( Date: Fri, 28 Jul 2023 15:18:56 +0700 Subject: [PATCH 18/18] chore: fix minor errors --- apps/bridge-dapp/src/containers/Layout/Layout.tsx | 4 ++-- apps/hubble-stats/constants/sideBar.ts | 4 ++-- libs/webb-ui-components/src/components/SideBar/types.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/bridge-dapp/src/containers/Layout/Layout.tsx b/apps/bridge-dapp/src/containers/Layout/Layout.tsx index 39d72bd9af..5ffa677ea8 100644 --- a/apps/bridge-dapp/src/containers/Layout/Layout.tsx +++ b/apps/bridge-dapp/src/containers/Layout/Layout.tsx @@ -3,7 +3,7 @@ import { Banner, Footer, SideBarItemProps, - SideBarFooterProps, + SideBarFooterType, Logo, LogoWithoutName, SideBar, @@ -60,7 +60,7 @@ const items: SideBarItemProps[] = [ }, ]; -const footer: SideBarFooterProps = { +const footer: SideBarFooterType = { name: 'Webb Docs', isInternal: false, href: WEBB_DOCS_URL, diff --git a/apps/hubble-stats/constants/sideBar.ts b/apps/hubble-stats/constants/sideBar.ts index 2dc8376477..74ca964044 100644 --- a/apps/hubble-stats/constants/sideBar.ts +++ b/apps/hubble-stats/constants/sideBar.ts @@ -2,7 +2,7 @@ import { Logo, LogoWithoutName, SideBarItemProps, - SideBarFooterProps, + SideBarFooterType, SidebarProps, } from '@webb-tools/webb-ui-components'; import { ContrastTwoLine, DocumentationIcon, Tangle } from '@webb-tools/icons'; @@ -59,7 +59,7 @@ const sideBarItems: SideBarItemProps[] = [ }, ]; -const sideBarFooter: SideBarFooterProps = { +const sideBarFooter: SideBarFooterType = { name: 'Webb Docs', isInternal: false, href: WEBB_DOCS_URL, diff --git a/libs/webb-ui-components/src/components/SideBar/types.ts b/libs/webb-ui-components/src/components/SideBar/types.ts index ac97f92da8..2f2b9e9c7c 100644 --- a/libs/webb-ui-components/src/components/SideBar/types.ts +++ b/libs/webb-ui-components/src/components/SideBar/types.ts @@ -2,7 +2,7 @@ import { IconBase } from '@webb-tools/icons/types'; import { LogoProps } from '../Logo/types'; -type SideBarFooterType = { +export type SideBarFooterType = { name: string; isInternal: boolean; href: string;