refactor: update column headers and adjust component styles (#1717)

StefChatz · web-flow · commit e783900c61e7 · 2025-12-03T08:40:49.000+01:00
diff --git a/package.json b/package.json
@@ -5,9 +5,9 @@
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",
   "scripts": {
-    "build": "yarn install-charting-library && next build",
+    "build": "pnpm run install-charting-library && next build",
     "dev": "next dev",
-    "lint": "eslint ./src/ && yarn prettier-check",
+    "lint": "eslint ./src/ && pnpm run prettier-check",
     "format": "eslint ./src/ --fix && prettier --write ./src/ ",
     "prettier-check": "prettier --ignore-path .gitignore --check ./src/",
     "start": "next start",
@@ -21,6 +21,8 @@
   },
   "dependencies": {
     "@cosmjs/cosmwasm-stargate": "^0.37.0",
+    "@cosmjs/encoding": "^0.32.0",
+    "@delphi-labs/shuttle": "^4.3.0",
     "@delphi-labs/shuttle-react": "^4.3.0",
     "@keplr-wallet/cosmos": "^0.12.294",
     "@next/eslint-plugin-next": "16.0.5",
@@ -46,6 +48,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "mobx": "^6.15.0",
+    "mobile-detect": "^1.4.5",
     "next": "16.0.5",
     "next-devtools-mcp": "^0.3.5",
     "react": "19.2.0",
@@ -64,15 +67,18 @@
     "swr": "^2.3.6",
     "viem": "^2.40.3",
     "wagmi": "^2.19.1",
+    "@wagmi/core": "^2.19.1",
     "zustand": "5.0.8"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.5",
     "@eslint/compat": "^2.0.0",
+    "@eslint/js": "^9.15.0",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/cli": "^4.1.17",
     "@tailwindcss/postcss": "^4.1.17",
     "@types/debounce-promise": "^3.1.9",
+    "@types/lodash": "^4.17.21",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^24.10.1",
@@ -113,11 +119,9 @@
     "color-name": "1.1.4",
     "is-core-module": "2.13.1",
     "error-ex": "1.3.2",
-    "has-ansi": "5.0.1"
-  },
-  "engines": {
-    "npm": "please-use-yarn",
-    "yarn": ">= 1.19.1"
+    "has-ansi": "5.0.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2"
   },
   "resolutions": {
     "@types/react": "19.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,3 +1,5 @@
+packages:
+  - ./
 onlyBuiltDependencies:
   - '@parcel/watcher'
   - bufferutil
diff --git a/src/components/bank/BankBorrowings.tsx b/src/components/bank/BankBorrowings.tsx
@@ -52,4 +52,3 @@ function Fallback() {
     </div>
   )
 }
-
diff --git a/src/components/borrow/Table/AvailableBorrowingsTable.tsx b/src/components/borrow/Table/AvailableBorrowingsTable.tsx
@@ -1,5 +1,4 @@
-import { Row } from '@tanstack/react-table'
-import { Table as TanstackTable } from '@tanstack/table-core/build/lib/types'
+import { Row, Table as TanstackTable } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
 import { NAME_META } from 'components/borrow/Table/Columns/Name'
diff --git a/src/components/borrow/Table/Columns/BorrowRate.tsx b/src/components/borrow/Table/Columns/BorrowRate.tsx
@@ -3,7 +3,7 @@ import Loading from 'components/common/Loading'
 
 export const BORROW_RATE_META = {
   accessorKey: 'apy.borrow',
-  header: 'Borrow Rate APY',
+  header: 'Borrow APY',
   meta: { className: 'min-w-20' },
 }
 
diff --git a/src/components/borrow/Table/Columns/Chevron.tsx b/src/components/borrow/Table/Columns/Chevron.tsx
@@ -5,7 +5,7 @@ export const CHEVRON_META = {
   enableSorting: false,
   header: '',
   meta: {
-    className: 'w-5',
+    className: 'w-4',
   },
 }
 
@@ -15,7 +15,7 @@ interface Props {
 export default function Chevron(props: Props) {
   return (
     <div className='flex items-center justify-end'>
-      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
+      <div className='w-3'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
     </div>
   )
 }
diff --git a/src/components/borrow/Table/Columns/Name.tsx b/src/components/borrow/Table/Columns/Name.tsx
@@ -17,7 +17,7 @@ export default function Name(props: Props) {
   const { asset } = props.data
   return (
     <div className='flex items-center flex-1 gap-3'>
-      <AssetImage asset={asset} className='w-8 h-8' />
+      <AssetImage asset={asset} className='w-8 h-8 min-w-8 flex-shrink-0' />
       <TitleAndSubCell
         title={asset.symbol}
         sub={props.v1 ? '' : asset.name}
diff --git a/src/components/common/DynamicLineChart/ChartTooltip.tsx b/src/components/common/DynamicLineChart/ChartTooltip.tsx
@@ -20,11 +20,7 @@ export default function CustomTooltip(props: Props) {
 
   if (active && payload && payload.length) {
     return (
-      <div
-        className={classNames(
-          'max-w-80 rounded-lg px-4 py-2 isolate bg-black/5 backdrop-blur',
-        )}
-      >
+      <div className={classNames('max-w-80 rounded-lg px-4 py-2 isolate bg-black/5 backdrop-blur')}>
         <Text size='sm' className='text-white/60'>
           {formatDateLabel(label)}
         </Text>
diff --git a/src/components/common/Grid/ResizableGridLayout.tsx b/src/components/common/Grid/ResizableGridLayout.tsx
@@ -54,11 +54,7 @@ export const ResizableGridLayout: React.FC<ResizableGridLayoutProps> = ({
       }}
     >
       {items.map((item) => (
-        <GridItem
-          key={item.id}
-          gridArea={item.gridArea}
-          backgroundColor={item.backgroundColor}
-        >
+        <GridItem key={item.id} gridArea={item.gridArea} backgroundColor={item.backgroundColor}>
           {item.component}
         </GridItem>
       ))}
diff --git a/src/components/common/Table/BridgeRow.tsx b/src/components/common/Table/BridgeRow.tsx
@@ -18,11 +18,7 @@ interface BridgeRowProps<T> {
   type?: TableType
 }
 
-export function BridgeRow<T>({
-  row,
-  spacingClassName,
-  type,
-}: BridgeRowProps<T>) {
+export function BridgeRow<T>({ row, spacingClassName, type }: BridgeRowProps<T>) {
   const { handleBridgeCompletion } = useHandleBridgeCompletion()
   const rowData = row.original as T & BridgeRowData
 
@@ -33,7 +29,7 @@ export function BridgeRow<T>({
           key={cell.id}
           className={classNames(
             LEFT_ALIGNED_ROWS.includes(cell.column.id) ? 'text-left' : 'text-right',
-            spacingClassName ?? 'px-4 py-2.5',
+            spacingClassName ?? 'px-2.5 py-2.5',
             type &&
               type !== 'strategies' &&
               LEFT_ALIGNED_ROWS.includes(cell.column.id) &&
diff --git a/src/components/common/Table/Row.tsx b/src/components/common/Table/Row.tsx
@@ -58,9 +58,7 @@ export default function Row<T>(props: Props<T>) {
         const allRows = table.getRowModel().rows
         const selectedEvmRows = allRows.filter(
           (r) =>
-            (r.original as RowWithAsset)?.asset?.chainName &&
-            r.getIsSelected() &&
-            r.id !== row.id,
+            (r.original as RowWithAsset)?.asset?.chainName && r.getIsSelected() && r.id !== row.id,
         )
 
         if (selectedEvmRows.length > 0 && !row.getIsSelected()) {
@@ -87,7 +85,7 @@ export default function Row<T>(props: Props<T>) {
   return (
     <>
       {(row.original as RowWithBridgeStatus)?.bridgeStatus ? (
-        <BridgeRow row={row} spacingClassName={spacingClassName} type={type} />
+        <BridgeRow row={row as any} spacingClassName={spacingClassName} type={type} />
       ) : (
         <tr
           key={`${row.id}-row`}
@@ -108,7 +106,7 @@ export default function Row<T>(props: Props<T>) {
                 key={cell.id}
                 className={classNames(
                   LEFT_ALIGNED_ROWS.includes(cell.column.id) ? 'text-left' : 'text-right',
-                  spacingClassName ?? 'px-4 py-2.5',
+                  spacingClassName ?? 'px-2.5 py-2.5',
                   type &&
                     type !== 'strategies' &&
                     LEFT_ALIGNED_ROWS.includes(cell.column.id) &&
diff --git a/src/components/common/assets/AssetCampaignCopy.tsx b/src/components/common/assets/AssetCampaignCopy.tsx
@@ -53,6 +53,22 @@ function AssetCampaignCopy(props: CopyProps) {
   const incentiveCopy = useMemo(() => {
     if (!campaign) return ''
     if (!campaign.enabledOnV1 && isV1) return campaign.v1Tooltip
+
+    if (campaign.id === 'fragments') {
+      if (!amount || amount.isZero()) {
+        return 'Mars Fragments (1x)'
+      }
+
+      const tokenValue = getCoinValue(BNCoin.fromDenomAndBigNumber(asset.denom, amount), assets)
+      const hasDebt = props.hasDebt || (account?.debts && account.debts.length > 0)
+      const activeCollateralMultiplier = campaign?.collateralMultiplier ?? campaign.baseMultiplier
+      const multiplier = hasDebt ? activeCollateralMultiplier : campaign.baseMultiplier
+
+      const campaignPoints = tokenValue.times(multiplier ?? 0).integerValue()
+
+      return `${formatValue(campaignPoints.toString(), { maxDecimals: 2, minDecimals: 2, abbreviated: false })} / day`
+    }
+
     if (!amount || amount.isZero() || campaign.type === 'apy' || !campaign.baseMultiplier)
       return campaign.incentiveCopy
 
diff --git a/src/components/earn/lend/Table/Columns/Chevron.tsx b/src/components/earn/lend/Table/Columns/Chevron.tsx
@@ -5,7 +5,7 @@ export const CHEVRON_META = {
   enableSorting: false,
   header: '',
   meta: {
-    className: 'w-5',
+    className: 'w-4',
   },
 }
 
@@ -15,7 +15,7 @@ interface Props {
 export default function Chevron(props: Props) {
   return (
     <div className='flex items-center justify-end'>
-      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
+      <div className='w-3'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
     </div>
   )
 }
diff --git a/src/components/earn/lend/Table/Columns/Name.tsx b/src/components/earn/lend/Table/Columns/Name.tsx
@@ -53,7 +53,7 @@ export default function Name(props: Props) {
 
   return (
     <div className='flex items-center flex-1 gap-3'>
-      <AssetImage asset={asset} className='w-8 h-8 min-w-8' />
+      <AssetImage asset={asset} className='w-8 h-8 min-w-8 shrink-0' />
       <TitleAndSubCell title={asset.symbol} sub={subContent} className='text-left min-w-15' />
     </div>
   )
diff --git a/src/components/managedVaults/VaultsIntro.tsx b/src/components/managedVaults/VaultsIntro.tsx
@@ -71,9 +71,9 @@ export default function VaultsIntro(props: Props) {
                 trading fees from perpetuals.{' '}
               </>
             )}
-            <span className='text-white'>Community Vaults</span> are managed strategies where
-            vault creators use deposited funds to run trading strategies aiming to generate
-            returns for both themselves and their depositors.
+            <span className='text-white'>Community Vaults</span> are managed strategies where vault
+            creators use deposited funds to run trading strategies aiming to generate returns for
+            both themselves and their depositors.
           </>
         }
       >
@@ -143,4 +143,3 @@ const INFO_ITEMS = [
       'Set your fee structure and withdrawal periods to generate revenue as your vault performs well for investors.',
   },
 ]
-
diff --git a/src/components/v1/Table/deposits/Columns/WithdrawButton.tsx b/src/components/v1/Table/deposits/Columns/WithdrawButton.tsx
@@ -12,10 +12,10 @@ export default function WithdrawButton(props: Props) {
         leftIcon={<ArrowDownLine />}
         color='tertiary'
         onClick={(e) => {
-          useStore.setState({
+          ;(useStore.setState({
             v1DepositAndWithdrawModal: { type: 'withdraw', data: props.data },
           }),
-            e.stopPropagation()
+            e.stopPropagation())
         }}
         text='Withdraw'
         short
diff --git a/src/constants/pages.ts b/src/constants/pages.ts
@@ -1,4 +1,3 @@
-
 export const VAULT_DETAILS_TABS: Tab[] = [
   { page: 'vaults/{vaultId}/details', name: 'Overview' },
   { page: 'vaults/{vaultId}/details', name: 'Performance' },
diff --git a/src/dummy/charting_library/charting_library.cjs.js b/src/dummy/charting_library/charting_library.cjs.js
@@ -101,4 +101,4 @@ const s = class {
 const r =
   !('undefined' == typeof window || !window.navigator || !window.navigator.userAgent) &&
   window.navigator.userAgent.includes('CriOS')
-;(exports.version = o), (exports.widget = s)
+;((exports.version = o), (exports.widget = s))
diff --git a/src/dummy/charting_library/charting_library.d.ts b/src/dummy/charting_library/charting_library.d.ts
@@ -949,8 +949,7 @@ export interface ActionDescriptionWithCallback extends ActionDescription {
   action: (a?: ActionDescription) => void
 }
 export interface ActionOptions
-  extends Partial<OmitActionId<ActionState>>,
-    Pick<ActionState, 'actionId'> {
+  extends Partial<OmitActionId<ActionState>>, Pick<ActionState, 'actionId'> {
   /**
    * A function which will be called when an action should be executed (e.g. when a user clicks on the item).
    */
@@ -4693,8 +4692,9 @@ export interface CorrelationLogIndicatorOverrides {
 /**
  * Options for creating an anchored drawing.
  */
-export interface CreateAnchoredShapeOptions<TOverrides extends object>
-  extends CreateShapeOptionsBase<TOverrides> {
+export interface CreateAnchoredShapeOptions<
+  TOverrides extends object,
+> extends CreateShapeOptionsBase<TOverrides> {
   /**
    * A drawing to create;
    */
@@ -4759,8 +4759,9 @@ export interface CreateHTMLButtonOptions {
 /**
  * Options for creating a multipoint drawing.
  */
-export interface CreateMultipointShapeOptions<TOverrides extends object>
-  extends CreateShapeOptionsBase<TOverrides> {
+export interface CreateMultipointShapeOptions<
+  TOverrides extends object,
+> extends CreateShapeOptionsBase<TOverrides> {
   /**
    * A drawing to create.
    */
@@ -4772,8 +4773,9 @@ export interface CreateMultipointShapeOptions<TOverrides extends object>
 /**
  * Options for creating a drawing.
  */
-export interface CreateShapeOptions<TOverrides extends object>
-  extends CreateShapeOptionsBase<TOverrides> {
+export interface CreateShapeOptions<
+  TOverrides extends object,
+> extends CreateShapeOptionsBase<TOverrides> {
   /**
    * A drawing to create.
    */
@@ -18956,17 +18958,15 @@ export interface StudyBooleanInputInfo extends StudyInputBaseInfo {
  * A description of a border colorer plot.
  */
 export interface StudyCandleBorderColorerPlotInfo
-  extends StudyPalettedPlotInfo,
-    StudyTargetedPlotInfo {
+  extends StudyPalettedPlotInfo, StudyTargetedPlotInfo {
   /** @inheritDoc */
   readonly type: StudyPlotType.CandleBorderColorer
 }
 /**
  * A description of a wick colorer plot.
  */
 export interface StudyCandleWickColorerPlotInfo
-  extends StudyPalettedPlotInfo,
-    StudyTargetedPlotInfo {
+  extends StudyPalettedPlotInfo, StudyTargetedPlotInfo {
   /** @inheritDoc */
   readonly type: StudyPlotType.CandleWickColorer
 }
@@ -25357,11 +25357,10 @@ export interface TradingQuotes {
   /** Whether quotes are can not be shorted */
   isNotShortable?: boolean
 }
-export interface TradingTerminalWidgetOptions
-  extends Omit<
-    ChartingLibraryWidgetOptions,
-    'enabled_features' | 'disabled_features' | 'favorites'
-  > {
+export interface TradingTerminalWidgetOptions extends Omit<
+  ChartingLibraryWidgetOptions,
+  'enabled_features' | 'disabled_features' | 'favorites'
+> {
   /**
    * The array containing names of features that should be disabled by default. `Feature` means part of the functionality of the chart (part of the UI/UX). Supported features are listed in [Featuresets](https://www.tradingview.com/charting-library-docs/latest/customization/Featuresets.md).
    *
diff --git a/src/dummy/charting_library/charting_library.js b/src/dummy/charting_library/charting_library.js
@@ -9,7 +9,7 @@
   function t() {
     return 'CL v27.001 (internal id 3eb6c0e5 @ 2024-02-02T14:43:45.314Z)'
   }
-  'undefined' != typeof window &&
+  ;('undefined' != typeof window &&
     ((window.TradingView = window.TradingView || {}), (window.TradingView.version = t)),
     'undefined' != typeof window &&
       window.navigator &&
@@ -110,5 +110,5 @@
       _create() {}
       _render(e) {}
     }),
-    Object.defineProperty(e, '__esModule', { value: !0 })
+    Object.defineProperty(e, '__esModule', { value: !0 }))
 })
diff --git a/src/dummy/datafeeds/udf/dist/bundle.js b/src/dummy/datafeeds/udf/dist/bundle.js
@@ -71,7 +71,7 @@
     _send(e, s) {}
     _setupWithConfiguration(e) {}
   }
-  ;(e.UDFCompatibleDatafeed = class extends b {
+  ;((e.UDFCompatibleDatafeed = class extends b {
     constructor(e, s = 1e4, t) {
       let r = new (class e {
         constructor(e) {
@@ -93,5 +93,5 @@
       )
     }
   }),
-    Object.defineProperty(e, '__esModule', { value: !0 })
+    Object.defineProperty(e, '__esModule', { value: !0 }))
 })
diff --git a/src/hooks/bridge/useHandleBridgeCompletion.ts b/src/hooks/bridge/useHandleBridgeCompletion.ts
diff --git a/src/pages/api/og/[[...slug]].tsx b/src/pages/api/og/[[...slug]].tsx
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
diff --git a/vercel.json b/vercel.json

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+packages:`
	`2`	`+ - ./`
`1`	`3`	`onlyBuiltDependencies:`
`2`	`4`	`- '@parcel/watcher'`
`3`	`5`	`- bufferutil`
Original file line number	Diff line number	Diff line change
`@@ -52,4 +52,3 @@ function Fallback() {`
`52`	`52`	`</div>`
`53`	`53`	`)`
`54`	`54`	`}`
`55`		`-`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import Loading from 'components/common/Loading'`
`3`	`3`
`4`	`4`	`export const BORROW_RATE_META = {`
`5`	`5`	`accessorKey: 'apy.borrow',`
`6`		`- header: 'Borrow Rate APY',`
	`6`	`+ header: 'Borrow APY',`
`7`	`7`	`meta: { className: 'min-w-20' },`
`8`	`8`	`}`
`9`	`9`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ export const CHEVRON_META = {`
`5`	`5`	`enableSorting: false,`
`6`	`6`	`header: '',`
`7`	`7`	`meta: {`
`8`		`- className: 'w-5',`
	`8`	`+ className: 'w-4',`
`9`	`9`	`},`
`10`	`10`	`}`
`11`	`11`
`@@ -15,7 +15,7 @@ interface Props {`
`15`	`15`	`export default function Chevron(props: Props) {`
`16`	`16`	`return (`
`17`	`17`	`<div className='flex items-center justify-end'>`
`18`		`- <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>`
	`18`	`+ <div className='w-3'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>`
`19`	`19`	`</div>`
`20`	`20`	`)`
`21`	`21`	`}`