tables mobile handling

apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityTable/RebalanceActivityTable.tsx

@@ -1,8 +1,11 @@
 import { type FC, type ReactNode, useMemo, useState } from 'react'
-import { Table, type TableSortedColumn } from '@summerfi/app-earn-ui'
+import { Table, type TableSortedColumn, useMobileCheck } from '@summerfi/app-earn-ui'
 import { type SDKGlobalRebalancesType } from '@summerfi/app-types'
 
-import { rebalancingActivityColumns } from '@/features/rebalance-activity/table/columns'
+import {
+  rebalancingActivityColumns,
+  rebalancingActivityColumnsHiddenOnMobile,
+} from '@/features/rebalance-activity/table/columns'
 import { rebalancingActivityMapper } from '@/features/rebalance-activity/table/mapper'
 
 interface RebalanceActivityTableProps {
@@ -22,19 +25,22 @@ export const RebalanceActivityTable: FC<RebalanceActivityTableProps> = ({
   rowsToDisplay,
 }) => {
   const [sortConfig, setSortConfig] = useState<TableSortedColumn<string>>()
+  const { isMobile } = useMobileCheck()
 
   const rows = useMemo(
     () => rebalancingActivityMapper(rebalancesList, sortConfig),
     [rebalancesList, sortConfig],
   )
 
+  const resolvedHiddenColumns = isMobile ? rebalancingActivityColumnsHiddenOnMobile : hiddenColumns
+
   return (
     <Table
       rows={rows.slice(0, rowsToDisplay)}
       columns={rebalancingActivityColumns}
       customRow={customRow}
       handleSort={(_sortConfig) => setSortConfig(_sortConfig)}
-      hiddenColumns={hiddenColumns}
+      hiddenColumns={resolvedHiddenColumns}
     />
   )
 }

apps/earn-protocol/features/rebalance-activity/table/columns.ts

@@ -30,3 +30,10 @@ export const rebalancingActivityColumns = [
     sortable: false,
   },
 ]
+
+export const rebalancingActivityColumnsHiddenOnMobile = [
+  'amount',
+  'strategy',
+  'timestamp',
+  'provider',
+]

apps/earn-protocol/features/user-activity/components/TopDepositorsTable/TopDepositorsTable.tsx

@@ -1,8 +1,11 @@
 import { type FC, type ReactNode, useMemo, useState } from 'react'
-import { Table, type TableSortedColumn } from '@summerfi/app-earn-ui'
+import { Table, type TableSortedColumn, useMobileCheck } from '@summerfi/app-earn-ui'
 import { type SDKUsersActivityType } from '@summerfi/app-types'
 
-import { topDepositorsColumns } from '@/features/user-activity/table/top-depositors-columns'
+import {
+  topDepositorsColumns,
+  topDepositorsColumnsHiddenOnMobile,
+} from '@/features/user-activity/table/top-depositors-columns'
 import { topDepositorsMapper } from '@/features/user-activity/table/top-depositors-mapper'
 
 interface TopDepositorsTableProps {
@@ -22,19 +25,22 @@ export const TopDepositorsTable: FC<TopDepositorsTableProps> = ({
   rowsToDisplay,
 }) => {
   const [sortConfig, setSortConfig] = useState<TableSortedColumn<string>>()
+  const { isMobile } = useMobileCheck()
 
   const rows = useMemo(
     () => topDepositorsMapper(topDepositorsList, sortConfig),
     [topDepositorsList, sortConfig],
   )
 
+  const resolvedHiddenColumns = isMobile ? topDepositorsColumnsHiddenOnMobile : hiddenColumns
+
   return (
     <Table
       rows={rows.slice(0, rowsToDisplay)}
       columns={topDepositorsColumns}
       customRow={customRow}
       handleSort={(_sortConfig) => setSortConfig(_sortConfig)}
-      hiddenColumns={hiddenColumns}
+      hiddenColumns={resolvedHiddenColumns}
     />
   )
 }

apps/earn-protocol/features/user-activity/components/UserActivityTable/UserActivityTable.tsx

@@ -1,8 +1,11 @@
 import { type FC, type ReactNode, useMemo, useState } from 'react'
-import { Table, type TableSortedColumn } from '@summerfi/app-earn-ui'
+import { Table, type TableSortedColumn, useMobileCheck } from '@summerfi/app-earn-ui'
 import { type UsersActivity } from '@summerfi/app-types'
 
-import { userActivityColumns } from '@/features/user-activity/table/user-activity-columns'
+import {
+  userActivityColumns,
+  userActivityColumnsHiddenOnMobile,
+} from '@/features/user-activity/table/user-activity-columns'
 import { userActivityMapper } from '@/features/user-activity/table/user-activity-mapper'
 
 interface UserActivityTableProps {
@@ -22,19 +25,22 @@ export const UserActivityTable: FC<UserActivityTableProps> = ({
   rowsToDisplay,
 }) => {
   const [sortConfig, setSortConfig] = useState<TableSortedColumn<string>>()
+  const { isMobile } = useMobileCheck()
 
   const rows = useMemo(
     () => userActivityMapper(userActivityList, sortConfig),
     [userActivityList, sortConfig],
   )
 
+  const resolvedHiddenColumns = isMobile ? userActivityColumnsHiddenOnMobile : hiddenColumns
+
   return (
     <Table
       rows={rows.slice(0, rowsToDisplay)}
       columns={userActivityColumns}
       customRow={customRow}
       handleSort={(_sortConfig) => setSortConfig(_sortConfig)}
-      hiddenColumns={hiddenColumns}
+      hiddenColumns={resolvedHiddenColumns}
     />
   )
 }

apps/earn-protocol/features/user-activity/table/top-depositors-columns.ts

@@ -40,3 +40,11 @@ export const topDepositorsColumns = [
     sortable: false,
   },
 ]
+
+export const topDepositorsColumnsHiddenOnMobile = [
+  'strategy',
+  'change7d',
+  'projected1yrEarnings',
+  'numberOfDeposits',
+  'earningsStreak',
+]

apps/earn-protocol/features/user-activity/table/user-activity-columns.ts

@@ -30,3 +30,5 @@ export const userActivityColumns = [
     sortable: false,
   },
 ]
+
+export const userActivityColumnsHiddenOnMobile = ['strategy', 'timestamp', 'balance']

apps/earn-protocol/features/vault-exposure/components/VaultExposureTable/VaultExposureTable.tsx

@@ -1,8 +1,11 @@
 import { type FC, type ReactNode, useMemo, useState } from 'react'
-import { Table, type TableSortedColumn } from '@summerfi/app-earn-ui'
+import { Table, type TableSortedColumn, useMobileCheck } from '@summerfi/app-earn-ui'
 import { type SDKVaultType } from '@summerfi/app-types'
 
-import { vaultExposureColumns } from '@/features/vault-exposure/table/columns'
+import {
+  vaultExposureColumns,
+  vaultExposureColumnsHiddenOnMobile,
+} from '@/features/vault-exposure/table/columns'
 import { vaultExposureMapper } from '@/features/vault-exposure/table/mapper'
 
 interface VaultExposureTableProps {
@@ -22,16 +25,19 @@ export const VaultExposureTable: FC<VaultExposureTableProps> = ({
   rowsToDisplay,
 }) => {
   const [sortConfig, setSortConfig] = useState<TableSortedColumn<string>>()
+  const { isMobile } = useMobileCheck()
 
   const rows = useMemo(() => vaultExposureMapper(vault, sortConfig), [vault, sortConfig])
 
+  const resolvedHiddenColumns = isMobile ? vaultExposureColumnsHiddenOnMobile : hiddenColumns
+
   return (
     <Table
       rows={rows.slice(0, rowsToDisplay)}
       columns={vaultExposureColumns}
       customRow={customRow}
       handleSort={(_sortConfig) => setSortConfig(_sortConfig)}
-      hiddenColumns={hiddenColumns}
+      hiddenColumns={resolvedHiddenColumns}
     />
   )
 }

apps/earn-protocol/features/vault-exposure/table/columns.tsx

@@ -71,3 +71,5 @@ export const vaultExposureColumns = [
     sortable: false,
   },
 ]
+
+export const vaultExposureColumnsHiddenOnMobile = ['liquidity', 'type']

packages/app-earn-ui/src/components/organisms/Table/Table.module.scss

@@ -80,43 +80,3 @@
     }
   }
 }
-
-/* Mobile styles */
-@media (max-width: 768px) {
-  .table {
-    display: block;
-
-    thead {
-      display: none;
-    }
-
-    tbody {
-      display: block;
-      width: 100%;
-
-      tr {
-        border-bottom: 1px solid var(--earn-protocol-neutral-70);
-      }
-    }
-
-    tr {
-      display: block;
-      margin-bottom: 10px;
-    }
-
-    td {
-      display: block;
-      padding: 8px;
-      text-align: left;
-      position: relative;
-
-      &:before {
-        content: attr(data-label);
-        position: absolute;
-        left: 10px;
-        font-weight: bold;
-        text-align: left;
-      }
-    }
-  }
-}

packages/app-earn-ui/src/hooks/use-mobile-check.ts

@@ -0,0 +1,49 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+interface ScreenInfo {
+  isMobile: boolean
+  width: number
+  height: number
+}
+
+/**
+ * Custom hook to check if the screen size is mobile and to track screen width and height.
+ *
+ * @returns An object containing:
+ * - `isMobile`: A boolean indicating if the screen width is 768px or less.
+ * - `width`: The current screen width in pixels.
+ * - `height`: The current screen height in pixels.
+ *
+ * @example
+ * const { isMobile, width, height } = useMobileCheck();
+ * console.log(isMobile); // true if the screen width is 768px or less
+ *
+ * @remarks
+ * - Adds an event listener to `window.resize` to update the screen information on resize.
+ * - Automatically removes the event listener when the component using this hook unmounts.
+ */
+
+export const useMobileCheck = (): ScreenInfo => {
+  const [screenInfo, setScreenInfo] = useState<ScreenInfo>({
+    isMobile: window.innerWidth <= 768,
+    width: window.innerWidth,
+    height: window.innerHeight,
+  })
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenInfo({
+        isMobile: window.innerWidth <= 768,
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return screenInfo
+}

packages/app-earn-ui/src/index.ts

@@ -79,6 +79,7 @@ export { useHash } from './hooks/use-hash'
 export { useOutsideElementClickHandler } from './hooks/use-outside-element-click-handler'
 export { useCurrentUrl } from './hooks/use-current-url'
 export { useQueryParams } from './hooks/use-query-params'
+export { useMobileCheck } from './hooks/use-mobile-check'
 
 export { sidebarFootnote } from './common/sidebar/footnote'
 export { getVaultUrl, getVaultDetailsUrl, getVaultPositionUrl } from './helpers/get-vault-url'