feat(refactor): Use formatAccountSs58 util (#2084)

package.json

@@ -36,7 +36,7 @@
     "@w3ux/react-connect-kit": "^0.1.15",
     "@w3ux/react-odometer": "^0.0.3",
     "@w3ux/react-polkicon": "^0.0.2",
-    "@w3ux/utils": "^0.0.2",
+    "@w3ux/utils": "^0.1.0",
     "@w3ux/validator-assets": "^0.0.4",
     "@zondax/ledger-substrate": "^0.41.4",
     "bignumber.js": "^9.1.2",

src/contexts/Connect/Utils.ts

@@ -15,19 +15,3 @@ export const getActiveAccountLocal = (network: NetworkName, ss58: number) => {
   }
   return account;
 };
-
-// Formats an address with the supplied ss58 prefix.
-export const formatAccountSs58 = (address: string, ss58: number) => {
-  try {
-    const keyring = new Keyring();
-    keyring.setSS58Format(ss58);
-    const formatted = keyring.addFromAddress(address).address;
-    if (formatted !== address) {
-      return formatted;
-    }
-
-    return null;
-  } catch (e) {
-    return null;
-  }
-};

src/library/AccountInput/index.tsx

@@ -4,14 +4,13 @@
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Polkicon } from '@w3ux/react-polkicon';
-import { isValidAddress } from '@w3ux/utils';
+import { isValidAddress, formatAccountSs58 } from '@w3ux/utils';
 import type { FormEvent } from 'react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOverlay } from 'kits/Overlay/Provider';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
 import { useNetwork } from 'contexts/Network';
-import { formatAccountSs58 } from 'contexts/Connect/Utils';
 import { AccountInputWrapper } from './Wrapper';
 import type { AccountInputProps } from './types';
 import { ButtonSecondary } from 'kits/Buttons/ButtonSecondary';

src/library/PayeeInput/index.tsx

@@ -3,7 +3,7 @@
 
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { isValidAddress, remToUnit } from '@w3ux/utils';
+import { isValidAddress, remToUnit, formatAccountSs58 } from '@w3ux/utils';
 import type { ChangeEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,7 +12,6 @@ import { Polkicon } from '@w3ux/react-polkicon';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
 import { useNetwork } from 'contexts/Network';
-import { formatAccountSs58 } from 'contexts/Connect/Utils';
 import { Wrapper } from './Wrapper';
 import type { PayeeInputProps } from './types';
 

src/modals/ImportVault/Reader.tsx

@@ -1,14 +1,13 @@
 // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { isValidAddress } from '@w3ux/utils';
+import { isValidAddress, formatAccountSs58 } from '@w3ux/utils';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePrompt } from 'contexts/Prompt';
 import { QRViewerWrapper } from 'library/Import/Wrappers';
 import { QrScanSignature } from 'library/QRCode/ScanSignature';
 import { useNetwork } from 'contexts/Network';
-import { formatAccountSs58 } from 'contexts/Connect/Utils';
 import { useOtherAccounts } from 'contexts/Connect/OtherAccounts';
 import type { AnyJson } from 'types';
 import { ButtonSecondary } from 'kits/Buttons/ButtonSecondary';

src/pages/Pools/Roles/RoleEditInput/index.tsx

@@ -1,11 +1,10 @@
 // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { isValidAddress } from '@w3ux/utils';
+import { isValidAddress, formatAccountSs58 } from '@w3ux/utils';
 import type { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNetwork } from 'contexts/Network';
-import { formatAccountSs58 } from 'contexts/Connect/Utils';
 import { Wrapper } from './Wrapper';
 import type { RoleEditInputProps } from '../types';
 

yarn.lock

@@ -2725,6 +2725,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@w3ux/utils@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@w3ux/utils@npm:0.1.0"
+  dependencies:
+    "@polkadot/keyring": "npm:^12.6.2"
+    "@polkadot/util": "npm:^12.6.2"
+    bignumber.js: "npm:^9.1.1"
+  checksum: 10c0/b69f108d506102c5e27fe224b5c1a32ab4e0c27c7d007f7647eee17760a56c539ee3a246cdf8e5d1a8613d35b077c28349e60b247676b5be886f418a62bddff7
+  languageName: node
+  linkType: hard
+
 "@w3ux/validator-assets@npm:^0.0.4":
   version: 0.0.4
   resolution: "@w3ux/validator-assets@npm:0.0.4"
@@ -6632,7 +6643,7 @@ __metadata:
     "@w3ux/react-connect-kit": "npm:^0.1.15"
     "@w3ux/react-odometer": "npm:^0.0.3"
     "@w3ux/react-polkicon": "npm:^0.0.2"
-    "@w3ux/utils": "npm:^0.0.2"
+    "@w3ux/utils": "npm:^0.1.0"
     "@w3ux/validator-assets": "npm:^0.0.4"
     "@zondax/ledger-substrate": "npm:^0.41.4"
     bignumber.js: "npm:^9.1.2"