back arrow mobile

2022-10-25 22:09:36 +11:00 · 2022-10-25 22:09:36 +11:00 · 598cddaa83
parent 08505b09bc a0a020f7aa
commit 598cddaa83
5 changed files with 94 additions and 81 deletions
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@ -75,12 +75,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
              isCollapsed ? 'md:pl-[64px]' : 'md:pl-44 lg:pl-48 xl:pl-52'
            }`}
          >
-            <div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 pl-6">
-              <img
-                className="mr-4 h-8 w-auto md:hidden"
-                src="/logos/logo-mark.svg"
-                alt="next"
-              />
+            <div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 pl-4 md:pl-6">
              <TopBar />
            </div>
            {children}
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@ -39,7 +39,7 @@ const TopBar = () => {
        <span className="mb-0 flex items-center">
          {query.token ? (
            <div
-              className={`mr-4 hidden h-16 items-center pr-6 md:flex ${
+              className={`mr-2 flex h-16 items-center pr-4 md:mr-4 md:pr-6 ${
                !connected || !mangoAccount ? 'border-r border-th-bkg-3' : ''
              }`}
            >
@ -48,6 +48,11 @@ const TopBar = () => {
              </IconButton>
            </div>
          ) : null}
+          <img
+            className="mr-4 ml-2 h-8 w-auto md:hidden"
+            src="/logos/logo-mark.svg"
+            alt="next"
+          />
          {!connected ? (
            <span className="hidden items-center md:flex">
              <WalletIcon className="h-5 w-5 text-th-fgd-3" />
@ -65,9 +70,8 @@ const TopBar = () => {
        </span>
        {connected ? (
          <div className="flex items-center space-x-4 pr-4 md:pr-0">
-            {/* <MangoAccountsList mangoAccount={mangoAccount} /> */}
            <button
-              className="mr-2"
+              className="mr-2 hidden md:block"
              onClick={() => setShowMangoAccountsModal(true)}
            >
              <p className="text-right text-xs">{t('accounts')}</p>
@ -93,7 +97,6 @@ const TopBar = () => {
        <MangoAccountsListModal
          isOpen={showMangoAccountsModal}
          onClose={() => setShowMangoAccountsModal(false)}
-          mangoAccount={mangoAccount}
        />
      ) : null}
      {showUserSetupModal ? (
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@ -208,7 +208,6 @@ const AccountPage = () => {
              </p>
            </Tooltip>
            <div className="mb-1 flex items-center text-5xl font-bold text-th-fgd-1">
-              $
              {group && mangoAccount ? (
                <FlipNumbers
                  height={48}
@ -217,7 +216,9 @@ const AccountPage = () => {
                  delay={0.05}
                  duration={1}
                  numbers={formatFixedDecimals(
-                    toUiDecimalsForQuote(mangoAccount.getEquity(group)!.toNumber()),
+                    toUiDecimalsForQuote(
+                      mangoAccount.getEquity(group)!.toNumber()
+                    ),
                    true
                  )}
                />
--- a/components/modals/MangoAccountsListModal.tsx
+++ b/components/modals/MangoAccountsListModal.tsx
@ -18,15 +18,16 @@ import CreateAccountForm from '@components/account/CreateAccountForm'
 import { EnterRightExitLeft } from '@components/shared/Transitions'

 const MangoAccountsListModal = ({
-  mangoAccount,
+  // mangoAccount,
  isOpen,
  onClose,
 }: {
-  mangoAccount: MangoAccount | undefined
+  // mangoAccount: MangoAccount | undefined
  isOpen: boolean
  onClose: () => void
 }) => {
  const { t } = useTranslation('common')
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const mangoAccounts = mangoStore((s) => s.mangoAccounts)
  const actions = mangoStore((s) => s.actions)
  const group = mangoStore((s) => s.group)
@ -61,73 +62,74 @@ const MangoAccountsListModal = ({
    <Modal isOpen={isOpen} onClose={onClose}>
      <div className="inline-block w-full transform overflow-x-hidden">
        <div className="flex min-h-[264px] flex-col justify-between">
-          <h2 className="text-center">{t('accounts')}</h2>
-          {loading ? (
-            <Loading />
-          ) : mangoAccounts.length ? (
-            <div className="thin-scroll mt-4 max-h-[280px] space-y-2 overflow-y-auto">
-              {mangoAccounts.map((acc) => {
-                const accountValue = formatFixedDecimals(
-                  toUiDecimalsForQuote(Number(acc.getEquity(group!))),
-                  true
-                )
-                const maintHealth = acc.getHealthRatioUi(
-                  group!,
-                  HealthType.maint
-                )
-                return (
-                  <div key={acc.publicKey.toString()}>
-                    <button
-                      onClick={() => handleSelectMangoAccount(acc)}
-                      className="default-transition flex w-full items-center justify-between rounded-md bg-th-bkg-2 p-4 text-th-fgd-1 hover:bg-th-bkg-3"
-                    >
-                      <div className="flex w-full items-center justify-between">
-                        <div className="text-left">
-                          <p className="mb-0.5 text-sm font-bold text-th-fgd-1">
-                            {acc.name}
-                          </p>
-                          <div className="flex">
-                            <span className="text-sm text-th-fgd-3">
-                              {accountValue}
-                            </span>
-                            <span className="mx-2 text-th-fgd-4">|</span>
-                            <div
-                              className={`flex items-center ${
-                                maintHealth
-                                  ? maintHealth > 15 && maintHealth < 50
-                                    ? 'text-th-orange'
-                                    : maintHealth >= 50
-                                    ? 'text-th-green'
-                                    : 'text-th-red'
-                                  : 'text-th-fgd-4'
-                              }`}
-                            >
-                              <HeartIcon className="mr-1 h-4 w-4" />
-                              <span className="text-sm">{maintHealth}%</span>
+          <div>
+            <h2 className="text-center">{t('accounts')}</h2>
+            {loading ? (
+              <Loading />
+            ) : mangoAccounts.length ? (
+              <div className="thin-scroll mt-4 max-h-[280px] space-y-2 overflow-y-auto">
+                {mangoAccounts.map((acc) => {
+                  const accountValue = formatFixedDecimals(
+                    toUiDecimalsForQuote(Number(acc.getEquity(group!))),
+                    true
+                  )
+                  const maintHealth = acc.getHealthRatioUi(
+                    group!,
+                    HealthType.maint
+                  )
+                  return (
+                    <div key={acc.publicKey.toString()}>
+                      <button
+                        onClick={() => handleSelectMangoAccount(acc)}
+                        className="default-transition flex w-full items-center justify-between rounded-md bg-th-bkg-2 p-4 text-th-fgd-1 hover:bg-th-bkg-3"
+                      >
+                        <div className="flex w-full items-center justify-between">
+                          <div className="text-left">
+                            <p className="mb-0.5 text-sm font-bold text-th-fgd-1">
+                              {acc.name}
+                            </p>
+                            <div className="flex">
+                              <span className="text-sm text-th-fgd-3">
+                                {accountValue}
+                              </span>
+                              <span className="mx-2 text-th-fgd-4">|</span>
+                              <div
+                                className={`flex items-center ${
+                                  maintHealth
+                                    ? maintHealth > 15 && maintHealth < 50
+                                      ? 'text-th-orange'
+                                      : maintHealth >= 50
+                                      ? 'text-th-green'
+                                      : 'text-th-red'
+                                    : 'text-th-fgd-4'
+                                }`}
+                              >
+                                <HeartIcon className="mr-1 h-4 w-4" />
+                                <span className="text-sm">{maintHealth}%</span>
+                              </div>
                            </div>
                          </div>
+                          {acc.publicKey.toString() ===
+                          mangoAccount?.publicKey.toString() ? (
+                            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-th-green">
+                              <CheckIcon className="h-4 w-4 text-th-bkg-1" />
+                            </div>
+                          ) : (
+                            <div className="h-5 w-5 rounded-full bg-th-bkg-4" />
+                          )}
                        </div>
-                        {acc.publicKey.toString() ===
-                        mangoAccount?.publicKey.toString() ? (
-                          <div className="flex h-5 w-5 items-center justify-center rounded-full bg-th-green">
-                            <CheckIcon className="h-4 w-4 text-th-bkg-1" />
-                          </div>
-                        ) : (
-                          <div className="h-5 w-5 rounded-full bg-th-bkg-4" />
-                        )}
-                      </div>
-                    </button>
-                  </div>
-                )
-              })}
-            </div>
-          ) : (
-            <div className="h-full">
-              <p className="text-center text-sm">
-                Create your first account 😎
-              </p>
-            </div>
-          )}
+                      </button>
+                    </div>
+                  )
+                })}
+              </div>
+            ) : (
+              <div className="flex h-48 flex-col items-center justify-center">
+                <span className="mb-1 text-2xl">😎</span>
+                <p className="text-center text-sm">Create your first account</p>
+              </div>
+            )}
+          </div>
          <div className="pt-6">
            <LinkButton
              className="w-full justify-center"
--- a/components/wallet/ConnectedMenu.tsx
+++ b/components/wallet/ConnectedMenu.tsx
@ -1,6 +1,7 @@
 import { Menu, Transition } from '@headlessui/react'
 import {
  ArrowRightOnRectangleIcon,
+  CurrencyDollarIcon,
  UserCircleIcon,
 } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
@ -14,10 +15,12 @@ import { PublicKey } from '@solana/web3.js'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from '../../utils/theme'
 import EditProfileModal from '@components/modals/EditProfileModal'
+import MangoAccountsListModal from '@components/modals/MangoAccountsListModal'

 const ConnectedMenu = () => {
  const { t } = useTranslation('common')
  const [showEditProfileModal, setShowEditProfileModal] = useState(false)
+  const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
  const set = mangoStore((s) => s.set)
  const { publicKey, disconnect, wallet } = useWallet()
  const actions = mangoStore((s) => s.actions)
@ -104,15 +107,17 @@ const ConnectedMenu = () => {
                    </div>
                  </button>
                </Menu.Item>
-                {/* <Menu.Item>
+                {isMobile ? (
+                  <Menu.Item>
                    <button
                      className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
-                      onClick={() => setShowAccountsModal(true)}
+                      onClick={() => setShowMangoAccountsModal(true)}
                    >
                      <CurrencyDollarIcon className="h-4 w-4" />
                      <div className="pl-2 text-left">{t('accounts')}</div>
                    </button>
-                  </Menu.Item> */}
+                  </Menu.Item>
+                ) : null}
                {/* <Menu.Item>
                  <button
                    className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
@ -151,6 +156,13 @@ const ConnectedMenu = () => {
          onClose={() => setShowEditProfileModal(false)}
        />
      ) : null}
+
+      {showMangoAccountsModal ? (
+        <MangoAccountsListModal
+          isOpen={showMangoAccountsModal}
+          onClose={() => setShowMangoAccountsModal(false)}
+        />
+      ) : null}
    </>
  )
 }