diff --git a/packages/apps-config/package.json b/packages/apps-config/package.json index ac07e3406b..f81a07e965 100644 --- a/packages/apps-config/package.json +++ b/packages/apps-config/package.json @@ -38,6 +38,7 @@ "@polkadot/api": "^10.9.1", "@polkadot/api-derive": "^10.9.1", "@polkadot/networks": "^12.3.2", + "@polkadot/react-identicon": "^3.5.1", "@polkadot/types": "^10.9.1", "@polkadot/types-codec": "^10.9.1", "@polkadot/util": "^12.3.2", diff --git a/packages/apps-config/src/endpoints/productionRelayKusama.ts b/packages/apps-config/src/endpoints/productionRelayKusama.ts index 097666d684..19822bf3c7 100644 --- a/packages/apps-config/src/endpoints/productionRelayKusama.ts +++ b/packages/apps-config/src/endpoints/productionRelayKusama.ts @@ -853,6 +853,7 @@ export const prodRelayKusama: EndpointOption = { text: 'Kusama', ui: { color: '#000000', + identityIcon: 'polkadot', logo: chainsKusamaSVG } }; diff --git a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts index f416905566..3c21a7043c 100644 --- a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts +++ b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts @@ -740,6 +740,7 @@ export const prodRelayPolkadot: EndpointOption = { text: 'Polkadot', ui: { color: '#e6007a', + identityIcon: 'polkadot', logo: chainsPolkadotCircleSVG } }; diff --git a/packages/apps-config/src/endpoints/testingRelayRococo.ts b/packages/apps-config/src/endpoints/testingRelayRococo.ts index 66cd74e08b..25712ca9de 100644 --- a/packages/apps-config/src/endpoints/testingRelayRococo.ts +++ b/packages/apps-config/src/endpoints/testingRelayRococo.ts @@ -699,6 +699,7 @@ export const testRelayRococo: EndpointOption = { text: 'Rococo', ui: { color: '#6f36dc', + identityIcon: 'polkadot', logo: chainsRococoSVG } }; diff --git a/packages/apps-config/src/endpoints/testingRelayWestend.ts b/packages/apps-config/src/endpoints/testingRelayWestend.ts index d66441b0a3..cb265408e5 100644 --- a/packages/apps-config/src/endpoints/testingRelayWestend.ts +++ b/packages/apps-config/src/endpoints/testingRelayWestend.ts @@ -195,6 +195,7 @@ export const testRelayWestend: EndpointOption = { text: 'Westend', ui: { color: '#da68a7', + identityIcon: 'polkadot', logo: nodesWestendColourSVG } }; diff --git a/packages/apps-config/src/endpoints/types.ts b/packages/apps-config/src/endpoints/types.ts index d37fe1dc3d..053b61f4d6 100644 --- a/packages/apps-config/src/endpoints/types.ts +++ b/packages/apps-config/src/endpoints/types.ts @@ -2,6 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import type React from 'react'; +import type { IconTheme } from '@polkadot/react-identicon/types'; import type { HexString } from '@polkadot/util/types'; import type { Option } from '../settings/types.js'; @@ -14,6 +15,7 @@ interface BaseOption { teleport?: number[]; ui: { color?: string; + identityIcon?: IconTheme; logo?: string; } } diff --git a/packages/apps-config/src/endpoints/util.ts b/packages/apps-config/src/endpoints/util.ts index aca9116e91..8600703f60 100644 --- a/packages/apps-config/src/endpoints/util.ts +++ b/packages/apps-config/src/endpoints/util.ts @@ -38,6 +38,14 @@ function expandLinked (input: LinkOption[]): LinkOption[] { : undefined; child.valueRelay = valueRelay; + if (entry.ui?.identityIcon && child.paraId && child.paraId < 2000) { + if (!child.ui) { + child.ui = { identityIcon: entry.ui.identityIcon }; + } else if (!child.ui.identityIcon) { + child.ui.identityIcon = entry.ui.identityIcon; + } + } + return child; }) ) diff --git a/packages/apps-config/src/ui/identityIcons/index.ts b/packages/apps-config/src/ui/identityIcons/index.ts index c7de1d8023..bddcd63973 100644 --- a/packages/apps-config/src/ui/identityIcons/index.ts +++ b/packages/apps-config/src/ui/identityIcons/index.ts @@ -18,10 +18,7 @@ export const identitySpec: Record = [ ['kusama', 'polkadot'], ['polkadot', 'polkadot'], ['rococo', 'polkadot'], - ['statemine', 'polkadot'], - ['statemint', 'polkadot'], - ['westend', 'polkadot'], - ['westmint', 'polkadot'] + ['westend', 'polkadot'] ].reduce((icons, [spec, icon]): Record => ({ ...icons, [spec.toLowerCase().replace(/-/g, ' ')]: icon diff --git a/packages/react-components/src/IdentityIcon/index.tsx b/packages/react-components/src/IdentityIcon/index.tsx index 6d8b55c3ec..ce369b5dfc 100644 --- a/packages/react-components/src/IdentityIcon/index.tsx +++ b/packages/react-components/src/IdentityIcon/index.tsx @@ -1,6 +1,7 @@ // Copyright 2017-2023 @polkadot/react-components authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { LinkOption } from '@polkadot/apps-config/endpoints/types'; import type { IdentityProps } from '@polkadot/react-identicon/types'; import type { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces'; import type { ThemeProps } from '../types.js'; @@ -25,8 +26,14 @@ interface Props { value?: AccountId | AccountIndex | Address | string | Uint8Array | null; } -export function getIdentityTheme (systemName: string, specName: string): 'substrate' { - return ((settings.icon === 'default' && getSystemIcon(systemName, specName)) || settings.icon) as 'substrate'; +export function getIdentityTheme (apiEndpoint: LinkOption | null, systemName: string, specName: string): 'substrate' { + return ( + (settings.icon === 'default' && ( + apiEndpoint?.ui?.identityIcon || + getSystemIcon(systemName, specName) + )) || + settings.icon + ) as 'substrate'; } function isCodec (value?: AccountId | AccountIndex | Address | string | Uint8Array | null): value is AccountId | AccountIndex | Address { @@ -34,10 +41,10 @@ function isCodec (value?: AccountId | AccountIndex | Address | string | Uint8Arr } function IdentityIcon ({ className = '', forceIconType, prefix, size = 24, theme, value }: Props): React.ReactElement { - const { isEthereum, specName, systemName } = useApi(); + const { apiEndpoint, isEthereum, specName, systemName } = useApi(); const { t } = useTranslation(); const { queueAction } = useQueue(); - const thisTheme = theme || getIdentityTheme(systemName, specName); + const thisTheme = theme || getIdentityTheme(apiEndpoint, systemName, specName); const Custom = thisTheme === 'robohash' ? RoboHash diff --git a/yarn.lock b/yarn.lock index 36494ca44f..fdfb32454b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1861,6 +1861,7 @@ __metadata: "@polkadot/api": ^10.9.1 "@polkadot/api-derive": ^10.9.1 "@polkadot/networks": ^12.3.2 + "@polkadot/react-identicon": ^3.5.1 "@polkadot/types": ^10.9.1 "@polkadot/types-codec": ^10.9.1 "@polkadot/util": ^12.3.2