Merge pull request #2011 from Chia-Network/paninaro.cherry_pick_8a1c7…

…e36348b41218137a09efbc9896c4b95a1f0
Chia-Network · Aug 18, 2023 · 244a756 · 244a756
2 parents 623bcdb + 31817f6
commit 244a756
Show file tree

Hide file tree

Showing 16 changed files with 280 additions and 87 deletions.
diff --git a/packages/core/src/components/CardListItem/CardListItem.tsx b/packages/core/src/components/CardListItem/CardListItem.tsx
@@ -12,10 +12,11 @@ export type CardListItemProps = {
   disabled?: boolean;
   loading?: boolean;
   noPadding: boolean;
+  borderTransparency?: boolean;
 };
 
 export default function CardListItem(props: CardListItemProps) {
-  const { children, selected, onSelect, loading, disabled, noPadding = false, ...rest } = props;
+  const { children, selected, onSelect, loading, disabled, noPadding = false, borderTransparency, ...rest } = props;
 
   const content = (
     <CardContent sx={{ padding: (theme) => (noPadding ? `0px !important` : `${theme.spacing(2)}`) }}>
@@ -30,7 +31,14 @@ export default function CardListItem(props: CardListItemProps) {
       sx={{
         width: '100%',
         borderRadius: (theme) => `${theme.spacing(1)}`,
-        border: (theme) => `1px solid ${selected ? theme.palette.highlight.main : getColorModeValue(theme, 'border')}`,
+        border: (theme) =>
+          `1px solid ${
+            selected
+              ? theme.palette.highlight.main
+              : borderTransparency
+              ? theme.palette.background.default
+              : getColorModeValue(theme, 'border')
+          }`,
         backgroundColor: (theme) =>
           `${selected ? getColorModeValue(theme, 'sidebarBackground') : theme.palette.background.paper}`,
         position: 'relative',

diff --git a/packages/core/src/hooks/useAddressBook.tsx b/packages/core/src/hooks/useAddressBook.tsx
@@ -8,7 +8,8 @@ export default function useAddressBook(): [
     dids: ContactDID[],
     notes: string,
     nftId: string,
-    domainNames: ContactDomainName[]
+    domainNames: ContactDomainName[],
+    emoji: string
   ) => void, // addContact
   (contactId: number) => void, // removeContact
   (contactId: number) => AddressContact | undefined, // getContactContactId
@@ -19,7 +20,8 @@ export default function useAddressBook(): [
     dids: ContactDID[],
     notes: string,
     nftId: string,
-    domainNames: ContactDomainName[]
+    domainNames: ContactDomainName[],
+    emoji: string
   ) => void, // editContact
   (address: string) => AddressContact | undefined // getContactByAddress
 ] {
@@ -51,7 +53,8 @@ export default function useAddressBook(): [
     dids: ContactDID[],
     notes: string,
     nftId: string,
-    domainNames: ContactDomainName[]
+    domainNames: ContactDomainName[],
+    emoji: string
   ) {
     const contactId = getNewContactId();
     const newAddress: AddressContact = {
@@ -62,6 +65,7 @@ export default function useAddressBook(): [
       notes,
       nftId,
       domainNames,
+      emoji,
     };
 
     updateAddressBook([...addressBook, newAddress]);
@@ -84,7 +88,8 @@ export default function useAddressBook(): [
     dids: ContactDID[],
     notes: string,
     nftId: string,
-    domainNames: ContactDomainName[]
+    domainNames: ContactDomainName[],
+    emoji: string
   ) {
     const filteredContacts = addressBook.filter((contact) => contact.contactId !== contactId);
 
@@ -96,6 +101,7 @@ export default function useAddressBook(): [
       notes,
       nftId,
       domainNames,
+      emoji,
     };
 
     updateAddressBook([...filteredContacts, newAddress]);
@@ -119,6 +125,7 @@ type AddressContact = {
   notes: string;
   nftId: string;
   domainNames: ContactDomainName[];
+  emoji: string;
 };
 
 type ContactAddress = {

diff --git a/packages/core/src/screens/SelectKey/EmojiAndColorPicker.tsx b/packages/core/src/screens/SelectKey/EmojiAndColorPicker.tsx
@@ -21,6 +21,7 @@ type EmojiAndColorPickerType = {
   currentEmoji?: string;
   themeColors: any;
   isDark: boolean;
+  emojiOnly?: boolean;
 };
 
 const colorCircleStyle: any = {
@@ -42,7 +43,15 @@ export function randomEmoji() {
 }
 
 export default function EmojiAndColorPicker(props: EmojiAndColorPickerType) {
-  const { onSelect = () => {}, onClickOutside = () => {}, currentColor, currentEmoji, themeColors, isDark } = props;
+  const {
+    onSelect = () => {},
+    onClickOutside = () => {},
+    currentColor,
+    currentEmoji,
+    themeColors,
+    isDark,
+    emojiOnly,
+  } = props;
   const cmpRef = React.useRef(null);
   const [emojiFilter, setEmojiFilter] = React.useState<string[]>([]);
   const theme: any = useTheme();
@@ -286,7 +295,7 @@ export default function EmojiAndColorPicker(props: EmojiAndColorPickerType) {
 
   return (
     <Box style={pickerStyle} ref={cmpRef}>
-      {renderColorPicker()}
+      {emojiOnly ? null : renderColorPicker()}
       {renderAddRemoveRandom()}
       {renderSearch()}
       {renderEmojis()}

diff --git a/packages/core/src/screens/SelectKey/index.ts b/packages/core/src/screens/SelectKey/index.ts
@@ -1 +1,2 @@
-export { default } from './SelectKey';
+export { default as EmojiAndColorPicker } from './EmojiAndColorPicker';
+export { default as SelectKey } from './SelectKey';
diff --git a/packages/core/src/screens/index.ts b/packages/core/src/screens/index.ts
@@ -1 +1,2 @@
+export { default as EmojiAndColorPicker } from './SelectKey/EmojiAndColorPicker';
 export { default as SelectKey } from './SelectKey/SelectKey';
diff --git a/packages/gui/src/components/addressbook/AddressBookMenuItem.tsx b/packages/gui/src/components/addressbook/AddressBookMenuItem.tsx
@@ -1,5 +1,5 @@
 // import { useGetNFTInfoQuery } from '@chia-network/api-react';
-import { CardListItem } from '@chia-network/core';
+import { CardListItem, Flex } from '@chia-network/core';
 import { t } from '@lingui/macro';
 import React from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
@@ -36,23 +36,23 @@ export default function AddressBookMenuItem({ contact }) {
       key={contact.contactId}
       selected={Number(contact.contactId) === Number(contactId)}
       data-testid={`WalletsSidebar-wallet-${contactId}`}
+      borderTransparency
     >
-      <div
+      <Flex
         style={{
-          display: 'flex',
-          minHeight: '40px',
-          height: '40px',
           paddingBottom: '0px',
         }}
       >
-        <div style={{ flexGrow: 4, flexBasis: '100', paddingLeft: '10px', paddingTop: '8px', overflow: 'hidden' }}>
-          <div>
-            <span style={{ fontWeight: 'bold', fontSize: '1.2rem' }}>
-              {contact.name !== '' ? contact.name : t`Unnamed Contact`}
-            </span>
-          </div>
-        </div>
-      </div>
+        <Flex flexGrow={4} flexBasis={100} style={{ overflow: 'hidden' }}>
+          <span style={{ fontSize: '1.2rem' }}>
+            <Flex direction="row">
+              <Flex>
+                {contact.emoji ? contact.emoji : null} {contact.name !== '' ? contact.name : t`Unnamed Contact`}
+              </Flex>
+            </Flex>
+          </span>
+        </Flex>
+      </Flex>
     </CardListItem>
   );
 }
diff --git a/packages/gui/src/components/addressbook/AddressBookSideBar.tsx b/packages/gui/src/components/addressbook/AddressBookSideBar.tsx
@@ -1,5 +1,6 @@
 import type { AddressContact } from '@chia-network/core';
 import { AddressBookContext, CardListItem, Color, Flex, LayoutDashboardSub, Tooltip } from '@chia-network/core';
+import { MyContacts as MyContactsIcon } from '@chia-network/icons';
 import { t, Trans } from '@lingui/macro';
 import { Add, Search as SearchIcon } from '@mui/icons-material';
 import { Divider, IconButton, InputBase, Typography, useTheme } from '@mui/material';
@@ -131,45 +132,42 @@ export default function AddressBookSideBar() {
             </Tooltip>
           </Flex>
         </Flex>
-        <Flex
-          gap={1}
-          alignItems="center"
-          sx={{
-            borderColor: theme.palette.mode === 'dark' ? Color.Neutral[700] : Color.Neutral[300],
-            backgroundColor: 'background.paper',
-            paddingX: 1,
-            paddingY: 0.5,
-            borderRadius: 1,
-            borderWidth: 1,
-            borderStyle: 'solid',
-          }}
-        >
-          <SearchIcon sx={{ color: theme.palette.mode === 'dark' ? Color.Neutral[400] : Color.Neutral[500] }} />
-          <InputBase onChange={handleFilterChanged} placeholder={t`Search...`} />
-        </Flex>
-        <Flex gap={2} flexDirection="column">
-          <Flex flexDirection="column" gap={1.5}>
-            <CardListItem onSelect={() => handleSelectMyContact()}>
-              <div
-                style={{
-                  display: 'flex',
-                  minHeight: '40px',
-                  height: '40px',
-                  paddingBottom: '0px',
-                }}
-              >
-                <div
-                  style={{ flexGrow: 4, flexBasis: '100', paddingLeft: '10px', paddingTop: '8px', overflow: 'hidden' }}
-                >
-                  <div>
-                    <span style={{ fontWeight: 'bold', fontSize: '1.2rem' }}>My Contact Info</span>
-                  </div>
-                </div>
-              </div>
+        <Flex flexDirection="column" gap={4}>
+          <Flex
+            gap={1}
+            alignItems="center"
+            sx={{
+              borderColor: theme.palette.mode === 'dark' ? Color.Neutral[700] : Color.Neutral[300],
+              backgroundColor: 'background.paper',
+              paddingX: 1,
+              paddingY: 0.5,
+              borderRadius: 1,
+              borderWidth: 1,
+              borderStyle: 'solid',
+            }}
+          >
+            <SearchIcon sx={{ color: theme.palette.mode === 'dark' ? Color.Neutral[400] : Color.Neutral[500] }} />
+            <InputBase onChange={handleFilterChanged} placeholder={t`Search...`} />
+          </Flex>
+          <Flex>
+            <CardListItem onSelect={() => handleSelectMyContact()} borderTransparency="true">
+              <Flex flexDirection="row" gap={1} alignItems="center" height="22px">
+                <Flex>
+                  <MyContactsIcon color="info" />
+                </Flex>
+                <Flex>
+                  <span style={{ fontSize: '1.2rem' }}>
+                    <Trans>My Contact Info</Trans>
+                  </span>
+                </Flex>
+              </Flex>
             </CardListItem>
           </Flex>
-          <Divider />
-          <Flex flexDirection="column" gap={1.5}>
+        </Flex>
+
+        <Flex gap={1} flexDirection="column">
+          <Divider color={Color.Neutral[100]} />
+          <Flex flexDirection="column" gap={1}>
             {listOfContacts()}
           </Flex>
         </Flex>

diff --git a/packages/gui/src/components/addressbook/ContactAdd.tsx b/packages/gui/src/components/addressbook/ContactAdd.tsx
@@ -1,9 +1,10 @@
 import { fromBech32m } from '@chia-network/api';
-import { AddressBookContext, Form, TextField, TooltipIcon, Flex } from '@chia-network/core';
+import { AddressBookContext, Color, EmojiAndColorPicker, Form, TextField, TooltipIcon, Flex } from '@chia-network/core';
 import { Trans } from '@lingui/macro';
 import { Add, Remove } from '@mui/icons-material';
 import { Button, IconButton, Typography, Box } from '@mui/material';
-import React, { useContext } from 'react';
+import { useTheme } from '@mui/material/styles';
+import React, { useContext, useState } from 'react';
 import { useForm, useFormContext, useFieldArray } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
@@ -182,9 +183,14 @@ function DomainFields() {
 }
 
 export default function ContactAdd() {
-  const [, addContact] = useContext(AddressBookContext);
+  const [addressBook, addContact] = useContext(AddressBookContext);
   const navigate = useNavigate();
 
+  const theme: any = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+  const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
+  const [chosenEmoji, setChosenEmoji] = useState(``);
+
   const methods = useForm<ContactAddData>({
     defaultValues: {
       name: '',
@@ -226,6 +232,13 @@ export default function ContactAdd() {
       } catch (err) {
         throw new Error(`${entry.address} is not a valid address`);
       }
+      addressBook.forEach((contact) => {
+        contact.addresses.forEach((contactAddress) => {
+          if (contactAddress.address === entry.address) {
+            throw new Error(`The address ${entry.address} is already assigned to an existing contact: ${contact.name}`);
+          }
+        });
+      });
     });
     filteredProfiles.forEach((entry) => {
       try {
@@ -237,8 +250,15 @@ export default function ContactAdd() {
       } catch (err) {
         throw new Error(`${entry.did} is not a valid DID`);
       }
+      addressBook.forEach((contact) => {
+        contact.dids.forEach((contactDID) => {
+          if (contactDID.did === entry.did) {
+            throw new Error(`The profile ${entry.did} is already assigned to an existing contact: ${contact.name}`);
+          }
+        });
+      });
     });
-    addContact(data.name, filteredAddresses, filteredProfiles, data.notes, data.nftId, filteredDomains);
+    addContact(data.name, filteredAddresses, filteredProfiles, data.notes, data.nftId, filteredDomains, chosenEmoji);
     navigate(`/dashboard/addressbook/`);
   }
 
@@ -268,6 +288,56 @@ export default function ContactAdd() {
           </Flex>
         </Flex>
         <Flex flexDirection="column" gap={6} style={{ width: '100%', paddingTop: '38px' }}>
+          <Flex gap={2} flexDirection="column">
+            <Typography variant="h6">
+              <Trans>Emoji</Trans>
+            </Typography>
+            <Flex minWidth={0} alignItems="baseline">
+              <span
+                style={{ display: showEmojiPicker ? 'inline' : 'none', position: 'fixed', zIndex: 10 }}
+                onClick={() => {}}
+              >
+                {showEmojiPicker && (
+                  <EmojiAndColorPicker
+                    onSelect={(result: any) => {
+                      setChosenEmoji(result);
+                      setShowEmojiPicker(false);
+                    }}
+                    onClickOutside={() => {
+                      setShowEmojiPicker(false);
+                    }}
+                    currentEmoji={chosenEmoji}
+                    themeColors={theme.palette.colors}
+                    isDark={isDark}
+                    emojiOnly
+                  />
+                )}
+              </span>
+              <Flex flexDirection="row" minWidth={0}>
+                <Box
+                  sx={{
+                    backgroundColor: 'none',
+                    fontSize: '26px',
+                    marginRight: '10px',
+                    width: '40px',
+                    height: '40px',
+                    lineHeight: '42px',
+                    textAlign: 'center',
+                    borderRadius: '5px',
+                    border: 1,
+                    borderColor: isDark ? Color.Neutral[400] : Color.Neutral[300],
+                    ':hover': {
+                      cursor: 'pointer',
+                      backgroundColor: isDark ? Color.Neutral[400] : Color.Neutral[300],
+                    },
+                  }}
+                  onClick={() => setShowEmojiPicker(true)}
+                >
+                  {chosenEmoji}
+                </Box>
+              </Flex>
+            </Flex>
+          </Flex>
           <Flex gap={2} flexDirection="column">
             <Typography variant="h6">
               <Trans>Contact Name</Trans>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as EmojiAndColorPicker } from './SelectKey/EmojiAndColorPicker';
		export { default as SelectKey } from './SelectKey/SelectKey';