Merge pull request #1314 from mars-protocol/develop

v2.8.7

Author: linkielink

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mars-v2-frontend",
-  "version": "2.8.6",
+  "version": "2.8.7",
   "homepage": "./",
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",
@@ -20,10 +20,10 @@
     ]
   },
   "dependencies": {
-    "@cosmjs/cosmwasm-stargate": "^0.32.4",
+    "@cosmjs/cosmwasm-stargate": "^0.33.0",
     "@delphi-labs/shuttle-react": "^3.29.0",
-    "@keplr-wallet/cosmos": "^0.12.163",
-    "@next/eslint-plugin-next": "^15.1.0",
+    "@keplr-wallet/cosmos": "^0.12.175",
+    "@next/eslint-plugin-next": "^15.1.4",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-table": "^8.20.6",
     "@tippyjs/react": "^4.2.6",
@@ -36,56 +36,56 @@
     "lodash.throttle": "^4.1.1",
     "mobx": "^6.13.5",
     "moment": "^2.30.1",
-    "next": "^15.1.0",
+    "next": "^15.1.4",
     "react": "19.0.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^19.0.0",
     "react-draggable": "^4.4.6",
     "react-helmet-async": "^2.0.5",
     "react-qr-code": "^2.0.15",
-    "react-router-dom": "^7.0.2",
+    "react-router-dom": "^7.1.2",
     "react-spring": "^9.7.5",
-    "react-toastify": "^11.0.0",
+    "react-toastify": "^11.0.3",
     "react-use-clipboard": "^1.0.9",
     "recharts": "^2.15.0",
     "sharp": "^0.33.5",
     "starknet": "^6.11.0",
-    "swr": "^2.2.5",
-    "tailwind-scrollbar-hide": "^1.1.7",
-    "zustand": "5.0.2"
+    "swr": "^2.3.0",
+    "tailwind-scrollbar-hide": "^2.0.0",
+    "zustand": "5.0.3"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.25.9",
-    "@eslint/compat": "^1.2.4",
+    "@babel/eslint-parser": "^7.26.5",
+    "@eslint/compat": "^1.2.5",
     "@svgr/webpack": "^8.1.0",
     "@types/debounce-promise": "^3.1.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.throttle": "^4.1.9",
-    "@types/node": "^22.10.2",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.2",
+    "@types/node": "^22.10.7",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
     "@types/react-helmet": "^6.1.11",
-    "@typescript-eslint/eslint-plugin": "^8.18.1",
-    "@typescript-eslint/parser": "^8.18.1",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
     "autoprefixer": "^10.4.20",
     "dotenv": "^16.4.7",
-    "dotenv-cli": "^7.4.4",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-functional": "^7.1.0",
+    "dotenv-cli": "^8.0.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-functional": "^8.0.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-prettier": "^5.2.2",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "lint-staged": "^15.2.11",
+    "lint-staged": "^15.4.1",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier-plugin-tailwindcss": "^0.6.10",
     "shelljs": "^0.8.5",
-    "tailwindcss": "^3.4.16",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.1"
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0"
   },
   "engines": {
     "npm": "please-use-yarn",

src/chains/osmosis/osmosis-1.ts

@@ -131,7 +131,7 @@ const Osmosis1: ChainConfig = {
   hls: true,
   perps: false,
   farm: true,
-  anyAsset: false,
+  anyAsset: true,
   slinky: false,
 }
 

src/components/common/Card/CardWithTabs.tsx

@@ -36,7 +36,7 @@ function Tabs(props: TabsProps) {
           <button
             key={tab.title}
             className={classNames(
-              'py-4 border-b-[2px] border-transparent flex items-center',
+              'pt-4 pb-1 mb-3 border-b-[2px] border-transparent flex items-center text-lg',
               props.tabs.length < 2 && 'cursor-default text-white border-transparent',
               index === props.activeIdx && props.tabs.length > 1 && 'border-b-martian-red',
               index !== props.activeIdx && props.tabs.length > 1 && 'text-white/20',

src/components/common/Card/index.tsx

@@ -10,18 +10,22 @@ interface Props {
   onClick?: () => void
   title?: string | ReactElement
   id?: string
+  isTab?: boolean
 }
 
 export default function Card(props: Props) {
+  const isTab = props.isTab ?? false
   return (
     <section
       id={props.id}
       onClick={props.onClick}
       className={classNames(
         props.className,
         'flex flex-col',
-        'relative isolate max-w-full overflow-hidden rounded-base max-h-full',
-        'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
+        'relative isolate max-w-full overflow-hidden  max-h-full',
+        isTab
+          ? ''
+          : 'before:content-[" "] before:absolute rounded-base before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
       )}
     >
       {typeof props.title === 'string' ? (

src/components/perps/PerpsChart.tsx

@@ -70,6 +70,7 @@ export function PerpsChart() {
         limitOrders={currentLimitOrders}
         onCreateLimitOrder={onCreateLimitOrder}
         onCreateStopOrder={onCreateStopOrder}
+        isTab
       />
     </div>
   )

src/components/perps/PerpsStats.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames'
+import { CircularProgress } from 'components/common/CircularProgress'
+import { useState } from 'react'
+
+interface Props {
+  denom: string
+}
+
+export function PerpsStats({ denom }: Props) {
+  const [isLoading, setIsLoading] = useState(true)
+
+  const handleIframeLoad = () => {
+    setTimeout(() => setIsLoading(false), 1500)
+  }
+
+  return (
+    <div className='flex gap-4 h-[500px] md:h-screen/70 md:max-h-[980px] md:min-h-[560px] w-full items-center justify-center'>
+      {isLoading && <CircularProgress size={60} />}
+      <iframe
+        src={`http://stats.marsprotocol.io/${denom}?iframeView=on`}
+        className={classNames(
+          'w-[calc(100%-2px)] ml-[1px] h-full border-0',
+          isLoading ? 'hidden' : 'flex',
+        )}
+        title='Perps Stats'
+        onLoad={handleIframeLoad}
+      />
+    </div>
+  )
+}

src/components/perps/PerpsTabs.tsx

@@ -0,0 +1,32 @@
+import { CardWithTabs } from 'components/common/Card/CardWithTabs'
+import { PerpsChart } from 'components/perps/PerpsChart'
+import { PerpsStats } from 'components/perps/PerpsStats'
+import usePerpsAsset from 'hooks/perps/usePerpsAsset'
+import { Suspense, useMemo } from 'react'
+
+export function PerpsTabs() {
+  const { perpsAsset } = usePerpsAsset()
+  const tabs: CardTab[] = useMemo(
+    () => [
+      {
+        title: 'Trading Chart',
+        id: 'chart',
+        renderContent: () => <PerpsChart />,
+      },
+      {
+        title: 'Market Stats',
+        id: 'stats',
+        renderContent: () => (
+          <div className='flex flex-col h-full gap-4'>
+            <Suspense fallback={<div>Loading...</div>}>
+              <PerpsStats denom={perpsAsset.denom} />
+            </Suspense>
+          </div>
+        ),
+      },
+    ],
+    [perpsAsset.denom],
+  )
+
+  return <CardWithTabs tabs={tabs} />
+}

src/components/trade/TradeChart/index.tsx

@@ -42,6 +42,7 @@ interface Props {
   perpsPosition?: PerpsPosition
   liquidationPrice?: number
   limitOrders?: PerpPositionRow[]
+  isTab?: boolean
   onCreateLimitOrder?: (price: BigNumber) => void
   onCreateStopOrder?: (price: BigNumber) => void
 }
@@ -374,6 +375,7 @@ export default function TradeChart(props: Props) {
     })
   }, [updateShapesAndStudies])
 
+  const { isTab = false } = props
   return (
     <Card
       title={
@@ -438,6 +440,7 @@ export default function TradeChart(props: Props) {
         'h-[500px]',
         'md:h-screen/70 md:max-h-[980px] md:min-h-[560px] order-1 w-full',
       )}
+      isTab={isTab}
     >
       <div ref={chartContainerRef ?? undefined} className='h-[calc(100%-32px)] overflow-hidden'>
         <div className='flex items-center w-full h-full'>

src/pages/PerpsPage.tsx

@@ -1,6 +1,6 @@
 import { PerpsModule } from 'components/perps/Module/PerpsModule'
 import PerpsBanner from 'components/perps/PerpsBanner'
-import { PerpsChart } from 'components/perps/PerpsChart'
+import { PerpsTabs } from 'components/perps/PerpsTabs'
 import { PerpsPositions } from 'components/perps/PerpsPositions'
 import useAccountId from 'hooks/accounts/useAccountId'
 import useWhitelistedAssets from 'hooks/assets/useWhitelistedAssets'
@@ -35,7 +35,7 @@ export default function PerpsPage() {
     <div className='flex flex-wrap w-full gap-4 md:grid md:grid-cols-chart'>
       <div className='w-full'>
         <PerpsBanner />
-        <PerpsChart />
+        <PerpsTabs />
       </div>
       <div className='w-full row-span-2'>
         <PerpsModule />

src/utils/swap.ts

@@ -14,14 +14,11 @@ export function getSwapExactInAction(
   routeInfo: SwapRouteInfo,
   slippage: number,
 ): Action {
-  const baseSwapExactInObject = {
-    coin_in: coinIn,
-    denom_out: denomOut,
-    route: routeInfo?.route,
-  }
   return {
     swap_exact_in: {
-      ...baseSwapExactInObject,
+      coin_in: coinIn,
+      denom_out: denomOut,
+      route: routeInfo?.route,
       min_receive: getMinAmountOutFromRouteInfo(routeInfo, slippage).integerValue().toString(),
     },
   }