Merge pull request #31 from burrowHQ/fix-pool-unclaims

Fix pool unclaims
burrowHQ · Nov 23, 2023 · 67291fb · 67291fb
2 parents 24ae962 + ff7007d
commit 67291fb
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 94 deletions.
diff --git a/components/CustomModal/CustomModal.tsx b/components/CustomModal/CustomModal.tsx
@@ -48,7 +48,7 @@ const CustomModal = ({
     <Portal>
       <StyledWrapper
         className={twMerge("modal fade", show && "show", className)}
-        style={show ? { display: "block" } : {}}
+        // style={show ? { display: "block" } : {}}
       >
         <div className="overlay" onClick={onOutsideClick} />
         <div className={twMerge("modal-dialog background-paper", size && `modal-${size}`)}>

diff --git a/components/Header/WalletButton.tsx b/components/Header/WalletButton.tsx
@@ -105,16 +105,7 @@ const WalletButton = () => {
     window.modal.show();
   };
 
-  const getUnClaimRewards = () => {
-    const sumRewards = rewards.sumRewards || {};
-    const sumRewards$ = Object.values(sumRewards).reduce((_sum, cur) => {
-      return new Decimal(cur.unclaimedAmount || 0)
-        .mul(cur.price || 0)
-        .plus(_sum)
-        .toFixed();
-    }, "0");
-    return formatWithCommas_usd(sumRewards$);
-  };
+  const getUnClaimRewards = () => formatWithCommas_usd(rewards.totalUnClaimUSD);
   return (
     <WalletContext.Provider
       value={{

diff --git a/components/Header/stats/apy.tsx b/components/Header/stats/apy.tsx
@@ -20,8 +20,8 @@ export const APY = () => {
   ) : undefined;
 
   const apyLabels = [
+    [{ value: globalValue, text: "Pools", color: netAPY < 0 ? "red" : "green" }],
     [
-      { value: globalValue, text: "Pools", color: netAPY < 0 ? "red" : "green" },
       {
         value: netLiquidityValue,
         text: "Net Liquidity",

diff --git a/components/Header/stats/components.tsx b/components/Header/stats/components.tsx
@@ -99,34 +99,46 @@ export const Stat = ({
           {isValidElement(labels) ? (
             <Label>{labels}</Label>
           ) : (
-            labels?.map((row, i) => (
-              <div className="flex gap-1 items-start flex-col md:flex-row md:flex-wrap" key={i}>
-                {row?.map((d) => {
-                  if (!d.value) {
-                    return null;
-                  }
-                  return (
-                    <div
-                      key={`${d.text}${d.value}`}
-                      className="flex items-center gap-2 h6 rounded-[21px] bg-dark-100 truncate"
-                      style={{ padding: "3px 8px 5px" }}
-                    >
-                      <div style={d.textStyle} className="h6 text-gray-300">
-                        {d.text}
-                      </div>
-                      <div style={d.valueStyle} className="flex items-center gap-1">
-                        {d.icon && (
-                          <div>
-                            <TokenIcon width={15} height={15} icon={d.icon} />
+            labels?.map((row, i) => {
+              const firstData = row[0];
+              if (!firstData) return null;
+              return (
+                <div
+                  className="flex gap-1 items-start flex-col md:flex-row md:flex-wrap"
+                  key={`${firstData.text}${i}`}
+                >
+                  <div
+                    className="flex md:items-center gap-2 h6 rounded md:rounded-[21px] bg-dark-100 truncate"
+                    style={{ padding: "3px 6px 5px" }}
+                  >
+                    <div style={firstData.textStyle} className="h6 text-gray-300">
+                      {firstData.text}
+                    </div>
+                    <div className="flex flex-col gap-1 md:flex-row">
+                      {row?.map((d) => {
+                        if (!d.value) {
+                          return null;
+                        }
+                        return (
+                          <div
+                            style={d.valueStyle}
+                            className="flex items-center gap-1"
+                            key={`${d.text}${d.value}`}
+                          >
+                            {d.icon && (
+                              <div>
+                                <TokenIcon width={15} height={15} icon={d.icon} />
+                              </div>
+                            )}
+                            {d.value}
                           </div>
-                        )}
-                        {d.value}
-                      </div>
+                        );
+                      })}
                     </div>
-                  );
-                })}
-              </div>
-            ))
+                  </div>
+                </div>
+              );
+            })
           )}
         </Stack>
       )}

diff --git a/components/Header/stats/liquidity.tsx b/components/Header/stats/liquidity.tsx
@@ -72,6 +72,8 @@ export const UserLiquidity = () => {
           color: "#D2FF3A",
         },
       },
+    ],
+    [
       {
         value: userBorrowedValue,
         text: "Borrowed",

diff --git a/components/Modal/Controls.tsx b/components/Modal/Controls.tsx
@@ -18,8 +18,12 @@ export default function Controls({
   const dispatch = useAppDispatch();
 
   const handleInputChange = (e) => {
-    const value = e.target.value || 0;
-    if (new Decimal(value).gt(available)) return;
+    const { value } = e.target;
+    const numRegex = /^([0-9]*\.?[0-9]*$)/;
+    if (!numRegex.test(value) || Number(value) > Number(available)) {
+      e.preventDefault();
+      return;
+    }
     dispatch(updateAmount({ isMax: false, amount: value }));
   };
 
@@ -65,11 +69,10 @@ export default function Controls({
           <input
             type="number"
             placeholder="0.0"
-            step="0.01"
+            step="any"
             value={inputAmount}
             onChange={handleInputChange}
-            onFocus={handleFocus}
-            className="text-white"
+            className="text-white noselect"
           />
         </div>
         <TokenBox asset={asset} action={action} />

diff --git a/helpers/helpers.ts b/helpers/helpers.ts
@@ -100,3 +100,7 @@ export const getDateString = (date) => {
 export const isMobileDevice = (): boolean => {
   return window.screen.width <= 1023;
 };
+
+export const cloneObj = (obj) => {
+  return JSON.parse(JSON.stringify(obj));
+};
diff --git a/hooks/useRewards.ts b/hooks/useRewards.ts
@@ -11,6 +11,8 @@ export function useRewards() {
   const { brrr, totalUnClaimUSD } = assetRewards || {};
   const extra = Object.entries(assetRewards.extra);
   const net = Object.entries(assetRewards.net);
+  const allRewards = Object.entries(assetRewards.sumRewards);
+
   let totalUnClaimUSDDisplay;
   if (totalUnClaimUSD !== undefined) {
     const IGNORE_AMOUNT = 0.01;
@@ -23,41 +25,15 @@ export function useRewards() {
     }
   }
 
-  const all: Array<{
-    tokenId: string;
-    data: any;
-  }> = [
-    {
-      tokenId: brrr.tokenId,
-      data: {
-        ...brrr,
-        unclaimedAmountPool: brrr.unclaimedAmount,
-      },
-    },
-  ];
-  extra.forEach(([key, value]) => {
+  // borrow + supply + net reward
+  const all: Array<{ tokenId: string; data: any }> = [];
+  allRewards.forEach(([key, value]) => {
     all.push({
       tokenId: key,
       data: value,
     });
   });
 
-  net.forEach(([key, value]) => {
-    const existIndex = all.findIndex((a) => a.tokenId === key);
-    if (existIndex !== -1) {
-      all[existIndex].data.dailyAmount += value.dailyAmount;
-      all[existIndex].data.newDailyAmount += value.newDailyAmount;
-      all[existIndex].data.unclaimedAmount += value.unclaimedAmount;
-      all[existIndex].data.unclaimedAmountUSD += value.unclaimedAmountUSD;
-      all[existIndex].data.unclaimedAmountNet = value.unclaimedAmount;
-    } else {
-      all.push({
-        tokenId: key,
-        data: value,
-      });
-    }
-  });
-
   return {
     brrr,
     extra,

diff --git a/redux/selectors/getAccountRewards.ts b/redux/selectors/getAccountRewards.ts
@@ -9,6 +9,7 @@ import { Farm, FarmData, Portfolio } from "../accountState";
 import { getStaking } from "./getStaking";
 import { INetTvlFarmRewards } from "../../interfaces";
 import { hasAssets, toUsd } from "../utils";
+import { cloneObj } from "../../helpers/helpers";
 
 interface IPortfolioReward {
   icon: string;
@@ -241,20 +242,28 @@ export const getAccountRewards = createSelector(
           .map(computeNetLiquidityRewards)
       : [];
 
-    let totalUnClaimUSD = 0;
-    const sumRewards = [...suppliedRewards, ...borrowedRewards].reduce((rewards, asset) => {
-      totalUnClaimUSD += asset.unclaimedAmountUSD;
-      if (!rewards[asset.tokenId]) return { ...rewards, [asset.tokenId]: asset };
-      const updatedAsset = rewards[asset.tokenId];
-      updatedAsset.unclaimedAmount += asset.unclaimedAmount;
-      updatedAsset.dailyAmount += asset.dailyAmount;
-      updatedAsset.newDailyAmount += asset.newDailyAmount;
-      return { ...rewards, [asset.tokenId]: updatedAsset };
-    }, {});
+    const sumArrays = (array) => {
+      const clonedArray = cloneObj(array);
+      return clonedArray.reduce((rewards, asset) => {
+        if (!rewards[asset.tokenId]) return { ...rewards, [asset.tokenId]: asset };
+        const updatedAsset = rewards[asset.tokenId];
+        updatedAsset.unclaimedAmount += asset.unclaimedAmount;
+        updatedAsset.dailyAmount += asset.dailyAmount;
+        updatedAsset.newDailyAmount += asset.newDailyAmount;
+        return { ...rewards, [asset.tokenId]: updatedAsset };
+      }, {});
+    };
 
+    const allRewards = [...suppliedRewards, ...borrowedRewards, ...netLiquidityRewards];
+    const sumRewards = sumArrays(allRewards);
+    const poolRewards = sumArrays([...suppliedRewards, ...borrowedRewards]);
+    let totalUnClaimUSD = 0;
+    allRewards.forEach((d) => {
+      totalUnClaimUSD += d.unclaimedAmountUSD;
+    });
     return {
-      brrr: sumRewards[brrrTokenId] || {},
-      extra: omit(sumRewards, brrrTokenId) || {},
+      brrr: poolRewards[brrrTokenId] || {},
+      extra: omit(poolRewards, brrrTokenId) || {},
       net: netLiquidityRewards.reduce(
         (rewards, asset) => ({ ...rewards, [asset.tokenId]: asset }),
         {},

diff --git a/screens/Dashboard/dashboardOverview.tsx b/screens/Dashboard/dashboardOverview.tsx
@@ -105,12 +105,12 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => {
         <div className="lg3:flex lg3:justify-between">
           <div className="mb-4 lg3:max-w-[640px] lg3:mb-0">
             <div className="flex gap-2 justify-between lg3:gap-6 lg3:gap-8">
-              <div className="gap-6 flex flex-col">
+              <div className="gap-6 flex flex-col flex-2">
                 <UserLiquidity />
                 <UserDailyRewards />
               </div>
 
-              <div className="gap-6 flex flex-col">
+              <div className="gap-6 flex flex-col flex-1">
                 <APY />
                 <div className="flex flex-col">
                   {/* <OverviewItem */}

diff --git a/screens/Staking/modalStaking.tsx b/screens/Staking/modalStaking.tsx
@@ -49,10 +49,16 @@ const ModalStaking = ({ isOpen, onClose }) => {
 
   const handleInputChange = (e) => {
     let { value } = e?.target || {};
+    const numRegex = /^([0-9]*\.?[0-9]*$)/;
+    if (!numRegex.test(value)) {
+      e.preventDefault();
+      return;
+    }
+
     if (Number(value) > Number(total)) {
       value = total;
     }
-    setAmount(Number(value));
+    setAmount(value);
   };
 
   const handleSliderChange = (e) => {
@@ -120,9 +126,9 @@ const ModalStaking = ({ isOpen, onClose }) => {
         <input
           value={inputAmount}
           type="number"
-          step="0.01"
+          step="any"
           onChange={handleInputChange}
-          onFocus={handleFocus}
+          className="noselect"
         />
         <div className="btn-sm cursor-pointer" onClick={handleMaxClick}>
           Max

diff --git a/styles/global.css b/styles/global.css
@@ -22,6 +22,11 @@ body {
   color: #fff;
 }
 
+#__next{
+  background: #14162b;
+  height: 100%;
+}
+
 .sans-bold {
   font-family: "work-sans-bold";
 }
@@ -107,14 +112,18 @@ body,
   position: fixed;
   top: 0;
   left: 0;
-  /*z-index: 1055;*/
-  /*display: none;*/
+  /* z-index: 1055; */
+  /* display: none; */
   z-index: -99;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   outline: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
 }
 
 .modal.show {
@@ -123,8 +132,8 @@ body,
 
 .modal-dialog {
   position: relative;
-  width: auto;
-  margin: 0.5rem;
+  width: 100%;
+  margin: auto 0;
   pointer-events: none;
 }
 
@@ -274,7 +283,6 @@ body,
 @media (min-width: 576px) {
   .modal-dialog {
     max-width: 800px;
-    margin: 10% auto;
   }
 
   .modal-dialog-scrollable {
@@ -722,3 +730,13 @@ options-list::-webkit-scrollbar {
 .nws-modal-wrapper .nws-modal .connecting-details span {
   color: #fff;
 }
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,6 +72,8 @@ export const UserLiquidity = () => { @@
               color: "#D2FF3A",
             },
           },
+        ],
+        [
           {
             value: userBorrowedValue,
             text: "Borrowed",
@@ Expand Down @@