Add icon for polkadot-js client (#118)

* Add icon for polkadot-js client

* Update icon

packages/frontend/src/components/List/Row.tsx

@@ -26,6 +26,7 @@ import downloadIcon from '../../icons/cloud-download.svg';
 
 import parityPolkadotIcon from '../../icons/dot.svg';
 import paritySubstrateIcon from '../../icons/substrate.svg';
+import polkadotJsIcon from '../../icons/polkadot-js.svg';
 import airalabRobonomicsIcon from '../../icons/robonomics.svg';
 import unknownImplementationIcon from '../../icons/question-solid.svg';
 
@@ -34,6 +35,12 @@ import './Row.css';
 const SEMVER_PATTERN = /^\d+\.\d+\.\d+/;
 const BANDWIDTH_SCALE = 1024 * 1024;
 const MEMORY_SCALE = 2 * 1024 * 1024;
+const ICONS = {
+  'parity-polkadot': parityPolkadotIcon,
+  'polkadot-js': polkadotJsIcon,
+  'robonomics-node': airalabRobonomicsIcon,
+  'substrate-node': paritySubstrateIcon
+};
 
 export namespace Row {
   export interface Props {
@@ -134,10 +141,7 @@ export class Row extends React.Component<Row.Props, Row.State> {
       setting: 'implementation',
       render: ({ implementation, version }) => {
         const [semver] = version.match(SEMVER_PATTERN) || ['?.?.?'];
-        const implIcon = implementation === 'parity-polkadot' ? parityPolkadotIcon
-                       : implementation === 'substrate-node' ? paritySubstrateIcon
-                       : implementation === 'robonomics-node' ? airalabRobonomicsIcon
-                       : unknownImplementationIcon;
+        const implIcon = ICONS[implementation] || unknownImplementationIcon;
 
         return (
           <Tooltip text={`${implementation} v${version}`}>

packages/frontend/src/icons/polkadot-js.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="iso-8859-1" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="polkadot-js" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;zoom: 1;" xml:space="preserve"><circle style="fill:currentColor;opacity:0.25" cx="256" cy="256" r="200"></circle><rect stroke="currentColor" height="400" x="80" stroke-width="0" width="400" y="48" fill="none" transform=""></rect><path style="fill:currentColor;" d="M391.05,232.97 c-7.125,-20.664 -36.341,-20.664 -42.04,-3.563 c-5.7,17.101 13.539,27.076 43.466,37.053 c29.927,9.976 48.454,36.341 44.891,59.854 s-13.539,54.154 -72.68,54.154 c-36.963,0 -57.505,-23.103 -67.714,-40.429 l33.511,-20.138 c0,0 11.401,24.227 32.777,24.227 c21.377,0 29.927,-7.125 29.927,-23.514 c0,-19.951 -69.118,-27.076 -79.806,-61.279 s3.563,-82.656 53.441,-79.094 c31.175,2.227 48.71,17.535 57.478,28.703 L391.05,232.97  z " visibility="visible"></path><path style="fill:currentColor;" d="M235.714,183.805 c0,0 0,120.421 0,136.81 c0,16.388 -14.251,24.94 -28.502,22.089 c-14.251,-2.85 -20.664,-19.951 -20.664,-19.951 l-32.777,22.089 c0,0 7.125,32.777 52.016,35.628 c44.891,2.85 70.542,-24.227 70.542,-47.029 s0,-149.636 0,-149.636 L235.714,183.805 L235.714,183.805  z " visibility="visible"></path><circle style="fill:currentColor;" cx="90" cy="180" r="64"></circle></svg>