<commit_before><template>
  <div class="modal-container">
    <b-modal
      ref="network"
      :title="$t('interface.network')"
      hide-footer
      centered
      class="bootstrap-modal network nopadding max-height-1"
    >
      <div class="content-block">
        <div class="flex-container">
          <h4 class="modal-title">{{ $t('common.advanced') }}</h4>
          <div class="margin-left-auto add-custom-network">
            <p>{{ $t('interface.addCustomNode') }}</p>
            <div class="sliding-switch-white">
              <label class="switch">
                <input
                  ref="addCustomToggle"
                  type="checkbox"
                  @click="addCustomNetworkToggle"
                />
                <span class="slider round" />
              </label>
            </div>
          </div>
        </div>
      </div>
      <div ref="networkList" class="network-list">
        <div
          v-for="(key, index) in Object.keys(reorderedNetworks)"
          :key="key + index"
          class="content-block"
        >
          <div class="network-title">
            <div class="network-icon">
              <img :src="Networks[key][0].type.icon" />
            </div>
            <h4 :class="key.toLowerCase()">{{ key }}</h4>
          </div>
          <div class="grid-3">
            <p
              v-for="net in Networks[key]"
              :key="net.service"
              :class="
                net.service === network.service &&
                net.type &&
                net.type.name === network.type.name
                  ? 'current-network'
                  : ''
              "
              class="switch-network"
              @click="switchNetwork(net)"
            >
              {{ net.service }}
            </p>
          </div>
        </div>
        <div v-if="customNetworks.length > 0" class="content-block">
          <h4 class="cust">Custom Networks</h4>
          <div
            v-for="(net, idx) in customNetworks"
            :key="net.service + '(' + net.type.name + ')' + idx"
            class="grid-3"
          >
            <div
              :class="
                net.service === network.service &&
                net.type.name === network.type.name
                  ? 'current-network'
                  : ''
              "
              class="switch-network custom-network-item"
            >
              <p @click="switchNetwork(net)">
                {{ net.service }} {{ '(' + net.type.name + ')' }}
              </p>
              <i
                class="fa fa-times-circle"
                @click.prevent="removeNetwork(net, idx)"
              />
            </div>
          </div>
        </div>
      </div>
      <form ref="networkAdd" class="network-add hidden">
        <div class="content-block">
          <div class="input-block-container">
            <input
              v-validate="'required'"
              v-model="name"
              class="custom-input-text-1"
              type="text"
              name="nodeName"
              placeholder="ETH Node Name"
              autocomplete="off"
            />
            <select v-model="selectedNetworkName" class="custom-select-1">
              <option
                v-for="type in types"
                :value="type.name"
                :key="type.name + type.name_long"
                :selected="selectedNetworkName === type.name"
              >
                {{ type.name | capitalize }} -
                {{ type.name_long | capitalize }}
              </option>
            </select>
            <input
              v-validate="{
                required: true,
                url: {
                  require_protocol: true,
                  protocols: ['http', 'https', 'ws', 'wss'],
                  require_tld: false
                }
              }"
              v-model="url"
              class="custom-input-text-1"
              type="text"
              name="nodeUrl"
              placeholder="URL"
              autocomplete="off"
            />
            <input
              v-model="port"
              class="custom-input-text-1"
              type="number"
              name="nodePort"
              placeholder="Port"
              autocomplete="off"
            />
            <input
              v-validate="'required|url:require_protocol'"
              v-show="selectedNetworkName === 'CUS'"
              v-model="blockExplorerTX"
              class="custom-input-text-1"
              type="text"
              name="customExplorerTx"
              placeholder="https://etherscan.io/tx/[[txHash]]"
              autocomplete="off"
            />
            <input
              v-validate="'required|numeric'"
              v-show="selectedNetworkName === 'CUS'"
              v-model="chainID"
              class="custom-input-text-1"
              type="number"
              name="customChain"
              placeholder="Chain ID"
              autocomplete="off"
            />
            <input
              v-validate="'required|url:require_protocol'"
              v-show="selectedNetworkName === 'CUS'"
              v-model="blockExplorerAddr"
              class="custom-input-text-1"
              type="text"
              name="customExplorerAddr"
              placeholder="https://etherscan.io/address/[[address]]"
              autocomplete="off"
            />
          </div>
          <div>
            <p v-show="errors.has('nodeName')">
              {{ errors.first('nodeName') }}
            </p>
            <p v-show="errors.has('nodeUrl')">{{ errors.first('nodeUrl') }}</p>
            <p
              v-show="
                errors.has('customExplorerTx') || blockExplorerTX.length > 0
              "
            >
              {{ errors.first('customExplorerTx') }}
            </p>
            <p v-show="errors.has('customChain') || (chainID && chainID > 0)">
              {{ errors.first('customChain') }}
            </p>
            <p
              v-show="
                errors.has('customExplorerAddr') || blockExplorerAddr.length > 0
              "
            >
              {{ errors.first('customExplorerAddr') }}
            </p>
          </div>
        </div>

        <div class="content-block">
          <div class="flex-container">
            <div>
              <h4 class="modal-title">{{ $t('interface.httpBasicAccess') }}</h4>
              <p class="warning-msg">
                Warning: This information will be saved to your local storage, make sure your computer is secure
              </p>
            </div>
            <div class="margin-left-auto add-custom-network">
              <div class="sliding-switch-white">
                <label class="switch">
                  <input type="checkbox" @click="expendAuth" />
                  <span class="slider round" />
                </label>
              </div>
            </div>
          </div>
          <div ref="authForm" class="auth-form-container hidden">
            <input
              v-model="username"
              class="custom-input-text-1"
              type="text"<commit_msg>Update InterfaceNetworkModal.vue<commit_after><template>
  <div class="modal-container">
    <b-modal
      ref="network"
      :title="$t('interface.network')"
      hide-footer
      centered
      class="bootstrap-modal network nopadding max-height-1"
    >
      <div class="content-block">
        <div class="flex-container">
          <h4 class="modal-title">{{ $t('common.advanced') }}</h4>
          <div class="margin-left-auto add-custom-network">
            <p>{{ $t('interface.addCustomNode') }}</p>
            <div class="sliding-switch-white">
              <label class="switch">
                <input
                  ref="addCustomToggle"
                  type="checkbox"
                  @click="addCustomNetworkToggle"
                />
                <span class="slider round" />
              </label>
            </div>
          </div>
        </div>
      </div>
      <div ref="networkList" class="network-list">
        <div
          v-for="(key, index) in Object.keys(reorderedNetworks)"
          :key="key + index"
          class="content-block"
        >
          <div class="network-title">
            <div class="network-icon">
              <img :src="Networks[key][0].type.icon" />
            </div>
            <h4 :class="key.toLowerCase()">{{ key }}</h4>
          </div>
          <div class="grid-3">
            <p
              v-for="net in Networks[key]"
              :key="net.service"
              :class="
                net.service === network.service &&
                net.type &&
                net.type.name === network.type.name
                  ? 'current-network'
                  : ''
              "
              class="switch-network"
              @click="switchNetwork(net)"
            >
              {{ net.service }}
            </p>
          </div>
        </div>
        <div v-if="customNetworks.length > 0" class="content-block">
          <h4 class="cust">Custom Networks</h4>
          <div
            v-for="(net, idx) in customNetworks"
            :key="net.service + '(' + net.type.name + ')' + idx"
            class="grid-3"
          >
            <div
              :class="
                net.service === network.service &&
                net.type.name === network.type.name
                  ? 'current-network'
                  : ''
              "
              class="switch-network custom-network-item"
            >
              <p @click="switchNetwork(net)">
                {{ net.service }} {{ '(' + net.type.name + ')' }}
              </p>
              <i
                class="fa fa-times-circle"
                @click.prevent="removeNetwork(net, idx)"
              />
            </div>
          </div>
        </div>
      </div>
      <form ref="networkAdd" class="network-add hidden">
        <div class="content-block">
          <div class="input-block-container">
            <input
              v-validate="'required'"
              v-model="name"
              class="custom-input-text-1"
              type="text"
              name="nodeName"
              placeholder="ETH Node Name"
              autocomplete="off"
            />
            <select v-model="selectedNetworkName" class="custom-select-1">
              <option
                v-for="type in types"
                :value="type.name"
                :key="type.name + type.name_long"
                :selected="selectedNetworkName === type.name"
              >
                {{ type.name | capitalize }} -
                {{ type.name_long | capitalize }}
              </option>
            </select>
            <input
              v-validate="{
                required: true,
                url: {
                  require_protocol: true,
                  protocols: ['http', 'https', 'ws', 'wss'],
                  require_tld: false
                }
              }"
              v-model="url"
              class="custom-input-text-1"
              type="text"
              name="nodeUrl"
              placeholder="URL"
              autocomplete="off"
            />
            <input
              v-model="port"
              class="custom-input-text-1"
              type="number"
              name="nodePort"
              placeholder="Port"
              autocomplete="off"
            />
            <input
              v-validate="'required|url:require_protocol'"
              v-show="selectedNetworkName === 'CUS'"
              v-model="blockExplorerTX"
              class="custom-input-text-1"
              type="text"
              name="customExplorerTx"
              placeholder="https://etherscan.io/tx/[[txHash]]"
              autocomplete="off"
            />
            <input
              v-validate="'required|numeric'"
              v-show="selectedNetworkName === 'CUS'"
              v-model="chainID"
              class="custom-input-text-1"
              type="number"
              name="customChain"
              placeholder="Chain ID"
              autocomplete="off"
            />
            <input
              v-validate="'required|url:require_protocol'"
              v-show="selectedNetworkName === 'CUS'"
              v-model="blockExplorerAddr"
              class="custom-input-text-1"
              type="text"
              name="customExplorerAddr"
              placeholder="https://etherscan.io/address/[[address]]"
              autocomplete="off"
            />
          </div>
          <div>
            <p v-show="errors.has('nodeName')">
              {{ errors.first('nodeName') }}
            </p>
            <p v-show="errors.has('nodeUrl')">{{ errors.first('nodeUrl') }}</p>
            <p
              v-show="
                errors.has('customExplorerTx') || blockExplorerTX.length > 0
              "
            >
              {{ errors.first('customExplorerTx') }}
            </p>
            <p v-show="errors.has('customChain') || (chainID && chainID > 0)">
              {{ errors.first('customChain') }}
            </p>
            <p
              v-show="
                errors.has('customExplorerAddr') || blockExplorerAddr.length > 0
              "
            >
              {{ errors.first('customExplorerAddr') }}
            </p>
          </div>
        </div>

        <div class="content-block">
          <div class="flex-container">
            <div>
              <h4 class="modal-title">{{ $t('interface.httpBasicAccess') }}</h4>
              <p class="warning-msg">
                Warning: This information will be saved to your local storage, make sure your computer is secure.
              </p>
            </div>
            <div class="margin-left-auto add-custom-network">
              <div class="sliding-switch-white">
                <label class="switch">
                  <input type="checkbox" @click="expendAuth" />
                  <span class="slider round" />
                </label>
              </div>
            </div>
          </div>
          <div ref="authForm" class="auth-form-container hidden">
            <input
              v-model="username"
              class="custom-input-text-1"
              type="text"
{'fraction_non_alphanumeric': 0.1422389726409827, 'fraction_numerical': 0.0033500837520938024, 'mean_word_length': 1.2078582434514638, 'pattern_counts': {'":': 0, '<': 185, '<?xml version=': 0, '>': 191, 'https://': 4, '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': '3114151', 'n_tokens_mistral': 3826, 'n_tokens_neox': 3678, 'n_words': 610}