Skip to content

Commit 967a664

Browse files
kws1207kws1207
committed
refactor: Remove unnecessary homeRewardsSuppressedByKeyId ref from useRewards
1 parent bc29469 commit 967a664

File tree

2 files changed

+65
-145
lines changed

2 files changed

+65
-145
lines changed

‎apps/extension/src/hooks/use-rewards.ts‎

Lines changed: 7 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useMemo, useRef, useState } from "react";
1+
import { useMemo } from "react";
22
import { ViewToken } from "../pages/main";
33
import { useStore } from "../stores";
44
import {
@@ -33,8 +33,6 @@ const USDN_CURRENCY = {
3333

3434
const zeroDec = new Dec(0);
3535

36-
const homeRewardsSuppressedByKeyId = new Set<string>();
37-
3836
export function useRewards() {
3937
const {
4038
chainStore,
@@ -52,11 +50,6 @@ export function useRewards() {
5250
useStarknetClaimRewards();
5351

5452
const { states, getClaimAllEachState } = useClaimAllEachState();
55-
const prevSelectedKeyIdRef = useRef(keyRingStore.selectedKeyInfo?.id);
56-
const keyId = keyRingStore.selectedKeyInfo?.id ?? "unknown";
57-
58-
const [claimAllIsCompleted, setClaimAllIsCompleted] = useState(false);
59-
const [claimAllIsLoading, setClaimAllIsLoading] = useState(false);
6053

6154
const viewClaimTokens: ViewClaimToken[] = (() => {
6255
const res: ViewClaimToken[] = [];
@@ -238,10 +231,6 @@ export function useRewards() {
238231

239232
const claimAll = () => {
240233
analyticsStore.logEvent("click_claimAll");
241-
homeRewardsSuppressedByKeyId.delete(keyId);
242-
243-
setClaimAllIsCompleted(false);
244-
setClaimAllIsLoading(true);
245234

246235
for (const viewClaimToken of viewClaimTokens) {
247236
const state = getClaimAllEachState(
@@ -298,7 +287,7 @@ export function useRewards() {
298287
return count;
299288
}, [viewClaimTokens, getClaimAllEachState]);
300289

301-
const hasAnyInProgress = useMemo(() => {
290+
const claimAllIsLoading = useMemo(() => {
302291
for (const viewClaimToken of viewClaimTokens) {
303292
const state = getClaimAllEachState(
304293
viewClaimToken.modularChainInfo.chainId
@@ -310,100 +299,9 @@ export function useRewards() {
310299
return false;
311300
}, [viewClaimTokens, getClaimAllEachState]);
312301

313-
useEffect(() => {
314-
setClaimAllIsLoading(hasAnyInProgress);
315-
}, [hasAnyInProgress]);
316-
317-
useEffect(() => {
318-
if (homeRewardsSuppressedByKeyId.has(keyId)) {
319-
setClaimAllIsCompleted(false);
320-
return;
321-
}
322-
setClaimAllIsCompleted(
323-
totalClaimTokenCount > 0 && finishedCount === totalClaimTokenCount
324-
);
325-
}, [finishedCount, totalClaimTokenCount, keyId]);
326-
327-
const [count, setCount] = useState(0);
328-
329-
const claimCountText = useMemo(() => {
330-
if (totalClaimTokenCount === 0) {
331-
return "";
332-
}
333-
334-
return `${succeededCount}/${totalClaimTokenCount}`;
335-
}, [succeededCount, totalClaimTokenCount]);
336-
337-
useEffect(() => {
338-
if (keyRingStore.selectedKeyInfo?.id !== prevSelectedKeyIdRef.current) {
339-
return;
340-
}
341-
342-
if (!claimAllIsCompleted) {
343-
return;
344-
}
345-
346-
setCount(6);
347-
348-
const interval = setInterval(() => {
349-
setCount((prev) => {
350-
if (prev <= 1) {
351-
clearInterval(interval);
352-
setClaimAllIsCompleted(false);
353-
return 0;
354-
}
355-
return prev - 1;
356-
});
357-
}, 1000);
358-
359-
return () => {
360-
setCount(0);
361-
clearInterval(interval);
362-
setClaimAllIsCompleted(false);
363-
};
364-
// eslint-disable-next-line react-hooks/exhaustive-deps
365-
}, [claimAllIsCompleted]);
366-
367-
useEffect(() => {
368-
if (keyRingStore.selectedKeyInfo?.id !== prevSelectedKeyIdRef.current) {
369-
setClaimAllIsLoading(false);
370-
setClaimAllIsCompleted(false);
371-
setCount(0);
372-
for (const s of states) {
373-
s.reset();
374-
}
375-
prevSelectedKeyIdRef.current = keyRingStore.selectedKeyInfo?.id;
376-
homeRewardsSuppressedByKeyId.delete(keyId);
377-
}
378-
// eslint-disable-next-line react-hooks/exhaustive-deps
379-
}, [keyRingStore.selectedKeyInfo?.id]);
380-
381-
const claimAllIsCompletedRef = useRef(claimAllIsCompleted);
382-
const countRef = useRef(count);
383-
const keyIdRef = useRef(keyId);
384-
385-
// complete 되고 다른 페이지로 이동할 경우에만 UI상태를 초기화 하기 위해서 참조를 유지한다.
386-
useEffect(() => {
387-
claimAllIsCompletedRef.current = claimAllIsCompleted;
388-
}, [claimAllIsCompleted]);
389-
390-
useEffect(() => {
391-
countRef.current = count;
392-
}, [count]);
393-
394-
useEffect(() => {
395-
keyIdRef.current = keyId;
396-
}, [keyId]);
397-
398-
useEffect(() => {
399-
return () => {
400-
if (claimAllIsCompletedRef.current && countRef.current > 0) {
401-
homeRewardsSuppressedByKeyId.add(keyIdRef.current);
402-
setCount(0);
403-
setClaimAllIsCompleted(false);
404-
}
405-
};
406-
}, []);
302+
const claimAllIsCompleted = useMemo(() => {
303+
return totalClaimTokenCount > 0 && finishedCount === totalClaimTokenCount;
304+
}, [finishedCount, totalClaimTokenCount]);
407305

408306
return {
409307
viewClaimTokens,
@@ -416,7 +314,7 @@ export function useRewards() {
416314
claimAllIsCompleted,
417315
getClaimAllEachState,
418316
states,
419-
count,
420-
claimCountText,
317+
succeededCount,
318+
totalClaimTokenCount,
421319
};
422320
}

‎apps/extension/src/pages/main/components/rewards-card/index.tsx‎

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FunctionComponent, useEffect } from "react";
1+
import React, { FunctionComponent, useEffect, useState, useRef } from "react";
22
import { observer } from "mobx-react-lite";
33
import { useIntl, IntlShape } from "react-intl";
44
import { Box } from "../../../../components/box";
@@ -39,10 +39,50 @@ export const RewardsCard: FunctionComponent<{
3939
isLedger,
4040
isKeystone,
4141
claimAllIsCompleted,
42-
count,
43-
claimCountText,
42+
succeededCount,
43+
totalClaimTokenCount,
4444
} = useRewards();
4545

46+
const [showCompletionUI, setShowCompletionUI] = useState(false);
47+
const [count, setCount] = useState(0);
48+
const prevClaimAllIsLoadingRef = useRef(claimAllIsLoading);
49+
50+
useEffect(() => {
51+
const wasLoading = prevClaimAllIsLoadingRef.current;
52+
prevClaimAllIsLoadingRef.current = claimAllIsLoading;
53+
54+
if (wasLoading && claimAllIsCompleted && !claimAllIsLoading) {
55+
setShowCompletionUI(true);
56+
setCount(6);
57+
58+
const interval = setInterval(() => {
59+
setCount((prev) => {
60+
if (prev <= 1) {
61+
clearInterval(interval);
62+
setShowCompletionUI(false);
63+
return 0;
64+
}
65+
return prev - 1;
66+
});
67+
}, 1000);
68+
69+
return () => {
70+
clearInterval(interval);
71+
};
72+
}
73+
}, [claimAllIsCompleted, claimAllIsLoading]);
74+
75+
const claimCountText =
76+
totalClaimTokenCount === 0
77+
? ""
78+
: `${succeededCount}/${totalClaimTokenCount}`;
79+
80+
const handleClaimAll = () => {
81+
setShowCompletionUI(false);
82+
setCount(0);
83+
claimAll();
84+
};
85+
4686
const navigateToStake = React.useCallback(() => {
4787
mainHeaderAnimationStore.triggerShowForMainHeaderPrice();
4888
navigate("/stake?intitialExpand=true");
@@ -119,7 +159,7 @@ export const RewardsCard: FunctionComponent<{
119159
id: "page.main.components.rewards-card.view-button",
120160
})}
121161
</Body3>
122-
) : claimAllIsLoading || claimAllIsCompleted ? (
162+
) : claimAllIsLoading || showCompletionUI ? (
123163
<YAxis alignX="right">
124164
<XAxis alignY="center">
125165
<Body3
@@ -179,13 +219,12 @@ export const RewardsCard: FunctionComponent<{
179219
<ClaimAllButton
180220
intl={intl}
181221
claimAllDisabled={claimAllDisabled}
182-
claimAllIsLoading={claimAllIsLoading}
183222
claimAllIsCompleted={claimAllIsCompleted}
184223
claimCountText={claimCountText}
185224
count={count}
186225
isLedger={!!isLedger}
187226
isKeystone={!!isKeystone}
188-
onClaimAll={claimAll}
227+
onClaimAll={handleClaimAll}
189228
onNavigateToStake={navigateToStake}
190229
isHover={isClaimAllHover}
191230
setIsHover={setIsClaimAllHover}
@@ -202,7 +241,6 @@ export const RewardsCard: FunctionComponent<{
202241
type ClaimAllButtonProps = {
203242
intl: IntlShape;
204243
claimAllDisabled: boolean;
205-
claimAllIsLoading: boolean;
206244
claimAllIsCompleted: boolean;
207245
claimCountText: string;
208246
count: number;
@@ -217,9 +255,7 @@ type ClaimAllButtonProps = {
217255
const ClaimAllButton: FunctionComponent<ClaimAllButtonProps> = ({
218256
intl,
219257
claimAllDisabled,
220-
claimAllIsLoading,
221258
claimAllIsCompleted,
222-
claimCountText,
223259
count,
224260
isLedger,
225261
isKeystone,
@@ -241,8 +277,7 @@ const ClaimAllButton: FunctionComponent<ClaimAllButtonProps> = ({
241277
id: "button.approve",
242278
});
243279

244-
const shouldDimClaimAllButton =
245-
!claimAllDisabled && !claimAllIsLoading && isPressed;
280+
const shouldDimClaimAllButton = !claimAllDisabled && isPressed;
246281

247282
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
248283
e.stopPropagation();
@@ -251,12 +286,7 @@ const ClaimAllButton: FunctionComponent<ClaimAllButtonProps> = ({
251286
return;
252287
}
253288

254-
if (
255-
isLedger ||
256-
isKeystone ||
257-
claimAllIsLoading ||
258-
(claimAllIsCompleted && count >= 1)
259-
) {
289+
if (isLedger || isKeystone || (claimAllIsCompleted && count >= 1)) {
260290
onNavigateToStake();
261291
return;
262292
}
@@ -265,15 +295,11 @@ const ClaimAllButton: FunctionComponent<ClaimAllButtonProps> = ({
265295
};
266296

267297
const updateLabelWidth = React.useCallback(() => {
268-
if (claimAllIsLoading) {
269-
setLabelWidth(undefined);
270-
return;
271-
}
272298
const target = isHover ? approveTextRef.current : claimTextRef.current;
273299
if (target) {
274300
setLabelWidth(target.offsetWidth);
275301
}
276-
}, [isHover, claimAllIsLoading]);
302+
}, [isHover]);
277303

278304
React.useLayoutEffect(() => {
279305
updateLabelWidth();
@@ -290,7 +316,7 @@ const ClaimAllButton: FunctionComponent<ClaimAllButtonProps> = ({
290316
return (
291317
<Box
292318
onHoverStateChange={(hovered) => {
293-
if (claimAllDisabled || claimAllIsLoading) {
319+
if (claimAllDisabled) {
294320
return;
295321
}
296322
if (!hovered) {
@@ -301,7 +327,7 @@ const ClaimAllButton: FunctionComponent<ClaimAllButtonProps> = ({
301327
cursor={claimAllDisabled ? "not-allowed" : "pointer"}
302328
opacity={shouldDimClaimAllButton ? COMMON_HOVER_OPACITY : undefined}
303329
onMouseDown={() => {
304-
if (claimAllDisabled || claimAllIsLoading) {
330+
if (claimAllDisabled) {
305331
return;
306332
}
307333
setIsPressed(true);
@@ -334,18 +360,14 @@ const ClaimAllButton: FunctionComponent<ClaimAllButtonProps> = ({
334360
: ColorPalette["blue-300"]
335361
}
336362
>
337-
{claimAllIsLoading ? (
338-
claimCountText
339-
) : (
340-
<ClaimTextWrapper $width={labelWidth}>
341-
<ClaimAllText ref={claimTextRef} $visible={!isHover}>
342-
{claimLabel}
343-
</ClaimAllText>
344-
<ApproveText ref={approveTextRef} $visible={isHover}>
345-
{approveLabel}
346-
</ApproveText>
347-
</ClaimTextWrapper>
348-
)}
363+
<ClaimTextWrapper $width={labelWidth}>
364+
<ClaimAllText ref={claimTextRef} $visible={!isHover}>
365+
{claimLabel}
366+
</ClaimAllText>
367+
<ApproveText ref={approveTextRef} $visible={isHover}>
368+
{approveLabel}
369+
</ApproveText>
370+
</ClaimTextWrapper>
349371
</Subtitle3>
350372
</XAxis>
351373
</Box>

0 commit comments

Comments
 (0)