<commit_before>const React = window.React = require('react');
import Printify from '../lib/Printify';
import directory from '../directory';

// This is AssetCard2, the preferred way of displaying an asset in stellarterm.
// The parent container should be 340px or wider

// Options
//  - boxy: removes the rounded borders

// You may also pass in children elements to sit nicely with the AssetCard2.
// The children elements are responsible for padding within the AssetCard

const decAtIndex = (input, index) => {
  return parseInt(input.substr(index,2),16);
}
const hexToRgba = (input, opacity) => {
  return 'rgba(' + decAtIndex(input, 1) + ',' + decAtIndex(input, 3) + ',' + decAtIndex(input, 5) + ',' + BACKGROUND_OPACITY + ')';
}

const BACKGROUND_OPACITY = 0.08;

export default class AssetCard2 extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    if (!this.props.code) {
      throw new Error('AssetCard2 expects to get a code in the props. Instead, got: ' + this.props.code)
    }

    let asset = {};
    if (this.props.domain !== undefined) {
      asset = directory.getAssetByDomain(this.props.code, this.props.domain);
      if (asset === null) {
        throw new Error('AssetCard2 expects domains to point to a valid asset/anchor. Please do validation before calling AssetCard2');
      }
    } else if (this.props.issuer !== undefined) {
      asset = directory.resolveAssetByAccountId(this.props.code, this.props.issuer);
    } else {
      throw new Error('AssetCard2 expects to get either domain or issuer');
    }

    let anchor = directory.getAnchor(asset.domain);
    let borderStyle = {};
    let backgroundStyle = {};
    if (anchor.color) {
      borderStyle.borderColor = anchor.color;
      let rgbaColor = hexToRgba(anchor.color, BACKGROUND_OPACITY);
      backgroundStyle.background = rgbaColor;
    }

    let issuerAccountId = (asset.issuer === null) ? 'native lumens' : asset.issuer;
    // Unlike AssetCard (original), this one does not link to the domain. Users can simply type it in the address bar

    let assetCardMain = <div className="AssetCard2__main" style={backgroundStyle}>
      <img className="AssetCard2__logo" src={anchor.logo}></img>
      <div className="AssetCard2__content">
        <div className="AssetCard2__header">
          <span className="AssetCard2__header__code">{asset.code}</span>
          <span className="AssetCard2__header__domain">{anchor.name}</span>
        </div>
        <p className="AssetCard2__issuerAccountId">{issuerAccountId}</p>
      </div>
    </div>

    let containerClassName = 'AssetCard2';

    if (this.props.boxy) {
      containerClassName += ' AssetCard2--boxy';
    }

    if (this.props.children) {
      containerClassName += ' AssetCard2--container';
      return <div className={containerClassName} style={borderStyle}>
        {assetCardMain}
        <div className="AssetCard2__addon" style={Object.assign({}, borderStyle, backgroundStyle)}>
          {this.props.children}
        </div>
      </div>
    }

    return <div className={containerClassName} style={borderStyle}>
      {assetCardMain}
    </div>
  }
};
<commit_msg>Add note about issuer address not being the users<commit_after>const React = window.React = require('react');
import Printify from '../lib/Printify';
import directory from '../directory';

// This is AssetCard2, the preferred way of displaying an asset in stellarterm.
// The parent container should be 340px or wider

// Options
//  - boxy: removes the rounded borders

// You may also pass in children elements to sit nicely with the AssetCard2.
// The children elements are responsible for padding within the AssetCard

const decAtIndex = (input, index) => {
  return parseInt(input.substr(index,2),16);
}
const hexToRgba = (input, opacity) => {
  return 'rgba(' + decAtIndex(input, 1) + ',' + decAtIndex(input, 3) + ',' + decAtIndex(input, 5) + ',' + BACKGROUND_OPACITY + ')';
}

const BACKGROUND_OPACITY = 0.08;

export default class AssetCard2 extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    if (!this.props.code) {
      throw new Error('AssetCard2 expects to get a code in the props. Instead, got: ' + this.props.code)
    }

    let asset = {};
    if (this.props.domain !== undefined) {
      asset = directory.getAssetByDomain(this.props.code, this.props.domain);
      if (asset === null) {
        throw new Error('AssetCard2 expects domains to point to a valid asset/anchor. Please do validation before calling AssetCard2');
      }
    } else if (this.props.issuer !== undefined) {
      asset = directory.resolveAssetByAccountId(this.props.code, this.props.issuer);
    } else {
      throw new Error('AssetCard2 expects to get either domain or issuer');
    }

    let anchor = directory.getAnchor(asset.domain);
    let borderStyle = {};
    let backgroundStyle = {};
    if (anchor.color) {
      borderStyle.borderColor = anchor.color;
      let rgbaColor = hexToRgba(anchor.color, BACKGROUND_OPACITY);
      backgroundStyle.background = rgbaColor;
    }

    let issuerAccountId = (asset.issuer === null) ? 'native lumens' : asset.issuer;
    // Unlike AssetCard (original), this one does not link to the domain. Users can simply type it in the address bar

    let assetCardMain = <div className="AssetCard2__main" style={backgroundStyle}>
      <img className="AssetCard2__logo" src={anchor.logo}></img>
      <div className="AssetCard2__content">
        <div className="AssetCard2__header">
          <span className="AssetCard2__header__code">{asset.code}</span>
          <span className="AssetCard2__header__domain">{anchor.name}</span>
        </div>
        <p className="AssetCard2__issuerAccountId">Issuer (<strong>not you</strong>): {issuerAccountId}</p>
      </div>
    </div>

    let containerClassName = 'AssetCard2';

    if (this.props.boxy) {
      containerClassName += ' AssetCard2--boxy';
    }

    if (this.props.children) {
      containerClassName += ' AssetCard2--container';
      return <div className={containerClassName} style={borderStyle}>
        {assetCardMain}
        <div className="AssetCard2__addon" style={Object.assign({}, borderStyle, backgroundStyle)}>
          {this.props.children}
        </div>
      </div>
    }

    return <div className={containerClassName} style={borderStyle}>
      {assetCardMain}
    </div>
  }
};

{'fraction_non_alphanumeric': 0.1253712677817727, 'fraction_numerical': 0.009379396592152572, 'mean_word_length': 3.385195339273475, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1529217', 'n_tokens_mistral': 1920, 'n_tokens_neox': 1832, 'n_words': 509}