Split Dapp icon into ui/DappIcon (#4308)

js/src/ui/DappIcon/dappIcon.css

@@ -0,0 +1,31 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.icon {
+  border-radius: 50%;
+  margin: 0 0.75em 0 0;
+}
+
+.normal {
+  height: 56px;
+  width: 56px;
+}
+
+.small {
+  height: 32px;
+  width: 32px;
+}

js/src/ui/DappIcon/dappIcon.js

@@ -0,0 +1,49 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './dappIcon.css';
+
+export default class DappIcon extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  };
+
+  static propTypes = {
+    app: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    small: PropTypes.bool
+  };
+
+  render () {
+    const { dappsUrl } = this.context.api;
+    const { app, className, small } = this.props;
+
+    return (
+      <img
+        className={
+          [styles.icon, styles[small ? 'small' : 'normal'], className].join(' ')
+        }
+        src={
+          app.type === 'local'
+            ? `${dappsUrl}/${app.id}/${app.iconUrl}`
+            : `${dappsUrl}${app.image}`
+        }
+      />
+    );
+  }
+}

js/src/ui/DappIcon/dappIcon.spec.js

@@ -0,0 +1,70 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import DappIcon from './';
+
+const DAPPS_URL = 'http://test';
+
+let api;
+let component;
+
+function createApi () {
+  api = {
+    dappsUrl: DAPPS_URL
+  };
+
+  return api;
+}
+
+function render (props = {}) {
+  if (!props.app) {
+    props.app = {};
+  }
+
+  component = shallow(
+    <DappIcon { ...props } />,
+    {
+      context: { api: createApi() }
+    }
+  );
+
+  return component;
+}
+
+describe('ui/DappIcon', () => {
+  it('renders defaults', () => {
+    expect(render()).to.be.ok;
+  });
+
+  it('adds specified className', () => {
+    expect(render({ className: 'testClass' }).hasClass('testClass')).to.be.true;
+  });
+
+  it('renders local apps with correct URL', () => {
+    expect(render({ app: { id: 'test', type: 'local', iconUrl: 'test.img' } }).props().src).to.equal(
+      `${DAPPS_URL}/test/test.img`
+    );
+  });
+
+  it('renders other apps with correct URL', () => {
+    expect(render({ app: { id: 'test', image: '/test.img' } }).props().src).to.equal(
+      `${DAPPS_URL}/test.img`
+    );
+  });
+});

js/src/ui/DappIcon/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './dappIcon';

js/src/ui/index.js

@@ -29,6 +29,7 @@ import Container, { Title as ContainerTitle } from './Container';
 import ContextProvider from './ContextProvider';
 import CopyToClipboard from './CopyToClipboard';
 import CurrencySymbol from './CurrencySymbol';
+import DappIcon from './DappIcon';
 import Editor from './Editor';
 import Errors from './Errors';
 import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select, RadioButtons } from './Form';
@@ -73,6 +74,7 @@ export {
   ContextProvider,
   CopyToClipboard,
   CurrencySymbol,
+  DappIcon,
   Editor,
   Errors,
   Form,

js/src/views/Dapps/Summary/summary.css

@@ -16,17 +16,14 @@
 */
 
 .container {
-  position: relative;
   height: 100%;
+  position: relative;
 }
 
 .image {
+  left: 1.5em;
   position: absolute;
   top: 1.5em;
-  left: 1.5em;
-  border-radius: 50%;
-  width: 56px;
-  height: 56px;
 }
 
 .description {

js/src/views/Dapps/Summary/summary.js

@@ -17,34 +17,31 @@
 import React, { Component, PropTypes } from 'react';
 import { Link } from 'react-router';
 
-import { Container, ContainerTitle, Tags } from '~/ui';
+import { Container, ContainerTitle, DappIcon, Tags } from '~/ui';
 
 import styles from './summary.css';
 
 export default class Summary extends Component {
-  static contextTypes = {
-    api: React.PropTypes.object
-  }
-
   static propTypes = {
     app: PropTypes.object.isRequired,
     children: PropTypes.node
   }
 
   render () {
-    const { dappsUrl } = this.context.api;
     const { app } = this.props;
 
     if (!app) {
       return null;
     }
 
-    const image = this.renderImage(dappsUrl, app);
     const link = this.renderLink(app);
 
     return (
       <Container className={ styles.container }>
-        { image }
+        <DappIcon
+          app={ app }
+          className={ styles.image }
+        />
         <Tags tags={ [app.type] } />
         <div className={ styles.description }>
           <ContainerTitle
@@ -61,18 +58,6 @@ export default class Summary extends Component {
     );
   }
 
-  renderImage (dappsUrl, app) {
-    if (app.type === 'local') {
-      return (
-        <img src={ `${dappsUrl}/${app.id}/${app.iconUrl}` } className={ styles.image } />
-      );
-    }
-
-    return (
-      <img src={ `${dappsUrl}${app.image}` } className={ styles.image } />
-    );
-  }
-
   renderLink (app) {
     // Special case for web dapp
     if (app.url === 'web') {