From db8c16e5bee876ae9d6869ccfdc566b05dbda41d Mon Sep 17 00:00:00 2001 From: Jaco Date: Wed, 15 Mar 2023 08:31:21 +0200 Subject: [PATCH] Show ChainImg via endpoint map (#9178) * Show ChainImg via endpoint map * Substrate logo --- packages/apps-config/src/endpoints/production.ts | 3 +-- packages/apps-config/src/endpoints/productionRelayKusama.ts | 2 +- .../apps-config/src/endpoints/productionRelayPolkadot.ts | 4 ++-- packages/apps-config/src/endpoints/testing.ts | 6 ++++-- packages/react-components/src/ChainImg.tsx | 6 +++++- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/apps-config/src/endpoints/production.ts b/packages/apps-config/src/endpoints/production.ts index d968684636..1f106c5111 100644 --- a/packages/apps-config/src/endpoints/production.ts +++ b/packages/apps-config/src/endpoints/production.ts @@ -432,9 +432,8 @@ export const prodChains: EndpointOption[] = [ }, { info: 'stafi', - isDisabled: true, // Cannot find type ChainId providers: { - 'Stafi Foundation': 'wss://mainnet-rpc.stafi.io' + // 'Stafi Foundation': 'wss://mainnet-rpc.stafi.io' // isDisabled: true, // Cannot find type ChainId }, text: 'Stafi', ui: { diff --git a/packages/apps-config/src/endpoints/productionRelayKusama.ts b/packages/apps-config/src/endpoints/productionRelayKusama.ts index 53069da324..7fa02685b8 100644 --- a/packages/apps-config/src/endpoints/productionRelayKusama.ts +++ b/packages/apps-config/src/endpoints/productionRelayKusama.ts @@ -670,7 +670,7 @@ export const prodParasKusama: EndpointOption[] = [ }, { homepage: 'https://sora.org/', - info: 'sora_ksm', + info: 'sora', paraId: 2011, providers: { Soramitsu: 'wss://ws.parachain-collator-1.c1.sora2.soramitsu.co.jp' diff --git a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts index d50743a1f7..d4fc0b69dd 100644 --- a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts +++ b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts @@ -168,7 +168,7 @@ export const prodParasPolkadot: EndpointOption[] = [ }, { homepage: 'https://composable.finance/', - info: 'composableFinance', + info: 'composable', paraId: 2019, providers: { Composable: 'wss://rpc.composable.finance', @@ -296,7 +296,7 @@ export const prodParasPolkadot: EndpointOption[] = [ }, { homepage: 'https://hydradx.io/', - info: 'hydra', + info: 'hydradx', paraId: 2034, providers: { Dwellir: 'wss://hydradx-rpc.dwellir.com', diff --git a/packages/apps-config/src/endpoints/testing.ts b/packages/apps-config/src/endpoints/testing.ts index 1b24879b04..ef7872f8e5 100644 --- a/packages/apps-config/src/endpoints/testing.ts +++ b/packages/apps-config/src/endpoints/testing.ts @@ -4,7 +4,7 @@ import type { EndpointOption } from './types.js'; import { chains3dpassPNG, chainsAcalaSVG, chainsAlephSVG, chainsBrainstormPNG, chainsCreditcoinTestPNG, chainsDebioSVG, chainsEquilibriumSVG, chainsFerrumPNG, chainsKintsugiPNG, chainsLogionPNG, chainsMyriadPNG, chainsShidenPNG, chainsSkyekiwiPNG, chainsTanglePNG, chainsVaraSVG } from '../ui/logos/chains/index.js'; -import { nodesAjunaPNG, nodesArcticPNG, nodesAresGladiosSVG, nodesAutomataPNG, nodesBifrostSVG, nodesBitcountryPNG, nodesCessPNG, nodesCloverSVG, nodesCrustMaxwellSVG, nodesDatahighwayPNG, nodesDockPNG, nodesDolphinSVG, nodesDotmogSVG, nodesEdgewareWhitePNG, nodesEncointerBlueSVG, nodesFantourPNG, nodesGalitalLogoPNG, nodesGamepowerSVG, nodesGeekSVG, nodesInterlaySVG, nodesIpsePNG, nodesJazPNG, nodesJupiterSVG, nodesKhalaSVG, nodesKiltPNG, nodesKlugPNG, nodesKylinPNG, nodesLaminarCircleSVG, nodesLitentryPNG, nodesMantaPNG, nodesMathSVG, nodesMinixPNG, nodesMoonbaseAlphaSVG, nodesMybankPNG, nodesNftmartPNG, nodesNodleSVG, nodesOpalLogoPNG, nodesOpportunityPNG, nodesPangoroSVG, nodesPhalaSVG, nodesPhoenixPNG, nodesPichiuPNG, nodesPolkadexSVG, nodesPolkafoundrySVG, nodesPolymeshSVG, nodesPontemSVG, nodesPrismPNG, nodesRealisPNG, nodesRiochainSVG, nodesSherpaxPNG, nodesSoonsocialPNG, nodesSoraSubstrateSVG, nodesSubdaoPNG, nodesSubgameSVG, nodesSubspacePNG, nodesTernoaSVG, nodesThebifrostPNG, nodesUniartsPNG, nodesUniqueSVG, nodesUnitnetworkPNG, nodesWeb3gamesSVG, nodesZCloakSVG, nodesZeitgeistPNG } from '../ui/logos/nodes/index.js'; +import { nodesAjunaPNG, nodesArcticPNG, nodesAresGladiosSVG, nodesAutomataPNG, nodesBifrostSVG, nodesBitcountryPNG, nodesCessPNG, nodesCloverSVG, nodesCrustMaxwellSVG, nodesDatahighwayPNG, nodesDockPNG, nodesDolphinSVG, nodesDotmogSVG, nodesEdgewareWhitePNG, nodesEncointerBlueSVG, nodesFantourPNG, nodesGalitalLogoPNG, nodesGamepowerSVG, nodesGeekSVG, nodesInterlaySVG, nodesIpsePNG, nodesJazPNG, nodesJupiterSVG, nodesKhalaSVG, nodesKiltPNG, nodesKlugPNG, nodesKylinPNG, nodesLaminarCircleSVG, nodesLitentryPNG, nodesMantaPNG, nodesMathSVG, nodesMinixPNG, nodesMoonbaseAlphaSVG, nodesMybankPNG, nodesNftmartPNG, nodesNodleSVG, nodesOpalLogoPNG, nodesOpportunityPNG, nodesPangoroSVG, nodesPhalaSVG, nodesPhoenixPNG, nodesPichiuPNG, nodesPolkadexSVG, nodesPolkafoundrySVG, nodesPolymeshSVG, nodesPontemSVG, nodesPrismPNG, nodesRealisPNG, nodesRiochainSVG, nodesSherpaxPNG, nodesSoonsocialPNG, nodesSoraSubstrateSVG, nodesSubdaoPNG, nodesSubgameSVG, nodesSubspacePNG, nodesSubstrateHexagonSVG, nodesTernoaSVG, nodesThebifrostPNG, nodesUniartsPNG, nodesUniqueSVG, nodesUnitnetworkPNG, nodesWeb3gamesSVG, nodesZCloakSVG, nodesZeitgeistPNG } from '../ui/logos/nodes/index.js'; export * from './testingRelayRococo.js'; export * from './testingRelayWestend.js'; @@ -285,7 +285,9 @@ export const testChains: EndpointOption[] = [ // Parity: 'wss://substrate-rpc.parity.io' // https://github.com/polkadot-js/apps/issues/5571 }, text: 'Flaming Fir', - ui: {} + ui: { + logo: nodesSubstrateHexagonSVG + } }, { info: 'Galital', diff --git a/packages/react-components/src/ChainImg.tsx b/packages/react-components/src/ChainImg.tsx index f226039a70..3d06973686 100644 --- a/packages/react-components/src/ChainImg.tsx +++ b/packages/react-components/src/ChainImg.tsx @@ -5,6 +5,7 @@ import type { IconName } from '@fortawesome/fontawesome-svg-core'; import React, { useMemo } from 'react'; +import { createWsEndpoints } from '@polkadot/apps-config'; import { externalEmptySVG } from '@polkadot/apps-config/ui/logos/external'; import { useApi } from '@polkadot/react-hooks'; @@ -19,10 +20,13 @@ interface Props { withoutHl?: boolean; } +const endpoints = createWsEndpoints(() => ''); + function ChainImg ({ className = '', isInline, logo, onClick, withoutHl }: Props): React.ReactElement { const { apiEndpoint } = useApi(); const [isEmpty, img, isFa] = useMemo((): [boolean, unknown, boolean] => { - const found = logo || apiEndpoint?.ui.logo; + const endpoint = endpoints.find((o) => o.info === logo); + const found = endpoint?.ui.logo || logo || apiEndpoint?.ui.logo; const imgBase = found || externalEmptySVG; const [isFa, img] = !imgBase || imgBase === 'empty' || !(imgBase.startsWith('data:') || imgBase.startsWith('fa;')) ? [false, externalEmptySVG]