Release/0.6.0 (#563)

* Chore/update 0.6.0 (#567)

* Fixed transactionId and object proptypes

* Auto fix with --fix

* Fixed remaining issues

* Updated controller to 0.19.8 and bumped plug version to 0.5.4

* Moved whitelist population to requestConnect

* Removed whitelist population

* Updated branch

Co-authored-by: rocky-fleek <[email protected]>
Co-authored-by: tomiir <[email protected]>

* add tokens and add nft buttons

* add nft form done - form component abstraction not done - add nft not working yet

* feat: tests initialization

* added get-nft-info method

* added few changes

* now the buttons looks like the design

* removed standards to DIP721v2 only - display token info in step2

* feat: test ids added/first test added and passed

* added add-custom-nft function

* feat: all tests added and passed

* fix: variables changes

* feat: extra case added

* feat: tests for settings-network added and done

* added get nfts after add custom in step2

* Fix: Redundant optimistic update (#587)

* Added controller with optimistic update fix. Removed filterCollectionTokens method as it was redundant

* Reconciliated yarn lock

* Renamed hook to blockNFTFetch and removed unnecessary formatting

* Restored lockfile

* Reinstalled controller'

Co-authored-by: rocky-fleek <[email protected]>

* feat: send custom tokens on sonic network tests added and passed

* fix: hardcode fixes

* feat: case with checking that tabs are blocked added

* show collections with 0 nfts without chevron - if the icon is null show a default image

* change package.json and yarn.lock to upstream content

* few console logs removed, text and state names

* yarn lock updated to release yarn lock

* now can download pem file with your account id

* Remove custom token (#589)

* Updated controller version

* Added removeToken to Keyring

* Added remove to AssetItem

* Prepopulated protectedAsset

* Added translation for remove token modal

* Renamed Remove to remove custom token

* Feat/account switch refactor (#566)

* Added swit account icon

* Added AccountItem component

* Added edit account field

* Added account switch to WalletDetails

* Removed replacing icns on set

* Made profile edit on click

* Added walletId param to icns methods

* Lint fixes for profile

* Added local ICNS data

* Lint fixes

* Added shared transition

* Conditionaly show switch account button

* disable edit name while using icns

* removed clgs and moved useEffect

* added close curly brace

* Update source/views/Extension/Views/AddNFT/hooks/useSteps.jsx

Co-authored-by: angarita-dev <[email protected]>

* Update source/views/Extension/Views/AddNFT/Steps/Step2.jsx

Co-authored-by: angarita-dev <[email protected]>

* it work calling sendMessage in AppConnection

* fixed length problem

* Migrated walletId to uuid

* removed console.log

* removed unused field on redux

* fixed address shortening for ICNS names

* Added border radius to custom tokens search

* reduced token decimal places

* Reduced font weight of text in banner

* Added border raduis to second step of addToken

* Updated yarn.lock

* Added utils for icns address

* modified getAssetFee function - removed fixed fee values - now can send max amount of any tokens

* added fallback if fee and decimal doenst exist

* Serialize host into metadata and pass it into regular connection requests

* Controller version bump

* Fixed switch account ICNS bug

* Added account icon constant

* replaced user icon with constant

* Fixed switch account & account default icon

* Updated dab-js and added fee as a parameter in the send operation

* Prevented default on Profile actions (#611)

* remove switch account icon (#613)

* automation fixes

* Installed controller and dabjs with icp standard fixes

* Fixed connect account modal (#618)

* Fix/Contacts (#616)

* WIP

* Code cleanup

* mend

* Fixed hiddenAccounts

* Fixed state accounts

* Fixed export identity

* Bumped controller version

* Added missing semicolon

* Plug controller bump

* Rollback controller to 0.22.3

* Fixed collection info and nft details issues

* Fixed popup & connect accounts info (#625)

* Abstracted internalRequestBalance and fixed issues with bigint parsing

* Removed subaccount validation

* Installed controller 0.22.5 with Principal serializatio on pid contacts

* feat: new secret added

* Removed provider update on useEffect

* Removede console.logs

* Fix/update provider & toasts (#631)

* Updated provider package

* Stop showing toast for provider errors

* Disconnect only based on principalId

* Removed update providerConnection

* Made onConfirm method optional

* Removed update provider connection from home

* Updated contollero to version 0.22.6

* Updated extension icons to rainbow background ones (#595)

Co-authored-by: rocky-fleek <[email protected]>

Co-authored-by: angarita-dev <[email protected]>
Co-authored-by: rocky-fleek <[email protected]>
Co-authored-by: tomiir <[email protected]>
Co-authored-by: Alina Sytnik <[email protected]>
Co-authored-by: Alina Sytnik <[email protected]>

Author: 5 people

.gitignore

@@ -70,6 +70,9 @@ typings/
 .env
 .env.test
 
+# PEM files
+*.pem
+
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plug",
-  "version": "0.5.4.1",
+  "version": "0.6.0",
   "description": "Your plug into the Internet Computer",
   "private": true,
   "repository": "https://github.com/Psychedelic/plug",
@@ -37,9 +37,9 @@
     "@material-ui/icons": "^4.11.2",
     "@metamask/post-message-stream": "^4.0.0",
     "@psychedelic/browser-rpc": "2.1.0",
-    "@psychedelic/dab-js": "1.4.5",
-    "@psychedelic/plug-controller": "0.19.8",
-    "@psychedelic/plug-inpage-provider": "^2.3.0",
+    "@psychedelic/dab-js": "1.4.12",
+    "@psychedelic/plug-controller": "0.22.6",
+    "@psychedelic/plug-inpage-provider": "^2.3.1",
     "@reduxjs/toolkit": "^1.6.0",
     "advanced-css-reset": "^1.2.2",
     "axios": "^0.21.1",

source/Background/Keyring/index.js

@@ -87,7 +87,9 @@ export const HANDLER_TYPES = {
   EDIT_PRINCIPAL: 'edit-principal',
   GET_PUBLIC_KEY: 'get-public-key',
   GET_TOKEN_INFO: 'get-token-info',
+  GET_NFT_INFO: 'get-nft-info',
   ADD_CUSTOM_TOKEN: 'add-custom-token',
+  ADD_CUSTOM_NFT: 'add-custom-nft',
   CREATE_PRINCIPAL: 'create-principal',
   SET_CURRENT_PRINCIPAL: 'set-current-principal',
   GET_PEM_FILE: 'get-pem-file',
@@ -121,7 +123,9 @@ export const getKeyringErrorMessage = (type) => ({
   [HANDLER_TYPES.EDIT_PRINCIPAL]: 'editing your principal.',
   [HANDLER_TYPES.GET_PUBLIC_KEY]: 'getting your public key.',
   [HANDLER_TYPES.GET_TOKEN_INFO]: 'fetching token info.',
+  [HANDLER_TYPES.GET_NFT_INFO]: 'fetching nft info.',
   [HANDLER_TYPES.ADD_CUSTOM_TOKEN]: 'adding custom token.',
+  [HANDLER_TYPES.ADD_CUSTOM_NFT]: 'adding custom nft.',
   [HANDLER_TYPES.CREATE_PRINCIPAL]: 'creating your principal.',
   [HANDLER_TYPES.SET_CURRENT_PRINCIPAL]: 'setting your principal.',
   [HANDLER_TYPES.GET_PEM_FILE]: 'getting your PEM file.',
@@ -136,6 +140,7 @@ export const getKeyringErrorMessage = (type) => ({
   [HANDLER_TYPES.REMOVE_NETWORK]: 'removing the network',
   [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',
 }[type]);
 
 export const sendMessage = (args, callback) => {
@@ -179,8 +184,8 @@ export const getKeyringHandler = (type, keyring) => ({
   },
   [HANDLER_TYPES.CREATE_PRINCIPAL]: async (params) => keyring.createPrincipal(params),
   [HANDLER_TYPES.SET_CURRENT_PRINCIPAL]:
-    async (walletNumber) => {
-      await keyring.setCurrentPrincipal(walletNumber);
+    async (walletId) => {
+      await keyring.setCurrentPrincipal(walletId);
       const state = await keyring.getState();
       extension.tabs.query({ active: true }, (tabs) => {
         extension.tabs.sendMessage(tabs[0].id, { action: 'updateConnection' });
@@ -223,12 +228,13 @@ export const getKeyringHandler = (type, keyring) => ({
       return { error: e.message };
     }
   },
-  [HANDLER_TYPES.GET_BALANCE]: async (subaccount) => {
+  [HANDLER_TYPES.GET_BALANCE]: async (walletId) => {
     try {
-      const assets = await keyring.getBalances({ subaccount });
+      const assets = await keyring.getBalances({ subaccount: walletId });
       const parsedAssets = parseAssetsAmount(assets);
       const icpPrice = await getICPPrice();
-      return formatAssets(parsedAssets, icpPrice);
+      const formattedAssets = formatAssets(parsedAssets, icpPrice);
+      return formattedAssets.map((asset) => recursiveParseBigint(asset));
     } catch (error) {
       // eslint-disable-next-line
       console.log('Error when fetching token balances', error);
@@ -259,8 +265,8 @@ export const getKeyringHandler = (type, keyring) => ({
     }
   },
   [HANDLER_TYPES.EDIT_PRINCIPAL]:
-    async ({ walletNumber, name, emoji }) => (
-      keyring.editPrincipal(walletNumber, { name, emoji })
+    async ({ walletId, name, emoji }) => (
+      keyring.editPrincipal(walletId, { name, emoji })
     ),
   [HANDLER_TYPES.GET_PUBLIC_KEY]:
     async () => keyring.getPublicKey(),
@@ -279,6 +285,33 @@ export const getKeyringHandler = (type, keyring) => ({
         return { error: e.message };
       }
     },
+  [HANDLER_TYPES.GET_NFT_INFO]:
+    async ({ canisterId, standard }) => {
+      try {
+        const nftInfo = await keyring.getNFTInfo({
+          canisterId,
+          standard,
+        });
+        return nftInfo;
+      } catch (e) {
+        // eslint-disable-next-line
+        console.log('Error while fetching NFT info', e);
+        return { error: e.message };
+      }
+    },
+  [HANDLER_TYPES.ADD_CUSTOM_NFT]:
+    async ({ canisterId, standard }) => {
+      try {
+        const nfts = await keyring.registerNFT({
+          canisterId, standard,
+        });
+        return (nfts || []).map((nft) => recursiveParseBigint(nft));
+      } catch (e) {
+        // eslint-disable-next-line
+        console.log('Error registering nft', e);
+        return { error: e.message };
+      }
+    },
   [HANDLER_TYPES.ADD_CUSTOM_TOKEN]:
     async ({ canisterId, standard, logo }) => {
       try {
@@ -294,7 +327,7 @@ export const getKeyringHandler = (type, keyring) => ({
       }
     },
   [HANDLER_TYPES.GET_PEM_FILE]:
-    async (walletNumber) => keyring.getPemFile(walletNumber),
+    async (walletId) => keyring.getPemFile(walletId),
   [HANDLER_TYPES.BURN_XTC]:
     async ({ to, amount }) => {
       try {
@@ -324,19 +357,22 @@ export const getKeyringHandler = (type, keyring) => ({
       return { error: e.message };
     }
   },
-  [HANDLER_TYPES.GET_ICNS_DATA]: async ({ refresh }) => {
-    const { wallets, currentWalletId } = await keyring.getState();
-    let icnsData = wallets?.[currentWalletId]?.icnsData || { names: [] };
+  [HANDLER_TYPES.GET_ICNS_DATA]: async ({ refresh, walletId = keyring.currentWalletId }) => {
+    const { wallets } = await keyring.getState();
+    let icnsData = wallets?.[walletId]?.icnsData || { names: [] };
     if (!icnsData?.names?.length || refresh) {
-      icnsData = await keyring.getICNSData();
+      icnsData = await keyring.getICNSData({ subaccount: walletId });
     } else {
       keyring.getICNSData();
     }
     return icnsData;
   },
-  [HANDLER_TYPES.SET_REVERSE_RESOLVED_NAME]: async (name) => {
+  [HANDLER_TYPES.SET_REVERSE_RESOLVED_NAME]: async ({
+    name,
+    walletId = keyring.currentWalletId,
+  }) => {
     try {
-      const res = await keyring.setReverseResolvedName({ name });
+      const res = await keyring.setReverseResolvedName({ name, subaccount: walletId });
       return res;
     } catch (e) {
       // eslint-disable-next-line
@@ -434,6 +470,16 @@ export const getKeyringHandler = (type, keyring) => ({
       return { error: e.message };
     }
   },
+  [HANDLER_TYPES.REMOVE_CUSTOM_TOKEN]: async (canisterId) => {
+    try {
+      const newTokens = await keyring.removeToken(canisterId);
+      return Object.values(newTokens);
+    } catch (e) {
+      // eslint-disable-next-line
+      console.log('Error removing the network', e);
+      return { error: e.message };
+    }
+  },
 }[type]);
 
 export const getContacts = () => new Promise((resolve, reject) => {

source/Background/errors.js

@@ -27,5 +27,6 @@ export default {
     code: 401, message: 'The transaction that was just attempted failed because it was not a valid batch transaction. Please contact the project’s developers.',
   },
   SIZE_ERROR: { code: 400, message: "There isn't enough space to open the popup" },
+  GET_BALANCE_ERROR: { code: 400, message: 'There was an error trying to fetch your balances.' },
   ...SILENT_ERRORS,
 };

source/Modules/Controller/connection.js

@@ -99,8 +99,15 @@ export class ConnectionModule extends ControllerModuleBase {
   #disconnect() {
     return {
       methodName: 'disconnect',
-      handler: async (opts, url) => {
-        removeApp(this.keyring?.currentWalletId?.toString(), url, (removed) => {
+      handler: async (opts, url, principal) => {
+        const state = await this.keyring.getState();
+
+        const walletIdFromPrincipal = Object.values(state.wallets).find((wallet) => (
+          wallet.principal === principal
+        ))?.walletId;
+        const walletIdToRemove = walletIdFromPrincipal ?? this.keyring.currentWalletId;
+
+        removeApp(walletIdToRemove, url, (removed) => {
           if (!removed) {
             opts.callback(ERRORS.CONNECTION_ERROR, null);
           }
@@ -124,6 +131,7 @@ export class ConnectionModule extends ControllerModuleBase {
         const { id: callId } = message.data.data;
         const { id: portId } = sender;
         const { url: domainUrl, icons } = metadata;
+        const newMetadata = { ...metadata, host };
 
         if (isValidWhitelist) {
           canistersInfo = await fetchCanistersInfo(whitelist);
@@ -137,8 +145,6 @@ export class ConnectionModule extends ControllerModuleBase {
 
         // If we receive a whitelist, we open the allow agent modal
         if (isValidWhitelist) {
-          const newMetadata = { ...metadata, requestConnect: true };
-
           const fixedHeight = this.keyring?.isUnlocked
             ? Math.min(422 + 65 * whitelist.length, 550)
             : SIZES.loginHeight;
@@ -170,6 +176,7 @@ export class ConnectionModule extends ControllerModuleBase {
             argsJson: JSON.stringify({ timeout, transactionId }),
             type: 'connect',
             domainUrl,
+            metadataJson: JSON.stringify(newMetadata),
           }, callback);
         }
       },

source/Modules/Controller/information.js

@@ -28,13 +28,13 @@ export class InformationModule extends ControllerModuleBase {
     ];
   }
 
-  async #internalRequestBalance(accountId, callback) {
+  async #internalRequestBalance(subaccount, callback, portConfig) {
     const getBalance = getKeyringHandler(HANDLER_TYPES.GET_BALANCE, this.keyring);
-    const icpBalance = await getBalance(accountId);
-    if (icpBalance.error) {
-      callback(ERRORS.SERVER_ERROR(icpBalance.error), null);
+    const balances = await getBalance(subaccount);
+    if (balances?.error) {
+      callback(ERRORS.GET_BALANCE_ERROR, null, portConfig);
     } else {
-      callback(null, icpBalance);
+      callback(null, balances, portConfig);
     }
   }
 
@@ -44,14 +44,10 @@ export class InformationModule extends ControllerModuleBase {
       methodName: 'requestBalance',
       handler: async (opts, metadata, subaccount, transactionId) => {
         const { callback, message, sender } = opts;
-
         getApps(this.keyring?.currentWalletId.toString(), (apps = {}) => {
           const app = apps?.[metadata.url] || {};
-
           if (app?.status === CONNECTION_STATUS.accepted) {
-            if (subaccount && Number.isNaN(parseInt(subaccount, 10))) {
-              callback(ERRORS.CLIENT_ERROR('Invalid account id'), null);
-            } else if (!this.keyring?.isUnlocked) {
+            if (!this.keyring?.isUnlocked) {
               this.displayPopUp({
                 callId: message.data.data.id,
                 portId: sender.id,
@@ -78,22 +74,9 @@ export class InformationModule extends ControllerModuleBase {
         const { subaccount } = args;
         getApps(this.keyring?.currentWalletId.toString(), async (apps = {}) => {
           const app = apps?.[url] || {};
-          callback(null, true);
-
+          callback(null, true); // Close modal
           if (app?.status === CONNECTION_STATUS.accepted) {
-            const getBalance = getKeyringHandler(
-              HANDLER_TYPES.GET_BALANCE,
-              this.keyring,
-            );
-            const icpBalance = await getBalance(subaccount);
-
-            if (icpBalance.error) {
-              callback(ERRORS.SERVER_ERROR(icpBalance.error), null, [
-                { portId, callId },
-              ]);
-            } else {
-              callback(null, icpBalance, [{ portId, callId }]);
-            }
+            this.#internalRequestBalance(subaccount, callback, [{ portId, callId }]);
           } else {
             callback(ERRORS.CONNECTION_ERROR, null, [{ portId, callId }]);
           }

source/Modules/storageManager.js

@@ -27,15 +27,15 @@ export const getApps = (currentWalletId, cb) => {
   const defaultValue = {};
 
   secureGetWrapper(currentWalletId, defaultValue, (state) => (
-    cb(state?.[parseInt(currentWalletId, 10)]?.apps || defaultValue)
+    cb(state?.[currentWalletId]?.apps || defaultValue)
   ));
 };
 
 export const getApp = (currentWalletId, appUrl, cb) => {
   const defaultValue = {};
 
   secureGetWrapper(currentWalletId, defaultValue, (state) => {
-    cb(state?.[parseInt(currentWalletId, 10)]?.apps?.[appUrl] || defaultValue);
+    cb(state?.[currentWalletId]?.apps?.[appUrl] || defaultValue);
   });
 };
 
@@ -121,13 +121,22 @@ export const getProtectedIds = (cb) => {
 
 export const setUseICNS = (useICNS, walletNumber, cb = () => {}) => {
   const defaultValue = true;
-  secureSetWrapper({ icns: { [walletNumber]: useICNS } }, defaultValue, cb);
+
+  secureGetWrapper('icns', defaultValue, (state) => {
+    cb(state?.icns?.[walletNumber] ?? defaultValue);
+    secureSetWrapper({
+      icns: {
+        ...state?.icns,
+        [walletNumber]: useICNS,
+      },
+    }, defaultValue, cb);
+  });
 };
 
 export const getUseICNS = (walletNumber, cb) => {
   const defaultValue = true;
   secureGetWrapper('icns', defaultValue, (state) => {
-    cb(state?.icns?.[parseInt(walletNumber, 10)] ?? defaultValue);
+    cb(state?.icns?.[walletNumber] ?? defaultValue);
   });
 };
 
@@ -145,12 +154,17 @@ export const getBatchTransactions = (cb) => {
 
 export const getWalletsConnectedToUrl = (url, walletIds, cb) => {
   const wallets = [];
-  walletIds.forEach((id) => {
+  if (!walletIds.length) {
+    cb([]);
+    return;
+  }
+
+  walletIds.forEach((id, index) => {
     getApp(id.toString(), url, (app = {}) => {
       if (app?.status === CONNECTION_STATUS.accepted) {
         wallets.push(id);
       }
-      if (id === walletIds.length - 1) {
+      if (index === walletIds.length - 1) {
         cb(wallets);
       }
     });
@@ -193,3 +207,12 @@ export const removePendingTransaction = (transactionId, cb) => {
 export const resetPendingTransactions = () => {
   secureSetWrapper({ activeTransactions: { } }, {}, () => {});
 };
+
+export const updateWalletId = (previousWalletId, newWalletId) => {
+  getApps(previousWalletId, (apps) => {
+    setApps(newWalletId, apps);
+  });
+  getUseICNS(previousWalletId, (result) => {
+    setUseICNS(newWalletId, result);
+  });
+};