diff --git a/src/app/rewards/page.tsx b/src/app/rewards/page.tsx index c41eb679..4840b432 100644 --- a/src/app/rewards/page.tsx +++ b/src/app/rewards/page.tsx @@ -103,7 +103,7 @@ function RewardsCard() { ); const account = selectedAccount?.address; const t = useTranslations(); - const { rewardData, pairsList } = useAppSelector( + const { rewardData, pairsList, isLoading } = useAppSelector( (state) => state.rewardSlice ); const userHasRewards = getUserHasRewards(rewardData); @@ -150,6 +150,8 @@ function RewardsCard() { ? t("connect_wallet_to_claim_rewards") : userHasRewards ? t("total_rewards") + : isLoading + ? t("loading...") : t("no_rewards_to_claim")} @@ -216,7 +218,9 @@ function ClaimButton() { const t = useTranslations(); const dispatch = useAppDispatch(); const { isConnected } = useAppSelector((state) => state.radix); - const { rewardData } = useAppSelector((state) => state.rewardSlice); + const { rewardData, isLoading } = useAppSelector( + (state) => state.rewardSlice + ); const userHasRewards = getUserHasRewards(rewardData); const disabled = !isConnected || !userHasRewards; @@ -252,7 +256,7 @@ function ClaimButton() { ); }} > - {t("claim_all_rewards")} + {isLoading ? t("loading...") : t("claim_all_rewards")} ); } diff --git a/src/app/state/locales/en/rewards.json b/src/app/state/locales/en/rewards.json index 980d3541..1623d139 100644 --- a/src/app/state/locales/en/rewards.json +++ b/src/app/state/locales/en/rewards.json @@ -13,5 +13,6 @@ "rewards_claimed": "Rewards claimed", "continue_trading_to_earn_more": "Continue trading or staking to earn more and come back later.", "go_back": "Go back", - "no_rewards_to_claim": "No rewards to claim" + "no_rewards_to_claim": "No rewards to claim", + "loading...": "Loading..." } diff --git a/src/app/state/locales/pt/rewards.json b/src/app/state/locales/pt/rewards.json index ca0c3bc2..5a34cd46 100644 --- a/src/app/state/locales/pt/rewards.json +++ b/src/app/state/locales/pt/rewards.json @@ -13,5 +13,6 @@ "rewards_claimed": "Recompensas resgatadas", "continue_trading_to_earn_more": "Continue negociando ou fazendo staking para ganhar mais e volte mais tarde.", "go_back": "Voltar", - "no_rewards_to_claim": "Sem recompensas para reivindica" + "no_rewards_to_claim": "Sem recompensas para reivindica", + "loading...": "Carregamento..." } diff --git a/src/app/state/rewardSlice.ts b/src/app/state/rewardSlice.ts index 9d6e58a9..f3e18068 100644 --- a/src/app/state/rewardSlice.ts +++ b/src/app/state/rewardSlice.ts @@ -19,6 +19,7 @@ export interface RewardState { pairsList: adex.PairInfo[]; config: RewardConfig; showSuccessUi: boolean; + isLoading: boolean; } interface RewardConfig { @@ -69,6 +70,7 @@ const initialState: RewardState = { rewardVaultAddress: "", }, showSuccessUi: false, + isLoading: false, }; type NonFungibleResource = NonFungibleResourcesCollectionItem & { @@ -100,6 +102,7 @@ export const rewardSlice = createSlice({ ordersRewards: [], }; state.showSuccessUi = false; + state.isLoading = false; }, resetShowSuccessUi: (state) => { state.showSuccessUi = false; @@ -109,7 +112,9 @@ export const rewardSlice = createSlice({ extraReducers: (builder) => { builder // fetchAddresses - .addCase(fetchAddresses.pending, () => {}) + .addCase(fetchAddresses.pending, (state) => { + state.isLoading = true; + }) .addCase( fetchAddresses.fulfilled, (state, action: PayloadAction) => { @@ -120,6 +125,7 @@ export const rewardSlice = createSlice({ ) .addCase(fetchAddresses.rejected, (state, action) => { DexterToast.error("Error fetching claim component addresses"); + state.isLoading = false; console.error(action.error); }) @@ -127,39 +133,48 @@ export const rewardSlice = createSlice({ .addCase(fetchReciepts.pending, (state) => { state.recieptIds = []; state.showSuccessUi = false; + state.isLoading = true; }) .addCase(fetchReciepts.fulfilled, (state, action) => { state.recieptIds = action.payload; }) - .addCase(fetchReciepts.rejected, (_, action) => { + .addCase(fetchReciepts.rejected, (state, action) => { DexterToast.error("Error fetching order receipts"); console.error(action.error); + state.isLoading = false; }) // fetchAccountRewards - .addCase(fetchAccountRewards.pending, () => {}) + .addCase(fetchAccountRewards.pending, (state) => { + state.isLoading = true; + }) .addCase( fetchAccountRewards.fulfilled, (state, action: PayloadAction) => { state.rewardData.accountsRewards = action.payload; } ) - .addCase(fetchAccountRewards.rejected, (_, action) => { + .addCase(fetchAccountRewards.rejected, (state, action) => { DexterToast.error("Error fetching account rewards"); console.error(action.error); + state.isLoading = false; }) // fetchOrderRewards - .addCase(fetchOrderRewards.pending, () => {}) + .addCase(fetchOrderRewards.pending, (state) => { + state.isLoading = true; + }) .addCase( fetchOrderRewards.fulfilled, (state, action: PayloadAction) => { state.rewardData.ordersRewards = action.payload; + state.isLoading = false; } ) .addCase(fetchOrderRewards.rejected, (state, action) => { DexterToast.error("Error fetching order rewards "); console.error(action.error); + state.isLoading = false; }) // claimRewards