Hubble Responsive (#1466)

tangle-network · Jul 31, 2023 · fb5b3a2 · fb5b3a2
1 parent d3eef2d
commit fb5b3a2
Show file tree

Hide file tree

Showing 39 changed files with 568 additions and 335 deletions.
diff --git 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,
+  SideBarFooterType,
   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: SideBarFooterType = {
   name: 'Webb Docs',
   isInternal: false,
   href: WEBB_DOCS_URL,

diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx
@@ -4,95 +4,26 @@ import {
   WebbUIProvider,
   Footer,
   SideBar,
-  Logo,
-  LogoWithoutName,
-  ItemProps,
-  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: ItemProps[] = [
-    {
-      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 (
     <html lang="en">
       <WebbUIProvider defaultThemeMode="light">
         <body className="h-screen bg-body dark:bg-body_dark bg-cover flex">
-          <SideBar
-            items={items}
-            Logo={Logo}
-            ClosedLogo={LogoWithoutName}
-            logoLink={WEBB_MKT_URL}
-            footer={footer}
-          />
-
-          <main className="flex-1 px-10 overflow-y-auto">
+          <SideBar {...sideBarProps} className="hidden lg:block" />
+          <main className="flex-1 px-3 md:px-5 lg:px-10 overflow-y-auto">
             <Header />
             {children}
-            <Footer isMinimal style={{ background: 'inherit' }} />
+            <Footer isMinimal className="max-w-none" />
           </main>
         </body>
       </WebbUIProvider>

diff --git 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 (
-    <div className="py-4 space-y-8">
+    <div className="py-4 space-y-6">
       <OverviewChartsContainer />
       <KeyMetricsTableContainer />
       <ShieldedTablesContainer />

diff --git a/apps/hubble-stats/app/pool/[slug]/page.tsx b/apps/hubble-stats/app/pool/[slug]/page.tsx
@@ -10,8 +10,8 @@ export default function Pool({ params }: { params: { slug: string } }) {
 
   return (
     <div className="py-4 space-y-8">
-      <div className="flex gap-4">
-        <div className="w-[400px]">
+      <div className="flex flex-col lg:flex-row gap-4">
+        <div className="lg:w-[400px]">
           <PoolOverviewContainer />
         </div>
         <div className="flex-grow"></div>

diff --git 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,18 +24,22 @@ const Header = () => {
   return (
     <div className="flex items-center justify-between pt-6 pb-4">
       {/* Breadcrumbs */}
-      <div>
+      <div className="flex gap-2 items-center">
+        <SideBarMenu {...sideBarProps} className="lg:hidden" />
         <Breadcrumbs>
           <Link href="/">
-            <BreadcrumbsItem icon={<GridFillIcon />} className="ml-0">
+            <BreadcrumbsItem
+              icon={<GridFillIcon />}
+              className="ml-0 bg-[rgba(156,160,176,0.10)] dark:bg-[rgba(255,255,255,0.05)]"
+            >
               Hubble Overview
             </BreadcrumbsItem>
           </Link>
         </Breadcrumbs>
       </div>
 
       {/* TVL and Volume Chips */}
-      <div className="flex items-center gap-4">
+      <div className="hidden md:flex items-center gap-4">
         <VolumeChip
           color="blue"
           Icon={BlockIcon}
@@ -64,7 +71,7 @@ type VolumeChipProps = {
   isLoading?: boolean;
 };
 
-export const VolumeChip: React.FC<VolumeChipProps> = ({
+export const VolumeChip: FC<VolumeChipProps> = ({
   color,
   className,
   Icon,

diff --git a/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx b/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx
@@ -111,6 +111,7 @@ const NetworkPoolTable: FC<NetworkPoolTableProps> = ({
   return (
     <div className="overflow-hidden rounded-lg border border-mono-40 dark:border-mono-160">
       <Table
+        tableClassName="block overflow-x-auto max-w-[-moz-fit-content] md:table md:max-w-none"
         thClassName="border-t-0 bg-mono-0 border-r first:px-3 last:border-r-0 last:pr-2"
         tdClassName="border-r last:border-r-0 first:px-3 last:pr-2"
         tableProps={table as RTTable<unknown>}

diff --git a/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx b/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx
@@ -140,6 +140,7 @@ const NetworkTokenTable: FC<NetworkTokenTableProps> = ({
   return (
     <div className="overflow-hidden rounded-lg border border-mono-40 dark:border-mono-160">
       <Table
+        tableClassName="block overflow-x-auto max-w-[-moz-fit-content] max-w-fit md:table md:max-w-none"
         thClassName="border-t-0 bg-mono-0 border-r first:px-3 last:border-r-0 last:pr-2"
         tdClassName="border-r last:border-r-0 first:px-3 last:pr-2"
         tableProps={table as RTTable<unknown>}

diff --git a/apps/hubble-stats/components/PoolMetadataTable/PoolMetadataTable.tsx b/apps/hubble-stats/components/PoolMetadataTable/PoolMetadataTable.tsx
@@ -75,8 +75,8 @@ const PoolMetadataTable: FC<PoolMetadataTableProps> = ({ data }) => {
   return (
     <div className="overflow-hidden rounded-lg border border-mono-40 dark:border-mono-160">
       <Table
-        thClassName="w-1/2 border-t-0 bg-mono-0 border-r last-of-type:border-r-0"
-        tdClassName="border-r last-of-type:border-r-0"
+        thClassName="w-1/2 border-t-0 bg-mono-0 border-r last-of-type:border-r-0 first:pl-2 last:pr-2"
+        tdClassName="border-r last-of-type:border-r-0 first:pl-2 last:pr-2"
         paginationClassName="bg-mono-0 dark:bg-mono-180 pl-6"
         tableProps={table as RTTable<unknown>}
         totalRecords={data.length}

diff --git a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx
@@ -93,6 +93,7 @@ const PoolTransactionsTable: FC<PoolTransactionsTableProps> = ({
   return (
     <div className="overflow-hidden rounded-lg border border-mono-40 dark:border-mono-160">
       <Table
+        tableClassName="block overflow-x-auto max-w-[-moz-fit-content] max-w-fit max-w-fit md:table md:max-w-none"
         thClassName="border-t-0 bg-mono-0"
         paginationClassName="bg-mono-0 dark:bg-mono-180 pl-6"
         tableProps={table as RTTable<unknown>}

diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx
@@ -64,7 +64,6 @@ const staticColumns: ColumnDef<ShieldedAssetType, any>[] = [
 
 const ShieldedAssetsTable: FC<ShieldedAssetsTableProps> = ({
   data,
-  globalSearchText,
   pageSize,
 }) => {
   const [isDarkMode] = useDarkMode();
@@ -91,9 +90,6 @@ const ShieldedAssetsTable: FC<ShieldedAssetsTableProps> = ({
   const table = useReactTable({
     data,
     columns,
-    state: {
-      globalFilter: globalSearchText,
-    },
     initialState: {
       pagination: {
         pageSize,
@@ -112,6 +108,7 @@ const ShieldedAssetsTable: FC<ShieldedAssetsTableProps> = ({
   return (
     <div className="overflow-hidden rounded-lg bg-mono-0 dark:bg-mono-180 border border-mono-40 dark:border-mono-160">
       <Table
+        tableClassName="block overflow-x-auto max-w-[-moz-fit-content] max-w-fit md:table md:max-w-none"
         thClassName="border-t-0 bg-mono-0"
         paginationClassName="bg-mono-0 dark:bg-mono-180 pl-6"
         tableProps={table as RTTable<unknown>}

diff --git 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
@@ -39,9 +39,7 @@ const columns: ColumnDef<ShieldedPoolType, any>[] = [
   }),
   columnHelper.accessor('token', {
     header: () => <HeaderCell title="Token #" className="justify-end" />,
-    cell: (props) => (
-      <NumberCell value={props.getValue()} className="text-right" />
-    ),
+    cell: (props) => <NumberCell value={props.getValue()} />,
   }),
   columnHelper.accessor('deposits24h', {
     header: () => <HeaderCell title="24H Deposits" />,
@@ -65,15 +63,11 @@ const columns: ColumnDef<ShieldedPoolType, any>[] = [
 
 const ShieldedPoolsTable: FC<ShieldedPoolsTableProps> = ({
   data,
-  globalSearchText,
   pageSize,
 }) => {
   const table = useReactTable({
     data,
     columns,
-    state: {
-      globalFilter: globalSearchText,
-    },
     initialState: {
       pagination: {
         pageSize,
@@ -92,6 +86,7 @@ const ShieldedPoolsTable: FC<ShieldedPoolsTableProps> = ({
   return (
     <div className="overflow-hidden rounded-lg bg-mono-0 dark:bg-mono-180 border border-mono-40 dark:border-mono-160">
       <Table
+        tableClassName="block overflow-x-auto max-w-[-moz-fit-content] max-w-fit md:table md:max-w-none"
         thClassName="border-t-0 bg-mono-0"
         paginationClassName="bg-mono-0 dark:bg-mono-180 pl-6"
         tableProps={table as RTTable<unknown>}

diff --git 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
@@ -11,7 +11,7 @@ const HeaderCell: FC<HeaderCellProps> = ({ 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/constants/index.ts b/apps/hubble-stats/constants/index.ts
@@ -0,0 +1 @@
+export { default as sideBarProps } from './sideBar';