feat: integrate fetchDepositAddress into BalanceStore and enhance RefillModal for better error handling and loading states

Author: mois-ilya

src/entities/balance/model/balance.store.ts

@@ -49,6 +49,7 @@ export class BalanceStore {
         makeAutoObservable(this);
         this.projectsStore = projectsStore;
         this.fetchTonRate();
+        this.fetchDepositAddress();
 
         createImmediateReaction(
             () => this.projectsStore.selectedProject,

src/entities/balance/ui/RefillModal.tsx

@@ -8,12 +8,6 @@ const RefillModal: FC<{
     isOpen: boolean;
     onClose: () => void;
 }> = props => {
-    useEffect(() => {
-        if (props.isOpen) {
-            balanceStore.fetchDepositAddress();
-        }
-    }, [props.isOpen]);
-
     return (
         <Modal scrollBehavior="inside" size="md" {...props}>
             <ModalOverlay />

src/entities/balance/ui/RefillModalContent.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useRef, useState } from 'react';
+import { FC, useMemo, useRef, useState } from 'react';
 import {
     Box,
     Button,
@@ -138,11 +138,7 @@ const RefillModalContent: FC<{
             </ModalHeader>
             <ModalCloseButton />
             <ModalBody pt="0" pb="4">
-                {balanceStore.depositAddress$.isLoading ? (
-                    <Center h="80px">
-                        <Spinner />
-                    </Center>
-                ) : balanceStore.depositAddress$.error ? (
+                {balanceStore.depositAddress$.error ? (
                     <Box color="accent.orange">
                         <Box>Balance refill is not available right now.</Box>
                         <Box>Please try again later.</Box>
@@ -207,8 +203,14 @@ const RefillModalContent: FC<{
                             justifyContent="center"
                             flexDirection="column"
                         >
-                            {paymentLink ? (
+                            {paymentLink && balanceStore.depositAddress$.isResolved ? (
                                 <QRCodeSVG bgColor="transparent" size={200} value={paymentLink} />
+                            ) : !balanceStore.depositAddress$.isResolved && !balanceStore.depositAddress$.isLoading ? (
+                                <Center h="200px">
+                                    <Text textStyle="body2" color="text.secondary">
+                                        Error fetching deposit address
+                                    </Text>
+                                </Center>
                             ) : (
                                 <svg
                                     width="200"

src/pages/balance/BalanceBlock.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { H2, Overlay, Span, toDecimals, InfoTooltip } from 'src/shared';
-import { Box, Button, Flex, Skeleton, useDisclosure, Link, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, Skeleton, useDisclosure, Text } from '@chakra-ui/react';
 import { PromoCodeModal, RefillModal } from 'src/entities';
 import { observer } from 'mobx-react-lite';
 import { balanceStore } from 'src/shared/stores';

src/pages/balance/BillingBlock.tsx

@@ -14,6 +14,12 @@ const BillingBlock: FC<BillingBlockProps> = ({ billingStore }) => {
     const hasBillingHistory = billingStore.billingHistory.length > 0;
     const isLoading = billingStore.billingHistoryLoading;
 
+    // Reset state when store instance changes
+    useEffect(() => {
+        setHasEverLoaded(false);
+        setPreviousRowCount(0);
+    }, [billingStore]);
+
     // Track whether data has ever been loaded and remember the row count
     useEffect(() => {
         if (!isLoading && hasBillingHistory) {