Merge branch '202411-merkl-yield' of github.com:the-standard/decentra…

…lised-dashboard-fork into beta

src/components/tst-staking/StakingRewards.jsx

@@ -19,6 +19,8 @@ const StakingRewards = ({
   rawStakedSince,
   collatDaily,
   priceData,
+  tstGlobalBalance,
+  tstGlobalBalanceLoading,
 }) => {
   const { erc20Abi } = useErc20AbiStore();
 
@@ -102,6 +104,8 @@ const StakingRewards = ({
         rawStakedSince={rawStakedSince}
         collatDaily={collatDaily}
         latestPrices={latestPrices}
+        tstGlobalBalance={tstGlobalBalance}
+        tstGlobalBalanceLoading={tstGlobalBalanceLoading}
       />
       <StakingRewardsList
         positions={positions}

src/components/tst-staking/StakingSummary.jsx

@@ -153,6 +153,8 @@ const StakingSummary = ({
   stakedSince,
   rawStakedSince,
   latestPrices,
+  tstGlobalBalance,
+  tstGlobalBalanceLoading,
 }) => {
   const [open, setOpen] = useState(false);
   const [shareOpen, setShareOpen] = useState(false);
@@ -175,7 +177,15 @@ const StakingSummary = ({
   }
 
   // formatted amount
-  const stakedAmount = ethers.formatEther(tstAmount.toString());
+  const stakedAmount = ethers.formatUnits(tstAmount.toString(), 18);
+
+  let globalAmount = 0;
+
+  if (tstGlobalBalance) {
+    globalAmount = ethers.formatUnits(tstGlobalBalance.toString(), 18);
+  }
+
+  const poolShare = Number((stakedAmount / globalAmount) * 100).toFixed(8);
 
   const handleCloseModal = () => {
     setOpen(false)
@@ -220,22 +230,6 @@ const StakingSummary = ({
     return since;
   }
 
-  // const calculateSimpleAPY = (stakedAmount, totalRewardsValue, daysStaked) => {
-  //   const dailyEarnings = Number(totalRewardsValue / daysStaked) || 0;
-  //   const annualEarningsPerTST = (dailyEarnings * 365) / Number(stakedAmount) || 0;
-  //   return annualEarningsPerTST * 100;
-  // }
-  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);
@@ -267,10 +261,6 @@ const StakingSummary = ({
   if (nextTier?.minAmount) {
     progress = (stakedAmount / nextTier.minAmount) * 100;
   }
-  const apyDisplay = calculateSimpleAPY(stakedAmount, totalRateUSD, daysStaked) + '%' || '0%';
-  // const apyDisplay = calculateSimpleAPY(totalValueUSD, dailyEarnings).toFixed(8) + '%' || '0%';
-
-  let stakeRatio = 'TODO.DOTO';
 
   let progressPercentage = `${progress}%`;
 
@@ -306,14 +296,14 @@ const StakingSummary = ({
                 </Typography>
               </div>
             </div>
-            {/* <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
+            <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
               <div className="w-full">
                 <Typography variant="p">
-                  Historical APY
+                  Your Pool Share
                   <Tooltip
                     className="flex-col justify-center items-center cursor-pointer before:w-[12rem]"
                     position="top"
-                    message="Based on current earning rate"
+                    message="You receive 0% of all revenue generated by TheStandard protocol"
                   >
                     <QuestionMarkCircleIcon
                       className="mb-1 ml-1 h-5 w-5 inline-block opacity-60"
@@ -324,7 +314,7 @@ const StakingSummary = ({
                   0%
                 </Typography>
               </div>
-            </div>   */}
+            </div>
           </div>
 
           <div className="grid grid-cols-1 gap-4 mb-2">
@@ -400,7 +390,7 @@ const StakingSummary = ({
           Participate in protocol governance
         </Typography>
 
-        <div className="grid grid-cols-1 gap-4 mb-2">
+        <div className="grid grid-cols-2 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">
@@ -411,44 +401,31 @@ const StakingSummary = ({
               </Typography>
             </div>
           </div>
-          {/* <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
-            <div className="w-full">
-              <Typography variant="p">
-                Historical APY
-                <Tooltip
-                  className="flex-col justify-center items-center cursor-pointer before:w-[12rem]"
-                  position="top"
-                  message="Based on current earning rate"
-                >
-                  <QuestionMarkCircleIcon
-                    className="mb-1 ml-1 h-5 w-5 inline-block opacity-60"
-                  />
-                </Tooltip>
-              </Typography>
-              <Typography variant="h2">
-                {apyDisplay}
-              </Typography>
-            </div>
-          </div> */}
-          {/* <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
+          <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
             <div className="w-full">
               <Typography variant="p">
                 Your Pool Share
                 <Tooltip
                   className="flex-col justify-center items-center cursor-pointer before:w-[12rem]"
                   position="top"
-                  message="The % of all revenue generated by TheStandard protocol that you receive"
+                  message={`You receive ${poolShare}% of all revenue generated by TheStandard protocol`}
                 >
                   <QuestionMarkCircleIcon
                     className="mb-1 ml-1 h-5 w-5 inline-block opacity-60"
                   />
                 </Tooltip>
               </Typography>
               <Typography variant="h2">
-                {stakeRatio}
+                  {tstGlobalBalanceLoading ? (
+                    <span className="loading loading-bars loading-xs"></span>
+                  ) : (
+                    <>
+                      {poolShare || 0}%
+                    </>
+                  )}
               </Typography>
             </div>
-          </div> */}
+          </div>
 
         </div>
 

src/components/vault/merkl/RewardItem.jsx

@@ -64,6 +64,10 @@ const RewardItem = ({
         <td>
           {ethers.formatUnits(balance, decimals)}
         </td>
+        <td className="hidden md:table-cell">
+          {ethers.formatUnits(claimed, decimals)}
+        </td>
+        <td className="table-cell md:hidden"></td>
         <td>
           {ethers.formatUnits(unclaimed, decimals)}
         </td>
@@ -87,7 +91,7 @@ const RewardItem = ({
           'glass-alt-bg w-full hidden h-0'
         )}
       >
-        <td colSpan="4">
+        <td colSpan="5">
           <>
             <div className="flex flex-col sm:flex-row flex-wrap gap-4">
               <Button

src/components/vault/merkl/RewardList.jsx

@@ -8,6 +8,14 @@ import {
   QueueListIcon,
 } from '@heroicons/react/24/outline';
 
+import {
+  Tooltip,
+} from 'react-daisyui';
+
+import {
+  QuestionMarkCircleIcon,
+} from '@heroicons/react/24/outline';
+
 import {
   useErc20AbiStore,
   useVaultAddressStore,
@@ -93,10 +101,49 @@ const RewardList = ({
         <table className="table table-fixed">
           <thead>
             <tr>
-              <th>Asset</th>
-              <th>Balance</th>
-              <th>Unclaimed</th>
-              <th>&nbsp;</th>
+              <th>
+                Asset
+              </th>
+              <th>
+                Current Balance
+                <Tooltip
+                  className="flex-col justify-center items-center cursor-pointer before:max-w-[20rem] whitespace-normal"
+                  position="top"
+                  message="Your current total claimed balance. Also includes any tokens you have stored as vault collateral."
+                >
+                  <QuestionMarkCircleIcon
+                    className="mb-1 ml-1 h-5 w-5 inline-block opacity-60"
+                  />
+                </Tooltip>
+              </th>
+              <th className="hidden md:table-cell">
+                Lifetime Accumulated
+                <Tooltip
+                  className="flex-col justify-center items-center cursor-pointer before:max-w-[20rem] whitespace-normal"
+                  position="top"
+                  message="Your total earned tokens over the lifetime of your position. This includes unclaimed tokens and previously withdrawn tokens."
+                >
+                  <QuestionMarkCircleIcon
+                    className="mb-1 ml-1 h-5 w-5 inline-block opacity-60"
+                  />
+                </Tooltip>
+              </th>
+              <th className="table-cell md:hidden">&nbsp;</th>
+              <th>
+                Unclaimed
+                <Tooltip
+                  className="flex-col justify-center items-center cursor-pointer before:max-w-[20rem] whitespace-normal"
+                  position="top"
+                  message="Your current unclaimed rewards"
+                >
+                  <QuestionMarkCircleIcon
+                    className="mb-1 ml-1 h-5 w-5 inline-block opacity-60"
+                  />
+                </Tooltip>
+              </th>
+              <th>
+                &nbsp;
+              </th>
             </tr>
           </thead>
           {merklRewardsLoading || merklBalancesLoading ? (null) : (

src/components/vault/yield/YieldClaimModal.jsx

@@ -263,7 +263,7 @@ const YieldClaimModal = ({
               variant="outline"
               onClick={() => setYieldStage('')}
             >
-              Return to Vault
+              Back
             </Button>
             <Button
               className="w-full lg:w-64"
@@ -317,7 +317,7 @@ const YieldClaimModal = ({
                 variant="outline"
                 onClick={handleCloseModal}
               >
-                Return to Vault
+                Back
               </Button>
               <Button
                 className="w-full lg:w-64"
@@ -408,7 +408,7 @@ const YieldClaimModal = ({
                 variant="outline"
                 onClick={handleCloseModal}
               >
-                Return to Vault
+                Back
               </Button>
               <Button
                 className="w-full lg:w-64"

src/components/vault/yield/YieldPerformanceModal.jsx

@@ -190,7 +190,7 @@ const YieldPerformanceModal = ({
                   Current Value
                 </Typography>
                 <Typography variant="h1" className="font-bold flex items-center">
-                  <span className="text-sm inline-block font-normal">~</span>${currentUSD?.toFixed(2) || ''}
+                  <span className="text-sm inline-block font-normal">≈</span>${currentUSD?.toFixed(2) || ''}
                 </Typography>
               </div>
             </div>
@@ -249,7 +249,7 @@ const YieldPerformanceModal = ({
               variant="outline"
               onClick={handleCloseModal}
             >
-              Return to Vault
+              Back
             </Button>
             <Button
               className="w-full lg:w-64"

src/components/vault/yield/YieldViewModal.jsx

@@ -339,7 +339,7 @@ const YieldViewModal = ({
               variant="outline"
               onClick={handleCloseModal}
             >
-              Return to Vault
+              Back
             </Button>
             <Button
               className="w-full lg:w-64"

src/pages/tst-staking/TstStaking.jsx

@@ -14,6 +14,8 @@ import {
 } from '@heroicons/react/24/outline';
 
 import {
+  useTstAddressStore,
+  useErc20AbiStore,
   useStakingPoolv3AbiStore,
   useStakingPoolv3AddressStore,
 } from "../../store/Store";
@@ -27,16 +29,26 @@ import Typography from "../../components/ui/Typography";
 
 const TstStaking = (props) => {
   const { stakingPoolv3Abi } = useStakingPoolv3AbiStore();
-  const navigate = useNavigate();
+  const { erc20Abi } = useErc20AbiStore();
 
   const {
     arbitrumSepoliaStakingPoolv3Address,
     arbitrumStakingPoolv3Address,
   } = useStakingPoolv3AddressStore();
+
+  const {
+    arbitrumTstAddress,
+    arbitrumSepoliaTstAddress,
+  } = useTstAddressStore();
 
+  const navigate = useNavigate();
   const { address } = useAccount();
   const chainId = useChainId();
 
+  const tstAddress = chainId === arbitrumSepolia.id ?
+  arbitrumSepoliaTstAddress :
+  arbitrumTstAddress;
+
   const stakingPoolv3Address =
   chainId === arbitrumSepolia.id
     ? arbitrumSepoliaStakingPoolv3Address
@@ -63,11 +75,19 @@ const TstStaking = (props) => {
     args: [],
   });
 
+  const { data: tstGlobalBalance, isLoading: tstGlobalBalanceLoading, refetch: refetchTstGlobalBalance } = useReadContract({
+    address: tstAddress,
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: [stakingPoolv3Address],
+  });
+
   useWatchBlockNumber({
     onBlockNumber() {
       refetchPositions();
       refetchRewards();
       refetchDailyReward();
+      refetchTstGlobalBalance();
     },
   })
 
@@ -174,6 +194,8 @@ const TstStaking = (props) => {
                 collatDaily={collatDaily}
                 priceData={priceData}
                 priceDataLoading={priceDataLoading}
+                tstGlobalBalance={tstGlobalBalance}
+                tstGlobalBalanceLoading={tstGlobalBalanceLoading}
               />
             </>
           )}