feat: staking and claim pages

Co-authored-by: Tulun <[email protected]>
Co-authored-by: Dong-Ha Kim <[email protected]>

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@across-protocol/across-token": "^0.0.1",
     "@across-protocol/contracts-v2": "^0.0.34",
     "@across-protocol/sdk-v2": "^0.1.24",
     "@datapunt/matomo-tracker-js": "^0.5.1",

src/Routes.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect } from "react";
 import { Switch, Route, useLocation, useHistory } from "react-router-dom";
+
 import {
   Send,
   Pool,
   About,
   MyTransactions,
   AllTransactions,
   Rewards,
+  Staking,
   Claim,
   NotFound,
 } from "views";
@@ -20,6 +22,8 @@ import {
   WrongNetworkError,
   rewardsBannerWarning,
   generalMaintenanceMessage,
+  stringValueInArray,
+  getConfig,
 } from "utils";
 import { ReactComponent as InfoLogo } from "assets/icons/info-24.svg";
 import Toast from "components/Toast";
@@ -36,6 +40,7 @@ function useRoutes() {
   const location = useLocation();
   const history = useHistory();
   const { error, removeError } = useError();
+  const config = getConfig();
   // force the user on /pool page if showMigrationPage is active.
   useEffect(() => {
     if (enableMigration && location.pathname !== "/pool") {
@@ -51,6 +56,7 @@ function useRoutes() {
     removeError,
     location,
     isContractAddress,
+    config,
   };
 }
 // Need this component for useLocation hook
@@ -61,6 +67,7 @@ const Routes: React.FC = () => {
     error,
     removeError,
     location,
+    config,
     isContractAddress,
   } = useRoutes();
 
@@ -105,7 +112,23 @@ const Routes: React.FC = () => {
         <Route exact path="/pool" component={Pool} />
         <Route exact path="/about" component={About} />
         <Route exact path="/rewards" component={Rewards} />
-        <Route exact path="/rewards/claim" component={Claim} />
+        <Route exact path="/airdrop" component={Claim} />
+        <Route
+          exact
+          path="/rewards/staking/:poolId"
+          render={({ match }) => {
+            const poolIdFound = stringValueInArray(
+              match.params.poolId.toLowerCase(),
+              config.getPoolSymbols()
+            );
+
+            if (poolIdFound) {
+              return <Staking />;
+            } else {
+              return <NotFound custom404Message="Pool not found." />;
+            }
+          }}
+        />
         <Route exact path="/" component={Send} />
         <Route path="*" component={NotFound} />
       </Switch>