fix: add navigation

spectrum-finance · Oct 10, 2023 · 0bbe591 · 0bbe591
1 parent 649eb98
commit 0bbe591
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 23 deletions.
diff --git a/src/ApplicationRoutes.tsx b/src/ApplicationRoutes.tsx
@@ -112,12 +112,17 @@ export const routesConfig: RouteConfigExtended[] = [
           {
             title: 'Rewards',
             path: 'rewards',
-            element: <Rewards />,
-          },
-          {
-            title: 'ISPO Rewards',
-            path: 'ispo',
-            element: <IspoRewards />,
+            children: [
+              {
+                path: '',
+                element: <Rewards />,
+              },
+              {
+                title: 'ISPO Rewards',
+                path: 'ispo',
+                element: <IspoRewards />,
+              },
+            ],
           },
 
           {

diff --git a/src/pages/IspoRewards/IspoRewards.tsx b/src/pages/IspoRewards/IspoRewards.tsx
@@ -160,7 +160,12 @@ export const IspoRewards = () => {
   });
 
   return (
-    <Page backTo="../../../rewards" width={600} title="Claim ISPO rewards">
+    <Page
+      withBackButton
+      backTo="../../../rewards"
+      width={600}
+      title="Claim ISPO rewards"
+    >
       <Flex col>
         <Flex.Item marginBottom={data ? 2 : 0}>
           <Form

diff --git a/src/pages/Rewards/Rewards.tsx b/src/pages/Rewards/Rewards.tsx
@@ -9,6 +9,7 @@ import {
 import { Trans } from '@lingui/macro';
 import { ElementLocation, ElementName } from '@spectrumlabs/analytics';
 import { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { filter } from 'rxjs';
 
 import { applicationConfig } from '../../applicationConfig';
@@ -30,6 +31,8 @@ export const Rewards: FC = () => {
     getAddresses().pipe(filter((addresses) => !!addresses?.length)),
   );
 
+  const navigate = useNavigate();
+
   return (
     <Flex col align="center">
       {applicationConfig.isRewardsAvailable && (
@@ -114,22 +117,40 @@ export const Rewards: FC = () => {
             )}
           </Flex.Item>
           {applicationConfig.isRewardsAvailable ? (
-            <ConnectWalletButton
-              width="100%"
-              size="extra-large"
-              trace={{
-                element_location: ElementLocation.rewardsPage,
-                element_name: ElementName.connectWalletButton,
-              }}
-            >
-              {loading ? (
-                <Skeleton active />
-              ) : rewardsData ? (
-                <RewardsDashboard rewardsData={rewardsData} />
-              ) : (
-                <RewardsError />
-              )}
-            </ConnectWalletButton>
+            <Flex col align="center">
+              <Flex.Item width="100%" marginBottom={2}>
+                <ConnectWalletButton
+                  width="100%"
+                  size="extra-large"
+                  trace={{
+                    element_location: ElementLocation.rewardsPage,
+                    element_name: ElementName.connectWalletButton,
+                  }}
+                >
+                  {loading ? (
+                    <Skeleton active />
+                  ) : rewardsData ? (
+                    <RewardsDashboard rewardsData={rewardsData} />
+                  ) : (
+                    <RewardsError />
+                  )}
+                </ConnectWalletButton>
+              </Flex.Item>
+              <Flex.Item align="center">
+                <Typography.Body secondary style={{ textAlign: 'center' }}>
+                  If you would like to claim your ISPO rewards without
+                  connecting your wallet, please click{' '}
+                  <Typography.Link
+                    onClick={() => {
+                      navigate('ispo');
+                    }}
+                  >
+                    here
+                  </Typography.Link>
+                  .
+                </Typography.Body>
+              </Flex.Item>
+            </Flex>
           ) : (
             <RewardsBugFixing />
           )}