+
+ {t('removeToken.mainText')}
+ {symbol}
+ {t('removeToken.mainTextContinue')}
+
+
+ {t('removeToken.disclaimer')} + + )} + confirmText={t('removeToken.action')} + buttonVariant="danger" + onClick={handleRemoveAssetDisplay} + onClose={handleModalClose} + />{name || ''}
diff --git a/source/components/ConnectAccountsModal/index.jsx b/source/components/ConnectAccountsModal/index.jsx
index 19ac88e6..dd4d7664 100644
--- a/source/components/ConnectAccountsModal/index.jsx
+++ b/source/components/ConnectAccountsModal/index.jsx
@@ -36,8 +36,8 @@ const ConnectAccountsModal = ({
getReverseResolvedNames();
}, [wallets]);
- const connectAccountToTab = (wallet) => {
- getApps(wallet.walletNumber.toString(), (apps) => {
+ const connectAccountToTab = (walletId) => {
+ getApps(walletId.toString(), (apps) => {
// If any other account is connected, create an entry for the current wallet
const date = new Date().toISOString();
const url = getTabURL(tab);
@@ -55,19 +55,21 @@ const ConnectAccountsModal = ({
],
},
};
- setApps(wallet.walletNumber.toString(), newApps);
+ setApps(walletId.toString(), newApps);
});
};
const handleConfirm = () => {
- Object.keys(walletsToUpdate).forEach((walletId) => connectAccountToTab(wallets[walletId], tab));
+ Object.keys(walletsToUpdate).forEach((walletId) => {
+ walletsToUpdate[walletId] && connectAccountToTab(walletId, tab);
+ });
onConfirm?.();
setWalletsToUpdate({});
setSelectAllWallets(false);
onClose();
};
- const onCheckWallet = (walletId) => (event) => {
+ const onCheckWallet = (event, walletId) => {
setWalletsToUpdate({
...walletsToUpdate,
[walletId]: event.target.checked,
@@ -77,7 +79,7 @@ const ConnectAccountsModal = ({
const handleSelectAll = (event) => {
const newWalletsToUpdate = {};
wallets.forEach((wallet) => {
- newWalletsToUpdate[wallet.walletNumber] = event.target.checked;
+ newWalletsToUpdate[wallet.walletId] = event.target.checked;
});
setSelectAllWallets(event.target.checked);
setWalletsToUpdate(newWalletsToUpdate);
@@ -116,12 +118,13 @@ ConnectAccountsModal.propTypes = {
tab: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)).isRequired,
open: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
- onConfirm: PropTypes.func.isRequired,
+ onConfirm: PropTypes.func,
connectedWallets: PropTypes.arrayOf(PropTypes.number),
};
ConnectAccountsModal.defaultProps = {
connectedWallets: [],
+ onConfirm: () => {},
};
export default ConnectAccountsModal;
diff --git a/source/components/ConnectAccountsModal/layout.jsx b/source/components/ConnectAccountsModal/layout.jsx
index 6090f288..3542d7cb 100644
--- a/source/components/ConnectAccountsModal/layout.jsx
+++ b/source/components/ConnectAccountsModal/layout.jsx
@@ -46,14 +46,14 @@ const ConnectAccountsModalLayout = ({
onScroll={onScroll}
>
{wallets.map((wallet) => {
- const alreadyConnected = connectedWallets.includes(wallet.walletNumber);
+ const alreadyConnected = connectedWallets.includes(wallet.walletId);
return (
{
const classes = useStyles();
const icpPrice = useICPPrice();
const dispatch = useDispatch();
- const { getContacts } = useContacts();
const { tabIndex } = disableNavigation ? {} : useRouter();
const {
principalId,
- walletNumber,
+ walletId,
assetsLoading,
transactionsLoading,
collectionsLoading,
@@ -61,7 +60,7 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
extensionizer.tabs.query({ active: true }, (tabs) => {
const url = getTabURL(tabs?.[0]);
// Check if new wallet is connected to the current page
- getApps(walletNumber.toString(), (apps) => {
+ getApps(walletId, (apps) => {
const isSiteConnected = !!apps?.[url];
setConnected(isSiteConnected);
});
@@ -118,7 +117,7 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
if (icpPrice) {
// Contacts
- getContacts(true);
+ dispatch(getContacts({ refresh: true }));
loadAssets();
loadCollections();
@@ -137,6 +136,7 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
setDisplayCustomToken(false)} />
+ )
+ }
+
+
+ {t('addNFT.confirmText')}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Step2;
+
+Step2.propTypes = {
+ selectedToken: PropTypes.objectOf(PropTypes.string).isRequired,
+ handleClose: PropTypes.func.isRequired,
+};
diff --git a/source/views/Extension/Views/AddNFT/components/CustomNFT.jsx b/source/views/Extension/Views/AddNFT/components/CustomNFT.jsx
new file mode 100644
index 00000000..47b55f35
--- /dev/null
+++ b/source/views/Extension/Views/AddNFT/components/CustomNFT.jsx
@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import { useTranslation } from 'react-i18next';
+import {
+ Button,
+ FormItem,
+ TextInput,
+ Container,
+ Alert,
+ Dialog,
+ Select,
+} from '@components';
+import { validateCanisterId } from '@shared/utils/ids';
+import { HANDLER_TYPES, sendMessage } from '@background/Keyring';
+import extension from 'extensionizer';
+import { customTokensUrl } from '@shared/constants/urls';
+import useStyles from '../styles';
+
+const FUNGIBLE_STANDARDS = { DIP721v2: 'DIP721v2', };
+
+const CustomNFT = ({ handleChangeSelectedNFT }) => {
+ const { t } = useTranslation();
+ const [canisterId, setCanisterId] = useState('');
+ const [standard, setStandard] = useState(FUNGIBLE_STANDARDS.DIP721v2);
+ const [invalidToken, setInvalidToken] = useState(null);
+ const [tokenError, setTokenError] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [dialogOpen, setDialogOpen] = useState(false);
+ const classes = useStyles();
+
+ const handleChangeId = (e) => {
+ setCanisterId(e.target.value.trim());
+ setTokenError('');
+ };
+
+ useEffect(() => {
+ if (canisterId) {
+ setInvalidToken(!validateCanisterId(canisterId));
+ }
+ }, [canisterId]);
+
+ const handleSubmit = () => {
+ setLoading(true);
+ sendMessage(
+ {
+ type: HANDLER_TYPES.GET_NFT_INFO,
+ params: { canisterId, standard },
+ },
+ async (nftInfo) => {
+ if (nftInfo?.error) {
+ setTokenError(nftInfo?.error);
+ } else {
+ handleChangeSelectedNFT(nftInfo)();
+ }
+ setLoading(false);
+ },
+ );
+ };
+
+ const handleCloseDialog = (value) => {
+ setStandard(value?.name ?? standard);
+ setDialogOpen(false);
+ setTokenError('');
+ };
+
+ const isInvalidInterfaceError = tokenError.includes('Call failed:');
+ const isInvalidCanisterError = tokenError === 'The provided canister id is invalid';
+ const isNFTNotSupportedError = tokenError === 'Non fungible tokens are not supported yet';
+
+ return (
+
+
+
+
+
+ setDialogOpen(true)}
+ shadow
+ className={classes.select}
+ data-testid="token-standard-select"
+ />
+ )}
+ />
+
+ {dialogOpen && (
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default CustomNFT;
+
+CustomNFT.propTypes = {
+ handleChangeSelectedNFT: PropTypes.func.isRequired,
+};
diff --git a/source/views/Extension/Views/AddNFT/hooks/useSteps.jsx b/source/views/Extension/Views/AddNFT/hooks/useSteps.jsx
new file mode 100644
index 00000000..823fd72b
--- /dev/null
+++ b/source/views/Extension/Views/AddNFT/hooks/useSteps.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { LinkButton } from '@components';
+import { useTranslation } from 'react-i18next';
+import { useRouter } from '@components/Router';
+import BackIcon from '@assets/icons/back.svg';
+import Step1 from '../Steps/Step1';
+import Step2 from '../Steps/Step2';
+
+const useSteps = () => {
+ const [step, setStep] = useState(0);
+ const { navigator } = useRouter();
+ const { t } = useTranslation();
+
+ const [selectedToken, setSelectedToken] = useState(null);
+
+ const handleChangeSelectedNFT = (token) => () => {
+ setSelectedToken(token);
+ setStep(1);
+ };
+
+ const handleChangeStep = (index) => setStep(index);
+ const handleClose = () => navigator.navigate('home');
+
+ const leftButton = (onClick) =>
+
+ );
+};
+
+export default AddNFT;
diff --git a/source/views/Extension/Views/AddNFT/styles.js b/source/views/Extension/Views/AddNFT/styles.js
new file mode 100644
index 00000000..28ec80a0
--- /dev/null
+++ b/source/views/Extension/Views/AddNFT/styles.js
@@ -0,0 +1,105 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export default makeStyles((theme) => ({
+ centered: {
+ textAlign: 'center',
+ padding: '0 32px',
+ },
+ tokenItem: {
+ cursor: 'pointer',
+ display: 'flex',
+ alignItems: 'center',
+ padding: '6px 0',
+ },
+ tokenImage: {
+ position: 'relative',
+ height: 41,
+ width: 41,
+ marginRight: theme.spacing(1),
+ },
+ verified: {
+ position: 'absolute',
+ top: -20,
+ right: -20,
+ },
+ confirmToken: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ padding: `${theme.spacing(1)}px 0`,
+ },
+ leftContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-evenly',
+ },
+ rightContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-evenly',
+ marginLeft: 'auto',
+ textAlign: 'end',
+ },
+ emptyResults: {
+ display: 'flex',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ alignItems: 'center',
+ width: '100%',
+ height: 190,
+ margin: '12px 0',
+ },
+ emoji: {
+ fontSize: 32,
+ },
+ tokensContainer: {
+ height: 202,
+ margin: '0 0 12px 0',
+ overflow: 'auto',
+ },
+ poweredByDab: {
+ position: 'absolute',
+ margin: 'auto',
+ left: 0,
+ right: 0,
+ bottom: 8,
+ },
+ dabTokenContainer: {
+ height: 190,
+ margin: '12px 0',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-evenly',
+ position: 'relative',
+ alignItems: 'center',
+ textAlign: 'center',
+ padding: '0 12px',
+ },
+ dabImage: {
+ height: 57,
+ width: 57,
+ cursor: 'pointer',
+ },
+ '@keyframes appear': {
+ '0%': {
+ opacity: '0',
+ height: 0,
+ },
+ '100%': {
+ opacity: '1',
+ height: 51,
+ },
+ },
+ appearAnimation: {
+ animationName: '$appear',
+ animationDuration: '0.5s',
+ },
+ learnMore: {
+ textDecoration: 'underline',
+ cursor: 'pointer',
+ },
+ select: {
+ height: 47,
+ borderRadius: 6,
+ },
+}));
diff --git a/source/views/Extension/Views/AddToken/styles.js b/source/views/Extension/Views/AddToken/styles.js
index 28ec80a0..24718c26 100644
--- a/source/views/Extension/Views/AddToken/styles.js
+++ b/source/views/Extension/Views/AddToken/styles.js
@@ -16,6 +16,10 @@ export default makeStyles((theme) => ({
height: 41,
width: 41,
marginRight: theme.spacing(1),
+ borderRadius: '100%',
+ '& > img': {
+ borderRadius: '100%',
+ }
},
verified: {
position: 'absolute',
diff --git a/source/views/Extension/Views/Contacts/index.jsx b/source/views/Extension/Views/Contacts/index.jsx
index 0d0bfc87..4c86326e 100644
--- a/source/views/Extension/Views/Contacts/index.jsx
+++ b/source/views/Extension/Views/Contacts/index.jsx
@@ -1,6 +1,7 @@
import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux'
import { Layout, Header } from '@components';
-import { useContacts } from '@hooks';
+import { getContacts } from '@redux/contacts';
import useSteps from './hooks/useSteps';
const Contacts = () => {
@@ -10,9 +11,9 @@ const Contacts = () => {
right,
center,
} = useSteps();
- const { getContacts } = useContacts();
+ const dispatch = useDispatch();
- useEffect(getContacts, []);
+ useEffect(() => { dispatch(getContacts()); }, []);
return (
diff --git a/source/views/Extension/Views/ExportIdentity/steps/Step2.jsx b/source/views/Extension/Views/ExportIdentity/steps/Step2.jsx
index 52490fa7..9e20d382 100644
--- a/source/views/Extension/Views/ExportIdentity/steps/Step2.jsx
+++ b/source/views/Extension/Views/ExportIdentity/steps/Step2.jsx
@@ -9,23 +9,26 @@ import shortAddress from '@shared/utils/short-address';
import { useTranslation } from 'react-i18next';
import { HANDLER_TYPES, sendMessage } from '@background/Keyring';
import download from '@shared/utils/download-text';
+import { useSelector } from 'react-redux';
const Step2 = () => {
const { t } = useTranslation();
const [accounts, setAccounts] = useState([]);
- const [selectedAccountNumber, setSelectedAccountNumber] = useState(null);
+ const [selectedAccountId, setSelectedAccountId] = useState(null);
const [openAccounts, setOpenAccounts] = useState(false);
+ const { name } = useSelector((state) => state.wallet);
+
const handleCloseAccounts = (value) => {
setOpenAccounts(false);
- setSelectedAccountNumber(value.walletNumber);
+ setSelectedAccountId(value.walletId);
};
const handleDownloadPemFile = () => {
- sendMessage({ type: HANDLER_TYPES.GET_PEM_FILE, params: selectedAccountNumber },
+ sendMessage({ type: HANDLER_TYPES.GET_PEM_FILE, params: selectedAccountId },
(state) => {
if (state) {
- download('identity.pem', state);
+ download(`${name}.pem`, state);
}
});
};
@@ -33,14 +36,14 @@ const Step2 = () => {
useEffect(() => {
sendMessage({ type: HANDLER_TYPES.GET_STATE, params: {} },
(state) => {
- if (state?.wallets?.length) {
+ if (Object.values(state?.wallets).length) {
setAccounts(state.wallets);
- setSelectedAccountNumber(state.currentWalletId);
+ setSelectedAccountId(state.currentWalletId);
}
});
}, []);
- const selectedAccount = accounts[selectedAccountNumber];
+ const selectedAccount = accounts[selectedAccountId];
return (
@@ -63,7 +66,7 @@ const Step2 = () => {
/>
+
+ {t('removeToken.disclaimer')} + + )} + confirmText={t('removeToken.action')} + buttonVariant="danger" + onClick={handleRemoveAssetDisplay} + onClose={handleModalClose} + />
{failed && !loading
@@ -50,7 +111,7 @@ const AssetItem = ({
-
);
};
@@ -98,4 +169,5 @@ AssetItem.propTypes = {
loading: PropTypes.bool.isRequired,
failed: PropTypes.bool,
assetNameTestId: PropTypes.string,
+ removeAsset: PropTypes.func.isRequired,
};
diff --git a/source/components/AssetItem/styles.js b/source/components/AssetItem/styles.js
index ed3d6b0d..79b00a9a 100644
--- a/source/components/AssetItem/styles.js
+++ b/source/components/AssetItem/styles.js
@@ -8,6 +8,13 @@ export default makeStyles((theme) => ({
justifyContent: 'flex-start',
padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
},
+ '@keyframes swipeLeft': {
+ from: { transform: 'translateX(0px)' },
+ to: { transform: 'translateX(-100%)' },
+ },
+ removeAnimation: {
+ animation: '$swipeLeft 0.6s forwards',
+ },
image: {
height: 41,
width: 41,
@@ -63,4 +70,24 @@ export default makeStyles((theme) => ({
opacity: 0.9,
},
},
+ deleteToken: {
+ opacity: 0,
+ width: 0,
+ transition: '0.6s',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ deleteTokenMoveRight: {
+ marginLeft: 'auto !important',
+ },
+ deleteTokenActive: {
+ opacity: 1,
+ margin: '0 4px 0 21px',
+
+ '& > img': {
+ cursor: 'pointer',
+ }
+ }
}));
diff --git a/source/components/ConnectAccountsModal/components/ConnectAccountItem/index.jsx b/source/components/ConnectAccountsModal/components/ConnectAccountItem/index.jsx
index 0095716e..b7da819c 100644
--- a/source/components/ConnectAccountsModal/components/ConnectAccountItem/index.jsx
+++ b/source/components/ConnectAccountsModal/components/ConnectAccountItem/index.jsx
@@ -13,9 +13,14 @@ const ConnectAccountItem = ({
connected, wallet, checked, onCheck, name,
}) => {
const classes = useStyles();
+
+ const handleCheckboxChange = (event) => {
+ !connected && onCheck(event, wallet.walletId);
+ };
+
return (
+ ![]()
setOpenDelete(true)}
+ alt="delete-token"
+ src={DeleteIcon}
+ />
+
+ )}
setSelectorOpen(true)}
+ data-testid="network-selector"
>
setSelectorOpen(false)}
refreshWallet={refreshWallet}
+ data-testid="network-select-modal"
/>
)}
diff --git a/source/components/ConnectionStatus/components/NetworkCard/index.jsx b/source/components/ConnectionStatus/components/NetworkCard/index.jsx
index 6aaf0a12..6e8c2db6 100644
--- a/source/components/ConnectionStatus/components/NetworkCard/index.jsx
+++ b/source/components/ConnectionStatus/components/NetworkCard/index.jsx
@@ -10,7 +10,10 @@ import { setUseICNS } from '@redux/icns';
import useStyles from './styles';
-const NetworkCard = ({ network, withDivider, onClick }) => {
+const NetworkCard = ({
+ network,
+ withDivider, onClick, NetworkCardTestId,
+}) => {
const classes = useStyles();
const { currentNetwork } = useSelector((state) => state.network);
const dispatch = useDispatch();
@@ -26,6 +29,7 @@ const NetworkCard = ({ network, withDivider, onClick }) => {
{
)}
>
-
+
{capitalize(currentNetwork?.name || 'Mainnet')}
@@ -170,6 +170,7 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
{
);
};
+NetworkCard.defaultProps = {
+ NetworkCardTestId: PropTypes.string,
+};
+
NetworkCard.propTypes = {
network: PropTypes.shape({
id: PropTypes.string.isRequired,
@@ -51,6 +59,7 @@ NetworkCard.propTypes = {
}).isRequired,
withDivider: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired,
+ NetworkCardTestId: PropTypes.string,
};
export default NetworkCard;
diff --git a/source/components/ConnectionStatus/components/NetworkSelector/index.jsx b/source/components/ConnectionStatus/components/NetworkSelector/index.jsx
index edfcc1a5..3d7ef096 100644
--- a/source/components/ConnectionStatus/components/NetworkSelector/index.jsx
+++ b/source/components/ConnectionStatus/components/NetworkSelector/index.jsx
@@ -21,7 +21,7 @@ const NetworkSelector = ({ onClose, refreshWallet }) => {
};
return (
<>
-
{
accounts.map((account) => {
- const isHidden = hiddenAccounts.includes(account.walletNumber);
- const isExactWalletNumber = account.walletNumber === walletNumber;
- return (!isHidden || isEditing) && (
- }
- onClick={!isHidden && handleChangeAccount(account.walletNumber)}
- selected={isExactWalletNumber}
- className={clsx(isHidden && classes.hiddenAccount)}
- itemNameTestId="account-name"
- endIcon={isExactWalletNumber ? (
-
- 
-
- ) : isEditing ? (
-
- 
-
- ) : null}
+ const isCurrentAccount = account.walletId === walletId;
+
+ return (
+
handleRemoveAsset(asset.canisterId)}
key={`${asset.symbol}-${asset.canisterId}-${currentNetwork?.id}`}
updateToken={handleFetchAssets}
+ protectedAsset={!Object.keys(TOKENS).includes(asset.symbol)}
loading={loading}
failed={!!asset?.error}
assetNameTestId="asset-name"
@@ -87,10 +98,15 @@ const Tokens = () => {
}
+ {
+ displayCustomToken && (
+
+
Networks
@@ -51,10 +52,14 @@ function NFTCollection({
)}
diff --git a/source/components/NFTs/index.jsx b/source/components/NFTs/index.jsx
index d51a359a..5e1aabdc 100644
--- a/source/components/NFTs/index.jsx
+++ b/source/components/NFTs/index.jsx
@@ -41,15 +41,14 @@ const NFTs = () => {
?
@@ -37,6 +38,7 @@ const NetworkSelector = ({ onClose, refreshWallet }) => {
network={network}
withDivider={index < networks.length - 1}
onClick={handleNetworkClick}
+ NetworkCardTestId="network-card"
/>
))}
diff --git a/source/components/ConnectionStatus/components/NetworkSelector/styles.js b/source/components/ConnectionStatus/components/NetworkSelector/styles.js
index 8080ccb0..3dddb7ef 100644
--- a/source/components/ConnectionStatus/components/NetworkSelector/styles.js
+++ b/source/components/ConnectionStatus/components/NetworkSelector/styles.js
@@ -4,7 +4,7 @@ import SHADOW_1 from '@shared/styles/shadows';
export default makeStyles(() => ({
background: {
width: '100%',
- height: 595,
+ height: '100vh',
zIndex: 5,
position: 'absolute',
top: 0,
diff --git a/source/components/ConnectionStatus/styles.js b/source/components/ConnectionStatus/styles.js
index 384acb8a..2605a1c8 100644
--- a/source/components/ConnectionStatus/styles.js
+++ b/source/components/ConnectionStatus/styles.js
@@ -20,7 +20,7 @@ export default makeStyles((theme) => ({
},
fullWidth,
bannerText: {
- fontWeight: 'bold',
+ fontWeight: '600',
},
active: {
background: theme.palette.success.main,
diff --git a/source/components/IDInput/index.jsx b/source/components/IDInput/index.jsx
index f33d7246..18d2642b 100644
--- a/source/components/IDInput/index.jsx
+++ b/source/components/IDInput/index.jsx
@@ -8,9 +8,8 @@ import { useTranslation } from 'react-i18next';
import { CircularProgress, Grid } from '@material-ui/core';
import { getRandomEmoji } from '@shared/constants/emojis';
-import { addContact as addContactAction } from '@redux/contacts';
+import { getContacts, addContact as addContactAction } from '@redux/contacts';
-import { useContacts } from '@hooks';
import ActionDialog from '../ActionDialog';
import ContactItem from '../ContactItem';
import ContactList from '../ContactList';
@@ -26,7 +25,6 @@ const IDInput = ({
}) => {
const classes = useStyles();
const { t } = useTranslation();
- const { getContacts } = useContacts();
const dispatch = useDispatch();
const [selectedContact, setSelectedContact] = useState(null);
@@ -39,7 +37,7 @@ const IDInput = ({
const { contactsLoading } = useSelector((state) => state.contacts);
useEffect(() => {
- getContacts();
+ dispatch(getContacts());
}, []);
const isUserAddress = useMemo(
diff --git a/source/components/NFTs/components/NFTCollection/index.jsx b/source/components/NFTs/components/NFTCollection/index.jsx
index af503542..868cf44e 100644
--- a/source/components/NFTs/components/NFTCollection/index.jsx
+++ b/source/components/NFTs/components/NFTCollection/index.jsx
@@ -10,6 +10,7 @@ import { shortICNSName } from '@shared/services/ICNS';
import { useRouter } from '@components/Router';
import { setSelectedNft } from '@redux/nfts';
import { NFT_COLLECTION_DEFAULT_TYPES } from '@shared/constants/nft';
+import imageIcon from '@assets/icons/imageIcon.svg';
import NFTDisplayer from '../../../NFTDisplayer';
import ICNSDisplay from '../../../ICNSDisplay';
@@ -41,7 +42,7 @@ function NFTCollection({
{collection.tokens.length}
-
- {collections.map((collection, index) => !!collection?.tokens?.length
- && (
-
)
}
diff --git a/source/components/Profile/components/AccountItem/index.jsx b/source/components/Profile/components/AccountItem/index.jsx
new file mode 100644
index 00000000..c2f00b8d
--- /dev/null
+++ b/source/components/Profile/components/AccountItem/index.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import clsx from 'clsx';
+import { IconButton } from '@material-ui/core';
+import { useDispatch } from 'react-redux';
+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 UserIcon from '../../../UserIcon';
+import useStyles from './styles';
+
+const AccountItem = ({
+ account,
+ isCurrentAccount,
+ isEditing,
+ handleChangeAccount,
+ handleEditAccount,
+}) => {
+ const classes = useStyles();
+ const hiddenAccounts = useHiddenAccounts();
+ const dispatch = useDispatch();
+
+ const isHidden = hiddenAccounts.includes(account.walletId);
+
+ const toggleAccountVisibility = (e, walletId) => {
+ e.preventDefault();
+ e.stopPropagation();
+ dispatch(toggleAccountHidden(walletId));
+ };
+
+ if (isHidden && !isEditing) return null;
+
+ return (
+ handleChangeAccount(e, account.walletId)}
+ >
+
+ );
+};
+
+export default AccountItem;
diff --git a/source/components/Profile/components/AccountItem/styles.js b/source/components/Profile/components/AccountItem/styles.js
new file mode 100644
index 00000000..11e12e71
--- /dev/null
+++ b/source/components/Profile/components/AccountItem/styles.js
@@ -0,0 +1,71 @@
+import { makeStyles } from '@material-ui/core/styles';
+import SMOOTH_TRANSITION from '@shared/styles/transitions';
+
+export default makeStyles(() => ({
+ accountItemContainer: {
+ width: '100%',
+ height: '52px',
+ padding: '8px 21px 8px 27px',
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ cursor: 'pointer',
+ color: '#000000',
+ transition: `${SMOOTH_TRANSITION}`,
+
+ '&:hover': {
+ background: 'linear-gradient(94.95deg, rgba(255, 231, 1, 0.12) -1.41%, rgba(250, 81, 211, 0.12) 34.12%, rgba(16, 217, 237, 0.12) 70.19%, rgba(82, 255, 83, 0.12) 101.95%)',
+
+ '& > div:last-child': {
+ opacity: '1 !important',
+ },
+ },
+ },
+ hiddenAccount: {
+ color: 'rgba(0, 0, 0, 0.26)',
+ opacity: 0.7,
+ },
+ leftContainer: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ },
+ accountDetails: {
+ display: 'flex',
+ flexDirection: 'column',
+ marginLeft: '-3px',
+ },
+ accountName: {
+ fontWeight: '500',
+ fontSize: '14px',
+ lineHeight: '20px',
+ },
+ accountType: {
+ fontWeight: 500,
+ fontSize: '12px',
+ lineHeight: '20px',
+ color: 'rgba(0, 0, 0, 0.4)',
+ },
+ rightContainer: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ opacity: '0',
+
+ transition: `${SMOOTH_TRANSITION}`,
+ '& > button': {
+ padding: '5px',
+ '& > span': {
+ width: '24px',
+ height: '24px',
+ },
+ },
+ },
+ disabledIcon: {
+ opacity: 0.3,
+ },
+
+}));
diff --git a/source/components/Profile/components/index.js b/source/components/Profile/components/index.js
new file mode 100644
index 00000000..d988ab67
--- /dev/null
+++ b/source/components/Profile/components/index.js
@@ -0,0 +1 @@
+export { default as AccountItem } from './AccountItem';
diff --git a/source/components/Profile/index.jsx b/source/components/Profile/index.jsx
index be759d8e..93423cbe 100644
--- a/source/components/Profile/index.jsx
+++ b/source/components/Profile/index.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import Drawer from '@material-ui/core/Drawer';
import Divider from '@material-ui/core/Divider';
import { HANDLER_TYPES, sendMessage } from '@background/Keyring';
-import { IconButton, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
import clsx from 'clsx';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
@@ -19,16 +19,14 @@ import {
setCollections,
setTransactions,
} from '@redux/wallet';
-import BluePencil from '@assets/icons/blue-pencil.svg';
-import VisibleIcon from '@assets/icons/visible.svg';
-import InvisibleIcon from '@assets/icons/invisible.svg';
import { getRandomEmoji } from '@shared/constants/emojis';
import { getTabURL } from '@shared/utils/chrome-tabs';
import { getWalletsConnectedToUrl, getApp } from '@modules/storageManager';
-import { toggleAccountHidden, useHiddenAccounts } from '@redux/profile';
+import { setEditAccount } from '@redux/profile';
import { setICNSData } from '@redux/icns';
import { useICPPrice } from '@redux/icp';
-import { useMenuItems, useContacts } from '@hooks';
+import { getContacts } from '@redux/contacts';
+import { useMenuItems } from '@hooks';
import ConnectAccountsModal from '../ConnectAccountsModal';
import HoverAnimation from '../HoverAnimation';
import MenuItem from '../MenuItem';
@@ -37,6 +35,7 @@ import TextInput from '../TextInput';
import LinkButton from '../LinkButton';
import { TABS, useRouter } from '../Router';
import ActionDialog from '../ActionDialog';
+import { AccountItem } from './components';
import UserIcon from '../UserIcon';
import useStyles from './styles';
@@ -47,7 +46,7 @@ const Profile = ({ disableProfile }) => {
const { navigator } = disableProfile ? {} : useRouter();
const [isEditing, setIsEditing] = useState(false);
- const { walletNumber, principalId } = useSelector((state) => state.wallet);
+ const { walletId, principalId } = useSelector((state) => state.wallet);
const icpPrice = useICPPrice();
const [open, setOpen] = useState(false);
@@ -61,7 +60,6 @@ const Profile = ({ disableProfile }) => {
const [accountName, setAccountName] = useState('');
const [error, setError] = useState(null);
const [connectedWallets, setConnectedWallets] = useState([]);
- const { getContacts } = useContacts();
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
@@ -69,13 +67,12 @@ const Profile = ({ disableProfile }) => {
const menuItems = disableProfile ? [] : useMenuItems(handleToggle);
- const hiddenAccounts = useHiddenAccounts();
-
useEffect(() => {
sendMessage({ type: HANDLER_TYPES.GET_STATE, params: {} },
(state) => {
- if (state?.wallets?.length) {
- setAccounts(state.wallets);
+ const walletsArray = Object.values(state?.wallets);
+ if (walletsArray?.length) {
+ setAccounts(walletsArray);
}
});
}, []);
@@ -89,9 +86,9 @@ const Profile = ({ disableProfile }) => {
}
};
- const handleEditAccount = (e) => {
- e.preventDefault();
+ const handleEditAccount = (e, account) => {
e.stopPropagation();
+ dispatch(setEditAccount(account));
setOpen(false);
navigator.navigate('wallet-details');
};
@@ -114,20 +111,15 @@ const Profile = ({ disableProfile }) => {
setIsEditing(!isEditing);
};
- const toggleAccountVisibility = (account) => (e) => {
- e.preventDefault();
- e.stopPropagation();
- dispatch(toggleAccountHidden(account));
- };
-
const executeAccountSwitch = (wallet) => {
dispatch(setCollections({ collections: [], principalId }));
sendMessage({ type: HANDLER_TYPES.SET_CURRENT_PRINCIPAL, params: wallet },
(state) => {
- if (state?.wallets?.length) {
+ const walletsArray = Object.values(state?.wallets);
+ if (walletsArray.length) {
const newWallet = state.wallets[state.currentWalletId];
dispatch(setAccountInfo(newWallet));
- getContacts();
+ dispatch(getContacts());
dispatch(setICNSData(newWallet.icnsData));
dispatch(setAssetsLoading(true));
dispatch(setTransactions([]));
@@ -152,19 +144,20 @@ const Profile = ({ disableProfile }) => {
});
};
- const handleChangeAccount = (wallet) => () => {
+ const handleChangeAccount = (e, wallet) => {
+ e.stopPropagation();
setSelectedWallet(wallet);
extensionizer.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
const url = getTabURL(tabs?.[0]);
- const ids = accounts.map((_, idx) => idx);
+ const ids = accounts.map((account) => account.walletId);
setTab(tabs?.[0]);
// Check if new wallet is connected to the current page
getWalletsConnectedToUrl(url, ids, async (wallets = []) => {
- const currentConnected = wallets.includes(walletNumber);
+ const currentConnected = wallets.includes(walletId);
const newConnected = wallets.includes(wallet);
setConnectedWallets(wallets);
- getApp(walletNumber.toString(), url, (currentApp) => {
+ getApp(walletId, url, (currentApp) => {
setApp(currentApp);
// If current was connected but new one isnt, prompt modal
if (currentConnected && !newConnected) {
@@ -272,31 +265,19 @@ const Profile = ({ disableProfile }) => {
+
+
+
+ {account.icnsData.reverseResolvedName ? account.icnsData.reverseResolvedName : account.name }
+
+
+
+ handleEditAccount(e, account)}
+ >
+
+
+ { isEditing && (
+ { toggleAccountVisibility(e, account.walletId) }}
+ >
+
+
+ )}
+
+ navigator.navigate('add-token')}
+ className={classes.addTokenButton}
+ data-testid="add-custom-token-button"
+ >
+ 
{t('addToken.title')}
+
+ navigator.navigate('add-nft')}
+ className={classes.addNftButton}
+ data-testid="add-custom-nft-button"
+ >
+ 
+ {t('addNFT.title')}
+
+
+
+ );
+};
+
+export default TokenSelector;
diff --git a/source/components/Tokens/components/TokenSelector/styles.js b/source/components/Tokens/components/TokenSelector/styles.js
new file mode 100644
index 00000000..c7dc1d4e
--- /dev/null
+++ b/source/components/Tokens/components/TokenSelector/styles.js
@@ -0,0 +1,48 @@
+import { makeStyles } from '@material-ui/core/styles';
+import SHADOW_1 from '@shared/styles/shadows';
+
+export default makeStyles(() => ({
+ addTokenButton: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ bottom: 140,
+ right: 24,
+ position: 'absolute',
+ borderRadius: 42,
+ height: 42,
+ paddingLeft: 12,
+ paddingRight: 12,
+ backgroundColor: '#FFFF',
+ cursor: 'pointer',
+ gap: 8,
+ zIndex: 10,
+ boxShadow: SHADOW_1,
+ },
+ addNftButton: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ bottom: 82,
+ right: 24,
+ position: 'absolute',
+ borderRadius: 42,
+ height: 42,
+ padding: 5,
+ backgroundColor: '#FFFF',
+ cursor: 'pointer',
+ gap: 8,
+ zIndex: 10,
+ boxShadow: SHADOW_1,
+ paddingLeft: 12,
+ paddingRight: 12,
+ },
+ background: {
+ width: '100%',
+ height: 595,
+ zIndex: 5,
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ },
+}));
diff --git a/source/components/Tokens/index.jsx b/source/components/Tokens/index.jsx
index d1f9b109..7cd2bb01 100644
--- a/source/components/Tokens/index.jsx
+++ b/source/components/Tokens/index.jsx
@@ -4,14 +4,14 @@ import { Plus } from 'react-feather';
import { setAssets, setAssetsLoading } from '@redux/wallet';
import clsx from 'clsx';
+import { TOKENS } from '@shared/constants/currencies';
import { HANDLER_TYPES, sendMessage } from '@background/Keyring';
-import { useRouter } from '@components/Router';
-
import { useICPPrice } from '@redux/icp';
import { setICNSData } from '@redux/icns';
import { useScroll } from '@hooks';
import AssetItem from '../AssetItem';
import useStyles from './styles';
+import TokenSelector from './components/TokenSelector';
const Tokens = () => {
const classes = useStyles();
@@ -20,13 +20,13 @@ const Tokens = () => {
const [loading, setLoading] = useState(true);
const dispatch = useDispatch();
const icpPrice = useICPPrice();
- const { navigator } = useRouter();
const { onScroll, fullScroll } = useScroll();
+ const [displayCustomToken, setDisplayCustomToken] = useState(false);
- const fetchAssets = (cb = () => {}) => {
+ const fetchAssets = (cb = () => {}, refresh) => {
sendMessage({
type: HANDLER_TYPES.GET_ASSETS,
- params: {},
+ params: { refresh },
}, (keyringAssets) => {
cb(keyringAssets);
dispatch(setAssets({ keyringAssets, icpPrice }));
@@ -44,6 +44,15 @@ const Tokens = () => {
});
};
+ const handleRemoveAsset = (canisterId) => {
+ sendMessage({
+ type: HANDLER_TYPES.REMOVE_CUSTOM_TOKEN,
+ params: { canisterId },
+ }, (newTokens) => {
+ fetchAssets();
+ });
+ };
+
useEffect(() => {
const id = setInterval(() => {
!assetsLoading && fetchAssets();
@@ -77,8 +86,10 @@ const Tokens = () => {
assets?.map((asset) => (
navigator.navigate('add-token')}
+ onClick={() => setDisplayCustomToken(!displayCustomToken)}
className={classes.buttonWrapper}
- data-testid="add-custom-token-button"
+ data-testid="add-button"
>
diff --git a/source/components/Tokens/styles.js b/source/components/Tokens/styles.js
index 34c7c831..a126c55a 100644
--- a/source/components/Tokens/styles.js
+++ b/source/components/Tokens/styles.js
@@ -11,6 +11,41 @@ export default makeStyles((theme) => ({
height: '100%',
overflow: 'auto',
},
+ addTokenButton: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ bottom: 140,
+ right: 24,
+ position: 'absolute',
+ borderRadius: 42,
+ height: 42,
+ paddingLeft: 8,
+ paddingRight: 8,
+ backgroundColor: '#FFFFF',
+ cursor: 'pointer',
+ border: 2,
+ borderStyle: 'solid',
+ borderColor: '#A0A3A9',
+ gap: 4,
+ },
+ addNftButton: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ bottom: 82,
+ right: 24,
+ position: 'absolute',
+ borderRadius: 42,
+ height: 42,
+ padding: 5,
+ backgroundColor: '#FFFFF',
+ border: 2,
+ borderStyle: 'solid',
+ borderColor: '#A0A3A9',
+ cursor: 'pointer',
+ gap: 4,
+ },
buttonWrapper: {
display: 'flex',
justifyContent: 'center',
diff --git a/source/components/WalletInfo/index.jsx b/source/components/WalletInfo/index.jsx
index 99f5d2bf..c26bc9e5 100644
--- a/source/components/WalletInfo/index.jsx
+++ b/source/components/WalletInfo/index.jsx
@@ -10,7 +10,7 @@ const WalletInfo = () => {
const classes = useStyles();
const [copied, setCopied] = useState(false);
- const { name, principalId, walletNumber } = useSelector((state) => state.wallet);
+ const { name, principalId, walletId } = useSelector((state) => state.wallet);
const { resolved, useICNS } = useSelector((state) => state.icns);
const { t } = useTranslation();
const copyText = t('copy.copyText');
@@ -22,7 +22,7 @@ const WalletInfo = () => {
useEffect(() => {
setRenderedName(useICNS ? resolved ?? name : name);
- }, [resolved, name, walletNumber, useICNS]);
+ }, [resolved, name, walletId, useICNS]);
const handleWalletClick = () => {
navigator.clipboard.writeText(principalId);
diff --git a/source/hooks/index.js b/source/hooks/index.js
index 800dfe1e..5c4c3f16 100644
--- a/source/hooks/index.js
+++ b/source/hooks/index.js
@@ -7,4 +7,3 @@ export { default as useActivity } from './useActivity';
export { default as useDebounce } from './useDebounce';
export { default as useICNS } from './useICNS';
export { default as useScroll } from './useScroll';
-export { default as useContacts } from './useContacts';
diff --git a/source/hooks/useApps.jsx b/source/hooks/useApps.jsx
index f43c1cc0..59245f6f 100644
--- a/source/hooks/useApps.jsx
+++ b/source/hooks/useApps.jsx
@@ -8,7 +8,7 @@ const useApps = () => {
const [apps, setApps] = useState({});
const [parsedApps, setParsedApps] = useState([]);
const [historicApps, setHistoricApps] = useState([]);
- const { walletNumber } = useSelector((state) => state.wallet);
+ const { walletId } = useSelector((state) => state.wallet);
const handleRemoveApp = (appUrl) => {
const newApps = addDisconnectedEntry({ apps, appUrl });
@@ -16,15 +16,15 @@ const useApps = () => {
};
useEffect(() => {
- getApps(walletNumber?.toString(), (appsFromExtensionStorage = {}) => {
+ getApps(walletId, (appsFromExtensionStorage = {}) => {
if (appsFromExtensionStorage) {
setApps(appsFromExtensionStorage);
}
});
- }, [walletNumber]);
+ }, [walletId]);
useEffect(() => {
- setStorageApps(walletNumber, apps);
+ setStorageApps(walletId, apps);
const parsed = Object.values(apps) || [];
const allEvents = parsed?.flatMap((app) => app?.events?.map((event) => ({
diff --git a/source/hooks/useContacts.jsx b/source/hooks/useContacts.jsx
deleted file mode 100644
index 40b973e6..00000000
--- a/source/hooks/useContacts.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useDispatch } from 'react-redux';
-import { getContacts as getReduxContacts } from '@redux/contacts';
-import { getDabContacts } from '@modules/storageManager';
-
-const useContacts = () => {
- const dispatch = useDispatch();
-
- const getContacts = (refresh = false) => {
- getDabContacts((contactList) => {
- dispatch(getReduxContacts({
- localContacts: contactList,
- refresh,
- }));
- });
- };
-
- return {
- getContacts,
- };
-};
-
-export default useContacts;
diff --git a/source/hooks/useSettingsItems.jsx b/source/hooks/useSettingsItems.jsx
index 2a99e2cb..18f1adfd 100644
--- a/source/hooks/useSettingsItems.jsx
+++ b/source/hooks/useSettingsItems.jsx
@@ -29,6 +29,7 @@ const useSettingsItems = () => {
logo: AntennaIcon,
name: t('settings.network'),
description: t('settings.networkDescription'),
+ 'data-testid': 'network',
onClick: (() => navigator.navigate('network')),
},
{
diff --git a/source/locales/en/translation.json b/source/locales/en/translation.json
index c2312647..5cc6d360 100644
--- a/source/locales/en/translation.json
+++ b/source/locales/en/translation.json
@@ -326,6 +326,33 @@
"selectStandard": "Select the token's interface standard",
"importTitle": "wants to add a token to your wallet"
},
+ "addNFT": {
+ "title": "Add NFT",
+ "search": "Search",
+ "custom": "Custom",
+ "searchText": "Add NFT's to your wallet, verified NFT's will appear in the search.",
+ "searchLink": "Learn more about NFT's",
+ "tokenCanisterId": "NFT Canister ID",
+ "confirmText": "NFT Safety Alert: For your security, make sure to do proper research before interacting with any NFT.",
+ "emptyResults": "No search results found",
+ "searchTokens": "Search NFT's",
+ "addCustomToken": "Add Custom NFT",
+ "comingSoon": "COMING SOON",
+ "dabTitle": "DAB Token List",
+ "dabText": "Helping improve discoverability, reputation, and trust in IC tokens.",
+ "invalidInterfaceTokenError": "Wrong standard. No Token Interface Detected.",
+ "invalidCanisterTokenError": "Invalid Canister ID.",
+ "standard": "NFT Standard",
+ "searchResults": "Search results",
+ "selectStandard": "Select the NFT interface standard",
+ "importTitle": "wants to add a NFT to your wallet"
+ },
+ "removeToken": {
+ "action": "Delete Token",
+ "mainText": "Are you sure you want to delete ",
+ "mainTextContinue": " from your token list?",
+ "disclaimer": "You can always add the token back by adding it as a custom token again."
+ },
"error": {
"errorTitle": "Something went wrong",
"errorBody": "We’re sorry, something weird happened. \nReturn home and retry the action.",
diff --git a/source/redux/contacts.js b/source/redux/contacts.js
index 818837d8..986f22f0 100644
--- a/source/redux/contacts.js
+++ b/source/redux/contacts.js
@@ -1,9 +1,6 @@
/* eslint-disable no-underscore-dangle */
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { buildContactObject, parseContactFromDab } from '@shared/utils/contacts';
-import {
- setDabContacts as setLocalDabContacts,
-} from '@modules/storageManager';
import {
getContacts as callGetContacts,
addContact as callAddContact,
@@ -88,6 +85,7 @@ export const contactSlice = createSlice({
contacts: [],
groupedContacts: [],
contactsLoading: false,
+ pendingDelete: false,
},
reducers: { },
extraReducers: (builder) => {
@@ -96,8 +94,6 @@ export const contactSlice = createSlice({
const contact = action.meta.arg;
const newContactList = [...state.contacts, contact];
- setLocalDabContacts(newContactList);
-
state.contacts = newContactList;
state.groupedContacts = groupContacts(newContactList);
})
@@ -105,51 +101,47 @@ export const contactSlice = createSlice({
const contact = action.meta.arg;
const filteredContacts = state.contacts.filter((c) => c.id === contact.id);
- setLocalDabContacts(filteredContacts);
-
state.contacts = filteredContacts;
state.groupedContacts = groupContacts(filteredContacts);
})
.addCase(getContacts.pending, (state, action) => {
- state.contactsLoading = true;
- if (action.meta.arg.refresh) {
+ if (action.meta.arg?.refresh) {
state.contacts = [];
state.groupedContacts = [];
- setLocalDabContacts([]);
- } else {
- state.contacts = action.meta.arg.localContacts;
- state.groupedContacts = groupContacts(action.meta.arg.localContacts);
}
+ state.contactsLoading = true;
})
.addCase(getContacts.fulfilled, (state, action) => {
- let newContactList = [
- ...state?.contacts,
- ...action?.payload,
- ...action.meta.arg?.localContacts,
- ];
- newContactList = filterContactsById(newContactList);
- setLocalDabContacts(newContactList);
-
- state.contacts = newContactList;
- state.groupedContacts = groupContacts(newContactList);
+ // Doesn't update contact list if removeContact is pending
+ if (!state.pendingDelete) {
+ let newContactList = [
+ ...state?.contacts,
+ ...action?.payload,
+ ];
+ newContactList = filterContactsById(newContactList);
+
+ state.contacts = newContactList;
+ state.groupedContacts = groupContacts(newContactList);
+ }
state.contactsLoading = false;
})
.addCase(removeContact.pending, (state, action) => {
const contact = action.meta.arg;
const filteredContacts = state.contacts.filter((c) => c.name !== contact.name);
- setLocalDabContacts(filteredContacts);
-
+ state.pendingDelete = true;
state.contacts = filteredContacts;
state.groupedContacts = groupContacts(filteredContacts);
})
+ .addCase(removeContact.fulfilled, (state) => {
+ state.pendingDelete = false;
+ })
.addCase(removeContact.rejected, (state, action) => {
const contact = action.meta.arg;
const newContactList = [...state.contacts, contact];
- setLocalDabContacts(newContactList);
-
+ state.pendingDelete = false;
state.contacts = newContactList;
state.groupedContacts = groupContacts(newContactList);
});
diff --git a/source/redux/profile.js b/source/redux/profile.js
index 6a8b1019..d3c3919b 100644
--- a/source/redux/profile.js
+++ b/source/redux/profile.js
@@ -11,6 +11,7 @@ export const profileSlice = createSlice({
name: 'profile',
initialState: {
hiddenAccounts: [],
+ editAccount: {},
},
reducers: {
setHiddenAccounts: (state, action) => {
@@ -25,10 +26,13 @@ export const profileSlice = createSlice({
}
setStorageHiddenAccounts(Object.values(state.hiddenAccounts));
},
+ setEditAccount: (state, action) => {
+ state.editAccount = action.payload;
+ },
},
});
-export const { setHiddenAccounts, toggleAccountHidden } = profileSlice.actions;
+export const { setHiddenAccounts, toggleAccountHidden, setEditAccount } = profileSlice.actions;
/**
* @description Hook that fetches hidden accounts from storage and sets them in the state.
diff --git a/source/redux/send.js b/source/redux/send.js
index 750195ed..35b586fe 100644
--- a/source/redux/send.js
+++ b/source/redux/send.js
@@ -78,11 +78,13 @@ export const sendToken = createAsyncThunk(
const to = addressInfo.resolvedAddress || address;
const amount = rawAmount.toString();
- const { canisterId, standard, decimals } = selectedAsset || {};
-
+ const {
+ canisterId, standard, decimals, fee = 0,
+ } = selectedAsset || {};
+ const opts = { fee };
try {
const res = await callSendToken({
- to, amount, canisterId, standard, decimals,
+ to, amount, canisterId, standard, decimals, opts,
});
return res;
} catch ({ error }) {
diff --git a/source/redux/wallet.js b/source/redux/wallet.js
index 34bd7764..8b9818f4 100644
--- a/source/redux/wallet.js
+++ b/source/redux/wallet.js
@@ -1,5 +1,6 @@
import { createSlice } from '@reduxjs/toolkit';
import { ACTIVITY_STATUS } from '@shared/constants/activity';
+import { ACCOUNT_ICON } from '@shared/constants/account';
import {
formatAssetBySymbol,
formatAssets,
@@ -22,10 +23,10 @@ export const walletSlice = createSlice({
name: 'Account 1',
principalId: '',
accountId: '',
- emoji: '👽',
+ emoji: ACCOUNT_ICON,
transactions: [],
assets: Object.values(TOKENS),
- walletNumber: 0,
+ walletId: '',
assetsLoading: true,
collections: [],
collectionsLoading: false,
@@ -41,13 +42,13 @@ export const walletSlice = createSlice({
if (!action.payload) return;
// Chrome serializes everything with toJSON
const {
- accountId, icon, name, principal, walletNumber,
+ accountId, icon, name, principal, walletId,
} = action.payload;
state.accountId = accountId;
state.emoji = icon;
state.name = name;
state.principalId = principal;
- state.walletNumber = walletNumber;
+ state.walletId = walletId;
},
setTransactions: (state, action) => {
const { transactions, useICNS, icpPrice } = action.payload || {};
@@ -106,18 +107,6 @@ export const walletSlice = createSlice({
setAssetsLoading: (state, action) => {
state.assetsLoading = action.payload;
},
- addCollection: (state, action) => {
- const { collection, walletNumber } = action.payload;
- if (state.walletNumber === walletNumber && collection) {
- const collectionIndex = state.collections.findIndex(
- (col) => col.canisterId === collection.canisterId,
- );
- state?.collections.splice(
- collectionIndex, collectionIndex < 0 ? 0 : 1, collection,
- );
- state.collections = sortCollections(state?.collections);
- }
- },
setCollections: (state, action) => {
const { collections, principalId } = action.payload;
if (state.principalId === principalId && collections) {
@@ -128,14 +117,7 @@ export const walletSlice = createSlice({
setCollectionsLoading: (state, action) => {
state.collectionsLoading = action.payload;
},
- removeNFT: (state, action) => {
- const collections = state.collections.map((col) => ({
- ...col,
- tokens: action.payload.collection === col.name
- ? col.tokens.filter((token) => token.index !== action.payload?.index)
- : col.tokens,
- }));
- state.collections = collections.filter((col) => col.tokens.length);
+ blockNFTFetch: (state) => {
state.optimisticNFTUpdate = true;
},
},
@@ -148,10 +130,9 @@ export const {
setTransactionsLoading,
setAssets,
setAssetsLoading,
- addCollection,
setCollections,
setCollectionsLoading,
- removeNFT,
+ blockNFTFetch,
} = walletSlice.actions;
export default walletSlice.reducer;
diff --git a/source/shared/constants/account.js b/source/shared/constants/account.js
new file mode 100644
index 00000000..eb531d71
--- /dev/null
+++ b/source/shared/constants/account.js
@@ -0,0 +1 @@
+export const ACCOUNT_ICON = '👽';
diff --git a/source/shared/constants/addresses.js b/source/shared/constants/addresses.js
index 8d968525..0f55b57e 100644
--- a/source/shared/constants/addresses.js
+++ b/source/shared/constants/addresses.js
@@ -11,13 +11,10 @@ export const ADDRESS_TYPES = {
ICNS: 'icns',
};
-export const DEFAULT_ICP_FEE = 0.0001;
-export const XTC_FEE = 0.002;
-export const OGY_FEE = 0.002;
+export const getAssetFee = (selectedAsset) => {
+ const { fee, decimals } = selectedAsset;
-// TODO: Serialize fee and decimals in assets and remove this.
-export const getAssetFee = (asset) => ({
- ICP: DEFAULT_ICP_FEE,
- XTC: XTC_FEE,
- OGY: OGY_FEE,
-}[asset?.symbol] || 0.0);
+ const parsedFee = fee && decimals ? fee / 10 ** decimals : 0;
+
+ return parsedFee;
+};
diff --git a/source/shared/styles/transitions.js b/source/shared/styles/transitions.js
new file mode 100644
index 00000000..a38c8f71
--- /dev/null
+++ b/source/shared/styles/transitions.js
@@ -0,0 +1,3 @@
+const SMOOTH_TRANSITION = 'all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
+
+export default SMOOTH_TRANSITION;
diff --git a/source/shared/utils/icns.js b/source/shared/utils/icns.js
new file mode 100644
index 00000000..dbe97349
--- /dev/null
+++ b/source/shared/utils/icns.js
@@ -0,0 +1,5 @@
+const ICNS_SUFFIX = '.icp';
+
+const isICNSAddress = (address) => address.substr(address.length - 4) === ICNS_SUFFIX;
+
+export default isICNSAddress;
diff --git a/source/shared/utils/short-address.js b/source/shared/utils/short-address.js
index 49cb1472..17118bf6 100644
--- a/source/shared/utils/short-address.js
+++ b/source/shared/utils/short-address.js
@@ -1,4 +1,5 @@
import { validateAccountId } from './ids';
+import isICNSAddress from './icns';
const defaultConfig = {
leftSize: 5,
@@ -10,6 +11,7 @@ const defaultConfig = {
const shortAddress = (address, config = defaultConfig) => {
if (!address) return '';
if (typeof address !== 'string') return '';
+ if (isICNSAddress(address)) return address;
let leftSize = config.leftSize || defaultConfig.leftSize;
let rightSize = config.rightSize || defaultConfig.rightSize;
diff --git a/source/views/Extension/Popup.jsx b/source/views/Extension/Popup.jsx
index 73793676..1f3fc187 100644
--- a/source/views/Extension/Popup.jsx
+++ b/source/views/Extension/Popup.jsx
@@ -14,6 +14,7 @@ import Deposit from './Views/Deposit';
import Send from './Views/SendFlow';
import Contacts from './Views/Contacts';
import AddToken from './Views/AddToken';
+import AddNFT from './Views/AddNFT';
import ExportIdentity from './Views/ExportIdentity';
import Login from './Views/Login';
import ErrorScreen from './Views/Error';
@@ -40,6 +41,7 @@ const Popup = ({ initialRoute }) => (
+
+
+ {selectedToken.name}
+
+