refactor: simplify layout and imports in MessagesRefillModal and AppMessagesBalance components

- Removed unnecessary imports and streamlined the layout in the `MessagesRefillModal` component for improved readability.
- Adjusted the structure of the `AppMessagesBalance` component to use a `Flex` container instead of a `Box`, enhancing layout consistency.
- Consolidated message display logic to improve clarity and maintainability.

These changes enhance the overall code quality and user interface consistency across the messaging components.

Author: mois-ilya

src/features/app-messages/ui/MessagesRefillModal.tsx

@@ -18,10 +18,10 @@ import {
     UseRadioProps,
     VStack
 } from '@chakra-ui/react';
-import { CURRENCY, FilledWarnIcon16, formatWithSuffix, H4 } from 'src/shared';
+import { FilledWarnIcon16, formatWithSuffix, H4 } from 'src/shared';
 import { RadioCard } from 'src/shared/ui/checkbox';
 import { AppMessagesPackage } from '../model';
-import { CurrencyRate, RefillModalContent } from 'src/entities';
+import { RefillModalContent } from 'src/entities';
 import MessagesPaymentConfirmationModalContent from './MessagesPaymentConfirmationModalContent';
 import { usePackagesQuery } from '../model/queries';
 import { useBalanceSufficiencyCheck, getPaymentDeficit } from 'src/features/balance';
@@ -89,21 +89,9 @@ const MessagesRefillModal: FC<{
                                             {pkg.price.stringCurrencyAmount}
                                         </Text>
                                     </Flex>
-                                    <Flex justify="space-between" w="100%">
-                                        <Text textStyle="body2" color="text.secondary">
-                                            {formatWithSuffix(pkg.messagesIncluded)} messages
-                                        </Text>
-                                        <CurrencyRate
-                                            textStyle="body2"
-                                            color="text.secondary"
-                                            leftSign=""
-                                            textAlign="end"
-                                            currency={CURRENCY.TON}
-                                            amount={pkg.price.amount}
-                                            reverse
-                                            contentUnderSkeleton="&nbsp;TON"
-                                        />
-                                    </Flex>
+                                    <Text textStyle="body2" color="text.secondary">
+                                        {formatWithSuffix(pkg.messagesIncluded)} messages
+                                    </Text>
                                 </Box>
                             </RadioCard>
                         ))}

src/pages/app-messages/dashboard/AppMessagesBalance.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { formatWithSuffix, H4 } from 'src/shared';
+import { formatWithSuffix } from 'src/shared';
 import { Box, BoxProps, Button, Flex, Skeleton, Text, useDisclosure } from '@chakra-ui/react';
 import { MessagesRefillModal } from 'src/features';
 import { useMessagesBalanceQuery } from 'src/features/app-messages/model/queries';
@@ -13,15 +13,15 @@ const AppMessagesBalance: FC<BoxProps> = props => {
             <Text textStyle="label1" mb="5">
                 Available messages
             </Text>
-            <Box gap="2" display="flex" flexDirection="column">
-                <Text mb="0" flex="1" color={amount === 0 ? 'accent.red' : 'text.primary'} fontWeight={amount === 0 ? 'bold' : 'normal'}>
+            <Flex direction="column" gap="2">
+                <Text flex="1" mb="0" color={amount === 0 ? 'accent.red' : 'text.primary'} fontWeight={amount === 0 ? 'bold' : 'normal'}>
                     {isLoading ? <Skeleton w="80px" h="6" /> : formatWithSuffix(amount || 0)}{' '}
                     messages
                 </Text>
-                <Button onClick={onOpen} size="lg" variant="primary" w="100%">
+                <Button w="100%" onClick={onOpen} size="lg" variant="primary">
                     Refill
                 </Button>
-            </Box>
+            </Flex>
             <MessagesRefillModal isOpen={isOpen} onClose={onClose} />
         </Box>
     );