Merge pull request #86 from blockworks-foundation/assets-and-liabilities

add assets and liabilities breakdown to account page

components/account/AccountPage.tsx

@@ -43,6 +43,11 @@ import useMangoGroup from 'hooks/useMangoGroup'
 import PnlHistoryModal from '@components/modals/PnlHistoryModal'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import HealthBar from './HealthBar'
+const AssetsLiabilities = dynamic(() => import('./AssetsLiabilities'), {
+  ssr: false,
+})
+
+const TABS = ['account-value', 'account:assets-liabilities']
 import { PerformanceDataItem } from 'types'
 
 const AccountPage = () => {
@@ -73,6 +78,10 @@ const AccountPage = () => {
     ANIMATION_SETTINGS_KEY,
     INITIAL_ANIMATION_SETTINGS
   )
+  const [activeTab, setActiveTab] = useLocalStorageState(
+    'accountHeroKey-0.1',
+    'account-value'
+  )
 
   useEffect(() => {
     if (mangoAccountAddress || (!mangoAccountAddress && connected)) {
@@ -221,99 +230,119 @@ const AccountPage = () => {
 
   return !chartToShow ? (
     <>
-      <div className="flex flex-col border-b-0 border-th-bkg-3 px-6 py-3 lg:flex-row lg:items-center lg:justify-between lg:border-b">
-        <div className="flex flex-col md:flex-row md:items-center md:space-x-6">
-          <div id="account-step-three">
-            <Tooltip
-              maxWidth="20rem"
-              placement="bottom-start"
-              content="The value of your assets (deposits) minus the value of your liabilities (borrows)."
-              delay={250}
-            >
-              <p className="tooltip-underline mb-2 text-base">
-                {t('account-value')}
-              </p>
-            </Tooltip>
-            <div className="mb-2 flex items-center font-display text-5xl text-th-fgd-1">
-              {animationSettings['number-scroll'] ? (
-                group && mangoAccount ? (
-                  <FlipNumbers
-                    height={48}
-                    width={35}
-                    play
-                    delay={0.05}
-                    duration={1}
-                    numbers={formatCurrencyValue(accountValue, 2)}
-                  />
-                ) : (
-                  <FlipNumbers
-                    height={48}
-                    width={36}
-                    play
-                    delay={0.05}
-                    duration={1}
-                    numbers={'$0.00'}
-                  />
-                )
-              ) : (
-                <FormatNumericValue value={accountValue} isUsd decimals={2} />
-              )}
-            </div>
-            <div className="flex items-center space-x-1.5">
-              <Change change={accountValueChange} prefix="$" />
-              <p className="text-xs text-th-fgd-4">{t('rolling-change')}</p>
-            </div>
-          </div>
-          {!performanceLoading ? (
-            oneDayPerformanceData.length ? (
-              <div
-                className="relative mt-4 flex h-40 items-end md:mt-0 md:h-24 md:w-48"
-                onMouseEnter={() =>
-                  onHoverMenu(showExpandChart, 'onMouseEnter')
-                }
-                onMouseLeave={() =>
-                  onHoverMenu(showExpandChart, 'onMouseLeave')
-                }
+      <div className="flex flex-col border-b-0 border-th-bkg-3 px-6 py-4 lg:flex-row lg:items-center lg:justify-between lg:border-b">
+        <div>
+          <div className="hide-scroll flex justify-center space-x-2 md:justify-start">
+            {TABS.map((tab) => (
+              <button
+                className={`default-transition rounded-md py-1.5 px-2.5 text-sm font-medium md:hover:text-th-fgd-2 ${
+                  activeTab === tab
+                    ? 'bg-th-bkg-3 text-th-active'
+                    : 'text-th-fgd-3'
+                }`}
+                onClick={() => setActiveTab(tab)}
+                key={tab}
               >
-                <SimpleAreaChart
-                  color={
-                    accountValueChange >= 0
-                      ? COLORS.UP[theme]
-                      : COLORS.DOWN[theme]
-                  }
-                  data={oneDayPerformanceData.concat(latestAccountData)}
-                  name="accountValue"
-                  xKey="time"
-                  yKey="account_equity"
-                />
-                <Transition
-                  appear={true}
-                  className="absolute right-2 bottom-2"
-                  show={showExpandChart || isMobile}
-                  enter="transition ease-in duration-300"
-                  enterFrom="opacity-0 scale-75"
-                  enterTo="opacity-100 scale-100"
-                  leave="transition ease-out duration-200"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <IconButton
-                    className="text-th-fgd-3"
-                    hideBg
-                    onClick={() => handleShowAccountValueChart()}
-                  >
-                    <ArrowsPointingOutIcon className="h-5 w-5" />
-                  </IconButton>
-                </Transition>
+                {t(tab)}
+              </button>
+            ))}
+          </div>
+          <div className="md:h-24">
+            {activeTab === 'account-value' ? (
+              <div className="flex flex-col md:flex-row md:items-end md:space-x-6">
+                <div className="mx-auto mt-4 md:mx-0">
+                  <div className="mb-2 flex justify-start font-display text-5xl text-th-fgd-1">
+                    {animationSettings['number-scroll'] ? (
+                      group && mangoAccount ? (
+                        <FlipNumbers
+                          height={48}
+                          width={35}
+                          play
+                          delay={0.05}
+                          duration={1}
+                          numbers={formatCurrencyValue(accountValue, 2)}
+                        />
+                      ) : (
+                        <FlipNumbers
+                          height={48}
+                          width={36}
+                          play
+                          delay={0.05}
+                          duration={1}
+                          numbers={'$0.00'}
+                        />
+                      )
+                    ) : (
+                      <FormatNumericValue
+                        value={accountValue}
+                        isUsd
+                        decimals={2}
+                      />
+                    )}
+                  </div>
+                  <div className="flex items-center justify-center space-x-1.5 md:justify-start">
+                    <Change change={accountValueChange} prefix="$" />
+                    <p className="text-xs text-th-fgd-4">
+                      {t('rolling-change')}
+                    </p>
+                  </div>
+                </div>
+                {!performanceLoading ? (
+                  oneDayPerformanceData.length ? (
+                    <div
+                      className="relative mt-4 flex h-40 items-end md:mt-0 md:h-20 md:w-52 lg:w-60"
+                      onMouseEnter={() =>
+                        onHoverMenu(showExpandChart, 'onMouseEnter')
+                      }
+                      onMouseLeave={() =>
+                        onHoverMenu(showExpandChart, 'onMouseLeave')
+                      }
+                    >
+                      <SimpleAreaChart
+                        color={
+                          accountValueChange >= 0
+                            ? COLORS.UP[theme]
+                            : COLORS.DOWN[theme]
+                        }
+                        data={oneDayPerformanceData.concat(latestAccountData)}
+                        name="accountValue"
+                        xKey="time"
+                        yKey="account_equity"
+                      />
+                      <Transition
+                        appear={true}
+                        className="absolute right-2 bottom-2"
+                        show={showExpandChart || isMobile}
+                        enter="transition ease-in duration-300"
+                        enterFrom="opacity-0 scale-75"
+                        enterTo="opacity-100 scale-100"
+                        leave="transition ease-out duration-200"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                      >
+                        <IconButton
+                          className="text-th-fgd-3"
+                          hideBg
+                          onClick={() => handleShowAccountValueChart()}
+                        >
+                          <ArrowsPointingOutIcon className="h-5 w-5" />
+                        </IconButton>
+                      </Transition>
+                    </div>
+                  ) : null
+                ) : mangoAccountAddress ? (
+                  <SheenLoader className="mt-4 flex flex-1 md:mt-0">
+                    <div className="h-40 w-full rounded-md bg-th-bkg-2 md:h-20 md:w-52 lg:w-60" />
+                  </SheenLoader>
+                ) : null}
               </div>
-            ) : null
-          ) : mangoAccountAddress ? (
-            <SheenLoader className="mt-4 flex flex-1 md:mt-0">
-              <div className="h-40 w-full rounded-md bg-th-bkg-2 md:h-24 md:w-48" />
-            </SheenLoader>
-          ) : null}
+            ) : null}
+            {activeTab === 'account:assets-liabilities' ? (
+              <AssetsLiabilities isMobile={isMobile} />
+            ) : null}
+          </div>
         </div>
-        <div className="mt-6 mb-1 lg:mt-0 lg:mb-0">
+        <div className="mt-6 mb-1 lg:mt-0">
           <AccountActions />
         </div>
       </div>

components/account/AssetsLiabilities.tsx

@@ -0,0 +1,133 @@
+import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
+import useMangoAccount from 'hooks/useMangoAccount'
+import useMangoGroup from 'hooks/useMangoGroup'
+import { useTranslation } from 'next-i18next'
+import { useTheme } from 'next-themes'
+import { useMemo } from 'react'
+import { Cell, Pie, PieChart } from 'recharts'
+import { COLORS } from 'styles/colors'
+import { formatCurrencyValue } from 'utils/numbers'
+import FlipNumbers from 'react-flip-numbers'
+import useLocalStorageState from 'hooks/useLocalStorageState'
+import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
+import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
+
+const AssetsLiabilities = ({ isMobile }: { isMobile: boolean }) => {
+  const { t } = useTranslation('account')
+  const { group } = useMangoGroup()
+  const { mangoAccount } = useMangoAccount()
+  const { theme } = useTheme()
+  const [animationSettings] = useLocalStorageState(
+    ANIMATION_SETTINGS_KEY,
+    INITIAL_ANIMATION_SETTINGS
+  )
+
+  const [assetsValue, assetsRatio, liabsValue, liabsRatio] = useMemo(() => {
+    if (!group || !mangoAccount) return [0, 0, 0, 0]
+    const assets = toUiDecimalsForQuote(mangoAccount.getAssetsValue(group))
+    const liabs = toUiDecimalsForQuote(mangoAccount.getLiabsValue(group))
+    const assetsRatio = (assets / (assets + liabs)) * 100
+    const liabsRatio = 100 - assetsRatio
+    return [assets, assetsRatio, liabs, liabsRatio]
+  }, [group, mangoAccount])
+
+  const chartData = useMemo(() => {
+    return [
+      { name: 'assets', value: assetsValue },
+      { name: 'liabilities', value: liabsValue },
+    ]
+  }, [assetsValue, liabsValue])
+
+  const pieSizes = isMobile
+    ? { size: 160, outerRadius: 80, innerRadius: 64 }
+    : { size: 80, outerRadius: 40, innerRadius: 30 }
+  const { size, outerRadius, innerRadius } = pieSizes
+
+  return (
+    <div className="flex flex-col items-center pt-4 md:flex-row md:space-x-4">
+      {mangoAccount ? (
+        <PieChart width={size} height={size}>
+          <Pie
+            cursor="pointer"
+            data={chartData}
+            dataKey="value"
+            cx="50%"
+            cy="50%"
+            outerRadius={outerRadius}
+            innerRadius={innerRadius}
+            minAngle={2}
+            startAngle={90}
+            endAngle={450}
+          >
+            {chartData.map((entry, index) => {
+              const fillColor =
+                entry.name === 'assets' ? COLORS.UP[theme] : COLORS.DOWN[theme]
+              return (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={fillColor}
+                  stroke={COLORS.BKG1[theme]}
+                  strokeWidth={2}
+                />
+              )
+            })}
+          </Pie>
+        </PieChart>
+      ) : (
+        <div className="h-20 w-20 rounded-full ring-[8px] ring-inset ring-th-bkg-3" />
+      )}
+      <div className="mt-3 flex space-x-6 md:mt-0">
+        <div className="flex flex-col items-center md:items-start">
+          <p className="text-base">
+            {t('assets')}
+            <span className="ml-2 rounded border border-th-up px-1 py-0.5 text-xxs text-th-up">
+              {assetsRatio.toFixed()}%
+            </span>
+          </p>
+          {animationSettings['number-scroll'] ? (
+            <div className="font-display text-2xl text-th-fgd-1 sm:text-4xl">
+              <FlipNumbers
+                height={38}
+                width={30}
+                play
+                delay={0.05}
+                duration={1}
+                numbers={formatCurrencyValue(assetsValue, 2)}
+              />
+            </div>
+          ) : (
+            <p className="font-display text-2xl text-th-fgd-1 sm:text-4xl">
+              {formatCurrencyValue(assetsValue, 2)}
+            </p>
+          )}
+        </div>
+        <div className="flex flex-col items-center md:items-start">
+          <p className="text-base">
+            {t('liabilities')}
+            <span className="ml-2 rounded border border-th-down px-1 py-0.5 text-xxs text-th-down">
+              {liabsRatio.toFixed()}%
+            </span>
+          </p>
+          {animationSettings['number-scroll'] ? (
+            <div className="font-display text-2xl text-th-fgd-1 sm:text-4xl">
+              <FlipNumbers
+                height={38}
+                width={30}
+                play
+                delay={0.05}
+                duration={1}
+                numbers={formatCurrencyValue(liabsValue, 2)}
+              />
+            </div>
+          ) : (
+            <p className="font-display text-2xl text-th-fgd-1 sm:text-4xl">
+              {formatCurrencyValue(liabsValue, 2)}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AssetsLiabilities

public/locales/en/account.json

@@ -1,4 +1,7 @@
 {
+    "assets": "Assets",
+    "assets-liabilities": "Assets & Liabilities",
+    "liabilities": "Liabilities",
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",

public/locales/en/common.json

@@ -56,11 +56,13 @@
   "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
+  "delete": "Delete",
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
   "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
+  "edit": "Edit",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",
   "explorer": "Explorer",
@@ -88,6 +90,7 @@
   "max": "Max",
   "max-borrow": "Max Borrow",
   "more": "More",
+  "new": "New",
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",

public/locales/es/account.json

@@ -1,4 +1,7 @@
 {
+    "assets": "Assets",
+    "assets-liabilities": "Assets & Liabilities",
+    "liabilities": "Liabilities",
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",

public/locales/es/common.json

@@ -56,11 +56,13 @@
   "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
+  "delete": "Delete",
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
   "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
+  "edit": "Edit",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",
   "explorer": "Explorer",
@@ -87,6 +89,7 @@
   "max": "Max",
   "max-borrow": "Max Borrow",
   "more": "More",
+  "new": "New",
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",

public/locales/ru/account.json

@@ -1,4 +1,7 @@
 {
+    "assets": "Assets",
+    "assets-liabilities": "Assets & Liabilities",
+    "liabilities": "Liabilities",
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",

public/locales/ru/common.json

@@ -56,11 +56,13 @@
   "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
+  "delete": "Delete",
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
   "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
+  "edit": "Edit",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",
   "explorer": "Explorer",
@@ -87,6 +89,7 @@
   "max": "Max",
   "max-borrow": "Max Borrow",
   "more": "More",
+  "new": "New",
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",

public/locales/zh/account.json

@@ -1,4 +1,7 @@
 {
+    "assets": "Assets",
+    "assets-liabilities": "Assets & Liabilities",
+    "liabilities": "Liabilities",
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",

public/locales/zh/common.json

@@ -56,11 +56,13 @@
   "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
+  "delete": "Delete",
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
   "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
+  "edit": "Edit",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",
   "explorer": "Explorer",
@@ -87,6 +89,7 @@
   "max": "Max",
   "max-borrow": "Max Borrow",
   "more": "More",
+  "new": "New",
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",

public/locales/zh_tw/account.json

@@ -1,4 +1,7 @@
 {
+    "assets": "Assets",
+    "assets-liabilities": "Assets & Liabilities",
+    "liabilities": "Liabilities",
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",

public/locales/zh_tw/common.json

@@ -56,11 +56,13 @@
   "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
+  "delete": "Delete",
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
   "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
+  "edit": "Edit",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",
   "explorer": "Explorer",
@@ -87,6 +89,7 @@
   "max": "Max",
   "max-borrow": "Max Borrow",
   "more": "More",
+  "new": "New",
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",