Display hex public key on address conversion (#9388)

* Display hex public key on address conversion

* CHANGELOG

* lint

* Adjust imgConvert sorting

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## master
+
+Changes:
+
+- Display hex public key in address conversion utility
+- Disable unreachable endpoints
+
+
 ## 0.129.1 Apr 30, 2023
 
 Contributed:

packages/apps-config/src/ui/logos/chains/index.ts

@@ -14,8 +14,8 @@ export { chainsBitgreenPNG } from './generated/bitgreenPNG.js';
 export { chainsBittensorPNG } from './generated/bittensorPNG.js';
 export { chainsBrainstormPNG } from './generated/brainstormPNG.js';
 export { chainsComposableFinancePNG } from './generated/composableFinancePNG.js';
-export { chainsCreditcoinPNG } from './generated/creditcoinPNG.js';
 export { chainsCreditcoinTestPNG } from './generated/creditcoin-testPNG.js';
+export { chainsCreditcoinPNG } from './generated/creditcoinPNG.js';
 export { chainsDebioSVG } from './generated/debioSVG.js';
 export { chainsDorafactoryPNG } from './generated/dorafactoryPNG.js';
 export { chainsDustyPNG } from './generated/dustyPNG.js';
@@ -41,8 +41,8 @@ export { chainsMangataxPNG } from './generated/mangataxPNG.js';
 export { chainsMoonsamaPNG } from './generated/moonsamaPNG.js';
 export { chainsMyriadPNG } from './generated/myriadPNG.js';
 export { chainsOakPNG } from './generated/oakPNG.js';
-export { chainsOrigintrailPNG } from './generated/origintrailPNG.js';
 export { chainsOrigintrailTestnetPNG } from './generated/origintrail-testnetPNG.js';
+export { chainsOrigintrailPNG } from './generated/origintrailPNG.js';
 export { chainsPeaqPNG } from './generated/peaqPNG.js';
 export { chainsPendulumSVG } from './generated/pendulumSVG.js';
 export { chainsPicassoSVG } from './generated/picassoSVG.js';

packages/apps-config/src/ui/logos/nodes/index.ts

@@ -14,8 +14,8 @@ export { nodesAstarPNG } from './generated/astarPNG.js';
 export { nodesAutomataPNG } from './generated/automataPNG.js';
 export { nodesAventusSVG } from './generated/aventusSVG.js';
 export { nodesBajunPNG } from './generated/bajunPNG.js';
-export { nodesBasiliskPNG } from './generated/basiliskPNG.js';
 export { nodesBasiliskRococoBgPNG } from './generated/basilisk-rococo-bgPNG.js';
+export { nodesBasiliskPNG } from './generated/basiliskPNG.js';
 export { nodesBeastSVG } from './generated/beastSVG.js';
 export { nodesBifrostSVG } from './generated/bifrostSVG.js';
 export { nodesBitcountryPNG } from './generated/bitcountryPNG.js';
@@ -75,8 +75,8 @@ export { nodesKulupuSVG } from './generated/kulupuSVG.js';
 export { nodesKusariSVG } from './generated/kusariSVG.js';
 export { nodesKylinPNG } from './generated/kylinPNG.js';
 export { nodesLaminarCircleSVG } from './generated/laminar-circleSVG.js';
-export { nodesLitentryPNG } from './generated/litentryPNG.js';
 export { nodesLitentryRococoPNG } from './generated/litentry-rococoPNG.js';
+export { nodesLitentryPNG } from './generated/litentryPNG.js';
 export { nodesLitmusPNG } from './generated/litmusPNG.js';
 export { nodesLoomNetworkPNG } from './generated/loom_networkPNG.js';
 export { nodesMantaPNG } from './generated/mantaPNG.js';

packages/page-utilities/src/Convert.tsx

@@ -1,6 +1,8 @@
 // Copyright 2017-2023 @polkadot/app-utilities authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { HexString } from '@polkadot/util/types';
+
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { createOption } from '@polkadot/app-settings/util';
@@ -8,8 +10,8 @@ import { createSs58 } from '@polkadot/apps-config';
 import { allNetworks } from '@polkadot/networks';
 import { Dropdown, InputAddressSimple, Static } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
-import { formatNumber } from '@polkadot/util';
-import { base58Decode, checkAddressChecksum, encodeAddress, isAddress } from '@polkadot/util-crypto';
+import { formatNumber, u8aToHex } from '@polkadot/util';
+import { base58Decode, checkAddressChecksum, decodeAddress, encodeAddress, isAddress } from '@polkadot/util-crypto';
 
 import { useTranslation } from './translate.js';
 
@@ -18,32 +20,36 @@ interface Props {
 }
 
 interface State {
-  address: string | null;
   inputSS58: number;
+  publicKey: HexString | null;
 }
 
 function getState (input: string | null): State {
-  let address: string | null = null;
-  let inputSS58 = 42;
+  try {
+    if (input && isAddress(input)) {
+      const decoded = base58Decode(input);
+      const [,,, inputSS58] = checkAddressChecksum(decoded);
+      const publicU8a = decodeAddress(input);
 
-  if (input && isAddress(input)) {
-    const decoded = base58Decode(input);
-    const [,,, ss58Decoded] = checkAddressChecksum(decoded);
-
-    address = input;
-    inputSS58 = ss58Decoded;
+      return {
+        inputSS58,
+        publicKey: u8aToHex(publicU8a)
+      };
+    }
+  } catch {
+    // ignore
   }
 
   return {
-    address,
-    inputSS58
+    inputSS58: 42,
+    publicKey: null
   };
 }
 
 function Addresses ({ className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { chainSS58 } = useApi();
-  const [{ address, inputSS58 }, setState] = useState<State>({ address: null, inputSS58: 42 });
+  const [{ inputSS58, publicKey }, setState] = useState<State>({ inputSS58: 42, publicKey: null });
   const [prefix, setPrefix] = useState(-1);
 
   const setAddress = useCallback(
@@ -69,8 +75,8 @@ function Addresses ({ className }: Props): React.ReactElement<Props> {
   );
 
   const converted = useMemo(
-    () => address && encodeAddress(address, prefix === -1 ? chainSS58 : prefix),
-    [address, chainSS58, prefix]
+    () => publicKey && encodeAddress(publicKey, prefix === -1 ? chainSS58 : prefix),
+    [chainSS58, prefix, publicKey]
   );
 
   return (
@@ -78,7 +84,7 @@ function Addresses ({ className }: Props): React.ReactElement<Props> {
       <div className='ui--row'>
         <InputAddressSimple
           autoFocus
-          isError={!address}
+          isError={!publicKey}
           label={t<string>('address to convert')}
           noConvert
           onChange={setAddress}
@@ -92,7 +98,7 @@ function Addresses ({ className }: Props): React.ReactElement<Props> {
           options={prefixOptions}
         />
       </div>
-      {address && (
+      {publicKey && (
         <>
           <div className='ui--row'>
             <Static
@@ -111,6 +117,13 @@ function Addresses ({ className }: Props): React.ReactElement<Props> {
               />
             </div>
           )}
+          <div className='ui--row'>
+            <Static
+              className='full'
+              label={t<string>('hex public key')}
+              value={publicKey}
+            />
+          </div>
         </>
       )}
     </div>

scripts/imgConvert.mjs

@@ -7,6 +7,8 @@ import path from 'node:path';
 import { formatNumber, stringCamelCase } from '@polkadot/util';
 
 const MAX_SIZE = 48 * 1024;
+
+// FIXME The sorting here and the sorting from linting seems like a mismatch...
 const HEADER = '// Copyright 2017-2023 @polkadot/apps authors & contributors\n// SPDX-License-Identifier: Apache-2.0\n\n// Do not edit. Auto-generated via node scripts/imgConvert.mjs\n\n';
 
 const MIME = {
@@ -90,7 +92,13 @@ for (let dir of ['extensions', 'external', 'chains', 'nodes']) {
         console.log('\n', notfound.length.toString().padStart(3), 'not referenced in', dir, '::\n\n\t', notfound.join(', '), '\n');
       }
 
-      fs.writeFileSync(path.join(sub, 'index.ts'), `${HEADER}${Object.keys(result).sort().map((k) => `export { ${k} } from './${result[k]}.js';`).join('\n')}\n`);
+      fs.writeFileSync(path.join(sub, 'index.ts'), `${HEADER}${
+        Object
+          .keys(result)
+          .sort((a, b) => result[a].localeCompare(result[b]))
+          .map((k) => `export { ${k} } from './${result[k]}.js';`)
+          .join('\n')
+      }\n`);
     }
 }