From 5ef1071270c2401973e9a099d1261f34b9a03c36 Mon Sep 17 00:00:00 2001 From: Yuho Date: Wed, 22 Nov 2023 15:28:06 +0800 Subject: [PATCH 01/11] fix pools and unclaims reward --- components/Header/WalletButton.tsx | 11 +---- components/Header/stats/apy.tsx | 2 +- components/Header/stats/components.tsx | 64 +++++++++++++++---------- components/Header/stats/liquidity.tsx | 2 + helpers/helpers.ts | 4 ++ redux/selectors/getAccountRewards.ts | 33 ++++++++----- screens/Dashboard/dashboardOverview.tsx | 4 +- 7 files changed, 69 insertions(+), 51 deletions(-) diff --git a/components/Header/WalletButton.tsx b/components/Header/WalletButton.tsx index f2df5a58..2850d5f7 100644 --- 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 ( { ) : 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 index fed4abb8..15c59c50 100644 --- a/components/Header/stats/components.tsx +++ b/components/Header/stats/components.tsx @@ -99,34 +99,46 @@ export const Stat = ({ {isValidElement(labels) ? ( ) : ( - labels?.map((row, i) => ( -
- {row?.map((d) => { - if (!d.value) { - return null; - } - return ( -
-
- {d.text} -
-
- {d.icon && ( -
- + labels?.map((row, i) => { + const firstData = row[0]; + if (!firstData) return null; + return ( +
+
+
+ {firstData.text} +
+
+ {row?.map((d) => { + if (!d.value) { + return null; + } + return ( +
+ {d.icon && ( +
+ +
+ )} + {d.value}
- )} - {d.value} -
+ ); + })}
- ); - })} -
- )) +
+
+ ); + }) )} )} diff --git a/components/Header/stats/liquidity.tsx b/components/Header/stats/liquidity.tsx index f3edc5b3..a99ee8da 100644 --- 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/helpers/helpers.ts b/helpers/helpers.ts index f79c7006..818c9f1c 100644 --- 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/redux/selectors/getAccountRewards.ts b/redux/selectors/getAccountRewards.ts index 4ed67c97..7be60f17 100644 --- 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 index 30c12f10..deaa1e24 100644 --- a/screens/Dashboard/dashboardOverview.tsx +++ b/screens/Dashboard/dashboardOverview.tsx @@ -105,12 +105,12 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => {
-
+
-
+
{/* Date: Wed, 22 Nov 2023 15:40:21 +0800 Subject: [PATCH 02/11] fix decimal input --- components/Modal/Controls.tsx | 2 +- screens/Staking/modalStaking.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Modal/Controls.tsx b/components/Modal/Controls.tsx index 8a214939..9c77e500 100644 --- a/components/Modal/Controls.tsx +++ b/components/Modal/Controls.tsx @@ -65,7 +65,7 @@ export default function Controls({ { if (Number(value) > Number(total)) { value = total; } - setAmount(Number(value)); + setAmount(value); }; const handleSliderChange = (e) => { @@ -120,7 +120,7 @@ const ModalStaking = ({ isOpen, onClose }) => { From 830372897e96d832ca636098f07d0cc510cd94bc Mon Sep 17 00:00:00 2001 From: Yuho Date: Tue, 21 Nov 2023 17:12:37 +0800 Subject: [PATCH 03/11] update useRewards --- hooks/useRewards.ts | 34 +++++----------------------------- 1 file changed, 5 insertions(+), 29 deletions(-) diff --git a/hooks/useRewards.ts b/hooks/useRewards.ts index 9bcca703..1c29b3bc 100644 --- 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, From 2c0ca33873015b3ad1d6af6b861e4c62d7137ae3 Mon Sep 17 00:00:00 2001 From: Yuho Date: Wed, 22 Nov 2023 16:55:06 +0800 Subject: [PATCH 04/11] fix modal style --- components/CustomModal/CustomModal.tsx | 2 +- styles/global.css | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/components/CustomModal/CustomModal.tsx b/components/CustomModal/CustomModal.tsx index 58848180..9bcc3be8 100644 --- a/components/CustomModal/CustomModal.tsx +++ b/components/CustomModal/CustomModal.tsx @@ -48,7 +48,7 @@ const CustomModal = ({
diff --git a/styles/global.css b/styles/global.css index c1819f49..d8dfa684 100644 --- a/styles/global.css +++ b/styles/global.css @@ -22,6 +22,10 @@ body { color: #fff; } +#__next{ + background: #14162b; +} + .sans-bold { font-family: "work-sans-bold"; } @@ -107,14 +111,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 +131,8 @@ body, .modal-dialog { position: relative; - width: auto; - margin: 0.5rem; + width: 100%; + margin: auto 0; pointer-events: none; } @@ -274,7 +282,6 @@ body, @media (min-width: 576px) { .modal-dialog { max-width: 800px; - margin: 10% auto; } .modal-dialog-scrollable { From 1ad633fa962e38d557dfadbf03a8b318ef484f2e Mon Sep 17 00:00:00 2001 From: Yuho Date: Wed, 22 Nov 2023 17:15:57 +0800 Subject: [PATCH 05/11] fix height --- styles/global.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/global.css b/styles/global.css index d8dfa684..f46ac5be 100644 --- a/styles/global.css +++ b/styles/global.css @@ -24,6 +24,7 @@ body { #__next{ background: #14162b; + height: 100%; } .sans-bold { From 3047898e9c61a9e59caadfe383508913d54fe7f7 Mon Sep 17 00:00:00 2001 From: Yuho Date: Wed, 22 Nov 2023 19:56:41 +0800 Subject: [PATCH 06/11] fix input --- components/Modal/Controls.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Modal/Controls.tsx b/components/Modal/Controls.tsx index 9c77e500..e44a4891 100644 --- a/components/Modal/Controls.tsx +++ b/components/Modal/Controls.tsx @@ -18,7 +18,7 @@ export default function Controls({ const dispatch = useAppDispatch(); const handleInputChange = (e) => { - const value = e.target.value || 0; + const { value } = e.target; if (new Decimal(value).gt(available)) return; dispatch(updateAmount({ isMax: false, amount: value })); }; From 4e326b5090bcdbe116efbd6c37d2333665e1ab93 Mon Sep 17 00:00:00 2001 From: Yuho Date: Wed, 22 Nov 2023 20:00:36 +0800 Subject: [PATCH 07/11] update input --- components/Modal/Controls.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/Modal/Controls.tsx b/components/Modal/Controls.tsx index e44a4891..bca28297 100644 --- a/components/Modal/Controls.tsx +++ b/components/Modal/Controls.tsx @@ -18,8 +18,10 @@ export default function Controls({ const dispatch = useAppDispatch(); const handleInputChange = (e) => { - const { value } = e.target; - if (new Decimal(value).gt(available)) return; + let { value } = e?.target || {}; + if (Number(value) > Number(available)) { + value = available; + } dispatch(updateAmount({ isMax: false, amount: value })); }; From 56d522daad9acb4fc0d5ee2fc758633068db85e3 Mon Sep 17 00:00:00 2001 From: Yuho Date: Wed, 22 Nov 2023 20:09:06 +0800 Subject: [PATCH 08/11] only number input --- components/Modal/Controls.tsx | 9 ++++++--- screens/Staking/modalStaking.tsx | 7 +++++++ 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/components/Modal/Controls.tsx b/components/Modal/Controls.tsx index bca28297..383dc9fc 100644 --- a/components/Modal/Controls.tsx +++ b/components/Modal/Controls.tsx @@ -18,9 +18,12 @@ export default function Controls({ const dispatch = useAppDispatch(); const handleInputChange = (e) => { - let { value } = e?.target || {}; - if (Number(value) > Number(available)) { - value = available; + const { value } = e.target; + const decimalPlace = 12; + const numRegex = new RegExp(`^$|(^(\\d+\\.?\\d{0,${decimalPlace}})$)`); + if (!numRegex.test(value) || Number(value) > Number(available)) { + e.preventDefault(); + return; } dispatch(updateAmount({ isMax: false, amount: value })); }; diff --git a/screens/Staking/modalStaking.tsx b/screens/Staking/modalStaking.tsx index efd7de6f..7cc2a99e 100644 --- a/screens/Staking/modalStaking.tsx +++ b/screens/Staking/modalStaking.tsx @@ -49,6 +49,13 @@ const ModalStaking = ({ isOpen, onClose }) => { const handleInputChange = (e) => { let { value } = e?.target || {}; + const decimalPlace = 12; + const numRegex = new RegExp(`^$|(^(\\d+\\.?\\d{0,${decimalPlace}})$)`); + if (!numRegex.test(value)) { + e.preventDefault(); + return; + } + if (Number(value) > Number(total)) { value = total; } From 1309e28da500e7d409a56734d4738c01040a71a3 Mon Sep 17 00:00:00 2001 From: Yuho Date: Wed, 22 Nov 2023 20:28:01 +0800 Subject: [PATCH 09/11] update regex --- components/Modal/Controls.tsx | 3 +-- screens/Staking/modalStaking.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/Modal/Controls.tsx b/components/Modal/Controls.tsx index 383dc9fc..55b91e8f 100644 --- a/components/Modal/Controls.tsx +++ b/components/Modal/Controls.tsx @@ -19,8 +19,7 @@ export default function Controls({ const handleInputChange = (e) => { const { value } = e.target; - const decimalPlace = 12; - const numRegex = new RegExp(`^$|(^(\\d+\\.?\\d{0,${decimalPlace}})$)`); + const numRegex = /^([0-9]*\.?[0-9]*$)/; if (!numRegex.test(value) || Number(value) > Number(available)) { e.preventDefault(); return; diff --git a/screens/Staking/modalStaking.tsx b/screens/Staking/modalStaking.tsx index 7cc2a99e..5085b75a 100644 --- a/screens/Staking/modalStaking.tsx +++ b/screens/Staking/modalStaking.tsx @@ -49,8 +49,7 @@ const ModalStaking = ({ isOpen, onClose }) => { const handleInputChange = (e) => { let { value } = e?.target || {}; - const decimalPlace = 12; - const numRegex = new RegExp(`^$|(^(\\d+\\.?\\d{0,${decimalPlace}})$)`); + const numRegex = /^([0-9]*\.?[0-9]*$)/; if (!numRegex.test(value)) { e.preventDefault(); return; From f482bcd95fcf5ce93218e6495d94b6900e5cc411 Mon Sep 17 00:00:00 2001 From: Yuho Date: Wed, 22 Nov 2023 21:06:45 +0800 Subject: [PATCH 10/11] noselect --- components/Modal/Controls.tsx | 2 +- screens/Staking/modalStaking.tsx | 1 + styles/global.css | 10 ++++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/components/Modal/Controls.tsx b/components/Modal/Controls.tsx index 55b91e8f..b48cdaee 100644 --- a/components/Modal/Controls.tsx +++ b/components/Modal/Controls.tsx @@ -73,7 +73,7 @@ export default function Controls({ value={inputAmount} onChange={handleInputChange} onFocus={handleFocus} - className="text-white" + className="text-white noselect" />
diff --git a/screens/Staking/modalStaking.tsx b/screens/Staking/modalStaking.tsx index 5085b75a..9704d078 100644 --- a/screens/Staking/modalStaking.tsx +++ b/screens/Staking/modalStaking.tsx @@ -129,6 +129,7 @@ const ModalStaking = ({ isOpen, onClose }) => { step="any" onChange={handleInputChange} onFocus={handleFocus} + className="noselect" />
Max diff --git a/styles/global.css b/styles/global.css index f46ac5be..450fc62c 100644 --- a/styles/global.css +++ b/styles/global.css @@ -730,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 */ +} From ff7007d9de6ecc568e768ba413a407e6bd6f418a Mon Sep 17 00:00:00 2001 From: Yuho Date: Wed, 22 Nov 2023 21:22:29 +0800 Subject: [PATCH 11/11] remove onfocus --- components/Modal/Controls.tsx | 1 - screens/Staking/modalStaking.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/components/Modal/Controls.tsx b/components/Modal/Controls.tsx index b48cdaee..08e0c25f 100644 --- a/components/Modal/Controls.tsx +++ b/components/Modal/Controls.tsx @@ -72,7 +72,6 @@ export default function Controls({ step="any" value={inputAmount} onChange={handleInputChange} - onFocus={handleFocus} className="text-white noselect" />
diff --git a/screens/Staking/modalStaking.tsx b/screens/Staking/modalStaking.tsx index 9704d078..bee6722d 100644 --- a/screens/Staking/modalStaking.tsx +++ b/screens/Staking/modalStaking.tsx @@ -128,7 +128,6 @@ const ModalStaking = ({ isOpen, onClose }) => { type="number" step="any" onChange={handleInputChange} - onFocus={handleFocus} className="noselect" />