Merge branch 'develop' of https://github.com/mars-protocol/mars-v2-frontend into develop

linkielink · linkielink · commit 84aefe6a0012 · 2025-10-21T16:52:39.000+02:00
diff --git a/src/components/Modals/AccountAssetsModal.tsx b/src/components/Modals/AccountAssetsModal.tsx
@@ -47,9 +47,9 @@ export default function AccountAssetsModal() {
       onClose={closeModal}
       header={`Select assets to repay ${debtAsset.symbol} debt`}
       modalClassName='max-w-modal-lg'
-      headerClassName=' border-b-white/5 border-b items-center p-4'
+      headerClassName='border-b-white/5 border-b items-center p-4'
     >
-      <div className='px-4 py-3 border-b border-white/5 '>
+      <div className='px-4 py-3 border-b border-white/5'>
         <SearchBar
           value={searchString}
           placeholder={`Search for e.g. "ATOM" or "Cosmos"`}
diff --git a/src/components/Modals/AddFarmAssets/AddFarmAssetsModalContent.tsx b/src/components/Modals/AddFarmAssets/AddFarmAssetsModalContent.tsx
@@ -77,7 +77,7 @@ export default function AddFarmAssetsModalContent(props: Props) {
 
   return (
     <>
-      <div className='px-4 py-3 border-b border-white/5 '>
+      <div className='px-4 py-3 border-b border-white/5'>
         <SearchBar
           value={searchString}
           placeholder={`Search for e.g. "ATOM" or "Cosmos"`}
diff --git a/src/components/Modals/AddFarmAssets/index.tsx b/src/components/Modals/AddFarmAssets/index.tsx
@@ -28,7 +28,7 @@ export default function AddFarmBorrowAssetsModal() {
       header={<Text>Add Assets</Text>}
       onClose={onClose}
       modalClassName='max-w-modal-xs'
-      headerClassName=' border-b-white/5 border-b items-center p-4'
+      headerClassName='border-b-white/5 border-b items-center p-4'
     >
       {modal ? (
         <AddFarmAssetsModalContent
diff --git a/src/components/Modals/Farm/FarmDeposits.tsx b/src/components/Modals/Farm/FarmDeposits.tsx
@@ -232,7 +232,7 @@ export default function FarmDeposits(props: Props) {
             strokeClass='hsl(2, 100%, 69%)'
             strokeWidth={3}
           />
-          <div className='h-full w-[1px] rounded-xl '></div>
+          <div className='h-full w-[1px] rounded-xl bg-surface-light' />
           <Gauge
             percentage={secondaryValuePercentage}
             tooltip={`${secondaryValuePercentage}% of value is ${secondaryAsset.symbol}`}
diff --git a/src/components/Modals/Farm/FarmModalContentHeader.tsx b/src/components/Modals/Farm/FarmModalContentHeader.tsx
@@ -87,11 +87,11 @@ export default function FarmModalContentHeader(props: Props) {
           }
           sub={'Deposit APY'}
         />
-        <div className='h-100 w-[1px] '></div>
+        <div className='h-100 w-[1px] bg-surface-light' />
         {!deposited.amount.isZero() && (
           <>
             <TitleAndSubCell title={<DisplayCurrency coin={deposited} />} sub={'Deposited'} />
-            <div className='h-100 w-[1px] '></div>
+            <div className='h-100 w-[1px] bg-surface-light' />
           </>
         )}
         {farm.cap && (
diff --git a/src/components/Modals/LendAndReclaim/DetailsHeader.tsx b/src/components/Modals/LendAndReclaim/DetailsHeader.tsx
@@ -31,7 +31,7 @@ function DetailsHeader({ data }: Props) {
             }
             sub={'APY'}
           />
-          <div className='h-100 w-[1px] '></div>
+          <div className='h-100 w-[1px] bg-surface-light' />
         </>
       )}
       {accountLentAmount && (
@@ -44,7 +44,7 @@ function DetailsHeader({ data }: Props) {
             }
             sub={'Deposited'}
           />
-          <div className='h-100 w-[1px] '></div>
+          <div className='h-100 w-[1px] bg-surface-light' />
         </>
       )}
       {balanceInWallet && (
@@ -53,7 +53,7 @@ function DetailsHeader({ data }: Props) {
             title={<DisplayCurrency coin={new BNCoin(balanceInWallet)} />}
             sub={'In Wallet'}
           />
-          <div className='h-100 w-[1px] '></div>
+          <div className='h-100 w-[1px] bg-surface-light' />
         </>
       )}
       <TitleAndSubCell
diff --git a/src/components/Modals/MarsStakingModal.tsx b/src/components/Modals/MarsStakingModal.tsx
@@ -205,7 +205,7 @@ export default function MarsStakingModal() {
           ]}
           selected={modalType}
           onChange={(v) => handleModeChange(v as 'stake' | 'unstake')}
-          className=' rounded-lg'
+          className='rounded-lg'
         />
 
         <div className='space-y-2'>
diff --git a/src/components/Modals/Settings/index.tsx b/src/components/Modals/Settings/index.tsx
@@ -458,7 +458,7 @@ export default function SettingsModal() {
           onClick={() => inputRef?.current?.focus()}
           color='secondary'
           variant='rounded'
-          className={classNames('w-16', !slippages.includes(slippage) && '')}
+          className='w-16'
         >
           <NumberInput
             asset={{ decimals: 0, symbol: '%' }}
diff --git a/src/components/Modals/VaultAssets/VaultAssetsModalContent.tsx b/src/components/Modals/VaultAssets/VaultAssetsModalContent.tsx
@@ -33,7 +33,7 @@ export default function VaultAssetsModalContent(props: Props) {
 
   return (
     <>
-      <div className='px-4 py-3 border-b border-white/5 '>
+      <div className='px-4 py-3 border-b border-white/5'>
         <SearchBar
           value={searchString}
           placeholder={`Search for e.g. "ATOM" or "Cosmos"`}
diff --git a/src/components/Modals/VaultAssets/index.tsx b/src/components/Modals/VaultAssets/index.tsx
@@ -27,7 +27,7 @@ export default function VaultAssetsModal() {
       header={<Text>Vault Assets</Text>}
       onClose={onClose}
       modalClassName='max-w-modal-lg'
-      headerClassName=' border-b-white/5 border-b items-center p-4'
+      headerClassName='border-b-white/5 border-b items-center p-4'
       dialogId='wallet-assets-modal'
     >
       <VaultAssetsModalContent
diff --git a/src/components/Modals/WalletAssets/WalletAssetsModalContent.tsx b/src/components/Modals/WalletAssets/WalletAssetsModalContent.tsx
@@ -95,7 +95,7 @@ export default function WalletAssetsModalContent(props: Props) {
 
   return (
     <>
-      <div className='px-4 py-3 border-b border-white/5 '>
+      <div className='px-4 py-3 border-b border-white/5'>
         <SearchBar
           value={searchString}
           placeholder={`Search for e.g. "ATOM" or "Cosmos"`}
diff --git a/src/components/Modals/WalletAssets/index.tsx b/src/components/Modals/WalletAssets/index.tsx
@@ -23,7 +23,7 @@ export default function WalletAssetsModal() {
       header={<Text>Your wallet</Text>}
       onClose={onClose}
       modalClassName='max-w-modal-lg'
-      headerClassName=' border-b-white/5 border-b items-center p-4'
+      headerClassName='border-b-white/5 border-b items-center p-4'
       dialogId='wallet-assets-modal'
     >
       <WalletAssetsModalContent onChangeDenoms={setSelectedDenoms} />
diff --git a/src/components/Modals/v1/Borrow.tsx b/src/components/Modals/v1/Borrow.tsx
@@ -101,7 +101,7 @@ export default function Borrow(props: Props) {
         <TitleAndSubCell title={formatPercent(apy)} sub={'Borrow Rate APY'} />
         {accountDebt.isGreaterThan(0) && (
           <>
-            <div className='h-100 w-[1px] ' />
+            <div className='h-100 w-[1px] bg-surface-light' />
             <div className='flex flex-col gap-0.5'>
               <div className='flex gap-2'>
                 <FormattedNumber
@@ -125,7 +125,7 @@ export default function Borrow(props: Props) {
             </div>
           </>
         )}
-        <div className='h-100 w-[1px] ' />
+        <div className='h-100 w-[1px] bg-surface-light' />
         <div className='flex flex-col gap-0.5'>
           <div className='flex gap-2'>
             <FormattedNumber
diff --git a/src/components/account/AccountDetails/index.tsx b/src/components/account/AccountDetails/index.tsx
@@ -232,7 +232,7 @@ function AccountDetails(props: Props) {
             <div
               className={classNames(
                 'absolute inset-0 -z-1',
-                'before:content-[""] before:transition-opacity before:-z-1 before:absolute before:left-0 before:h-full before:w-full before: before:border-t before:border-white/10',
+                'before:content-[""] before:transition-opacity before:-z-1 before:absolute before:left-0 before:h-full before:w-full before:border-t before:border-white/10',
                 accountDetailsExpanded
                   ? 'before:opacity-100 before:delay-500 before:top-full'
                   : 'before:opacity-0 before:duration-0',
diff --git a/src/components/account/AccountFund/AccountFundContent.tsx b/src/components/account/AccountFund/AccountFundContent.tsx
@@ -320,7 +320,7 @@ export default function AccountFundContent(props: Props) {
                       className={classNames(
                         'flex-1 px-4 py-2 rounded-sm text-sm transition-colors duration-200',
                         goFast
-                          ? ' text-white'
+                          ? 'text-white'
                           : 'bg-transparent text-white/60 hover:text-white hover:bg-white/5',
                       )}
                     >
@@ -331,7 +331,7 @@ export default function AccountFundContent(props: Props) {
                       className={classNames(
                         'flex-1 px-4 py-2 rounded-sm text-sm transition-colors duration-200',
                         !goFast
-                          ? ' text-white'
+                          ? 'text-white'
                           : 'bg-transparent text-white/60 hover:text-white hover:bg-white/5',
                       )}
                     >
diff --git a/src/components/bridge/BridgeRouteSection.tsx b/src/components/bridge/BridgeRouteSection.tsx
@@ -36,7 +36,7 @@ export default function BridgeRouteSection({
             className={classNames(
               'flex-1 px-4 py-2 rounded text-sm transition-colors duration-200',
               goFast
-                ? ' text-white'
+                ? 'text-white'
                 : 'bg-transparent text-white/60 hover:text-white hover:bg-white/5',
             )}
           >
@@ -47,7 +47,7 @@ export default function BridgeRouteSection({
             className={classNames(
               'flex-1 px-4 py-2 rounded text-sm transition-colors duration-200',
               !goFast
-                ? ' text-white'
+                ? 'text-white'
                 : 'bg-transparent text-white/60 hover:text-white hover:bg-white/5',
             )}
           >
diff --git a/src/components/common/Button/DropDownButton.tsx b/src/components/common/Button/DropDownButton.tsx
@@ -20,7 +20,7 @@ export default function DropDownButton(props: Props) {
       content={<DropDown closeMenu={() => toggleIsOpen(false)} {...props} />}
       type='info'
       placement='bottom'
-      contentClassName='! backdrop-blur-xl !p-0 w-full min-w-[140px]'
+      contentClassName='backdrop-blur-xl !p-0 w-full min-w-[140px]'
       interactive
       hideArrow
       visible={isOpen}
diff --git a/src/components/common/Grid/index.ts b/src/components/common/Grid/index.ts
@@ -1,6 +1,11 @@
-export { GridContainer } from './GridContainer'
-export { GridItem } from './GridItem'
-export { ResizableGridLayout } from './ResizableGridLayout'
-export type { GridLayoutItem } from './ResizableGridLayout'
-export { GRID_LAYOUTS, createGridArea, createResponsiveColumns, parseGridArea } from './utils'
-export type { GridArea } from './utils'
+export { GridContainer } from 'components/common/Grid/GridContainer'
+export { GridItem } from 'components/common/Grid/GridItem'
+export { ResizableGridLayout } from 'components/common/Grid/ResizableGridLayout'
+export type { GridLayoutItem } from 'components/common/Grid/ResizableGridLayout'
+export {
+  GRID_LAYOUTS,
+  createGridArea,
+  createResponsiveColumns,
+  parseGridArea,
+} from 'components/common/Grid/utils'
+export type { GridArea } from 'components/common/Grid/utils'
diff --git a/src/components/common/SearchBar.tsx b/src/components/common/SearchBar.tsx
@@ -18,7 +18,7 @@ const SearchBar = (props: Props, ref: LegacyRef<HTMLDivElement>) => {
   return (
     <div
       className={classNames(
-        'flex w-full items-center justify-between rounded-sm  p-2.5',
+        'flex w-full items-center justify-between rounded-sm p-2.5',
         'relative isolate max-w-full overflow-hidden rounded-sm bg-surface-dark',
       )}
       ref={ref}
diff --git a/src/components/common/Select/Option.tsx b/src/components/common/Select/Option.tsx
@@ -40,7 +40,7 @@ export default function Option(props: Props) {
       return (
         <div
           className={classNames(
-            'flex h-full w-auto items-center gap-2  px-2',
+            'flex h-full w-auto items-center gap-2 px-2',
             'hover:cursor-pointer',
             props.displayClassName,
           )}
@@ -64,7 +64,7 @@ export default function Option(props: Props) {
           'flex gap-4 justify-between items-center py-2 px-4',
           'border-b border-b-white/20 last:border-none',
           'hover:cursor-pointer hover:bg-white/10',
-          !props.isSelected ? '' : 'pointer-events-none',
+          !props.isSelected ? 'bg-white/5' : 'pointer-events-none',
         )}
         onClick={() => handleOnClick(asset.denom)}
       >
@@ -123,7 +123,7 @@ export default function Option(props: Props) {
     <div
       className={classNames(
         'block p-3 hover:cursor-pointer hover:bg-white/10',
-        props.isSelected && '',
+        props.isSelected && 'bg-white/5',
       )}
       onClick={() => handleOnClick(props.value)}
     >
diff --git a/src/components/common/Select/index.tsx b/src/components/common/Select/index.tsx
@@ -121,7 +121,7 @@ export default function Select(props: Props) {
         data-testid='select-component'
         className={classNames(
           props.isParent && 'relative',
-          'flex min-w-fit items-center gap-2 ',
+          'flex min-w-fit items-center gap-2',
           props.className,
         )}
         role='select'
@@ -135,7 +135,7 @@ export default function Select(props: Props) {
             isDisplay
           />
         ) : (
-          <div className={classNames('flex items-center gap-2 p-3', 'hover:cursor-pointer')}>
+          <div className='flex items-center gap-2 p-3 hover:cursor-pointer'>
             <Text className='w-full opacity-50 hover:cursor-pointer'>Select</Text>
             <span
               className={classNames(
diff --git a/src/components/common/Switch/SwitchWithText.tsx b/src/components/common/Switch/SwitchWithText.tsx
@@ -64,14 +64,14 @@ export default function SwitchWithText(props: Props) {
   return (
     <div
       className={classNames(
-        'relative transition-opacity bg-black/20 rounded-md w-full p-0.5',
+        'relative transition-opacity bg-black/20 rounded-sm w-full p-0.5',
         props.className,
         props.disabled && 'pointer-events-none opacity-50',
       )}
     >
       <span
         className={classNames(
-          'absolute left-0 top-0 z-1 h-full w-1/2 rounded-md bg-white/10 transition-transform',
+          'absolute left-0 top-0 z-1 h-full w-1/2 rounded-sm bg-white/10 transition-transform',
           props.selected === props.options[1].value && 'translate-x-full',
         )}
       />
diff --git a/src/components/common/TermsOfService.tsx b/src/components/common/TermsOfService.tsx
@@ -18,7 +18,7 @@ function Benefits({ benefits }: BenefitsProps) {
     <ul className='w-full px-0 list-none'>
       {benefits.map((benefit, index) => (
         <li className='relative flex items-center w-full h-6 px-0 pl-8 mb-6' key={index}>
-          <div className={classNames('absolute left-0 top-0 isolate h-6 w-6 rounded-full ')}>
+          <div className='absolute left-0 top-0 isolate h-6 w-6 rounded-full'>
             <Check className='p-1.5' />
           </div>
           <Text size='sm' className=' text-white/60'>
diff --git a/src/components/common/TextArea.tsx b/src/components/common/TextArea.tsx
@@ -23,7 +23,7 @@ export default function TextArea(props: Props) {
         placeholder={placeholder}
         required={required}
         className={classNames(
-          'w-full p-4 mt-3 h-28 outline-none border rounded-sm resize-none bg-white/5 border-white/10 focus:border-white/20 focus: hover:cursor-pointer placeholder:text-white/60 text-sm',
+          'w-full p-4 mt-3 h-28 outline-none border rounded-sm resize-none bg-white/5 border-white/10 focus:border-white/20 hover:cursor-pointer placeholder:text-white/60 text-sm',
           className,
         )}
       />
diff --git a/src/components/common/TextInput.tsx b/src/components/common/TextInput.tsx
@@ -56,7 +56,7 @@ export default function TextInput(props: Props) {
           props.disabled && 'pointer-events-none',
           props.error
             ? ' bg-loss/5 border-loss/10 focus:border-loss/20 focus:bg-loss/10'
-            : 'bg-white/5 border-white/10 focus:border-white/20 focus:',
+            : 'bg-white/5 border-white/10 focus:border-white/20',
         )}
         placeholder={props.placeholder ?? '0'}
       />
diff --git a/src/components/header/ChainSelect.tsx b/src/components/header/ChainSelect.tsx
@@ -174,7 +174,7 @@ export default function ChainSelect(props: Props) {
           <React.Fragment key={chain.chainId}>
             <div
               className={classNames(
-                'flex items-center gap-2 px-4 py-3 border-b  border-white/20 relative',
+                'flex items-center gap-2 px-4 py-3 border-b border-white/20 relative',
                 index > 0 && 'border-t',
               )}
             >
diff --git a/src/components/header/RewardsCenter/CampaignRewards.tsx b/src/components/header/RewardsCenter/CampaignRewards.tsx
@@ -32,7 +32,7 @@ export default function CampaignRewards(props: Props) {
 
     return (
       <div
-        className='flex flex-wrap content-center justify-center w-full gap-1 p-4 rounded-md bg-black/20'
+        className='flex flex-wrap content-center justify-center w-full gap-1 p-4 rounded-sm bg-black/20'
         key={campaign.id}
       >
         <Tooltip
diff --git a/src/components/header/RewardsCenter/RewardsByToken.tsx b/src/components/header/RewardsCenter/RewardsByToken.tsx
@@ -28,7 +28,7 @@ export default function RewardsByToken(props: Props) {
               key={reward.denom}
               coin={reward}
               asset={asset}
-              className='p-4 rounded-md '
+              className='p-4 rounded-sm'
               small
             />
           )
diff --git a/src/components/header/RewardsCenter/RewardsPosition.tsx b/src/components/header/RewardsCenter/RewardsPosition.tsx
@@ -71,7 +71,7 @@ export default function RewardsPosition(props: Props) {
   if (!positionAsset) return null
 
   return (
-    <div className='flex items-center justify-between w-full p-4 rounded-md '>
+    <div className='flex items-center justify-between w-full p-4 rounded-sm'>
       <div className='flex items-center gap-2'>
         {isRedBank ? (
           <div className='w-8 h-8 mr-1'>
diff --git a/src/components/header/RewardsCenter/index.tsx b/src/components/header/RewardsCenter/index.tsx
@@ -105,7 +105,7 @@ export default function RewardsCenter(props: Props) {
         }}
         hasFocus={showRewardsCenter}
       >
-        <div className='relative flex items-center h-fullx'>
+        <div className='relative flex items-center h-full'>
           <DisplayCurrency coin={rewardsValueCoin} allowZeroAmount />
         </div>
       </Button>
@@ -151,7 +151,7 @@ export default function RewardsCenter(props: Props) {
           <Text size='xs' className='w-full'>
             Total Rewards
           </Text>
-          <div className='flex flex-wrap content-center justify-center w-full gap-1 p-4 rounded-md bg-black/20'>
+          <div className='flex flex-wrap content-center justify-center w-full gap-1 p-4 rounded-sm bg-black/20'>
             <DisplayCurrency coin={rewardsValueCoin} allowZeroAmount className='text-2xl' />
             <Text size='xs' className='w-full text-center text-white/60'>
               Unclaimed Rewards
diff --git a/src/components/header/navigation/desktop/NavMenu.tsx b/src/components/header/navigation/desktop/NavMenu.tsx
@@ -31,7 +31,7 @@ export const NavMenu = (props: Props) => {
 
   return (
     <div
-      className={`${visibilityClass} relative items-center pb-2 -mb-2 pt-0.5`}
+      className={classNames('relative items-center pb-2 -mb-2 pt-0.5', visibilityClass)}
       onMouseLeave={() => setShowMenu(false)}
     >
       <div
diff --git a/src/components/header/navigation/mobile/MobileNavigation.tsx b/src/components/header/navigation/mobile/MobileNavigation.tsx
diff --git a/src/components/managedVaults/createVault/AssetSelectContent.tsx b/src/components/managedVaults/createVault/AssetSelectContent.tsx
diff --git a/src/components/managedVaults/createVault/PerformanceFee.tsx b/src/components/managedVaults/createVault/PerformanceFee.tsx
diff --git a/src/components/managedVaults/createVault/VaultInputElement.tsx b/src/components/managedVaults/createVault/VaultInputElement.tsx
diff --git a/src/components/perps/PerpsInfo/FundingRate.tsx b/src/components/perps/PerpsInfo/FundingRate.tsx
diff --git a/src/components/perps/PerpsTabs.tsx b/src/components/perps/PerpsTabs.tsx
diff --git a/src/components/trade/TradeModule/AssetSelector/AssetOverlay/StablesFilter.tsx b/src/components/trade/TradeModule/AssetSelector/AssetOverlay/StablesFilter.tsx
diff --git a/src/pages/V1Page.tsx b/src/pages/V1Page.tsx
diff --git a/tailwind.config.ts b/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export default function AddFarmBorrowAssetsModal() {`
`28`	`28`	`header={<Text>Add Assets</Text>}`
`29`	`29`	`onClose={onClose}`
`30`	`30`	`modalClassName='max-w-modal-xs'`
`31`		`- headerClassName=' border-b-white/5 border-b items-center p-4'`
	`31`	`+ headerClassName='border-b-white/5 border-b items-center p-4'`
`32`	`32`	`>`
`33`	`33`	`{modal ? (`
`34`	`34`	`<AddFarmAssetsModalContent`
Original file line number	Diff line number	Diff line change
`@@ -458,7 +458,7 @@ export default function SettingsModal() {`
`458`	`458`	`onClick={() => inputRef?.current?.focus()}`
`459`	`459`	`color='secondary'`
`460`	`460`	`variant='rounded'`
`461`		`- className={classNames('w-16', !slippages.includes(slippage) && '')}`
	`461`	`+ className='w-16'`
`462`	`462`	`>`
`463`	`463`	`<NumberInput`
`464`	`464`	`asset={{ decimals: 0, symbol: '%' }}`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export default function VaultAssetsModal() {`
`27`	`27`	`header={<Text>Vault Assets</Text>}`
`28`	`28`	`onClose={onClose}`
`29`	`29`	`modalClassName='max-w-modal-lg'`
`30`		`- headerClassName=' border-b-white/5 border-b items-center p-4'`
	`30`	`+ headerClassName='border-b-white/5 border-b items-center p-4'`
`31`	`31`	`dialogId='wallet-assets-modal'`
`32`	`32`	`>`
`33`	`33`	`<VaultAssetsModalContent`