From 3e2b675e7b5479e1ce36a571877cff2fecaace43 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Sat, 8 Apr 2017 08:25:38 -0400
Subject: [PATCH] Add channel indicator component

---
 ui/js/component/channel-indicator.js      | 43 +++++++++++++++++++++++
 ui/scss/all.scss                          |  1 +
 ui/scss/component/_channel-indicator.scss |  5 +++
 3 files changed, 49 insertions(+)
 create mode 100644 ui/js/component/channel-indicator.js
 create mode 100644 ui/scss/component/_channel-indicator.scss

diff --git a/ui/js/component/channel-indicator.js b/ui/js/component/channel-indicator.js
new file mode 100644
index 000000000..674484200
--- /dev/null
+++ b/ui/js/component/channel-indicator.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import lbry from '../lbry.js';
+import uri from '../uri.js';
+import {Icon} from './common.js';
+
+const ChannelIndicator = React.createClass({
+  propTypes: {
+    uri: React.PropTypes.string.isRequired,
+    claimInfo: React.PropTypes.object.isRequired,
+  },
+  render: function() {
+    const {name, has_signature, signature_is_valid} = this.props.claimInfo;
+    if (!has_signature) {
+      return null;
+    }
+
+    const uriObj = uri.parseLbryUri(this.props.uri);
+    if (!uriObj.isChannel) {
+      return null;
+    }
+
+    const channelUriObj = Object.assign({}, uriObj);
+    delete channelUriObj.path;
+    const channelUri = uri.buildLbryUri(channelUriObj, false);
+
+    let icon, modifier;
+    if (!signature_is_valid) {
+      icon = 'icon-check-circle';
+      modifier = 'valid';
+    } else {
+      icon = 'icon-times-circle';
+      modifier = 'invalid';
+    }
+    return (
+      <span>
+        by <strong>{channelUri}</strong> {' '}
+        <Icon icon={icon} className={`channel-indicator__icon channel-indicator__icon--${modifier}`} />
+      </span>
+    );
+  }
+});
+
+export default ChannelIndicator;
\ No newline at end of file
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 8729eb666..6012fc3ee 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -10,5 +10,6 @@
 @import "component/_menu.scss";
 @import "component/_tooltip.scss";
 @import "component/_load-screen.scss";
+@import "component/_channel-indicator.scss";
 @import "page/_developer.scss";
 @import "page/_watch.scss";
\ No newline at end of file
diff --git a/ui/scss/component/_channel-indicator.scss b/ui/scss/component/_channel-indicator.scss
new file mode 100644
index 000000000..06446e23f
--- /dev/null
+++ b/ui/scss/component/_channel-indicator.scss
@@ -0,0 +1,5 @@
+@import "../global";
+
+.channel-indicator__icon--invalid {
+  color: #b01c2e;
+}