feat(refactor): Use latest @w3ux/utils, rm @polkadot/keyring (#2262)

polkadot-cloud · Oct 3, 2024 · a5c969f · a5c969f
1 parent fdfcaf0
commit a5c969f
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "@ledgerhq/hw-transport-webhid": "^6.29.2",
     "@polkadot-api/merkleize-metadata": "^1.1.2",
     "@polkadot/api": "^12.2.3",
-    "@polkadot/keyring": "^13.0.2",
     "@polkadot/rpc-provider": "^12.2.3",
     "@polkadot/util": "^13.0.2",
     "@polkadot/util-crypto": "^13.0.2",
@@ -35,7 +34,7 @@
     "@w3ux/react-connect-kit": "1.3.1",
     "@w3ux/react-odometer": "1.1.0",
     "@w3ux/react-polkicon": "1.2.0",
-    "@w3ux/utils": "^0.4.0",
+    "@w3ux/utils": "0.7.0",
     "@w3ux/validator-assets": "^0.2.0",
     "@zondax/ledger-substrate": "^0.44.7",
     "bignumber.js": "^9.1.2",

diff --git a/src/contexts/Connect/ExternalAccounts/index.tsx b/src/contexts/Connect/ExternalAccounts/index.tsx
@@ -2,9 +2,8 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { useContext, type ReactNode, createContext } from 'react';
-import Keyring from '@polkadot/keyring';
 import { useNetwork } from 'contexts/Network';
-import { ellipsisFn } from '@w3ux/utils';
+import { ellipsisFn, formatAccountSs58 } from '@w3ux/utils';
 import type {
   ExternalAccount,
   ExternalAccountAddedBy,
@@ -45,12 +44,15 @@ export const ExternalAccountsProvider = ({
     address: string,
     addedBy: ExternalAccountAddedBy
   ): AddExternalAccountResult | null => {
-    // ensure account is formatted correctly.
-    const keyring = new Keyring();
-    keyring.setSS58Format(ss58);
+    const formattedAddress = formatAccountSs58(address, ss58);
+
+    // Address should be valid, but if not, return null early.
+    if (!formattedAddress) {
+      return null;
+    }
 
     let newEntry = {
-      address: keyring.addFromAddress(address).address,
+      address: formattedAddress,
       network,
       name: ellipsisFn(address),
       source: 'external',

diff --git a/src/contexts/Connect/Utils.ts b/src/contexts/Connect/Utils.ts
@@ -1,36 +1,39 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import Keyring from '@polkadot/keyring';
-import { localStorageOrDefault } from '@w3ux/utils';
+import { formatAccountSs58, localStorageOrDefault } from '@w3ux/utils';
 import type { ActiveProxy } from 'contexts/ActiveAccounts/types';
 import type { NetworkName } from 'types';
 
 // Gets local `activeAccount` for a network.
 export const getActiveAccountLocal = (network: NetworkName, ss58: number) => {
-  const keyring = new Keyring();
-  keyring.setSS58Format(ss58);
-  let account = localStorageOrDefault(`${network}_active_account`, null);
-  if (account !== null) {
-    account = keyring.addFromAddress(account).address;
+  const address = localStorageOrDefault(`${network}_active_account`, null);
+  if (address) {
+    const formattedAddress = formatAccountSs58(address, ss58);
+
+    if (formattedAddress) {
+      return formattedAddress;
+    }
   }
-  return account;
+  return null;
 };
 
 // Gets local `activeProxy` for a network.
-export const getActiveProxyLocal = (network: NetworkName, ss58: number) => {
-  const keyring = new Keyring();
-  keyring.setSS58Format(ss58);
+export const getActiveProxyLocal = (
+  network: NetworkName,
+  ss58: number
+): ActiveProxy | null => {
   const localActiveProxy = localStorageOrDefault(
     `${network}_active_proxy`,
     null
   ) as ActiveProxy | null;
 
-  if (localActiveProxy !== null && localActiveProxy?.address) {
-    localActiveProxy.address = keyring.addFromAddress(
-      localActiveProxy.address
-    ).address;
+  if (localActiveProxy && localActiveProxy?.address) {
+    const formattedAddress = formatAccountSs58(localActiveProxy.address, ss58);
+    if (formattedAddress) {
+      localActiveProxy.address = formattedAddress;
+      return localActiveProxy;
+    }
   }
-
-  return localActiveProxy;
+  return null;
 };
diff --git a/src/library/AccountInput/index.tsx b/src/library/AccountInput/index.tsx
@@ -80,7 +80,13 @@ export const AccountInput = ({
   const handleImport = async () => {
     // reformat address if in wrong format
     const addressFormatted = formatAccountSs58(value, ss58);
-    if (addressFormatted) {
+
+    if (!addressFormatted) {
+      setValid('not_valid');
+      return;
+    }
+
+    if (addressFormatted !== value) {
       setValid('confirm_reformat');
       setValue(addressFormatted);
       setReformatted(true);

diff --git a/src/library/PayeeInput/index.tsx b/src/library/PayeeInput/index.tsx
@@ -52,14 +52,16 @@ export const PayeeInput = ({
   // Handle change of account value. Updates setup progress if the account is a valid value.
   const handleChangeAccount = (e: ChangeEvent<HTMLInputElement>) => {
     const newAddress = e.target.value;
-    const formatted = formatAccountSs58(newAddress, ss58) || newAddress || null;
-    const isValid = isValidAddress(formatted || '');
+    const formattedAccount =
+      formatAccountSs58(newAddress, ss58) || newAddress || null;
+    const isValid =
+      formattedAccount !== null && isValidAddress(formattedAccount);
 
     setValid(isValid);
-    setAccount(formatted);
+    setAccount(formattedAccount);
 
     if (isValid) {
-      handleChange(formatted);
+      handleChange(formattedAccount);
     } else {
       handleChange(null);
     }

diff --git a/src/modals/ImportVault/Reader.tsx b/src/modals/ImportVault/Reader.tsx
@@ -39,7 +39,7 @@ export const Reader = () => {
   const valid =
     isValidAddress(qrData) &&
     !vaultAccountExists(network, qrData) &&
-    !formatAccountSs58(qrData, ss58);
+    formatAccountSs58(qrData, ss58) === qrData;
 
   // Reset QR data on open.
   useEffect(() => {
@@ -61,7 +61,7 @@ export const Reader = () => {
       qrData === undefined
         ? `${t('waitingForQRCode')}`
         : isValidAddress(qrData)
-          ? formatAccountSs58(qrData, ss58)
+          ? formatAccountSs58(qrData, ss58) !== qrData
             ? `${t('differentNetworkAddress')}`
             : vaultAccountExists(network, qrData)
               ? `${t('accountAlreadyImported')}`

diff --git a/yarn.lock b/yarn.lock
@@ -1357,6 +1357,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polkadot/networks@npm:13.1.1":
+  version: 13.1.1
+  resolution: "@polkadot/networks@npm:13.1.1"
+  dependencies:
+    "@polkadot/util": "npm:13.1.1"
+    "@substrate/ss58-registry": "npm:^1.50.0"
+    tslib: "npm:^2.7.0"
+  checksum: 10c0/30ea310ecfbe1ab7a050b3809a86f6b4564b75d0d35e467ff16428fd4d75e3d685e2964366d9a9130ade71ea7615ac064c8d5704457c72810333d5f9d257b32b
+  languageName: node
+  linkType: hard
+
 "@polkadot/rpc-augment@npm:10.13.1":
   version: 10.13.1
   resolution: "@polkadot/rpc-augment@npm:10.13.1"
@@ -1647,6 +1658,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polkadot/util-crypto@npm:^13.1.1":
+  version: 13.1.1
+  resolution: "@polkadot/util-crypto@npm:13.1.1"
+  dependencies:
+    "@noble/curves": "npm:^1.3.0"
+    "@noble/hashes": "npm:^1.3.3"
+    "@polkadot/networks": "npm:13.1.1"
+    "@polkadot/util": "npm:13.1.1"
+    "@polkadot/wasm-crypto": "npm:^7.3.2"
+    "@polkadot/wasm-util": "npm:^7.3.2"
+    "@polkadot/x-bigint": "npm:13.1.1"
+    "@polkadot/x-randomvalues": "npm:13.1.1"
+    "@scure/base": "npm:^1.1.7"
+    tslib: "npm:^2.7.0"
+  peerDependencies:
+    "@polkadot/util": 13.1.1
+  checksum: 10c0/6ce2f75fd55b9f41a99faf8c16e4a02f7d52ce4caec3d323f1cb08bd792798dd6e1b2d3b75cf4dcc2ff1ed81adcaa0d35499c48f1a653325dce01301f8ee2837
+  languageName: node
+  linkType: hard
+
 "@polkadot/util@npm:12.6.2, @polkadot/util@npm:^12.6.2":
   version: 12.6.2
   resolution: "@polkadot/util@npm:12.6.2"
@@ -1677,6 +1708,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polkadot/util@npm:13.1.1, @polkadot/util@npm:^13.1.1":
+  version: 13.1.1
+  resolution: "@polkadot/util@npm:13.1.1"
+  dependencies:
+    "@polkadot/x-bigint": "npm:13.1.1"
+    "@polkadot/x-global": "npm:13.1.1"
+    "@polkadot/x-textdecoder": "npm:13.1.1"
+    "@polkadot/x-textencoder": "npm:13.1.1"
+    "@types/bn.js": "npm:^5.1.5"
+    bn.js: "npm:^5.2.1"
+    tslib: "npm:^2.7.0"
+  checksum: 10c0/28a77a42bbc7a71fc8647d393ba1ca0e0e7e46968ac03c4f3d78ee7414f6af32c343c4522a588fc5b1e074f08d7b85b120247c43ff00bea971d201b52a6af0f5
+  languageName: node
+  linkType: hard
+
 "@polkadot/wasm-bridge@npm:7.3.2":
   version: 7.3.2
   resolution: "@polkadot/wasm-bridge@npm:7.3.2"
@@ -1777,6 +1823,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polkadot/x-bigint@npm:13.1.1":
+  version: 13.1.1
+  resolution: "@polkadot/x-bigint@npm:13.1.1"
+  dependencies:
+    "@polkadot/x-global": "npm:13.1.1"
+    tslib: "npm:^2.7.0"
+  checksum: 10c0/8df11029c9956d38bd6005f1d85cf4c4d67058fdff14f534e487dc30c43003e35f4e89dc102501c216806446ec6f40615dba4bf957a484b8ede78c398bec7568
+  languageName: node
+  linkType: hard
+
 "@polkadot/x-fetch@npm:^12.6.2":
   version: 12.6.2
   resolution: "@polkadot/x-fetch@npm:12.6.2"
@@ -1817,6 +1873,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polkadot/x-global@npm:13.1.1":
+  version: 13.1.1
+  resolution: "@polkadot/x-global@npm:13.1.1"
+  dependencies:
+    tslib: "npm:^2.7.0"
+  checksum: 10c0/07a69f24a94c6bd8934dc39f52dee620f9a0cbac368f0a8e6b5e4637f8e90ba48e110fa4cf8ac1d6b8e80f4acd41af8be5c493d89abe7fe29c0523d7aac3eefb
+  languageName: node
+  linkType: hard
+
 "@polkadot/x-randomvalues@npm:12.6.2":
   version: 12.6.2
   resolution: "@polkadot/x-randomvalues@npm:12.6.2"
@@ -1843,6 +1908,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polkadot/x-randomvalues@npm:13.1.1":
+  version: 13.1.1
+  resolution: "@polkadot/x-randomvalues@npm:13.1.1"
+  dependencies:
+    "@polkadot/x-global": "npm:13.1.1"
+    tslib: "npm:^2.7.0"
+  peerDependencies:
+    "@polkadot/util": 13.1.1
+    "@polkadot/wasm-util": "*"
+  checksum: 10c0/425512c16d66fa9e8badcb14305b1547c11f38dbe3640c3e8fe6f5504baed80764398df783322c92d2a7e53b568414898f28917606f346a30b6ee4a9dcb97628
+  languageName: node
+  linkType: hard
+
 "@polkadot/x-textdecoder@npm:12.6.2":
   version: 12.6.2
   resolution: "@polkadot/x-textdecoder@npm:12.6.2"
@@ -1863,6 +1941,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polkadot/x-textdecoder@npm:13.1.1":
+  version: 13.1.1
+  resolution: "@polkadot/x-textdecoder@npm:13.1.1"
+  dependencies:
+    "@polkadot/x-global": "npm:13.1.1"
+    tslib: "npm:^2.7.0"
+  checksum: 10c0/bc9671db97ace14383b27de22f301d3b5621aedc74d7ebb4c723eed3b74b952850b697be50b09b8456eed6196edec71b324aa6d1dd3558515fe639a51bcc52d2
+  languageName: node
+  linkType: hard
+
 "@polkadot/x-textencoder@npm:12.6.2":
   version: 12.6.2
   resolution: "@polkadot/x-textencoder@npm:12.6.2"
@@ -1883,6 +1971,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polkadot/x-textencoder@npm:13.1.1":
+  version: 13.1.1
+  resolution: "@polkadot/x-textencoder@npm:13.1.1"
+  dependencies:
+    "@polkadot/x-global": "npm:13.1.1"
+    tslib: "npm:^2.7.0"
+  checksum: 10c0/819d9dc729a8d635c0269f5a2b8dbec1350c766040946ea750f4df872e9d4be397be74e3ad5d425f3d6df51eff021a7a86966223f4c58694c0bdeadf741312a6
+  languageName: node
+  linkType: hard
+
 "@polkadot/x-ws@npm:^12.6.2":
   version: 12.6.2
   resolution: "@polkadot/x-ws@npm:12.6.2"
@@ -2240,6 +2338,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@substrate/ss58-registry@npm:^1.50.0":
+  version: 1.50.0
+  resolution: "@substrate/ss58-registry@npm:1.50.0"
+  checksum: 10c0/49178248445d88b2f06f6e45e7890bd292f91b9d5d6bfa2788f27b5d9e3a08d3f18462440ea905b2fe7fa60dafb690d40ce1f549929bdbbe48562be622748717
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0":
   version: 8.0.0
   resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0"
@@ -2908,6 +3013,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@w3ux/utils@npm:0.7.0":
+  version: 0.7.0
+  resolution: "@w3ux/utils@npm:0.7.0"
+  dependencies:
+    "@polkadot/util": "npm:^13.1.1"
+    "@polkadot/util-crypto": "npm:^13.1.1"
+    bignumber.js: "npm:^9.1.1"
+  checksum: 10c0/7b754a29716d575180501b6ac998afd7fb6b727e702af1b8f65be44503152573663b694df29fbe7e6bfec7da7c8bd43cf2047dde8820d61551abeeb778a1590a
+  languageName: node
+  linkType: hard
+
 "@w3ux/utils@npm:^0.4.0":
   version: 0.4.0
   resolution: "@w3ux/utils@npm:0.4.0"
@@ -6449,7 +6565,6 @@ __metadata:
     "@ledgerhq/logs": "npm:^6.12.0"
     "@polkadot-api/merkleize-metadata": "npm:^1.1.2"
     "@polkadot/api": "npm:^12.2.3"
-    "@polkadot/keyring": "npm:^13.0.2"
     "@polkadot/rpc-provider": "npm:^12.2.3"
     "@polkadot/util": "npm:^13.0.2"
     "@polkadot/util-crypto": "npm:^13.0.2"
@@ -6472,7 +6587,7 @@ __metadata:
     "@w3ux/react-odometer": "npm:1.1.0"
     "@w3ux/react-polkicon": "npm:1.2.0"
     "@w3ux/types": "npm:0.2.0"
-    "@w3ux/utils": "npm:^0.4.0"
+    "@w3ux/utils": "npm:0.7.0"
     "@w3ux/validator-assets": "npm:^0.2.0"
     "@zondax/ledger-substrate": "npm:^0.44.7"
     bignumber.js: "npm:^9.1.2"
@@ -7820,6 +7935,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "tslib@npm:2.7.0"
+  checksum: 10c0/469e1d5bf1af585742128827000711efa61010b699cb040ab1800bcd3ccdd37f63ec30642c9e07c4439c1db6e46345582614275daca3e0f4abae29b0083f04a6
+  languageName: node
+  linkType: hard
+
 "type-check@npm:^0.4.0, type-check@npm:~0.4.0":
   version: 0.4.0
   resolution: "type-check@npm:0.4.0"