202411 staking yield

src/App.jsx

@@ -11,7 +11,6 @@ import Vault from './pages/vault/Vault';
 import VaultHistory from './pages/vault/VaultHistory';
 import LiquidationPools from './pages/liquidation-pools/LiquidationPools';
 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';
@@ -33,9 +32,8 @@ function App() {
               <Route path="vault/:vaultType/:vaultId" element={<DashLayout><Vault /></DashLayout>} />
               <Route path="vault/:vaultType/:vaultId/history" element={<DashLayout><VaultHistory /></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="liquidation-pools" element={<DashLayout><LiquidationPools /></DashLayout>} />
+              <Route path="staking-pool" element={<DashLayout><TstStaking /></DashLayout>} />
               <Route path="dex/*" element={<DashLayout><Dex /></DashLayout>} />
               <Route path="termsofuse" element={<DashLayout><TermsOfUse /></DashLayout>} />
               <Route path="*" element={<Home/>} />

src/components/tst-staking/StakingDecreaseModal.jsx

@@ -20,7 +20,7 @@ import Input from "../ui/Input";
 import CenterLoader from "../ui/CenterLoader";
 
 const StakingDecreaseModal = ({
-  stakedPositions,
+  tstAmount,
   isOpen,
   handleCloseModal,
 }) => {
@@ -36,9 +36,7 @@ const StakingDecreaseModal = ({
 
   const tstInputRef = useRef(null);
 
-  const tstPosition = stakedPositions?.find((item) => item.asset === 'TST');
-
-  const tstStakedAmount = tstPosition?.amount;
+  const tstStakedAmount = tstAmount;
 
   const useTstStakedAmount = formatEther(tstStakedAmount.toString());
 

src/components/tst-staking/StakingIncrease.jsx

@@ -14,7 +14,6 @@ import { ethers } from "ethers";
 import {
   useTstAddressStore,
   useErc20AbiStore,
-  usesEuroAddressStore,
   useStakingPoolv3AbiStore,
   useStakingPoolv3AddressStore,
 } from "../../store/Store.jsx";
@@ -30,10 +29,6 @@ const StakingIncrease = () => {
     arbitrumTstAddress,
     arbitrumSepoliaTstAddress,
   } = useTstAddressStore();
-  const {
-    arbitrumsEuroAddress,
-    arbitrumSepoliasEuroAddress,
-  } = usesEuroAddressStore();
   const {
     arbitrumSepoliaStakingPoolv3Address,
     arbitrumStakingPoolv3Address,
@@ -43,7 +38,6 @@ const StakingIncrease = () => {
   const { stakingPoolv3Abi } = useStakingPoolv3AbiStore();
   const [tstStakeAmount, setTstStakeAmount] = useState(0);
   const [stage, setStage] = useState('');
-  const [helpOpen, setHelpOpen] = useState(false);
 
   const tstInputRef = useRef(null);
 
@@ -197,9 +191,6 @@ const StakingIncrease = () => {
             Depositing will automatically claim your existing rewards, ending your current staking period and restarting a new one.
           </Typography>
           <div>
-            {/* <Typography variant="p" className="pb-2">
-              TST Deposit Amount
-            </Typography> */}
             <div className="flex justify-between">
               <Typography
                 variant="p"
@@ -238,6 +229,7 @@ const StakingIncrease = () => {
                 loading={isPending}
                 disabled={isPending || tstStakeAmount <= 0 }
                 onClick={handleLetsStake}
+                className="w-full lg:w-1/2"
               >
                 Deposit
               </Button>

src/components/tst-staking/StakingRewards.jsx

@@ -1,5 +1,3 @@
-import { useState } from "react";
-import { ethers } from "ethers";
 import {
   useReadContracts,
 } from "wagmi";
@@ -8,32 +6,22 @@ import {
   useErc20AbiStore,
 } from "../../store/Store";
 
-import Button from "../ui/Button";
-import Card from "../ui/Card";
-import Typography from "../ui/Typography";
-import CenterLoader from "../ui/CenterLoader";
-
-import ClaimingRewardsModal from "./ClaimingRewardsModal";
+import StakingSummary from "./StakingSummary";
+import StakingRewardsList from "./StakingRewardsList";
 
 const StakingRewards = ({
-  stakedSince,
-  collaterals,
+  positions,
   poolRewardsLoading,
+  dailyYieldLoading,
+  rewards,
+  collaterals,
+  stakedSince,
+  rawStakedSince,
   collatDaily,
+  priceData,
 }) => {
-  const [open, setOpen] = useState(false);
   const { erc20Abi } = useErc20AbiStore();
 
-  if (poolRewardsLoading) {
-    return (
-      <Card className="card-compact">
-        <div className="card-body">
-          <CenterLoader />
-        </div>
-      </Card>
-    )
-  }
-
   const { data: rewardDecimals } = useReadContracts({
     contracts:collaterals.map((item) =>({
       address: item.token,
@@ -87,93 +75,42 @@ const StakingRewards = ({
     }
   });
 
-  const handleCloseModal = () => {
-    setOpen(false)
-  };
-
-  const rows = rewardData || [];
-
-  let noRewards = true;
-  if (rows.some(e => e.amount > 0)) {
-    noRewards = false;
+  const handleDailyPrices = () => {
+    const prices = {};
+    for (const [token, tokenData] of Object.entries(priceData)) {
+      if (tokenData.prices && tokenData.prices.length > 0) {
+        const latestPrice = tokenData.prices[tokenData.prices.length - 1].price;
+        // convert to dollar value
+        prices[token] = parseFloat(latestPrice) / 100000000;
+      }
+    }
+    return prices;
   }
 
-  return (
-    <Card className="card-compact w-full">
-      <div className="card-body">
-        <Typography variant="h2" className="card-title justify-between">
-          Projected Rewards
-        </Typography>
-        <div>
-          <Typography variant="p" className="mb-2">
-            You can earn rewards every 24 hours after your staking period begins.
-          </Typography>
-          <Typography variant="p" className="mb-2">
-            Your reward rates are based on a the number of tokens you have staked.
-          </Typography>
-          {stakedSince ? (
-            <Typography variant="p">
-              Staked Since:
-              <b> {stakedSince}</b>
-            </Typography>
-          ) : null}
-        </div>
+  const latestPrices = handleDailyPrices();
 
-        <div className="overflow-x-auto">
-          <table className="table table-zebra">
-            <thead>
-              <tr>
-                <th>Asset</th>
-                <th>Amount</th>
-                <th>Daily Reward Per Token</th>
-              </tr>
-            </thead>
-            {poolRewardsLoading ? (null) : (
-              <tbody>
-                {rows.map(function(asset, index) {
-                  const amount = asset?.amount || 0n;
-                  const decimals = asset?.decimals;
-                  const symbol = asset?.asset;
-                  const dailyReward = asset?.dailyReward || 0n;
-
-                  return(
-                    <tr key={index}>
-                      <td>
-                        {symbol}
-                      </td>
-                      <td>
-                        {ethers.formatUnits(amount, decimals)}
-                      </td>
-                      <td className="whitespace-nowrap">
-                        {ethers.formatUnits(dailyReward, decimals)}
-                        <span className="opacity-40"> / TST</span>
-                      </td>
-                    </tr>
-                  )}
-                )}
-              </tbody>
-            )}
-          </table>
-          {poolRewardsLoading ? (
-            <CenterLoader slim />
-          ) : (null)}
-        </div>
-
-        <div className="card-actions flex flex-row justify-end">
-          <Button
-            color="primary"
-            onClick={() => setOpen(true)}
-            disabled={noRewards}
-          >
-            Claim
-          </Button>
-        </div>
-        <ClaimingRewardsModal
-          handleCloseModal={handleCloseModal}
-          isOpen={open}
-        />
-      </div>
-    </Card>
+  return (
+    <div className="grid gap-4 grid-cols-1">
+      <StakingSummary
+        positions={positions}
+        poolRewardsLoading={poolRewardsLoading}
+        dailyYieldLoading={dailyYieldLoading}
+        rewards={rewards}
+        rewardsData={rewardData}
+        collaterals={collaterals}
+        stakedSince={stakedSince}
+        rawStakedSince={rawStakedSince}
+        collatDaily={collatDaily}
+        latestPrices={latestPrices}
+      />
+      <StakingRewardsList
+        positions={positions}
+        poolRewardsLoading={poolRewardsLoading}
+        dailyYieldLoading={dailyYieldLoading}
+        rewardData={rewardData}
+        latestPrices={latestPrices}
+      />
+    </div>
   )
 };