chore: move rewards to own page

apps/trading/client-pages/portfolio/portfolio.tsx

@@ -15,7 +15,6 @@ import { PositionsMenu } from '../../components/positions-menu';
 import { WithdrawalsContainer } from '../../components/withdrawals-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { LedgerContainer } from '../../components/ledger-container';
-import { RewardsContainer } from '../../components/rewards-container';
 import {
   ResizableGrid,
   ResizableGridPanel,
@@ -86,9 +85,6 @@ export const Portfolio = () => {
               <Tab id="ledger-entries" name={t('Ledger entries')}>
                 <LedgerContainer />
               </Tab>
-              <Tab id="rewards" name={t('Rewards')}>
-                <RewardsContainer />
-              </Tab>
             </Tabs>
           </PortfolioGridChild>
         </ResizableGridPanel>

apps/trading/client-pages/rewards/index.ts

@@ -0,0 +1 @@
+export { Rewards } from './rewards';

apps/trading/client-pages/rewards/rewards.tsx

@@ -0,0 +1,11 @@
+import { t } from '@vegaprotocol/i18n';
+import { RewardsContainer } from '../../components/rewards-container';
+
+export const Rewards = () => {
+  return (
+    <div className="container p-4 mx-auto">
+      <h1 className="px-4 pb-4 text-2xl">{t('Rewards')}</h1>
+      <RewardsContainer />
+    </div>
+  );
+};

apps/trading/components/navbar/navbar.tsx

@@ -192,6 +192,11 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
             {t('Fees')}
           </NavbarLink>
         </NavbarItem>
+        <NavbarItem>
+          <NavbarLink to={Links.REWARDS()} onClick={onClick}>
+            {t('Rewards')}
+          </NavbarLink>
+        </NavbarItem>
         <NavbarItem>
           <NavbarLinkExternal to={useLinks(DApp.Governance)()}>
             {t('Governance')}

apps/trading/components/rewards-container/rewards-container.tsx

@@ -84,54 +84,52 @@ export const RewardsContainer = () => {
 
   // TODO: Fix grid rows, they break on small screens when things stack
   return (
-    <div className="flex flex-col h-full p-4">
-      <h3 className="mb-4">Rewards</h3>
-      <div className="flex-1 grid auto-rows-min grid-cols-6 gap-3">
-        {/* Always show the rewards pot for the reward asset AKA Vega */}
-        <Card
-          key={params.reward_asset}
-          title={t('Vega Reward pot')}
-          className="lg:col-span-2"
-          loading={loading}
-          highlight={true}
-        >
-          <RewardPot
-            accounts={accounts}
-            assetId={params.reward_asset}
-            vestingBalancesSummary={rewardsData?.party?.vestingBalancesSummary}
-          />
-        </Card>
-        {/* Show all other rewards */}
-        {Object.keys(rewardAssetsMap).map((assetId) => {
-          const asset = rewardAssetsMap[assetId][0].asset;
-          return (
-            <Card
-              key={assetId}
-              title={t('%s Reward pot', asset.symbol)}
-              className="lg:col-span-2"
-              loading={loading}
-            >
-              <RewardPot
-                accounts={accounts}
-                assetId={assetId}
-                vestingBalancesSummary={
-                  rewardsData?.party?.vestingBalancesSummary
-                }
-              />
-            </Card>
-          );
-        })}
-        <Card title={t('Vesting')} className="lg:col-span-2" loading={loading}>
-          <Vesting baseRate={params.rewards_vesting_baseRate} />
-        </Card>
-        <Card
-          title={t('Rewards multipliers')}
-          className="lg:col-span-2"
-          loading={loading}
-        >
-          <Multipliers />
-        </Card>
-        {/*
+    <div className="grid auto-rows-min grid-cols-6 gap-3">
+      {/* Always show the rewards pot for the reward asset AKA Vega */}
+      <Card
+        key={params.reward_asset}
+        title={t('Vega Reward pot')}
+        className="lg:col-span-2"
+        loading={loading}
+        highlight={true}
+      >
+        <RewardPot
+          accounts={accounts}
+          assetId={params.reward_asset}
+          vestingBalancesSummary={rewardsData?.party?.vestingBalancesSummary}
+        />
+      </Card>
+      {/* Show all other rewards */}
+      {Object.keys(rewardAssetsMap).map((assetId) => {
+        const asset = rewardAssetsMap[assetId][0].asset;
+        return (
+          <Card
+            key={assetId}
+            title={t('%s Reward pot', asset.symbol)}
+            className="lg:col-span-2"
+            loading={loading}
+          >
+            <RewardPot
+              accounts={accounts}
+              assetId={assetId}
+              vestingBalancesSummary={
+                rewardsData?.party?.vestingBalancesSummary
+              }
+            />
+          </Card>
+        );
+      })}
+      <Card title={t('Vesting')} className="lg:col-span-2" loading={loading}>
+        <Vesting baseRate={params.rewards_vesting_baseRate} />
+      </Card>
+      <Card
+        title={t('Rewards multipliers')}
+        className="lg:col-span-2"
+        loading={loading}
+      >
+        <Multipliers />
+      </Card>
+      {/*
         <Card title={t('Activity streak')} className="lg:col-span-3">
           TODO:
         </Card>
@@ -139,17 +137,16 @@ export const RewardsContainer = () => {
           TODO:
         </Card>
         */}
-        <Card
-          title={t('Rewards history')}
-          className="lg:col-span-full"
-          loading={loading}
-        >
-          <RewardHistory
-            epochRewardSummaries={rewardsData?.epochRewardSummaries}
-            assets={assets}
-          />
-        </Card>
-      </div>
+      <Card
+        title={t('Rewards history')}
+        className="lg:col-span-full"
+        loading={loading}
+      >
+        <RewardHistory
+          epochRewardSummaries={rewardsData?.epochRewardSummaries}
+          assets={assets}
+        />
+      </Card>
     </div>
   );
 };
@@ -348,7 +345,7 @@ interface RewardRow {
   total: number;
 }
 
-const RewardHistory = ({
+export const RewardHistory = ({
   epochRewardSummaries,
   assets,
 }: {

apps/trading/lib/links.ts

@@ -18,6 +18,7 @@ export const Routes = {
   REFERRALS_CREATE_CODE: '/referrals/create-code',
   TEAMS: '/teams',
   FEES: '/fees',
+  REWARDS: '/rewards',
 } as const;
 
 type ConsoleLinks = {
@@ -42,4 +43,5 @@ export const Links: ConsoleLinks = {
   REFERRALS_CREATE_CODE: () => Routes.REFERRALS_CREATE_CODE,
   TEAMS: () => Routes.TEAMS,
   FEES: () => Routes.FEES,
+  REWARDS: () => Routes.REWARDS,
 };

apps/trading/pages/client-router.tsx

@@ -14,6 +14,7 @@ import { Deposit } from '../client-pages/deposit';
 import { Withdraw } from '../client-pages/withdraw';
 import { Transfer } from '../client-pages/transfer';
 import { Fees } from '../client-pages/fees';
+import { Rewards } from '../client-pages/rewards';
 import { Routes as AppRoutes } from '../lib/links';
 import { LayoutWithSky } from '../client-pages/referrals/layout';
 import { Referrals } from '../client-pages/referrals/referrals';
@@ -96,6 +97,16 @@ export const routerConfig: RouteObject[] = compact([
       },
     ],
   },
+  {
+    path: 'rewards/*',
+    element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+    children: [
+      {
+        index: true,
+        element: <Rewards />,
+      },
+    ],
+  },
   {
     path: 'markets/*',
     element: (