Merge branch 'fix/SPEK-167-disconnected-state' into screenshots/SPEK-155

Author: stepanLav

src/renderer/features/contacts/BackendConfiguration/model/auth-model.ts

@@ -1,5 +1,5 @@
 import { combine, createEffect, createEvent, createStore, sample } from 'effector';
-import { once } from 'patronum';
+import { interval, once } from 'patronum';
 
 import { type AccountId } from '@/shared/polkadotjs-schemas';
 import { walletModel } from '@/entities/wallet';
@@ -187,7 +187,10 @@ sample({
 // Connection result tracking
 $connectionResult
   .on(signAndVerifyFx.done, () => ({ status: 'success' }) as ConnectionResult)
-  .on([connectTriggered, signInClicked, backendConfigurationModel.events.urlCleared], () => ({ status: 'idle' }) as ConnectionResult);
+  .on(
+    [connectTriggered, signInClicked, backendConfigurationModel.events.urlCleared],
+    () => ({ status: 'idle' }) as ConnectionResult,
+  );
 
 sample({
   clock: [requestChallengeFx.failData, signAndVerifyFx.failData],
@@ -256,13 +259,33 @@ sample({
 // On session check failure, clear auth state silently
 $authState.on(checkSessionFx.fail, () => null);
 
+// Session expiry awareness: periodic health check every 5 minutes
+const $isSessionExpired = createStore(false);
+
+const sessionHealthCheck = interval({
+  timeout: 5 * 60 * 1000,
+  start: signAndVerifyFx.done,
+  stop: signOutClicked,
+});
+
+sample({
+  clock: sessionHealthCheck.tick,
+  source: backendConfigurationModel.$backendUrl,
+  filter: (url): url is string => url !== null,
+  target: checkSessionFx,
+});
+
+$isSessionExpired.on(checkSessionFx.fail, () => true);
+$isSessionExpired.on([signAndVerifyFx.done, signOutClicked, backendConfigurationModel.events.urlCleared], () => false);
+
 export const authModel = {
   $authState,
   $authStep,
   $selectedAccountId,
   $error,
   $connectionResult,
   $isAuthenticated,
+  $isSessionExpired,
   $extensionAccounts,
 
   events: {

src/renderer/features/contacts/BackendConfiguration/ui/AuthStatus.tsx

@@ -1,15 +1,30 @@
 import { useUnit } from 'effector-react';
 
+import { useI18n } from '@/shared/i18n';
 import { toAddress } from '@/shared/lib/utils';
-import { FootnoteText } from '@/shared/ui';
+import { FootnoteText, Icon } from '@/shared/ui';
 import { Identicon } from '@/shared/ui-entities';
 import { authModel } from '../model/auth-model';
 
 export const AuthStatus = () => {
-  const [isAuthenticated, authState] = useUnit([authModel.$isAuthenticated, authModel.$authState]);
+  const { t } = useI18n();
+  const [isAuthenticated, authState, isSessionExpired] = useUnit([
+    authModel.$isAuthenticated,
+    authModel.$authState,
+    authModel.$isSessionExpired,
+  ]);
+
+  if (isSessionExpired) {
+    return (
+      <div className="flex items-center gap-x-1">
+        <Icon name="warnCutout" size={14} className="text-text-warning" />
+        <FootnoteText className="text-text-warning">{t('addressBook.auth.sessionExpired')}</FootnoteText>
+      </div>
+    );
+  }
 
   if (!isAuthenticated || !authState) {
-    return null;
+    return <FootnoteText className="text-text-tertiary">{t('addressBook.auth.disconnected')}</FootnoteText>;
   }
 
   return (

src/renderer/features/contacts/BackendConfiguration/ui/BackendConnectionCard.tsx

@@ -9,24 +9,33 @@ import { backendConfigurationModel } from '../model/backend-configuration-model'
 import { AuthStatus } from './AuthStatus';
 
 export const BackendConnectionCard = () => {
-  const [hasBackend, backendUrl, isAuthenticated] = useUnit([
+  const [hasBackend, backendUrl, isAuthenticated, isSessionExpired] = useUnit([
     backendConfigurationModel.$hasBackend,
     backendConfigurationModel.$backendUrl,
     authModel.$isAuthenticated,
+    authModel.$isSessionExpired,
   ]);
 
   if (!hasBackend) return null;
 
+  const isDisconnected = !isAuthenticated || isSessionExpired;
+
   return (
     <button
       type="button"
-      className="flex h-full cursor-pointer items-center gap-x-1 rounded-md border border-filter-border bg-input-background px-2.5 hover:bg-hover"
+      className={cnTw(
+        'flex h-full cursor-pointer items-center gap-x-1 rounded-md border bg-input-background px-2.5 hover:bg-hover',
+        isDisconnected ? 'border-text-warning' : 'border-filter-border',
+      )}
       onClick={() => backendConfigurationModel.events.editStarted()}
     >
       <Icon
         name="globe"
         size={16}
-        className={cnTw('shrink-0', isAuthenticated ? 'text-icon-positive' : 'text-icon-accent')}
+        className={cnTw(
+          'shrink-0',
+          isSessionExpired ? 'text-text-warning' : isAuthenticated ? 'text-icon-positive' : 'text-icon-accent',
+        )}
       />
       <Tooltip enableHover delay={200}>
         <Tooltip.Trigger>

src/renderer/shared/i18n/locales/en.json

@@ -94,7 +94,11 @@
       "noExtensionAccounts": "No extension wallet accounts available",
       "selectAccountLabel": "Select account",
       "selectAccountPlaceholder": "Choose an account",
-      "signingMessage": "Waiting for signature..."
+      "signOutButton": "Sign out",
+      "signingMessage": "Waiting for signature...",
+      "signInSuccess": "Successfully signed in",
+      "sessionExpired": "Session expired",
+      "disconnected": "Disconnected"
     },
     "backendConfiguration": {
       "addTitle": "Add Backend",