mobile and tidy up

components/explore/Explore.tsx

@@ -30,7 +30,7 @@ const Explore = () => {
     const perpMarkets = mangoStore.getState().perpMarkets
     const tabs: [string, number][] = [
       ['tokens', banks.length],
-      ['perp-markets', perpMarkets.length],
+      ['perp', perpMarkets.length],
       ['account:followed-accounts', followedAccounts?.length],
     ]
     return tabs
@@ -54,7 +54,7 @@ const Explore = () => {
             activeTab={activeTab}
             onChange={setActiveTab}
             tabs={tabsWithCount}
-            className="text-lg"
+            className="xl:text-lg"
           />
         </div>
       </div>

components/explore/FollowedAccounts.tsx

@@ -11,6 +11,7 @@ import SheenLoader from '@components/shared/SheenLoader'
 import ToggleFollowButton from '@components/shared/ToggleFollowButton'
 import { Disclosure } from '@headlessui/react'
 import {
+  ArrowPathIcon,
   ArrowTopRightOnSquareIcon,
   ChevronDownIcon,
   NoSymbolIcon,
@@ -69,6 +70,7 @@ const getFollowedMangoAccounts = async (accounts: FollowedAccount[]) => {
 }
 
 const FollowedAccounts = () => {
+  const { t } = useTranslation('account')
   const { data: followedAccounts, isInitialLoading: loadingFollowedAccounts } =
     useFollowedAccounts()
   const [followedMangoAccounts, setFollowedMangoAccounts] = useState<
@@ -88,11 +90,11 @@ const FollowedAccounts = () => {
   }, [followedAccounts])
 
   return (
-    <div className="px-4 pb-10 pt-4 md:px-6">
+    <div className="px-4 pt-4 md:px-6 md:pb-10">
       {loadingFollowedAccounts || loading ? (
-        [...Array(4)].map((x, i) => (
+        [...Array(3)].map((x, i) => (
           <SheenLoader className="mt-2 flex flex-1" key={i}>
-            <div className="h-16 w-full bg-th-bkg-2" />
+            <div className="h-[94px] w-full bg-th-bkg-2" />
           </SheenLoader>
         ))
       ) : followedMangoAccounts?.length ? (
@@ -104,9 +106,9 @@ const FollowedAccounts = () => {
       ) : (
         <div className="mt-2 flex flex-col items-center rounded-md border border-th-bkg-3 p-4">
           <NoSymbolIcon className="mb-1 h-7 w-7 text-th-fgd-4" />
-          <p className="mb-1">Your not following any accounts yet...</p>
+          <p className="mb-1 text-base">{t('account:not-following-yet')}</p>
           <Link href="/leaderboard" shallow>
-            <span className="font-bold">Find accounts to follow</span>
+            <span className="font-bold">{t('account:find-accounts')}</span>
           </Link>
         </div>
       )}
@@ -166,18 +168,22 @@ const AccountDisplay = ({ account }: { account: FollowedAccount }) => {
     return hiddenAccounts.find((acc) => acc === publicKey.toString())
   }, [publicKey, hiddenAccounts])
 
-  const { data: activityData, isInitialLoading: loadingActivityData } =
-    useQuery(
-      ['followed-account-activity', publicKey],
-      () => fetchActivityData(publicKey),
-      {
-        cacheTime: 1000 * 60 * 10,
-        staleTime: 1000 * 60,
-        retry: 3,
-        refetchOnWindowFocus: false,
-        enabled: publicKey && !isPrivateAccount && !loadingHiddenAccounts,
-      },
-    )
+  const {
+    data: activityData,
+    isInitialLoading: loadingActivityData,
+    isFetching: fetchingActivityData,
+    refetch: refetchActivityData,
+  } = useQuery(
+    ['followed-account-activity', publicKey],
+    () => fetchActivityData(publicKey),
+    {
+      cacheTime: 1000 * 60 * 10,
+      staleTime: 1000 * 60,
+      retry: 3,
+      refetchOnWindowFocus: false,
+      enabled: publicKey && !isPrivateAccount && !loadingHiddenAccounts,
+    },
+  )
 
   const accountValue = useMemo(() => {
     if (!group) return 0
@@ -201,55 +207,72 @@ const AccountDisplay = ({ account }: { account: FollowedAccount }) => {
       {({ open }) => (
         <>
           <Disclosure.Button
-            className={`mt-2 flex w-full items-center justify-between rounded-lg border border-th-bkg-3 p-4 ${
+            className={`mt-2 flex w-full items-center rounded-lg border border-th-bkg-3 p-4 md:hover:border-th-bkg-4 ${
               open ? 'rounded-b-none border-b-0' : ''
             }`}
           >
-            <AccountNameDisplay
-              accountName={name}
-              accountPk={publicKey}
-              profileImageUrl={profile_image_url}
-              profileName={profile_name}
-              walletPk={owner}
-            />
-            <div className="flex items-center space-x-4">
-              <div className="grid grid-cols-2 gap-6">
-                <div className="flex flex-col items-end">
-                  <p className="mb-1">{t('value')}</p>
-                  <span className="font-mono">
-                    <FormatNumericValue value={accountValue} isUsd />
-                  </span>
-                  <Change
-                    change={rollingDailyValueChange}
-                    prefix="$"
-                    size="small"
-                  />
-                </div>
-                <div className="flex flex-col items-end">
-                  <p className="mb-1">{t('pnl')}</p>
-                  <span className="font-mono">
-                    <FormatNumericValue value={accountPnl} isUsd />
-                  </span>
-                  <Change
-                    change={rollingDailyPnlChange}
-                    prefix="$"
-                    size="small"
-                  />
+            <div className="grid w-full grid-cols-2">
+              <div className="col-span-2 flex h-full items-center md:col-span-1">
+                <AccountNameDisplay
+                  accountName={name}
+                  accountPk={publicKey}
+                  profileImageUrl={profile_image_url}
+                  profileName={profile_name}
+                  walletPk={owner}
+                />
+              </div>
+              <div className="col-span-2 mt-3 border-t border-th-bkg-3 pt-3 md:col-span-1 md:mt-0 md:border-t-0 md:pt-0">
+                <div className="grid grid-cols-2">
+                  <div className="flex flex-col items-start md:items-end">
+                    <p className="mb-1">{t('value')}</p>
+                    <span className="font-mono">
+                      <FormatNumericValue value={accountValue} isUsd />
+                    </span>
+                    <Change
+                      change={rollingDailyValueChange}
+                      prefix="$"
+                      size="small"
+                    />
+                  </div>
+                  <div className="flex flex-col items-start md:items-end">
+                    <p className="mb-1">{t('pnl')}</p>
+                    <span className="font-mono">
+                      <FormatNumericValue value={accountPnl} isUsd />
+                    </span>
+                    <Change
+                      change={rollingDailyPnlChange}
+                      prefix="$"
+                      size="small"
+                    />
+                  </div>
                 </div>
               </div>
-              <ChevronDownIcon
-                className={`${
-                  open ? 'rotate-180' : 'rotate-360'
-                } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
-              />
             </div>
+            <ChevronDownIcon
+              className={`${
+                open ? 'rotate-180' : 'rotate-360'
+              } ml-4 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
+            />
           </Disclosure.Button>
           <Disclosure.Panel>
             <div className="rounded-lg rounded-t-none border border-t-0 border-th-bkg-3 p-4 pt-0">
               <div className="border-t border-th-bkg-3 pt-4">
-                <div className="mb-4 flex items-center justify-between">
-                  <h3 className="text-base">{t('activity:latest-activity')}</h3>
-                  <div className="flex items-center space-x-4">
+                <div className="mb-4 flex flex-wrap items-center justify-between">
+                  <h3 className="mr-3 text-base">
+                    {t('activity:latest-activity')}
+                  </h3>
+                  <div className="mt-0.5 flex items-center space-x-4">
+                    <button
+                      className="flex items-center focus:outline-none"
+                      onClick={() => refetchActivityData()}
+                    >
+                      <ArrowPathIcon
+                        className={`mr-1.5 h-4 w-4 ${
+                          fetchingActivityData ? 'animate-spin' : null
+                        }`}
+                      />
+                      <span>{t('refresh')}</span>
+                    </button>
                     <ToggleFollowButton
                       accountPk={publicKey.toString()}
                       showText
@@ -343,7 +366,8 @@ const ActivityContent = ({ activity }: { activity: ActivityFeed }) => {
   }
   if (isSpotTradeActivityFeedItem(activity)) {
     const { activity_type, block_datetime } = activity
-    const { price, market, side, size } = activity.activity_details
+    const { base_symbol, price, quote_symbol, side, size } =
+      activity.activity_details
     return (
       <div className="flex items-center justify-between">
         <div>
@@ -352,7 +376,7 @@ const ActivityContent = ({ activity }: { activity: ActivityFeed }) => {
           </p>
           <p className="mb-0.5 text-th-fgd-2">{`${t(
             side,
-          )} ${size} ${market}`}</p>
+          )} ${size} ${base_symbol}/${quote_symbol}`}</p>
           <p className="text-xs">
             {dayjs(block_datetime).format('DD MMM YYYY, h:mma')}
           </p>
@@ -429,9 +453,9 @@ const AccountNameDisplay = ({
   return (
     <div className="flex items-center space-x-3">
       <ProfileImage
-        imageSize={'40'}
+        imageSize={'48'}
         imageUrl={profileImageUrl}
-        placeholderSize={'24'}
+        placeholderSize={'32'}
       />
       <div>
         <p className="mb-1 text-left font-bold text-th-fgd-2">

components/explore/Spot.tsx

@@ -128,9 +128,9 @@ const Spot = () => {
 
   return (
     <div className="lg:-mt-10">
-      <div className="flex flex-col px-4 lg:flex-row lg:items-center lg:justify-end lg:px-6 2xl:px-12">
+      <div className="flex flex-col px-4 md:px-6 lg:flex-row lg:items-center lg:justify-end 2xl:px-12">
         <div className="flex w-full flex-col lg:w-auto lg:flex-row lg:space-x-3">
-          <div className="relative mb-3 w-full lg:mb-0 xl:w-40">
+          <div className="relative mb-3 w-full lg:mb-0 lg:w-40">
             <Input
               heightClass="h-10 pl-8"
               type="text"

components/leaderboard/LeaderboardPage.tsx

@@ -192,8 +192,8 @@ const LeaderboardPage = () => {
       <div className="grid grid-cols-12">
         <div className="col-span-12 lg:col-span-8 lg:col-start-3">
           <h1 className="mb-2">{t('leaderboard')}</h1>
-          <div className="mb-4 flex items-center justify-between">
-            <div>
+          <div className="mb-4 flex w-full flex-col md:flex-row md:items-center md:justify-between">
+            <div className="mb-3 md:mb-0">
               <TabsText
                 activeTab={leaderboardToShow}
                 onChange={(v: string) => setLeaderboardToShow(v)}

components/leaderboard/LeaderboardTable.tsx

@@ -62,7 +62,7 @@ const LeaderboardRow = ({
 
   return !loading ? (
     <div className="flex">
-      <div className="flex flex-1 items-center rounded-l-md bg-th-bkg-2 px-3">
+      <div className="flex flex-1 items-center rounded-l-md border border-r-0 border-th-bkg-3 bg-th-bkg-2 px-3">
         <ToggleFollowButton accountPk={mango_account} />
       </div>
       <a
@@ -71,11 +71,11 @@ const LeaderboardRow = ({
         rel="noopener noreferrer"
         target="_blank"
       >
-        <div className="flex items-center space-x-3">
+        <div className="flex w-full items-center space-x-3">
           <div
             className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full ${
               rank < 4 ? '' : 'bg-th-bkg-3'
-            } md:mr-2`}
+            }`}
           >
             <p
               className={`relative z-10 font-bold ${
@@ -91,22 +91,23 @@ const LeaderboardRow = ({
             imageUrl={profile_image_url}
             placeholderSize={isTablet ? '20' : '24'}
           />
-          <div className="text-left">
-            <p className="capitalize text-th-fgd-2 md:text-base">
-              {profile_name ||
-                wallet_pk.slice(0, 4) + '...' + wallet_pk.slice(-4)}
-            </p>
-            <p className="text-xs text-th-fgd-4">
-              Acc: {mango_account.slice(0, 4) + '...' + mango_account.slice(-4)}
-            </p>
+          <div className="flex w-full flex-col items-start sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <p className="capitalize text-th-fgd-2 md:text-base">
+                {profile_name ||
+                  wallet_pk.slice(0, 4) + '...' + wallet_pk.slice(-4)}
+              </p>
+              <p className="text-xs text-th-fgd-4">
+                Acc:{' '}
+                {mango_account.slice(0, 4) + '...' + mango_account.slice(-4)}
+              </p>
+            </div>
+            <span className="mr-3 mt-1 text-right font-mono sm:mt-0 md:text-base">
+              {formatCurrencyValue(value, 2)}
+            </span>
           </div>
         </div>
-        <div className="flex items-center">
-          <span className="mr-3 text-right font-mono md:text-base">
-            {formatCurrencyValue(value, 2)}
-          </span>
-          <ChevronRightIcon className="h-5 w-5 text-th-fgd-3" />
-        </div>
+        <ChevronRightIcon className="h-5 w-5 text-th-fgd-3" />
       </a>
     </div>
   ) : (

components/shared/TabsText.tsx

@@ -17,7 +17,9 @@ const TabsText = ({
       {tabs.map((tab) => (
         <button
           className={`flex items-center space-x-2 font-bold focus:outline-none ${
-            activeTab === tab[0] ? 'text-th-active' : ''
+            activeTab === tab[0]
+              ? 'text-th-active md:hover:text-th-active'
+              : 'text-th-fgd-2 md:hover:text-th-fgd-3'
           } ${className}`}
           onClick={() => onChange(tab[0])}
           key={tab[0]}

components/shared/ToggleFollowButton.tsx

@@ -13,8 +13,9 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import useFollowedAccounts from 'hooks/useFollowedAccounts'
 import Tooltip from './Tooltip'
 import { useTranslation } from 'react-i18next'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { FollowedAccountApi } from '@components/explore/FollowedAccounts'
+import Loading from './Loading'
 
 const toggleFollowAccount = async (
   type: string,
@@ -24,11 +25,13 @@ const toggleFollowAccount = async (
   refetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined,
   ) => Promise<QueryObserverResult>,
+  setLoading: (loading: boolean) => void,
 ) => {
   try {
     if (!publicKey) throw new Error('Wallet not connected!')
     if (!signMessage) throw new Error('Wallet does not support message signing')
 
+    setLoading(true)
     const messageObject = {
       mango_account: mangoAccountPk,
       action: type,
@@ -56,13 +59,11 @@ const toggleFollowAccount = async (
     )
     if (response.status === 200) {
       await refetch()
-      const notificationMessage = isPost
-        ? 'Account followed'
-        : 'Account unfollowed'
-      notify({ type: 'success', title: notificationMessage })
     }
   } catch {
     notify({ type: 'error', title: 'Failed to follow account' })
+  } finally {
+    setLoading(false)
   }
 }
 
@@ -77,6 +78,7 @@ const ToggleFollowButton = ({
   const { publicKey, signMessage } = useWallet()
   const { data: followedAccounts, refetch: refetchFollowedAccounts } =
     useFollowedAccounts()
+  const [loading, setLoading] = useState(false)
 
   const [isFollowed, type] = useMemo(() => {
     if (!followedAccounts || !followedAccounts.length) return [false, 'insert']
@@ -88,6 +90,13 @@ const ToggleFollowButton = ({
     } else return [false, 'insert']
   }, [accountPk, followedAccounts])
 
+  const disabled =
+    !accountPk ||
+    loading ||
+    !publicKey ||
+    !signMessage ||
+    (!isFollowed && followedAccounts?.length >= 10)
+
   return (
     <Tooltip
       content={
@@ -102,12 +111,7 @@ const ToggleFollowButton = ({
     >
       <button
         className="flex items-center focus:outline-none disabled:opacity-50 md:hover:text-th-fgd-3"
-        disabled={
-          !accountPk ||
-          !publicKey ||
-          !signMessage ||
-          (!isFollowed && followedAccounts?.length >= 10)
-        }
+        disabled={disabled}
         onClick={() =>
           toggleFollowAccount(
             type,
@@ -115,13 +119,16 @@ const ToggleFollowButton = ({
             publicKey,
             signMessage!,
             refetchFollowedAccounts,
+            setLoading,
           )
         }
       >
-        {isFollowed ? (
-          <FilledStarIcon className="h-4 w-4 text-th-active" />
+        {loading ? (
+          <Loading />
+        ) : isFollowed ? (
+          <FilledStarIcon className="h-5 w-5 text-th-active" />
         ) : (
-          <StarIcon className="h-4 w-4 text-th-fgd-3" />
+          <StarIcon className="h-5 w-5 text-th-fgd-3" />
         )}
         {showText ? (
           <span className="ml-1.5">

public/locales/en/account.json

@@ -7,6 +7,7 @@
     "cumulative-interest-chart": "Cumulative Interest Chart",
     "daily-volume": "24h Volume",
     "export": "Export {{dataType}}",
+    "find-accounts": "Find Accounts",
     "follow": "Follow",
     "followed-accounts": "Followed Accounts",
     "funding-chart": "Funding Chart",
@@ -22,6 +23,7 @@
     "more-account-stats": "More Account Stats",
     "no-data": "No data to display",
     "no-pnl-history": "No PnL History",
+    "not-following-yet": "Your not following any accounts yet...",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
     "refresh-balance": "Refresh Balance",

public/locales/en/common.json

@@ -138,6 +138,7 @@
   "quantity": "Quantity",
   "rate": "Rate (APR)",
   "rates": "Rates (APR)",
+  "refresh": "Refresh",
   "refresh-data": "Manually refresh data",
   "remove": "Remove",
   "remove-delegate": "Remove Delegate",

public/locales/es/account.json

@@ -7,6 +7,7 @@
     "cumulative-interest-chart": "Cumulative Interest Chart",
     "daily-volume": "24h Volume",
     "export": "Export {{dataType}}",
+    "find-accounts": "Find Accounts",
     "follow": "Follow",
     "followed-accounts": "Followed Accounts",
     "funding-chart": "Funding Chart",
@@ -22,6 +23,7 @@
     "more-account-stats": "More Account Stats",
     "no-data": "No data to display",
     "no-pnl-history": "No PnL History",
+    "not-following-yet": "Your not following any accounts yet...",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
     "refresh-balance": "Refresh Balance",

public/locales/es/common.json

@@ -138,6 +138,7 @@
   "quantity": "Quantity",
   "rate": "Rate (APR)",
   "rates": "Rates (APR)",
+  "refresh": "Refresh",
   "refresh-data": "Manually refresh data",
   "remove": "Remove",
   "remove-delegate": "Remove Delegate",

public/locales/ru/account.json

@@ -7,6 +7,7 @@
     "cumulative-interest-chart": "Cumulative Interest Chart",
     "daily-volume": "24h Volume",
     "export": "Export {{dataType}}",
+    "find-accounts": "Find Accounts",
     "follow": "Follow",
     "followed-accounts": "Followed Accounts",
     "funding-chart": "Funding Chart",
@@ -22,6 +23,7 @@
     "more-account-stats": "More Account Stats",
     "no-data": "No data to display",
     "no-pnl-history": "No PnL History",
+    "not-following-yet": "Your not following any accounts yet...",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
     "refresh-balance": "Refresh Balance",

public/locales/ru/common.json

@@ -138,6 +138,7 @@
   "quantity": "Quantity",
   "rate": "Rate (APR)",
   "rates": "Rates (APR)",
+  "refresh": "Refresh",
   "refresh-data": "Manually refresh data",
   "remove": "Remove",
   "remove-delegate": "Remove Delegate",

public/locales/zh/account.json

@@ -7,6 +7,7 @@
     "cumulative-interest-chart": "累积利息图表",
     "daily-volume": "24小时交易量",
     "export": "导出{{dataType}}",
+    "find-accounts": "Find Accounts",
     "follow": "Follow",
     "followed-accounts": "Followed Accounts",
     "funding-chart": "资金费图表",
@@ -22,6 +23,7 @@
     "more-account-stats": "更多帐户统计",
     "no-data": "无数据可显示",
     "no-pnl-history": "无盈亏历史",
+    "not-following-yet": "Your not following any accounts yet...",
     "pnl-chart": "盈亏图表",
     "pnl-history": "盈亏历史",
     "refresh-balance": "更新余额",

public/locales/zh/common.json

@@ -137,6 +137,7 @@
   "quantity": "数量",
   "rate": "利率(APR)",
   "rates": "利率(APR)",
+  "refresh": "Refresh",
   "refresh-data": "手动更新数据",
   "remove": "删除",
   "remove-delegate": "铲除委托",

public/locales/zh_tw/account.json

@@ -7,6 +7,7 @@
     "cumulative-interest-chart": "累積利息圖表",
     "daily-volume": "24小時交易量",
     "export": "導出{{dataType}}",
+    "find-accounts": "Find Accounts",
     "follow": "Follow",
     "followed-accounts": "Followed Accounts",
     "funding-chart": "資金費圖表",
@@ -22,6 +23,7 @@
     "more-account-stats": "更多帳戶統計",
     "no-data": "無數據可顯示",
     "no-pnl-history": "無盈虧歷史",
+    "not-following-yet": "Your not following any accounts yet...",
     "pnl-chart": "盈虧圖表",
     "pnl-history": "盈虧歷史",
     "refresh-balance": "更新餘額",

public/locales/zh_tw/common.json

@@ -137,6 +137,7 @@
   "quantity": "數量",
   "rate": "利率(APR)",
   "rates": "利率(APR)",
+  "refresh": "Refresh",
   "refresh-data": "手動更新數據",
   "remove": "刪除",
   "remove-delegate": "剷除委託",