feat: doc hudson style (#5611)

Author: cuteWarmFrog

package.json

@@ -115,6 +115,7 @@
     "@remote-ui/rpc": "1.4.7",
     "@substrate/connect": "1.3.1",
     "@talismn/connect-wallets": "1.2.8",
+    "@tanstack/react-virtual": "3.13.18",
     "@uiw/react-json-view": "2.0.0-alpha.39",
     "@walletconnect/core": "2.22.3",
     "@walletconnect/sign-client": "2.22.3",
@@ -178,6 +179,8 @@
     "@commitlint/config-conventional": "19.8.1",
     "@effector/swc-plugin": "0.8.1",
     "@electron/notarize": "2.5.0",
+    "@eslint/js": "9.39.2",
+    "@eslint/json": "0.12.0",
     "@fontsource/inter": "5.2.6",
     "@headlessui/tailwindcss": "0.1.3",
     "@jonasgeiler/tsc-files": "2.3.1",
@@ -200,10 +203,8 @@
     "@types/node": "22.17.0",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
-    "@eslint/js": "9.39.2",
     "@typescript-eslint/eslint-plugin": "8.39.1",
     "@typescript-eslint/parser": "8.39.1",
-    "typescript-eslint": "8.39.1",
     "@typescript/native-preview": "7.0.0-dev.20260126.1",
     "@vitejs/plugin-react-swc": "4.1.0",
     "@vitest/coverage-v8": "3.2.4",
@@ -224,7 +225,6 @@
     "electron-updater": "6.6.2",
     "electron-window-state": "5.0.3",
     "eslint": "9.39.2",
-    "globals": "16.0.0",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-module-utils": "2.12.1",
     "eslint-plugin-boundaries": "5.0.1",
@@ -233,12 +233,12 @@
     "eslint-plugin-i18n-json": "4.0.1",
     "eslint-plugin-i18next": "6.1.3",
     "eslint-plugin-import-x": "4.16.1",
-    "@eslint/json": "0.12.0",
     "eslint-plugin-prettier": "5.5.3",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-unused-imports": "4.1.4",
     "fake-indexeddb": "6.0.1",
     "favicons": "7.2.0",
+    "globals": "16.0.0",
     "happy-dom": "18.0.1",
     "husky": "9.1.7",
     "i18next-parser": "9.3.0",
@@ -262,6 +262,7 @@
     "ts-node": "10.9.2",
     "tslib": "2.8.1",
     "typescript": "5.9.2",
+    "typescript-eslint": "8.39.1",
     "vite": "7.1.11",
     "vite-plugin-compression2": "2.2.1",
     "vite-plugin-mkcert": "1.17.8",
@@ -272,6 +273,7 @@
     "vitest": "3.2.4"
   },
   "sideEffects": [
-    "*.css", "*.ts"
+    "*.css",
+    "*.ts"
   ]
 }

pnpm-lock.yaml

@@ -1 +1,2 @@
 export { type ToastData, notificationModel } from './model/notification-model';
+export { notificationUtils } from './lib/notification-utils';

src/renderer/entities/notification/index.ts

@@ -1,5 +1,7 @@
 import {
+  type FlexibleMultisigOperationNotification,
   type MultisigCreated,
+  type MultisigEventNotification,
   type MultisigOperationNotification,
   type Notification,
   type ProxyAction,
@@ -9,7 +11,11 @@ import { NotificationType } from '@/shared/core';
 export const notificationUtils = {
   isMultisigInvite,
   isMultisigOperation,
+  isMultisigOperationNotification,
+  isMultisigEventNotification,
+  isFlexibleMultisigNotification,
   isProxyCreation,
+  isProxyRemoval,
 };
 
 function isMultisigInvite(notification: Notification): notification is MultisigCreated {
@@ -27,6 +33,27 @@ function isMultisigOperation(notification: Notification): notification is Multis
   return Operations.includes(notification.type);
 }
 
+function isMultisigOperationNotification(notification: Notification): notification is MultisigOperationNotification {
+  return notification.type === NotificationType.MULTISIG_OPERATION;
+}
+
+function isMultisigEventNotification(notification: Notification): notification is MultisigEventNotification {
+  return notification.type === NotificationType.MULTISIG_EVENT;
+}
+
+function isFlexibleMultisigNotification(
+  notification: Notification,
+): notification is FlexibleMultisigOperationNotification {
+  return (
+    notification.type === NotificationType.FLEXIBLE_MULTISIG_CREATED ||
+    notification.type === NotificationType.FLEXIBLE_MULTISIG_EDITED
+  );
+}
+
 function isProxyCreation(notification: Notification): notification is ProxyAction {
   return notification.type === NotificationType.PROXY_CREATED;
 }
+
+function isProxyRemoval(notification: Notification): notification is ProxyAction {
+  return notification.type === NotificationType.PROXY_REMOVED;
+}

src/renderer/entities/notification/lib/notification-utils.ts

@@ -1,26 +1,26 @@
 import { type BN } from '@polkadot/util';
-import { useUnit } from 'effector-react';
 import { type TFunction } from 'i18next';
 import { memo, useMemo } from 'react';
 
 import {
+  type Address,
   type Asset,
   type AssetByChains,
   type Chain,
   type ChainId,
   type FlexibleMultisigAccount,
   type MultisigAccount,
+  type Wallet,
 } from '@/shared/core';
 import { createTransformer, useTransformer } from '@/shared/di';
 import { useI18n } from '@/shared/i18n';
 import { formatSectionAndMethod, toAddress, toShortAddress } from '@/shared/lib/utils';
 import { Accordion, FootnoteText, HelpText } from '@/shared/ui';
 import { IconButton } from '@/shared/ui/Buttons';
 import { AssetBalance, AssetIcon, WalletAccountIcon } from '@/shared/ui-entities';
-import { Copy, Tooltip } from '@/shared/ui-kit';
+import { AsyncItem, Copy, Tooltip } from '@/shared/ui-kit';
 import { type MultisigOperation, useWalletName } from '@/domains/network';
 import { ChainTitle, XcmChains } from '@/entities/chain';
-import { networkModel } from '@/entities/network';
 import { OperationTitleStatus } from '@/entities/operations';
 import { AssetFiatBalance } from '@/entities/price';
 import {
@@ -29,7 +29,7 @@ import {
   getTransactionAmount,
   useTransactionAsset,
 } from '@/entities/transaction';
-import { accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils } from '@/entities/wallet';
 import { type TabFilter } from '../model/context';
 import { deepLinkModel } from '../model/deep-link';
 
@@ -42,6 +42,8 @@ type Props = {
   multisigAccount: MultisigAccount | FlexibleMultisigAccount;
   isDefaultOpen?: boolean;
   tab: TabFilter;
+  chains: Record<ChainId, Chain>;
+  wallets: Wallet[];
 };
 
 export type OperationTitle = {
@@ -65,16 +67,27 @@ export const operationTitleTransformer = createTransformer<
   OperationTitle
 >();
 
-export const Operation = memo(({ operation, multisigAccount, isDefaultOpen = false, tab }: Props) => {
+const OperationWalletInfo = ({ wallet, accountAddress }: { wallet: Wallet; accountAddress: Address }) => {
+  const walletName = useWalletName(wallet);
+
+  return (
+    <div className="flex w-[240px] items-center gap-x-2">
+      <WalletAccountIcon address={accountAddress} type={wallet.type} size={32} iconSize={14} />
+      <div className="flex min-w-0 flex-col items-start gap-y-0.5">
+        <FootnoteText className="truncate text-text-primary">{walletName}</FootnoteText>
+        <HelpText className="text-text-tertiary">{toShortAddress(accountAddress, 6)}</HelpText>
+      </div>
+    </div>
+  );
+};
+
+export const Operation = memo(({ operation, multisigAccount, isDefaultOpen = false, tab, chains, wallets }: Props) => {
   const { t } = useI18n();
-  const chains = useUnit(networkModel.$chains);
-  const wallets = useUnit(walletModel.$wallets);
 
   const wallet = useMemo(
     () => wallets.find(w => w.id === multisigAccount.walletId),
     [wallets, multisigAccount.walletId],
   );
-  const walletName = useWalletName(wallet);
 
   const isFlexibleMultisigAccount = accountUtils.isFlexibleMultisigAccount(multisigAccount);
   const coreTx = isFlexibleMultisigAccount ? findCoreTransaction(operation.transaction) : operation.transaction;
@@ -134,32 +147,32 @@ export const Operation = memo(({ operation, multisigAccount, isDefaultOpen = fal
                   <AssetIcon asset={titleData.amount.asset} size={32} />
                   <div className="flex flex-col items-start gap-y-0.5">
                     <AssetBalance value={titleData.amount.value} asset={titleData.amount.asset} />
-                    <AssetFiatBalance
-                      asset={titleData.amount.asset}
-                      amount={titleData.amount.value}
-                      className="text-help-text text-text-tertiary"
-                    />
+                    <AsyncItem strategy="async" fallback={<div className="h-[18px]" />}>
+                      <AssetFiatBalance
+                        asset={titleData.amount.asset}
+                        amount={titleData.amount.value}
+                        className="text-help-text text-text-tertiary"
+                      />
+                    </AsyncItem>
                   </div>
                 </div>
               )}
             </div>
 
             <div className="flex min-w-0 flex-1 items-center justify-between">
-              {wallet && accountAddress ? (
-                <div className="flex w-[240px] items-center gap-x-2">
-                  <WalletAccountIcon address={accountAddress} type={wallet.type} size={32} iconSize={14} />
-                  <div className="flex min-w-0 flex-col items-start gap-y-0.5">
-                    <FootnoteText className="truncate text-text-primary">{walletName}</FootnoteText>
-                    <HelpText className="text-text-tertiary">{toShortAddress(accountAddress, 6)}</HelpText>
-                  </div>
-                </div>
-              ) : (
-                <div className="w-[240px]" />
-              )}
+              <AsyncItem strategy="async" fallback={<div className="w-[240px]" />}>
+                {wallet && accountAddress ? (
+                  <OperationWalletInfo wallet={wallet} accountAddress={accountAddress} />
+                ) : (
+                  <div className="w-[240px]" />
+                )}
+              </AsyncItem>
 
               <OperationTitleStatus operation={operation} account={multisigAccount} />
 
-              <OperationActions operation={operation} account={multisigAccount} />
+              <AsyncItem strategy="async" fallback={<div />}>
+                <OperationActions operation={operation} account={multisigAccount} />
+              </AsyncItem>
             </div>
 
             <Tooltip>