<commit_before>var yo = require('yo-yo')
const copy = require('clipboard-copy')

// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./style-guide')
var styles = styleGuide()

var css = csjs`
  .contractTabView {
    padding: 2%;
  }
  .crow {
    margin-top: 1em;
    display: flex;
  }
  .col1 extends ${styles.titleL} {
    width: 30%;
    float: left;
    align-self: center;
  }
  .col1_1 extends ${styles.titleM} {
    width: 30%;
    float: left;
    align-self: center;
  }
  .col2 extends ${styles.textBoxL}{
    width: 70%;
    height: 7px;
    float: left;
    padding: .8em;
  }
  .select extends ${styles.dropdown} {
    width: 70%;
    float: left;
    text-align: center;
  }
  .contract {
    display: block;
    margin: 4em 0 2em 0;
  }
  .copyaddress {
    color: #C6CFF7;
    margin-right: 0.2em;
    margin-top: 0.3em;
    cursor: pointer;
  }
  .selectAddress extends ${styles.dropdown} {
    width: 73.5%;
    float: left;
    text-align: center;
  }
`

module.exports = contractTab

function contractTab (container, appAPI, appEvents, opts) {
  function copyAddress () {
    copy(document.querySelector('#envView #txorigin').value)
  }
  var el = yo`
    <div class="${css.contractTabView}" id="envView">
      <div class="${css.crow}">
        <div id="selectExEnv" class="${css.col1_1}">
          Execution environment
        </div>
        <select id="selectExEnvOptions" class="${css.select}"><commit_msg>fix run settings UI<commit_after>var yo = require('yo-yo')
const copy = require('clipboard-copy')

// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./style-guide')
var styles = styleGuide()

var css = csjs`
  .contractTabView {
    padding: 2%;
  }
  .crow {
    margin-top: 1em;
    display: flex;
  }
  .col1 extends ${styles.titleL} {
    width: 30%;
    float: left;
    align-self: center;
  }
  .col1_1 extends ${styles.titleM} {
    width: 30%;
    float: left;
    align-self: center;
  }
  .col2 extends ${styles.textBoxL}{
    width: 70%;
    height: 32px;
    float: left;
    padding: .8em;
  }
  .select extends ${styles.dropdown} {
    width: 70%;
    float: left;
    text-align: center;
    height: 32px;
  }
  .contract {
    display: block;
    margin: 4em 0 2em 0;
  }
  .copyaddress {
    color: #C6CFF7;
    margin-right: 0.2em;
    margin-top: 0.7em;
    cursor: pointer;
  }
  .selectAddress extends ${styles.dropdown} {
    width: 74%;
    float: left;
    text-align: center;
    height: 32px;
  }
`

module.exports = contractTab

function contractTab (container, appAPI, appEvents, opts) {
  function copyAddress () {
    copy(document.querySelector('#envView #txorigin').value)
  }
  var el = yo`
    <div class="${css.contractTabView}" id="envView">
      <div class="${css.crow}">
        <div id="selectExEnv" class="${css.col1_1}">
          Execution environment
        </div>
        <select id="selectExEnvOptions" class="${css.select}">
{'fraction_non_alphanumeric': 0.17300694674164738, 'fraction_numerical': 0.02183261660602051, 'mean_word_length': 2.5121951219512195, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, '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': '3675847', 'n_tokens_mistral': 1086, 'n_tokens_neox': 1030, 'n_words': 246}