mango-v4-ui/components/settings/AccountSettings.tsx

import MangoAccountSizeModal, {
  MAX_ACCOUNTS,
} from '@components/modals/MangoAccountSizeModal'
import { LinkButton } from '@components/shared/Button'
import TokenLogo from '@components/shared/TokenLogo'
import Tooltip from '@components/shared/Tooltip'
import MarketLogos from '@components/trade/MarketLogos'
import { Disclosure } from '@headlessui/react'
import { ChevronDownIcon, SquaresPlusIcon } from '@heroicons/react/20/solid'
import useMangoAccount from 'hooks/useMangoAccount'
import useMangoAccountAccounts, {
  getAvaialableAccountsColor,
} from 'hooks/useMangoAccountAccounts'
import useMangoGroup from 'hooks/useMangoGroup'
import { useTranslation } from 'next-i18next'
import { useState } from 'react'

const AccountSettings = () => {
  const { t } = useTranslation(['common', 'settings'])
  const { mangoAccountAddress } = useMangoAccount()
  const { group } = useMangoGroup()
  const [showAccountSizeModal, setShowAccountSizeModal] = useState(false)
  const {
    usedTokens,
    usedSerum3,
    usedPerps,
    usedPerpOo,
    totalTokens,
    totalSerum3,
    totalPerps,
    totalPerpOpenOrders,
    isAccountFull,
  } = useMangoAccountAccounts()

  return mangoAccountAddress && group ? (
    <>
      <h2 className="mb-4 text-base">{t('account')}</h2>
      <div className="mb-4 flex items-center justify-between md:px-4">
        <h3 className="text-sm text-th-fgd-2">{t('settings:account-size')}</h3>
        {!isAccountFull ? (
          <LinkButton
            className="flex items-center"
            onClick={() => setShowAccountSizeModal(true)}
          >
            <SquaresPlusIcon className="mr-1.5 h-4 w-4" />
            {t('settings:increase-account-size')}
          </LinkButton>
        ) : null}
      </div>
      <Disclosure>
        {({ open }) => (
          <>
            <Disclosure.Button className="w-full border-t border-th-bkg-3 py-4 md:px-4">
              <div className="flex items-center justify-between">
                <Tooltip
                  content={t('settings:tooltip-token-accounts', {
                    max: MAX_ACCOUNTS.tokenAccounts,
                  })}
                >
                  <p className="tooltip-underline">{t('tokens')}</p>
                </Tooltip>
                <div className="flex items-center space-x-2">
                  <p className="font-mono">
                    <span
                      className={getAvaialableAccountsColor(
                        usedTokens.length,
                        totalTokens.length,
                      )}
                    >{`${usedTokens.length}/${totalTokens.length}`}</span>
                  </p>
                  <ChevronDownIcon
                    className={`${
                      open ? 'rotate-180' : 'rotate-360'
                    } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
                  />
                </div>
              </div>
            </Disclosure.Button>
            <Disclosure.Panel className="pb-2 md:px-4">
              {usedTokens.length ? (
                usedTokens.map((token, i) => {
                  const tokenBank = group.getFirstBankByTokenIndex(
                    token.tokenIndex,
                  )
                  return (
                    <div
                      className="mb-2 flex items-center"
                      key={token.tokenIndex}
                    >
                      <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
                      <TokenLogo bank={tokenBank} size={20} />
                      <p className="ml-2 text-th-fgd-2">{tokenBank.name}</p>
                    </div>
                  )
                })
              ) : (
                <p className="mb-2 text-center">
                  {t('notifications:empty-state-title')}...
                </p>
              )}
            </Disclosure.Panel>
          </>
        )}
      </Disclosure>
      <Disclosure>
        {({ open }) => (
          <>
            <Disclosure.Button className="w-full border-t border-th-bkg-3 py-4 md:px-4">
              <div className="flex items-center justify-between">
                <Tooltip
                  content={t('settings:tooltip-spot-open-orders', {
                    max: MAX_ACCOUNTS.spotOpenOrders,
                  })}
                >
                  <p className="tooltip-underline mb-2 md:mb-0">
                    {t('settings:spot-open-orders')}
                  </p>
                </Tooltip>
                <div className="flex items-center space-x-2">
                  <p className="font-mono">
                    <span
                      className={getAvaialableAccountsColor(
                        usedSerum3.length,
                        totalSerum3.length,
                      )}
                      key="spotOpenOrders"
                    >{`${usedSerum3.length}/${totalSerum3.length}`}</span>
                  </p>
                  <ChevronDownIcon
                    className={`${
                      open ? 'rotate-180' : 'rotate-360'
                    } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
                  />
                </div>
              </div>
            </Disclosure.Button>
            <Disclosure.Panel className="pb-2 md:px-4">
              {usedSerum3.length ? (
                usedSerum3.map((mkt, i) => {
                  const market = group.getSerum3MarketByMarketIndex(
                    mkt.marketIndex,
                  )
                  return (
                    <div
                      className="mb-2 flex items-center"
                      key={mkt.marketIndex}
                    >
                      <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
                      <MarketLogos market={market} />
                      <p className="text-th-fgd-2">{market.name}</p>
                    </div>
                  )
                })
              ) : (
                <p className="mb-2 text-center">
                  {t('notifications:empty-state-title')}...
                </p>
              )}
            </Disclosure.Panel>
          </>
        )}
      </Disclosure>
      <Disclosure>
        {({ open }) => (
          <>
            <Disclosure.Button className="w-full border-t border-th-bkg-3 py-4 md:px-4">
              <div className="flex items-center justify-between">
                <Tooltip
                  content={t('settings:tooltip-perp-positions', {
                    max: MAX_ACCOUNTS.perpAccounts,
                  })}
                >
                  <p className="tooltip-underline mb-2 md:mb-0">
                    {t('settings:perp-positions')}
                  </p>
                </Tooltip>
                <div className="flex items-center space-x-2">
                  <p className="font-mono">
                    <span
                      className={getAvaialableAccountsColor(
                        usedPerps.length,
                        totalPerps.length,
                      )}
                    >{`${usedPerps.length}/${totalPerps.length}`}</span>
                  </p>
                  <ChevronDownIcon
                    className={`${
                      open ? 'rotate-180' : 'rotate-360'
                    } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
                  />
                </div>
              </div>
            </Disclosure.Button>
            <Disclosure.Panel className="pb-2 md:px-4">
              {usedPerps.length ? (
                usedPerps.map((perp, i) => {
                  const market = group.getPerpMarketByMarketIndex(
                    perp.marketIndex,
                  )
                  return (
                    <div
                      className="mb-2 flex items-center"
                      key={perp.marketIndex}
                    >
                      <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
                      <MarketLogos market={market} />
                      <p className="text-th-fgd-2">{market.name}</p>
                    </div>
                  )
                })
              ) : (
                <p className="mb-2 text-center">
                  {t('notifications:empty-state-title')}...
                </p>
              )}
            </Disclosure.Panel>
          </>
        )}
      </Disclosure>
      <Disclosure>
        {({ open }) => (
          <>
            <Disclosure.Button className="w-full border-t border-th-bkg-3 py-4 md:px-4">
              <div className="flex items-center justify-between">
                <Tooltip
                  content={t('settings:tooltip-perp-open-orders', {
                    max: MAX_ACCOUNTS.perpOpenOrders,
                  })}
                >
                  <p className="tooltip-underline mb-2 md:mb-0">
                    {t('settings:perp-open-orders')}
                  </p>
                </Tooltip>
                <div className="flex items-center space-x-2">
                  <p className="font-mono">
                    <span
                      className={getAvaialableAccountsColor(
                        usedPerpOo.length,
                        totalPerpOpenOrders.length,
                      )}
                    >{`${usedPerpOo.length}/${totalPerpOpenOrders.length}`}</span>
                  </p>
                  <ChevronDownIcon
                    className={`${
                      open ? 'rotate-180' : 'rotate-360'
                    } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
                  />
                </div>
              </div>
            </Disclosure.Button>
            <Disclosure.Panel className="pb-2 md:px-4">
              {usedPerpOo.length ? (
                usedPerpOo.map((perp, i) => {
                  const market = group.getPerpMarketByMarketIndex(
                    perp.orderMarket,
                  )
                  return (
                    <div
                      className="mb-2 flex items-center"
                      key={perp.orderMarket}
                    >
                      <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
                      <MarketLogos market={market} />
                      <p className="text-th-fgd-2">{market.name}</p>
                    </div>
                  )
                })
              ) : (
                <p className="mb-2 text-center">
                  {t('notifications:empty-state-title')}...
                </p>
              )}
            </Disclosure.Panel>
          </>
        )}
      </Disclosure>
      {/* 
      <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
        <Tooltip
          content={t('settings:tooltip-perp-open-orders', {
            max: MAX_ACCOUNTS.perpOpenOrders,
          })}
        >
          <p className="tooltip-underline mb-2 md:mb-0">
            {t('settings:perp-open-orders')}
          </p>
        </Tooltip>
        <p className="font-mono text-th-fgd-2">{availablePerpOo}</p>
      </div> */}
      {showAccountSizeModal ? (
        <MangoAccountSizeModal
          isOpen={showAccountSizeModal}
          onClose={() => setShowAccountSizeModal(false)}
        />
      ) : null}
    </>
  ) : null
}

export default AccountSettings