Merge pull request #529 from Psychedelic/release/0.5.3

Release/0.5.3
Psychedelic · Aug 11, 2022 · b13b2ca · b13b2ca
2 parents 711e6fe + 5f01980
commit b13b2ca
Show file tree

Hide file tree

Showing 28 changed files with 266 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -37,8 +37,8 @@
     "@material-ui/icons": "^4.11.2",
     "@metamask/post-message-stream": "^4.0.0",
     "@psychedelic/browser-rpc": "2.1.0",
-    "@psychedelic/dab-js": "1.4.3",
-    "@psychedelic/plug-controller": "0.19.5",
+    "@psychedelic/dab-js": "1.4.5",
+    "@psychedelic/plug-controller": "0.19.7",
     "@psychedelic/plug-inpage-provider": "^2.3.0",
     "@reduxjs/toolkit": "^1.6.0",
     "advanced-css-reset": "^1.2.2",

diff --git a/source/Background/Keyring/index.js b/source/Background/Keyring/index.js
@@ -336,7 +336,7 @@ export const getKeyringHandler = (type, keyring) => ({
   },
   [HANDLER_TYPES.SET_REVERSE_RESOLVED_NAME]: async (name) => {
     try {
-      const res = await keyring.setICNSResolvedName(name);
+      const res = await keyring.setReverseResolvedName({ name });
       return res;
     } catch (e) {
       // eslint-disable-next-line
@@ -354,19 +354,19 @@ export const getKeyringHandler = (type, keyring) => ({
       return { error: e.message };
     }
   },
-  [HANDLER_TYPES.ADD_CONTACT]: async (contact, walletNumber = 0) => {
+  [HANDLER_TYPES.ADD_CONTACT]: async (contact, subaccount = 0) => {
     try {
-      const res = await keyring.addContact(contact, walletNumber);
+      const res = await keyring.addContact({ contact, subaccount });
       return res;
     } catch (e) {
       // eslint-disable-next-line
       console.log('Error adding contact', e);
       return { error: e.message };
     }
   },
-  [HANDLER_TYPES.REMOVE_CONTACT]: async (contactName, walletNumber = 0) => {
+  [HANDLER_TYPES.REMOVE_CONTACT]: async (addressName, subaccount = 0) => {
     try {
-      const res = await keyring.deleteContact(contactName, walletNumber);
+      const res = await keyring.deleteContact({ addressName, subaccount });
       return res;
     } catch (e) {
       // eslint-disable-next-line

diff --git a/source/Pages/Notification/components/Sign/index.jsx b/source/Pages/Notification/components/Sign/index.jsx
@@ -150,6 +150,7 @@ AssetsWarning.propTypes = {
   portId: PropTypes.string.isRequired,
   metadata: PropTypes.arrayOf(PropTypes.string).isRequired,
   setOnTimeout: PropTypes.func.isRequired,
+  transactionId: PropTypes.string.isRequired,
 };
 
 export default AssetsWarning;
diff --git a/source/Popup/Views/Network/components/NetworkCard/styles.js b/source/Popup/Views/Network/components/NetworkCard/styles.js
@@ -5,6 +5,7 @@ export default makeStyles(() => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
+    height: 80,
     width: '100%',
     padding: '16px 24px',
     cursor: 'pointer',

diff --git a/source/Popup/Views/Network/index.jsx b/source/Popup/Views/Network/index.jsx
@@ -1,13 +1,12 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Plus } from 'react-feather';
 import { useTranslation } from 'react-i18next';
-import { TABS, useRouter } from '@components/Router';
+import { useRouter } from '@components/Router';
 
-import { CircularProgress, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import { getNetworks } from '@redux/network';
 import BackIcon from '@assets/icons/back.svg';
-import { Header, LinkButton } from '@ui';
+import { Button, Header, LinkButton } from '@ui';
 import { Layout } from '@components';
 
 import useStyles from './styles';
@@ -19,35 +18,65 @@ const Network = () => {
   const { navigator } = useRouter();
   const classes = useStyles();
   const dispatch = useDispatch();
-  const { networks = [], networksLoading } = useSelector((state) => state.network);
+  const { networks = [] } = useSelector((state) => state.network);
+  const [groupedNetworks, setGroupedNetworks] = useState({});
 
   const navigateTo = (screen, tab) => () => navigator.navigate(screen, tab);
 
   useEffect(() => {
     dispatch(getNetworks());
   }, []);
 
+  useEffect(() => {
+    // Group networks by first letter of name
+    const networksByName = networks.reduce((acc, network) => {
+      const letter = network.name?.[0]?.toUpperCase?.();
+      const letterNetworks = acc[letter] || [];
+      return {
+        ...acc,
+        [letter]: [...letterNetworks, network].sort(
+          (a, b) => a.name.toUpperCase() > b.name.toUpperCase(),
+        ),
+      };
+    }, {});
+    setGroupedNetworks(networksByName);
+  }, [networks]);
+
   return (
     <Layout>
       <Header
         center={<Typography variant="h2">{t('network.network')}</Typography>}
         left={<LinkButton value={t('common.back')} onClick={navigator.goBack} startIcon={BackIcon} />}
-        right={<LinkButton value={t('common.done')} onClick={navigateTo('home', TABS.TOKENS)} />}
+        right={(
+          <Button
+            variant="rainbowOutlined"
+            value={t('common.add')}
+            style={{ height: 27, minWidth: 75 }}
+            onClick={navigateTo('create-network')}
+          />
+)}
       />
-      {networksLoading ? <CircularProgress size={24} />
-        : (
-          <div className={classes.networkContainer}>
-            {networks?.length
-              ? networks.map((network) => (<NetworkCard {...network} />))
-              : (<NoNetworks />)}
-          </div>
-        )}
-      <div
-        onClick={navigateTo('create-network')}
-        className={classes.addNetwork}
-      >
-        <Plus size="30" className={classes.plusIcon} strokeWidth={2.5} />
-      </div>
+      {networks?.length ? (
+        <div className={classes.networkContainer}>
+          {Object.keys(groupedNetworks).sort().map(
+            (letter) => (
+              <>
+                <div className={classes.letterHeader}>
+                  {letter}
+                </div>
+                {groupedNetworks[letter].map((network, index) => (
+                  <>
+                    <NetworkCard {...network} />
+                    {index < groupedNetworks[letter].length - 1 && (
+                      <div className={classes.divider} />
+                    )}
+                  </>
+                ))}
+              </>
+            ),
+          )}
+        </div>
+      ) : <NoNetworks />}
     </Layout>
   );
 };

diff --git a/source/Popup/Views/Network/styles.js b/source/Popup/Views/Network/styles.js
@@ -7,24 +7,21 @@ export default makeStyles((theme) => ({
     flexDirection: 'column',
     alignItems: 'center',
   },
-  addNetwork: {
+  letterHeader: {
+    height: 30,
+    background: '#F3F4F6',
+    width: '100%',
+    padding: `0 ${theme.spacing(2)}px`,
+    borderTop: '1px solid #E5E7EB',
+    borderRight: 'none',
+    borderLeft: 'none',
+    color: '#000000',
     display: 'flex',
-    justifyContent: 'center',
     alignItems: 'center',
-    bottom: 24,
-    right: 24,
-    position: 'absolute',
-    borderRadius: 42,
-    height: 42,
-    width: 42,
-    backgroundColor: theme.palette.common.blue,
-    cursor: 'pointer',
-
-    '&:hover': {
-      opacity: 0.9,
-    },
   },
-  plusIcon: {
-    color: 'white',
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: '#E5E7EB',
   },
 }));
diff --git a/source/Popup/Views/NetworkCreation/constants.js b/source/Popup/Views/NetworkCreation/constants.js
@@ -1,4 +1,5 @@
 import { validateCanisterId } from '@shared/utils/ids';
+import { isValidUrl } from '@shared/utils/string';
 
 const requiredValidation = (value) => (!value?.length && 'Required') || null;
 const uniqueValidation = (value, networks, field) => (networks?.find((net) => net[field] === value)
@@ -11,6 +12,8 @@ const canisterIdValidation = (value) => {
   return 'Invalid canister ID';
 };
 
+const urlValidation = (value) => !isValidUrl(value) && 'Invalid URL';
+
 export const NETWORK_CREATION_DEFAULT_VALUES = {
   name: '',
   host: '',
@@ -19,21 +22,19 @@ export const NETWORK_CREATION_DEFAULT_VALUES = {
 export const NETWORK_CREATION_FIELDS = {
   name: {
     name: 'name',
-    placeholder: 'Enter a name for the network',
     required: true,
     validate:
       (value, networks) => requiredValidation(value) || uniqueValidation(value, networks, 'name'),
   },
   host: {
     name: 'host',
-    placeholder: 'Enter the host of the network',
     required: true,
     validate: (value, networks) => requiredValidation(value)
-    || uniqueValidation(value, networks, 'host'),
+    || uniqueValidation(value, networks, 'host')
+    || urlValidation(value),
   },
   ledgerCanisterId: {
     name: 'ledgerCanisterId',
-    placeholder: 'Enter the ledger canister ID of the network',
     required: false,
     validate: canisterIdValidation,
   },

diff --git a/source/Popup/Views/NetworkCreation/index.jsx b/source/Popup/Views/NetworkCreation/index.jsx
@@ -53,33 +53,35 @@ const NetworkCreation = () => {
       setErrors(newErrors);
     } else {
       dispatch(addNetwork(values));
-      navigator.navigate('network');
+      navigator.navigate('home');
     }
   };
   return (
     <Layout>
       <Header
-        center={<Typography variant="h2">{t('network.network')}</Typography>}
+        center={<Typography variant="h2">{t('network.addNetwork')}</Typography>}
         left={<LinkButton value={t('common.back')} onClick={navigator.goBack} startIcon={BackIcon} />}
         right={<LinkButton value={t('common.close')} onClick={() => navigator.navigate('home')} />}
       />
       <div className={classes.networkCreationContainer}>
-        {Object.values(NETWORK_CREATION_FIELDS).map((field) => (
-          <div className={classes.fieldContainer}>
-            <Typography
-              variant="h5"
-              className={classes.label}
-            >
-              {`${t(`network.${field.name}`)}${field.required ? '*' : ''}`}
-            </Typography>
-            <TextInput
-              onChange={handleFieldChange(field.name)}
-              placeholder={field.placeholder}
-              error={errors[field.name]}
-            />
-            {errors[field.name] && <Typography variant="body2" color="error">{errors[field.name]}</Typography>}
-          </div>
-        ))}
+        <div className={classes.networksContainer}>
+          {Object.values(NETWORK_CREATION_FIELDS).map((field) => (
+            <div className={classes.fieldContainer}>
+              <Typography
+                variant="h5"
+                className={classes.label}
+              >
+                {`${t(`network.${field.name}`)}${field.required ? '*' : ''}`}
+              </Typography>
+              <TextInput
+                onChange={handleFieldChange(field.name)}
+                placeholder={t(`network.${field.name}Placeholder`)}
+                error={errors[field.name]}
+              />
+              {errors[field.name] && <Typography variant="body2" color="error">{errors[field.name]}</Typography>}
+            </div>
+          ))}
+        </div>
         <Button
           variant="rainbow"
           onClick={handleAddNetwork}

diff --git a/source/Popup/Views/NetworkCreation/styles.js b/source/Popup/Views/NetworkCreation/styles.js
@@ -1,13 +1,16 @@
 import { makeStyles } from '@material-ui/core';
 
-export default makeStyles((theme) => ({
+export default makeStyles(() => ({
   networkCreationContainer: {
-    padding: '0px 25px 25px',
+    padding: '5px 25px 30px',
+  },
+  networksContainer: {
+    marginBottom: 30,
   },
   fieldContainer: {
-    marginBottom: theme.spacing(2),
+    marginBottom: 20,
   },
   label: {
-    marginBottom: theme.spacing(0.5),
+    marginBottom: 10,
   },
 }));
diff --git a/source/Popup/Views/WalletDetails/index.jsx b/source/Popup/Views/WalletDetails/index.jsx
@@ -23,7 +23,6 @@ import {
 import { setUseICNS } from '@modules/storageManager';
 import { setICNSData, setUseICNS as setReduxUseICNS } from '@redux/icns';
 
-import { Button } from '@material-ui/core';
 import useStyles from './styles';
 import DetailItem from './components/DetailItem';
 import ICNSToggle from './components/ICNSToggle';
@@ -147,7 +146,10 @@ const WalletDetails = () => {
             edit={edit}
           />
           <InputBase
-            classes={{ root: clsx(classes.name, edit && classes.nameEdit) }}
+            classes={{
+              root:
+              clsx(classes.name, edit && !hasActiveResolvedICNS && classes.nameEdit),
+            }}
             value={hasActiveResolvedICNS ? resolved : walletName}
             type="text"
             onChange={handleChange}
@@ -157,15 +159,25 @@ const WalletDetails = () => {
           />
           {edit
             ? (
-              <button type="button" style={{ all: 'unset', marginTop: '4px' }} data-testid="save-changes-icon-button" onClick={handleEditWalletName}>
+              <button
+                type="button"
+                style={{ all: 'unset', marginTop: '4px' }}
+                data-testid="save-changes-icon-button"
+                onClick={handleEditWalletName}
+              >
                 <img
                   className={classes.icon}
                   src={BlueCheck}
                 />
               </button>
             )
             : (
-              <button type="button" style={{ all: 'unset', marginTop: '4px' }} data-testid="edit-icon-button" onClick={openEditWalletName}>
+              <button
+                type="button"
+                style={{ all: 'unset', marginTop: '4px' }}
+                data-testid="edit-icon-button"
+                onClick={openEditWalletName}
+              >
                 <img
                   className={classes.icon}
                   src={Pencil}

diff --git a/source/Popup/Views/WalletDetails/styles.js b/source/Popup/Views/WalletDetails/styles.js
@@ -32,15 +32,14 @@ export default makeStyles((theme) => ({
     width: 231,
     height: 41,
     padding: '0 12px',
-    border: '1px solid #FFFFFF',
     borderRadius: 6,
     color: '#111827',
     fontWeight: 600,
     fontSize: 20,
+    marginRight: 10,
   },
   nameEdit: {
     background: '#FFFFFF',
-    border: '1px solid #D1D5DB',
     boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.05)',
   },
   icon: {

diff --git a/source/components/Activity/index.jsx b/source/components/Activity/index.jsx
@@ -21,6 +21,7 @@ const Activity = () => {
 
   useEffect(() => {
     if (icpPrice) {
+      dispatch(setTransactionsLoading(true));
       sendMessage({ type: HANDLER_TYPES.GET_TRANSACTIONS, params: {} },
         (trxs) => {
           dispatch(setTransactions({ ...trxs, icpPrice, useICNS }));