<commit_before><template>
  <div class="modal-container">
    <b-modal ref="confirmation" hide-footer centered class="bootstrap-modal-wide confirmation-modal nopadding" title="Confirmation">
      <div class="modal-content qrcode-modal">
        <div class="tx-info">
          <div class="tx-data tx-from">
            <!-- <img src="~@/assets/images/icons/eth.svg">
            <h3>1.00000 <span>ETH</span></h3> -->
            <div class="address-info">
              <p class="address-title">From Address</p>
              <p>{{from}}</p>
            </div>
          </div>
          <div class="direction">
            <img src="~@/assets/images/icons/right-arrow.svg">
          </div>
          <div class="tx-data tx-to">
            <!-- <img src="~@/assets/images/icons/btc.svg">
            <h3>0.006345 <span>BTC</span></h3> -->
            <div class="address-info">
              <p class="address-title">To Address</p>
              <p>{{to}}</p>
            </div>
          </div>
        </div>
        <div class="detail-info">
          <div class="info">
            <h4>Detail Information</h4>
            <div class="sliding-switch-white">
              <label class="switch">
                <input type="checkbox" v-on:click="modalDetailInformation = !modalDetailInformation">
                <span class="slider round"></span>
              </label>
            </div>
          </div>
          <div class="expended-info" v-if="modalDetailInformation">
            <div class="grid-block">
              <p>Network</p><p>{{$store.state.network.type.name}} by {{$store.state.network.service}}</p>
            </div>
            <div class="grid-block">
              <p>Gas Limit</p><p>{{gas}} wei</p>
            </div>
            <div class="grid-block">
              <p>Gas Price</p><p>{{ gasPrice }} gwei</p>
            </div>
            <div class="grid-block">
              <p>Transaction Fee</p><p> {{fee}} ETH</p>
            </div>
            <div class="grid-block">
              <p>Nonce</p><p>{{nonce}}</p>
            </div>
            <div class="grid-block">
              <p>Data</p><p>{{data}}</p>
            </div>
          </div>
        </div>

        <div class="submit-button-container">
          <div class="flex-center-align">
            <div class="button-with-helper">
              <div class="submit-button large-round-button-green-filled clickable" v-on:click="sendTx">
                Confirm and Send
              </div>
              <div class="tooltip-box-2">
                <b-btn id="exPopover9">
                  <img class="icon" src="~@/assets/images/icons/qr-code.svg">
                </b-btn>
                <b-popover target="exPopover9" triggers="hover focus" placement="top">
                  <div class="qrcode-contents">
                    <p class="qrcode-title">Scan QR code to send/swap instantly</p>
                    <div class="qrcode-block">
                      <qrcode value="Hello, World!" :options="{ size: 100 }"></qrcode>
                    </div>
                    <p class="qrcode-helper">What is that?</p>
                  </div>
                </b-popover>
              </div>
            </div>
          </div>
          <p class="learn-more">Have any issues? <a href="/">Learn more</a></p>
        </div>
      </div>
    </b-modal>
  </div>
</template>

<script>
// eslint-disable-next-line
const unit = require('ethjs-unit')

export default {
  props: ['fee', 'signedTx', 'data', 'from', 'gas', 'gasPrice', 'nonce', 'to', 'value', 'showSuccess'],
  data () {
    return {
      modalDetailInformation: false
    }
  },
  methods: {
    sendTx () {
      this.$store.state.web3.eth.sendSignedTransaction(this.signedTx).on('receipt').then(res => {
        this.$store.dispatch('setAccountNonce', this.nonce + 1)
        this.$store.dispatch('addNotification', [this.from, res, 'Transaction Receipt'])
      }).catch(err => {
        this.$store.dispatch('addNotification', [this.from, err, 'Transaction Error'])
      })

      this.$refs.confirmation.hide()
      this.showSuccess()<commit_msg>Switch send tx callback to event listeners<commit_after><template>
  <div class="modal-container">
    <b-modal ref="confirmation" hide-footer centered class="bootstrap-modal-wide confirmation-modal nopadding" title="Confirmation">
      <div class="modal-content qrcode-modal">
        <div class="tx-info">
          <div class="tx-data tx-from">
            <!-- <img src="~@/assets/images/icons/eth.svg">
            <h3>1.00000 <span>ETH</span></h3> -->
            <div class="address-info">
              <p class="address-title">From Address</p>
              <p>{{from}}</p>
            </div>
          </div>
          <div class="direction">
            <img src="~@/assets/images/icons/right-arrow.svg">
          </div>
          <div class="tx-data tx-to">
            <!-- <img src="~@/assets/images/icons/btc.svg">
            <h3>0.006345 <span>BTC</span></h3> -->
            <div class="address-info">
              <p class="address-title">To Address</p>
              <p>{{to}}</p>
            </div>
          </div>
        </div>
        <div class="detail-info">
          <div class="info">
            <h4>Detail Information</h4>
            <div class="sliding-switch-white">
              <label class="switch">
                <input type="checkbox" v-on:click="modalDetailInformation = !modalDetailInformation">
                <span class="slider round"></span>
              </label>
            </div>
          </div>
          <div class="expended-info" v-if="modalDetailInformation">
            <div class="grid-block">
              <p>Network</p><p>{{$store.state.network.type.name}} by {{$store.state.network.service}}</p>
            </div>
            <div class="grid-block">
              <p>Gas Limit</p><p>{{gas}} wei</p>
            </div>
            <div class="grid-block">
              <p>Gas Price</p><p>{{ gasPrice }} gwei</p>
            </div>
            <div class="grid-block">
              <p>Transaction Fee</p><p> {{fee}} ETH</p>
            </div>
            <div class="grid-block">
              <p>Nonce</p><p>{{nonce}}</p>
            </div>
            <div class="grid-block">
              <p>Data</p><p>{{data}}</p>
            </div>
          </div>
        </div>

        <div class="submit-button-container">
          <div class="flex-center-align">
            <div class="button-with-helper">
              <div class="submit-button large-round-button-green-filled clickable" v-on:click="sendTx">
                Confirm and Send
              </div>
              <div class="tooltip-box-2">
                <b-btn id="exPopover9">
                  <img class="icon" src="~@/assets/images/icons/qr-code.svg">
                </b-btn>
                <b-popover target="exPopover9" triggers="hover focus" placement="top">
                  <div class="qrcode-contents">
                    <p class="qrcode-title">Scan QR code to send/swap instantly</p>
                    <div class="qrcode-block">
                      <qrcode value="Hello, World!" :options="{ size: 100 }"></qrcode>
                    </div>
                    <p class="qrcode-helper">What is that?</p>
                  </div>
                </b-popover>
              </div>
            </div>
          </div>
          <p class="learn-more">Have any issues? <a href="/">Learn more</a></p>
        </div>
      </div>
    </b-modal>
  </div>
</template>

<script>
// eslint-disable-next-line
const unit = require('ethjs-unit')

export default {
  props: ['fee', 'signedTx', 'data', 'from', 'gas', 'gasPrice', 'nonce', 'to', 'value', 'showSuccess'],
  data () {
    return {
      modalDetailInformation: false
    }
  },
  methods: {
    sendTx () {
      this.$store.state.web3.eth.sendSignedTransaction(this.signedTx).on('receipt', (res) => {
        this.$store.dispatch('setAccountNonce', this.nonce + 1)
        this.$store.dispatch('addNotification', [this.from, res, 'Transaction Receipt'])
      }).on('error', (err) => {
        this.$store.dispatch('addNotification', [this.from, err, 'Transaction Error'])
      })

      this.$refs.confirmation.hide()
      this.showSuccess()
{'fraction_non_alphanumeric': 0.18105950653120464, 'fraction_numerical': 0.006531204644412192, 'mean_word_length': 1.729042904290429, 'pattern_counts': {'":': 0, '<': 247, '<?xml version=': 0, '>': 251, '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': '4617076', 'n_tokens_mistral': 2563, 'n_tokens_neox': 2438, 'n_words': 447}