improve account page on mobile

2022-12-21 22:07:17 +11:00 · 2022-12-21 22:07:17 +11:00 · 39cf4b9411
parent 812af394a8
commit 39cf4b9411
7 changed files with 94 additions and 96 deletions
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@ -1,9 +1,7 @@
 import { useCallback, useState } from 'react'
 import {
-  ArrowDownTrayIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
-  ArrowUpTrayIcon,
  ExclamationTriangleIcon,
  UsersIcon,
 } from '@heroicons/react/20/solid'
@ -26,6 +24,8 @@ import { DEFAULT_DELEGATE } from './modals/DelegateModal'
 import Tooltip from './shared/Tooltip'
 import { abbreviateAddress } from 'utils/formatting'
 import DepositWithdrawModal from './modals/DepositWithdrawModal'
+import { useViewport } from 'hooks/useViewport'
+import { breakpoints } from 'utils/theme'
 // import ThemeSwitcher from './ThemeSwitcher'

 const TopBar = () => {
@ -42,6 +42,8 @@ const TopBar = () => {
  const isOnline = useOnlineStatus()
  const router = useRouter()
  const { query } = router
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.sm : false

  const handleCloseSetup = useCallback(() => {
    setShowUserSetup(false)
@ -110,19 +112,13 @@ const TopBar = () => {
          {/* <div className="px-3 md:px-4">
            <ThemeSwitcher />
          </div> */}
-          <Button
-            onClick={() => handleDepositWithdrawModal('deposit')}
-            secondary
-            className="mx-4 hidden sm:block"
-          >{`${t('deposit')} / ${t('withdraw')}`}</Button>
-          <div className="flex items-center space-x-2 px-4 sm:hidden">
-            <IconButton onClick={() => handleDepositWithdrawModal('deposit')}>
-              <ArrowDownTrayIcon className="h-5 w-5" />
-            </IconButton>
-            <IconButton onClick={() => handleDepositWithdrawModal('withdraw')}>
-              <ArrowUpTrayIcon className="h-5 w-5" />
-            </IconButton>
-          </div>
+          {!connected && isMobile ? null : (
+            <Button
+              onClick={() => handleDepositWithdrawModal('deposit')}
+              secondary
+              className="mx-4"
+            >{`${t('deposit')} / ${t('withdraw')}`}</Button>
+          )}
          {connected ? (
            <div className="flex items-center pr-4 md:pr-0">
              <button
--- a/components/account/AccountActions.tsx
+++ b/components/account/AccountActions.tsx
@ -73,7 +73,7 @@ const AccountActions = () => {
      <div className="flex items-center space-x-2 md:space-x-3">
        {hasBorrows ? (
          <Button
-            className="flex items-center"
+            className="flex w-full items-center justify-center sm:w-auto"
            disabled={!mangoAccount}
            onClick={() => setShowRepayModal(true)}
          >
@ -82,7 +82,7 @@ const AccountActions = () => {
          </Button>
        ) : null}
        <Button
-          className="flex items-center"
+          className="flex w-full items-center justify-center sm:w-auto"
          onClick={handleBorrowModal}
          secondary
        >
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@ -37,6 +37,8 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
 // import AccountOnboardingTour from '@components/tours/AccountOnboardingTour'
 import dayjs from 'dayjs'
 import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
+import { useViewport } from 'hooks/useViewport'
+import { breakpoints } from 'utils/theme'

 export async function getStaticProps({ locale }: { locale: string }) {
  return {
@ -73,6 +75,8 @@ const AccountPage = () => {
  >([])
  const [showExpandChart, setShowExpandChart] = useState<boolean>(false)
  const { theme } = useTheme()
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.sm : false
  // const tourSettings = mangoStore((s) => s.settings.tours)
  // const [isOnBoarded] = useLocalStorageState(IS_ONBOARDED_KEY)
  const [animationSettings] = useLocalStorageState(
@ -220,8 +224,8 @@ const AccountPage = () => {

  return !chartToShow ? (
    <>
-      <div className="flex flex-wrap items-center justify-between border-b-0 border-th-bkg-3 px-6 py-3 md:border-b">
-        <div className="flex items-center space-x-6">
+      <div className="flex flex-col border-b-0 border-th-bkg-3 px-6 py-3 md:flex-row md:items-center md:justify-between md:border-b">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:space-x-6">
          <div id="account-step-three">
            <Tooltip
              maxWidth="20rem"
@ -266,7 +270,7 @@ const AccountPage = () => {
          {!loadPerformanceData ? (
            mangoAccount && performanceData.length ? (
              <div
-                className="relative flex items-end"
+                className="relative flex h-44 items-end sm:h-24 sm:w-48"
                onMouseEnter={() =>
                  onHoverMenu(showExpandChart, 'onMouseEnter')
                }
@ -281,16 +285,14 @@ const AccountPage = () => {
                      : COLORS.DOWN[theme]
                  }
                  data={performanceData.concat(latestAccountData)}
-                  height={88}
                  name="accountValue"
-                  width={180}
                  xKey="time"
                  yKey="account_equity"
                />
                <Transition
                  appear={true}
                  className="absolute right-2 bottom-2"
-                  show={showExpandChart}
+                  show={showExpandChart || isMobile}
                  enter="transition ease-in duration-300"
                  enterFrom="opacity-0 scale-75"
                  enterTo="opacity-100 scale-100"
@ -309,12 +311,12 @@ const AccountPage = () => {
              </div>
            ) : null
          ) : (
-            <SheenLoader>
-              <div className="h-[88px] w-[180px] rounded-md bg-th-bkg-2" />
+            <SheenLoader className="mt-4 flex flex-1 sm:mt-0">
+              <div className="h-40 w-full rounded-md bg-th-bkg-2 sm:h-24 sm:w-48" />
            </SheenLoader>
          )}
        </div>
-        <div className="mt-3 mb-1 lg:mt-0 lg:mb-0">
+        <div className="mt-6 mb-1 md:mt-0 md:mb-0">
          <AccountActions />
        </div>
      </div>
--- a/components/shared/DetailedAreaChart.tsx
+++ b/components/shared/DetailedAreaChart.tsx
@ -105,8 +105,6 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
    return data[0][yKey] <= 0 && data[data.length - 1][yKey] < data[0][yKey]
  }, [data])

-  console.log('title', title?.replace(/\s/g, ''))
-
  return (
    <FadeInFadeOut show={true}>
      <ContentBox hideBorder hidePadding>
--- a/components/shared/SimpleAreaChart.tsx
+++ b/components/shared/SimpleAreaChart.tsx
@ -1,20 +1,16 @@
 import { useMemo } from 'react'
-import { Area, AreaChart, XAxis, YAxis } from 'recharts'
+import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'

 const SimpleAreaChart = ({
  color,
  data,
-  height,
  name,
-  width,
  xKey,
  yKey,
 }: {
  color: string
  data: any[]
-  height: number
  name: string
-  width: number
  xKey: string
  yKey: string
 }) => {
@ -24,29 +20,31 @@ const SimpleAreaChart = ({
  )

  return (
-    <AreaChart width={width} height={height} data={data}>
-      <defs>
-        <linearGradient
-          id={`gradientArea-${name}`}
-          x1="0"
-          y1={flipGradientCoords ? '0' : '1'}
-          x2="0"
-          y2={flipGradientCoords ? '1' : '0'}
-        >
-          <stop offset="0%" stopColor={color} stopOpacity={0} />
-          <stop offset="100%" stopColor={color} stopOpacity={0.6} />
-        </linearGradient>
-      </defs>
-      <Area
-        isAnimationActive={false}
-        type="monotone"
-        dataKey={yKey}
-        stroke={color}
-        fill={`url(#gradientArea-${name})`}
-      />
-      <XAxis dataKey={xKey} hide />
-      <YAxis domain={['dataMin', 'dataMax']} dataKey={yKey} hide />
-    </AreaChart>
+    <ResponsiveContainer width="100%" height="100%">
+      <AreaChart data={data}>
+        <defs>
+          <linearGradient
+            id={`gradientArea-${name}`}
+            x1="0"
+            y1={flipGradientCoords ? '0' : '1'}
+            x2="0"
+            y2={flipGradientCoords ? '1' : '0'}
+          >
+            <stop offset="0%" stopColor={color} stopOpacity={0} />
+            <stop offset="100%" stopColor={color} stopOpacity={0.6} />
+          </linearGradient>
+        </defs>
+        <Area
+          isAnimationActive={false}
+          type="monotone"
+          dataKey={yKey}
+          stroke={color}
+          fill={`url(#gradientArea-${name})`}
+        />
+        <XAxis dataKey={xKey} hide />
+        <YAxis domain={['dataMin', 'dataMax']} dataKey={yKey} hide />
+      </AreaChart>
+    </ResponsiveContainer>
  )
 }

--- a/components/stats/PerpMarketsTable.tsx
+++ b/components/stats/PerpMarketsTable.tsx
@ -88,17 +88,19 @@ const PerpMarketsTable = () => {
                  <Td>
                    {!loadingPrices ? (
                      chartData !== undefined ? (
-                        <SimpleAreaChart
-                          color={
-                            change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
-                          }
-                          data={chartData}
-                          height={40}
-                          name={symbol}
-                          width={104}
-                          xKey="0"
-                          yKey="1"
-                        />
+                        <div className="h-10 w-24">
+                          <SimpleAreaChart
+                            color={
+                              change >= 0
+                                ? COLORS.UP[theme]
+                                : COLORS.DOWN[theme]
+                            }
+                            data={chartData}
+                            name={symbol}
+                            xKey="0"
+                            yKey="1"
+                          />
+                        </div>
                      ) : symbol === 'USDC' || symbol === 'USDT' ? null : (
                        <p className="mb-0 text-th-fgd-4">{t('unavailable')}</p>
                      )
@ -196,15 +198,15 @@ const MobilePerpMarketItem = ({ market }: { market: PerpMarket }) => {
        </div>
        {!loadingPrices ? (
          chartData !== undefined ? (
-            <SimpleAreaChart
-              color={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
-              data={chartData}
-              height={40}
-              name={market.name}
-              width={104}
-              xKey="0"
-              yKey="1"
-            />
+            <div className="h-10 w-24">
+              <SimpleAreaChart
+                color={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
+                data={chartData}
+                name={market.name}
+                xKey="0"
+                yKey="1"
+              />
+            </div>
          ) : symbol === 'USDC' || symbol === 'USDT' ? null : (
            <p className="mb-0 text-th-fgd-4">{t('unavailable')}</p>
          )
--- a/components/stats/SpotMarketsTable.tsx
+++ b/components/stats/SpotMarketsTable.tsx
@ -78,17 +78,19 @@ const SpotMarketsTable = () => {
                  <Td>
                    {!loadingPrices ? (
                      chartData !== undefined ? (
-                        <SimpleAreaChart
-                          color={
-                            change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
-                          }
-                          data={chartData}
-                          height={40}
-                          name={bank!.name}
-                          width={104}
-                          xKey="0"
-                          yKey="1"
-                        />
+                        <div className="h-10 w-24">
+                          <SimpleAreaChart
+                            color={
+                              change >= 0
+                                ? COLORS.UP[theme]
+                                : COLORS.DOWN[theme]
+                            }
+                            data={chartData}
+                            name={bank!.name}
+                            xKey="0"
+                            yKey="1"
+                          />
+                        </div>
                      ) : bank?.name === 'USDC' ||
                        bank?.name === 'USDT' ? null : (
                        <p className="mb-0 text-th-fgd-4">{t('unavailable')}</p>
@ -175,15 +177,15 @@ const MobileSpotMarketItem = ({ market }: { market: Serum3Market }) => {
        </div>
        {!loadingPrices ? (
          chartData !== undefined ? (
-            <SimpleAreaChart
-              color={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
-              data={chartData}
-              height={40}
-              name={bank!.name}
-              width={104}
-              xKey="0"
-              yKey="1"
-            />
+            <div className="h-10 w-24">
+              <SimpleAreaChart
+                color={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
+                data={chartData}
+                name={bank!.name}
+                xKey="0"
+                yKey="1"
+              />
+            </div>
          ) : bank?.name === 'USDC' || bank?.name === 'USDT' ? null : (
            <p className="mb-0 text-th-fgd-4">{t('unavailable')}</p>
          )