202411 staking yield

src/App.css

@@ -605,7 +605,9 @@ button.btn.btn-success:not(:disabled) {
 }
 
 .btn.btn-primary:hover,
-button.btn.btn-primary:hover {
+button.btn.btn-primary:hover,
+.btn.btn-primary.active,
+button.btn.btn-primary.active {
   color: rgb(var(--btn-solid-color));
   background: rgba(var(--primary-color), 1);
   box-shadow: var(--btn-solid-outline-hover),
@@ -667,7 +669,9 @@ button.btn.btn-outline:not(:disabled) {
 }
 
 .btn.btn-outline:hover,
-button.btn.btn-outline:hover {
+button.btn.btn-outline:hover,
+.btn.btn-outline.active,
+button.btn.btn-outline.active {
   color: var(--alt-btn-txt-color);
   background: rgba(255,255,255, 0.1);
   box-shadow: var(--btn-outline-outline-hover),

src/App.jsx

@@ -10,7 +10,9 @@ import Vaults from './pages/vaults/Vaults';
 import Vault from './pages/vault/Vault';
 import VaultHistory from './pages/vault/VaultHistory';
 import LiquidationPools from './pages/liquidation-pools/LiquidationPools';
-import StakingPool from './pages/staking-pool/StakingPool';
+import TstStaking from './pages/tst-staking/TstStaking';
+import StakingPool from './pages/staking-pool/StakingPoolLegacy';
+import LegacyPools from './pages/legacy-pools/LegacyPools';
 import TermsOfUse from './pages/TermsOfUse';
 import Dex from './pages/dex/Dex';
 
@@ -30,7 +32,9 @@ function App() {
               <Route path="vaults" element={<DashLayout><Vaults /></DashLayout>} />
               <Route path="vault/:vaultType/:vaultId" element={<DashLayout><Vault /></DashLayout>} />
               <Route path="vault/:vaultType/:vaultId/history" element={<DashLayout><VaultHistory /></DashLayout>} />
-              <Route path="liquidation-pools" element={<DashLayout><LiquidationPools /></DashLayout>} />
+              <Route path="legacy-pools" element={<DashLayout><LegacyPools /></DashLayout>} />
+              {/* <Route path="liquidation-pools" element={<DashLayout><LiquidationPools /></DashLayout>} /> */}
+              {/* <Route path="staking-pool" element={<DashLayout><TstStaking /></DashLayout>} /> */}
               <Route path="staking-pool" element={<DashLayout><StakingPool /></DashLayout>} />
               <Route path="dex/*" element={<DashLayout><Dex /></DashLayout>} />
               <Route path="termsofuse" element={<DashLayout><TermsOfUse /></DashLayout>} />

src/abis/stakingPoolV3.jsx

@@ -0,0 +1,130 @@
+export const abi = [
+  {
+    "inputs": [],
+    "name": "claim",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "dailyYield",
+    "outputs": [
+      {
+        "components": [
+          {
+            "internalType": "address",
+            "name": "token",
+            "type": "address"
+          },
+          {
+            "internalType": "uint256",
+            "name": "amount",
+            "type": "uint256"
+          }
+        ],
+        "internalType": "struct StakingTST.Reward[]",
+        "name": "_rewards",
+        "type": "tuple[]"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "_tst",
+        "type": "uint256"
+      }
+    ],
+    "name": "decreaseStake",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "_tst",
+        "type": "uint256"
+      }
+    ],
+    "name": "increaseStake",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "name": "positions",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "start",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "TST",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_holder",
+        "type": "address"
+      }
+    ],
+    "name": "projectedEarnings",
+    "outputs": [
+      {
+        "components": [
+          {
+            "internalType": "address",
+            "name": "token",
+            "type": "address"
+          },
+          {
+            "internalType": "uint256",
+            "name": "amount",
+            "type": "uint256"
+          }
+        ],
+        "internalType": "struct StakingTST.Reward[]",
+        "name": "_rewards",
+        "type": "tuple[]"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "start",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]
+
+export default abi;

src/components/staking-pool/ClaimingRewardsModal.jsx

@@ -148,7 +148,7 @@ const ClaimingRewardsModal = ({
                 <Typography variant="p" className="mb-2">
                   Claiming your rewards will end your current staking period and restart a new one.
                 </Typography>
-                <Typography variant="p" className="mb-2">
+                {/* <Typography variant="p" className="mb-2">
                   By opting to compound your EUROs rewards, those EUROs will be added to the EUROs in your new stake.
                 </Typography>
                 <div className="mb-2">
@@ -157,7 +157,7 @@ const ClaimingRewardsModal = ({
                     onChange={() => setCompound(!compound)}
                     label="I would like to compound my EUROs rewards"
                   />
-                </div>
+                </div> */}
               </div>
               <Button
                 color="primary"

src/components/tst-staking/ClaimingRewardsModal.jsx

@@ -0,0 +1,170 @@
+import { useState, useEffect, useRef } from "react";
+import {
+  useWriteContract,
+  useChainId,
+} from "wagmi";
+import { arbitrumSepolia } from "wagmi/chains";
+import { toast } from 'react-toastify';
+
+import {
+  useStakingPoolv3AddressStore,
+  useStakingPoolv3AbiStore
+} from "../../store/Store";
+
+import Button from "../ui/Button";
+import Modal from "../ui/Modal";
+import Typography from "../ui/Typography";
+import CenterLoader from "../ui/CenterLoader";
+
+const ClaimingRewardsModal = ({
+  isOpen,
+  handleCloseModal,
+}) => {
+  const {
+    arbitrumSepoliaStakingPoolv3Address,
+    arbitrumStakingPoolv3Address,
+  } = useStakingPoolv3AddressStore();
+  const { stakingPoolv3Abi } = useStakingPoolv3AbiStore();
+  const [claimLoading, setClaimLoading] = useState(false);
+  const [showError, setShowError] = useState(false);
+  const chainId = useChainId();
+
+  const stakingPoolv3Address = chainId === arbitrumSepolia.id ? arbitrumSepoliaStakingPoolv3Address :
+  arbitrumStakingPoolv3Address;
+
+  const { writeContract, isError, isPending, isSuccess, error } = useWriteContract();
+
+  const handleApproveClaim = async () => {
+    try {
+      writeContract({
+        abi: stakingPoolv3Abi,
+        address: stakingPoolv3Address,
+        functionName: "claim",
+        args: [],
+      });
+    } catch (error) {
+      let errorMessage = '';
+      if (error && error.shortMessage) {
+        errorMessage = error.shortMessage;
+      }
+      toast.error(errorMessage || 'There was an error');
+    }
+  };
+
+  useEffect(() => {
+    if (isPending) {
+      setClaimLoading(true);
+    } else if (isSuccess) {
+      toast.success('Success!');
+      setClaimLoading(false);
+      handleCloseModal();
+    } else if (isError) {
+      setShowError(true)
+      setClaimLoading(false);
+    }
+  }, [
+    isPending,
+    isSuccess,
+    isError,
+    error,
+  ]);
+
+  if (showError) {
+    return (
+      <>
+        <Modal
+          open={isOpen}
+          closeModal={() => {
+            setShowError(false);
+            handleCloseModal();
+          }}
+        >
+          <>
+            {claimLoading ? (
+              <>
+                <Typography variant="h2" className="card-title">
+                  Claiming Your Rewards
+                </Typography>
+                <CenterLoader />
+              </>
+            ) : (
+              <>
+                <div>
+                  <Typography variant="h2" className="card-title">
+                    Reward Claim Unsuccessful
+                  </Typography>
+                  <Typography variant="p">
+                    There was a problem processing your reward claim request.
+                  </Typography>
+                </div>
+
+                <Button
+                  color="primary"
+                  onClick={() => setShowError(false)}
+                >
+                  Return
+                </Button>
+                <Button
+                  color="ghost"
+                  onClick={() => {
+                    setShowError(false);
+                    handleCloseModal();
+                  }}
+                >
+                  Cancel
+                </Button>
+              </>
+            )}
+          </>
+        </Modal>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Modal
+        open={isOpen}
+        onClose={() => {
+          handleCloseModal();
+        }}
+      >
+        <>
+          {claimLoading ? (
+            <>
+              <Typography variant="h2" className="card-title">
+                Claiming Your Rewards
+              </Typography>
+              <CenterLoader />
+            </>
+          ) : (
+            <>
+              <div>
+                <Typography variant="h2" className="card-title">
+                  Claim Your Rewards
+                </Typography>
+                <Typography variant="p" className="mb-2">
+                  Claiming your rewards will end your current staking period and restart a new one.
+                </Typography>
+              </div>
+              <Button
+                color="primary"
+                onClick={handleApproveClaim}
+              >
+                Claim Rewards
+              </Button>
+              <Button
+                color="ghost"
+                onClick={handleCloseModal}
+              >
+                Cancel
+              </Button>
+            </>
+          )}
+        </>
+      </Modal>
+    </>
+  )
+};
+
+export default ClaimingRewardsModal;