feat: add merkl historical claim total

the-standard · Nov 12, 2024 · b3a0ea8 · b3a0ea8
1 parent 565f1ba
commit b3a0ea8
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 20 deletions.
diff --git a/src/components/vault/merkl/RewardItem.jsx b/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

diff --git a/src/components/vault/merkl/RewardList.jsx b/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) : (

diff --git a/src/components/vault/yield/YieldClaimModal.jsx b/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"

diff --git a/src/components/vault/yield/YieldPerformanceModal.jsx b/src/components/vault/yield/YieldPerformanceModal.jsx
@@ -249,7 +249,7 @@ const YieldPerformanceModal = ({
               variant="outline"
               onClick={handleCloseModal}
             >
-              Return to Vault
+              Back
             </Button>
             <Button
               className="w-full lg:w-64"

diff --git a/src/components/vault/yield/YieldViewModal.jsx b/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"

diff --git a/src/pages/vault/VaultHistory.jsx b/src/pages/vault/VaultHistory.jsx
@@ -42,20 +42,20 @@ const VaultHistory = () => {
     return (
       <div className="flex flex-wrap mb-4 gap-4">
         <Button
-          onClick={() => navigate('/')}
+          onClick={() => navigate(`../vault/${vaultType.toString()}/${vaultId}`)}
           variant="outline"
-          disabled={vaultsLoading}
+          // disabled={vaultsLoading}
           className="pl-2"
         >
           <ChevronLeftIcon className="h-6 w-6 inline-block"/>
-          All Vaults
+          Back To Vault
         </Button>
         <Button
-          onClick={() => navigate(`../vault/${vaultType.toString()}/${vaultId}`)}
+          onClick={() => navigate('/')}
           variant="outline"
-          disabled={vaultsLoading}
+          // disabled={vaultsLoading}
         >
-          Manage Vault
+          All Vaults
         </Button>
       </div>
     )

diff --git a/src/pages/vault/VaultMerkl.jsx b/src/pages/vault/VaultMerkl.jsx
@@ -60,20 +60,20 @@ const VaultMerkl = () => {
       <div className="flex flex-col sm:flex-row mb-4">
         <div className="flex flex-1 sm:flex-auto flex-wrap gap-4">
           <Button
-            onClick={() => navigate('/')}
+            onClick={() => navigate(`../vault/${vaultType.toString()}/${vaultId}`)}
             variant="outline"
             disabled={vaultsLoading}
             className="pl-2"
           >
             <ChevronLeftIcon className="h-6 w-6 inline-block"/>
-            All Vaults
+            Back To Vault
           </Button>
           <Button
-            onClick={() => navigate(`../vault/${vaultType.toString()}/${vaultId}`)}
+            onClick={() => navigate('/')}
             variant="outline"
             disabled={vaultsLoading}
           >
-            Manage Vault
+            All Vaults
           </Button>
         </div>
         <div className="hidden sm:flex flex-1 sm:flex-auto justify-start sm:justify-end">