feature: improving recipient search functionality

src/background/redux/contacts/types.ts

@@ -12,7 +12,3 @@ export type ContactsState = {
 export interface EditContactActionType extends Contact {
   oldName: string;
 }
-
-export interface ContactWithId extends Contact {
-  id: string;
-}

src/libs/ui/components/recipient-tabs/components/contacts-list.tsx

@@ -1,10 +1,11 @@
 import { IAccountInfo } from 'casper-wallet-core/src/domain/accountInfo';
+import { Maybe } from 'casper-wallet-core/src/typings/common';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { selectAllContacts } from '@background/redux/contacts/selectors';
-import { ContactWithId } from '@background/redux/contacts/types';
+import { Contact } from '@background/redux/contacts/types';
 import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
 
 import { getAccountHashFromPublicKey } from '@libs/entities/Account';
@@ -14,6 +15,13 @@ import { List, RecipientPlate, Tile, Typography } from '@libs/ui/components';
 interface ContactsListProps {
   handleSelectRecipient: (publicKey: string, name: string) => void;
   accountsInfo: Record<string, IAccountInfo> | undefined;
+  inputValue: string;
+}
+
+interface ContactsListState extends Contact {
+  id: string;
+  csprName: Maybe<string> | undefined;
+  brandingLogo: Maybe<string> | undefined;
 }
 
 const Container = styled.div`
@@ -22,23 +30,43 @@ const Container = styled.div`
 
 export const ContactsList = ({
   handleSelectRecipient,
-  accountsInfo
+  accountsInfo,
+  inputValue
 }: ContactsListProps) => {
-  const [contactsWithId, setContactsWithId] = useState<ContactWithId[]>([]);
+  const [contactsWithId, setContactsWithId] = useState<ContactsListState[]>([]);
 
   const contacts = useSelector(selectAllContacts);
   const activeAccount = useSelector(selectVaultActiveAccount);
 
   useEffect(() => {
     const contactsWithId = contacts
-      .map(contact => ({
-        ...contact,
-        id: contact.name
-      }))
-      .filter(account => account.publicKey !== activeAccount?.publicKey);
+      .map(contact => {
+        const accountHash = getAccountHashFromPublicKey(contact.publicKey);
+
+        const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
+        const brandingLogo =
+          accountsInfo && accountsInfo[accountHash]?.brandingLogo;
+
+        return {
+          ...contact,
+          id: contact.name,
+          csprName,
+          brandingLogo
+        };
+      })
+      .filter(account => account.publicKey !== activeAccount?.publicKey)
+      .filter(
+        account =>
+          account?.name
+            .toLowerCase()
+            .includes(inputValue?.toLowerCase() || '') ||
+          account?.csprName
+            ?.toLowerCase()
+            .includes(inputValue?.toLowerCase() || '')
+      );
 
     setContactsWithId(contactsWithId);
-  }, [contacts, activeAccount]);
+  }, [contacts, activeAccount, inputValue, accountsInfo]);
 
   if (contactsWithId.length === 0) {
     return (
@@ -56,25 +84,17 @@ export const ContactsList = ({
     <List
       contentTop={SpacingSize.None}
       rows={contactsWithId}
-      renderRow={contact => {
-        const accountHash = getAccountHashFromPublicKey(contact.publicKey);
-
-        const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
-        const brandingLogo =
-          accountsInfo && accountsInfo[accountHash]?.brandingLogo;
-
-        return (
-          <RecipientPlate
-            publicKey={contact.publicKey}
-            name={contact.name}
-            handleClick={() => {
-              handleSelectRecipient(contact.publicKey, contact.name);
-            }}
-            csprName={csprName}
-            brandingLogo={brandingLogo}
-          />
-        );
-      }}
+      renderRow={contact => (
+        <RecipientPlate
+          publicKey={contact.publicKey}
+          name={contact.name}
+          handleClick={() => {
+            handleSelectRecipient(contact.publicKey, contact.name);
+          }}
+          csprName={contact.csprName}
+          brandingLogo={contact.brandingLogo}
+        />
+      )}
       marginLeftForItemSeparatorLine={56}
     />
   );

src/libs/ui/components/recipient-tabs/components/my-accounts-list.tsx

@@ -1,6 +1,8 @@
 import { IAccountInfo } from 'casper-wallet-core/src/domain/accountInfo';
+import { Maybe } from 'casper-wallet-core/src/typings/common';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
 
 import {
   selectVaultAccountsWithBalances,
@@ -10,32 +12,76 @@ import {
 import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import { SpacingSize } from '@libs/layout';
 import { AccountListRows } from '@libs/types/account';
-import { List, RecipientPlate } from '@libs/ui/components';
+import { List, RecipientPlate, Tile, Typography } from '@libs/ui/components';
+
+const Container = styled.div`
+  padding: 16px;
+`;
 
 interface MyAccountsListProps {
   handleSelectRecipient: (publicKey: string, name: string) => void;
   accountsInfo: Record<string, IAccountInfo> | undefined;
+  inputValue: string;
+}
+
+interface AccountListState extends AccountListRows {
+  csprName: Maybe<string> | undefined;
+  brandingLogo: Maybe<string> | undefined;
 }
 
 export const MyAccountsList = ({
   handleSelectRecipient,
-  accountsInfo
+  accountsInfo,
+  inputValue
 }: MyAccountsListProps) => {
-  const [accountsWithIds, setAccountsWithIds] = useState<AccountListRows[]>([]);
+  const [accountsWithIds, setAccountsWithIds] = useState<AccountListState[]>(
+    []
+  );
 
   const accounts = useSelector(selectVaultAccountsWithBalances);
   const activeAccount = useSelector(selectVaultActiveAccount);
 
   useEffect(() => {
     const accountsWithIds = accounts
-      .map(account => ({
-        ...account,
-        id: account.name
-      }))
-      .filter(account => account.publicKey !== activeAccount?.publicKey);
+      .map(account => {
+        const accountHash = getAccountHashFromPublicKey(account.publicKey);
+
+        const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
+        const brandingLogo =
+          accountsInfo && accountsInfo[accountHash]?.brandingLogo;
+
+        return {
+          ...account,
+          id: account.name,
+          csprName,
+          brandingLogo
+        };
+      })
+      .filter(account => account.publicKey !== activeAccount?.publicKey)
+      .filter(
+        account =>
+          account?.name
+            .toLowerCase()
+            .includes(inputValue?.toLowerCase() || '') ||
+          account?.csprName
+            ?.toLowerCase()
+            .includes(inputValue?.toLowerCase() || '')
+      );
 
     setAccountsWithIds(accountsWithIds);
-  }, [accounts, setAccountsWithIds, activeAccount]);
+  }, [accounts, setAccountsWithIds, activeAccount, accountsInfo, inputValue]);
+
+  if (accountsWithIds.length === 0) {
+    return (
+      <Tile>
+        <Container>
+          <Typography type="body" color="contentPrimary" textAlign="center">
+            No accounts found
+          </Typography>
+        </Container>
+      </Tile>
+    );
+  }
 
   return (
     <List

src/libs/ui/components/recipient-tabs/components/recent-list.tsx

@@ -1,4 +1,5 @@
 import { IAccountInfo } from 'casper-wallet-core/src/domain/accountInfo';
+import { Maybe } from 'casper-wallet-core/src/typings/common';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
@@ -14,12 +15,15 @@ import { List, RecipientPlate, Tile, Typography } from '@libs/ui/components';
 interface RecentListProps {
   handleSelectRecipient: (publicKey: string, name: string) => void;
   accountsInfo: Record<string, IAccountInfo> | undefined;
+  inputValue: string;
 }
 
 interface RecentListState {
   publicKey: string;
   id: string;
   name: string;
+  brandingLogo: Maybe<string> | undefined;
+  csprName: Maybe<string> | undefined;
 }
 
 const Container = styled.div`
@@ -28,7 +32,8 @@ const Container = styled.div`
 
 export const RecentList = ({
   handleSelectRecipient,
-  accountsInfo
+  accountsInfo,
+  inputValue
 }: RecentListProps) => {
   const [accountsWithIds, setAccountsWithIds] = useState<RecentListState[]>([]);
 
@@ -44,23 +49,50 @@ export const RecentList = ({
         const contact = contacts.find(
           contact => contact.publicKey === publicKey
         );
+        const accountHash = getAccountHashFromPublicKey(publicKey);
+
+        const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
+        const brandingLogo =
+          accountsInfo && accountsInfo[accountHash]?.brandingLogo;
+        const name = accountsInfo && accountsInfo[accountHash]?.name;
+
         if (contact) {
           return {
             name: contact.name,
             publicKey: publicKey,
-            id: publicKey
+            id: publicKey,
+            csprName,
+            brandingLogo
           };
         }
         return {
-          name: '',
+          name: name || '',
           publicKey: publicKey,
-          id: publicKey
+          id: publicKey,
+          csprName,
+          brandingLogo
         };
       })
-      .filter(account => account.publicKey !== activeAccount?.publicKey);
+      .filter(account => account.publicKey !== activeAccount?.publicKey)
+      .filter(
+        account =>
+          account?.name
+            .toLowerCase()
+            .includes(inputValue?.toLowerCase() || '') ||
+          account?.csprName
+            ?.toLowerCase()
+            .includes(inputValue?.toLowerCase() || '')
+      );
 
     setAccountsWithIds(recentRecipient);
-  }, [contacts, recentRecipientPublicKeys, setAccountsWithIds, activeAccount]);
+  }, [
+    contacts,
+    recentRecipientPublicKeys,
+    setAccountsWithIds,
+    activeAccount,
+    accountsInfo,
+    inputValue
+  ]);
 
   if (!accountsWithIds.length) {
     return (
@@ -78,25 +110,17 @@ export const RecentList = ({
     <List
       contentTop={SpacingSize.None}
       rows={accountsWithIds}
-      renderRow={recent => {
-        const accountHash = getAccountHashFromPublicKey(recent.publicKey);
-
-        const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
-        const brandingLogo =
-          accountsInfo && accountsInfo[accountHash]?.brandingLogo;
-
-        return (
-          <RecipientPlate
-            publicKey={recent.publicKey}
-            name={recent.name}
-            handleClick={() => {
-              handleSelectRecipient(recent.publicKey, recent.name);
-            }}
-            csprName={csprName}
-            brandingLogo={brandingLogo}
-          />
-        );
-      }}
+      renderRow={recent => (
+        <RecipientPlate
+          publicKey={recent.publicKey}
+          name={recent.name}
+          handleClick={() => {
+            handleSelectRecipient(recent.publicKey, recent.name);
+          }}
+          csprName={recent.csprName}
+          brandingLogo={recent.brandingLogo}
+        />
+      )}
       marginLeftForItemSeparatorLine={56}
     />
   );

src/libs/ui/components/recipient-tabs/components/search-item-by-cspr-name.tsx

@@ -44,7 +44,7 @@ export const SearchItemByCsprName = ({
         <Tile>
           <EmptyResultContainer>
             <Typography type="body" color="contentPrimary" textAlign="center">
-              No cspr name found
+              There is no account using this CSPR.name
             </Typography>
           </EmptyResultContainer>
         </Tile>