add ability to show/hide account value and pnl

2023-01-23 11:34:52 +11:00 · 2023-01-23 11:34:52 +11:00 · c27fe43835
parent c499a0b514
commit c27fe43835
3 changed files with 112 additions and 53 deletions
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@ -20,6 +20,8 @@ import {
  ArrowsPointingOutIcon,
  ChartBarIcon,
  ClockIcon,
+  EyeIcon,
+  EyeSlashIcon,
 } from '@heroicons/react/20/solid'
 import { Transition } from '@headlessui/react'
 import AccountTabs from './AccountTabs'
@ -30,6 +32,8 @@ import Change from '../shared/Change'
 import Tooltip from '@components/shared/Tooltip'
 import {
  ANIMATION_SETTINGS_KEY,
+  HIDE_ACCOUNT_VALUE_KEY,
+  HIDE_PNL_KEY,
  // IS_ONBOARDED_KEY
 } from 'utils/constants'
 // import { useWallet } from '@solana/wallet-adapter-react'
@ -72,6 +76,11 @@ const AccountPage = () => {
    ANIMATION_SETTINGS_KEY,
    INITIAL_ANIMATION_SETTINGS
  )
+  const [hideAccountValue, setHideAccountValue] = useLocalStorageState(
+    HIDE_ACCOUNT_VALUE_KEY,
+    false
+  )
+  const [hidePnl, setHidePnl] = useLocalStorageState(HIDE_PNL_KEY, false)

  useEffect(() => {
    if (mangoAccountAddress) {
@ -232,53 +241,74 @@ const AccountPage = () => {
      <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={formatFixedDecimals(accountValue, true, true)}
-                  />
+            <div className="mb-2 flex items-center space-x-2">
+              <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 text-base">
+                  {t('account-value')}
+                </p>
+              </Tooltip>
+              <IconButton
+                className="text-th-fgd-4"
+                hideBg
+                onClick={() => setHideAccountValue(!hideAccountValue)}
+              >
+                {hideAccountValue ? (
+                  <EyeSlashIcon className="h-4 w-4" />
                ) : (
-                  <FlipNumbers
-                    height={48}
-                    width={36}
-                    play
-                    delay={0.05}
-                    duration={1}
-                    numbers={'$0.00'}
-                  />
+                  <EyeIcon className="h-4 w-4" />
+                )}
+              </IconButton>
+            </div>
+            <div className="mb-2 flex items-center font-display text-5xl text-th-fgd-1">
+              {!hideAccountValue ? (
+                animationSettings['number-scroll'] ? (
+                  group && mangoAccount ? (
+                    <FlipNumbers
+                      height={48}
+                      width={35}
+                      play
+                      delay={0.05}
+                      duration={1}
+                      numbers={formatFixedDecimals(accountValue, true, true)}
+                    />
+                  ) : (
+                    <FlipNumbers
+                      height={48}
+                      width={36}
+                      play
+                      delay={0.05}
+                      duration={1}
+                      numbers={'$0.00'}
+                    />
+                  )
+                ) : (
+                  <span>{formatFixedDecimals(accountValue, true, true)}</span>
                )
              ) : (
-                <span>{formatFixedDecimals(accountValue, true, true)}</span>
+                <span className={!mangoAccount ? 'mb-1' : ''}>*****</span>
              )}
            </div>
            <div className="flex items-center space-x-1.5">
-              <Change
-                change={Number(formatDecimal(accountValueChange, 2))}
-                prefix="$"
-              />
+              {!hideAccountValue ? (
+                <Change
+                  change={Number(formatDecimal(accountValueChange, 2))}
+                  prefix="$"
+                />
+              ) : (
+                <p>*****</p>
+              )}
              <p className="text-th-fgd-4">{t('today')}</p>
            </div>
          </div>
          {performanceInitialLoad ? (
-            oneDayPerformanceData.length ? (
+            !hideAccountValue && oneDayPerformanceData.length ? (
              <div
-                className="relative mt-4 flex h-44 items-end md:mt-0 md:h-24 md:w-48"
+                className="relative mt-4 flex h-40 items-end md:mt-0 md:h-24 md:w-48"
                onMouseEnter={() =>
                  onHoverMenu(showExpandChart, 'onMouseEnter')
                }
@ -443,15 +473,28 @@ const AccountPage = () => {
        <div className="col-span-5 border-t border-th-bkg-3 py-3 pl-6 pr-4 lg:col-span-1 lg:border-l lg:border-t-0">
          <div id="account-step-seven" className="flex flex-col items-start">
            <div className="flex w-full items-center justify-between">
-              <Tooltip
-                content={t('account:tooltip-pnl')}
-                placement="bottom"
-                delay={250}
-              >
-                <p className="tooltip-underline inline text-sm text-th-fgd-3 xl:text-base">
-                  {t('pnl')}
-                </p>
-              </Tooltip>
+              <div className="flex items-center space-x-2">
+                <Tooltip
+                  content={t('account:tooltip-pnl')}
+                  placement="bottom"
+                  delay={250}
+                >
+                  <p className="tooltip-underline inline text-sm text-th-fgd-3 xl:text-base">
+                    {t('pnl')}
+                  </p>
+                </Tooltip>
+                <IconButton
+                  className="text-th-fgd-4"
+                  hideBg
+                  onClick={() => setHidePnl(!hidePnl)}
+                >
+                  {hidePnl ? (
+                    <EyeSlashIcon className="h-4 w-4" />
+                  ) : (
+                    <EyeIcon className="h-4 w-4" />
+                  )}
+                </IconButton>
+              </div>
              {mangoAccountAddress ? (
                <div className="flex items-center space-x-3">
                  {performanceData.length > 4 ? (
@ -478,14 +521,18 @@ const AccountPage = () => {
              ) : null}
            </div>
            <p className="mt-1 mb-0.5 text-left text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
-              {formatFixedDecimals(accountPnl, true, true)}
+              {!hidePnl ? formatFixedDecimals(accountPnl, true, true) : '*****'}
            </p>
            <div className="flex space-x-1">
-              <Change
-                change={Number(formatDecimal(oneDayPnlChange, 2))}
-                prefix="$"
-                size="small"
-              />
+              {!hidePnl ? (
+                <Change
+                  change={Number(formatDecimal(oneDayPnlChange, 2))}
+                  prefix="$"
+                  size="small"
+                />
+              ) : (
+                <p className="leading-none">*****</p>
+              )}
              <p className="text-xs text-th-fgd-4">{t('today')}</p>
            </div>
          </div>
--- a/components/account/MangoAccountSummary.tsx
+++ b/components/account/MangoAccountSummary.tsx
@ -8,6 +8,8 @@ import { useTranslation } from 'next-i18next'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { useMemo } from 'react'
+import useLocalStorageState from 'hooks/useLocalStorageState'
+import { HIDE_ACCOUNT_VALUE_KEY, HIDE_PNL_KEY } from 'utils/constants'

 const SummaryItem = ({ label, value }: { label: string; value: string }) => {
  return (
@ -23,6 +25,8 @@ const MangoAccountSummary = () => {
  const { group } = useMangoGroup()
  const { mangoAccount } = useMangoAccount()
  const performanceData = mangoStore((s) => s.mangoAccount.performance.data)
+  const [hideAccountValue] = useLocalStorageState(HIDE_ACCOUNT_VALUE_KEY, true)
+  const [hidePnl] = useLocalStorageState(HIDE_PNL_KEY, true)

  const [accountValue, freeCollateral, health] = useMemo(() => {
    if (!group || !mangoAccount) return [0, 0, 0]
@ -58,7 +62,11 @@ const MangoAccountSummary = () => {
    <div className="space-y-2">
      <SummaryItem
        label={t('account-value')}
-        value={formatFixedDecimals(accountValue, true, true)}
+        value={
+          !hideAccountValue
+            ? formatFixedDecimals(accountValue, true, true)
+            : '*****'
+        }
      />
      <SummaryItem label={t('health')} value={`${health}%`} />
      <SummaryItem
@ -68,7 +76,7 @@ const MangoAccountSummary = () => {
      <SummaryItem label={t('leverage')} value={`${leverage.toFixed(2)}x`} />
      <SummaryItem
        label={t('pnl')}
-        value={formatFixedDecimals(pnl, true, true)}
+        value={!hidePnl ? formatFixedDecimals(pnl, true, true) : '*****'}
      />
    </div>
  )
--- a/utils/constants.ts
+++ b/utils/constants.ts
@ -45,6 +45,10 @@ export const RPC_PROVIDER_KEY = 'rpcProviderKey-0.4'

 export const PRIORITY_FEE_KEY = 'priorityFeeKey-0.1'

+export const HIDE_ACCOUNT_VALUE_KEY = 'hideAccountValue-0.1'
+
+export const HIDE_PNL_KEY = 'hidePnl-0.1'
+
 // Unused
 export const PROFILE_CATEGORIES = [
  'borrower',