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

…lised-dashboard-fork into beta

src/components/tst-staking/StakingSummary.jsx

@@ -396,9 +396,18 @@ const StakingSummary = ({
               <Typography variant="p">
                 Total TST Staked
               </Typography>
-              <Typography variant="h2">
-                {stakedAmount} TST
-              </Typography>
+              <Tooltip
+                className="flex-col justify-center items-center cursor-pointer before:w-[12rem]"
+                position="top"
+                message={`${stakedAmount} TST`}
+              >
+                <Typography variant="h2">
+                  {stakedAmount ? (
+                    Number.parseFloat(Number(stakedAmount).toFixed(4))
+                  ) : ('0')}
+                  &nbsp;TST
+                </Typography>
+              </Tooltip>
             </div>
           </div>
           <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">

src/components/vault/TokenList.jsx

@@ -241,7 +241,7 @@ const TokenList = ({
                                       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>
+                                      <span className="btn-ping h-full w-full rounded-lg bg-green-400 opacity-75"></span>
                                     )}
                                   </div>
                                 </div>

src/components/vault/merkl/RewardList.jsx

@@ -172,7 +172,7 @@ const RewardList = ({
               ) : (
                 <>
                   <tr className="glass-alt-bg w-full p-4 h-auto">
-                    <td colSpan="4">
+                    <td colSpan="5">
                       <b>No Rewards Earned Yet.</b>
                       <br/>
                       Start earning by placing your tokens into the yield pool.

src/components/vault/yield/YieldDepositModal.jsx

@@ -14,6 +14,7 @@ import {
 
 import {
   useVaultAddressStore,
+  useLocalThemeModeStore,
 } from "../../../store/Store";
 
 import {
@@ -36,6 +37,7 @@ const YieldDepositModal = (props) => {
     symbol,
   } = props;
   const { vaultAddress } = useVaultAddressStore();
+  const { localThemeModeStore } = useLocalThemeModeStore();
   const chainId = useChainId();
   const [ yieldStage, setYieldStage ] = useState('');
   const [ stableRatio, setStableRatio ] = useState(10);
@@ -47,6 +49,8 @@ const YieldDepositModal = (props) => {
 
   const { writeContract, isError, error, isPending, isSuccess } = useWriteContract();
 
+  const isLight = localThemeModeStore && localThemeModeStore.includes('light');
+
   const handleDepositYield = async () => {
     const now = Math.floor(Date.now() / 1000);
     const deadline = now + 60;    
@@ -210,7 +214,10 @@ const YieldDepositModal = (props) => {
                 min={0}
                 max="100"
                 value={stableRatio}
-                className={`range [--range-shdw:unset] [&::-webkit-slider-thumb]:bg-white`}
+                className={isLight ? 
+                  `range [--range-shdw:unset] [&::-webkit-slider-thumb]:bg-primary` :
+                  `range [--range-shdw:unset] [&::-webkit-slider-thumb]:bg-white`
+                }
                 onChange={(e) => handleStableRatio(e.target.value)}
               />
             </div>

src/components/vault/yield/YieldList.jsx

@@ -164,7 +164,7 @@ const YieldList = (props) => {
                           </>
                         ) : (
                           <>
-                            ${showBalance || ''}
+                            ${showBalance || '0.00'}
                           </>
                         )}
                       </td>

src/components/vault/yield/YieldParent.jsx

@@ -32,6 +32,8 @@ const YieldParent = (props) => {
   const [ gammaReturnsLoading, setGammaReturnsLoading ] = useState(false);
   const [ gammaStats, setGammaStats ] = useState([]);
   const [ gammaStatsLoading, setGammaStatsLoading ] = useState(false);
+  const [ merklRewards, setMerklRewards ] = useState([]);
+  const [ merklRewardsLoading, setMerklRewardsLoading ] = useState(true);
 
   const [ userSummary, setUserSummary ] = useState([]);
 
@@ -65,6 +67,38 @@ const YieldParent = (props) => {
     }
   }, [yieldData, isPending]);
 
+  useEffect(() => {
+    getMerklRewardsData();
+  }, [vaultAddress]);
+
+  const getMerklRewardsData = async () => {  
+    try {
+      setMerklRewardsLoading(true);
+      const response = await axios.get(
+        `https://api.merkl.xyz/v3/userRewards?chainId=42161&proof=true&user=${vaultAddress}`
+      );
+
+      const useData = response?.data;
+
+      const rewardsArray = [];
+
+      Object.keys(useData).forEach(key => {
+        const value = useData[key];
+        const rewardItem = {
+          tokenAddress: key,
+          ... value
+        }
+        rewardsArray.push(rewardItem);
+      });
+
+      setMerklRewards(rewardsArray);
+      setMerklRewardsLoading(false);
+    } catch (error) {
+      setMerklRewardsLoading(false);
+      console.log(error);
+    }
+  };
+
   const getGammaUserData = async () => {  
     try {
       setGammaUserLoading(true);
@@ -215,6 +249,8 @@ const YieldParent = (props) => {
                     gammaUser={gammaUser}
                     gammaUserLoading={gammaUserLoading}
                     userSummary={userSummary}
+                    merklRewards={merklRewards}
+                    merklRewardsLoading={merklRewardsLoading}
                   />
                 </div>
               </Card>

src/components/vault/yield/YieldPerformanceModal.jsx

@@ -44,9 +44,9 @@ const YieldPerformanceModal = ({
   const initialTokenCurrentUSD = positionUser?.returns?.initialTokenCurrentUSD || 0;
   const currentUSD = positionUser?.returns?.currentUSD || 0;
   const hypervisorReturnsUSD = positionUser?.returns?.hypervisorReturnsUSD;
-  const hypervisorReturnsPercentage = positionUser?.returns?.hypervisorReturnsPercentage;
-  const netMarketReturnsUSD = positionUser?.returns?.netMarketReturnsUSD;
-  const netMarketReturnsPercentage = positionUser?.returns?.netMarketReturnsPercentage;
+  const hypervisorReturnsPercentage = positionUser?.returns?.hypervisorReturnsPercentage || 0;
+  const netMarketReturnsUSD = positionUser?.returns?.netMarketReturnsUSD || 0;
+  const netMarketReturnsPercentage = positionUser?.returns?.netMarketReturnsPercentage || 0;
   const tvlUSD = Number(positionStats?.tvlUSD) || 0;
 
   let showApy = '0';
@@ -55,7 +55,7 @@ const YieldPerformanceModal = ({
   }
 
   const getMarketContext = () => {
-    const marketReturn = parseFloat(netMarketReturnsPercentage);
+    const marketReturn = parseFloat(netMarketReturnsPercentage) || 0;
     if (marketReturn > 0) {
       return {
         description: `Market movement has generated ${formatUSD(netMarketReturnsUSD)}`,

src/components/vault/yield/YieldSummary.jsx

@@ -4,6 +4,12 @@ import {
   PresentationChartLineIcon
 } from '@heroicons/react/24/outline';
 
+import {
+  useMerklRewardsUSD,
+} from "../../../store/Store";
+
+import YieldSummaryMerkl from "./YieldSummaryMerkl";
+
 const formatUSD = (value) => {
   if (value) {
     return new Intl.NumberFormat('en-US', {
@@ -23,9 +29,11 @@ const formatPercentage = (value) => {
 
 const YieldSummary = ({
   gammaUserLoading,
-  userSummary
+  userSummary,
+  merklRewards,
+  merklRewardsLoading,
 }) => {
-
+  const { merklRewardsUSD } = useMerklRewardsUSD();
 
   let positions = [];
 
@@ -54,6 +62,10 @@ const YieldSummary = ({
       weightedMarketYieldSum += (parseFloat(position.netMarketReturnsPercentage) * weight);
     });
 
+    if (merklRewardsUSD) {
+      totalYieldEarned += merklRewardsUSD
+    }
+
     return {
       totalBalance,
       totalYieldEarned,
@@ -123,7 +135,7 @@ const YieldSummary = ({
     // Market is neutral/down, strategy building
     return (
       <span>
-        Your {formatUSD(totalBalance)} position is actively accumulating trading fees in TheStandard's yield pools. While the market impact is {formatUSD(totalMarketYield)} ({formatPercentage(weightedAverageMarketAPY)}), the strategy is building reserves through trading fees, currently at {formatUSD(totalYieldEarned)} ({formatPercentage(weightedAverageYieldAPY)}). This approach typically shows its strength over longer holding periods as fees accumulate.
+        Your {formatUSD(totalBalance)} position is actively accumulating trading fees in TheStandard's yield pools. While the market impact is {formatUSD(totalMarketYield)} ({formatPercentage(weightedAverageMarketAPY) || '0%'}), the strategy is building reserves through trading fees, currently at {formatUSD(totalYieldEarned)} ({formatPercentage(weightedAverageYieldAPY) || '0%'}). This approach typically shows its strength over longer holding periods as fees accumulate.
       </span>
     );
   };
@@ -141,7 +153,7 @@ const YieldSummary = ({
             <PresentationChartLineIcon
               className="mr-2 h-6 w-6 inline-block"
             />
-            Yield Pool Summary
+            Yield Summary
           </Typography>
           <Typography variant="p">
             {getPerformanceMessage(metrics.totalYieldEarned, metrics.totalMarketYield)}
@@ -180,10 +192,15 @@ const YieldSummary = ({
           </div>
         </div>
         <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
-          <Typography variant="p">
-            Yield Generated
-          </Typography>
-          <div>
+          <div className="w-full">
+            <Typography variant="p">
+              Yield Generated
+            </Typography>
+            <Typography variant="p" className="opacity-40">
+              Including Merkl rewards
+            </Typography>
+          </div>
+          <div className="w-full">
             {gammaUserLoading ? (
               <>
                 <span className="loading loading-bars loading-md"></span>
@@ -200,27 +217,33 @@ const YieldSummary = ({
                   variant="p"
                   className={`text-end ${getYieldColor(metrics.weightedAverageYieldAPY)}`}
                 >
-                  {formatPercentage(metrics.weightedAverageYieldAPY)} APY
+                  {formatPercentage(metrics.weightedAverageYieldAPY) || '0%'} APY
                 </Typography>
               </>
             )}
           </div>
         </div>
-        <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
-          <Typography variant="p">
-            Assets in Yield Pools
-          </Typography>
-          {gammaUserLoading ? (
-            <>
-              <span className="loading loading-bars loading-md"></span>
-            </>
-          ) : (
-            <>
-              <Typography variant="p" className="text-end">
-                {formatUSD(metrics.totalBalance)}
-              </Typography>
-            </>
-          )}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="bg-base-300/40 p-4 rounded-lg w-full flex items-center">
+            <Typography variant="p">
+              Assets in Yield Pools
+            </Typography>
+            {gammaUserLoading ? (
+              <>
+                <span className="loading loading-bars loading-md"></span>
+              </>
+            ) : (
+              <>
+                <Typography variant="p" className="text-end">
+                  {formatUSD(metrics.totalBalance)}
+                </Typography>
+              </>
+            )}
+          </div>
+          <YieldSummaryMerkl
+            merklRewards={merklRewards}
+            merklRewardsLoading={merklRewardsLoading}
+          />
         </div>
       </div>
       <div className="grid grid-cols-1 gap-4 mb-4">