Add ChainImg component (#1540)

package.json

@@ -35,7 +35,7 @@
     "@babel/core": "^7.5.5",
     "@babel/runtime": "^7.5.5",
     "@polkadot/dev-react": "^0.31.0-beta.3",
-    "@polkadot/ts": "^0.1.64",
+    "@polkadot/ts": "^0.1.65",
     "autoprefixer": "^9.6.1",
     "empty": "^0.10.1",
     "gh-pages": "^2.1.1",

packages/apps/src/SideBar/index.tsx

@@ -15,7 +15,7 @@ import styled from 'styled-components';
 import { Responsive } from 'semantic-ui-react';
 import routing from '@polkadot/apps-routing';
 import { withCalls, withMulti } from '@polkadot/react-api';
-import { Button, Icon, Menu, media } from '@polkadot/react-components';
+import { Button, ChainImg, Icon, Menu, media } from '@polkadot/react-components';
 import { classes } from '@polkadot/react-components/util';
 import { logoBackground, logoPadding } from '@polkadot/react-components/styles/theme';
 import { BestNumber, Chain } from '@polkadot/react-query';
@@ -23,15 +23,14 @@ import { BestNumber, Chain } from '@polkadot/react-query';
 import translate from '../translate';
 import Item from './Item';
 import NodeInfo from './NodeInfo';
-import getLogo from './logos';
 
 interface Props extends ApiProps, I18nProps {
+  className?: string;
   collapse: () => void;
   handleResize: () => void;
   isCollapsed: boolean;
   menuOpen: boolean;
   system_chain?: string;
-  system_name?: string;
   toggleMenu: () => void;
 }
 
@@ -39,32 +38,6 @@ interface State {
   modals: Record<string, boolean>;
 }
 
-const Toggle = styled.img`
-  background: ${logoBackground};
-  padding: ${logoPadding};
-  border-radius: 50%;
-  cursor: pointer;
-  left: 0.9rem;
-  opacity: 0;
-  position: absolute;
-  top: 0px;
-  transition: opacity 0.2s ease-in, top 0.2s ease-in;
-  width: 2.8rem;
-
-  &.delayed {
-    transition-delay: 0.4s;
-  }
-  &.open {
-    opacity: 1;
-    top: 0.9rem;
-  }
-
-  ${media.DESKTOP`
-    opacity: 0 !important;
-    top: -2.9rem !important;
-  `}
-`;
-
 class SideBar extends React.PureComponent<Props, State> {
   public state: State;
 
@@ -84,19 +57,16 @@ class SideBar extends React.PureComponent<Props, State> {
   }
 
   public render (): React.ReactNode {
-    const { handleResize, isCollapsed, system_name, toggleMenu, menuOpen } = this.props;
-    const logo = getLogo(system_name);
+    const { className, handleResize, isCollapsed, toggleMenu, menuOpen } = this.props;
 
     return (
       <Responsive
         onUpdate={handleResize}
-        className={classes('apps-SideBar-Wrapper', isCollapsed ? 'collapsed' : 'expanded')}
+        className={classes(className, 'apps-SideBar-Wrapper', isCollapsed ? 'collapsed' : 'expanded')}
       >
-        <Toggle
-          alt='logo'
-          className={menuOpen ? 'closed' : 'open delayed'}
+        <ChainImg
+          className={`toggleImg ${menuOpen ? 'closed' : 'open delayed'}`}
           onClick={toggleMenu}
-          src={logo}
         />
         {this.renderModals()}
         <div className='apps--SideBar'>
@@ -149,15 +119,11 @@ class SideBar extends React.PureComponent<Props, State> {
   }
 
   private renderLogo (): React.ReactNode {
-    const { api, isApiReady, system_chain, system_name } = this.props;
-    const logo = getLogo(system_name, system_chain);
+    const { api, isApiReady } = this.props;
 
     return (
       <div className='apps--SideBar-logo'>
-        <img
-          alt='polkadot'
-          src={logo}
-        />
+        <ChainImg />
         <div className='info'>
           <Chain className='chain' />
           {isApiReady &&
@@ -265,10 +231,36 @@ class SideBar extends React.PureComponent<Props, State> {
 }
 
 export default withMulti(
-  SideBar,
+  styled(SideBar)`
+    .toggleImg {
+      background: ${logoBackground};
+      padding: ${logoPadding};
+      border-radius: 50%;
+      cursor: pointer;
+      left: 0.9rem;
+      opacity: 0;
+      position: absolute;
+      top: 0px;
+      transition: opacity 0.2s ease-in, top 0.2s ease-in;
+      width: 2.8rem;
+
+      &.delayed {
+        transition-delay: 0.4s;
+      }
+
+      &.open {
+        opacity: 1;
+        top: 0.9rem;
+      }
+
+      ${media.DESKTOP`
+        opacity: 0 !important;
+        top: -2.9rem !important;
+      `}
+    }
+  `,
   translate,
   withCalls<Props>(
-    'rpc.system.chain',
-    'rpc.system.name'
+    'rpc.system.chain'
   )
 );

packages/react-components/src/ChainImg.tsx

@@ -1,7 +1,14 @@
+/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/apps authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ApiProps } from '@polkadot/react-api/types';
+
+import React from 'react';
+import { withCalls } from '@polkadot/react-api';
+import { Text } from '@polkadot/types';
+
 // the imports here as a bit all-over, non-aphabetical - since we expect this to grow,
 // rather organise based on type, grouping chains and nodes as opposed to location
 
@@ -30,6 +37,48 @@ const NODES: Record<string, any> = {
   'substrate-node': substrate
 };
 
-export default function getLogo (node: string = '', chain: string = ''): any {
-  return CHAINS[chain] || NODES[node] || EMPTY;
+// overrides as specified
+const LOGOS: Record<string, any> = {
+  empty: EMPTY,
+  alexander: polkadot,
+  kusama: chainKusama,
+  polkadot,
+  substrate
+};
+
+interface Props extends ApiProps {
+  className?: string;
+  logo?: keyof typeof LOGOS;
+  onClick?: () => any;
+  system_chain?: Text;
+  system_name?: Text;
 }
+
+function getLogo (node: Text | string = '', chain: Text | string = ''): any {
+  return CHAINS[chain.toString()] || NODES[node.toString()];
+}
+
+function getOverride (logo: string = ''): any {
+  return LOGOS[logo];
+}
+
+class ChainImg extends React.PureComponent<Props> {
+  public render (): React.ReactNode {
+    const { className, logo, onClick, system_chain, system_name } = this.props;
+    const img = getOverride(logo) || getLogo(system_name, system_chain) || EMPTY;
+
+    return (
+      <img
+        alt='chain logo'
+        className={className}
+        onClick={onClick}
+        src={img}
+      />
+    );
+  }
+}
+
+export default withCalls<Props>(
+  'rpc.system.chain',
+  'rpc.system.name'
+)(ChainImg);

packages/react-components/src/index.tsx

@@ -16,6 +16,7 @@ export { default as Call } from './Call';
 export { default as Card } from './Card';
 export { default as CardGrid } from './CardGrid';
 export { default as CardSummary } from './CardSummary';
+export { default as ChainImg } from './ChainImg';
 export { default as Chart } from './Chart';
 export { default as Columar } from './Columar';
 export { default as Column } from './Column';

yarn.lock

@@ -2128,10 +2128,10 @@
     isomorphic-fetch "^2.2.1"
     websocket "^1.0.29"
 
-"@polkadot/ts@^0.1.64":
-  version "0.1.64"
-  resolved "https://registry.yarnpkg.com/@polkadot/ts/-/ts-0.1.64.tgz#b92fd061fd936de6789f0857a0c8b41e087575b6"
-  integrity sha512-k+V6xYZ1FBw4VeYdKcVZBOvfH5rv/X4BijO8e6iEyVQDvM/kUh2USqqQaUEumJi9m9Vxw+4fMuQ07jDqMeTrGw==
+"@polkadot/ts@^0.1.65":
+  version "0.1.65"
+  resolved "https://registry.yarnpkg.com/@polkadot/ts/-/ts-0.1.65.tgz#96eaff7ec06794b608d333ffa89eb820d3c8af36"
+  integrity sha512-pJjzp7Pn4Qa/dNoTwIb0SGWnW3m9AAaQbZD3v1Pqs2MEuhcoUpKmBVO2n1L76oglNphTMhl4BtvrrJNlPd096Q==
   dependencies:
     "@types/chrome" "^0.0.86"