Merge branch 'main' of github.com:curvefi/curve-frontend into fix/dex-small-pools

Author: DanielSchiavini

apps/main/src/llamalend/features/market-list/LlamaMarketsTable.tsx

@@ -2,6 +2,7 @@ import lodash from 'lodash'
 import { useMemo, useState } from 'react'
 import { type LlamaMarketsResult } from '@/llamalend/entities/llama-markets'
 import { ChainFilterChip } from '@/llamalend/features/market-list/chips/ChainFilterChip'
+import Button from '@mui/material/Button'
 import { ColumnFiltersState, ExpandedState, useReactTable } from '@tanstack/react-table'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
 import { SMALL_POOL_TVL } from '@ui-kit/features/user-profile/store'
@@ -11,6 +12,7 @@ import type { MigrationOptions } from '@ui-kit/hooks/useStoredState'
 import { t } from '@ui-kit/lib/i18n'
 import { getTableOptions } from '@ui-kit/shared/ui/DataTable/data-table.utils'
 import { DataTable } from '@ui-kit/shared/ui/DataTable/DataTable'
+import { EmptyStateCard } from '@ui-kit/shared/ui/EmptyStateCard'
 import { EmptyStateRow } from '@ui-kit/shared/ui/DataTable/EmptyStateRow'
 import { useColumnFilters } from '@ui-kit/shared/ui/DataTable/hooks/useColumnFilters'
 import { TableFilters } from '@ui-kit/shared/ui/DataTable/TableFilters'
@@ -83,7 +85,17 @@ export const LlamaMarketsTable = ({
     <DataTable
       table={table}
       emptyState={
-        <EmptyStateRow table={table}>{isError ? t`Could not load markets` : t`No markets found`}</EmptyStateRow>
+        <EmptyStateRow table={table}>
+          <EmptyStateCard
+            title={isError ? t`Could not load markets` : t`No markets found`}
+            subtitle={isError ? undefined : t`Try adjusting your filters or search query`}
+            action={
+              <Button size="small" onClick={isError ? onReload : resetFilters}>
+                {isError ? t`Reload` : t`Show All Markets`}
+              </Button>
+            }
+          />
+        </EmptyStateRow>
       }
       expandedPanel={LlamaMarketExpandedPanel}
       shouldStickFirstColumn={Boolean(useIsTablet() && userHasPositions)}

package.json

@@ -57,7 +57,7 @@
     ]
   },
   "resolutions": {
-    "@curvefi/api": "2.68.15",
+    "@curvefi/api": "2.68.16",
     "@eslint/eslintrc": "3.3.1",
     "@eslint/js": "9.39.0",
     "@types/node": "24.10.0",

packages/curve-ui-kit/src/shared/ui/EmptyStateCard.tsx

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import { LlamaIcon } from '@ui-kit/shared/icons/LlamaIcon'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { Spacing, IconSize, MaxWidth } = SizesAndSpaces
+
+export const EmptyStateCard = ({
+  title,
+  subtitle,
+  action,
+}: {
+  title: string
+  subtitle?: string
+  action?: ReactNode
+}) => (
+  <Stack
+    direction="column"
+    gap={Spacing.sm}
+    alignItems="center"
+    justifySelf="center"
+    sx={{ maxWidth: MaxWidth.emptyStateCard }}
+  >
+    <LlamaIcon sx={{ width: IconSize.xxl, height: IconSize.xxl }} />
+    {/* Needed because no gap between the title and subtitle */}
+    <Stack direction="column">
+      <Typography component="span" variant="headingSBold">
+        {title}
+      </Typography>
+      {subtitle && (
+        <Typography component="span" variant="bodyMRegular" color="text.secondary">
+          {subtitle}
+        </Typography>
+      )}
+    </Stack>
+    {action}
+  </Stack>
+)

packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts

@@ -310,6 +310,7 @@ export const SizesAndSpaces = {
     footer: '96rem', // 1536px
     connectWallet: '50rem', // 800px
     actionCard: '29rem', // 464px
+    emptyStateCard: '27.5rem', // 440px
     section: '59.5rem', // 952px
     tooltip: '27.5rem', // 440px
   },

yarn.lock

@@ -710,15 +710,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@curvefi/api@npm:2.68.15":
-  version: 2.68.15
-  resolution: "@curvefi/api@npm:2.68.15"
+"@curvefi/api@npm:2.68.16":
+  version: 2.68.16
+  resolution: "@curvefi/api@npm:2.68.16"
   dependencies:
     "@curvefi/ethcall": "npm:^6.0.16"
     bignumber.js: "npm:^9.3.1"
     ethers: "npm:^6.15.0"
     memoizee: "npm:^0.4.17"
-  checksum: 10c0/d1daafc97954fed7d2f539b9bcbe57749a29e4b76263ff84d041d94d7d6dc004ae47ce7f2d23873786bd7a0c22cc304833c686bf2d444463a77135f95cfc2451
+  checksum: 10c0/b547531b10b343f9df4c9ff38eb37ec389fcdf1723ed79e615480058e4a595b193ac05b9a0334ff85e150cd2db8e5fffd22b163800311537b47e973f5e46b519
   languageName: node
   linkType: hard