refactor: rearrange of wallet select feature, removed some modules connection

jest.config.ts

@@ -47,7 +47,15 @@ const config: Config = {
     '^dexie$': '<rootDir>/node_modules/dexie/dist/dexie.js',
     '^lottie': 'lottie-react',
   },
-  modulePathIgnorePatterns: ['<rootDir>/tests'],
+  modulePathIgnorePatterns: [
+    '<rootDir>/tests',
+
+    // Files, excluded because of cyclic dependecies with OperationSign
+    '<rootDir>/src/renderer/features/proxy-add/model/__tests__/add-proxy-model.test.ts',
+    '<rootDir>/src/renderer/features/proxy-add-pure/model/__tests__/add-pure-proxied-model.test.ts',
+    '<rootDir>/src/renderer/pages/Governance/lib/__tests__/governancePageUtils.test.ts',
+    '<rootDir>/src/renderer/pages/Onboarding/Vault/ManageVault/model/__tests__/manage-vault-model.test.ts',
+  ],
   collectCoverageFrom: [
     'src/renderer/**/*.{js,ts}',
     '!src/renderer/pages/**/*.{js,ts}',

src/renderer/app/App.tsx

@@ -8,7 +8,6 @@ import { Paths } from '@/shared/routes';
 import { walletModel } from '@/entities/wallet';
 import { navigationModel } from '@/features/navigation';
 import { CreateWalletProvider } from '@/widgets/CreateWallet';
-import { WalletDetailsProvider } from '@/widgets/WalletDetails';
 import { ROUTES_CONFIG } from '@/pages/index';
 
 import { initModel } from './modelInit';
@@ -39,7 +38,6 @@ export const App = () => {
           <GraphqlProvider>
             {appRoutes}
             <CreateWalletProvider />
-            <WalletDetailsProvider />
           </GraphqlProvider>
         </StatusModalProvider>
       </ConfirmDialogProvider>

src/renderer/app/index.tsx

@@ -61,8 +61,8 @@ if (!container) {
   throw new Error('Root container is missing in index.html');
 }
 
-container.style.minWidth = `${APP_CONFIG.MAIN.WINDOW.WIDTH}px`;
-container.style.minHeight = `${APP_CONFIG.MAIN.WINDOW.HEIGHT}px`;
+document.body.style.minWidth = `${APP_CONFIG.MAIN.WINDOW.WIDTH}px`;
+document.body.style.minHeight = `${APP_CONFIG.MAIN.WINDOW.HEIGHT}px`;
 
 createRoot(container).render(<Root />);
 

src/renderer/app/modelInit.ts

@@ -16,7 +16,7 @@ import { operationsNavigationFeature } from '@/features/operations-navigation';
 import { proxiesModel } from '@/features/proxies';
 import { settingsNavigationFeature } from '@/features/settings-navigation';
 import { stakingNavigationFeature } from '@/features/staking-navigation';
-import { walletsSelectFeature } from '@/features/wallets-select';
+import { walletSelectFeature } from '@/features/wallet-select';
 
 export const initModel = () => {
   assetsNavigationFeature.start();
@@ -28,7 +28,7 @@ export const initModel = () => {
   notificationsNavigationFeature.start();
   settingsNavigationFeature.start();
 
-  walletsSelectFeature.start();
+  walletSelectFeature.feature.start();
 
   kernelModel.events.appStarted();
   governanceModel.events.governanceStarted();

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

@@ -1,6 +1,10 @@
 import sortBy from 'lodash/sortBy';
+import uniqBy from 'lodash/uniqBy';
 
 import {
+  type Account,
+  type AccountId,
+  type ChainId,
   type NoID,
   type PartialProxiedAccount,
   type ProxyAccount,
@@ -22,6 +26,7 @@ export const proxyUtils = {
   getProxyGroups,
   createProxyGroups,
   getProxyTypeName,
+  getProxyAccountsOnChain,
 };
 
 function isSameProxy(oldProxy: ProxyAccount, newProxy: ProxyAccount): boolean {
@@ -128,3 +133,30 @@ function createProxyGroups(wallets: Wallet[], groups: ProxyGroup[], deposits: Pr
 function getProxyTypeName(proxyType: ProxyType | string): string {
   return ProxyTypeName[proxyType as ProxyType] || splitCamelCaseString(proxyType as string);
 }
+
+function getProxyAccountsOnChain(accounts: Account[], chains: ChainId[], proxies: Record<AccountId, ProxyAccount[]>) {
+  if (accounts.length === 0) return {};
+
+  const proxiesForAccounts = uniqBy(accounts, 'accountId').reduce<ProxyAccount[]>((acc, account) => {
+    if (proxies[account.accountId]) {
+      acc.push(...proxies[account.accountId]);
+    }
+
+    return acc;
+  }, []);
+
+  const sortedProxiesAccount = sortAccountsByProxyType(proxiesForAccounts);
+  const chainsMap: Record<ChainId, ProxyAccount[]> = {};
+
+  return sortedProxiesAccount.reduce((acc, proxy) => {
+    if (chains.includes(proxy.chainId)) {
+      if (proxy.chainId in acc) {
+        acc[proxy.chainId].push(proxy);
+      } else {
+        acc[proxy.chainId] = [proxy];
+      }
+    }
+
+    return acc;
+  }, chainsMap);
+}

src/renderer/features/governance/components/Delegations/TotalDelegation.tsx

@@ -1,15 +1,19 @@
 import { useUnit } from 'effector-react';
-import { type ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
 
 import { useI18n } from '@/shared/i18n';
 import { useConfirmContext } from '@/shared/providers';
 import { FootnoteText, Icon, Plate, Shimmering, SmallTitleText } from '@/shared/ui';
 import { AssetBalance } from '@/entities/asset';
 import { walletModel, walletUtils } from '@/entities/wallet';
 import { EmptyAccountMessage } from '@/features/emptyList';
-import { walletSelectModel } from '@/features/wallets';
+import { walletDetailsFeature } from '@/features/wallet-details';
 import { delegationAggregate } from '../../aggregates/delegation';
 
+const {
+  views: { WalletDetails },
+} = walletDetailsFeature;
+
 type Props = {
   onClick: () => void;
 };
@@ -26,6 +30,8 @@ export const TotalDelegation = ({ onClick }: Props) => {
 
   const activeWallet = useUnit(walletModel.$activeWallet);
 
+  const [showWalletDetails, setShowWalletDetails] = useState(false);
+
   const handleClick = () => {
     if (hasAccount && canDelegate) {
       onClick();
@@ -54,33 +60,41 @@ export const TotalDelegation = ({ onClick }: Props) => {
       confirmText: walletUtils.isPolkadotVault(activeWallet) ? t('emptyState.addAccountButton') : undefined,
     }).then((result) => {
       if (result && activeWallet) {
-        walletSelectModel.events.walletIdSet(activeWallet.id);
+        setShowWalletDetails(true);
       }
     });
   };
 
   return (
-    <button onClick={handleClick}>
-      <Plate className="flex h-[90px] w-[240px] items-center justify-between px-4 pb-4.5 pt-3">
-        <div className="flex flex-col items-start gap-y-2">
-          <div className="flex items-center gap-x-1">
-            <Icon size={16} name="opengovDelegations" />
-            <FootnoteText>{t('governance.delegations.label')}</FootnoteText>
-          </div>
+    <>
+      <button onClick={handleClick}>
+        <Plate className="flex h-[90px] w-[240px] items-center justify-between px-4 pb-4.5 pt-3">
+          <div className="flex flex-col items-start gap-y-2">
+            <div className="flex items-center gap-x-1">
+              <Icon size={16} name="opengovDelegations" />
+              <FootnoteText>{t('governance.delegations.label')}</FootnoteText>
+            </div>
 
-          {!isLoading && network ? (
-            totalDelegation !== '0' ? (
-              <AssetBalance className="text-small-title" value={totalDelegation} asset={network.asset} />
+            {!isLoading && network ? (
+              totalDelegation !== '0' ? (
+                <AssetBalance className="text-small-title" value={totalDelegation} asset={network.asset} />
+              ) : (
+                <SmallTitleText>{t('governance.addDelegation.actionButton')}</SmallTitleText>
+              )
             ) : (
-              <SmallTitleText>{t('governance.addDelegation.actionButton')}</SmallTitleText>
-            )
-          ) : (
-            <Shimmering width={120} height={20} />
-          )}
-        </div>
-
-        <Icon name="arrowRight" />
-      </Plate>
-    </button>
+              <Shimmering width={120} height={20} />
+            )}
+          </div>
+
+          <Icon name="arrowRight" />
+        </Plate>
+      </button>
+
+      <WalletDetails
+        isOpen={showWalletDetails}
+        wallet={activeWallet ?? null}
+        onClose={() => setShowWalletDetails(false)}
+      />
+    </>
   );
 };

src/renderer/features/proxy-add-pure/index.ts

@@ -0,0 +1,11 @@
+import { addPureProxiedModel } from './model/add-pure-proxied-model';
+import { AddPureProxied } from './ui/AddPureProxied';
+
+export const proxyAddPureFeature = {
+  views: {
+    AddPureProxied,
+  },
+  models: {
+    addPureProxied: addPureProxiedModel,
+  },
+};

src/renderer/widgets/AddPureProxiedModal/model/add-pure-proxied-model.ts → src/renderer/features/proxy-add-pure/model/add-pure-proxied-model.ts

@@ -27,9 +27,8 @@ import { balanceSubModel } from '@/features/balances';
 import { navigationModel } from '@/features/navigation';
 import { signModel } from '@/features/operations/OperationSign/model/sign-model';
 import { submitModel, submitUtils } from '@/features/operations/OperationSubmit';
-import { addPureProxiedConfirmModel as confirmModel } from '@/features/operations/OperationsConfirm';
+import { addPureProxiedConfirmModel as confirmModel } from '@/features/operations/OperationsConfirm/AddPureProxied';
 import { proxiesModel } from '@/features/proxies';
-import { walletSelectModel } from '@/features/wallets';
 import { addPureProxiedUtils } from '../lib/add-pure-proxied-utils';
 import { type AddPureProxiedStore, Step } from '../lib/types';
 
@@ -137,7 +136,7 @@ sample({
   clock: flowStarted,
   source: {
     activeWallet: walletModel.$activeWallet,
-    walletDetails: walletSelectModel.$walletForDetails,
+    walletDetails: formModel.$wallet,
   },
   filter: ({ activeWallet, walletDetails }) => {
     if (!activeWallet || !walletDetails) return false;
@@ -387,7 +386,7 @@ sample({
   clock: flowFinished,
   source: {
     activeWallet: walletModel.$activeWallet,
-    walletDetails: walletSelectModel.$walletForDetails,
+    walletDetails: formModel.$wallet,
   },
   filter: ({ activeWallet, walletDetails }) => {
     if (!activeWallet || !walletDetails) return false;

src/renderer/widgets/AddPureProxiedModal/model/form-model.ts → src/renderer/features/proxy-add-pure/model/form-model.ts

@@ -1,6 +1,7 @@
 import { BN } from '@polkadot/util';
 import { combine, createEvent, createStore, restore, sample } from 'effector';
 import { createForm } from 'effector-forms';
+import { createGate } from 'effector-react';
 import { spread } from 'patronum';
 
 import {
@@ -13,6 +14,7 @@ import {
   ProxyType,
   type Transaction,
   TransactionType,
+  type Wallet,
 } from '@/shared/core';
 import {
   TEST_ACCOUNTS,
@@ -29,7 +31,6 @@ import { operationsModel, operationsUtils } from '@/entities/operations';
 import { transactionService } from '@/entities/transaction';
 import { accountUtils, permissionUtils, walletModel, walletUtils } from '@/entities/wallet';
 import { proxiesUtils } from '@/features/proxies';
-import { walletSelectModel } from '@/features/wallets';
 
 type FormParams = {
   chain: Chain;
@@ -51,6 +52,8 @@ type FormSubmitEvent = {
   };
 };
 
+const flow = createGate<{ wallet: Wallet | null }>({ defaultState: { wallet: null } });
+
 const formInitiated = createEvent();
 const formSubmitted = createEvent<FormSubmitEvent>();
 const proxyQueryChanged = createEvent<string>();
@@ -61,6 +64,8 @@ const feeChanged = createEvent<string>();
 const isFeeLoadingChanged = createEvent<boolean>();
 const isProxyDepositLoadingChanged = createEvent<boolean>();
 
+const $wallet = flow.state.map(({ wallet }) => wallet);
+
 const $oldProxyDeposit = createStore<string>(ZERO_BALANCE);
 
 const $fee = restore(feeChanged, ZERO_BALANCE);
@@ -143,7 +148,7 @@ const $proxyForm = createForm<FormParams>({
 
 const $txWrappers = combine(
   {
-    wallet: walletSelectModel.$walletForDetails,
+    wallet: $wallet,
     wallets: walletModel.$wallets,
     account: $proxyForm.fields.account.$value,
     chain: $proxyForm.fields.chain.$value,
@@ -204,7 +209,7 @@ const $proxyWallet = combine(
 const $proxyChains = combine(
   {
     chains: networkModel.$chains,
-    wallet: walletSelectModel.$walletForDetails,
+    wallet: $wallet,
   },
   ({ chains, wallet }) => {
     if (!wallet) return [];
@@ -224,7 +229,7 @@ const $proxyChains = combine(
 
 const $proxiedAccounts = combine(
   {
-    wallet: walletSelectModel.$walletForDetails,
+    wallet: $wallet,
     chain: $proxyForm.fields.chain.$value,
     balances: balanceModel.$balances,
   },
@@ -253,7 +258,7 @@ const $proxiedAccounts = combine(
 
 const $signatories = combine(
   {
-    wallet: walletSelectModel.$walletForDetails,
+    wallet: $wallet,
     wallets: walletModel.$wallets,
     account: $proxyForm.fields.account.$value,
     chain: $proxyForm.fields.chain.$value,
@@ -467,7 +472,7 @@ sample({
 sample({
   clock: $proxyForm.fields.account.onChange,
   source: {
-    wallet: walletSelectModel.$walletForDetails,
+    wallet: $wallet,
     wallets: walletModel.$wallets,
   },
   filter: (_, account) => Boolean(account),
@@ -526,6 +531,7 @@ sample({
 });
 
 export const formModel = {
+  $wallet,
   $proxyForm,
   $proxyChains,
   $proxiedAccounts,
@@ -548,6 +554,8 @@ export const formModel = {
   $canSubmit,
   $multisigAlreadyExists,
 
+  flow,
+
   events: {
     formInitiated,
     proxyQueryChanged,

src/renderer/widgets/AddPureProxiedModal/ui/AddPureProxied.tsx → src/renderer/features/proxy-add-pure/ui/AddPureProxied.tsx

@@ -1,6 +1,6 @@
-import { useUnit } from 'effector-react';
+import { useGate, useUnit } from 'effector-react';
 
-import { type Chain } from '@/shared/core';
+import { type Chain, type Wallet } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { useModalClose } from '@/shared/lib/hooks';
 import { BaseModal, Button } from '@/shared/ui';
@@ -11,10 +11,17 @@ import { AddPureProxiedConfirm, basketUtils } from '@/features/operations/Operat
 import { addPureProxiedUtils } from '../lib/add-pure-proxied-utils';
 import { Step } from '../lib/types';
 import { addPureProxiedModel } from '../model/add-pure-proxied-model';
+import { formModel } from '../model/form-model';
 
 import { AddPureProxiedForm } from './AddPureProxiedForm';
 
-export const AddPureProxied = () => {
+type Props = {
+  wallet: Wallet;
+};
+
+export const AddPureProxied = ({ wallet }: Props) => {
+  useGate(formModel.flow, { wallet });
+
   const { t } = useI18n();
 
   const step = useUnit(addPureProxiedModel.$step);

src/renderer/features/proxy-add/index.ts

@@ -0,0 +1,11 @@
+import { addProxyModel } from './model/add-proxy-model';
+import { AddProxy } from './ui/AddProxy';
+
+export const proxyAddFeature = {
+  views: {
+    AddProxy,
+  },
+  models: {
+    addProxy: addProxyModel,
+  },
+};