refactor: update column headers and adjust component styles

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",

pnpm-workspace.yaml

@@ -1,3 +1,5 @@
+packages:
+  - ./
 onlyBuiltDependencies:
   - '@parcel/watcher'
   - bufferutil

src/components/bank/BankBorrowings.tsx

@@ -52,4 +52,3 @@ function Fallback() {
     </div>
   )
 }
-

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'

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' },
 }
 

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>
   )
 }

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}

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>

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>
       ))}

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) &&

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) &&

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
 

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>
   )
 }

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 flex-shrink-0' />
       <TitleAndSubCell title={asset.symbol} sub={subContent} className='text-left min-w-15' />
     </div>
   )

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.',
   },
 ]
-

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

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' },

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))

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).
    *

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 }))
 })

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 }))
 })