Merge branch 'develop' into metamask-integration

Author: linkielink

package.json

@@ -32,15 +32,16 @@
     "ibc-domains-sdk": "^1.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
+    "mobx": "^6.12.3",
     "moment": "^2.30.1",
-    "next": "^14.2.2",
-    "react": "^18.2.0",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-helmet-async": "^2.0.4",
     "react-qr-code": "^2.0.12",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.23.1",
     "react-spring": "^9.7.3",
     "react-toastify": "^10.0.5",
     "react-use-clipboard": "^1.0.9",
@@ -54,15 +55,15 @@
     "@types/debounce-promise": "^3.1.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.throttle": "^4.1.9",
-    "@types/node": "^20.12.7",
-    "@types/react": "18.2.79",
-    "@types/react-dom": "18.2.25",
+    "@types/node": "^20.12.11",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "@types/react-helmet": "^6.1.11",
     "autoprefixer": "^10.4.19",
     "dotenv": "^16.4.5",
     "dotenv-cli": "^7.4.1",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.4",
+    "eslint-config-next": "^14.2.3",
     "eslint-plugin-import": "^2.29.1",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",

src/api/vaults/getDepositedVaults.ts

@@ -40,6 +40,26 @@ async function getUnlocksAtTimestamp(
       60,
     )) as VaultExtensionResponse
 
+    const lockingVault: any = {
+      vault: {
+        address: '',
+      },
+      locking: {
+        locked: {
+          vault: 0,
+          base: 0,
+          coins: [],
+        },
+        unlocking: [
+          {
+            base: 0,
+            timestamp: 0,
+            coins: [],
+          },
+        ],
+      },
+    }
+
     return Number(vaultExtension.release_at.at_time) / 1e6
   } catch (ex) {
     throw ex

src/components/Modals/Account/AccountDeleteModal.tsx

@@ -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/Settings/index.tsx

@@ -2,18 +2,17 @@ import { useShuttle } from '@delphi-labs/shuttle-react'
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
 
-import Modal from 'components/Modals/Modal'
-import SettingsOptions from 'components/Modals/Settings/SettingsOptions'
-import SettingsSwitch from 'components/Modals/Settings/SettingsSwitch'
-import WalletSelect from 'components/Wallet/WalletSelect'
+import AssetImage from 'components/common/assets/AssetImage'
 import Button from 'components/common/Button'
 import { ArrowCircle, Enter } from 'components/common/Icons'
 import NumberInput from 'components/common/NumberInput'
 import Select from 'components/common/Select'
 import Text from 'components/common/Text'
 import TextInput from 'components/common/TextInput'
 import { TextLink } from 'components/common/TextLink'
-import AssetImage from 'components/common/assets/AssetImage'
+import Modal from 'components/Modals/Modal'
+import SettingsOptions from 'components/Modals/Settings/SettingsOptions'
+import SettingsSwitch from 'components/Modals/Settings/SettingsSwitch'
 import chains from 'configs/chains'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
@@ -30,6 +29,8 @@ import useStore from 'store'
 import { getCurrentChainId } from 'utils/getCurrentChainId'
 import { BN } from 'utils/helpers'
 
+import { Callout, CalloutType } from '../../common/Callout'
+
 const slippages = [0.02, 0.03]
 
 export default function SettingsModal() {
@@ -269,6 +270,11 @@ export default function SettingsModal() {
     [setValidRest, chainId, setRestEndpoint],
   )
 
+  const hasEndpointsChangedValid = useMemo(
+    () => (tempRestEndpoint !== '' && validRest) || (tempRpcEndpoint !== '' && validRpc),
+    [tempRestEndpoint, tempRpcEndpoint, validRest, validRpc],
+  )
+
   const showResetModal = useCallback(() => {
     showResetDialog({
       icon: (
@@ -288,29 +294,16 @@ export default function SettingsModal() {
   }, [showResetDialog, handleResetSettings])
 
   const handleCloseModal = useCallback(() => {
-    if (
-      (tempRpcEndpoint !== '' || tempRestEndpoint !== '') &&
-      validRest &&
-      validRpc &&
-      currentWallet
-    ) {
+    if (hasEndpointsChangedValid && currentWallet) {
       disconnectWallet(currentWallet)
-      useStore.setState({
-        client: undefined,
-        address: undefined,
-        userDomain: undefined,
-        balances: [],
-        focusComponent: {
-          component: <WalletSelect />,
-        },
-      })
+      window.location.reload()
     }
     setTempRestEndpoint('')
     setTempRpcEndpoint('')
     setValidRest(true)
     setValidRpc(true)
     useStore.setState({ settingsModal: false })
-  }, [tempRpcEndpoint, tempRestEndpoint, currentWallet, disconnectWallet, validRest, validRpc])
+  }, [hasEndpointsChangedValid, currentWallet, disconnectWallet])
 
   if (!modal) return null
 
@@ -462,7 +455,7 @@ export default function SettingsModal() {
         className='pb-6'
         fullwidth
       >
-        <div className='flex flex-wrap w-full gap-4'>
+        <div className='flex flex-wrap w-full gap-4 items-stretch'>
           <TextInput
             label='RPC'
             placeholder='https://'
@@ -487,6 +480,11 @@ export default function SettingsModal() {
             errorMessage={`Invalid ${chainId} REST Endpoint. Failed to fetch the latest block.`}
             className='w-full'
           />
+          {hasEndpointsChangedValid && (
+            <Callout type={CalloutType.INFO} className='w-full'>
+              The app will reload and you will have to re-connect the wallet.
+            </Callout>
+          )}
         </div>
       </SettingsOptions>
       <div className='flex flex-wrap justify-center w-full gap-4 md:justify-between md:flex-nowrap'>

src/components/Wallet/WalletConnectProvider.tsx

@@ -16,17 +16,29 @@ import {
 import { FC } from 'react'
 
 import chains from 'configs/chains'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { WALLETS } from 'constants/wallets'
 import { WalletID } from 'types/enums'
 
 type Props = {
   children?: React.ReactNode
 }
 
+function getLocalStorageEndpoint(key: string, fallback: string) {
+  if (typeof window !== 'undefined') return localStorage.getItem(key) ?? fallback
+  return fallback
+}
+
 function mapChainConfigToChainInfo(chainConfig: ChainConfig): ChainInfo {
-  const chainInfo: ChainInfo = {
-    rpc: chainConfig.endpoints.rpc,
-    rest: chainConfig.endpoints.rest,
+  return {
+    rpc: getLocalStorageEndpoint(
+      `${chainConfig.id}/${LocalStorageKeys.RPC_ENDPOINT}`,
+      chainConfig.endpoints.rpc,
+    ),
+    rest: getLocalStorageEndpoint(
+      `${chainConfig.id}/${LocalStorageKeys.REST_ENDPOINT}`,
+      chainConfig.endpoints.rest,
+    ),
     explorer: chainConfig.endpoints.explorer,
     explorerName: chainConfig.explorerName,
     chainId: chainConfig.id,
@@ -36,15 +48,11 @@ function mapChainConfigToChainInfo(chainConfig: ChainConfig): ChainInfo {
     defaultCurrency: chainConfig.defaultCurrency,
     features: ['ibc-transfer', 'ibc-go'],
   }
-
-  return chainInfo
 }
 
 function getSupportedChainsInfos(walletId: WalletID) {
   return WALLETS[walletId].supportedChains.map((chain) => {
-    const chainInfo = mapChainConfigToChainInfo(chains[chain])
-
-    return chainInfo
+    return mapChainConfigToChainInfo(chains[chain])
   })
 }
 

src/components/account/AccountBalancesTable/index.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/AccountSummary/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],