From fc604324b14f01d8c2e7434d2382970ba52f75aa Mon Sep 17 00:00:00 2001
From: rocky-fleek <tomas@fleek.co>
Date: Mon, 8 Aug 2022 11:59:16 +0200
Subject: [PATCH 01/12] Fixed spacing on network creation. Fixed placeholders
 and title. Made status dot green

---
 .../Popup/Views/NetworkCreation/constants.js  |  3 --
 source/Popup/Views/NetworkCreation/index.jsx  | 38 ++++++++++---------
 source/Popup/Views/NetworkCreation/styles.js  | 11 ++++--
 .../components/ConnectionControls/index.jsx   |  2 +-
 .../components/ConnectionControls/styles.js   |  7 ----
 source/locales/en/translation.json            |  3 ++
 6 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/source/Popup/Views/NetworkCreation/constants.js b/source/Popup/Views/NetworkCreation/constants.js
index 8490707e..101726e7 100644
--- a/source/Popup/Views/NetworkCreation/constants.js
+++ b/source/Popup/Views/NetworkCreation/constants.js
@@ -19,21 +19,18 @@ 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'),
   },
   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
index 669790ed..49b2b881 100644
--- 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
index ed7fc3d0..0ec59982 100644
--- 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/components/ConnectionStatus/components/ConnectionControls/index.jsx b/source/components/ConnectionStatus/components/ConnectionControls/index.jsx
index 3445b832..0e7e3323 100644
--- a/source/components/ConnectionStatus/components/ConnectionControls/index.jsx
+++ b/source/components/ConnectionStatus/components/ConnectionControls/index.jsx
@@ -98,7 +98,7 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
       <div className={classes.controls}>
         <div className={classes.networkSelector} onClick={() => setSelectorOpen(true)}>
           <div className={clsx(classes.controlsInfo, connected && classes.connectedControls)}>
-            <div className={clsx(classes.statusDot, connected && classes.connectedDot)} />
+            <div className={clsx(classes.statusDot)} />
             <span className={classes.network}>{capitalize(currentNetwork?.name || 'Mainnet')}</span>
           </div>
         </div>
diff --git a/source/components/ConnectionStatus/components/ConnectionControls/styles.js b/source/components/ConnectionStatus/components/ConnectionControls/styles.js
index faf4b459..8b024ebe 100644
--- a/source/components/ConnectionStatus/components/ConnectionControls/styles.js
+++ b/source/components/ConnectionStatus/components/ConnectionControls/styles.js
@@ -32,10 +32,6 @@ export default makeStyles(() => ({
   },
   controlsInfo: {
     ...flex,
-    opacity: 0.5,
-  },
-  connectedControls: {
-    opacity: 1,
   },
   controls: {
     ...flex,
@@ -66,9 +62,6 @@ export default makeStyles(() => ({
     height: 8,
     borderRadius: '50%',
     marginRight: 5,
-    background: '#6B7280',
-  },
-  connectedDot: {
     background: '#08DE92',
   },
   disabled: {
diff --git a/source/locales/en/translation.json b/source/locales/en/translation.json
index 62c5ece6..c2eb67e9 100644
--- a/source/locales/en/translation.json
+++ b/source/locales/en/translation.json
@@ -2,8 +2,11 @@
   "network": {
     "network": "Network",
     "name": "Network Name",
+    "namePlaceholder": "My Network",
     "host": "Host URL",
+    "hostPlaceholder": "http://localhost:8000/",
     "ledgerCanisterId": "Ledger canister Id",
+    "ledgerCanisterIdPlaceholder": "My Ledger Canister Id",
     "addNetwork": "Add Network",
     "addNetworkDescription": "Add a custom network to use Plug on test networks."
   },

From c7ec6627cfaa15f1cb5f72c34124e6d6dcbafb8d Mon Sep 17 00:00:00 2001
From: rocky-fleek <tomas@fleek.co>
Date: Tue, 9 Aug 2022 10:47:36 +0200
Subject: [PATCH 02/12] Fixed styles on network list

---
 .../Network/components/NetworkCard/styles.js  |  1 +
 source/Popup/Views/Network/index.jsx          | 51 +++++++++++----
 source/Popup/Views/Network/styles.js          | 17 +++++
 source/components/GroupedDisplay/index.jsx    | 65 +++++++++++++++++++
 source/components/GroupedDisplay/styles.js    |  0
 5 files changed, 123 insertions(+), 11 deletions(-)
 create mode 100644 source/components/GroupedDisplay/index.jsx
 create mode 100644 source/components/GroupedDisplay/styles.js

diff --git a/source/Popup/Views/Network/components/NetworkCard/styles.js b/source/Popup/Views/Network/components/NetworkCard/styles.js
index 30cfc435..cafdd39c 100644
--- 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
index 662b2292..b87b69e7 100644
--- a/source/Popup/Views/Network/index.jsx
+++ b/source/Popup/Views/Network/index.jsx
@@ -1,10 +1,10 @@
-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 { 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';
@@ -19,7 +19,8 @@ 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);
 
@@ -27,6 +28,21 @@ const Network = () => {
     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
@@ -34,14 +50,27 @@ const Network = () => {
         left={<LinkButton value={t('common.back')} onClick={navigator.goBack} startIcon={BackIcon} />}
         right={<LinkButton value={t('common.done')} onClick={navigateTo('home', TABS.TOKENS)} />}
       />
-      {networksLoading ? <CircularProgress size={24} />
-        : (
-          <div className={classes.networkContainer}>
-            {networks?.length
-              ? networks.map((network) => (<NetworkCard {...network} />))
-              : (<NoNetworks />)}
-          </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 />}
       <div
         onClick={navigateTo('create-network')}
         className={classes.addNetwork}
diff --git a/source/Popup/Views/Network/styles.js b/source/Popup/Views/Network/styles.js
index d9ff1c01..72b0a7c1 100644
--- a/source/Popup/Views/Network/styles.js
+++ b/source/Popup/Views/Network/styles.js
@@ -27,4 +27,21 @@ export default makeStyles((theme) => ({
   plusIcon: {
     color: 'white',
   },
+  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',
+    alignItems: 'center',
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: '#E5E7EB',
+  },
 }));
diff --git a/source/components/GroupedDisplay/index.jsx b/source/components/GroupedDisplay/index.jsx
new file mode 100644
index 00000000..3883ba8f
--- /dev/null
+++ b/source/components/GroupedDisplay/index.jsx
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import ActionDialog from '../ActionDialog';
+import ContactItem from '../ContactItem';
+import useStyles from './styles';
+
+const GroupedDisplay = ({ data, ItemComponent, itemProps }) => {
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+
+  return (
+    <div className={classes.contactContainer}>
+      {
+        [...data].sort((a, b) => a.letter.localeCompare(b.letter)).map((group) => (
+          <>
+            <div className={classes.divider}>
+              {group.letter}
+            </div>
+            {
+              [...item.contacts].sort((a, b) => a.name.localeCompare(b.name)).map((item) => (
+                <ItemComponent {...item} {...itemProps} />
+              ))
+            }
+          </>
+        ))
+      }
+      <div className={classes.line} />
+      {
+        open
+        && (
+          <ActionDialog
+            open={open}
+            title={t('contacts.deleteTitle')}
+            content={<Typography>{t('contacts.deleteText')} <b>{selectedContact.name}</b>?</Typography>}
+            confirmText={t('contacts.deleteButton')}
+            buttonVariant="danger"
+            onClick={() => { handleRemoveContact(selectedContact); setOpen(false); }}
+            onClose={() => setOpen(false)}
+            submitButtonProps={{
+              'data-testid': 'confirm-deleting-button',
+            }}
+          />
+        )
+      }
+    </div>
+  );
+};
+
+export default GroupedDisplay;
+
+GroupedDisplay.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)).isRequired,
+  handleRemoveContact: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  selectable: PropTypes.bool,
+};
+
+GroupedDisplay.defaultProps = {
+  onClick: null,
+  selectable: false,
+};
diff --git a/source/components/GroupedDisplay/styles.js b/source/components/GroupedDisplay/styles.js
new file mode 100644
index 00000000..e69de29b

From 686edd8789300916567839b19fe6449ab3dd98e9 Mon Sep 17 00:00:00 2001
From: rocky-fleek <tomas@fleek.co>
Date: Tue, 9 Aug 2022 10:53:57 +0200
Subject: [PATCH 03/12] Fixed add button on networks

---
 source/Popup/Views/Network/index.jsx | 20 ++++++++++----------
 source/Popup/Views/Network/styles.js | 20 --------------------
 2 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/source/Popup/Views/Network/index.jsx b/source/Popup/Views/Network/index.jsx
index b87b69e7..8469faf8 100644
--- a/source/Popup/Views/Network/index.jsx
+++ b/source/Popup/Views/Network/index.jsx
@@ -1,13 +1,12 @@
 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 { 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';
@@ -48,7 +47,14 @@ const Network = () => {
       <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')}
+          />
+)}
       />
       {networks?.length ? (
         <div className={classes.networkContainer}>
@@ -71,12 +77,6 @@ const Network = () => {
           )}
         </div>
       ) : <NoNetworks />}
-      <div
-        onClick={navigateTo('create-network')}
-        className={classes.addNetwork}
-      >
-        <Plus size="30" className={classes.plusIcon} strokeWidth={2.5} />
-      </div>
     </Layout>
   );
 };
diff --git a/source/Popup/Views/Network/styles.js b/source/Popup/Views/Network/styles.js
index 72b0a7c1..fb8d8c50 100644
--- a/source/Popup/Views/Network/styles.js
+++ b/source/Popup/Views/Network/styles.js
@@ -7,26 +7,6 @@ export default makeStyles((theme) => ({
     flexDirection: 'column',
     alignItems: 'center',
   },
-  addNetwork: {
-    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',
-  },
   letterHeader: {
     height: 30,
     background: '#F3F4F6',

From 9ccf320d1bddac102e8fba125f7a0f0c88ece6c1 Mon Sep 17 00:00:00 2001
From: rocky-fleek <tomas@fleek.co>
Date: Tue, 9 Aug 2022 11:35:50 +0200
Subject: [PATCH 04/12] Fixed custom token send by serializing decimals

---
 source/redux/send.js                  |  4 ++--
 source/shared/constants/currencies.js | 11 ++---------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/source/redux/send.js b/source/redux/send.js
index a4800de5..75c5dc4f 100644
--- a/source/redux/send.js
+++ b/source/redux/send.js
@@ -48,10 +48,10 @@ export const sendToken = createAsyncThunk(
 
     const to = addressInfo.resolvedAddress || address;
     const amount = rawAmount.toString();
-    const { canisterId, decimals } = selectedAsset || {};
+    const { canisterId, decimals, standard } = selectedAsset || {};
 
     const res = await callSendToken({
-      to, amount, canisterId, decimals,
+      to, amount, canisterId, decimals, standard,
     });
     return res;
   },
diff --git a/source/shared/constants/currencies.js b/source/shared/constants/currencies.js
index d1b16cf7..f67c6e5c 100644
--- a/source/shared/constants/currencies.js
+++ b/source/shared/constants/currencies.js
@@ -135,18 +135,11 @@ export const parseAssetsAmount = (assets = []) => (
 
 export const formatAssets = (assets = [], icpPrice) => {
   const mappedAssets = assets.map(({ amount, token, error }) => {
-    const {
-      name, symbol, canisterId, logo, standard,
-    } = token;
-    const asset = formatAssetBySymbol(amount, symbol, icpPrice);
+    const asset = formatAssetBySymbol(amount, token.symbol, icpPrice);
     return {
-      logo,
+      ...token,
       ...asset,
-      name,
-      symbol,
-      canisterId,
       error,
-      standard,
     };
   });
   return mappedAssets;

From f2e690ec91ca50cd14e5cd0d354797e6ddcfeddf Mon Sep 17 00:00:00 2001
From: rocky-fleek <tomas@fleek.co>
Date: Tue, 9 Aug 2022 11:45:16 +0200
Subject: [PATCH 05/12] Installed latest dab-js and controller using it;

---
 package.json |  4 ++--
 yarn.lock    | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 313e892d..baf66b2b 100644
--- 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.3",
+    "@psychedelic/dab-js": "1.4.5",
+    "@psychedelic/plug-controller": "0.19.6",
     "@psychedelic/plug-inpage-provider": "^2.3.0",
     "@reduxjs/toolkit": "^1.6.0",
     "advanced-css-reset": "^1.2.2",
diff --git a/yarn.lock b/yarn.lock
index 8954c869..f456075d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1761,10 +1761,10 @@
     axios "^0.24.0"
     cross-fetch "^3.1.4"
 
-"@psychedelic/dab-js@1.4.3":
-  version "1.4.3"
-  resolved "https://npm.pkg.github.com/download/@psychedelic/dab-js/1.4.3/9265ba76868a9e51b1903c8adb3d1c64142b52afaa9899e994f6328638d27d93#4a233113ba319e1bd27e459ca198ccca1143b3f8"
-  integrity sha512-UEwLg21h9yiXupoXn1j8MT3D0VKgJ4bIBG7/ENeqIeDxehXvhoGdMsSuslPa5W9FYKQHT8Ta6b9nBopRS6v7Nw==
+"@psychedelic/dab-js@1.4.5":
+  version "1.4.5"
+  resolved "https://npm.pkg.github.com/download/@Psychedelic/dab-js/1.4.5/eccee7c10979dcf0c55ab0bc7f02e863a4a8b54f#eccee7c10979dcf0c55ab0bc7f02e863a4a8b54f"
+  integrity sha512-UQ2SGF+1YOGjZPWp0BeA+hR90PyVBHlRoJMVhERu9w49PcNEYR+Sf+Toa0MwGpZfwAT5rSQYbSkKBqQnWjHzHA==
   dependencies:
     "@dfinity/agent" "0.9.3"
     "@dfinity/candid" "0.9.3"
@@ -1775,17 +1775,17 @@
     cross-fetch "^3.1.4"
     crypto-js "^4.1.1"
 
-"@psychedelic/plug-controller@0.19.3":
-  version "0.19.3"
-  resolved "https://npm.pkg.github.com/download/@Psychedelic/plug-controller/0.19.3/cf7289aa5d77e96b2ce4a70604c98a9b630a7bdc#cf7289aa5d77e96b2ce4a70604c98a9b630a7bdc"
-  integrity sha512-DC020LnIZe1FtET1Pww+c4J9quwFxJRPNW0awhqg8uFJ3UKYKwQRcUD1a9tLcMahU3h2STDLKSVhkprkf5tDzg==
+"@psychedelic/plug-controller@0.19.6":
+  version "0.19.6"
+  resolved "https://npm.pkg.github.com/download/@Psychedelic/plug-controller/0.19.6/2a89750df16a93f68ec0694718e9b189b88f0a6f#2a89750df16a93f68ec0694718e9b189b88f0a6f"
+  integrity sha512-vz38BgeufdTZwnlAh+8SeRU3kLaRVa664iD8MWthBajtlJrm3nRTV3wfQeaB4FbCAMytVlQiMO8vQc11OwP5OQ==
   dependencies:
     "@dfinity/agent" "0.9.3"
     "@dfinity/candid" "0.9.3"
     "@dfinity/identity" "0.9.3"
     "@dfinity/principal" "0.9.3"
     "@psychedelic/cap-js" "0.0.7"
-    "@psychedelic/dab-js" "1.4.3"
+    "@psychedelic/dab-js" "1.4.5"
     "@types/secp256k1" "^4.0.3"
     axios "^0.21.1"
     babel-jest "^25.5.1"

From 0cbd36458e3301770e584de80220c72b119d9c8f Mon Sep 17 00:00:00 2001
From: rocky-fleek <tomas@fleek.co>
Date: Tue, 9 Aug 2022 13:40:45 +0200
Subject: [PATCH 06/12] Added optional chainin to token activity item to
 prevent crash

---
 .../components/items/LiquidityItem/components/TokenAmounts.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx b/source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx
index b492f133..13f330aa 100644
--- a/source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx
+++ b/source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx
@@ -7,10 +7,11 @@ import { parseToFloatAmount, TOKENS } from '@shared/constants/currencies';
 const TokenAmounts = ({ token0, token1 }) => {
   const parseTokenAmount = (token) => parseToFloatAmount(
     token?.amount, token?.token?.details?.decimals
-    || TOKENS[token.token?.details?.symbol]?.decimals,
+    || TOKENS[token?.token?.details?.symbol]?.decimals,
   );
   const amount0 = parseTokenAmount(token0);
   const amount1 = parseTokenAmount(token1);
+  // eslint-disable-next-line
   const NumberWithMin = ({ value, ...props }) => (value < 0.01 ? `<0.01${props.suffix}` : <NumberFormat {...props} value={value} />);
   return (
     <>

From d0d40d28b97e6fad1bdea32de628ebc83113d617 Mon Sep 17 00:00:00 2001
From: Juan Manuel <44899916+angarita-dev@users.noreply.github.com>
Date: Tue, 9 Aug 2022 15:28:53 -0500
Subject: [PATCH 07/12] Fixed deposit & NFT icons in activity

---
 source/redux/wallet.js                             | 2 +-
 source/ui/ActivityItem/components/items/NFTItem.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/redux/wallet.js b/source/redux/wallet.js
index ea801083..c1ccf202 100644
--- a/source/redux/wallet.js
+++ b/source/redux/wallet.js
@@ -82,7 +82,7 @@ export const walletSlice = createSlice({
           from: (useICNS ? details?.from?.icns : details?.from?.principal) || caller,
           date: new Date(timestamp),
           status: ACTIVITY_STATUS[details?.status],
-          image: details?.canisterInfo?.icon || TOKEN_IMAGES[getSymbol()] || '',
+          logo: details?.sonicData?.token?.logo || details?.canisterInfo?.icon || TOKEN_IMAGES[getSymbol()] || '',
           symbol: getSymbol(),
           canisterId: details?.canisterInfo?.canisterId,
           canisterInfo,
diff --git a/source/ui/ActivityItem/components/items/NFTItem.js b/source/ui/ActivityItem/components/items/NFTItem.js
index b6378124..15667634 100644
--- a/source/ui/ActivityItem/components/items/NFTItem.js
+++ b/source/ui/ActivityItem/components/items/NFTItem.js
@@ -18,7 +18,7 @@ const NFTItem = ({
   to,
   from,
   date,
-  image,
+  logo,
   canisterId,
   details,
   setOpenDetail,
@@ -34,7 +34,7 @@ const NFTItem = ({
       <ActivityItemDisplay
         image={(
           <GenericIcon
-            image={image || UnknownIcon}
+            image={logo || UnknownIcon}
             type={type}
           />
         )}
@@ -74,7 +74,7 @@ NFTItem.propTypes = {
   details: PropTypes.objectOf(PropTypes.any),
   to: PropTypes.string,
   from: PropTypes.string,
-  image: PropTypes.string.isRequired,
+  logo: PropTypes.string.isRequired,
   date: PropTypes.oneOfType([
     PropTypes.instanceOf(Date),
     PropTypes.string,

From 9a16ad6311104e9694304d53224e9e59dc00ff69 Mon Sep 17 00:00:00 2001
From: rocky-fleek <tomas@fleek.co>
Date: Wed, 10 Aug 2022 13:38:01 +0200
Subject: [PATCH 08/12] Fixed ICNS reverse resolution updating and styles

---
 source/Background/Keyring/index.js            | 10 +++++-----
 .../Notification/components/Sign/index.jsx    |  1 +
 source/Popup/Views/WalletDetails/index.jsx    | 20 +++++++++++++++----
 source/Popup/Views/WalletDetails/styles.js    |  3 +--
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/source/Background/Keyring/index.js b/source/Background/Keyring/index.js
index 94713bbf..1efc3001 100644
--- 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,9 +354,9 @@ 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
@@ -364,9 +364,9 @@ export const getKeyringHandler = (type, keyring) => ({
       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
index 93accebf..c30712e1 100644
--- 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/WalletDetails/index.jsx b/source/Popup/Views/WalletDetails/index.jsx
index e78ddefc..44f35e3d 100644
--- 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,7 +159,12 @@ 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}
@@ -165,7 +172,12 @@ const WalletDetails = () => {
               </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
index 81edc7db..8de0ef76 100644
--- 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: {

From 4903e23f43a458a1684bf7cb2cba43ea0b0db465 Mon Sep 17 00:00:00 2001
From: Juan Manuel <44899916+angarita-dev@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:29:12 -0500
Subject: [PATCH 09/12] Parsed principal id from contacts

---
 source/shared/utils/contacts.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/source/shared/utils/contacts.js b/source/shared/utils/contacts.js
index d8a9af94..91dfb983 100644
--- a/source/shared/utils/contacts.js
+++ b/source/shared/utils/contacts.js
@@ -1,3 +1,4 @@
+import { Principal } from '@dfinity/principal';
 import { getContacts, setContacts } from '@modules/storageManager';
 import { addContact } from '@background/Keyring';
 import { validatePrincipalId, validateAccountId } from './ids';
@@ -41,9 +42,18 @@ export const parseContactFromDab = (contact) => {
   } = contact;
 
   const [id] = Object.values(unparsedValue);
+  let parsedId = id;
+
+  if (id._isPrincipal) {
+    // Converts principal from arr to string
+    parsedId = Principal.fromUint8Array(
+      new Uint8Array(Object.values(id._arr))
+    ).toString();
+  }
+
 
   return {
-    id,
+    id: parsedId,
     image,
     name,
   };

From 4bad174bde99303a4bc5a69b3a567a4b73b76882 Mon Sep 17 00:00:00 2001
From: tomiir <rocchitomas@gmail.com>
Date: Thu, 11 Aug 2022 08:29:51 +0200
Subject: [PATCH 10/12] Fix/activity improvements (#538)

* Added valid url validation

* Installed controller 0.19.7 with activity performance improvements

Co-authored-by: rocky-fleek <tomas@fleek.co>
---
 package.json                                  |  2 +-
 .../Popup/Views/NetworkCreation/constants.js  |  6 ++++-
 source/shared/utils/string.js                 |  8 +++++++
 yarn.lock                                     | 24 +++++++++++++++----
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index baf66b2b..7f78de7a 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@metamask/post-message-stream": "^4.0.0",
     "@psychedelic/browser-rpc": "2.1.0",
     "@psychedelic/dab-js": "1.4.5",
-    "@psychedelic/plug-controller": "0.19.6",
+    "@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/Popup/Views/NetworkCreation/constants.js b/source/Popup/Views/NetworkCreation/constants.js
index 101726e7..433ad441 100644
--- 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: '',
@@ -27,7 +30,8 @@ export const NETWORK_CREATION_FIELDS = {
     name: 'host',
     required: true,
     validate: (value, networks) => requiredValidation(value)
-    || uniqueValidation(value, networks, 'host'),
+    || uniqueValidation(value, networks, 'host')
+    || urlValidation(value),
   },
   ledgerCanisterId: {
     name: 'ledgerCanisterId',
diff --git a/source/shared/utils/string.js b/source/shared/utils/string.js
index 32d7b4f3..c5891745 100644
--- a/source/shared/utils/string.js
+++ b/source/shared/utils/string.js
@@ -1,2 +1,10 @@
 export const capitalize = (str) => (str?.length > 0 ? `${str[0].toUpperCase()}${str?.slice(1)}` : '');
+export const isValidUrl = (urlString) => {
+  try {
+    return Boolean(new URL(urlString));
+  } catch (e) {
+    return false;
+  }
+};
+
 export default { capitalize }; // remove when others are added.
diff --git a/yarn.lock b/yarn.lock
index f456075d..23291fa0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1775,17 +1775,31 @@
     cross-fetch "^3.1.4"
     crypto-js "^4.1.1"
 
-"@psychedelic/plug-controller@0.19.6":
-  version "0.19.6"
-  resolved "https://npm.pkg.github.com/download/@Psychedelic/plug-controller/0.19.6/2a89750df16a93f68ec0694718e9b189b88f0a6f#2a89750df16a93f68ec0694718e9b189b88f0a6f"
-  integrity sha512-vz38BgeufdTZwnlAh+8SeRU3kLaRVa664iD8MWthBajtlJrm3nRTV3wfQeaB4FbCAMytVlQiMO8vQc11OwP5OQ==
+"@psychedelic/dab-js@1.4.6":
+  version "1.4.6"
+  resolved "https://npm.pkg.github.com/download/@Psychedelic/dab-js/1.4.6/8c06156d4c51634e2a35a837e3b89d18f246ce0e#8c06156d4c51634e2a35a837e3b89d18f246ce0e"
+  integrity sha512-p5MhoUikpqb+osqjg4dthiKFYt9X4EMKPOBbe6OD20iOxvmTIqQ3dqejwXSJO28ohFCnZseRG+UQsfoz+6jhTw==
+  dependencies:
+    "@dfinity/agent" "0.9.3"
+    "@dfinity/candid" "0.9.3"
+    "@dfinity/identity" "0.9.3"
+    "@dfinity/principal" "0.9.3"
+    axios "^0.24.0"
+    buffer-crc32 "^0.2.13"
+    cross-fetch "^3.1.4"
+    crypto-js "^4.1.1"
+
+"@psychedelic/plug-controller@0.19.7":
+  version "0.19.7"
+  resolved "https://npm.pkg.github.com/download/@Psychedelic/plug-controller/0.19.7/5c35f85f934acc1e243ec81ef5e1cd7a2b261680#5c35f85f934acc1e243ec81ef5e1cd7a2b261680"
+  integrity sha512-Hl8CjJwCY9nzntP7S75btzhMXsynS0IE1LqswiE905AACCY5vkA9ZfWW8tq4O3TM20PXJGeNSokJf0BBzXSzdg==
   dependencies:
     "@dfinity/agent" "0.9.3"
     "@dfinity/candid" "0.9.3"
     "@dfinity/identity" "0.9.3"
     "@dfinity/principal" "0.9.3"
     "@psychedelic/cap-js" "0.0.7"
-    "@psychedelic/dab-js" "1.4.5"
+    "@psychedelic/dab-js" "1.4.6"
     "@types/secp256k1" "^4.0.3"
     axios "^0.21.1"
     babel-jest "^25.5.1"

From 61f2cf05120002a8bd7194e2ab7e1715d0840558 Mon Sep 17 00:00:00 2001
From: tomiir <rocchitomas@gmail.com>
Date: Thu, 11 Aug 2022 16:37:11 +0200
Subject: [PATCH 11/12] Fix/network change spam (#540)

* Added valid url validation

* Installed controller 0.19.7 with activity performance improvements

* Fixxed issue where spamming refresh or network change would flood the app with requests

* Added loading on activity tab

Co-authored-by: rocky-fleek <tomas@fleek.co>
---
 source/components/Activity/index.jsx           |  1 +
 .../components/ConnectionControls/index.jsx    | 18 +++++++++++++++---
 .../components/ConnectionControls/styles.js    | 11 +++++++++++
 .../components/NetworkSelector/index.jsx       |  6 +++++-
 source/components/Profile/index.jsx            |  2 --
 source/redux/wallet.js                         |  2 +-
 6 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/source/components/Activity/index.jsx b/source/components/Activity/index.jsx
index 13bb0a2c..55afe180 100644
--- 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 }));
diff --git a/source/components/ConnectionStatus/components/ConnectionControls/index.jsx b/source/components/ConnectionStatus/components/ConnectionControls/index.jsx
index 0e7e3323..f126d0ae 100644
--- a/source/components/ConnectionStatus/components/ConnectionControls/index.jsx
+++ b/source/components/ConnectionStatus/components/ConnectionControls/index.jsx
@@ -31,12 +31,20 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
   const dispatch = useDispatch();
   const { getContacts } = useContacts();
   const { navigator } = disableNavigation ? {} : useRouter();
-  const { principalId, walletNumber } = useSelector((state) => state.wallet);
+  const {
+    principalId,
+    walletNumber,
+    assetsLoading,
+    transactionsLoading,
+    collectionsLoading,
+  } = useSelector((state) => state.wallet);
   const { useICNS } = useSelector((state) => state.icns);
   const { currentNetwork } = useSelector((state) => state.network);
   const [selectorOpen, setSelectorOpen] = useState(false);
   const [connected, setConnected] = useState(false);
 
+  const loading = assetsLoading || transactionsLoading || collectionsLoading;
+
   extensionizer.tabs.query({ active: true }, (tabs) => {
     const url = getTabURL(tabs?.[0]);
     // Check if new wallet is connected to the current page
@@ -47,7 +55,7 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
   });
 
   const refreshWallet = () => {
-    if (disableNavigation) return;
+    if (disableNavigation || loading) return;
     navigator?.navigate?.('home', TABS.TOKENS);
 
     if (icpPrice) {
@@ -104,7 +112,11 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
         </div>
         <div
           data-testid="refresh-wallet-button"
-          className={clsx(classes.reloadIconContainer, disableNavigation && classes.disabled)}
+          className={clsx(
+            classes.reloadIconContainer,
+            disableNavigation && classes.disabled,
+            // loading && classes.loading, disabled for now, need to check with design
+          )}
           onClick={refreshWallet}
         >
           <img src={RefreshAsset} alt="reload" className={classes.reloadIcon} />
diff --git a/source/components/ConnectionStatus/components/ConnectionControls/styles.js b/source/components/ConnectionStatus/components/ConnectionControls/styles.js
index 8b024ebe..403a16e9 100644
--- a/source/components/ConnectionStatus/components/ConnectionControls/styles.js
+++ b/source/components/ConnectionStatus/components/ConnectionControls/styles.js
@@ -68,4 +68,15 @@ export default makeStyles(() => ({
     opacity: 0.5,
     pointer: 'arrow',
   },
+  '@keyframes rotate': {
+    '0%': {
+      transform: 'rotate(0deg)',
+    },
+    '100%': {
+      transform: 'rotate(360deg)',
+    },
+  },
+  loading: {
+    animation: '$rotate 1s infinite linear',
+  },
 }));
diff --git a/source/components/ConnectionStatus/components/NetworkSelector/index.jsx b/source/components/ConnectionStatus/components/NetworkSelector/index.jsx
index a72e06fa..0e1e977b 100644
--- a/source/components/ConnectionStatus/components/NetworkSelector/index.jsx
+++ b/source/components/ConnectionStatus/components/NetworkSelector/index.jsx
@@ -15,6 +15,10 @@ const NetworkSelector = ({ onClose, refreshWallet }) => {
   const { t } = useTranslation();
   const { networks } = useSelector((state) => state.network);
   const { navigator } = useRouter();
+  const handleNetworkClick = () => {
+    refreshWallet();
+    onClose?.();
+  };
   return (
     <>
       <div className={classes.selectorContainer}>
@@ -32,7 +36,7 @@ const NetworkSelector = ({ onClose, refreshWallet }) => {
             <NetworkCard
               network={network}
               withDivider={index < networks.length - 1}
-              onClick={refreshWallet}
+              onClick={handleNetworkClick}
             />
           ))}
         </div>
diff --git a/source/components/Profile/index.jsx b/source/components/Profile/index.jsx
index 54621bd1..b9e30840 100644
--- a/source/components/Profile/index.jsx
+++ b/source/components/Profile/index.jsx
@@ -21,7 +21,6 @@ import {
   setAssetsLoading,
   setCollections,
   setTransactions,
-  setTransactionsLoading,
 } from '@redux/wallet';
 import BluePencil from '@assets/icons/blue-pencil.svg';
 import VisibleIcon from '@assets/icons/visible.svg';
@@ -131,7 +130,6 @@ const Profile = ({ disableProfile }) => {
           dispatch(setICNSData(newWallet.icnsData));
           dispatch(setAssetsLoading(true));
           dispatch(setTransactions([]));
-          dispatch(setTransactionsLoading(true));
           sendMessage({
             type: HANDLER_TYPES.GET_ICNS_DATA,
             params: { refresh: true },
diff --git a/source/redux/wallet.js b/source/redux/wallet.js
index c1ccf202..34bd7764 100644
--- a/source/redux/wallet.js
+++ b/source/redux/wallet.js
@@ -29,7 +29,7 @@ export const walletSlice = createSlice({
     assetsLoading: true,
     collections: [],
     collectionsLoading: false,
-    transactionsLoading: true,
+    transactionsLoading: false,
   },
   reducers: {
     updateWalletDetails: (state, action) => {

From 5f019801371039f2faebdc5ea41e318910e4a039 Mon Sep 17 00:00:00 2001
From: tomiir <rocchitomas@gmail.com>
Date: Thu, 11 Aug 2022 19:06:58 +0200
Subject: [PATCH 12/12] Fix: custom network off msg for non-icp tokens (#539)

* Added valid url validation

* Installed controller 0.19.7 with activity performance improvements

* Fixed error message for non-icp tokens when custom network is down

Co-authored-by: rocky-fleek <tomas@fleek.co>
---
 source/ui/AssetItem/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/ui/AssetItem/index.jsx b/source/ui/AssetItem/index.jsx
index f30475b1..e16247e3 100644
--- a/source/ui/AssetItem/index.jsx
+++ b/source/ui/AssetItem/index.jsx
@@ -39,7 +39,7 @@ const AssetItem = ({
             <>
               <Typography variant="h5" className={classes.failedTitle}>{name}</Typography>
               <Typography variant="subtitle2" className={classes.failedDescription}>
-                {t(`tokens.${ledgerNotSpecified ? 'ledgerNotSpecified' : 'failedToFetchBalance'}`)}
+                {t(`tokens.${ledgerNotSpecified && name === 'ICP' ? 'ledgerNotSpecified' : 'failedToFetchBalance'}`)}
               </Typography>
             </>
           )