fix: balance table

.changeset/cuddly-bears-push.md

@@ -0,0 +1,5 @@
+---
+"@mochi-ui/theme": minor
+---
+
+Fix table header style

apps/mochi-web/components/Profile/ProfileWidget.tsx

@@ -306,11 +306,11 @@ export const ProfileWidget = () => {
                 )}
                 onClick={() => setSelectedChain(chain)}
               >
-                <div>{avatar}</div>
+                {avatar}
                 {isSelected && (
                   <Typography
                     level="h8"
-                    className="duration-500 translate-x-1 animate-in fade-in-0 slide-in-from-left-2"
+                    className="duration-500 animate-in fade-in-0 slide-in-from-left-2"
                   >
                     {name.split(' ')[0]}
                   </Typography>

apps/mochi-web/components/TokenTableList.tsx

@@ -15,6 +15,9 @@ import {
 import { utils as mochiUtils } from '@consolelabs/mochi-formatter'
 import {
   ArrowDownDownColored,
+  ArrowDownLine,
+  ArrowUpDownLine,
+  ArrowUpLine,
   ArrowUpUpColored,
   Bag,
   BagDark,
@@ -23,6 +26,7 @@ import {
 import { Balance } from '~store/wallets'
 import clsx from 'clsx'
 import { useTheme } from '~context/theme'
+import { useCallback, useMemo, useState } from 'react'
 import { TokenAvatar } from './TokenAvatar'
 
 const sortOrder = ['SOL']
@@ -37,6 +41,65 @@ export interface BalanceWithSource extends Balance {
 
 interface Props extends Omit<TableProps<BalanceWithSource>, 'columns'> {}
 
+interface HeaderProps {
+  sort: string
+  setSort: (sort: string) => void
+}
+
+const PriceHeader = (props: {
+  column: { columnDef: ColumnProps<BalanceWithSource> }
+}) => {
+  const { sort, setSort: _setSort } = props.column.columnDef.meta as HeaderProps
+  const icon = useMemo(() => {
+    if (sort === 'price+') return <ArrowUpLine className="w-3 h-3" />
+    if (sort === 'price-') return <ArrowDownLine className="w-3 h-3" />
+    return <ArrowUpDownLine className="w-4 h-4" />
+  }, [sort])
+  const setSort = useCallback(() => {
+    if (sort === 'price+') return _setSort('')
+    if (sort === 'price-') return _setSort('price+')
+    _setSort('price-')
+  }, [_setSort, sort])
+
+  return (
+    <button
+      type="button"
+      className="flex gap-x-1 justify-between items-center focus:outline-none"
+      onClick={setSort}
+    >
+      <span className="uppercase">Price</span>
+      {icon}
+    </button>
+  )
+}
+
+const UsdValueHeader = (props: {
+  column: { columnDef: ColumnProps<BalanceWithSource> }
+}) => {
+  const { sort, setSort: _setSort } = props.column.columnDef.meta as HeaderProps
+  const icon = useMemo(() => {
+    if (sort === 'usd_balance+') return <ArrowUpLine className="w-3 h-3" />
+    if (sort === 'usd_balance-') return <ArrowDownLine className="w-3 h-3" />
+    return <ArrowUpDownLine className="w-4 h-4" />
+  }, [sort])
+  const setSort = useCallback(() => {
+    if (sort === 'usd_balance+') return _setSort('')
+    if (sort === 'usd_balance-') return _setSort('usd_balance+')
+    _setSort('usd_balance-')
+  }, [_setSort, sort])
+
+  return (
+    <button
+      type="button"
+      className="flex gap-x-1 justify-between items-center focus:outline-none"
+      onClick={setSort}
+    >
+      <span className="uppercase">USD Value</span>
+      <div className="w-4 h-4 flex items-center justify-center">{icon}</div>
+    </button>
+  )
+}
+
 const Token: ColumnProps<BalanceWithSource>['cell'] = (props) => (
   <div className="flex items-center space-x-2">
     <TokenAvatar
@@ -85,7 +148,7 @@ const Price: ColumnProps<BalanceWithSource>['cell'] = (props) => {
         <ValueChange trend={trend}>
           <ValueChangeIndicator className="text-text-contrast" />
           <Typography level="h9" color="textContrast">
-            {Number.isNaN(Number(pnl)) ? '0.00' : pnl}%
+            {Number.isNaN(Number(pnl)) || pnl === '' ? '0.00' : pnl}%
           </Typography>
         </ValueChange>
       }
@@ -110,6 +173,8 @@ export const TokenTableList = ({
   ...props
 }: Props) => {
   const { theme } = useTheme()
+  const [sort, setSort] = useState('')
+
   return (
     <ScrollArea className="h-[430px]">
       <ScrollAreaViewport>
@@ -118,12 +183,22 @@ export const TokenTableList = ({
           stickyHeader
           cellClassName={() => '!border-0 !h-10'}
           rowClassName={(record) =>
-            clsx('rounded', {
+            clsx('rounded hover:bg-transparent', {
               'opacity-30 !cursor-not-allowed hover:bg-transparent':
                 record.disabled,
             })
           }
-          data={data.sort((a, b) => {
+          data={[...data].sort((a, b) => {
+            const sortKey = sort.slice(0, -1)
+            const sortDirection = sort.slice(-1) === '+' ? 1 : -1
+
+            if (sortKey === 'price') {
+              return sortDirection * (a.token.price - b.token.price)
+            }
+            if (sortKey === 'usd_balance') {
+              return sortDirection * (a.usd_balance - b.usd_balance)
+            }
+
             const indexA = sortOrder.findIndex(
               (symbol) => symbol === a.token.symbol,
             )
@@ -164,19 +239,22 @@ export const TokenTableList = ({
               width: '45%',
             },
             {
-              header: 'Price',
+              header: PriceHeader,
               accessorKey: 'token.price',
               cell: Price,
               width: '25%',
+              meta: { sort, setSort },
             },
             {
-              header: 'USD Value',
-              accessorKey: 'usd_amount',
+              header: UsdValueHeader,
+              accessorKey: 'usd_balance',
               accessorFn: (row) =>
                 mochiUtils.formatUsdDigit(row.usd_balance || 0),
               width: '30%',
               meta: {
                 align: 'right',
+                sort,
+                setSort,
               },
             },
           ]}

packages/theme/src/components/table.ts

@@ -34,7 +34,7 @@ const tableHeaderClsx = ({
   clsx(
     'relative z-20 whitespace-nowrap py-3 text-xxs font-semibold tracking-tight uppercase min-w-[48px] text-text-tertiary',
     stickyHeader
-      ? 'sticky top-0 bg-background-surface after:absolute after:inset-0 after:h-full after:w-full after:border-b after:border-divider'
+      ? 'sticky top-0 bg-background-surface after:z-[-1] after:absolute after:inset-0 after:h-full after:w-full after:border-b after:border-divider'
       : 'border-b border-divider',
     {
       'px-2': size === 'sm',