Release: 0.6.1.2 (#662)

* Reafactor/split import mnemonic (#658) * Base draft for refactor using split input boxes with password type * Refactored first step of import flow, movede components from generic spot to screen specific components folder. Removed unnecessary components * Added base grid for new layout * Finished layout on import mnemonic step. missing next step hook fix and error management * Fixed meme step styles, moved account creation to import mnemonic step * Added autofocus & cursor at hide button * Abstracted mnemonic input into its own component * Added draft message box for mnemonic paste * Removed unused gradient * Formatted paste message to new design * Moved mnemonic utils to its corresponding file * Fixed paste message Co-authored-by: rocky-fleek <[email protected]> Co-authored-by: Juan Manuel <[email protected]> * Added error caching for file reader * Fixed error message * Reafactor/split import mnemonic (#663) * Base draft for refactor using split input boxes with password type * Refactored first step of import flow, movede components from generic spot to screen specific components folder. Removed unnecessary components * Added base grid for new layout * Finished layout on import mnemonic step. missing next step hook fix and error management * Fixed meme step styles, moved account creation to import mnemonic step * Added autofocus & cursor at hide button * Abstracted mnemonic input into its own component * Added draft message box for mnemonic paste * Removed unused gradient * Formatted paste message to new design * Moved mnemonic utils to its corresponding file * Fixed paste message * MOodified test cases to fit the new flow * Added clear data on component unmount Co-authored-by: Juan Manuel <[email protected]> * Fixed create seed styles, correctly abstracted reveal seedphrase * Added proper margins and structuring. Fixed tooltip * Fixed styles in reveal seed screen * Removed console log * Hide icns metadata for noq (#665) Co-authored-by: rocky-fleek <[email protected]> * Fixed manage button behavior * Added error message and disabled button if contact is already present * Fixed issue where contact was not being found in idinput * Removed css causing whitescreen in firefox seedphrase box Co-authored-by: tomiir <[email protected]> Co-authored-by: rocky-fleek <[email protected]> Co-authored-by: Tomás Rocchi <[email protected]>
Psychedelic · Nov 7, 2022 · decb84a · decb84a
1 parent e4eecf8
commit decb84a
Show file tree

Hide file tree

Showing 51 changed files with 958 additions and 540 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plug",
-  "version": "0.6.1.1",
+  "version": "0.6.1.2",
   "description": "Your plug into the Internet Computer",
   "private": true,
   "repository": "https://github.com/Psychedelic/plug",

diff --git a/source/components/Alert/index.jsx b/source/components/Alert/index.jsx
@@ -11,6 +11,7 @@ const Alert = ({
   startIcon,
   endIcon,
   url,
+  className,
 }) => {
   const classes = useStyles();
 
@@ -32,7 +33,7 @@ const Alert = ({
   };
 
   return (
-    <div className={clsx(classes.root, classes[type])}>
+    <div className={clsx(classes.root, classes[type], className)}>
       {startIcon && icon(type)}
       {
         subtitle
@@ -56,6 +57,7 @@ Alert.defaultProps = {
   endIcon: false,
   url: null,
   subtitle: null,
+  className: '',
 };
 
 Alert.propTypes = {
@@ -65,4 +67,5 @@ Alert.propTypes = {
   startIcon: PropTypes.bool,
   endIcon: PropTypes.bool,
   url: PropTypes.string,
+  className: PropTypes.string,
 };
diff --git a/source/components/Button/index.jsx b/source/components/Button/index.jsx
@@ -27,13 +27,22 @@ const VARIANTS = {
 };
 
 const Button = ({
-  value, onClick, variant, loading, disabled, fullWidth, wrapperStyle, buttonTestId, ...other
+  value,
+  onClick,
+  variant,
+  loading,
+  disabled,
+  fullWidth,
+  wrapperStyle,
+  buttonTestId,
+  className,
+  ...other
 }) => {
   const classes = useStyles();
 
   return (
     <div
-      className={clsx(classes.wrapper, fullWidth && classes.fullWidth)}
+      className={clsx(classes.wrapper, fullWidth && classes.fullWidth, className)}
       style={{ ...wrapperStyle }}
     >
       <MuiButton
@@ -63,6 +72,7 @@ Button.defaultProps = {
   fullWidth: false,
   wrapperStyle: null,
   buttonTestId: 'button',
+  className: '',
 };
 
 Button.propTypes = {
@@ -74,4 +84,5 @@ Button.propTypes = {
   fullWidth: PropTypes.bool,
   wrapperStyle: PropTypes.objectOf(PropTypes.string),
   buttonTestId: PropTypes.string,
+  className: PropTypes.string,
 };
diff --git a/source/components/FormInput/index.jsx b/source/components/FormInput/index.jsx
@@ -6,11 +6,13 @@ import PropTypes from 'prop-types';
 import TextInput from '../TextInput';
 import useStyles from './styles';
 
-const FormInput = forwardRef(({ id, label, ...props }, ref) => {
+const FormInput = forwardRef(({
+  id, label, fullWidth, containerClassName, ...props
+}, ref) => {
   const classes = useStyles();
 
   return (
-    <FormControl fullWidth>
+    <FormControl fullWidth={fullWidth} className={containerClassName}>
       <InputLabel shrink htmlFor={id} className={classes.formLabel}>
         <Typography variant="h6">{label}</Typography>
       </InputLabel>
@@ -19,13 +21,20 @@ const FormInput = forwardRef(({ id, label, ...props }, ref) => {
   );
 });
 
-export default FormInput;
-
 FormInput.propTypes = {
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   error: PropTypes.bool.isRequired,
+  fullWidth: PropTypes.bool,
+  containerClassName: PropTypes.string,
+};
+
+FormInput.defaultProps = {
+  fullWidth: true,
+  containerClassName: '',
 };
+
+export default FormInput;
diff --git a/source/components/FormItem/index.jsx b/source/components/FormItem/index.jsx
@@ -5,12 +5,12 @@ import clsx from 'clsx';
 import useStyles from './styles';
 
 const FormItem = ({
-  label, component, subtitle, smallLabel, endIcon, ...other
+  label, component, subtitle, smallLabel, endIcon, className, ...other
 }) => {
   const classes = useStyles();
 
   return (
-    <div className={classes.root} {...other}>
+    <div className={clsx(classes.root, className)} {...other}>
 
       <div className={classes.titleContainer}>
         <Typography
@@ -47,6 +47,7 @@ FormItem.defaultProps = {
   subtitle: null,
   smallLabel: false,
   endIcon: null,
+  className: '',
 };
 
 FormItem.propTypes = {
@@ -55,4 +56,5 @@ FormItem.propTypes = {
   subtitle: PropTypes.node,
   smallLabel: PropTypes.bool,
   endIcon: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/source/components/FullscreenContainer/fullscreen-container.stories.jsx b/source/components/FullscreenContainer/fullscreen-container.stories.jsx
diff --git a/source/components/FullscreenContainer/index.jsx b/source/components/FullscreenContainer/index.jsx
diff --git a/source/components/FullscreenContainer/styles.js b/source/components/FullscreenContainer/styles.js
diff --git a/source/components/IDInput/index.jsx b/source/components/IDInput/index.jsx
@@ -6,7 +6,7 @@ import BookIcon from '@assets/icons/notebook.svg';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 
-import { CircularProgress, Grid } from '@material-ui/core';
+import { CircularProgress, Grid, Typography } from '@material-ui/core';
 import { getRandomEmoji } from '@shared/constants/emojis';
 import { getContacts, addContact as addContactAction } from '@redux/contacts';
 
@@ -31,23 +31,23 @@ const IDInput = ({
   const [isContactsOpened, setIsContactsOpened] = useState(false);
   const [contactName, setContactName] = useState('');
   const [openContacts, setOpenContacts] = useState(false);
+  const [contactsError, setContactsError] = useState(null);
 
   const { principalId, accountId } = useSelector((state) => state.wallet);
-  const { groupedContacts: contacts } = useSelector((state) => state.contacts);
+  const { contacts } = useSelector((state) => state.contacts);
   const { contactsLoading } = useSelector((state) => state.contacts);
 
   useEffect(() => {
-   dispatch(getContacts());
+    dispatch(getContacts());
   }, []);
 
   const isUserAddress = useMemo(
     () => [principalId, accountId].includes(value), [principalId, accountId, value],
   );
 
-  const inContacts = useMemo(() => contacts
-    .flatMap((c) => c.contacts)
-    .map((c) => c.id)
-    .includes(value), [contacts, value]);
+  const inContacts = useMemo(() => !!contacts.find(
+    (contact) => (contact.id === value),
+  ), [contacts, value]);
 
   const shouldDisplayAddToContacts = value !== null && value !== ''
     && !loading && isValid && !inContacts && !isUserAddress;
@@ -85,14 +85,17 @@ const IDInput = ({
   };
 
   const handleChangeContactName = (e) => {
-    setContactName(e.target.value);
+    const name = e.target.value;
+    const existingContact = contacts.find((contact) => contact.name === name);
+    const error = existingContact ? t('contacts.errorExists').replace('{name}', existingContact.name) : null;
+    setContactsError(error);
+    setContactName(name);
   };
 
   const searchContactFromId = (e) => {
     const id = e.target.value;
     onChange(id);
-    const allContacts = contacts.flatMap((contact) => contact.contacts);
-    setSelectedContact(allContacts.find((contact) => contact.id === id));
+    setSelectedContact(contacts.find((contact) => contact.id === id));
   };
 
   return (
@@ -178,20 +181,24 @@ const IDInput = ({
                     label={t('contacts.name')}
                     smallLabel
                     component={(
-                      <TextInput
-                        fullWidth
-                        value={contactName}
-                        onChange={handleChangeContactName}
-                        type="text"
-                        data-testid="contact-name-input"
-                      />
+                      <>
+                        <TextInput
+                          fullWidth
+                          value={contactName}
+                          onChange={handleChangeContactName}
+                          type="text"
+                          data-testid="contact-name-input"
+                          error={!!contactsError}
+                        />
+                        <Typography variant="subtitle1" className={classes.danger} data-testid="error">{contactsError}</Typography>
+                      </>
                     )}
                   />
                 )}
                 confirmText={t('common.add')}
                 buttonVariant="rainbow"
                 onClick={addContact}
-                submitButtonProps={{ 'data-testid': 'confirm-adding-contact-button' }}
+                submitButtonProps={{ 'data-testid': 'confirm-adding-contact-button', disabled: !contactName || !!contactsError }}
                 onClose={() => setIsContactsOpened(false)}
               />
             )}

diff --git a/source/components/IDInput/styles.js b/source/components/IDInput/styles.js
@@ -90,7 +90,7 @@ export default makeStyles((theme) => ({
     animationName: '$appear',
     animationDuration: '0.5s',
   },
-  errorMessage: {
+  danger: {
     marginTop: 5,
     color: theme.palette.danger.main,
   },

diff --git a/source/components/RevealSeedPhrase/index.jsx → ...ase/components/RevealSeedPhrase/index.jsx b/source/components/RevealSeedPhrase/index.jsx → ...ase/components/RevealSeedPhrase/index.jsx
@@ -14,11 +14,8 @@ const RevealSeedPhrase = ({ onClick, ...other }) => {
       data-testid="reveal-seedphrase-button"
       {...other}
     >
-      <div className={classes.blur} />
-      <div className={classes.center}>
-        <img src={WhiteKeyImage} />
-        <span className={classes.text}>{t('seedPhrase.reveal')}</span>
-      </div>
+      <img src={WhiteKeyImage} />
+      <span className={classes.text}>{t('seedPhrase.reveal')}</span>
     </div>
   );
 };

diff --git a/...SeedPhrase/reveal-seed-phrase.stories.jsx → ...SeedPhrase/reveal-seed-phrase.stories.jsx b/...SeedPhrase/reveal-seed-phrase.stories.jsx → ...SeedPhrase/reveal-seed-phrase.stories.jsx
diff --git a/source/components/RevealSeedPhrase/styles.js → ...ase/components/RevealSeedPhrase/styles.js b/source/components/RevealSeedPhrase/styles.js → ...ase/components/RevealSeedPhrase/styles.js
@@ -4,23 +4,12 @@ export default makeStyles((theme) => ({
   root: {
     width: 350,
     height: 134,
-    position: 'relative',
     cursor: 'pointer',
     transition: 'transform 0.3s',
 
     '&:hover': {
       transform: 'scale(1.03)',
     },
-  },
-  blur: {
-    width: '100%',
-    height: '100%',
-    background:
-      'linear-gradient(96.51deg, rgba(255, 231, 1, 0.8) 8.72%, rgba(255, 0, 196, 0.8) 38.27%, rgba(0, 232, 255, 0.8) 68.28%, rgba(0, 255, 1, 0.8) 94.7%)',
-    filter: 'blur(25px)',
-    borderRadius: 300,
-  },
-  center: {
     position: 'absolute',
     top: 0,
     bottom: 0,
@@ -31,6 +20,7 @@ export default makeStyles((theme) => ({
     margin: 'auto',
     display: 'flex',
     alignItems: 'center',
+    zIndex: 100000,
   },
   text: {
     fontWeight: 700,