Apply all logos via uiLogo (polkadot) (#8956)

* Apply all logos via uiLogo (polkadot) * Adjust * Adjust README
2023-02-06 16:33:55 +02:00 · 2023-02-06 16:33:55 +02:00 · 333acefd9e
commit 333acefd9e
parent 7b731351c8
8 changed files with 85 additions and 108 deletions
--- a/README.md
+++ b/README.md
@ -8,29 +8,11 @@ If you run one or more IPFS node(s), pinning the UI (which only gets updated on

 **Important** If you are a chain developer and would like to add support for your chain to the UI, all the local configuration (API types, settings, logos) can be customized in [the apps-config package](packages/apps-config#README.md), complete with instructions of what goes where.

-## overview

-The repo is split into a number of packages, each representing an application. These are -
+## Overview

- [apps](packages/apps/) This is the main entry point. It handles the selection sidebar and routing to the specific application being displayed.
- [apps-electron](packages/apps-electron/) Desktop app running [apps](packages/apps/).
- [page-accounts](packages/page-accounts/) A basic account management app.
- [page-address-book](packages/page-address-book/) A basic address management app.
- [page-democracy](packages/page-democracy/) A basic voting app, allowing votes on activate proposals and referenda.
- [page-explorer](packages/page-explorer/) A simple block explorer. It only shows the most recent blocks, updating as they become available.
- [page-extrinsics](packages/page-extrinsics/) Submission of extrinsics to a node.
- [page-js](packages/page-js/) An online code editor with [@polkadot-js/api](https://github.com/polkadot-js/api/tree/master/packages/api) access to the currently connected node.
- [page-settings](packages/page-settings/) A basic settings management app, allowing choice of language, node to connect to, and theme
- [page-staking](packages/page-staking/) A basic staking management app, allowing staking and nominations.
- [page-storage](packages/page-storage/) A simple node storage query application. Multiple queries can be queued and updates as new values become available.
- [page-toolbox](packages/page-toolbox/) Submission of raw data to RPC endpoints and utility hashing functions.
- [page-transfer](packages/page-transfer/) A basic account management app, allowing transfer of Units/DOTs between accounts.
+The repo is split into a number of packages, each representing an application.

-In addition the following libraries are also included in the repo. These are to be moved to the [@polkadot/ui](https://github.com/polkadot-js/ui/) repository once it reaches a base level of stability and usability. (At this point with the framework being tested on the apps above, it makes development easier having it close)
-
- [react-components](packages/react-components/) A reactive (using RxJS) application framework with a number of useful shared components.
- [react-signer](packages/react-signer/) Signer implementation for apps.
- [react-query](packages/react-query) Base components that use the RxJS Observable APIs

 ## Development

@ -47,6 +29,7 @@ To get started -
 5. Ready! Now you can launch the UI (assuming you have a local Polkadot Node running), via `yarn run start`
 6. Access the UI via [http://localhost:3000](http://localhost:3000)

+
 ## Docker

 You can run a docker container via -
--- a/packages/apps-config/README.md
+++ b/packages/apps-config/README.md
@ -3,9 +3,7 @@
 General config for various services, including settings, external links & types. This is a central source of all the configuration settings that can be tweaked. This also means that it can be customized (via PR) to support any additional chains. The internals are split into a number of settings -

 - [api](./src/api) - Here you can add any chain or node-type specific types configuration. When added, it means that when the UI connects to either a runtime with a spec name, or a chain with a specific name, the types will be automatically added to the API as used in the app.
- [links](./src/links) - These are all links to external providers such as explorers. This information is used anywhere where there is an external link to determine the providers for these links.
- [settings](./src/settings) - These are used in dropdowns, specifically under the settings page.
- [ui](./src/ui) - Logos & color settings for chain and node spec specific overrides. This means that when the runtime/chain is detected, the specific logo would be used.
+- [endpoints](./src/endpoints) - Configuration for specific per-type chain endpoints.

 Customization for each of these are discussed next.

@ -18,26 +16,10 @@ The API config can be done in one of two ways -

 The actual type definitions you should be familiar with, it is exactly the same as you would upload via the settings page in JSON, or as detailed in the [API types pages](https://polkadot.js.org/api/start/types.extend.html#extending-types).

-## Links

-We are not going to spend too much time here, since it is generally applicable to explorers and like services. However, should you run one of these services, you can take a look at the existing configs and customize for your setup.
+## Endpoints

-## Settings
-
-There are 2 general areas of interest here -
-
- [endpoints](./src/settings) - This is where we can add additional endpoints to appear in the dropdowns. We would like to keep this to mostly live networks, although based on demand can probably extend to a testing-only section as well.
- [ss58](./src/settings) - Should you wish to add your ss58Format to the settings dropdown, this is where the configuration take place
-
-## UI
-
-These are self-explanatory and config here actually does get used in other parts as well. Basically the information here is broken down into a couple of categories -
-
- [colors](./src/ui/colors.ts)
-  - color configuration based on chain
- [identityIcon](./src/ui/identityIcons)
-  - specific identityIcon to use based on node name
- [logos](./src/ui/logos)
-  - chains - Specific logos when connecting to a specific chain
-  - nodes - Logos that are used when connecting to a specific runtime spec type (catch-all)
-  - named - These logos are used as overrides when we pass an explicit logo name 
+1. Add your chain logo (if available) to either `ui/logos/chains` or `ui/logos/nodes` (the second is generally used)
+2. Run the image build command to generate an inline version via `yarn build:images`
+3. Add your chain to `endpoints/{production, productionRelay, testing, testingRelay*}` as applicable for your deployment
+3. The `uiColor` specifies the chain color, the `uiLogo` (importted from generated), specifies the specific logo
--- a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts
+++ b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts
@ -4,8 +4,8 @@
 import type { EndpointOption } from './types';

 import { POLKADOT_GENESIS } from '../api/constants';
-import { chainsOakPNG, chainsPolkadotCircleSVG } from '../ui/logos/chains';
-import { nodesAjunaPNG, nodesStatemineSVG } from '../ui/logos/nodes';
+import { chainsAcalaSVG, chainsAstarPNG, chainsBitgreenPNG, chainsCoinversationPNG, chainsComposableFinancePNG, chainsEquilibriumSVG, chainsFrequencySVG, chainsGeminisPNG, chainsOakPNG, chainsOrigintrailPNG, chainsPendulumSVG, chainsPolkadotCircleSVG, chainsSnakenetSVG, chainsTotemSVG } from '../ui/logos/chains';
+import { nodesAjunaPNG, nodesAresOdysseySVG, nodesAventusSVG, nodesBifrostSVG, nodesCentrifugePNG, nodesCloverSVG, nodesCrustParachainSVG, nodesDarwiniaSVG, nodesEfinitySVG, nodesHashedPNG, nodesIntegriteeSVG, nodesInterlaySVG, nodesKiltPNG, nodesKylinPNG, nodesLitentryPNG, nodesMantaPNG, nodesMoonbeamPNG, nodesNodleSVG, nodesOmnibtcSVG, nodesParallelSVG, nodesPhalaSVG, nodesPolkadexSVG, nodesStatemineSVG, nodesSubdaoPNG, nodesSubgameSVG, nodesUniqueSVG } from '../ui/logos/nodes';
 import { getTeleports } from './util';

 // The available endpoints that will show in the dropdown. For the most part (with the exception of
@ -31,7 +31,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      'Polkawallet 0': 'wss://acala.polkawallet.io'
    },
    text: 'Acala',
-    uiColor: '#645AFF'
+    uiColor: '#645AFF',
+    uiLogo: chainsAcalaSVG
  },
  {
    homepage: 'https://ajuna.io',
@ -53,7 +54,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      AresProtocol: 'wss://wss.odyssey.aresprotocol.io'
    },
    text: 'Ares Odyssey',
-    uiColor: '#1295F0'
+    uiColor: '#1295F0',
+    uiLogo: nodesAresOdysseySVG
  },
  {
    homepage: 'https://astar.network',
@ -70,14 +72,16 @@ export const prodParasPolkadot: EndpointOption[] = [
      'light client': 'light://substrate-connect/polkadot/astar'
    },
    text: 'Astar',
-    uiColor: '#1b6dc1d9'
+    uiColor: '#1b6dc1d9',
+    uiLogo: chainsAstarPNG
  },
  {
    homepage: 'https://www.aventus.io/',
    info: 'aventus',
    paraId: 2056,
    providers: {},
-    text: 'Aventus'
+    text: 'Aventus',
+    uiLogo: nodesAventusSVG
  },
  {
    homepage: 'https://crowdloan.bifrost.app',
@ -88,7 +92,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      OnFinality: 'wss://bifrost-polkadot.api.onfinality.io/public-ws'
    },
    text: 'Bifrost',
-    uiColor: '#5a25f0'
+    uiColor: '#5a25f0',
+    uiLogo: nodesBifrostSVG
  },
  {
    homepage: 'https://www.bitgreen.org',
@ -98,7 +103,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      Bitgreen: 'wss://mainnet.bitgreen.org'
    },
    text: 'Bitgreen',
-    uiColor: '#224851'
+    uiColor: '#224851',
+    uiLogo: chainsBitgreenPNG
  },
  {
    homepage: 'https://centrifuge.io',
@ -109,7 +115,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      OnFinality: 'wss://centrifuge-parachain.api.onfinality.io/public-ws'
    },
    text: 'Centrifuge',
-    uiColor: '#fcc367'
+    uiColor: '#fcc367',
+    uiLogo: nodesCentrifugePNG
  },
  {
    homepage: 'https://clover.finance',
@ -120,7 +127,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      OnFinality: 'wss://clover.api.onfinality.io/public-ws' // https://github.com/polkadot-js/apps/issues/8355, then enabled in https://github.com/polkadot-js/apps/pull/8413, then broken in https://github.com/polkadot-js/apps/issues/8421, renenabled for PolkadotJS
    },
    text: 'Clover',
-    uiColor: 'linear-gradient(to right, #52ad75, #7cc773)'
+    uiColor: 'linear-gradient(to right, #52ad75, #7cc773)',
+    uiLogo: nodesCloverSVG
  },
  {
    homepage: 'http://www.coinversation.io/',
@ -130,7 +138,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      // Coinversation: 'wss://rpc.coinversation.io/' // https://github.com/polkadot-js/apps/issues/6635
    },
    text: 'Coinversation',
-    uiColor: '#e6017a'
+    uiColor: '#e6017a',
+    uiLogo: chainsCoinversationPNG
  },
  {
    homepage: 'https://composable.finance/',
@ -141,7 +150,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      OnFinality: 'wss://composable.api.onfinality.io/public-ws'
    },
    text: 'Composable Finance',
-    uiColor: '#C90E8A'
+    uiColor: '#C90E8A',
+    uiLogo: chainsComposableFinancePNG
  },
  {
    homepage: 'https://crust.network',
@ -150,7 +160,8 @@ export const prodParasPolkadot: EndpointOption[] = [
    providers: {
      Crust: 'wss://crust-parachain.crustapps.net'
    },
-    text: 'Crust'
+    text: 'Crust',
+    uiLogo: nodesCrustParachainSVG
  },
  {
    homepage: 'https://darwinia.network/',
@ -160,7 +171,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      'Darwinia Network': 'wss://parachain-rpc.darwinia.network'
    },
    text: 'Darwinia',
-    uiColor: '#FF0083'
+    uiColor: '#FF0083',
+    uiLogo: nodesDarwiniaSVG
  },
  {
    homepage: 'https://darwinia.network/',
@ -170,7 +182,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      // 'Darwinia Network': 'wss://parachain-rpc.darwinia.network' // https://github.com/polkadot-js/apps/issues/6530
    },
    text: 'Darwinia Backup',
-    uiColor: '#FF0083'
+    uiColor: '#FF0083',
+    uiLogo: nodesDarwiniaSVG
  },
  {
    homepage: 'https://efinity.io',
@ -182,7 +195,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      OnFinality: 'wss://efinity.api.onfinality.io/public-ws'
    },
    text: 'Efinity',
-    uiColor: '#496ddb'
+    uiColor: '#496ddb',
+    uiLogo: nodesEfinitySVG
  },
  {
    homepage: 'https://equilibrium.io/',
@ -193,7 +207,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      Equilibrium: 'wss://node.pol.equilibrium.io/'
    },
    text: 'Equilibrium',
-    uiColor: '#1792ff'
+    uiColor: '#1792ff',
+    uiLogo: chainsEquilibriumSVG
  },
  {
    homepage: 'https://frequency.xyz',
@ -204,7 +219,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      'Frequency 1': 'wss://1.rpc.frequency.xyz'
    },
    text: 'Frequency',
-    uiColor: '#4b64ff'
+    uiColor: '#4b64ff',
+    uiLogo: chainsFrequencySVG
  },
  {
    homepage: 'https://geminis.network/',
@ -214,7 +230,8 @@ export const prodParasPolkadot: EndpointOption[] = [
    providers: {
      Geminis: 'wss://rpc.geminis.network'
    },
-    text: 'Geminis'
+    text: 'Geminis',
+    uiLogo: chainsGeminisPNG
  },
  {
    homepage: 'https://hashed.network/',
@ -224,7 +241,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      'Hashed Systems': 'wss://c1.hashed.network'
    },
    text: 'Hashed Network',
-    uiColor: '#9199A9'
+    uiColor: '#9199A9',
+    uiLogo: nodesHashedPNG
  },
  {
    homepage: 'https://hydradx.io/',
@ -236,7 +254,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      OnFinality: 'wss://hydradx.api.onfinality.io/public-ws' // https://github.com/polkadot-js/apps/issues/8623, Renabled for PolkadotJS
    },
    text: 'HydraDX',
-    uiColor: '#f653a2'
+    uiColor: '#f653a2',
+    uiLogo: chainsSnakenetSVG
  },
  {
    homepage: 'https://integritee.network',
@ -246,7 +265,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      Integritee: 'wss://polkadot.api.integritee.network'
    },
    text: 'Integritee Shell',
-    uiColor: '#658ea9'
+    uiColor: '#658ea9',
+    uiLogo: nodesIntegriteeSVG
  },
  {
    homepage: 'https://interlay.io/',
@ -257,7 +277,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      OnFinality: 'wss://interlay.api.onfinality.io/public-ws'
    },
    text: 'Interlay',
-    uiColor: '#3E96FF'
+    uiColor: '#3E96FF',
+    uiLogo: nodesInterlaySVG
  },
  {
    homepage: 'https://totemaccounting.com/',
@ -267,7 +288,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      Totem: 'wss://k-ui.kapex.network'
    },
    text: 'Kapex',
-    uiColor: 'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)'
+    uiColor: 'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)',
+    uiLogo: chainsTotemSVG
  },
  {
    homepage: 'https://www.kilt.io/',
@ -279,7 +301,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      OnFinality: 'wss://spiritnet.api.onfinality.io/public-ws'
    },
    text: 'KILT Spiritnet',
-    uiColor: '#8c145a'
+    uiColor: '#8c145a',
+    uiLogo: nodesKiltPNG
  },
  {
    homepage: 'https://kylin.network/',
@ -289,7 +312,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      'Kylin Network': 'wss://polkadot.kylin-node.co.uk'
    },
    text: 'Kylin',
-    uiColor: '#ed007e'
+    uiColor: '#ed007e',
+    uiLogo: nodesKylinPNG
  },
  {
    homepage: 'https://crowdloan.litentry.com',
@ -300,7 +324,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      Litentry: 'wss://rpc.litentry-parachain.litentry.io'
    },
    text: 'Litentry',
-    uiColor: 'linear-gradient(45deg, #5cc27c 0%, #6de98f 100%)'
+    uiColor: 'linear-gradient(45deg, #5cc27c 0%, #6de98f 100%)',
+    uiLogo: nodesLitentryPNG
  },
  {
    homepage: 'https://manta.network',
@ -313,7 +338,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      // 'Manta Pectinata': 'wss://pectinata.manta.systems' // https://github.com/polkadot-js/apps/issues/7018
    },
    text: 'Manta',
-    uiColor: '#2070a6'
+    uiColor: '#2070a6',
+    uiLogo: nodesMantaPNG
  },
  {
    homepage: 'https://moonbeam.network/networks/moonbeam/',
@ -327,7 +353,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      UnitedBloc: 'wss://moonbeam.unitedbloc.com:3001'
    },
    text: 'Moonbeam',
-    uiColor: '#53cbc9'
+    uiColor: '#53cbc9',
+    uiLogo: nodesMoonbeamPNG
  },
  {
    homepage: 'https://nodle.com',
@ -339,7 +366,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      Pinknode: 'wss://public-rpc.pinknode.io/nodle'
    },
    text: 'Nodle',
-    uiColor: '#1ab394'
+    uiColor: '#1ab394',
+    uiLogo: nodesNodleSVG
  },
  {
    homepage: 'https://oak.tech',
@ -362,7 +390,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      OmniBTC: 'wss://psc-parachain.coming.chat'
    },
    text: 'OmniBTC',
-    uiColor: '#6759E9'
+    uiColor: '#6759E9',
+    uiLogo: nodesOmnibtcSVG
  },
  {
    homepage: 'https://parachain.origintrail.io',
@ -372,7 +401,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      TraceLabs: 'wss://parachain-rpc.origin-trail.network'
    },
    text: 'OriginTrail',
-    uiColor: '#FB5DEB'
+    uiColor: '#FB5DEB',
+    uiLogo: chainsOrigintrailPNG
  },
  {
    homepage: 'https://parallel.fi',
@ -383,7 +413,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      Parallel: 'wss://rpc.parallel.fi'
    },
    text: 'Parallel',
-    uiColor: '#ef18ac'
+    uiColor: '#ef18ac',
+    uiLogo: nodesParallelSVG
  },
  {
    homepage: 'https://pendulumchain.org/',
@ -394,7 +425,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      PendulumChain: 'wss://rpc.pendulumchain.tech'
    },
    text: 'Pendulum',
-    uiColor: '#49E2FD'
+    uiColor: '#49E2FD',
+    uiLogo: chainsPendulumSVG
  },
  {
    homepage: 'https://phala.network',
@ -405,7 +437,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      Phala: 'wss://api.phala.network/ws'
    },
    text: 'Phala Network',
-    uiColor: '#c6fa4c'
+    uiColor: '#c6fa4c',
+    uiLogo: nodesPhalaSVG
  },
  {
    // https://github.com/polkadot-js/apps/issues/7620
@ -418,7 +451,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      // OnFinality: 'wss://polkadex.api.onfinality.io/public-ws' // https://github.com/polkadot-js/apps/issues/7620
    },
    text: 'Polkadex',
-    uiColor: '#7C30DD'
+    uiColor: '#7C30DD',
+    uiLogo: nodesPolkadexSVG
  },
  {
    homepage: 'https://subdao.network/',
@ -429,7 +463,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      SubDAO: 'wss://parachain-rpc.subdao.org'
    },
    text: 'SubDAO',
-    uiColor: 'linear-gradient(50deg, #F20092 0%, #FF4D5D 100%)'
+    uiColor: 'linear-gradient(50deg, #F20092 0%, #FF4D5D 100%)',
+    uiLogo: nodesSubdaoPNG
  },
  {
    homepage: 'http://subgame.org/',
@ -439,7 +474,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      // SubGame: 'wss://gamma.subgame.org/' // https://github.com/polkadot-js/apps/pull/6761
    },
    text: 'SubGame Gamma',
-    uiColor: '#EB027D'
+    uiColor: '#EB027D',
+    uiLogo: nodesSubgameSVG
  },
  {
    homepage: 'https://unique.network/',
@ -452,7 +488,8 @@ export const prodParasPolkadot: EndpointOption[] = [
      'Unique Europe': 'wss://eu-ws.unique.network/'
    },
    text: 'Unique Network',
-    uiColor: '#40BCFF'
+    uiColor: '#40BCFF',
+    uiLogo: nodesUniqueSVG
  }
 ];

--- a/packages/apps-config/src/ui/logos/chains/index.ts
+++ b/packages/apps-config/src/ui/logos/chains/index.ts
--- a/packages/apps-config/src/ui/logos/extensions/index.ts
+++ b/packages/apps-config/src/ui/logos/extensions/index.ts
@ -5,8 +5,3 @@
 // auto-generated by scripts/imgConvert.mjs

 export const extensionsPolkadotJsSVG = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiIHN0YW5kYWxvbmU9InllcyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIxNSAxNSAxNDAgMTQwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNzAgMTcwO3pvb206IDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5iZzB7ZmlsbDojRkY4QzAwfQoJLnN0MHtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8Zz4KCTxjaXJjbGUgY2xhc3M9ImJnMCIgY3g9Ijg1IiBjeT0iODUiIHI9IjcwIi8+Cgk8Zz4KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNODUsMzQuN2MtMjAuOCwwLTM3LjgsMTYuOS0zNy44LDM3LjhjMCw0LjIsMC43LDguMywyLDEyLjNjMC45LDIuNywzLjksNC4yLDYuNywzLjNjMi43LTAuOSw0LjItMy45LDMuMy02LjcgYy0xLjEtMy4xLTEuNi02LjQtMS41LTkuN0M1OC4xLDU3LjYsNjkuNSw0Niw4My42LDQ1LjNjMTUuNy0wLjgsMjguNywxMS43LDI4LjcsMjcuMmMwLDE0LjUtMTEuNCwyNi40LTI1LjcsMjcuMiBjMCwwLTUuMywwLjMtNy45LDAuN2MtMS4zLDAuMi0yLjMsMC40LTMsMC41Yy0wLjMsMC4xLTAuNi0wLjItMC41LTAuNWwwLjktNC40TDgxLDczLjRjMC42LTIuOC0xLjItNS42LTQtNi4yIGMtMi44LTAuNi01LjYsMS4yLTYuMiw0YzAsMC0xMS44LDU1LTExLjksNTUuNmMtMC42LDIuOCwxLjIsNS42LDQsNi4yYzIuOCwwLjYsNS42LTEuMiw2LjItNGMwLjEtMC42LDEuNy03LjksMS43LTcuOSBjMS4yLTUuNiw1LjgtOS43LDExLjItMTAuNGMxLjItMC4yLDUuOS0wLjUsNS45LTAuNWMxOS41LTEuNSwzNC45LTE3LjgsMzQuOS0zNy43QzEyMi44LDUxLjYsMTA1LjgsMzQuNyw4NSwzNC43eiBNODcuNywxMjEuNyBjLTMuNC0wLjctNi44LDEuNC03LjUsNC45Yy0wLjcsMy40LDEuNCw2LjgsNC45LDcuNWMzLjQsMC43LDYuOC0xLjQsNy41LTQuOUM5My4zLDEyNS43LDkxLjIsMTIyLjQsODcuNywxMjEuN3oiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K';
-
-// preload all
-[extensionsPolkadotJsSVG].forEach((src): void => {
-  new Image().src = src;
-});
--- a/packages/apps-config/src/ui/logos/external/index.ts
+++ b/packages/apps-config/src/ui/logos/external/index.ts
--- a/packages/apps-config/src/ui/logos/nodes/index.ts
+++ b/packages/apps-config/src/ui/logos/nodes/index.ts
@ -159,8 +159,3 @@ export const nodesZCloakSVG = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4
 export const nodesZeitgeistPNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVEOTJFNDRBMjIzRjExRUNCOEE4OUI3RjJDMDVGNzA0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVEOTJFNDRCMjIzRjExRUNCOEE4OUI3RjJDMDVGNzA0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODZEOTAxRTcyMjNDMTFFQ0I4QTg5QjdGMkMwNUY3MDQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODZEOTAxRTgyMjNDMTFFQ0I4QTg5QjdGMkMwNUY3MDQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7HH/EMAAAKQ0lEQVR42uyd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';
 export const nodesZenlinkSVG = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPmxvZ29AMng8L3RpdGxlPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjIzLjM5MzE5NzUlIiB4Mj0iMTAwJSIgeTI9IjcyLjAyNDE4MzElIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMzMzMiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzM5MzkzOSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJsb2dvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTEpIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiI+PC9yZWN0PgogICAgICAgIDxwYXRoIGQ9Ik0zMTUuMjExOTc3LDM2MS4zMjc3NjcgTDI1OC4xMTYyOTcsMzk0LjIwMjQ2MyBDMjU1LjQzNjI2LDM5NS43NDYzODcgMjUyLjEzMjI0NiwzOTUuNzQ2Mzg3IDI0OS40NDg4MDEsMzk0LjIwMjQ2MyBMMTQwLjQ3MDg5NSwzMzEuNDUyNDk5IEMxMzcuMzAzMjY5LDMyOS42Mjk3MTcgMTM1LjM1NjMyMiwzMjYuMjU5NjEgMTM1LjM1NjMyMiwzMjIuNjE0MDQ1IEwxMzUuMzU2MzIyLDE5NS40MTcxNjEgQzEzNS4zNTYzMjIsMTkzLjM3MzMzMiAxMzYuNDQ3NDMxLDE5MS40OTI3MzcgMTM4LjIyMDQ4MywxOTAuNDY5MTIzIEwxOTguODY5MDg2LDE1NS41NDM3OTYgQzIwMC4zNDU0OTMsMTU0LjY5NzAxOCAyMDIuMTg2NzM5LDE1NS43NTgwNDEgMjAyLjE4NjczOSwxNTcuNDU0OTk3IEwyMDIuMTg2NzM5LDI4OC40ODEwODQgQzIwMi4xODY3MzksMjkwLjkxMjU5NCAyMDMuNDgyNDMxLDI5My4xNTcwNjUgMjA1LjU5NjQ1NCwyOTQuMzc0NTIxIEwzMTUuMjExOTc3LDM1Ny40OTE3NjIgQzMxNi42OTE3OTMsMzU4LjM0NTM0MSAzMTYuNjkxNzkzLDM2MC40NzQxODcgMzE1LjIxMTk3NywzNjEuMzI3NzY3IEwzMTUuMjExOTc3LDM2MS4zMjc3NjcgWiBNNDIwLDE3NS4xNzgwOTQgQzQyMCwxNjYuNjQwNzQ2IDQxNS40NDI0MDQsMTU4Ljc1MTk3NiA0MDguMDQyMjg5LDE1NC40ODUwMDkgTDI2OC4wNDE0MTUsNzMuNzIzMjY3IEMyNjAuNTkwMDUzLDY5LjQyNTU3NzcgMjUxLjQwOTk0Nyw2OS40MjU1Nzc3IDI0My45NjU0MTgsNzMuNzIzMjY3IEwxMDMuOTU3NzExLDE1NC40ODUwMDkgQzk2LjU1NzU5NiwxNTguNzU1MzkgOTIsMTY2LjY0MDc0NiA5MiwxNzUuMTc4MDk0IEw5MiwzMzYuNzk3MTU4IEM5MiwzNDUuMzMxMDkzIDk2LjU1NzU5NiwzNTMuMjIzMjc1IDEwMy45NTc3MTEsMzU3LjQ5MDI0MiBMMjQ0LjA0Mzk5OCw0MzguMjk5Nzc1IEMyNTEuNDQwNjk2LDQ0Mi41NjY3NDIgMjYwLjU1OTMwNCw0NDIuNTY2NzQyIDI2Ny45NTk0MTksNDM4LjI5OTc3NSBMNDA4LjA0MjI4OSwzNTcuNDkwMjQyIEM0MTUuNDQyNDA0LDM1My4yMjMyNzUgNDIwLDM0NS4zMzEwOTMgNDIwLDMzNi43OTcxNTggTDQyMCwxNzUuMTc4MDk0IFoiIGlkPSJGaWxsLTY0IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==';
 export const nodesZeroSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNDIgMzQyIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDojMDAwMDAwO30uYntmaWxsOiMwMGFkZWU7fS5je2ZpbGw6I2VjMjk3Yjt9LmR7ZmlsbDojMzdiMzRhO30uZXtmaWxsOiNmNjkyMWU7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT56LWN0cmwtNDUtY29sPC90aXRsZT48cmVjdCBjbGFzcz0iYSIgd2lkdGg9IjM0MiIgaGVpZ2h0PSIzNDIiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTE1Mi4zNSwxNzAuNDZsLTEyLjE4LTEyLjE5YS41LjUsMCwwLDAtLjM1LS4xNC40OC40OCwwLDAsMC0uMzQuMTRsLTM0LjQxLDM0LjQxVjEwNi4xNWEuNTEuNTEsMCwwLDAtLjMtLjQ2bC0uMTksMGEuNTIuNTIsMCwwLDAtLjM1LjE0TDM5LjU4LDE3MC40NmEuNDkuNDksMCwwLDAtLjE1LjM0LjUxLjUxLDAsMCwwLC4xNS4zNWwxMi4xOCwxMi4xOGEuNDcuNDcsMCwwLDAsLjM1LjE0LjQ1LjQ1LDAsMCwwLC4zNC0uMTRsMzQuNDEtMzQuNDF2ODYuNTRhLjQ5LjQ5LDAsMCwwLC4zLjQ1LjQzLjQzLDAsMCwwLC4xOSwwLC40NS40NSwwLDAsMCwuMzQtLjE1bDY0LjY2LTY0LjY1QS40OS40OSwwLDAsMCwxNTIuMzUsMTcwLjQ2WiIvPjxwYXRoIGNsYXNzPSJjIiBkPSJNMTg1LjI0LDQ5Ljg1LDE3My4wNiwzNy42NmEuNDkuNDksMCwwLDAtLjM0LS4xNC41Mi41MiwwLDAsMC0uMzUuMTRsLTU2LDU2YS40OS40OSwwLDAsMCwwLC42OWwxMi4xOCwxMi4xOWEuNTIuNTIsMCwwLDAsLjM1LjE0LjQ5LjQ5LDAsMCwwLC4zNC0uMTRsNTYtNTZBLjQ3LjQ3LDAsMCwwLDE4NS4yNCw0OS44NVoiLz48cGF0aCBjbGFzcz0iYyIgZD0iTTIyOS4xLDkzLjcsMjE2LjkyLDgxLjUyYS41MS41MSwwLDAsMC0uMzQtLjE0LjUyLjUyLDAsMCwwLS4zNS4xNGwtNTYsNTZhLjQ5LjQ5LDAsMCwwLDAsLjY5bDEyLjE4LDEyLjE5YS41Mi41MiwwLDAsMCwuMzUuMTQuNDkuNDksMCwwLDAsLjM0LS4xNGw1Ni01NkEuNDkuNDksMCwwLDAsMjI5LjEsOTMuN1oiLz48cGF0aCBjbGFzcz0iYyIgZD0iTTIwNy4xNyw3MS43NywxOTUsNTkuNTlhLjQ5LjQ5LDAsMCwwLS4zNC0uMTQuNTIuNTIsMCwwLDAtLjM1LjE0bC01Niw1NmEuNDkuNDksMCwwLDAsMCwuNjlsMTIuMTgsMTIuMTlhLjUyLjUyLDAsMCwwLC4zNS4xNC40OS40OSwwLDAsMCwuMzQtLjE0bDU2LTU2QS40OS40OSwwLDAsMCwyMDcuMTcsNzEuNzdaIi8+PHBhdGggY2xhc3M9ImQiIGQ9Ik0yMTkuNzEsMjQzLjkzSDE3Ni4zNFYxODguMzhhLjQ5LjQ5LDAsMCwwLS4zLS40NS40My40MywwLDAsMC0uMTksMCwuNDkuNDksMCwwLDAtLjM1LjE1bC02NC42NSw2NC42NWEuNDkuNDksMCwwLDAsMCwuNjlMMTIzLDI2NS41N2EuNS41LDAsMCwwLC4zNS4xNC40OC40OCwwLDAsMCwuMzQtLjE0bDM0LjQxLTM0LjQxdjc0LjM1YS40OS40OSwwLDAsMCwuNDkuNDloMTcuMjNhLjQ5LjQ5LDAsMCwwLC40OS0uNDlWMjYyLjE0aDQzLjM3YS40OS40OSwwLDAsMCwuNDktLjQ5VjI0NC40MkEuNDkuNDksMCwwLDAsMjE5LjcxLDI0My45M1oiLz48cGF0aCBjbGFzcz0iZSIgZD0iTTMwNS44NiwxNzAuNDZsLTU2LTU2LjA1YS41MS41MSwwLDAsMC0uNywwbC01Niw1Ni4wNWEuNDguNDgsMCwwLDAtLjE0LjM0LjUuNSwwLDAsMCwuMTQuMzVsNTYsNTZhLjUxLjUxLDAsMCwwLC43LDBsNTYtNTZBLjQ5LjQ5LDAsMCwwLDMwNS44NiwxNzAuNDZabS01Ni4zOSwzMS4zMy0zMS0zMSwzMS0zMSwzMSwzMVoiLz48L3N2Zz4K';
-
-// preload all
-[nodesAjunaPNG, nodesApronPNG, nodesArcticPNG, nodesAresGladiosSVG, nodesAresMarsPNG, nodesAresOdysseySVG, nodesAresPNG, nodesAstarPNG, nodesAutomataPNG, nodesAventusSVG, nodesBajunPNG, nodesBasiliskPNG, nodesBasiliskRococoBgPNG, nodesBeastSVG, nodesBifrostSVG, nodesBitcountryPNG, nodesBridgeHubBlackSVG, nodesBridgeHubSVG, nodesCalamariPNG, nodesCentrifugePNG, nodesCessPNG, nodesChainxSVG, nodesCloverSVG, nodesCoinversationPNG, nodesCompetitorsClubPNG, nodesConftiSVG, nodesCrabSVG, nodesCrownSterlingPNG, nodesCrustMaxwellSVG, nodesCrustParachainSVG, nodesCrustSVG, nodesDaliPNG, nodesDarwiniaSVG, nodesDatahighwayPNG, nodesDockMainnetPNG, nodesDockTestnetPNG, nodesDolphinSVG, nodesDotmogSVG, nodesEaveSVG, nodesEdgewareCircleSVG, nodesEdgewareSVG, nodesEdgewareWhitePNG, nodesEfinitySVG, nodesEncointerBlueSVG, nodesFantourPNG, nodesGalitalLogoPNG, nodesGamepowerSVG, nodesGeekSVG, nodesHanonycashSVG, nodesHashedPNG, nodesHelixstreetPNG, nodesIdavollPNG, nodesImbuePNG, nodesIntegriteeSVG, nodesInterlaySVG, nodesIpciSVG, nodesIpsePNG, nodesIpseSVG, nodesJazPNG, nodesJoystreamSVG, nodesJupiterSVG, nodesKabochaSVG, nodesKhalaSVG, nodesKiltPNG, nodesKlugPNG, nodesKonomiPNG, nodesKulupuSVG, nodesKusariSVG, nodesKylinPNG, nodesLaminarCircleSVG, nodesLitentryPNG, nodesLitmusPNG, nodesLoomNetworkPNG, nodesLuhnPNG, nodesMantaPNG, nodesMathSVG, nodesMd5PNG, nodesMinixPNG, nodesMoonbaseAlphaPNG, nodesMoonbeamPNG, nodesMoonriverSVG, nodesMoonrockPNG, nodesMoonshadowPNG, nodesMybankPNG, nodesNftmartPNG, nodesNodleSVG, nodesOliSVG, nodesOmnibtcSVG, nodesOpalLogoPNG, nodesOpportunityPNG, nodesPangolinSVG, nodesPangoroSVG, nodesParallelSVG, nodesParamiPNG, nodesPhalaSVG, nodesPhoenixPNG, nodesPicassoPNG, nodesPichiuPNG, nodesPioneerPNG, nodesPlasmPNG, nodesPolkadexSVG, nodesPolkafoundrySVG, nodesPolkasmithSVG, nodesPolymeshSVG, nodesPontemSVG, nodesPrismPNG, nodesQuartzPNG, nodesRealisPNG, nodesRiochainSVG, nodesRobonomicsSVG, nodesRocfinitySVG, nodesSakuraSVG, nodesShadowSVG, nodesShellSVG, nodesSherpaxPNG, nodesSinglavenderSVG, nodesSnowPNG, nodesSoonsocialPNG, nodesSoonsocialXPNG, nodesSoraSubstrateSVG, nodesStafiPNG, nodesStatemineSVG, nodesStatemint2PNG, nodesStatemint3PNG, nodesStatemintPNG, nodesSubdaoPNG, nodesSubgameSVG, nodesSubsocialSVG, nodesSubsocialXSVG, nodesSubspacePNG, nodesSubstrateCircleSVG, nodesSubstrateContractsNodePNG, nodesSubstrateHexagonSVG, nodesSubstrateWhiteSVG, nodesSwapdexSVG, nodesTernoaSVG, nodesThebifrostPNG, nodesTrustbasePNG, nodesUniartsPNG, nodesUniqueSVG, nodesUnitnetworkPNG, nodesUnitnetworkSVG, nodesUnitvPNG, nodesValiuPNG, nodesVaraSVG, nodesWeb3gamesSVG, nodesWestendBlackBgSVG, nodesWestendColourSVG, nodesWestendWhiteBgSVG, nodesWestlakePNG, nodesWhalaSVG, nodesZCloakSVG, nodesZeitgeistPNG, nodesZenlinkSVG, nodesZeroSVG].forEach((src): void => {
-  new Image().src = src;
-});
--- a/scripts/imgConvert.mjs
+++ b/scripts/imgConvert.mjs
@ -58,11 +58,6 @@ ${
    : ''
 }
 ${Object.keys(result).sort().map((k) => `export const ${k} = ${result[k]};`).join('\n')}
-
-// preload all
-[${Object.keys(result).sort().join(', ')}].forEach((src): void => {
-  new Image().src = src;
-});
 `);
    }
 }