lbry-desktop/ui/js/component/uriIndicator/view.jsx

import React from 'react';
import {Icon} from 'component/common';

class UriIndicator extends React.Component{
  componentWillMount() {
    this.resolve(this.props)
  }

  componentWillReceiveProps(nextProps) {
    this.resolve(nextProps)
  }

  resolve(props) {
    const {
      isResolvingUri,
      resolveUri,
      claim,
      uri,
    } = props

    if(!isResolvingUri && claim === undefined && uri) {
      resolveUri(uri)
    }
  }

  render() {
    const {
      claim,
      uri,
      isResolvingUri
    } = this.props

    if (isResolvingUri) {
      return <span className="empty">Validating...</span>
    }

    if (!claim) {
      return <span className="empty">Unused</span>
    }

    const {
      channel_name: channelName,
      has_signature: hasSignature,
      signature_is_valid: signatureIsValid,
    } = claim

    if (!hasSignature || !channelName) {
      return <span className="empty">Anonymous</span>;
    }

    let icon, modifier;
    if (signatureIsValid) {
      modifier = 'valid';
    } else {
      icon = 'icon-times-circle';
      modifier = 'invalid';
    }

    return (
      <span>
        {channelName} {' '}
        { !signatureIsValid ?
             <Icon icon={icon} className={`channel-indicator__icon channel-indicator__icon--${modifier}`} /> :
             '' }
      </span>
    )
  }
}

export default UriIndicator;