Fix: All wallets in Signatory selector (#2712)

* fix: all wallets * chore: rollback util
novasamatech · Nov 22, 2024 · 856db7a · 856db7a
1 parent 278e261
commit 856db7a
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 58 deletions.
diff --git a/src/renderer/features/wallets/WalletSelect/lib/wallet-select-utils.ts b/src/renderer/features/wallets/WalletSelect/lib/wallet-select-utils.ts
@@ -30,7 +30,7 @@ const getWalletByGroups = (wallets: Wallet[], query = ''): Record<WalletFamily,
   }, accumulator);
 };
 
-const getFirstWallet = (wallets: Wallet[]) => {
+const getFirstWallet = (wallets: Wallet[]): Wallet | null => {
   return Object.values(getWalletByGroups(wallets)).flat().at(0) ?? null;
 };
 

diff --git a/src/renderer/shared/ui-kit/Combobox/Combobox.tsx b/src/renderer/shared/ui-kit/Combobox/Combobox.tsx
@@ -146,9 +146,9 @@ const Group = ({ title, children }: PropsWithChildren<GroupProps>) => {
   if (Children.count(children) === 0) return null;
 
   return (
-    <Ariakit.ComboboxGroup>
+    <Ariakit.ComboboxGroup className="mb-1 last:mb-0">
       <Ariakit.ComboboxGroupLabel>
-        <div className="px-3 py-1 text-help-text text-text-secondary">{title}</div>
+        <div className="mb-1 px-3 py-1 text-help-text text-text-secondary">{title}</div>
       </Ariakit.ComboboxGroupLabel>
       {children}
     </Ariakit.ComboboxGroup>

diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/SelectSignatoriesThreshold.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/SelectSignatoriesThreshold.tsx
@@ -5,7 +5,7 @@ import { type FormEvent, useState } from 'react';
 import { useI18n } from '@/shared/i18n';
 import { nonNullable } from '@/shared/lib/utils';
 import { Alert, Button, InputHint, SmallTitleText } from '@/shared/ui';
-import { Box, Select } from '@/shared/ui-kit';
+import { Box, Field, Select } from '@/shared/ui-kit';
 import { walletModel } from '@/entities/wallet';
 import { Step } from '../../lib/types';
 import { flowModel } from '../../model/flow-model';
@@ -113,23 +113,25 @@ export const SelectSignatoriesThreshold = () => {
             <Alert.Item withDot={false}>{t('createMultisigAccount.notEmptySignatoryName')}</Alert.Item>
           </Alert>
         </div>
-        <div className="flex items-center gap-x-4">
+        <div className="flex gap-x-4">
           <Box width="300px">
-            <Select
-              placeholder={t('createMultisigAccount.thresholdPlaceholder')}
-              value={(threshold.value || '').toString()}
-              invalid={threshold.hasError()}
-              disabled={[0, 1].includes(signatories.length)}
-              onChange={(value) => threshold.onChange(Number(value))}
-            >
-              {Array.from({ length: signatories.length - 1 }, (_, index) => (
-                <Select.Item key={index} value={(index + 2).toString()}>
-                  {index + 2}
-                </Select.Item>
-              ))}
-            </Select>
+            <Field text={t('createMultisigAccount.thresholdName')}>
+              <Select
+                placeholder={t('createMultisigAccount.thresholdPlaceholder')}
+                value={(threshold.value || '').toString()}
+                invalid={threshold.hasError()}
+                disabled={[0, 1].includes(signatories.length)}
+                onChange={(value) => threshold.onChange(Number(value))}
+              >
+                {Array.from({ length: signatories.length - 1 }, (_, index) => (
+                  <Select.Item key={index} value={(index + 2).toString()}>
+                    {index + 2}
+                  </Select.Item>
+                ))}
+              </Select>
+            </Field>
           </Box>
-          <InputHint className="flex-1 pt-5" active>
+          <InputHint active className="mt-8.5 flex-1">
             {t('createMultisigAccount.thresholdHint')}
           </InputHint>
         </div>
@@ -176,12 +178,7 @@ export const SelectSignatoriesThreshold = () => {
           </Alert>
         </div>
         <div className="mt-auto flex items-center justify-between">
-          <Button
-            variant="text"
-            onClick={() => {
-              flowModel.events.stepChanged(Step.NAME_NETWORK);
-            }}
-          >
+          <Button variant="text" onClick={() => flowModel.events.stepChanged(Step.NAME_NETWORK)}>
             {t('createMultisigAccount.backButton')}
           </Button>
           <div className="mt-auto flex items-center justify-end">

diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/components/Signatory.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/components/Signatory.tsx
@@ -1,9 +1,10 @@
 import { useUnit } from 'effector-react';
 import { useEffect, useMemo, useState } from 'react';
 
-import { type Account, type Address as AccountAddress, type WalletFamily } from '@/shared/core';
+import { type Account, type Address as AccountAddress, type ID, type WalletFamily } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import {
+  includesMultiple,
   performSearch,
   toAccountId,
   toAddress,
@@ -24,7 +25,7 @@ import { signatoryModel } from '../../../model/signatory-model';
 
 interface Props {
   signatoryName: string;
-  signatoryAddress: string;
+  signatoryAddress: AccountAddress;
   signatoryIndex: number;
   selectedWalletId?: string;
   isOwnAccount?: boolean;
@@ -87,33 +88,29 @@ export const Signatory = ({
   useEffect(() => {
     if (!isOwnAccount || wallets.length === 0 || !chain) return;
 
-    const walletByGroup = walletSelectUtils.getWalletByGroups(wallets, query);
+    const filteredWallets = walletUtils.getWalletsFilteredAccounts(wallets, {
+      walletFn: walletUtils.isValidSignatory,
+      accountFn: (account, wallet) => {
+        const isChainMatch = accountUtils.isChainAndCryptoMatch(account, chain);
+        const isCorrectAccount = accountUtils.isNonBaseVaultAccount(account, wallet);
+        const address = toAddress(account.accountId, { prefix: chain.addressPrefix });
+        const queryPass = includesMultiple([account.name, address], query);
+
+        return isChainMatch && isCorrectAccount && queryPass;
+      },
+    });
 
+    const walletByGroup = walletSelectUtils.getWalletByGroups(filteredWallets || []);
     const options: [WalletFamily, Account[]][] = [];
-    const checkedAddresses: Set<AccountAddress> = new Set();
 
     for (const [walletFamily, walletsGroup] of Object.entries(walletByGroup)) {
       if (walletsGroup.length === 0) continue;
 
       const accountOptions: Account[] = [];
       for (const wallet of walletsGroup) {
-        if (!wallet.accounts.length || !walletUtils.isValidSignatory(wallet)) continue;
-
-        for (const account of wallet.accounts) {
-          if (checkedAddresses.has(account.accountId)) continue;
-
-          const isChainMatch = accountUtils.isChainAndCryptoMatch(account, chain);
-          const isCorrectAccount = accountUtils.isNonBaseVaultAccount(account, wallet);
-
-          if (!isChainMatch || !isCorrectAccount) continue;
-
-          accountOptions.push(account);
-          checkedAddresses.add(account.accountId);
-        }
+        accountOptions.push(...wallet.accounts);
       }
 
-      if (accountOptions.length === 0) continue;
-
       options.push([walletFamily as WalletFamily, accountOptions]);
     }
 
@@ -142,24 +139,20 @@ export const Signatory = ({
     });
   };
 
-  const onAddressChange = (address: AccountAddress) => {
+  const onAddressChange = <T extends string = `${AccountAddress}_${ID}`>(address: T) => {
     if (!chain) return;
 
+    const [accountAddress, walletId] = address.split('_');
     const isEthereumChain = networkUtils.isEthereumBased(chain.options);
     const validateFn = isEthereumChain ? validateEthereumAddress : validateSubstrateAddress;
 
-    if (!validateFn(address)) return;
-
-    const wallet = walletUtils.getWalletFilteredAccounts(wallets, {
-      walletFn: walletUtils.isValidSignatory,
-      accountFn: ({ accountId }) => accountId === toAccountId(address),
-    });
+    if (!validateFn(accountAddress)) return;
 
     signatoryModel.events.changeSignatory({
-      address,
+      address: accountAddress,
       index: signatoryIndex,
       name: signatoryName,
-      walletId: wallet?.id.toString() ?? undefined,
+      walletId: walletId, // will be undefined for contact
     });
   };
 
@@ -193,20 +186,23 @@ export const Signatory = ({
                 <Combobox.Group
                   key={walletType}
                   title={
-                    <div className="flex items-center gap-x-2">
-                      <WalletIcon type={walletType as WalletFamily} />
+                    <div className="flex items-center gap-x-2 py-1">
+                      <WalletIcon type={walletType} />
                       <CaptionText className="font-semibold uppercase text-text-secondary">
-                        {t(GroupLabels[walletType as WalletFamily])}
+                        {t(GroupLabels[walletType])}
                       </CaptionText>
                     </div>
                   }
                 >
                   {accounts.map((account) => {
                     const address = toAddress(account.accountId, { prefix: chain?.addressPrefix });
+                    const itemValue = `${address}_${account.walletId}`;
 
                     return (
-                      <Combobox.Item key={`${account.walletId}-${account.accountId}`} value={address}>
-                        <Address showIcon title={account.name} address={address} />
+                      <Combobox.Item key={itemValue} value={itemValue}>
+                        <div className="pl-7">
+                          <Address showIcon canCopy={false} title={account.name} address={address} />
+                        </div>
                       </Combobox.Item>
                     );
                   })}