add trade history to account tabs

components/account/AccountTabs.tsx

@@ -8,6 +8,7 @@ import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
+import TradeHistory from '@components/trade/TradeHistory'
 
 const AccountTabs = () => {
   const [activeTab, setActiveTab] = useState('balances')
@@ -23,15 +24,16 @@ const AccountTabs = () => {
 
     return [
       ['balances', 0],
+      ['trade:unsettled', unsettledTradeCount],
       ['activity:activity', 0],
       ['swap:swap-history', 0],
-      ['trade:unsettled', unsettledTradeCount],
+      ['trade-history', 0],
     ]
   }, [unsettledPerpPositions, unsettledSpotBalances])
 
   return (
     <>
-      <div className="border-b border-th-bkg-3">
+      <div className="hide-scroll overflow-x-auto border-b border-th-bkg-3">
         <TabButtons
           activeValue={activeTab}
           onChange={(v) => setActiveTab(v)}
@@ -51,10 +53,6 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
   switch (activeTab) {
     case 'balances':
       return <TokenList />
-    case 'activity:activity':
-      return <ActivityFeed />
-    case 'swap:swap-history':
-      return <SwapHistoryTable />
     case 'trade:unsettled':
       return (
         <UnsettledTrades
@@ -62,6 +60,12 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
           unsettledPerpPositions={unsettledPerpPositions}
         />
       )
+    case 'activity:activity':
+      return <ActivityFeed />
+    case 'swap:swap-history':
+      return <SwapHistoryTable />
+    case 'trade-history':
+      return <TradeHistory />
     default:
       return <TokenList />
   }

components/trade/TradeHistory.tsx

@@ -319,7 +319,7 @@ const TradeHistory = () => {
       ) : null}
     </>
   ) : (
-    <div className="flex flex-col items-center justify-center px-6 pb-8 pt-4">
+    <div className="flex flex-col items-center justify-center p-8 px-6">
       <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
       <p>No trade history</p>
     </div>