refactor: scope providers by route and use XState selectors

src/app/chat/hooks/use-first-recharge-offer-banner.ts

@@ -1,11 +1,12 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { shallowEqual } from "@xstate/react";
 
 import type { LoginStatus } from "@/data/dto/auth";
 import { useAppNavigator } from "@/router/use-app-navigator";
-import { usePaymentDispatch, usePaymentState } from "@/stores/payment";
-import { useUserState } from "@/stores/user/user-context";
+import { usePaymentDispatch, usePaymentSelector } from "@/stores/payment";
+import { useUserSelector } from "@/stores/user/user-context";
 import { getDefaultPayChannelForCountryCode } from "@/lib/payment/default_pay_channel";
 import {
   getFirstRechargeOfferBannerDismissed,
@@ -55,12 +56,24 @@ export function useFirstRechargeOfferBanner({
   loginStatus,
 }: UseFirstRechargeOfferBannerInput): UseFirstRechargeOfferBannerOutput {
   const navigator = useAppNavigator();
-  const payment = usePaymentState();
+  const payment = usePaymentSelector(
+    (state) => ({
+      isFirstRecharge: state.context.isFirstRecharge,
+      status: String(state.value),
+    }),
+    shallowEqual,
+  );
   const paymentDispatch = usePaymentDispatch();
-  const userState = useUserState();
+  const user = useUserSelector(
+    (state) => ({
+      countryCode: state.context.currentUser?.countryCode,
+      id: state.context.currentUser?.id ?? null,
+    }),
+    shallowEqual,
+  );
   const isAuthenticatedUser =
     loginStatus !== "notLoggedIn" && loginStatus !== "guest";
-  const userId = userState.currentUser?.id ?? null;
+  const userId = user.id;
   const hasUserIdentity = !isAuthenticatedUser || Boolean(userId);
   const [dismissalState, setDismissalState] = useState<DismissalState>(() => ({
     userId,
@@ -73,14 +86,14 @@ export function useFirstRechargeOfferBanner({
     if (!isAuthenticatedUser) return;
     if (payment.status !== "idle") return;
     const defaultPayChannel = getDefaultPayChannelForCountryCode(
-      userState.currentUser?.countryCode,
+      user.countryCode,
     );
     paymentDispatch({ type: "PaymentInit", payChannel: defaultPayChannel });
   }, [
     payment.status,
     paymentDispatch,
     isAuthenticatedUser,
-    userState.currentUser?.countryCode,
+    user.countryCode,
   ]);
 
   useEffect(() => {