novasamatech · tuul-wq · Nov 21, 2024 · Nov 20, 2024 · Nov 20, 2024 · Nov 20, 2024
diff --git a/src/renderer/app/components/ElectronSplashScreen/ElectronSplashScreen.tsx b/src/renderer/app/components/ElectronSplashScreen/ElectronSplashScreen.tsx
@@ -2,7 +2,7 @@ import logo from './assets/logo.svg';
 
 export const ElectronSplashScreen = () => {
   return (
-    <div className="flex h-screen w-screen items-center justify-center duration-500 animate-in fade-in">
+    <div className="flex h-full w-screen items-center justify-center duration-500 animate-in fade-in">
       <img src={logo} />
     </div>
   );

diff --git a/src/renderer/app/components/WebSplashScreen/WebSplashScreen.tsx b/src/renderer/app/components/WebSplashScreen/WebSplashScreen.tsx
@@ -53,7 +53,7 @@ export const WebSplashScreen = () => {
   }, []);
 
   return (
-    <div className="flex h-screen w-full items-center justify-center p-4 font-manrope duration-500 animate-in fade-in">
+    <div className="flex h-full w-full items-center justify-center p-4 font-manrope duration-500 animate-in fade-in">
       <div className="fixed -top-[1100px] left-[50%] h-[1140px] w-[1140px] -translate-x-[50%] rounded-full bg-[#FF57E4] blur-[215px]" />
       <div className="z-10 flex flex-col items-center gap-[86px]">
         <div className="flex items-center gap-[88px]">

diff --git a/src/renderer/app/index.css b/src/renderer/app/index.css
@@ -6,15 +6,24 @@
 
 html, body {
   width: 100%;
+  max-height: 100%;
   height: 100%;
   overflow: hidden;
+  transition: max-height 0.5s ease-in-out;
 }
 
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (max-aspect-ratio: 32 / 25) and (width < 1024px) {
+  html, body {
+    max-height: 800px;
+  }
+}
+
+
 /* Scrollbar for Firefox */
 * {
   scrollbar-width: thin;

diff --git a/src/renderer/app/index.html b/src/renderer/app/index.html
@@ -11,7 +11,8 @@
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!--    This tag commented on purpose - that's the way to "support" mobile devices-->
+    <!--    <meta name="viewport" content="width=device-width, initial-scale=1" />-->
     <meta name="theme-color" content="#7b29ff" />
     <meta name="title" content="Nova Spektr" />
     <meta name="description" content="Enterprise desktop wallet for Polkadot supporting multisigs, staking, light clients and more" />
@@ -38,6 +39,6 @@
     <title>Nova Spektr</title>
   </head>
   <body>
-    <div id="app" class="text-body"></div>
+    <div id="app" class="text-body h-full overflow-hidden"></div>
   </body>
 </html>
diff --git a/src/renderer/entities/contact/model/contact-model.ts b/src/renderer/entities/contact/model/contact-model.ts
@@ -2,7 +2,7 @@ import { createEffect, createStore, sample } from 'effector';
 
 import { storageService } from '@/shared/api/storage';
 import { type Contact, kernelModel } from '@/shared/core';
-import { splice } from '@/shared/lib/utils';
+import { merge, splice } from '@/shared/lib/utils';
 
 const $contacts = createStore<Contact[]>([]);
 
@@ -24,6 +24,14 @@ const updateContactFx = createEffect(async ({ id, ...rest }: Contact): Promise<C
   return { id, ...rest };
 });
 
+const updateContactsFx = createEffect(async (contacts: Contact[]): Promise<Contact[]> => {
+  if (contacts.length === 0) return [];
+
+  await storageService.contacts.updateAll(contacts);
+
+  return contacts;
+});
+
 const deleteContactFx = createEffect(async (contactId: number): Promise<number> => {
   await storageService.contacts.delete(contactId);
 
@@ -44,6 +52,13 @@ $contacts
     const position = state.findIndex((s) => s.id === contact.id);
 
     return splice(state, contact, position);
+  })
+  .on(updateContactsFx.doneData, (state, contacts) => {
+    return merge({
+      a: state,
+      b: contacts,
+      mergeBy: (c) => c.id,
+    });
   });
 
 sample({
@@ -58,5 +73,6 @@ export const contactModel = {
     createContactsFx,
     deleteContactFx,
     updateContactFx,
+    updateContactsFx,
   },
 };
diff --git a/src/renderer/entities/wallet/model/wallet-model.ts b/src/renderer/entities/wallet/model/wallet-model.ts
@@ -90,18 +90,20 @@ type CreateResult = {
   accounts: Account[];
   external: boolean;
 };
-const walletCreatedFx = createEffect(async ({ wallet, accounts }: CreateParams): Promise<CreateResult | undefined> => {
-  const dbWallet = await storageService.wallets.create({ ...wallet, isActive: false });
+const walletCreatedFx = createEffect(
+  async ({ wallet, accounts, external }: CreateParams): Promise<CreateResult | undefined> => {
+    const dbWallet = await storageService.wallets.create({ ...wallet, isActive: false });
 
-  if (!dbWallet) return undefined;
+    if (!dbWallet) return undefined;
 
-  const accountsPayload = accounts.map((account) => ({ ...account, walletId: dbWallet.id }));
-  const dbAccounts = await storageService.accounts.createAll(accountsPayload);
+    const accountsPayload = accounts.map((account) => ({ ...account, walletId: dbWallet.id }));
+    const dbAccounts = await storageService.accounts.createAll(accountsPayload);
 
-  if (!dbAccounts) return undefined;
+    if (!dbAccounts) return undefined;
 
-  return { wallet: dbWallet, accounts: dbAccounts, external: false };
-});
+    return { wallet: dbWallet, accounts: dbAccounts, external };
+  },
+);
 
 const multishardCreatedFx = createEffect(
   async ({

diff --git a/src/renderer/features/app-shell/components/AppShell.tsx b/src/renderer/features/app-shell/components/AppShell.tsx
@@ -11,7 +11,7 @@ export const AppShell = memo(() => {
   const headerNodes = useSlot(navigationHeaderSlot);
 
   return (
-    <div className="flex h-screen animate-in fade-in">
+    <div className="flex h-full animate-in fade-in">
       <aside className="flex w-[240px] shrink-0 flex-col gap-y-6 border-r border-r-container-border bg-left-navigation-menu-background p-4">
         {headerNodes}
         <Navigation />

diff --git a/src/renderer/features/assets/AssetsChainView/ui/AssetsChainView.tsx b/src/renderer/features/assets/AssetsChainView/ui/AssetsChainView.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 
 import { chainsService } from '@/shared/api/network';
 import { type Account, type Chain } from '@/shared/core';
-import { isStringsMatchQuery } from '@/shared/lib/utils';
+import { isStringsMatchQuery, nullable } from '@/shared/lib/utils';
 import { AssetsListView, EmptyAssetsState } from '@/entities/asset';
 import { balanceModel } from '@/entities/balance';
 import { networkModel, networkUtils } from '@/entities/network';
@@ -34,26 +34,25 @@ export const AssetsChainView = ({ query, activeShards, hideZeroBalances, assetsV
     if (!activeWallet || assetsView !== AssetsListView.CHAIN_CENTRIC || !activeShards.length) return;
 
     const isMultisig = walletUtils.isMultisig(activeWallet);
+    const multisigChainToInclude = isMultisig ? activeWallet.accounts[0].chainId : undefined;
 
     const availableChains = Object.values(chains).filter((chain) => {
       return activeWallet.accounts.some((account) => {
         return (
-          activeWallet &&
           accountUtils.isNonBaseVaultAccount(account, activeWallet) &&
           accountUtils.isChainAndCryptoMatch(account, chain)
         );
       });
     });
 
     const filteredChains = availableChains.filter((c) => {
-      if (!connections[c.chainId]) {
-        return false;
-      }
+      const connection = connections[c.chainId];
 
-      const isDisabled = networkUtils.isDisabledConnection(connections[c.chainId]);
-      const hasMultiPallet = !isMultisig || networkUtils.isMultisigSupported(c.options);
+      if (nullable(connection)) return false;
+      if (networkUtils.isDisabledConnection(connection)) return false;
+      if (!isMultisig) return true;
 
-      return !isDisabled && hasMultiPallet;
+      return networkUtils.isMultisigSupported(c.options) || multisigChainToInclude === c.chainId;
     });
 
     const sortedChains = chainsService.sortChainsByBalance(

diff --git a/src/renderer/features/assets/AssetsPortfolioView/model/portfolio-model.ts b/src/renderer/features/assets/AssetsPortfolioView/model/portfolio-model.ts
@@ -2,7 +2,7 @@ import { createEffect, createEvent, createStore, restore, sample } from 'effecto
 import { once } from 'patronum';
 
 import { type Account, type AssetByChains, type Balance, type Chain, type ChainId, type Wallet } from '@/shared/core';
-import { includes } from '@/shared/lib/utils';
+import { includes, nullable } from '@/shared/lib/utils';
 import { AssetsListView } from '@/entities/asset';
 import { balanceModel } from '@/entities/balance';
 import { networkModel, networkUtils } from '@/entities/network';
@@ -34,8 +34,9 @@ type UpdateTokenParams = {
 
 const getUpdatedTokensFx = createEffect(({ activeWallet, chains }: UpdateTokenParams): AssetByChains[] => {
   const tokens = tokensService.getTokensData();
+  const updatedTokens: AssetByChains[] = [];
 
-  return tokens.reduce((acc, token) => {
+  for (const token of tokens) {
     const filteredChains = token.chains.filter((chain) => {
       return activeWallet?.accounts.some((account) => {
         return (
@@ -45,12 +46,12 @@ const getUpdatedTokensFx = createEffect(({ activeWallet, chains }: UpdateTokenPa
       });
     });
 
-    if (filteredChains.length > 0) {
-      acc.push({ ...token, chains: filteredChains });
-    }
+    if (filteredChains.length === 0) continue;
+
+    updatedTokens.push({ ...token, chains: filteredChains });
+  }
 
-    return acc;
-  }, [] as AssetByChains[]);
+  return updatedTokens;
 });
 
 type PopulateBalanceParams = {
@@ -61,15 +62,17 @@ type PopulateBalanceParams = {
 
 const populateTokensBalanceFx = createEffect(
   ({ activeTokens, balances, accounts }: PopulateBalanceParams): AssetByChains[] => {
-    return activeTokens.reduce<AssetByChains[]>((acc, token) => {
+    const tokens: AssetByChains[] = [];
+
+    for (const token of activeTokens) {
       const [chainsWithBalance, totalBalance] = tokensService.getChainWithBalance(balances, token.chains, accounts);
 
-      if (chainsWithBalance.length > 0) {
-        acc.push({ ...token, chains: chainsWithBalance, totalBalance });
-      }
+      if (chainsWithBalance.length === 0) continue;
 
-      return acc;
-    }, []);
+      tokens.push({ ...token, chains: chainsWithBalance, totalBalance });
+    }
+
+    return tokens;
   },
 );
 
@@ -105,22 +108,29 @@ sample({
   },
   fn: ({ connections, chains, tokens, activeWallet }): AssetByChains[] => {
     const isMultisigWallet = walletUtils.isMultisig(activeWallet);
+    const hasAccounts = activeWallet!.accounts.length > 0;
+    const multisigChainToInclude = isMultisigWallet && hasAccounts ? activeWallet.accounts[0].chainId : undefined;
+
+    const activeTokens: AssetByChains[] = [];
 
-    return tokens.reduce<AssetByChains[]>((acc, token) => {
+    for (const token of tokens) {
       const filteredChains = token.chains.filter((c) => {
-        if (!connections[c.chainId]) return false;
-        const isDisabled = networkUtils.isDisabledConnection(connections[c.chainId]);
-        const hasMultiPallet = networkUtils.isMultisigSupported(chains[c.chainId].options);
+        const connection = connections[c.chainId];
 
-        return !isDisabled && (!isMultisigWallet || hasMultiPallet);
+        if (nullable(connection)) return false;
+        if (networkUtils.isDisabledConnection(connection)) return false;
+        if (nullable(chains[c.chainId])) return false;
+        if (!isMultisigWallet) return true;
+
+        return networkUtils.isMultisigSupported(chains[c.chainId].options) || multisigChainToInclude === c.chainId;
       });
 
-      if (filteredChains.length > 0) {
-        acc.push({ ...token, chains: filteredChains });
-      }
+      if (filteredChains.length === 0) continue;
+
+      activeTokens.push({ ...token, chains: filteredChains });
+    }
 
-      return acc;
-    }, []);
+    return activeTokens;
   },
   target: $activeTokens,
 });
@@ -148,7 +158,9 @@ sample({
   clock: [$activeTokensWithBalance, queryChanged],
   source: { activeTokensWithBalance: $activeTokensWithBalance, query: $query },
   fn: ({ activeTokensWithBalance, query }) => {
-    return activeTokensWithBalance.reduce<AssetByChains[]>((acc, token) => {
+    const filteredTokens: AssetByChains[] = [];
+
+    for (const token of activeTokensWithBalance) {
       const filteredChains = token.chains.filter((chain) => {
         const hasSymbol = includes(chain.assetSymbol, query);
         const hasAssetName = includes(token.name, query);
@@ -157,12 +169,12 @@ sample({
         return hasSymbol || hasAssetName || hasChainName;
       });
 
-      if (filteredChains.length > 0) {
-        acc.push({ ...token, chains: filteredChains });
-      }
+      if (filteredChains.length === 0) continue;
+
+      filteredTokens.push({ ...token, chains: filteredChains });
+    }
 
-      return acc;
-    }, []);
+    return filteredTokens;
   },
   target: $filteredTokens,
 });

diff --git a/src/renderer/features/wallets/WalletSelect/lib/wallet-select-utils.ts b/src/renderer/features/wallets/WalletSelect/lib/wallet-select-utils.ts
@@ -2,11 +2,7 @@ import { type Wallet, type WalletFamily, WalletType } from '@/shared/core';
 import { includes } from '@/shared/lib/utils';
 import { walletUtils } from '@/entities/wallet';
 
-export const walletSelectUtils = {
-  getWalletByGroups,
-};
-
-function getWalletByGroups(wallets: Wallet[], query = ''): Record<WalletFamily, Wallet[]> {
+const getWalletByGroups = (wallets: Wallet[], query = ''): Record<WalletFamily, Wallet[]> => {
   const accumulator: Record<WalletFamily, Wallet[]> = {
     [WalletType.POLKADOT_VAULT]: [],
     [WalletType.MULTISIG]: [],
@@ -32,4 +28,13 @@ function getWalletByGroups(wallets: Wallet[], query = ''): Record<WalletFamily,
 
     return acc;
   }, accumulator);
-}
+};
+
+const getFirstWallet = (wallets: Wallet[]) => {
+  return Object.values(getWalletByGroups(wallets)).flat().at(0) ?? null;
+};
+
+export const walletSelectUtils = {
+  getWalletByGroups,
+  getFirstWallet,
+};