https://github.com/the-medium/kstadium-app/pull/377
const SoDetailPage: FC = () => {
// 나의 위임 금액
const [myDelegationAmount, setMyDelegationAmount] = useState<number | null>(
0,
);
// 사용자가 받는 리워드
const [myRewardAmount, setMyRewardAmount] = useState<string>(``);
const [isSoInfoLoading, setIsSoInfoLoading] = useState(false);
const loadMyInfo = useCallback(async () => {
if (!userData?.account) return;
setIsMyInfoLoading(true);
try {
const {
data: { amount },
} = await KStadiumAPI.get(`/fo/so/user/myDelegate`, {
address: userData?.account,
orgId: stadiumOwnerId,
});
setMyDelegationAmount(amount);
} catch (e) {
console.log(e);
}
try {
const {
data: { reward },
} = await KStadiumAPI.get(`/fo/so/user/myReward`, {
address: userData?.account,
orgId: stadiumOwnerId,
});
setMyRewardAmount(reward);
} catch (e) {
console.log(e);
}
setIsMyInfoLoading(false);
}, [stadiumOwnerId, userData?.account]);
return (
<IonPage>
...
{!isMyInfoLoading && (
<>
{isEmpty(myDelegationAmount) ? (
<>
<Button
size="large"
expand="block"
fill="outline"
onClick={() => {
if (!userData) {
history.push(`/auth/signin`);
} else {
setStartDelegate(true);
}
}}
>
DELEGATE
</Button>
{myRewardAmount === `0` ? (
<></>
) : (
<S.InnerSection>
<S.InnerSectionTitle>
My rewards
<S.RewardIcon icon={iconInfo} id="reward-button" />
<IonTooltip
trigger="reward-button"
content="Based on the voting power of each SO at 12:00AM(UTC+8) every day,
the amount of rewards accumulated during the day is added up and distributed to the delegates
individually at 14:00 PM(UTC+8) the next day."
/>
</S.InnerSectionTitle>
<S.AmountItem data-test-id="soMyReward">
<S.AmountText>
<S.AmountNum color="blue">
{formatAmount(myRewardAmount)}
</S.AmountNum>
{` `}
KSTA
</S.AmountText>
</S.AmountItem>
<S.ButtonContainer>
<Button
expand="block"
size="large"
onClick={() => {
if (!userData) {
history.push(`/auth/signin`);
} else {
setStartClaim(true);
}
}}
disabled={isEmpty(myRewardAmount)}
data-test-id="soDetailClaim"
>
CLAIM
</Button>
</S.ButtonContainer>
</S.InnerSection>
)}
</>
) : (
<>
<S.Inner>
<FormHelper>
Information on third-party DApps such as
'FLUX' is not provided. Please visit the
DApp to check it out.
</FormHelper>
</S.Inner>
<S.Bar>
<S.InnerSection>
<S.InnerSectionTitle>
My delegation
</S.InnerSectionTitle>
<S.AmountItem data-test-id="soMyDelegation">
<S.AmountText>
<S.AmountNum color="blue">
{formatAmount(myDelegationAmount)}
</S.AmountNum>
{` `}
SOP
</S.AmountText>
</S.AmountItem>
<S.DelegateGrid>
<S.DelegateRow class="ion-justify-content-between">
<S.DelegateCol>
<Button
size="large"
expand="block"
fill="outline"
onClick={() => {
if (!userData) {
history.push(`/auth/signin`);
} else {
setStartDelegate(true);
}
}}
data-test-id="soDetailDelegate"
>
<InnerText>DELEGATE</InnerText>
</Button>
</S.DelegateCol>
<S.DelegateCol>
<Button
size="large"
expand="block"
fill="outline"
onClick={() => setStartUndelegate(true)}
data-test-id="soDetailUndelegate"
>
<InnerText>UNDELEGATE</InnerText>
</Button>
</S.DelegateCol>
</S.DelegateRow>
</S.DelegateGrid>
</S.InnerSection>
</S.Bar>
<S.InnerSection>
<S.InnerSectionTitle>
My rewards
<S.RewardIcon icon={iconInfo} id="reward-button" />
<IonTooltip
trigger="reward-button"
content="Based on the voting power of each SO at 12:00AM(UTC+8) every day,
the amount of rewards accumulated during the day is added up and distributed to the delegates
individually at 14:00 PM(UTC+8) the next day."
/>
</S.InnerSectionTitle>
<S.AmountItem data-test-id="soMyReward">
<S.AmountText>
<S.AmountNum color="blue">
{formatAmount(myRewardAmount)}
</S.AmountNum>
{` `}
KSTA
</S.AmountText>
</S.AmountItem>
<S.ButtonContainer>
<Button
expand="block"
size="large"
onClick={() => {
if (!userData) {
history.push(`/auth/signin`);
} else {
setStartClaim(true);
}
}}
disabled={isEmpty(myRewardAmount)}
data-test-id="soDetailClaim"
>
CLAIM
</Button>
</S.ButtonContainer>
</S.InnerSection>
</>
)}
</>
)}
...
</IonPage>
);
};
export default SoDetailPage;
위 코드에 대한 리뷰를 받으며, 왜 myDelegationAmount는 number로 myRewardAmount는 string으로 처리를 하고 있는 부분을 놓치고 있다는 점을 알게되었다.