Merge pull request #943 from mars-protocol/develop

v2.3.5

Author: linkielink

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mars-v2-frontend",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "homepage": "./",
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@cosmjs/cosmwasm-stargate": "^0.32.3",
     "@delphi-labs/shuttle-react": "^3.22.0",
-    "@keplr-wallet/cosmos": "^0.12.82",
+    "@keplr-wallet/cosmos": "^0.12.88",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-table": "^8.16.0",
     "@tippyjs/react": "^4.2.6",
@@ -41,7 +41,7 @@
     "react-draggable": "^4.4.6",
     "react-helmet-async": "^2.0.4",
     "react-qr-code": "^2.0.12",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.23.1",
     "react-spring": "^9.7.3",
     "react-toastify": "^10.0.5",
     "react-use-clipboard": "^1.0.9",
@@ -55,9 +55,9 @@
     "@types/debounce-promise": "^3.1.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.throttle": "^4.1.9",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.12.11",
     "@types/react": "18.3.1",
-    "@types/react-dom": "18.2.25",
+    "@types/react-dom": "18.3.0",
     "@types/react-helmet": "^6.1.11",
     "autoprefixer": "^10.4.19",
     "dotenv": "^16.4.5",

public/images/wallets/metamask.png

@@ -1,11 +1,13 @@
 import { useCallback, useMemo } from 'react'
 import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { useSWRConfig } from 'swr'
 
 import AccountDeleteAlertDialog from 'components/Modals/Account/AccountDeleteAlertDialog'
 import { ArrowRight, ExclamationMarkCircled } from 'components/common/Icons'
 import Text from 'components/common/Text'
 import AssetBalanceRow from 'components/common/assets/AssetBalanceRow'
 import useAllAssets from 'hooks/assets/useAllAssets'
+import useChainConfig from 'hooks/chain/useChainConfig'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
@@ -26,7 +28,10 @@ export default function AccountDeleteController() {
 
 function AccountDeleteModal(props: Props) {
   const modal = props.modal
+  const chainConfig = useChainConfig()
   const deleteAccount = useStore((s) => s.deleteAccount)
+  const { mutate } = useSWRConfig()
+  const { address: urlAddress } = useParams()
   const navigate = useNavigate()
   const { pathname } = useLocation()
   const { address } = useParams()
@@ -37,10 +42,19 @@ function AccountDeleteModal(props: Props) {
     useStore.setState({ accountDeleteModal: null })
   }, [])
 
-  const deleteAccountHandler = useCallback(() => {
+  const deleteAccountHandler = useCallback(async () => {
     const options = { accountId: modal.id, lends: modal.lends }
-    deleteAccount(options)
-    navigate(getRoute(getPage(pathname), searchParams, address))
+    const path = getPage(pathname)
+    const isDeleted = await deleteAccount(options)
+    if (isDeleted) {
+      mutate(`chains/${chainConfig.id}/wallets/${urlAddress}/account-ids`)
+      if (path.includes('portfolio')) {
+        // If the current page is the portfolio accounts detail page. Reroute the user to the portfolio overview page.
+        navigate(getRoute('portfolio', searchParams, urlAddress))
+      } else {
+        navigate(getRoute(path, searchParams, address))
+      }
+    }
     closeDeleteAccountModal()
   }, [
     modal.id,
@@ -50,6 +64,9 @@ function AccountDeleteModal(props: Props) {
     pathname,
     searchParams,
     address,
+    urlAddress,
+    chainConfig.id,
+    mutate,
     closeDeleteAccountModal,
   ])
 

src/components/Modals/Account/AccountDeleteModal.tsx

@@ -15,12 +15,12 @@ import { getPage, getRoute } from 'utils/route'
 
 interface Props {
   account: Account
-  isHls?: boolean
   lendingData: LendingMarketTableData[]
   borrowingData: BorrowMarketTableData[]
   hideCard?: boolean
   tableBodyClassName?: string
   showLiquidationPrice?: boolean
+  isUsersAccount?: boolean
 }
 
 export default function AccountBalancesTable(props: Props) {
@@ -32,23 +32,24 @@ export default function AccountBalancesTable(props: Props) {
     tableBodyClassName,
     hideCard,
     showLiquidationPrice,
+    isUsersAccount,
   } = props
   const currentAccount = useCurrentAccount()
   const navigate = useNavigate()
   const { pathname } = useLocation()
   const address = useStore((s) => s.address)
   const updatedAccount = useStore((s) => s.updatedAccount)
+  const isHls = account.kind === 'high_levered_strategy'
   const accountBalanceData = useAccountBalanceData({
     account,
     updatedAccount,
     lendingData,
     borrowingData,
-    isHls: props.isHls,
+    isHls,
   })
-
   const columns = useAccountBalancesColumns(account, showLiquidationPrice)
 
-  if (accountBalanceData.length === 0)
+  if (accountBalanceData.length === 0) {
     return (
       <ConditionalWrapper
         condition={!hideCard}
@@ -59,28 +60,34 @@ export default function AccountBalancesTable(props: Props) {
         )}
       >
         <div className='w-full p-4'>
-          <ActionButton
-            className='w-full'
-            text='Fund this Account'
-            color='tertiary'
-            onClick={() => {
-              if (currentAccount?.id !== account.id) {
-                navigate(getRoute(getPage(pathname), searchParams, address, account.id))
-              }
-              useStore.setState({
-                focusComponent: {
-                  component: <AccountFundFullPage />,
-                  onClose: () => {
-                    useStore.setState({ getStartedModal: true })
+          {isUsersAccount && !isHls ? (
+            <ActionButton
+              className='w-full'
+              text='Fund this Account'
+              color='tertiary'
+              onClick={() => {
+                if (currentAccount?.id !== account.id) {
+                  navigate(getRoute(getPage(pathname), searchParams, address, account.id))
+                }
+                useStore.setState({
+                  focusComponent: {
+                    component: <AccountFundFullPage />,
+                    onClose: () => {
+                      useStore.setState({ getStartedModal: true })
+                    },
                   },
-                },
-              })
-            }}
-          />
+                })
+              }}
+            />
+          ) : (
+            <Text size='sm' className='text-center'>
+              This account has no balances.
+            </Text>
+          )}
         </div>
       </ConditionalWrapper>
     )
-
+  }
   return (
     <Table
       title={

src/components/account/AccountBalancesTable/index.tsx

@@ -12,10 +12,10 @@ import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
 import useAllAssets from 'hooks/assets/useAllAssets'
+import useHealthComputer from 'hooks/health-computer/useHealthComputer'
 import useHLSStakingAssets from 'hooks/hls/useHLSStakingAssets'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'
 import usePrices from 'hooks/prices/usePrices'
-import useHealthComputer from 'hooks/health-computer/useHealthComputer'
 import useVaultAprs from 'hooks/vaults/useVaultAprs'
 import useStore from 'store'
 import { calculateAccountApr, calculateAccountLeverage } from 'utils/accounts'
@@ -117,7 +117,6 @@ export default function AccountSummary(props: Props) {
               borrowingData={borrowAssetsData}
               lendingData={lendingAssetsData}
               hideCard
-              isHls={isHls}
             />
           ) : null,
         isOpen: accountSummaryTabs[1],

src/components/account/AccountSummary/index.tsx

@@ -6,15 +6,14 @@ import Card from 'components/common/Card'
 import TableSkeleton from 'components/common/Table/TableSkeleton'
 import Text from 'components/common/Text'
 import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
-import useAccount from 'hooks/accounts/useAccount'
 
 interface Props {
-  accountId: string
+  isUsersAccount?: boolean
+  account: Account
 }
 
 function Content(props: Props) {
-  const { data: account } = useAccount(props.accountId, true)
-
+  const { isUsersAccount, account } = props
   const data = useBorrowMarketAssetsTableData()
   const borrowAssets = useMemo(() => data?.allAssets || [], [data])
   const { allAssets: lendingAssets } = useLendingMarketAssetsTableData()
@@ -29,6 +28,7 @@ function Content(props: Props) {
         account={account}
         borrowingData={borrowAssets}
         lendingData={lendingAssets}
+        isUsersAccount={isUsersAccount}
         showLiquidationPrice
         hideCard
       />

src/components/portfolio/Account/Balances.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useMemo } from 'react'
+
+import AccountFundFullPage from 'components/account/AccountFund/AccountFundFullPage'
+import Button from 'components/common/Button'
+import { ArrowDownLine, ArrowUpLine, TrashBin } from 'components/common/Icons'
+import useAllAssets from 'hooks/assets/useAllAssets'
+import usePrices from 'hooks/prices/usePrices'
+import useStore from 'store'
+import { calculateAccountBalanceValue } from 'utils/accounts'
+
+interface Props {
+  account: Account
+}
+
+export default function ManageAccount(props: Props) {
+  const { account } = props
+  const assets = useAllAssets()
+  const { data: prices } = usePrices()
+  const isHls = account.kind === 'high_levered_strategy'
+  const positionBalance = useMemo(
+    () => (!account ? null : calculateAccountBalanceValue(account, prices, assets)),
+    [account, assets, prices],
+  )
+  const deleteAccountHandler = useCallback(() => {
+    if (!account) return
+    useStore.setState({ accountDeleteModal: account })
+  }, [account])
+
+  return (
+    <div className='flex flex-wrap justify-center w-full gap-4 md:justify-end'>
+      {!isHls && (
+        <>
+          <Button
+            text='Fund'
+            color='tertiary'
+            leftIcon={<ArrowUpLine />}
+            disabled={!positionBalance}
+            onClick={() => {
+              if (!positionBalance) return
+              if (positionBalance.isLessThanOrEqualTo(0)) {
+                useStore.setState({
+                  focusComponent: {
+                    component: <AccountFundFullPage />,
+                    onClose: () => {
+                      useStore.setState({ getStartedModal: true })
+                    },
+                  },
+                })
+                return
+              }
+              useStore.setState({ fundAndWithdrawModal: 'fund' })
+            }}
+          />
+          <Button
+            color='tertiary'
+            leftIcon={<ArrowDownLine />}
+            text='Withdraw'
+            onClick={() => {
+              useStore.setState({ fundAndWithdrawModal: 'withdraw' })
+            }}
+            disabled={!positionBalance || positionBalance.isLessThanOrEqualTo(0)}
+          />
+        </>
+      )}
+      <Button
+        color='tertiary'
+        leftIcon={<TrashBin />}
+        text='Delete'
+        disabled={!account}
+        onClick={() => {
+          deleteAccountHandler()
+        }}
+      />
+    </div>
+  )
+}

src/components/portfolio/Account/ManageAccount.tsx

@@ -4,16 +4,14 @@ import AccountPerpPositionTable from 'components/account/AccountPerpPositionTabl
 import Card from 'components/common/Card'
 import TableSkeleton from 'components/common/Table/TableSkeleton'
 import Text from 'components/common/Text'
-import useAccount from 'hooks/accounts/useAccount'
 
 interface Props {
-  accountId: string
+  account: Account
 }
 
 function Content(props: Props) {
-  const { data: account } = useAccount(props.accountId, true)
-
-  if (!account || account.perps.length === 0) return null
+  const { account } = props
+  if (account.perps.length === 0) return null
 
   return (
     <Skeleton>

src/components/portfolio/Account/PerpPositions.tsx

@@ -4,16 +4,15 @@ import AccountStrategiesTable from 'components/account/AccountStrategiesTable'
 import Card from 'components/common/Card'
 import TableSkeleton from 'components/common/Table/TableSkeleton'
 import Text from 'components/common/Text'
-import useAccount from 'hooks/accounts/useAccount'
 
 interface Props {
-  accountId: string
+  account: Account
 }
 
 function Content(props: Props) {
-  const { data: account } = useAccount(props.accountId, true)
+  const { account } = props
 
-  if (!account || account?.vaults.length === 0) {
+  if (account.vaults.length === 0) {
     return null
   }