Skip to content

Commit 3a22d8a

Browse files
ost-ptkost-ptk
authored
update recipient search functionality (#1066)
1 parent a4d29d4 commit 3a22d8a

File tree

6 files changed

+167
-89
lines changed

6 files changed

+167
-89
lines changed

‎src/background/redux/contacts/types.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,3 @@ export type ContactsState = {
1212
export interface EditContactActionType extends Contact {
1313
oldName: string;
1414
}
15-
16-
export interface ContactWithId extends Contact {
17-
id: string;
18-
}

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

Lines changed: 48 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { IAccountInfo } from 'casper-wallet-core/src/domain/accountInfo';
2+
import { Maybe } from 'casper-wallet-core/src/typings/common';
23
import React, { useEffect, useState } from 'react';
34
import { useSelector } from 'react-redux';
45
import styled from 'styled-components';
56

67
import { selectAllContacts } from '@background/redux/contacts/selectors';
7-
import { ContactWithId } from '@background/redux/contacts/types';
8+
import { Contact } from '@background/redux/contacts/types';
89
import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
910

1011
import { getAccountHashFromPublicKey } from '@libs/entities/Account';
@@ -14,6 +15,13 @@ import { List, RecipientPlate, Tile, Typography } from '@libs/ui/components';
1415
interface ContactsListProps {
1516
handleSelectRecipient: (publicKey: string, name: string) => void;
1617
accountsInfo: Record<string, IAccountInfo> | undefined;
18+
inputValue: string;
19+
}
20+
21+
interface ContactsListState extends Contact {
22+
id: string;
23+
csprName: Maybe<string> | undefined;
24+
brandingLogo: Maybe<string> | undefined;
1725
}
1826

1927
const Container = styled.div`
@@ -22,23 +30,43 @@ const Container = styled.div`
2230

2331
export const ContactsList = ({
2432
handleSelectRecipient,
25-
accountsInfo
33+
accountsInfo,
34+
inputValue
2635
}: ContactsListProps) => {
27-
const [contactsWithId, setContactsWithId] = useState<ContactWithId[]>([]);
36+
const [contactsWithId, setContactsWithId] = useState<ContactsListState[]>([]);
2837

2938
const contacts = useSelector(selectAllContacts);
3039
const activeAccount = useSelector(selectVaultActiveAccount);
3140

3241
useEffect(() => {
3342
const contactsWithId = contacts
34-
.map(contact => ({
35-
...contact,
36-
id: contact.name
37-
}))
38-
.filter(account => account.publicKey !== activeAccount?.publicKey);
43+
.map(contact => {
44+
const accountHash = getAccountHashFromPublicKey(contact.publicKey);
45+
46+
const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
47+
const brandingLogo =
48+
accountsInfo && accountsInfo[accountHash]?.brandingLogo;
49+
50+
return {
51+
...contact,
52+
id: contact.name,
53+
csprName,
54+
brandingLogo
55+
};
56+
})
57+
.filter(account => account.publicKey !== activeAccount?.publicKey)
58+
.filter(
59+
account =>
60+
account?.name
61+
.toLowerCase()
62+
.includes(inputValue?.toLowerCase() || '') ||
63+
account?.csprName
64+
?.toLowerCase()
65+
.includes(inputValue?.toLowerCase() || '')
66+
);
3967

4068
setContactsWithId(contactsWithId);
41-
}, [contacts, activeAccount]);
69+
}, [contacts, activeAccount, inputValue, accountsInfo]);
4270

4371
if (contactsWithId.length === 0) {
4472
return (
@@ -56,25 +84,17 @@ export const ContactsList = ({
5684
<List
5785
contentTop={SpacingSize.None}
5886
rows={contactsWithId}
59-
renderRow={contact => {
60-
const accountHash = getAccountHashFromPublicKey(contact.publicKey);
61-
62-
const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
63-
const brandingLogo =
64-
accountsInfo && accountsInfo[accountHash]?.brandingLogo;
65-
66-
return (
67-
<RecipientPlate
68-
publicKey={contact.publicKey}
69-
name={contact.name}
70-
handleClick={() => {
71-
handleSelectRecipient(contact.publicKey, contact.name);
72-
}}
73-
csprName={csprName}
74-
brandingLogo={brandingLogo}
75-
/>
76-
);
77-
}}
87+
renderRow={contact => (
88+
<RecipientPlate
89+
publicKey={contact.publicKey}
90+
name={contact.name}
91+
handleClick={() => {
92+
handleSelectRecipient(contact.publicKey, contact.name);
93+
}}
94+
csprName={contact.csprName}
95+
brandingLogo={contact.brandingLogo}
96+
/>
97+
)}
7898
marginLeftForItemSeparatorLine={56}
7999
/>
80100
);

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

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { IAccountInfo } from 'casper-wallet-core/src/domain/accountInfo';
2+
import { Maybe } from 'casper-wallet-core/src/typings/common';
23
import React, { useEffect, useState } from 'react';
34
import { useSelector } from 'react-redux';
5+
import styled from 'styled-components';
46

57
import {
68
selectVaultAccountsWithBalances,
@@ -10,32 +12,76 @@ import {
1012
import { getAccountHashFromPublicKey } from '@libs/entities/Account';
1113
import { SpacingSize } from '@libs/layout';
1214
import { AccountListRows } from '@libs/types/account';
13-
import { List, RecipientPlate } from '@libs/ui/components';
15+
import { List, RecipientPlate, Tile, Typography } from '@libs/ui/components';
16+
17+
const Container = styled.div`
18+
padding: 16px;
19+
`;
1420

1521
interface MyAccountsListProps {
1622
handleSelectRecipient: (publicKey: string, name: string) => void;
1723
accountsInfo: Record<string, IAccountInfo> | undefined;
24+
inputValue: string;
25+
}
26+
27+
interface AccountListState extends AccountListRows {
28+
csprName: Maybe<string> | undefined;
29+
brandingLogo: Maybe<string> | undefined;
1830
}
1931

2032
export const MyAccountsList = ({
2133
handleSelectRecipient,
22-
accountsInfo
34+
accountsInfo,
35+
inputValue
2336
}: MyAccountsListProps) => {
24-
const [accountsWithIds, setAccountsWithIds] = useState<AccountListRows[]>([]);
37+
const [accountsWithIds, setAccountsWithIds] = useState<AccountListState[]>(
38+
[]
39+
);
2540

2641
const accounts = useSelector(selectVaultAccountsWithBalances);
2742
const activeAccount = useSelector(selectVaultActiveAccount);
2843

2944
useEffect(() => {
3045
const accountsWithIds = accounts
31-
.map(account => ({
32-
...account,
33-
id: account.name
34-
}))
35-
.filter(account => account.publicKey !== activeAccount?.publicKey);
46+
.map(account => {
47+
const accountHash = getAccountHashFromPublicKey(account.publicKey);
48+
49+
const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
50+
const brandingLogo =
51+
accountsInfo && accountsInfo[accountHash]?.brandingLogo;
52+
53+
return {
54+
...account,
55+
id: account.name,
56+
csprName,
57+
brandingLogo
58+
};
59+
})
60+
.filter(account => account.publicKey !== activeAccount?.publicKey)
61+
.filter(
62+
account =>
63+
account?.name
64+
.toLowerCase()
65+
.includes(inputValue?.toLowerCase() || '') ||
66+
account?.csprName
67+
?.toLowerCase()
68+
.includes(inputValue?.toLowerCase() || '')
69+
);
3670

3771
setAccountsWithIds(accountsWithIds);
38-
}, [accounts, setAccountsWithIds, activeAccount]);
72+
}, [accounts, setAccountsWithIds, activeAccount, accountsInfo, inputValue]);
73+
74+
if (accountsWithIds.length === 0) {
75+
return (
76+
<Tile>
77+
<Container>
78+
<Typography type="body" color="contentPrimary" textAlign="center">
79+
No accounts found
80+
</Typography>
81+
</Container>
82+
</Tile>
83+
);
84+
}
3985

4086
return (
4187
<List

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

Lines changed: 49 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { IAccountInfo } from 'casper-wallet-core/src/domain/accountInfo';
2+
import { Maybe } from 'casper-wallet-core/src/typings/common';
23
import React, { useEffect, useState } from 'react';
34
import { useSelector } from 'react-redux';
45
import styled from 'styled-components';
@@ -14,12 +15,15 @@ import { List, RecipientPlate, Tile, Typography } from '@libs/ui/components';
1415
interface RecentListProps {
1516
handleSelectRecipient: (publicKey: string, name: string) => void;
1617
accountsInfo: Record<string, IAccountInfo> | undefined;
18+
inputValue: string;
1719
}
1820

1921
interface RecentListState {
2022
publicKey: string;
2123
id: string;
2224
name: string;
25+
brandingLogo: Maybe<string> | undefined;
26+
csprName: Maybe<string> | undefined;
2327
}
2428

2529
const Container = styled.div`
@@ -28,7 +32,8 @@ const Container = styled.div`
2832

2933
export const RecentList = ({
3034
handleSelectRecipient,
31-
accountsInfo
35+
accountsInfo,
36+
inputValue
3237
}: RecentListProps) => {
3338
const [accountsWithIds, setAccountsWithIds] = useState<RecentListState[]>([]);
3439

@@ -44,23 +49,50 @@ export const RecentList = ({
4449
const contact = contacts.find(
4550
contact => contact.publicKey === publicKey
4651
);
52+
const accountHash = getAccountHashFromPublicKey(publicKey);
53+
54+
const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
55+
const brandingLogo =
56+
accountsInfo && accountsInfo[accountHash]?.brandingLogo;
57+
const name = accountsInfo && accountsInfo[accountHash]?.name;
58+
4759
if (contact) {
4860
return {
4961
name: contact.name,
5062
publicKey: publicKey,
51-
id: publicKey
63+
id: publicKey,
64+
csprName,
65+
brandingLogo
5266
};
5367
}
5468
return {
55-
name: '',
69+
name: name || '',
5670
publicKey: publicKey,
57-
id: publicKey
71+
id: publicKey,
72+
csprName,
73+
brandingLogo
5874
};
5975
})
60-
.filter(account => account.publicKey !== activeAccount?.publicKey);
76+
.filter(account => account.publicKey !== activeAccount?.publicKey)
77+
.filter(
78+
account =>
79+
account?.name
80+
.toLowerCase()
81+
.includes(inputValue?.toLowerCase() || '') ||
82+
account?.csprName
83+
?.toLowerCase()
84+
.includes(inputValue?.toLowerCase() || '')
85+
);
6186

6287
setAccountsWithIds(recentRecipient);
63-
}, [contacts, recentRecipientPublicKeys, setAccountsWithIds, activeAccount]);
88+
}, [
89+
contacts,
90+
recentRecipientPublicKeys,
91+
setAccountsWithIds,
92+
activeAccount,
93+
accountsInfo,
94+
inputValue
95+
]);
6496

6597
if (!accountsWithIds.length) {
6698
return (
@@ -78,25 +110,17 @@ export const RecentList = ({
78110
<List
79111
contentTop={SpacingSize.None}
80112
rows={accountsWithIds}
81-
renderRow={recent => {
82-
const accountHash = getAccountHashFromPublicKey(recent.publicKey);
83-
84-
const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
85-
const brandingLogo =
86-
accountsInfo && accountsInfo[accountHash]?.brandingLogo;
87-
88-
return (
89-
<RecipientPlate
90-
publicKey={recent.publicKey}
91-
name={recent.name}
92-
handleClick={() => {
93-
handleSelectRecipient(recent.publicKey, recent.name);
94-
}}
95-
csprName={csprName}
96-
brandingLogo={brandingLogo}
97-
/>
98-
);
99-
}}
113+
renderRow={recent => (
114+
<RecipientPlate
115+
publicKey={recent.publicKey}
116+
name={recent.name}
117+
handleClick={() => {
118+
handleSelectRecipient(recent.publicKey, recent.name);
119+
}}
120+
csprName={recent.csprName}
121+
brandingLogo={recent.brandingLogo}
122+
/>
123+
)}
100124
marginLeftForItemSeparatorLine={56}
101125
/>
102126
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const SearchItemByCsprName = ({
4444
<Tile>
4545
<EmptyResultContainer>
4646
<Typography type="body" color="contentPrimary" textAlign="center">
47-
No cspr name found
47+
There is no account using this CSPR.name
4848
</Typography>
4949
</EmptyResultContainer>
5050
</Tile>

0 commit comments

Comments
 (0)