Skip to content

Commit

Permalink
feat: Migrate reward type
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinoosss
jinoosss committed May 24, 2024
1 parent cfc56e8 commit e48f06f
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 71 deletions.
186 changes: 116 additions & 70 deletions packages/web/src/components/pool/my-liquidity-content/MyLiquidityContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,23 +146,30 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
SWAP_FEE: {},
STAKING: {},
EXTERNAL: {},
INTERNAL: {},
};
positions
.flatMap(position => position.reward)
.map(reward => ({
token: reward.rewardToken,
rewardType: reward.rewardType,
balance: makeDisplayTokenAmount(reward.rewardToken, reward.totalAmount) || 0,
balance:
makeDisplayTokenAmount(reward.rewardToken, reward.totalAmount) || 0,
balanceUSD:
makeDisplayTokenAmount(
reward.rewardToken,
Number(reward.totalAmount) *
Number(tokenPrices[reward.rewardToken.priceID]?.usd),
Number(tokenPrices[reward.rewardToken.priceID]?.usd),
) || 0,
claimableAmount:
makeDisplayTokenAmount(reward.rewardToken, reward.claimableAmount) || 0,
makeDisplayTokenAmount(reward.rewardToken, reward.claimableAmount) ||
0,
claimableUSD: Number(reward.claimableUsd),
accumulatedRewardOf1d: makeDisplayTokenAmount(reward.rewardToken, reward.accuReward1D || 0) || 0,
accumulatedRewardOf1d:
makeDisplayTokenAmount(
reward.rewardToken,
reward.accuReward1D || 0,
) || 0,
claimableUsdValue: Number(reward.claimableUsd),
}))
.forEach(rewardInfo => {
Expand All @@ -176,8 +183,11 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
claimableAmount:
existReward.claimableAmount + rewardInfo.claimableAmount,
claimableUSD: existReward.claimableUSD + rewardInfo.claimableUSD,
accumulatedRewardOf1d: existReward.accumulatedRewardOf1d + rewardInfo.accumulatedRewardOf1d,
claimableUsdValue: existReward.claimableUsdValue + rewardInfo.claimableUsdValue,
accumulatedRewardOf1d:
existReward.accumulatedRewardOf1d +
rewardInfo.accumulatedRewardOf1d,
claimableUsdValue:
existReward.claimableUsdValue + rewardInfo.claimableUsdValue,
};
} else {
infoMap[rewardInfo.rewardType][rewardInfo.token.priceID] = rewardInfo;
Expand All @@ -188,6 +198,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
SWAP_FEE: Object.values(infoMap["SWAP_FEE"]),
STAKING: Object.values(infoMap["STAKING"]),
EXTERNAL: Object.values(infoMap["EXTERNAL"]),
INTERNAL: Object.values(infoMap["INTERNAL"]),
};
}, [isDisplay, positions, tokenPrices]);

Expand All @@ -203,6 +214,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
SWAP_FEE: {},
STAKING: {},
EXTERNAL: {},
INTERNAL: {},
};
positions
.flatMap(position => position.reward)
Expand All @@ -229,11 +241,17 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
SWAP_FEE: Object.values(infoMap["SWAP_FEE"]),
STAKING: Object.values(infoMap["STAKING"]),
EXTERNAL: Object.values(infoMap["EXTERNAL"]),
INTERNAL: Object.values(infoMap["INTERNAL"]),
};
}, [isDisplay, positions, tokenPrices]);

const isShowRewardInfoTooltip = useMemo(() => {
return aprRewardInfo !== null && (aprRewardInfo?.EXTERNAL.length !== 0 || aprRewardInfo?.STAKING.length !== 0 || aprRewardInfo?.SWAP_FEE.length !== 0);
return (
aprRewardInfo !== null &&
(aprRewardInfo?.EXTERNAL.length !== 0 ||
aprRewardInfo?.STAKING.length !== 0 ||
aprRewardInfo?.SWAP_FEE.length !== 0)
);
}, [aprRewardInfo]);

const dailyEarning = useMemo(() => {
Expand All @@ -245,10 +263,10 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
}
const claimableUsdValue = claimableRewardInfo
? Object.values(claimableRewardInfo)
.flatMap(item => item)
.reduce((accum, current) => {
return accum + Number(current.accumulatedRewardOf1d);
}, 0)
.flatMap(item => item)
.reduce((accum, current) => {
return accum + Number(current.accumulatedRewardOf1d);
}, 0)
: 0;

return toUnitFormat(claimableUsdValue, true, true);
Expand All @@ -264,17 +282,23 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
.map(reward => ({
token: reward.rewardToken,
rewardType: reward.rewardType,
balance: makeDisplayTokenAmount(reward.rewardToken, reward.totalAmount) || 0,
balance:
makeDisplayTokenAmount(reward.rewardToken, reward.totalAmount) || 0,
balanceUSD:
makeDisplayTokenAmount(
reward.rewardToken,
Number(reward.totalAmount) *
Number(tokenPrices[reward.rewardToken.priceID]?.usd || 0),
Number(tokenPrices[reward.rewardToken.priceID]?.usd || 0),
) || 0,
claimableAmount:
makeDisplayTokenAmount(reward.rewardToken, reward.claimableAmount) || 0,
makeDisplayTokenAmount(reward.rewardToken, reward.claimableAmount) ||
0,
claimableUSD: Number(reward.claimableUsd),
accumulatedRewardOf1d: makeDisplayTokenAmount(reward.rewardToken, reward.accuReward1D || 0) || 0,
accumulatedRewardOf1d:
makeDisplayTokenAmount(
reward.rewardToken,
reward.accuReward1D || 0,
) || 0,
claimableUsdValue: Number(reward.claimableUsd),
// aprOf7d: Number(reward.aprOf7d),
}))
Expand All @@ -287,8 +311,11 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
balance: existReward.balance + rewardInfo.balance,
balanceUSD: existReward.balanceUSD + rewardInfo.balanceUSD,
claimableUSD: existReward.claimableUSD + rewardInfo.claimableUSD,
accumulatedRewardOf1d: existReward.accumulatedRewardOf1d + rewardInfo.accumulatedRewardOf1d,
claimableUsdValue: existReward.claimableUsdValue + rewardInfo.claimableUsdValue,
accumulatedRewardOf1d:
existReward.accumulatedRewardOf1d +
rewardInfo.accumulatedRewardOf1d,
claimableUsdValue:
existReward.claimableUsdValue + rewardInfo.claimableUsdValue,
// aprOf7d: existReward.aprOf7d + rewardInfo.aprOf7d,
};
} else {
Expand All @@ -300,7 +327,12 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
}, [isDisplay, positions, tokenPrices]);

const isShowClaimableRewardInfo = useMemo(() => {
return claimableRewardInfo && (claimableRewardInfo?.EXTERNAL.length !== 0 || claimableRewardInfo?.STAKING.length !== 0 || claimableRewardInfo?.SWAP_FEE.length !== 0);
return (
claimableRewardInfo &&
(claimableRewardInfo?.EXTERNAL.length !== 0 ||
claimableRewardInfo?.STAKING.length !== 0 ||
claimableRewardInfo?.SWAP_FEE.length !== 0)
);
}, [claimableRewardInfo]);

const isShowUnclaimableRewardInfo = useMemo(() => {
Expand All @@ -312,13 +344,19 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
return "-";
}

const claimableUsdValue = positions.reduce((positionAcc, positionCurrent) => {
const currentPositionDailyReward = positionCurrent.reward.reduce((rewardAcc, rewardCurrent) => {
return rewardAcc + Number(rewardCurrent.claimableUsd);
}, 0);

return positionAcc + currentPositionDailyReward;
}, 0);
const claimableUsdValue = positions.reduce(
(positionAcc, positionCurrent) => {
const currentPositionDailyReward = positionCurrent.reward.reduce(
(rewardAcc, rewardCurrent) => {
return rewardAcc + Number(rewardCurrent.claimableUsd);
},
0,
);

return positionAcc + currentPositionDailyReward;
},
0,
);
return toUnitFormat(claimableUsdValue, true, true);
// const claimableUsdValue = claimableRewardInfo
// ? Object.values(claimableRewardInfo)
Expand All @@ -344,13 +382,21 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({

const tokenABalance = useMemo(() => {
if (!positionData) return 0;
const sum = positions?.reduce((accumulator, currentValue) => accumulator + Number(currentValue.tokenABalance), 0);
const sum = positions?.reduce(
(accumulator, currentValue) =>
accumulator + Number(currentValue.tokenABalance),
0,
);
return sum || 0;
}, [positionData, positions]);

const tokenBBalance = useMemo(() => {
if (!positionData) return 0;
const sum = positions?.reduce((accumulator, currentValue) => accumulator + Number(currentValue.tokenBBalance), 0);
const sum = positions?.reduce(
(accumulator, currentValue) =>
accumulator + Number(currentValue.tokenBBalance),
0,
);
return sum || 0;
}, [positionData, positions]);

Expand All @@ -359,7 +405,9 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
if (sumOfBalances === 0) {
return 0.5;
}
return tokenABalance / (tokenABalance + tokenBBalance / positionData?.price);
return (
tokenABalance / (tokenABalance + tokenBBalance / positionData?.price)
);
}, [tokenABalance, tokenBBalance, positionData?.price]);

const depositRatioStrOfTokenA = useMemo(() => {
Expand All @@ -377,10 +425,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
positionData?.tokenA?.symbol.length === 4 ||
positionData?.tokenB?.symbol.length === 4
);
}, [
positionData?.tokenB?.symbol,
positionData?.tokenA?.symbol,
]);
}, [positionData?.tokenB?.symbol, positionData?.tokenA?.symbol]);

const feeDaily = useMemo(() => {
// const temp = claimableRewardInfo?.SWAP_FEE;
Expand All @@ -393,7 +438,8 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
const feeClaim = useMemo(() => {
const temp = claimableRewardInfo?.SWAP_FEE;
const sumUSD =
temp?.reduce((accum, current) => accum + current.claimableUsdValue, 0) || 0;
temp?.reduce((accum, current) => accum + current.claimableUsdValue, 0) ||
0;
return toUnitFormat(`${sumUSD}`, true, true);
}, [claimableRewardInfo]);

Expand All @@ -405,8 +451,14 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
const logoReward = useMemo(() => {
const temp = claimableRewardInfo?.STAKING;
const rewardTokens = positionData?.rewardTokens || [];
const rewardLogo = rewardTokens?.map(item => getGnotPath(item).logoURI) || [];
return [...new Set([...rewardLogo, ...temp?.map(item => getGnotPath(item.token).logoURI) || []])];
const rewardLogo =
rewardTokens?.map(item => getGnotPath(item).logoURI) || [];
return [
...new Set([
...rewardLogo,
...(temp?.map(item => getGnotPath(item.token).logoURI) || []),
]),
];
}, [claimableRewardInfo, getGnotPath, positionData]);

const rewardDaily = useMemo(() => {
Expand All @@ -416,9 +468,12 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
// return toUnitFormat(`${sumUSD}`, true, true);

const sumRewardDaily = positions.reduce((positionAcc, positionCurrent) => {
const currentPositionDailyReward = positionCurrent.reward.reduce((rewardAcc, rewardCurrent) => {
return rewardAcc + Number(rewardCurrent.accuReward1D);
}, 0);
const currentPositionDailyReward = positionCurrent.reward.reduce(
(rewardAcc, rewardCurrent) => {
return rewardAcc + Number(rewardCurrent.accuReward1D);
},
0,
);

return positionAcc + currentPositionDailyReward;
}, 0);
Expand Down Expand Up @@ -463,14 +518,11 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
<span>
{convertToKMB(`${tokenABalance}`)}{" "}
<span
className={`token-symbol ${isWrapText ? "wrap-text" : ""
}`}
className={`token-symbol ${isWrapText ? "wrap-text" : ""}`}
>
{positionData?.tokenA?.symbol}
</span>{" "}
<span className="token-percent">
{depositRatioStrOfTokenA}
</span>
<span className="token-percent">{depositRatioStrOfTokenA}</span>
</span>
</div>
<div className="divider"></div>
Expand All @@ -484,14 +536,11 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
<span>
{convertToKMB(`${tokenBBalance}`)}{" "}
<span
className={`token-symbol ${isWrapText ? "wrap-text" : ""
}`}
className={`token-symbol ${isWrapText ? "wrap-text" : ""}`}
>
{positionData?.tokenB?.symbol}
</span>{" "}
<span className="token-percent">
{depositRatioStrOfTokenB}
</span>
<span className="token-percent">{depositRatioStrOfTokenB}</span>
</span>
</div>
</div>
Expand All @@ -512,7 +561,9 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
<span className="content-value">{dailyEarning}</span>
</Tooltip>
) : (
!loading && <span className="content-value disabled">{dailyEarning}</span>
!loading && (
<span className="content-value disabled">{dailyEarning}</span>
)
)}
{loading && (
<SkeletonEarnDetailWrapper height={39} mobileHeight={25}>
Expand All @@ -530,19 +581,17 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
<div className="total-daily">
<div className="content-wrap">
<span>Fees</span>
{breakpoint === DEVICE_TYPE.WEB && <OverlapLogo
logos={logoDaily}
size={20}
/>}
{breakpoint === DEVICE_TYPE.WEB && (
<OverlapLogo logos={logoDaily} size={20} />
)}
<span className="apr-value">{feeDaily}</span>
</div>
<div className="divider"></div>
<div className="content-wrap content-reward">
<span>Rewards</span>
{logoReward.length > 0 && breakpoint === DEVICE_TYPE.WEB && <OverlapLogo
logos={logoReward}
size={20}
/>}
{logoReward.length > 0 && breakpoint === DEVICE_TYPE.WEB && (
<OverlapLogo logos={logoReward} size={20} />
)}
<span className="apr-value">{rewardDaily}</span>
</div>
</div>
Expand All @@ -555,7 +604,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
<h4>Total Claimable Rewards</h4>
{!loading && (
<div className="claim-wrap">
{(isShowClaimableRewardInfo || isShowUnclaimableRewardInfo) ? (
{isShowClaimableRewardInfo || isShowUnclaimableRewardInfo ? (
<Tooltip
placement="top"
FloatingContent={
Expand Down Expand Up @@ -612,7 +661,8 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
<>
<h4>Total Claimable Rewards</h4>
<div className="claim-wrap">
{!loading && (isShowClaimableRewardInfo || isShowUnclaimableRewardInfo) ? (
{!loading &&
(isShowClaimableRewardInfo || isShowUnclaimableRewardInfo) ? (
<Tooltip
placement="top"
FloatingContent={
Expand All @@ -628,9 +678,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
</Tooltip>
) : (
!loading && (
<span className="content-value disabled">
{claimableUSD}
</span>
<span className="content-value disabled">{claimableUSD}</span>
)
)}
{loading && (
Expand Down Expand Up @@ -669,19 +717,17 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
<div className="total-daily">
<div className="content-wrap">
<span>Fees</span>
{breakpoint === DEVICE_TYPE.WEB && <OverlapLogo
logos={logoDaily}
size={20}
/>}
{breakpoint === DEVICE_TYPE.WEB && (
<OverlapLogo logos={logoDaily} size={20} />
)}
<span className="apr-value">{feeClaim}</span>
</div>
<div className="divider"></div>
<div className="content-wrap content-reward">
<span>Rewards</span>
{logoReward.length > 0 && breakpoint === DEVICE_TYPE.WEB && <OverlapLogo
logos={logoReward}
size={20}
/>}
{logoReward.length > 0 && breakpoint === DEVICE_TYPE.WEB && (
<OverlapLogo logos={logoReward} size={20} />
)}
<span className="apr-value">{rewardClaim}</span>
</div>
</div>
Expand Down
Loading

0 comments on commit e48f06f

Please sign in to comment.