Merge branch '202411-staking-yield' of github.com:the-standard/decent…

…ralised-dashboard-fork into beta
the-standard · Nov 11, 2024 · 7dfb18b · 7dfb18b
2 parents 7960065 + 688cb68
commit 7dfb18b
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 33 deletions.
diff --git a/src/App.css b/src/App.css
@@ -717,3 +717,27 @@ button.btn.btn-outline:disabled {
   -webkit-mask: radial-gradient(67px, #0000 98%, #000);
   mask: radial-gradient(67px, #0000 98%, #000);
 }
+
+.btn-ping-wrap {
+  position: relative;
+  display: flex;
+}
+
+.btn-ping-wrap > .btn {
+  z-index: 1;
+}
+
+.btn-ping {
+  position: absolute;
+  opacity: 0.75;
+  animation: btn-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  z-index: 0;
+}
+
+@keyframes btn-ping {
+  75%,
+  100% {
+    transform: scaleX(1.1)scaleY(1.5);
+    opacity: 0;
+  }
+}
diff --git a/src/assets/twitterlogo.svg b/src/assets/twitterlogo.svg
diff --git a/src/components/tst-staking/StakingIncrease.jsx b/src/components/tst-staking/StakingIncrease.jsx
@@ -229,6 +229,7 @@ const StakingIncrease = () => {
                 loading={isPending}
                 disabled={isPending || tstStakeAmount <= 0 }
                 onClick={handleLetsStake}
+                className="w-full lg:w-1/2"
               >
                 Deposit
               </Button>

diff --git a/src/components/tst-staking/StakingRewardsList.jsx b/src/components/tst-staking/StakingRewardsList.jsx
@@ -99,13 +99,13 @@ const StakingRewardsList = ({
                       <td>
                         {ethers.formatUnits(amount, decimals)}<br/>
                         <span className="opacity-50">
-                          ~${value.toFixed(8)}
+                          ${value.toFixed(8)}
                         </span>
                       </td>
                       <td>
                         {ethers.formatUnits(dailyReward, decimals)}<br/>
                         <span className="opacity-50">
-                          ~${rate.toFixed(8)}
+                          ${rate.toFixed(8)}
                         </span>
                       </td>
                     </tr>

diff --git a/src/components/tst-staking/StakingSummary.jsx b/src/components/tst-staking/StakingSummary.jsx
@@ -228,10 +228,14 @@ const StakingSummary = ({
   const calculateSimpleAPY = (stakedAmount, totalRewardsValue, daysStaked) => {
     const dailyEarnings = totalRewardsValue || 0;
     const annualEarningsPerTST = (dailyEarnings * 365) / Number(stakedAmount) || 0;
-
     return annualEarningsPerTST;
   }
 
+  // const calculateSimpleAPY = (totalValueUSD, dailyEarnings) => {    
+  //   const apy = Number(dailyEarnings * 365);
+  //   return apy;
+  // }
+
   const rewardsWithPrices = rewardsData.map(reward => {
     const useAmount = ethers.formatUnits(reward.amount, reward.decimals);
     const useRate = ethers.formatUnits(reward.dailyReward, reward.decimals);
@@ -246,12 +250,14 @@ const StakingSummary = ({
     };
   })
 
-
   const totalValueUSD = rewardsWithPrices.reduce((sum, reward) => sum + reward.usdValue, 0) || 0;
   const totalRateUSD = rewardsWithPrices.reduce((sum, reward) => sum + reward.usdRate, 0) || 0;
 
   const daysStaked = getDaysStaked() || 0;
-  const dailyEarnings = (totalRateUSD / daysStaked) || 0;
+  let dailyEarnings = (totalRateUSD / daysStaked) || 0;
+  if (!(daysStaked >= 1)) {
+    dailyEarnings = 0;
+  }
   const monthlyProjection = (dailyEarnings * 30) || 0;
 
   const currentTier = getCurrentTier(stakedAmount);
@@ -262,6 +268,7 @@ const StakingSummary = ({
     progress = (stakedAmount / nextTier.minAmount) * 100;
   }
   const apyDisplay = calculateSimpleAPY(stakedAmount, totalRateUSD, daysStaked) + '%' || '0%';
+  // const apyDisplay = calculateSimpleAPY(totalValueUSD, dailyEarnings).toFixed(8) + '%' || '0%';
 
   let stakeRatio = 'TODO.DOTO';
 
@@ -274,7 +281,7 @@ const StakingSummary = ({
 
   const lowestTier = STATUS_TIERS[STATUS_TIERS.length - 1];
 
-  const shareText = `🏆 ${currentTier.name} on @TheStandardIO\n\n💫 Staking ${formatNumber(stakedAmount)} TST\n💰 Earning ${formatUSD(dailyEarnings)} daily\n⚡️ Supporting zero-interest borrowing\n\nJoin the future of DeFi!\nthestandard.io`;
+  const shareText = `🏆 Yes! I made it to ${currentTier.name} on @TheStandard_io\n\n💫 Staking ${formatNumber(stakedAmount)} TST\n💰 Earning ${formatUSD(dailyEarnings)} daily\n⚡️ Supporting zero-interest borrowing\n\nJoin the future of DeFi!\nthestandard.io`;
 
   if (!rawStakedSince) {
     return (
@@ -288,7 +295,7 @@ const StakingSummary = ({
             Participate in protocol governance
           </Typography>
 
-          <div className="grid grid-cols-1 gap-4 mb-4">
+          <div className="grid grid-cols-1 gap-4 mb-2">
             <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
               <div className="w-full">
                 <Typography variant="p">
@@ -320,7 +327,7 @@ const StakingSummary = ({
             </div>   */}
           </div>
 
-          <div className="grid grid-cols-1 gap-4 mb-4">
+          <div className="grid grid-cols-1 gap-4 mb-2">
             <div className="bg-base-300/40 p-4 rounded-lg w-full">
               <div className="flex justify-between items-center mb-2">
                 <Typography variant="p" className="font-bold">
@@ -393,8 +400,7 @@ const StakingSummary = ({
           Participate in protocol governance
         </Typography>
 
-        {/* <div className="grid grid-cols-3 gap-4 mb-4"> */}
-        <div className="grid grid-cols-1 gap-2 mb-2">
+        <div className="grid grid-cols-1 gap-4 mb-2">
           <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
             <div className="w-full">
               <Typography variant="p">
@@ -446,21 +452,39 @@ const StakingSummary = ({
 
         </div>
 
-        <div className="grid grid-cols-1 gap-2 mb-2">
-          <div className="bg-base-300/40 p-4 rounded-lg w-full">
-            <div className="flex justify-between items-center mb-2">
-              <Typography variant="p" className="font-bold">
-                Your Daily Earnings
+        {daysStaked >= 1 ? (
+          <div className="grid grid-cols-1 gap-2 mb-2">
+            <div className="bg-base-300/40 p-4 rounded-lg w-full">
+              <div className="flex justify-between items-center mb-2">
+                <Typography variant="p" className="font-bold">
+                  Your Daily Earnings
+                </Typography>
+                <Typography variant="p" className={`text-end text-green-500`}>
+                  {formatUSD(dailyEarnings)}
+                </Typography>
+              </div>
+              <Typography variant="p">
+                Earning {formatUSD(monthlyProjection)} monthly at current rates
               </Typography>
-              <Typography variant="p" className={`text-end text-green-500`}>
-                {formatUSD(dailyEarnings)}
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-2 mb-2">
+            <div className="bg-base-300/40 p-4 rounded-lg w-full">
+              <div className="flex justify-between items-center mb-2">
+                <Typography variant="p" className="font-bold">
+                  Your Daily Earnings
+                </Typography>
+                <Typography variant="p" className={`text-end text-green-500`}>
+                  {formatUSD(0)}
+                </Typography>
+              </div>
+              <Typography variant="p">
+                Rates will be calculated after the first 24 hours period passes
               </Typography>
             </div>
-            <Typography variant="p">
-              Earning {formatUSD(monthlyProjection)} monthly at current rates
-            </Typography>
           </div>
-        </div>
+        )}
 
         <div className="bg-emerald-400/20 p-4 rounded-lg w-full">
           <div className="flex items-center justify-between mb-2">

diff --git a/src/components/vault/TokenList.jsx b/src/components/vault/TokenList.jsx
@@ -230,14 +230,20 @@ const TokenList = ({
                                   >
                                     Swap
                                   </Button>
-                                  <Button
-                                    variant="outline"
-                                    disabled={amount <= 0 || !yieldEnabled || !tokenYield}
-                                    onClick={() => handleClick('YIELD', asset)}
-                                    className="grow"
-                                  >
-                                    Place In Yield Pool
-                                  </Button>
+                                  <div className="btn-ping-wrap grow">
+                                    <Button
+                                      // variant="outline"
+                                      color="success"
+                                      disabled={amount <= 0 || !yieldEnabled || !tokenYield}
+                                      onClick={() => handleClick('YIELD', asset)}
+                                      className="grow"
+                                    >
+                                      Place In Yield Pool
+                                    </Button>
+                                    {(amount <= 0 || !yieldEnabled || !tokenYield) ? (null) : (
+                                      <span class="btn-ping h-full w-full rounded-lg bg-green-400 opacity-75"></span>
+                                    )}
+                                  </div>
                                 </div>
                               </>
                             )}

diff --git a/src/components/vault/yield/YieldPerformanceModal.jsx b/src/components/vault/yield/YieldPerformanceModal.jsx
@@ -253,7 +253,7 @@ const YieldPerformanceModal = ({
             </Button>
             <Button
               className="w-full lg:w-64"
-              color="error"
+              variant="outline"
               onClick={() => openClaim()}
             >
               Stop Earning Yield

diff --git a/src/components/vault/yield/YieldViewModal.jsx b/src/components/vault/yield/YieldViewModal.jsx
@@ -343,7 +343,7 @@ const YieldViewModal = ({
             </Button>
             <Button
               className="w-full lg:w-64"
-              color="error"
+              variant="outline"
               onClick={() => openClaim()}
             >
               Stop Earning Yield