feat: llamalend breakpoint improvements

apps/main/src/dao/components/ComboBoxSelectGauge/index.tsx

@@ -9,8 +9,8 @@ import { useUserGaugeWeightVotesQuery } from '@/dao/entities/user-gauge-weight-v
 import useStore from '@/dao/store/useStore'
 import { GaugeFormattedData } from '@/dao/types/dao.types'
 import { delayAction } from '@/dao/utils'
-import useMediaQuery from '@mui/material/useMediaQuery'
 import ModalDialog from '@ui/Dialog'
+import { useIsMobile } from '@ui-kit/hooks/useBreakpoints'
 import { t } from '@ui-kit/lib/i18n'
 import { Chain } from '@ui-kit/utils/network'
 
@@ -35,7 +35,7 @@ const ComboBoxGauges = ({
   const setSelectedGauge = useStore((state) => state.gauges.setSelectedGauge)
   const setStateByKey = useStore((state) => state.gauges.setStateByKey)
   const gaugeMapper = useStore((state) => state.gauges.gaugeMapper)
-  const isMobile = useMediaQuery((t) => t.breakpoints.down('tablet'))
+  const isMobile = useIsMobile()
 
   const { data: userGaugeWeightVotes } = useUserGaugeWeightVotesQuery({
     chainId: Chain.Ethereum, // DAO is only used on mainnet

apps/main/src/dex/components/PageCreatePool/ConfirmModal/ModalDialog.tsx

@@ -4,12 +4,12 @@ import type { AriaOverlayProps } from 'react-aria'
 import type { OverlayTriggerState } from 'react-stately'
 import styled from 'styled-components'
 import useStore from '@/dex/store/useStore'
-import useMediaQuery from '@mui/material/useMediaQuery'
 import type { AriaDialogProps } from '@react-types/dialog'
 import Box from '@ui/Box'
 import Icon from '@ui/Icon'
 import IconButton from '@ui/IconButton'
 import { breakpoints } from '@ui/utils/responsive'
+import { useIsMobile } from '@ui-kit/hooks/useBreakpoints'
 
 interface Props extends AriaOverlayProps, AriaDialogProps {
   footerContent?: ReactNode
@@ -38,7 +38,7 @@ const ModalDialog = ({
   const { titleProps } = useDialog(props, modalRef)
   usePreventScroll({ isDisabled: false }) // prevent scrolling while modal is open
 
-  const isMobile = useMediaQuery((t) => t.breakpoints.down('tablet'))
+  const isMobile = useIsMobile()
   const isSmUp = useStore((state) => state.isSmUp)
 
   const { buttonProps: closeButtonProps } = useButton(

apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx

@@ -5,7 +5,6 @@ import { CreateToken } from '@/dex/components/PageCreatePool/types'
 import useStore from '@/dex/store/useStore'
 import { ChainId, CurveApi } from '@/dex/types/main.types'
 import { delayAction } from '@/dex/utils'
-import useMediaQuery from '@mui/material/useMediaQuery'
 import { useButton } from '@react-aria/button'
 import { useFilter } from '@react-aria/i18n'
 import { useOverlayTriggerState } from '@react-stately/overlays'
@@ -15,6 +14,7 @@ import Checkbox from '@ui/Checkbox'
 import Spinner, { SpinnerWrapper } from '@ui/Spinner'
 import { Chip } from '@ui/Typography'
 import { TokenSelectorModal } from '@ui-kit/features/select-token/ui/modal/TokenSelectorModal'
+import { useIsMobile } from '@ui-kit/hooks/useBreakpoints'
 import { t } from '@ui-kit/lib/i18n'
 import { TokenIcon } from '@ui-kit/shared/ui/TokenIcon'
 import { type Address, filterTokens, shortenAddress } from '@ui-kit/utils'
@@ -46,7 +46,7 @@ const SelectTokenButton = ({
   const { buttonProps: openButtonProps } = useButton({ onPress: () => overlayTriggerState.open() }, openButtonRef)
   const { endsWith } = useFilter({ sensitivity: 'base' })
 
-  const isMobile = useMediaQuery((t) => t.breakpoints.down('tablet'))
+  const isMobile = useIsMobile()
   const nativeToken = useStore((state) => state.networks.nativeToken[chainId])
 
   const userAddedTokens = useStore((state) => state.createPool.userAddedTokens)

apps/main/src/dex/components/PoolLabel.tsx

@@ -7,11 +7,11 @@ import usePoolAlert from '@/dex/hooks/usePoolAlert'
 import useTokenAlert from '@/dex/hooks/useTokenAlert'
 import useStore from '@/dex/store/useStore'
 import { PoolData, PoolDataCache } from '@/dex/types/main.types'
-import useMediaQuery from '@mui/material/useMediaQuery'
 import AlertBox from '@ui/AlertBox'
 import Box from '@ui/Box'
 import { TooltipAlert as AlertTooltipIcon } from '@ui/Tooltip'
 import { Chip } from '@ui/Typography'
+import { useIsMobile } from '@ui-kit/hooks/useBreakpoints'
 import { TokenIcons } from '@ui-kit/shared/ui/TokenIcons'
 
 type PoolListProps = {
@@ -43,7 +43,7 @@ const PoolLabel = ({ className = '', blockchainId, isVisible = true, poolData, p
 
   const poolAlert = usePoolAlert(poolData?.pool.address, poolData?.hasVyperVulnerability)
   const tokenAlert = useTokenAlert(poolData?.tokenAddressesAll ?? [])
-  const isMobile = useMediaQuery((t) => t.breakpoints.down('tablet'))
+  const isMobile = useIsMobile()
   const searchedTerms = useStore((state) => state.poolList.searchedTerms)
 
   const { quickViewValue, onClick } = poolListProps ?? {}

apps/main/src/loan/components/PageLlamaMarkets/LendingMarketsTable.tsx

@@ -10,16 +10,17 @@ import { LendingMarketsFilters } from '@/loan/components/PageLlamaMarkets/Lendin
 import { LlamaMarketExpandedPanel } from '@/loan/components/PageLlamaMarkets/LlamaMarketExpandedPanel'
 import { MarketsFilterChips } from '@/loan/components/PageLlamaMarkets/MarketsFilterChips'
 import { type LlamaMarketsResult } from '@/loan/entities/llama-markets'
-import { useMediaQuery } from '@mui/material'
 import Stack from '@mui/material/Stack'
 import {
   ExpandedState,
   getCoreRowModel,
   getExpandedRowModel,
   getFilteredRowModel,
   getSortedRowModel,
+  SortingState,
   useReactTable,
 } from '@tanstack/react-table'
+import { useIsMobile, useIsTablet } from '@ui-kit/hooks/useBreakpoints'
 import { useSortFromQueryString } from '@ui-kit/hooks/useSortFromQueryString'
 import { t } from '@ui-kit/lib/i18n'
 import { DataTable } from '@ui-kit/shared/ui/DataTable'
@@ -28,19 +29,19 @@ import { TableFilters, useColumnFilters } from '@ui-kit/shared/ui/DataTable/Tabl
 import { useVisibilitySettings } from '@ui-kit/shared/ui/DataTable/TableVisibilitySettingsPopover'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
-const { Spacing, MaxWidth, Sizing } = SizesAndSpaces
+const { Spacing, MaxWidth } = SizesAndSpaces
 
 /**
  * Hook to manage the visibility of columns in the Llama Markets table.
  * The visibility on mobile is based on the sort field.
  * On larger devices, it uses the visibility settings that may be customized by the user.
  */
-const useVisibility = (sortField: LlamaMarketColumnId, hasPositions: boolean | undefined) => {
-  const isMobile = useMediaQuery((t) => t.breakpoints.down('tablet'))
+const useVisibility = (sorting: SortingState, hasPositions: boolean | undefined) => {
+  const sortField = (sorting.length ? sorting : DEFAULT_SORT)[0].id as LlamaMarketColumnId
   const groups = useMemo(() => createLlamaMarketsColumnOptions(hasPositions), [hasPositions])
-  const visibilitySettings = useVisibilitySettings(groups)
+  const visibilitySettings = useVisibilitySettings(groups, LLAMA_MARKET_COLUMNS)
   const columnVisibility = useMemo(() => createLlamaMarketsMobileColumns(sortField), [sortField])
-  return { ...visibilitySettings, ...(isMobile && { columnVisibility }) }
+  return { sortField, ...visibilitySettings, ...(useIsMobile() && { columnVisibility }) }
 }
 
 // todo: rename to LlamaMarketsTable
@@ -62,8 +63,7 @@ export const LendingMarketsTable = ({
     { id: LlamaMarketColumnId.LiquidityUsd, value: [minLiquidity, undefined] },
   ])
   const [sorting, onSortingChange] = useSortFromQueryString(DEFAULT_SORT)
-  const sortField = (sorting.length ? sorting : DEFAULT_SORT)[0].id as LlamaMarketColumnId
-  const { columnSettings, columnVisibility, toggleVisibility } = useVisibility(sortField, result?.hasPositions)
+  const { columnSettings, columnVisibility, toggleVisibility, sortField } = useVisibility(sorting, result?.hasPositions)
   const [expanded, setExpanded] = useState<ExpandedState>({})
   const table = useReactTable({
     columns: LLAMA_MARKET_COLUMNS,
@@ -89,9 +89,9 @@ export const LendingMarketsTable = ({
       <DataTable
         table={table}
         headerHeight={headerHeight}
-        rowSx={{ height: { ...Sizing['3xl'], mobile: 77 } }} // the 3xl is too small in mobile (64px)
         emptyText={isError ? t`Could not load markets` : t`No markets found`}
         expandedPanel={LlamaMarketExpandedPanel}
+        shouldStickFirstColumn={useIsTablet() && !!hasPositions}
       >
         <TableFilters<LlamaMarketColumnId>
           title={t`Llamalend Markets`}

apps/main/src/loan/components/PageLlamaMarkets/LlamaMarketExpandedPanel.tsx

@@ -1,67 +1,113 @@
 import Link from 'next/link'
+import { useMemo } from 'react'
 import { LineGraphCell } from '@/loan/components/PageLlamaMarkets/cells'
 import { LlamaMarketColumnId } from '@/loan/components/PageLlamaMarkets/columns.enum'
 import { FavoriteMarketButton } from '@/loan/components/PageLlamaMarkets/FavoriteMarketButton'
 import { useUserMarketStats } from '@/loan/entities/llama-market-stats'
+import useStore from '@/loan/store/useStore'
+import { ArrowRight } from '@carbon/icons-react'
 import Button from '@mui/material/Button'
+import CardHeader from '@mui/material/CardHeader'
+import Grid from '@mui/material/Grid2'
 import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import { useIsTiny } from '@ui-kit/hooks/useBreakpoints'
 import { t } from '@ui-kit/lib/i18n'
 import { CopyIconButton } from '@ui-kit/shared/ui/CopyIconButton'
-import { ExpansionPanelSection } from '@ui-kit/shared/ui/DataTable/ExpansionPanelSection'
 import { type ExpandedPanel } from '@ui-kit/shared/ui/DataTable/ExpansionRow'
 import { Metric } from '@ui-kit/shared/ui/Metric'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import type { LlamaMarket } from '../../entities/llama-markets'
 
+const { Spacing } = SizesAndSpaces
+
+function useMobileGraphSize() {
+  const pageWidth = useStore((state) => state.layout.windowWidth)
+  const isTiny = useIsTiny()
+  return useMemo(() => ({ width: pageWidth ? pageWidth - (isTiny ? 20 : 40) : 300, height: 48 }), [pageWidth, isTiny])
+}
+
 export const LlamaMarketExpandedPanel: ExpandedPanel<LlamaMarket> = ({ row: { original: market } }) => {
   const { data: earnings, error: earningsError } = useUserMarketStats(market, LlamaMarketColumnId.UserEarnings)
   const { data: deposited, error: depositedError } = useUserMarketStats(market, LlamaMarketColumnId.UserDeposited)
+  const { leverage, utilizationPercent, liquidityUsd, userHasPosition, url, address, rates } = market
+  const graphSize = useMobileGraphSize()
   return (
     <>
-      <ExpansionPanelSection
-        title={
-          <Stack direction="row" gap={2}>
-            {t`Market Details`}
-            <CopyIconButton
-              label={t`Copy market address`}
-              copyText={market.address}
-              confirmationText={t`Market address copied`}
-              data-testid={`copy-market-address-${market.address}`}
-            />
-            <FavoriteMarketButton address={market.address} />
-          </Stack>
-        }
-      >
-        <Metric label={t`7D Avg Borrow Rate`} value={market.rates.borrow} unit="percentage" />
-        <LineGraphCell market={market} type="borrow" />
-        {market.rates.lend && (
-          <>
-            <Metric label={t`7D Avg Supply Rate`} value={market.rates.lend} unit="percentage" />
-            <LineGraphCell market={market} type="lend" />
-          </>
+      <Grid container spacing={Spacing.md}>
+        <Grid size={12}>
+          <CardHeader
+            title={
+              <Stack direction="row" gap={2} justifyContent="space-between">
+                {t`Market Details`}
+                <Stack direction="row">
+                  <CopyIconButton
+                    label={t`Copy market address`}
+                    copyText={address}
+                    confirmationText={t`Market address copied`}
+                    data-testid={`copy-market-address-${address}`}
+                  />
+                  <FavoriteMarketButton address={address} />
+                </Stack>
+              </Stack>
+            }
+            sx={{ paddingInline: 0 }}
+          ></CardHeader>
+        </Grid>
+        <Grid size={6}>
+          <Metric label={t`7D Avg Borrow Rate`} value={rates.borrow} unit="percentage" />
+        </Grid>
+        {leverage > 0 && (
+          <Grid size={6}>
+            <Metric label={t`Leverage 🔥`} value={leverage} unit="multiplier" />
+          </Grid>
         )}
-        <Metric label={t`Available Liquidity`} value={market.liquidityUsd} unit="dollar" />
-        <Metric
-          label={t`Utilization`}
-          value={market.utilizationPercent}
-          unit="percentage"
-          testId="metric-utilizationPercent"
-          decimals={2}
-        />
-      </ExpansionPanelSection>
-      {market.userHasPosition && (
-        <ExpansionPanelSection title={t`Your Position`}>
-          {earnings?.earnings != null && <Metric label={t`Earnings`} value={earnings.earnings} unit="dollar" />}
+        <Grid size={6}>
+          <Metric
+            label={t`Utilization`}
+            value={utilizationPercent}
+            unit="percentage"
+            testId="metric-utilizationPercent"
+            decimals={2}
+          />
+        </Grid>
+        <Grid size={6}>
+          <Metric label={t`Available Liquidity`} value={liquidityUsd} unit="dollar" />
+        </Grid>
+        <Grid size={12} data-testid="llama-market-graph">
+          <Stack direction="column" alignItems="center">
+            <Typography variant="bodyXsRegular" color="textTertiary" alignSelf="start">
+              {t`7D Rate Chart`}
+            </Typography>
+
+            <LineGraphCell market={market} type="borrow" graphSize={graphSize} />
+          </Stack>
+        </Grid>
+      </Grid>
+      {userHasPosition && (
+        <Grid container spacing={Spacing.md}>
+          <Grid size={12}>
+            <CardHeader title={t`Your Position`} sx={{ paddingInline: 0 }}></CardHeader>
+          </Grid>
+          {earnings?.earnings != null && (
+            <Grid size={6}>
+              <Metric label={t`Earnings`} value={earnings.earnings} unit="dollar" />
+            </Grid>
+          )}
           {deposited?.deposited != null && (
-            <Metric label={t`Supplied Amount`} value={deposited.deposited} unit="dollar" />
+            <Grid size={6}>
+              <Metric label={t`Supplied Amount`} value={deposited.deposited} unit="dollar" />
+            </Grid>
           )}
-        </ExpansionPanelSection>
+        </Grid>
       )}
       <Button
         sx={{ flexGrow: 1, borderBlock: (t) => `1px solid ${t.design.Layer[1].Outline}` }}
         component={Link}
-        href={market.url}
+        href={url}
         color="ghost"
         data-testid="llama-market-go-to-market"
+        endIcon={<ArrowRight />}
       >
         {t`Go To Market`}
       </Button>

apps/main/src/loan/components/PageLlamaMarkets/MarketsFilterChips.tsx

@@ -8,7 +8,7 @@ import PersonIcon from '@mui/icons-material/Person'
 import Grid from '@mui/material/Grid2'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
-import useMediaQuery from '@mui/material/useMediaQuery'
+import { useIsMobile } from '@ui-kit/hooks/useBreakpoints'
 import { t } from '@ui-kit/lib/i18n'
 import { HeartIcon } from '@ui-kit/shared/icons/HeartIcon'
 import { PointsIcon } from '@ui-kit/shared/icons/PointsIcon'
@@ -83,8 +83,6 @@ export const MarketsFilterChips = ({
   const [rewards, toggleRewards] = useToggleFilter(LlamaMarketColumnId.Rewards, props)
   const [marketTypes, toggleMarkets] = useMarketTypeFilter(props)
   const { address } = useAccount()
-  const isMobile = useMediaQuery((t) => t.breakpoints.down('tablet'))
-
   return (
     <Grid
       container
@@ -133,7 +131,7 @@ export const MarketsFilterChips = ({
         {...(address && { size: 12 })}
         extraMargin
       />
-      <GridItem {...(!isMobile && { alignRight: true })}>
+      <GridItem {...(!useIsMobile() && { alignRight: true })}>
         <Stack direction="column">
           <Typography variant="bodyXsRegular">{t`Hidden Markets`}</Typography>
           <Typography variant="highlightS">{hiddenMarketCount}</Typography>

apps/main/src/loan/components/PageLlamaMarkets/Page.tsx

@@ -18,6 +18,7 @@ import Box from '@mui/material/Box'
 import Skeleton from '@mui/material/Skeleton'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
 import { SMALL_POOL_TVL } from '@ui-kit/features/user-profile/store'
+import { useIsTiny } from '@ui-kit/hooks/useBreakpoints'
 import { logSuccess } from '@ui-kit/lib'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import { Address } from '@ui-kit/utils'
@@ -72,7 +73,7 @@ export const LlamaMarketsPage = (props: CrvUsdServerData) => {
   const headerHeight = useHeaderHeight(bannerHeight)
   const showSkeleton = !data && (!isError || isLoading) // on initial render isLoading is still false
   return (
-    <Box sx={{ marginBlockEnd: Spacing.xxl, marginInline: Spacing.md }}>
+    <Box sx={{ marginBlockEnd: Spacing.xxl, ...(!useIsTiny() && { marginInline: Spacing.md }) }}>
       {showSkeleton ? (
         <Skeleton variant="rectangular" width={MaxWidth.table} height={ModalHeight.md.height} />
       ) : (

apps/main/src/loan/components/PageLlamaMarkets/cells/LineGraphCell.tsx

@@ -10,7 +10,7 @@ import { t } from '@ui-kit/lib/i18n'
 import { DesignSystem } from '@ui-kit/themes/design'
 import { RateType, useSnapshots } from '../hooks/useSnapshots'
 
-const graphSize = { width: 172, height: 48 }
+const defaultGraphSize = { width: 100, height: 48 }
 
 /**
  * Get the color for the line graph. Will be green if the last value is higher than the first, red if lower, and blue if equal.
@@ -33,12 +33,13 @@ const calculateDomain =
 type RateCellProps = {
   market: LlamaMarket
   type: RateType
+  graphSize?: typeof defaultGraphSize
 }
 
 /**
  * Line graph cell that displays the average historical APY for a vault and a given type (borrow or lend).
  */
-export const LineGraphCell = ({ market, type }: RateCellProps) => {
+export const LineGraphCell = ({ market, type, graphSize = defaultGraphSize }: RateCellProps) => {
   const ref = useRef<HTMLDivElement>(null)
   const entry = useIntersectionObserver(ref, { freezeOnceVisible: true })
   const { snapshots, snapshotKey, isLoading, rate, error } = useSnapshots(market, type, entry?.isIntersecting)