Merge pull request #638 from Psychedelic/release/0.6.1

Release/0.6.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plug",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Your plug into the Internet Computer",
   "private": true,
   "repository": "https://github.com/Psychedelic/plug",
@@ -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.12",
-    "@psychedelic/plug-controller": "0.22.6",
+    "@psychedelic/dab-js": "1.5.0-beta.1",
+    "@psychedelic/plug-controller": "0.24.4",
     "@psychedelic/plug-inpage-provider": "^2.3.1",
     "@reduxjs/toolkit": "^1.6.0",
     "advanced-css-reset": "^1.2.2",
@@ -58,7 +58,9 @@
     "random-color": "^1.0.1",
     "react": "^17.0.1",
     "react-collapsible": "^2.8.4",
+    "react-cool-virtual": "^0.7.0",
     "react-dom": "^17.0.1",
+    "react-dropzone": "^14.2.2",
     "react-feather": "^2.0.9",
     "react-i18next": "^11.8.13",
     "react-json-view": "^1.21.3",

source/Background/Keyring/index.js

@@ -107,6 +107,11 @@ export const HANDLER_TYPES = {
   REMOVE_NETWORK: 'remove-network',
   SET_CURRENT_NETWORK: 'set-current-network',
   GET_CURRENT_NETWORK: 'get-current-network',
+  IMPORT_PEM_ACCOUNT: 'import-pem-account',
+  REMOVE_PEM_ACCOUNT: 'remove-pem-account',
+  REMOVE_CUSTOM_TOKEN: 'remove-custom-token',
+  GET_PRINCIPAL_FROM_PEM: 'get-principal-from-pem',
+  VALIDATE_PEM: 'validate-pem',
 };
 
 export const getKeyringErrorMessage = (type) => ({
@@ -141,6 +146,8 @@ export const getKeyringErrorMessage = (type) => ({
   [HANDLER_TYPES.SET_CURRENT_NETWORK]: 'setting the current network',
   [HANDLER_TYPES.GET_CURRENT_NETWORK]: 'getting the current network',
   [HANDLER_TYPES.REMOVE_CUSTOM_TOKEN]: 'removing custom token',
+  [HANDLER_TYPES.IMPORT_PEM_ACCOUNT]: 'importing account from pem',
+  [HANDLER_TYPES.REMOVE_PEM_ACCOUNT]: 'removing pem account',
 }[type]);
 
 export const sendMessage = (args, callback) => {
@@ -157,6 +164,15 @@ export const sendMessage = (args, callback) => {
   });
 };
 
+export const asyncSendMessage = (args, callback) => new Promise((resolve) => {
+  sendMessage(args, (response) => {
+    if (callback) {
+      callback(response);
+    }
+    resolve(response);
+  });
+});
+
 export const getKeyringHandler = (type, keyring) => ({
   [HANDLER_TYPES.LOCK]: async () => keyring.lock(),
   [HANDLER_TYPES.UNLOCK]: async (params) => {
@@ -182,7 +198,9 @@ export const getKeyringHandler = (type, keyring) => ({
       return null;
     }
   },
+  [HANDLER_TYPES.IMPORT_PEM_ACCOUNT]: keyring.importAccountFromPem,
   [HANDLER_TYPES.CREATE_PRINCIPAL]: async (params) => keyring.createPrincipal(params),
+  [HANDLER_TYPES.REMOVE_PEM_ACCOUNT]: async (params) => keyring.deleteImportedAccount(params),
   [HANDLER_TYPES.SET_CURRENT_PRINCIPAL]:
     async (walletId) => {
       await keyring.setCurrentPrincipal(walletId);
@@ -206,22 +224,12 @@ export const getKeyringHandler = (type, keyring) => ({
     const parsed = parseTransactions(response);
     return parsed;
   },
-  [HANDLER_TYPES.GET_ASSETS]: async ({ refresh }) => {
+  [HANDLER_TYPES.GET_ASSETS]: async () => {
     try {
       if (!keyring?.isUnlocked) return {};
-
-      const { wallets, currentWalletId } = await keyring.getState();
-      let assets = Object.values(wallets?.[currentWalletId]?.assets);
-      const shouldUpdate = Object.values(assets)?.every((asset) => !Number(asset.amount))
-        || Object.values(assets)?.some((asset) => asset.amount === 'Error')
-        || refresh;
-      if (shouldUpdate) {
-        assets = await keyring.getBalances();
-      } else {
-        keyring.getBalances();
-      }
-      assets = parseAssetsAmount(assets);
-      return (assets || []).map((asset) => recursiveParseBigint(asset));
+      const assets = await keyring.getBalances();
+      const parsedAssets = parseAssetsAmount(assets);
+      return (parsedAssets || []).map((asset) => recursiveParseBigint(asset));
     } catch (e) {
       // eslint-disable-next-line
       console.log('Error while fetching the assets', e);
@@ -302,9 +310,10 @@ export const getKeyringHandler = (type, keyring) => ({
   [HANDLER_TYPES.ADD_CUSTOM_NFT]:
     async ({ canisterId, standard }) => {
       try {
-        const nfts = await keyring.registerNFT({
+        await keyring.registerNFT({
           canisterId, standard,
         });
+        const nfts = await keyring.getNFTs({ refresh: true });
         return (nfts || []).map((nft) => recursiveParseBigint(nft));
       } catch (e) {
         // eslint-disable-next-line
@@ -339,18 +348,15 @@ export const getKeyringHandler = (type, keyring) => ({
         return { error: e.message };
       }
     },
-  [HANDLER_TYPES.GET_NFTS]: async ({ refresh = false }) => {
-    const { wallets, currentWalletId } = await keyring.getState();
-    let collections = wallets?.[currentWalletId]?.collections || [];
-    if (!collections.length || refresh) {
-      collections = await keyring.getNFTs({ subaccount: currentWalletId, refresh });
-    }
+  [HANDLER_TYPES.GET_NFTS]: async ({ refresh } = { refresh: false }) => {
+    const collections = await keyring.getNFTs({ refresh });
     return (collections || [])?.map((collection) => recursiveParseBigint(collection));
   },
   [HANDLER_TYPES.TRANSFER_NFT]: async ({ to, nft }) => {
     try {
-      const response = await keyring.transferNFT({ to, token: nft });
-      return recursiveParseBigint(response);
+      await keyring.transferNFT({ to, token: nft });
+      const nfts = await keyring.getNFTs({ refresh: true });
+      return recursiveParseBigint(nfts);
     } catch (e) {
       // eslint-disable-next-line
       console.log('Error transfering NFT', e);
@@ -480,6 +486,8 @@ export const getKeyringHandler = (type, keyring) => ({
       return { error: e.message };
     }
   },
+  [HANDLER_TYPES.GET_PRINCIPAL_FROM_PEM]: keyring.getPrincipalFromPem,
+  [HANDLER_TYPES.VALIDATE_PEM]: keyring.validatePem,
 }[type]);
 
 export const getContacts = () => new Promise((resolve, reject) => {

source/components/AssetItem/index.jsx

@@ -8,7 +8,6 @@ import clsx from 'clsx';
 import Skeleton from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
 
-import { TOKENS } from '@shared/constants/currencies';
 import RefreshIcon from '@assets/icons/blue-refresh.png';
 import DeleteIcon from '@assets/icons/delete.svg';
 import TokenIcon from '../TokenIcon';
@@ -32,7 +31,7 @@ const AssetItem = ({
   const classes = useStyles();
   const { t } = useTranslation();
   const { currentNetwork, usingMainnet } = useSelector((state) => state.network);
-  const [ shouldRemove, setShouldRemove] = useState(false);
+  const [shouldRemove, setShouldRemove] = useState(false);
   const [isHovering, setIsHovering] = useState(false);
   const [openDelete, setOpenDelete] = useState(false);
 
@@ -61,13 +60,19 @@ const AssetItem = ({
   const handleRemoveAssetDisplay = () => {
     setShouldRemove(true);
     handleModalClose();
-  }
+  };
 
   const ledgerNotSpecified = !usingMainnet && !currentNetwork?.ledgerCanisterId;
 
   return (
     <div
-      className={clsx(classes.root, failed && classes.failedContainer, shouldRemove && classes.removeAnimation)}
+      className={
+        clsx(
+          classes.root,
+          failed && classes.failedContainer,
+          shouldRemove && classes.removeAnimation,
+        )
+      }
       onMouseOver={handleMouseOver}
       onAnimationEnd={removeAsset}
       onMouseOut={handleMouseOut}
@@ -136,10 +141,16 @@ const AssetItem = ({
             ? <Skeleton className={classes.valueSkeleton} />
             : (<NumberFormat value={value} displayType="text" decimalScale={2} fixedDecimalScale thousandSeparator="," prefix="$" />)}
         </Typography>
-      )}
+        )}
       { !failed && !loading && (
         <div
-          className={clsx(classes.deleteToken, !value && classes.deleteTokenMoveRight, isHovering && classes.deleteTokenActive)}
+          className={
+            clsx(
+              classes.deleteToken,
+              !value && classes.deleteTokenMoveRight,
+              isHovering && classes.deleteTokenActive,
+            )
+          }
         >
           <img
             onClick={() => setOpenDelete(true)}
@@ -170,4 +181,5 @@ AssetItem.propTypes = {
   failed: PropTypes.bool,
   assetNameTestId: PropTypes.string,
   removeAsset: PropTypes.func.isRequired,
+  protectedAsset: PropTypes.bool.isRequired,
 };

source/components/ConnectAccountsModal/index.jsx

@@ -61,7 +61,9 @@ const ConnectAccountsModal = ({
 
   const handleConfirm = () => {
     Object.keys(walletsToUpdate).forEach((walletId) => {
-      walletsToUpdate[walletId] && connectAccountToTab(walletId, tab);
+      if (walletsToUpdate[walletId]) {
+        connectAccountToTab(walletId, tab);
+      }
     });
     onConfirm?.();
     setWalletsToUpdate({});

source/components/ConnectionStatus/components/ConnectionControls/index.jsx

@@ -12,12 +12,11 @@ import {
   setAssetsLoading,
   setTransactions,
   setTransactionsLoading,
-  setCollections,
-  setCollectionsLoading,
 } from '@redux/wallet';
 import { getApps } from '@modules/storageManager';
 import { getCurrentNetwork, getNetworks } from '@redux/network';
 import { getContacts } from '@redux/contacts';
+import { getNFTs } from '@redux/nfts';
 import { HANDLER_TYPES, sendMessage } from '@background/Keyring';
 import { TABS, useRouter } from '@components/Router';
 import RefreshAsset from '@assets/icons/refresh.svg';
@@ -29,14 +28,13 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
   const classes = useStyles();
   const icpPrice = useICPPrice();
   const dispatch = useDispatch();
-  const { tabIndex } = disableNavigation ? {} : useRouter();
+  const { tabIndex, route } = disableNavigation ? {} : useRouter();
   const {
-    principalId,
     walletId,
     assetsLoading,
     transactionsLoading,
-    collectionsLoading,
   } = useSelector((state) => state.wallet);
+  const { collectionsLoading } = useSelector((state) => state.nfts);
   const { useICNS } = useSelector((state) => state.icns);
   const { currentNetwork } = useSelector((state) => state.network);
   const [selectorOpen, setSelectorOpen] = useState(false);
@@ -95,21 +93,7 @@ const ConnectionControls = ({ disableNavigation, hidden }) => {
   };
 
   const loadCollections = () => {
-    dispatch(setCollectionsLoading(true));
-    sendMessage(
-      {
-        type: HANDLER_TYPES.GET_NFTS,
-        params: { refresh: true },
-      },
-      (nftCollections) => {
-        if (nftCollections?.length) {
-          dispatch(
-            setCollections({ collections: nftCollections, principalId }),
-          );
-        }
-        dispatch(setCollectionsLoading(false));
-      },
-    );
+    dispatch(getNFTs({ refresh: route === 'home' && tabIndex === TABS.NFTS }));
   };
 
   const refreshWallet = () => {

source/components/ICNSDisplay/index.jsx

@@ -11,14 +11,13 @@ const ICNSDisplay = ({
 }) => {
   const classes = useStyles();
   const [loading, setLoading] = useState(true);
-
   return (
     <div className={`${className} ${classes.wrapper} ${loading ? classes.loadingWrapper : ''}`}>
       <img
         className={classes.icnsBackground}
         onClick={onClick}
         onLoad={() => setLoading(false)}
-        src={icns.url}
+        src="https://icns.id/Rectangle.jpg"
       />
       <span className={`${classes.icnsName} ${large ? classes.large : ''}`}>
         {icns.name?.length > 12 ? shortICNSName(icns?.name) : icns?.name}