fix: read only account import, local account import (#1833)

polkadot-cloud · Jan 6, 2024 · af843f5 · af843f5
1 parent 2f7f020
commit af843f5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "@ledgerhq/hw-transport-webhid": "^6.28.1",
     "@polkadot-cloud/assets": "^0.3.0",
     "@polkadot-cloud/core": "^1.2.0",
-    "@polkadot-cloud/react": "^0.3.0",
+    "@polkadot-cloud/react": "^0.3.1",
     "@polkadot-cloud/utils": "^0.2.0",
     "@polkadot/api": "^10.11.2",
     "@polkadot/keyring": "^12.6.2",

diff --git a/src/contexts/Connect/OtherAccounts/index.tsx b/src/contexts/Connect/OtherAccounts/index.tsx
@@ -13,6 +13,7 @@ import {
   getLocalVaultAccounts,
 } from 'contexts/Hardware/Utils';
 import type { AnyFunction, MaybeAddress, NetworkName } from 'types';
+import { setStateWithRef } from '@polkadot-cloud/utils';
 import { useNetwork } from 'contexts/Network';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import type { ImportedAccount } from '@polkadot-cloud/react/types';
@@ -46,6 +47,9 @@ export const OtherAccountsProvider = ({
 
   // Store other (non-extension) accounts list.
   const [otherAccounts, setOtherAccounts] = useState<ImportedAccount[]>([]);
+  // Ref is needed to refer to updated state in-between renders as local accounts are imported from
+  // different sources.
+  const otherAccountsRef = useRef(otherAccounts);
 
   // Store unsubscribe handlers for connected extensions.
   const unsubs = useRef<Record<string, AnyFunction>>({});
@@ -59,7 +63,7 @@ export const OtherAccountsProvider = ({
     // Unsubscribe and remove unsub from context ref.
     if (forget.length) {
       for (const { address } of forget) {
-        if (otherAccounts.find((a) => a.address === address)) {
+        if (otherAccountsRef.current.find((a) => a.address === address)) {
           const unsub = unsubs.current[address];
           if (unsub) {
             unsub();
@@ -68,11 +72,13 @@ export const OtherAccountsProvider = ({
         }
       }
       // Remove forgotten accounts from context state.
-      setOtherAccounts(
-        [...otherAccounts].filter(
+      setStateWithRef(
+        [...otherAccountsRef.current].filter(
           (a) =>
             forget.find(({ address }) => address === a.address) === undefined
-        )
+        ),
+        setOtherAccounts,
+        otherAccountsRef
       );
       // If the currently active account is being forgotten, disconnect.
       if (
@@ -102,8 +108,9 @@ export const OtherAccountsProvider = ({
       // remove already-imported accounts.
       localAccounts = localAccounts.filter(
         (l) =>
-          otherAccounts.find(({ address }) => address === l.address) ===
-          undefined
+          otherAccountsRef.current.find(
+            ({ address }) => address === l.address
+          ) === undefined
       );
 
       // set active account for networkData.
@@ -118,15 +125,17 @@ export const OtherAccountsProvider = ({
 
   // Renames an other account.
   const renameOtherAccount = (address: MaybeAddress, newName: string) => {
-    setOtherAccounts(
-      [...otherAccounts].map((a) =>
+    setStateWithRef(
+      [...otherAccountsRef.current].map((a) =>
         a.address !== address
           ? a
           : {
               ...a,
               name: newName,
             }
-      )
+      ),
+      setOtherAccounts,
+      otherAccountsRef
     );
   };
 
@@ -139,15 +148,21 @@ export const OtherAccountsProvider = ({
 
   // Add other accounts to context state.
   const addOtherAccounts = (account: ImportedAccount[]) => {
-    setOtherAccounts([...otherAccounts].concat(account));
+    setStateWithRef(
+      [...otherAccountsRef.current].concat(account),
+      setOtherAccounts,
+      otherAccountsRef
+    );
   };
 
   // Replace other account with new entry.
   const replaceOtherAccount = (account: ImportedAccount) => {
-    setOtherAccounts(
-      [...otherAccounts].map((item) =>
+    setStateWithRef(
+      [...otherAccountsRef.current].map((item) =>
         item.address !== account.address ? item : account
-      )
+      ),
+      setOtherAccounts,
+      otherAccountsRef
     );
   };
 
@@ -168,7 +183,7 @@ export const OtherAccountsProvider = ({
     if (!checkingInjectedWeb3) {
       // unsubscribe from all accounts and reset state.
       unsubscribe();
-      setOtherAccounts([]);
+      setStateWithRef([], setOtherAccounts, otherAccountsRef);
     }
     return () => unsubscribe();
   }, [network, checkingInjectedWeb3]);
@@ -204,7 +219,7 @@ export const OtherAccountsProvider = ({
         importLocalOtherAccounts,
         forgetOtherAccounts,
         accountsInitialised,
-        otherAccounts,
+        otherAccounts: otherAccountsRef.current,
       }}
     >
       {children}

diff --git a/yarn.lock b/yarn.lock
@@ -1021,37 +1021,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot-cloud/assets@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "@polkadot-cloud/assets@npm:0.2.1"
-  checksum: a6d89dbacfa903fead98f937995113b596bde91c1532fc75bbf87d3986283114c27bbb63e74280f5078ae24d7748a72321c2c9f7622de4fb6ecc5863cf0527d7
-  languageName: node
-  linkType: hard
-
 "@polkadot-cloud/assets@npm:^0.3.0":
   version: 0.3.0
   resolution: "@polkadot-cloud/assets@npm:0.3.0"
   checksum: 776a402e626db6058db2d97fc4d5b20a4e8575b57bdcaef76f7cc49631f4e7ba2566bed3dd56fa287a4e4518929b6c207fca2966a261bb8decd7ad7c90e4029a
   languageName: node
   linkType: hard
 
-"@polkadot-cloud/core@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@polkadot-cloud/core@npm:1.1.1"
-  checksum: 529a9103cc0e78ece57c4d65b7f36578801873ce6a399f00c4466d785d9a85e159f9b42960f9464103d7cf5170b6bf8b2e1d75a1ae8fdefaf6e68d00c0df5ea9
-  languageName: node
-  linkType: hard
-
 "@polkadot-cloud/core@npm:^1.2.0":
   version: 1.2.0
   resolution: "@polkadot-cloud/core@npm:1.2.0"
   checksum: cb10590e9edd606e5a00591e07d507b01c5ac549cd5bf5c3ed3de16441e23c40570d9136b5437d6a80ed1e87abcc0cd79f7bd4fdd4b6e0bc7d0d9ff89162c694
   languageName: node
   linkType: hard
 
-"@polkadot-cloud/react@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "@polkadot-cloud/react@npm:0.3.0"
+"@polkadot-cloud/react@npm:^0.3.1":
+  version: 0.3.1
+  resolution: "@polkadot-cloud/react@npm:0.3.1"
   dependencies:
     "@chainsafe/metamask-polkadot-adapter": "npm:^0.6.0"
     "@chainsafe/metamask-polkadot-types": "npm:^0.6.0"
@@ -1060,32 +1046,18 @@ __metadata:
     "@fortawesome/free-regular-svg-icons": "npm:^6.5.1"
     "@fortawesome/free-solid-svg-icons": "npm:^6.5.1"
     "@fortawesome/react-fontawesome": "npm:^0.2.0"
-    "@polkadot-cloud/assets": "npm:^0.2.1"
-    "@polkadot-cloud/core": "npm:^1.1.1"
-    "@polkadot-cloud/utils": "npm:^0.1.1"
+    "@polkadot-cloud/assets": "npm:^0.3.0"
+    "@polkadot-cloud/core": "npm:^1.2.0"
+    "@polkadot-cloud/utils": "npm:^0.2.0"
     "@polkadot/keyring": "npm:^12.6.2"
     "@polkadot/util": "npm:^12.6.2"
     "@polkadot/util-crypto": "npm:^12.6.2"
-    framer-motion: "npm:^10.16.16"
+    framer-motion: "npm:^10.17.9"
     react-error-boundary: "npm:^4.0.12"
   peerDependencies:
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: 39c13a5fd9298fdb4ce98e9d113d0e24fbf7f4bd9d4bed682f3e708e27e7ff0e6e3471acfc2ecf203d385da9f02ec6ca29b2c1b4e8e6177038bd14a0d53a4d6f
-  languageName: node
-  linkType: hard
-
-"@polkadot-cloud/utils@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "@polkadot-cloud/utils@npm:0.1.1"
-  dependencies:
-    "@polkadot/keyring": "npm:^12.6.2"
-    "@polkadot/util": "npm:^12.6.2"
-    bignumber.js: "npm:^9.1.1"
-  peerDependencies:
-    "@polkadot/keyring": ^12.6.2
-    "@polkadot/util": ^12.6.2
-  checksum: 7afdaff56505c638a3c5e40c56156aa46f5077fda1dc26b25c134366402666b058be6ad174217ebaa0309cb6359d5f77ba366697dc76346a5e7c75e0c1919326
+  checksum: ac322353844c31003fd3da4dff2a2cf1b214e0c069e36664df8113d0c1006d1cbfb1907a3266490935d986c1492e4763402e1ab36b3e42c7900faf0a9e36a1e7
   languageName: node
   linkType: hard
 
@@ -4726,27 +4698,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^10.16.16":
-  version: 10.16.16
-  resolution: "framer-motion@npm:10.16.16"
-  dependencies:
-    "@emotion/is-prop-valid": "npm:^0.8.2"
-    tslib: "npm:^2.4.0"
-  peerDependencies:
-    react: ^18.0.0
-    react-dom: ^18.0.0
-  dependenciesMeta:
-    "@emotion/is-prop-valid":
-      optional: true
-  peerDependenciesMeta:
-    react:
-      optional: true
-    react-dom:
-      optional: true
-  checksum: 4cd620971e6ac044461783ee94d8fe39dafd11d658f1b2fb06f025c0c502d022bb3bf24dd95b9486325fce27e437ce575b8f033c7770539b4fb3af62a5742e71
-  languageName: node
-  linkType: hard
-
 "framer-motion@npm:^10.17.9":
   version: 10.17.9
   resolution: "framer-motion@npm:10.17.9"
@@ -6847,7 +6798,7 @@ __metadata:
     "@ledgerhq/logs": "npm:^6.12.0"
     "@polkadot-cloud/assets": "npm:^0.3.0"
     "@polkadot-cloud/core": "npm:^1.2.0"
-    "@polkadot-cloud/react": "npm:^0.3.0"
+    "@polkadot-cloud/react": "npm:^0.3.1"
     "@polkadot-cloud/utils": "npm:^0.2.0"
     "@polkadot/api": "npm:^10.11.2"
     "@polkadot/keyring": "npm:^12.6.2"