feat: added account details and fund account button to empty accounts (#393)

__tests__/components/Account/AccountDetails.test.tsx

@@ -10,6 +10,8 @@ jest.mock('hooks/useHealthComputer', () =>
     health: 0,
   })),
 )
+// AccountBalancesTable component has wallet provider dependency, so we mock it
+jest.mock('components/Account/AccountBalancesTable', () => jest.fn(() => null))
 
 const mockedUseCurrentAccount = useCurrentAccount as jest.Mock
 

src/components/Account/AccountBalancesTable.tsx

@@ -8,7 +8,10 @@ import {
 } from '@tanstack/react-table'
 import classNames from 'classnames'
 import React from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
 
+import AccountFund from 'components/Account/AccountFund'
+import Button from 'components/Button'
 import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
 import { SortAsc, SortDesc, SortNone } from 'components/Icons'
@@ -16,14 +19,17 @@ import Text from 'components/Text'
 import { ASSETS } from 'constants/assets'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { DISPLAY_CURRENCY_KEY } from 'constants/localStore'
+import useCurrentAccount from 'hooks/useCurrentAccount'
 import useLocalStorage from 'hooks/useLocalStorage'
 import usePrices from 'hooks/usePrices'
+import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
 import { getAssetByDenom } from 'utils/assets'
 import { convertLiquidityRateToAPR, convertToDisplayAmount, demagnify } from 'utils/formatters'
 import { BN } from 'utils/helpers'
 import { convertAprToApy } from 'utils/parsers'
+import { getPage, getRoute } from 'utils/route'
 
 interface Props {
   account: Account
@@ -62,7 +68,10 @@ export default function AccountBalancesTable(props: Props) {
     DEFAULT_SETTINGS.displayCurrency,
   )
   const { data: prices } = usePrices()
-
+  const currentAccount = useCurrentAccount()
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
+  const address = useStore((s) => s.address)
   const [sorting, setSorting] = React.useState<SortingState>([])
   const balanceData = React.useMemo<AccountBalanceRow[]>(() => {
     const accountDeposits = props.account?.deposits ?? []
@@ -172,6 +181,30 @@ export default function AccountBalancesTable(props: Props) {
     getSortedRowModel: getSortedRowModel(),
   })
 
+  if (balanceData.length === 0)
+    return (
+      <div className='w-full p-4'>
+        <Button
+          className='w-full'
+          text='Fund this Account'
+          color='tertiary'
+          onClick={() => {
+            if (currentAccount?.id !== props.account.id) {
+              navigate(getRoute(getPage(pathname), address, props.account.id))
+            }
+            useStore.setState({
+              focusComponent: {
+                component: <AccountFund />,
+                onClose: () => {
+                  useStore.setState({ getStartedModal: true })
+                },
+              },
+            })
+          }}
+        />
+      </div>
+    )
+
   return (
     <table className='w-full'>
       <thead className='border-b border-white/5'>

src/components/Account/AccountComposition.tsx

@@ -85,7 +85,7 @@ export default function AccountComposition(props: Props) {
   )
 
   return (
-    <div className='flex-wrap w-full p-4'>
+    <div className='flex-wrap w-full p-4 pb-1'>
       <Item
         title='Total Position Value'
         current={balance}

src/components/Account/AccountDetails.tsx

@@ -1,10 +1,13 @@
 import classNames from 'classnames'
 import { useMemo } from 'react'
 
+import AccountBalancesTable from 'components/Account/AccountBalancesTable'
+import AccountComposition from 'components/Account/AccountComposition'
+import Card from 'components/Card'
 import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
 import { Gauge } from 'components/Gauge'
-import { ArrowRight, Heart } from 'components/Icons'
+import { ArrowRight, ChevronLeft, ChevronRight, Heart } from 'components/Icons'
 import Text from 'components/Text'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
@@ -12,6 +15,7 @@ import useCurrentAccount from 'hooks/useCurrentAccount'
 import useHealthComputer from 'hooks/useHealthComputer'
 import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
 import usePrices from 'hooks/usePrices'
+import useToggle from 'hooks/useToggle'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import {
@@ -35,18 +39,20 @@ interface Props {
 }
 
 function AccountDetails(props: Props) {
+  const { account } = props
   const updatedAccount = useStore((s) => s.updatedAccount)
-  const { health } = useHealthComputer(props.account)
+  const [isExpanded, setIsExpanded] = useToggle()
+  const { health } = useHealthComputer(account)
   const { health: updatedHealth } = useHealthComputer(updatedAccount)
   const { data: prices } = usePrices()
   const accountBalanceValue = useMemo(
-    () => calculateAccountBalanceValue(updatedAccount ? updatedAccount : props.account, prices),
+    () => calculateAccountBalanceValue(updatedAccount ? updatedAccount : account, prices),
-    [updatedAccount, props.account, prices],
+    [updatedAccount, account, prices],
   )
   const coin = BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, accountBalanceValue)
   const leverage = useMemo(
-    () => calculateAccountLeverage(updatedAccount ? updatedAccount : props.account, prices),
+    () => calculateAccountLeverage(updatedAccount ? updatedAccount : account, prices),
-    [props.account, updatedAccount, prices],
+    [account, updatedAccount, prices],
   )
   const { availableAssets: borrowAvailableAssets, accountBorrowedAssets } =
     useBorrowMarketAssetsTableData()
@@ -63,76 +69,110 @@ function AccountDetails(props: Props) {
   const apr = useMemo(
     () =>
       calculateAccountApr(
-        props.account,
+        account,
         accountBalanceValue,
         borrowAssetsData,
         lendingAssetsData,
         prices,
       ),
-    [props.account, accountBalanceValue, borrowAssetsData, lendingAssetsData, prices],
+    [account, accountBalanceValue, borrowAssetsData, lendingAssetsData, prices],
   )
   return (
     <div
       data-testid='account-details'
-      className='w-16 border rounded-base border-white/20 bg-white/5 backdrop-blur-sticky'
+      className={classNames(
+        isExpanded ? 'right-6' : '-right-80',
+        'w-100 flex items-start gap-6 absolute top-6',
+        'transition-all duration-300',
+      )}
     >
-      <div className='flex flex-wrap justify-center w-full py-4'>
+      <div
-        <Gauge tooltip='Health Factor' percentage={health} icon={<Heart />} />
+        className={classNames(
-        <Text size='2xs' className='mb-0.5 mt-1 w-full text-center text-white/50'>
+          'flex flex-wrap w-16 group/details relative',
-          Health
+          'border rounded-base border-white/20',
-        </Text>
+          'bg-white/5 backdrop-blur-sticky transition-colors duration-300',
-        <div className='flex'>
+          'hover:bg-white/20 hover:cursor-pointer ',
-          <FormattedNumber
+        )}
-            className={'w-full text-center text-xs'}
+        onClick={() => setIsExpanded(!isExpanded)}
-            amount={health}
+      >
-            options={{ maxDecimals: 0, minDecimals: 0, suffix: '%' }}
+        <div
-            animate
+          className={classNames(
-          />
+            'absolute block opacity-0 top-1/2 transition-[opacity]',
-          {updatedHealth > 0 && health !== updatedHealth && (
+            'group-hover/details:opacity-100 duration-300 delay-100',
-            <>
+            isExpanded ? '-right-4' : '-right-3',
-              <ArrowRight
-                width={16}
-                className={classNames(health > updatedHealth ? 'text-loss' : 'text-success')}
-              />
-              <FormattedNumber
-                className={'w-full text-center text-xs'}
-                amount={updatedHealth}
-                options={{ maxDecimals: 0, minDecimals: 0, suffix: '%' }}
-                animate
-              />
-            </>
           )}
+        >
+          {isExpanded ? <ChevronRight className='w-2' /> : <ChevronLeft className='w-2' />}
         </div>
-      </div>
+        <div className='flex flex-wrap justify-center w-full py-4'>
-      <div className='w-full py-4 border-t border-white/20'>
+          <Gauge tooltip='Health Factor' percentage={health} icon={<Heart />} />
-        <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
+          <Text size='2xs' className='mb-0.5 mt-1 w-full text-center text-white/50'>
-          Leverage
+            Health
-        </Text>
+          </Text>
-        <Text size='2xs' className='text-center'>
+          <div className='flex'>
+            <FormattedNumber
+              className={'w-full text-center text-xs'}
+              amount={health}
+              options={{ maxDecimals: 0, minDecimals: 0, suffix: '%' }}
+              animate
+            />
+            {updatedHealth > 0 && health !== updatedHealth && (
+              <>
+                <ArrowRight
+                  width={16}
+                  className={classNames(health > updatedHealth ? 'text-loss' : 'text-success')}
+                />
+                <FormattedNumber
+                  className={'w-full text-center text-xs'}
+                  amount={updatedHealth}
+                  options={{ maxDecimals: 0, minDecimals: 0, suffix: '%' }}
+                  animate
+                />
+              </>
+            )}
+          </div>
+        </div>
+        <div className='w-full py-4 border-t border-white/20'>
+          <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
+            Leverage
+          </Text>
+          <Text size='2xs' className='text-center'>
+            <FormattedNumber
+              className={'w-full text-center text-2xs'}
+              amount={leverage.toNumber()}
+              options={{ maxDecimals: 2, minDecimals: 2, suffix: 'x' }}
+              animate
+            />
+          </Text>
+        </div>
+        <div className='w-full py-4 border-t border-white/20'>
+          <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
+            Net worth
+          </Text>
+          <DisplayCurrency coin={coin} className='w-full text-center truncate text-2xs ' />
+        </div>
+        <div className='w-full py-4 border-t border-white/20'>
+          <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
+            APR
+          </Text>
           <FormattedNumber
             className={'w-full text-center text-2xs'}
-            amount={leverage.toNumber()}
+            amount={apr.toNumber()}
-            options={{ maxDecimals: 2, minDecimals: 2, suffix: 'x' }}
+            options={{ maxDecimals: 2, minDecimals: 2, suffix: '%' }}
             animate
           />
-        </Text>
+        </div>
       </div>
-      <div className='w-full py-4 border-t border-white/20'>
+      <div className='flex w-80'>
-        <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
+        <Card className='w-full bg-white/5' title={`Account ${account.id}`}>
-          Net worth
+          <AccountComposition account={account} />
-        </Text>
+          <Text className='w-full px-4 py-2 bg-white/10 text-white/40'>Balances</Text>
-        <DisplayCurrency coin={coin} className='w-full text-center truncate text-2xs ' />
+          <AccountBalancesTable
-      </div>
+            account={account}
-      <div className='w-full py-4 border-t border-white/20'>
+            borrowingData={borrowAssetsData}
-        <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
+            lendingData={lendingAssetsData}
-          APR
+          />
-        </Text>
+        </Card>
-        <FormattedNumber
-          className={'w-full text-center text-2xs'}
-          amount={apr.toNumber()}
-          options={{ maxDecimals: 2, minDecimals: 2, suffix: '%' }}
-          animate
-        />
       </div>
     </div>
   )

src/components/Account/AccountOverview.tsx

@@ -48,7 +48,7 @@ function Content() {
       {account.map((account: Account, index: number) => (
         <Card className='w-full h-fit bg-white/5' title={`Account ${account.id}`} key={index}>
           <AccountComposition account={account} />
-          <Text className='w-full px-4 py-2 mt-3 bg-white/10 text-white/40'>Balances</Text>
+          <Text className='w-full px-4 py-2 bg-white/10 text-white/40'>Balances</Text>
           <AccountBalancesTable
             account={account}
             borrowingData={borrowAssetsData}

src/components/Modals/FundWithdraw/FundAccount.tsx

@@ -91,7 +91,7 @@ export default function FundAccount(props: Props) {
         if (assetToUpdateIdx > -1) {
           prevAssets[assetToUpdateIdx].amount = amount
         }
-        setChange({ [isAutoLendEnabled ? "lends" : "deposits"]: prevAssets })
+        setChange({ [isAutoLendEnabled ? 'lends' : 'deposits']: prevAssets })
         return prevAssets
       })
     },
@@ -99,7 +99,7 @@ export default function FundAccount(props: Props) {
   )
 
   useEffect(() => {
-    setChange({ [isAutoLendEnabled ? "lends" : "deposits"]: fundingAssets })
+    setChange({ [isAutoLendEnabled ? 'lends' : 'deposits']: fundingAssets })
   }, [isAutoLendEnabled, fundingAssets, setChange])
 
   useEffect(() => {

src/pages/_layout.tsx

@@ -48,7 +48,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         className={classNames(
           'lg:min-h-[calc(100vh-65px)]',
           'lg:mt-[65px]',
-          'min-h-screen gap-6 p-6 w-full',
+          'min-h-screen gap-6 p-6 w-full relative',
           focusComponent || isMobile
             ? 'flex justify-center'
             : 'grid grid-cols-[auto_min-content] place-items-start',