refactor: enhance webhooks query handling and component imports

- Introduced useWebhooksMaybeQuery to conditionally fetch webhooks based on project existence, improving flexibility in the WebhooksPricingSection.
- Updated imports in WebhooksPricingSection to include the new query function, ensuring consistent data handling.
- Removed unused Button import in LiteserversTiersSection for cleaner code.

These changes collectively improve the efficiency and maintainability of the pricing components.

Author: mois-ilya

src/features/tonapi/pricing/ui/LiteserversTiersSection.tsx

@@ -8,8 +8,7 @@ import {
     useDisclosure,
     Spinner,
     Center,
-    Badge,
-    Button
+    Badge
 } from '@chakra-ui/react';
 import { useNavigate } from 'react-router-dom';
 import { SimpleTierCard } from './SimpleTierCard';

src/features/tonapi/pricing/ui/WebhooksPricingSection.tsx

@@ -15,7 +15,7 @@ import {
     Spinner
 } from '@chakra-ui/react';
 import { UsdCurrencyAmount, Network } from 'src/shared';
-import { useWebhooksQuery } from '../../webhooks/model/queries';
+import { useWebhooksMaybeQuery, useWebhooksQuery } from '../../webhooks/model/queries';
 import { WebhookTiers, calculateExpectedPrice } from '../utils/calculating';
 
 export const PricingDiagram: FC<{ isDisabled?: boolean }> = ({ isDisabled = false }) => {
@@ -243,13 +243,7 @@ export const WebhooksPricingSection: FC<WebhooksPricingSectionProps> = ({
 }) => {
     // Hooks must be called unconditionally at top level (React hooks rules)
     const navigate = useNavigate();
-    const {
-        data: webhooks = [],
-        isLoading,
-        error
-    } = displayOnly
-        ? { data: [], isLoading: false, error: null }
-        : useWebhooksQuery(Network.MAINNET);
+    const { data: webhooks = [], isLoading, error } = useWebhooksMaybeQuery(Network.MAINNET);
 
     // Display-only mode: render static content without using data-fetching result
     if (displayOnly) {

src/features/tonapi/webhooks/model/queries.ts

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { useProjectId } from 'src/shared/contexts/ProjectContext';
+import { useMaybeProject, useProjectId } from 'src/shared/contexts/ProjectContext';
 import {
   rtTonApiClient,
   RTWebhookAccountTxSubscriptions
@@ -49,6 +49,14 @@ export function mapWebhooksStatsToChartPoints(
   return items;
 }
 
+export function useWebhooksMaybeQuery(network: Network) {
+  const project = useMaybeProject();
+  if (project) {
+    return useWebhooksQuery(network);
+  }
+  return { data: [], isLoading: false, error: null };
+}
+
 /**
  * Fetch all webhooks for a project
  * Returns error state if webhooks feature is not available (501 error)