Adjust config imports/exports (#4051)

* Adjust config imports/exports

* Move type import

* yarn

* drive-by type imports

packages/apps-config/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@polkadot/apps-config",
-  "private": true,
   "version": "0.67.2-7",
   "main": "index.js",
+  "sideEffects": true,
   "repository": "github:polkadot-js/apps",
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "maintainers": [],
@@ -15,5 +15,8 @@
     "@laminar/type-definitions": "^0.2.0-beta.141",
     "@polkadot/networks": "^4.1.2-2",
     "@subsocial/types": "^0.4.7"
+  },
+  "devDependencies": {
+    "i18next": "^19.8.3"
   }
 }

packages/apps-config/src/api/chain/index.ts

@@ -4,7 +4,7 @@
 import Beresheet from './beresheet';
 import Phala from './phala';
 
-// alphabetical
+// alphabetical, based on the actual displayed name
 export default {
   Beresheet,
   'Phala PoC-2': Phala

packages/apps-config/src/api/index.ts

@@ -3,8 +3,10 @@
 
 import typesChain from './chain';
 import typesSpec from './spec';
-import typesBundle from './bundle';
-import typesRpc from './rpc';
+
+export { default as typesBundle } from './bundle';
+export * from './constants';
+export { default as typesRpc } from './rpc';
 
 export function getChainTypes (specName: string, chainName: string): Record<string, string | Record<string, unknown>> {
   return {
@@ -15,7 +17,5 @@ export function getChainTypes (specName: string, chainName: string): Record<stri
 
 export {
   typesChain,
-  typesSpec,
-  typesBundle,
-  typesRpc
+  typesSpec
 };

packages/apps-config/src/extensions/index.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-// it would have been really good to import this from detect, however... not exported
+// it would have been really good to import this from detect-browser, however... not exported
 type Browser = 'chrome' | 'firefox';
 
 interface Extension {
@@ -10,7 +10,10 @@ interface Extension {
   name: string;
 }
 
-const availableExtensions: Record<Browser, Extension[]> = [
+// The list of known extensions including the links to tem on the store. This is used when
+// no extensions are actually available, promoting the user to install one or more
+
+export const availableExtensions: Record<Browser, Extension[]> = [
   {
     browsers: {
       chrome: 'https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd',
@@ -26,5 +29,3 @@ const availableExtensions: Record<Browser, Extension[]> = [
 
   return available;
 }, { chrome: [], firefox: [] });
-
-export { availableExtensions };

packages/apps-config/src/index.ts

@@ -0,0 +1,8 @@
+// Copyright 2017-2020 @polkadot/apps-config authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './api';
+export * from './extensions';
+export * from './links';
+export * from './settings';
+export * from './ui';

packages/apps-config/src/links/index.ts

@@ -9,12 +9,10 @@ import Polkassembly from './polkassembly';
 import Polkastats from './polkastats';
 import Subscan from './subscan';
 
-const externals: Record<string, ExternalDef> = {
+export const externalLinks: Record<string, ExternalDef> = {
   Commonwealth,
   Polkascan,
   Polkassembly,
   Polkastats,
   Subscan
 };
-
-export default externals;

packages/apps-config/src/settings/endpoints.ts

@@ -1,18 +1,11 @@
 // Copyright 2017-2020 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
-import { Option } from './types';
+import type { TFunction } from 'i18next';
+import { LinkOption } from './types';
 
 import { CUSTOM_ENDPOINT_KEY } from './constants';
 
-export interface LinkOption extends Option {
-  dnslink?: string;
-  isChild?: boolean;
-  isDevelopment?: boolean;
-  textBy: string;
-}
-
 interface EnvWindow {
   // eslint-disable-next-line camelcase
   process_env?: {
@@ -372,7 +365,7 @@ function createCustom (t: TFunction): LinkOption[] {
     : [];
 }
 
-export function createEndpoints (t: TFunction): LinkOption[] {
+export function createWsEndpoints (t: TFunction): LinkOption[] {
   return [
     ...createCustom(t),
     {

packages/apps-config/src/settings/ethereumNetworks.ts

@@ -1,4 +1,6 @@
 // Copyright 2017-2020 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+// The list of Ethereum networks, for these the UI will default to Ethereum-only accounts
+
 export const ethereumNetworks = ['node-moonbeam', 'moonbase-alphanet', 'moonbeam-alphanet', 'moonbeam-standalone'];

packages/apps-config/src/settings/index.ts

@@ -1,8 +1,8 @@
 // Copyright 2017-2020 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { CUSTOM_ENDPOINT_KEY } from './constants';
-export { createEndpoints } from './endpoints';
-export { ethereumNetworks } from './ethereumNetworks';
-export { createLanguages } from './languages';
-export { createSs58 } from './ss58';
+export * from './constants';
+export * from './endpoints';
+export * from './ethereumNetworks';
+export * from './languages';
+export * from './ss58';

packages/apps-config/src/settings/languages.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Option } from './types';
 
 export function createLanguages (t: TFunction): Option[] {

packages/apps-config/src/settings/ss58.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/ui-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Option } from './types';
 
 import known from '@polkadot/networks';

packages/apps-config/src/settings/types.ts

@@ -8,3 +8,10 @@ export interface Option {
   text: React.ReactNode;
   value: string | number;
 }
+
+export interface LinkOption extends Option {
+  dnslink?: string;
+  isChild?: boolean;
+  isDevelopment?: boolean;
+  textBy: string;
+}

packages/apps-config/src/ui/colors.ts

@@ -1,6 +1,9 @@
 // Copyright 2017-2020 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+// The mapping here is done on the actual chain name (system.chain RPC) or
+// the actual RPC node it is corrected to (system.name RPC)
+
 // defaults
 const emptyColor = '#99999';
 
@@ -37,9 +40,11 @@ const nodeKilt = '#eb5b2a';
 const nodeStafi = '#00F3AB';
 const nodeSubsocial = '#b9018c';
 
+export { emptyColor };
+
 // overrides based on the actual matched chain name
 // alphabetical
-const chainColors: Record<string, any> = [
+export const chainColors: Record<string, any> = [
   ['acala mandala pc1', chainRoccoAcala],
   ['Darwinia Crab', chainCrab],
   ['crust maxwell cc2', chainCrust],
@@ -69,7 +74,7 @@ const chainColors: Record<string, any> = [
 
 // overrides based on the actual software node type (all '-' converted to ' ')
 // alphabetical
-const nodeColors: Record<string, any> = [
+export const nodeColors: Record<string, any> = [
   ['Bifrost Node', nodeBifrost],
   ['Canvas Node', nodeCanvas],
   ['centrifuge chain', nodeCentrifuge],
@@ -87,9 +92,3 @@ const nodeColors: Record<string, any> = [
   ...colors,
   [node.toLowerCase().replace(/-/g, ' ')]: color
 }), {});
-
-export {
-  chainColors,
-  emptyColor,
-  nodeColors
-};

packages/apps-config/src/ui/identityIcons/index.ts

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 // overrides based on the actual software node type, valid values are one of -
-// polkadot, substrate, beachball
-const identityNodes: Record<string, string> = [
+// polkadot, substrate, beachball, robohash
+
+export const identityNodes: Record<string, string> = [
   ['centrifuge chain', 'polkadot'],
   ['edgeware-node', 'substrate'],
   ['joystream-node', 'beachball'],
@@ -17,7 +18,3 @@ const identityNodes: Record<string, string> = [
   ...icons,
   [spec.toLowerCase().replace(/-/g, ' ')]: icon
 }), {});
-
-export {
-  identityNodes
-};

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

@@ -4,6 +4,8 @@
 import { chainColors, nodeColors } from './colors';
 import { identityNodes } from './identityIcons';
 
+export * from './logos';
+
 function sanitize (value?: string): string {
   return value?.toLowerCase().replace('-', ' ') || '';
 }

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

@@ -1,7 +1,8 @@
 // Copyright 2017-2020 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+// The mapping here is done on the actual chain name (system.chain RPC) or
+// the actual RPC node it is corrected to (system.name RPC)
 
 // anything for a specific chain, most would probably fit into the node category (but allow for chain-specific)
 // alphabetical
@@ -60,7 +61,7 @@ import emptyLogo from './empty.svg';
 // overrides based on the actual matched chain name
 // NOTE: this matches up with RPC system.chain
 // alphabetical
-const chainLogos: Record<string, any> = [
+export const chainLogos: Record<string, unknown> = [
   ['darwinia crab', nodeCrab],
   ['Dusty', chainDusty],
   ['Kusama', chainKusama], // new name after CC3
@@ -72,7 +73,7 @@ const chainLogos: Record<string, any> = [
   ['Tick', chainRococoTick],
   ['Track', chainRococoTrack],
   ['Trick', chainRococoTrick]
-].reduce((logos, [chain, logo]): Record<string, any> => ({
+].reduce((logos, [chain, logo]): Record<string, unknown> => ({
   ...logos,
   [(chain as string).toLowerCase()]: logo
 }), {});
@@ -80,7 +81,7 @@ const chainLogos: Record<string, any> = [
 // overrides based on the actual software node type (all '-' converted to ' ')
 // NOTE: this matches up with what the RPC via system.name
 // alphabetical
-const nodeLogos: Record<string, any> = [
+export const nodeLogos: Record<string, unknown> = [
   ['airalab-robonomics', nodeRobonomics],
   ['Bifrost Node', nodeBifrost],
   ['Bifrost', nodeBifrost],
@@ -112,7 +113,7 @@ const nodeLogos: Record<string, any> = [
   ['substrate-node', nodeSubstrate],
   ['Equilibrium Node', nodeEquilibrium],
   ['Equilibrium', nodeEquilibrium]
-].reduce((logos, [node, logo]): Record<string, any> => ({
+].reduce((logos, [node, logo]): Record<string, unknown> => ({
   ...logos,
   [(node as string).toLowerCase().replace(/-/g, ' ')]: logo
 }), {});
@@ -120,7 +121,7 @@ const nodeLogos: Record<string, any> = [
 // overrides when we pass an explicit logo name
 // NOTE: this matches up with what is defined as "info" in settings/endpoints.ts
 // alphabetical
-const namedLogos: Record<string, any> = {
+export const namedLogos: Record<string, unknown> = {
   acala: nodeAcala,
   alexander: nodePolkadot,
   bifrost: nodeBifrost,
@@ -161,12 +162,12 @@ const namedLogos: Record<string, any> = {
 };
 
 // extension logos
-const extensionLogos: Record<string, any> = {
+export const extensionLogos: Record<string, unknown> = {
   'polkadot-js': extensionPolkadotJs
 };
 
-// external logos
-const externalLogos: Record<string, any> = {
+// external logos, i.e. for explorers
+export const externalLogos: Record<string, unknown> = {
   commonwealth: externalCommonwealth,
   polkascan: externalPolkascan,
   polkassembly: externalPolkassembly,
@@ -175,7 +176,7 @@ const externalLogos: Record<string, any> = {
 };
 
 // empty logos
-const emptyLogos: Record<string, any> = {
+export const emptyLogos: Record<string, unknown> = {
   empty: emptyLogo
 };
 
@@ -185,12 +186,3 @@ const emptyLogos: Record<string, any> = {
     new Image().src = src as string;
   });
 });
-
-export {
-  chainLogos,
-  emptyLogo,
-  extensionLogos,
-  externalLogos,
-  namedLogos,
-  nodeLogos
-};

packages/apps-routing/src/accounts.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-accounts';

packages/apps-routing/src/addresses.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-addresses';

packages/apps-routing/src/calendar.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-calendar';

packages/apps-routing/src/claims.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-claims';

packages/apps-routing/src/contracts.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-contracts';

packages/apps-routing/src/council.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-council';

packages/apps-routing/src/democracy.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-democracy';

packages/apps-routing/src/explorer.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-explorer';

packages/apps-routing/src/extrinsics.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-extrinsics';

packages/apps-routing/src/generic-asset.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-generic-asset';

packages/apps-routing/src/index.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Routes } from './types';
 
 import accounts from './accounts';

packages/apps-routing/src/js.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-js';

packages/apps-routing/src/parachains.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-parachains';

packages/apps-routing/src/poll.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-poll';

packages/apps-routing/src/rpc.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-rpc';

packages/apps-routing/src/settings.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-settings';

packages/apps-routing/src/signing.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-signing';

packages/apps-routing/src/society.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-society';

packages/apps-routing/src/staking.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-staking';

packages/apps-routing/src/storage.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-storage';

packages/apps-routing/src/sudo.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component from '@polkadot/app-sudo';

packages/apps-routing/src/techcomm.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-tech-comm';

packages/apps-routing/src/transfer.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Modal from '@polkadot/app-accounts/modals/Transfer';

packages/apps-routing/src/treasury.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-treasury';

packages/apps-routing/src/types.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 export type RouteGroup = 'accounts' | 'developer' | 'governance' | 'network' | 'settings';

packages/apps/src/Apps.tsx

@@ -6,7 +6,7 @@ import { BareProps as Props, ThemeDef, ThemeProps } from '@polkadot/react-compon
 import React, { useContext, useMemo } from 'react';
 import styled, { ThemeContext } from 'styled-components';
 import AccountSidebar from '@polkadot/app-accounts/Sidebar';
-import { getSystemChainColor } from '@polkadot/apps-config/ui';
+import { getSystemChainColor } from '@polkadot/apps-config';
 import GlobalStyle from '@polkadot/react-components/styles';
 import { useApi } from '@polkadot/react-hooks';
 import Signer from '@polkadot/react-signer';

packages/apps/src/Endpoints/index.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { LinkOption } from '@polkadot/apps-config/settings/endpoints';
+import { LinkOption } from '@polkadot/apps-config/settings/types';
 import { ThemeProps } from '@polkadot/react-components/types';
 import { Group } from './types';
 
@@ -10,7 +10,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 /* eslint-disable-next-line node/no-deprecated-api */
 import punycode from 'punycode';
 import styled from 'styled-components';
-import { createEndpoints, CUSTOM_ENDPOINT_KEY } from '@polkadot/apps-config/settings';
+import { CUSTOM_ENDPOINT_KEY, createWsEndpoints } from '@polkadot/apps-config';
 import { Button, Input, Sidebar } from '@polkadot/react-components';
 import uiSettings from '@polkadot/ui-settings';
 import { isAscii } from '@polkadot/util';
@@ -100,7 +100,7 @@ function extractUrlState (apiUrl: string, groups: Group[]): UrlState {
 
 function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const linkOptions = createEndpoints(t);
+  const linkOptions = createWsEndpoints(t);
   const [groups, setGroups] = useState(combineEndpoints(linkOptions));
   const [{ apiUrl, groupIndex, hasUrlChanged, isUrlValid }, setApiUrl] = useState<UrlState>(extractUrlState(uiSettings.get().apiUrl, groups));
   const [storedCustomEndpoints, setStoredCustomEndpoints] = useState<string[]>(getCustomEndpoints());
@@ -159,7 +159,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
 
     try {
       localStorage.setItem(CUSTOM_ENDPOINT_KEY, JSON.stringify(newStoredCurstomEndpoints));
-      setGroups(combineEndpoints(createEndpoints(t)));
+      setGroups(combineEndpoints(createWsEndpoints(t)));
       setStoredCustomEndpoints(getCustomEndpoints());
     } catch (e) {
       console.error(e);

packages/apps/src/Menu/index.tsx

@@ -7,7 +7,7 @@ import { ThemeProps } from '@polkadot/react-components/types';
 import { AccountId } from '@polkadot/types/interfaces';
 import { Group, Groups, ItemRoute } from './types';
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import React, { useMemo, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';

packages/apps/src/Menu/types.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import { Routes } from '@polkadot/apps-routing/types';
 
 import React from 'react';

packages/apps/src/initSettings.ts

@@ -3,7 +3,7 @@
 
 import queryString from 'query-string';
 import store from 'store';
-import { createEndpoints } from '@polkadot/apps-config/settings';
+import { createWsEndpoints } from '@polkadot/apps-config';
 import { extractIpfsDetails } from '@polkadot/react-hooks/useIpfs';
 import settings from '@polkadot/ui-settings';
 import { assert } from '@polkadot/util';
@@ -26,7 +26,7 @@ function getApiUrl (): string {
     return url;
   }
 
-  const endpoints = createEndpoints(<T = string>(): T => ('' as unknown as T));
+  const endpoints = createWsEndpoints(<T = string>(): T => ('' as unknown as T));
   const { ipnsChain } = extractIpfsDetails();
 
   // check against ipns domains (could be expanded to others)

packages/apps/src/overlays/Base.tsx

@@ -5,7 +5,7 @@ import { ThemeProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import { Button, Icon } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 

packages/apps/src/wp-gif.d.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 declare module '*.gif' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const content: any;
+  const content: unknown;
+
   export default content;
 }

packages/apps/src/wp-md.d.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 declare module '*.md' {
-  const content: any;
+  const content: unknown;
+
   export default content;
 }

packages/apps/src/wp-png.d.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 declare module '*.png' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const content: any;
+  const content: unknown;
+
   export default content;
 }

packages/apps/src/wp-svg.d.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 declare module '*.svg' {
-  const content: any;
+  const content: unknown;
+
   export default content;
 }

packages/page-accounts/src/Accounts/BannerExtension.tsx

@@ -5,7 +5,7 @@ import { detect } from 'detect-browser';
 import React from 'react';
 import { Trans } from 'react-i18next';
 import useExtensionCounter from '@polkadot/app-settings/useCounter';
-import { availableExtensions } from '@polkadot/apps-config/extensions';
+import { availableExtensions } from '@polkadot/apps-config';
 import { isWeb3Injected } from '@polkadot/extension-dapp';
 import { stringUpperFirst } from '@polkadot/util';
 import { onlyOnWeb } from '@polkadot/react-api/hoc';

packages/page-addresses/package.json

@@ -11,8 +11,6 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@polkadot/react-components": "^0.67.2-7",
-    "@polkadot/vanitygen": "^0.23.2-4",
-    "detect-browser": "^5.2.0",
     "file-saver": "^2.0.2"
   },
   "devDependencies": {

packages/page-council/src/thresholds.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ApiPromise } from '@polkadot/api';
-import { POLKADOT_GENESIS, KULUPU_GENESIS, KUSAMA_GENESIS } from '@polkadot/apps-config/api/constants';
+import { POLKADOT_GENESIS, KULUPU_GENESIS, KUSAMA_GENESIS } from '@polkadot/apps-config';
 
 const PROPOSE_THRESHOLDS: Record<string, number> = {
   [KULUPU_GENESIS]: 1,

packages/page-parachains/src/util.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import { DeriveParachainInfo } from '@polkadot/api-derive/types';
 
 export function parachainName (t: TFunction, info: DeriveParachainInfo | null): string {

packages/page-settings/src/General.tsx

@@ -4,7 +4,7 @@
 import { Option } from '@polkadot/apps-config/settings/types';
 
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
-import { createLanguages, createSs58 } from '@polkadot/apps-config/settings';
+import { createLanguages, createSs58 } from '@polkadot/apps-config';
 import { isLedgerCapable } from '@polkadot/react-api';
 import { Button, Dropdown } from '@polkadot/react-components';
 import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';

packages/page-settings/src/Metadata/Extensions.tsx

@@ -4,7 +4,7 @@
 import { ChainInfo } from '../types';
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { extensionLogos } from '@polkadot/apps-config/ui/logos';
+import { extensionLogos } from '@polkadot/apps-config';
 import { Button, Dropdown, Spinner } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 

packages/page-settings/src/useChainInfo.ts

@@ -5,7 +5,7 @@ import { ChainInfo } from './types';
 
 import { useMemo } from 'react';
 
-import { getSystemChainColor, getSystemIcon } from '@polkadot/apps-config/ui';
+import { getSystemChainColor, getSystemIcon } from '@polkadot/apps-config';
 import { getSpecTypes } from '@polkadot/types-known';
 import { DEFAULT_DECIMALS, DEFAULT_SS58, registry } from '@polkadot/react-api';
 import { useApi } from '@polkadot/react-hooks';

packages/page-staking/src/Actions/destOptions.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 
 interface Option {
   text: string;

packages/react-api/src/Api.tsx

@@ -10,23 +10,20 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import store from 'store';
 import { ApiPromise } from '@polkadot/api/promise';
 import { setDeriveCache, deriveMapCache } from '@polkadot/api-derive/util';
-import { typesChain, typesSpec, typesBundle, typesRpc } from '@polkadot/apps-config/api';
-import { POLKADOT_DENOM_BLOCK, POLKADOT_GENESIS } from '@polkadot/apps-config/api/constants';
+import { POLKADOT_DENOM_BLOCK, POLKADOT_GENESIS, ethereumNetworks, typesChain, typesSpec, typesBundle, typesRpc } from '@polkadot/apps-config';
 import { web3Accounts, web3Enable } from '@polkadot/extension-dapp';
 import { WsProvider } from '@polkadot/rpc-provider';
 import { StatusContext } from '@polkadot/react-components/Status';
 import { TokenUnit } from '@polkadot/react-components/InputNumber';
-import keyring from '@polkadot/ui-keyring';
-
-import uiSettings from '@polkadot/ui-settings';
 import ApiSigner from '@polkadot/react-signer/signers/ApiSigner';
+import keyring from '@polkadot/ui-keyring';
+import uiSettings from '@polkadot/ui-settings';
 import { formatBalance, isTestChain } from '@polkadot/util';
 import { setSS58Format } from '@polkadot/util-crypto';
 import { defaults as addressDefaults } from '@polkadot/util-crypto/address/defaults';
 
 import ApiContext from './ApiContext';
 import registry from './typeRegistry';
-import { ethereumNetworks } from '@polkadot/apps-config/settings';
 
 interface Props {
   children: React.ReactNode;

packages/react-api/src/ledger.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-api authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { KUSAMA_GENESIS, POLKADOT_GENESIS } from '@polkadot/apps-config/api/constants';
+import { KUSAMA_GENESIS, POLKADOT_GENESIS } from '@polkadot/apps-config';
 import { Ledger } from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
 import { assert } from '@polkadot/util';

packages/react-components/src/AccountName.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-query authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import { DeriveAccountInfo, DeriveAccountRegistration } from '@polkadot/api-derive/types';
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 

packages/react-components/src/AddressInfo.tsx

@@ -1,12 +1,12 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { TFunction } from 'i18next';
 import { DeriveBalancesAll, DeriveDemocracyLock, DeriveStakingAccount } from '@polkadot/api-derive/types';
 import { BlockNumber, LockIdentifier, ValidatorPrefsTo145 } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React from 'react';
-import { TFunction } from 'i18next';
 import styled from 'styled-components';
 import { BN_ZERO, formatBalance, formatNumber, hexToString, isObject } from '@polkadot/util';
 import { Expander, Icon, Tooltip } from '@polkadot/react-components';

packages/react-components/src/Badge.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/app-staking authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 
 import React, { useState } from 'react';
 import styled from 'styled-components';

packages/react-components/src/Button/types.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import { BareProps } from '../types';
 
 export type Button$Callback = () => void | Promise<void>;

packages/react-components/src/ChainImg.tsx

@@ -3,7 +3,7 @@
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import { chainLogos, emptyLogo, namedLogos, nodeLogos } from '@polkadot/apps-config/ui/logos';
+import { chainLogos, emptyLogos, namedLogos, nodeLogos } from '@polkadot/apps-config';
 import { useApi } from '@polkadot/react-hooks';
 
 interface Props {
@@ -21,7 +21,7 @@ function ChainImg ({ className = '', logo, onClick }: Props): React.ReactElement
   const [isEmpty, img] = useMemo((): [boolean, string] => {
     const found: unknown = namedLogos[logo || ''] || chainLogos[sanitize(systemChain)] || nodeLogos[sanitize(systemName)];
 
-    return [!found || logo === 'empty', (found || emptyLogo) as string];
+    return [!found || logo === 'empty', (found || emptyLogos.empty) as string];
   }, [logo, systemChain, systemName]);
 
   return (

packages/react-components/src/ConvictionDropdown.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import BN from 'bn.js';
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import React, { useRef } from 'react';
 import { ApiPromise } from '@polkadot/api';
 import { useApi, useBlockTime } from '@polkadot/react-hooks';

packages/react-components/src/CopyButton.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 
 import React, { useCallback, useContext } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';

packages/react-components/src/DemocracyLocks.tsx

@@ -4,7 +4,7 @@
 import { DeriveDemocracyLock } from '@polkadot/api-derive/types';
 
 import BN from 'bn.js';
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useApi, useCall } from '@polkadot/react-hooks';

packages/react-components/src/EditButton.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import { VoidFn } from './types';
 
 import React from 'react';

packages/react-components/src/Expander.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { LabelHelp } from '@polkadot/react-components';

packages/react-components/src/Icon.tsx

@@ -1,8 +1,10 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconName, library } from '@fortawesome/fontawesome-svg-core';
+import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import styled from 'styled-components';

packages/react-components/src/IdentityIcon/index.tsx

@@ -5,7 +5,7 @@ import { IdentityProps } from '@polkadot/react-identicon/types';
 
 import React, { useCallback, useContext } from 'react';
 import styled from 'styled-components';
-import { getSystemIcon } from '@polkadot/apps-config/ui';
+import { getSystemIcon } from '@polkadot/apps-config';
 import { useApi } from '@polkadot/react-hooks';
 import BaseIdentityIcon from '@polkadot/react-identicon';
 import uiSettings from '@polkadot/ui-settings';

packages/react-components/src/LabelHelp.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 

packages/react-components/src/LinkExternal.tsx

@@ -6,7 +6,7 @@ import { LinkTypes } from '@polkadot/apps-config/links/types';
 import BN from 'bn.js';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import linked from '@polkadot/apps-config/links';
+import { externalLinks } from '@polkadot/apps-config';
 import { useApi } from '@polkadot/react-hooks';
 
 import { useTranslation } from './translate';
@@ -26,7 +26,7 @@ interface Props {
 
 function genLinks (systemChain: string, { data, hash, isLogo, type }: Props): React.ReactNode[] {
   return Object
-    .entries(linked)
+    .entries(externalLinks)
     .map(([name, { chains, create, isActive, logo, paths, url }]): React.ReactNode | null => {
       const extChain = chains[systemChain];
       const extPath = paths[type];

packages/react-components/src/Status/index.tsx

@@ -5,7 +5,7 @@ import { QueueStatus, QueueTx, QueueTxStatus } from './types';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 
 import AddressMini from '../AddressMini';
 import Button from '../Button';

packages/react-components/src/types.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { WithTranslation } from 'react-i18next';
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { Abi } from '@polkadot/api-contract';
 import { ActionStatus } from '@polkadot/react-components/Status/types';

tsconfig.json

@@ -10,6 +10,7 @@
     "paths": {
       "@polkadot/apps/*": ["packages/apps/src/*"],
       "@polkadot/apps": ["packages/apps/src"],
+      "@polkadot/apps-config": [ "packages/apps-config/src" ],
       "@polkadot/apps-config/*": [ "packages/apps-config/src/*" ],
       "@polkadot/apps-routing": [ "packages/apps-routing/src" ],
       "@polkadot/apps-routing/*": [ "packages/apps-routing/src/*" ],

yarn.lock

@@ -2052,9 +2052,7 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.12.5
     "@polkadot/react-components": ^0.67.2-7
-    "@polkadot/vanitygen": ^0.23.2-4
     "@testing-library/react": ^11.1.2
-    detect-browser: ^5.2.0
     file-saver: ^2.0.2
     testcontainers: ^4.7.0
   languageName: unknown
@@ -2264,6 +2262,7 @@ __metadata:
     "@laminar/type-definitions": ^0.2.0-beta.141
     "@polkadot/networks": ^4.1.2-2
     "@subsocial/types": ^0.4.7
+    i18next: ^19.8.3
   languageName: unknown
   linkType: soft