tidy: refactor

.env.production

@@ -0,0 +1,13 @@
+# DO NOT EDIT THIS FILE WHEN USING DOCKER
+# These values are used to replace the values in the built app, 
+# you should pass environment variables as defined in README.md
+
+# CONFIG #
+NEXT_PUBLIC_NETWORK=mainnet
+
+# OSMOSIS-1 #
+NEXT_PUBLIC_OSMOSIS_RPC=APP_NEXT_OSMOSIS_RPC
+NEXT_PUBLIC_OSMOSIS_REST=APP_NEXT_OSMOSIS_REST
+
+# WALLET CONNECT #
+NEXT_PUBLIC_WALLET_CONNECT_ID=APP_NEXT_WALLET_CONNECT_ID

Dockerfile

@@ -6,24 +6,18 @@ RUN yarn install
 COPY . .
 RUN apk --update add patch
 RUN patch next.config.js next-config.patch
-
-ENV NEXT_PUBLIC_NETWORK=mainnet
-ENV NEXT_PUBLIC_OSMOSIS_RPC=APP_NEXT_OSMOSIS_RPC
-ENV NEXT_PUBLIC_OSMOSIS_REST=APP_NEXT_OSMOSIS_REST
-ENV NEXT_PUBLIC_WALLET_CONNECT_ID=APP_NEXT_WALLET_CONNECT_ID
-ENV NODE_ENV=production
-
 RUN yarn build
 
 FROM node:20-alpine as runner
 WORKDIR /app
-
+ENV NODE_ENV=production
 COPY --from=builder /app/package.json .
 COPY --from=builder /app/yarn.lock .
 COPY --from=builder /app/next.config.js .
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
+
 COPY entrypoint.sh .
 
 RUN apk add --no-cache --upgrade bash

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mars-v2-frontend",
-  "version": "2.2.4",
+  "version": "2.2.3",
   "homepage": "./",
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",

public/images/tokens/stdydx.svg

@@ -1,36 +0,0 @@
-<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="240" height="240" rx="120" fill="#E50571" />
-  <path d="M149.107 60.9396L63.3276 181.702H89.6637L175.888 60.9396H149.107Z" fill="white" />
-  <path
-    d="M92.4053 60.9396L117.644 96.5239L104.476 115.934L65.5205 60.9396H92.4053Z"
-    fill="url(#paint0_linear_6269_3439)"
-  />
-  <path
-    d="M151.664 181.712L123.682 142.354L136.851 123.483L178 181.712H151.664Z"
-    fill="url(#paint1_linear_6269_3439)"
-  />
-  <defs>
-    <linearGradient
-      id="paint0_linear_6269_3439"
-      x1="86.3698"
-      y1="68.4878"
-      x2="121.753"
-      y2="111.957"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop stop-color="white" />
-      <stop offset="1" stop-color="white" stop-opacity="0.75" />
-    </linearGradient>
-    <linearGradient
-      id="paint1_linear_6269_3439"
-      x1="157.7"
-      y1="172.547"
-      x2="114.305"
-      y2="113.014"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop stop-color="white" stop-opacity="0.68" />
-      <stop offset="1" stop-color="white" stop-opacity="0.1" />
-    </linearGradient>
-  </defs>
-</svg>

src/components/Wallet/WalletConnectedButton.tsx

@@ -18,7 +18,6 @@ import chains from 'configs/chains'
 import { BN_ZERO } from 'constants/math'
 import useBaseAsset from 'hooks/assets/useBasetAsset'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
-import useChainConfig from 'hooks/useChainConfig'
 import useCurrentWallet from 'hooks/useCurrentWallet'
 import useICNSDomain from 'hooks/useICNSDomain'
 import useToggle from 'hooks/useToggle'
@@ -28,6 +27,7 @@ import { NETWORK } from 'types/enums/network'
 import { ChainInfoID } from 'types/enums/wallet'
 import { truncate } from 'utils/formatters'
 import { getPage, getRoute } from 'utils/route'
+import useChainConfig from 'hooks/useChainConfig'
 
 export default function WalletConnectedButton() {
   // ---------------
@@ -90,7 +90,7 @@ export default function WalletConnectedButton() {
       })
     }
 
-    navigate(getRoute(getPage(pathname), new URLSearchParams()))
+    navigate(getRoute(getPage(pathname), searchParams))
   }
 
   useEffect(() => {

src/components/borrow/BorrowActionButtons.tsx

@@ -0,0 +1,44 @@
+import { useCallback } from 'react'
+
+import Button from 'components/common/Button'
+import ActionButton from 'components/common/Button/ActionButton'
+import { HandCoins, Plus } from 'components/common/Icons'
+import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
+import useStore from 'store'
+
+interface Props {
+  data: BorrowMarketTableData
+}
+
+export default function BorrowActionButtons(props: Props) {
+  const { asset, accountDebt } = props.data
+  const marketAssets = useMarketEnabledAssets()
+  const currentAsset = marketAssets.find((a) => a.denom === asset.denom)
+
+  const borrowHandler = useCallback(() => {
+    if (!currentAsset) return null
+    useStore.setState({ borrowModal: { asset: currentAsset, marketData: props.data } })
+  }, [currentAsset, props.data])
+
+  const repayHandler = useCallback(() => {
+    if (!currentAsset) return null
+    useStore.setState({
+      borrowModal: { asset: currentAsset, marketData: props.data, isRepay: true },
+    })
+  }, [currentAsset, props.data])
+
+  return (
+    <div className='flex flex-row space-x-2'>
+      <ActionButton
+        leftIcon={<Plus className='w-3' />}
+        onClick={borrowHandler}
+        color='secondary'
+        text={accountDebt ? 'Borrow more' : 'Borrow'}
+        className='text-center min-w-40'
+      />
+      {accountDebt && (
+        <Button color='tertiary' leftIcon={<HandCoins />} text='Repay' onClick={repayHandler} />
+      )}
+    </div>
+  )
+}

src/components/borrow/Table/AvailableBorrowingsTable.tsx

@@ -2,10 +2,12 @@ import { Row } from '@tanstack/react-table'
 import { Table as TanstackTable } from '@tanstack/table-core/build/lib/types'
 import { useCallback } from 'react'
 
+import BorrowActionButtons from 'components/borrow/BorrowActionButtons'
 import { NAME_META } from 'components/borrow/Table/Columns/Name'
 import useAvailableColumns from 'components/borrow/Table/Columns/useAvailableColumns'
 import MarketDetails from 'components/common/MarketDetails'
 import Table from 'components/common/Table'
+import ActionButtonRow from 'components/common/Table/ActionButtonRow'
 
 type Props = {
   data: BorrowMarketTableData[]
@@ -18,7 +20,14 @@ export default function AvailableBorrowingsTable(props: Props) {
   const renderExpanded = useCallback(
     (row: Row<BorrowMarketTableData>, _: TanstackTable<BorrowMarketTableData>) => {
       const currentRow = row as Row<BorrowMarketTableData>
-      return <MarketDetails row={currentRow} type='borrow' />
+      return (
+        <>
+          <ActionButtonRow row={currentRow}>
+            <BorrowActionButtons data={row.original} />
+          </ActionButtonRow>
+          <MarketDetails row={currentRow} type='borrow' />
+        </>
+      )
     },
     [],
   )

src/components/borrow/Table/Columns/BorrowButton.tsx

@@ -1,61 +0,0 @@
-import { useCallback } from 'react'
-
-import ActionButton from 'components/common/Button/ActionButton'
-import { Plus } from 'components/common/Icons'
-import Text from 'components/common/Text'
-import { Tooltip } from 'components/common/Tooltip'
-import ConditionalWrapper from 'hocs/ConditionalWrapper'
-import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
-import useStore from 'store'
-
-export const BORROW_BUTTON_META = {
-  accessorKey: 'borrow',
-  enableSorting: false,
-  header: '',
-}
-
-interface Props {
-  data: LendingMarketTableData
-}
-export default function BorrowButton(props: Props) {
-  const account = useCurrentAccount()
-  const address = useStore((s) => s.address)
-  const hasNoDeposits = !account?.deposits?.length && !account?.lends?.length && !!address
-
-  const borrowHandler = useCallback(() => {
-    if (!props.data.asset) return null
-    useStore.setState({ borrowModal: { asset: props.data.asset, marketData: props.data } })
-  }, [props.data])
-
-  return (
-    <div className='flex justify-end'>
-      <ConditionalWrapper
-        condition={hasNoDeposits}
-        wrapper={(children) => (
-          <Tooltip
-            type='warning'
-            content={
-              <Text size='sm'>{`You don’t have any collateral.
-             Please first deposit into your Credit Account before borrowing.`}</Text>
-            }
-            contentClassName='max-w-[200px]'
-            className='ml-auto'
-          >
-            {children}
-          </Tooltip>
-        )}
-      >
-        <ActionButton
-          leftIcon={<Plus />}
-          disabled={hasNoDeposits}
-          color='tertiary'
-          onClick={(e) => {
-            borrowHandler()
-            e.stopPropagation()
-          }}
-          text='Borrow'
-        />
-      </ConditionalWrapper>
-    </div>
-  )
-}

src/components/borrow/Table/Columns/BorrowRate.tsx

@@ -4,6 +4,7 @@ import Loading from 'components/common/Loading'
 export const BORROW_RATE_META = {
   accessorKey: 'apy.borrow',
   header: 'Borrow Rate APY',
+  meta: { className: 'w-40' },
 }
 
 interface Props {

src/components/borrow/Table/Columns/Chevron.tsx

@@ -1,21 +0,0 @@
-import { ChevronDown, ChevronUp } from 'components/common/Icons'
-
-export const CHEVRON_META = {
-  id: 'chevron',
-  enableSorting: false,
-  header: '',
-  meta: {
-    className: 'w-5',
-  },
-}
-
-interface Props {
-  isExpanded: boolean
-}
-export default function Chevron(props: Props) {
-  return (
-    <div className='flex items-center justify-end'>
-      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
-    </div>
-  )
-}

src/components/borrow/Table/Columns/Liquidity.tsx

@@ -10,6 +10,7 @@ export const LIQUIDITY_META = {
   accessorKey: 'liquidity',
   header: 'Liquidity Available',
   id: 'liquidity',
+  meta: { className: 'w-40' },
 }
 
 export const liquiditySortingFn = (

src/components/borrow/Table/Columns/Manage.tsx

@@ -1,55 +1,20 @@
-import { useCallback, useMemo } from 'react'
-
-import DropDownButton from 'components/common/Button/DropDownButton'
-import { HandCoins, Plus } from 'components/common/Icons'
-import useStore from 'store'
+import { ChevronDown, ChevronUp } from 'components/common/Icons'
 
 export const MANAGE_META = {
   accessorKey: 'manage',
   enableSorting: false,
-  header: '',
+  header: 'Manage',
+  meta: { className: 'w-30' },
 }
 
 interface Props {
-  data: BorrowMarketTableData
+  isExpanded: boolean
 }
 
 export default function Manage(props: Props) {
-  const address = useStore((s) => s.address)
-
-  const borrowHandler = useCallback(() => {
-    if (!props.data.asset) return null
-    useStore.setState({ borrowModal: { asset: props.data.asset, marketData: props.data } })
-  }, [props.data])
-
-  const repayHandler = useCallback(() => {
-    if (!props.data.asset) return null
-    useStore.setState({
-      borrowModal: { asset: props.data.asset, marketData: props.data, isRepay: true },
-    })
-  }, [props.data])
-
-  const ITEMS: DropDownItem[] = useMemo(
-    () => [
-      {
-        icon: <Plus />,
-        text: 'Borrow more',
-        onClick: borrowHandler,
-      },
-      {
-        icon: <HandCoins />,
-        text: 'Repay',
-        onClick: repayHandler,
-      },
-    ],
-    [borrowHandler, repayHandler],
-  )
-
-  if (!address) return null
-
   return (
-    <div className='flex justify-end z-10'>
-      <DropDownButton items={ITEMS} text='Manage' color='tertiary' />
+    <div className='flex items-center justify-end'>
+      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
     </div>
   )
 }

src/components/borrow/Table/Columns/useAvailableColumns.tsx

@@ -1,13 +1,12 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import BorrowButton, { BORROW_BUTTON_META } from 'components/borrow/Table/Columns/BorrowButton'
 import BorrowRate, { BORROW_RATE_META } from 'components/borrow/Table/Columns/BorrowRate'
-import Chevron, { CHEVRON_META } from 'components/borrow/Table/Columns/Chevron'
 import Liquidity, {
   LIQUIDITY_META,
   liquiditySortingFn,
 } from 'components/borrow/Table/Columns/Liquidity'
+import Manage, { MANAGE_META } from 'components/borrow/Table/Columns/Manage'
 import Name, { NAME_META } from 'components/borrow/Table/Columns/Name'
 
 export default function useAvailableColumns() {
@@ -27,12 +26,8 @@ export default function useAvailableColumns() {
         sortingFn: liquiditySortingFn,
       },
       {
-        ...BORROW_BUTTON_META,
-        cell: ({ row }) => <BorrowButton data={row.original} />,
-      },
-      {
-        ...CHEVRON_META,
-        cell: ({ row }) => <Chevron isExpanded={row.getIsExpanded()} />,
+        ...MANAGE_META,
+        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
       },
     ]
   }, [])

src/components/borrow/Table/Columns/useDepositedColumns.tsx

@@ -2,7 +2,6 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import BorrowRate, { BORROW_RATE_META } from 'components/borrow/Table/Columns/BorrowRate'
-import Chevron, { CHEVRON_META } from 'components/borrow/Table/Columns/Chevron'
 import Debt, { DEBT_META, debtSortingFn } from 'components/borrow/Table/Columns/Debt'
 import Liquidity, {
   LIQUIDITY_META,
@@ -34,11 +33,7 @@ export default function useDepositedColumns() {
       },
       {
         ...MANAGE_META,
-        cell: ({ row }) => <Manage data={row.original} />,
-      },
-      {
-        ...CHEVRON_META,
-        cell: ({ row }) => <Chevron isExpanded={row.getIsExpanded()} />,
+        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
       },
     ]
   }, [])

src/components/borrow/Table/DepositedBorrowingsTable.tsx

@@ -1,10 +1,12 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
+import BorrowActionButtons from 'components/borrow/BorrowActionButtons'
 import { NAME_META } from 'components/borrow/Table/Columns/Name'
 import useDepositedColumns from 'components/borrow/Table/Columns/useDepositedColumns'
 import MarketDetails from 'components/common/MarketDetails'
 import Table from 'components/common/Table'
+import ActionButtonRow from 'components/common/Table/ActionButtonRow'
 
 type Props = {
   data: BorrowMarketTableData[]
@@ -15,7 +17,15 @@ export default function DepositedBorrowingsTable(props: Props) {
   const columns = useDepositedColumns()
 
   const renderExpanded = useCallback((row: Row<BorrowMarketTableData>) => {
-    return <MarketDetails row={row} type='borrow' />
+    const currentRow = row as Row<BorrowMarketTableData>
+    return (
+      <>
+        <ActionButtonRow row={currentRow}>
+          <BorrowActionButtons data={row.original} />
+        </ActionButtonRow>
+        <MarketDetails row={row} type='borrow' />
+      </>
+    )
   }, [])
 
   if (!props.data.length) return null

src/components/common/Button/DropDownButton.tsx

@@ -1,16 +1,12 @@
-import classNames from 'classnames'
-
 import Button from 'components/common/Button/index'
 import { ChevronDown } from 'components/common/Icons'
 import Text from 'components/common/Text'
 import { Tooltip } from 'components/common/Tooltip'
-import ConditionalWrapper from 'hocs/ConditionalWrapper'
 import useToggle from 'hooks/useToggle'
 
 interface Props extends ButtonProps {
   items: DropDownItem[]
   text: string
-  showProgressIndicator?: boolean
 }
 
 export default function DropDownButton(props: Props) {
@@ -20,20 +16,16 @@ export default function DropDownButton(props: Props) {
       content={<DropDown closeMenu={() => toggleIsOpen(false)} {...props} />}
       type='info'
       placement='bottom'
-      contentClassName='!bg-white/10 backdrop-blur-xl !p-0 w-full min-w-[140px]'
+      contentClassName='!bg-white/10 backdrop-blur-xl !p-0'
       interactive
       hideArrow
       visible={isOpen}
       onClickOutside={() => toggleIsOpen(false)}
     >
       <Button
-        onClick={(e) => {
-          toggleIsOpen()
-          e.stopPropagation()
-        }}
+        onClick={() => toggleIsOpen()}
         rightIcon={<ChevronDown />}
         iconClassName='w-3 h-3'
-        showProgressIndicator={props.showProgressIndicator}
         {...props}
       />
     </Tooltip>
@@ -47,7 +39,7 @@ interface DropDownProps {
 
 function DropDown(props: DropDownProps) {
   return (
-    <div className='w-full'>
+    <div>
       {props.items.map((item) => (
         <DropDownItem key={item.text} item={item} closeMenu={props.closeMenu} />
       ))}
@@ -62,38 +54,15 @@ interface DropDownItemProps {
 
 function DropDownItem(props: DropDownItemProps) {
   return (
-    <ConditionalWrapper
-      condition={!!props.item.disabled}
-      wrapper={(children) => {
-        if (!props.item.disabledTooltip) return children
-        return (
-          <Tooltip
-            type='warning'
-            content={<Text size='sm'>{props.item.disabledTooltip}</Text>}
-            contentClassName='max-w-[200px]'
-            className='ml-auto'
-          >
-            {children}
-          </Tooltip>
-        )
+    <button
+      onClick={() => {
+        props.item.onClick()
+        props.closeMenu()
       }}
+      className=' px-4 py-3 flex gap-2 items-center hover:bg-white/5 w-full [&:not(:last-child)]:border-b border-white/10'
     >
-      <button
-        onClick={(e) => {
-          e.preventDefault()
-          props.item.onClick()
-          props.closeMenu()
-          e.stopPropagation()
-        }}
-        className={classNames(
-          'z-1 px-4 py-3 flex gap-2 items-center  w-full [&:not(:last-child)]:border-b border-white/10',
-          props.item.disabled ? 'bg-black/20 text-white/40 cursor-events-none' : 'hover:bg-white/5',
-        )}
-        disabled={props.item.disabled}
-      >
-        <div className='flex justify-center w-4 h-4'>{props.item.icon}</div>
-        <Text size='sm'>{props.item.text}</Text>
-      </button>
-    </ConditionalWrapper>
+      <div className='flex justify-center w-5 h-5'>{props.item.icon}</div>
+      <Text size='sm'>{props.item.text}</Text>
+    </button>
   )
 }

src/components/common/DepositCapMessage.tsx

@@ -18,11 +18,7 @@ export default function DepositCapMessage(props: Props) {
 
   return (
     <div className={classNames('flex items-start', props.className)}>
-      {props.showIcon && (
-        <div className='w-6 mr-5'>
-          <InfoCircle />
-        </div>
-      )}
+      {props.showIcon && <InfoCircle width={26} className='mr-5' />}
       <div className='flex flex-col gap-2'>
         <Text size='sm'>Deposit Cap Reached!</Text>
         <Text size='xs' className='text-white/40'>{`Unfortunately you're not able to ${

src/components/common/Table/Row.tsx

@@ -10,7 +10,6 @@ interface Props<T> {
   className?: string
   isSelectable?: boolean
   type?: TableType
-  onClick?: (id: string) => void
 }
 
 function getBorderColor(
@@ -37,7 +36,7 @@ export default function Row<T>(props: Props<T>) {
         key={`${row.id}-row`}
         className={classNames(
           'group/row transition-bg',
-          (renderExpanded || isSelectable || props.onClick) && 'hover:cursor-pointer',
+          (renderExpanded || isSelectable) && 'hover:cursor-pointer',
           canExpand && row.getIsExpanded() ? 'is-expanded bg-black/20' : 'hover:bg-white/5',
         )}
         onClick={(e) => {
@@ -50,10 +49,6 @@ export default function Row<T>(props: Props<T>) {
             table.resetExpanded()
             !isExpanded && row.toggleExpanded()
           }
-
-          if (props.onClick) {
-            props.onClick((row.original as any).asset.denom)
-          }
         }}
       >
         {row.getVisibleCells().map((cell) => {
@@ -66,7 +61,7 @@ export default function Row<T>(props: Props<T>) {
                 spacingClassName ?? 'px-3 py-4',
                 type && type !== 'strategies' && isSymbolOrName && 'border-l',
                 type && type !== 'strategies' && getBorderColor(type, cell.row.original as any),
-                cell.column.columnDef.meta?.className ?? 'w-min',
+                cell.column.columnDef.meta?.className,
               )}
             >
               {flexRender(cell.column.columnDef.cell, cell.getContext())}

src/components/common/Table/index.tsx

@@ -31,7 +31,6 @@ interface Props<T> {
   hideCard?: boolean
   setRowSelection?: OnChangeFn<RowSelectionState>
   selectedRows?: RowSelectionState
-  onClickRow?: (id: string) => void
 }
 
 export default function Table<T>(props: Props<T>) {
@@ -76,7 +75,6 @@ export default function Table<T>(props: Props<T>) {
                       props.spacingClassName ?? 'px-4 py-3',
                       header.column.getCanSort() && 'hover:cursor-pointer',
                       header.id === 'symbol' || header.id === 'name' ? 'text-left' : 'text-right',
-                      'w-min',
                       header.column.columnDef.meta?.className,
                     )}
                   >
@@ -124,7 +122,6 @@ export default function Table<T>(props: Props<T>) {
               spacingClassName={props.spacingClassName}
               isSelectable={!!props.setRowSelection}
               type={props.type}
-              onClick={props.onClickRow}
             />
           ))}
         </tbody>

src/components/common/Tooltip/TooltipContent.tsx

@@ -16,9 +16,9 @@ export default function TooltipContent(props: Props) {
     <div>
       <div
         className={classNames(
-          'flex max-w-[320px] flex-1 gap-2 rounded-base p-3 text-sm shadow-tooltip backdrop-blur-[100px]',
+          'flex max-w-[320px] flex-1 gap-2 rounded-lg p-3 text-sm shadow-tooltip backdrop-blur-[100px]',
           'relative isolate max-w-full overflow-hidden',
-          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
+          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-lg before:p-[1px] before:border-glas',
           props.type === 'info' && 'bg-white/10',
           props.type === 'warning' && 'bg-warning',
           props.type === 'error' && 'bg-error',

src/components/earn/farm/Table/Columns/Deposit.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import ActionButton from 'components/common/Button/ActionButton'
-import { Plus } from 'components/common/Icons'
 import Loading from 'components/common/Loading'
 import useStore from 'store'
 
@@ -10,8 +9,6 @@ interface Props {
   isLoading: boolean
 }
 
-export const DEPOSIT_META = { accessorKey: 'deposit', enableSorting: false, header: '' }
-
 export const Deposit = (props: Props) => {
   const { vault } = props
 
@@ -29,12 +26,7 @@ export const Deposit = (props: Props) => {
 
   return (
     <div className='flex items-center justify-end'>
-      <ActionButton
-        onClick={enterVaultHandler}
-        color='tertiary'
-        text='Deposit'
-        leftIcon={<Plus />}
-      />
+      <ActionButton onClick={enterVaultHandler} color='tertiary' text='Deposit' />
     </div>
   )
 }

src/components/earn/farm/Table/Columns/Details.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { ChevronDown } from 'components/common/Icons'
+import Loading from 'components/common/Loading'
+
+export const DETAILS_META = { accessorKey: 'details', enableSorting: false, header: 'Deposit' }
+
+interface Props {
+  isLoading: boolean
+  isExpanded: boolean
+}
+
+export default function Details(props: Props) {
+  if (props.isLoading) return <Loading />
+
+  return (
+    <div className='flex items-center justify-end'>
+      <div className={classNames('w-4', props.isExpanded && 'rotate-180')}>
+        <ChevronDown />
+      </div>
+    </div>
+  )
+}

src/components/earn/farm/Table/Columns/Manage.tsx

@@ -1,116 +0,0 @@
-import moment from 'moment/moment'
-import React, { useCallback, useMemo, useState } from 'react'
-
-import { AccountArrowDown, LockLocked, LockUnlocked, Plus } from 'components/common/Icons'
-import Loading from 'components/common/Loading'
-import { VaultStatus } from 'types/enums/vault'
-
-import { DEFAULT_SETTINGS } from '../../../../../constants/defaultSettings'
-import { LocalStorageKeys } from '../../../../../constants/localStorageKeys'
-import useLocalStorage from '../../../../../hooks/localStorage/useLocalStorage'
-import useAccountId from '../../../../../hooks/useAccountId'
-import useStore from '../../../../../store'
-import DropDownButton from '../../../../common/Button/DropDownButton'
-
-export const MANAGE_META = { accessorKey: 'details', enableSorting: false, header: '' }
-
-interface Props {
-  vault: DepositedVault
-  isLoading: boolean
-  isExpanded: boolean
-}
-
-export default function Manage(props: Props) {
-  const accountId = useAccountId()
-  const address = useStore((s) => s.address)
-  const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
-  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
-  const [isConfirming, setIsConfirming] = useState(false)
-
-  const depositMoreHandler = useCallback(() => {
-    useStore.setState({
-      vaultModal: {
-        vault: props.vault,
-        isDeposited: true,
-        selectedBorrowDenoms: [props.vault.denoms.secondary],
-        isCreate: false,
-      },
-    })
-  }, [props.vault])
-
-  const unlockHandler = useCallback(
-    () => useStore.setState({ unlockModal: { vault: props.vault } }),
-    [props.vault],
-  )
-
-  const withdrawHandler = useCallback(async () => {
-    if (!accountId) return
-    setIsConfirming(true)
-    await withdrawFromVaults({
-      accountId: accountId,
-      vaults: [props.vault],
-      slippage,
-    })
-  }, [accountId, props.vault, slippage, withdrawFromVaults])
-
-  const ITEMS: DropDownItem[] = useMemo(
-    () => [
-      {
-        icon: <Plus />,
-        text: 'Deposit more',
-        onClick: depositMoreHandler,
-      },
-      ...(props.vault.status === VaultStatus.ACTIVE
-        ? [
-            {
-              icon: <LockUnlocked />,
-              text: 'Unlock to withdraw',
-              onClick: unlockHandler,
-            },
-          ]
-        : []),
-      ...(props.vault.status === VaultStatus.UNLOCKING
-        ? [
-            {
-              icon: <LockLocked />,
-              text: `Withdraw in ${moment(props.vault?.unlocksAt).fromNow(true)}`,
-              onClick: () => {},
-              disabled: true,
-              disabledTooltip: '',
-            },
-          ]
-        : []),
-      ...(props.vault.status === VaultStatus.UNLOCKED
-        ? [
-            {
-              icon: <AccountArrowDown />,
-              text: 'Withdraw funds',
-              onClick: withdrawHandler,
-            },
-          ]
-        : []),
-    ],
-    [
-      depositMoreHandler,
-      props.vault.status,
-      props.vault?.unlocksAt,
-      unlockHandler,
-      withdrawHandler,
-    ],
-  )
-
-  if (props.isLoading) return <Loading />
-
-  if (!address) return null
-
-  return (
-    <div className='flex justify-end z-10'>
-      <DropDownButton
-        items={ITEMS}
-        text='Manage'
-        color='tertiary'
-        showProgressIndicator={isConfirming}
-      />
-    </div>
-  )
-}

src/components/earn/farm/Table/Columns/useAvailableColumns.tsx

@@ -2,6 +2,7 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/earn/farm/Table/Columns/Apy'
+import { Deposit } from 'components/earn/farm/Table/Columns/Deposit'
 import DepositCap, {
   DEPOSIT_CAP_META,
   depositCapSortingFn,
@@ -9,8 +10,7 @@ import DepositCap, {
 import MaxLTV, { LTV_MAX_META } from 'components/earn/farm/Table/Columns/MaxLTV'
 import Name, { NAME_META } from 'components/earn/farm/Table/Columns/Name'
 import TVL, { TVL_META } from 'components/earn/farm/Table/Columns/TVL'
-
-import { Deposit, DEPOSIT_META } from './Deposit'
+import { DETAILS_META } from 'components/earn/farm/Table/Columns/Details'
 
 interface Props {
   isLoading: boolean
@@ -41,7 +41,7 @@ export default function useAvailableColumns(props: Props) {
         cell: ({ row }) => <MaxLTV vault={row.original as Vault} isLoading={props.isLoading} />,
       },
       {
-        ...DEPOSIT_META,
+        ...DETAILS_META,
         cell: ({ row }) => <Deposit vault={row.original as Vault} isLoading={props.isLoading} />,
       },
     ]

src/components/earn/farm/Table/Columns/useDepositedColumns.tsx

@@ -6,7 +6,7 @@ import DepositCap, {
   DEPOSIT_CAP_META,
   depositCapSortingFn,
 } from 'components/earn/farm/Table/Columns/DepositCap'
-import Manage, { MANAGE_META } from 'components/earn/farm/Table/Columns/Manage'
+import Details, { DETAILS_META } from 'components/earn/farm/Table/Columns/Details'
 import MaxLTV, { LTV_MAX_META } from 'components/earn/farm/Table/Columns/MaxLTV'
 import Name, { NAME_META } from 'components/earn/farm/Table/Columns/Name'
 import PositionValue, {
@@ -55,14 +55,8 @@ export default function useDepositedColumns(props: Props) {
         ),
       },
       {
-        ...MANAGE_META,
-        cell: ({ row }) => (
-          <Manage
-            vault={row.original}
-            isLoading={props.isLoading}
-            isExpanded={row.getIsExpanded()}
-          />
-        ),
+        ...DETAILS_META,
+        cell: ({ row }) => <Details isLoading={props.isLoading} isExpanded={row.getIsExpanded()} />,
       },
     ]
   }, [props.isLoading])

src/components/earn/farm/Table/DepositedVaultsTable.tsx

@@ -1,7 +1,10 @@
-import React from 'react'
+import { Row } from '@tanstack/react-table'
+import { Table as TanStackTable } from '@tanstack/table-core/build/lib/types'
+import React, { useCallback } from 'react'
 
-import Table from 'components/common/Table'
 import useDepositedColumns from 'components/earn/farm/Table/Columns/useDepositedColumns'
+import VaultExpanded from 'components/earn/farm/VaultExpanded'
+import Table from 'components/common/Table'
 
 type Props = {
   data: DepositedVault[]
@@ -11,12 +14,20 @@ type Props = {
 export default function DepositedVaultsTable(props: Props) {
   const columns = useDepositedColumns({ isLoading: props.isLoading })
 
+  const renderExpanded = useCallback(
+    (row: Row<DepositedVault>, table: TanStackTable<DepositedVault>) => (
+      <VaultExpanded row={row} resetExpanded={table.resetExpanded} />
+    ),
+    [],
+  )
+
   return (
     <Table
       title='Deposited Vaults'
       columns={columns}
       data={props.data}
       initialSorting={[{ id: 'name', desc: true }]}
+      renderExpanded={renderExpanded}
     />
   )
 }

src/components/earn/lend/LendingActionButtons.tsx

@@ -0,0 +1,98 @@
+import { useCallback } from 'react'
+
+import { ACCOUNT_MENU_BUTTON_ID } from 'components/account/AccountMenuContent'
+import Button from 'components/common/Button'
+import ActionButton from 'components/common/Button/ActionButton'
+import { ArrowDownLine, ArrowUpLine, Enter, ExclamationMarkCircled } from 'components/common/Icons'
+import Text from 'components/common/Text'
+import { Tooltip } from 'components/common/Tooltip'
+import ConditionalWrapper from 'hocs/ConditionalWrapper'
+import useAccountId from 'hooks/useAccountId'
+import useAlertDialog from 'hooks/useAlertDialog'
+import useAutoLend from 'hooks/useAutoLend'
+import useCurrentAccountDeposits from 'hooks/useCurrentAccountDeposits'
+import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
+import useStore from 'store'
+import { byDenom } from 'utils/array'
+
+interface Props {
+  data: LendingMarketTableData
+}
+
+const buttonClassnames = 'm-0 flex w-40'
+const iconClassnames = 'ml-0 mr-1 w-4 h-4'
+
+export default function LendingActionButtons(props: Props) {
+  const { asset, accountLentValue: accountLendValue } = props.data
+  const accountDeposits = useCurrentAccountDeposits()
+  const { openLend, openReclaim } = useLendAndReclaimModal()
+  const { open: showAlertDialog } = useAlertDialog()
+  const { isAutoLendEnabledForCurrentAccount } = useAutoLend()
+  const assetDepositAmount = accountDeposits.find(byDenom(asset.denom))?.amount
+  const address = useStore((s) => s.address)
+  const accountId = useAccountId()
+  const hasNoDeposit = !!(!assetDepositAmount && address && accountId)
+
+  const handleUnlend = useCallback(() => {
+    if (isAutoLendEnabledForCurrentAccount) {
+      showAlertDialog({
+        icon: <ExclamationMarkCircled width={18} />,
+        title: 'Disable Automatically Lend Assets',
+        content:
+          "Your auto-lend feature is currently enabled. To unlend your funds, please confirm if you'd like to disable this feature in order to continue.",
+        positiveButton: {
+          onClick: () => document.getElementById(ACCOUNT_MENU_BUTTON_ID)?.click(),
+          text: 'Continue to Account Settings',
+          icon: <Enter />,
+        },
+        negativeButton: {
+          text: 'Cancel',
+        },
+      })
+
+      return
+    }
+
+    openReclaim(props.data)
+  }, [isAutoLendEnabledForCurrentAccount, openReclaim, props.data, showAlertDialog])
+
+  return (
+    <div className='flex flex-row space-x-2'>
+      {accountLendValue && accountLendValue.isGreaterThan(0) && (
+        <Button
+          leftIcon={<ArrowDownLine />}
+          iconClassName={iconClassnames}
+          color='secondary'
+          onClick={handleUnlend}
+          className={buttonClassnames}
+        >
+          Unlend
+        </Button>
+      )}
+
+      <ConditionalWrapper
+        condition={hasNoDeposit}
+        wrapper={(children) => (
+          <Tooltip
+            type='warning'
+            content={
+              <Text size='sm'>{`You don’t have any ${asset.symbol}. Please first deposit ${asset.symbol} into your Credit Account before lending.`}</Text>
+            }
+          >
+            {children}
+          </Tooltip>
+        )}
+      >
+        <ActionButton
+          leftIcon={<ArrowUpLine />}
+          iconClassName={iconClassnames}
+          disabled={hasNoDeposit}
+          color='secondary'
+          onClick={() => openLend(props.data)}
+          className={buttonClassnames}
+          text='Lend'
+        />
+      </ConditionalWrapper>
+    </div>
+  )
+}

src/components/earn/lend/Table/AvailableLendsTable.tsx

@@ -1,10 +1,12 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
-import MarketDetails from 'components/common/MarketDetails'
-import Table from 'components/common/Table'
+import LendingActionButtons from 'components/earn/lend/LendingActionButtons'
 import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
 import useAvailableColumns from 'components/earn/lend/Table/Columns/useAvailableColumns'
+import MarketDetails from 'components/common/MarketDetails'
+import Table from 'components/common/Table'
+import ActionButtonRow from 'components/common/Table/ActionButtonRow'
 
 type Props = {
   data: LendingMarketTableData[]
@@ -17,6 +19,9 @@ export default function AvailableLendsTable(props: Props) {
   const renderExpanded = useCallback(
     (row: Row<LendingMarketTableData>) => (
       <>
+        <ActionButtonRow row={row}>
+          <LendingActionButtons data={row.original} />
+        </ActionButtonRow>
         <MarketDetails row={row} type='lend' />
       </>
     ),

src/components/earn/lend/Table/Columns/Chevron.tsx

@@ -1,21 +0,0 @@
-import { ChevronDown, ChevronUp } from 'components/common/Icons'
-
-export const CHEVRON_META = {
-  id: 'chevron',
-  enableSorting: false,
-  header: '',
-  meta: {
-    className: 'w-5',
-  },
-}
-
-interface Props {
-  isExpanded: boolean
-}
-export default function Chevron(props: Props) {
-  return (
-    <div className='flex items-center justify-end'>
-      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
-    </div>
-  )
-}

src/components/earn/lend/Table/Columns/DepositCap.tsx

@@ -10,6 +10,7 @@ export const DEPOSIT_CAP_META = {
   accessorKey: 'marketDepositCap',
   header: 'Deposit Cap',
   id: 'marketDepositCap',
+  meta: { className: 'w-40' },
 }
 
 export const marketDepositCapSortingFn = (

src/components/earn/lend/Table/Columns/LendButton.tsx

@@ -1,60 +0,0 @@
-import ActionButton from 'components/common/Button/ActionButton'
-import { ArrowUpLine } from 'components/common/Icons'
-import Text from 'components/common/Text'
-import { Tooltip } from 'components/common/Tooltip'
-import ConditionalWrapper from 'hocs/ConditionalWrapper'
-import useAccountId from 'hooks/useAccountId'
-import useCurrentAccountDeposits from 'hooks/useCurrentAccountDeposits'
-import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
-import useStore from 'store'
-import { byDenom } from 'utils/array'
-
-export const LEND_BUTTON_META = {
-  accessorKey: 'lend',
-  enableSorting: false,
-  header: '',
-}
-
-interface Props {
-  data: LendingMarketTableData
-}
-export default function LendButton(props: Props) {
-  const { openLend } = useLendAndReclaimModal()
-  const accountDeposits = useCurrentAccountDeposits()
-  const assetDepositAmount = accountDeposits.find(byDenom(props.data.asset.denom))?.amount
-  const address = useStore((s) => s.address)
-  const accountId = useAccountId()
-  const hasNoDeposit = !!(!assetDepositAmount && address && accountId)
-
-  return (
-    <div className='flex justify-end'>
-      <ConditionalWrapper
-        condition={hasNoDeposit}
-        wrapper={(children) => (
-          <Tooltip
-            type='warning'
-            content={
-              <Text size='sm'>{`You don’t have any ${props.data.asset.symbol}.
-             Please first deposit ${props.data.asset.symbol} into your Credit Account before lending.`}</Text>
-            }
-            contentClassName='max-w-[200px]'
-            className='ml-auto'
-          >
-            {children}
-          </Tooltip>
-        )}
-      >
-        <ActionButton
-          leftIcon={<ArrowUpLine />}
-          disabled={hasNoDeposit}
-          color='tertiary'
-          onClick={(e) => {
-            openLend(props.data)
-            e.stopPropagation()
-          }}
-          text='Lend'
-        />
-      </ConditionalWrapper>
-    </div>
-  )
-}

src/components/earn/lend/Table/Columns/Manage.tsx

@@ -1,82 +1,21 @@
-import { useCallback, useMemo } from 'react'
-
-import { ACCOUNT_MENU_BUTTON_ID } from 'components/account/AccountMenuContent'
-import DropDownButton from 'components/common/Button/DropDownButton'
-import { ArrowDownLine, ArrowUpLine, Enter, ExclamationMarkCircled } from 'components/common/Icons'
-import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
-import useAlertDialog from 'hooks/useAlertDialog'
-import useAutoLend from 'hooks/useAutoLend'
-import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
-import useStore from 'store'
+import { ChevronDown, ChevronUp } from 'components/common/Icons'
 
 export const MANAGE_META = {
   accessorKey: 'manage',
   enableSorting: false,
-  header: '',
+  header: 'Manage',
+  meta: {
+    className: 'w-30',
+  },
 }
 
 interface Props {
-  data: LendingMarketTableData
+  isExpanded: boolean
 }
 export default function Manage(props: Props) {
-  const { openLend, openReclaim } = useLendAndReclaimModal()
-  const { isAutoLendEnabledForCurrentAccount } = useAutoLend()
-  const { open: showAlertDialog } = useAlertDialog()
-  const address = useStore((s) => s.address)
-  const account = useCurrentAccount()
-
-  const hasAssetInDeposits = useMemo(
-    () => !!account?.deposits?.find((deposit) => deposit.denom === props.data.asset.denom),
-    [account?.deposits, props.data.asset.denom],
-  )
-
-  const handleUnlend = useCallback(() => {
-    if (isAutoLendEnabledForCurrentAccount) {
-      showAlertDialog({
-        icon: <ExclamationMarkCircled width={18} />,
-        title: 'Disable Automatically Lend Assets',
-        content:
-          "Your auto-lend feature is currently enabled. To unlend your funds, please confirm if you'd like to disable this feature in order to continue.",
-        positiveButton: {
-          onClick: () => document.getElementById(ACCOUNT_MENU_BUTTON_ID)?.click(),
-          text: 'Continue to Account Settings',
-          icon: <Enter />,
-        },
-        negativeButton: {
-          text: 'Cancel',
-        },
-      })
-
-      return
-    }
-
-    openReclaim(props.data)
-  }, [isAutoLendEnabledForCurrentAccount, openReclaim, props.data, showAlertDialog])
-
-  const ITEMS: DropDownItem[] = useMemo(
-    () => [
-      {
-        icon: <ArrowUpLine />,
-        text: 'Lend more',
-        onClick: () => openLend(props.data),
-        disabled: !hasAssetInDeposits,
-        disabledTooltip: `You don’t have any ${props.data.asset.symbol}.
-             Please first deposit ${props.data.asset.symbol} into your Credit Account before lending.`,
-      },
-      {
-        icon: <ArrowDownLine />,
-        text: 'Unlend',
-        onClick: handleUnlend,
-      },
-    ],
-    [handleUnlend, hasAssetInDeposits, openLend, props.data],
-  )
-
-  if (!address) return null
-
   return (
-    <div className='flex justify-end z-10'>
-      <DropDownButton items={ITEMS} text='Manage' color='tertiary' />
+    <div className='flex items-center justify-end'>
+      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
     </div>
   )
 }

src/components/earn/lend/Table/Columns/useAvailableColumns.tsx

@@ -2,12 +2,11 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/earn/lend/Table/Columns/Apy'
-import Chevron, { CHEVRON_META } from 'components/earn/lend/Table/Columns/Chevron'
 import DepositCap, {
   DEPOSIT_CAP_META,
   marketDepositCapSortingFn,
 } from 'components/earn/lend/Table/Columns/DepositCap'
-import LendButton, { LEND_BUTTON_META } from 'components/earn/lend/Table/Columns/LendButton'
+import Manage, { MANAGE_META } from 'components/earn/lend/Table/Columns/Manage'
 import Name, { NAME_META } from 'components/earn/lend/Table/Columns/Name'
 
 interface Props {
@@ -37,12 +36,8 @@ export default function useAvailableColumns(props: Props) {
         sortingFn: marketDepositCapSortingFn,
       },
       {
-        ...LEND_BUTTON_META,
-        cell: ({ row }) => <LendButton data={row.original} />,
-      },
-      {
-        ...CHEVRON_META,
-        cell: ({ row }) => <Chevron isExpanded={row.getIsExpanded()} />,
+        ...MANAGE_META,
+        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
       },
     ]
   }, [props.isLoading])

src/components/earn/lend/Table/Columns/useDepositedColumns.tsx

@@ -2,7 +2,6 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/earn/lend/Table/Columns/Apy'
-import Chevron, { CHEVRON_META } from 'components/earn/lend/Table/Columns/Chevron'
 import DepositCap, {
   DEPOSIT_CAP_META,
   marketDepositCapSortingFn,
@@ -49,11 +48,7 @@ export default function useDepositedColumns(props: Props) {
       },
       {
         ...MANAGE_META,
-        cell: ({ row }) => <Manage data={row.original} />,
-      },
-      {
-        ...CHEVRON_META,
-        cell: ({ row }) => <Chevron isExpanded={row.getIsExpanded()} />,
+        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
       },
     ]
   }, [props.isLoading])

src/components/earn/lend/Table/DepositedLendsTable.tsx

@@ -1,10 +1,12 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
-import MarketDetails from 'components/common/MarketDetails'
-import Table from 'components/common/Table'
+import LendingActionButtons from 'components/earn/lend/LendingActionButtons'
 import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
 import useDepositedColumns from 'components/earn/lend/Table/Columns/useDepositedColumns'
+import MarketDetails from 'components/common/MarketDetails'
+import Table from 'components/common/Table'
+import ActionButtonRow from 'components/common/Table/ActionButtonRow'
 
 type Props = {
   data: LendingMarketTableData[]
@@ -15,7 +17,14 @@ export default function DepositedLendsTable(props: Props) {
   const columns = useDepositedColumns({ isLoading: props.isLoading })
 
   const renderExpanded = useCallback(
-    (row: Row<LendingMarketTableData>) => <MarketDetails row={row} type='lend' />,
+    (row: Row<LendingMarketTableData>) => (
+      <>
+        <ActionButtonRow row={row}>
+          <LendingActionButtons data={row.original} />
+        </ActionButtonRow>
+        <MarketDetails row={row} type='lend' />
+      </>
+    ),
     [],
   )
 

src/components/perps/BalancesTable/Columns/PnL.tsx

@@ -14,7 +14,7 @@ type Props = {
 
 export default function PnL(props: Props) {
   return (
-    <Tooltip content={<PnLTooltip {...props} />} type='info' underline className='w-min ml-auto'>
+    <Tooltip content={<PnLTooltip {...props} />} type='info' underline>
       <DisplayCurrency
         className='inline text-xs'
         coin={props.pnl.net}

src/components/perps/BalancesTable/index.tsx

@@ -1,35 +1,10 @@
-import { useCallback } from 'react'
-import { useSearchParams } from 'react-router-dom'
-
-import Table from 'components/common/Table'
 import usePerpsBalancesColumns from 'components/perps/BalancesTable/Columns/usePerpsBalancesColumns'
 import usePerpsBalancesData from 'components/perps/BalancesTable/usePerpsBalancesData'
-import { SearchParams } from 'types/enums/searchParams'
-import { getSearchParamsObject } from 'utils/route'
+import Table from 'components/common/Table'
 
 export default function PerpsBalancesTable() {
   const data = usePerpsBalancesData()
   const columns = usePerpsBalancesColumns()
-  const [searchParams, setSearchParams] = useSearchParams()
 
-  const onClickRow = useCallback(
-    (denom: string) => {
-      const params = getSearchParamsObject(searchParams)
-      setSearchParams({
-        ...params,
-        [SearchParams.PERPS_MARKET]: denom,
-      })
-    },
-    [searchParams, setSearchParams],
-  )
-
-  return (
-    <Table
-      title='Perp Positions'
-      columns={columns}
-      data={data}
-      initialSorting={[]}
-      onClickRow={onClickRow}
-    />
-  )
+  return <Table title='Perp Positions' columns={columns} data={data} initialSorting={[]} />
 }

src/components/perps/Module/PerpsModule.tsx

@@ -104,7 +104,7 @@ export function PerpsModule() {
       />
       <AssetAmountInput
         label='Amount'
-        max={BN(10000000000)} // TODO: Implement max calculation
+        max={BN(100000000)} // TODO: Implement max calculation
         amount={amount.abs()}
         setAmount={onChangeAmount}
         asset={perpsAsset}

src/components/perps/Module/TradingFee.tsx

@@ -3,7 +3,6 @@ import BigNumber from 'bignumber.js'
 import { CircularProgress } from 'components/common/CircularProgress'
 import DisplayCurrency from 'components/common/DisplayCurrency'
 import useTradingFeeAndPrice from 'hooks/perps/useTradingFeeAndPrice'
-import { BNCoin } from 'types/classes/BNCoin'
 
 type Props = {
   denom: string
@@ -21,12 +20,5 @@ export default function TradingFee(props: Props) {
   if (isLoading) return <CircularProgress className='h-full' size={12} />
   if (props.newAmount.isEqualTo(props.previousAmount) || !tradingFeeAndPrice?.fee) return '-'
 
-  return (
-    <DisplayCurrency
-      coin={BNCoin.fromDenomAndBigNumber(
-        tradingFeeAndPrice.baseDenom,
-        tradingFeeAndPrice.fee.opening.plus(tradingFeeAndPrice.fee.closing),
-      )}
-    />
-  )
+  return <DisplayCurrency coin={tradingFeeAndPrice.fee} />
 }

src/configs/assets/stDYDX.ts

@@ -1,15 +0,0 @@
-const stDYDX: AssetMetaData = {
-  symbol: 'stDYDX',
-  id: 'stDYDX',
-  name: 'Stride dYdX',
-  color: '#e50571',
-  logo: '/images/tokens/stdydx.svg',
-  decimals: 18,
-  hasOraclePrice: true,
-  isEnabled: true,
-  isMarket: true,
-  isDisplayCurrency: true,
-  isAutoLendEnabled: false,
-  isStaking: true,
-}
-export default stDYDX

src/configs/chains/osmosis/osmosis-1.ts

@@ -5,24 +5,23 @@ import ATOM from 'configs/assets/ATOM'
 import AXL from 'configs/assets/AXL'
 import DYDX from 'configs/assets/DYDX'
 import INJ from 'configs/assets/INJ'
-import MARS from 'configs/assets/MARS'
-import OSMO from 'configs/assets/OSMO'
-import TIA from 'configs/assets/TIA'
-import USDC from 'configs/assets/USDC'
-import USDCaxl from 'configs/assets/USDC.axl'
-import USDT from 'configs/assets/USDT'
-import USDollar from 'configs/assets/USDollar'
-import WBTCaxl from 'configs/assets/WBTC.axl'
-import WETHaxl from 'configs/assets/WETH.xal'
 import OSMO_ATOM from 'configs/assets/lp/OSMO-ATOM'
 import OSMO_USDC from 'configs/assets/lp/OSMO_USDC'
 import OSMO_WBTC from 'configs/assets/lp/OSMO_WBTC'
 import OSMO_WETH from 'configs/assets/lp/OSMO_WETH'
 import stATOM_ATOM from 'configs/assets/lp/stATOM_ATOM'
+import MARS from 'configs/assets/MARS'
 import milkTIA from 'configs/assets/milkTIA'
+import OSMO from 'configs/assets/OSMO'
 import stATOM from 'configs/assets/stATOM'
-import stDYDX from 'configs/assets/stDYDX'
 import stOSMO from 'configs/assets/stOSMO'
+import TIA from 'configs/assets/TIA'
+import USDC from 'configs/assets/USDC'
+import USDCaxl from 'configs/assets/USDC.axl'
+import USDollar from 'configs/assets/USDollar'
+import USDT from 'configs/assets/USDT'
+import WBTCaxl from 'configs/assets/WBTC.axl'
+import WETHaxl from 'configs/assets/WETH.xal'
 import { VAULTS_META_DATA } from 'constants/vaults'
 import { NETWORK } from 'types/enums/network'
 import { ChainInfoID } from 'types/enums/wallet'
@@ -46,20 +45,15 @@ const ASSETS = [
     poolId: 712,
     denom: 'ibc/D1542AA8762DB13087D8364F3EA6509FD6F009A34F00426AF9E4F9FA85CBBF1F',
   },
-  {
-    ...stATOM,
-    poolId: 803,
-    denom: 'ibc/C140AFD542AE77BD7DCC83F13FDD8C5E5BB8C4929785E6EC2F4C636F98F17901',
-  },
   {
     ...stOSMO,
     poolId: 833,
     denom: 'ibc/D176154B0C63D1F9C6DCFB4F70349EBF2E2B5A87A05902F57A6AE92B863E9AEC',
   },
   {
-    ...stDYDX,
-    poolId: 1423,
-    denom: 'ibc/980E82A9F8E7CA8CD480F4577E73682A6D3855A267D1831485D7EBEF0E7A6C2C',
+    ...stATOM,
+    poolId: 803,
+    denom: 'ibc/C140AFD542AE77BD7DCC83F13FDD8C5E5BB8C4929785E6EC2F4C636F98F17901',
   },
   {
     ...USDCaxl,

src/hooks/perps/useTradingFeeAndPrice.ts

@@ -6,6 +6,7 @@ import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useChainConfig from 'hooks/useChainConfig'
 import useClients from 'hooks/useClients'
 import useDebounce from 'hooks/useDebounce'
+import { BNCoin } from 'types/classes/BNCoin'
 import { BN } from 'utils/helpers'
 
 export default function useTradingFeeAndPrice(
@@ -33,15 +34,14 @@ export default function useTradingFeeAndPrice(
         })
 
         return {
-          baseDenom: positionFees.base_denom,
           price: positionFees.opening_exec_price
             ? BN(positionFees.opening_exec_price)
             : BN(positionFees.closing_exec_price ?? BN_ZERO),
-          fee: {
-            opening: BN(positionFees.opening_fee),
-            closing: BN(positionFees.closing_fee),
-          },
-          rate: BN(0.0005),
+          fee: BNCoin.fromDenomAndBigNumber(
+            positionFees.base_denom,
+            BN(positionFees.opening_fee).plus(positionFees.closing_fee),
+          ),
+          rate: BN(0.005),
         }
       }
 
@@ -61,13 +61,15 @@ export default function useTradingFeeAndPrice(
 
       return await Promise.all([closingPositionFees$, openingPositionFees$]).then(
         ([closingPositionFees, openingPositionFees]) => ({
-          baseDenom: openingPositionFees.base_denom,
           price: BN(openingPositionFees.opening_exec_price ?? 0),
-          fee: {
-            opening: BN(closingPositionFees.opening_fee).plus(openingPositionFees.opening_fee),
-            closing: BN(closingPositionFees.closing_fee).plus(openingPositionFees.closing_fee),
-          },
-          rate: BN(0.0005), // TODO: Make this rate the actula rate again!
+          fee: BNCoin.fromDenomAndBigNumber(
+            closingPositionFees.base_denom,
+            BN(closingPositionFees.opening_fee)
+              .plus(closingPositionFees.closing_fee)
+              .plus(openingPositionFees.opening_fee)
+              .plus(openingPositionFees.closing_fee),
+          ),
+          rate: BN(0.005),
         }),
       )
     },

src/hooks/useHealthComputer.tsx

@@ -14,7 +14,6 @@ import { VaultConfigBaseForString } from 'types/generated/mars-params/MarsParams
 import {
   AssetParamsBaseForAddr,
   HealthComputer,
-  Positions,
 } from 'types/generated/mars-rover-health-computer/MarsRoverHealthComputer.types'
 import { convertAccountToPositions } from 'utils/accounts'
 import { byDenom } from 'utils/array'
@@ -33,8 +32,7 @@ import { BN } from 'utils/helpers'
 
 // Pyth returns prices with up to 32 decimals. Javascript only supports 18 decimals. So we need to scale by 14 t
 // avoid "too many decimals" errors.
-// TODO: Remove adjustment properly (after testing). We will just ignore the last 14 decimals.
-const VALUE_SCALE_FACTOR = 0
+const VALUE_SCALE_FACTOR = 14
 
 export default function useHealthComputer(account?: Account) {
   const assets = useAllAssets()
@@ -44,10 +42,10 @@ export default function useHealthComputer(account?: Account) {
   const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
 
   const [healthFactor, setHealthFactor] = useState(0)
-  const positions: Positions | null = useMemo(() => {
+  const positions: PositionsWithoutPerps | null = useMemo(() => {
     if (!account) return null
-    return convertAccountToPositions(account, prices)
-  }, [account, prices])
+    return convertAccountToPositions(account)
+  }, [account])
 
   const vaultPositionValues = useMemo(() => {
     if (!account?.vaults) return null
@@ -89,7 +87,6 @@ export default function useHealthComputer(account?: Account) {
         prev[curr.denom] = curr.amount
           .shiftedBy(VALUE_SCALE_FACTOR)
           .shiftedBy(-decimals + 6)
-          .decimalPlaces(18)
           .toString()
         return prev
       },

src/types/classes/BNCoin.ts

@@ -1,4 +1,4 @@
-import { ActionCoin, PnL } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
+import { ActionCoin } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
 import { BN } from 'utils/helpers'
 
 export class BNCoin {
@@ -23,7 +23,7 @@ export class BNCoin {
   toCoin(): Coin {
     return {
       denom: this.denom,
-      amount: this.amount.integerValue().toString(),
+      amount: this.amount.toString(),
     }
   }
 
@@ -33,7 +33,7 @@ export class BNCoin {
       amount: max
         ? 'account_balance'
         : {
-            exact: this.amount.integerValue().toString(),
+            exact: this.amount.toString(),
           },
     }
   }
@@ -41,23 +41,7 @@ export class BNCoin {
   toSignedCoin(): any {
     return {
       denom: this.denom,
-      size: this.amount.integerValue().toString(),
-    }
-  }
-
-  toPnLCoin(): PnL {
-    if (this.amount.isZero()) {
-      return 'break_even'
-    }
-
-    if (this.amount.isPositive()) {
-      return {
-        profit: this.toCoin(),
-      }
-    }
-
-    return {
-      loss: this.abs().toCoin(),
+      size: this.amount.toString(),
     }
   }
 

src/types/generated/mars-credit-manager/MarsCreditManager.client.ts

@@ -69,7 +69,6 @@ import {
   Positions,
   DebtAmount,
   PerpPosition,
-  PnlAmounts,
   PositionPnl,
   PnlCoins,
   PnlValues,

src/types/generated/mars-credit-manager/MarsCreditManager.types.ts

@@ -28,387 +28,387 @@ export interface InstantiateMsg {
 }
 export type ExecuteMsg =
   | {
-      create_credit_account: AccountKind
-    }
+  create_credit_account: AccountKind
+}
   | {
-      update_credit_account: {
-        account_id: string
-        actions: Action[]
-      }
-    }
+  update_credit_account: {
+    account_id: string
+    actions: Action[]
+  }
+}
   | {
-      repay_from_wallet: {
-        account_id: string
-      }
-    }
+  repay_from_wallet: {
+    account_id: string
+  }
+}
   | {
-      update_config: {
-        updates: ConfigUpdates
-      }
-    }
+  update_config: {
+    updates: ConfigUpdates
+  }
+}
   | {
-      update_owner: OwnerUpdate
-    }
+  update_owner: OwnerUpdate
+}
   | {
-      update_nft_config: {
-        config?: NftConfigUpdates | null
-        ownership?: Action2 | null
-      }
-    }
+  update_nft_config: {
+    config?: NftConfigUpdates | null
+    ownership?: Action2 | null
+  }
+}
   | {
-      callback: CallbackMsg
-    }
+  callback: CallbackMsg
+}
 export type AccountKind = 'default' | 'high_levered_strategy'
 export type Action =
   | {
-      deposit: Coin
-    }
+  deposit: Coin
+}
   | {
-      withdraw: ActionCoin
-    }
+  withdraw: ActionCoin
+}
   | {
-      borrow: Coin
-    }
+  borrow: Coin
+}
   | {
-      lend: ActionCoin
-    }
+  lend: ActionCoin
+}
   | {
-      reclaim: ActionCoin
-    }
+  reclaim: ActionCoin
+}
   | {
-      claim_rewards: {}
-    }
+  claim_rewards: {}
+}
   | {
-      repay: {
-        coin: ActionCoin
-        recipient_account_id?: string | null
-      }
-    }
+  repay: {
+    coin: ActionCoin
+    recipient_account_id?: string | null
+  }
+}
   | {
-      open_perp: {
-        denom: string
-        size: SignedDecimal
-      }
-    }
+  open_perp: {
+    denom: string
+    size: SignedDecimal
+  }
+}
   | {
-      close_perp: {
-        denom: string
-      }
-    }
+  close_perp: {
+    denom: string
+  }
+}
   | {
-      modify_perp: {
-        denom: string
-        new_size: SignedDecimal
-      }
-    }
+  modify_perp: {
+    denom: string
+    new_size: SignedDecimal
+  }
+}
   | {
-      enter_vault: {
-        coin: ActionCoin
-        vault: VaultBaseForString
-      }
-    }
+  enter_vault: {
+    coin: ActionCoin
+    vault: VaultBaseForString
+  }
+}
   | {
-      exit_vault: {
-        amount: Uint128
-        vault: VaultBaseForString
-      }
-    }
+  exit_vault: {
+    amount: Uint128
+    vault: VaultBaseForString
+  }
+}
   | {
-      request_vault_unlock: {
-        amount: Uint128
-        vault: VaultBaseForString
-      }
-    }
+  request_vault_unlock: {
+    amount: Uint128
+    vault: VaultBaseForString
+  }
+}
   | {
-      exit_vault_unlocked: {
-        id: number
-        vault: VaultBaseForString
-      }
-    }
+  exit_vault_unlocked: {
+    id: number
+    vault: VaultBaseForString
+  }
+}
   | {
-      liquidate: {
-        debt_coin: Coin
-        liquidatee_account_id: string
-        request: LiquidateRequestForVaultBaseForString
-      }
-    }
+  liquidate: {
+    debt_coin: Coin
+    liquidatee_account_id: string
+    request: LiquidateRequestForVaultBaseForString
+  }
+}
   | {
-      swap_exact_in: {
-        coin_in: ActionCoin
-        denom_out: string
-        slippage: Decimal
-      }
-    }
+  swap_exact_in: {
+    coin_in: ActionCoin
+    denom_out: string
+    slippage: Decimal
+  }
+}
   | {
-      provide_liquidity: {
-        coins_in: ActionCoin[]
-        lp_token_out: string
-        slippage: Decimal
-      }
-    }
+  provide_liquidity: {
+    coins_in: ActionCoin[]
+    lp_token_out: string
+    slippage: Decimal
+  }
+}
   | {
-      withdraw_liquidity: {
-        lp_token: ActionCoin
-        slippage: Decimal
-      }
-    }
+  withdraw_liquidity: {
+    lp_token: ActionCoin
+    slippage: Decimal
+  }
+}
   | {
-      refund_all_coin_balances: {}
-    }
+  refund_all_coin_balances: {}
+}
 export type ActionAmount =
   | 'account_balance'
   | {
-      exact: Uint128
-    }
+  exact: Uint128
+}
 export type LiquidateRequestForVaultBaseForString =
   | {
-      deposit: string
-    }
+  deposit: string
+}
   | {
-      lend: string
-    }
+  lend: string
+}
   | {
-      vault: {
-        position_type: VaultPositionType
-        request_vault: VaultBaseForString
-      }
-    }
+  vault: {
+    position_type: VaultPositionType
+    request_vault: VaultBaseForString
+  }
+}
 export type VaultPositionType = 'u_n_l_o_c_k_e_d' | 'l_o_c_k_e_d' | 'u_n_l_o_c_k_i_n_g'
 export type AccountNftBaseForString = string
 export type PerpsBaseForString = string
 export type OwnerUpdate =
   | {
-      propose_new_owner: {
-        proposed: string
-      }
-    }
+  propose_new_owner: {
+    proposed: string
+  }
+}
   | 'clear_proposed'
   | 'accept_proposed'
   | 'abolish_owner_role'
   | {
-      set_emergency_owner: {
-        emergency_owner: string
-      }
-    }
+  set_emergency_owner: {
+    emergency_owner: string
+  }
+}
   | 'clear_emergency_owner'
 export type Action2 =
   | {
-      transfer_ownership: {
-        expiry?: Expiration | null
-        new_owner: string
-      }
-    }
+  transfer_ownership: {
+    expiry?: Expiration | null
+    new_owner: string
+  }
+}
   | 'accept_ownership'
   | 'renounce_ownership'
 export type Expiration =
   | {
-      at_height: number
-    }
+  at_height: number
+}
   | {
-      at_time: Timestamp
-    }
+  at_time: Timestamp
+}
   | {
-      never: {}
-    }
+  never: {}
+}
 export type Timestamp = Uint64
 export type Uint64 = string
 export type CallbackMsg =
   | {
-      withdraw: {
-        account_id: string
-        coin: ActionCoin
-        recipient: Addr
-      }
-    }
+  withdraw: {
+    account_id: string
+    coin: ActionCoin
+    recipient: Addr
+  }
+}
   | {
-      borrow: {
-        account_id: string
-        coin: Coin
-      }
-    }
+  borrow: {
+    account_id: string
+    coin: Coin
+  }
+}
   | {
-      repay: {
-        account_id: string
-        coin: ActionCoin
-      }
-    }
+  repay: {
+    account_id: string
+    coin: ActionCoin
+  }
+}
   | {
-      repay_for_recipient: {
-        benefactor_account_id: string
-        coin: ActionCoin
-        recipient_account_id: string
-      }
-    }
+  repay_for_recipient: {
+    benefactor_account_id: string
+    coin: ActionCoin
+    recipient_account_id: string
+  }
+}
   | {
-      lend: {
-        account_id: string
-        coin: ActionCoin
-      }
-    }
+  lend: {
+    account_id: string
+    coin: ActionCoin
+  }
+}
   | {
-      reclaim: {
-        account_id: string
-        coin: ActionCoin
-      }
-    }
+  reclaim: {
+    account_id: string
+    coin: ActionCoin
+  }
+}
   | {
-      claim_rewards: {
-        account_id: string
-        recipient: Addr
-      }
-    }
+  claim_rewards: {
+    account_id: string
+    recipient: Addr
+  }
+}
   | {
-      assert_max_ltv: {
-        account_id: string
-        prev_health_state: HealthState
-      }
-    }
+  assert_max_ltv: {
+    account_id: string
+    prev_health_state: HealthState
+  }
+}
   | {
-      assert_deposit_caps: {
-        denoms: string[]
-      }
-    }
+  assert_deposit_caps: {
+    denoms: string[]
+  }
+}
   | {
-      open_perp: {
-        account_id: string
-        denom: string
-        size: SignedDecimal
-      }
-    }
+  open_perp: {
+    account_id: string
+    denom: string
+    size: SignedDecimal
+  }
+}
   | {
-      close_perp: {
-        account_id: string
-        denom: string
-      }
-    }
+  close_perp: {
+    account_id: string
+    denom: string
+  }
+}
   | {
-      modify_perp: {
-        account_id: string
-        denom: string
-        new_size: SignedDecimal
-      }
-    }
+  modify_perp: {
+    account_id: string
+    denom: string
+    new_size: SignedDecimal
+  }
+}
   | {
-      enter_vault: {
-        account_id: string
-        coin: ActionCoin
-        vault: VaultBaseForAddr
-      }
-    }
+  enter_vault: {
+    account_id: string
+    coin: ActionCoin
+    vault: VaultBaseForAddr
+  }
+}
   | {
-      exit_vault: {
-        account_id: string
-        amount: Uint128
-        vault: VaultBaseForAddr
-      }
-    }
+  exit_vault: {
+    account_id: string
+    amount: Uint128
+    vault: VaultBaseForAddr
+  }
+}
   | {
-      update_vault_coin_balance: {
-        account_id: string
-        previous_total_balance: Uint128
-        vault: VaultBaseForAddr
-      }
-    }
+  update_vault_coin_balance: {
+    account_id: string
+    previous_total_balance: Uint128
+    vault: VaultBaseForAddr
+  }
+}
   | {
-      request_vault_unlock: {
-        account_id: string
-        amount: Uint128
-        vault: VaultBaseForAddr
-      }
-    }
+  request_vault_unlock: {
+    account_id: string
+    amount: Uint128
+    vault: VaultBaseForAddr
+  }
+}
   | {
-      exit_vault_unlocked: {
-        account_id: string
-        position_id: number
-        vault: VaultBaseForAddr
-      }
-    }
+  exit_vault_unlocked: {
+    account_id: string
+    position_id: number
+    vault: VaultBaseForAddr
+  }
+}
   | {
-      liquidate: {
-        debt_coin: Coin
-        liquidatee_account_id: string
-        liquidator_account_id: string
-        request: LiquidateRequestForVaultBaseForAddr
-      }
-    }
+  liquidate: {
+    debt_coin: Coin
+    liquidatee_account_id: string
+    liquidator_account_id: string
+    request: LiquidateRequestForVaultBaseForAddr
+  }
+}
   | {
-      swap_exact_in: {
-        account_id: string
-        coin_in: ActionCoin
-        denom_out: string
-        slippage: Decimal
-      }
-    }
+  swap_exact_in: {
+    account_id: string
+    coin_in: ActionCoin
+    denom_out: string
+    slippage: Decimal
+  }
+}
   | {
-      update_coin_balance: {
-        account_id: string
-        change: ChangeExpected
-        previous_balance: Coin
-      }
-    }
+  update_coin_balance: {
+    account_id: string
+    change: ChangeExpected
+    previous_balance: Coin
+  }
+}
   | {
-      update_coin_balance_after_vault_liquidation: {
-        account_id: string
-        previous_balance: Coin
-        protocol_fee: Decimal
-      }
-    }
+  update_coin_balance_after_vault_liquidation: {
+    account_id: string
+    previous_balance: Coin
+    protocol_fee: Decimal
+  }
+}
   | {
-      provide_liquidity: {
-        account_id: string
-        coins_in: ActionCoin[]
-        lp_token_out: string
-        slippage: Decimal
-      }
-    }
+  provide_liquidity: {
+    account_id: string
+    coins_in: ActionCoin[]
+    lp_token_out: string
+    slippage: Decimal
+  }
+}
   | {
-      withdraw_liquidity: {
-        account_id: string
-        lp_token: ActionCoin
-        slippage: Decimal
-      }
-    }
+  withdraw_liquidity: {
+    account_id: string
+    lp_token: ActionCoin
+    slippage: Decimal
+  }
+}
   | {
-      refund_all_coin_balances: {
-        account_id: string
-      }
-    }
+  refund_all_coin_balances: {
+    account_id: string
+  }
+}
   | {
-      assert_hls_rules: {
-        account_id: string
-      }
-    }
+  assert_hls_rules: {
+    account_id: string
+  }
+}
   | {
-      remove_reentrancy_guard: {}
-    }
+  remove_reentrancy_guard: {}
+}
   | {
-      send_rewards_to_addr: {
-        account_id: string
-        previous_balances: Coin[]
-        recipient: Addr
-      }
-    }
+  send_rewards_to_addr: {
+    account_id: string
+    previous_balances: Coin[]
+    recipient: Addr
+  }
+}
 export type Addr = string
 export type HealthState =
   | 'healthy'
   | {
-      unhealthy: {
-        max_ltv_health_factor: Decimal
-      }
-    }
+  unhealthy: {
+    max_ltv_health_factor: Decimal
+  }
+}
 export type LiquidateRequestForVaultBaseForAddr =
   | {
-      deposit: string
-    }
+  deposit: string
+}
   | {
-      lend: string
-    }
+  lend: string
+}
   | {
-      vault: {
-        position_type: VaultPositionType
-        request_vault: VaultBaseForAddr
-      }
-    }
+  vault: {
+    position_type: VaultPositionType
+    request_vault: VaultBaseForAddr
+  }
+}
 export type ChangeExpected = 'increase' | 'decrease'
 export interface Coin {
   amount: Uint128
@@ -451,80 +451,80 @@ export interface VaultBaseForAddr {
 }
 export type QueryMsg =
   | {
-      account_kind: {
-        account_id: string
-      }
-    }
+  account_kind: {
+    account_id: string
+  }
+}
   | {
-      accounts: {
-        limit?: number | null
-        owner: string
-        start_after?: string | null
-      }
-    }
+  accounts: {
+    limit?: number | null
+    owner: string
+    start_after?: string | null
+  }
+}
   | {
-      config: {}
-    }
+  config: {}
+}
   | {
-      vault_utilization: {
-        vault: VaultBaseForString
-      }
-    }
+  vault_utilization: {
+    vault: VaultBaseForString
+  }
+}
   | {
-      positions: {
-        account_id: string
-      }
-    }
+  positions: {
+    account_id: string
+  }
+}
   | {
-      all_coin_balances: {
-        limit?: number | null
-        start_after?: [string, string] | null
-      }
-    }
+  all_coin_balances: {
+    limit?: number | null
+    start_after?: [string, string] | null
+  }
+}
   | {
-      all_debt_shares: {
-        limit?: number | null
-        start_after?: [string, string] | null
-      }
-    }
+  all_debt_shares: {
+    limit?: number | null
+    start_after?: [string, string] | null
+  }
+}
   | {
-      total_debt_shares: string
-    }
+  total_debt_shares: string
+}
   | {
-      all_total_debt_shares: {
-        limit?: number | null
-        start_after?: string | null
-      }
-    }
+  all_total_debt_shares: {
+    limit?: number | null
+    start_after?: string | null
+  }
+}
   | {
-      all_vault_positions: {
-        limit?: number | null
-        start_after?: [string, string] | null
-      }
-    }
+  all_vault_positions: {
+    limit?: number | null
+    start_after?: [string, string] | null
+  }
+}
   | {
-      estimate_provide_liquidity: {
-        coins_in: Coin[]
-        lp_token_out: string
-      }
-    }
+  estimate_provide_liquidity: {
+    coins_in: Coin[]
+    lp_token_out: string
+  }
+}
   | {
-      estimate_withdraw_liquidity: {
-        lp_token: Coin
-      }
-    }
+  estimate_withdraw_liquidity: {
+    lp_token: Coin
+  }
+}
   | {
-      vault_position_value: {
-        vault_position: VaultPosition
-      }
-    }
+  vault_position_value: {
+    vault_position: VaultPosition
+  }
+}
 export type VaultPositionAmount =
   | {
-      unlocked: VaultAmount
-    }
+  unlocked: VaultAmount
+}
   | {
-      locking: LockingVaultAmount
-    }
+  locking: LockingVaultAmount
+}
 export type VaultAmount = string
 export type VaultAmount1 = string
 export type UnlockingPositions = VaultUnlockingPosition[]
@@ -597,11 +597,11 @@ export type ArrayOfCoin = Coin[]
 export type PnL =
   | 'break_even'
   | {
-      profit: Coin
-    }
+  profit: Coin
+}
   | {
-      loss: Coin
-    }
+  loss: Coin
+}
 export interface Positions {
   account_id: string
   debts: DebtAmount[]
@@ -623,11 +623,11 @@ export interface PerpPosition {
   denom: string
   entry_exec_price: Decimal
   entry_price: Decimal
-  realised_pnl: PnlAmounts
+  realised_pnl: RealizedPnlAmounts
   size: SignedDecimal
   unrealised_pnl: PositionPnl
 }
-export interface PnlAmounts {
+export interface RealizedPnlAmounts {
   accrued_funding: SignedDecimal
   closing_fee: SignedDecimal
   opening_fee: SignedDecimal
@@ -635,7 +635,6 @@ export interface PnlAmounts {
   price_pnl: SignedDecimal
 }
 export interface PositionPnl {
-  amounts: PnlAmounts
   coins: PnlCoins
   values: PnlValues
 }

src/types/generated/mars-rover-health-computer/MarsRoverHealthComputer.client.ts

@@ -27,11 +27,10 @@ import {
   DebtAmount,
   Coin,
   PerpPosition,
-  PnlAmounts,
-  SignedDecimal,
   PositionPnl,
   PnlCoins,
   PnlValues,
+  SignedDecimal,
   VaultPosition,
   LockingVaultAmount,
   VaultUnlockingPosition,

src/types/generated/mars-rover-health-computer/MarsRoverHealthComputer.react-query.ts

@@ -27,11 +27,10 @@ import {
   DebtAmount,
   Coin,
   PerpPosition,
-  PnlAmounts,
-  SignedDecimal,
   PositionPnl,
   PnlCoins,
   PnlValues,
+  SignedDecimal,
   VaultPosition,
   LockingVaultAmount,
   VaultUnlockingPosition,

src/types/generated/mars-rover-health-computer/MarsRoverHealthComputer.types.ts

@@ -41,7 +41,7 @@ export type UnlockingPositions = VaultUnlockingPosition[]
 export interface HealthComputer {
   denoms_data: DenomsData
   kind: AccountKind
-  positions: Positions
+  positions: PositionsWithoutPerps
   vaults_data: VaultsData
 }
 export interface DenomsData {
@@ -102,29 +102,13 @@ export interface Coin {
 export interface PerpPosition {
   base_denom: string
   closing_fee_rate: Decimal
-  current_exec_price: Decimal
   current_price: Decimal
   denom: string
-  entry_exec_price: Decimal
   entry_price: Decimal
-  realised_pnl: PnlAmounts
+  pnl: PositionPnl
   size: SignedDecimal
-  unrealised_pnl: PositionPnl
-}
-export interface PnlAmounts {
-  accrued_funding: SignedDecimal
-  closing_fee: SignedDecimal
-  opening_fee: SignedDecimal
-  pnl: SignedDecimal
-  price_pnl: SignedDecimal
-}
-export interface SignedDecimal {
-  abs: Decimal
-  negative: boolean
-  [k: string]: unknown
 }
 export interface PositionPnl {
-  amounts: PnlAmounts
   coins: PnlCoins
   values: PnlValues
 }
@@ -138,6 +122,11 @@ export interface PnlValues {
   pnl: SignedDecimal
   price_pnl: SignedDecimal
 }
+export interface SignedDecimal {
+  abs: Decimal
+  negative: boolean
+  [k: string]: unknown
+}
 export interface VaultPosition {
   amount: VaultPositionAmount
   vault: VaultBaseForAddr

src/types/interfaces/components/DropDownMenu.d.ts

@@ -2,6 +2,4 @@ interface DropDownItem {
   icon: import('react').ReactNode
   onClick: () => void
   text: string
-  disabled?: boolean
-  disabledTooltip?: string
 }

src/types/interfaces/perps.d.ts

@@ -1,5 +1,11 @@
 type TradeDirection = 'long' | 'short'
 
+// TODO: 📈Remove this type when healthcomputer is implemented
+type PositionsWithoutPerps = Omit<
+  import('types/generated/mars-credit-manager/MarsCreditManager.types').Positions,
+  'perps'
+>
+
 interface PerpsPosition {
   denom: string
   baseDenom: string
@@ -7,7 +13,6 @@ interface PerpsPosition {
   amount: BigNumber
   pnl: PerpsPnL
   entryPrice: BigNumber
-  closingFeeRate: BigNumber
 }
 
 interface PerpPositionRow extends PerpsPosition {

src/utils/accounts.ts

@@ -4,7 +4,6 @@ import { BN_ZERO } from 'constants/math'
 import { ORACLE_DENOM } from 'constants/oracle'
 import { BNCoin } from 'types/classes/BNCoin'
 import { VaultPosition } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
-import { Positions } from 'types/generated/mars-rover-health-computer/MarsRoverHealthComputer.types'
 import { byDenom } from 'utils/array'
 import { BN } from 'utils/helpers'
 import { convertApyToApr } from 'utils/parsers'
@@ -175,7 +174,7 @@ export function accumulateAmounts(denom: string, coins: BNCoin[]): BigNumber {
 }
 
 // TODO: 📈 Add correct type mapping
-export function convertAccountToPositions(account: Account, prices: BNCoin[]): Positions {
+export function convertAccountToPositions(account: Account): PositionsWithoutPerps {
   return {
     account_id: account.id,
     debts: account.debts.map((debt) => ({
@@ -189,66 +188,6 @@ export function convertAccountToPositions(account: Account, prices: BNCoin[]): P
       amount: lend.amount.toString(),
       denom: lend.denom,
     })),
-    perps: account.perps.map((perpPosition) => {
-      // TODO: Check if this needs to be converted (in regards to HC decimal scaling)
-      const currentPrice = prices.find(byDenom(perpPosition.denom))?.amount ?? BN_ZERO
-      return {
-        // Used
-        base_denom: perpPosition.baseDenom,
-        // Used
-        closing_fee_rate: perpPosition.closingFeeRate.toString(),
-        // Used
-        current_price: currentPrice.toString(), // Check what prices we should pass to current and entry prices. Entry price will change when modifying positionl
-        current_exec_price: currentPrice.toString(), // TODO: 📈 This needs to be queried
-        denom: perpPosition.denom,
-        // Used (for now, this might be changed)
-        entry_price: currentPrice.toString(),
-        // Used (not actually used, but it's in todo)
-        entry_exec_price: currentPrice.toString(), // TODO: 📈 Check if this matters (currently just using entry price)
-        // Used
-        size: perpPosition.amount.toString() as any,
-        unrealised_pnl: {
-          coins: {
-            closing_fee: perpPosition.pnl.unrealized.fees.abs().toCoin(),
-            // Used
-            pnl: perpPosition.pnl.unrealized.net.toPnLCoin(), // Used
-          },
-          amounts: {
-            // CHeck if these are correct
-            accrued_funding: perpPosition.pnl.unrealized.funding.amount
-              .integerValue()
-              .toString() as any,
-            opening_fee: perpPosition.pnl.unrealized.fees.amount
-              .abs()
-              .integerValue()
-              .toString() as any, // Add openning fee for modifying position
-            closing_fee: perpPosition.pnl.unrealized.fees.amount
-              .abs()
-              .integerValue()
-              .toString() as any, // Add closing fee for modifying position
-            pnl: perpPosition.pnl.unrealized.net.amount.integerValue().toString() as any,
-            price_pnl: perpPosition.pnl.unrealized.price.amount.integerValue().toString() as any,
-          },
-          values: {
-            // This does not matter for health calculation
-            accrued_funding: perpPosition.pnl.unrealized.funding.amount
-              .integerValue()
-              .toString() as any,
-            closing_fee: perpPosition.pnl.unrealized.fees.amount.integerValue().toString() as any,
-            pnl: perpPosition.pnl.unrealized.net.amount.integerValue().toString() as any,
-            price_pnl: perpPosition.pnl.unrealized.price.amount.integerValue().toString() as any,
-          },
-        },
-        realised_pnl: {
-          // This does not matter for the health calculation
-          accrued_funding: perpPosition.pnl.realized.funding.amount.toString() as any,
-          closing_fee: perpPosition.pnl.realized.fees.amount.toString() as any,
-          opening_fee: perpPosition.pnl.realized.fees.amount.toString() as any,
-          pnl: perpPosition.pnl.realized.net.amount.toString() as any,
-          price_pnl: perpPosition.pnl.realized.price.amount.toString() as any,
-        },
-      }
-    }),
     vaults: account.vaults.map(
       (vault) =>
         ({

src/utils/getPerpsPosition.ts

@@ -2,17 +2,16 @@ import BigNumber from 'bignumber.js'
 
 import { BN_ONE, BN_ZERO } from 'constants/math'
 import { BNCoin } from 'types/classes/BNCoin'
-import { BN } from 'utils/helpers'
 
 export default function getPerpsPosition(
   asset: Asset,
   amount: BigNumber,
   tradeDirection: TradeDirection,
-): PerpsPosition {
+) {
   const perpsBaseDenom = 'ibc/F91EA2C0A23697A1048E08C2F787E3A58AC6F706A1CD2257A504925158CFC0F3'
   return {
     amount,
-    closingFeeRate: BN(0.0005), // TODO: Pass the actual rate
+    closingFee: BNCoin.fromDenomAndBigNumber(perpsBaseDenom, BN_ONE),
     pnl: {
       net: BNCoin.fromDenomAndBigNumber(perpsBaseDenom, BN_ONE),
       realized: {

src/utils/health_computer/index.d.ts

@@ -96,10 +96,10 @@ export interface InitOutput {
     h: number,
   ) => void
   readonly liquidation_price_js: (a: number, b: number, c: number, d: number, e: number) => void
-  readonly interface_version_8: () => void
   readonly allocate: (a: number) => number
   readonly deallocate: (a: number) => void
   readonly requires_iterator: () => void
+  readonly interface_version_8: () => void
   readonly __wbindgen_malloc: (a: number, b: number) => number
   readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number
   readonly __wbindgen_add_to_stack_pointer: (a: number) => number

src/utils/health_computer/index.js

@@ -296,7 +296,6 @@ async function __wbg_load(module, imports) {
 function __wbg_get_imports() {
   const imports = {}
   imports.wbg = {}
-  imports.wbg.__wbg_log_117d9799fa4f6287 = function (arg0, arg1, arg2, arg3) {}
   imports.wbg.__wbindgen_object_clone_ref = function (arg0) {
     const ret = getObject(arg0)
     return addHeapObject(ret)

src/utils/health_computer/index_bg.wasm.d.ts

@@ -15,10 +15,10 @@ export function max_swap_estimate_js(
   h: number,
 ): void
 export function liquidation_price_js(a: number, b: number, c: number, d: number, e: number): void
-export function interface_version_8(): void
 export function allocate(a: number): number
 export function deallocate(a: number): void
 export function requires_iterator(): void
+export function interface_version_8(): void
 export function __wbindgen_malloc(a: number, b: number): number
 export function __wbindgen_realloc(a: number, b: number, c: number, d: number): number
 export function __wbindgen_add_to_stack_pointer(a: number): number

src/utils/resolvers.ts

@@ -118,7 +118,7 @@ export function resolvePerpsPositions(
       baseDenom: position.base_denom,
       amount: BN(position.size as any), // Amount is negative for SHORT positions
       tradeDirection: BN(position.size as any).isNegative() ? 'short' : 'long',
-      closingFeeRate: BN(position.closing_fee_rate),
+      // closingFee: BNCoin.fromCoin(position.pnl.coins.closing_fee),
       pnl: {
         net: BNCoin.fromDenomAndBigNumber(
           position.base_denom,