neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display specName in addition to specVersion (#5194)

Browse Source
This commit is contained in:
Jaco 2021-05-03 14:49:36 +03:00 committed by GitHub
parent 20a474623a
commit 3f9bb30485
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/apps/src/Menu/ChainInfo.tsx
View File

@ -11,14 +11,12 @@ import { useApi, useCall, useIpfs, useToggle } from '@polkadot/react-hooks';
import { BestNumber, Chain } from '@polkadot/react-query';
import Endpoints from '../Endpoints';
import { useTranslation } from '../translate';
interface Props {
className?: string;
}
function ChainInfo ({ className }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api, isApiReady } = useApi();
const runtimeVersion = useCall<RuntimeVersion>(isApiReady && api.rpc.state.subscribeRuntimeVersion);
const { ipnsChain } = useIpfs();
@ -35,7 +33,7 @@ function ChainInfo ({ className }: Props): React.ReactElement<Props> {
<div className='info media--1000'>
<Chain className='chain' />
{runtimeVersion && (
<div className='runtimeVersion'>{t<string>('version {{version}}', { replace: { version: runtimeVersion.specVersion.toNumber() } })}</div>
<div className='runtimeVersion'>{runtimeVersion.specName.toString()}/{runtimeVersion.specVersion.toNumber()}</div>
)}
<BestNumber
className='bestNumber'

60
packages/apps/src/Menu/index.tsx
View File

@ -25,24 +25,24 @@ interface Props {
className?: string;
}
const disabledLog = new Map<string, string>();
function createExternals (t: TFunction): ItemRoute[] {
return [
{ href: 'https://github.com/polkadot-js/apps', icon: 'code-branch', name: 'github', text: t<string>('nav.github', 'GitHub', { ns: 'apps-routing' }) },
{ href: 'https://wiki.polkadot.network', icon: 'book', name: 'wiki', text: t<string>('nav.wiki', 'Wiki', { ns: 'apps-routing' }) }
{
href: 'https://github.com/polkadot-js/apps',
icon: 'code-branch',
name: 'github',
text: t<string>('nav.github', 'GitHub', { ns: 'apps-routing' })
},
{
href: 'https://wiki.polkadot.network',
icon: 'book',
name: 'wiki',
text: t<string>('nav.wiki', 'Wiki', { ns: 'apps-routing' })
}
];
}
function logDisabled (route: string, message: string): void {
if (!disabledLog.get(route)) {
disabledLog.set(route, message);
console.warn(`Disabling ${route}: ${message}`);
}
}
function checkVisible (name: string, { api, isApiConnected, isApiReady }: ApiProps, hasAccounts: boolean, hasSudo: boolean, { isHidden, needsAccounts, needsApi, needsSudo }: Route['display']): boolean {
function checkVisible ({ api, isApiConnected, isApiReady }: ApiProps, hasAccounts: boolean, hasSudo: boolean, { isHidden, needsAccounts, needsApi, needsSudo }: Route['display']): boolean {
if (isHidden) {
return false;
} else if (needsAccounts && !hasAccounts) {
@ -52,18 +52,10 @@ function checkVisible (name: string, { api, isApiConnected, isApiReady }: ApiPro
} else if (!isApiReady || !isApiConnected) {
return false;
} else if (needsSudo && !hasSudo) {
logDisabled(name, 'Sudo key not available');
return false;
}
const notFound = findMissingApis(api, needsApi);
if (notFound.length !== 0) {
logDisabled(name, `API not available: ${notFound.toString()}`);
}
return notFound.length === 0;
return findMissingApis(api, needsApi).length === 0;
}
function extractGroups (routing: Routes, groupNames: Record<string, string>, apiProps: ApiProps, hasAccounts: boolean, hasSudo: boolean): Group[] {
@ -71,7 +63,10 @@ function extractGroups (routing: Routes, groupNames: Record<string, string>, api
.values(
routing.reduce((all: Groups, route): Groups => {
if (!all[route.group]) {
all[route.group] = { name: groupNames[route.group], routes: [route] };
all[route.group] = {
name: groupNames[route.group],
routes: [route]
};
} else {
all[route.group].routes.push(route);
}
@ -81,7 +76,9 @@ function extractGroups (routing: Routes, groupNames: Record<string, string>, api
)
.map(({ name, routes }): Group => ({
name,
routes: routes.filter(({ display, name }) => checkVisible(name, apiProps, hasAccounts, hasSudo, display))
routes: routes.filter(({ display }) =>
checkVisible(apiProps, hasAccounts, hasSudo, display)
)
}))
.filter(({ routes }) => routes.length);
}
@ -94,6 +91,7 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
const location = useLocation();
const externalRef = useRef(createExternals(t));
const routeRef = useRef(createRoutes(t));
const groupRef = useRef({
accounts: t('Accounts'),
@ -103,10 +101,8 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
settings: t('Settings')
});
const routeRef = useRef(createRoutes(t));
const hasSudo = useMemo(
() => !!sudoKey && allAccounts.some((address) => sudoKey.eq(address)),
() => !!sudoKey && allAccounts.some((a) => sudoKey.eq(a)),
[allAccounts, sudoKey]
);
@ -116,21 +112,21 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
);
const activeRoute = useMemo(
() => routeRef.current.find((route) => location.pathname.startsWith(`/${route.name}`)) || null,
() => routeRef.current.find(({ name }) =>
location.pathname.startsWith(`/${name}`)
) || null,
[location]
);
const isLoading = !apiProps.isApiReady || !apiProps.isApiConnected;
return (
<div className={`${className}${isLoading ? ' isLoading' : ''} highlight--bg`}>
<div className={`${className}${(!apiProps.isApiReady || !apiProps.isApiConnected) ? ' isLoading' : ''} highlight--bg`}>
<div className='menuContainer'>
<div className='menuSection'>
<ChainInfo />
<ul className='menuItems'>
{visibleGroups.map(({ name, routes }): React.ReactNode => (
<Grouping
isActive={ activeRoute && activeRoute.group === name.toLowerCase()}
isActive={activeRoute && activeRoute.group === name.toLowerCase()}
key={name}
name={name}
routes={routes}