- {collection?.tokens?.map((nft) => {
- const name = nft.name || `#${nft.index}`;
- return (
-
handleNftClick(nft)}
- data-testid={`nft-id-${name}`}
- >
- {icns ? (
- handleNftClick(nft)}
- />
- ) : (
- handleNftClick(nft)}
- />
- )}
- {!icns && (
-
- {name.length > 12 ? shortICNSName(name) : name}
-
- )}
-
- );
- })}
+
+ {expanded && (
+
+ {itemRows?.map(({ index, size }) => {
+ const rowNfts = rows[index];
+ return (
+
+ {rowNfts?.map((nft) => {
+ const name = nft?.name || `#${nft?.index}`;
+ return (
+
handleNftClick(nft)}
+ data-testid={`nft-id-${name}`}
+ style={{ height: `${size}px` }}
+ >
+ {icns ? (
+ handleNftClick(nft)}
+ />
+ ) : (
+ handleNftClick(nft)}
+ />
+ )}
+ {!icns && (
+
+ {name.length > 12 ? shortICNSName(name) : name}
+
+ )}
+
+ );
+ })}
+
+ );
+ })}
+
+ )}
);
diff --git a/source/components/NFTs/components/NFTCollection/styles.js b/source/components/NFTs/components/NFTCollection/styles.js
index 6eae7495..4bdfda6c 100644
--- a/source/components/NFTs/components/NFTCollection/styles.js
+++ b/source/components/NFTs/components/NFTCollection/styles.js
@@ -11,7 +11,7 @@ export default makeStyles(() => ({
display: 'grid',
justifyContent: 'space-evenly',
gridTemplateColumns: 'repeat(auto-fill, 112px)',
- overflow: 'hidden',
+ padding: '0 5px',
},
nft: {
height: 112,
diff --git a/source/components/NFTs/index.jsx b/source/components/NFTs/index.jsx
index 5e1aabdc..8f5255e5 100644
--- a/source/components/NFTs/index.jsx
+++ b/source/components/NFTs/index.jsx
@@ -1,9 +1,9 @@
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { HANDLER_TYPES, sendMessage } from '@background/Keyring';
+import { getNFTs } from '@redux/nfts';
+
import LoadingWrapper from '../LoadingWrapper';
-import { setCollections, setCollectionsLoading } from '../../redux/wallet';
import useStyles from './styles';
import EmptyState from './components/EmptyState';
import NFTCollection from './components/NFTCollection';
@@ -12,23 +12,12 @@ const NFTs = () => {
const classes = useStyles();
const dispatch = useDispatch();
- const {
- collections, collectionsLoading, principalId, optimisticNFTUpdate,
- } = useSelector((state) => state.wallet);
+ const { principalId } = useSelector((state) => state.wallet);
+ const { collections, collectionsLoading } = useSelector((state) => state.nfts);
useEffect(() => {
- // Update cache
if (!collectionsLoading) {
- dispatch(setCollectionsLoading(true));
- sendMessage({
- type: HANDLER_TYPES.GET_NFTS,
- params: {},
- }, (nftCollections) => {
- if (nftCollections?.length && !optimisticNFTUpdate) {
- dispatch(setCollections({ collections: nftCollections, principalId }));
- }
- dispatch(setCollectionsLoading(false));
- });
+ dispatch(getNFTs());
}
}, [principalId]);
diff --git a/source/components/Profile/components/AccountItem/index.jsx b/source/components/Profile/components/AccountItem/index.jsx
index c2f00b8d..4676c777 100644
--- a/source/components/Profile/components/AccountItem/index.jsx
+++ b/source/components/Profile/components/AccountItem/index.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import PropTypes from 'prop-types';
import clsx from 'clsx';
import { IconButton } from '@material-ui/core';
import { useDispatch } from 'react-redux';
@@ -7,16 +8,17 @@ import { useHiddenAccounts, toggleAccountHidden } from '@redux/profile';
import BluePencil from '@assets/icons/blue-pencil.svg';
import InvisibleIcon from '@assets/icons/invisible.svg';
import VisibleIcon from '@assets/icons/visible.svg';
+import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
import UserIcon from '../../../UserIcon';
import useStyles from './styles';
const AccountItem = ({
account,
- isCurrentAccount,
isEditing,
handleChangeAccount,
handleEditAccount,
+ handleRemoveAccountModal,
}) => {
const classes = useStyles();
const hiddenAccounts = useHiddenAccounts();
@@ -34,20 +36,24 @@ const AccountItem = ({
return (
handleChangeAccount(e, account.walletId)}
>
-
-
- {account.icnsData.reverseResolvedName ? account.icnsData.reverseResolvedName : account.name }
+
+
+ {account?.icnsData?.reverseResolvedName || account?.name}
@@ -62,16 +68,40 @@ const AccountItem = ({
src={BluePencil}
/>
- { isEditing && (
-
{ toggleAccountVisibility(e, account.walletId) }}
- >
- 
-
+ {!(account.type === 'MNEMONIC') && (
+
handleRemoveAccountModal(e, account)}>
+
+
+ )}
+ {isEditing && (
+
{
+ toggleAccountVisibility(e, account.walletId);
+ }}
+ >
+
+
)}
);
};
+AccountItem.propTypes = {
+ account: PropTypes.shape({
+ name: PropTypes.string,
+ walletId: PropTypes.string,
+ icon: PropTypes.string,
+ type: PropTypes.string,
+ icnsData: PropTypes.shape({
+ reverseResolvedName: PropTypes.string,
+ names: PropTypes.arrayOf(PropTypes.string),
+ }),
+ }).isRequired,
+ isEditing: PropTypes.bool.isRequired,
+ handleChangeAccount: PropTypes.func.isRequired,
+ handleRemoveAccountModal: PropTypes.func.isRequired,
+ handleEditAccount: PropTypes.func.isRequired,
+};
+
export default AccountItem;
diff --git a/source/components/Profile/components/AccountItem/styles.js b/source/components/Profile/components/AccountItem/styles.js
index 11e12e71..6f92ed0b 100644
--- a/source/components/Profile/components/AccountItem/styles.js
+++ b/source/components/Profile/components/AccountItem/styles.js
@@ -1,5 +1,5 @@
import { makeStyles } from '@material-ui/core/styles';
-import SMOOTH_TRANSITION from '@shared/styles/transitions';
+import SMOOTH_TRANSITION from '@shared/styles/transitions';
export default makeStyles(() => ({
accountItemContainer: {
diff --git a/source/components/Profile/index.jsx b/source/components/Profile/index.jsx
index 93423cbe..252f51a7 100644
--- a/source/components/Profile/index.jsx
+++ b/source/components/Profile/index.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
import React, { useState, useEffect } from 'react';
import MenuList from '@material-ui/core/MenuList';
import Button from '@material-ui/core/Button';
@@ -12,11 +13,12 @@ import { useTranslation } from 'react-i18next';
import extensionizer from 'extensionizer';
import Plus from '@assets/icons/plus.svg';
+import LinkEmoji from '@assets/icons/link-emoji.png';
+
import {
setAccountInfo,
setAssets,
setAssetsLoading,
- setCollections,
setTransactions,
} from '@redux/wallet';
import { getRandomEmoji } from '@shared/constants/emojis';
@@ -27,6 +29,7 @@ import { setICNSData } from '@redux/icns';
import { useICPPrice } from '@redux/icp';
import { getContacts } from '@redux/contacts';
import { useMenuItems } from '@hooks';
+import { Dialog, Button as CButton } from '@components';
import ConnectAccountsModal from '../ConnectAccountsModal';
import HoverAnimation from '../HoverAnimation';
import MenuItem from '../MenuItem';
@@ -39,6 +42,8 @@ import { AccountItem } from './components';
import UserIcon from '../UserIcon';
import useStyles from './styles';
+const IMPORT_WALLET_ENABLED = process.env.TARGET_BROWSER !== 'firefox';
+
const Profile = ({ disableProfile }) => {
const classes = useStyles();
const { t } = useTranslation();
@@ -46,7 +51,7 @@ const Profile = ({ disableProfile }) => {
const { navigator } = disableProfile ? {} : useRouter();
const [isEditing, setIsEditing] = useState(false);
- const { walletId, principalId } = useSelector((state) => state.wallet);
+ const { walletId } = useSelector((state) => state.wallet);
const icpPrice = useICPPrice();
const [open, setOpen] = useState(false);
@@ -60,6 +65,8 @@ const Profile = ({ disableProfile }) => {
const [accountName, setAccountName] = useState('');
const [error, setError] = useState(null);
const [connectedWallets, setConnectedWallets] = useState([]);
+ const [selectedRemoveAccount, setSelectedRemovedAccount] = useState(null);
+ const [openRemoveModal, setOpenRemoveModal] = useState(false);
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
@@ -75,7 +82,7 @@ const Profile = ({ disableProfile }) => {
setAccounts(walletsArray);
}
});
- }, []);
+ }, [open]);
const handleChangeAccountName = (e) => {
const name = e.target.value;
@@ -112,7 +119,6 @@ const Profile = ({ disableProfile }) => {
};
const executeAccountSwitch = (wallet) => {
- dispatch(setCollections({ collections: [], principalId }));
sendMessage({ type: HANDLER_TYPES.SET_CURRENT_PRINCIPAL, params: wallet },
(state) => {
const walletsArray = Object.values(state?.wallets);
@@ -181,8 +187,44 @@ const Profile = ({ disableProfile }) => {
setSelectedWallet(null);
};
+ const handleOpenImportWallet = () => {
+ navigator.navigate('import-wallet');
+ };
+
+ const handleRemoveAccountModal = (e, account) => {
+ e.stopPropagation();
+ setOpenRemoveModal(true);
+ setSelectedRemovedAccount(account);
+ };
+
+ const handleRemoveAccount = () => {
+ sendMessage({
+ type: HANDLER_TYPES.REMOVE_PEM_ACCOUNT,
+ params: selectedRemoveAccount.walletId,
+ }, () => executeAccountSwitch(accounts[0].walletId));
+ setOpenRemoveModal(false);
+ setOpen(false);
+ };
+
+
return (
<>
+